@extends('school.layouts.app')

@section('content')
<div class="max-w-5xl mx-auto">
    <div class="flex items-center justify-between mb-6">
        <div>
            <h1 class="text-2xl font-bold text-slate-800">Edit Student Registration</h1>
            <p class="text-sm text-slate-500">Update registration details for <span class="font-semibold text-indigo-600">{{ $registration->student_name }}</span></p>
        </div>
        <a href="{{ route('school.admissions.registrations') }}" class="inline-flex items-center gap-2 px-4 py-2 bg-slate-200 text-slate-600 rounded-xl font-bold text-sm hover:bg-slate-300 transition-all">
            <i class="fa-solid fa-arrow-left"></i> Back to List
        </a>
    </div>

    <form action="{{ url('school/registrations/update/' . $registration->id) }}" method="POST" class="space-y-6">
        @csrf
        @method('PUT')

        <!-- Section 1: Registration Basics -->
        <div class="bg-white rounded-2xl border border-slate-200 shadow-sm overflow-hidden">
            <div class="bg-slate-50 px-6 py-3 border-b border-slate-200">
                <h2 class="text-xs font-bold text-slate-500 uppercase tracking-wider">Registration Identification</h2>
            </div>
            <div class="p-6 grid grid-cols-1 md:grid-cols-3 gap-6">
                <div class="uppercase">
                        <label class="block text-[11px] font-bold text-slate-400 uppercase mb-1">Registration No</label>
                        
                        @if($regSetting && $regSetting->is_auto == 1)
                            <!-- READONLY when Auto is ON -->
                            <input type="text" name="registration_no" value="{{ $registration->registration_no }}" 
                                class="w-full px-3 py-2 rounded-lg border border-slate-200 bg-slate-100 text-slate-600 text-sm font-mono cursor-not-allowed" readonly>
                        @else
                            <!-- EDITABLE when Auto is OFF -->
                            <input type="text" name="registration_no" value="{{ $registration->registration_no }}" 
                                class="w-full px-3 py-2 rounded-lg border border-slate-200 text-sm font-mono focus:ring-2 focus:ring-indigo-500 outline-none uppercase" required>
                            @error('registration_no') <p class="text-red-500 text-[10px] mt-1">{{ $message }}</p> @enderror
                        @endif
                    </div>

                <div class="uppercase">
                    <label class="block text-[11px] font-bold text-slate-400 uppercase mb-1">Academic Session</label>
                    <select name="academic_session_id" class="w-full px-3 py-2 rounded-lg border border-slate-200 text-sm focus:ring-2 focus:ring-indigo-500 outline-none">
                        @foreach($sessions as $session)
                            <option value="{{ $session->id }}" {{ $registration->academic_session_id == $session->id ? 'selected' : '' }}>
                                {{ $session->session_name }}
                            </option>
                        @endforeach
                    </select>
                    @error('academic_session_id') <p class="text-red-500 text-[10px] mt-1">{{ $message }}</p> @enderror
                </div>
                <div class="uppercase">
                    <label class="block text-[11px] font-bold text-slate-400 uppercase mb-1">Registration Date</label>
                    <!-- Added onclick and cursor-pointer -->
                    <input type="date" name="registration_date" 
                        value="{{ \Carbon\Carbon::parse($registration->registration_date)->format('Y-m-d') }}" 
                        onclick="this.showPicker()"
                        class="w-full px-3 py-2 rounded-lg border border-slate-200 text-sm focus:ring-2 focus:ring-indigo-500 outline-none cursor-pointer">
                    @error('registration_date') <p class="text-red-500 text-[10px] mt-1">{{ $message }}</p> @enderror
                </div>
            </div>
        </div>

        <!-- Section 2: Student Personal Details -->
        <div class="bg-white rounded-2xl border border-slate-200 shadow-sm overflow-hidden">
            <div class="bg-slate-50 px-6 py-3 border-b border-slate-200">
                <h2 class="text-xs font-bold text-slate-500 uppercase tracking-wider">Student Information</h2>
            </div>
            <div class="p-6 grid grid-cols-1 md:grid-cols-3 gap-6">
                <div class="md:col-span-2 uppercase">
                    <label class="block text-[11px] font-bold text-slate-400 uppercase mb-1">Full Name</label>
                    <input type="text" name="student_name" value="{{ $registration->student_name }}" 
                        oninput="autoUpper(this)"
                        class="w-full px-3 py-2 rounded-lg border border-slate-200 text-sm focus:ring-2 focus:ring-indigo-500 outline-none uppercase" required>
                    @error('student_name') <p class="text-red-500 text-[10px] mt-1">{{ $message }}</p> @enderror
                </div>
                <div class="uppercase">
                    <label class="block text-[11px] font-bold text-slate-400 uppercase mb-1">Gender</label>
                    <select name="gender" class="w-full px-3 py-2 rounded-lg border border-slate-200 text-sm focus:ring-2 focus:ring-indigo-500 outline-none">
                        <option value="Male" {{ $registration->gender == 'Male' ? 'selected' : '' }}>Male</option>
                        <option value="Female" {{ $registration->gender == 'Female' ? 'selected' : '' }}>Female</option>
                        <option value="Other" {{ $registration->gender == 'Other' ? 'selected' : '' }}>Other</option>
                    </select>
                    @error('gender') <p class="text-red-500 text-[10px] mt-1">{{ $message }}</p> @enderror
                </div>
                <div class="uppercase">
                    <label class="block text-[11px] font-bold text-slate-400 uppercase mb-1">Date of Birth</label>
                    <!-- Added onclick and cursor-pointer -->
                    <input type="date" name="date_of_birth" 
                        value="{{ \Carbon\Carbon::parse($registration->date_of_birth)->format('Y-m-d') }}" 
                        onclick="this.showPicker()"
                        class="w-full px-3 py-2 rounded-lg border border-slate-200 text-sm focus:ring-2 focus:ring-indigo-500 outline-none cursor-pointer" required>
                    @error('date_of_birth') <p class="text-red-500 text-[10px] mt-1">{{ $message }}</p> @enderror
                </div>
                <div class="uppercase">
                    <label class="block text-[11px] font-bold text-slate-400 uppercase mb-1">Seeking Class</label>
                    <select name="seeking_class_id" class="w-full px-3 py-2 rounded-lg border border-slate-200 text-sm focus:ring-2 focus:ring-indigo-500 outline-none">
                        @foreach($classes as $class)
                            <option value="{{ $class->id }}" {{ old('seeking_class_id', $registration->seeking_class_id) == $class->id ? 'selected' : '' }}>
                                {{ $class->name }}
                            </option>
                        @endforeach
                    </select>
                    @error('seeking_class_id') <p class="text-red-500 text-[10px] mt-1">{{ $message }}</p> @enderror
                </div>
                <div class="uppercase">
                    <label class="block text-[11px] font-bold text-slate-400 uppercase mb-1">Contact Number</label>
                    <input type="text" name="contact_number" value="{{ $registration->contact_number }}" 
                        maxlength="10"
                        oninput="this.value = this.value.replace(/[^0-9]/g, '')"
                        class="w-full px-3 py-2 rounded-lg border border-slate-200 text-sm focus:ring-2 focus:ring-indigo-500 outline-none" required>
                    @error('contact_number') <p class="text-red-500 text-[10px] mt-1">{{ $message }}</p> @enderror
                </div>
            </div>
        </div>

        <!-- Section 3: Family Details -->
        <div class="bg-white rounded-2xl border border-slate-200 shadow-sm overflow-hidden">
            <div class="bg-slate-50 px-6 py-3 border-b border-slate-200">
                <h2 class="text-xs font-bold text-slate-500 uppercase tracking-wider">Parental Information</h2>
            </div>
            <div class="p-6 grid grid-cols-1 md:grid-cols-2 gap-6">
                <div class="uppercase">
                    <label class="block text-[11px] font-bold text-slate-400 uppercase mb-1">Father's Name</label>
                    <input type="text" name="father_name" value="{{ $registration->father_name }}" 
                        oninput="autoUpper(this)"
                        class="w-full px-3 py-2 rounded-lg border border-slate-200 text-sm focus:ring-2 focus:ring-indigo-500 outline-none uppercase" required>
                    @error('father_name') <p class="text-red-500 text-[10px] mt-1">{{ $message }}</p> @enderror
                </div>
                <div class="uppercase">
                    <label class="block text-[11px] font-bold text-slate-400 uppercase mb-1">Mother's Name</label>
                    <input type="text" name="mother_name" value="{{ $registration->mother_name }}" 
                        oninput="autoUpper(this)"
                        class="w-full px-3 py-2 rounded-lg border border-slate-200 text-sm focus:ring-2 focus:ring-indigo-500 outline-none uppercase">
                    @error('mother_name') <p class="text-red-500 text-[10px] mt-1">{{ $message }}</p> @enderror
                </div>
                <div class="uppercase">
                    <label class="block text-[11px] font-bold text-slate-400 uppercase mb-1">Email Address</label>
                    <input type="email" name="email" value="{{ old('email', $registration->email) }}" 
                        class="w-full px-3 py-2 rounded-lg border border-slate-200 text-sm focus:ring-2 focus:ring-indigo-500 outline-none" 
                        style="text-transform: lowercase;"
                        pattern="[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,}$"
                        title="Please enter a valid email address (e.g., user@example.com)"
                        required>
                    @error('email') <p class="text-red-500 text-[10px] mt-1">{{ $message }}</p> @enderror
                </div>
                <div class="uppercase">
                    <label class="block text-[11px] font-bold text-slate-400 uppercase mb-1">Full Address</label>
                    <input type="text" name="address" value="{{ $registration->address }}" 
                        oninput="autoUpper(this)"
                        class="w-full px-3 py-2 rounded-lg border border-slate-200 text-sm focus:ring-2 focus:ring-indigo-500 outline-none uppercase">
                    @error('address') <p class="text-red-500 text-[10px] mt-1">{{ $message }}</p> @enderror
                </div>
            </div>
        </div>

        <!-- Form Actions -->
        <div class="flex items-center justify-end gap-3">
            <a href="{{ route('school.admissions.registrations') }}" class="px-6 py-2.5 bg-slate-200 text-slate-600 rounded-xl font-bold text-sm hover:bg-slate-300 transition-all">Cancel</a>
            <button type="submit" class="px-6 py-2.5 bg-indigo-600 text-white rounded-xl font-bold text-sm hover:bg-indigo-700 transition-all shadow-lg shadow-indigo-200">
                <i class="fa-solid fa-save mr-1"></i> Update Registration
            </button>
        </div>
    </form>
</div>

<script>
    // This function converts text to uppercase as the user types
    function autoUpper(input) {
        input.value = input.value.toUpperCase();
    }
</script>
@endsection