@extends('base')

@section('content')

    @include('partials.step_navigation')

    <style>
        /* Titre de la feuille comme sur l'État des centrales : sans fond, même vert, souligné */
        .titre-suivi-livraison { margin: 10px 0 18px; padding-bottom: 10px; border-bottom: 3px solid #28a745; }
        .titre-suivi-livraison h2 { margin: 0; font-size: 1.5rem; font-weight: 700; color: #28a745; }
    </style>

    <div class="titre-suivi-livraison">
        <h2>Suivi de livraison — Commandes en cours de livraison</h2>
    </div>

    <div class="form-row align-items-end mb-3">
        <div class="form-group col-md-3">
            <label for="suivi_livraison_centrale_id"><b>Centrale :</b></label>
            <select class="form-control" id="suivi_livraison_centrale_id">
                <option value="0">-- Toutes les centrales --</option>
                @foreach($centrales as $centrale)
                    <option value="{{ $centrale->id_centrale }}">{{ $centrale->centrale_code }} -> {{ $centrale->centrale_nom }}</option>
                @endforeach
            </select>
        </div>
        <div class="form-group col-md-3">
            <label for="suivi_livraison_recherche"><b>Recherche :</b></label>
            <input type="text" class="form-control" id="suivi_livraison_recherche" placeholder="Commande, chantier, client, véhicule, BL...">
        </div>
        <div class="form-group col-md-4">
            <span class="badge badge-secondary suivi-livraison-date-badge" id="suivi_livraison_date">&nbsp;</span>
            <div class="spinner-border spinner-border-sm text-success ml-2" role="status" id="suivi_livraison_chargement" style="display:none;">
                <span class="sr-only">Chargement...</span>
            </div>
        </div>
        <div class="form-group col-md-2 ml-auto text-right">
            <button type="button" class="btn btn-outline-success btn-sm" id="suivi_livraison_refresh"><i class="fas fa-sync"></i> Actualiser</button>
        </div>
    </div>

    <div class="suivi-livraison-legende mb-3">
        <span class="legende-item"><span class="legende-puce statut-chargement"></span> Chargement</span>
        <span class="legende-item"><span class="legende-puce statut-route"></span> En route vers le chantier</span>
        <span class="legende-item"><span class="legende-puce statut-attente"></span> Attente sur chantier</span>
        <span class="legende-item"><span class="legende-puce statut-dechargement"></span> Vidange</span>
        <span class="legende-item"><span class="legende-puce statut-retour"></span> Retour vers la centrale</span>
        <span class="legende-item"><span class="legende-puce statut-indefini"></span> Non défini</span>
    </div>

    <div id="suivi_livraison_zone" class="suivi-livraison-zone"></div>

    <div id="suivi_livraison_vide" class="alert alert-info text-center" style="display:none;">
        Aucune commande en cours de livraison à cette date.
    </div>

    <div class="modal fade" id="modal_avancement" tabindex="-1" role="dialog" aria-hidden="true">
        <div class="modal-dialog modal-lg" role="document" style="max-width:820px">
            <div class="modal-content avancement">
                <div class="avancement-entete">
                    <div>
                        <span class="avancement-titre">Avancement de la livraison</span>
                        <span class="avancement-badge" id="avancement_statut"></span>
                        <div class="avancement-vehicule" id="avancement_vehicule"></div>
                    </div>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Fermer">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>

                <div id="avancement_chargement" class="text-center py-4">
                    <div class="spinner-border text-success" role="status"><span class="sr-only">Chargement...</span></div>
                </div>

                <div id="avancement_contenu" style="display:none;">
                    <div class="avancement-infos">
                        <div><span class="avancement-label">Client</span><span class="avancement-valeur" id="avancement_client"></span></div>
                        <div><span class="avancement-label">Chantier</span><span class="avancement-valeur" id="avancement_chantier"></span></div>
                        <div><span class="avancement-label">Formule</span><span class="avancement-valeur" id="avancement_formule"></span></div>
                        <div><span class="avancement-label">Quantité</span><span class="avancement-valeur" id="avancement_quantite"></span></div>
                    </div>
                    <div class="avancement-frise" id="avancement_frise"></div>
                </div>

                <div id="avancement_erreur" class="alert alert-danger m-3" style="display:none;">
                    Impossible de charger l'avancement de ce BL.
                </div>
            </div>
        </div>
    </div>

    <style>
        .suivi-livraison-date-badge {
            font-size: 1.2rem;
            font-weight: 600;
            padding: .5em .8em;
        }
        .suivi-livraison-zone {
            display: flex;
            flex-wrap: wrap;
            gap: 15px;
        }
        .commande-colonne {
            flex: 0 0 290px;
            max-width: 290px;
            background: #fff;
            border: 1px solid #ddd;
            border-radius: 6px;
            overflow: hidden;
            box-shadow: 0 1px 3px rgba(0,0,0,.08);
        }
        .commande-entete {
            background: #28a745;
            color: #fff;
            padding: 8px 10px;
        }
        .commande-entete .client-nom {
            display: block;
            font-size: .8rem;
            font-weight: 700;
            opacity: .9;
        }
        .commande-entete .chantier-code {
            font-weight: 700;
        }
        .commande-entete .commande-code {
            display: block;
            font-size: .8rem;
            opacity: .95;
        }
        .commande-entete .commande-qte {
            display: block;
            font-size: .75rem;
            opacity: .9;
            margin-top: 2px;
        }
        .commande-entete small {
            display: block;
            opacity: .9;
        }
        .commande-corps {
            padding: 8px;
            min-height: 60px;
        }
        .commande-vide {
            color: #999;
            font-size: .85rem;
            text-align: center;
            padding: 10px 0;
        }
        .vehicule-carte {
            position: relative;
            margin-bottom: 8px;
            padding: 6px 10px;
            border-radius: 4px;
            border: 3px solid #999;
            background: #f8f9fa;
            font-size: .85rem;
        }
        .vehicule-carte .vehicule-voir {
            position: absolute;
            right: 6px;
            bottom: 4px;
            border: 0;
            background: transparent;
            color: #555;
            padding: 2px 4px;
            cursor: pointer;
            line-height: 1;
        }
        .vehicule-carte .vehicule-voir:hover {
            color: #000;
        }
        .vehicule-carte:last-child {
            margin-bottom: 0;
        }
        .vehicule-carte .vehicule-code {
            font-weight: 700;
        }
        .vehicule-carte .vehicule-heure {
            float: right;
            color: #666;
        }
        .vehicule-carte .vehicule-bl {
            display: block;
            color: #777;
            font-size: .78rem;
        }
        .vehicule-carte .vehicule-centrale {
            display: block;
            color: #777;
            font-size: .78rem;
        }
        .vehicule-carte .vehicule-statut {
            display: block;
            font-weight: 600;
            margin-top: 2px;
            padding-right: 22px;
        }
        .legende-item {
            margin-right: 18px;
            font-size: .85rem;
        }
        .legende-puce {
            display: inline-block;
            width: 10px;
            height: 10px;
            border-radius: 50%;
            margin-right: 4px;
        }
        .vehicule-carte.statut-preparation, .avancement-badge.statut-preparation { border-color: #adb5bd; background: #f1f2f3; }
        .legende-puce.statut-preparation { background: #adb5bd; }
        .vehicule-carte.statut-chargement, .avancement-badge.statut-chargement { border-color: #0dcaf0; background: #e3f8fc; }
        .legende-puce.statut-chargement { background: #0dcaf0; }
        .vehicule-carte.statut-route, .avancement-badge.statut-route { border-color: #007bff; background: #e7f1ff; }
        .legende-puce.statut-route { background: #007bff; }
        .vehicule-carte.statut-attente, .avancement-badge.statut-attente { border-color: #fd7e14; background: #fff1e2; }
        .legende-puce.statut-attente { background: #fd7e14; }
        .vehicule-carte.statut-dechargement, .avancement-badge.statut-dechargement { border-color: #6f42c1; background: #f1eafa; }
        .legende-puce.statut-dechargement { background: #6f42c1; }
        .vehicule-carte.statut-retour, .avancement-badge.statut-retour { border-color: #e0b800; background: #fff8db; }
        .legende-puce.statut-retour { background: #ffd400; }
        .vehicule-carte.statut-indefini, .avancement-badge.statut-indefini { border-color: #6c757d; background: #eceded; }
        .legende-puce.statut-indefini { background: #6c757d; }

        .avancement {
            border-radius: 10px;
        }
        .avancement-entete {
            display: flex;
            justify-content: space-between;
            align-items: flex-start;
            padding: 18px 20px 8px;
        }
        .avancement-titre {
            font-size: 1.35rem;
            font-weight: 700;
            color: #222;
            margin-right: 8px;
            vertical-align: middle;
        }
        .avancement-badge {
            display: inline-block;
            vertical-align: middle;
            padding: 2px 10px;
            border: 2px solid #adb5bd;
            border-radius: 6px;
            font-size: .85rem;
            font-weight: 600;
            color: #333;
        }
        .avancement-badge:empty {
            display: none;
        }
        .avancement-vehicule {
            color: #666;
            margin-top: 4px;
        }
        .avancement-infos {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 14px 30px;
            padding: 10px 20px 16px;
            border-bottom: 1px solid #e5e5e5;
        }
        .avancement-label {
            display: block;
            font-size: .75rem;
            text-transform: uppercase;
            letter-spacing: .03em;
            color: #666;
        }
        .avancement-valeur {
            display: block;
            color: #222;
        }
        .avancement-frise {
            display: flex;
            padding: 36px 10px 22px;
            overflow-x: auto;
        }
        .avancement-etape {
            position: relative;
            flex: 1 1 0;
            min-width: 95px;
            text-align: center;
        }
        .avancement-etape::before {
            content: '';
            position: absolute;
            top: 10px;
            left: -50%;
            width: 100%;
            height: 2px;
            background: #ddd;
        }
        .avancement-etape:first-child::before {
            display: none;
        }
        .avancement-etape.atteinte::before {
            background: #4caf7d;
        }
        .avancement-ecart {
            position: absolute;
            top: -20px;
            left: -50%;
            width: 100%;
            font-family: monospace;
            font-size: .75rem;
            color: #555;
        }
        .avancement-pastille {
            position: relative;
            z-index: 1;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            width: 22px;
            height: 22px;
            border: 2px solid #ccc;
            border-radius: 50%;
            background: #fff;
            color: #fff;
            font-size: .65rem;
        }
        .avancement-etape.atteinte .avancement-pastille {
            border-color: transparent;
        }
        .avancement-etape-libelle {
            display: block;
            margin-top: 6px;
            font-size: .85rem;
            font-weight: 600;
            line-height: 1.2;
            color: #222;
        }
        .avancement-etape-heure {
            display: block;
            margin-top: 2px;
            font-family: monospace;
            font-size: .8rem;
            color: #444;
        }
        .avancement-etape:not(.atteinte) .avancement-etape-libelle,
        .avancement-etape:not(.atteinte) .avancement-etape-heure {
            color: #aaa;
        }
        .etape-cycle.atteinte .avancement-pastille { background: #0dcaf0; }
        .etape-depart-centrale.atteinte .avancement-pastille { background: #007bff; }
        .etape-arrivee-chantier.atteinte .avancement-pastille { background: #fd7e14; }
        .etape-debut-vidange.atteinte .avancement-pastille { background: #6f42c1; }
        .etape-fin-dechargement.atteinte .avancement-pastille { background: #6f42c1; }
        .etape-depart-chantier.atteinte .avancement-pastille { background: #ffd400; }
        .etape-retour-centrale.atteinte .avancement-pastille { background: #28a745; }
    </style>

    <script>
        $(document).ready(function() {
            $('title').text("SUIVI DE LIVRAISON - SMART CENTRAL");

            var rafraichissementEnCours = false;
            var minuteur = null;
            var dernieresCommandes = [];

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

            function formaterQte(qte) {
                return Number(qte || 0).toFixed(2) + ' m³';
            }

            function formaterDateFr(dateIso) {
                var parties = (dateIso || '').split('-');
                if (parties.length !== 3) {
                    return dateIso;
                }
                return parties[2] + '/' + parties[1] + '/' + parties[0];
            }

            function formaterHeureActuelle() {
                var maintenant = new Date();
                var deuxChiffres = function(n) { return (n < 10 ? '0' : '') + n; };
                return deuxChiffres(maintenant.getHours()) + ':' + deuxChiffres(maintenant.getMinutes());
            }

            function commandeCorrespondALaRecherche(commande, recherche) {
                if (!recherche) {
                    return true;
                }
                var champs = [commande.commande_code, commande.chantier_code, commande.client_nom];
                commande.vehicules.forEach(function(vehicule) {
                    champs.push(vehicule.code, vehicule.libelle, vehicule.bl_code, vehicule.centrale_nom);
                });
                return champs.some(function(champ) {
                    return (champ || '').toLowerCase().indexOf(recherche) !== -1;
                });
            }

            function construireCarteVehicule(vehicule) {
                return '' +
                    '<div class="vehicule-carte ' + vehicule.statut_classe + '">' +
                        '<span class="vehicule-heure">' + echapper(vehicule.heure) + '</span>' +
                        '<span class="vehicule-code">' + echapper(vehicule.code) + '</span>' +
                        (vehicule.libelle ? ' <small class="text-muted">' + echapper(vehicule.libelle) + '</small>' : '') +
                        '<span class="vehicule-bl">BL ' + echapper(vehicule.bl_code) + ' — ' + formaterQte(vehicule.bl_qte) + '</span>' +
                        (vehicule.centrale_nom ? '<span class="vehicule-centrale">' + echapper(vehicule.centrale_nom) + '</span>' : '') +
                        '<span class="vehicule-statut">' + echapper(vehicule.statut_libelle) + '</span>' +
                        '<button type="button" class="vehicule-voir" data-id-bl="' + echapper(vehicule.id_bl) + '" title="Voir l\'avancement de la livraison">' +
                            '<i class="fas fa-eye"></i>' +
                        '</button>' +
                    '</div>';
            }

            function construireEtapeAvancement(etape) {
                return '' +
                    '<div class="avancement-etape ' + etape.classe + (etape.atteinte ? ' atteinte' : '') + '">' +
                        (etape.ecart ? '<span class="avancement-ecart">' + echapper(etape.ecart) + '</span>' : '') +
                        '<span class="avancement-pastille">' + (etape.atteinte ? '<i class="fas fa-check"></i>' : '') + '</span>' +
                        '<span class="avancement-etape-libelle">' + echapper(etape.libelle) + '</span>' +
                        '<span class="avancement-etape-heure">' + (etape.heure ? echapper(etape.heure) : '–') + '</span>' +
                    '</div>';
            }

            var requeteAvancement = null;

            function afficherAvancement(idBl) {
                if (requeteAvancement) {
                    requeteAvancement.abort();
                }

                $('#avancement_contenu, #avancement_erreur').hide();
                $('#avancement_chargement').show();
                $('#avancement_statut').text('').attr('class', 'avancement-badge');
                $('#avancement_vehicule').text('');
                $('#modal_avancement').modal('show');

                requeteAvancement = $.get("{{ url('suivi_livraison/avancement') }}/" + encodeURIComponent(idBl), function(retour) {
                    $('#avancement_statut').text(retour.statut_libelle).attr('class', 'avancement-badge ' + retour.statut_classe);
                    $('#avancement_vehicule').text([retour.vehicule_code, retour.vehicule_libelle, 'BL ' + retour.bl_code].filter(Boolean).join(' · '));
                    $('#avancement_client').text(retour.client || '—');
                    $('#avancement_chantier').text(retour.chantier || '—');
                    $('#avancement_formule').text(retour.formule || '—');
                    $('#avancement_quantite').text(retour.quantite ? formaterQte(retour.quantite) : '—');
                    $('#avancement_frise').html(retour.etapes.map(construireEtapeAvancement).join(''));
                    $('#avancement_chargement').hide();
                    $('#avancement_contenu').show();
                }, 'json').fail(function(xhr, statut) {
                    if (statut === 'abort') {
                        return;
                    }
                    $('#avancement_chargement').hide();
                    $('#avancement_erreur').show();
                });
            }

            function construireColonneCommande(commande) {
                var corps = '<div class="commande-vide">Aucun véhicule actif</div>';
                if (commande.vehicules.length) {
                    corps = commande.vehicules.map(construireCarteVehicule).join('');
                }

                return '' +
                    '<div class="commande-colonne">' +
                        '<div class="commande-entete">' +
                            (commande.client_nom ? '<span class="client-nom">' + echapper(commande.client_nom) + '</span>' : '') +
                            '<span class="chantier-code">' + echapper(commande.chantier_code) + '</span>' +
                            (commande.chantier_adresse ? '<small>' + echapper(commande.chantier_adresse) + '</small>' : '') +
                            '<span class="commande-code">Commande ' + echapper(commande.commande_code) + '</span>' +
                            '<span class="commande-qte">Cdée ' + formaterQte(commande.qte_commandee) +
                                ' — Livrée ' + formaterQte(commande.qte_livree) +
                                ' — Reste ' + formaterQte(commande.qte_reste) + '</span>' +
                        '</div>' +
                        '<div class="commande-corps">' + corps + '</div>' +
                    '</div>';
            }

            function afficherCommandesFiltrees() {
                var recherche = $.trim($('#suivi_livraison_recherche').val() || '').toLowerCase();
                var commandesFiltrees = dernieresCommandes.filter(function(commande) {
                    return commandeCorrespondALaRecherche(commande, recherche);
                });

                if (!dernieresCommandes.length) {
                    $('#suivi_livraison_zone').empty();
                    $('#suivi_livraison_vide').text("Aucune commande en cours de livraison à cette date.").show();
                    return;
                }

                if (!commandesFiltrees.length) {
                    $('#suivi_livraison_zone').empty();
                    $('#suivi_livraison_vide').text("Aucun résultat pour cette recherche.").show();
                    return;
                }

                $('#suivi_livraison_vide').hide();
                $('#suivi_livraison_zone').html(commandesFiltrees.map(construireColonneCommande).join(''));
            }

            function chargerSuiviLivraison() {
                if (rafraichissementEnCours) {
                    return;
                }
                rafraichissementEnCours = true;
                $('#suivi_livraison_chargement').show();

                $.get("{{ route('suivi_livraison.data') }}", {
                    centrale_id: $('#suivi_livraison_centrale_id').val()
                }, function(retour) {
                    $('#suivi_livraison_date').text('Situation du ' + formaterDateFr(retour.date) + ' ' + (retour.heure || formaterHeureActuelle()));
                    dernieresCommandes = retour.commandes;
                    afficherCommandesFiltrees();
                }, 'json').always(function() {
                    rafraichissementEnCours = false;
                    $('#suivi_livraison_chargement').hide();
                });
            }

            $('#suivi_livraison_centrale_id').change(function(e) {
                e.preventDefault();
                chargerSuiviLivraison();
            });

            $('#suivi_livraison_recherche').on('input', function(e) {
                e.preventDefault();
                afficherCommandesFiltrees();
            });

            // Délégation : les cartes sont regénérées à chaque rafraîchissement.
            $('#suivi_livraison_zone').on('click', '.vehicule-voir', function(e) {
                e.preventDefault();
                afficherAvancement($(this).data('id-bl'));
            });

            $('#suivi_livraison_refresh').click(function(e) {
                e.preventDefault();
                chargerSuiviLivraison();
            });

            chargerSuiviLivraison();
            minuteur = setInterval(chargerSuiviLivraison, 20000);

            $(window).on('beforeunload', function() {
                if (minuteur) {
                    clearInterval(minuteur);
                }
            });
        });
    </script>

@endsection