@extends('layouts.app')

@section('titre', 'Nouvelle livraison')

@section('contenu')
    <h1 class="mb-1 text-xl font-semibold">Nouvelle livraison</h1>
    <p class="mb-4 text-sm text-slate-500">
        Le forfait couvre la livraison entière à une même adresse, quel que soit le nombre
        de meubles ou de passages du camion. Le règlement se fait maintenant, à l'achat.
    </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 livraison 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('livraisons.enregistrer') }}" enctype="multipart/form-data"
          class="space-y-4">
        @csrf

        <div class="carte space-y-4">
            <h2 class="font-semibold">Client</h2>
            <div class="grid gap-4 sm:grid-cols-2">
                <label><span class="etiquette">Prénom</span>
                    <input name="client_prenom" value="{{ old('client_prenom') }}" required class="champ"></label>
                <label><span class="etiquette">Nom</span>
                    <input name="client_nom" value="{{ old('client_nom') }}" required class="champ"></label>
                <label><span class="etiquette">Téléphone</span>
                    <input name="telephone" type="tel" inputmode="tel" value="{{ old('telephone') }}"
                           required class="champ"></label>
                <label><span class="etiquette">Adresse e-mail (facultative)</span>
                    <input name="email" type="email" inputmode="email" value="{{ old('email') }}" class="champ"></label>
            </div>
        </div>

        <div class="carte space-y-4">
            <h2 class="font-semibold">Adresse de livraison</h2>
            <div class="grid gap-4 sm:grid-cols-2">
                <label class="sm:col-span-2"><span class="etiquette">Adresse</span>
                    <input name="adresse" value="{{ old('adresse') }}" required class="champ"></label>
                <label class="sm:col-span-2"><span class="etiquette">Complément (bâtiment, porte, code)</span>
                    <input name="complement" value="{{ old('complement') }}" class="champ"></label>
                <label><span class="etiquette">Code postal</span>
                    <input name="code_postal" inputmode="numeric" value="{{ old('code_postal') }}"
                           required class="champ"></label>
                <label><span class="etiquette">Commune</span>
                    <input name="commune" value="{{ old('commune') }}" required list="communes-tarifees"
                           autocomplete="address-level2" class="champ">
                    <span class="mt-1 block text-sm text-slate-500">
                        C'est elle qui donne le tarif de livraison.
                    </span>
                </label>
                {{-- Les communes tarifées sont proposées, sans interdire d'en taper
                     une autre : une commune inconnue part hors grille. --}}
                <datalist id="communes-tarifees">
                    @foreach ($communes as $nom)<option value="{{ $nom }}"></option>@endforeach
                </datalist>
            </div>
        </div>

        <div class="carte space-y-4">
            <h2 class="font-semibold">Prestation et tarif</h2>

            <fieldset>
                <legend class="etiquette">Prestation</legend>
                <label class="mb-2 flex items-start gap-2">
                    <input type="radio" name="prestation" value="exterieur" required
                           @checked(old('prestation') === 'exterieur')
                           class="mt-1 size-4 border-slate-300 text-marque-600 focus:ring-marque-600">
                    <span>Au pied du logement ou à l'extérieur</span>
                </label>
                <label class="flex items-start gap-2">
                    <input type="radio" name="prestation" value="dans_la_piece"
                           @checked(old('prestation') === 'dans_la_piece')
                           class="mt-1 size-4 border-slate-300 text-marque-600 focus:ring-marque-600">
                    <span>
                        Dans la pièce
                        <span class="block text-sm text-slate-500">
                            Renseignez alors les contraintes d'accès plus bas : étage, ascenseur,
                            escaliers, passages étroits.
                        </span>
                    </span>
                </label>
            </fieldset>

            <label class="sm:max-w-xs"><span class="etiquette">Armoires ou penderies à remonter</span>
                <input name="nb_armoires_remontage" type="number" min="0" max="99"
                       value="{{ old('nb_armoires_remontage', 0) }}" class="champ">
                <span class="mt-1 block text-sm text-slate-500">
                    À renseigner uniquement si le client le demande. Jamais inclus d'office.
                </span>
            </label>

            <label class="flex items-start gap-2 text-sm text-slate-700">
                <input type="checkbox" name="hors_grille" value="1" @checked(old('hors_grille'))
                       class="mt-0.5 size-4 rounded border-slate-300 text-marque-600 focus:ring-marque-600">
                Adresse hors grille. Le dossier partira sans montant et attendra qu'un manager fixe le prix.
            </label>

            <p id="apercu-tarif"
               data-grille="{{ json_encode($grille) }}"
               data-cout-remontage="{{ $coutRemontage }}"
               class="rounded-lg bg-marque-50 px-4 py-3 text-base font-medium text-marque-900"></p>
        </div>

        <div class="carte space-y-4">
            <h2 class="font-semibold">Accès au logement</h2>

            {{-- Retour de Romain : alléger la saisie en magasin. Le type de
                 logement et l'étage suffisent dans la plupart des cas. --}}
            <div class="grid gap-4 sm:grid-cols-2">
                <label><span class="etiquette">Type de logement</span>
                    <select name="logement_type" class="champ">
                        <option value="">Non précisé</option>
                        <option value="maison" @selected(old('logement_type') === 'maison')>Maison</option>
                        <option value="appartement" @selected(old('logement_type') === 'appartement')>Appartement</option>
                    </select>
                </label>
                <label><span class="etiquette">Étage</span>
                    <input name="etage" value="{{ old('etage') }}" class="champ"></label>
            </div>

            @php
                $accesPrecise = old('escaliers') || old('stationnement')
                    || old('ascenseur_present') || old('ascenseur_utilisable_meuble')
                    || old('passages_etroits') || old('acces_observations');
            @endphp

            <details class="rounded-lg border border-slate-200 p-3" @if ($accesPrecise) open @endif>
                <summary class="cursor-pointer text-sm font-medium text-marque-700">
                    Préciser l'accès : ascenseur, escaliers, stationnement…
                </summary>

                <div class="mt-3 space-y-4">
                    <div class="space-y-2">
                        <label class="flex items-center gap-2 text-sm text-slate-700">
                            <input type="checkbox" name="ascenseur_present" value="1" @checked(old('ascenseur_present'))
                                   class="size-4 rounded border-slate-300 text-marque-600 focus:ring-marque-600">
                            Il y a un ascenseur
                        </label>
                        <label class="flex items-start gap-2 text-sm text-slate-700">
                            <input type="checkbox" name="ascenseur_utilisable_meuble" value="1"
                                   @checked(old('ascenseur_utilisable_meuble'))
                                   class="mt-0.5 size-4 rounded border-slate-300 text-marque-600 focus:ring-marque-600">
                            Le meuble passe dans l'ascenseur
                        </label>
                        <label class="flex items-center gap-2 text-sm text-slate-700">
                            <input type="checkbox" name="passages_etroits" value="1" @checked(old('passages_etroits'))
                                   class="size-4 rounded border-slate-300 text-marque-600 focus:ring-marque-600">
                            Passages étroits, couloir ou porte difficile
                        </label>
                    </div>

                    <div class="grid gap-4 sm:grid-cols-2">
                        <label class="sm:col-span-2"><span class="etiquette">Escaliers (nombre de marches, virages)</span>
                            <input name="escaliers" value="{{ old('escaliers') }}" class="champ"></label>
                        <label class="sm:col-span-2"><span class="etiquette">Stationnement</span>
                            <select name="stationnement" class="champ">
                                <option value="">Non précisé</option>
                                @foreach (\App\Models\Livraison::STATIONNEMENTS as $valeur => $libelle)
                                    <option value="{{ $valeur }}" @selected(old('stationnement') === $valeur)>{{ $libelle }}</option>
                                @endforeach
                            </select>
                        </label>
                    </div>

                    <label class="block"><span class="etiquette">Autres observations sur l'accès</span>
                        <textarea name="acces_observations" rows="2" class="champ">{{ old('acces_observations') }}</textarea>
                    </label>
                </div>
            </details>
        </div>

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

            <div class="grid gap-4 sm:grid-cols-2">
                <label><span class="etiquette">Nombre de pièces ou de colis</span>
                    <input name="nb_colis" type="number" min="0" max="999" value="{{ old('nb_colis') }}"
                           class="champ"></label>
                <label class="flex items-end gap-2 pb-2 text-sm text-slate-700">
                    <input type="checkbox" name="fragile" value="1" @checked(old('fragile'))
                           class="size-4 rounded border-slate-300 text-marque-600 focus:ring-marque-600">
                    Chargement fragile
                </label>
                <label class="sm:col-span-2"><span class="etiquette">Observations</span>
                    <textarea name="observations" rows="2" class="champ">{{ old('observations') }}</textarea></label>
            </div>
        </div>

        <div class="carte space-y-4">
            <div class="flex items-center justify-between">
                <h2 class="font-semibold">Meubles livrés</h2>
                <button type="button" class="bouton-secondaire" data-ajouter="objets">Ajouter un meuble</button>
            </div>
            <div id="objets" class="space-y-4" data-repeteur="modele-objet" data-intitule="Meuble"></div>
        </div>

        <div class="carte space-y-4">
            <h2 class="font-semibold">Date de livraison</h2>
            <p class="text-sm text-slate-600">
                Convenez la date avec le client, au besoin après un mot à la logistique. Elle vaut
                rendez-vous : le client reçoit son récapitulatif aussitôt, et la tournée se
                composera ensuite sur ce jour-là.
            </p>

            <label class="sm:max-w-xs"><span class="etiquette">Date de livraison</span>
                <input name="date_rdv" type="date" value="{{ old('date_rdv') }}"
                       min="{{ now()->toDateString() }}" class="champ">
                <span class="mt-1 block text-sm text-slate-500">
                    Laissez vide si la date n'est pas arrêtée : un manager s'en chargera.
                </span>
            </label>

            <p class="text-sm text-slate-500">
                Livraison entre {{ \App\Models\Reglage::valeur('livraison_plage_debut', '13:15') }}
                et {{ \App\Models\Reglage::valeur('livraison_plage_fin', '16:15') }}.
            </p>
        </div>

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

    <template id="modele-objet">
        <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-3"><span class="etiquette">Description</span>
                    <input name="objets[__I__][description]" required class="champ"></label>
                <label><span class="etiquette">Quantité</span>
                    <input name="objets[__I__][quantite]" type="number" min="1" value="1" required class="champ"></label>
                <label class="sm:col-span-4"><span class="etiquette">Photos</span>
                    <input name="objets[__I__][photos][]" type="file" accept="image/*" capture="environment"
                           multiple class="champ"></label>
            </div>

            {{-- Le remontage facturé se compte dans « Prestation et tarif » :
                 cette case ne sert qu'à l'équipe, et ne change pas le prix. --}}
            <details class="mt-3">
                <summary class="cursor-pointer text-sm font-medium text-marque-700">
                    Préciser : fragile, remontage
                </summary>
                <div class="mt-3 grid gap-3 sm:grid-cols-4">
                    <div class="flex flex-col justify-end gap-2 pb-2 text-sm text-slate-700">
                        <label class="flex items-center gap-2">
                            <input type="checkbox" name="objets[__I__][fragile]" value="1"
                                   class="size-4 rounded border-slate-300 text-marque-600 focus:ring-marque-600">
                            Fragile
                        </label>
                        <label class="flex items-center gap-2">
                            <input type="checkbox" name="objets[__I__][remontage_demande]" value="1"
                                   class="size-4 rounded border-slate-300 text-marque-600 focus:ring-marque-600">
                            Remontage demandé
                        </label>
                    </div>
                </div>
            </details>
        </div>
    </template>
@endsection