@extends('layouts.app')

@section('title', 'Edit Personal Details')

@section('content')
<div class="min-h-screen bg-gray-50 p-6">
    <div class="max-w-4xl mx-auto">
        <!-- Header -->
        <div class="bg-white rounded-lg shadow-md p-6 mb-6">
            <div class="flex justify-between items-center">
                <div>
                    <h1 class="text-3xl font-bold text-gray-800">Edit Personal Details</h1>
                    <p class="text-gray-600">Update your personal information</p>
                </div>
                <a href="{{ route('applicant.dashboard') }}" 
                   class="bg-gray-600 text-white px-4 py-2 rounded-lg hover:bg-gray-700">
                    ← Back to Dashboard
                </a>
            </div>
        </div>

        @if (session('success'))
            <div class="bg-green-100 border border-green-400 text-green-700 px-4 py-3 rounded mb-4">
                {{ session('success') }}
            </div>
        @endif

        @if (session('error'))
            <div class="bg-red-100 border border-red-400 text-red-700 px-4 py-3 rounded mb-4">
                {{ session('error') }}
            </div>
        @endif

        @if ($errors->any())
            <div class="bg-red-100 border border-red-400 text-red-700 px-4 py-3 rounded mb-4">
                <ul class="list-disc list-inside">
                    @foreach ($errors->all() as $error)
                        <li>{{ $error }}</li>
                    @endforeach
                </ul>
            </div>
        @endif

        <!-- Edit Form -->
        <div class="bg-white rounded-lg shadow-md p-8">
            <form method="POST" action="{{ route('applicant.profile.update', $profile->id) }}" enctype="multipart/form-data" class="space-y-4">
                @csrf
                @method('PUT')

                @php
                    $countries = [
                        'Afghan', 'Albanian', 'Algerian', 'American', 'Andorran', 'Angolan', 'Antiguan', 'Argentine',
                        'Armenian', 'Australian', 'Austrian', 'Azerbaijani', 'Bahamian', 'Bahraini', 'Bangladeshi',
                        'Barbadian', 'Belarusian', 'Belgian', 'Belizean', 'Beninese', 'Bhutanese', 'Bolivian',
                        'Bosnian', 'Botswanan', 'Brazilian', 'Bruneian', 'Bulgarian', 'Burkinabe', 'Burundian',
                        'Cabo Verdean', 'Cambodian', 'Cameroonian', 'Canadian', 'Central African', 'Chadian',
                        'Chilean', 'Chinese', 'Colombian', 'Comoran', 'Congolese', 'Costa Rican', 'Croatian',
                        'Cuban', 'Cypriot', 'Czech', 'Danish', 'Djiboutian', 'Dominican', 'Dutch', 'Ecuadorian',
                        'Egyptian', 'Emirati', 'Equatorial Guinean', 'Eritrean', 'Estonian', 'Eswatini', 'Ethiopian',
                        'Fijian', 'Finnish', 'French', 'Gabonese', 'Gambian', 'Georgian', 'German', 'Ghanaian',
                        'Greek', 'Grenadian', 'Guatemalan', 'Guinean', 'Guinea-Bissauan', 'Guyanese', 'Haitian',
                        'Honduran', 'Hungarian', 'Icelandic', 'Indian', 'Indonesian', 'Iranian', 'Iraqi', 'Irish',
                        'Israeli', 'Italian', 'Ivorian', 'Jamaican', 'Japanese', 'Jordanian', 'Kazakhstani',
                        'Kenyan', 'Kiribati', 'Kuwaiti', 'Kyrgyz', 'Laotian', 'Latvian', 'Lebanese', 'Lesothan',
                        'Liberian', 'Libyan', 'Liechtensteiner', 'Lithuanian', 'Luxembourgish', 'Malagasy',
                        'Malawian', 'Malaysian', 'Maldivian', 'Malian', 'Maltese', 'Marshallese', 'Mauritanian',
                        'Mauritian', 'Mexican', 'Micronesian', 'Moldovan', 'Monacan', 'Mongolian', 'Montenegrin',
                        'Moroccan', 'Mozambican', 'Namibian', 'Nauruan', 'Nepali', 'New Zealander', 'Nicaraguan',
                        'Nigerian', 'Nigerien', 'North Korean', 'North Macedonian', 'Norwegian', 'Omani',
                        'Pakistani', 'Palauan', 'Panamanian', 'Papua New Guinean', 'Paraguayan', 'Peruvian',
                        'Philippine', 'Polish', 'Portuguese', 'Qatari', 'Romanian', 'Russian', 'Rwandan',
                        'Saint Kitts and Nevis', 'Saint Lucian', 'Saint Vincentian', 'Samoan', 'San Marinese',
                        'Sao Tomean', 'Saudi', 'Senegalese', 'Serbian', 'Seychellois', 'Sierra Leonean',
                        'Singaporean', 'Slovak', 'Slovenian', 'Solomon Islander', 'Somali', 'South African',
                        'South Korean', 'South Sudanese', 'Spanish', 'Sri Lankan', 'Sudanese', 'Surinamese',
                        'Swedish', 'Swiss', 'Syrian', 'Taiwanese', 'Tajik', 'Tanzanian', 'Thai', 'Timorese',
                        'Togolese', 'Tongan', 'Trinidadian', 'Tunisian', 'Turkish', 'Turkmen', 'Tuvaluan',
                        'Ugandan', 'Ukrainian', 'Uruguayan', 'Uzbek', 'Vanuatuan', 'Venezuelan', 'Vietnamese',
                        'Yemeni', 'Zambian', 'Zimbabwean'
                    ];
                    sort($countries);
                    $islands = [
                        'Abaiang', 'Abemama', 'Aranuka', 'Arorae', 'Banaba', 'Beru', 'Butaritari',
                        'Kanton', 'Kiritimati', 'Kuria', 'Maiana', 'Makin', 'Marakei', 'Nikunau',
                        'Nonouti', 'Onotoa', 'Tabiteuea North', 'Tabiteuea South', 'Tabuaeran',
                        'Tamana', 'Tarawa North', 'Tarawa South', 'Teraina'
                    ];
                    $currentNationality = old('nationality', $profile->nationality);
                    $currentIsland      = old('home_island', $profile->home_island);
                @endphp

                <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                    <!-- Full Name -->
                    <div>
                        <label class="block text-sm font-medium text-gray-700 mb-1">Full Name <span class="text-red-500">*</span></label>
                        <input type="text" name="full_name" required
                            value="{{ old('full_name', $profile->full_name) }}"
                            placeholder="Enter your full legal name"
                            class="w-full px-4 py-2 border rounded-lg focus:ring-2 focus:ring-indigo-500">
                    </div>

                    <!-- Date of Birth -->
                    <div>
                        <label class="block text-sm font-medium text-gray-700 mb-1">Date of Birth <span class="text-red-500">*</span></label>
                        <input type="date" name="date_of_birth" required
                            value="{{ old('date_of_birth', $profile->date_of_birth ? $profile->date_of_birth->format('Y-m-d') : '') }}"
                            class="w-full px-4 py-2 border rounded-lg focus:ring-2 focus:ring-indigo-500">
                    </div>

                    <!-- Gender -->
                    <div>
                        <label class="block text-sm font-medium text-gray-700 mb-1">Gender <span class="text-red-500">*</span></label>
                        <select name="gender" required
                            class="w-full px-4 py-2 border rounded-lg focus:ring-2 focus:ring-indigo-500">
                            <option value="">Select Gender</option>
                            <option value="male"   {{ old('gender', $profile->gender) == 'male'   ? 'selected' : '' }}>Male</option>
                            <option value="female" {{ old('gender', $profile->gender) == 'female' ? 'selected' : '' }}>Female</option>
                            <option value="other"  {{ old('gender', $profile->gender) == 'other'  ? 'selected' : '' }}>Other</option>
                        </select>
                    </div>

                    <!-- Email -->
                    <div>
                        <label class="block text-sm font-medium text-gray-700 mb-1">Email Address <span class="text-red-500">*</span></label>
                        <input type="email" name="email" required
                            value="{{ old('email', $profile->email) }}"
                            placeholder="your.email@example.com"
                            class="w-full px-4 py-2 border rounded-lg focus:ring-2 focus:ring-indigo-500">
                    </div>

                    <!-- Nationality -->
                    <div>
                        <label class="block text-sm font-medium text-gray-700 mb-1">Nationality <span class="text-red-500">*</span></label>
                        <select name="nationality" id="nationality" required
                            class="w-full px-4 py-2 border rounded-lg focus:ring-2 focus:ring-indigo-500">
                            <option value="">Select nationality</option>
                            @foreach($countries as $country)
                                <option value="{{ $country }}" {{ $currentNationality == $country ? 'selected' : '' }}>
                                    {{ $country }}
                                </option>
                            @endforeach
                        </select>
                    </div>

                    <!-- Home Island (only for I-Kiribati) -->
                    <div id="home_island_wrapper" class="{{ $currentNationality == 'Kiribati' ? '' : 'hidden' }}">
                        <label class="block text-sm font-medium text-gray-700 mb-1">Home Island <span class="text-red-500">*</span></label>
                        <select name="home_island" id="home_island"
                            {{ $currentNationality == 'Kiribati' ? 'required' : '' }}
                            class="w-full px-4 py-2 border rounded-lg focus:ring-2 focus:ring-indigo-500">
                            <option value="">Select home island</option>
                            @foreach($islands as $island)
                                <option value="{{ $island }}" {{ $currentIsland == $island ? 'selected' : '' }}>
                                    {{ $island }}
                                </option>
                            @endforeach
                        </select>
                    </div>

                    <!-- Phone Number (below nationality, auto-populated with country code) -->
                    <div>
                        <label class="block text-sm font-medium text-gray-700 mb-1">Phone Number <span class="text-red-500">*</span></label>
                        <input type="tel" name="phone_number" id="phone_number" required
                            value="{{ old('phone_number', $profile->phone_number) }}"
                            placeholder="+686 XXXXX"
                            class="w-full px-4 py-2 border rounded-lg focus:ring-2 focus:ring-indigo-500">
                        <p class="text-xs text-gray-500 mt-1" id="phone_hint">Country code updates automatically when nationality changes</p>
                    </div>
                </div>

                <!-- Residential Address -->
                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-1">Residential Address <span class="text-red-500">*</span></label>
                    <textarea name="residential_address" rows="3" required
                        placeholder="Enter your full residential address"
                        class="w-full px-4 py-2 border rounded-lg focus:ring-2 focus:ring-indigo-500">{{ old('residential_address', $profile->residential_address) }}</textarea>
                </div>

                <!-- Documents Section -->
                <div class="border-t pt-4 mt-6">
                    <h3 class="text-lg font-semibold text-gray-800 mb-4">Update Documents (Optional)</h3>
                    <p class="text-sm text-gray-600 mb-4">Leave blank to keep existing documents. Upload new files only if you need to replace them.</p>
                    
                    <div class="space-y-4">
                        <!-- Police Clearance -->
                        <div>
                            <label class="block text-sm font-medium text-gray-700 mb-1">Police Clearance Certificate</label>
                            @if($profile->police_clearance_path)
                                <div class="bg-green-50 border border-green-200 rounded-lg p-3 mb-2">
                                    <p class="text-xs text-green-700 mb-2">✓ Current file: {{ basename($profile->police_clearance_path) }}</p>
                                    <div class="flex gap-2">
                                        <a href="{{ Storage::url($profile->police_clearance_path) }}" target="_blank"
                                           class="inline-flex items-center px-3 py-1 bg-blue-500 text-white text-xs rounded hover:bg-blue-600 transition">
                                            <svg class="w-4 h-4 mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"/><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z"/></svg>
                                            View
                                        </a>
                                        <a href="{{ Storage::url($profile->police_clearance_path) }}" download
                                           class="inline-flex items-center px-3 py-1 bg-green-500 text-white text-xs rounded hover:bg-green-600 transition">
                                            <svg class="w-4 h-4 mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4"/></svg>
                                            Download
                                        </a>
                                    </div>
                                </div>
                            @endif
                            <input type="file" name="police_clearance_path" accept="image/*,.pdf"
                                class="w-full px-4 py-2 border rounded-lg focus:ring-2 focus:ring-indigo-500">
                            <p class="text-xs text-gray-500 mt-1">Upload new file to replace existing</p>
                        </div>

                        <!-- Passport Biodata -->
                        <div>
                            <label class="block text-sm font-medium text-gray-700 mb-1">Passport Biodata Page</label>
                            @if($profile->passport_biodata_path)
                                <div class="bg-green-50 border border-green-200 rounded-lg p-3 mb-2">
                                    <p class="text-xs text-green-700 mb-2">✓ Current file: {{ basename($profile->passport_biodata_path) }}</p>
                                    <div class="flex gap-2">
                                        <a href="{{ Storage::url($profile->passport_biodata_path) }}" target="_blank"
                                           class="inline-flex items-center px-3 py-1 bg-blue-500 text-white text-xs rounded hover:bg-blue-600 transition">
                                            <svg class="w-4 h-4 mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"/><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z"/></svg>
                                            View
                                        </a>
                                        <a href="{{ Storage::url($profile->passport_biodata_path) }}" download
                                           class="inline-flex items-center px-3 py-1 bg-green-500 text-white text-xs rounded hover:bg-green-600 transition">
                                            <svg class="w-4 h-4 mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4"/></svg>
                                            Download
                                        </a>
                                    </div>
                                </div>
                            @endif
                            <input type="file" name="passport_biodata_path" accept="image/*,.pdf"
                                class="w-full px-4 py-2 border rounded-lg focus:ring-2 focus:ring-indigo-500">
                            <p class="text-xs text-gray-500 mt-1">Upload new file to replace existing</p>
                        </div>

                        <!-- Birth Certificate -->
                        <div>
                            <label class="block text-sm font-medium text-gray-700 mb-1">Birth Certificate</label>
                            @if($profile->birth_certificate_path)
                                <div class="bg-green-50 border border-green-200 rounded-lg p-3 mb-2">
                                    <p class="text-xs text-green-700 mb-2">✓ Current file: {{ basename($profile->birth_certificate_path) }}</p>
                                    <div class="flex gap-2">
                                        <a href="{{ Storage::url($profile->birth_certificate_path) }}" target="_blank"
                                           class="inline-flex items-center px-3 py-1 bg-blue-500 text-white text-xs rounded hover:bg-blue-600 transition">
                                            <svg class="w-4 h-4 mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"/><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z"/></svg>
                                            View
                                        </a>
                                        <a href="{{ Storage::url($profile->birth_certificate_path) }}" download
                                           class="inline-flex items-center px-3 py-1 bg-green-500 text-white text-xs rounded hover:bg-green-600 transition">
                                            <svg class="w-4 h-4 mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4"/></svg>
                                            Download
                                        </a>
                                    </div>
                                </div>
                            @endif
                            <input type="file" name="birth_certificate_path" accept="image/*,.pdf"
                                class="w-full px-4 py-2 border rounded-lg focus:ring-2 focus:ring-indigo-500">
                            <p class="text-xs text-gray-500 mt-1">Upload new file to replace existing</p>
                        </div>

                        <!-- National ID -->
                        <div>
                            <label class="block text-sm font-medium text-gray-700 mb-1">National ID Card</label>
                            @if($profile->national_id_path)
                                <div class="bg-green-50 border border-green-200 rounded-lg p-3 mb-2">
                                    <p class="text-xs text-green-700 mb-2">✓ Current file: {{ basename($profile->national_id_path) }}</p>
                                    <div class="flex gap-2">
                                        <a href="{{ Storage::url($profile->national_id_path) }}" target="_blank"
                                           class="inline-flex items-center px-3 py-1 bg-blue-500 text-white text-xs rounded hover:bg-blue-600 transition">
                                            <svg class="w-4 h-4 mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"/><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z"/></svg>
                                            View
                                        </a>
                                        <a href="{{ Storage::url($profile->national_id_path) }}" download
                                           class="inline-flex items-center px-3 py-1 bg-green-500 text-white text-xs rounded hover:bg-green-600 transition">
                                            <svg class="w-4 h-4 mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4"/></svg>
                                            Download
                                        </a>
                                    </div>
                                </div>
                            @endif
                            <input type="file" name="national_id_path" accept="image/*,.pdf"
                                class="w-full px-4 py-2 border rounded-lg focus:ring-2 focus:ring-indigo-500">
                            <p class="text-xs text-gray-500 mt-1">Upload new file to replace existing (optional)</p>
                        </div>
                    </div>
                </div>

                <div class="flex gap-4 pt-4">
                    <a href="{{ route('applicant.dashboard') }}"
                       class="flex-1 text-center bg-gray-200 text-gray-800 px-6 py-3 rounded-lg hover:bg-gray-300 font-semibold text-lg">
                        Cancel
                    </a>
                    <button type="submit" 
                            class="flex-1 bg-indigo-600 text-white px-6 py-3 rounded-lg hover:bg-indigo-700 font-semibold text-lg">
                        Update Personal Details
                    </button>
                </div>
            </form>
        </div>
    </div>
