@extends('base')
@section('content')
    @include('kpi.navigation')

    <style>
        /* Même fond que les pages plein écran et l'État des camions (#f4f6f3) : les cartes blanches ressortent */
        html, body { background: #f4f6f3; }
        /* En-têtes des parties : fond du même vert que le titre (État des centrales), écriture blanche en gras, ligne resserrée */
        .carte-kpi .card-header { padding: .3rem .75rem; background-color: #28a745; color: #fff; font-weight: bold; }
        /* Titre de la feuille comme sur l'État des centrales : sans fond, même vert, souligné */
        .titre-kpi { margin: 10px 0 18px; padding-bottom: 10px; border-bottom: 3px solid #28a745; }
        .titre-kpi h2 { margin: 0; font-size: 1.5rem; font-weight: 700; color: #28a745; }
        .carte-kpi .graphique-kpi-finance { position: relative; height: 300px; }
        .carte-kpi .graphique-kpi-finance-top { position: relative; height: 320px; }
    </style>

    <div class="titre-kpi">
        <h2>KPI finance</h2>
    </div>

    <div class="form-row">
        <div class="form-group col-md-4">
            <label for="societe"><b>Société :</b></label>
            <select name="societe" id="societe" class="form-control">
                <option value="0">Toutes</option>
                @foreach($societes as $societe)
                    <option value="{{$societe->ID_Societe}}">{{$societe->Societe_Code}} -> {{$societe->Societe_Nom_Societe}}</option>
                @endforeach
            </select>
        </div>
        <div class="form-group col-md-2">
            <label for="annee"><b>Année :</b></label>
            <select name="annee" id="annee" class="form-control">
                @foreach($annees as $annee)
                    <option value="{{$annee}}">{{$annee}}</option>
                @endforeach
            </select>
        </div>
        <div class="form-group col-md-6 d-flex align-items-end">
            <div class="text-muted small pb-2" id="periode"></div>
        </div>
    </div>

    <h5 class="text-muted border-bottom pb-1 mb-3">Facturation</h5>
    <div class="row">
        <div class="col-md-6 col-lg-3">
            <div class="card mb-3 carte-kpi carte-detail" data-indicateur="ca" style="cursor:pointer" title="Cliquer pour voir le détail">
                <div class="card-header"><i class="fas fa-euro-sign"></i> CA facturé HT (avoirs déduits)</div>
                <div class="card-body text-center">
                    <div style="font-size:2rem" id="valeur-ca">--</div>
                    <div class="text-muted" id="valeur-ca-n1"></div>
                </div>
            </div>
        </div>
        <div class="col-md-6 col-lg-3">
            <div class="card mb-3 carte-kpi carte-detail" data-indicateur="avoirs" style="cursor:pointer" title="Cliquer pour voir le détail">
                <div class="card-header"><i class="fas fa-undo"></i> Montant des avoirs HT</div>
                <div class="card-body text-center">
                    <div style="font-size:2rem" id="valeur-avoirs">--</div>
                    <div class="text-muted" id="valeur-avoirs-nombre">-- avoir(s)</div>
                </div>
            </div>
        </div>
        <div class="col-md-6 col-lg-3">
            <div class="card mb-3 carte-kpi carte-detail" data-indicateur="volume" style="cursor:pointer" title="Cliquer pour voir le détail">
                <div class="card-header"><i class="fas fa-cubes"></i> Volume béton facturé</div>
                <div class="card-body text-center">
                    <div style="font-size:2rem" id="valeur-volume">--</div>
                    <div class="text-muted" id="valeur-volume-n1"></div>
                </div>
            </div>
        </div>
        <div class="col-md-6 col-lg-3">
            <div class="card mb-3 carte-kpi carte-detail" data-indicateur="echu" style="cursor:pointer" title="Cliquer pour voir le détail">
                <div class="card-header"><i class="fas fa-exclamation-triangle"></i> Factures échues non réglées</div>
                <div class="card-body text-center">
                    <div style="font-size:2rem" id="valeur-echu">--</div>
                    <div class="text-muted" id="valeur-echu-nombre">-- facture(s) TTC, à ce jour</div>
                </div>
            </div>
        </div>
    </div>

    <div class="modal fade" id="modal-detail" 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" id="titre-detail"></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" class="font-weight-bold"></p>
                    <div class="table-responsive">
                        <table id="table-detail" class="table table-bordered table-striped" style="width:100%"></table>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="row">
        <div class="col-lg-8">
            <div class="card mb-3 carte-kpi">
                <div class="card-header"><i class="fas fa-chart-bar"></i> CA HT mensuel <span id="titre-ca-mensuel"></span></div>
                <div class="card-body"><div class="graphique-kpi-finance"><canvas id="graphique-ca-mensuel"></canvas></div></div>
            </div>
        </div>
        <div class="col-lg-4">
            <div class="card mb-3 carte-kpi">
                <div class="card-header"><i class="fas fa-chart-pie"></i> Répartition du CA HT</div>
                <div class="card-body">
                    <div class="graphique-kpi-finance">
                        <canvas id="graphique-repartition"></canvas>
                        <div class="text-muted text-center d-none graphique-vide">Aucune donnée</div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <h5 class="text-muted border-bottom pb-1 mb-3">Top 10 clients</h5>
    <div class="row">
        <div class="col-lg-6">
            <div class="card mb-3 carte-kpi">
                <div class="card-header"><i class="fas fa-user-tie"></i> Top 10 clients en CA HT</div>
                <div class="card-body">
                    <div class="graphique-kpi-finance-top">
                        <canvas id="graphique-top-clients-ca"></canvas>
                        <div class="text-muted text-center d-none graphique-vide">Aucune donnée</div>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-lg-6">
            <div class="card mb-3 carte-kpi">
                <div class="card-header"><i class="fas fa-user-tie"></i> Top 10 clients en m³ béton</div>
                <div class="card-body">
                    <div class="graphique-kpi-finance-top">
                        <canvas id="graphique-top-clients-volume"></canvas>
                        <div class="text-muted text-center d-none graphique-vide">Aucune donnée</div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <h5 class="text-muted border-bottom pb-1 mb-3">Top 10 chantiers</h5>
    <div class="row">
        <div class="col-lg-6">
            <div class="card mb-3 carte-kpi">
                <div class="card-header"><i class="fas fa-hard-hat"></i> Top 10 chantiers en CA HT</div>
                <div class="card-body">
                    <div class="graphique-kpi-finance-top">
                        <canvas id="graphique-top-chantiers-ca"></canvas>
                        <div class="text-muted text-center d-none graphique-vide">Aucune donnée</div>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-lg-6">
            <div class="card mb-3 carte-kpi">
                <div class="card-header"><i class="fas fa-hard-hat"></i> Top 10 chantiers en m³ béton</div>
                <div class="card-body">
                    <div class="graphique-kpi-finance-top">
                        <canvas id="graphique-top-chantiers-volume"></canvas>
                        <div class="text-muted text-center d-none graphique-vide">Aucune donnée</div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <h5 class="text-muted border-bottom pb-1 mb-3">Béton sur les 3 derniers exercices</h5>
    <div class="row">
        <div class="col-lg-6">
            <div class="card mb-3 carte-kpi">
                <div class="card-header"><i class="fas fa-chart-line"></i> Prix moyen HT du béton par mois (€/m³)</div>
                <div class="card-body"><div class="graphique-kpi-finance"><canvas id="graphique-prix-moyen"></canvas></div></div>
            </div>
        </div>
        <div class="col-lg-6">
            <div class="card mb-3 carte-kpi">
                <div class="card-header"><i class="fas fa-chart-line"></i> Volume de béton par mois (m³)</div>
                <div class="card-body"><div class="graphique-kpi-finance"><canvas id="graphique-volume-mensuel"></canvas></div></div>
            </div>
        </div>
    </div>

    <script>
        $(document).ready(function() {
            var graphiques = {};
            var couleursRepartition = {
                'Béton': '#007bff', 'Granulat': '#a0522d', 'Adjuvant': '#6f42c1',
                'Ajout': '#fd7e14', 'Service': '#28a745', 'Transport': '#ffc107'
            };
            // Exercice le plus ancien en gris clair, le plus récent en vert ALFI
            var couleursExercices = ['rgba(173, 181, 189, 1)', 'rgba(108, 117, 125, 1)', 'rgba(140, 198, 63, 1)'];

            function filtres() {
                return {
                    societe_id: $("#societe").val(),
                    annee: $("#annee").val(),
                };
            }

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

            function formaterMontant(valeur) {
                return formaterNombre(valeur, 2) + ' €';
            }

            function formaterVolume(valeur) {
                return formaterNombre(valeur, 2) + ' m³';
            }

            // Variation N / N-1 en couleur, ou vide si pas de référence N-1.
            // inverse : une hausse est défavorable (avoirs), donc en rouge
            function evolution(n, n1, inverse) {
                if (!n1) {
                    return '';
                }
                var pourcentage = (n - n1) / Math.abs(n1) * 100;
                var couleur = (pourcentage >= 0) !== !!inverse ? 'text-success' : 'text-danger';
                return ' <span class="' + couleur + '" style="font-size:1rem">(' + (pourcentage >= 0 ? '+' : '') + pourcentage.toFixed(1) + ' %)</span>';
            }

            // Détruit le graphique précédent du canvas puis affiche le nouveau, ou "Aucune donnée" si vide
            function dessiner(idCanvas, vide, configuration) {
                if (graphiques[idCanvas]) {
                    graphiques[idCanvas].destroy();
                    delete graphiques[idCanvas];
                }
                var canvas = $('#' + idCanvas);
                canvas.toggleClass('d-none', vide);
                canvas.siblings('.graphique-vide').toggleClass('d-none', !vide);
                if (!vide) {
                    graphiques[idCanvas] = new Chart(canvas[0], configuration);
                }
            }

            // Barres horizontales d'un top 10 ; libellés longs tronqués sur l'axe, complets dans l'infobulle
            function afficherTop(idCanvas, lignes, couleur, formater) {
                dessiner(idCanvas, lignes.length == 0, {
                    type: 'horizontalBar',
                    data: {
                        labels: $.map(lignes, function(ligne) { return ligne.libelle; }),
                        datasets: [{data: $.map(lignes, function(ligne) { return ligne.valeur; }), backgroundColor: couleur}]
                    },
                    options: {
                        maintainAspectRatio: false,
                        legend: {display: false},
                        scales: {
                            xAxes: [{ticks: {beginAtZero: true, callback: formater}}],
                            yAxes: [{ticks: {callback: function(libelle) { return libelle.length > 40 ? libelle.substr(0, 39) + '…' : libelle; }}}]
                        },
                        tooltips: {
                            callbacks: {
                                title: function(items, data) { return data.labels[items[0].index]; },
                                label: function(item) { return formater(item.xLabel); }
                            }
                        }
                    }
                });
            }

            function afficherCaMensuel(retour) {
                dessiner('graphique-ca-mensuel', false, {
                    type: 'bar',
                    data: {
                        labels: ['Janv.', 'Févr.', 'Mars', 'Avr.', 'Mai', 'Juin', 'Juil.', 'Août', 'Sept.', 'Oct.', 'Nov.', 'Déc.'],
                        datasets: [
                            {label: String(retour.annee - 1), data: retour.ca_mensuel_n1, backgroundColor: 'rgba(108, 117, 125, 0.5)'},
                            {label: String(retour.annee), data: retour.ca_mensuel, backgroundColor: 'rgba(140, 198, 63, 0.85)'}
                        ]
                    },
                    options: {
                        maintainAspectRatio: false,
                        scales: {
                            yAxes: [{ticks: {beginAtZero: true, callback: function(valeur) { return formaterNombre(valeur, 0) + ' €'; }}}]
                        },
                        tooltips: {
                            callbacks: {
                                label: function(item, data) { return data.datasets[item.datasetIndex].label + ' : ' + formaterMontant(item.yLabel); }
                            }
                        }
                    }
                });
            }

            function afficherRepartition(retour) {
                dessiner('graphique-repartition', retour.repartition.length == 0, {
                    type: 'pie',
                    data: {
                        labels: $.map(retour.repartition, function(ligne) { return ligne.libelle; }),
                        datasets: [{
                            data: $.map(retour.repartition, function(ligne) { return ligne.montant; }),
                            backgroundColor: $.map(retour.repartition, function(ligne) { return couleursRepartition[ligne.libelle] || '#6c757d'; })
                        }]
                    },
                    options: {
                        maintainAspectRatio: false,
                        legend: {position: 'bottom'},
                        tooltips: {
                            callbacks: {
                                label: function(item, data) {
                                    var valeurs = data.datasets[0].data;
                                    var total = valeurs.reduce(function(somme, valeur) { return somme + valeur; }, 0);
                                    var valeur = valeurs[item.index];
                                    return data.labels[item.index] + ' : ' + formaterMontant(valeur) + ' (' + (total ? (valeur / total * 100).toFixed(1) : 0) + ' %)';
                                }
                            }
                        }
                    }
                });
            }

            // Courbes des 3 exercices superposées sur les 12 mois de l'exercice
            function afficherExercices(idCanvas, exercices, cle, formater, avecTotal) {
                dessiner(idCanvas, false, {
                    type: 'line',
                    data: {
                        labels: exercices.mois,
                        datasets: $.map(exercices.series, function(serie, index) {
                            var total = serie[cle].reduce(function(somme, valeur) { return somme + (valeur || 0); }, 0);
                            return {
                                label: serie.libelle + (avecTotal ? ' (' + formater(total) + ')' : ''),
                                data: serie[cle],
                                borderColor: couleursExercices[index],
                                backgroundColor: couleursExercices[index],
                                borderWidth: index == 2 ? 3 : 2,
                                fill: false,
                                lineTension: 0.2
                            };
                        })
                    },
                    options: {
                        maintainAspectRatio: false,
                        spanGaps: false,
                        scales: {
                            yAxes: [{ticks: {beginAtZero: avecTotal, callback: function(valeur) { return formater(valeur); }}}]
                        },
                        tooltips: {
                            callbacks: {
                                label: function(item, data) {
                                    return data.datasets[item.datasetIndex].label.split(' ')[0] + ' : ' + formater(item.yLabel);
                                }
                            }
                        }
                    }
                });
            }

            function charger() {
                $.get('{{route('kpi.finance_donnees')}}', filtres(), function(retour) {
                    periodeCourante = retour.periode;
                    $("#periode").html('Période : ' + retour.periode + ' &mdash; comparée à ' + retour.periode_n1);
                    $("#titre-ca-mensuel").text(retour.annee + " / " + (retour.annee - 1));
                    $("#valeur-ca").html(formaterMontant(retour.ca) + evolution(retour.ca, retour.ca_n1));
                    $("#valeur-ca-n1").text('N-1 : ' + formaterMontant(retour.ca_n1));
                    $("#valeur-avoirs").html(formaterMontant(retour.avoirs) + evolution(retour.avoirs, retour.avoirs_n1, true));
                    $("#valeur-avoirs-nombre").text(retour.nb_avoirs + " avoir(s) — N-1 : " + formaterMontant(retour.avoirs_n1) + " (" + retour.nb_avoirs_n1 + " avoir(s))");
                    $("#valeur-volume").html(formaterVolume(retour.volume) + evolution(retour.volume, retour.volume_n1));
                    $("#valeur-volume-n1").text('N-1 : ' + formaterVolume(retour.volume_n1));
                    $("#valeur-echu").text(formaterMontant(retour.echu_montant)).toggleClass('text-danger', retour.echu_nombre > 0);
                    $("#valeur-echu-nombre").text(retour.echu_nombre + " facture(s) TTC, à ce jour");

                    afficherCaMensuel(retour);
                    afficherRepartition(retour);
                    afficherTop('graphique-top-clients-ca', retour.top_clients_ca, 'rgba(140, 198, 63, 0.85)', formaterMontant);
                    afficherTop('graphique-top-clients-volume', retour.top_clients_volume, 'rgba(0, 123, 255, 0.8)', formaterVolume);
                    afficherTop('graphique-top-chantiers-ca', retour.top_chantiers_ca, 'rgba(140, 198, 63, 0.85)', formaterMontant);
                    afficherTop('graphique-top-chantiers-volume', retour.top_chantiers_volume, 'rgba(0, 123, 255, 0.8)', formaterVolume);
                    afficherExercices('graphique-prix-moyen', retour.exercices, 'prix', function(valeur) { return formaterNombre(valeur, 2) + ' €/m³'; }, false);
                    afficherExercices('graphique-volume-mensuel', retour.exercices, 'volumes', formaterVolume, true);
                }, 'json');
            }

            // Détail facture par facture d'un indicateur, en DataTable dans une modale.
            // Valeurs brutes envoyées à DataTables (tri et recherche corrects), formatées seulement à l'affichage.
            var tableDetail = null;
            var periodeCourante = '';
            var demandeDetail = 0;
            var urlFacture = '{{route('facture_laravel.formulaire', '__ID__')}}';

            function rendu(formater) {
                return function(valeur, type) {
                    return type === 'display' ? (valeur === null ? '' : formater(valeur)) : valeur;
                };
            }

            function formaterDate(valeur) {
                return valeur ? valeur.split('-').reverse().join('/') : '';
            }

            var colonneNumero = {title: 'N°', data: 'numero', render: function(valeur, type, ligne) {
                return type === 'display' ? '<a href="' + urlFacture.replace('__ID__', ligne.id_facture) + '" target="_blank">' + valeur + '</a>' : valeur;
            }};
            var colonneDate = {title: 'Date', data: 'date', render: rendu(formaterDate)};
            var colonneClient = {title: 'Client', data: 'client'};
            var colonneChantier = {title: 'Chantier', data: 'chantier'};

            var details = {
                ca: {
                    titre: 'Détail du CA facturé HT (avoirs déduits)',
                    colonnes: [colonneNumero, colonneDate, {title: 'Type', data: 'type'}, colonneClient, colonneChantier,
                        {title: 'Montant HT', data: 'montant', className: 'text-right', render: rendu(formaterMontant)}],
                    total: 'montant', formater: formaterMontant,
                },
                avoirs: {
                    titre: 'Détail des avoirs',
                    colonnes: [colonneNumero, colonneDate, colonneClient, colonneChantier, {title: 'Motif', data: 'motif', defaultContent: ''},
                        {title: 'Montant HT', data: 'montant', className: 'text-right', render: rendu(formaterMontant)}],
                    total: 'montant', formater: formaterMontant,
                },
                volume: {
                    titre: 'Détail du volume béton facturé',
                    colonnes: [colonneNumero, colonneDate, colonneClient, colonneChantier,
                        {title: 'Volume béton', data: 'volume', className: 'text-right', render: rendu(formaterVolume)},
                        {title: 'Montant HT béton', data: 'montant', className: 'text-right', render: rendu(formaterMontant)}],
                    total: 'volume', formater: formaterVolume,
                },
                echu: {
                    titre: 'Détail des factures échues non réglées (à ce jour)',
                    colonnes: [colonneNumero, colonneDate, {title: 'Échéance', data: 'echeance', render: rendu(formaterDate)},
                        {title: 'Jours de retard', data: 'jours_retard', className: 'text-right'}, colonneClient, colonneChantier,
                        {title: 'Montant TTC', data: 'montant_ttc', className: 'text-right', render: rendu(formaterMontant)},
                        {title: 'Reste à régler TTC', data: 'reste', className: 'text-right', render: rendu(formaterMontant)}],
                    total: 'reste', formater: formaterMontant, tri: [[3, 'desc']],
                },
            };

            $(".carte-detail").on('click', function() {
                var indicateur = $(this).data('indicateur');
                var detail = details[indicateur];
                $("#titre-detail").text(detail.titre);
                $("#resume-detail").text('Chargement…');
                if (tableDetail) {
                    tableDetail.destroy();
                    $("#table-detail").empty();
                    tableDetail = null;
                }
                $("#modal-detail").modal('show');

                // Une réponse arrivée après l'ouverture d'un autre détail est ignorée
                var demande = ++demandeDetail;
                $.get('{{route('kpi.finance_detail')}}', $.extend(filtres(), {indicateur: indicateur}), function(retour) {
                    if (demande !== demandeDetail) {
                        return;
                    }
                    var total = retour.lignes.reduce(function(somme, ligne) { return somme + (ligne[detail.total] || 0); }, 0);
                    $("#resume-detail").text(retour.lignes.length + ' ligne(s) — Total : ' + detail.formater(total)
                        + (indicateur === 'echu' ? '' : ' — Période : ' + periodeCourante));
                    tableDetail = $("#table-detail").DataTable({
                        data: retour.lignes,
                        columns: detail.colonnes,
                        order: detail.tri || [[1, 'asc']],
                        pageLength: 25,
                        destroy: true,
                        language: { url: 'https://cdn.datatables.net/plug-ins/1.10.24/i18n/French.json' },
                    });
                }, 'json');
            });

            $("#societe, #annee").on('change', charger);
            charger();
        });
    </script>
@endsection