@props(['id', 'name', 'value' => '', 'required' => false, 'placeholder' => 'Phone number'])

<div class="phone-input-container flex flex-col">
    <div class="flex rounded-md overflow-hidden">
        <div class="country-select-container relative w-1/3">
            <select
                id="{{ $id }}_country_code"
                name="{{ $name }}_country_code"
                class="flex h-10 w-full rounded-l-md border border-input bg-background pl-10 pr-3 py-2 text-sm ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 appearance-none"
                {{ $required ? 'required' : '' }}
            >
                <option value="+1" data-country-code="US" data-currency="USD" data-pattern="XXX-XXX-XXXX" data-example="555-123-4567">🇺🇸 +1</option>
                <option value="+254" data-country-code="KE" data-currency="KES" data-pattern="XXX XXX XXX" data-example="712 345 678" data-prefix="0" data-prefix-replace="true" data-valid-prefixes="7,1">🇰🇪 +254</option>
                <option value="+44" data-country-code="GB" data-currency="GBP" data-pattern="XXXX XXXXXX" data-example="7911 123456">🇬🇧 +44</option>
                <option value="+91" data-country-code="IN" data-currency="INR" data-pattern="XXXXX XXXXX" data-example="98765 43210">🇮🇳 +91</option>
                <option value="+27" data-country-code="ZA" data-currency="ZAR" data-pattern="XX XXX XXXX" data-example="82 123 4567">🇿🇦 +27</option>
                <option value="+61" data-country-code="AU" data-currency="AUD" data-pattern="XXX XXX XXX" data-example="412 345 678">🇦🇺 +61</option>
                <option value="+81" data-country-code="JP" data-currency="JPY" data-pattern="XX XXXX XXXX" data-example="90 1234 5678">🇯🇵 +81</option>
                <option value="+49" data-country-code="DE" data-currency="EUR" data-pattern="XXXX XXXXXXX" data-example="1512 3456789">🇩🇪 +49</option>
                <option value="+33" data-country-code="FR" data-currency="EUR" data-pattern="X XX XX XX XX" data-example="6 12 34 56 78">🇫🇷 +33</option>
                <option value="+86" data-country-code="CN" data-currency="CNY" data-pattern="XXX XXXX XXXX" data-example="139 1234 5678">🇨🇳 +86</option>
                <option value="+234" data-country-code="NG" data-currency="NGN" data-pattern="XXX XXX XXXX" data-example="802 123 4567">🇳🇬 +234</option>
                <option value="+255" data-country-code="TZ" data-currency="TZS" data-pattern="XXX XXX XXX" data-example="754 123 456">🇹🇿 +255</option>
                <option value="+256" data-country-code="UG" data-currency="UGX" data-pattern="XXX XXXXXX" data-example="712 345678">🇺🇬 +256</option>
                <option value="+250" data-country-code="RW" data-currency="RWF" data-pattern="XXX XXX XXX" data-example="722 123 456">🇷🇼 +250</option>
                <option value="+251" data-country-code="ET" data-currency="ETB" data-pattern="XX XXX XXXX" data-example="91 123 4567">🇪🇹 +251</option>
            </select>
            <div class="absolute left-3 top-1/2 transform -translate-y-1/2 pointer-events-none">
                <span class="flag-icon" id="{{ $id }}_flag">🇺🇸</span>
            </div>
            <div class="absolute right-3 top-1/2 transform -translate-y-1/2 pointer-events-none">
                <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 text-gray-500" viewBox="0 0 20 20" fill="currentColor">
                    <path fill-rule="evenodd" d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z" clip-rule="evenodd" />
                </svg>
            </div>
        </div>
        <input
            type="tel"
            id="{{ $id }}"
            name="{{ $name }}"
            value="{{ $value }}"
            placeholder="{{ $placeholder }}"
            {{ $required ? 'required' : '' }}
            {{ $attributes->merge(['class' => 'flex h-10 w-full rounded-r-md border border-input bg-background px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 border-l-0']) }}
        />
    </div>
    <div class="mt-1 text-xs text-gray-500" id="{{ $id }}_format_hint"></div>
</div>

<input type="hidden" id="{{ $id }}_currency" name="{{ $name }}_currency" value="USD">
<input type="hidden" id="{{ $id }}_full" name="{{ $name }}_full" value="">

