{{--
    Formulaire d'une reparation vehicule, partage par create et edit.
    Variables : $users, $planning (null en creation).

    Pas de client, pas de devis, pas d'equipe a choisir (il n'y en a qu'une) :
    une plage de dates et les employes immobilises. Les champs de dates et le
    deroule des employes sont ceux du chantier, pour que dates.js et
    absences.js s'y appliquent tels quels.
--}}
@php
    $debut = $planning?->date_debut;
    $fin   = $planning?->date_fin;
    $coches = collect(old('user_ids', $planning?->users->pluck('id')->all() ?? []))
        ->map(fn ($id) => (int) $id)
        ->all();
@endphp

<div class="row gy-4">

    <div class="col-md-4">
        <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>

            @php $heurDebut = old('heur_debut', $debut?->format('H:i:s')); @endphp
            <select name="heur_debut" class="form-control" required>
                <option value="07:30:00" @selected($heurDebut === '07:30:00')>{{ __('Matin') }}</option>
                <option value="12:30:00" @selected($heurDebut === '12:30:00')>{{ __('Midi') }}</option>
            </select>
        </div>
    </div>

    <div class="col-md-4">
        <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>

            @php $heurFin = old('heur_fin', $fin?->format('H:i:s')); @endphp
            <select name="heur_fin" class="form-control" required>
                <option value="12:00:00" @selected($heurFin === '12:00:00')>{{ __('Midi') }}</option>
                <option value="16:30:00" @selected($heurFin === '16:30:00')>{{ __('Soir') }}</option>
            </select>
        </div>
    </div>

    <hr>

    <div class="employees-placeholder text-muted col-md-12">
        {{ __('Veuillez sélectionner une plage de dates pour choisir les employés.') }}
    </div>

    {{-- pt-0 : voir chantiers/create, la gouttiere de la row ne doit pas
         rester hors du panneau qui se deroule. --}}
    <div class="employees-container d-none col-md-12 pt-0">
    <div class="ac-accordeon">
    <div class="ac-accordeon-corps">
        <label>{{ __('Employés') }}</label>

        @include('admin.plannings._employes', ['users' => $users, 'name' => 'user_ids[]', 'coches' => $coches])
    </div>
    </div>
    </div>

    <hr>

    {{-- Repliee a la creation, deroulee en edition quand la reparation en
         porte une : meme bloc que le chantier (observations.js). Replier vide
         le champ, et un champ vide supprime la note
         (PlanningController::enregistrerObservationReparation). --}}
    @php
        $observation = old('observations', $planning?->observations->first()?->observation);
    @endphp

    <div class="col-md-12 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 class="mt-2">
                    <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 class="col-md-12">
        <button class="btn btn-primary">{{ $planning ? __('Enregistrer') : __('Ajouter') }}</button>
    </div>

</div>