@extends('base')

@section('content')

    @include('partials.step_navigation')

    <div class="alert alert-success text-center">SUIVI DE LIVRAISON — COMMANDES EN COURS DE LIVRAISON</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>

    <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 {
            margin-bottom: 8px;
            padding: 6px 10px;
            border-radius: 4px;
            border: 3px solid #999;
            background: #f8f9fa;
            font-size: .85rem;
        }
        .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;
        }
        .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 { border-color: #adb5bd; background: #f1f2f3; }
        .legende-puce.statut-preparation { background: #adb5bd; }
        .vehicule-carte.statut-chargement { border-color: #0dcaf0; background: #e3f8fc; }
        .legende-puce.statut-chargement { background: #0dcaf0; }
        .vehicule-carte.statut-route { border-color: #007bff; background: #e7f1ff; }
        .legende-puce.statut-route { background: #007bff; }
        .vehicule-carte.statut-attente { border-color: #fd7e14; background: #fff1e2; }
        .legende-puce.statut-attente { background: #fd7e14; }
        .vehicule-carte.statut-dechargement { border-color: #6f42c1; background: #f1eafa; }
        .legende-puce.statut-dechargement { background: #6f42c1; }
        .vehicule-carte.statut-retour { border-color: #e0b800; background: #fff8db; }
        .legende-puce.statut-retour { background: #ffd400; }
        .vehicule-carte.statut-indefini { border-color: #6c757d; background: #eceded; }
        .legende-puce.statut-indefini { background: #6c757d; }
    </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>' +
                    '</div>';
            }

            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) + ' ' + 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();
            });

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

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

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

@endsection