{{-- État des camions : partial autonome (CSS + HTML + JS), sans @extends, pour être inclus dans une page dédiée
     (suivi_livraison/etat_camions.blade.php) ou plus tard dans un onglet. Variable attendue : $centrales.
     Le rafraîchissement automatique ne tourne que lorsque la zone est visible : dans un onglet Bootstrap,
     appeler EtatCamions.charger() sur l'événement shown.bs.tab pour mettre à jour immédiatement. --}}

<style>
    /* Couleurs des statuts = classes statut-* du suivi de livraison (suivi_livraison/index.blade.php) */
    .ec-g-retour { --ec-c: #e0b800; --ec-b: #fff8db; --ec-t: #6b5800; }
    .ec-g-vidange { --ec-c: #6f42c1; --ec-b: #f1eafa; --ec-t: #44277a; }
    .ec-g-attente { --ec-c: #fd7e14; --ec-b: #fff1e2; --ec-t: #8a4300; }
    .ec-g-route { --ec-c: #007bff; --ec-b: #e7f1ff; --ec-t: #004a99; }
    .ec-g-chargement { --ec-c: #0dcaf0; --ec-b: #e3f8fc; --ec-t: #055d6f; }
    .ec-g-indefini { --ec-c: #6c757d; --ec-b: #eceded; --ec-t: #3d4247; }
    .ec-g-centrale { --ec-c: #28a745; --ec-b: #e6f4ea; --ec-t: #176128; }
    .ec-g-inactif { --ec-c: #adb5bd; --ec-b: #f1f2f3; --ec-t: #50565c; }

    .ec-outils { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 10px; }
    /* Zone des centrales repliable, mêmes puces que planning_laravel/index.blade.php */
    .ec-zone-centrales { background: #fff; border: 1px solid #d3d8d2; border-radius: 8px; margin-bottom: 10px; }
    .ec-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; }
    .ec-zone-centrales-entete .titre { font-weight: 700; }
    .ec-zone-centrales-entete .resume { color: #5d665f; }
    .ec-zone-centrales-entete .chevron { font-size: .75rem; color: #5d665f; transition: transform .15s; }
    .ec-zone-centrales-entete[aria-expanded="false"] .chevron { transform: rotate(-90deg); }
    .ec-puces-centrales { display: flex; flex-wrap: wrap; gap: 6px; padding: 0 14px 12px; }
    .ec-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; }
    .ec-puce-centrale .point { width: 10px; height: 10px; border-radius: 50%; background: var(--couleur); }
    .ec-puce-centrale[aria-pressed="false"] { border: 1px dashed #9aa39b; color: #5d665f; }
    .ec-puce-centrale[aria-pressed="false"] .point { background: transparent; border: 2px solid var(--couleur); }
    .ec-resume { display: flex; flex-wrap: wrap; gap: 6px; margin-left: auto; }
    .ec-resume span { font-size: .78rem; font-weight: 700; padding: 2px 10px; border-radius: 999px; background: var(--ec-b); color: var(--ec-t); border: 1px solid var(--ec-c); }

    .ec-bande { margin-bottom: 14px; }
    .ec-bande-titre { display: flex; align-items: center; gap: 8px; padding: 5px 10px; margin-bottom: 8px; border-radius: 6px; background: var(--ec-b); color: var(--ec-t); border-left: 6px solid var(--ec-c); font-weight: 700; }
    .ec-bande-titre .ec-nb { margin-left: auto; font-weight: 400; font-size: .85rem; }
    .ec-grille { display: grid; grid-template-columns: repeat(auto-fill, minmax(270px, 1fr)); gap: 10px; }

    .ec-carte { border: 2px solid var(--ec-c); border-radius: 8px; background: #fff; font-size: .85rem; overflow: hidden; display: flex; flex-direction: column; }
    .ec-tete { display: flex; align-items: center; gap: 6px; padding: 5px 9px; background: var(--ec-b); color: var(--ec-t); }
    .ec-vehicule { display: flex; flex-direction: column; min-width: 0; line-height: 1.2; }
    .ec-code { font-weight: 800; font-size: 1.05rem; font-family: Consolas, monospace; }
    .ec-libelle { font-size: .78rem; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .ec-icone { width: 13px; margin-right: 4px; vertical-align: -2px; text-align: center; }
    .ec-chauffeur { font-size: .8rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .ec-droite { margin-left: auto; align-self: stretch; display: flex; flex-direction: column; align-items: flex-end; gap: 2px; flex-shrink: 0; }
    .ec-droite .ec-heure-cle:only-child { margin-top: auto; }
    .ec-heure-cle { font-size: .8rem; font-weight: 700; white-space: nowrap; }
    .ec-centrale { font-size: .68rem; font-weight: 700; color: #fff; padding: 0 5px; border-radius: 3px; }
    .ec-corps { padding: 6px 9px; color: #5d665f; line-height: 1.4; flex: 1; }
    .ec-corps b { color: #212529; }
    .ec-etapes { display: flex; gap: 3px; margin-top: 5px; }
    .ec-etapes i { flex: 1; height: 5px; border-radius: 3px; background: #e9ecef; }
    .ec-etapes i.fait { background: var(--ec-c); opacity: .45; }
    .ec-etapes i.encours { background: var(--ec-c); }
    .ec-suivant { display: flex; align-items: center; gap: 6px; padding: 5px 9px; border-top: 1px dashed #ced4da; color: #5d665f; font-size: .8rem; }
    .ec-suivant .ec-h { font-weight: 800; color: #212529; font-size: .9rem; font-variant-numeric: tabular-nums; }
    .ec-prev { font-size: .68rem; font-weight: 700; color: #5d665f; border: 1px dashed #9aa39b; border-radius: 3px; padding: 0 4px; white-space: nowrap; }
    .ec-suivant .ec-lieu { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
    .ec-marge { margin-left: auto; font-size: .72rem; font-weight: 700; padding: 1px 7px; border-radius: 4px; white-space: nowrap; }
    .ec-marge.ok { background: #d4edda; color: #155724; }
    .ec-marge.juste { background: #fff3cd; color: #856404; }
    .ec-marge.retard { background: #f8d7da; color: #721c24; }
    .ec-vide { color: #5d665f; padding: 20px; text-align: center; }
</style>

<section class="ec-zone-centrales" aria-label="Centrales affichées">
    <button type="button" class="ec-zone-centrales-entete" id="ec_bouton_zone_centrales" aria-expanded="true" aria-controls="ec_puces_centrales">
        <i class="fas fa-chevron-down chevron"></i>
        <span class="titre">Centrales</span>
        <span class="resume" id="ec_resume_centrales"></span>
    </button>
    <div class="ec-puces-centrales" id="ec_puces_centrales">
        @foreach($centrales as $centrale)
            <button type="button" class="ec-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="ec-outils">
    <button type="button" class="btn btn-sm btn-success" id="ec_rafraichir"><i class="fas fa-sync"></i> Rafraichir</button>
    <span class="text-muted small">actualisé à <span id="ec_heure">--:--</span></span>
    <div class="ec-resume" id="ec_resume"></div>
</div>

<div id="ec_zone"><div class="ec-vide">Chargement…</div></div>

<script>
    var EtatCamions = (function () {
        var SEUIL_MARGE_JUSTE = 10; // minutes : en dessous, la marge avant le tour suivant passe en orange
        // Volant (chauffeur) : pas d'icône équivalente dans Font Awesome 5.0.13 chargé par le site
        var ICONE_VOLANT = '<svg class="ec-icone" viewBox="0 0 16 16" width="13" height="13" aria-hidden="true" fill="none" stroke="currentColor" stroke-width="1.8">' +
            '<circle cx="8" cy="8" r="6.3"/><circle cx="8" cy="8" r="1.6" fill="currentColor"/>' +
            '<path d="M1.9 7.2 6.4 7.7M14.1 7.2 9.6 7.7M8 9.6v4.7"/></svg>';
        var groupes = {
            retour: { libelle: 'Retour vers la centrale', icone: 'fa-undo' },
            vidange: { libelle: 'Vidange', icone: 'fa-tint' },
            attente: { libelle: 'Attente sur chantier', icone: 'fa-hourglass-half' },
            route: { libelle: 'En route vers le chantier', icone: 'fa-truck' },
            chargement: { libelle: 'Chargement', icone: 'fa-industry' },
            indefini: { libelle: 'Non défini', icone: 'fa-question' },
            centrale: { libelle: 'À la centrale, prochain départ', icone: 'fa-clock' },
            inactif: { libelle: 'Inactifs (sans livraison prévue)', icone: 'fa-moon' }
        };
        var resumes = { retour: 'retour', vidange: 'vidange', attente: 'attente', route: 'route', chargement: 'charg.', indefini: 'non déf.', centrale: 'centrale', inactif: 'inactif' };
        var zone = $('#ec_zone');
        var toutesCentrales = true;

        function echapper(texte) {
            return $('<div>').text(texte == null ? '' : texte).html();
        }

        function nombre(valeur) {
            return Number(valeur).toLocaleString('fr-FR', { maximumFractionDigits: 1 });
        }

        function duree(minutes) {
            minutes = Math.abs(minutes);
            return minutes < 60 ? minutes + ' min' : Math.floor(minutes / 60) + 'h' + String(minutes % 60).padStart(2, '0');
        }

        function pastille_marge(camion) {
            var marge = camion.tour_suivant.marge;
            if (marge === null) return '';
            if (camion.bl) {
                if (marge < 0) return '<span class="ec-marge retard">retard ' + duree(marge) + '</span>';
                return '<span class="ec-marge ' + (marge < SEUIL_MARGE_JUSTE ? 'juste' : 'ok') + '">marge ' + duree(marge) + '</span>';
            }
            if (marge < 0) return '<span class="ec-marge retard">départ dépassé ' + duree(marge) + '</span>';
            return '<span class="ec-marge ' + (marge < SEUIL_MARGE_JUSTE ? 'juste' : 'ok') + '">dans ' + duree(marge) + '</span>';
        }

        function carte(camion) {
            // Code et libellé du véhicule sur deux lignes
            var tete = '<span class="ec-vehicule"><span class="ec-code">' + echapper(camion.code) + '</span>' +
                (camion.libelle ? '<span class="ec-libelle" title="' + echapper(camion.libelle) + '">' + echapper(camion.libelle) + '</span>' : '') +
                '</span>';
            // À droite : pastille de centrale en haut, heure clé du statut en 2e ligne
            var heureCle = '';
            if (camion.heure_cle) {
                heureCle = echapper(camion.heure_cle_libelle) + ' ' + echapper(camion.heure_cle) +
                    (camion.heure_cle_dans !== null ? ' · ' + (camion.heure_cle_dans <= 0 ? 'imminent' : duree(camion.heure_cle_dans)) : '');
            } else if (camion.depuis) {
                heureCle = (camion.bl ? 'depuis ' : 'rentré à ') + echapper(camion.depuis);
            }
            var centrale = toutesCentrales && camion.centrale_code
                ? '<span class="ec-centrale" style="background:' + echapper(camion.centrale_couleur) + '">' + echapper(camion.centrale_code) + '</span>'
                : '';
            if (centrale || heureCle) {
                tete += '<span class="ec-droite">' + centrale + (heureCle ? '<span class="ec-heure-cle">' + heureCle + '</span>' : '') + '</span>';
            }

            // Le chauffeur passe dans le corps pour laisser la place au libellé du véhicule dans l'en-tête
            var chauffeur = camion.chauffeur ? '<div class="ec-chauffeur">' + ICONE_VOLANT + ' ' + echapper(camion.chauffeur) + '</div>' : '';
            var corps = '';
            if (camion.bl) {
                corps = chauffeur + '<i class="fas fa-user ec-icone" aria-hidden="true"></i><b>' + echapper(camion.bl.client) + '</b> · ' + echapper(camion.bl.chantier) + '<br>' +
                    'BL ' + echapper(camion.bl.code) + ' · ' + nombre(camion.bl.quantite) + ' m³';
                if (camion.heure_cle && camion.depuis) corps += ' · depuis ' + echapper(camion.depuis);
                if (camion.retour_estime && camion.groupe !== 'retour') corps += '<br>retour estimé <b>' + echapper(camion.retour_estime) + '</b>';
                if (camion.groupe !== 'indefini') corps += etapes(camion.etape);
                corps = '<div class="ec-corps">' + corps + '</div>';
            } else if (chauffeur || camion.rotations) {
                corps = '<div class="ec-corps">' + chauffeur + (camion.rotations ? camion.rotations + ' rotation(s) aujourd\'hui' : '') + '</div>';
            }

            var suivant;
            if (camion.tour_suivant) {
                var t = camion.tour_suivant;
                var lieu = [t.client, t.chantier].filter(Boolean).join(' · ');
                suivant = '<i class="fas fa-step-forward" aria-hidden="true"></i>' +
                    '<span class="ec-h">' + echapper(t.heure) + '</span>' +
                    (t.source === 'prev' ? '<span class="ec-prev" title="Aucun tour suivant au planning réel : tour du planning prévisionnel">prév.</span>' : '') +
                    '<span class="ec-lieu" title="' + echapper(lieu + ' · ' + nombre(t.quantite) + ' m³' + (t.centrale_code ? ' · centrale ' + t.centrale_code : '')) + '">' + echapper(lieu) + '</span>' +
                    pastille_marge(camion);
            } else {
                suivant = '<i class="fas fa-moon" aria-hidden="true"></i> Aucun tour suivant prévu';
            }

            return '<div class="ec-carte"><div class="ec-tete">' + tete + '</div>' + corps + '<div class="ec-suivant">' + suivant + '</div></div>';
        }

        // 4 segments : aller, attente, vidange, retour ; etape = 0 (chargement) à 4 (retour)
        function etapes(etape) {
            var html = '';
            for (var i = 1; i <= 4; i++) {
                html += '<i class="' + (i < etape ? 'fait' : (i === etape ? 'encours' : '')) + '"></i>';
            }
            return '<div class="ec-etapes" title="Aller · attente · vidange · retour">' + html + '</div>';
        }

        function afficher(retour) {
            $('#ec_heure').text(retour.heure);
            // Pastille de centrale sur chaque carte dès que plusieurs centrales sont affichées
            toutesCentrales = centralesCochees().length !== 1;

            var parGroupe = {};
            retour.camions.forEach(function (c) { (parGroupe[c.groupe] = parGroupe[c.groupe] || []).push(c); });

            $('#ec_resume').html(retour.groupes.map(function (g) {
                return parGroupe[g] ? '<span class="ec-g-' + g + '">' + parGroupe[g].length + ' ' + resumes[g] + '</span>' : '';
            }).join(''));

            var html = retour.groupes.map(function (g) {
                var camions = parGroupe[g];
                if (!camions) return '';
                var nb = camions.length + ' camion' + (camions.length > 1 ? 's' : '') + (g === 'retour' ? ' · le plus proche en premier' : '');
                return '<div class="ec-bande ec-g-' + g + '">' +
                    '<div class="ec-bande-titre"><i class="fas ' + groupes[g].icone + '" aria-hidden="true"></i>' + groupes[g].libelle + '<span class="ec-nb">' + nb + '</span></div>' +
                    '<div class="ec-grille">' + camions.map(carte).join('') + '</div></div>';
            }).join('');

            zone.html(html || '<div class="ec-vide">Aucun camion présent ou en livraison aujourd\'hui sur ces centrales.</div>');
        }

        function charger() {
            $.getJSON('{{ route('suivi_livraison.etat_camions_donnees') }}', { centrales: centralesCochees() }, afficher);
        }

        // Puces des centrales, comme planning_laravel : aucune cochée = toutes
        function centralesCochees() {
            return $('.ec-puce-centrale[aria-pressed="true"]').map(function () { return $(this).data('centrale'); }).get();
        }

        function resumerCentrales() {
            var total = $('.ec-puce-centrale').length;
            var cochees = $('.ec-puce-centrale[aria-pressed="true"]');
            var noms = cochees.map(function () { return $.trim($(this).text()); }).get();
            // Zone repliée : le résumé rappelle quelles centrales sont affichées
            $('#ec_resume_centrales').text(cochees.length + ' / ' + total + ' affichées'
                + (cochees.length && cochees.length < total ? ' : ' + noms.join(', ') : ''));
        }

        function memoriser(cle, valeur) {
            try {
                localStorage.setItem(cle, valeur);
            } catch (e) {
                // Stockage indisponible : l'état n'est simplement pas retenu
            }
        }

        function relire(cle) {
            try {
                return localStorage.getItem(cle);
            } catch (e) {
                return null;
            }
        }

        function afficherZoneCentrales(visible) {
            $('#ec_puces_centrales').toggle(visible);
            $('#ec_bouton_zone_centrales').attr('aria-expanded', visible ? 'true' : 'false');
            memoriser('etat_camions_centrales_masquees', visible ? '0' : '1');
        }

        $('.ec-puce-centrale').click(function () {
            $(this).attr('aria-pressed', $(this).attr('aria-pressed') === 'true' ? 'false' : 'true');
            memoriser('etat_camions_centrales', JSON.stringify(centralesCochees()));
            resumerCentrales();
            charger();
        });
        $('#ec_bouton_zone_centrales').click(function () {
            afficherZoneCentrales($(this).attr('aria-expanded') !== 'true');
        });

        // Sélection et repli retenus dans le navigateur (écran mural rouvert chaque jour)
        try {
            var retenues = JSON.parse(relire('etat_camions_centrales'));
            if (Array.isArray(retenues)) {
                $('.ec-puce-centrale').each(function () {
                    $(this).attr('aria-pressed', retenues.indexOf($(this).data('centrale')) !== -1 ? 'true' : 'false');
                });
            }
        } catch (e) {
            // Valeur illisible : toutes les centrales restent cochées
        }
        afficherZoneCentrales(relire('etat_camions_centrales_masquees') !== '1');
        resumerCentrales();
        $('#ec_rafraichir').click(function (e) {
            e.preventDefault();
            charger();
        });

        // Pas d'appel inutile quand la zone est masquée (onglet inactif) ou la fenêtre en arrière-plan
        setInterval(function () {
            if (!document.hidden && zone.is(':visible')) charger();
        }, 20000);

        $(charger);

        return { charger: charger };
    })();
</script>