@extends('school.layouts.app')

@section('content')

@if($errors->any())
    <div class="max-w-7xl mx-auto px-4 mb-4">
        <div class="bg-red-100 border-l-4 border-red-500 text-red-700 p-4 rounded-lg shadow-sm" role="alert">
            <p class="font-bold text-sm">Please correct the following errors:</p>
            <ul class="text-xs list-disc ml-5 mt-1">
                @foreach($errors->all() as $error)
                    <li>{{ $error }}</li>
                @endforeach
            </ul>
        </div>
    </div>
@endif

<style>
    /* This makes the text APPEAR capitalized as the user types */
    input[type="text"], 
    select, 
    textarea {
        text-transform: uppercase !important;
    }
</style>

<div class="max-w-7xl mx-auto px-4">
    <div class="mb-6 flex items-center justify-between">
        <div class="flex items-center gap-3">
            <div class="w-10 h-10 bg-indigo-600 rounded-lg flex items-center justify-center text-white shadow-lg shadow-indigo-200">
                <i class="fa-solid fa-graduation-cap"></i>
            </div>
            <div>
                <h1 class="text-xl font-bold text-slate-800">Admission Finalization</h1>
                <p class="text-sm text-slate-500">Professional student profile completion</p>
            </div>
        </div>
        <a href="{{ route('school.admissions.registrations') }}" class="inline-flex items-center gap-2 px-4 py-2 bg-white border border-slate-200 text-slate-600 rounded-xl font-bold text-sm hover:bg-slate-50 transition-all">
            <i class="fa-solid fa-arrow-left"></i> Back to List
        </a>
    </div>

    <form action="{{ route('school.admissions.storeAdmission', $registration->id) }}" method="POST" class="space-y-6 pb-10">
        {{-- VALIDATION ERRORS --}}
        @if($errors->any())
            <div class="bg-red-50 border-l-4 border-red-500 text-red-700 p-4 rounded-lg mb-4">
                <p class="font-bold text-sm mb-1">Please correct the following errors:</p>
                <ul class="text-xs list-disc ml-5">
                    @foreach($errors->all() as $error)
                        <li>{{ $error }}</li>
                    @endforeach
                </ul>
            </div>
        @endif
        @csrf
        
        <!-- SUMMARY CARD -->
        <div class="bg-white rounded-2xl border border-slate-200 shadow-sm overflow-hidden">
            <div class="bg-slate-50 px-6 py-3 border-b border-slate-200 flex justify-between items-center">
                <h3 class="text-xs font-bold text-slate-500 uppercase tracking-widest">Verified Registration Data</h3>
                <span class="px-2 py-1 bg-indigo-100 text-indigo-700 rounded text-[10px] font-bold uppercase">Reg No: {{ $registration->registration_no }}</span>
            </div>
            <div class="p-4 md:p-6 flex flex-wrap items-center gap-x-6 gap-y-3">
                
                <!-- Photo (compact, no extra margin) -->
                <div class="shrink-0">
                    <div class="w-11 h-11 rounded-full border-2 border-indigo-100 overflow-hidden bg-slate-200 cursor-pointer hover:ring-2 hover:ring-indigo-400 transition-all" 
                        onclick="viewStudentPhoto('{{ $registration->enquiry && $registration->enquiry->student_photo ? asset('storage/' . $registration->enquiry->student_photo) : "" }}')">
                        @if($registration->enquiry && $registration->enquiry->student_photo)
                            <img src="{{ asset('storage/' . $registration->enquiry->student_photo) }}" class="w-full h-full object-cover" alt="Student Photo">
                        @else
                            <img src="https://ui-avatars.com/api/?name={{ urlencode($registration->student_name) }}&background=random" class="w-full h-full object-cover" alt="Default Avatar">
                        @endif
                    </div>
                </div>

                <!-- Admission Number (Manual Mode) -->
                <div class="{{ ($admSetting && $admSetting->is_auto) ? 'hidden' : '' }} min-w-[160px] flex-1 max-w-[200px]">
                    <label class="block text-[10px] font-bold text-slate-400 uppercase mb-0.5">Admission Number <span class="text-red-500">*</span></label>
                    <input type="text" name="admission_no" id="admission_no" value="{{ $nextAdmNo ?? '' }}" 
                        class="w-full px-2.5 py-1.5 border rounded-lg text-xs font-bold text-indigo-700 bg-indigo-50 border-indigo-200 focus:ring-2 focus:ring-indigo-500 outline-none @error('admission_no') border-red-500 bg-red-50 @enderror" 
                        placeholder="Enter Adm. No">
                    @error('admission_no')
                        <p class="text-[10px] text-red-600 mt-0.5 font-bold">{{ $message }}</p>
                    @enderror
                </div>

                <!-- Full Name -->
                <div class="min-w-[140px] flex-1">
                    <label class="block text-[10px] font-bold text-slate-400 uppercase mb-0.5">Full Name</label>
                    <p class="text-xs font-bold text-slate-800 truncate">{{ $registration->student_name }}</p>
                </div>

                <!-- Father's Name -->
                <div class="min-w-[120px] flex-1">
                    <label class="block text-[10px] font-bold text-slate-400 uppercase mb-0.5">Father's Name</label>
                    <p class="text-xs font-bold text-slate-800 truncate">{{ $registration->father_name }}</p>
                </div>

                <!-- Seeking Class -->
                <div class="min-w-[100px]">
                    <label class="block text-[10px] font-bold text-slate-400 uppercase mb-0.5">Seeking Class</label>
                    <p class="text-xs font-bold text-indigo-600">{{ $registration->seeking_class }}</p>
                </div>

                <!-- Contact -->
                <div class="min-w-[110px]">
                    <label class="block text-[10px] font-bold text-slate-400 uppercase mb-0.5">Contact</label>
                    <p class="text-xs font-bold text-slate-800">{{ $registration->contact_number }}</p>
                </div>
            </div>
        </div>

        <div class="grid grid-cols-1 lg:grid-cols-2 gap-6">
            <!-- CARD: PERSONAL IDENTITY -->
            <div class="bg-white rounded-2xl border border-slate-200 shadow-sm overflow-hidden">
                <div class="bg-slate-50 px-6 py-3 border-b border-slate-200">
                    <h3 class="text-xs font-bold text-slate-500 uppercase tracking-widest">Personal Identity</h3>
                </div>
                <div class="p-6 grid grid-cols-2 gap-4">
                    <div class="space-y-1">
                        <label class="block text-[10px] font-bold text-slate-500 uppercase">Blood Group<span class="text-red-500">*</span></label>
                        <select name="blood_group" required class="w-full px-3 py-2 rounded-lg border border-slate-200 text-sm outline-none focus:ring-2 focus:ring-indigo-500">
                            <option value="">Select</option>
                            @foreach(['A+', 'A-', 'B+', 'B-', 'O+', 'O-', 'AB+', 'AB-'] as $bg) <option value="{{$bg}}">{{$bg}}</option> @endforeach
                        </select>
                    </div>
                    <div class="space-y-1">
    
                        <label class="block text-[10px] font-bold text-slate-500 uppercase">
                            Religion
                        </label>

                        <select name="religion"
                                id="religion"
                                class="w-full px-3 py-2 rounded-lg border border-slate-200 text-sm outline-none focus:ring-2 focus:ring-indigo-500">

                            <option value="">Select Religion</option>

                            <option value="Hindu">Hindu</option>
                            <option value="Sikh">Sikh</option>
                            <option value="Muslim">Muslim</option>
                            <option value="Christian">Christian</option>
                            <option value="Jain">Jain</option>
                            <option value="Buddhist">Buddhist</option>
                            <option value="Parsi">Parsi</option>
                            <option value="Jewish">Jewish</option>
                            <option value="Bahai">Bahai</option>
                            <option value="Other">Other</option>

                        </select>

                    </div>
                    <div class="space-y-1">
                        <label class="block text-[10px] font-bold text-slate-500 uppercase">Category<span class="text-red-500">*</span></label>
                        <select name="category" required class="w-full px-3 py-2 rounded-lg border border-slate-200 text-sm outline-none focus:ring-2 focus:ring-indigo-500">
                            <option value="">Select</option>
                            <option value="General">General</option><option value="OBC">OBC</option><option value="SC">SC</option><option value="ST">ST</option>
                        </select>
                    </div>
                    <div class="space-y-1">
                        <label class="block text-[10px] font-bold text-slate-500 uppercase">Nationality</label>
                        <select name="nationality" id="nationality" class="w-full px-3 py-2 rounded-lg border border-slate-200 text-sm outline-none focus:ring-2 focus:ring-indigo-500">
                            <option value="Indian">Indian</option>
                        </select>
                    </div>
                    <input type="text"
                        name="aadhaar_no"
                        id="aadhaar_no"
                        maxlength="12"
                        inputmode="numeric"
                        class="w-full px-3 py-2 rounded-lg border border-slate-200 text-sm"
                        placeholder="Enter 12 Digit Aadhaar">
                    <div class="space-y-1">
                       <label class="block text-[10px] font-bold text-slate-500 uppercase">Alternate Contact Number <span class="text-red-500">*</span></label>
                        <input type="text" name="alternate_contact" id="alternate_contact" maxlength="10" pattern="\d{10}" inputmode="numeric" required class="w-full px-3 py-2 rounded-lg border border-slate-200 text-sm" placeholder="Enter 10 Digit Mobile">
                    </div>
                </div>
            </div>

            <!-- CARD: PREVIOUS ACADEMIC HISTORY -->
            <div class="bg-white rounded-2xl border border-slate-200 shadow-sm overflow-hidden">
                <div class="bg-slate-50 px-6 py-3 border-b border-slate-200">
                    <h3 class="text-xs font-bold text-slate-500 uppercase tracking-widest">Previous Academic Record</h3>
                </div>
                <div class="p-6 space-y-4">
                    <div class="space-y-1">
                        <label class="block text-[10px] font-bold text-slate-500 uppercase">Previous School Name</label>
                        <input type="text" name="previous_school" class="w-full px-3 py-2 rounded-lg border border-slate-200 text-sm outline-none focus:ring-2 focus:ring-indigo-500">
                    </div>
                    <div class="grid grid-cols-2 gap-4">
                        <div class="space-y-1">
                            <label class="block text-[10px] font-bold text-slate-500 uppercase">Previous Class</label>
                            <select name="previous_class" class="w-full px-3 py-2 rounded-lg border border-slate-200 text-sm outline-none focus:ring-2 focus:ring-indigo-500">
                                <option value="">Select Class</option>
                                @foreach(['Pre-Nursery', 'Nursery', 'LKG', 'UKG', '1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12'] as $cls)
                                    <option value="{{$cls}}">{{$cls}}</option>
                                @endforeach
                            </select>
                        </div>
                        <div class="space-y-1">

                            <label class="block text-[10px] font-bold text-slate-500 uppercase">
                                Percentage (%)
                            </label>

                            <input type="text"
                                name="percentage"
                                id="percentage"
                                maxlength="3"
                                inputmode="decimal"
                                class="w-full px-3 py-2 rounded-lg border border-slate-200 text-sm"
                                placeholder="Enter Percentage">

                        </div>
                    </div>
                    <div class="grid grid-cols-2 gap-4">
                        <div class="space-y-1">
                            <label class="block text-[10px] font-bold text-slate-500 uppercase">TC Number</label>
                            <input type="text" name="tc_number" class="w-full px-3 py-2 rounded-lg border border-slate-200 text-sm outline-none focus:ring-2 focus:ring-indigo-500">
                        </div>
                        <div class="space-y-1">
                            <label class="block text-[10px] font-bold text-slate-500 uppercase">TC Date</label>
                            <input type="date" name="tc_date" onclick="this.showPicker()" class="w-full px-3 py-2 rounded-lg border border-slate-200 text-sm outline-none focus:ring-2 focus:ring-indigo-500 cursor-pointer">
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- CARD: PARENTS DETAILS -->
        <div class="bg-white rounded-2xl border border-slate-200 shadow-sm overflow-hidden">
            <div class="bg-slate-50 px-6 py-3 border-b border-slate-200">
                <h3 class="text-xs font-bold text-slate-500 uppercase tracking-widest">Parental Professional Information</h3>
            </div>
            <div class="p-6 grid grid-cols-1 md:grid-cols-2 gap-8">
                <div class="p-4 bg-indigo-50/30 rounded-xl border border-indigo-100 space-y-4">
                    <h4 class="text-xs font-bold text-indigo-600 uppercase flex items-center gap-2">
                        <i class="fa-solid fa-user"></i> {{ $registration->father_name }}
                    </h4>
                    <div class="grid grid-cols-2 gap-3">
                        <div class="col-span-1">
                            <label class="block text-[10px] font-bold text-slate-500 uppercase">Salutation<span class="text-red-500">*</span></label>
                            <select name="father_salutation" required class="w-full px-3 py-2 rounded-lg border border-slate-200 text-sm outline-none">
                                <option value="">Select</option>
                                @foreach(['Mr.', 'Dr.', 'Prof.', 'Shri', 'Sardar'] as $sal) <option value="{{$sal}}">{{$sal}}</option> @endforeach
                            </select>
                        </div>
                        <div class="col-span-1">
                            <label class="block text-[10px] font-bold text-slate-500 uppercase">Profession<span class="text-red-500">*</span></label>
                            <select name="father_profession" required class="w-full px-3 py-2 rounded-lg border border-slate-200 text-sm outline-none">
                                <option value="">Select</option>
                                @foreach(['Business', 'Government Service', 'Private Sector', 'Agriculture', 'Professional', 'Self-Employed', 'Other'] as $prof) <option value="{{$prof}}">{{$prof}}</option> @endforeach
                            </select>
                        </div>
                        <div class="col-span-2 space-y-1">
                            <label class="block text-[10px] font-bold text-slate-500 uppercase">Designation/Occupation</label>
                            <select name="father_designation" class="w-full px-3 py-2 rounded-lg border border-slate-200 text-sm outline-none focus:ring-2 focus:ring-indigo-500">
                                <option value="">Select Designation</option>
                                @foreach(['Manager', 'Executive', 'Officer', 'Clerk', 'Teacher', 'Professor', 'Doctor', 'Engineer', 'Accountant', 'Businessman', 'Farmer', 'Contractor', 'Self-Employed', 'Retired', 'Home Maker', 'Other'] as $desig)
                                    <option value="{{ $desig }}">{{ $desig }}</option>
                                @endforeach
                            </select>
                        </div>
