@extends('school.layouts.app')

@section('content')
<div class="max-w-6xl mx-auto">
    <!-- Page Header -->
    <div class="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4 mb-5">
        <div>
            <h1 class="text-xl font-bold text-slate-800">New Admission Enquiry</h1>
            <p class="text-sm text-slate-500">Capture potential admissions with AI-assisted data entry.</p>
        </div>
        <a href="{{ route('school.admissions.index') }}" 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>

    <!-- ✅ UNIFIED VALIDATION ALERT -->
    @if($errors->any())
        <div id="validation-alert" class="mb-5 overflow-hidden rounded-xl border border-red-200 bg-white shadow-lg shadow-red-100/50 animate-slide-down">
            <div class="flex items-center justify-between bg-red-50 px-4 py-3 border-b border-red-100">
                <div class="flex items-center gap-2.5">
                    <div class="w-8 h-8 rounded-full bg-red-100 flex items-center justify-center shrink-0">
                        <i class="fa-solid fa-triangle-exclamation text-red-600 text-sm"></i>
                    </div>
                    <div>
                        <h4 class="text-sm font-bold text-red-800">Validation Failed</h4>
                        <p class="text-[11px] text-red-600">Please correct {{ $errors->count() }} error{{ $errors->count() > 1 ? 's' : '' }} below</p>
                    </div>
                </div>
                <button type="button" onclick="document.getElementById('validation-alert').remove()" class="w-7 h-7 rounded-lg bg-white border border-red-200 text-red-400 hover:text-red-600 hover:bg-red-50 transition-all flex items-center justify-center">
                    <i class="fa-solid fa-xmark text-xs"></i>
                </button>
            </div>
            <div class="px-4 py-3">
                <ul class="space-y-1.5">
                    @foreach($errors->all() as $error)
                        <li class="flex items-start gap-2 text-xs text-red-700">
                            <i class="fa-solid fa-circle-xmark text-red-400 mt-0.5 text-[10px]"></i>
                            <span>{{ $error }}</span>
                        </li>
                    @endforeach
                </ul>
            </div>
        </div>

        <style>
            @keyframes slideDown {
                from { opacity: 0; transform: translateY(-10px); }
                to { opacity: 1; transform: translateY(0); }
            }
            .animate-slide-down {
                animation: slideDown 0.3s ease-out;
            }
        </style>
    @endif

    <form action="{{ route('school.admissions.store') }}" method="POST" enctype="multipart/form-data" class="space-y-5">
        @csrf
        <input type="hidden" name="scanned_document_path" id="scanned_document_path" value="{{ old('scanned_document_path') }}">
        <input type="hidden" name="student_photo_path" id="student_photo_path" value="{{ old('student_photo_path') }}">

        <!-- Cropper.js -->
        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/cropperjs/1.5.13/cropper.min.css">
        <script src="https://cdnjs.cloudflare.com/ajax/libs/cropperjs/1.5.13/cropper.min.js"></script>

        <!-- 📸 UPLOAD & SCAN SECTION -->
        <div class="grid grid-cols-1 lg:grid-cols-2 gap-6 mb-6">
            <!-- MODULE 1: AI SMART SCAN (Document) -->
            <div class="bg-slate-50 p-4 rounded-2xl border border-slate-200 shadow-sm">
                <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                    <div class="flex flex-col justify-between">
                        <div>
                            <div class="flex items-center gap-2 mb-4">
                                <div class="w-8 h-8 bg-indigo-600 rounded-lg flex items-center justify-center text-white">
                                    <i class="fa-solid fa-wand-magic-sparkles text-xs"></i>
                                </div>
                                <h3 class="text-sm font-bold text-slate-800">AI Smart Document Scan</h3>
                            </div>
                            <p class="text-[11px] text-slate-500 font-medium uppercase tracking-wider mb-2">Upload Document</p>
                            <div class="flex flex-wrap gap-2">
                                <label class="cursor-pointer inline-flex items-center gap-1.5 px-3 py-2 bg-indigo-600 text-white rounded-lg font-bold text-xs hover:bg-indigo-700 transition-all shadow-sm">
                                    <i class="fa-solid fa-cloud-arrow-up"></i> Upload
                                    <input type="file" id="ai-upload" class="hidden" accept="image/*">
                                </label>
                                <button type="button" onclick="openCameraModal()" class="inline-flex items-center gap-1.5 px-3 py-2 bg-slate-800 text-white rounded-lg font-bold text-xs hover:bg-slate-900 transition-all shadow-sm">
                                    <i class="fa-solid fa-camera"></i> Camera
                                </button>
                            </div>
                            <div id="scan-loader" class="hidden mt-2 flex items-center gap-2 text-indigo-600 font-bold text-[10px] uppercase tracking-widest">
                                <i class="fa-solid fa-circle-notch fa-spin"></i> AI reading...
                            </div>
                        </div>
                        <p class="text-[10px] text-slate-400 italic mt-4">* Auto-fills student details</p>
                    </div>
                    <div class="bg-white rounded-xl border-2 border-dashed border-slate-300 p-1 flex items-center justify-center relative overflow-hidden h-40">
                        <div id="preview-placeholder" class="text-center p-4">
                            <i class="fa-solid fa-image text-slate-300 text-3xl mb-2"></i>
                            <p class="text-[10px] font-bold text-slate-400 uppercase">No Doc</p>
                        </div>
                        <img id="final-scan-preview" class="hidden h-full w-full object-contain rounded-lg" src="">
                        <button type="button" id="remove-doc-btn" onclick="clearDocument()" class="hidden absolute top-2 right-2 w-6 h-6 bg-red-500 text-white rounded-full hover:bg-red-600 transition-all text-[10px] z-10">
                            <i class="fa-solid fa-xmark"></i>
                        </button>
                    </div>
                </div>
            </div>

            <!-- MODULE 2: STUDENT PHOTOGRAPH -->
            <div class="bg-slate-50 p-4 rounded-2xl border border-slate-200 shadow-sm">
                <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                    <div class="flex flex-col justify-between">
                        <div>
                            <div class="flex items-center gap-2 mb-4">
                                <div class="w-8 h-8 bg-indigo-600 rounded-lg flex items-center justify-center text-white">
                                    <i class="fa-solid fa-user-graduate text-xs"></i>
                                </div>
                                <h3 class="text-sm font-bold text-slate-800">Student Photograph</h3>
                            </div>
                            <p class="text-[11px] text-slate-500 font-medium uppercase tracking-wider mb-2">Upload Passport Photo</p>
                            <div class="flex flex-wrap gap-2">
                                <label class="cursor-pointer inline-flex items-center gap-1.5 px-3 py-2 bg-indigo-600 text-white rounded-lg font-bold text-xs hover:bg-indigo-700 transition-all shadow-sm">
                                    <i class="fa-solid fa-image"></i> Upload
                                    <input type="file" id="photo-upload" class="hidden" accept="image/*">
                                </label>
                                <button type="button" onclick="openPhotoCamera()" class="inline-flex items-center gap-1.5 px-3 py-2 bg-slate-800 text-white rounded-lg font-bold text-xs hover:bg-slate-900 transition-all shadow-sm">
                                    <i class="fa-solid fa-camera"></i> Camera
                                </button>
                            </div>
                        </div>
                        <p class="text-[10px] text-slate-400 italic mt-4">* Recommended size: 1:1 Square</p>
                    </div>
                    <div class="bg-white rounded-xl border-2 border-dashed border-slate-300 p-1 flex items-center justify-center relative overflow-hidden h-40 w-40">
                        <div id="photo-placeholder" class="text-center p-4">
                            <i class="fa-solid fa-user text-slate-300 text-3xl mb-2"></i>
                            <p class="text-[10px] font-bold text-slate-400 uppercase">No Photo</p>
                        </div>
                        <img id="final-photo-preview" class="hidden h-full aspect-square object-cover rounded-lg shadow-sm" src="">
                        <button type="button" id="remove-photo-btn" onclick="clearPhoto()" class="hidden absolute top-2 right-2 w-6 h-6 bg-red-500 text-white rounded-full hover:bg-red-600 transition-all text-[10px] z-10">
                            <i class="fa-solid fa-xmark"></i>
                        </button>
                    </div>
                </div>
            </div>
        </div>

        <!-- CAMERA MODAL -->
        <div id="camera-modal" class="fixed inset-0 z-50 hidden bg-slate-900/90 backdrop-blur-sm flex items-center justify-center p-4">
            <div class="bg-white rounded-2xl w-full max-w-lg overflow-hidden shadow-2xl flex flex-col max-h-[85vh]">
                <div class="p-4 flex justify-between items-center border-b border-slate-100 shrink-0">
                    <h3 class="font-bold text-slate-800">AI Document Scanner</h3>
                    <button type="button" onclick="closeCameraModal()" class="w-8 h-8 rounded-full bg-slate-100 text-slate-400 hover:text-red-500 transition-all flex items-center justify-center">
                        <i class="fa-solid fa-xmark"></i>
                    </button>
                </div>
                <div class="relative bg-black overflow-hidden flex items-center justify-center p-2">
                    <div class="relative w-full max-w-md" style="aspect-ratio: 1.58 / 1;">
                        <video id="video-stream" class="absolute inset-0 w-full h-full object-cover rounded-lg" autoplay playsinline></video>
                        <div class="absolute inset-0 pointer-events-none border-2 border-indigo-500/40 rounded-lg shadow-[0_0_0_999px_rgba(0,0,0,0.6)]">
                            <div class="w-full h-0.5 bg-indigo-500 absolute top-0 left-0 animate-scan shadow-[0_0_15px_rgba(79,70,229,0.8)]"></div>
                        </div>
                    </div>
                </div>
                <div class="p-4 bg-white border-t border-slate-100 flex justify-center shrink-0">
                    <!-- ✅ FIXED: Added type="button" to prevent form submission -->
                    <button type="button" onclick="captureImage()" class="w-14 h-14 bg-indigo-600 text-white rounded-full flex items-center justify-center shadow-xl hover:bg-indigo-700 transition-all active:scale-90">
                        <i class="fa-solid fa-camera text-xl"></i>
                    </button>
                </div>
            </div>
        </div>

        <!-- CROP EDITOR -->
        <div id="editor-modal" class="fixed inset-0 z-[60] hidden bg-slate-900/90 backdrop-blur-sm flex items-center justify-center p-4">
            <div class="bg-white rounded-2xl w-full max-w-2xl overflow-hidden shadow-2xl flex flex-col max-h-[85vh]">
                <div class="p-4 flex justify-between items-center border-b border-slate-100">
                    <h3 class="font-bold text-slate-800">Refine Document</h3>
                    <button type="button" onclick="closeEditor()" class="text-slate-400 hover:text-red-500"><i class="fa-solid fa-xmark"></i></button>
                </div>
                <div class="p-4 bg-slate-50 flex-1 overflow-hidden flex items-center justify-center">
                    <div class="w-full max-h-[50vh] overflow-hidden rounded-lg bg-black flex items-center justify-center">
                        <img id="crop-image" src="" style="max-width: 100%; display: block;">
                    </div>
                </div>
                <div class="p-4 bg-white border-t border-slate-100 flex flex-col gap-3">
                    <div class="flex flex-wrap justify-center gap-2">
                        <button type="button" onclick="rotateImage(-90)" class="flex items-center gap-1 px-4 py-2 rounded-lg font-bold text-xs text-slate-600 bg-slate-100 hover:bg-slate-200 transition-all">
                            <i class="fa-solid fa-rotate-left"></i> Rotate L
                        </button>
                        <button type="button" onclick="rotateImage(90)" class="flex items-center gap-1 px-4 py-2 rounded-lg font-bold text-xs text-slate-600 bg-slate-100 hover:bg-slate-200 transition-all">
                            <i class="fa-solid fa-rotate-right"></i> Rotate R
                        </button>
                        <button type="button" onclick="retakePhoto()" class="flex items-center gap-1 px-4 py-2 rounded-lg font-bold text-xs text-red-500 bg-red-50 hover:bg-red-100 transition-all">
                            <i class="fa-solid fa-rotate-right"></i> Retake
                        </button>
                    </div>
                    <div class="flex justify-center">
                        <button type="button" id="confirm-crop-btn" class="px-8 py-3 bg-indigo-600 text-white rounded-xl font-bold text-sm shadow-lg hover:bg-indigo-700 transition-all">
                            Apply & AI Scan <i class="fa-solid fa-wand-magic-sparkles ml-1"></i>
                        </button>
                    </div>
                </div>
            </div>
        </div>

        <!-- DATA FORM -->
        <div class="bg-white rounded-xl border border-slate-200 shadow-sm p-5 grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
            <div class="md:col-span-2 lg:col-span-3 border-b border-slate-100 pb-2 mb-1">
                <h3 class="text-base font-bold text-slate-800">Student Information</h3>
            </div>

            <div class="ai-field-group {{ $enquirySetting && $enquirySetting->is_auto ? 'hidden' : '' }}" id="manual_enquiry_div">
                <label class="block text-[11px] font-bold text-slate-400 uppercase mb-1 ml-1">Enquiry Number <span class="text-red-400">*</span></label>
                <input type="text" name="enquiry_number" value="{{ old('enquiry_number') }}" 
                    class="w-full px-3 py-2 rounded-lg border border-slate-200 focus:ring-2 focus:ring-indigo-500 outline-none text-sm"
                    placeholder="Enter manual enquiry number">
            </div>
            
            <div class="ai-field-group">
                <label class="block text-[11px] font-bold text-slate-400 uppercase mb-1 ml-1">Student Name <span class="text-red-400">*</span></label>
                <input type="text" name="student_name" id="student_name" value="{{ old('student_name') }}" 
                    class="ai-field w-full px-3 py-2 rounded-lg border {{ $errors->has('student_name') ? 'border-red-500 ring-red-200' : 'border-slate-200' }} focus:ring-2 focus:ring-indigo-500 outline-none text-sm"
                    placeholder="Enter full name">
                @error('student_name') <span class="text-[10px] text-red-500 font-medium mt-1">{{ $message }}</span> @enderror
            </div>

            <div class="ai-field-group">
                <label class="block text-[11px] font-bold text-slate-400 uppercase mb-1 ml-1">Date of Birth <span class="text-red-400">*</span></label>
                <input type="date" name="date_of_birth" id="date_of_birth" value="{{ old('date_of_birth') }}" 
                    onchange="calculateAge()"
                    onclick="this.showPicker()"
                    class="ai-field w-full px-3 py-2 rounded-lg border {{ $errors->has('date_of_birth') ? 'border-red-500 ring-red-200' : 'border-slate-200' }} focus:ring-2 focus:ring-indigo-500 outline-none text-sm cursor-pointer">
                
                <div id="age-display" class="mt-1.5 hidden">
                    <div class="inline-flex items-center gap-1.5 bg-indigo-50 border border-indigo-100 rounded-md px-2 py-1 w-fit">
                        <i class="fa-solid fa-cake-candles text-indigo-400 text-[9px]"></i>
                        <span class="text-[11px] font-bold text-indigo-700">
                            <span id="age-years">--</span>y <span id="age-months">--</span>m <span id="age-days">--</span>d
                        </span>
                    </div>
                </div>
                @error('date_of_birth') <span class="text-[10px] text-red-500 font-medium mt-1">{{ $message }}</span> @enderror
            </div>

            <div class="ai-field-group">
                <label class="block text-[11px] font-bold text-slate-400 uppercase mb-1 ml-1">Gender <span class="text-red-400">*</span></label>
                <select name="gender" id="gender" 
                    class="ai-field w-full px-3 py-2 rounded-lg border {{ $errors->has('gender') ? 'border-red-500 ring-red-200' : 'border-slate-200' }} focus:ring-2 focus:ring-indigo-500 outline-none text-sm bg-white">
                    <option value="">SELECT GENDER</option>
                    <option value="Male" {{ old('gender') == 'Male' ? 'selected' : '' }}>MALE</option>
                    <option value="Female" {{ old('gender') == 'Female' ? 'selected' : '' }}>FEMALE</option>
                    <option value="Other" {{ old('gender') == 'Other' ? 'selected' : '' }}>OTHER</option>
                </select>
                @error('gender') <span class="text-[10px] text-red-500 font-medium mt-1">{{ $message }}</span> @enderror
            </div>

            <div class="ai-field-group">
                <label class="block text-[11px] font-bold text-slate-400 uppercase mb-1 ml-1">Academic Session <span class="text-red-400">*</span></label>
                <select name="academic_session_id" required 
                    class="ai-field w-full px-3 py-2 rounded-lg border {{ $errors->has('academic_session_id') ? 'border-red-500 ring-red-200' : 'border-slate-200' }} focus:ring-2 focus:ring-indigo-500 outline-none text-sm bg-white">
                    <option value="" disabled>Select Session</option>
                    @foreach($sessions as $session)
                        <option value="{{ $session->id }}" 
                            {{ (old('academic_session_id') == $session->id || $session->is_current == 1) ? 'selected' : '' }}>
                            {{ $session->session_name }} {{ $session->is_current == 1 ? '(Current)' : '' }}
                        </option>
                    @endforeach
                </select>
                @error('academic_session_id') <span class="text-[10px] text-red-500 font-medium mt-1">{{ $message }}</span> @enderror
            </div>

           <div>
            <label class="block text-[11px] font-bold text-slate-400 uppercase mb-1 ml-1">Seeking Class <span class="text-red-400">*</span></label>
            <select name="seeking_class_id" 
                class="uppercase w-full px-3 py-2 rounded-lg border {{ $errors->has('seeking_class_id') ? 'border-red-500 ring-red-200' : 'border-slate-200' }} focus:ring-2 focus:ring-indigo-500 outline-none text-sm bg-white">
                <option value="" disabled selected>Select Class</option>
                @foreach($classes as $class)
                <option value="{{ $class->id }}" {{ old('seeking_class_id') == $class->id ? 'selected' : '' }}>{{ $class->name }}</option>
                @endforeach
            </select>
            @error('seeking_class_id') <span class="text-[10px] text-red-500 font-medium mt-1">{{ $message }}</span> @enderror
        </div>

            <div class="md:col-span-2 lg:col-span-3 border-t border-slate-100 pt-3 mt-1">
                <h3 class="text-base font-bold text-slate-800 mb-3">Parental Details</h3>
            </div>

            <div class="ai-field-group">
                <label class="block text-[11px] font-bold text-slate-400 uppercase mb-1 ml-1">Father's Name <span class="text-red-400">*</span></label>
                <input type="text" name="father_name" id="father_name" value="{{ old('father_name') }}" 
                    class="ai-field w-full px-3 py-2 rounded-lg border {{ $errors->has('father_name') ? 'border-red-500 ring-red-200' : 'border-slate-200' }} focus:ring-2 focus:ring-indigo-500 outline-none text-sm"
                    placeholder="Enter father's name">
                @error('father_name') <span class="text-[10px] text-red-500 font-medium mt-1">{{ $message }}</span> @enderror
            </div>

            <div>
                <label class="block text-[11px] font-bold text-slate-400 uppercase mb-1 ml-1">Mother's Name <span class="text-red-400">*</span></label>
                <input type="text" name="mother_name" value="{{ old('mother_name') }}" 
                    class="uppercase w-full px-3 py-2 rounded-lg border {{ $errors->has('mother_name') ? 'border-red-500 ring-red-200' : 'border-slate-200' }} focus:ring-2 focus:ring-indigo-500 outline-none text-sm"
                    placeholder="Enter mother's name">
                @error('mother_name') <span class="text-[10px] text-red-500 font-medium mt-1">{{ $message }}</span> @enderror
            </div>

            <div>
                <label class="block text-[11px] font-bold text-slate-400 uppercase mb-1 ml-1">Contact Number <span class="text-red-400">*</span></label>
                <!-- ✅ FIXED: Added old() value and removed font-mono -->
                <input type="tel" name="contact_number" value="{{ old('contact_number') }}"
                    maxlength="10" 
                    inputmode="numeric" 
                    pattern="[0-9]*"
                    oninput="this.value = this.value.replace(/[^0-9]/g, '')"
                    class="uppercase w-full px-3 py-2 rounded-lg border {{ $errors->has('contact_number') ? 'border-red-500 ring-red-200' : 'border-slate-200' }} focus:ring-2 focus:ring-indigo-500 outline-none text-sm"
                    placeholder="Enter 10 digit number">
                @error('contact_number') <span class="text-[10px] text-red-500 font-medium mt-1">{{ $message }}</span> @enderror
            </div>

            <div>
                <label class="block text-[11px] font-bold text-slate-400 uppercase mb-1 ml-1">Email <span class="text-slate-300 font-normal">(Optional)</span></label>
                <input type="email" name="email" id="email" value="{{ old('email') }}" 
                    class="uppercase w-full px-3 py-2 rounded-lg border {{ $errors->has('email') ? 'border-red-500 ring-red-200' : 'border-slate-200' }} focus:ring-2 focus:ring-indigo-500 outline-none text-sm"
                    placeholder="example@email.com">
                @error('email') <span class="text-[10px] text-red-500 font-medium mt-1">{{ $message }}</span> @enderror
            </div>

            <div class="md:col-span-2 lg:col-span-3 ai-field-group">
                <label class="block text-[11px] font-bold text-slate-400 uppercase mb-1 ml-1">Full Address <span class="text-red-400">*</span></label>
                <textarea name="address" id="address" rows="2" 
                    class="ai-field w-full px-3 py-2 rounded-lg border {{ $errors->has('address') ? 'border-red-500 ring-red-200' : 'border-slate-200' }} focus:ring-2 focus:ring-indigo-500 outline-none text-sm resize-none"
                    placeholder="Enter full address">{{ old('address') }}</textarea>
                @error('address') <span class="text-[10px] text-red-500 font-medium mt-1">{{ $message }}</span> @enderror
            </div>

            <div class="md:col-span-2 lg:col-span-3">
                <label class="block text-[11px] font-bold text-slate-400 uppercase mb-1 ml-1">Enquiry Source <span class="text-red-400">*</span></label>
                <select name="enquiry_source" 
                    class="uppercase w-full px-3 py-2 rounded-lg border {{ $errors->has('enquiry_source') ? 'border-red-500 ring-red-200' : 'border-slate-200' }} focus:ring-2 focus:ring-indigo-500 outline-none text-sm bg-white">
                    <option value="" disabled selected>Select Source</option>
                    <option value="Social Media" {{ old('enquiry_source') == 'Social Media' ? 'selected' : '' }}>Social Media</option>
                    <option value="Referral" {{ old('enquiry_source') == 'Referral' ? 'selected' : '' }}>Referral</option>
                    <option value="Walk-in" {{ old('enquiry_source') == 'Walk-in' ? 'selected' : '' }}>Walk-in</option>
                    <option value="Advertisement" {{ old('enquiry_source') == 'Advertisement' ? 'selected' : '' }}>Advertisement</option>
                    <option value="Website" {{ old('enquiry_source') == 'Website' ? 'selected' : '' }}>Website</option>
                    <option value="Other" {{ old('enquiry_source') == 'Other' ? 'selected' : '' }}>Other</option>
                </select>
                @error('enquiry_source') <span class="text-[10px] text-red-500 font-medium mt-1">{{ $message }}</span> @enderror
            </div>
        </div>

        <div class="flex justify-end pt-2">
            <button type="submit" class="px-8 py-3 bg-indigo-600 text-white rounded-xl font-bold text-sm hover:bg-indigo-700 transition-all shadow-lg shadow-indigo-200">
                Save Enquiry <i class="fa-solid fa-save ml-1"></i>
            </button>
        </div>
    </form>
