{{--
    Composant x-flash-messages — CENTRALISE tous les messages flash de session.
    Inclus une seule fois dans layouts/app.blade.php (apres le bandeau de concurrence).

    USAGE dans les controleurs :
        return redirect()->back()->with('success', 'Enregistrement réussi.');
        return redirect()->back()->with('error',   'Une erreur est survenue.');
        return redirect()->back()->with('warning', 'Attention !');
        return redirect()->back()->with('info',    'Information.');

    Comportement :
        - success / info  : disparaissent automatiquement apres 5 secondes.
        - error / warning : persistent jusqu'a fermeture manuelle (plus critique).
        - Toutes : animees a l'entree, fermeture via bouton X ou apres timeout.
--}}

{{-- --- Succes (vert) ------------------------------------------------------- --}}
@if(session('success'))
    <div
        x-data="{ show: true }"
        x-show="show"
        x-transition:enter="transition ease-out duration-300"
        x-transition:enter-start="opacity-0 -translate-y-2"
        x-transition:enter-end="opacity-100 translate-y-0"
        x-transition:leave="transition ease-in duration-200"
        x-transition:leave-start="opacity-100"
        x-transition:leave-end="opacity-0"
        x-init="setTimeout(() => show = false, 5000)"
        class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 pt-4"
    >
        <div class="flex items-center justify-between p-4 bg-green-50 border border-green-200 text-green-800 rounded-lg shadow-sm">
            <div class="flex items-center gap-3">
                <span class="text-xl">?</span>
                <span class="text-sm font-medium">{{ session('success') }}</span>
            </div>
            <button @click="show = false" class="text-green-500 hover:text-green-700 ml-4 transition" aria-label="Fermer">?</button>
        </div>
    </div>
@endif

{{-- --- Erreur (rouge) — ne disparait pas automatiquement ------------------- --}}
@if(session('error'))
    <div
        x-data="{ show: true }"
        x-show="show"
        x-transition:enter="transition ease-out duration-300"
        x-transition:enter-start="opacity-0 -translate-y-2"
        x-transition:enter-end="opacity-100 translate-y-0"
        x-transition:leave="transition ease-in duration-200"
        x-transition:leave-start="opacity-100"
        x-transition:leave-end="opacity-0"
        class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 pt-4"
    >
        <div class="flex items-center justify-between p-4 bg-red-50 border border-red-200 text-red-800 rounded-lg shadow-sm">
            <div class="flex items-center gap-3">
                <span class="text-xl">??</span>
                <span class="text-sm font-medium">{{ session('error') }}</span>
            </div>
            <button @click="show = false" class="text-red-400 hover:text-red-600 ml-4 transition" aria-label="Fermer">?</button>
        </div>
    </div>
@endif

{{-- --- Avertissement (orange) — ne disparait pas automatiquement ------------ --}}
@if(session('warning'))
    <div
        x-data="{ show: true }"
        x-show="show"
        x-transition:enter="transition ease-out duration-300"
        x-transition:enter-start="opacity-0 -translate-y-2"
        x-transition:enter-end="opacity-100 translate-y-0"
        x-transition:leave="transition ease-in duration-200"
        x-transition:leave-start="opacity-100"
        x-transition:leave-end="opacity-0"
        class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 pt-4"
    >
        <div class="flex items-center justify-between p-4 bg-amber-50 border border-amber-200 text-amber-800 rounded-lg shadow-sm">
            <div class="flex items-center gap-3">
                <span class="text-xl">??</span>
                <span class="text-sm font-medium">{{ session('warning') }}</span>
            </div>
            <button @click="show = false" class="text-amber-400 hover:text-amber-600 ml-4 transition" aria-label="Fermer">?</button>
        </div>
    </div>
@endif

{{-- --- Information (bleu) --------------------------------------------------- --}}
@if(session('info'))
    <div
        x-data="{ show: true }"
        x-show="show"
        x-transition:enter="transition ease-out duration-300"
        x-transition:enter-start="opacity-0 -translate-y-2"
        x-transition:enter-end="opacity-100 translate-y-0"
        x-transition:leave="transition ease-in duration-200"
        x-transition:leave-start="opacity-100"
        x-transition:leave-end="opacity-0"
        x-init="setTimeout(() => show = false, 5000)"
        class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 pt-4"
    >
        <div class="flex items-center justify-between p-4 bg-blue-50 border border-blue-200 text-blue-800 rounded-lg shadow-sm">
            <div class="flex items-center gap-3">
                <span class="text-xl">??</span>
                <span class="text-sm font-medium">{{ session('info') }}</span>
            </div>
            <button @click="show = false" class="text-blue-400 hover:text-blue-600 ml-4 transition" aria-label="Fermer">?</button>
        </div>
    </div>
@endif