{{-- filepath: resources/views/components/frontend/phone-number.blade.php --}}
<!-- Phone Number -->
<div x-data="{
    phones: $wire.entangle('phone').defer || [{ code: '+1', number: '' }],
    countryCodes: [
        { code: '+93', name: 'AFG', iso: 'af' },
        { code: '+355', name: 'ALB', iso: 'al' },
        { code: '+213', name: 'DZA', iso: 'dz' },
        { code: '+376', name: 'AND', iso: 'ad' },
        { code: '+244', name: 'AGO', iso: 'ao' },
        { code: '+1268', name: 'ATG', iso: 'ag' },
        { code: '+54', name: 'ARG', iso: 'ar' },
        { code: '+374', name: 'ARM', iso: 'am' },
        { code: '+61', name: 'AUS', iso: 'au' },
        { code: '+43', name: 'AUT', iso: 'at' },
        { code: '+994', name: 'AZE', iso: 'az' },
        { code: '+1242', name: 'BHS', iso: 'bs' },
        { code: '+973', name: 'BHR', iso: 'bh' },
        { code: '+880', name: 'BGD', iso: 'bd' },
        { code: '+1246', name: 'BRB', iso: 'bb' },
        { code: '+375', name: 'BLR', iso: 'by' },
        { code: '+32', name: 'BEL', iso: 'be' },
        { code: '+501', name: 'BLZ', iso: 'bz' },
        { code: '+229', name: 'BEN', iso: 'bj' },
        { code: '+975', name: 'BTN', iso: 'bt' },
        { code: '+591', name: 'BOL', iso: 'bo' },
        { code: '+387', name: 'BIH', iso: 'ba' },
        { code: '+267', name: 'BWA', iso: 'bw' },
        { code: '+55', name: 'BRA', iso: 'br' },
        { code: '+673', name: 'BRN', iso: 'bn' },
        { code: '+359', name: 'BGR', iso: 'bg' },
        { code: '+226', name: 'BFA', iso: 'bf' },
        { code: '+257', name: 'BDI', iso: 'bi' },
        { code: '+238', name: 'CPV', iso: 'cv' },
        { code: '+855', name: 'KHM', iso: 'kh' },
        { code: '+237', name: 'CMR', iso: 'cm' },
        { code: '+236', name: 'CAF', iso: 'cf' },
        { code: '+235', name: 'TCD', iso: 'td' },
        { code: '+56', name: 'CHL', iso: 'cl' },
        { code: '+86', name: 'CHN', iso: 'cn' },
        { code: '+57', name: 'COL', iso: 'co' },
        { code: '+269', name: 'COM', iso: 'km' },
        { code: '+242', name: 'COG', iso: 'cg' },
        { code: '+243', name: 'COD', iso: 'cd' },
        { code: '+506', name: 'CRI', iso: 'cr' },
        { code: '+225', name: 'CIV', iso: 'ci' },
        { code: '+385', name: 'HRV', iso: 'hr' },
        { code: '+53', name: 'CUB', iso: 'cu' },
        { code: '+357', name: 'CYP', iso: 'cy' },
        { code: '+420', name: 'CZE', iso: 'cz' },
        { code: '+45', name: 'DNK', iso: 'dk' },
        { code: '+253', name: 'DJI', iso: 'dj' },
        { code: '+1767', name: 'DMA', iso: 'dm' },
        { code: '+1809', name: 'DOM', iso: 'do' },
        { code: '+593', name: 'ECU', iso: 'ec' },
        { code: '+20', name: 'EGY', iso: 'eg' },
        { code: '+503', name: 'SLV', iso: 'sv' },
        { code: '+240', name: 'GNQ', iso: 'gq' },
        { code: '+291', name: 'ERI', iso: 'er' },
        { code: '+372', name: 'EST', iso: 'ee' },
        { code: '+268', name: 'SWZ', iso: 'sz' },
        { code: '+251', name: 'ETH', iso: 'et' },
        { code: '+679', name: 'FJI', iso: 'fj' },
        { code: '+358', name: 'FIN', iso: 'fi' },
        { code: '+33', name: 'FRA', iso: 'fr' },
        { code: '+241', name: 'GAB', iso: 'ga' },
        { code: '+220', name: 'GMB', iso: 'gm' },
        { code: '+995', name: 'GEO', iso: 'ge' },
        { code: '+49', name: 'DEU', iso: 'de' },
        { code: '+233', name: 'GHA', iso: 'gh' },
        { code: '+30', name: 'GRC', iso: 'gr' },
        { code: '+1473', name: 'GRD', iso: 'gd' },
        { code: '+502', name: 'GTM', iso: 'gt' },
        { code: '+224', name: 'GIN', iso: 'gn' },
        { code: '+245', name: 'GNB', iso: 'gw' },
        { code: '+592', name: 'GUY', iso: 'gy' },
        { code: '+509', name: 'HTI', iso: 'ht' },
        { code: '+504', name: 'HND', iso: 'hn' },
        { code: '+36', name: 'HUN', iso: 'hu' },
        { code: '+354', name: 'ISL', iso: 'is' },
        { code: '+91', name: 'IND', iso: 'in' },
        { code: '+62', name: 'IDN', iso: 'id' },
        { code: '+98', name: 'IRN', iso: 'ir' },
        { code: '+964', name: 'IRQ', iso: 'iq' },
        { code: '+353', name: 'IRL', iso: 'ie' },
        { code: '+972', name: 'ISR', iso: 'il' },
        { code: '+39', name: 'ITA', iso: 'it' },
        { code: '+1876', name: 'JAM', iso: 'jm' },
        { code: '+81', name: 'JPN', iso: 'jp' },
        { code: '+962', name: 'JOR', iso: 'jo' },
        { code: '+254', name: 'KEN', iso: 'ke' },
        { code: '+686', name: 'KIR', iso: 'ki' },
        { code: '+965', name: 'KWT', iso: 'kw' },
        { code: '+996', name: 'KGZ', iso: 'kg' },
        { code: '+856', name: 'LAO', iso: 'la' },
        { code: '+371', name: 'LVA', iso: 'lv' },
        { code: '+961', name: 'LBN', iso: 'lb' },
        { code: '+266', name: 'LSO', iso: 'ls' },
        { code: '+231', name: 'LBR', iso: 'lr' },
        { code: '+218', name: 'LBY', iso: 'ly' },
        { code: '+423', name: 'LIE', iso: 'li' },
        { code: '+370', name: 'LTU', iso: 'lt' },
        { code: '+352', name: 'LUX', iso: 'lu' },
        { code: '+261', name: 'MDG', iso: 'mg' },
        { code: '+265', name: 'MWI', iso: 'mw' },
        { code: '+60', name: 'MYS', iso: 'my' },
        { code: '+960', name: 'MDV', iso: 'mv' },
        { code: '+223', name: 'MLI', iso: 'ml' },
        { code: '+356', name: 'MLT', iso: 'mt' },
        { code: '+692', name: 'MHL', iso: 'mh' },
        { code: '+222', name: 'MRT', iso: 'mr' },
        { code: '+230', name: 'MUS', iso: 'mu' },
        { code: '+52', name: 'MEX', iso: 'mx' },
        { code: '+691', name: 'FSM', iso: 'fm' },
        { code: '+373', name: 'MDA', iso: 'md' },
        { code: '+377', name: 'MCO', iso: 'mc' },
        { code: '+976', name: 'MNG', iso: 'mn' },
        { code: '+382', name: 'MNE', iso: 'me' },
        { code: '+212', name: 'MAR', iso: 'ma' },
        { code: '+258', name: 'MOZ', iso: 'mz' },
        { code: '+95', name: 'MMR', iso: 'mm' },
        { code: '+264', name: 'NAM', iso: 'na' },
        { code: '+674', name: 'NRU', iso: 'nr' },
        { code: '+977', name: 'NPL', iso: 'np' },
        { code: '+31', name: 'NLD', iso: 'nl' },
        { code: '+64', name: 'NZL', iso: 'nz' },
        { code: '+505', name: 'NIC', iso: 'ni' },
        { code: '+227', name: 'NER', iso: 'ne' },
        { code: '+234', name: 'NGA', iso: 'ng' },
        { code: '+850', name: 'PRK', iso: 'kp' },
        { code: '+389', name: 'MKD', iso: 'mk' },
        { code: '+47', name: 'NOR', iso: 'no' },
        { code: '+968', name: 'OMN', iso: 'om' },
        { code: '+92', name: 'PAK', iso: 'pk' },
        { code: '+680', name: 'PLW', iso: 'pw' },
        { code: '+507', name: 'PAN', iso: 'pa' },
        { code: '+675', name: 'PNG', iso: 'pg' },
        { code: '+595', name: 'PRY', iso: 'py' },
        { code: '+51', name: 'PER', iso: 'pe' },
        { code: '+63', name: 'PHL', iso: 'ph' },
        { code: '+48', name: 'POL', iso: 'pl' },
        { code: '+351', name: 'PRT', iso: 'pt' },
        { code: '+974', name: 'QAT', iso: 'qa' },
        { code: '+40', name: 'ROU', iso: 'ro' },
        { code: '+7', name: 'RUS', iso: 'ru' },
        { code: '+250', name: 'RWA', iso: 'rw' },
        { code: '+1869', name: 'KNA', iso: 'kn' },
        { code: '+1758', name: 'LCA', iso: 'lc' },
        { code: '+1784', name: 'VCT', iso: 'vc' },
        { code: '+685', name: 'WSM', iso: 'ws' },
        { code: '+378', name: 'SMR', iso: 'sm' },
        { code: '+239', name: 'STP', iso: 'st' },
        { code: '+966', name: 'SAU', iso: 'sa' },
        { code: '+221', name: 'SEN', iso: 'sn' },
        { code: '+381', name: 'SRB', iso: 'rs' },
        { code: '+248', name: 'SYC', iso: 'sc' },
        { code: '+232', name: 'SLE', iso: 'sl' },
        { code: '+65', name: 'SGP', iso: 'sg' },
        { code: '+421', name: 'SVK', iso: 'sk' },
        { code: '+386', name: 'SVN', iso: 'si' },
        { code: '+677', name: 'SLB', iso: 'sb' },
        { code: '+252', name: 'SOM', iso: 'so' },
        { code: '+27', name: 'ZAF', iso: 'za' },
        { code: '+82', name: 'KOR', iso: 'kr' },
        { code: '+211', name: 'SSD', iso: 'ss' },
        { code: '+34', name: 'ESP', iso: 'es' },
        { code: '+94', name: 'LKA', iso: 'lk' },
        { code: '+249', name: 'SDN', iso: 'sd' },
        { code: '+597', name: 'SUR', iso: 'sr' },
        { code: '+46', name: 'SWE', iso: 'se' },
        { code: '+41', name: 'CHE', iso: 'ch' },
        { code: '+963', name: 'SYR', iso: 'sy' },
        { code: '+886', name: 'TWN', iso: 'tw' },
        { code: '+992', name: 'TJK', iso: 'tj' },
        { code: '+255', name: 'TZA', iso: 'tz' },
        { code: '+66', name: 'THA', iso: 'th' },
        { code: '+670', name: 'TLS', iso: 'tl' },
        { code: '+228', name: 'TGO', iso: 'tg' },
        { code: '+676', name: 'TON', iso: 'to' },
        { code: '+1868', name: 'TTO', iso: 'tt' },
        { code: '+216', name: 'TUN', iso: 'tn' },
        { code: '+90', name: 'TUR', iso: 'tr' },
        { code: '+993', name: 'TKM', iso: 'tm' },
        { code: '+688', name: 'TUV', iso: 'tv' },
        { code: '+256', name: 'UGA', iso: 'ug' },
        { code: '+380', name: 'UKR', iso: 'ua' },
        { code: '+971', name: 'ARE', iso: 'ae' },
        { code: '+44', name: 'GBR', iso: 'gb' },
        { code: '+1', name: 'USA', iso: 'us' },
        { code: '+598', name: 'URY', iso: 'uy' },
        { code: '+998', name: 'UZB', iso: 'uz' },
        { code: '+678', name: 'VUT', iso: 'vu' },
        { code: '+379', name: 'VAT', iso: 'va' },
        { code: '+58', name: 'VEN', iso: 've' },
        { code: '+84', name: 'VNM', iso: 'vn' },
        { code: '+967', name: 'YEM', iso: 'ye' },
        { code: '+260', name: 'ZMB', iso: 'zm' },
        { code: '+263', name: 'ZWE', iso: 'zw' },
    ],
    addPhone() {
        this.phones.push({ code: '+1', number: '' });
        this.updateWirePhones();
    },
    removePhone(index) {
        if (this.phones.length > 1) {
            this.phones.splice(index, 1);
            this.updateWirePhones();
        }
    },
    updateCountryCode(index, newCode) {
        // Force reactivity by creating new array
        this.phones = this.phones.map((phone, i) =>
            i === index ? { ...phone, code: newCode } : phone
        );
        this.updateWirePhones();
    },
    updateWirePhones() {
        $wire.set('phone', this.phones.map(p => p.code + p.number));
    }
}" x-init="// Initialize phones array if needed
if (!Array.isArray(phones) || phones.length === 0) {
    phones = [{ code: '+1', number: '' }];
} else if (typeof phones[0] === 'string') {
    phones = phones.map(p => {
        const match = p.match(/^(\+\d+)(.*)/);
        return {
            code: match ? match[1] : '+1',
            number: match ? match[2] : p
        };
    });
}