</div>
                </div>
                <div class="p-4 bg-pink-50/30 rounded-xl border border-pink-100 space-y-4">
                    <h4 class="text-xs font-bold text-pink-600 uppercase flex items-center gap-2">
                        <i class="fa-solid fa-user"></i> {{ $registration->mother_name ?? 'Mother' }}
                    </h4>
                    <div class="grid grid-cols-2 gap-3">
                        <div class="col-span-1">
                            <label class="block text-[10px] font-bold text-slate-500 uppercase">Salutation <span class="text-red-500">*</span></label>
                            <select name="mother_salutation" required class="w-full px-3 py-2 rounded-lg border border-slate-200 text-sm outline-none">
                                <option value="">Select</option>
                                @foreach(['Mrs.', 'Ms.', 'Dr.', 'Prof.', 'Smt.'] as $sal) <option value="{{$sal}}">{{$sal}}</option> @endforeach
                            </select>
                        </div>
                        <div class="col-span-1">
                            <label class="block text-[10px] font-bold text-slate-500 uppercase">Profession <span class="text-red-500">*</span></label>
                            <select name="mother_profession" required class="w-full px-3 py-2 rounded-lg border border-slate-200 text-sm outline-none">
                                <option value="">Select</option>
                                @foreach(['Business', 'Government Service', 'Private Sector', 'Agriculture', 'Housewife', 'Other'] as $prof) <option value="{{$prof}}">{{$prof}}</option> @endforeach
                            </select>
                        </div>
                        <div class="col-span-2 space-y-1">
                            <label class="block text-[10px] font-bold text-slate- la-500 uppercase">Designation/Occupation</label>
                            <select name="mother_designation" class="w-full px-3 py-2 rounded-lg border border-slate-200 text-sm outline-none focus:ring-2 focus:ring-indigo-500">
                                <option value="">Select Designation</option>
                                @foreach(['Manager', 'Executive', 'Officer', 'Clerk', 'Teacher', 'Professor', 'Doctor', 'Engineer', 'Accountant', 'Businesswoman', 'Farmer', 'Self-Employed', 'Housewife', 'Retired', 'Other'] as $desig)
                                    <option value="{{ $desig }}">{{ $desig }}</option>
                                @endforeach
                            </select>
                        </div>
                    </div
                </div>
            </div>
        </div>

        <!-- ADDRESS & LOGISTICS -->
        <div class="bg-white rounded-2xl border border-slate-200 shadow-sm overflow-hidden">
            <div class="bg-slate-50 px-6 py-3 border-b border-slate-200">
                <h3 class="text-xs font-bold text-slate-500 uppercase tracking-widest">Address & Transport</h3>
            </div>
            <div class="p-6 space-y-6">
                <div class="p-4 bg-slate-100 rounded-xl border border-slate-200">
                    <label class="block text-[10px] font-bold text-slate-500 uppercase">Corresponding Address (From Registration)</label>
                    <p class="text-sm font-bold text-slate-700 mt-1">{{ $registration->address }}</p>
                </div>
                <div class="space-y-4">
                    <div class="flex items-center gap-2 p-2 bg-indigo-50 rounded-lg border border-indigo-100">
                        <input type="checkbox" id="same_as" name="same_as_corresponding" value="1" class="w-4 h-4 text-indigo-600 cursor-pointer">
                        <label for="same_as" class="text-xs font-bold text-indigo-700 cursor-pointer">Same as Corresponding Address</label>
                    </div>
                    <div id="permanent_address_fields" class="grid grid-cols-1 md:grid-cols-12 gap-4">

    <!-- ADDRESS -->
    <div class="md:col-span-5 space-y-1">
        <label class="block text-[10px] font-bold text-slate-500 uppercase">Permanent Address <span class="text-red-500">*</span></label>
        <input type="text" name="permanent_address" id="permanent_address" required class="w-full px-3 py-2 rounded-lg border border-slate-200 text-sm outline-none focus:ring-2 focus:ring-indigo-500">

    </div>

    <!-- PINCODE -->
    <div class="md:col-span-2 space-y-1">
        <label class="block text-[10px] font-bold text-slate-500 uppercase">Pincode <span class="text-red-500">*</span></label>
        <input type="text" name="pincode" id="pincode" maxlength="6" required class="w-full px-3 py-2 rounded-lg border border-slate-200 text-sm outline-none focus:ring-2 focus:ring-indigo-500">
    </div>

    <!-- STATE -->
    <div class="md:col-span-2 space-y-1">
        <label class="block text-[10px] font-bold text-slate-500 uppercase">
            State
        </label>

        <select name="state"
                id="state"
                required
                class="w-full px-3 py-2 rounded-lg border border-slate-200 text-sm outline-none focus:ring-2 focus:ring-indigo-500">

            <option value="">Select State</option>
        </select>
    </div>

    <!-- CITY -->
    <div class="md:col-span-3 space-y-1">
        <label class="block text-[10px] font-bold text-slate-500 uppercase">
            City / District
        </label>

        <select name="city"
                id="city"
                required
                class="w-full px-3 py-2 rounded-lg border border-slate-200 text-sm outline-none focus:ring-2 focus:ring-indigo-500">

            <option value="">Select City</option>
        </select>
    </div>

