{{-- Create this file at: resources/views/front/includes/app-scripts.blade.php --}}

<script>
    $(document).ready(function() {
        // Initialize Select2
        $('.search-category').select2({
            width: '100%',
        });

        // Initialize Selectize for multiple select elements
        const selectizeElements = ['#mySelect', '#mySelect2', '#mySelect3', '#mySelect4'];
        selectizeElements.forEach(selector => {
            if ($(selector).length) {
                $(selector).selectize();
            }
        });

        // Sync select values
        $('#mySelect, #mySelect3').on('change', function() {
            const value = $(this).val();
            if (this.id === 'mySelect') {
                $('#mySelect3').val(value);
            } else {
                $('#mySelect').val(value);
            }
        });

        $('#mySelect2, #mySelect4').on('change', function() {
            const value = $(this).val();
            if (this.id === 'mySelect2') {
                $('#mySelect4').val(value);
            } else {
                $('#mySelect2').val(value);
            }
        });

        // Language selector
        $('select[name="locale"]').on('change', function() {
            window.location.href = this.value;
        });

        // Favorites functionality
        $('.add-to-favorites').on('click', function(event) {
            event.preventDefault();

            const adId = $(this).data('ad-id');
            const url = "{{ route('site.add-remove-favorite', ['ad' => ':adId']) }}".replace(':adId',
                adId);
            const $heartIcon = $(this).find('i');

            $.ajax({
                url: url,
                method: 'GET',
                success: function(response) {
                    $heartIcon.removeClass('far').addClass('fas').css('color', 'red');
                    console.log('Added to favorites successfully');
                },
                error: function(xhr, status, error) {
                    console.error('Error adding to favorites:', error);
                    // Show user-friendly error message
                    Swal.fire({
                        icon: 'error',
                        title: '{{ __('Error') }}',
                        text: '{{ __('Failed to add to favorites. Please try again.') }}'
                    });
                }
            });
        });

        // Interests functionality
        $('.add-to-interests').on('click', function(event) {
            event.preventDefault();

            const catId = $(this).data('cat-id');
            const url = "{{ route('site.add-remove-interstes', ['brand' => ':catId']) }}".replace(
                ':catId', catId);
            const $heartIcon = $(this).find('i');

            $.ajax({
                url: url,
                method: 'GET',
                success: function(response) {
                    $heartIcon.removeClass('far').addClass('fas').css('color', 'red');
                    console.log('Added to interests successfully');
                },
                error: function(xhr, status, error) {
                    console.error('Error adding to interests:', error);
                    // Show user-friendly error message
                    Swal.fire({
                        icon: 'error',
                        title: '{{ __('Error') }}',
                        text: '{{ __('Failed to add to interests. Please try again.') }}'
                    });
                }
            });
        });
    });

    // Mobile detection and popup functionality
    function isMobile() {
        return /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent);
    }

    // Show mobile popup
    if (isMobile() && !localStorage.getItem('popupShown')) {
        document.querySelector('.mobile-popup').style.display = 'block';
    }

    // Mobile popup event handlers
    document.getElementById("backToHome")?.addEventListener("click", function(e) {
        e.preventDefault();
        document.querySelector(".mobile-popup").style.display = "none";
        localStorage.setItem('popupShown', 'true');
    });

    document.querySelector('.close-popup')?.addEventListener('click', function() {
        document.querySelector('.mobile-popup').style.display = 'none';
        localStorage.setItem('popupShown', 'true');
    });

    // Web Share API with fallback
    const shareObject = () => {
        if (navigator.share) {
            navigator.share({
                    title: document.title,
                    text: '{{ __('Check out this content!') }}',
                    url: window.location.href,
                })
                .then(() => console.log('Thanks for sharing!'))
                .catch(console.error);
        } else {
            // Fallback for browsers without Web Share API
            if (navigator.clipboard) {
                navigator.clipboard.writeText(window.location.href)
                    .then(() => {
                        Swal.fire({
                            icon: 'success',
                            title: '{{ __('Link copied!') }}',
                            text: '{{ __('The link has been copied to your clipboard.') }}',
                            timer: 2000,
                            showConfirmButton: false
                        });
                    })
                    .catch(err => {
                        console.error('Could not copy text: ', err);
                    });
            }
        }
    };

    // Phone validation setup
    function initializePhoneValidation(inputSelector, countryCodeSelector = null) {
        const input = document.querySelector(inputSelector);
        if (!input) return;

        const iti = window.intlTelInput(input, {
            initialCountry: "{{ session('country_code', 'ae') }}",
            separateDialCode: true,
            utilsScript: "https://cdn.jsdelivr.net/npm/intl-tel-input@23.0.8/build/js/utils.js",
        });

        input.addEventListener('blur', function() {
            const number = iti.getNumber();
            const isValid = iti.isValidNumber();
            const countryData = iti.getSelectedCountryData();

            if (!isValid && number) {
                Swal.fire({
                    icon: 'error',
                    title: '{{ __('Invalid Number!') }}',
                    text: `{{ __('The number') }} ${number} {{ __('is not valid for') }} ${countryData.name}`,
                });
            }
        });

        // Handle form submission
        $(input).closest('form').on('submit', function(event) {
            event.preventDefault();

            const number = iti.getNumber();
            const isValid = iti.isValidNumber();
            const countryData = iti.getSelectedCountryData();

            // ✅ if countryCodeSelector is provided, remove country code from phone
            if (countryCodeSelector) {
                // Set the separate country code
                $(countryCodeSelector).val(`+${countryData.dialCode}`);

            } else {
                // Otherwise, keep the full international number
                const cleanNumber = number.replace(/\+/g, '');
                $(input).val(cleanNumber);
            }

            if (isValid || !number) {
                // Re-enable default form submission
                this.removeEventListener('submit', arguments.callee);
                this.submit();
            } else {
                Swal.fire({
                    icon: 'error',
                    title: '{{ __('Invalid Number!') }}',
                    text: '{{ __('Please enter a valid phone number.') }}',
                });
            }
        });

        return iti;
    }

    // Initialize phone validation for different inputs
    $(document).ready(function() {
        initializePhoneValidation("#phone");
        initializePhoneValidation("#phone2");
        initializePhoneValidation("#register_phone", "#country_code"); // ✅ sends phone without country code
    });
</script>