@extends('planning_laravel.layout')

@section('content')

<link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css">
<script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"></script>

<style>
    /* Page plein écran (layout des plannings, sans en-tête ni menus) : la carte occupe toute la hauteur restante */
    .carte-livraison { height: calc(100vh - 8px); display: flex; flex-direction: column; padding-bottom: 10px; }
    .carte-livraison .entete { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 10px; margin: 0 0 10px; padding-bottom: 8px; border-bottom: 3px solid #28a745; }
    .carte-livraison .entete h2 { font-size: 1.5rem; font-weight: 700; margin: 0; color: #28a745; }
    .carte-livraison .entete .sous-titre { color: #5d665f; font-size: .9rem; }
    .carte-livraison .outils { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
    .carte-livraison .outils select { width: auto; min-width: 200px; }

    .carte-livraison .legende { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; }
    .carte-livraison .legende span { font-size: .8rem; font-weight: 600; padding: 2px 10px; border-radius: 999px; color: #fff; }

    .carte-livraison .zone { flex: 1; min-height: 0; display: grid; grid-template-columns: 1fr 320px; gap: 12px; }
    @media (max-width: 991px) { .carte-livraison { height: auto; } .carte-livraison .zone { grid-template-columns: 1fr; } }
    #carte { height: 100%; min-height: 450px; border: 1px solid #d3d8d2; border-radius: 8px; }

    .carte-livraison .panneau { border: 1px solid #d3d8d2; border-radius: 8px; background: #fff; display: flex; flex-direction: column; min-height: 450px; max-height: 100%; }
    .carte-livraison .panneau h3 { font-size: 1rem; font-weight: 700; margin: 0; padding: 10px 12px; border-bottom: 1px solid #e9ebe7; }
    .carte-livraison .liste { overflow-y: auto; flex: 1; }
    .carte-livraison .toupie-ligne { display: grid; grid-template-columns: auto 1fr auto; gap: 2px 8px; padding: 8px 12px; border-bottom: 1px solid #f0f2ef; cursor: pointer; align-items: center; }
    .carte-livraison .toupie-ligne:hover { background: #dff0d8; }
    .carte-livraison .toupie-ligne .code { font-weight: 700; font-family: Consolas, monospace; }
    .carte-livraison .toupie-ligne .detail { grid-column: 1 / -1; font-size: .8rem; color: #5d665f; }
    .carte-livraison .toupie-ligne .heure { font-size: .8rem; color: #5d665f; font-variant-numeric: tabular-nums; }
    .carte-livraison .badge-statut { font-size: .72rem; font-weight: 700; padding: 1px 8px; border-radius: 999px; color: #fff; white-space: nowrap; justify-self: start; }
    .carte-livraison .avertissement { font-size: .8rem; color: #9a5b00; background: #fbecd2; padding: 8px 12px; border-top: 1px solid #f0d9ad; }
    .carte-livraison .vide { color: #5d665f; padding: 20px 12px; text-align: center; font-size: .9rem; }

    /* marqueurs */
    .marqueur-centrale { display: flex; align-items: center; justify-content: center; width: 38px !important; height: 26px !important; border-radius: 4px; color: #fff; font-weight: 800; font-size: 12px; border: 2px solid #fff; box-shadow: 0 1px 4px rgba(0,0,0,.45); }
    .marqueur-centrale.estimee { border-style: dashed; }
    .marqueur-toupie { white-space: nowrap; display: inline-block; padding: 1px 7px; border-radius: 10px; color: #fff; font-weight: 700; font-size: 11px; font-family: Consolas, monospace; border: 2px solid #fff; box-shadow: 0 1px 4px rgba(0,0,0,.45); }
    .leaflet-div-icon.icone-vide { background: transparent; border: 0; }
    .popup-carte b { font-size: .95rem; }
    .popup-carte .gris { color: #5d665f; }
</style>

<div class="carte-livraison">
    <div class="entete">
        <div>
            <h2>Carte des chantiers et toupies du jour</h2>
            <div class="sous-titre">
                <span id="date_carte">--/--/----</span> · actualisée à <span id="heure_actualisation">--:--</span> ·
                position des toupies déduite des heures de leur BL en cours
            </div>
        </div>
        <div class="outils">
            <select id="centrale_id" class="form-control form-control-sm">
                <option value="0">Toutes mes centrales</option>
                @foreach($centrales as $centrale)
                    <option value="{{ $centrale->id_centrale }}">{{ $centrale->centrale_code }} - {{ $centrale->centrale_nom }}</option>
                @endforeach
            </select>
            <button type="button" class="btn btn-sm btn-success" id="rafraichir">Rafraichir</button>
            <a href="{{ route('suivi_livraison.index') }}" class="btn btn-sm btn-success" target="_blank">Suivi de livraison</a>
            <button type="button" class="btn btn-sm btn-outline-success" id="plein_ecran" title="Plein écran (Échap pour sortir)"><i class="fas fa-expand"></i> <span>Plein écran</span></button>
        </div>
    </div>

    <div class="legende" id="legende"></div>

    <div class="zone">
        <div id="carte"></div>
        <div class="panneau">
            <h3>Toupies <span class="badge badge-success" id="nb_toupies">0</span> · Chantiers <span class="badge badge-success" id="nb_chantiers">0</span></h3>
            <div class="liste" id="liste_toupies"><div class="vide">Chargement…</div></div>
            <div class="avertissement" id="avertissement" style="display:none"></div>
        </div>
    </div>
</div>

<script>
    $(function() { // Dom ready

        $('title').text("CARTE DES LIVRAISONS - SMART CENTRAL");

        // Statuts de determiner_statut() (suivi_livraison_controller) + rentrée centrale
        var statuts = {
            // Couleurs = puces de légende du suivi de livraison (suivi_livraison/index.blade.php) ; texte foncé sur les couleurs claires
            'statut-preparation': { libelle: 'En préparation', couleur: '#adb5bd', texte: '#fff', position: 'centrale' },
            'statut-chargement': { libelle: 'Chargement', couleur: '#0dcaf0', texte: '#212529', position: 'centrale' },
            'statut-route': { libelle: 'En route', couleur: '#007bff', texte: '#fff', position: 'trajet' },
            'statut-attente': { libelle: 'Attente sur chantier', couleur: '#fd7e14', texte: '#fff', position: 'chantier' },
            'statut-dechargement': { libelle: 'Vidange', couleur: '#6f42c1', texte: '#fff', position: 'chantier' },
            'statut-retour': { libelle: 'Retour centrale', couleur: '#ffd400', texte: '#212529', position: 'trajet' },
            'statut-rentre': { libelle: 'Rentrée', couleur: '#28a745', texte: '#fff', position: 'centrale' },
            'statut-indefini': { libelle: 'Non défini', couleur: '#6c757d', texte: '#fff', position: null }
        };

        function style_statut(statut) {
            return 'background:' + statut.couleur + ';color:' + statut.texte;
        }
        var ordre_statuts = Object.keys(statuts);

        var carte = L.map('carte').setView([46.6, 2.4], 6);
        L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
            maxZoom: 19,
            attribution: '&copy; contributeurs OpenStreetMap'
        }).addTo(carte);

        var calque_trajets = L.layerGroup().addTo(carte);
        var calque_chantiers = L.layerGroup().addTo(carte);
        var calque_centrales = L.layerGroup().addTo(carte);
        var calque_toupies = L.layerGroup().addTo(carte);
        var marqueurs_toupies = {};
        var cadrage_fait = false;

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

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

        function mention_source(objet) {
            return objet.source === 'adresse' ? '<br><span class="gris"><i>Position estimée d\'après l\'adresse</i></span>' : '';
        }

        function point(objet) {
            return objet && objet.lat !== null && objet.lng !== null ? [objet.lat, objet.lng] : null;
        }

        // Position d'une toupie d'après son statut : centrale, chantier, ou mi-chemin sur le trajet
        function position_toupie(toupie, centrale, chantier) {
            var p_centrale = point(centrale), p_chantier = point(chantier);
            var position = (statuts[toupie.statut_classe] || {}).position;

            if (position === 'centrale') return p_centrale;
            if (position === 'chantier') return p_chantier;
            if (position === 'trajet') {
                if (p_centrale && p_chantier) {
                    return [(p_centrale[0] + p_chantier[0]) / 2, (p_centrale[1] + p_chantier[1]) / 2];
                }
                return p_chantier || p_centrale;
            }
            return null;
        }

        function afficher(retour) {
            $('#date_carte').text(retour.date);
            $('#heure_actualisation').text(retour.heure);

            var centrales = {}, chantiers = {};
            retour.centrales.forEach(function (c) { centrales[c.id] = c; });
            retour.chantiers.forEach(function (c) { chantiers[c.id] = c; });

            calque_trajets.clearLayers();
            calque_chantiers.clearLayers();
            calque_centrales.clearLayers();
            calque_toupies.clearLayers();
            marqueurs_toupies = {};
            var limites = [];

            // Centrales
            retour.centrales.forEach(function (c) {
                var p = point(c);
                if (!p) return;
                limites.push(p);
                L.marker(p, {
                    icon: L.divIcon({ className: 'icone-vide', html: '<div class="marqueur-centrale' + (c.source === 'adresse' ? ' estimee' : '') + '" style="background:' + echapper(c.couleur) + '">' + echapper(c.code) + '</div>', iconSize: [38, 26], iconAnchor: [19, 13] }),
                    zIndexOffset: 500
                }).bindPopup('<div class="popup-carte"><b>Centrale ' + echapper(c.code) + '</b><br>' + echapper(c.nom) + mention_source(c) + '</div>').addTo(calque_centrales);
            });

            // Toupies regroupées par chantier pour les popups
            var toupies_par_chantier = {};
            retour.toupies.forEach(function (t) { (toupies_par_chantier[t.chantier_id] = toupies_par_chantier[t.chantier_id] || []).push(t); });

            // Chantiers : cercle à la couleur de la centrale, taille selon le volume livré
            retour.chantiers.forEach(function (c) {
                var p = point(c);
                if (!p) return;
                limites.push(p);
                var centrale = centrales[c.centrale_id];
                var couleur = centrale ? centrale.couleur : '#28a745';
                var liste_toupies = (toupies_par_chantier[c.id] || []).map(function (t) {
                    return echapper(t.code) + ' · ' + echapper(t.statut_libelle);
                }).join('<br>');
                L.circleMarker(p, {
                    radius: Math.min(18, 6 + Math.sqrt(c.volume) * 1.5),
                    color: couleur, weight: 3, fillColor: '#ffffff', fillOpacity: .85,
                    dashArray: c.source === 'adresse' ? '4 4' : null
                }).bindPopup(
                    '<div class="popup-carte"><b>' + echapper(c.nom) + '</b><br>' +
                    '<span class="gris">' + echapper(c.client) + '</span><br>' +
                    echapper(c.adresse) + mention_source(c) + '<br>' +
                    '<b>' + nombre(c.volume) + ' m³</b> · ' + c.nb_bl + ' BL' +
                    (liste_toupies ? '<hr class="my-1">' + liste_toupies : '') + '</div>'
                ).addTo(calque_chantiers);
            });

            // Toupies : empilées quand plusieurs sont au même endroit
            var empilement = {}, non_placees = [];
            retour.toupies.forEach(function (t) {
                var centrale = centrales[t.centrale_id], chantier = chantiers[t.chantier_id];
                var p = position_toupie(t, centrale, chantier);
                var statut = statuts[t.statut_classe] || statuts['statut-indefini'];
                if (!p) { non_placees.push(t); return; }

                if (statut.position === 'trajet' && point(centrale) && point(chantier)) {
                    L.polyline([point(centrale), point(chantier)], { color: statut.couleur, weight: 2, dashArray: '6 6', opacity: .8 }).addTo(calque_trajets);
                }

                var cle = p[0].toFixed(5) + ',' + p[1].toFixed(5);
                var rang = empilement[cle] = (empilement[cle] === undefined ? 0 : empilement[cle] + 1);
                var marqueur = L.marker(p, {
                    icon: L.divIcon({
                        className: 'icone-vide',
                        html: '<span class="marqueur-toupie" style="' + style_statut(statut) + '">' + echapper(t.code) + '</span>',
                        iconSize: null,
                        iconAnchor: [-14, 10 + rang * 22]
                    }),
                    zIndexOffset: 1000
                }).bindPopup(
                    '<div class="popup-carte"><b>' + echapper(t.code) + '</b> ' + echapper(t.libelle) + '<br>' +
                    '<span class="badge-statut" style="' + style_statut(statut) + ';padding:1px 8px;border-radius:999px">' + echapper(t.statut_libelle) + '</span>' +
                    (t.heure ? ' depuis ' + echapper(t.heure) : '') + '<br>' +
                    'BL ' + echapper(t.bl_code) + ' · ' + nombre(t.bl_qte) + ' m³<br>' +
                    '<span class="gris">' + echapper(chantier ? chantier.nom : '') + ' · ' + t.rotations + ' rotation(s) aujourd\'hui</span></div>'
                ).addTo(calque_toupies);
                marqueurs_toupies[t.id] = marqueur;
            });

            if (!cadrage_fait && limites.length) {
                carte.fitBounds(limites, { padding: [30, 30], maxZoom: 13 });
                cadrage_fait = true;
            }

            afficher_legende(retour.toupies);
            afficher_liste(retour.toupies, chantiers);
            afficher_avertissement(retour, non_placees);
        }

        function afficher_legende(toupies) {
            var html = ordre_statuts.map(function (cle) {
                var nb = toupies.filter(function (t) { return t.statut_classe === cle; }).length;
                return nb ? '<span style="' + style_statut(statuts[cle]) + '">' + statuts[cle].libelle + ' : ' + nb + '</span>' : '';
            }).join('');
            $('#legende').html(html);
        }

        function afficher_liste(toupies, chantiers) {
            $('#nb_toupies').text(toupies.length);
            $('#nb_chantiers').text(Object.keys(chantiers).length);

            var triees = toupies.slice().sort(function (a, b) {
                return ordre_statuts.indexOf(a.statut_classe) - ordre_statuts.indexOf(b.statut_classe) || a.code.localeCompare(b.code);
            });

            $('#liste_toupies').html(triees.length ? triees.map(function (t) {
                var statut = statuts[t.statut_classe] || statuts['statut-indefini'];
                var chantier = chantiers[t.chantier_id];
                return '<div class="toupie-ligne" data-id="' + t.id + '">' +
                    '<span class="code">' + echapper(t.code) + '</span>' +
                    '<span class="badge-statut" style="' + style_statut(statut) + '">' + echapper(t.statut_libelle) + '</span>' +
                    '<span class="heure">' + echapper(t.heure || '') + '</span>' +
                    '<span class="detail">' + echapper(chantier ? chantier.nom : '') + ' · ' + nombre(t.bl_qte) + ' m³ · ' + t.rotations + ' rot.</span>' +
                '</div>';
            }).join('') : '<div class="vide">Aucune toupie n\'a de BL aujourd\'hui.</div>');
        }

        function afficher_avertissement(retour, non_placees) {
            var messages = [];
            var centrales_sans = retour.centrales.filter(function (c) { return !point(c); });
            var chantiers_sans = retour.chantiers.filter(function (c) { return !point(c); });
            var par_adresse = retour.centrales.concat(retour.chantiers).filter(function (c) { return c.source === 'adresse'; }).length;
            if (par_adresse) {
                messages.push(par_adresse + ' centrale(s) ou chantier(s) placé(s) d\'après leur adresse, faute de coordonnées GPS (contour en pointillé).');
            }
            if (centrales_sans.length) {
                messages.push(centrales_sans.length + ' centrale(s) non placée(s) (' + centrales_sans.map(function (c) { return echapper(c.code); }).join(', ') + ') : ni coordonnées ni adresse trouvée, à renseigner dans la fiche centrale.');
            }
            if (chantiers_sans.length) {
                messages.push(chantiers_sans.length + ' chantier(s) livré(s) non placé(s) : ni coordonnées ni adresse trouvée.');
            }
            if (non_placees.length) {
                messages.push(non_placees.length + ' toupie(s) non placée(s) sur la carte (statut non défini ou position manquante).');
            }
            $('#avertissement').html(messages.join('<br>')).toggle(messages.length > 0);
        }

        function charger() {
            $.getJSON('{{ route('suivi_livraison.carte_donnees') }}', { centrale_id: $('#centrale_id').val() }, afficher);
        }

        $('#liste_toupies').on('click', '.toupie-ligne', function () {
            var marqueur = marqueurs_toupies[$(this).data('id')];
            if (marqueur) {
                carte.setView(marqueur.getLatLng(), Math.max(carte.getZoom(), 13));
                marqueur.openPopup();
            }
        });

        $('#centrale_id').change(function () {
            cadrage_fait = false;
            charger();
        });
        $('#rafraichir').click(function (e) {
            e.preventDefault();
            charger();
        });

        // Plein écran du navigateur (masque aussi la barre d'adresse et les onglets)
        $('#plein_ecran').click(function () {
            if (document.fullscreenElement) {
                document.exitFullscreen();
            } else if (document.documentElement.requestFullscreen) {
                document.documentElement.requestFullscreen();
            }
        });
        $(document).on('fullscreenchange', function () {
            var actif = Boolean(document.fullscreenElement);
            $('#plein_ecran i').toggleClass('fa-expand', !actif).toggleClass('fa-compress', actif);
            $('#plein_ecran span').text(actif ? 'Quitter le plein écran' : 'Plein écran');
            carte.invalidateSize();
        });

        charger();
        setInterval(charger, 60000);
    });
</script>

@endsection