</div>

<script>
    const countryCodes = {
        'Afghan': '+93', 'Albanian': '+355', 'Algerian': '+213', 'American': '+1',
        'Andorran': '+376', 'Angolan': '+244', 'Antiguan': '+1-268', 'Argentine': '+54',
        'Armenian': '+374', 'Australian': '+61', 'Austrian': '+43', 'Azerbaijani': '+994',
        'Bahamian': '+1-242', 'Bahraini': '+973', 'Bangladeshi': '+880', 'Barbadian': '+1-246',
        'Belarusian': '+375', 'Belgian': '+32', 'Belizean': '+501', 'Beninese': '+229',
        'Bhutanese': '+975', 'Bolivian': '+591', 'Bosnian': '+387', 'Botswanan': '+267',
        'Brazilian': '+55', 'Bruneian': '+673', 'Bulgarian': '+359', 'Burkinabe': '+226',
        'Burundian': '+257', 'Cabo Verdean': '+238', 'Cambodian': '+855', 'Cameroonian': '+237',
        'Canadian': '+1', 'Central African': '+236', 'Chadian': '+235', 'Chilean': '+56',
        'Chinese': '+86', 'Colombian': '+57', 'Comoran': '+269', 'Congolese': '+243',
        'Costa Rican': '+506', 'Croatian': '+385', 'Cuban': '+53', 'Cypriot': '+357',
        'Czech': '+420', 'Danish': '+45', 'Djiboutian': '+253', 'Dominican': '+1-809',
        'Dutch': '+31', 'Ecuadorian': '+593', 'Egyptian': '+20', 'Emirati': '+971',
        'Equatorial Guinean': '+240', 'Eritrean': '+291', 'Estonian': '+372', 'Eswatini': '+268',
        'Ethiopian': '+251', 'Fijian': '+679', 'Finnish': '+358', 'French': '+33',
        'Gabonese': '+241', 'Gambian': '+220', 'Georgian': '+995', 'German': '+49',
        'Ghanaian': '+233', 'Greek': '+30', 'Grenadian': '+1-473', 'Guatemalan': '+502',
        'Guinean': '+224', 'Guinea-Bissauan': '+245', 'Guyanese': '+592', 'Haitian': '+509',
        'Honduran': '+504', 'Hungarian': '+36', 'Icelandic': '+354', 'Indian': '+91',
        'Indonesian': '+62', 'Iranian': '+98', 'Iraqi': '+964', 'Irish': '+353',
        'Israeli': '+972', 'Italian': '+39', 'Ivorian': '+225', 'Jamaican': '+1-876',
        'Japanese': '+81', 'Jordanian': '+962', 'Kazakhstani': '+7', 'Kenyan': '+254',
        'Kiribati': '+686', 'Kuwaiti': '+965', 'Kyrgyz': '+996', 'Laotian': '+856',
        'Latvian': '+371', 'Lebanese': '+961', 'Lesothan': '+266', 'Liberian': '+231',
        'Libyan': '+218', 'Liechtensteiner': '+423', 'Lithuanian': '+370', 'Luxembourgish': '+352',
        'Malagasy': '+261', 'Malawian': '+265', 'Malaysian': '+60', 'Maldivian': '+960',
        'Malian': '+223', 'Maltese': '+356', 'Marshallese': '+692', 'Mauritanian': '+222',
        'Mauritian': '+230', 'Mexican': '+52', 'Micronesian': '+691', 'Moldovan': '+373',
        'Monacan': '+377', 'Mongolian': '+976', 'Montenegrin': '+382', 'Moroccan': '+212',
        'Mozambican': '+258', 'Namibian': '+264', 'Nauruan': '+674', 'Nepali': '+977',
        'New Zealander': '+64', 'Nicaraguan': '+505', 'Nigerian': '+234', 'Nigerien': '+227',
        'North Korean': '+850', 'North Macedonian': '+389', 'Norwegian': '+47', 'Omani': '+968',
        'Pakistani': '+92', 'Palauan': '+680', 'Panamanian': '+507', 'Papua New Guinean': '+675',
        'Paraguayan': '+595', 'Peruvian': '+51', 'Philippine': '+63', 'Polish': '+48',
        'Portuguese': '+351', 'Qatari': '+974', 'Romanian': '+40', 'Russian': '+7',
        'Rwandan': '+250', 'Saint Kitts and Nevis': '+1-869', 'Saint Lucian': '+1-758',
        'Saint Vincentian': '+1-784', 'Samoan': '+685', 'San Marinese': '+378',
        'Sao Tomean': '+239', 'Saudi': '+966', 'Senegalese': '+221', 'Serbian': '+381',
        'Seychellois': '+248', 'Sierra Leonean': '+232', 'Singaporean': '+65', 'Slovak': '+421',
        'Slovenian': '+386', 'Solomon Islander': '+677', 'Somali': '+252', 'South African': '+27',
        'South Korean': '+82', 'South Sudanese': '+211', 'Spanish': '+34', 'Sri Lankan': '+94',
        'Sudanese': '+249', 'Surinamese': '+597', 'Swedish': '+46', 'Swiss': '+41',
        'Syrian': '+963', 'Taiwanese': '+886', 'Tajik': '+992', 'Tanzanian': '+255',
        'Thai': '+66', 'Timorese': '+670', 'Togolese': '+228', 'Tongan': '+676',
        'Trinidadian': '+1-868', 'Tunisian': '+216', 'Turkish': '+90', 'Turkmen': '+993',
        'Tuvaluan': '+688', 'Ugandan': '+256', 'Ukrainian': '+380', 'Uruguayan': '+598',
        'Uzbek': '+998', 'Vanuatuan': '+678', 'Venezuelan': '+58', 'Vietnamese': '+84',
        'Yemeni': '+967', 'Zambian': '+260', 'Zimbabwean': '+263'
    };

    const nationalitySelect = document.getElementById('nationality');
    const islandWrapper     = document.getElementById('home_island_wrapper');
    const islandSelect      = document.getElementById('home_island');
    const phoneInput        = document.getElementById('phone_number');
    const phoneHint         = document.getElementById('phone_hint');

    nationalitySelect.addEventListener('change', function () {
        const selected   = this.value;
        const isKiribati = selected === 'Kiribati';

        // Show/hide home island
        islandWrapper.classList.toggle('hidden', !isKiribati);
        islandSelect.required = isKiribati;
        if (!isKiribati) islandSelect.value = '';

        // Auto-populate phone country code only if field is empty or just has a country code
        if (selected && countryCodes[selected]) {
            const code = countryCodes[selected];
            if (!phoneInput.value || Object.values(countryCodes).includes(phoneInput.value.trim())) {
                phoneInput.value = code + ' ';
                const len = phoneInput.value.length;
                phoneInput.setSelectionRange(len, len);
            }
            phoneInput.placeholder = code + ' XXXXXXXX';
            phoneHint.textContent  = 'Country code for ' + selected + ': ' + code;
        } else {
            phoneInput.placeholder = 'Enter phone number';
            phoneHint.textContent  = 'Country code updates automatically when nationality changes';
        }

        phoneInput.focus();
    });

    // On page load: set required state for island
    islandSelect.required = nationalitySelect.value === 'Kiribati';

    // On page load: update hint to show current nationality's code (existing profile value)
    const preselected = nationalitySelect.value;
    if (preselected && countryCodes[preselected]) {
        phoneInput.placeholder = countryCodes[preselected] + ' XXXXXXXX';
        phoneHint.textContent  = 'Country code for ' + preselected + ': ' + countryCodes[preselected];
    }
</script>
@endsection