@extends('admin.layout')

@section('title', 'Planning interventions')

@section('content')

    <div class="pagetitle">
        <h1>Planification des interventions</h1>
    </div>

    {{-- Deroule des blocs qui apparaissent en cours de saisie : le bloc equipe
         quand les dates tiennent. Regles partagees avec les autres formulaires. --}}
    <link rel="stylesheet" href="@assetV('css/accordeon.css')">
    <script src="@assetV('js/accordeon.js')"></script>
    {{-- Les blocs et la liste des employes, comme sur le formulaire d'un chantier. --}}
    <link rel="stylesheet" href="@assetV('css/plannings/chantier-form.css')">
    <link rel="stylesheet" href="@assetV('css/plannings/planif-interventions.css')">

    <section class="section contact">
        <div class="card p-4">
            {{-- Un refus du serveur (intervention introuvable dans Gestan,
                 saisie invalide) : sans ce bloc l'ecran revenait vide, sans
                 rien dire. sur-place.js le fait flotter en haut a droite. --}}
            <div data-messages>
                @if (session('error'))
                    <div class="alert alert-danger">{{ session('error') }}</div>
                @endif
                @if ($errors->any())
                    <div class="alert alert-danger">
                        <ul class="mb-0">
                            @foreach ($errors->all() as $error)
                                <li>{{ $error }}</li>
                            @endforeach
                        </ul>
                    </div>
                @endif
            </div>

            {{-- La file a gauche, la saisie a droite.

                 Toutes les interventions a planifier sont sous les yeux,
                 rangees par secteur : on en clique une, on pose son creneau,
                 son equipe et ses employes a droite, on clique la suivante.
                 Celles qui sont pretes se cochent dans la file avec leur
                 creneau, et un seul « Enregistrer » pose le tout. Avant, une
                 liste deroulante par intervention, et autant de blocs empiles
                 a faire defiler.

                 Chaque intervention cliquee recoit son bloc
                 `.intervention-block`, tire du modele plus bas ; un seul est
                 affiche a la fois (js/interventions/file.js). Les scripts des
                 dates, de l'equipe, des absences et des conflits entre
                 interventions travaillent par bloc, comme avant : ils ne
                 savent pas que les autres sont caches.

                 `novalidate` : un champ obligatoire dans un bloc cache
                 bloquerait l'envoi sans qu'on voie ou. file.js verifie
                 lui-meme, et ramene a l'ecran l'intervention a completer.

                 `data-no-draft` : les champs naissent au clic, un brouillon
                 (js/form-draft.js) ne retrouverait pas ou se reposer. --}}
            <form method="POST" action="{{ route('plannings.interventions.store') }}" id="planif-interventions" novalidate data-no-draft
                data-vide="{{ __('Choisissez au moins une intervention à planifier.') }}"
                data-incomplete="{{ __('Il manque la date, la durée ou l\'équipe de cette intervention.') }}"
                data-prete="{{ __(':n prête') }}"
                data-pretes="{{ __(':n prêtes') }}"
                data-a-completer="{{ __('à compléter') }}">
                @csrf

                <div class="chantier-form planif-inter">

                    <div class="cf-entete">
                        <span class="pi-pretes" hidden></span>
                        <a href="{{ route('plannings.index') }}" class="btn btn-outline-secondary">{{ __('Annuler') }}</a>
                        <button type="submit" class="btn btn-primary">{{ __('Enregistrer') }}</button>
                    </div>

                    <div class="pi-colonnes">

                        {{-- ================= LA FILE ================= --}}
                        <div class="cf-bloc pi-file">
                            <div class="pi-file-titre">
                                <h5>{{ __('À planifier') }}</h5>
                                <span>{{ $interventionsBySecteur->flatten(1)->count() }}</span>
                            </div>

                            <input type="search" id="pi-recherche" class="form-control form-control-sm"
                                placeholder="{{ __('Client, ville, libellé…') }}" autocomplete="off">

                            <p class="pi-aucune small mb-0 mt-2" hidden>{{ __('Aucune intervention ne correspond.') }}</p>

                            @forelse ($interventionsBySecteur as $secteur => $items)
                                <div class="pi-secteur">
                                    <div class="pi-secteur-titre">{{ $secteur }}</div>

                                    @foreach ($items as $inter)
                                        @php
                                            $client = $inter['CLIENT'] ?? null;
                                            $nomClient =
                                                $client['RAISON_SOCIALE'] ??
                                                trim(($client['NOMFAMILLE'] ?? '') . ' ' . ($client['PRENOM'] ?? ''));
                                            // Là où on envoie le technicien : le LIEU, sinon le client
                                            $lieu = gestan_inter_adresse($inter);
                                            $libelle = $inter['LIBINTER'] ?? 'Sans description';
                                        @endphp

                                        <button type="button" class="pi-item"
                                            data-id="{{ $inter['IDINTERVENTION'] }}"
                                            data-libelle="{{ $libelle }}"
                                            data-client="{{ $nomClient }}"
                                            data-adresse="{{ $lieu['complete'] }}"
                                            data-secteur="{{ $secteur }}">
                                            <span class="pi-item-libelle">{{ $libelle }}</span>
                                            <span class="pi-item-client">{{ $nomClient }}@if ($lieu['ville']) · {{ $lieu['ville'] }}@endif</span>
                                            <span class="pi-item-etat" hidden></span>
                                        </button>
                                    @endforeach
                                </div>
                            @empty
                                <p class="mb-0 mt-2">{{ __('Aucune intervention à planifier.') }}</p>
                            @endforelse
                        </div>

                        {{-- ================= LA SAISIE ================= --}}
                        <div class="pi-saisie">
                            <div class="cf-bloc pi-vide">
                                {{ __('Choisissez une intervention dans la liste pour poser son créneau.') }}
                            </div>

                            <div id="interventions-container"></div>
                        </div>

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

            {{-- Le modele d'un bloc. Dans un <template> : ses champs ne font
                 pas partie du formulaire tant qu'une intervention n'est pas
                 cliquee, et les scripts qui parcourent les blocs ne le voient
                 pas. Les noms portent l'index 0, file.js les renumerote. --}}
            <template id="pi-bloc-modele">
                <div class="intervention-block d-none">
                    <input type="hidden" name="interventions[0][intervention_id]">

                    <div class="pi-bloc-titre">
                        <strong class="pi-b-libelle"></strong>
                        <span class="pi-b-lieu"></span>
                    </div>

                    @php
                        $dureesOptions = [];
                        for ($m = 30; $m <= 480; $m += 30) {
                            $h = intdiv($m, 60);
                            $r = $m % 60;
                            $dureesOptions[$m] = $h > 0 ? $h . ' h' . ($r ? ' ' . $r : '') : $m . ' min';
                        }
                    @endphp

                    <div class="cf-bloc">
                        <h5>{{ __('Date et durée') }}</h5>
                        <div class="pi-dates">
                            <div>
                                <label>Date début</label>
                                <input type="datetime-local" name="interventions[0][date_debut]" class="form-control" required>
                            </div>

                            <div>
                                <label>Durée</label>
                                <select name="interventions[0][duree]" class="form-select" required>
                                    <option value="">— Sélectionner —</option>
                                    @foreach ($dureesOptions as $minutes => $libelleDuree)
                                        <option value="{{ $minutes }}">{{ $libelleDuree }}</option>
                                    @endforeach
                                </select>
                            </div>

                            <div>
                                <label>Date fin (calculée)</label>
                                <input type="datetime-local" name="interventions[0][date_fin]" class="form-control"
                                    readonly tabindex="-1">
                            </div>
                        </div>
                    </div>

                    {{-- L'equipe et les employes n'apparaissent qu'une fois le
                         creneau pose (js/interventions/employes.js) : qui est
                         libre en depend. --}}
                    <div class="employees-container d-none">
                        <div class="ac-accordeon">
                            <div class="ac-accordeon-corps">
                                <div>
                                    <div class="cf-bloc">
                                        <h5>Équipe</h5>
                                        <select name="interventions[0][equipe_id]" class="form-control" required>
                                            <option value="">--Sélectionner une équipe--</option>
                                            @foreach ($equipes as $equipe)
                                                <option value="{{ $equipe->id }}">{{ $equipe->nom }}</option>
                                            @endforeach
                                        </select>
                                    </div>

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

                                        <div class="employees-placeholder mb-2">
                                            Veuillez sélectionner une plage de dates pour afficher les employés
                                        </div>

                                        @include('admin.plannings._employes', [
                                            'users' => $users,
                                            'name' => 'interventions[0][user_ids][]',
                                            'coches' => [],
                                            'classe' => 'employees-list d-none employes-repliables',
                                        ])
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <button type="button" class="btn btn-outline-danger btn-sm remove-intervention">
                        <i class="bi bi-trash"></i> {{ __('Ne pas planifier celle-ci') }}
                    </button>
                </div>
            </template>
        </div>
    </section>

    <script>
        const datesBloquees = @json($datesBloquees);
    </script>
    <script src="@assetV('js/plannings/dates.js')"></script>
    <script src="@assetV('js/plannings/equipes.js')"></script>
    <script src="@assetV('js/interventions/file.js')"></script>
    <script src="@assetV('js/interventions/duree.js')"></script>
    <script src="@assetV('js/interventions/employes.js')"></script>
    <script src="@assetV('js/plannings/occupations.js')"></script>
@endsection