@extends('base')
@section('content')

    <div class="text-center alert alert-success">
        <h2>KPI</h2>
    </div>

    <div class="form-row">
        <div class="form-group col-md-3">
            <label for="date_debut"><b>Début :</b></label>
            <input type="date" class="form-control" style="color:black !important" id="date_debut" value="{{$dates['debut']}}">
        </div>
        <div class="form-group col-md-3">
            <label for="date_fin"><b>Fin :</b></label>
            <input type="date" class="form-control" style="color:black !important" id="date_fin" value="{{$dates['fin']}}">
        </div>
        <div class="form-group col-md-4">
            <label for="centrale"><b>Centrale :</b></label>
            <select name="centrale" id="centrale" class="form-control">
                <option value="0">Toutes</option>
                @foreach($centrales as $centrale)
                    <option value="{{$centrale->id_centrale}}">{{$centrale->centrale_code}} -> {{$centrale->centrale_nom}}</option>
                @endforeach
            </select>
        </div>
    </div>

    <h5 class="text-muted border-bottom pb-1 mb-3">Volume &amp; chargement</h5>
    <div class="row">
        <div class="col-md-6 col-lg-3">
            <div class="card mb-3 carte-kpi" id="carte-volume-total" style="cursor:pointer" title="Cliquer pour voir le détail par camion">
                <div class="card-header"><i class="fas fa-cubes"></i> Volume &amp; voyages (sélection)</div>
                <div class="card-body text-center">
                    <div style="font-size:2.5rem" id="valeur-volume-total">--</div>
                    <div class="text-muted" id="valeur-volume-total-voyages">-- voyage(s)</div>
                </div>
                <div class="card-footer small text-muted" id="mise_a_jour-volume-total"></div>
            </div>
        </div>
        <div class="col-md-6 col-lg-3">
            <div class="card mb-3 carte-kpi" id="carte-volume-moyen" style="cursor:pointer" title="Cliquer pour voir le détail par camion">
                <div class="card-header"><i class="fas fa-truck"></i> Volume moyen transporté</div>
                <div class="card-body text-center">
                    <div style="font-size:2.5rem" id="valeur-volume-moyen">--</div>
                    <div class="text-muted">m3 transportés par voyage</div>
                </div>
                <div class="card-footer small text-muted" id="mise_a_jour-volume-moyen"></div>
            </div>
        </div>
        <div class="col-md-6 col-lg-3">
            <div class="card mb-3 carte-kpi" id="carte-taux-chargement" style="cursor:pointer" title="Cliquer pour voir le détail par camion">
                <div class="card-header"><i class="fas fa-weight-hanging"></i> Taux de chargement</div>
                <div class="card-body text-center">
                    <div style="font-size:2.5rem" id="valeur-taux-chargement">--</div>
                    <div class="text-muted">volume moyen / capacité, moyenné sur les camions</div>
                </div>
                <div class="card-footer small text-muted" id="mise_a_jour-taux-chargement"></div>
            </div>
        </div>
        <div class="col-md-6 col-lg-3">
            <div class="card mb-3 carte-kpi" id="carte-taux-sous-charge" style="cursor:pointer" title="Cliquer pour voir le détail par camion">
                <div class="card-header"><i class="fas fa-arrow-down"></i> Taux de camions sous-chargés</div>
                <div class="card-body text-center">
                    <div style="font-size:2.5rem" id="valeur-taux-sous-charge">--</div>
                    <div class="text-muted" id="valeur-taux-sous-charge-seuil">voyages &lt; seuil de capacité</div>
                </div>
                <div class="card-footer small text-muted" id="mise_a_jour-taux-sous-charge"></div>
            </div>
        </div>
    </div>

    <h5 class="text-muted border-bottom pb-1 mb-3">Temps de cycle</h5>
    <div class="row">
        <div class="col-md-6 col-lg-4">
            <div class="card mb-3 carte-kpi" id="carte-temps-rotation" style="cursor:pointer" title="Cliquer pour voir le détail par camion">
                <div class="card-header"><i class="fas fa-stopwatch"></i> Temps de rotation moyen (toupies)</div>
                <div class="card-body text-center">
                    <div style="font-size:2.5rem" id="valeur-temps-rotation">--</div>
                    <div class="text-muted mb-2">hors lavage (non mesuré)</div>
                    <table class="table table-sm table-borderless mb-0 text-left" style="font-size:0.85rem">
                        <tbody>
                            <tr><td>Chargement</td><td class="text-right" id="valeur-temps-rotation-chargement">--</td></tr>
                            <tr><td>Trajet aller</td><td class="text-right" id="valeur-temps-rotation-trajet-aller">--</td></tr>
                            <tr><td>Attente + déchargement</td><td class="text-right" id="valeur-temps-rotation-attente-dechargement">--</td></tr>
                            <tr><td>Trajet retour</td><td class="text-right" id="valeur-temps-rotation-trajet-retour">--</td></tr>
                        </tbody>
                    </table>
                </div>
                <div class="card-footer small text-muted" id="mise_a_jour-temps-rotation"></div>
            </div>
        </div>
        <div class="col-md-6 col-lg-4">
            <div class="card mb-3 carte-kpi" id="carte-temps-attente-chantier" style="cursor:pointer" title="Cliquer pour voir le détail par camion">
                <div class="card-header"><i class="fas fa-hourglass-half"></i> Temps d'attente sur chantier</div>
                <div class="card-body text-center">
                    <div style="font-size:2.5rem" id="valeur-temps-attente-chantier">--</div>
                    <div class="text-muted">avant déchargement (arrivée chantier → début vidange)</div>
                </div>
                <div class="card-footer small text-muted" id="mise_a_jour-temps-attente-chantier"></div>
            </div>
        </div>
        <div class="col-md-6 col-lg-4">
            <div class="card mb-3 carte-kpi" id="carte-temps-attente-centrale" style="cursor:pointer" title="Cliquer pour voir le détail par camion">
                <div class="card-header"><i class="fas fa-parking"></i> Attente moyenne sur centrale</div>
                <div class="card-body text-center">
                    <div style="font-size:2.5rem" id="valeur-temps-attente-centrale">--</div>
                    <div class="text-muted">entre 2 chargements du même camion, le même jour</div>
                </div>
                <div class="card-footer small text-muted" id="mise_a_jour-temps-attente-centrale"></div>
            </div>
        </div>
    </div>

    <h5 class="text-muted border-bottom pb-1 mb-3">Qualité</h5>
    <div class="row">
        <div class="col-md-6 col-lg-4">
            <div class="card mb-3 carte-kpi" id="carte-retour-beton" style="cursor:pointer" title="Cliquer pour voir le détail par camion">
                <div class="card-header"><i class="fas fa-recycle"></i> Retour béton</div>
                <div class="card-body text-center">
                    <div style="font-size:2.5rem" id="valeur-retour-beton">--</div>
                    <div class="text-muted" id="valeur-retour-beton-taux">taux : --</div>
                </div>
                <div class="card-footer small text-muted" id="mise_a_jour-retour-beton"></div>
            </div>
        </div>
    </div>

    <h5 class="text-muted border-bottom pb-1 mb-3">Productivité</h5>
    <div class="row">
        <div class="col-md-6 col-lg-4">
            <div class="card mb-3 carte-kpi" id="carte-rotations-par-jour" style="cursor:pointer" title="Cliquer pour voir le détail par camion">
                <div class="card-header"><i class="fas fa-calendar-day"></i> Rotations / jour travaillé</div>
                <div class="card-body text-center">
                    <div style="font-size:2.5rem" id="valeur-rotations-par-jour">--</div>
                    <div class="text-muted">moyenne par camion, sur ses jours travaillés</div>
                </div>
                <div class="card-footer small text-muted" id="mise_a_jour-rotations-par-jour"></div>
            </div>
        </div>
    </div>

    <div class="modal fade" id="modal-detail-volume-moyen" tabindex="-1" role="dialog" aria-hidden="true">
        <div class="modal-dialog modal-xl" role="document" style="max-width:95%">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title">Détail par camion — Volume moyen transporté</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Fermer">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body">
                    <p id="resume-detail-volume-moyen" class="font-weight-bold"></p>
                    <div class="table-responsive">
                        <table id="table-detail-volume-moyen" class="table table-bordered table-striped" style="width:100%">
                            <thead>
                                <tr>
                                    <th>Camion</th>
                                    <th>Libellé</th>
                                    <th>Capacité (m3)</th>
                                    <th>Voyages</th>
                                    <th>Volume total (m3)</th>
                                    <th>Volume moyen (m3)</th>
                                </tr>
                            </thead>
                            <tbody></tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="modal fade" id="modal-detail-taux-chargement" tabindex="-1" role="dialog" aria-hidden="true">
        <div class="modal-dialog modal-xl" role="document" style="max-width:95%">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title">Détail par camion — Taux de chargement</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Fermer">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body">
                    <div class="table-responsive">
                        <table id="table-detail-taux-chargement" class="table table-bordered table-striped" style="width:100%">
                            <thead>
                                <tr>
                                    <th>Camion</th>
                                    <th>Libellé</th>
                                    <th>Capacité (m3)</th>
                                    <th>Voyages</th>
                                    <th>Volume moyen (m3)</th>
                                    <th>Taux de chargement (%)</th>
                                </tr>
                            </thead>
                            <tbody></tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="modal fade" id="modal-detail-temps-rotation" tabindex="-1" role="dialog" aria-hidden="true">
        <div class="modal-dialog modal-xl" role="document" style="max-width:95%">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title">Détail par camion — Temps de rotation moyen</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Fermer">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body">
                    <p id="resume-detail-temps-rotation" class="font-weight-bold"></p>
                    <div class="table-responsive">
                        <table id="table-detail-temps-rotation" class="table table-bordered table-striped" style="width:100%">
                            <thead>
                                <tr>
                                    <th>Camion</th>
                                    <th>Libellé</th>
                                    <th>Rotations</th>
                                    <th>Chargement (min)</th>
                                    <th>Trajet aller (min)</th>
                                    <th>Attente + déchargement (min)</th>
                                    <th>Trajet retour (min)</th>
                                    <th>Total (min)</th>
                                </tr>
                            </thead>
                            <tbody></tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="modal fade" id="modal-detail-temps-attente-chantier" tabindex="-1" role="dialog" aria-hidden="true">
        <div class="modal-dialog modal-xl" role="document" style="max-width:95%">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title">Détail par camion — Temps d'attente sur chantier</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Fermer">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body">
                    <p id="resume-detail-temps-attente-chantier" class="font-weight-bold"></p>
                    <div class="table-responsive">
                        <table id="table-detail-temps-attente-chantier" class="table table-bordered table-striped" style="width:100%">
                            <thead>
                                <tr>
                                    <th>Camion</th>
                                    <th>Libellé</th>
                                    <th>Rotations</th>
                                    <th>Attente sur chantier (min)</th>
                                </tr>
                            </thead>
                            <tbody></tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="modal fade" id="modal-detail-retour-beton" tabindex="-1" role="dialog" aria-hidden="true">
        <div class="modal-dialog modal-xl" role="document" style="max-width:95%">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title">Détail par camion — Retour béton</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Fermer">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body">
                    <p id="resume-detail-retour-beton" class="font-weight-bold"></p>
                    <div class="table-responsive">
                        <table id="table-detail-retour-beton" class="table table-bordered table-striped" style="width:100%">
                            <thead>
                                <tr>
                                    <th>Camion</th>
                                    <th>Libellé</th>
                                    <th>Voyages</th>
                                    <th>Volume livré (m3)</th>
                                    <th>Volume retour (m3)</th>
                                    <th>Taux de retour (%)</th>
                                </tr>
                            </thead>
                            <tbody></tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="modal fade" id="modal-detail-temps-attente-centrale" tabindex="-1" role="dialog" aria-hidden="true">
        <div class="modal-dialog modal-xl" role="document" style="max-width:95%">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title">Détail par camion — Attente moyenne sur centrale</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Fermer">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body">
                    <p id="resume-detail-temps-attente-centrale" class="font-weight-bold"></p>
                    <div class="table-responsive">
                        <table id="table-detail-temps-attente-centrale" class="table table-bordered table-striped" style="width:100%">
                            <thead>
                                <tr>
                                    <th>Camion</th>
                                    <th>Libellé</th>
                                    <th>Rotations</th>
                                    <th>Écarts mesurés</th>
                                    <th>Attente moyenne (min)</th>
                                </tr>
                            </thead>
                            <tbody></tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="modal fade" id="modal-detail-taux-sous-charge" tabindex="-1" role="dialog" aria-hidden="true">
        <div class="modal-dialog modal-xl" role="document" style="max-width:95%">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title">Détail par camion — Taux de camions sous-chargés</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Fermer">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body">
                    <p id="resume-detail-taux-sous-charge" class="font-weight-bold"></p>
                    <div class="table-responsive">
                        <table id="table-detail-taux-sous-charge" class="table table-bordered table-striped" style="width:100%">
                            <thead>
                                <tr>
                                    <th>Camion</th>
                                    <th>Libellé</th>
                                    <th>Voyages</th>
                                    <th>Voyages sous-chargés</th>
                                    <th>Taux (%)</th>
                                </tr>
                            </thead>
                            <tbody></tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="modal fade" id="modal-detail-rotations-par-jour" tabindex="-1" role="dialog" aria-hidden="true">
        <div class="modal-dialog modal-xl" role="document" style="max-width:95%">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title">Détail par camion — Rotations / jour travaillé</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Fermer">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body">
                    <p id="resume-detail-rotations-par-jour" class="font-weight-bold"></p>
                    <div class="table-responsive">
                        <table id="table-detail-rotations-par-jour" class="table table-bordered table-striped" style="width:100%">
                            <thead>
                                <tr>
                                    <th>Camion</th>
                                    <th>Libellé</th>
                                    <th>Rotations</th>
                                    <th>Jours travaillés</th>
                                    <th>Rotations / jour</th>
                                </tr>
                            </thead>
                            <tbody></tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <script>
        $(document).ready(function() {
            var detailVolumeMoyen = [];
            var detailTauxChargement = [];
            var detailTempsRotation = [];
            var detailTempsAttenteChantier = [];
            var detailRetourBeton = [];
            var detailTempsAttenteCentrale = [];
            var detailTauxSousCharge = [];
            var detailRotationsParJour = [];
            var resumeVolumeMoyen = {nb_vehicules: 0, nb_voyages: 0};
            var resumeTempsRotation = {nb_vehicules: 0, nb_rotations: 0};
            var resumeTempsAttenteChantier = {nb_vehicules: 0, nb_rotations: 0};
            var resumeRetourBeton = {volume_livre: 0};
            var resumeTempsAttenteCentrale = {nb_vehicules: 0, nb_ecarts: 0};
            var resumeTauxSousCharge = {nb_voyages: 0, nb_voyages_sous_charges: 0};
            var resumeRotationsParJour = {nb_vehicules: 0, nb_rotations: 0};
            var tableDetailVolumeMoyen = null;
            var tableDetailTauxChargement = null;
            var tableDetailTempsRotation = null;
            var tableDetailTempsAttenteChantier = null;
            var tableDetailRetourBeton = null;
            var tableDetailTempsAttenteCentrale = null;
            var tableDetailTauxSousCharge = null;
            var tableDetailRotationsParJour = null;

            function filtres() {
                return {
                    date_debut: $("#date_debut").val(),
                    date_fin: $("#date_fin").val(),
                    centrale_id: $("#centrale").val(),
                };
            }

            function formaterNombre(valeur, decimales) {
                if (valeur === null || valeur === undefined) {
                    return '--';
                }
                return Number(valeur).toLocaleString('fr-FR', {
                    minimumFractionDigits: decimales,
                    maximumFractionDigits: decimales,
                });
            }

            function chargerVolumeMoyen() {
                $.get('{{route('kpi.volume_moyen')}}', filtres(), function(retour) {
                    $("#valeur-volume-moyen").text(formaterNombre(retour.volume_moyen, 2));
                    $("#mise_a_jour-volume-moyen").html(
                        retour.nb_vehicules + " camion(s) — " + retour.nb_voyages + " voyage(s) — Mis à jour " + retour.date
                    );
                    $("#valeur-volume-total").text(formaterNombre(retour.volume_total, 2) + ' m3');
                    $("#valeur-volume-total-voyages").text(retour.nb_voyages + " voyage(s)");
                    $("#mise_a_jour-volume-total").html(
                        retour.nb_vehicules + " camion(s) — Mis à jour " + retour.date
                    );
                    detailVolumeMoyen = retour.detail;
                    resumeVolumeMoyen = {nb_vehicules: retour.nb_vehicules, nb_voyages: retour.nb_voyages};
                }, 'json');
            }

            function chargerTauxChargement() {
                $.get('{{route('kpi.taux_chargement')}}', filtres(), function(retour) {
                    $("#valeur-taux-chargement").text(formaterNombre(retour.taux_chargement, 1) + ' %');
                    $("#mise_a_jour-taux-chargement").html(
                        retour.nb_vehicules + " camion(s) — Mis à jour " + retour.date
                    );
                    detailTauxChargement = retour.detail;
                }, 'json');
            }

            function formaterDuree(minutes) {
                if (minutes === null || minutes === undefined) {
                    return '--';
                }
                var h = Math.floor(minutes / 60);
                var m = Math.round(minutes % 60);
                return h > 0 ? (h + 'h' + String(m).padStart(2, '0')) : (m + ' min');
            }

            function chargerTempsRotation() {
                $.get('{{route('kpi.temps_rotation')}}', filtres(), function(retour) {
                    $("#valeur-temps-rotation").text(formaterDuree(retour.duree_totale));
                    $("#valeur-temps-rotation-chargement").text(formaterDuree(retour.duree_chargement));
                    $("#valeur-temps-rotation-trajet-aller").text(formaterDuree(retour.duree_trajet_aller));
                    $("#valeur-temps-rotation-attente-dechargement").text(formaterDuree(retour.duree_attente_dechargement));
                    $("#valeur-temps-rotation-trajet-retour").text(formaterDuree(retour.duree_trajet_retour));
                    $("#mise_a_jour-temps-rotation").html(
                        retour.nb_vehicules + " toupie(s) — " + retour.nb_rotations + " rotation(s) — Mis à jour " + retour.date
                    );
                    detailTempsRotation = retour.detail;
                    resumeTempsRotation = {nb_vehicules: retour.nb_vehicules, nb_rotations: retour.nb_rotations};
                }, 'json');
            }

            function chargerTempsAttenteChantier() {
                $.get('{{route('kpi.temps_attente_chantier')}}', filtres(), function(retour) {
                    $("#valeur-temps-attente-chantier").text(formaterDuree(retour.duree_attente_chantier));
                    $("#mise_a_jour-temps-attente-chantier").html(
                        retour.nb_vehicules + " camion(s) — " + retour.nb_rotations + " voyage(s) — Mis à jour " + retour.date
                    );
                    detailTempsAttenteChantier = retour.detail;
                    resumeTempsAttenteChantier = {nb_vehicules: retour.nb_vehicules, nb_rotations: retour.nb_rotations};
                }, 'json');
            }

            function chargerRetourBeton() {
                $.get('{{route('kpi.retour_beton')}}', filtres(), function(retour) {
                    $("#valeur-retour-beton").text(formaterNombre(retour.volume_retour, 2) + ' m3');
                    $("#valeur-retour-beton-taux").text('taux : ' + formaterNombre(retour.taux_retour, 2) + ' %');
                    $("#mise_a_jour-retour-beton").html(
                        formaterNombre(retour.volume_livre, 0) + " m3 livrés — Mis à jour " + retour.date
                    );
                    detailRetourBeton = retour.detail;
                    resumeRetourBeton = {volume_livre: retour.volume_livre};
                }, 'json');
            }

            function chargerTempsAttenteCentrale() {
                $.get('{{route('kpi.temps_attente_centrale')}}', filtres(), function(retour) {
                    $("#valeur-temps-attente-centrale").text(formaterDuree(retour.attente_centrale));
                    $("#mise_a_jour-temps-attente-centrale").html(
                        retour.nb_vehicules + " camion(s) — " + retour.nb_ecarts + " écart(s) mesuré(s) — Mis à jour " + retour.date
                    );
                    detailTempsAttenteCentrale = retour.detail;
                    resumeTempsAttenteCentrale = {nb_vehicules: retour.nb_vehicules, nb_ecarts: retour.nb_ecarts};
                }, 'json');
            }

            function chargerTauxSousCharge() {
                $.get('{{route('kpi.taux_sous_charge')}}', filtres(), function(retour) {
                    $("#valeur-taux-sous-charge").text(formaterNombre(retour.taux_sous_charge, 1) + ' %');
                    $("#valeur-taux-sous-charge-seuil").text('voyages < ' + formaterNombre(retour.seuil, 0) + '% de capacité');
                    $("#mise_a_jour-taux-sous-charge").html(
                        retour.nb_voyages_sous_charges + " / " + retour.nb_voyages + " voyage(s) — Mis à jour " + retour.date
                    );
                    detailTauxSousCharge = retour.detail;
                    resumeTauxSousCharge = {nb_voyages: retour.nb_voyages, nb_voyages_sous_charges: retour.nb_voyages_sous_charges};
                }, 'json');
            }

            function chargerRotationsParJour() {
                $.get('{{route('kpi.rotations_par_jour')}}', filtres(), function(retour) {
                    $("#valeur-rotations-par-jour").text(formaterNombre(retour.rotations_par_jour, 2));
                    $("#mise_a_jour-rotations-par-jour").html(
                        retour.nb_vehicules + " camion(s) — " + retour.nb_rotations + " rotation(s) — Mis à jour " + retour.date
                    );
                    detailRotationsParJour = retour.detail;
                    resumeRotationsParJour = {nb_vehicules: retour.nb_vehicules, nb_rotations: retour.nb_rotations};
                }, 'json');
            }

            function afficherDetail(tableSelector, tableVar, lignesData, colonnes, modalSelector) {
                if (tableVar) {
                    tableVar.destroy();
                    $(tableSelector + " tbody").empty();
                }

                var lignes = lignesData.map(colonnes);

                var table = $(tableSelector).DataTable({
                    data: lignes,
                    destroy: true,
                    language: { url: 'https://cdn.datatables.net/plug-ins/1.10.24/i18n/French.json' },
                });

                $(modalSelector).modal('show');

                return table;
            }

            function ouvrirDetailVolumeMoyen() {
                $("#resume-detail-volume-moyen").text(
                    resumeVolumeMoyen.nb_vehicules + " camion(s) — " + resumeVolumeMoyen.nb_voyages + " voyage(s)"
                );
                tableDetailVolumeMoyen = afficherDetail('#table-detail-volume-moyen', tableDetailVolumeMoyen, detailVolumeMoyen, function(ligne) {
                    return [
                        ligne.vehicule_code,
                        ligne.vehicule_libelle,
                        formaterNombre(ligne.capacite, 2),
                        ligne.nb_voyages,
                        formaterNombre(ligne.volume_total, 2),
                        formaterNombre(ligne.volume_moyen, 2),
                    ];
                }, '#modal-detail-volume-moyen');
            }

            $("#carte-volume-moyen, #carte-volume-total").on('click', ouvrirDetailVolumeMoyen);

            $("#carte-taux-chargement").on('click', function() {
                tableDetailTauxChargement = afficherDetail('#table-detail-taux-chargement', tableDetailTauxChargement, detailTauxChargement, function(ligne) {
                    return [
                        ligne.vehicule_code,
                        ligne.vehicule_libelle,
                        formaterNombre(ligne.capacite, 2),
                        ligne.nb_voyages,
                        formaterNombre(ligne.volume_moyen, 2),
                        formaterNombre(ligne.taux_chargement, 1) + ' %',
                    ];
                }, '#modal-detail-taux-chargement');
            });

            $("#carte-temps-rotation").on('click', function() {
                $("#resume-detail-temps-rotation").text(
                    resumeTempsRotation.nb_vehicules + " toupie(s) — " + resumeTempsRotation.nb_rotations + " rotation(s)"
                );
                tableDetailTempsRotation = afficherDetail('#table-detail-temps-rotation', tableDetailTempsRotation, detailTempsRotation, function(ligne) {
                    return [
                        ligne.vehicule_code,
                        ligne.vehicule_libelle,
                        ligne.nb_rotations,
                        formaterNombre(ligne.duree_chargement, 1),
                        formaterNombre(ligne.duree_trajet_aller, 1),
                        formaterNombre(ligne.duree_attente_dechargement, 1),
                        formaterNombre(ligne.duree_trajet_retour, 1),
                        formaterNombre(ligne.duree_totale, 1),
                    ];
                }, '#modal-detail-temps-rotation');
            });

            $("#carte-temps-attente-chantier").on('click', function() {
                $("#resume-detail-temps-attente-chantier").text(
                    resumeTempsAttenteChantier.nb_vehicules + " camion(s) — " + resumeTempsAttenteChantier.nb_rotations + " voyage(s)"
                );
                tableDetailTempsAttenteChantier = afficherDetail('#table-detail-temps-attente-chantier', tableDetailTempsAttenteChantier, detailTempsAttenteChantier, function(ligne) {
                    return [
                        ligne.vehicule_code,
                        ligne.vehicule_libelle,
                        ligne.nb_rotations,
                        formaterNombre(ligne.duree_attente_chantier, 1),
                    ];
                }, '#modal-detail-temps-attente-chantier');
            });

            $("#carte-retour-beton").on('click', function() {
                $("#resume-detail-retour-beton").text(
                    "Volume total livré sur la période : " + formaterNombre(resumeRetourBeton.volume_livre, 2) + " m3"
                );
                tableDetailRetourBeton = afficherDetail('#table-detail-retour-beton', tableDetailRetourBeton, detailRetourBeton, function(ligne) {
                    return [
                        ligne.vehicule_code,
                        ligne.vehicule_libelle,
                        ligne.nb_voyages,
                        formaterNombre(ligne.volume_livre, 2),
                        formaterNombre(ligne.volume_retour, 2),
                        formaterNombre(ligne.taux_retour, 2) + ' %',
                    ];
                }, '#modal-detail-retour-beton');
            });

            $("#carte-temps-attente-centrale").on('click', function() {
                $("#resume-detail-temps-attente-centrale").text(
                    resumeTempsAttenteCentrale.nb_vehicules + " camion(s) — " + resumeTempsAttenteCentrale.nb_ecarts + " écart(s) mesuré(s)"
                );
                tableDetailTempsAttenteCentrale = afficherDetail('#table-detail-temps-attente-centrale', tableDetailTempsAttenteCentrale, detailTempsAttenteCentrale, function(ligne) {
                    return [
                        ligne.vehicule_code,
                        ligne.vehicule_libelle,
                        ligne.nb_rotations,
                        ligne.nb_ecarts,
                        formaterNombre(ligne.attente_centrale, 1),
                    ];
                }, '#modal-detail-temps-attente-centrale');
            });

            $("#carte-taux-sous-charge").on('click', function() {
                $("#resume-detail-taux-sous-charge").text(
                    resumeTauxSousCharge.nb_voyages_sous_charges + " voyage(s) sous-chargé(s) sur " + resumeTauxSousCharge.nb_voyages + " au total"
                );
                tableDetailTauxSousCharge = afficherDetail('#table-detail-taux-sous-charge', tableDetailTauxSousCharge, detailTauxSousCharge, function(ligne) {
                    return [
                        ligne.vehicule_code,
                        ligne.vehicule_libelle,
                        ligne.nb_voyages,
                        ligne.nb_voyages_sous_charges,
                        formaterNombre(ligne.taux_sous_charge, 2) + ' %',
                    ];
                }, '#modal-detail-taux-sous-charge');
            });

            $("#carte-rotations-par-jour").on('click', function() {
                $("#resume-detail-rotations-par-jour").text(
                    resumeRotationsParJour.nb_vehicules + " camion(s) — " + resumeRotationsParJour.nb_rotations + " rotation(s) au total"
                );
                tableDetailRotationsParJour = afficherDetail('#table-detail-rotations-par-jour', tableDetailRotationsParJour, detailRotationsParJour, function(ligne) {
                    return [
                        ligne.vehicule_code,
                        ligne.vehicule_libelle,
                        ligne.nb_rotations,
                        ligne.nb_jours_travailles,
                        formaterNombre(ligne.rotations_par_jour, 2),
                    ];
                }, '#modal-detail-rotations-par-jour');
            });

            function rafraichirIndicateurs() {
                chargerVolumeMoyen();
                chargerTauxChargement();
                chargerTempsRotation();
                chargerTempsAttenteChantier();
                chargerRetourBeton();
                chargerTempsAttenteCentrale();
                chargerTauxSousCharge();
                chargerRotationsParJour();
            }

            $("#date_debut, #date_fin, #centrale").on('change', function() {
                rafraichirIndicateurs();
            });

            rafraichirIndicateurs();
        });
    </script>
@endsection