@extends('planning_laravel.layout')
@section('content')

    <link href="{{ asset('inc/planning/packages/core/main.css') }}" rel="stylesheet">
    <link href="{{ asset('inc/planning/packages-premium/timeline/main.css') }}" rel="stylesheet">
    <link href="{{ asset('inc/planning/packages-premium/resource-timeline/main.css') }}" rel="stylesheet">

    <style>
        .planning-laravel { padding: 0 6px 24px; color: #1d221f; }
        .planning-laravel .texte-secondaire { color: #5d665f; }

        /* En-tête : titre comme sur l'État des centrales, sélecteur d'écran et liens */
        .planning-laravel .entete { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 12px; margin: 10px 0 14px; padding-bottom: 10px; border-bottom: 3px solid #28a745; }
        .planning-laravel .entete h2 { margin: 0; font-size: 1.5rem; font-weight: 700; color: #28a745; }
        .planning-laravel .entete-gauche { display: flex; flex-wrap: wrap; align-items: center; gap: 18px; }
        .planning-laravel .selecteur-ecran { display: flex; background: #e6ebe5; border-radius: 999px; padding: 3px; }
        .planning-laravel .selecteur-ecran a { text-decoration: none; padding: 5px 16px; border-radius: 999px; color: #3d4540; font-size: .9rem; font-weight: 600; }
        .planning-laravel .selecteur-ecran a.actif { background: #28a745; color: #fff; font-weight: 700; }
        .planning-laravel .date-entete { font-size: 1.6rem; font-weight: 700; color: #1d221f; line-height: 36px; }
        .planning-laravel .liens-externes { display: flex; flex-wrap: wrap; gap: 8px; }
        .planning-laravel .bouton-clair { display: inline-flex; align-items: center; gap: 6px; height: 36px; padding: 0 12px; border: 1px solid #c9d0c8; background: #fff; border-radius: 6px; color: #1d221f; font-size: .85rem; font-weight: 600; text-decoration: none; cursor: pointer; }
        .planning-laravel .bouton-clair:hover { background: #f3f5f2; color: #1d221f; text-decoration: none; }

        /* Barre de filtres */
        .planning-laravel .filtres { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px 18px; background: #fff; border: 1px solid #d3d8d2; border-radius: 8px; padding: 10px 14px; margin-bottom: 12px; }
        .planning-laravel .filtre { display: flex; flex-direction: column; gap: 4px; }
        .planning-laravel .filtre > label, .planning-laravel .filtre > .libelle { font-size: .75rem; font-weight: 700; color: #3d4540; margin: 0; }
        .planning-laravel .filtre .form-control { height: 36px; color: #1d221f !important; }
        .planning-laravel .filtre select.form-control:not([size]):not([multiple]) { height: 36px; padding-top: 0; padding-bottom: 0; }
        .planning-laravel .ligne-controles { display: flex; gap: 4px; align-items: center; }
        .planning-laravel .bouton-carre { width: 36px; height: 36px; border: 1px solid #c9d0c8; background: #fff; border-radius: 6px; color: #3d4540; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; }
        .planning-laravel .bouton-vert { height: 36px; padding: 0 12px; border: 1px solid #28a745; background: #28a745; color: #fff; border-radius: 6px; font-weight: 600; font-size: .85rem; cursor: pointer; }
        .planning-laravel .recherche { position: relative; width: 200px; }
        .planning-laravel .recherche i { position: absolute; left: 11px; top: 11px; color: #5d665f; font-size: .85rem; }
        .planning-laravel .recherche .form-control { padding-left: 30px; }
        /* Zone des centrales, repliable */
        .planning-laravel .zone-centrales { background: #fff; border: 1px solid #d3d8d2; border-radius: 8px; margin-bottom: 12px; }
        .planning-laravel .zone-centrales-entete { display: flex; align-items: center; gap: 8px; width: 100%; background: transparent; border: none; padding: 8px 14px; text-align: left; cursor: pointer; font-size: .85rem; color: #1d221f; }
        .planning-laravel .zone-centrales-entete .titre { font-weight: 700; }
        .planning-laravel .zone-centrales-entete .chevron { font-size: .75rem; color: #5d665f; transition: transform .15s; }
        .planning-laravel .zone-centrales-entete[aria-expanded="false"] .chevron { transform: rotate(-90deg); }
        .planning-laravel .puces-centrales { display: flex; flex-wrap: wrap; gap: 6px; padding: 0 14px 12px; }
        .planning-laravel .puce-centrale { height: 36px; display: inline-flex; align-items: center; gap: 6px; padding: 0 12px; border-radius: 999px; border: 2px solid var(--couleur); background: #fff; color: #1d221f; font-size: .85rem; font-weight: 600; cursor: pointer; }
        .planning-laravel .puce-centrale .point { width: 10px; height: 10px; border-radius: 50%; background: var(--couleur); }
        .planning-laravel .puce-centrale[aria-pressed="false"] { border: 1px dashed #9aa39b; color: #5d665f; }
        .planning-laravel .puce-centrale[aria-pressed="false"] .point { background: transparent; border: 2px solid var(--couleur); }
        .planning-laravel .actions-droite { margin-left: auto; }
        .planning-laravel .bouton-commandes { height: 36px; display: inline-flex; align-items: center; gap: 8px; padding: 0 12px; border: 1px solid #1e7e34; background: #fff; border-radius: 6px; font-size: .85rem; font-weight: 700; color: #1e7e34; cursor: pointer; }
        .planning-laravel .bouton-commandes[aria-pressed="true"] { background: #1e7e34; color: #fff; }
        .planning-laravel .bouton-commandes .compteur { background: #1e7e34; color: #fff; border-radius: 999px; padding: 0 7px; font-size: .75rem; }
        .planning-laravel .bouton-commandes[aria-pressed="true"] .compteur { background: #fff; color: #1e7e34; }

        /* Planning + tiroir des commandes */
        .planning-laravel .zone-principale { display: flex; flex-wrap: wrap; gap: 12px; align-items: flex-start; }
        .planning-laravel .carte-planning { flex: 999 1 700px; min-width: 0; background: #fff; border: 1px solid #d3d8d2; border-radius: 8px; overflow: hidden; position: relative; }
        .planning-laravel .barre-chargement { height: 3px; background: transparent; overflow: hidden; }
        .planning-laravel .barre-chargement.actif { background: #e6ebe5; }
        .planning-laravel .barre-chargement.actif div { height: 3px; width: 35%; background: #28a745; animation: chargement-planning 1s linear infinite; }
        @keyframes chargement-planning { from { margin-left: -35%; } to { margin-left: 100%; } }
        .planning-laravel .conteneur-calendrier { height: calc(100vh - 290px); min-height: 520px; }
        .planning-laravel .legende { display: flex; flex-wrap: wrap; gap: 6px 16px; padding: 8px 14px; border-top: 1px solid #e1e5e0; background: #fafbf9; font-size: .75rem; color: #3d4540; align-items: center; }
        .planning-laravel .legende span { display: inline-flex; align-items: center; gap: 5px; }
        .planning-laravel .legende .echantillon { width: 18px; height: 10px; border: 1px solid #d3d8d2; }
        .planning-laravel .legende .echantillon-bordure { width: 18px; height: 12px; border-radius: 3px; box-sizing: border-box; }

        .planning-laravel .tiroir-commandes { flex: 1 1 340px; max-width: 420px; min-width: 0; background: #fff; border: 1px solid #d3d8d2; border-radius: 8px; overflow: hidden; }
        .planning-laravel .tiroir-entete { background: #28a745; color: #fff; padding: 6px 12px; font-weight: 700; font-size: 1rem; display: flex; justify-content: space-between; align-items: center; }
        .planning-laravel .tiroir-entete button { background: transparent; border: none; color: #fff; width: 32px; height: 32px; cursor: pointer; }
        .planning-laravel .tiroir-filtres { padding: 8px 12px; display: flex; gap: 8px; align-items: flex-end; border-bottom: 1px solid #e1e5e0; }
        .planning-laravel .tiroir-filtres .filtre { flex: 1 1 auto; }
        .planning-laravel .legende-commandes { display: none; padding: 8px 12px; border-bottom: 1px solid #e1e5e0; background: #fafbf9; font-size: .75rem; }
        .planning-laravel .legende-commandes div { margin: 2px 0; }
        .planning-laravel .colonnes-commandes, .planning-laravel .commande { display: grid; grid-template-columns: 18px 58px minmax(0, 1fr) 96px; gap: 8px; padding: 8px 12px; }
        .planning-laravel .colonnes-commandes { padding-top: 5px; padding-bottom: 5px; font-size: .68rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: #5d665f; background: #fafbf9; border-bottom: 1px solid #e1e5e0; }
        .planning-laravel .liste-commandes { max-height: calc(100vh - 330px); min-height: 300px; overflow-y: auto; }
        .planning-laravel .commande { border-bottom: 1px solid #edf0ec; align-items: start; font-size: .8rem; }
        .planning-laravel .commande.deplacable { cursor: grab; }
        .planning-laravel .commande.deplacable:hover { background: #f6faf6; }
        .planning-laravel .commande .poignee { color: #9aa39b; padding-top: 2px; }
        .planning-laravel .commande:not(.deplacable) .poignee { visibility: hidden; }
        .planning-laravel .heure-commande { display: inline-block; font-weight: 800; font-variant-numeric: tabular-nums; padding: 1px 6px; border-radius: 4px; background: #eef0ed; }
        .planning-laravel .heure-commande.depart_depasse { background: #ffd8a8; color: #7a3e00; }
        .planning-laravel .heure-commande.livraison_depassee { background: #f6c3bf; color: #8c1a13; }
        .planning-laravel .heure-commande.a_confirmer { background: #ffcfc4; color: #8c2a12; }
        .planning-laravel .etat-heure { font-size: .65rem; font-weight: 700; margin-top: 3px; line-height: 1.2; }
        .planning-laravel .etat-heure.depart_depasse { color: #9a5200; }
        .planning-laravel .etat-heure.livraison_depassee { color: #b3261e; }
        .planning-laravel .etat-heure.a_confirmer { color: #a8351a; }
        .planning-laravel .commande-textes { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
        .planning-laravel .commande-textes .ligne { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
        .planning-laravel .commande-client { display: flex; align-items: center; gap: 6px; min-width: 0; }
        .planning-laravel .pastille-compte { flex: none; width: 9px; height: 9px; border-radius: 50%; border: 1px solid rgba(0,0,0,.15); }
        .planning-laravel .client-comptant { color: #1a56c4; }
        .planning-laravel .badges { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 2px; }
        .planning-laravel .badge-commande { font-size: .65rem; font-weight: 700; border-radius: 999px; padding: 1px 7px; }
        .planning-laravel .badge-commande.adjuvant { background: #fbd3e6; color: #8a1650; }
        .planning-laravel .badge-commande.sous-centrale { background: #efe6a8; color: #5c5200; }
        .planning-laravel .badge-commande.en-cours { background: #ffdccc; color: #8a3a12; }
        .planning-laravel .badge-commande.soldee { background: #d4f5d4; color: #1f6b1f; }
        .planning-laravel .badge-commande.a-confirmer { background: #fbe3e1; color: #9b1c15; }
        .planning-laravel .cubage { font-size: .72rem; font-variant-numeric: tabular-nums; display: flex; flex-direction: column; gap: 2px; }
        .planning-laravel .jauge-cubage { display: flex; height: 6px; border-radius: 3px; overflow: hidden; background: #e6ebe5; margin-bottom: 2px; }
        .planning-laravel .liste-vide { padding: 30px 12px; text-align: center; }

        /* Calendrier FullCalendar */
        .planning-laravel .fc-timeline .fc-head .fc-cell-text { font-weight: 600; font-size: .8rem; }
        .planning-laravel .fc-timeline .fc-divider .fc-cell-content { padding: 4px 8px; }
        .planning-laravel .fc-timeline .fc-divider { background: #f3f6f2; }
        .planning-laravel .groupe-centrale { display: inline-flex; align-items: center; gap: 8px; font-size: .85rem; }
        .planning-laravel .fc-time-area .groupe-centrale-planning { display: flex; align-items: center; justify-content: center; }
        .planning-laravel .groupe-centrale .carre { width: 12px; height: 12px; border-radius: 3px; }
        .planning-laravel .groupe-centrale .type { font-size: .72rem; font-weight: 700; letter-spacing: .03em; text-transform: uppercase; color: #3d4540; background: #fff; border: 1px solid #c9d0c8; border-radius: 999px; padding: 0 8px; }
        /* Contenu des cellules véhicule centré verticalement dans la hauteur de la ligne (fixée par FullCalendar sur le div intérieur) */
        .planning-laravel .fc-resource-area tbody td:not(.fc-divider) > div { display: flex; flex-direction: column; justify-content: center; }
        .planning-laravel .fc-resource-area tbody td { vertical-align: middle; }
        .planning-laravel .vehicule-cellule { display: flex; align-items: center; justify-content: space-between; gap: 6px; padding-left: 6px; }
        .planning-laravel .vehicule-code { font-weight: 700; font-size: .8rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
        .planning-laravel .vehicule-chauffeur { font-size: .75rem; color: #5d665f; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
        .planning-laravel .vehicule-blocage { color: #9aa39b; font-size: .7rem; }
        .planning-laravel .badge-capacite { align-self: flex-start; font-size: .72rem; font-weight: 700; background: #eef0ed; color: #3d4540; border-radius: 999px; padding: 1px 8px; white-space: nowrap; }
        .planning-laravel .fc-resource-area .fc-cell-content { padding-top: 6px; padding-bottom: 6px; }
        /* Icônes d'indentation et d'expansion des lignes véhicule : gardées dans le DOM (FullCalendar en a besoin) mais masquées */
        .planning-laravel .fc-resource-area tbody td:not(.fc-divider) .fc-icon,
        .planning-laravel .fc-resource-area tbody td:not(.fc-divider) .fc-expander-space { display: none; }
        .planning-laravel .fc-resource-area tbody td:not(.fc-divider) .fc-cell-text { display: block; }

        /* !important : le rendu FullCalendar modifié (timeline/main.js) pose un style « height:auto » en ligne */
        .planning-laravel .fc-timeline-event.tour_planning { height: 50px !important; padding: 0; margin-top: 2px; border-radius: 6px; overflow: hidden; background: #fff !important; box-shadow: 0 1px 3px rgba(0,0,0,.18); color: #1d221f; cursor: pointer; }
        .planning-laravel .fc-timeline-event.tour_planifie { border: 1px solid #8a948c !important; }
        .planning-laravel .fc-timeline-event.tour_reel { border: 2px solid #1d221f !important; }
        .planning-laravel .fc-timeline-event.tour_superpose_prev { border: 2px dashed #b3261e !important; }
        .planning-laravel .fc-timeline-event .fc-resizer { z-index: 3; }
        .planning-laravel .tour-contenu { position: absolute; inset: 0; display: flex; flex-direction: column; }
        .planning-laravel .tour-entete { flex: 1 1 auto; min-height: 0; display: flex; gap: 4px; align-items: flex-start; padding: 2px 5px; background: #e9edf2; }
        .planning-laravel .tour-textes { flex: 1 1 auto; min-width: 0; line-height: 1.2; }
        .planning-laravel .tour-client { font-size: .72rem; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
        .planning-laravel .tour-chantier { font-size: .68rem; color: #2f3631; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
        .planning-laravel .tour-badge { flex: none; font-size: .6rem; font-weight: 800; background: #1d221f; color: #fff; border-radius: 3px; padding: 0 4px; }
        .planning-laravel .tour-verrou { flex: none; font-size: .7rem; margin-top: 2px; }
        .planning-laravel .tour-phases { flex: none; display: flex; height: 15px; font-size: .68rem; font-weight: 700; }
        .planning-laravel .tour-phases div { overflow: hidden; }
        .planning-laravel .tour-vidange { color: #fff; text-shadow: 0 0 2px rgba(0,0,0,.6); display: flex; align-items: center; justify-content: center; white-space: nowrap; }
        .planning-laravel .tour-croix { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
        .planning-laravel .tour-blocage { align-items: center; justify-content: center; font-size: .75rem; font-weight: 700; padding: 0 6px; text-align: center; background-image: repeating-linear-gradient(45deg, rgba(255,255,255,.45) 0 6px, transparent 6px 12px); }
        .planning-laravel .fc-now-indicator-line { border-color: #b3261e; border-width: 0 0 0 2px; }
        .planning-laravel .fc-now-indicator-arrow { border-top-color: #b3261e; }

        /* Fiche de détail d'un tour */
        #fiche_tour { display: none; position: fixed; z-index: 1050; width: 330px; background: #fff; border: 1px solid #c9d0c8; border-radius: 8px; box-shadow: 0 10px 28px rgba(0,0,0,.18); overflow: hidden; color: #1d221f; font-size: .8rem; }
        #fiche_tour .fiche-entete { background: #28a745; color: #fff; padding: 8px 12px; display: flex; justify-content: space-between; align-items: flex-start; gap: 8px; }
        #fiche_tour .fiche-entete .client { font-weight: 700; font-size: .95rem; }
        #fiche_tour .fiche-entete .etat { flex: none; font-size: .7rem; font-weight: 700; background: #fff; color: #1e7e34; border-radius: 999px; padding: 2px 8px; }
        #fiche_tour .fiche-corps { padding: 10px 12px; display: flex; flex-direction: column; gap: 10px; }
        #fiche_tour .grille { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px 12px; }
        #fiche_tour .grille-heures { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2px 8px; margin-top: 6px; font-variant-numeric: tabular-nums; }
        #fiche_tour .etiquette { color: #5d665f; }
        #fiche_tour .frise { display: flex; height: 8px; border-radius: 4px; overflow: hidden; border: 1px solid #d3d8d2; }
        #fiche_tour .jauge { height: 6px; border-radius: 3px; background: #e6ebe5; margin-top: 4px; overflow: hidden; }
        #fiche_tour .jauge div { height: 6px; background: #28a745; }

        /* Fenêtres (blocage, tour prévisionnel) et notifications */
        #filtre { display: none; position: fixed; inset: 0; z-index: 1040; background: rgba(29,34,31,.45); }
        .fenetre-planning { display: none; position: fixed; z-index: 1045; top: 50%; left: 50%; transform: translate(-50%, -50%); width: min(560px, calc(100vw - 32px)); max-height: 85vh; overflow-y: auto; background: #fff; border-radius: 8px; box-shadow: 0 16px 40px rgba(0,0,0,.25); color: #1d221f; }
        #affiche_planning_prev { width: min(1000px, calc(100vw - 32px)); }
        .fenetre-planning .fenetre-entete { background: #28a745; color: #fff; padding: 10px 14px; display: flex; justify-content: space-between; align-items: center; position: sticky; top: 0; z-index: 2; }
        .fenetre-planning .fenetre-titre { font-weight: 700; font-size: 1.05rem; }
        .fenetre-planning .fenetre-sous-titre { font-size: .8rem; opacity: .9; }
        .fenetre-planning .fenetre-entete .fenetre-fermer { background: transparent; border: none; color: #fff; width: 36px; height: 36px; font-size: 1.1rem; cursor: pointer; }
        .fenetre-planning .fenetre-corps { padding: 14px; }
        .fenetre-planning .fenetre-actions { display: flex; gap: 8px; justify-content: flex-end; }
        #planning_toast { display: none; position: fixed; right: 18px; bottom: 18px; z-index: 1060; max-width: 420px; align-items: center; gap: 8px; background: #1d221f; color: #fff; border-radius: 6px; padding: 10px 14px; font-size: .85rem; box-shadow: 0 6px 18px rgba(0,0,0,.2); }
        #planning_toast.erreur { background: #8c1a13; }
    </style>

    <div class="planning-laravel">
        <div class="entete">
            <div class="entete-gauche">
                <h2>Planning</h2>
                <nav class="selecteur-ecran" aria-label="Type de planning">
                    @foreach($titres as $code_ecran => $titre_ecran)
                        <a href="{{ route('planning_laravel.index', ['type' => $code_ecran, 'date' => $date]) }}" class="lien-ecran {{ $code_ecran === $type ? 'actif' : '' }}" data-ecran="{{ $code_ecran }}">{{ $titre_ecran }}</a>
                    @endforeach
                </nav>
            </div>
            <div class="date-entete" id="date_entete"></div>
            <div class="liens-externes">
                <a class="bouton-clair" href="{{ url('vehicule_presence_centrale/') }}" target="_blank"><i class="fas fa-truck"></i> Présence véhicule</a>
                <a class="bouton-clair" href="{{ route('plan_charge_centrale.index') }}" target="_blank"><i class="fas fa-chart-bar"></i> Plan de charge</a>
                <a class="bouton-clair" href="{{ url('suivi_livraison/carte') }}" target="_blank"><i class="fas fa-map-marker-alt"></i> Carte</a>
                <button type="button" class="bouton-clair" id="plein_ecran" title="Plein écran (Échap pour sortir)"><i class="fas fa-expand"></i> <span>Plein écran</span></button>
            </div>
        </div>

        <div class="filtres">
            <div class="filtre">
                <label for="date_jour">Date <span class="texte-secondaire" id="libelle_date" style="font-weight: 600"></span></label>
                <div class="ligne-controles">
                    <button type="button" class="bouton-carre" id="jour_precedent" aria-label="Veille" title="Veille"><i class="fas fa-chevron-left"></i></button>
                    <input type="date" class="form-control" id="date_jour" value="{{ $date }}">
                    <button type="button" class="bouton-carre" id="jour_suivant" aria-label="Lendemain" title="Lendemain"><i class="fas fa-chevron-right"></i></button>
                    <button type="button" class="bouton-vert" id="aujourdhui">Aujourd'hui</button>
                </div>
            </div>
            <div class="filtre">
                <span class="libelle">Plage horaire</span>
                <div class="ligne-controles">
                    <input type="time" class="form-control" id="heure_debut" value="{{ $heure_debut }}" aria-label="Heure de début">
                    <span class="texte-secondaire">→</span>
                    <input type="time" class="form-control" id="heure_fin" value="{{ $heure_fin }}" aria-label="Heure de fin">
                </div>
            </div>
            <div class="filtre">
                <label for="duree_interval">Pas</label>
                <select class="form-control" id="duree_interval">
                    <option value="00:02:00">2 min</option>
                    <option value="00:05:00">5 min</option>
                    <option value="00:10:00">10 min</option>
                    <option value="00:15:00">15 min</option>
                    <option value="00:30:00" selected>30 min</option>
                </select>
            </div>
            <div class="filtre">
                <label for="recherche_vehicule">Véhicule</label>
                <div class="recherche">
                    <i class="fas fa-search"></i>
                    <input type="search" class="form-control" id="recherche_vehicule" placeholder="Code ou libellé">
                </div>
            </div>
            <div class="filtre actions-droite">
                <span class="libelle">Actualisé à <span id="heure_actualisation">--:--</span> <span class="texte-secondaire" style="font-weight: 600">· auto 5 min</span></span>
                <div class="ligne-controles" style="gap: 8px">
                    <button type="button" class="bouton-clair" id="rafraichir"><i class="fas fa-sync-alt"></i> Rafraîchir</button>
                    <button type="button" class="bouton-commandes" id="bouton_commandes" aria-pressed="true">Commandes <span class="compteur" id="nombre_commandes">0</span></button>
                </div>
            </div>
        </div>

        <section class="zone-centrales" aria-label="Centrales affichées">
            <button type="button" class="zone-centrales-entete" id="bouton_zone_centrales" aria-expanded="true" aria-controls="contenu_zone_centrales">
                <i class="fas fa-chevron-down chevron"></i>
                <span class="titre">Centrales</span>
                <span class="texte-secondaire" id="resume_centrales"></span>
            </button>
            <div class="puces-centrales" id="contenu_zone_centrales">
                @foreach($centrales_production as $centrale)
                    <button type="button" class="puce-centrale" aria-pressed="true" data-centrale="{{ $centrale->id_centrale }}" style="--couleur: {{ $centrale->centrale_couleur ?: '#9aa39b' }}">
                        <span class="point"></span>{{ $centrale->centrale_code }} · {{ $centrale->centrale_nom }}
                    </button>
                @endforeach
            </div>
        </section>

        <div class="zone-principale">
            <div class="carte-planning">
                <div class="barre-chargement" id="barre_chargement"><div></div></div>
                <div class="conteneur-calendrier"><div id="calendrier_planning" style="height: 100%"></div></div>
                <div class="legende">
                    <b>Légende</b>
                    <span><span class="echantillon" style="background: #ffe4b5"></span>Aller</span>
                    <span><span class="echantillon" style="background: #fff"></span>Attente</span>
                    <span><span class="echantillon" style="background: linear-gradient(90deg, #3b6fd1, #7b52c4)"></span>Vidange (couleur de la centrale)</span>
                    <span><span class="echantillon" style="background: #99ff99"></span>Retour</span>
                    <span>Bandeau = couleur du moyen de déchargement</span>
                    @if($type === 'prev_reel')
                        <span><span class="echantillon-bordure" style="border: 2px solid #1d221f"></span>Réel</span>
                        <span><span class="echantillon-bordure" style="border: 2px dashed #b3261e; opacity: .6"></span>Prévisionnel</span>
                    @else
                        <span><span class="echantillon-bordure" style="border: 2px solid #1d221f"></span>Réel, verrouillé <i class="fas fa-lock"></i></span>
                        <span><span class="echantillon-bordure" style="border: 1px solid #8a948c"></span>Planifié, déplaçable</span>
                    @endif
                    <span><span class="tour-badge" style="font-size: .6rem; font-weight: 800; background: #1d221f; color: #fff; border-radius: 3px; padding: 0 4px">{{ $type === 'prev' ? 'Livré' : 'BL' }}</span>{{ $type === 'prev' ? 'Of livré (barré)' : 'Produit (barré)' }}</span>
                    @if($type === 'prev')
                        <span><span class="echantillon" style="background: repeating-linear-gradient(45deg, #f0ad4e 0 4px, #f8d39e 4px 8px)"></span>Blocage</span>
                        <span class="texte-secondaire">Double-clic : sur un véhicule = nouveau blocage, sur un tour = modifier</span>
                    @endif
                </div>
            </div>

            <aside class="tiroir-commandes" id="tiroir_commandes" aria-label="Commandes du jour">
                <div class="tiroir-entete">
                    <span>Commandes du <span id="date_commandes"></span></span>
                    <button type="button" id="fermer_tiroir" aria-label="Masquer les commandes"><i class="fas fa-chevron-right"></i></button>
                </div>
                <div class="tiroir-filtres">
                    <div class="filtre">
                        <label for="commande_centrale">Centrale</label>
                        <select class="form-control" id="commande_centrale">
                            <option value="0">Toutes</option>
                            @foreach($centrales_commandes as $centrale)
                                <option value="{{ $centrale->id_centrale }}">{{ $centrale->centrale_code }} -> {{ $centrale->centrale_nom }}</option>
                            @endforeach
                        </select>
                    </div>
                    <button type="button" class="bouton-clair" id="bouton_legende_commandes" aria-expanded="false">Légende</button>
                </div>
                <div class="legende-commandes" id="legende_commandes">
                    <div><span class="heure-commande depart_depasse">08:00</span> départ théorique dépassé (aujourd'hui, rien de livré)</div>
                    <div><span class="heure-commande livraison_depassee">08:00</span> heure de livraison dépassée (aujourd'hui, rien de livré)</div>
                    <div><span class="heure-commande a_confirmer">08:00</span> heure à confirmer</div>
                    <div><span class="pastille-compte" style="display: inline-block; background: #28a745"></span> position de compte du client · <span class="client-comptant" style="font-weight: 700">client comptant</span></div>
                    <div><span class="badge-commande sous-centrale">Sous-centrale</span> <span class="badge-commande adjuvant">Adjuvant / ajout</span> <span class="badge-commande en-cours">En cours</span> <span class="badge-commande soldee">Soldée</span> <span class="badge-commande a-confirmer">… à confirmer</span></div>
                    <div>Jauge : <span style="color: #28a745; font-weight: 700">livré</span>, <span style="color: #6fbf80; font-weight: 700">planifié</span></div>
                    @if($type === 'prev_reel')
                        <div>En Réel / Prév, les commandes ne se glissent pas sur le planning.</div>
                    @endif
                </div>
                <div class="colonnes-commandes"><span></span><span>Heure</span><span>Client · chantier · formule</span><span>Cubage</span></div>
                <div class="liste-commandes" id="liste_commandes"><div class="liste-vide texte-secondaire">Chargement…</div></div>
            </aside>
        </div>
    </div>

    <div id="fiche_tour" role="dialog" aria-label="Détail du tour"></div>
    <div id="planning_toast" role="status"></div>
    <div id="filtre"></div>
    <div class="fenetre-planning" id="fenetre_blocage" role="dialog" aria-modal="true"></div>
    <div class="fenetre-planning" id="affiche_planning_prev" role="dialog" aria-modal="true"></div>
    {{-- Bouton appelé par la fiche de planification manuelle (commande) après enregistrement, comme dans le legacy --}}
    <button type="button" class="d-none" id="rafraichir_planning_prev"></button>

    <script src="{{ asset('inc/planning/packages/core/main.js') }}"></script>
    <script src="{{ asset('inc/planning/packages/interaction/main.js') }}"></script>
    <script src="{{ asset('inc/planning/packages-premium/timeline/main.js') }}"></script>
    <script src="{{ asset('inc/planning/packages-premium/resource-common/main.js') }}"></script>
    <script src="{{ asset('inc/planning/packages-premium/resource-timeline/main.js') }}"></script>
    <script src="{{ asset('inc/planning/packages/core/locales/fr.js') }}"></script>

    @include('planning_laravel.script')
@endsection