<script>
    document.addEventListener('DOMContentLoaded', function() {
        const countrySelect = document.getElementById('{{ $id }}_country_code');
        const flagIcon = document.getElementById('{{ $id }}_flag');
        const phoneInput = document.getElementById('{{ $id }}');
        const currencyInput = document.getElementById('{{ $id }}_currency');
        const fullPhoneInput = document.getElementById('{{ $id }}_full');
        const formatHint = document.getElementById('{{ $id }}_format_hint');
        
        // Flag emoji mapping
        const flagEmojis = {
            'US': '🇺🇸', 'KE': '🇰🇪', 'GB': '🇬🇧', 'IN': '🇮🇳', 'ZA': '🇿🇦',
            'AU': '🇦🇺', 'JP': '🇯🇵', 'DE': '🇩🇪', 'FR': '🇫🇷', 'CN': '🇨🇳',
            'NG': '🇳🇬', 'TZ': '🇹🇿', 'UG': '🇺🇬', 'RW': '🇷🇼', 'ET': '🇪🇹'
        };
        
        // Update flag, format hint, and format when country changes
        countrySelect.addEventListener('change', function() {
            updateCountryInfo();
            formatPhoneNumber();
        });
        
        // Format phone number as user types
        phoneInput.addEventListener('input', function(e) {
            const selectedOption = countrySelect.options[countrySelect.selectedIndex];
            const countryCode = selectedOption.getAttribute('data-country-code');
            const validPrefixes = selectedOption.getAttribute('data-valid-prefixes');
            
            // For Kenya, enforce valid starting digits (7 or 1)
            if (countryCode === 'KE' && validPrefixes) {
                let input = e.target.value.replace(/\D/g, '');
                
                // Handle case where user enters 0 prefix
                if (input.startsWith('0')) {
                    input = input.substring(1);
                }
                
                // Check if the first digit is valid for Kenya
                if (input.length > 0) {
                    const firstDigit = input.charAt(0);
                    const validPrefixArray = validPrefixes.split(',');
                    
                    if (!validPrefixArray.includes(firstDigit)) {
                        // If invalid first digit, replace with first valid prefix
                        input = validPrefixArray[0] + input.substring(1);
                    }
                }
                
                // Store the raw digits for formatting
                e.target._rawDigits = input;
            }
            
            formatPhoneNumber();
        });
        
        // Update country information (flag, format hint)
        function updateCountryInfo() {
            const selectedOption = countrySelect.options[countrySelect.selectedIndex];
            const countryCode = selectedOption.getAttribute('data-country-code');
            const pattern = selectedOption.getAttribute('data-pattern');
            const example = selectedOption.getAttribute('data-example');
            const currency = selectedOption.getAttribute('data-currency');
            
            // Update flag
            flagIcon.textContent = flagEmojis[countryCode] || '🌍';
            
            // Update format hint
            formatHint.textContent = `Format: ${pattern} (e.g., ${example})`;
            
            // Update currency
            currencyInput.value = currency;
            
            // Clear phone input if country changes
            if (phoneInput._lastCountry && phoneInput._lastCountry !== countryCode) {
                phoneInput.value = '';
                phoneInput._rawDigits = '';
            }
            
            phoneInput._lastCountry = countryCode;
        }
        
        // Format phone number based on country
        function formatPhoneNumber() {
            const selectedOption = countrySelect.options[countrySelect.selectedIndex];
            const countryCode = selectedOption.getAttribute('data-country-code');
            const dialCode = selectedOption.value;
            const hasPrefix = selectedOption.getAttribute('data-prefix') !== null;
            const prefixReplace = selectedOption.getAttribute('data-prefix-replace') === 'true';
            const prefix = selectedOption.getAttribute('data-prefix') || '';
            
            // Get raw digits from input, removing all non-numeric characters
            let rawDigits = phoneInput._rawDigits || phoneInput.value.replace(/\D/g, '');
            
            // Handle country-specific formatting
            if (countryCode === 'KE') { // Kenya
                // Handle 0 prefix for Kenya
                if (rawDigits.startsWith('0')) {
                    rawDigits = rawDigits.substring(1);
                }
                
                // Format the phone number
                let formattedNumber = '';
                if (rawDigits.length > 0) {
                    if (rawDigits.length <= 3) {
                        formattedNumber = rawDigits;
                    } else if (rawDigits.length <= 6) {
                        formattedNumber = rawDigits.substring(0, 3) + ' ' + rawDigits.substring(3);
                    } else {
                        formattedNumber = rawDigits.substring(0, 3) + ' ' + 
                                        rawDigits.substring(3, 6) + ' ' + 
                                        rawDigits.substring(6, 9);
                    }
                }
                
                // Store the formatted number
                if (phoneInput.value !== formattedNumber) {
                    phoneInput.value = formattedNumber;
                }
                
                // Store the full international number
                fullPhoneInput.value = rawDigits ? dialCode + rawDigits : '';
            } else if (countryCode === 'US') { // US
                // Format: XXX-XXX-XXXX
                let formattedNumber = '';
                if (rawDigits.length > 0) {
                    if (rawDigits.length <= 3) {
                        formattedNumber = rawDigits;
                    } else if (rawDigits.length <= 6) {
                        formattedNumber = rawDigits.substring(0, 3) + '-' + rawDigits.substring(3);
                    } else {
                        formattedNumber = rawDigits.substring(0, 3) + '-' + 
                                        rawDigits.substring(3, 6) + '-' + 
                                        rawDigits.substring(6, 10);
                    }
                }
                
                // Store the formatted number
                if (phoneInput.value !== formattedNumber) {
                    phoneInput.value = formattedNumber;
                }
                
                // Store the full international number
                fullPhoneInput.value = rawDigits ? dialCode + rawDigits : '';
            } else {
                // Generic formatting for other countries
                // Just store the full international number
                let rawInput = phoneInput.value.replace(/\D/g, '');
                fullPhoneInput.value = rawInput ? dialCode + rawInput : '';
            }
            
            // Store raw digits for future formatting
            phoneInput._rawDigits = rawDigits;
        }
        
        // Initialize with default values
        updateCountryInfo();
        formatPhoneNumber();
        
        // Set Kenya as default for Kenyan site
        const kenyaOption = Array.from(countrySelect.options).find(option => 
            option.getAttribute('data-country-code') === 'KE'
        );
        
        if (kenyaOption) {
            kenyaOption.selected = true;
            updateCountryInfo();
        }
    });
</script>