@extends('school.layouts.app')

@section('content')
<!-- CSS Dependencies -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/cropperjs/1.5.13/cropper.min.css">
<style>
    /* Force uppercase visually for all text inputs */
    input[type="text"], textarea, select { text-transform: uppercase !important; }
    .cropper-container { max-height: 400px !important; }
    .disabled-field { background-color: #f1f5f9 !important; cursor: not-allowed; color: #64748b; }
</style>

<!-- 1. ERROR MESSAGES DISPLAY -->
@if($errors->any())
    <div class="max-w-7xl mx-auto mb-4">
        <div class="bg-red-100 border-l-4 border-red-500 text-red-700 p-4 rounded-lg shadow-sm animate-bounce-in">
            <div class="flex items-center gap-2 mb-1">
                <i class="fa-solid fa-circle-exclamation"></i>
                <p class="font-bold text-sm">Please correct the following errors:</p>
            </div>
            <ul class="text-xs list-disc ml-6 mt-1">
                @foreach($errors->all() as $error)
                    <li>{{ $error }}</li>
                @endforeach
            </ul>
        </div_div>
    </div>
@endif

<!-- 2. PROFILE HEADER -->
<div class="mb-6">
    <div class="flex items-center justify-between bg-white p-4 rounded-2xl border border-slate-200 shadow-sm">
        <div class="flex items-center gap-4">
            <a href="{{ route('school.students.index') }}" class="w-10 h-10 rounded-lg bg-slate-100 border border-slate-200 flex items-center justify-center text-slate-500 hover:text-indigo-600 transition-all">
                <i class="fa-solid fa-arrow-left"></i>
            </a>
            <div class="flex items-center gap-4">
                <!-- Main Profile Photo -->
                <div class="relative group cursor-pointer" onclick="viewBigPhoto('{{ asset('storage/' . ($student->enquiry->student_photo ?? "")) }}')">
                    @php 
                        $sPhoto = $student->enquiry ? $student->enquiry->student_photo : null;
                    @endphp
                    <img src="{{ $sPhoto ? asset('storage/'.$sPhoto) : asset('images/default-user.png') }}" 
                         class="w-16 h-16 rounded-full object-cover border-2 border-indigo-500 p-0.5 shadow-md hover:scale-105 transition-all">
                    <div class="absolute bottom-0 right-0 w-4 h-4 bg-green-500 border-2 border-white rounded-full"></div>
                </div>
                <div>
                    <h1 class="text-2xl font-extrabold text-slate-800 tracking-tight leading-none">{{ $student->student_name }}</h1>
                    <p class="text-xs text-slate-500 mt-1 font-medium">Student Master Record • ID: #{{ $student->id }}</p>
                </div>
            </div>
        </div>
        <button onclick="toggleLogModal()" class="px-4 py-2 bg-indigo-50 text-indigo-600 border border-indigo-100 rounded-lg text-xs font-bold hover:bg-indigo-100 transition-all flex items-center gap-2 shadow-sm">
            <i class="fa-solid fa-clock-rotate-left"></i> View Audit Logs
        </button>
    </div>
</div>

<div class="max-w-7xl mx-auto">
    <form action="{{ route('school.students.update', $student->id) }}" method="POST" enctype="multipart/form-data" class="space-y-6">
        @csrf
        @method('PUT')

        <!-- SECTION 1: SYSTEM LOCKED FIELDS -->
        <div class="bg-slate-100 rounded-xl border border-slate-200 shadow-sm overflow-hidden opacity-80">
            <div class="p-3 border-b border-slate-200 bg-slate-200/50 flex items-center gap-2">
                <i class="fa-solid fa-lock text-slate-500 text-xs"></i>
                <h3 class="text-[11px] font-bold text-slate-600 uppercase tracking-widest">System Locked Fields (Non-Editable)</h3>
            </div>
            <div class="p-4 grid grid-cols-1 md:grid-cols-6 gap-4">
                <div class="flex flex-col gap-1">
                    <label class="text-[10px] font-bold text-slate-400 uppercase">Admission No</label>
                    <input type="text" value="{{ $student->admission_no }}" disabled class="px-3 py-2 rounded-lg border border-slate-200 disabled-field text-sm">
                </div>
                <div class="flex flex-col gap-1">
                    <label class="text-[10px] font-bold text-slate-400 uppercase">User ID</label>
                    <input type="text" value="{{ $student->user_id }}" disabled class="px-3 py-2 rounded-lg border border-slate-200 disabled-field text-sm">
                </div>
                <div class="flex flex-col gap-1">
                    <label class="text-[10px] font-bold text-slate-400 uppercase">Academic Session</label>
                    <input type="text" value="{{ $student->academicSession->session_name ?? 'N/A' }}" disabled class="px-3 py-2 rounded-lg border border-slate-200 disabled-field text-sm">
                </div>
                <div class="flex flex-col gap-1">
                    <label class="text-[10px] font-bold text-slate-400 uppercase">Class</label>
                    <input type="text" value="{{ $student->seeking_class }}" disabled class="px-3 py-2 rounded-lg border border-slate-200 disabled-field text-sm">
                </div>
                <div class="flex flex-col gap-1">
                    <label class="text-[10px] font-bold text-slate-400 uppercase">Section</label>
                    <input type="text" value="{{ $student->section }}" disabled class="px-3 py-2 rounded-lg border border-slate-200 disabled-field text-sm">
                </div>
                <div class="flex flex-col gap-1">
                    <label class="text-[10px] font-bold text-slate-400 uppercase">Admission Status</label>
                    <input type="text" value="{{ $student->status }}" disabled class="px-3 py-2 rounded-lg border border-slate-200 disabled-field text-sm">
                </div>
            </div>
        </div>

        <!-- SECTION 2: BASIC PERSONAL INFO -->
        <div class="bg-white rounded-xl border border-slate-200 shadow-sm overflow-hidden">
            <div class="p-4 border-b border-slate-100 bg-slate-50/50 flex items-center gap-2">
                <i class="fa-solid fa-user text-indigo-500 text-xs"></i>
                <h3 class="text-sm font-bold text-slate-700 uppercase tracking-wider">Basic Personal Information</h3>
            </div>
            <div class="p-6 grid grid-cols-1 md:grid-cols-4 gap-5">
                <div class="flex flex-col gap-1 md:col-span-2">
                    <label class="text-[11px] font-bold text-slate-400 uppercase">Student Name</label>
                    <input type="text" name="student_name" value="{{ $student->student_name }}" class="px-3 py-2 rounded-lg border border-slate-200 text-sm outline-none focus:ring-2 focus:ring-indigo-500">
                </div>
                <div class="flex flex-col gap-1">
                    <label class="text-[11px] font-bold text-slate-400 uppercase">Date of Birth</label>
                    <input type="date" name="date_of_birth" value="{{ $student->date_of_birth }}" class="px-3 py-2 rounded-lg border border-slate-200 text-sm outline-none focus:ring-2 focus:ring-indigo-500">
                </div>
                <div class="flex flex-col gap-1">
                    <label class="text-[11px] font-bold text-slate-400 uppercase">Gender</label>
                    <select name="gender" class="px-3 py-2 rounded-lg border border-slate-200 text-sm outline-none focus:ring-2 focus:ring-indigo-500">
                        <option value="Male" {{ $student->gender == 'Male' ? 'selected' : '' }}>Male</option>
                        <option value="Female" {{ $student->gender == 'Female' ? 'selected' : '' }}>Female</option>
                        <option value="Other" {{ $student->gender == 'Other' ? 'selected' : '' }}>Other</option>
                    </select>
                </div>
                <div class="flex flex-col gap-1">
                    <label class="text-[11px] font-bold text-slate-400 uppercase">Blood Group</label>
                    <select name="blood_group" class="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}}" {{ $student->blood_group == $bg ? 'selected' : '' }}>{{$bg}}</option> 
                        @endforeach
                    </select>
                </div>
                <div class="flex flex-col gap-1">
                    <label class="text-[11px] font-bold text-slate-400 uppercase">Religion</label>
                    <select name="religion" class="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(['HINDU', 'SIKH', 'MUSLIM', 'CHRISTIAN', 'JAIN', 'BUDDHIST', 'PARSI', 'OTHER'] as $rel) 
                            <option value="{{$rel}}" {{ $student->religion == $rel ? 'selected' : '' }}>{{$rel}}</option> 
                        @endforeach
                    </select>
                </div>
                <div class="flex flex-col gap-1">
                    <label class="text-[11px] font-bold text-slate-400 uppercase">Category</label>
                    <select name="category" class="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(['GENERAL', 'OBC', 'SC', 'ST'] as $cat) 
                            <option value="{{$cat}}" {{ $student->category == $cat ? 'selected' : '' }}>{{$cat}}</option> 
                        @endforeach
                    </select>
                </div>
                <div class="flex flex-col gap-1">
                    <label class="text-[11px] font-bold text-slate-400 uppercase">Caste</label>
                    <input type="text" name="caste" value="{{ $student->caste }}" class="px-3 py-2 rounded-lg border border-slate-200 text-sm outline-none focus:ring-2 focus:ring-indigo-500">
                </div>
                <div class="flex flex-col gap-1">
                    <label class="text-[11px] font-bold text-slate-400 uppercase">Nationality</label>
                    <select name="nationality" class="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="flex flex-col gap-1">
                    <label class="text-[11px] font-bold text-slate-400 uppercase">Aadhaar Number</label>
                    <input type="text" name="aadhaar_no" value="{{ $student->aadhaar_no }}" maxlength="12" oninput="this.value = this.value.replace(/[^0-9]/g, '')" class="px-3 py-2 rounded-lg border border-slate-200 text-sm outline-none focus:ring-2 focus:ring-indigo-500">
                </div>
            </div>
        </div>

        <!-- SECTION 3: CONTACT & ADDRESS -->
        <div class="bg-white rounded-xl border border-slate-200 shadow-sm overflow-hidden">
            <div class="p-4 border-b border-slate-100 bg-slate-50/50 flex items-center gap-2">
                <i class="fa-solid fa-location-dot text-indigo-500 text-xs"></i>
                <h3 class="text-sm font-bold text-slate-700 uppercase tracking-wider">Contact & Address Details</h3>
            </div>
            <div class="p-6 grid grid-cols-1 md:grid-cols-3 gap-5">
                <div class="flex flex-col gap-1">
                    <label class="text-[11px] font-bold text-slate-400 uppercase">Contact Number</label>
                    <input type="text" name="contact_number" value="{{ $student->contact_number }}" maxlength="10" oninput="this.value = this.value.replace(/[^0-9]/g, '')" class="px-3 py-2 rounded-lg border border-slate-200 text-sm outline-none focus:ring-2 focus:ring-indigo-500">
                </div>
                <div class="flex flex-col gap-1">
                    <label class="text-[11px] font-bold text-slate-400 uppercase">Alternate Number</label>
                    <input type="text" name="alternate_contact" value="{{ $student->alternate_contact }}" maxlength="10" oninput="this.value = this.value.replace(/[^0-9]/g, '')" class="px-3 py-2 rounded-lg border border-slate-200 text-sm outline-none focus:ring-2 focus:ring-indigo-500">
                </div>
                <div class="flex flex-col gap-1">
                    <label class="text-[11px] font-bold text-slate-400 uppercase">Email Address</label>
                    <input type="email" name="email" value="{{ $student->email }}" class="px-3 py-2 rounded-lg border border-slate-200 text-sm outline-none focus:ring-2 focus:ring-indigo-500">
                </div>
                <div class="flex flex-col gap-1 md:col-span-3">
                    <label class="text-[11px] font-bold text-slate-400 uppercase">Permanent Address</label>
                    <textarea name="permanent_address" rows="2" class="px-3 py-2 rounded-lg border border-slate-200 text-sm outline-none focus:ring-2 focus:ring-indigo-500">{{ $student->permanent_address }}</textarea>
                </div>
                <div class="flex flex-col gap-1">
                    <label class="text-[11px] font-bold text-slate-400 uppercase">Pincode</label>
                    <input type="text" name="pincode" id="pincode" value="{{ $student->pincode }}" maxlength="6" oninput="this.value = this.value.replace(/[^0-9]/g, '')" class="px-3 py-2 rounded-lg border border-slate-200 text-sm outline-none focus:ring-2 focus:ring-indigo-500">
                </div>
                <div class="flex flex-col gap-1">
                    <label class="text-[11px] font-bold text-slate-400 uppercase">State</label>
                    <select name="state" id="state" class="px-3 py-2 rounded-lg border border-slate-200 text-sm outline-none focus:ring-2 focus:ring-indigo-500">
                        <option value="{{ $student->state }}" selected>{{ $student->state }}</option>
                    </select>
                </div>
                <div class="flex flex-col gap-1">
                    <label class="text-[11px] font-bold text-slate-400 uppercase">City / District</label>
                    <select name="city" id="city" class="px-3 py-2 rounded-lg border border-slate-200 text-sm outline-none focus:ring-2 focus:ring-indigo-500">
                        <option value="{{ $student->city }}" selected>{{ $student->city }}</option>
                    </select>
                </div>
                <div class="flex flex-col gap-1 md:col-span-3">
                    <label class="text-[11px] font-bold text-slate-400 uppercase">Corresponding Address</label>
                    <textarea name="corresponding_address" rows="2" class="px-3 py-2 rounded-lg border border-slate-200 text-sm outline-none focus:ring-2 focus:ring-indigo-500">{{ $student->corresponding_address }}</textarea>
                </div>
            </div>
        </div>

        <!-- SECTION 4: PARENTS INFO -->
        <div class="bg-white rounded-xl border border-slate-200 shadow-sm overflow-hidden">
            <div class="p-4 border-b border-slate-100 bg-slate-50/50 flex items-center gap-2">
                <i class="fa-solid fa-users-rectangle text-indigo-500 text-xs"></i>
                <h3 class="text-sm font-bold text-slate-700 uppercase tracking-wider">Parental Details</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">
                    <div class="grid grid-cols-1 md:grid-cols-2 gap-5">
                        <div class="flex flex-col gap-1">
                            <label class="text-[11px] font-bold text-slate-400 uppercase">Father's Name</label>
                            <input type="text" name="father_name" value="{{ $student->father_name }}" class="px-3 py-2 rounded-lg border border-slate-200 text-sm outline-none focus:ring-2 focus:ring-indigo-500">
                        </div>
                        <div class="flex flex-col gap-1">
                            <label class="text-[11px] font-bold text-slate-400 uppercase">Salutation</label>
                            <select name="father_salutation" class="px-3 py-2 rounded-lg border border-slate-200 text-sm outline-none focus:ring-2 focus:ring-indigo-500">
                                @foreach(['MR.', 'DR.', 'PROF.', 'SHRI', 'SARDAR'] as $sal) 
                                    <option value="{{$sal}}" {{ $student->father_salutation == $sal ? 'selected' : '' }}>{{$sal}}</option> 
                                @endforeach
                            </select>
                        </div>
                        <div class="flex flex-col gap-1">
                            <label class="text-[11px] font-bold text-slate-400 uppercase">Profession</label>
                            <select name="father_profession" class="px-3 py-2 rounded-lg border border-slate-200 text-sm outline-none focus:ring-2 focus:ring-indigo-500">
                                @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="flex flex-col gap-1">
                            <label class="text-[11px] font-bold text-slate-400 uppercase">Designation</label>
                            <select name="father_designation" class="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}}" {{ $student->father_designation == $desig ? 'selected' : '' }}>{{$desig}}</option>
                                @endforeach
                            </select>
                        </div>

                    </div>
                </div>
                <!-- Mother -->
                <div class="p-4 bg-pink-50/30 rounded-xl border border-pink-100 space-y-4">
                    <div class="grid grid-cols-1 md:grid-cols-2 gap-5">
                        <div class="flex flex-col gap-1">
                            <label class="text-[11px] font-bold text-slate-400 uppercase">Mother's Name</label>
                            <input type="text" name="mother_name" value="{{ $student->mother_name }}" class="px-3 py-2 rounded-lg border border-slate-200 text-sm outline-none focus:ring-2 focus:ring-indigo-500">
                        </div>
                        <div class="flex flex-col gap-1">
                            <label class="text-[11px] font-bold text-slate-400 uppercase">Salutation</label>
                            <select name="mother_salutation" class="px-3 py-2 rounded-lg border border-slate-200 text-sm outline-none focus:ring-2 focus:ring-indigo-500">
                                @foreach(['MRS.', 'MS.', 'DR.', 'PROF.', 'SMT.'] as $sal) 
                                    <option value="{{$sal}}" {{ $student->mother_salutation == $sal ? 'selected' : '' }}>{{$sal}}</option> 
                                @endforeach
                            </select>
                        </div>
                        <div class="flex flex-col gap-1">
                            <label class="text-[11px] font-bold text-slate-400 uppercase">Profession</label>
                            <select name="mother_profession" class="px-3 py-2 rounded-lg border border-slate-200 text-sm outline-none focus:ring-2 focus:ring-indigo-500">
                                @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="flex flex-col gap-1">
                            <label class="text-[11px] font-bold text-slate-400 uppercase">Designation</label>
                            <select name="mother_designation" class="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}}" {{ $student->mother_designation == $desig ? 'selected' : '' }}>{{$desig}}</option>
                                @endforeach
                            </select>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- SECTION 5: ACADEMICS -->
        <div class="bg-white rounded-xl border border-slate-200 shadow-sm overflow-hidden">
            <div class="p-4 border-b border-slate-100 bg-slate-50/50 flex items-center gap-2">
                <i class="fa-solid fa-graduation-cap text-indigo-500 text-xs"></i>
                <h3 class="text-sm font-bold text-slate-700 uppercase tracking-wider">Academic History</h3>
            </div>
            <div class="p-6 grid grid-cols-1 md:grid-cols-4 gap-5">
                <div class="flex flex-col gap-1 md:col-span-2">
                    <label class="text-[11px] font-bold text-slate-400 uppercase">Previous School</label>
                    <input type="text" name="previous_school" value="{{ $student->previous_school }}" class="px-3 py-2 rounded-lg border border-slate-200 text-sm outline-none focus:ring-2 focus:ring-indigo-500">
                </div>
                <div class="flex flex-col gap-1">
                    <label class="text-[11px] font-bold text-slate-400 uppercase">Previous Class</label>
                    <select name="previous_class" class="px-3 py-2 rounded-lg border border-slate-200 text-sm outline-none focus:ring-2 focus:ring-indigo-500">
                        @foreach(['Select Class','PRE-NURSERY', 'NURSERY', 'LKG', 'UKG', '1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12'] as $cls) 
                            <option value="{{$cls}}" {{ $student->previous_class == $cls ? 'selected' : '' }}>{{$cls}}</option> 
                        @endforeach
                    </select>
                </div>
                <div class="flex flex-col gap-1">
                    <label class="text-[11px] font-bold text-slate-400 uppercase">Percentage (%)</label>
                    <input type="number" name="previous_percentage" value="{{ $student->previous_percentage }}" min="1" max="100" class="px-3 py-2 rounded-lg border border-slate-200 text-sm outline-none focus:ring-2 focus:ring-indigo-500">
                </div>
                <div class="flex flex-col gap-1">
                    <label class="text-[11px] font-bold text-slate-400 uppercase">TC Number</label>
                    <input type="text" name="tc_number" value="{{ $student->tc_number }}" class="px-3 py-2 rounded-lg border border-slate-200 text-sm outline-none focus:ring-2 focus:ring-indigo-500">
                </div>
                <div class="flex flex-col gap-1">
                    <label class="text-[11px] font-bold text-slate-400 uppercase">TC Date</label>
                    <input type="date" name="tc_date" value="{{ $student->tc_date }}" class="px-3 py-2 rounded-lg border border-slate-200 text-sm outline-none focus:ring-2 focus:ring-indigo-500">
                </div>
                <div class="flex flex-col gap-1">
                    <label class="text-[11px] font-bold text-slate-400 uppercase">Joining Date</label>
                    <input type="date" name="joining_date" value="{{ $student->joining_date }}" class="px-3 py-2 rounded-lg border border-slate-200 text-sm outline-none focus:ring-2 focus:ring-indigo-500">
                </div>
                <div class="flex flex-col gap-1">
                    <label class="text-[11px] font-bold text-slate-400 uppercase">Fee Applicable Date</label>
                    <input type="date" name="fee_applicable_date" value="{{ $student->fee_applicable_date }}" class="px-3 py-2 rounded-lg border border-slate-200 text-sm outline-none focus:ring-2 focus:ring-indigo-500">
                </div>
            </div>
        </div>

        <!-- SECTION 6: LOGISTICS & PHOTOS -->
        <div class="bg-white rounded-xl border border-slate-200 shadow-sm overflow-hidden">
            <div class="p-4 border-b border-slate-100 bg-slate-50/50 flex items-center gap-2">
                <i class="fa-solid fa-camera text-indigo-500 text-xs"></i>
                <h3 class="text-sm font-bold text-slate-700 uppercase tracking-wider">Photos & Logistics</h3>
            </div>
            <div class="p-6 grid grid-cols-1 md:grid-cols-3 gap-8">
                <!-- Student Photo -->
                <div class="flex flex-col items-center gap-3 p-4 bg-slate-50 rounded-xl border border-slate-200">
                    <label class="text-[11px] font-bold text-slate-400 uppercase self-start">Student Photo</label>
                    <div class="w-24 h-24 rounded-full border-2 border-indigo-500 overflow-hidden bg-white shadow-sm">
                        <img id="preview_student_photo" src="{{ $sPhoto ? asset('storage/'.$sPhoto) : asset('images/default-user.png') }}" class="w-full h-full object-cover">
                    </div>
                    <input type="file" accept="image/*" onchange="initCropper(this, 'student_photo')" class="text-xs w-full">
                    <input type="hidden" name="student_photo" id="input_student_photo">
                </div>

                <!-- Father Photo -->
                <div class="flex flex-col items-center gap-3 p-4 bg-slate-50 rounded-xl border border-slate-200">
                    <label class="text-[11px] font-bold text-slate-400 uppercase self-start">Father Photo</label>
                    <div class="w-24 h-24 rounded-full border-2 border-slate-300 overflow-hidden bg-white shadow-sm">
                        <img id="preview_father_photo" 
                        src="{{ (!empty($student->father_photo)) ? asset('storage/'.$student->father_photo) : asset('images/default-user.png') }}" 
                        onerror="this.src='{{ asset('images/default-user.png') }}'"
                        class="w-full h-full object-cover">

                    </div>
                    <input type="file" accept="image/*" onchange="initCropper(this, 'father_photo')" class="text-xs w-full">
                    <input type="hidden" name="father_photo" id="input_father_photo">
                </div>

                <!-- Mother Photo -->
                <div class="flex flex-col items-center gap-3 p-4 bg-slate-50 rounded-xl border border-slate-200">
                    <label class="text-[11px] font-bold text-slate-400 uppercase self-start">Mother Photo</label>
                    <div class="w-24 h-24 rounded-full border-2 border-slate-300 overflow-hidden bg-white shadow-sm">
                        <img id="preview_mother_photo" 
                        src="{{ (!empty($student->mother_photo)) ? asset('storage/'.$student->mother_photo) : asset('images/default-user.png') }}" 
                        onerror="this.src='{{ asset('images/default-user.png') }}'"
                        class="w-full h-full object-cover">

                    </div>
                    <input type="file" accept="image/*" onchange="initCropper(this, 'mother_photo')" class="text-xs w-full">
                    <input type="hidden" name="mother_photo" id="input_mother_photo">
                </div>
            </div>
            <div class="p-6 pt-0 grid grid-cols-1 md:grid-cols-3 gap-5">
                <div class="flex flex-col gap-1 md:col-span-1">
                    <label class="text-[11px] font-bold text-slate-400 uppercase">Transport Mode</label>
                    <select name="transport_mode" class="px-3 py-2 rounded-lg border border-slate-200 text-sm outline-none focus:ring-2 focus:ring-indigo-500">
                        @foreach(['SELF', 'SCHOOL BUS', 'CYCLE', 'OTHER'] as $mode) 
                            {{-- Convert database value to uppercase to ensure it matches the array --}}
                            <option value="{{$mode}}" {{ strtoupper($student->transport_mode) == $mode ? 'selected' : '' }}>{{$mode}}</option> 
                        @endforeach
                    </select>

                </div>
            </div>
        </div>


        <div class="flex justify-end gap-3 pb-10">
            <button type="submit" class="px-8 py-3 bg-indigo-600 text-white rounded-xl text-sm font-bold hover:bg-indigo-700 shadow-lg shadow-indigo-200 transition-all flex items-center gap-2">
                <i class="fa-solid fa-cloud-upload-alt"></i> Save Profile Updates
            </button>
        </div>
    </form>
</div>

<!-- CROPPER MODAL POPUP -->
<div id="cropModal" class="hidden fixed inset-0 z-[2000] flex items-center justify-center bg-slate-900/80 backdrop-blur-sm p-4">
    <div class="bg-white w-full max-w-2xl rounded-2xl overflow-hidden flex flex-col shadow-2xl">
        <div class="p-4 border-b bg-slate-50 flex justify-between items-center">
            <h3 class="font-bold text-slate-700 flex items-center gap-2">
                <i class="fa-solid fa-crop-simple text-indigo-600"></i> Crop & Rotate Image
            </h3>
            <button onclick="closeCrop()" class="text-slate-400 hover:text-red-500 transition-all">
                <i class="fa-solid fa-xmark text-xl"></i>
            </button>
        </div>
        <div class="p-6">
            <div class="max-h-[500px] overflow-hidden bg-slate-200 rounded-lg shadow-inner">
                <img id="cropperImage" src="" style="max-width: 100%;">
            </div>
            <div class="mt-6 flex justify-between items-center">
                <div class="flex gap-2">
                    <button onclick="rotateImage(-90)" class="px-3 py-2 bg-slate-100 rounded-lg text-xs font-bold border border-slate-200 hover:bg-slate-200 transition-all flex items-center gap-2">
                        <i class="fa-solid fa-rotate-left"></i> Rotate Left
                    </button>
                    <button onclick="rotateImage(90)" class="px-3 py-2 bg-slate-100 rounded-lg text-xs font-bold border border-slate-200 hover:bg-slate-200 transition-all flex items-center gap-2">
                        <i class="fa-solid fa-rotate-right"></i> Rotate Right
                    </button>
                </div>
                <button onclick="saveCrop()" class="px-6 py-2 bg-indigo-600 text-white rounded-lg text-xs font-bold hover:bg-indigo-700 shadow-md transition-all">
                    Apply Crop & Save
                </button>
            </div>
        </div>
    </div>
</div>

<!-- LOGS MODAL POPUP -->
<div id="logModal" class="hidden fixed inset-0 z-[1000] flex items-center justify-center bg-slate-900/60 backdrop-blur-sm p-4">
    <div class="bg-white w-full max-w-3xl rounded-2xl shadow-2xl overflow-hidden flex flex-col max-h-[90vh]">
        <div class="p-5 border-b border-slate-200 flex items-center justify-between bg-slate-50">
            <div class="flex items-center gap-2">
                <i class="fa-solid fa-clock-rotate-left text-indigo-600"></i>
                <h3 class="text-lg font-bold text-slate-800">Audit Trail (Change History)</h3>
            </div>
            <button onclick="toggleLogModal()" class="text-slate-400 hover:text-red-500 transition-all">
                <i class="fa-solid fa-xmark text-xl"></i>
            </button>
        </div>
        <div class="p-6 overflow-y-auto space-y-4 bg-slate-50/30">
            @forelse($logs as $log)
                <div class="p-4 rounded-xl bg-white border border-slate-200 shadow-sm text-xs flex flex-col gap-2">
                    <div class="flex justify-between items-center mb-2">
                        <span class="px-2 py-1 bg-indigo-100 text-indigo-700 rounded font-bold">{{ $log->user->name }}</span>
                        <span class="text-slate-400 font-mono">{{ $log->created_at->format('d M Y, h:i A') }}</span>
                    </div>
                    <div class="grid grid-cols-1 gap-1">
                        <p class="text-slate-500 font-bold uppercase text-[10px]">{{ str_replace('_', ' ', $log->field_name) }}</p>
                        <div class="flex items-center gap-2 text-red-400 line-through italic">
                            <i class="fa-solid fa-minus-circle text-[8px]"></i> {{ $log->old_value ?? 'Empty' }}
                        </div>
                        <div class="flex items-center gap-2 text-green-600 font-bold">
                            <i class="fa-solid fa-plus-circle text-[8px]"></i> {{ $log->new_value ?? 'Empty' }}
                        </div>
                    </div>
                </div>
            @empty
                <div class="text-center py-20">
                    <i class="fa-solid fa-folder-open text-slate-300 text-5xl mb-3"></i>
                    <p class="text-slate-400">No modification logs available for this record.</p>
                </div>
            @endforelse
        </div>
        <div class="p-4 border-t border-slate-200 flex justify-end bg-slate-50">
            <button onclick="toggleLogModal()" class="px-5 py-2 bg-slate-200 text-slate-600 rounded-lg text-xs font-bold hover:bg-slate-300 transition-all">Close</button>
        </div>
    </div>
</div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/cropperjs/1.5.13/cropper.min.js"></script>
<script>
    // 1. BIG PHOTO POPUP & DOWNLOAD
    function viewBigPhoto(url) {
        if(!url) return Swal.fire('No Photo', 'Student photo not uploaded', 'info');
        
        Swal.fire({
            imageUrl: url,
            imageAlt: 'Student Photo',
            imageWidth: 500,
            imageHeight: 500,
            imageClass: 'rounded-xl shadow-lg object-cover',
            showConfirmButton: false,
            showCloseButton: true,
            footer: `<a href="${url}" download="student_photo.png" class="px-4 py-2 bg-indigo-600 text-white rounded-lg text-xs font-bold hover:bg-indigo-700 transition-all flex items-center gap-2">
                        <i class="fa-solid fa-download"></i> Download Photo
                    </a>`
        });
    }

    // 2. CROPPER LOGIC
    let cropper;
    let activeField = '';

    function initCropper(input, field) {
        activeField = field;
        if (input.files && input.files[0]) {
            const reader = new FileReader();
            reader.onload = function (e) {
                document.getElementById('cropperImage').src = e.target.result;
                document.getElementById('cropModal').classList.remove('hidden');
                if(cropper) cropper.destroy();
                cropper = new Cropper(document.getElementById('cropperImage'), {
                    aspectRatio: 1,
                    viewMode: 1,
                    dragMode: 'move',
                    autoCropArea: 1,
                });
            };
            reader.readAsDataURL(input.files[0]);
        }
    }

    function rotateImage(deg) {
        cropper.rotate(deg);
    }

    function saveCrop() {
        try {
            const canvas = cropper.getCroppedCanvas({ 
                width: 400, 
                height: 400,
                imageSmoothingEnabled: true,
                imageSmoothingQuality: 'high',
            });
            
            const base64 = canvas.toDataURL('image/png');
            
            // Set the hidden input value to send to controller
            const hiddenInput = document.getElementById('input_' + activeField);
            if(hiddenInput) {
                hiddenInput.value = base64;
            }

            // Update the preview image
            const previewImg = document.getElementById('preview_' + activeField);
            if(previewImg) {
                previewImg.src = base64;
            }
            
            closeCrop();
        } catch (error) {
            console.error("Cropping failed:", error);
            Swal.fire('Error', 'Could not apply crop. Please try again.', 'error');
        }
    }


    function closeCrop() {
        document.getElementById('cropModal').classList.add('hidden');
    }

    // 3. PINCODE AUTO FETCH (Fixed to fetch State)
    document.addEventListener('DOMContentLoaded', function () {
        const stateSelect = document.getElementById('state');
        const citySelect = document.getElementById('city');
        const pincodeInput = document.getElementById('pincode');

        pincodeInput.addEventListener('keyup', function () {
            if (this.value.length === 6) {
                citySelect.innerHTML = '<option value="">Loading...</option>';
                fetch('/fetch-pincode/' + this.value)
                .then(res => res.json())
                .then(data => {
                    if (data[0]?.Status === "Success" && data[0].PostOffice.length > 0) {
                        const po = data[0].PostOffice[0];
                        const state = po.State;
                        const city = po.District;

                        // Fix: Dynamic State addition
                        if (![...stateSelect.options].some(opt => opt.value === state)) {
                            let opt = document.createElement('option');
                            opt.value = state; opt.textContent = state;
                            stateSelect.appendChild(opt);
                        }
                        stateSelect.value = state;
                        citySelect.innerHTML = `<option value="${city}" selected>${city}</option>`;
                        
                        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>';
                    }
                }).catch(err => console.error("Pincode fetch error", err));
            }
        });
    });

    function toggleLogModal() { document.getElementById('logModal').classList.toggle('hidden'); }
</script>
@endsection