@extends('layouts.app')

@section('titre', 'Fiche '.$meuble->numero)

@section('contenu')
    @php
        $enRetard = $meuble->estEnRetard();
        $restants = $meuble->articles->where('retire', false);
    @endphp

    <a href="{{ route('meubles.index') }}" class="mb-3 inline-block text-sm text-slate-500 hover:underline">
        &larr; Retour à la liste
    </a>

    <div class="carte {{ $enRetard ? 'border-amber-300 bg-amber-50' : '' }}">
        <div class="flex flex-wrap items-start justify-between gap-3">
            <div>
                <h1 class="text-xl font-semibold">{{ $meuble->client_prenom }} {{ $meuble->client_nom }}</h1>
                <p class="text-sm text-slate-600">{{ $meuble->numero }}</p>
                <p class="mt-2">
                    <a href="tel:{{ $meuble->telephone }}" class="font-medium text-marque-700 hover:underline">
                        {{ $meuble->telephone }}
                    </a>
                </p>
                @if ($meuble->reference_vente)
                    <p class="text-sm text-slate-600">Vente {{ $meuble->reference_vente }}</p>
                @endif
            </div>
            <div class="text-right">
                <p class="text-sm text-slate-500">Date limite de retrait</p>
                <p class="text-lg font-semibold {{ $enRetard ? 'text-amber-800' : '' }}">
                    {{ $meuble->echeance_at->translatedFormat('l j F Y') }}
                </p>
                <p class="text-sm">à {{ $meuble->echeance_at->format('H\hi') }}</p>
                <p class="mt-1 text-sm text-slate-500">
                    {{ \App\Models\MeubleAEmporter::STATUTS[$meuble->statut] }}
                </p>
            </div>
        </div>
    </div>

    @if ($meuble->prolongations->isNotEmpty())
        <div class="carte mt-4">
            <h2 class="mb-2 font-semibold">Prolongations</h2>
            <ul class="space-y-1 text-sm text-slate-600">
                @foreach ($meuble->prolongations as $prolongation)
                    <li>
                        Reportée au {{ $prolongation->nouvelle_echeance_at->translatedFormat('j F Y') }}
                        par {{ $prolongation->manager->name }}
                        le {{ $prolongation->created_at->translatedFormat('j F Y') }}.
                        @if ($prolongation->motif) {{ $prolongation->motif }} @endif
                    </li>
                @endforeach
            </ul>
        </div>
    @endif

    @can('prolonger', $meuble)
        <div class="carte mt-4">
            <h2 class="mb-1 font-semibold">Prolonger la date limite</h2>
            <p class="mb-3 text-sm text-slate-500">
                L'échéance d'origine reste dans l'historique, et le rappel est recalculé :
                celui qui était calé sur l'ancienne date est annulé au lieu de partir.
            </p>
            <form method="POST" action="{{ route('meubles.prolonger', $meuble) }}"
                  class="flex flex-wrap items-end gap-3">
                @csrf
                <label><span class="etiquette">Nouvelle date limite</span>
                    <input name="nouvelle_echeance" type="datetime-local" required
                           value="{{ $meuble->echeance_at->addWeek()->format('Y-m-d\TH:i') }}"
                           class="champ"></label>
                <label class="min-w-40 flex-1"><span class="etiquette">Motif</span>
                    <input name="motif" class="champ"></label>
                <button type="submit" class="bouton-secondaire">Prolonger</button>
            </form>
        </div>
    @endcan
    <form method="POST" action="{{ route('meubles.retrait', $meuble) }}" class="carte mt-4 space-y-4">
        @csrf

        <h2 class="font-semibold">Articles</h2>

        @foreach ($meuble->articles as $article)
            <div class="flex items-start gap-3 border-b border-slate-100 pb-3 last:border-0">
                @if ($article->retire)
                    <span class="mt-1 text-marque-600" aria-hidden="true">&check;</span>
                @else
                    <input type="checkbox" name="articles[]" value="{{ $article->id }}"
                           id="article-{{ $article->id }}"
                           class="mt-1 size-5 rounded border-slate-300 text-marque-600 focus:ring-marque-600">
                @endif

                <label for="article-{{ $article->id }}" class="flex-1 {{ $article->retire ? 'text-slate-400' : '' }}">
                    <span class="font-medium">{{ $article->description }}</span>
                    <span class="text-sm text-slate-500">&times; {{ $article->quantite }}</span>
                    @if ($article->emplacement)
                        <span class="block text-sm text-slate-500">{{ $article->emplacement }}</span>
                    @endif
                    @if ($article->retire)
                        <span class="block text-sm">Remis le {{ $article->retire_at->translatedFormat('j F Y') }}</span>
                    @endif

                    @if ($article->photos->isNotEmpty())
                        <span class="mt-2 flex flex-wrap gap-2">
                            @foreach ($article->photos as $photo)
                                <img src="{{ route('photos.montrer', $photo) }}" alt=""
                                     class="size-20 rounded-lg object-cover">
                            @endforeach
                        </span>
                    @endif
                </label>
            </div>
        @endforeach

        @if ($restants->isNotEmpty())
            <div class="sm:max-w-xs">
                <label for="operateur_prenom" class="etiquette">Votre prénom (facultatif)</label>
                <input id="operateur_prenom" name="operateur_prenom" value="{{ $meuble->operateur_prenom }}"
                       class="champ" placeholder="Qui enregistre ce retrait">
            </div>

            <button type="submit" class="bouton-principal w-full sm:w-auto">
                Enregistrer le retrait des articles cochés
            </button>
        @else
            <p class="text-sm text-slate-500">Tous les articles ont été remis au client.</p>
        @endif
    </form>
@endsection