@if($phone_verify_active ?? false)
<script>
(function($) {
    "use strict";

    const phoneVerifyConfig = {
        input: @json($phone_input_selector),
        icon: @json($phone_icon_selector),
        message: @json($phone_message_selector),
        county: @json($county_selector ?? null),
        verifyUrl: @json(route('verify-phone')),
        minLength: 10,
        maxLength: 12,
    };

    let phoneValidity = null;
    let verifyTimer = null;
    let currentRequest = null;

    function sanitizePhoneValue(value) {
        let sanitized = String(value || '').replace(/[^\d+]/g, '');

        if (sanitized.includes('+')) {
            sanitized = '+' + sanitized.replace(/\+/g, '');
        }

        return sanitized.slice(0, phoneVerifyConfig.maxLength);
    }

    function isPhoneLengthValid(value) {
        const length = String(value || '').length;
        return length >= phoneVerifyConfig.minLength && length <= phoneVerifyConfig.maxLength;
    }

    function setPhoneState(state, message) {
        const $input = $(phoneVerifyConfig.input);
        const $icon = $(phoneVerifyConfig.icon);
        const $message = $(phoneVerifyConfig.message);

        $input.removeClass('phone-valid phone-invalid phone-pending');
        $icon.removeClass('is-valid is-invalid is-loading');

        if (state === 'idle') {
            $icon.hide();
            $message.hide().text('');
            return;
        }

        $icon.show();

        if (state === 'loading') {
            $input.addClass('phone-pending');
            $icon.addClass('is-loading').html('<span><i class="fa-solid fa-spinner fa-spin"></i></span>');
            $message.hide().text('');
            return;
        }

        if (state === 'valid') {
            $input.addClass('phone-valid');
            $icon.addClass('is-valid').html('<span><i class="fa-solid fa-circle-check"></i></span>');
            $message.removeClass('is-invalid').addClass('is-valid').text(message || '').show();
            return;
        }

        $input.addClass('phone-invalid');
        $icon.addClass('is-invalid').html('<span><i class="fa-solid fa-circle-xmark"></i></span>');
        $message.removeClass('is-valid').addClass('is-invalid').text(message || '').show();
    }

    function verifyPhone() {
        const $input = $(phoneVerifyConfig.input);
        const phone = sanitizePhoneValue($input.val());

        if ($input.val() !== phone) {
            $input.val(phone);
        }

        if (!isPhoneLengthValid(phone)) {
            phoneValidity = null;
            setPhoneState('idle');
            $(document).trigger('phoneVerification:change', [phoneValidity]);
            return;
        }

        setPhoneState('loading');

        if (currentRequest) {
            currentRequest.abort();
        }

        currentRequest = $.ajax({
            type: 'get',
            url: phoneVerifyConfig.verifyUrl,
            data: {
                phone: phone,
                county_id: phoneVerifyConfig.county ? $(phoneVerifyConfig.county).val() : '',
            },
            success: function(response) {
                if (!response.enabled) {
                    phoneValidity = true;
                    setPhoneState('idle');
                    $(document).trigger('phoneVerification:change', [phoneValidity]);
                    return;
                }

                if (response.valid === true) {
                    phoneValidity = true;
                    setPhoneState('valid', response.message);
                } else if (response.valid === false) {
                    phoneValidity = false;
                    setPhoneState('invalid', response.message);
                } else {
                    phoneValidity = null;
                    setPhoneState('invalid', response.message);
                }

                $(document).trigger('phoneVerification:change', [phoneValidity]);
            },
            error: function() {
                phoneValidity = null;
                setPhoneState('invalid', @json(__('translate.Phone could not be verified please try again')));
                $(document).trigger('phoneVerification:change', [phoneValidity]);
            },
            complete: function() {
                currentRequest = null;
            }
        });
    }

    window.getPhoneVerificationStatus = function() {
        return phoneValidity;
    };

    $(document).ready(function() {
        const $input = $(phoneVerifyConfig.input);

        $input.attr({
            maxlength: phoneVerifyConfig.maxLength,
            inputmode: 'tel',
            autocomplete: 'tel',
        });

        $input.on('input', function() {
            const sanitized = sanitizePhoneValue($(this).val());
            if ($(this).val() !== sanitized) {
                $(this).val(sanitized);
            }

            clearTimeout(verifyTimer);
            verifyTimer = setTimeout(verifyPhone, 600);
        });

        $input.on('blur', function() {
            clearTimeout(verifyTimer);
            verifyPhone();
        });

        $input.on('paste', function() {
            const input = this;
            setTimeout(function() {
                const sanitized = sanitizePhoneValue($(input).val());
                $(input).val(sanitized);
                verifyPhone();
            }, 0);
        });

        if (phoneVerifyConfig.county) {
            $(phoneVerifyConfig.county).on('change', function() {
                const phone = sanitizePhoneValue($input.val());
                if (isPhoneLengthValid(phone)) {
                    verifyPhone();
                }
            });
        }

        @if(!empty($verify_on_load))
        const initialPhone = sanitizePhoneValue($input.val());
        $input.val(initialPhone);
        if (isPhoneLengthValid(initialPhone)) {
            verifyPhone();
        }
        @endif
    });
})(jQuery);
</script>
@endif