@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 class="flex items-center gap-3">
            <a href="{{ route('school.admissions.index') }}" class="w-9 h-9 rounded-lg bg-white border border-slate-200 text-slate-500 hover:text-indigo-600 hover:border-indigo-300 transition-all flex items-center justify-center">
                <i class="fa-solid fa-arrow-left text-sm"></i>
            </a>
            <div>
                <h1 class="text-xl font-bold text-slate-800">Edit Enquiry #{{ $enquiry->id }}</h1>
                <p class="text-sm text-slate-500">{{ $enquiry->student_name }} — {{ $enquiry->seeking_class }}</p>
            </div>
        </div>
        
        <div class="flex items-center gap-2">
            @php
                $headerBaseStatus = $enquiry->status ?? 'New';
                $headerFollowUpCount = 0;
                if (preg_match('/Follow-up\s*\(?(\d+)\)?/i', $headerBaseStatus, $matches)) {
                    $headerFollowUpCount = (int) $matches[1];
                }
                $headerCleanStatus = preg_replace('/\s*\(?Follow-up\s*\d*\)?/i', '', $headerBaseStatus);
                $headerCleanStatus = trim($headerCleanStatus);
                
                if ($headerFollowUpCount > 0) {
                    $headerDisplay = 'FOLLOW-UP(' . $headerFollowUpCount . ')';
                    $headerBadgeClass = 'bg-purple-100 text-purple-700 border-purple-200';
                    $headerDotClass = 'bg-purple-500';
                    $headerIcon = 'fa-clock-rotate-left';
                } else {
                    $headerDisplay = $headerCleanStatus;
                    $headerConfig = match($headerCleanStatus) {
                        'New' => ['class' => 'bg-blue-100 text-blue-700 border-blue-200', 'dot' => 'bg-blue-500', 'icon' => 'fa-circle'],
                        'Registered' => ['class' => 'bg-indigo-100 text-indigo-700 border-indigo-200', 'dot' => 'bg-indigo-500', 'icon' => 'fa-file-circle-check'],
                        'Admitted' => ['class' => 'bg-emerald-100 text-emerald-700 border-emerald-200', 'dot' => 'bg-emerald-500', 'icon' => 'fa-check-circle'],
                        'Rejected' => ['class' => 'bg-red-100 text-red-700 border-red-200', 'dot' => 'bg-red-500', 'icon' => 'fa-circle-xmark'],
                        'Follow-up' => ['class' => 'bg-purple-100 text-purple-700 border-purple-200', 'dot' => 'bg-purple-500', 'icon' => 'fa-clock-rotate-left'],
                        default => ['class' => 'bg-slate-100 text-slate-700 border-slate-200', 'dot' => 'bg-slate-500', 'icon' => 'fa-circle']
                    };
                    $headerBadgeClass = $headerConfig['class'];
                    $headerDotClass = $headerConfig['dot'];
                    $headerIcon = $headerConfig['icon'];
                }
            @endphp
            
            <div class="inline-flex items-center gap-1.5 px-3 py-1.5 rounded-full text-xs font-bold border {{ $headerBadgeClass }}">
                <span class="w-1.5 h-1.5 rounded-full {{ $headerDotClass }}"></span>
                <i class="fa-solid {{ $headerIcon }} text-[10px]"></i>
                {{ $headerDisplay }}
            </div>
            <span class="text-xs text-slate-400">{{ $enquiry->created_at->diffForHumans() }}</span>
        </div>

        <a href="{{ route('school.admissions.index') }}" 
           class="w-full sm:w-auto inline-flex items-center justify-center gap-2 px-6 py-3 bg-red-50 border border-red-200 text-red-600 rounded-xl font-bold text-sm hover:bg-red-100 transition-all">
            <i class="fa-solid fa-xmark"></i> Cancel
        </a>
    </div>

    @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.update', $enquiry->id) }}" method="POST" enctype="multipart/form-data" class="space-y-5">
        @csrf
        @method('PUT')
        
        <!-- Hidden paths for AJAX uploads -->
        <input type="hidden" name="scanned_document_path" id="scanned_document_path" value="{{ old('scanned_document_path', $document ? $document->file_path : '') }}">
        <input type="hidden" name="student_photo_path" id="student_photo_path" value="{{ old('student_photo_path', $enquiry->student_photo) }}">

        <!-- Cropper.js Dependencies -->
        <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 (Symmetrical) -->
        <div class="grid grid-cols-1 lg:grid-cols-2 gap-6 mb-6">
            <!-- MODULE 1: AI SMART SCAN -->
            <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">Update 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 details upon scan</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">Update 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">Camera Capture</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">
                    <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 Selection</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>
            
            <!-- Student Name -->
            <div>
                <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', $enquiry->student_name) }}" 
                    class="uppercase 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>

            <!-- Date of Birth -->
            <div>
                <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', $enquiry->date_of_birth?->format('Y-m-d')) }}" 
                    onchange="calculateAge()"
                    onclick="this.showPicker()"
                    class="uppercase 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>

            <!-- Gender -->
            <div>
                <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="uppercase 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', $enquiry->gender) == 'Male' ? 'selected' : '' }}>Male</option>
                    <option value="Female" {{ old('gender', $enquiry->gender) == 'Female' ? 'selected' : '' }}>Female</option>
                    <option value="Other" {{ old('gender', $enquiry->gender) == 'Other' ? 'selected' : '' }}>Other</option>
                </select>
                @error('gender') <span class="text-[10px] text-red-500 font-medium mt-1">{{ $message }}</span> @enderror
            </div>

            <!-- Academic Session -->
            <div>
                <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="uppercase 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', $enquiry->academic_session_id) == $session->id) ? 'selected' : '' }}>
                            {{ $session->session_name }}
                        </option>
                    @endforeach
                </select>
                @error('academic_session_id') <span class="text-[10px] text-red-500 font-medium mt-1">{{ $message }}</span> @enderror
            </div>

            <!-- Seeking Class -->
            <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', $enquiry->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> 

            <!-- Enquiry Source -->
            <div>
                <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>
                    @foreach(['Social Media', 'Referral', 'Walk-in', 'Advertisement', 'Website', 'Other'] as $source)
                        <option value="{{ $source }}" 
                            {{ strtoupper(old('enquiry_source', $enquiry->enquiry_source)) == strtoupper($source) ? 'selected' : '' }}>
                            {{ $source }}
                        </option>
                    @endforeach

                </select>
                @error('enquiry_source') <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>

            <!-- Father Name -->
            <div>
                <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', $enquiry->father_name) }}" 
                    class="uppercase 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>

            <!-- Mother Name -->
            <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', $enquiry->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>

            <!-- Contact Number -->
            <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>
                <input type="tel" name="contact_number" value="{{ old('contact_number', $enquiry->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>

            <!-- Email -->
            <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', $enquiry->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>

            <!-- Address -->
            <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">Full Address <span class="text-red-400">*</span></label>
                <textarea name="address" id="address" rows="2" 
                    class="uppercase 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', $enquiry->address) }}</textarea>
                @error('address') <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 Changes <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.getElementById('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');
    }

    document.addEventListener('DOMContentLoaded', function() {
        if (document.getElementById('date_of_birth').value) {
            calculateAge();
        }

        // Restore Photo Preview
        const photoInput = document.getElementById('student_photo_path');
        if (photoInput && photoInput.value) {
            const preview = document.getElementById('final-photo-preview');
            preview.src = "{{ asset('storage') }}/" + photoInput.value;
            preview.classList.remove('hidden');
            document.getElementById('photo-placeholder').classList.add('hidden');
            document.getElementById('remove-photo-btn').classList.remove('hidden');
        }

        // Restore Document Preview
        const docInput = document.getElementById('scanned_document_path');
        if (docInput && docInput.value) {
            const preview = document.getElementById('final-scan-preview');
            preview.src = "{{ asset('storage') }}/" + docInput.value;
            preview.classList.remove('hidden');
            document.getElementById('preview-placeholder').classList.add('hidden');
            document.getElementById('remove-doc-btn').classList.remove('hidden');
        }

        const textFields = document.querySelectorAll('input[type="text"], input[type="tel"], textarea');
        textFields.forEach(field => {
            field.addEventListener('input', function() {
                // Don't uppercase the email field
                if (this.name !== 'email') {
                    this.value = this.value.toUpperCase();
                }
            });
        });
    });
</script>
@endsection