</div>
                <div class="pt-4 border-t border-slate-100">
                    <label class="block text-xs font-bold text-slate-500 uppercase mb-3">Mode of Transport</label>
                    <div class="flex flex-wrap gap-3">
                        @foreach(['Self', 'School Bus', 'Cycle', 'Other'] as $mode)
                        <label class="flex items-center gap-2 px-4 py-2 rounded-lg border border-slate-200 cursor-pointer hover:bg-indigo-50 transition-all">
                            <input type="radio" name="transport_mode" value="{{ $mode }}" required class="w-3 h-3 text-indigo-600">
                            <span class="text-xs font-bold text-slate-600">{{ $mode }}</span>
                        </label>
                        @endforeach
                    </div>
                </div>
            </div>
        </div>
</div>
</div>

        <!-- FINAL ALLOTMENT CARD -->
        <div class="bg-white rounded-2xl border border-slate-200 shadow-sm overflow-hidden ring-2 ring-indigo-500/20">
            <div class="bg-indigo-600 px-6 py-4">
                <h3 class="text-xs font-bold text-white uppercase tracking-widest">Academic Allotment</h3>
            </div>
            <div class="p-6 grid grid-cols-1 md:grid-cols-3 gap-8">
                <div class="space-y-2">
                    <label class="block text-xs font-bold text-slate-500 uppercase">Allot Section</label>
                    <select name="section_id" required class="w-full px-3 py-2.5 rounded-lg border border-slate-200 text-sm outline-none focus:ring-2 focus:ring-indigo-500 cursor-pointer">
                        <option value="">-- Select Section --</option>
                        @forelse($sections as $value => $label)
                            <option value="{{ $value }}">{{ $label }}</option>
                        @empty
                            <option value="N/A" disabled>N/A (No sections defined)</option>
                        @endforelse
                    </select>
                </div>
                <div class="space-y-2">
                    <label class="block text-xs font-bold text-slate-500 uppercase">Joining Date</label>
                    <input type="date" name="joining_date" required onclick="this.showPicker()" class="w-full px-3 py-2.5 rounded-lg border border-slate-200 text-sm outline-none focus:ring-2 focus:ring-indigo-500 cursor-pointer">
                </div>
                <div class="space-y-2">
                    <label class="block text-xs font-bold text-slate-500 uppercase">Fee Applicable Date</label>
                    <input type="date" name="fee_applicable_date" required onclick="this.showPicker()" class="w-full px-3 py-2.5 rounded-lg border border-slate-200 text-sm outline-none focus:ring-2 focus:ring-indigo-500 cursor-pointer">
                </div>
            </div>
            <div class="p-6 bg-slate-50 border-t border-slate-100 flex justify-end">
                <button type="submit" class="inline-flex items-center gap-2 px-8 py-3 bg-indigo-600 text-white rounded-xl text-sm font-bold hover:bg-indigo-700 transition-all shadow-lg shadow-indigo-200">
                    <i class="fa-solid fa-check-circle"></i> Confirm & Approve Student
                </button>
            </div>
