Untitled

add_action('wp_head', 'b2bking_custom_required_fields_script');
function b2bking_custom_required_fields_script() {
    ?>
    <script type="text/javascript">
    jQuery(document).ready(function($) {
        // Add required attribute to the fields
        $('input[name="b2bking_subaccounts_new_account_name"]').prop('required', true);
        $('input[name="b2bking_subaccounts_new_account_last_name"]').prop('required', true);
        $('input[name="b2bking_subaccounts_new_account_job_title"]').prop('required', true);
        $('input[name="b2bking_subaccounts_new_account_phone_number"]').prop('required', true);

        // Initially hide validation errors
        $('.b2bking_subaccounts_new_account_container_content_bottom_validation_errors').hide();

        $('body').on('click', '.b2bking_subaccounts_new_account_container_content_bottom_button', function(e) {
            // Clear and hide displayed validation errors initially
            $('.b2bking_subaccounts_new_account_container_content_bottom_validation_errors').html('').hide();
            let validationErrors = '';

            // Get all field values
            let username = 123;
            if (parseInt(b2bking_display_settings.disable_username_subaccounts) === 0) {
                username = $('input[name="b2bking_subaccounts_new_account_username"]').val().trim();
            }
            let email = $('input[name="b2bking_subaccounts_new_account_email_address"]').val().trim();
            let password = $('input[name="b2bking_subaccounts_new_account_password"]').val().trim();
            let name = $('input[name="b2bking_subaccounts_new_account_name"]').val().trim();
            let lastName = $('input[name="b2bking_subaccounts_new_account_last_name"]').val().trim();
            let jobTitle = $('input[name="b2bking_subaccounts_new_account_job_title"]').val().trim();
            let phone = $('input[name="b2bking_subaccounts_new_account_phone_number"]').val().trim();

            // Validate username (if applicable)
            if (parseInt(b2bking_display_settings.disable_username_subaccounts) === 0) {
                if (/^(?!.*[_.]$)(?=.{8,30}$)(?![_.])(?!.*[_.]{2})[a-zA-Z0-9._-\d@]+$/.test(username) === false) {
                    validationErrors += b2bking_display_settings.newSubaccountUsernameError + '<br>';
                }
            }

            // Validate email
            if (/^([a-zA-Z0-9_.+-])+\@(([a-zA-Z0-9-])+\.)+([a-zA-Z0-9]{2,4})+$/.test(email) === false) {
                validationErrors += b2bking_display_settings.newSubaccountEmailError + '<br>';
            }

            // Validate password
            if (/^(?=.*[A-Za-z])(?=.*[\d]).{8,}$/.test(password) === false) {
                validationErrors += b2bking_display_settings.newSubaccountPasswordError + '<br>';
            }

            // Validate required personal details
            if (!name) validationErrors += 'First Name is required<br>';
            if (!lastName) validationErrors += 'Last Name is required<br>';
            if (!jobTitle) validationErrors += 'Job Title is required<br>';
            if (!phone) validationErrors += 'Phone Number is required<br>';

            if (validationErrors !== '') {
                // Show errors and make visible
                $('.b2bking_subaccounts_new_account_container_content_bottom_validation_errors')
                    .html(validationErrors)
                    .show();
                
                // Add error styling to empty fields
                $('input[name="b2bking_subaccounts_new_account_name"]').toggleClass('error-field', !name);
                $('input[name="b2bking_subaccounts_new_account_last_name"]').toggleClass('error-field', !lastName);
                $('input[name="b2bking_subaccounts_new_account_job_title"]').toggleClass('error-field', !jobTitle);
                $('input[name="b2bking_subaccounts_new_account_phone_number"]').toggleClass('error-field', !phone);
                
                return false;
            }

            // If we get here, all validations passed - proceed with AJAX
            let checkboxBuy = $('input[name="b2bking_subaccounts_new_account_container_content_element_checkbox_buy"]').prop('checked');
            let checkboxBuyApproval = $('input[name="b2bking_subaccounts_new_account_container_content_element_checkbox_buy_approval"]').prop('checked');
            let checkboxViewOrders = $('input[name="b2bking_subaccounts_new_account_container_content_element_checkbox_view_orders"]').prop('checked');
            let checkboxViewSubscriptions = $('input[name="b2bking_subaccounts_new_account_container_content_element_checkbox_view_subscriptions"]').prop('checked');
            let checkboxViewOffers = $('input[name="b2bking_subaccounts_new_account_container_content_element_checkbox_view_offers"]').prop('checked');
            let checkboxViewConversations = $('input[name="b2bking_subaccounts_new_account_container_content_element_checkbox_view_conversations"]').prop('checked');
            let checkboxViewLists = $('input[name="b2bking_subaccounts_new_account_container_content_element_checkbox_view_lists"]').prop('checked');

            // Replace icon with loader
            var buttonoriginal = $('.b2bking_subaccounts_new_account_container_content_bottom_button').html();
            $('<img class="b2bking_loader_icon_button" src="'+b2bking_display_settings.loadertransparenturl+'">').insertBefore('.b2bking_subaccounts_new_account_container_content_bottom_button_icon');
            $('.b2bking_subaccounts_new_account_container_content_bottom_button_icon').remove();

            // Send AJAX account creation request
            var datavar = {
                action: 'b2bking_create_subaccount',
                security: b2bking_display_settings.security,
                username: username,
                password: password,
                name: name,
                lastName: lastName,
                jobTitle: jobTitle,
                email: email,
                phone: phone,
                permissionBuy: checkboxBuy,
                permissionBuyApproval: checkboxBuyApproval,
                permissionViewOrders: checkboxViewOrders,
                permissionViewSubscriptions: checkboxViewSubscriptions,
                permissionViewOffers: checkboxViewOffers,
                permissionViewConversations: checkboxViewConversations,
                permissionViewLists: checkboxViewLists,
            };

            // Get custom fields
            let customfields = $('#b2bking_custom_new_subaccount_fields').val().split(';');
            customfields.forEach(function(textinput) {
                let value = $('input[name="'+textinput+'"]').val();
                datavar[textinput] = value;
            });

            $.post(b2bking_display_settings.ajaxurl, datavar, function(response) {
                if (response.startsWith('error')) {
                    $('.b2bking_subaccounts_new_account_container_content_bottom_validation_errors')
                        .html(b2bking_display_settings.newSubaccountAccountError+' '+response.substring(5))
                        .show();
                    $('.b2bking_subaccounts_new_account_container_content_bottom_button').html(buttonoriginal);
                } else if (response === 'error_maximum_subaccounts') {
                    $('.b2bking_subaccounts_new_account_container_content_bottom_validation_errors')
                        .html(b2bking_display_settings.newSubaccountMaximumSubaccountsError)
                        .show();
                    $('.b2bking_subaccounts_new_account_container_content_bottom_button').html(buttonoriginal);
                } else {
                    window.location = b2bking_display_settings.subaccountsurl;
                }
            });
        });

        // Clear error styling when user starts typing
        $('input[name^="b2bking_subaccounts_new_account"]').on('input', function() {
            $(this).removeClass('error-field');
            var allFilled = true;
            $('input[name="b2bking_subaccounts_new_account_name"], ' +
              'input[name="b2bking_subaccounts_new_account_last_name"], ' +
              'input[name="b2bking_subaccounts_new_account_job_title"], ' +
              'input[name="b2bking_subaccounts_new_account_phone_number"]').each(function() {
                if (!$(this).val().trim()) allFilled = false;
            });
            if (allFilled) {
                $('.b2bking_subaccounts_new_account_container_content_bottom_validation_errors').hide();
            }
        });
    });
    </script>
    <style type="text/css">
        .error-field {
            border: 1px solid red !important;
            background-color: #fff5f5 !important;
        }
        .b2bking_subaccounts_new_account_container_content_bottom_validation_errors {
            color: red;
            margin-bottom: 10px;
        }
    </style>
    <?php
}