@extends('layouts.app')

@section('titre', 'Devenir bénévole')

@section('contenu')
    <div class="mx-auto max-w-2xl">
        <h1 class="mb-1 text-xl font-semibold">Devenir bénévole à La Ressourcerie</h1>
        <p class="mb-4 text-slate-600">
            Quelques heures par semaine suffisent. Dites-nous qui vous êtes et quand vous êtes
            libre : nous vous appelons pour faire connaissance, sans engagement.
        </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 proposition 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('benevoles.public.envoi') }}" class="space-y-4">
            @csrf

            {{-- Champ piège, invisible pour une personne : un robot le remplit. --}}
            <div class="hidden" aria-hidden="true">
                <label>Site web <input name="site_web" tabindex="-1" autocomplete="off"></label>
            </div>

            <div class="carte space-y-4">
                <h2 class="font-semibold">Vous</h2>
                <div class="grid gap-4 sm:grid-cols-2">
                    <label><span class="etiquette">Prénom</span>
                        <input name="prenom" value="{{ old('prenom') }}" required autocomplete="given-name" class="champ"></label>
                    <label><span class="etiquette">Nom</span>
                        <input name="nom" value="{{ old('nom') }}" required autocomplete="family-name" class="champ"></label>
                    <label><span class="etiquette">Téléphone</span>
                        <input name="telephone" type="tel" inputmode="tel" value="{{ old('telephone') }}"
                               required autocomplete="tel" class="champ"></label>
                    <label><span class="etiquette">Adresse e-mail <span class="font-normal text-slate-500">— facultative</span></span>
                        <input name="email" type="email" inputmode="email" value="{{ old('email') }}"
                               autocomplete="email" class="champ"></label>
                    <label class="sm:col-span-2"><span class="etiquette">Commune <span class="font-normal text-slate-500">— facultative</span></span>
                        <input name="commune" value="{{ old('commune') }}" autocomplete="address-level2" class="champ"></label>
                </div>
            </div>

            <div class="carte space-y-4">
                <h2 class="font-semibold">Quand êtes-vous libre ?</h2>
                <p class="text-sm text-slate-500">Cochez les demi-journées où vous pourriez venir, en général.</p>

                <div class="overflow-x-auto">
                    <table class="w-full text-sm">
                        <thead>
                            <tr>
                                <th class="py-1 text-left font-medium text-slate-500"><span class="sr-only">Jour</span></th>
                                @foreach (\App\Models\CandidatureBenevole::DEMI_JOURNEES as $libelle)
                                    <th class="px-2 py-1 text-center font-medium text-slate-500">{{ $libelle }}</th>
                                @endforeach
                            </tr>
                        </thead>
                        <tbody>
                            @foreach (\App\Models\CandidatureBenevole::JOURS as $jour => $libelleJour)
                                <tr class="border-t border-slate-100">
                                    <th scope="row" class="py-2 text-left font-medium">{{ $libelleJour }}</th>
                                    @foreach (\App\Models\CandidatureBenevole::DEMI_JOURNEES as $moment => $libelleMoment)
                                        @php $creneau = "{$jour}_{$moment}"; @endphp
                                        <td class="px-2 py-2 text-center">
                                            <input type="checkbox" name="disponibilites[]" value="{{ $creneau }}"
                                                   aria-label="{{ $libelleJour }} {{ mb_strtolower($libelleMoment) }}"
                                                   @checked(in_array($creneau, old('disponibilites', []), true))
                                                   class="size-5 rounded border-slate-300 text-marque-600 focus:ring-marque-600">
                                        </td>
                                    @endforeach
                                </tr>
                            @endforeach
                        </tbody>
                    </table>
                </div>
            </div>

            <div class="carte space-y-4">
                <h2 class="font-semibold">Où aimeriez-vous aider ?</h2>
                <label><span class="etiquette">Activité</span>
                    <select name="pole_souhaite_id" class="champ">
                        <option value="">Peu importe, là où il y a besoin</option>
                        @foreach ($poles as $pole)
                            <option value="{{ $pole->id }}" @selected((int) old('pole_souhaite_id') === $pole->id)>{{ $pole->nom }}</option>
                        @endforeach
                    </select>
                </label>

                {{-- La Ressourcerie a besoin de connaître la personne avant le premier
                     appel : ces deux réponses ne sont plus facultatives. --}}
                <label class="block"><span class="etiquette">Ce qui vous donne envie</span>
                    <textarea name="motivation" rows="3" required class="champ">{{ old('motivation') }}</textarea></label>
                <label class="block"><span class="etiquette">Ce que vous savez faire</span>
                    <textarea name="experience" rows="3" required class="champ"
                              placeholder="Bricolage, couture, vente, conduite, informatique…">{{ old('experience') }}</textarea></label>
            </div>

            <div class="carte">
                <label class="flex items-start gap-3 text-sm">
                    <input type="checkbox" name="donnees_acceptees" value="1" required @checked(old('donnees_acceptees'))
                           class="mt-0.5 size-5 rounded border-slate-300 text-marque-600 focus:ring-marque-600">
                    <span>
                        J'accepte que La Ressourcerie garde ces informations pour me recontacter au sujet
                        du bénévolat. Elles ne servent à rien d'autre et ne sont transmises à personne.
                    </span>
                </label>
            </div>

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