@extends('models')
@section('titre-page', 'Stats Laboratoire')
@section('content-body')

    @php
        // Le mode d'exploitation decide du nom donne au perimetre : TPOM / WINOULA chez
        // l'un, C.M.U ailleurs. Meme libelle que le filtre du tableau de bord.
        $ModeGpharma = ModeGpharma();
        $libelleCMU = $ModeGpharma == 3 ? 'TPOM' : 'C.M.U';
        $libelleHorsCMU = $ModeGpharma == 3 ? 'WINOULA' : 'NON ' . $libelleCMU;
        // $devise = $ModeGpharma == 3 ? 'EUR' : 'F';
        $devise = '';
    @endphp

    <style>
        /* Le tableau est construit a la main : DataTables ne sait pas tenir une rupture
           avec sous-totaux, et l'etat doit s'imprimer et s'exporter tel qu'il s'affiche. */
        #tableStatLabo {
            font-size: 12px;
            margin-bottom: 0;
        }

        #tableStatLabo thead th {
            position: sticky;
            top: 0;
            z-index: 3;
            background: #182c37;
            color: #fff;
            white-space: nowrap;
            font-weight: 600;
            padding: 8px 10px;
            cursor: pointer;
            user-select: none;
        }

        #tableStatLabo thead th .fleche-tri {
            opacity: .35;
            margin-left: 4px;
        }

        #tableStatLabo thead th.tri-actif .fleche-tri {
            opacity: 1;
        }

        #tableStatLabo tbody td {
            padding: 5px 10px;
            border-bottom: 1px solid #f0f1f3;
            vertical-align: middle;
        }

        #tableStatLabo tr.ligne-rupture td {
            background: #f4f1fc;
            border-top: 1px solid #ded4f5;
            border-bottom: 1px solid #ded4f5;
            padding: 6px 10px;
            font-weight: 600;
            cursor: pointer;
        }

        #tableStatLabo tr.ligne-rupture .code-client {
            color: #7b8794;
            font-weight: 500;
            margin-right: 10px;
        }

        #tableStatLabo tr.ligne-rupture .nom-client,
        #tableStatLabo tr.ligne-rupture .cumul-client {
            color: #6b4fbb;
        }

        #tableStatLabo tr.ligne-rupture .compteur-client {
            color: #566270;
            font-weight: 500;
            margin-right: 14px;
        }

        #tableStatLabo tbody tr.ligne-detail:hover td {
            background: #f7fafc;
        }

        #tableStatLabo tbody tr.ligne-avoir td {
            color: #d9534f;
        }

        #tableStatLabo .col-num {
            text-align: right;
            white-space: nowrap;
        }

        #tableStatLabo .col-centre {
            text-align: center;
            white-space: nowrap;
        }

        #tableStatLabo tfoot td {
            position: sticky;
            bottom: 0;
            background: #f4f6f8;
            border-top: 2px solid #d9dee3;
            font-weight: 700;
            padding: 8px 10px;
            z-index: 2;
        }

        .zoneTableStatLabo {
            max-height: 62vh;
            overflow: auto;
            border: 1px solid #eceff1;
            border-radius: 4px;
        }

        .chevron-rupture {
            display: inline-block;
            transition: transform .15s ease;
            color: #6b4fbb;
        }

        tr.rupture-repliee .chevron-rupture {
            transform: rotate(-90deg);
        }
    </style>

    <!-- Page Header -->
    <div class="d-md-flex d-block align-items-center justify-content-between mt-4 page-header-breadcrumb">
        <div class="col-xl-12 col-12">
            <div class="row mb-2">
                <div class="col-xl-7 col-md-4 mt-2">
                    <nav>
                        <ol class="breadcrumb mb-0">
                            <li class="breadcrumb-item text-light"><a href="javascript:void(0);">Ventes</a></li>
                            <li class="breadcrumb-item active" aria-current="page">Stats Laboratoire</li>
                        </ol>
                    </nav>
                </div>
            </div>
        </div>
    </div>

    <div class="card">
        <div class="card-body">

            <div class="card" style="background:#edeeee">
                <div class="p-3">

                    <div class="card">
                        <div class="p-2">

                            <div class="row g-2">

                                <div class="col-xl-2 col-md-4">
                                    <label class="mt-1 fs-12 text-muted">Site</label>
                                    <select class="Pselect2 form-select AgenceListSelect" id="AgenceListSelectStatLabo"
                                        @disabled(checkIfDroit('DG_AccesMultiSite'))>
                                    </select>
                                </div>

                                <div class="col-xl-3 col-md-8">
                                    <label class="mt-1 fs-12 text-muted">Période</label>
                                    <input type="text" name="daterange" class="form-control text-center"
                                        style="padding:6px" id="dateInputStatLabo">
                                </div>

                                <div class="col-xl-3 col-md-6">
                                    <label class="mt-1 fs-12 text-muted">Laboratoire</label>
                                    <select class="form-select" id="LaboListSelectStatLabo"></select>
                                </div>

                                <div class="col-xl-2 col-md-6">
                                    <label class="mt-1 fs-12 text-muted">Type produit</label>
                                    <select class="Pselect2 form-select" id="TypeProduitStatLabo">
                                        <option value="-1">TOUS</option>
                                        <option value="0">{{ $libelleHorsCMU }}</option>
                                        <option value="1">{{ $libelleCMU }}</option>
                                    </select>
                                </div>

                                <div class="col-xl-2 col-md-6 d-flex align-items-end">
                                    <div class="form-check mb-2">
                                        <input class="form-check-input" type="checkbox" id="chkAvoirsStatLabo" checked>
                                        <label class="form-check-label fs-12" for="chkAvoirsStatLabo">
                                            Déduire les avoirs
                                        </label>
                                    </div>
                                </div>

                                <div class="col-xl-4 col-md-6">
                                    <label class="mt-1 fs-12 text-muted">Client</label>
                                    <select class="form-select" id="ClientListSelectStatLabo"></select>
                                </div>

                                <div class="col-xl-5 col-md-6">
                                    <label class="mt-1 fs-12 text-muted">Produit</label>
                                    <select class="form-select" id="ProduitListSelectStatLabo"></select>
                                </div>

                                <div class="col-xl-3 col-md-12 d-flex align-items-end">
                                    <div class="d-flex mb-1">

                                        <div id="BlockBtnSearchStatLabo" class="me-1">
                                            <span data-bs-toggle="tooltip" title="Recherche" role="button"
                                                id="btnSearchStatLabo"
                                                class="badge bg-primary d-flex justify-content-center align-items-center"
                                                style="height:33px; width:60px;"><i class="ri ri-search-line"
                                                    style="font-size:17px;"></i></span>
                                        </div>

                                        <div id="BlockBtnLoadStatLabo" class="me-1" style="display:none">
                                            <span role="button"
                                                class="badge bg-primary d-flex justify-content-center align-items-center"
                                                style="height:33px; width:60px;">
                                                <span class="spinner-border spinner-border-sm" role="status"
                                                    aria-hidden="true"></span>
                                            </span>
                                        </div>

                                        <div id="BlockBtnPrintStatLabo" class="me-1">
                                            <span data-bs-toggle="tooltip" title="Imprimer" role="button"
                                                id="btnPrintStatLabo"
                                                class="badge bg-warning d-flex justify-content-center align-items-center"
                                                style="height:33px; width:60px;"><i class="ri ri-printer-line"
                                                    style="font-size:17px;"></i></span>
                                        </div>

                                        <div id="BlockBtnPrintLoadStatLabo" class="me-1" style="display:none">
                                            <span role="button"
                                                class="badge bg-warning d-flex justify-content-center align-items-center"
                                                style="height:33px; width:60px;">
                                                <span class="spinner-border spinner-border-sm" role="status"
                                                    aria-hidden="true"></span>
                                            </span>
                                        </div>

                                        <div>
                                            <span data-bs-toggle="tooltip" title="Export du tableau" role="button"
                                                id="btnExportStatLabo"
                                                class="badge bg-success d-flex justify-content-center align-items-center"
                                                style="height:33px; width:60px;"><i class="ri-file-excel-2-line"
                                                    style="font-size:17px;"></i></span>
                                        </div>
                                    </div>
                                </div>

                            </div>
                        </div>
                    </div>

                    <div class="row g-2 flex-nowrap mb-2" style="margin-top:-20px">
                        <div class="col">
                            <div class="card custom-card border-top-card border-top-primary rounded-0">
                                <div class="card-body p-3 py-2">
                                    <div class="text-center">
                                        <p class="fs-12 text-muted mb-1 text-nowrap">Clients</p>
                                        <div class="mb-0 fw-semibold text-nowrap" id="statLaboNbClients">0</div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="col">
                            <div class="card custom-card border-top-card border-top-primary rounded-0">
                                <div class="card-body p-3 py-2">
                                    <div class="text-center">
                                        <p class="fs-12 text-muted mb-1 text-nowrap">Lignes</p>
                                        <div class="mb-0 fw-semibold text-nowrap" id="statLaboNbLignes">0</div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="col">
                            <div class="card custom-card border-top-card border-top-primary rounded-0">
                                <div class="card-body p-3 py-2">
                                    <div class="text-center">
                                        <p class="fs-12 text-muted mb-1 text-nowrap">Références</p>
                                        <div class="mb-0 fw-semibold text-nowrap" id="statLaboNbReferences">0</div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="col">
                            <div class="card custom-card border-top-card border-top-primary rounded-0">
                                <div class="card-body p-3 py-2">
                                    <div class="text-center">
                                        <p class="fs-12 text-muted mb-1 text-nowrap">Quantités vendues</p>
                                        <div class="mb-0 fw-semibold text-nowrap" id="statLaboQte">0</div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="col">
                            <div class="card custom-card border-top-card border-top-primary rounded-0">
                                <div class="card-body p-3 py-2">
                                    <div class="text-center">
                                        <p class="fs-12 text-muted mb-1 text-nowrap">Valeur</p>
                                        <div class="mb-0 fw-semibold text-nowrap text-primary" id="statLaboValeur">0</div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                </div>
            </div>

            <div class="d-flex flex-wrap align-items-center justify-content-between mb-2">

                <div class="d-flex align-items-center">
                    <span class="fs-12 text-muted me-2" id="resumeStatLabo">Aucune donnée</span>
                </div>

                <div class="d-flex align-items-center">
                    <div class="me-2" style="width:230px">
                        <input type="text" class="form-control form-control-sm" id="rechercheStatLabo"
                            placeholder="Rechercher (client, EAN, produit…)">
                    </div>
                    <div class="btn-group btn-group-sm" role="group">
                        <button type="button" class="btn btn-danger btnVueStatLabo active" data-vue="detail">Détail</button>
                        <button type="button" class="btn btn-outline-danger btnVueStatLabo"
                            data-vue="synthese">Synthèse</button>
                    </div>
                </div>
            </div>

            <div class="zoneTableStatLabo">
                <table class="table table-sm w-100" id="tableStatLabo">
                    <thead>
                        <tr>
                            <th data-col="CodeClient">CIP CLIENT <i class="ri-arrow-up-down-line fleche-tri"></i></th>
                            <th data-col="CodeArticle">EAN <i class="ri-arrow-up-down-line fleche-tri"></i></th>
                            <th data-col="Designation">LIBELLE PRODUIT <i class="ri-arrow-up-down-line fleche-tri"></i>
                            </th>
                            <th data-col="DateTri" class="colDetailStatLabo">DATE FACTURE <i
                                    class="ri-arrow-up-down-line fleche-tri"></i></th>
                            <th data-col="NumeroFacture" class="colDetailStatLabo">NUMERO FACTURE <i
                                    class="ri-arrow-up-down-line fleche-tri"></i></th>
                            <th data-col="QteVendue" class="col-centre">QTES VENDUES <i
                                    class="ri-arrow-up-down-line fleche-tri"></i></th>
                            <th data-col="Valeur" class="col-num">VALEUR ({{ $devise }}) <i
                                    class="ri-arrow-up-down-line fleche-tri"></i></th>
                        </tr>
                    </thead>
                    <tbody></tbody>
                    <tfoot></tfoot>
                </table>
            </div>

        </div>
    </div>