</div>

<script>
    let stream = null;
    let cropper = null;
    let currentMode = 'doc'; 

    function openCameraModal() {
        currentMode = 'doc';
        document.getElementById('camera-modal').classList.remove('hidden');
        startCamera();
    }

    function openPhotoCamera() {
        currentMode = 'photo';
        document.getElementById('camera-modal').classList.remove('hidden');
        startCamera();
    }

    function startCamera() {
        navigator.mediaDevices.getUserMedia({ video: { facingMode: 'environment' } })
            .then(s => {
                stream = s;
                document.getElementById('video-stream').srcObject = stream;
            })
            .catch(err => {
                Swal.fire('Error', 'Camera access denied', 'error');
                closeCameraModal();
            });
    }

    function closeCameraModal() {
        document.getElementById('camera-modal').classList.add('hidden');
        if (stream) stream.getTracks().forEach(t => t.stop());
    }

    function captureImage() {
        const video = document.getElementById('video-stream');
        const canvas = document.createElement('canvas');
        canvas.width = video.videoWidth;
        canvas.height = video.videoHeight;
        canvas.getContext('2d').drawImage(video, 0, 0);
        
        canvas.toBlob(blob => {
            prepareImageForEdit(new File([blob], "capture.jpg", { type: "image/jpeg" }));
            closeCameraModal();
        }, 'image/jpeg', 0.9);
    }

    function prepareImageForEdit(file) {
        const reader = new FileReader();
        reader.onload = e => {
            document.getElementById('crop-image').src = e.target.result;
            document.getElementById('editor-modal').classList.remove('hidden');
            if (cropper) cropper.destroy();
            
            const ratio = (currentMode === 'photo') ? 1 : 1.58; 
            const title = (currentMode === 'photo') ? 'Refine Student Photo' : 'Refine Document';
            document.querySelector('#editor-modal h3').innerText = title;

            const confirmBtn = document.getElementById('confirm-crop-btn');
            if (currentMode === 'photo') {
                confirmBtn.innerHTML = 'Crop & Save Photo <i class="fa-solid fa-check ml-1"></i>';
                confirmBtn.classList.replace('bg-indigo-600', 'bg-emerald-600');
            } else {
                confirmBtn.innerHTML = 'Apply & AI Scan <i class="fa-solid fa-wand-magic-sparkles ml-1"></i>';
                confirmBtn.classList.replace('bg-emerald-600', 'bg-indigo-600');
            }

            cropper = new Cropper(document.getElementById('crop-image'), {
                aspectRatio: ratio, 
                viewMode: 1, 
                dragMode: 'move', 
                guides: true
            });
        };
        reader.readAsDataURL(file);
    }

    document.getElementById('ai-upload').onchange = function() {
        currentMode = 'doc';
        if (this.files?.[0]) prepareImageForEdit(this.files[0]);
    };

    document.getElementById('photo-upload').onchange = function() {
        currentMode = 'photo';
        if (this.files?.[0]) prepareImageForEdit(this.files[0]);
    };

    function rotateImage(deg) { cropper?.rotate(deg); }
    function closeEditor() { document.getElementById('editor-modal').classList.add('hidden'); }
    function retakePhoto() { closeEditor(); if(currentMode === 'doc') openCameraModal(); else openPhotoCamera(); }

    function clearDocument() {
        document.getElementById('final-scan-preview').classList.add('hidden');
        document.getElementById('preview-placeholder').classList.remove('hidden');
        document.getElementById('remove-doc-btn').classList.add('hidden');
        document.getElementById('scanned_document_path').value = '';
    }

    function clearPhoto() {
        document.getElementById('final-photo-preview').classList.add('hidden');
        document.getElementById('photo-placeholder').classList.remove('hidden');
        document.getElementById('remove-photo-btn').classList.add('hidden');
        document.getElementById('student_photo_path').value = '';
    }

    document.getElementById('confirm-crop-btn').onclick = async () => {
        if (!cropper) return;
        const canvas = cropper.getCroppedCanvas({ width: currentMode === 'photo' ? 500 : 1200 });
        
        canvas.toBlob(async blob => {
            const file = new File([blob], `cropped_${currentMode}.jpg`, { type: "image/jpeg" });
            
            if (currentMode === 'doc') {
                await handleAiScan(file);
            } else {
                await handlePhotoUpload(file);
            }
            closeEditor();
        }, 'image/jpeg', 0.9);
    };

    async function handlePhotoUpload(file) {
        const imgUrl = URL.createObjectURL(file);
        const preview = document.getElementById('final-photo-preview');
        preview.src = imgUrl;
        preview.classList.remove('hidden');
        document.getElementById('photo-placeholder').classList.add('hidden');
        document.getElementById('remove-photo-btn').classList.remove('hidden');

        const formData = new FormData();
        formData.append('photo', file);

        try {
            const res = await fetch("{{ route('school.admissions.upload_photo') }}", {
                method: 'POST',
                headers: { 'X-CSRF-TOKEN': '{{ csrf_token() }}', 'Accept': 'application/json' },
                body: formData
            });
            const result = await res.json();
            if (result.success) {
                document.getElementById('student_photo_path').value = result.file_path;
            }
        } catch (e) {
            Swal.fire('Error', 'Photo upload failed', 'error');
        }
    }

    async function handleAiScan(file) {
        if (!file) return;
        const imgUrl = URL.createObjectURL(file);
        const preview = document.getElementById('final-scan-preview');
        preview.src = imgUrl;
        preview.classList.remove('hidden');
        document.getElementById('preview-placeholder').classList.add('hidden');
        document.getElementById('remove-doc-btn').classList.remove('hidden');

        document.getElementById('scan-loader').classList.remove('hidden');
        
        const formData = new FormData();
        formData.append('document', file);

        try {
            const res = await fetch("{{ route('school.admissions.scan') }}", {
                method: 'POST',
                headers: { 'X-CSRF-TOKEN': '{{ csrf_token() }}' },
                body: formData
            });
            const result = await res.json();

            if (result.success) {
                document.getElementById('scanned_document_path').value = result.file_path;
                const f = result.data;
                if (f.student_name) document.getElementById('student_name').value = f.student_name;
                if (f.date_of_birth) {
                    document.getElementById('date_of_birth').value = f.date_of_birth;
                    calculateAge(); 
                }
                if (f.father_name) document.getElementById('father_name').value = f.father_name;
                if (f.gender) document.getElementById('gender').value = f.gender;
                if (f.address) document.querySelector('textarea[name="address"]').value = f.address;
                Swal.fire({ icon: 'success', title: 'AI Scan Complete', text: 'Details extracted!', timer: 2000, showConfirmButton: false });
            } else {
                Swal.fire({ icon: 'info', title: 'Image Saved', text: result.message || 'AI could not read text.' });
            }
        } catch (e) {
            Swal.fire('Error', 'AI Server is not responding', 'error');
        } finally {
            document.getElementById('scan-loader').classList.add('hidden');
        }
    }

    function calculateAge() {
        const dobInput = document.getElementById('date_of_birth');
        const ageDisplay = document.getElementById('age-display');
        const ageYears = document.getElementById('age-years');
        const ageMonths = document.getElementById('age-months');
        const ageDays = document.getElementById('age-days');
        
        if (!dobInput.value) {
            ageDisplay.classList.add('hidden');
            return;
        }
        
        const dob = new Date(dobInput.value);
        const today = new Date();
        
        if (dob > today) {
            ageYears.textContent = '0'; ageMonths.textContent = '0'; ageDays.textContent = '0';
            ageDisplay.classList.remove('hidden');
            return;
        }
        
        let years = today.getFullYear() - dob.getFullYear();
        let months = today.getMonth() - dob.getMonth();
        let days = today.getDate() - dob.getDate();
        
        if (days < 0) {
            months--;
            const prevMonth = new Date(today.getFullYear(), today.getMonth(), 0);
            days += prevMonth.getDate();
        }
        if (months < 0) {
            years--;
            months += 12;
        }
        
        ageYears.textContent = years;
        ageMonths.textContent = months;
        ageDays.textContent = days;
        ageDisplay.classList.remove('hidden');
    }

    // ✅ ENHANCED RESTORATION LOGIC
    document.addEventListener('DOMContentLoaded', function() {
        console.log("Page Loaded: Checking for saved images...");

        // 1. Restore Age
        if (document.getElementById('date_of_birth').value) {
            calculateAge();
        }

        // 2. Restore Student Photo (Surgical approach)
        const photoInput = document.getElementById('student_photo_path');
        if (photoInput && photoInput.value) {
            console.log("Restoring Student Photo from path: " + photoInput.value);
            const preview = document.getElementById('final-photo-preview');
            const placeholder = document.getElementById('photo-placeholder');
            const removeBtn = document.getElementById('remove-photo-btn');
            
            if(preview && placeholder && removeBtn) {
                preview.src = "{{ asset('storage') }}/" + photoInput.value;
                preview.classList.remove('hidden');
                placeholder.classList.add('hidden');
                removeBtn.classList.remove('hidden');
            }
        } else {
            console.log("No Student Photo found in hidden input.");
        }

        // 3. Restore AI Document Scan
        const docInput = document.getElementById('scanned_document_path');
        if (docInput && docInput.value) {
            console.log("Restoring AI Doc from path: " + docInput.value);
            const preview = document.getElementById('final-scan-preview');
            const placeholder = document.getElementById('preview-placeholder');
            const removeBtn = document.getElementById('remove-doc-btn');
            
            if(preview && placeholder && removeBtn) {
                preview.src = "{{ asset('storage') }}/" + docInput.value;
                preview.classList.remove('hidden');
                placeholder.classList.add('hidden');
                removeBtn.classList.remove('hidden');
            }
        } else {
            console.log("No AI Doc found in hidden input.");
        }
    });

    // ============================================
    // AUTO CAPITALIZE ALL FORM INPUTS
    // ============================================

    $(document).ready(function() {
        
        // Function to capitalize text
        function toCapital(str) {
            return str.toUpperCase();
        }

        // 1. Auto-capitalize ALL text inputs (except email, password, search, hidden)
        $(document).on('input', 'input[type="text"]:not([name*="email"]):not([name*="password"]):not([name*="search"]):not(.no-capitalize), input[name="student_name"], input[name="father_name"], input[name="mother_name"], input[name="address"], input[name="city"], input[name="state"], input[name="previous_school"], input[name="previous_class"], input[name="tc_number"], input[name="enquiry_source"], input[name="registration_no"], input[name="admission_no"], input[name="blood_group"], input[name="religion"], input[name="category"], input[name="nationality"], input[name="father_salutation"], input[name="father_profession"], input[name="father_designation"], input[name="mother_salutation"], input[name="mother_profession"], input[name="mother_designation"], input[name="section"], input[name="transport_mode"]', function() {
            const start = this.selectionStart;
            const end = this.selectionEnd;
            this.value = toCapital(this.value);
            this.setSelectionRange(start, end);
        });

        // 2. Auto-capitalize ALL textareas
        $(document).on('input', 'textarea:not(.no-capitalize)', function() {
            const start = this.selectionStart;
            const end = this.selectionEnd;
            this.value = toCapital(this.value);
            this.setSelectionRange(start, end);
        });

        // 3. Auto-capitalize ALL select dropdowns when changed (for text-based options)
        $(document).on('change', 'select:not(.no-capitalize)', function() {
            const selectedText = $(this).find('option:selected').text();
            // Only capitalize if it's a text option (not a number or ID)
            if (selectedText && !$.isNumeric(selectedText)) {
                $(this).find('option:selected').text(toCapital(selectedText));
            }
        });

        // 4. Auto-capitalize on BLUR (when leaving field) - catches paste and autocomplete
        $(document).on('blur', 'input[type="text"]:not([name*="email"]):not([name*="password"]):not([name*="search"]):not(.no-capitalize), textarea:not(.no-capitalize)', function() {
            this.value = toCapital(this.value);
        });

        // 5. Handle PASTE events specifically
        $(document).on('paste', 'input[type="text"]:not([name*="email"]):not([name*="password"]):not([name*="search"]):not(.no-capitalize), textarea:not(.no-capitalize)', function(e) {
            const $input = $(this);
            setTimeout(function() {
                $input.val(toCapital($input.val()));
            }, 0);
        });

        // 6. Capitalize existing values on page load
        $('input[type="text"]:not([name*="email"]):not([name*="password"]):not([name*="search"]):not(.no-capitalize), textarea:not(.no-capitalize)').each(function() {
            if (this.value) {
                this.value = toCapital(this.value);
            }
        });

    });
</script>

@endsection