</div>
    </form>
</div>

<script>
    // 1. NATIONALITY DROPDOWN
    const countries = ["American", "British", "Canadian", "Australian", "German", "French", "Japanese", "Chinese", "Other"];
    const natSelect = document.getElementById('nationality');
    if(natSelect) {
        countries.forEach(c => {
            let opt = document.createElement('option');
            opt.value = c; opt.textContent = c;
            if(c === 'Indian') opt.selected = true;
            natSelect.appendChild(opt);
        });
    }
</script>
   
<script>

document.addEventListener('DOMContentLoaded', function () {

    const stateSelect = document.getElementById('state');
    const citySelect = document.getElementById('city');
    const pincodeInput = document.getElementById('pincode');

    // =========================================
    // ALL INDIAN STATES
    // =========================================

    const indianStates = [
        "Andhra Pradesh",
        "Arunachal Pradesh",
        "Assam",
        "Bihar",
        "Chhattisgarh",
        "Goa",
        "Gujarat",
        "Haryana",
        "Himachal Pradesh",
        "Jharkhand",
        "Karnataka",
        "Kerala",
        "Madhya Pradesh",
        "Maharashtra",
        "Manipur",
        "Meghalaya",
        "Mizoram",
        "Nagaland",
        "Odisha",
        "Punjab",
        "Rajasthan",
        "Sikkim",
        "Tamil Nadu",
        "Telangana",
        "Tripura",
        "Uttar Pradesh",
        "Uttarakhand",
        "West Bengal",
        "Andaman and Nicobar Islands",
        "Chandigarh",
        "Dadra and Nagar Haveli and Daman and Diu",
        "Delhi",
        "Jammu and Kashmir",
        "Ladakh",
        "Lakshadweep",
        "Puducherry"
    ];

    // =========================================
    // LOAD STATES
    // =========================================

    indianStates.forEach(state => {

        let option = document.createElement('option');

        option.value = state;
        option.textContent = state;

        stateSelect.appendChild(option);

    });

    // =========================================
    // FETCH CITIES FROM API
    // =========================================

    async function fetchCitiesByState(stateName, selectedCity = null) {

        citySelect.innerHTML =
            `<option value="">Loading Cities...</option>`;

        try {

            // FREE API
            const response = await fetch(
                `https://countriesnow.space/api/v0.1/countries/state/cities`,
                {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json'
                    },
                    body: JSON.stringify({
                        country: "India",
                        state: stateName
                    })
                }
            );

            const data = await response.json();

            citySelect.innerHTML =
                `<option value="">Select City</option>`;

            if (data.data && data.data.length > 0) {

                data.data.sort();

                data.data.forEach(city => {

                    let option = document.createElement('option');

                    option.value = city;
                    option.textContent = city;

                    citySelect.appendChild(option);

                });

                // AUTO SELECT CITY
                if (selectedCity) {

                    for (let i = 0; i < citySelect.options.length; i++) {

                        if (
                            citySelect.options[i].value.toLowerCase()
                            === selectedCity.toLowerCase()
                        ) {

                            citySelect.selectedIndex = i;
                            break;
                        }
                    }
                }

            } else {

                citySelect.innerHTML =
                    `<option value="">No Cities Found</option>`;
            }

        } catch (error) {

            console.error(error);

            citySelect.innerHTML =
                `<option value="">Unable to load cities</option>`;
        }
    }

    // =========================================
    // STATE CHANGE
    // =========================================

    stateSelect.addEventListener('change', function () {

        const selectedState = this.value;

        if (selectedState) {

            fetchCitiesByState(selectedState);

        } else {

            citySelect.innerHTML =
                `<option value="">Select City</option>`;
        }
    });

// =========================================
// PINCODE AUTO FETCH FINAL
// =========================================

pincodeInput.addEventListener('keyup', function () {

    const pincode = this.value;

    // ONLY 6 DIGITS
    if (pincode.length === 6) {

        // LOADING
        citySelect.innerHTML =
            '<option value="">Loading...</option>';

        // CALL LARAVEL ROUTE
        fetch('/fetch-pincode/' + pincode)

        .then(response => response.json())

        .then(data => {

            console.log(data);

            // SUCCESS CHECK
            if (
                data[0].Status === "Success" &&
                data[0].PostOffice.length > 0
            ) {

                // FIRST POST OFFICE
                const postOffice =
                    data[0].PostOffice[0];

                // GET STATE & CITY
                const state =
                    postOffice.State;

                const city =
                    postOffice.District;

                // =====================
                // AUTO SELECT STATE
                // =====================

                stateSelect.value = state;

                // =====================
                // RESET CITY DROPDOWN
                // =====================

                citySelect.innerHTML = '';

                // CREATE OPTION
                let option =
                    document.createElement('option');

                option.value = city;
                option.textContent = city;

                citySelect.appendChild(option);

                // AUTO SELECT
                citySelect.value = city;

                // =====================
                // SUCCESS MESSAGE
                // =====================

                Swal.fire({
                    icon: 'success',
                    title: 'Location Found',
                    text: city + ', ' + state,
                    timer: 1500,
                    showConfirmButton: false,
                    toast: true,
                    position: 'top-end'
                });

            } else {

                citySelect.innerHTML =
                    '<option value="">No City Found</option>';

                Swal.fire({
                    icon: 'warning',
                    title: 'Invalid Pincode',
                    text: 'No data found',
                    timer: 2000,
                    showConfirmButton: false,
                    toast: true,
                    position: 'top-end'
                });

            }

        })

        .catch(error => {

            console.error(error);

            Swal.fire({
                icon: 'error',
                title: 'Fetch Error',
                text: 'Unable to fetch pincode',
                timer: 2000,
                showConfirmButton: false,
                toast: true,
                position: 'top-end'
            });

        });

    }

});


    // =========================================
    // SAME AS ADDRESS
    // =========================================

    document.getElementById('same_as')
        .addEventListener('change', function () {

        const permanentAddress =
            document.getElementById('permanent_address');

        if (this.checked) {

            permanentAddress.value =
                `{{ $registration->address }}`;

            permanentAddress.readOnly = true;

            permanentAddress.classList.add('bg-slate-100');

        } else {

            permanentAddress.value = '';

            permanentAddress.readOnly = false;

            permanentAddress.classList.remove('bg-slate-100');
        }
    });

});

