@extends('layouts.app')

@section('titre', 'Alertes')

@section('contenu')
    <div class="mb-4 flex flex-wrap items-start justify-between gap-3">
        <div>
            <h1 class="text-xl font-semibold">Alertes</h1>
            <p class="text-sm text-slate-500">
                {{ $nonLues === 0 ? 'Tout est lu.' : $nonLues.' alerte(s) non lue(s).' }}
                Chacun les lit pour son propre compte : marquer une alerte lue ne l'efface
                pas chez vos collègues.
            </p>
        </div>

        <div class="flex flex-wrap items-center gap-2">
            {{-- Le son se règle par appareil : un téléphone en tournée et un
                 poste au bureau n'ont pas les mêmes besoins. --}}
            <button type="button" data-son-alertes aria-pressed="true"
                    class="bouton-secondaire">Son activé</button>

            @if ($nonLues > 0)
                <form method="POST" action="{{ route('alertes.tout-lire') }}">
                    @csrf
                    <button type="submit" class="bouton-secondaire">Tout marquer comme lu</button>
                </form>
            @endif
        </div>
    </div>

    @forelse ($alertes as $alerte)
        @php $lue = $alerte->lecteurs->contains($utilisateur->id); @endphp

        <div @class([
            'carte mb-2 flex flex-wrap items-start justify-between gap-3',
            'border-l-4' => ! $lue,
            'border-l-red-500' => ! $lue && $alerte->niveau === 'urgent',
            'border-l-amber-400' => ! $lue && $alerte->niveau === 'attention',
            'border-l-marque-500' => ! $lue && $alerte->niveau === 'information',
            'opacity-60' => $lue,
        ])>
            <div class="min-w-0">
                <p class="font-medium">{{ $alerte->titre }}</p>
                @if ($alerte->corps)
                    <p class="text-sm break-words text-slate-600">{{ $alerte->corps }}</p>
                @endif
                <p class="mt-1 text-sm text-slate-500">
                    {{ $alerte->typeLisible() }}
                    &middot; {{ $alerte->created_at->translatedFormat('l j F à H:i') }}
                    @if ($alerte->pole) &middot; {{ $alerte->pole->nom }} @endif
                    @if ($lue) &middot; lue @endif
                </p>
            </div>

            <form method="POST" action="{{ route('alertes.ouvrir', $alerte) }}" class="shrink-0">
                @csrf
                <button type="submit" class="bouton-secondaire">
                    {{ $alerte->lien ? 'Ouvrir le dossier' : 'Marquer comme lue' }}
                </button>
            </form>
        </div>
    @empty
        <p class="carte text-sm text-slate-500">
            Aucune alerte pour le moment. Elles apparaissent ici dès qu'un bon est signé,
            qu'un retrait dépasse sa date limite, qu'une livraison attend son prix ou qu'un
            message n'a pas pu partir.
        </p>
    @endforelse

    <div class="mt-4">{{ $alertes->links() }}</div>
@endsection