jQuery(document).ready(function(){
    $(".support-btn").click(function(){
        var sefl = $(this);
        removeSelectBtn();
        sefl.removeClass("btn-default");
        sefl.addClass("btn-primary");
        $("."+$(this).attr("data-class")).show();
    });

    function removeSelectBtn(){
        $(".support-btn").each(function( index ) {
            if($(this).hasClass("btn-primary")){
                $(this).removeClass("btn-primary");
                $(this).addClass("btn-default");
                $("."+$(this).attr("data-class")).hide();
            }
        });
    }

    // validate form
    $.validator.addMethod(
        "regex",
        function(value, element, regexp) {
            var check = false;
            return this.optional(element) || regexp.test(value);
        },
        "Please check your input."
    );

    jQuery.validator.addMethod("phone", function(value, element){
        var $reg1 = /^0[2-8]\d{8}$/,
            $reg2 = /^09\d{8}$/,
            $reg3 = /^0[2-8]\d{8}$/;
        return this.optional(element) || $reg1.test(value) || $reg2.test(value) || $reg3.test(value);
    }, "Số điện thoại không hợp lệ.");

    $("#sendpwtoemail").validate({
        rules: {
            username: {
                required: true,
                minlength: 4,
                maxlength: 32,
                regex : /^[a-zA-Z0-9@.]{4,32}$/,
                remote: {
                    url: 'validate-field.php',
                    type: 'POST',
                    cache: false,
                    dataType: 'JSON',
                    data: {
                        username: function() {
                            return $('#username').val();
                        },
                        validate: 'usernameFound'
                    }
                }
            },
            email: {
                required: true,
                email: true
            }
        },
        messages: {
            username: {
                required: "Bạn chưa nhập Tên đăng nhập.",
                minlength: "Tên đăng nhập phải có ít nhất 4 kí tự.",
                maxlength: "Tên đăng nhập phải có nhỏ hơn 32 kí tự.",
                regex : "Tên tài khoản chỉ gồm chữ, số và các ký tự đặc biệt như '.,@'."
            },
            email: {
                required: "Địa chỉ Email không được để trống.",
                email : "Định dạng Email không hợp lệ."
            }
        }
    });

    $("#sendpwtosms").validate({
        rules: {
            username: {
                required: true,
                minlength: 4,
                maxlength: 32,
                regex : /^[a-zA-Z0-9@.]{4,32}$/,
                remote: {
                    url: 'validate-field.php',
                    type: 'POST',
                    cache: false,
                    dataType: 'JSON',
                    data: {
                        username: function() {
                            return $('#username2').val();
                        },
                        validate: 'usernameFound'
                    }
                }
            },
            phone: {
                required: true,
                phone: true
            }
        },
        messages: {
            username: {
                required: "Bạn chưa nhập Tên đăng nhập.",
                minlength: "Tên đăng nhập phải có ít nhất 4 kí tự.",
                maxlength: "Tên đăng nhập phải có nhỏ hơn 32 kí tự.",
                regex : "Tên tài khoản chỉ gồm chữ, số và các ký tự đặc biệt như '.,@'."
            },
            phone: {
                required: "Bạn chưa nhập số điện thoại.",
                phone: "Số điện thoại không hợp lệ."
            }
        },
        submitHandler: function(form) {
            var thisForm = $(form);
            if (thisForm.valid()) {
                $.ajax({
                    url: 'forgot_password_sms.php',
                    type: 'POST',
                    data: thisForm.serialize(),
                    dataType: 'JSON',
                    success: function (response) {
                        switch (response.status) {
                            case 'success':
                                $('#alertSMS').find('.modal-body').html(response.message);
                                $('#alertSMS').modal('show');
                                thisForm.find('.alertMsg').html('');
                                thisForm.find($('#username')).val('');
                                thisForm.find($('#phone')).val('');
                                break;
                            case 'error':
                                thisForm.find('.alertMsg').html('<div class="alert alert-danger">' + response.message.replace(/\\/g, "") + '</div>');
                                break;
                        }
                    }
                });
            }
        }
    });

    $("#signupforms").validate({
        rules: {
            usernametxt: {
                required: true,
                minlength: 4,
                maxlength: 32,
                regex : /^[a-zA-Z0-9@.]{4,32}$/,
                remote: {
                    url: 'validate-field.php',
                    type: 'POST',
                    cache: false,
                    dataType: 'JSON',
                    data: {
                        username: function() {
                            return $('#usernametxt').val();
                        },
                        validate: 'username'
                    }
                }
            },
            emailtxt: {
                required: true,
                email: true,
                remote: {
                    url: 'validate-field.php',
                    type: 'POST',
                    cache: false,
                    dataType: 'JSON',
                    data: {
                        email: function() {
                            return $('#emailtxt').val();
                        },
                        validate: 'email'
                    }
                }
            },
            passwordtxt: {
                required: true,
                minlength: 8,
                maxlength: 32,
                regex : /.{8,32}$/
            },
            repaswordtxt: {
                equalTo: "#passwordtxt"
            }
        },
        messages: {
            usernametxt: {
                required: "Tên tài khoản không được để trống.",
                minlength: "Tên tài khoản phải có ít nhất 4 kí tự.",
                maxlength: "Tên tài khoản phải có nhỏ hơn 32 kí tự.",
                regex : "Tên tài khoản chỉ gồm chữ, số và các ký tự đặc biệt như '.,@'."
            },
            emailtxt: {
                required: "Email không được để trống.",
                email: "Định dạng email không hợp lệ."
            },
            passwordtxt: {
                required: "Mật khẩu không được để trống.",
                minlength: "Mật khẩu phải có ít nhất 8 kí tự.",
                maxlength: "Mật khẩu phải có nhỏ hơn 32 kí tự.",
                regex : "Mật khẩu có độ dài từ 8 ký tự trở lên. Mật khẩu nên bao gồm cả chữ (viết hoa, viết thường), số và các ký tự đặc biệt như *, &, @..."
            },
            repaswordtxt: {
                equalTo: "Xác nhận mật khẩu không khớp. Vui lòng nhập lại."
            }
        },
        submitHandler: function(form) {
            var thisForm = $(form);
            if(thisForm.valid()) {
                $.ajax({
                    url: "register.php",
                    method: "POST",
                    data: {
                        username : $("#usernametxt").val(),
                        password : $("#passwordtxt").val(),
                        email : $("#emailtxt").val()
                    },
                    dataType: "JSON",
                    success: function(response) {
                        switch (response.status) {
                            case 'success':
                                window.location.href = 'comfirmsuccess.php';
                                break;
                            case 'error':
                                thisForm.find('.alertMsg').html('<div class="alert alert-danger">' + response.message + '</div>');
                                break;
                        }
                    }
                });
            }
        }
    });

    function checkStrength(password) {
        //initial strength
        var strength = 0;

        //if the password length is less than 4, return message.
        if (password.length < 4) {
            return 'Quá ngắn';
        }

        //if length is 8 characters or more, increase strength value
        if (password.length > 7) strength += 1;

        //if password contains both lower and uppercase characters, increase strength value
        if (password.match(/([a-z].*[A-Z])|([A-Z].*[a-z])/))  strength += 1;

        //if it has numbers and characters, increase strength value
        if (password.match(/([a-zA-Z])/) && password.match(/([0-9])/))  strength += 1;

        //if it has one special character, increase strength value
        if (password.match(/([!,%,&,@,#,$,^,*,?,_,~])/))  strength += 1;

        //if it has two special characters, increase strength value
        if (password.match(/(.*[!,%,&,@,#,$,^,*,?,_,~].*[!,%,&,@,#,$,^,*,?,_,~])/)) strength += 1;

        //if value is less than 2
        if (strength < 2 ) {
            return 'Yếu';
        }
        else if (strength == 2 ) {
            return 'Khá tốt';
        }
        else {
            return 'Mạnh';
        }
    }

    $('#signupforms #passwordtxt').on('keyup', function(e){
        var passInput = $(this).val();
        var passStrength = $('#pass-strength');

        if (passInput.length > 1) {
            var strength = checkStrength(passInput);
            var title = 'Độ mạnh mật khẩu: ' + strength;
            var content = 'Mật khẩu có độ dài từ 8 ký tự trở lên. Mật khẩu nên bao gồm cả chữ (viết hoa, viết thường), số và các ký tự đặc biệt như *, &, @...';
            var html;

            if (strength == 'Quá ngắn') {
                html = '<div class="progress hm-progress"><div class="progress-bar" role="progressbar" aria-valuenow="10" aria-valuemin="0" aria-valuemax="100" style="width: 10%; background: #a03;"></div></div>';
            } else if (strength == 'Yếu') {
                html = '<div class="progress hm-progress"><div class="progress-bar" role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" style="width: 40%; background: #a03;"></div></div>';
            } else if (strength == 'Khá tốt') {
                html = '<div class="progress hm-progress"><div class="progress-bar" role="progressbar" aria-valuenow="70" aria-valuemin="0" aria-valuemax="100" style="width: 70%; background: #FFD44B;"></div></div>';
            } else if (strength == 'Mạnh') {
                html = '<div class="progress hm-progress"><div class="progress-bar" role="progressbar" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100" style="width: 100%; background: #76c261;"></div></div>';
            }

            var width = $(window).width();
            if (width <= 768) {
                passStrength.data('placement', 'right');
            } else {
                passStrength.data('placement', 'left');
            }

            passStrength.attr('data-original-title', title + html);
            passStrength.data('content', content);

            if(passStrength.data('bs.popover')) {
                passStrength.data('bs.popover').options.content = content;
            }

            passStrength.popover('show');
        } else {
            passStrength.popover('hide');
        }
    });

    $('#signupforms #passwordtxt').focusout(function(){
       $('#pass-strength').popover('destroy');
    });

    $('#signupforms #usernametxt').click(function(){
        var content = 'Vui lòng nhập tên tài khoản của bạn.';
        var username = $(this);
        var width = $(window).width();

        if (width <= 768) {
            username.data('placement', 'right');
        } else {
            username.data('placement', 'left');
        }

        username.data('content', content);
        username.popover('show');
    });

    $('#signupforms #usernametxt').focusout(function(){
        $(this).popover('destroy');
    });

    $('#signupforms #emailtxt').click(function(){
        var content = 'Chúng tôi sẽ sử dụng địa chỉ Email này cho những việc như bảo mật tài khoản của bạn, gửi thông báo cho bạn. Vui lòng nhập chính xác địa chỉ email của bạn.';
        var email = $(this);
        var width = $(window).width();

        if (width <= 768) {
            email.data('placement', 'right');
        } else {
            email.data('placement', 'left');
        }

        email.data('content', content);
        email.popover('show');
    });

    $('#signupforms #emailtxt').focusout(function(){
        $(this).popover('destroy');
    });
});