@extends('layouts.site')

@section('title', "Demande d'admission - Sciences Afrique")

@section('content')

    <div class="min-h-screen pt-28 pb-20">
        <div class="max-w-3xl mx-auto px-4 sm:px-6 lg:px-8">

            {{-- En-tête --}}
            <div class="text-center mb-12">
                <div class="inline-flex items-center gap-2 px-3 py-1 rounded-full bg-blue-50 border border-blue-100 text-blue-700 text-sm font-bold mb-4">
                    <span class="w-2 h-2 rounded-full bg-blue-600 animate-pulse"></span>
                    Inscriptions ouvertes
                </div>
                <h1 class="text-4xl font-black text-brand-dark mb-3">Demande d'admission</h1>
                <p class="text-lg text-slate-500 max-w-xl mx-auto">Remplissez ce formulaire pour rejoindre Sciences Afrique. Notre équipe examinera votre dossier et vous contactera rapidement.</p>
            </div>

            {{-- Message de succès --}}
            @if(session('success'))
            <div class="mb-8 p-5 bg-green-50 border border-green-200 rounded-2xl flex items-start gap-4">
                <div class="w-10 h-10 bg-green-100 rounded-full flex items-center justify-center flex-shrink-0 text-green-600">
                    <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd"></path></svg>
                </div>
                <div>
                    <p class="font-bold text-green-800">Demande envoyée !</p>
                    <p class="text-green-700 text-sm mt-1">{{ session('success') }}</p>
                </div>
            </div>
            @endif

            {{-- Formulaire avec Alpine.js --}}
            <div class="bg-white rounded-3xl shadow-xl shadow-slate-200/50 border border-slate-100 overflow-hidden"
                 x-data="{
                    admissionType: '',
                    selectedFaculty: '',
                    departments: [],
                    continuousCourses: [],
                    loadingDept: false,
                    loadingCourses: false,

                    async onFacultyChange(facultyId) {
                        this.selectedFaculty = facultyId;
                        this.departments = [];
                        if (!facultyId) return;
                        this.loadingDept = true;
                        try {
                            const res = await fetch('/api/faculties/' + facultyId + '/departments');
                            this.departments = await res.json();
                        } finally {
                            this.loadingDept = false;
                        }
                    },

                    async onTypeChange(type) {
                        this.admissionType = type;
                        this.departments = [];
                        this.selectedFaculty = '';
                        this.continuousCourses = [];
                        if (type === 'formation_continue') {
                            this.loadingCourses = true;
                            try {
                                const res = await fetch('/api/courses/continuous');
                                this.continuousCourses = await res.json();
                            } finally {
                                this.loadingCourses = false;
                            }
                        }
                    }
                 }">

                {{-- Étapes visuelles --}}
                <div class="bg-gradient-to-r from-blue-700 to-indigo-600 px-8 py-6">
                    <div class="flex items-center justify-between text-white">
                        <div class="flex items-center gap-3">
                            <div class="w-8 h-8 bg-white/20 rounded-full flex items-center justify-center font-black text-sm">1</div>
                            <span class="font-bold text-sm">Informations personnelles</span>
                        </div>
                        <div class="w-12 h-px bg-white/30"></div>
                        <div class="flex items-center gap-3">
                            <div class="w-8 h-8 bg-white/20 rounded-full flex items-center justify-center font-black text-sm">2</div>
                            <span class="font-bold text-sm">Choix de formation</span>
                        </div>
                        <div class="w-12 h-px bg-white/30"></div>
                        <div class="flex items-center gap-3">
                            <div class="w-8 h-8 bg-white/20 rounded-full flex items-center justify-center font-black text-sm">3</div>
                            <span class="font-bold text-sm">Envoi</span>
                        </div>
                    </div>
                </div>

                <form method="POST" action="{{ route('admissions.store') }}" enctype="multipart/form-data" class="p-8 space-y-8">
                    @csrf

                    {{-- SECTION 1 : Informations personnelles --}}
                    <div>
                        <h2 class="text-xl font-black text-brand-dark mb-6 flex items-center gap-3">
                            <span class="w-8 h-8 bg-blue-600 text-white rounded-xl flex items-center justify-center text-sm font-black">1</span>
                            Vos informations personnelles
                        </h2>
                        <div class="grid grid-cols-1 sm:grid-cols-2 gap-5">
                            <div>
                                <label class="block text-sm font-bold text-slate-700 mb-2">Prénom <span class="text-red-500">*</span></label>
                                <input type="text" name="first_name" value="{{ old('first_name') }}" required
                                    class="w-full px-4 py-3 border border-slate-200 rounded-xl focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent transition-all bg-slate-50"
                                    placeholder="Votre prénom">
                                @error('first_name')<p class="text-red-500 text-xs mt-1">{{ $message }}</p>@enderror
                            </div>
                            <div>
                                <label class="block text-sm font-bold text-slate-700 mb-2">Nom de famille <span class="text-red-500">*</span></label>
                                <input type="text" name="last_name" value="{{ old('last_name') }}" required
                                    class="w-full px-4 py-3 border border-slate-200 rounded-xl focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent transition-all bg-slate-50"
                                    placeholder="Votre nom">
                                @error('last_name')<p class="text-red-500 text-xs mt-1">{{ $message }}</p>@enderror
                            </div>
                            <div>
                                <label class="block text-sm font-bold text-slate-700 mb-2">Adresse e-mail <span class="text-red-500">*</span></label>
                                <input type="email" name="email" value="{{ old('email') }}" required
                                    class="w-full px-4 py-3 border border-slate-200 rounded-xl focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent transition-all bg-slate-50"
                                    placeholder="votre@email.com">
                                @error('email')<p class="text-red-500 text-xs mt-1">{{ $message }}</p>@enderror
                            </div>
                            <div>
                                <label class="block text-sm font-bold text-slate-700 mb-2">Téléphone <span class="text-red-500">*</span></label>
                                <input type="tel" name="phone" value="{{ old('phone') }}" required
                                    class="w-full px-4 py-3 border border-slate-200 rounded-xl focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent transition-all bg-slate-50"
                                    placeholder="+237 6XX XXX XXX">
                                @error('phone')<p class="text-red-500 text-xs mt-1">{{ $message }}</p>@enderror
                            </div>
                        </div>
                    </div>

                    <hr class="border-slate-100">

                    {{-- SECTION 2 : Choix de formation --}}
                    <div>
                        <h2 class="text-xl font-black text-brand-dark mb-6 flex items-center gap-3">
                            <span class="w-8 h-8 bg-blue-600 text-white rounded-xl flex items-center justify-center text-sm font-black">2</span>
                            Votre choix de formation
                        </h2>

                        {{-- Type d'admission --}}
                        <div class="mb-6">
                            <label class="block text-sm font-bold text-slate-700 mb-3">Je souhaite m'inscrire en <span class="text-red-500">*</span></label>
                            <div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
                                <label class="relative cursor-pointer">
                                    <input type="radio" name="admission_type" value="faculte" class="sr-only peer"
                                           @change="onTypeChange('faculte')">
                                    <div class="p-5 border-2 border-slate-200 rounded-2xl peer-checked:border-blue-600 peer-checked:bg-blue-50 transition-all hover:border-blue-300">
                                        <div class="w-10 h-10 bg-blue-100 rounded-xl flex items-center justify-center text-blue-600 mb-3">
                                            <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5M9 7h1m-1 4h1m4-4h1m-1 4h1m-5 10v-5a1 1 0 011-1h2a1 1 0 011 1v5m-4 0h4"></path></svg>
                                        </div>
                                        <p class="font-black text-slate-800">Faculté / Diplôme</p>
                                        <p class="text-xs text-slate-500 mt-1">Licence, Master, Doctorat…</p>
                                    </div>
                                </label>
                                <label class="relative cursor-pointer">
                                    <input type="radio" name="admission_type" value="formation_continue" class="sr-only peer"
                                           @change="onTypeChange('formation_continue')">
                                    <div class="p-5 border-2 border-slate-200 rounded-2xl peer-checked:border-orange-500 peer-checked:bg-orange-50 transition-all hover:border-orange-300">
                                        <div class="w-10 h-10 bg-orange-100 rounded-xl flex items-center justify-center text-orange-600 mb-3">
                                            <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4M7.835 4.697a3.42 3.42 0 001.946-.806 3.42 3.42 0 014.438 0 3.42 3.42 0 001.946.806 3.42 3.42 0 013.138 3.138 3.42 3.42 0 00.806 1.946 3.42 3.42 0 010 4.438 3.42 3.42 0 00-.806 1.946 3.42 3.42 0 01-3.138 3.138 3.42 3.42 0 00-1.946.806 3.42 3.42 0 01-4.438 0 3.42 3.42 0 00-1.946-.806 3.42 3.42 0 01-3.138-3.138 3.42 3.42 0 00-.806-1.946 3.42 3.42 0 010-4.438 3.42 3.42 0 00.806-1.946 3.42 3.42 0 013.138-3.138z"></path></svg>
                                        </div>
                                        <p class="font-black text-slate-800">Formation continue</p>
                                        <p class="text-xs text-slate-500 mt-1">Certification, Bootcamp, Cours pro…</p>
                                    </div>
                                </label>
                            </div>
                            @error('admission_type')<p class="text-red-500 text-xs mt-2">{{ $message }}</p>@enderror
                        </div>

                        {{-- Filtre Faculté → Département --}}
                        <div x-show="admissionType === 'faculte'" x-transition x-cloak class="space-y-5">
                            <div>
                                <label class="block text-sm font-bold text-slate-700 mb-2">Sélectionnez une Faculté <span class="text-red-500">*</span></label>
                                <select name="faculty_id" @change="onFacultyChange($event.target.value)"
                                    class="w-full px-4 py-3 border border-slate-200 rounded-xl focus:outline-none focus:ring-2 focus:ring-blue-500 bg-slate-50 transition-all">
                                    <option value="">-- Choisir une faculté --</option>
                                    @foreach($faculties as $faculty)
                                        <option value="{{ $faculty->id }}">{{ $faculty->name }}</option>
                                    @endforeach
                                </select>
                                @error('faculty_id')<p class="text-red-500 text-xs mt-1">{{ $message }}</p>@enderror
                            </div>

                            {{-- Filtre Département (chargé dynamiquement) --}}
                            <div x-show="departments.length > 0 || loadingDept" x-transition x-cloak>
                                <label class="block text-sm font-bold text-slate-700 mb-2">Sélectionnez un Département</label>
                                <template x-if="loadingDept">
                                    <div class="flex items-center gap-2 text-slate-500 text-sm py-3">
                                        <svg class="animate-spin w-4 h-4" fill="none" viewBox="0 0 24 24"><circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle><path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z"></path></svg>
                                        Chargement des départements…
                                    </div>
                                </template>
                                <template x-if="!loadingDept && departments.length > 0">
                                    <select name="department_id"
                                        class="w-full px-4 py-3 border border-slate-200 rounded-xl focus:outline-none focus:ring-2 focus:ring-blue-500 bg-slate-50 transition-all">
                                        <option value="">-- Choisir un département (optionnel) --</option>
                                        <template x-for="dept in departments" :key="dept.id">
                                            <option :value="dept.id" x-text="dept.name"></option>
                                        </template>
                                    </select>
                                </template>
                                @error('department_id')<p class="text-red-500 text-xs mt-1">{{ $message }}</p>@enderror
                            </div>
                        </div>

                        {{-- Filtre Formation continue → Liste des formations --}}
                        <div x-show="admissionType === 'formation_continue'" x-transition x-cloak class="space-y-5">
                            <div>
                                <label class="block text-sm font-bold text-slate-700 mb-2">Sélectionnez une Formation <span class="text-red-500">*</span></label>
                                <template x-if="loadingCourses">
                                    <div class="flex items-center gap-2 text-slate-500 text-sm py-3">
                                        <svg class="animate-spin w-4 h-4" fill="none" viewBox="0 0 24 24"><circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle><path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z"></path></svg>
                                        Chargement des formations…
                                    </div>
                                </template>
                                <template x-if="!loadingCourses">
                                    <select name="course_id"
                                        class="w-full px-4 py-3 border border-slate-200 rounded-xl focus:outline-none focus:ring-2 focus:ring-orange-500 bg-slate-50 transition-all">
                                        <option value="">-- Choisir une formation --</option>
                                        <template x-for="course in continuousCourses" :key="course.id">
                                            <option :value="course.id" x-text="course.title"></option>
                                        </template>
                                    </select>
                                </template>
                                <template x-if="!loadingCourses && continuousCourses.length === 0 && admissionType === 'formation_continue'">
                                    <p class="text-sm text-slate-400 mt-2 italic">Aucune formation continue disponible pour le moment.</p>
                                </template>
                                @error('course_id')<p class="text-red-500 text-xs mt-1">{{ $message }}</p>@enderror
                            </div>
                        </div>
                    </div>

                    <hr class="border-slate-100">

                    {{-- Section 3 : Documents requis --}}
                    <div>
                        <h2 class="text-xl font-black text-brand-dark mb-6 flex items-center gap-3">
                            <span class="w-8 h-8 bg-blue-600 text-white rounded-xl flex items-center justify-center text-sm font-black">3</span>
                            Documents requis
                        </h2>
                        <div>
                            <label class="block text-sm font-bold text-slate-700 mb-2">Dossier d'admission (PDF uniquement, max 5MB) <span class="text-red-500">*</span></label>
                            <input type="file" name="document" accept=".pdf" required
                                class="w-full px-4 py-3 border border-slate-200 rounded-xl focus:outline-none focus:ring-2 focus:ring-blue-500 bg-slate-50 transition-all file:mr-4 file:py-2 file:px-4 file:rounded-lg file:border-0 file:text-sm file:font-semibold file:bg-blue-50 file:text-blue-700 hover:file:bg-blue-100">
                            @error('document')<p class="text-red-500 text-xs mt-1">{{ $message }}</p>@enderror
                        </div>
                    </div>

                    <hr class="border-slate-100">

                    {{-- Section 4 : Message complémentaire --}}
                    <div>
                        <h2 class="text-xl font-black text-brand-dark mb-6 flex items-center gap-3">
                            <span class="w-8 h-8 bg-blue-600 text-white rounded-xl flex items-center justify-center text-sm font-black">4</span>
                            Message complémentaire (optionnel)
                        </h2>
                        <textarea name="notes" rows="4"
                            class="w-full px-4 py-3 border border-slate-200 rounded-xl focus:outline-none focus:ring-2 focus:ring-blue-500 bg-slate-50 resize-none transition-all"
                            placeholder="Parlez-nous de votre parcours, de vos motivations ou de toute question particulière…">{{ old('notes') }}</textarea>
                    </div>

                    {{-- Frais d'admission --}}
                    <div x-show="admissionType !== ''" x-transition x-cloak class="bg-blue-50 border border-blue-100 rounded-2xl p-6 flex items-center justify-between">
                        <div>
                            <h3 class="font-black text-blue-900">Frais d'étude de dossier</h3>
                            <p class="text-sm text-blue-700 mt-1">Ces frais seront applicables pour valider votre admission.</p>
                        </div>
                        <div class="text-3xl font-black text-blue-600">
                            $<span x-text="admissionType === 'faculte' ? '50' : '30'"></span>
                        </div>
                    </div>

                    {{-- Bouton de soumission --}}
                    <div class="pt-2">
                        <button type="submit"
                            class="w-full bg-gradient-to-r from-blue-700 to-indigo-600 text-white font-black py-4 px-8 rounded-2xl hover:from-blue-800 hover:to-indigo-700 transition-all shadow-xl shadow-blue-700/30 transform hover:-translate-y-0.5 text-lg flex items-center justify-center gap-2">
                            <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 19l9 2-9-18-9 18 9-2zm0 0v-8"></path></svg>
                            Envoyer ma demande d'admission
                        </button>
                        <p class="text-center text-xs text-slate-400 mt-4">
                            En soumettant ce formulaire, vous acceptez d'être contacté par notre équipe pédagogique. Aucun engagement.
                        </p>
                    </div>

                </form>
            </div>

        </div>
    </div>

@endsection