// Watch for changes
$watch('phones', () => updateWirePhones(), { deep: true });" class="group">

    <label class="block text-sm font-medium text-zinc-700 dark:text-zinc-300 mb-2 transition-colors duration-300 group-focus-within:text-neon-gold">
        {{ __('frontend.phone') }}
    </label>

    <template x-for="(phone, index) in phones" :key="index">
        <div class="relative mb-4 last:mb-0">
            <div class="relative">

                <!-- Phone Input Container -->


                    <div class="flex items-center rounded-xl border-2 border-zinc-300 dark:border-zinc-600 bg-white/80 dark:bg-zinc-800/80 backdrop-blur-sm focus-within:border-neon-gold focus-within:ring-2 focus-within:ring-neon-gold/20 transition-all duration-300 hover:border-zinc-400 dark:hover:border-zinc-500 ">
                    <!-- Country Code Dropdown -->
                    <div x-data="{ open: false }" class="relative  z-50">
                        <button type="button" @click="open = !open"
                            class="flex items-center gap-2 px-3 py-3 bg-zinc-50 dark:bg-zinc-700/50 hover:bg-zinc-100 dark:hover:bg-zinc-600/50 border-r border-zinc-300 dark:border-zinc-600 text-neon-gold font-medium min-w-[90px] transition-colors duration-300">

                            <!-- Flag -->
                            <div class="w-5 h-4 rounded-sm overflow-hidden shadow-sm">
                                <span :class="'fi fi-' + (countryCodes.find(c => c.code === phone.code)?.iso ?? 'eg')" class="text-lg leading-none"></span>
                            </div>

                            <!-- Code -->
                            <span x-text="phone.code" class="text-sm"></span>

                            <!-- Arrow -->
                            <svg class="w-4 h-4 transition-transform duration-200" :class="{ 'rotate-180': open }" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"/>
                            </svg>
                        </button>

                        <!-- Dropdown Menu -->
                        <div x-show="open"
                             x-transition:enter="transition ease-out duration-200"
                             x-transition:enter-start="opacity-0 scale-95"
                             x-transition:enter-end="opacity-100 scale-100"
                             x-transition:leave="transition ease-in duration-150"
                             x-transition:leave-start="opacity-100 scale-100"
                             x-transition:leave-end="opacity-0 scale-95"
                             @click.away="open = false"
                             class="absolute z-[9999] mt-1 w-72 bg-white dark:bg-zinc-800 border border-zinc-200 dark:border-zinc-600 rounded-xl shadow-2xl max-h-64 overflow-y-auto">

                            <!-- Search Box -->
                            <div class="sticky top-0 z-10 p-3 bg-white dark:bg-zinc-800 border-b border-zinc-200 dark:border-zinc-600">
                                <input type="text" placeholder="{{ __('frontend.search_country') }}"
                                       class="w-full px-3 py-2 text-sm border border-zinc-300 dark:border-zinc-600 rounded-lg bg-zinc-50 dark:bg-zinc-700 focus:outline-none focus:ring-2 focus:ring-neon-gold/50"
                                       @input="$event.target.closest('[x-show]').querySelectorAll('.country-item').forEach(item => {
                                           const text = item.textContent.toLowerCase();
                                           const search = $event.target.value.toLowerCase();
                                           item.style.display = text.includes(search) ? 'flex' : 'none';
                                       })">
                            </div>

                            <!-- Countries List -->
                            <div class="py-1 z-0">
                                <template x-for="country in countryCodes" :key="country.code">
                                    <div @click="updateCountryCode(index, country.code); open = false;"
                                         class="country-item flex items-center gap-3 px-4 py-2 hover:bg-zinc-100 dark:hover:bg-zinc-700 cursor-pointer transition-colors duration-200 text-sm"
                                         :class="{ 'bg-neon-gold/10 text-neon-gold': phone.code === country.code }">

                                        <!-- Flag -->
                                        <div class="w-6 h-4 rounded-sm overflow-hidden shadow-sm">
                                            <span :class="'fi fi-' + country.iso" class="text-lg leading-none"></span>
                                        </div>

                                        <!-- Code -->
                                        <span x-text="country.code" class="font-medium min-w-[50px]"></span>

                                        <!-- Country Name -->
                                        <span x-text="country.name" class="text-zinc-600 dark:text-zinc-400 truncate"></span>
                                    </div>
                                </template>
                            </div>
                        </div>
                    </div>

                    <!-- Phone Number Input -->
                    <input type="tel"
                           :id="'phone_' + index"
                           placeholder="{{ __('frontend.enter_phone_number') }}"
                           class="flex-1 px-4 py-3 bg-transparent outline-none text-zinc-900 dark:text-white placeholder-zinc-400 text-lg"
                           x-model="phone.number"
                           @input="updateWirePhones()"
                           @keypress="// Allow only numbers and common phone chars
                               const char = String.fromCharCode(event.which);
                               if (!/[0-9\-\(\)\s\+]/.test(char)) {
                                   event.preventDefault();
                               }" />

                    <!-- Remove Button (only show if more than 1 phone) -->
                    <button type="button"
                            x-show="phones.length > 1"
                            @click="removePhone(index)"
                            class="px-3 py-3 text-red-500 hover:text-red-700 hover:bg-red-50 dark:hover:bg-red-900/20 transition-all duration-200 group">
                        <svg class="w-5 h-5 group-hover:scale-110 transition-transform duration-200" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"/>
                        </svg>
                    </button>
                </div>

                <!-- Glow effect on focus -->
                <div class="absolute inset-0 rounded-xl bg-gradient-to-r from-neon-gold/10 to-yellow-400/10 opacity-0 group-focus-within:opacity-100 transition-opacity duration-300 pointer-events-none"></div>
            </div>
        </div>
    </template>

    <!-- Add Phone Button -->
    <div class="flex justify-center mt-4">
        <button type="button" @click="addPhone()"
            class="group flex items-center gap-2 px-6 py-3 bg-gradient-to-r from-neon-gold/10 to-yellow-400/10 hover:from-neon-gold/20 hover:to-yellow-400/20 border-2 border-dashed border-neon-gold/30 hover:border-neon-gold/50 text-neon-gold hover:text-neon-gold rounded-xl transition-all duration-300 hover:scale-105">

            <!-- Plus Icon -->
            <div
                class="w-5 h-5 rounded-full bg-neon-gold/20 group-hover:bg-neon-gold/30 flex items-center justify-center transition-colors duration-300">
                <svg class="w-3 h-3 group-hover:rotate-90 transition-transform duration-300" fill="none"
                    stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4" />
                </svg>
            </div>

            <span class="font-medium">{{ __('frontend.add_phone') }}</span>
        </button>
    </div>

    <!-- Help Text -->
    <div class="mt-3 flex items-start gap-2 text-xs text-zinc-500 dark:text-zinc-400">
        <svg class="w-4 h-4 mt-0.5 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
        </svg>
        <p class="leading-relaxed">{{ __('frontend.phone_hint') }}</p>
    </div>
</div>