@endsection

@section('script')
    <script>
        $(document).ready(function() {

            /* Le devise et les libelles de perimetre sont fixes par le mode d'exploitation :
               ils accompagnent l'etat jusque sur le papier envoye au laboratoire. */
            const DEVISE_STAT_LABO = @json($devise);
            const LIBELLES_TYPE_PRODUIT = {
                '-1': 'TOUS',
                '0': @json($libelleHorsCMU),
                '1': @json($libelleCMU)
            };

            // Les lignes rendues par le serveur, dans leur ordre d'origine.
            let lignesStatLabo = [];
            // Les groupes effectivement affiches (apres recherche et tri).
            let groupesStatLabo = [];
            // Le tri en cours : aucune colonne = ordre naturel (client, date, facture).
            let triStatLabo = { colonne: null, sens: 1 };
            // Les clients replies, retenus par code : un depliage ne doit pas etre perdu
            // au moindre re-rendu (recherche, tri).
            let ruptureRepliee = {};
            let vueStatLabo = 'detail';

            /* Montants : deux decimales toujours, y compris les zeros de fin.
               formatNumberPerf les supprime (13,30 devient 13,3), ce qui ne convient pas a
               un etat de valeurs adresse a un laboratoire. Les quantites, elles, restent
               au formateur maison. */
            function montantStatLabo(valeur) {

                const nombre = Number(valeur) || 0;

                // toLocaleString separe les milliers par une espace insecable etroite selon
                // le navigateur : on la ramene a l'espace ordinaire, seule reprise a
                // l'identique par Excel et par le PDF.
                return nombre.toLocaleString('fr-FR', {
                    minimumFractionDigits: 2,
                    maximumFractionDigits: 2
                }).replace(/[   ]/g, ' ');
            }

            /* Les libelles viennent de la base et repartent dans du HTML construit a la
               main, attributs compris : les guillemets doivent partir eux aussi, un nom de
               client qui en porte casserait sinon le data-cle de sa rupture. */
            function echapper(texte) {

                return $('<div>').text(texte == null ? '' : texte).html()
                    .replace(/"/g, '&quot;').replace(/'/g, '&#39;');
            }

            listeAgence();
            listeLaboratoiresStatLabo();
            initSelect2ClientAjax('#ClientListSelectStatLabo');
            initSelect2ProduitAjax('#ProduitListSelectStatLabo');

            // La periode par defaut est le mois en cours : c'est le pas de l'etat envoye
            // chaque mois aux laboratoires.
            (function periodeParDefaut() {

                const debut = moment().startOf('month');
                const fin = moment().endOf('month');
                const $champ = $('#dateInputStatLabo');

                $champ.val(debut.format('DD/MM/YYYY') + ' - ' + fin.format('DD/MM/YYYY'));

                const picker = $champ.data('daterangepicker');

                if (picker) {
                    picker.setStartDate(debut);
                    picker.setEndDate(fin);
                }
            })();

            function listeLaboratoiresStatLabo() {

                MarequetesAjax("{{ route('StatsLaboratoire.laboratoires') }}", "GET", null, null, true, "JSON",
                    function(resp) {

                        if (resp.error) {
                            notif('danger', 'Erreur', resp.msg);
                            return false;
                        }

                        const $select = $('#LaboListSelectStatLabo');

                        $select.empty().append(new Option('TOUS LES LABORATOIRES', '0', true, true));

                        $.each(resp.data, function(i, labo) {
                            $select.append(new Option(labo.NomLaboratoire, labo.IDLABORATOIRE));
                        });

                        $select.select2({ width: '100%' });
                    });
            }

            // Le combo produit suit le laboratoire retenu : chercher « AZINC » dans le
            // catalogue entier n'a pas d'interet quand l'etat porte sur un seul laboratoire.
            $(document).on('change', '#LaboListSelectStatLabo', function() {

                initSelect2ProduitAjax('#ProduitListSelectStatLabo', {
                    IDLABORATOIRE: $(this).val() || 0
                });
            });

            function parametresStatLabo() {

                const periode = dissocierDate($('#dateInputStatLabo').val());

                return {
                    Agence: $('#AgenceListSelectStatLabo').val(),
                    DateDeb: periode[0],
                    DateFin: periode[1],
                    Laboratoire: $('#LaboListSelectStatLabo').val() || 0,
                    Client: $('#ClientListSelectStatLabo').val() || 0,
                    Produit: $('#ProduitListSelectStatLabo').val() || 0,
                    TypeProduit: $('#TypeProduitStatLabo').val(),
                    AvecAvoirs: $('#chkAvoirsStatLabo').is(':checked') ? 1 : 0,
                    Synthese: vueStatLabo === 'synthese' ? 1 : 0
                };
            }

            function libelleSelectionne(selecteur, valeurNeutre) {

                const valeur = $(selecteur).val();

                if (!valeur || valeur == 0) {
                    return valeurNeutre;
                }

                return $.trim($(selecteur).find('option:selected').text());
            }

            /* :::::::::::::::::::::::::::::::: CHARGEMENT :::::::::::::::::::::::::::::::: */

            function chargerStatLabo() {

                MarequetesAjax("{{ route('StatsLaboratoire.donnees') }}", "GET", parametresStatLabo(), null, true,
                    "JSON",
                    function(resp) {

                        $('#BlockBtnSearchStatLabo').css('display', 'block');
                        $('#BlockBtnLoadStatLabo').css('display', 'none');

                        if (resp.error) {
                            notif('danger', 'Erreur', resp.msg);
                            lignesStatLabo = [];
                            rendreStatLabo();
                            return false;
                        }

                        // L'ordre d'arrivee sert de tri naturel : on le fige pour pouvoir
                        // y revenir apres un tri sur colonne.
                        lignesStatLabo = (resp.dataLigne || []).map(function(ligne, rang) {
                            ligne.rangNaturel = rang;
                            return ligne;
                        });

                        ruptureRepliee = {};
                        triStatLabo = { colonne: null, sens: 1 };
                        $('#tableStatLabo thead th').removeClass('tri-actif');

                        rendreStatLabo();
                    },
                    function() {

                        $('#BlockBtnSearchStatLabo').css('display', 'block');
                        $('#BlockBtnLoadStatLabo').css('display', 'none');
                        notifError('Échec du chargement des statistiques.');
                    },
                    function() {

                        $('#BlockBtnSearchStatLabo').css('display', 'none');
                        $('#BlockBtnLoadStatLabo').css('display', 'block');
                    });
            }

            /* :::::::::::::::::::::::::::: TRI, RECHERCHE, RUPTURE :::::::::::::::::::::::: */

            function comparerValeurs(a, b, colonne) {

                if (colonne === 'QteVendue' || colonne === 'Valeur') {
                    return (Number(a[colonne]) || 0) - (Number(b[colonne]) || 0);
                }

                return String(a[colonne] || '').localeCompare(String(b[colonne] || ''), 'fr', {
                    numeric: true,
                    sensitivity: 'base'
                });
            }

            /**
             * Les groupes affiches : la recherche filtre les lignes, le tri reordonne les
             * clients puis les lignes de chaque client, et chaque groupe porte ses cumuls.
             */
            function construireGroupes() {

                const terme = $.trim($('#rechercheStatLabo').val()).toUpperCase();

                let lignes = lignesStatLabo;

                if (terme !== '') {

                    lignes = lignes.filter(function(l) {

                        return (l.CodeClient + ' ' + l.NomClient + ' ' + l.CodeArticle + ' ' +
                            l.Designation + ' ' + l.NumeroFacture + ' ' + l.DateFacture)
                            .toUpperCase().indexOf(terme) !== -1;
                    });
                }

                const index = {};
                const groupes = [];

                lignes.forEach(function(ligne) {

                    const cle = ligne.CodeClient + '|' + ligne.NomClient;

                    if (index[cle] === undefined) {

                        index[cle] = groupes.length;

                        groupes.push({
                            cle: cle,
                            CodeClient: ligne.CodeClient,
                            NomClient: ligne.NomClient,
                            lignes: [],
                            totalQte: 0,
                            totalValeur: 0
                        });
                    }

                    const groupe = groupes[index[cle]];

                    groupe.lignes.push(ligne);
                    groupe.totalQte += Number(ligne.QteVendue) || 0;
                    groupe.totalValeur += Number(ligne.Valeur) || 0;
                });

                const colonne = triStatLabo.colonne;
                const sens = triStatLabo.sens;

                if (colonne === 'CodeClient') {

                    // Trier sur le client reordonne les ruptures elles-memes.
                    groupes.sort(function(a, b) {
                        return sens * String(a.CodeClient).localeCompare(String(b.CodeClient), 'fr', {
                            numeric: true
                        });
                    });
                } else if (colonne === 'QteVendue' || colonne === 'Valeur') {

                    // Sur une mesure, ce sont les cumuls des clients qui donnent l'ordre :
                    // c'est ainsi qu'on lit « quel client a le plus pris ».
                    groupes.sort(function(a, b) {
                        const champ = colonne === 'QteVendue' ? 'totalQte' : 'totalValeur';
                        return sens * (a[champ] - b[champ]);
                    });
                }

                if (colonne !== null) {

                    groupes.forEach(function(groupe) {

                        groupe.lignes.sort(function(a, b) {

                            const ecart = comparerValeurs(a, b, colonne);

                            return ecart !== 0 ? sens * ecart : a.rangNaturel - b.rangNaturel;
                        });
                    });
                }

                return groupes;
            }

            function rendreStatLabo() {

                groupesStatLabo = construireGroupes();

                const morceaux = [];
                const colonnes = vueStatLabo === 'synthese' ? 5 : 7;

                let rang = 0;
                let totalQte = 0;
                let totalValeur = 0;
                const references = {};

                groupesStatLabo.forEach(function(groupe) {

                    const repliee = ruptureRepliee[groupe.cle] === true;

                    totalQte += groupe.totalQte;
                    totalValeur += groupe.totalValeur;

                    morceaux.push(
                        '<tr class="ligne-rupture' + (repliee ? ' rupture-repliee' : '') +
                        '" data-cle="' + echapper(groupe.cle) + '">' +
                        '<td colspan="' + (colonnes - 2) + '">' +
                        '<i class="ri-arrow-down-s-line chevron-rupture"></i> ' +
                        '<span class="code-client">' + echapper(groupe.CodeClient) + '</span>' +
                        '<span class="nom-client">' + echapper(groupe.NomClient) + '</span>' +
                        '</td>' +
                        '<td class="col-centre">' +
                        '<span class="compteur-client">' + formatNumberPerf(groupe.lignes.length) +
                        ' ligne' + (groupe.lignes.length > 1 ? 's' : '') + '</span>' +
                        '<span class="cumul-client">' + formatNumberPerf(groupe.totalQte) + ' unités</span>' +
                        '</td>' +
                        '<td class="col-num cumul-client">' + montantStatLabo(groupe.totalValeur) + ' ' +
                        DEVISE_STAT_LABO + '</td>' +
                        '</tr>'
                    );

                    groupe.lignes.forEach(function(ligne) {

                        rang++;
                        references[ligne.IDPRODUIT] = true;

                        const estAvoir = (Number(ligne.Valeur) || 0) < 0;

                        morceaux.push(
                            '<tr class="ligne-detail' + (estAvoir ? ' ligne-avoir' : '') + '"' +
                            (repliee ? ' style="display:none"' : '') + ' data-cle="' + echapper(groupe.cle) +
                            '">' +
                            '<td>' + echapper(ligne.CodeClient) + '</td>' +
                            '<td>' + echapper(ligne.CodeArticle) + '</td>' +
                            '<td class="fw-semibold">' + echapper(ligne.Designation) + '</td>' +
                            (vueStatLabo === 'synthese' ? '' :
                                '<td>' + echapper(ligne.DateFacture) + '</td>' +
                                '<td>' + echapper(ligne.NumeroFacture) + '</td>') +
                            '<td class="col-centre">' + formatNumberPerf(ligne.QteVendue) + '</td>' +
                            '<td class="col-num">' + montantStatLabo(ligne.Valeur) + '</td>' +
                            '</tr>'
                        );
                    });
                });

                if (morceaux.length === 0) {

                    morceaux.push('<tr><td colspan="' + colonnes +
                        '" class="text-center text-muted py-4">Aucune ligne pour ces critères</td></tr>');
                }

                $('#tableStatLabo tbody').html(morceaux.join(''));

                $('#tableStatLabo tfoot').html(
                    '<tr>' +
                    '<td colspan="' + (colonnes - 2) + '">Σ&nbsp;&nbsp;Total' +
                    ' <span class="fw-normal text-muted">(' + formatNumberPerf(groupesStatLabo.length) +
                    ' client' + (groupesStatLabo.length > 1 ? 's' : '') + ', ' +
                    formatNumberPerf(rang) + ' ligne' + (rang > 1 ? 's' : '') + ')</span></td>' +
                    '<td class="col-centre">' + formatNumberPerf(totalQte) + '</td>' +
                    '<td class="col-num">' + montantStatLabo(totalValeur) + ' ' + DEVISE_STAT_LABO + '</td>' +
                    '</tr>'
                );

                // Les colonnes de facture n'ont pas de sens en synthese : les lignes y sont
                // le cumul de la periode, pas une facture.
                $('.colDetailStatLabo').toggle(vueStatLabo !== 'synthese');

                $('#statLaboNbClients').text(formatNumberPerf(groupesStatLabo.length));
                $('#statLaboNbLignes').text(formatNumberPerf(rang));
                $('#statLaboNbReferences').text(formatNumberPerf(Object.keys(references).length));
                $('#statLaboQte').text(formatNumberPerf(totalQte));
                $('#statLaboValeur').text(montantStatLabo(totalValeur));

                $('#resumeStatLabo').text(
                    groupesStatLabo.length === 0 ? 'Aucune donnée' :
                    formatNumberPerf(groupesStatLabo.length) + ' client' +
                    (groupesStatLabo.length > 1 ? 's' : '') + ' sur la période');
            }

            $(document).on('click', '#tableStatLabo thead th', function() {

                const colonne = $(this).data('col');

                if (!colonne) return;

                if (triStatLabo.colonne === colonne) {
                    triStatLabo.sens = -triStatLabo.sens;
                } else {
                    triStatLabo.colonne = colonne;
                    triStatLabo.sens = 1;
                }

                $('#tableStatLabo thead th').removeClass('tri-actif');
                $(this).addClass('tri-actif');

                rendreStatLabo();
            });

            $(document).on('click', '#tableStatLabo tr.ligne-rupture', function() {

                const cle = $(this).data('cle');

                ruptureRepliee[cle] = !(ruptureRepliee[cle] === true);

                $(this).toggleClass('rupture-repliee', ruptureRepliee[cle]);
                $('#tableStatLabo tr.ligne-detail').filter(function() {
                    return $(this).data('cle') === cle;
                }).toggle(!ruptureRepliee[cle]);
            });

            let minuteurRecherche = null;

            $(document).on('input', '#rechercheStatLabo', function() {

                clearTimeout(minuteurRecherche);
                minuteurRecherche = setTimeout(rendreStatLabo, 200);
            });

            $(document).on('click', '.btnVueStatLabo', function() {

                const vue = $(this).data('vue');

                if (vue === vueStatLabo) return;

                vueStatLabo = vue;

                $('.btnVueStatLabo').removeClass('active btn-danger').addClass('btn-outline-danger');
                $(this).removeClass('btn-outline-danger').addClass('active btn-danger');

                // Detail et synthese ne sont pas la meme requete : on recharge.
                chargerStatLabo();
            });

            $(document).on('click', '#btnSearchStatLabo', chargerStatLabo);

            /* :::::::::::::::::::::::::::::::::: EXPORT :::::::::::::::::::::::::::::::::: */

            $(document).on('click', '#btnExportStatLabo', function() {

                if (groupesStatLabo.length === 0) {
                    notif('danger', 'Erreur', 'Nous n\'avons aucune ligne à exporter');
                    return false;
                }

                const detail = vueStatLabo !== 'synthese';

                const entete = detail ?
                    ['CIP CLIENT', 'EAN', 'LIBELLE PRODUIT', 'DATE FACTURE', 'NUMERO FACTURE', 'QTES VENDUES',
                        'VALEUR (' + DEVISE_STAT_LABO + ')'
                    ] :
                    ['CIP CLIENT', 'EAN', 'LIBELLE PRODUIT', 'QTES VENDUES', 'VALEUR (' + DEVISE_STAT_LABO + ')'];

                const largeur = entete.length;

                function ligneVide() {
                    return new Array(largeur).fill('');
                }

                const feuille = [];

                feuille.push(['STATISTIQUES DE VENTES PAR LABORATOIRE']);
                feuille.push(['Laboratoire', libelleSelectionne('#LaboListSelectStatLabo', 'TOUS LES LABORATOIRES')]);
                feuille.push(['Période', $('#dateInputStatLabo').val()]);
                feuille.push(['Site', libelleSelectionne('#AgenceListSelectStatLabo', 'TOUS')]);
                feuille.push(['Client', libelleSelectionne('#ClientListSelectStatLabo', 'TOUS LES CLIENTS')]);
                feuille.push(['Produit', libelleSelectionne('#ProduitListSelectStatLabo', 'TOUS LES PRODUITS')]);
                feuille.push(['Type produit', LIBELLES_TYPE_PRODUIT[$('#TypeProduitStatLabo').val()] || 'TOUS']);
                feuille.push(['Avoirs', $('#chkAvoirsStatLabo').is(':checked') ? 'Déduits' : 'Exclus']);
                feuille.push([]);
                feuille.push(entete);

                let totalQte = 0;
                let totalValeur = 0;

                groupesStatLabo.forEach(function(groupe) {

                    totalQte += groupe.totalQte;
                    totalValeur += groupe.totalValeur;

                    // La rupture : code et nom du client en tete, ses cumuls dans les deux
                    // dernieres colonnes — exactement ce que porte la ligne de rupture
                    // affichee a l'ecran.
                    const rupture = ligneVide();

                    rupture[0] = groupe.CodeClient;
                    rupture[1] = groupe.NomClient;
                    rupture[largeur - 2] = groupe.totalQte;
                    rupture[largeur - 1] = Number(groupe.totalValeur.toFixed(2));

                    feuille.push(rupture);

                    groupe.lignes.forEach(function(ligne) {

                        feuille.push(detail ? [
                            ligne.CodeClient, ligne.CodeArticle, ligne.Designation, ligne.DateFacture,
                            ligne.NumeroFacture, Number(ligne.QteVendue), Number(ligne.Valeur)
                        ] : [
                            ligne.CodeClient, ligne.CodeArticle, ligne.Designation,
                            Number(ligne.QteVendue), Number(ligne.Valeur)
                        ]);
                    });

                    feuille.push([]);
                });

                const total = ligneVide();

                total[0] = 'TOTAL GÉNÉRAL';
                total[largeur - 2] = totalQte;
                total[largeur - 1] = Number(totalValeur.toFixed(2));

                feuille.push(total);

                const ws = XLSX.utils.aoa_to_sheet(feuille);

                // Les colonnes de montants gardent leurs deux decimales dans Excel.
                const colonneValeur = largeur - 1;

                for (let r = 9; r < feuille.length; r++) {

                    const ref = XLSX.utils.encode_cell({ r: r, c: colonneValeur });

                    if (ws[ref] && typeof ws[ref].v === 'number') {
                        ws[ref].z = '#,##0.00';
                    }
                }

                ws['!cols'] = detail ?
                    [{ wch: 12 }, { wch: 16 }, { wch: 52 }, { wch: 13 }, { wch: 22 }, { wch: 14 }, { wch: 14 }] :
                    [{ wch: 12 }, { wch: 16 }, { wch: 52 }, { wch: 14 }, { wch: 14 }];

                const wb = XLSX.utils.book_new();

                XLSX.utils.book_append_sheet(wb, ws, 'Stats labo');

                const nomLabo = libelleSelectionne('#LaboListSelectStatLabo', 'TOUS')
                    .replace(/[^a-zA-Z0-9]+/g, '_').substring(0, 30);

                XLSX.writeFile(wb, 'StatsLabo_' + nomLabo + '_' + formatDateToYmdHisMs() + '.xlsx');
            });

            /* :::::::::::::::::::::::::::::::: IMPRESSION :::::::::::::::::::::::::::::::: */

            $(document).on('click', '#btnPrintStatLabo', function() {

                if (groupesStatLabo.length === 0) {
                    notif('danger', 'Erreur', 'Nous n\'avons aucune ligne à imprimer');
                    return false;
                }

                // Les lignes partent dans l'ordre affiche : le papier doit reprendre le
                // tableau tel qu'il est a l'ecran, ruptures et tri compris.
                const lignes = [];

                groupesStatLabo.forEach(function(groupe) {

                    groupe.lignes.forEach(function(ligne) {

                        lignes.push({
                            CodeClient: ligne.CodeClient,
                            NomClient: ligne.NomClient,
                            CodeArticle: ligne.CodeArticle,
                            Designation: ligne.Designation,
                            DateFacture: ligne.DateFacture,
                            NumeroFacture: ligne.NumeroFacture,
                            QteVendue: ligne.QteVendue,
                            Valeur: ligne.Valeur
                        });
                    });
                });

                const parametres = parametresStatLabo();

                MarequetesAjax("{{ route('StatsLaboratoire.impression') }}", "POST", {
                        _token: '{{ csrf_token() }}',
                        lignes: JSON.stringify(lignes),
                        Synthese: parametres.Synthese,
                        DateDeb: parametres.DateDeb,
                        DateFin: parametres.DateFin,
                        Devise: DEVISE_STAT_LABO,
                        LibelleLaboratoire: libelleSelectionne('#LaboListSelectStatLabo',
                            'TOUS LES LABORATOIRES'),
                        LibelleClient: libelleSelectionne('#ClientListSelectStatLabo', 'TOUS LES CLIENTS'),
                        LibelleProduit: libelleSelectionne('#ProduitListSelectStatLabo', 'TOUS LES PRODUITS'),
                        LibelleSite: libelleSelectionne('#AgenceListSelectStatLabo', 'TOUS'),
                        LibelleTypeProduit: LIBELLES_TYPE_PRODUIT[$('#TypeProduitStatLabo').val()] || 'TOUS'
                    },
                    /* Le type de contenu est passe explicitement.
                       MarequetesAjax recopie tel quel ce qu'on lui donne, et jQuery pose
                       l'entete des qu'une valeur differente de false lui arrive : un null
                       partait en « Content-Type: null », PHP renoncait alors a lire le
                       corps, $_POST arrivait vide et le serveur repondait « Aucune ligne a
                       imprimer » alors que le tableau etait plein. Le GET de la recherche
                       n'etait pas touche, jQuery ne posant l'entete que sur un envoi. */
                    "application/x-www-form-urlencoded; charset=UTF-8", true, "JSON",
                    function(resp) {

                        $('#BlockBtnPrintStatLabo').css('display', 'block');
                        $('#BlockBtnPrintLoadStatLabo').css('display', 'none');

                        if (resp.error) {
                            notif('danger', 'Erreur', resp.msg);
                            return false;
                        }

                        const onglet = window.open('', '_blank');

                        if (onglet !== null) {
                            onglet.document.write(
                                '<iframe src="data:application/pdf;base64,' + resp.pdf +
                                '" style="width:100%; height:100%;" frameborder="0"></iframe>'
                            );
                        }
                    },
                    function() {

                        $('#BlockBtnPrintStatLabo').css('display', 'block');
                        $('#BlockBtnPrintLoadStatLabo').css('display', 'none');
                        notifError('Échec de la génération du PDF.');
                    },
                    function() {

                        $('#BlockBtnPrintStatLabo').css('display', 'none');
                        $('#BlockBtnPrintLoadStatLabo').css('display', 'block');
                    });
            });
        });
    </script>
@endsection