jQuery(document).ready(function($) {
    var form = $('#page-register form');

    form.find('#register-section-1-telephone-input .get-otp-button').css("display","none");
    form.find('#register-section-1-telephone-input #passwordHelpBlock').css("display","none");
    form.find('#register-telephone-prefix').css("top","50%");
    form.find('#register-section-1-email-input .get-otp-button').css("display","none");
    form.find('#register-section-1-email-input #passwordHelpBlock').css("display","none");
    form.find('#register-section-1-otp-input').css("display" , "none");
        // form.find('input[name="verify"]').on('input', function() {
        //     form.find('#register-section-1-otp-input').css("display" , "flex");
        // });

        jQuery('#register-verify-radio-2').click(function() {
            form.find('#register-section-1-email-input .get-otp-button').css("display","flex");
            form.find('#register-section-1-email-input #passwordHelpBlock').css("display","flex");
            form.find('#register-telephone-prefix').css("top","50%");
            form.find('#register-section-1-telephone-input .get-otp-button').css("display","none");
            form.find('#register-section-1-telephone-input #passwordHelpBlock').css("display","none");
            form.find('#register-section-1-otp-input').css("display" , "flex");
        });

        jQuery('#register-verify-radio-1').click(function() {
            form.find('#register-section-1-email-input .get-otp-button').css("display","none");
            form.find('#register-section-1-email-input #passwordHelpBlock').css("display","none");
            form.find('#register-telephone-prefix').css("top","30%");
            form.find('#register-section-1-telephone-input .get-otp-button').css("display","flex");
            form.find('#register-section-1-telephone-input #passwordHelpBlock').css("display","flex");
            form.find('#register-section-1-otp-input').css("display" , "flex");
        });
    
    // Attach an input event listener to the password field
    form.find('input[name="password"]').on('input', function() {
        const password = $(this).val();
        
        // Clear previous messages
        $('.password-success').remove();

        // Validate the password and get error messages
    // const errorMessages = validatePassword(password);
        
        // Create a container for success messages
        const successContainer = $('<div class="password-success" style="color: #D0821D;  font-size: 12px; padding: 12px;"></div>');

        // Check the validation requirements
        if (password.length >= 8 && password.length <= 16) {
            successContainer.append('<span style="font-weight:bold;color: green;">&#10003</span><span style="color: green;"> 最少8-16個字符</span><br>'); // "Valid length (8-16 characters)"
        } else {
            successContainer.append('<span style="font-weight:bold;color: grey;">&#10003;</span> 最少8-16個字符<br>'); // "At least 8 characters"
        }
        
        if (/[0-9]/.test(password)) {
            successContainer.append('<span style="font-weight:bold;color: green;">&#10003</span><span style="color: green;"> 至少一個數字</span><br>'); // "Contains a digit"
        } else {
            successContainer.append('<span style="font-weight:bold;color: grey;">&#10003;</span> 至少一個數字<br>'); // "Contains a digit"
        }

        if (/[A-Z]/.test(password)) {
            successContainer.append('<span style="font-weight:bold;color: green;">&#10003</span><span style="color: green;"> 至少一個大寫字母</span><br>'); // "Contains an uppercase letter"
        } else {
            successContainer.append('<span style="font-weight:bold;color: grey;">&#10003;</span> 至少一個大寫字母<br>'); // "Contains an uppercase letter"
        }

        if (/[a-z]/.test(password)) {
            successContainer.append('<span style="font-weight:bold;color: green;">&#10003</span><span style="color: green;"> 包含小寫字母</span><br>'); // "Contains a lowercase letter"
        } else {
            successContainer.append('<span style="font-weight:bold;color:grey;">&#10003;</span> 包含小寫字母<br>'); // "Contains a lowercase letter"
        }

        if (/[!@#$%&]/.test(password)) {
            successContainer.append('<span style="font-weight:bold;color: green;">&#10003</span><span style="color: green;"> 至少一個特殊字符(! @ # $ % &)</span><br>'); // "Contains a special character"
        } else {
            successContainer.append('<span style="font-weight:bold;color: grey;">&#10003;</span> 至少一個特殊字符(! @ # $ % &)<br>'); // "Contains a special character"
        }

        // Append success messages if there are any
        if (successContainer.children().length > 0) {
            $(this).parent().append(successContainer);
        }
    });

    $("#page-register .submit-form").on('click', function(e){
        e.preventDefault();
        var form = $('#page-register form');
        form.formity(
            {
                action: "register",
                title: (form.find('input[name="title"]:checked').val())?form.find('input[name="title"]:checked').val():'',
                telephone_prefix: form.find('#register-telephone-prefix').val(),
                first_name: form.find('#register-fname').val(),
                last_name: form.find('#register-lname').val(),
                verify: (form.find('input[name="verify"]:checked').val())?form.find('input[name="verify"]:checked').val():'',
                email: form.find('#register-email').val(),
                otp: form.find('#register-otp').val(),
                birth_month : form.find('#datepicker-month').val(),
                telephone: form.find("#register-telephone").val(),
                password: form.find('#register-password').val(),
                passwordConfirm: form.find('#register-password-confirm').val(),
                terms: form.find('#register-terms').is(':checked') ? 1 : 0,
                promo: form.find('#register-promo').is(':checked') ? 1 : 0,
                securityRegister: form.find('#securityRegister').val(),
            },
            "無法註冊",
            php_vars_register.redirectUrl,
        );
    })
});