@extends('layouts.app')

@section('titre', 'Meubles à emporter')

@section('contenu')
    <div class="mb-4 flex flex-wrap items-center justify-between gap-3">
        <h1 class="text-xl font-semibold">Meubles à emporter</h1>
        <a href="{{ route('meubles.creer') }}" class="bouton-principal">Nouvelle fiche</a>
    </div>

    <form method="GET" class="carte mb-4 flex flex-wrap gap-3">
        <div class="min-w-48 flex-1">
            <label for="recherche" class="etiquette">Rechercher</label>
            <input id="recherche" name="recherche" type="search" value="{{ request('recherche') }}"
                   placeholder="Numéro, nom, téléphone, référence de vente" class="champ">
        </div>

        @if ($estManager)
            <div>
                <label for="statut" class="etiquette">État</label>
                <select id="statut" name="statut" class="champ">
                    <option value="">Tous</option>
                    @foreach (\App\Models\MeubleAEmporter::STATUTS as $valeur => $libelle)
                        <option value="{{ $valeur }}" @selected(request('statut') === $valeur)>{{ $libelle }}</option>
                    @endforeach
                </select>
            </div>
        @endif

        <div class="flex items-end">
            <button type="submit" class="bouton-secondaire">Filtrer</button>
        </div>
    </form>

    @forelse ($meubles as $meuble)
        @php
            $enRetard = $meuble->estEnRetard();
            $restants = $meuble->articles->where('retire', false);
        @endphp
        <a href="{{ route('meubles.afficher', $meuble) }}"
           class="carte mb-2 block {{ $enRetard ? 'border-amber-300 bg-amber-50' : '' }}">
            <div class="flex flex-wrap items-start justify-between gap-2">
                <div>
                    <p class="font-medium">
                        {{ $meuble->client_prenom }} {{ $meuble->client_nom }}
                        <span class="ml-1 text-sm font-normal text-slate-500">{{ $meuble->numero }}</span>
                    </p>
                    <p class="text-sm text-slate-600">{{ $meuble->telephone }}</p>
                    <p class="mt-1 text-sm text-slate-600">
                        {{ $restants->count() }} article(s) à remettre sur {{ $meuble->articles->count() }}
                    </p>
                </div>
                <div class="text-right text-sm">
                    <p class="{{ $enRetard ? 'font-semibold text-amber-800' : 'text-slate-600' }}">
                        {{ $enRetard ? 'Dépassé le' : "Jusqu'au" }}
                        {{ $meuble->echeance_at->translatedFormat('D j M') }}
                        à {{ $meuble->echeance_at->format('H\hi') }}
                    </p>
                    <p class="text-slate-500">{{ \App\Models\MeubleAEmporter::STATUTS[$meuble->statut] }}</p>
                </div>
            </div>
        </a>
    @empty
        <p class="text-sm text-slate-500">Aucun meuble en attente de retrait.</p>
    @endforelse

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