@extends('layouts.app')

@section('titre', 'Nouvelle fiche de retrait')

@section('contenu')
    <h1 class="mb-1 text-xl font-semibold">Nouvelle fiche de retrait</h1>
    <p class="mb-4 text-sm text-slate-500">
        Pour un achat aujourd'hui, la date limite tomberait le
        {{ $echeancePrevue->translatedFormat('l j F Y') }} à {{ $echeancePrevue->format('H\hi') }}.
        Elle est recalculée d'après la date d'achat saisie.
    </p>

    @if ($errors->any())
        <div class="mb-4 rounded-lg border border-red-200 bg-red-50 px-4 py-3 text-sm text-red-800">
            <p class="font-medium">La fiche n'a pas été enregistrée.</p>
            <ul class="mt-1 list-inside list-disc">
                @foreach ($errors->all() as $erreur)<li>{{ $erreur }}</li>@endforeach
            </ul>
        </div>
    @endif

    <form method="POST" action="{{ route('meubles.enregistrer') }}" enctype="multipart/form-data"
          class="space-y-4" id="fiche">
        @csrf

        <div class="carte space-y-4">
            <h2 class="font-semibold">Client</h2>

            <div class="grid gap-4 sm:grid-cols-2">
                <div>
                    <label for="client_prenom" class="etiquette">Prénom</label>
                    <input id="client_prenom" name="client_prenom" value="{{ old('client_prenom') }}"
                           required autocomplete="off" class="champ">
                </div>
                <div>
                    <label for="client_nom" class="etiquette">Nom</label>
                    <input id="client_nom" name="client_nom" value="{{ old('client_nom') }}"
                           required autocomplete="off" class="champ">
                </div>
                <div>
                    <label for="telephone" class="etiquette">Téléphone</label>
                    <input id="telephone" name="telephone" type="tel" inputmode="tel"
                           value="{{ old('telephone') }}" required class="champ">
                </div>
                <div>
                    <label for="email" class="etiquette">Adresse e-mail (facultative)</label>
                    <input id="email" name="email" type="email" inputmode="email"
                           value="{{ old('email') }}" class="champ">
                </div>
            </div>

            <label class="flex items-start gap-2 text-sm text-slate-700">
                <input type="checkbox" name="rappel_par_email" value="1" @checked(old('rappel_par_email', true))
                       class="mt-0.5 size-4 rounded border-slate-300 text-marque-600 focus:ring-marque-600">
                Envoyer le rappel par e-mail la veille de la date limite.
                Décochez si le client n'a pas d'adresse : le suivi restera manuel.
            </label>
        </div>

        <div class="carte space-y-4">
            <h2 class="font-semibold">Vente</h2>

            <div class="grid gap-4 sm:grid-cols-2">
                <div>
                    <label for="reference_vente" class="etiquette">Référence de vente</label>
                    <input id="reference_vente" name="reference_vente" value="{{ old('reference_vente') }}"
                           class="champ">
                </div>
                <div>
                    <label for="date_achat" class="etiquette">Date d'achat</label>
                    <input id="date_achat" name="date_achat" type="date"
                           value="{{ old('date_achat', now()->toDateString()) }}" required class="champ">
                </div>
            </div>
        </div>

        <div class="carte space-y-4">
            <div class="flex items-center justify-between">
                <h2 class="font-semibold">Articles</h2>
                <button type="button" class="bouton-secondaire" data-ajouter="articles">Ajouter un article</button>
            </div>

            <div id="articles" class="space-y-4" data-repeteur="modele-article" data-intitule="Article"></div>
        </div>

        <button type="submit" class="bouton-principal w-full sm:w-auto">Enregistrer la fiche</button>
    </form>

    <template id="modele-article">
        <div class="rounded-lg border border-slate-200 p-3" data-ligne>
            <div class="mb-2 flex items-center justify-between">
                <p class="text-sm font-medium text-slate-600" data-numero></p>
                <button type="button" class="text-sm text-red-700 hover:underline" data-retirer>Retirer</button>
            </div>
            <div class="grid gap-3 sm:grid-cols-4">
                <label class="sm:col-span-2">
                    <span class="etiquette">Description</span>
                    <input name="articles[__I__][description]" required class="champ">
                </label>
                <label>
                    <span class="etiquette">Quantité</span>
                    <input name="articles[__I__][quantite]" type="number" min="1" value="1" required class="champ">
                </label>
                <label>
                    <span class="etiquette">Emplacement</span>
                    <input name="articles[__I__][emplacement]" class="champ">
                </label>
                <label class="sm:col-span-4">
                    <span class="etiquette">Photos</span>
                    <input name="articles[__I__][photos][]" type="file" accept="image/*" capture="environment"
                           multiple class="champ">
                </label>
            </div>
        </div>
    </template>
@endsection