@extends('layouts.app')

@section('title', 'Add New Student')
@section('page_header', 'Add Student Intern Record')

@section('content')
<div class="max-w-4xl mx-auto space-y-6" x-data="studentForm()">

    <!-- Form Header -->
    <div class="flex items-center justify-between bg-white p-6 rounded-3xl border border-slate-200/80 shadow-sm">
        <div>
            <h2 class="text-xl font-extrabold text-slate-900">Enter Student Details</h2>
            <p class="text-xs text-slate-500">Fill in intern student information. Use the + button to quick-add new colleges on the fly.</p>
        </div>
        <a href="{{ route('admin.students.index') }}" class="text-xs font-bold text-slate-600 hover:text-slate-900 bg-slate-100 hover:bg-slate-200 px-4 py-2.5 rounded-xl border border-slate-200">
            ← Back to Directory
        </a>
    </div>

    <!-- Student Form Card -->
    <div class="bg-white p-8 rounded-3xl border border-slate-200/80 shadow-sm">
        
        <form action="{{ route('admin.students.store') }}" method="POST" class="space-y-6">
            @csrf

            <!-- Personal Details Section -->
            <div class="space-y-4">
                <h3 class="text-sm font-extrabold text-slate-900 uppercase tracking-wider border-b border-slate-100 pb-2">1. Personal Details</h3>

                <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                    <div>
                        <label class="block text-xs font-bold text-slate-700 uppercase tracking-wider mb-2">Student Full Name <span class="text-rose-500">*</span></label>
                        <input type="text" name="full_name" value="{{ old('full_name') }}" required
                               placeholder="e.g. Aarav Sharma"
                               class="w-full px-4 py-3 rounded-xl border border-slate-200 bg-slate-50 text-sm font-semibold focus:bg-white focus:border-emerald-600 outline-none">
                    </div>

                    <div>
                        <label class="block text-xs font-bold text-slate-700 uppercase tracking-wider mb-2">Email Address</label>
                        <input type="email" name="email" value="{{ old('email') }}"
                               placeholder="e.g. aarav@example.com"
                               class="w-full px-4 py-3 rounded-xl border border-slate-200 bg-slate-50 text-sm font-semibold focus:bg-white focus:border-emerald-600 outline-none">
                    </div>

                    <div>
                        <label class="block text-xs font-bold text-slate-700 uppercase tracking-wider mb-2">Phone Number</label>
                        <input type="text" name="phone" value="{{ old('phone') }}"
                               placeholder="e.g. +91 9876543210"
                               class="w-full px-4 py-3 rounded-xl border border-slate-200 bg-slate-50 text-sm font-semibold focus:bg-white focus:border-emerald-600 outline-none">
                    </div>

                    <div class="grid grid-cols-2 gap-4">
                        <div>
                            <label class="block text-xs font-bold text-slate-700 uppercase tracking-wider mb-2">Age</label>
                            <input type="number" name="age" value="{{ old('age') }}" min="10" max="100"
                                   placeholder="21"
                                   class="w-full px-4 py-3 rounded-xl border border-slate-200 bg-slate-50 text-sm font-semibold focus:bg-white focus:border-emerald-600 outline-none">
                        </div>

                        <div>
                            <label class="block text-xs font-bold text-slate-700 uppercase tracking-wider mb-2">Gender</label>
                            <select name="gender" class="w-full px-4 py-3 rounded-xl border border-slate-200 bg-slate-50 text-sm font-semibold focus:bg-white focus:border-emerald-600 outline-none">
                                <option value="">Select</option>
                                <option value="Male" {{ old('gender') == 'Male' ? 'selected' : '' }}>Male</option>
                                <option value="Female" {{ old('gender') == 'Female' ? 'selected' : '' }}>Female</option>
                                <option value="Other" {{ old('gender') == 'Other' ? 'selected' : '' }}>Other</option>
                            </select>
                        </div>
                    </div>
                </div>
            </div>

            <!-- College Selection with Quick-Add (+) Button -->
            <div class="space-y-4 pt-4">
                <h3 class="text-sm font-extrabold text-slate-900 uppercase tracking-wider border-b border-slate-100 pb-2">2. Educational Institution</h3>

                <div>
                    <label class="block text-xs font-bold text-slate-700 uppercase tracking-wider mb-2">Select College / University</label>
                    
                    <div class="flex items-center gap-3">
                        <select name="college_id" id="college_select" x-model="selectedCollegeId"
                                class="flex-1 px-4 py-3 rounded-xl border border-slate-200 bg-slate-50 text-sm font-semibold focus:bg-white focus:border-emerald-600 outline-none">
                            <option value="">-- Direct Applicant / None --</option>
                            <template x-for="col in colleges" :key="col.id">
                                <option :value="col.id" x-text="col.name"></option>
                            </template>
                        </select>

                        <!-- Quick Add (+) Button -->
                        <button type="button" @click="showCollegeModal = true" 
                                class="px-4 py-3 rounded-xl bg-emerald-600 hover:bg-emerald-700 text-white font-bold text-sm shadow-md shadow-emerald-600/20 flex items-center gap-2 flex-shrink-0 transition-transform active:scale-95"
                                title="Add New College Instantly">
                            <i data-lucide="plus" class="w-5 h-5"></i>
                            <span class="hidden sm:inline">Add College</span>
                        </button>
                    </div>
                    <p class="text-[11px] text-slate-400 mt-1.5">If the college is not in the list, click the <strong>+ Add College</strong> button to create it on the spot without losing form inputs!</p>
                </div>
            </div>

            <!-- Submit Button -->
            <div class="pt-6 border-t border-slate-100 flex items-center justify-end gap-4">
                <a href="{{ route('admin.students.index') }}" class="px-6 py-3 rounded-xl border border-slate-200 text-sm font-bold text-slate-600 hover:bg-slate-50">
                    Cancel
                </a>
                <button type="submit" class="px-8 py-3.5 rounded-xl bg-gradient-to-r from-emerald-600 to-teal-600 hover:from-emerald-700 hover:to-teal-700 text-white text-sm font-bold shadow-xl shadow-emerald-600/30 transition-all hover:scale-[1.01]">
                    Save Student Record
                </button>
            </div>
        </form>
    </div>

    <!-- INLINE QUICK-ADD (+) COLLEGE MODAL -->
    <div x-show="showCollegeModal" x-cloak class="fixed inset-0 z-50 flex items-center justify-center p-4 bg-slate-900/60 backdrop-blur-sm">
        <div class="bg-white rounded-3xl p-8 max-w-md w-full space-y-6 shadow-2xl">
            <div class="flex items-center justify-between border-b border-slate-100 pb-4">
                <div class="flex items-center gap-2 text-emerald-700">
                    <div class="w-8 h-8 rounded-xl bg-emerald-100 flex items-center justify-center font-bold">
                        <i data-lucide="plus" class="w-5 h-5"></i>
                    </div>
                    <h3 class="text-lg font-bold text-slate-900">Quick-Add New College</h3>
                </div>
                <button @click="showCollegeModal = false" class="text-slate-400 hover:text-slate-600">
                    <i data-lucide="x" class="w-5 h-5"></i>
                </button>
            </div>

            <form @submit.prevent="submitQuickCollege()" class="space-y-4">
                <div>
                    <label class="block text-xs font-bold text-slate-700 uppercase tracking-wider mb-2">College / University Name <span class="text-rose-500">*</span></label>
                    <input type="text" x-model="newCollege.name" required placeholder="e.g. St. Xavier's College"
                           class="w-full px-4 py-3 rounded-xl border border-slate-200 bg-slate-50 text-sm font-semibold focus:bg-white focus:border-emerald-600 outline-none">
                </div>

                <div>
                    <label class="block text-xs font-bold text-slate-700 uppercase tracking-wider mb-2">City & State</label>
                    <input type="text" x-model="newCollege.city_state" placeholder="e.g. Mumbai, Maharashtra"
                           class="w-full px-4 py-3 rounded-xl border border-slate-200 bg-slate-50 text-sm font-semibold focus:bg-white focus:border-emerald-600 outline-none">
                </div>

                <div x-show="collegeError" class="text-xs text-rose-600 font-semibold" x-text="collegeError"></div>

                <div class="flex items-center justify-end gap-3 pt-4 border-t border-slate-100">
                    <button type="button" @click="showCollegeModal = false" class="px-4 py-2.5 rounded-xl border border-slate-200 text-xs font-bold text-slate-600 hover:bg-slate-50">
                        Cancel
                    </button>
                    <button type="submit" :disabled="submittingCollege" class="px-5 py-2.5 rounded-xl bg-emerald-600 hover:bg-emerald-700 text-white text-xs font-bold shadow-lg shadow-emerald-600/20 disabled:opacity-50">
                        <span x-show="!submittingCollege">Save & Select College</span>
                        <span x-show="submittingCollege">Saving...</span>
                    </button>
                </div>
            </form>
        </div>
    </div>

</div>

@push('scripts')
<script>
    function studentForm() {
        return {
            colleges: @json($colleges),
            selectedCollegeId: "{{ old('college_id') }}",
            showCollegeModal: false,
            submittingCollege: false,
            collegeError: '',
            newCollege: { name: '', city_state: '' },

            async submitQuickCollege() {
                if (!this.newCollege.name) return;
                this.submittingCollege = true;
                this.collegeError = '';

                try {
                    const response = await fetch("{{ route('admin.colleges.store_inline') }}", {
                        method: 'POST',
                        headers: {
                            'Content-Type': 'application/json',
                            'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content'),
                            'Accept': 'application/json'
                        },
                        body: JSON.stringify(this.newCollege)
                    });

                    const data = await response.json();

                    if (data.success) {
                        this.colleges.push(data.college);
                        this.selectedCollegeId = data.college.id;
                        this.newCollege = { name: '', city_state: '' };
                        this.showCollegeModal = false;
                    } else {
                        this.collegeError = data.message || 'Error saving college.';
                    }
                } catch (e) {
                    this.collegeError = 'Network error. Could not add college.';
                } finally {
                    this.submittingCollege = false;
                }
            }
        }
    }
</script>
@endpush
@endsection