@extends('layouts.app')

@section('titre', 'Proposer un don')

@section('contenu')
    <div class="mx-auto max-w-2xl">
        @if ($conditionsManquantes)
            <div class="mb-4 rounded-lg border border-amber-200 bg-amber-50 px-4 py-3 text-sm text-amber-900">
                Les conditions de collecte ne sont pas renseignées : le formulaire reste fermé au public.
                Vous le voyez parce que vous êtes manager.
            </div>
        @elseif ($accompagnee)
            <div class="mb-4 rounded-lg border border-marque-200 bg-marque-50 px-4 py-3 text-sm text-marque-900">
                Saisie accompagnée. La demande sera enregistrée comme prise par un salarié, et non
                comme une demande envoyée par le donateur lui-même.
            </div>
        @endif

        <h1 class="mb-1 text-xl font-semibold">Proposer un don à La Ressourcerie</h1>
        <p class="mb-4 text-sm text-slate-600">
            Nous venons chercher vos objets chez vous, gratuitement, le matin ou l'après-midi.
            Le délai moyen est d'environ {{ $delaiMoyen }} jours.
            Votre demande sera d'abord étudiée : les dates que vous proposez ne réservent rien.
        </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">Votre demande n'a pas été envoyé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('demande-collecte.envoi') }}" enctype="multipart/form-data"
              class="space-y-4">
            @csrf

            <div class="carte space-y-4">
                <h2 class="font-semibold">Vos coordonnées</h2>
                <div class="grid gap-4 sm:grid-cols-2">
                    <label><span class="etiquette">Prénom</span>
                        <input name="donateur_prenom" value="{{ old('donateur_prenom') }}" required class="champ"></label>
                    <label><span class="etiquette">Nom</span>
                        <input name="donateur_nom" value="{{ old('donateur_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</span>
                        <input name="email" type="email" inputmode="email" value="{{ old('email') }}"
                               class="champ">
                        <span class="mt-1 block text-sm text-slate-500">
                            Facultative, mais elle nous permet de vous envoyer la confirmation.
                        </span>
                    </label>
                </div>
            </div>

            <div class="carte space-y-4">
                <h2 class="font-semibold">Où venir</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 class="champ"></label>
                </div>
            </div>

            <div class="carte space-y-4">
                <h2 class="font-semibold">Accès au logement</h2>
                <p class="text-sm text-slate-600">
                    Ces détails nous évitent d'arriver avec une équipe ou un camion inadaptés.
                </p>

                {{-- Retour de Romain : alléger la saisie. Le type de logement et
                     l'étage suffisent à préparer l'équipe ; le reste se précise
                     seulement quand il y a quelque chose à dire. --}}
                <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') }}" placeholder="Rez-de-chaussée, 2e…" class="champ"></label>
                </div>

                @php
                    $accesPrecise = old('escaliers') || old('stationnement')
                        || old('ascenseur_present') || old('ascenseur_utilisable_meuble')
                        || old('passages_etroits') || old('demontage_necessaire') || 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 tient 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">
                                Couloir, porte ou passage étroit
                            </label>
                            <label class="flex items-center gap-2 text-sm text-slate-700">
                                <input type="checkbox" name="demontage_necessaire" value="1" @checked(old('demontage_necessaire'))
                                       class="size-4 rounded border-slate-300 text-marque-600 focus:ring-marque-600">
                                Un démontage sera nécessaire
                            </label>
                        </div>

                        <div class="grid gap-4 sm:grid-cols-2">
                            <label class="sm:col-span-2"><span class="etiquette">Escaliers (marches, virages serrés)</span>
                                <input name="escaliers" value="{{ old('escaliers') }}" class="champ"></label>
                            <label class="sm:col-span-2"><span class="etiquette">Stationnement devant chez vous</span>
                                <input name="stationnement" value="{{ old('stationnement') }}" class="champ"></label>
                        </div>

                        <label class="block"><span class="etiquette">Autre chose à nous signaler</span>
                            <textarea name="acces_observations" rows="2" class="champ">{{ old('acces_observations') }}</textarea>
                        </label>
                    </div>
                </details>
            </div>

            <div class="carte space-y-4">
                <div class="flex items-center justify-between">
                    <h2 class="font-semibold">Ce que vous proposez</h2>
                    <button type="button" class="bouton-secondaire" data-ajouter="objets">Ajouter un objet</button>
                </div>
                <p class="text-sm text-slate-600">
                    Une photo par objet nous aide beaucoup : c'est sur les photos que nous décidons
                    ce que nous pouvons reprendre.
                </p>
                <div id="objets" class="space-y-4" data-repeteur="modele-objet" data-intitule="Objet"></div>
            </div>

            <div class="carte space-y-4">
                <h2 class="font-semibold">Vos disponibilités</h2>
                <p class="text-sm text-slate-600">
                    Proposez une ou plusieurs dates qui vous arrangeraient. Ce ne sont que des
                    propositions : nous vous confirmerons le jour et la demi-journée retenus.
                </p>
                <div class="grid gap-4 sm:grid-cols-3">
                    @for ($i = 0; $i < 3; $i++)
                        <label><span class="etiquette">Date {{ $i + 1 }}{{ $i === 0 ? '' : ' (facultative)' }}</span>
                            <input name="disponibilites[]" type="date"
                                   value="{{ old('disponibilites.'.$i) }}"
                                   min="{{ now()->addDay()->toDateString() }}"
                                   {{ $i === 0 ? 'required' : '' }} class="champ"></label>
                    @endfor
                </div>
            </div>

            <div class="carte space-y-4">
                <h2 class="font-semibold">Conditions de collecte</h2>
                <div class="max-h-64 overflow-y-auto rounded-lg bg-slate-50 p-3 text-sm whitespace-pre-line text-slate-700">
                    {{ $conditions !== '' ? $conditions : 'Conditions non encore renseignées.' }}
                </div>
                <label class="flex items-start gap-2 text-sm text-slate-700">
                    <input type="checkbox" name="conditions" value="1" required
                           class="mt-0.5 size-4 rounded border-slate-300 text-marque-600 focus:ring-marque-600">
                    J'ai lu et j'accepte les conditions de collecte.
                </label>
            </div>

            <button type="submit" class="bouton-principal w-full sm:w-auto">Envoyer ma demande</button>
        </form>
    </div>

    <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>

            {{-- L'essentiel d'abord : quel objet, combien, et sa photo, sur
                 laquelle se prend la décision. --}}
            <div class="grid gap-3 sm:grid-cols-4">
                <label class="sm:col-span-3"><span class="etiquette">De quel objet s'agit-il</span>
                    <input name="objets[__I__][type]" required placeholder="Canapé, table, lave-linge…"
                           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>

            <details class="mt-3">
                <summary class="cursor-pointer text-sm font-medium text-marque-700">
                    Préciser : description, état, démontage
                </summary>
                <div class="mt-3 grid gap-3 sm:grid-cols-4">
                    <label class="sm:col-span-4"><span class="etiquette">Description</span>
                        <textarea name="objets[__I__][description]" rows="2" class="champ"></textarea></label>
                    <label><span class="etiquette">État</span>
                        <select name="objets[__I__][etat]" class="champ">
                            <option value="">Non précisé</option>
                            <option value="bon">Bon</option>
                            <option value="moyen">Moyen</option>
                            <option value="mauvais">Mauvais</option>
                        </select>
                    </label>
                    <label class="sm:col-span-4 flex items-center gap-2 text-sm text-slate-700">
                        <input type="checkbox" name="objets[__I__][demontage_necessaire]" value="1"
                               class="size-4 rounded border-slate-300 text-marque-600 focus:ring-marque-600">
                        Cet objet doit être démonté
                    </label>
                </div>
            </details>
        </div>
    </template>
@endsection