@extends('layouts.dashboard')

@section('title', 'Dossier de candidature - Admin')
@section('page-title', 'Dossier de candidature')
@section('page-subtitle', 'Soumis le ' . $admission->created_at->format('d/m/Y à H:i'))

@push('head')
    <script defer src="https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js"></script>
@endpush

@section('content')
    {{-- Back Button --}}
    <a href="{{ route('admin.admissions.index') }}" class="inline-flex items-center gap-2 text-gray-500 hover:text-gray-900 mb-8 transition-colors text-sm font-bold group">
        <i class="fa-solid fa-arrow-left group-hover:-translate-x-1 transition-transform"></i>
        Retour à la liste
    </a>

    {{-- Status Badge --}}
    <div class="mb-8">
        <span class="px-5 py-2.5 text-sm font-bold rounded-xl uppercase
                     {{ $admission->status === 'pending'  ? 'bg-yellow-50 text-yellow-700'  : '' }}
                     {{ $admission->status === 'approved' ? 'bg-green-50 text-green-700'   : '' }}
                     {{ $admission->status === 'rejected' ? 'bg-red-50 text-red-700'       : '' }}">
            {{ $admission->status === 'pending' ? '⏳ En attente' : ($admission->status === 'approved' ? '✅ Approuvée' : '❌ Refusée') }}
        </span>
    </div>

    <div class="grid grid-cols-1 lg:grid-cols-3 gap-8">
        {{-- Infos candidat --}}
        <div class="lg:col-span-2 space-y-6">
            <div class="bg-white border border-gray-100 rounded-2xl p-6 shadow-sm">
                <h2 class="font-bold text-gray-400 uppercase text-xs tracking-widest mb-6">Informations personnelles</h2>
                <div class="grid grid-cols-2 gap-6">
                    <div>
                        <p class="text-xs text-gray-400 font-bold uppercase tracking-wider mb-1">Prénom</p>
                        <p class="text-gray-900 font-bold text-lg">{{ $admission->first_name }}</p>
                    </div>
                    <div>
                        <p class="text-xs text-gray-400 font-bold uppercase tracking-wider mb-1">Nom</p>
                        <p class="text-gray-900 font-bold text-lg">{{ $admission->last_name }}</p>
                    </div>
                    <div>
                        <p class="text-xs text-gray-400 font-bold uppercase tracking-wider mb-1">E-mail</p>
                        <p class="text-blue-600 font-medium">{{ $admission->email }}</p>
                    </div>
                    <div>
                        <p class="text-xs text-gray-400 font-bold uppercase tracking-wider mb-1">Téléphone</p>
                        <p class="text-gray-900 font-medium">{{ $admission->phone }}</p>
                    </div>
                </div>
            </div>

            <div class="bg-white border border-gray-100 rounded-2xl p-6 shadow-sm">
                <h2 class="font-bold text-gray-400 uppercase text-xs tracking-widest mb-6">Formation souhaitée</h2>
                <div class="space-y-4">
                    <div>
                        <p class="text-xs text-gray-400 font-bold uppercase tracking-wider mb-1">Type d'admission</p>
                        <span class="px-4 py-1.5 text-sm font-bold rounded-xl uppercase
                                     {{ $admission->admission_type === 'faculte' ? 'bg-blue-50 text-blue-700' : 'bg-orange-50 text-orange-700' }}">
                            {{ $admission->admission_type === 'faculte' ? '🎓 Faculté / Diplôme' : '📜 Formation continue' }}
                        </span>
                    </div>
                    @if($admission->faculty)
                    <div>
                        <p class="text-xs text-gray-400 font-bold uppercase tracking-wider mb-1">Faculté</p>
                        <p class="text-gray-900 font-bold">{{ $admission->faculty->name }}</p>
                    </div>
                    @endif
                    @if($admission->department)
                    <div>
                        <p class="text-xs text-gray-400 font-bold uppercase tracking-wider mb-1">Département</p>
                        <p class="text-gray-900 font-bold">{{ $admission->department->name }}</p>
                    </div>
                    @endif
                    @if($admission->course)
                    <div>
                        <p class="text-xs text-gray-400 font-bold uppercase tracking-wider mb-1">Formation choisie</p>
                        <p class="text-gray-900 font-bold">{{ $admission->course->title }}</p>
                    </div>
                    @endif
                </div>
            </div>

            @if($admission->notes)
            <div class="bg-white border border-gray-100 rounded-2xl p-6 shadow-sm">
                <h2 class="font-bold text-gray-400 uppercase text-xs tracking-widest mb-4">Message du candidat</h2>
                <p class="text-gray-700 leading-relaxed">{{ $admission->notes }}</p>
            </div>
            @endif
        </div>

        {{-- Actions --}}
        @if($admission->status === 'pending')
        <div class="space-y-4">
            <div class="bg-white border border-gray-100 rounded-2xl p-6 shadow-sm">
                <h2 class="font-bold text-gray-400 uppercase text-xs tracking-widest mb-6">Actions</h2>

                {{-- Approuver --}}
                <form method="POST" action="{{ route('admin.admissions.approve', $admission) }}" class="mb-4">
                    @csrf
                    <button type="submit"
                        onclick="return confirm('Approuver cette demande ? Un compte utilisateur sera créé et un e-mail envoyé.')"
                        class="w-full py-4 bg-green-600 hover:bg-green-700 text-white font-bold rounded-xl transition-all shadow-lg shadow-green-600/20 flex items-center justify-center gap-2">
                        <i class="fa-solid fa-check"></i>
                        Approuver la candidature
                    </button>
                </form>

                {{-- Refuser --}}
                <div x-data="{ open: false }">
                    <button @click="open = !open"
                        class="w-full py-4 bg-red-50 hover:bg-red-100 text-red-700 font-bold rounded-xl border border-red-100 transition-all flex items-center justify-center gap-2">
                        <i class="fa-solid fa-xmark"></i>
                        Refuser la candidature
                    </button>
                    <div x-show="open" x-transition x-cloak class="mt-4">
                        <form method="POST" action="{{ route('admin.admissions.reject', $admission) }}">
                            @csrf
                            <textarea name="notes" rows="3"
                                class="w-full px-4 py-3 bg-gray-50 border border-gray-200 rounded-xl text-gray-700 text-sm resize-none focus:outline-none focus:ring-2 focus:ring-red-500 mb-3"
                                placeholder="Motif du refus (optionnel)..."></textarea>
                            <button type="submit" class="w-full py-3 bg-red-600 hover:bg-red-700 text-white font-bold rounded-xl transition-all">
                                Confirmer le refus
                            </button>
                        </form>
                    </div>
                </div>
            </div>

            <div class="bg-blue-50 border border-blue-100 rounded-2xl p-6 text-sm text-blue-700">
                <p class="font-bold mb-2">📧 En cas d'approbation :</p>
                <ul class="space-y-1 text-xs text-blue-700/80">
                    <li>• Un compte étudiant sera créé automatiquement</li>
                    <li>• Un mot de passe aléatoire sera généré</li>
                    <li>• Un e-mail de bienvenue avec les identifiants sera envoyé</li>
                    <li>• L'étudiant sera inscrit à sa formation choisie</li>
                </ul>
            </div>
        </div>
        @endif
    </div>
@endsection