@php($student = $student ?? null)
@php($isEdit = isset($student))
<form method="POST" action="{{ $isEdit ? route('school.students.update', [request()->route('schoolId'), $student->id]) : route('school.students.store', request()->route('schoolId')) }}" enctype="multipart/form-data">
    @csrf
    @if($isEdit) @method('PUT') @endif

    <div class="rounded-xl bg-white shadow-sm ring-1 ring-gray-900/5 p-6 mb-6">
        <h3 class="text-lg font-display font-semibold text-gray-900 mb-4">Personal Information</h3>
        <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
            <div class="md:col-span-3 flex items-center gap-5">
                @if($isEdit && $student->photo_url)
                    <img src="{{ $student->photo_url }}" alt="" class="h-16 w-16 rounded-xl object-cover ring-1 ring-gray-200">
                @else
                    <div class="flex h-16 w-16 items-center justify-center rounded-xl bg-gray-100 text-gray-400">
                        <svg class="h-8 w-8" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5"><path stroke-linecap="round" stroke-linejoin="round" d="M15.75 6a3.75 3.75 0 11-7.5 0 3.75 3.75 0 017.5 0zM4.501 20.118a7.5 7.5 0 0114.998 0A17.933 17.933 0 0112 21.75c-2.676 0-5.216-.584-7.499-1.632z"/></svg>
                    </div>
                @endif
                <div>
                    <label class="block text-sm font-medium text-gray-700">Profile Picture</label>
                    <input type="file" name="photo" accept="image/jpeg,image/png,image/jpg,image/webp" class="mt-1 block w-full max-w-xs text-sm text-gray-500 file:mr-3 file:rounded-lg file:border-0 file:bg-primary-50 file:px-4 file:py-2 file:text-sm file:font-semibold file:text-primary-700 hover:file:bg-primary-100">
                    @if($isEdit && $student->photo)
                        <label class="mt-1 inline-flex items-center gap-1.5 text-xs text-red-500"><input type="checkbox" name="remove_photo" value="1"> Remove current photo</label>
                    @endif
                    @error('photo') <p class="mt-1 text-sm text-red-600">{{ $message }}</p> @enderror
                </div>
            </div>
            <div>
                <label class="block text-sm font-medium text-gray-700">First Name *</label>
                <input type="text" name="first_name" value="{{ old('first_name', $student->first_name ?? '') }}" required class="mt-1 block w-full rounded-lg border border-gray-300 px-3 py-2.5 text-sm shadow-sm focus:border-primary-500 focus:outline-none focus:ring-1 focus:ring-primary-500">
                @error('first_name') <p class="mt-1 text-sm text-red-600">{{ $message }}</p> @enderror
            </div>
            <div>
                <label class="block text-sm font-medium text-gray-700">Last Name *</label>
                <input type="text" name="last_name" value="{{ old('last_name', $student->last_name ?? '') }}" required class="mt-1 block w-full rounded-lg border border-gray-300 px-3 py-2.5 text-sm shadow-sm focus:border-primary-500 focus:outline-none focus:ring-1 focus:ring-primary-500">
                @error('last_name') <p class="mt-1 text-sm text-red-600">{{ $message }}</p> @enderror
            </div>
            <div>
                <label class="block text-sm font-medium text-gray-700">Middle Name</label>
                <input type="text" name="middle_name" value="{{ old('middle_name', $student->middle_name ?? '') }}" class="mt-1 block w-full rounded-lg border border-gray-300 px-3 py-2.5 text-sm shadow-sm focus:border-primary-500 focus:outline-none focus:ring-1 focus:ring-primary-500">
            </div>
            <div>
                <label class="block text-sm font-medium text-gray-700">Gender</label>
                <select name="gender" class="mt-1 block w-full rounded-lg border border-gray-300 px-3 py-2.5 text-sm shadow-sm focus:border-primary-500 focus:outline-none focus:ring-1 focus:ring-primary-500">
                    <option value="">Select...</option>
                    <option value="male" {{ old('gender', strtolower($student->gender ?? '')) === 'male' ? 'selected' : '' }}>Male</option>
                    <option value="female" {{ old('gender', strtolower($student->gender ?? '')) === 'female' ? 'selected' : '' }}>Female</option>
                </select>
                @error('gender') <p class="mt-1 text-sm text-red-600">{{ $message }}</p> @enderror
            </div>
            <div>
                <label class="block text-sm font-medium text-gray-700">Date of Birth</label>
                <input type="date" name="date_of_birth" value="{{ old('date_of_birth', $student?->date_of_birth?->format('Y-m-d')) }}" max="{{ now()->toDateString() }}" class="mt-1 block w-full rounded-lg border border-gray-300 px-3 py-2.5 text-sm shadow-sm focus:border-primary-500 focus:outline-none focus:ring-1 focus:ring-primary-500">
            </div>
            <div>
                <label class="block text-sm font-medium text-gray-700">Blood Group</label>
                <input type="text" name="blood_group" value="{{ old('blood_group', $student->blood_group ?? '') }}" placeholder="e.g. O+" maxlength="10" class="mt-1 block w-full rounded-lg border border-gray-300 px-3 py-2.5 text-sm shadow-sm focus:border-primary-500 focus:outline-none focus:ring-1 focus:ring-primary-500">
            </div>
            <div>
                <label class="block text-sm font-medium text-gray-700">Nationality</label>
                <input type="text" name="nationality" value="{{ old('nationality', $student->nationality ?? 'Nigerian') }}" class="mt-1 block w-full rounded-lg border border-gray-300 px-3 py-2.5 text-sm shadow-sm focus:border-primary-500 focus:outline-none focus:ring-1 focus:ring-primary-500">
            </div>
            <div>
                <label class="block text-sm font-medium text-gray-700">State of Origin</label>
                <input type="text" name="state_of_origin" value="{{ old('state_of_origin', $student->state_of_origin ?? '') }}" class="mt-1 block w-full rounded-lg border border-gray-300 px-3 py-2.5 text-sm shadow-sm focus:border-primary-500 focus:outline-none focus:ring-1 focus:ring-primary-500">
            </div>
            <div>
                <label class="block text-sm font-medium text-gray-700">Local Government (LGA)</label>
                <input type="text" name="lga" value="{{ old('lga', $student->lga ?? '') }}" class="mt-1 block w-full rounded-lg border border-gray-300 px-3 py-2.5 text-sm shadow-sm focus:border-primary-500 focus:outline-none focus:ring-1 focus:ring-primary-500">
            </div>
            <div>
                <label class="block text-sm font-medium text-gray-700">Phone Number</label>
                <input type="text" name="phone" value="{{ old('phone', $student->phone ?? '') }}" class="mt-1 block w-full rounded-lg border border-gray-300 px-3 py-2.5 text-sm shadow-sm focus:border-primary-500 focus:outline-none focus:ring-1 focus:ring-primary-500">
            </div>
            <div>
                <label class="block text-sm font-medium text-gray-700">Email Address</label>
                <input type="email" name="email" value="{{ old('email', $student->email ?? '') }}" class="mt-1 block w-full rounded-lg border border-gray-300 px-3 py-2.5 text-sm shadow-sm focus:border-primary-500 focus:outline-none focus:ring-1 focus:ring-primary-500">
                @error('email') <p class="mt-1 text-sm text-red-600">{{ $message }}</p> @enderror
            </div>
        </div>
    </div>

    <div class="rounded-xl bg-white shadow-sm ring-1 ring-gray-900/5 p-6 mb-6">
        <h3 class="text-lg font-display font-semibold text-gray-900 mb-4">Academic Information</h3>
        <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
            <div>
                <label class="block text-sm font-medium text-gray-700">Campus</label>
                <select name="campus_id" class="mt-1 block w-full rounded-lg border border-gray-300 px-3 py-2.5 text-sm shadow-sm focus:border-primary-500 focus:outline-none focus:ring-1 focus:ring-primary-500">
                    <option value="">No campus</option>
                    @foreach($campuses as $campus)
                        <option value="{{ $campus->id }}" {{ old('campus_id', $student->campus_id ?? '') == $campus->id ? 'selected' : '' }}>{{ $campus->name }}</option>
                    @endforeach
                </select>
            </div>
            <div>
                <label class="block text-sm font-medium text-gray-700">Class</label>
                <select name="class_id" class="mt-1 block w-full rounded-lg border border-gray-300 px-3 py-2.5 text-sm shadow-sm focus:border-primary-500 focus:outline-none focus:ring-1 focus:ring-primary-500">
                    <option value="">Select class...</option>
                    @foreach($classes as $class)
                        <option value="{{ $class->id }}" {{ old('class_id', $student->class_id ?? '') == $class->id ? 'selected' : '' }}>{{ $class->name }}</option>
                    @endforeach
                </select>
            </div>
            <div>
                <label class="block text-sm font-medium text-gray-700">Admission Date</label>
                <input type="date" name="admission_date" value="{{ old('admission_date', ($student?->admission_date ?? $student?->admitted_at)?->format('Y-m-d') ?? now()->toDateString()) }}" class="mt-1 block w-full rounded-lg border border-gray-300 px-3 py-2.5 text-sm shadow-sm focus:border-primary-500 focus:outline-none focus:ring-1 focus:ring-primary-500">
            </div>
            <div>
                <label class="block text-sm font-medium text-gray-700">Previous School (if any)</label>
                <input type="text" name="previous_school" value="{{ old('previous_school', $student->previous_school ?? '') }}" class="mt-1 block w-full rounded-lg border border-gray-300 px-3 py-2.5 text-sm shadow-sm focus:border-primary-500 focus:outline-none focus:ring-1 focus:ring-primary-500">
            </div>
        </div>
    </div>

    <div class="rounded-xl bg-white shadow-sm ring-1 ring-gray-900/5 p-6 mb-6">
        <h3 class="text-lg font-display font-semibold text-gray-900 mb-1">Parent / Guardian <span class="text-red-500">*</span></h3>
        <p class="mb-4 text-xs text-gray-400">Every student must be linked to a registered parent or guardian. Search below, or register a new parent on the spot.</p>
        <x-school.parent-picker :parents="$parents" :selected="old('parent_id', $student->parent_id ?? null)" />
    </div>

    <div class="rounded-xl bg-white shadow-sm ring-1 ring-gray-900/5 p-6 mb-6">
        <h3 class="text-lg font-display font-semibold text-gray-900 mb-4">Contact Address &amp; Health Notes</h3>
        <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
            <div class="md:col-span-2">
                <label class="block text-sm font-medium text-gray-700">Home Address</label>
                <textarea name="address" rows="2" class="mt-1 block w-full rounded-lg border border-gray-300 px-3 py-2.5 text-sm shadow-sm focus:border-primary-500 focus:outline-none focus:ring-1 focus:ring-primary-500">{{ old('address', $student->address ?? '') }}</textarea>
            </div>
            <div>
                <label class="block text-sm font-medium text-gray-700">City / Town</label>
                <input type="text" name="city" value="{{ old('city', $student->city ?? '') }}" class="mt-1 block w-full rounded-lg border border-gray-300 px-3 py-2.5 text-sm shadow-sm focus:border-primary-500 focus:outline-none focus:ring-1 focus:ring-primary-500">
            </div>
            <div>
                <label class="block text-sm font-medium text-gray-700">State</label>
                <input type="text" name="state" value="{{ old('state', $student->state ?? '') }}" class="mt-1 block w-full rounded-lg border border-gray-300 px-3 py-2.5 text-sm shadow-sm focus:border-primary-500 focus:outline-none focus:ring-1 focus:ring-primary-500">
            </div>
            <div>
                <label class="block text-sm font-medium text-gray-700">Medical Conditions</label>
                <textarea name="medical_conditions" rows="2" class="mt-1 block w-full rounded-lg border border-gray-300 px-3 py-2.5 text-sm shadow-sm focus:border-primary-500 focus:outline-none focus:ring-1 focus:ring-primary-500">{{ old('medical_conditions', $student->medical_conditions ?? '') }}</textarea>
            </div>
            <div>
                <label class="block text-sm font-medium text-gray-700">Allergies</label>
                <textarea name="allergies" rows="2" class="mt-1 block w-full rounded-lg border border-gray-300 px-3 py-2.5 text-sm shadow-sm focus:border-primary-500 focus:outline-none focus:ring-1 focus:ring-primary-500">{{ old('allergies', $student->allergies ?? '') }}</textarea>
            </div>
        </div>
    </div>

    <div class="flex gap-3">
        <button type="submit" class="rounded-lg bg-primary-600 px-6 py-2.5 text-sm font-semibold text-white shadow-sm hover:bg-primary-700">{{ $isEdit ? 'Update Student' : 'Add Student' }}</button>
        <a href="{{ $isEdit ? route('school.students.show', [request()->route('schoolId'), $student->id]) : route('school.students.index', request()->route('schoolId')) }}" class="rounded-lg border border-gray-300 bg-white px-6 py-2.5 text-sm font-medium text-gray-700 hover:bg-gray-50">Cancel</a>
    </div>
</form>