{{-- Le corps du formulaire d'un chantier, partage par create et edit : un seul
     fichier pour que la modification reste le calque de la creation.
     Attendus : `$planning` (null a la creation), `$devisIds` (ids des devis
     deja lies, vide a la creation), `$equipes`, `$users`, `$valider` (libelle
     du bouton).

     Tout tient a l'ecran, sans faire defiler : les boutons en haut, puis deux
     colonnes qui se remplissent en parallele — a gauche pour qui et ou
     (client, devis, nature, observation), a droite quand et avec qui (dates,
     equipe, employes). Empiles, ces blocs faisaient deux ecrans de haut et le
     bouton d'envoi etait sous la liste des employes. Sur telephone les
     colonnes s'empilent, la gauche d'abord (css/plannings/chantier-form.css).

     Les partiels gardent leurs classes de colonnes bootstrap : c'est la
     feuille de style qui les replace dans une demi-largeur. --}}
@php
    $creation = $planning === null;
    $debut = $planning?->date_debut;
    $fin = $planning?->date_fin;
    $observation = old('observations', $creation ? null : optional($planning->observations->first())->observation);
@endphp

<div class="chantier-form">

    {{-- Les actions en haut, jamais sous la liste des employes. --}}
    <div class="cf-entete">
        <a href="{{ route('plannings.index') }}" class="btn btn-outline-secondary">{{ __('Annuler') }}</a>
        <button class="btn btn-primary">{{ $valider }}</button>
    </div>

    <div class="cf-colonnes">

        {{-- ================= POUR QUI ET OU ================= --}}
        <div class="cf-colonne">

            <div class="cf-bloc">
                <h5>{{ __('Client') }}</h5>
                <div class="row gy-2">
                    @include('admin.plannings.chantiers._client', [
                        'clientId' => old('client_id', $planning?->client_id),
                    ])
                </div>
            </div>

            <div class="cf-bloc">
                <h5>Devis liés</h5>

                {{-- Les devis deja lies sont deroules : ils sont la matiere de
                     l'ecran. La ligne vide, elle, est posee repliee : tous les
                     chantiers n'ont pas de devis, et des champs grises en tete
                     d'ecran se lisaient comme un formulaire a remplir. Le
                     premier clic sur « Ajouter un devis » la deroule, les
                     suivants en clonent une autre. --}}
                <div id="devis-container">
                    @forelse ($devisIds as $devisId)
                        @include('admin.plannings.chantiers._devis_ligne', [
                            'devisId' => $devisId,
                            'ouvert' => true,
                        ])
                    @empty
                        @include('admin.plannings.chantiers._devis_ligne', [
                            'devisId' => null,
                            'ouvert' => false,
                        ])
                    @endforelse
                </div>

                <button type="button" id="add-devis" class="btn btn-sm btn-outline-primary">
                    ➕ Ajouter un devis
                </button>
            </div>

            <div class="cf-bloc">
                @include('admin.plannings.chantiers._nature', ['planning' => $planning])
            </div>

            {{-- Pas d'adresse ici : elle se saisit à la commande, une par
                 devis, et le planning la lit par ses devis (le détail la
                 montre). --}}

            {{-- Repliee tant qu'elle est vide, comme sur la creation d'une
                 commande : elle est rare, et un textarea vide donnait surtout
                 l'impression qu'il fallait le remplir. Replier vide le champ,
                 et le controleur ignore une note vide. Deroulee d'entree quand
                 le chantier en porte une : la replier la cacherait a qui vient
                 justement la relire. --}}
            <div class="cf-bloc obs-bloc">
                <button type="button" class="btn btn-outline-secondary btn-sm obs-ouvrir @if (filled($observation)) d-none @endif">
                    <i class="bi bi-plus-lg"></i>
                    Ajouter une observation
                </button>

                <div class="obs-champ ac-accordeon @if (filled($observation)) ac-ouvert @endif">
                    <div class="ac-accordeon-corps">
                        <div>
                            <label for="observations">Observations</label>
                            <textarea name="observations" id="observations"
                                class="form-control" rows="3">{{ $observation }}</textarea>
                            <button type="button" class="btn btn-link btn-sm text-danger px-0 obs-fermer">
                                <i class="bi bi-trash"></i> Supprimer cette observation
                            </button>
                        </div>
                    </div>
                </div>
            </div>

        </div>

        {{-- ================= QUAND ET AVEC QUI ================= --}}
        <div class="cf-colonne">

            <div class="cf-bloc">
                <h5>{{ __('Dates') }}</h5>
                <div class="cf-dates">
                    <div>
                        <label>Date début</label>
                        <div class="d-flex gap-2">
                            <input type="date" name="date_debut" class="form-control"
                                value="{{ old('date_debut', $debut?->format('Y-m-d')) }}" required>

                            <select name="heur_debut" class="form-control" required>
                                <option value="07:30:00" @selected($debut?->format('H:i:s') == '07:30:00')>Matin</option>
                                <option value="12:30:00" @selected($debut?->format('H:i:s') == '12:30:00')>Midi</option>
                            </select>
                        </div>
                    </div>

                    <div>
                        <label>Date fin</label>
                        <div class="d-flex gap-2">
                            <input type="date" name="date_fin" class="form-control"
                                value="{{ old('date_fin', $fin?->format('Y-m-d')) }}" required>

                            <select name="heur_fin" class="form-control" required>
                                <option value="12:00:00" @selected($fin?->format('H:i:s') == '12:00:00')>Midi</option>
                                <option value="16:30:00" @selected($fin?->format('H:i:s') == '16:30:00')>Soir</option>
                            </select>
                        </div>
                    </div>
                </div>
            </div>

            {{-- A la creation, l'equipe et les employes n'apparaissent qu'une
                 fois la plage de dates posee (js/plannings/absences.js) : qui
                 est libre en depend. Effacer une date les replie et les
                 remet a zero. En modification les dates sont deja la, et rien
                 ne doit se vider sous les doigts : pas de conteneur a replier. --}}
            @if ($creation)
                <div class="cf-bloc employees-placeholder">
                    Veuillez sélectionner une plage de dates pour choisir l'équipe et les employés.
                </div>
            @endif

            <div @class(['employees-container d-none' => $creation])>
                <div @class(['ac-accordeon' => $creation])>
                    <div @class(['ac-accordeon-corps' => $creation])>
                        <div>

                            <div class="cf-bloc">
                                <h5><label for="equipe_id" class="mb-0">Équipe</label></h5>
                                <select name="equipe_id" id="equipe_id" class="form-control" @required(!$creation)>
                                    <option value="">--Sélectionner une équipe--</option>
                                    @foreach ($equipes as $equipe)
                                        <option value="{{ $equipe->id }}" @selected($planning?->equipe_id == $equipe->id)>
                                            {{ $equipe->nom }}
                                        </option>
                                    @endforeach
                                </select>
                            </div>

                            <div class="cf-bloc">
                                <h5>Employés</h5>
                                @include('admin.plannings._employes', [
                                    'users' => $users,
                                    'name' => 'user_ids[]',
                                    'coches' => array_map('intval', old('user_ids', $creation ? [] : $planning->users->pluck('id')->all())),
                                    'classe' => 'employes-repliables',
                                ])
                            </div>

                        </div>
                    </div>
                </div>
            </div>

        </div>

    </div>
</div>