@extends('layouts.admin')

@section('title', 'Create Student')

@section('header-title', 'Create Student')

@section('content')
    <div class="bg-white rounded border border-graphite-400/30 overflow-hidden">
        <div class="px-6 py-4 border-b border-graphite-400/30">
            <h3 class="text-base font-semibold text-ink-900">Create New Student</h3>
        </div>

        <form method="POST" action="{{ route('admin.students.store') }}" class="p-6 space-y-6">
            @csrf

            <div class="grid grid-cols-1 gap-6 sm:grid-cols-2">
                <div>
                    <label for="roll_number" class="block text-sm font-medium text-ink-600">Roll Number <span class="text-redpen-600">*</span></label>
                    <input type="text" name="roll_number" id="roll_number" value="{{ old('roll_number') }}" required class="mt-1 block w-full rounded border-graphite-400/50 border border-graphite-400/30 focus:border-seal-blue-700 focus:ring-seal-blue-700 text-sm" placeholder="Enter roll number">
                    @error('roll_number')
                        <p class="mt-1 text-sm text-redpen-600">{{ $message }}</p>
                    @enderror
                </div>

                <div>
                    <label for="cnic_or_b_form_number" class="block text-sm font-medium text-ink-600">CNIC / B-Form Number <span class="text-redpen-600">*</span></label>
                    <input type="text" name="cnic_or_b_form_number" id="cnic_or_b_form_number" value="{{ old('cnic_or_b_form_number') }}" required class="mt-1 block w-full rounded border-graphite-400/50 border border-graphite-400/30 focus:border-seal-blue-700 focus:ring-seal-blue-700 text-sm" placeholder="Enter CNIC or B-Form number">
                    @error('cnic_or_b_form_number')
                        <p class="mt-1 text-sm text-redpen-600">{{ $message }}</p>
                    @enderror
                </div>

                <div>
                    <label for="name" class="block text-sm font-medium text-ink-600">Name <span class="text-redpen-600">*</span></label>
                    <input type="text" name="name" id="name" value="{{ old('name') }}" required class="mt-1 block w-full rounded border-graphite-400/50 border border-graphite-400/30 focus:border-seal-blue-700 focus:ring-seal-blue-700 text-sm" placeholder="Enter student name">
                    @error('name')
                        <p class="mt-1 text-sm text-redpen-600">{{ $message }}</p>
                    @enderror
                </div>

                <div>
                    <label for="class" class="block text-sm font-medium text-ink-600">Class <span class="text-redpen-600">*</span></label>
                    <input type="text" name="class" id="class" value="{{ old('class') }}" required class="mt-1 block w-full rounded border-graphite-400/50 border border-graphite-400/30 focus:border-seal-blue-700 focus:ring-seal-blue-700 text-sm" placeholder="e.g. 10th, 12th">
                    @error('class')
                        <p class="mt-1 text-sm text-redpen-600">{{ $message }}</p>
                    @enderror
                </div>

                <div>
                    <label for="institute_id" class="block text-sm font-medium text-ink-600">Institute</label>
                    <select name="institute_id" id="institute_id" class="mt-1 block w-full rounded border-graphite-400/50 border border-graphite-400/30 focus:border-seal-blue-700 focus:ring-seal-blue-700 text-sm">
                        <option value="">-- No Institute --</option>
                        @foreach($institutes as $institute)
                            <option value="{{ $institute->id }}" {{ old('institute_id') == $institute->id ? 'selected' : '' }}>
                                {{ $institute->name }} ({{ $institute->code }})
                            </option>
                        @endforeach
                    </select>
                    @error('institute_id')
                        <p class="mt-1 text-sm text-redpen-600">{{ $message }}</p>
                    @enderror
                </div>

                <div>
                    <label for="registration_type" class="block text-sm font-medium text-ink-600">Registration Type <span class="text-redpen-600">*</span></label>
                    <select name="registration_type" id="registration_type" required class="mt-1 block w-full rounded border-graphite-400/50 border border-graphite-400/30 focus:border-seal-blue-700 focus:ring-seal-blue-700 text-sm">
                        <option value="">-- Select Type --</option>
                        <option value="institute" {{ old('registration_type') === 'institute' ? 'selected' : '' }}>Institute</option>
                        <option value="private" {{ old('registration_type') === 'private' ? 'selected' : '' }}>Private</option>
                    </select>
                    @error('registration_type')
                        <p class="mt-1 text-sm text-redpen-600">{{ $message }}</p>
                    @enderror
                </div>

                <div>
                    <label for="status" class="block text-sm font-medium text-ink-600">Status <span class="text-redpen-600">*</span></label>
                    <select name="status" id="status" required class="mt-1 block w-full rounded border-graphite-400/50 border border-graphite-400/30 focus:border-seal-blue-700 focus:ring-seal-blue-700 text-sm">
                        <option value="">-- Select Status --</option>
                        <option value="pending" {{ old('status') === 'pending' ? 'selected' : '' }}>Pending</option>
                        <option value="approved" {{ old('status') === 'approved' ? 'selected' : '' }}>Approved</option>
                        <option value="rejected" {{ old('status') === 'rejected' ? 'selected' : '' }}>Rejected</option>
                    </select>
                    @error('status')
                        <p class="mt-1 text-sm text-redpen-600">{{ $message }}</p>
                    @enderror
                </div>
            </div>

            <div class="flex items-center gap-x-3 pt-4 border-t border-graphite-400/30">
                <a href="{{ route('admin.students.index') }}" class="px-4 py-2 bg-white border border-graphite-400/50 rounded font-semibold text-xs text-ink-600 uppercase tracking-widest hover:bg-paper-50 focus:outline-none focus:ring-2 focus:ring-ink-600 focus:ring-offset-2 transition ease-in-out duration-150">
                    Cancel
                </a>
                <button type="submit" class="inline-flex items-center px-4 py-2 bg-seal-blue-700 border border-transparent rounded font-semibold text-xs text-white uppercase tracking-widest hover:bg-seal-blue-700/90 focus:bg-seal-blue-700 active:bg-seal-blue-700 focus:outline-none focus:ring-2 focus:ring-seal-blue-700 focus:ring-offset-2 transition ease-in-out duration-150">
                    Create Student
                </button>
            </div>
        </form>
    </div>
@endsection