</script>
<script>

// =====================================
// ONLY NUMBERS FUNCTION
// =====================================

function allowOnlyNumbers(input, maxLength) {

    input.addEventListener('input', function () {

        this.value =
            this.value.replace(/\D/g, '');

        if (this.value.length > maxLength) {

            this.value =
                this.value.slice(0, maxLength);
        }
    });
}

// Aadhaar
allowOnlyNumbers(
    document.getElementById('aadhaar_no'),
    12
);

// Alternate Contact
allowOnlyNumbers(
    document.getElementById('alternate_contact'),
    10
);

</script>

<script>

const percentageInput =
    document.getElementById('percentage');

percentageInput.addEventListener('keypress', function (e) {

    // ALLOW:
    // 0-9
    // BACKSPACE
    // DOT

    const char = String.fromCharCode(e.which);

    // REGEX
    if (!/[0-9.]$/.test(char)) {

        e.preventDefault();
    }

    // ONLY ONE DOT
    if (
        char === '.' &&
        this.value.includes('.')
    ) {

        e.preventDefault();
    }

});


// LIMIT MAX 100
percentageInput.addEventListener('input', function () {

    let value = parseFloat(this.value);

    if (!isNaN(value) && value > 100) {

        this.value = '100';
    }

});

</script>

<script>
    document.addEventListener('DOMContentLoaded', function () {
        // REMOVED 'select' from here. We only want to uppercase actual text typing.
        const allInputs = document.querySelectorAll('input[type="text"], textarea');

        allInputs.forEach(input => {
            input.addEventListener('input', function () {
                // This will now only affect text fields and textareas
                this.value = this.value.toUpperCase();
            });
        });
    });

    function viewStudentPhoto(url) {
        if (!url || url === "") {
            Swal.fire({
                icon: 'info',
                title: 'No Photo Available',
                text: 'Student photo has not been uploaded yet.',
                timer: 2000,
                showConfirmButton: false
            });
            return;
        }

        Swal.fire({
            imageUrl: url,
            imageAlt: 'Student Photo',
            imageWidth: 400,
            imageHeight: 400,
            imageClass: 'rounded-xl shadow-lg object-cover',
            showConfirmButton: false,
            showCloseButton: true,
            width: 'auto',
            background: '#f8fafc'
        });
    }
</script>


@endsection