@extends('school.layouts.app')

@section('content')
<div class="max-w-4xl mx-auto">
    <!-- 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.show', $enquiry->id) }}" 
               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">Register Student</h1>
                <p class="text-sm text-slate-500">From Enquiry #{{ $enquiry->id }} — {{ $enquiry->student_name }}</p>
            </div>
        </div>
        <div class="inline-flex items-center gap-1.5 px-3 py-1.5 bg-amber-50 border border-amber-200 rounded-full text-xs font-bold text-amber-700">
            <i class="fa-solid fa-circle-info"></i> Auto-filled from enquiry
        </div>

        <a href="{{ route('school.admissions.show', $enquiry->id) }}" 
                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 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(s) below</p>
                    </div>
                </div>
            </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>
    @endif

    <form action="{{ route('school.admissions.register.store', $enquiry->id) }}" method="POST" class="space-y-5">
        @csrf

        <!-- Registration Info -->
        <div class="bg-white rounded-xl border border-slate-200 shadow-sm p-5">
            <div class="flex items-center gap-2 mb-4 pb-2 border-b border-slate-100">
                <div class="w-8 h-8 rounded-lg bg-emerald-50 flex items-center justify-center">
                    <i class="fa-solid fa-id-card text-emerald-500 text-sm"></i>
                </div>
                <h3 class="text-sm font-bold text-slate-800 uppercase tracking-wider">Registration Details</h3>
            </div>

            <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                <div>
                    <label class="block text-[11px] font-bold text-slate-400 uppercase mb-1 ml-1">
                        Registration No <span class="text-red-400">*</span>
                    </label>
                    
                    @if($regSetting && $regSetting->is_auto == 1)
                        <!-- READONLY when Auto is ON -->
                        <input type="text" name="registration_no" value="{{ old('registration_no', $regNo) }}" readonly
                            class="w-full px-3 py-2 rounded-lg border {{ $errors->has('registration_no') ? 'border-red-500 ring-red-200' : 'border-slate-200' }} bg-slate-50 text-slate-600 font-mono text-sm font-bold cursor-not-allowed">
                    @else
                        <!-- EDITABLE when Auto is OFF -->
                        <input type="text" name="registration_no" value="{{ old('registration_no', $regNo) }}" required
                            class="w-full px-3 py-2 rounded-lg border {{ $errors->has('registration_no') ? 'border-red-500 ring-red-200' : 'border-slate-200' }} focus:ring-2 focus:ring-indigo-500 outline-none text-sm font-mono uppercase" 
                            oninput="this.value = this.value.toUpperCase()">
                    @endif
                    @error('registration_no') <span class="text-[10px] text-red-500 font-medium mt-1 block">{{ $message }}</span> @enderror
                </div>


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

        <!-- Student Info -->
        <div class="bg-white rounded-xl border border-slate-200 shadow-sm p-5">
            <div class="flex items-center gap-2 mb-4 pb-2 border-b border-slate-100">
                <div class="w-8 h-8 rounded-lg bg-indigo-50 flex items-center justify-center">
                    <i class="fa-solid fa-user text-indigo-500 text-sm"></i>
                </div>
                <h3 class="text-sm font-bold text-slate-800 uppercase tracking-wider">Student Information</h3>
            </div>

            <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                <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" value="{{ old('student_name', $enquiry->student_name) }}" required
                        class="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">
                    @error('student_name') <span class="text-[10px] text-red-500 font-medium mt-1 block">{{ $message }}</span> @enderror
                </div>

                <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')) }}" required
                        onchange="calculateAge()" onclick="this.showPicker()"
                        class="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 block">{{ $message }}</span> @enderror
                </div>

                <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" required
                        class="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="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 block">{{ $message }}</span> @enderror
                </div>

                <!-- Academic Session -->
                <div class="mb-4">
                    <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="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 || $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 block">{{ $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" required
                        class="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">
                        @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 block">{{ $message }}</span> @enderror
                </div>
            </div>
        </div>

        <!-- Parent Info -->
        <div class="bg-white rounded-xl border border-slate-200 shadow-sm p-5">
            <div class="flex items-center gap-2 mb-4 pb-2 border-b border-slate-100">
                <div class="w-8 h-8 rounded-lg bg-sky-50 flex items-center justify-center">
                    <i class="fa-solid fa-users text-sky-500 text-sm"></i>
                </div>
                <h3 class="text-sm font-bold text-slate-800 uppercase tracking-wider">Parent Details</h3>
            </div>

            <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                <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" value="{{ old('father_name', $enquiry->father_name) }}" required
                        class="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">
                    @error('father_name') <span class="text-[10px] text-red-500 font-medium mt-1 block">{{ $message }}</span> @enderror
                </div>

                <div>
                    <label class="block text-[11px] font-bold text-slate-400 uppercase mb-1 ml-1">
                        Mother's Name
                    </label>
                    <input type="text" name="mother_name" value="{{ old('mother_name', $enquiry->mother_name) }}"
                        class="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">
                    @error('mother_name') <span class="text-[10px] text-red-500 font-medium mt-1 block">{{ $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>
                    <input type="tel" name="contact_number" 
                        value="{{ old('contact_number', $enquiry->contact_number) }}" required
                        maxlength="15" oninput="this.value = this.value.replace(/[^0-9]/g, '')"
                        class="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 font-mono tracking-wide">
                    @error('contact_number') <span class="text-[10px] text-red-500 font-medium mt-1 block">{{ $message }}</span> @enderror
                </div>

                <div>
                    <label class="block text-[11px] font-bold text-slate-400 uppercase mb-1 ml-1">
                        Email
                    </label>
                    <input type="email" name="email" value="{{ old('email', $enquiry->email) }}"
                        class="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">
                    @error('email') <span class="text-[10px] text-red-500 font-medium mt-1 block">{{ $message }}</span> @enderror
                </div>

                <div class="md:col-span-2">
                    <label class="block text-[11px] font-bold text-slate-400 uppercase mb-1 ml-1">
                        Address
                    </label>
                    <textarea name="address" rows="2" 
                        class="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">{{ old('address', $enquiry->address) }}</textarea>
                    @error('address') <span class="text-[10px] text-red-500 font-medium mt-1 block">{{ $message }}</span> @enderror
                </div
            </div>
        </div>

        <!-- Submit -->
        <div class="flex flex-col sm:flex-row justify-between items-center gap-3 pt-2 pb-6">
            
            
            <button type="submit" 
                    class="w-full sm:w-auto inline-flex items-center justify-center gap-2 px-8 py-3 bg-emerald-600 text-white rounded-xl font-bold text-sm hover:bg-emerald-700 transition-all shadow-lg shadow-emerald-200">
                <i class="fa-solid fa-user-check"></i> Complete Registration
            </button>
        </div>
    </form>
</div>

<script>
    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; }
        if (years < 0) { years = 0; months = 0; days = 0; }
        
        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();
    });
</script>
@endsection