@extends('school.layouts.app')

@section('content')
<style>
    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-user-pen"></i>
            </div>
            <div>
                <h1 class="text-xl font-bold text-slate-800">Edit Admission Details</h1>
                <p class="text-sm text-slate-500">Update professional student profile</p>
            </div>
        </div>
        <a href="{{ route('school.admissions.list') }}" 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>

    <!-- 1. Use the named route. 2. Method must be POST. 3. Add @method('PUT') inside -->
    <form action="{{ route('school.admissions.updateAdmission', $student->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
        @method('PUT') 
        
        <!-- 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">Student Information</h3>
                <span class="px-2 py-1 bg-indigo-100 text-indigo-700 rounded text-[10px] font-bold uppercase">Adm No: {{ $student->admission_no }}</span>
            </div>
            <div class="p-4 md:p-6 flex flex-wrap items-center gap-x-4 gap-y-3">
                
                <!-- Photo -->
                <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('{{ $student->enquiry && $student->enquiry->student_photo ? asset('storage/' . $student->enquiry->student_photo) : "" }}')">
                        @if($student->enquiry && $student->enquiry->student_photo)
                            <img src="{{ asset('storage/' . $student->enquiry->student_photo) }}" class="w-full h-full object-cover" alt="Student Photo">
                        @else
                            <img src="https://ui-avatars.com/api/?name={{ urlencode($student->student_name) }}&background=random" class="w-full h-full object-cover" alt="Default Avatar">
                        @endif
                    </div>
                </div>

                <!-- Admission Number (Manual Mode) -->
                @php
                    $admSetting = \DB::table('school_scheme_settings')
                                    ->where('school_id', session('school_id'))
                                    ->where('type', 'admission')
                                    ->first();
                @endphp
                
                <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" value="{{ $student->admission_no }}" 
                        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">
                    @error('admission_no')
                        <p class="text-[10px] text-red-600 mt-0.5 font-bold">{{ $message }}</p>
                    @enderror
                </div>

                <!-- Academic Session (Read Only) -->
                <div class="min-w-[160px] flex-1 max-w-[200px]">
                    <label class="block text-[10px] font-bold text-slate-400 uppercase mb-0.5">Academic Session</label>
                    @php
                        $session = \App\Models\AcademicSession::find($student->academic_session_id);
                    @endphp
                    <p class="text-xs font-bold text-indigo-700 bg-indigo-50 border border-indigo-200 rounded-lg px-2.5 py-1.5">
                        {{ $session ? $session->session_name : 'N/A' }}
                    </p>
                    <input type="hidden" name="academic_session_id" value="{{ $student->academic_session_id }}">
                </div>

                <!-- Full Name -->
                <div class="min-w-[120px] 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">{{ $student->student_name }}</p>
                </div>

                <!-- Father's Name -->
                <div class="min-w-[100px] 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">{{ $student->father_name }}</p>
                </div>

                <!-- ✅ Mother's Name (Added) -->
                <div class="min-w-[100px] flex-1">
                    <label class="block text-[10px] font-bold text-slate-400 uppercase mb-0.5">Mother's Name</label>
                    <p class="text-xs font-bold text-slate-800 truncate">{{ $student->mother_name ?? 'N/A' }}</p>
                </div>

                                <!-- Seeking Class -->
                <div class="min-w-[120px] flex-1">
                    <label class="block text-[10px] font-bold text-slate-400 uppercase mb-0.5">Class <span class="text-red-500">*</span></label>
                    <select name="class_id" id="class_id" required 
                        class="w-full px-2.5 py-1.5 rounded-lg border border-slate-200 text-xs font-bold text-indigo-700 bg-white focus:ring-2 focus:ring-indigo-500 outline-none">
                        @foreach($classes as $classId => $className)
                            <option value="{{ $classId }}" {{ (old('class_id', $selectedClassId) == $classId) ? 'selected' : '' }}>{{ $className }}</option>
                        @endforeach
                    </select>
                    @error('class_id') <p class="text-[10px] text-red-600 mt-0.5 font-bold">{{ $message }}</p> @enderror
                </div>

                <!-- Contact -->
                <div class="min-w-[100px]">
                    <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">{{ $student->contact_number }}</p>
                </div>
            </div>
        </div>

        <div class="grid grid-cols-1 lg:grid-cols-2 gap-6">
            <!-- 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</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">
                            @foreach(['A+', 'A-', 'B+', 'B-', 'O+', 'O-', 'AB+', 'AB-'] as $bg) 
                                <option value="{{$bg}}" {{ $student->blood_group == $bg ? 'selected' : '' }}>{{$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" 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>
                            @foreach(['Hindu', 'Sikh', 'Muslim', 'Christian', 'Jain', 'Buddhist', 'Parsi', 'Jewish', 'Bahai', 'Other'] as $rel) 
                                <option value="{{$rel}}" {{ $student->religion == $rel ? 'selected' : '' }}>{{$rel}}</option> 
                            @endforeach
                        </select>
                    </div>
                    <div class="space-y-1">
                        <label class="block text-[10px] font-bold text-slate-500 uppercase">Category</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">
                            @foreach(['General', 'OBC', 'SC', 'ST'] as $cat) 
                                <option value="{{$cat}}" {{ $student->category == $cat ? 'selected' : '' }}>{{$cat}}</option> 
                            @endforeach
                        </select>
                    </div>
                    <div class="space-y-1">
                        <label class="block text-[10px] font-bold text-slate-500 uppercase">Nationality</label>
                        <select name="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" {{ $student->nationality == 'Indian' ? 'selected' : '' }}>Indian</option>
                            <option value="Other" {{ $student->nationality == 'Other' ? 'selected' : '' }}>Other</option>
                        </select>
                    </div>
                    <div class="space-y-1">
                        <label class="block text-[10px] font-bold text-slate-500 uppercase">Aadhaar No</label>
                        <input type="text" name="aadhaar_no" value="{{ $student->aadhaar_no }}" maxlength="12" class="w-full px-3 py-2 rounded-lg border border-slate-200 text-sm">
                    </div>
                    <div class="space-y-1">
                       <label class="block text-[10px] font-bold text-slate-500 uppercase">Alternate Contact</label>
                       <input type="text" name="alternate_contact" value="{{ $student->alternate_contact }}" maxlength="10" required class="w-full px-3 py-2 rounded-lg border border-slate-200 text-sm">
                    </div>
                </div>
            </div>

            <!-- PREVIOUS ACADEMIC -->
            <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">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" value="{{ $student->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>
                            <input type="text" name="previous_class" value="{{ $student->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">
                        </div>
                        <div class="space-y-1">
                            <label class="block text-[10px] font-bold text-slate-500 uppercase">Percentage (%)</label>
                            <input type="text" name="previous_percentage" value="{{ $student->previous_percentage }}" class="w-full px-3 py-2 rounded-lg border border-slate-200 text-sm">
                        </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" value="{{ $student->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" value="{{ $student->tc_date }}" 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>

        <!-- PARENTAL INFO -->
        <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 Information</h3>
            </div>
            <div class="p-6 grid grid-cols-1 md:grid-cols-2 gap-8">
                <!-- Father -->
                <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> {{ $student->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</label>
                            <select name="father_salutation" required class="w-full px-3 py-2 rounded-lg border border-slate-200 text-sm">
                                @foreach(['Mr.', 'Dr.', 'Prof.', 'Shri', 'Sardar'] as $sal) 
                                    <option value="{{$sal}}" {{ $student->father_salutation == $sal ? 'selected' : '' }}>{{$sal}}</option> 
                                @endforeach
                            </select>
                        </div>
                        <div class="col-span-1">
                            <label class="block text-[10px] font-bold text-slate-500 uppercase">Profession</label>
                            <select name="father_profession" required class="w-full px-3 py-2 rounded-lg border border-slate-200 text-sm">
                                @foreach(['Business', 'Government Service', 'Private Sector', 'Agriculture', 'Professional', 'Self-Employed', 'Other'] as $prof) 
                                    <option value="{{$prof}}" {{ $student->father_profession == $prof ? 'selected' : '' }}>{{$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</label>
                            <input type="text" name="father_designation" value="{{ $student->father_designation }}" class="w-full px-3 py-2 rounded-lg border border-slate-200 text-sm">
                        </div>
                    </div>
                </div>
                <!-- Mother -->
                <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> {{ $student->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</label>
                            <select name="mother_salutation" required class="w-full px-3 py-2 rounded-lg border border-slate-200 text-sm">
                                @foreach(['Mrs.', 'Ms.', 'Dr.', 'Prof.', 'Smt.'] as $sal) 
                                    <option value="{{$sal}}" {{ $student->mother_salutation == $sal ? 'selected' : '' }}>{{$sal}}</option> 
                                @endforeach
                            </select>
                        </div>
                        <div class="col-span-1">
                            <label class="block text-[10px] font-bold text-slate-500 uppercase">Profession</label>
                            <select name="mother_profession" required class="w-full px-3 py-2 rounded-lg border border-slate-200 text-sm">
                                @foreach(['Business', 'Government Service', 'Private Sector', 'Agriculture', 'Housewife', 'Other'] as $prof) 
                                    <option value="{{$prof}}" {{ $student->mother_profession == $prof ? 'selected' : '' }}>{{$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</label>
                            <input type="text" name="mother_designation" value="{{ $student->mother_designation }}" class="w-full px-3 py-2 rounded-lg border border-slate-200 text-sm">
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- ADDRESS -->
        <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="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" {{ $student->permanent_address == $student->corresponding_address ? 'checked' : '' }} 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 class="grid grid-cols-1 md:grid-cols-12 gap-4">
                    <div class="md:col-span-5 space-y-1">
                        <label class="block text-[10px] font-bold text-slate-500 uppercase">Permanent Address</label>
                        <input type="text" name="permanent_address" id="permanent_address" value="{{ $student->permanent_address }}" required class="w-full px-3 py-2 rounded-lg border border-slate-200 text-sm">
                    </div>
                    <div class="md:col-span-2 space-y-1">
                        <label class="block text-[10px] font-bold text-slate-500 uppercase">Pincode</label>
                        <input type="text" name="pincode" value="{{ $student->pincode }}" maxlength="6" required class="w-full px-3 py-2 rounded-lg border border-slate-200 text-sm">
                    </div>
                    <div class="md:col-span-2 space-y-1">
                        <label class="block text-[10px] font-bold text-slate-500 uppercase">State</label>
                        <input type="text" name="state" value="{{ $student->state }}" required class="w-full px-3 py-2 rounded-lg border border-slate-200 text-sm">
                    </div>
                    <div class="md:col-span-3 space-y-1">
                        <label class="block text-[10px] font-bold text-slate-500 uppercase">City</label>
                        <input type="text" name="city" value="{{ $student->city }}" required class="w-full px-3 py-2 rounded-lg border border-slate-200 text-sm">
                    </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 }}" {{ $student->transport_mode == $mode ? 'checked' : '' }} 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>

        <!-- ACADEMIC ALLOTMENT -->
        <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 <span class="text-red-500">*</span></label>
                    <select name="section_id" id="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">
                        <option value="">-- Select Section --</option>
                        @foreach($sections as $value => $label)
                            <option value="{{ $value }}" {{ old('section_id', $student->section_id) == $value ? 'selected' : '' }}>{{ $label }}</option>
                        @endforeach
                    </select>
                    @error('section_id') <p class="text-[10px] text-red-600 mt-0.5 font-bold">{{ $message }}</p> @enderror
                </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" value="{{ $student->joining_date }}" 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">
                </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" value="{{ $student->fee_applicable_date }}" 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">
                </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-save"></i> Update Admission Profile
                </button>
            </div>
        </div>
    </form>
</div>

<script>
    document.addEventListener('DOMContentLoaded', function () {
        // ✅ FIXED: Only uppercase text inputs and textareas, NOT selects
        const textInputs = document.querySelectorAll('input[type="text"], textarea');
        textInputs.forEach(input => {
            input.addEventListener('input', function () {
                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>

<script>
    // Dynamic Section Loader — no page reload
    const allSections = @json($allSections);
    const classSelect = document.getElementById('class_id');
    const sectionSelect = document.getElementById('section_id');
    const currentSectionId = "{{ old('section_id', $student->section_id) }}";

    function populateSections(classId) {
        sectionSelect.innerHTML = '<option value="">-- Select Section --</option>';
        if (allSections[classId]) {
            Object.entries(allSections[classId]).forEach(([id, name]) => {
                const opt = document.createElement('option');
                opt.value = id;
                opt.textContent = name;
                if (id == currentSectionId) opt.selected = true;
                sectionSelect.appendChild(opt);
            });
        }
    }

    classSelect.addEventListener('change', function() {
        populateSections(this.value);
    });

    // Init on page load
    if (classSelect.value) {
        populateSections(classSelect.value);
    }
</script>
@endsection