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

    <!-- 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-3">
                <div class="col-xl-7 col-md-6 mt-2">
                    <nav>
                        <ol class="breadcrumb mb-0">
                            <li class="breadcrumb-item text-light"><a href="javascript:void(0);">Paramétrages</a></li>
                            <li class="breadcrumb-item active" aria-current="page">Promotions</li>
                        </ol>
                    </nav>
                </div>
            </div>
        </div>
    </div>
    <!-- Page Header Close -->

    <div class="row mt-xl-2">
        <div class="col-xl-12">
            <div class="card custom-card">
                <div class="card-header justify-content-between">
                    <div class="card-title">Offres promotionnelles</div>
                    <a class="btn btn-success btn-wave" id="btnNouvelleOffre">
                        <i class="ri-add-line"></i> Nouvelle offre
                    </a>
                </div>
                <div class="card-body pb-0">
                    <div class="row align-items-end">
                        <div class="col-xl-2 col-md-3 mb-2">
                            <p class="mb-0 text-muted">Du&nbsp;:</p>
                            <input type="date" class="form-control" id="filtreDebut">
                        </div>
                        <div class="col-xl-2 col-md-3 mb-2">
                            <p class="mb-0 text-muted">Au&nbsp;:</p>
                            <input type="date" class="form-control" id="filtreFin">
                        </div>
                        <div class="col-xl-2 col-md-3 mb-2">
                            <p class="mb-0 text-muted">Site&nbsp;:</p>
                            <select class="form-select" id="filtreAgence">
                                <option value="0">Tous les sites</option>
                            </select>
                        </div>
                        <div class="col-xl-2 col-md-3 mb-2">
                            <p class="mb-0 text-muted">Financeur&nbsp;:</p>
                            <select class="form-select" id="filtreFournisseur">
                                <option value="0">Tous</option>
                            </select>
                        </div>
                        <div class="col-xl-2 col-md-6 mb-2">
                            <p class="mb-0 text-muted">Libellé contient&nbsp;:</p>
                            <input type="text" class="form-control" id="filtreRecherche" placeholder="ex. panaché">
                        </div>
                        <div class="col-xl-1 col-md-3 mb-2">
                            <div class="form-check">
                                <input class="form-check-input" type="checkbox" id="filtreEnVigueur">
                                <label class="form-check-label" for="filtreEnVigueur">En vigueur</label>
                            </div>
                        </div>
                        <div class="col-xl-1 col-md-3 mb-2">
                            <button type="button" class="btn btn-primary btn-wave w-100" id="btnFiltrer">
                                <i class="ri-search-line"></i>
                            </button>
                        </div>
                    </div>
                </div>
                <div class="card-body">
                    <div class="table-responsive">
                        <table class="tablehover table table-striped text-nowrap w-100" id="tableRegles">
                            <thead class="table-header-primary">
                                <tr>
                                    <th data-column="action" data-class="text-center" data-orderable="false"
                                        class="text-center">Actions</th>
                                    <th data-column="NumeroRegle" data-class="text-center" class="text-center colTable">N°</th>
                                    <th data-column="LibelleRegle" class="colTable">Libellé de l'offre</th>
                                    <th data-column="Periode" data-class="text-center" class="text-center colTable">Période</th>
                                    <th data-column="BaseSeuil" data-class="text-center" class="text-center colTable">Seuil compté sur</th>
                                    <th data-column="ModeCumul" data-class="text-center" class="text-center colTable">Répétition</th>
                                    <th data-column="NbreDeclencheurs" data-class="text-center" class="text-center colTable">Déclencheurs</th>
                                    <th data-column="NbrePaliers" data-class="text-center" class="text-center colTable">Paliers</th>
                                    <th data-column="Portee" data-class="text-center" class="text-center colTable">Portée</th>
                                    <th data-column="NomFournisseur" class="colTable">Financeur</th>
                                    <th data-column="NbreAvantages" data-class="text-center" class="text-center colTable">Accordés</th>
                                    <th data-column="Suspendue" data-class="text-center" data-orderable="false"
                                        class="text-center colTable">Suspendue</th>
                                    {{-- Masquée par data-visible : remplissageDataTable la retire du
                                         rendu, plus besoin d'un columnDefs séparé. --}}
                                    <th data-column="IDPROMO_REGLE" data-visible="false" data-searchable="false"
                                        class="colTable d-none">ID</th>
                                </tr>
                            </thead>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>

    {{-- ------------------------------------------------------------------ --}}
    {{-- L'offre, en quatre étapes                                           --}}
    {{-- ------------------------------------------------------------------ --}}

    <div class="modal fade" id="modalOffre" tabindex="-1" aria-hidden="true">
        <div class="modal-dialog modal-xl modal-dialog-scrollable">
            <div class="modal-content">
                <div class="modal-header">
                    <h6 class="modal-title" id="titreModalOffre">Nouvelle offre</h6>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">

                    <div class="alert alert-warning d-none" id="bandeauFigee">
                        <i class="ri-lock-line"></i>
                        <span id="texteFigee"></span>
                    </div>

                    <input type="hidden" id="idRegle" value="0">

                    <ul class="nav nav-tabs tab-style-2 nav-justified mb-3 d-sm-flex d-block" role="tablist">
                        <li class="nav-item">
                            <button class="nav-link active" data-bs-toggle="tab" data-bs-target="#ongletOffre"
                                type="button" role="tab">
                                <i class="ri-price-tag-3-line me-1 align-middle"></i> L'offre
                            </button>
                        </li>
                        <li class="nav-item">
                            <button class="nav-link" data-bs-toggle="tab" data-bs-target="#ongletDeclencheurs"
                                type="button" role="tab">
                                <i class="ri-focus-3-line me-1 align-middle"></i> Ce qui déclenche
                                <span class="badge bg-primary ms-1" id="badgeDeclencheurs">0</span>
                            </button>
                        </li>
                        <li class="nav-item">
                            <button class="nav-link" data-bs-toggle="tab" data-bs-target="#ongletPaliers" type="button"
                                role="tab">
                                <i class="ri-gift-line me-1 align-middle"></i> Ce qui est donné
                                <span class="badge bg-primary ms-1" id="badgePaliers">0</span>
                            </button>
                        </li>
                        <li class="nav-item">
                            <button class="nav-link" data-bs-toggle="tab" data-bs-target="#ongletPortee" type="button"
                                role="tab">
                                <i class="ri-user-star-line me-1 align-middle"></i> Pour qui
                                <span class="badge bg-secondary ms-1" id="badgePortee">tous</span>
                            </button>
                        </li>
                    </ul>

                    <div class="tab-content">

                        {{-- ---------------- Onglet 1 : l'offre ---------------- --}}

                        <div class="tab-pane fade show active" id="ongletOffre" role="tabpanel">

                            <div class="row">
                                <div class="col-xl-8 mb-3">
                                    <label class="form-label">Libellé de l'offre <span class="text-danger">*</span></label>
                                    <input type="text" class="form-control text-uppercase" id="libelleRegle"
                                        placeholder="ex. 36 panachés MKL : 30 % de sur-remise" autocomplete="off">
                                    <small class="text-muted">C'est ce libellé qui expliquera la remise sur la
                                        facture.</small>
                                </div>
                                <div class="col-xl-4 mb-3">
                                    <label class="form-label">Numéro</label>
                                    <input type="text" class="form-control" id="numeroRegle" readonly
                                        placeholder="attribué à l'enregistrement">
                                </div>
                            </div>

                            <div class="row">
                                <div class="col-xl-3 mb-3">
                                    <label class="form-label">Début <span class="text-danger">*</span></label>
                                    <input type="date" class="form-control" id="dateDebutRegle">
                                </div>
                                <div class="col-xl-3 mb-3">
                                    <label class="form-label">Fin <span class="text-danger">*</span></label>
                                    <input type="date" class="form-control" id="dateFinRegle">
                                </div>
                                <div class="col-xl-6 mb-3">
                                    <label class="form-label">Site concerné</label>
                                    <select class="form-select" id="idAgenceRegle">
                                        <option value="0">Tous les sites</option>
                                    </select>
                                </div>
                            </div>

                            {{-- La priorité n'est plus proposée : les offres se cumulent, et
                                 l'ordre dans lequel on les examine ne change ni le taux obtenu
                                 ni la répartition de l'écrêtage à 100 %. Un champ sans effet
                                 induirait en erreur celui qui paramètre. La colonne reste en
                                 base, à sa valeur par défaut, pour le jour où une offre
                                 non cumulable en aura besoin. --}}

                            <div class="row">
                                <div class="col-xl-6 mb-3">
                                    <label class="form-label">Financeur (fournisseur)</label>
                                    <select class="form-select" id="idFournisseurRegle">
                                        <option value="0">Aucun</option>
                                    </select>
                                    <small class="text-muted">Sert à réclamer l'offre à qui la finance.</small>
                                </div>
                                <div class="col-xl-6 mb-3">
                                    <label class="form-label">Laboratoire</label>
                                    <select class="form-select" id="idLaboratoireRegle">
                                        <option value="0">Aucun</option>
                                    </select>
                                </div>
                            </div>

                            <div class="row">
                                <div class="col-xl-6 mb-3">
                                    <label class="form-label">Le seuil se compte sur</label>
                                    <select class="form-select" id="baseSeuilRegle">
                                        <option value="PRODUIT">chaque produit séparément</option>
                                        <option value="GROUPE">l'ensemble des déclencheurs (panaché)</option>
                                        <option value="ASSORTIMENT">un assortiment complet (le produit le moins commandé fait foi)</option>
                                    </select>
                                    <small class="text-muted">Ne concerne que les paliers qui ne nomment pas de
                                        produit.</small>
                                </div>
                                <div class="col-xl-6 mb-3">
                                    <label class="form-label">Répétition de l'avantage</label>
                                    <select class="form-select" id="modeCumulRegle">
                                        <option value="PAR_MULTIPLE">autant de fois que le seuil est atteint</option>
                                        <option value="PAR_UNITE">une fois par unité commandée (le seuil n'est qu'un minimum)</option>
                                        <option value="UNE_FOIS">une seule fois</option>
                                    </select>
                                </div>
                            </div>

                            <div class="row">
                                <div class="col-xl-8 mb-3">
                                    <label class="form-label">Commentaire</label>
                                    <textarea class="form-control" id="commentaireRegle" rows="1"
                                        placeholder="ex. mention du fournisseur : CONSULTER LE BDC"></textarea>
                                </div>
                                <div class="col-xl-4 mb-3">
                                    <label class="form-label">&nbsp;</label>
                                    <div class="form-check mt-2">
                                        <input class="form-check-input" type="checkbox" id="suspendueRegle">
                                        <label class="form-check-label" for="suspendueRegle">Offre suspendue</label>
                                    </div>
                                </div>
                            </div>
                        </div>

                        {{-- ---------------- Onglet 2 : les déclencheurs ---------------- --}}

                        <div class="tab-pane fade" id="ongletDeclencheurs" role="tabpanel">

                            <p class="text-muted">
                                La marchandise qui compte pour atteindre le seuil. Un produit, toute une famille, ou
                                tout un laboratoire. Plusieurs déclencheurs avec « panaché » forment un assortiment.
                            </p>

                            <div class="row align-items-end mb-3 zoneSaisie">
                                <div class="col-xl-3 mb-2">
                                    <label class="form-label">Type</label>
                                    <select class="form-select" id="typeDeclencheur">
                                        <option value="PRODUIT">Produit</option>
                                        <option value="FAMILLE">Famille</option>
                                        <option value="LABORATOIRE">Laboratoire</option>
                                    </select>
                                </div>
                                <div class="col-xl-7 mb-2">
                                    <label class="form-label">Article, famille ou laboratoire</label>
                                    <select class="form-select" id="cibleDeclencheur" style="width:100%"></select>
                                </div>
                                <div class="col-xl-2 mb-2">
                                    <button type="button" class="btn btn-outline-primary w-100" id="btnAjoutDeclencheur">
                                        <i class="ri-add-line"></i> Ajouter
                                    </button>
                                </div>
                            </div>

                            <div class="table-responsive">
                                <table class="table table-sm table-bordered mb-0" id="tableDeclencheurs">
                                    <thead class="table-light">
                                        <tr>
                                            <th style="width:140px">Type</th>
                                            <th>Cible</th>
                                            <th style="width:60px"></th>
                                        </tr>
                                    </thead>
                                    <tbody></tbody>
                                </table>
                            </div>
                        </div>

                        {{-- ---------------- Onglet 3 : les paliers ---------------- --}}

                        <div class="tab-pane fade" id="ongletPaliers" role="tabpanel">

                            <p class="text-muted">
                                Un palier, c'est une quantité minimale et ce qu'elle donne. Plusieurs paliers de même
                                portée forment une progression — 12 → 1 offerte, 24 → 3 offertes : seul le plus élevé
                                atteint s'applique.
                            </p>
                            <p class="text-muted">
                                <i class="ri-scissors-cut-line"></i> Une remise qui ne porte pas sur toute la quantité
                                <strong>découpe la ligne de commande</strong> : la part remisée s'y inscrit à son
                                propre prix, à côté de la part au prix plein. Le client voit alors le même article sur
                                deux lignes — c'est ce qui permet à la facture d'afficher le vrai prix de chacune.
                            </p>

                            <div class="card custom-card mb-3 zoneSaisie">
                                <div class="card-body">

                                    <div class="row align-items-end">
                                        <div class="col-xl-4 mb-2">
                                            <label class="form-label">Ce palier s'applique</label>
                                            <select class="form-select" id="porteePalier">
                                                <option value="TOUS">à tout ce qui déclenche l'offre</option>
                                                <option value="PRODUIT">à un produit précis</option>
                                                <option value="FAMILLE">à une famille de produits</option>
                                            </select>
                                        </div>
                                        <div class="col-xl-8 mb-2 d-none" id="zoneProduitPalier">
                                            <label class="form-label">Produit concerné</label>
                                            <select class="form-select" id="produitPalier" style="width:100%"></select>
                                            <small class="text-muted">Son seuil se comptera sur ce produit seul. S'il ne
                                                déclenche pas encore l'offre, il y sera ajouté.</small>
                                        </div>
                                        <div class="col-xl-8 mb-2 d-none" id="zoneFamillePalier">
                                            <label class="form-label">Famille concernée</label>
                                            <select class="form-select" id="famillePalier" style="width:100%"></select>
                                            <small class="text-muted">Le seuil se comptera sur la <strong>somme</strong>
                                                des lignes de la famille : douze unités panachées entre plusieurs
                                                références atteignent un seuil de douze.</small>
                                        </div>
                                    </div>

                                    <hr class="my-2">

                                    <div class="row align-items-end">
                                        <div class="col-xl-2 mb-2">
                                            <label class="form-label">Qté mini</label>
                                            <input type="number" class="form-control" id="seuilPalier" min="1" step="1">
                                        </div>
                                        <div class="col-xl-3 mb-2">
                                            <label class="form-label">Avantage</label>
                                            <select class="form-select" id="typePalier">
                                                <option value="PRODUIT_OFFERT">Produit offert</option>
                                                <option value="GOODIE">Goodie offert</option>
                                                <option value="SURREMISE_TAUX">Sur-remise (%)</option>
                                                <option value="REMISE_FORFAIT">Remise sur prix cession HT par unité</option>
                                            </select>
                                        </div>
                                        <div class="col-xl-5 mb-2 champOffert">
                                            <label class="form-label">Article offert</label>
                                            <select class="form-select" id="produitOffertPalier"
                                                style="width:100%"></select>
                                        </div>
                                        <div class="col-xl-2 mb-2 champOffert">
                                            <label class="form-label">Qté offerte</label>
                                            <input type="number" class="form-control" id="qteOffertePalier" min="1"
                                                step="1" value="1">
                                        </div>
                                        <div class="col-xl-3 mb-2 champOffert">
                                            <label class="form-label">Le don se répète</label>
                                            {{-- Mêmes formulations qu'au niveau de l'offre : le même
                                                 mode doit se reconnaître des deux côtés. --}}
                                            <select class="form-select" id="cumulPalier">
                                                <option value="">comme l'offre le dit</option>
                                                <option value="PAR_MULTIPLE">autant de fois que le seuil est atteint</option>
                                                <option value="PAR_UNITE">une fois par unité commandée (le seuil n'est qu'un minimum)</option>
                                                <option value="UNE_FOIS">une seule fois</option>
                                            </select>
                                            <small class="text-muted">« 12 achetés = 1 offert » se répète : 24 en
                                                donnent 2. « à partir de 12, une trousse par unité » donne 14 trousses
                                                pour 14 unités. « 1 produit = 1 trousse » ne se répète pas.</small>
                                        </div>
                                        <div class="col-xl-3 mb-2 champTaux d-none">
                                            <label class="form-label">Remise ajoutée (%)</label>
                                            <input type="number" class="form-control" id="tauxPalier" min="0"
                                                step="0.01">
                                            <small class="text-muted">S'ajoute à la remise habituelle du client.</small>
                                        </div>
                                        <div class="col-xl-3 mb-2 champForfait d-none">
                                            <label class="form-label">Remise sur prix cession HT par unité</label>
                                            <input type="number" class="form-control" id="forfaitPalier" min="0"
                                                step="0.01">
                                        </div>
                                        <div class="col-xl-3 mb-2 champAssiette d-none">
                                            <label class="form-label">La remise porte sur</label>
                                            <select class="form-select" id="assiettePalier">
                                                <option value="TOUTE_LA_QUANTITE">toute la quantité</option>
                                                <option value="AU_DELA_DU_SEUIL">les unités au-delà du seuil</option>
                                                <option value="N_UNITES">les premières unités seulement</option>
                                            </select>
                                            <small class="text-muted d-none" id="avisDecoupage">
                                                <i class="ri-scissors-cut-line"></i> La ligne de commande sera
                                                découpée&nbsp;: une part au prix plein, une part remisée.
                                            </small>
                                        </div>
                                        <div class="col-xl-2 mb-2 champQteAssiette d-none">
                                            <label class="form-label">Combien d'unités</label>
                                            <input type="number" class="form-control" id="qteAssiettePalier" min="1"
                                                step="1">
                                            <small class="text-muted">Les premières de la ligne. Pour « la
                                                2<sup>e</sup> boîte à demi-tarif »&nbsp;: 1.</small>
                                        </div>
                                        <div class="col-xl-2 mb-2">
                                            <button type="button" class="btn btn-outline-primary w-100"
                                                id="btnAjoutPalier">
                                                <i class="ri-add-line"></i> Ajouter
                                            </button>
                                        </div>
                                    </div>
                                </div>
                            </div>

                            <div class="table-responsive">
                                <table class="table table-sm table-bordered mb-0" id="tablePaliers">
                                    <thead class="table-light">
                                        <tr>
                                            <th style="width:230px">S'applique à</th>
                                            <th style="width:90px">Qté mini</th>
                                            <th style="width:140px">Avantage</th>
                                            <th>Détail</th>
                                            <th style="width:170px">Le don se répète</th>
                                            <th style="width:190px">Porte sur</th>
                                            <th style="width:60px"></th>
                                        </tr>
                                    </thead>
                                    <tbody></tbody>
                                </table>
                            </div>
                        </div>

                        {{-- ---------------- Onglet 4 : la portée ---------------- --}}

                        <div class="tab-pane fade" id="ongletPortee" role="tabpanel">

                            <p class="text-muted">
                                Sans aucune ligne, l'offre est ouverte à tous les clients. Ajoutez un client, une
                                catégorie ou un groupement pour la réserver.
                            </p>

                            <div class="row align-items-end mb-3 zoneSaisie">
                                <div class="col-xl-3 mb-2">
                                    <label class="form-label">Type</label>
                                    <select class="form-select" id="typePortee">
                                        <option value="CLIENT">Client</option>
                                        <option value="CATEGORIE">Catégorie de client</option>
                                        <option value="GROUPEMENT">Groupement</option>
                                    </select>
                                </div>
                                <div class="col-xl-7 mb-2">
                                    <label class="form-label">Bénéficiaire</label>
                                    <select class="form-select" id="ciblePortee" style="width:100%"></select>
                                </div>
                                <div class="col-xl-2 mb-2">
                                    <button type="button" class="btn btn-outline-primary w-100" id="btnAjoutPortee">
                                        <i class="ri-add-line"></i> Ajouter
                                    </button>
                                </div>
                            </div>

                            <div class="table-responsive">
                                <table class="table table-sm table-bordered mb-0" id="tablePortees">
                                    <thead class="table-light">
                                        <tr>
                                            <th style="width:200px">Type</th>
                                            <th>Bénéficiaire</th>
                                            <th style="width:60px"></th>
                                        </tr>
                                    </thead>
                                    <tbody></tbody>
                                </table>
                            </div>
                        </div>

                    </div>
                </div>
                <div class="modal-footer justify-content-between">
                    <small class="text-muted" id="resumeOffre"></small>
                    <div>
                        <button type="button" class="btn btn-light" data-bs-dismiss="modal">Fermer</button>
                        <button type="button" class="btn btn-primary" id="btnEnregistrerOffre">
                            <i class="ri-save-line"></i> Enregistrer
                        </button>
                    </div>
                </div>
            </div>
        </div>
    </div>

    {{-- ------------------------------------------------------------------ --}}
    {{-- Ce que l'offre a réellement accordé                                 --}}
    {{-- ------------------------------------------------------------------ --}}

    <div class="modal fade" id="modalAvantages" tabindex="-1" aria-hidden="true">
        <div class="modal-dialog modal-xl modal-dialog-scrollable">
            <div class="modal-content">
                <div class="modal-header">
                    <h6 class="modal-title" id="titreModalAvantages">Avantages accordés</h6>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <div class="alert alert-info" id="bilanAvantages"></div>
                    <div class="table-responsive">
                        <table class="tablehover table table-striped text-nowrap w-100" id="tableAvantages">
                            <thead class="table-header-primary">
                                <tr>
                                    <th data-column="AccordeLe" data-class="text-center" class="colTable text-center">Accordé le</th>
                                    <th data-column="NomClient" data-class="text-center" class="colTable text-center">Client</th>
                                    <th data-column="DesignationProduit" data-class="text-center" class="colTable text-center">Produit déclencheur</th>
                                    <th data-column="LibelleTypeAvantage" data-class="text-center" class="text-center colTable">Avantage</th>
                                    <th data-column="Detail" data-class="text-center" class="colTable text-center">Détail</th>
                                    <th data-column="QteAvantage" data-class="text-center" class="text-center colTable">Qté</th>
                                    <th data-column="MontantAvantage" data-class="text-end" class="text-center colTable">Montant</th>
                                    <th data-column="NumeroFactureClient" data-class="text-center" class="colTable text-center">Facture</th>
                                    <th data-column="EtatRepris" data-class="text-center" data-orderable="false" class="text-center colTable">Repris</th>
                                </tr>
                            </thead>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>

@endsection

@section('script')

    <script>
        $(document).ready(function() {

            /* Les compositions de l'offre en cours d'édition. On tient la liste ici et on la
               réécrit en entier à l'enregistrement : c'est ce que l'opérateur voit. */
            let declencheurs = []
            let paliers = []
            let portees = []

            let references = {
                agences: [],
                fournisseurs: [],
                laboratoires: [],
                familles: [],
                categoriesClient: [],
                groupements: []
            }

            const libellesAvantage = {
                PRODUIT_OFFERT: 'Produit offert',
                GOODIE: 'Goodie offert',
                SURREMISE_TAUX: 'Sur-remise',
                REMISE_FORFAIT: 'Remise sur prix cession HT'
            }

            const libellesAssiette = {
                TOUTE_LA_QUANTITE: 'toute la quantité',
                AU_DELA_DU_SEUIL: 'les unités au-delà du seuil',
                N_UNITES: 'les premières unités'
            }

            /** Les unités qu'une remise touche, nommées, et ce qu'il en coûte à la commande.
             *
             *  Une assiette qui ne couvre pas la ligne entière la fait **découper** à la
             *  validation : une ligne de dix devient six au prix plein et quatre au prix
             *  remisé. Le paramétreur doit le savoir en posant son palier, non le découvrir
             *  sur la première commande.
             */
            function libelleAssiette(p) {

                if (p.assiette === 'N_UNITES') {

                    const n = parseFloat(p.qteAssiette) || 0

                    return (n === 1 ? 'la 1<sup>re</sup> unité' : 'les ' + n + ' premières unités') +
                        avertissementDecoupage()
                }

                if (p.assiette === 'AU_DELA_DU_SEUIL') {

                    return 'les unités au-delà de ' + p.seuil + avertissementDecoupage()
                }

                return libellesAssiette[p.assiette] ?? p.assiette
            }

            function avertissementDecoupage() {

                return '<br><small class="text-warning"><i class="ri-scissors-cut-line"></i> ' +
                    'la ligne sera découpée</small>'
            }

            /* La base du seuil, telle qu'elle se lit dans la colonne « Seuil compté sur ». */
            const libellesBaseSeuil = {
                PRODUIT: 'chaque produit',
                GROUPE: 'panaché',
                ASSORTIMENT: 'assortiment complet'
            }

            /* Le mode de cumul d'un palier de don. Vide : celui de l'offre s'applique. */
            const libellesCumulPalier = {
                '': 'comme l\'offre',
                PAR_MULTIPLE: 'à chaque seuil atteint',
                PAR_UNITE: 'à chaque unité commandée',
                UNE_FOIS: 'une seule fois'
            }

            /* Le même mode, tel qu'il se lit dans la colonne « Répétition » du tableau des
               offres — plus court, la colonne est étroite. */
            const libellesCumulRegle = {
                PAR_MULTIPLE: 'par multiple',
                PAR_UNITE: 'par unité',
                UNE_FOIS: 'une fois'
            }

            const libellesType = {
                PRODUIT: 'Produit',
                FAMILLE: 'Famille',
                LABORATOIRE: 'Laboratoire'
            }

            const libellesPortee = {
                CLIENT: 'Client',
                CATEGORIE: 'Catégorie de client',
                GROUPEMENT: 'Groupement'
            }

            /* Les libellés viennent de la base et entrent dans du HTML écrit à la main.
               Dans le corps d'une cellule, seuls les chevrons sont à neutraliser : les
               guillemets y sont sans danger, et les laisser tels quels garde la recherche
               du tableau opérante — « l'offre » se cherche avec son apostrophe. */
            function echapper(texte) {

                return $('<div>').text(texte ?? '').html()
            }

            /* Dans un attribut, en revanche, un guillemet dans « 36 panachés "MKL" »
               couperait l'attribut qui le porte et la ligne s'afficherait de travers. */
            function echapperAttribut(texte) {

                return echapper(texte).replace(/"/g, '&quot;').replace(/'/g, '&#39;')
            }

            /* Les deux tableaux passent par remplissageDataTable() : la configuration des
               colonnes vient des attributs data-column de l'entête, et la fonction se charge
               de détruire puis reconstruire à chaque chargement. Les variables ne sont donc
               pas constantes — elles reçoivent la nouvelle instance à chaque appel.

               Dessinés vides dès le départ pour que l'entête et la barre d'outils existent
               avant la première recherche. */
            let tableRegles = remplissageDataTable({
                IdentifiantDuTableau: '#tableRegles',
                obj: [],
                pageLength: 25
            })

            let tableAvantages = remplissageDataTable({
                IdentifiantDuTableau: '#tableAvantages',
                obj: [],
                pageLength: 25
            })

            /* Une table construite dans une modale fermée est mesurée sur un élément masqué :
               ses colonnes valent zéro et l'entête ressort désaligné du corps, jusqu'à ce qu'un
               clic de tri force un redessin. On remesure donc une fois la modale affichée,
               quand les largeurs réelles sont enfin connues. */
            $('#modalAvantages').on('shown.bs.modal', function() {

                if ($.fn.DataTable.isDataTable('#tableAvantages')) {

                    $('#tableAvantages').DataTable().columns.adjust()
                }
            })

            /* ---------------------------------------------------------- */
            /*  Listes de référence                                       */
            /* ---------------------------------------------------------- */

            function chargerReferences(apres) {

                $.ajax({
                    url: '{{ route('promo.listesDeReference') }}',
                    type: 'GET',
                    dataType: 'json',
                    success: function(reponse) {

                        if (reponse.error) {
                            Swal.fire('Listes de référence', reponse.messages, 'error')
                            return
                        }

                        references = reponse

                        remplirSelect('#filtreAgence', reponse.agences, 'IDAGENCE', 'NomAgence',
                            'Tous les sites')
                        remplirSelect('#idAgenceRegle', reponse.agences, 'IDAGENCE', 'NomAgence',
                            'Tous les sites')
                        remplirSelect('#filtreFournisseur', reponse.fournisseurs, 'IDFOURNISSEUR',
                            'NomFournisseur', 'Tous')
                        remplirSelect('#idFournisseurRegle', reponse.fournisseurs, 'IDFOURNISSEUR',
                            'NomFournisseur', 'Aucun')
                        remplirSelect('#idLaboratoireRegle', reponse.laboratoires, 'IDLABORATOIRE',
                            'NomLaboratoire', 'Aucun')

                        if (typeof apres === 'function') apres()
                    },
                    error: function() {

                        /* Sans les listes, le listing ne partait plus et la page restait vide
                           sans rien dire. On le dit. */
                        Swal.fire('Listes de référence',
                            'Les listes de sites, fournisseurs et laboratoires n\'ont pas pu être ' +
                            'chargées. Le paramétrage des offres reste incomplet : rechargez la page.',
                            'error')
                    }
                })
            }

            function remplirSelect(selecteur, liste, cle, libelle, premier) {

                let html = '<option value="0">' + premier + '</option>'

                $.each(liste, function(index, element) {
                    html += `<option value="${element[cle]}">${element[libelle]}</option>`
                })

                $(selecteur).html(html)
            }

            /* ---------------------------------------------------------- */
            /*  Le listing des offres                                     */
            /* ---------------------------------------------------------- */

            function listerRegles() {

                $.ajax({
                    url: '{{ route('promo.listeRegles') }}',
                    type: 'POST',
                    data: {
                        dateDebut: $('#filtreDebut').val(),
                        dateFin: $('#filtreFin').val(),
                        idAgence: $('#filtreAgence').val(),
                        idFournisseur: $('#filtreFournisseur').val(),
                        recherche: $('#filtreRecherche').val(),
                        enVigueur: $('#filtreEnVigueur').is(':checked'),
                        _token: '{{ csrf_token() }}'
                    },
                    dataType: 'json',
                    success: function(reponse) {

                        if (reponse.error) {

                            tableRegles = remplissageDataTable({
                                IdentifiantDuTableau: '#tableRegles',
                                obj: [],
                                pageLength: 25
                            })

                            Swal.fire('Offres', reponse.messages, 'error')
                            return
                        }

                        const lignesRegles = []

                        $.each(reponse.regles, function(index, regle) {

                            const figee = parseInt(regle.NbreAvantages) > 0

                            /* Une offre qui a déjà accordé quelque chose ne se supprime plus :
                               le bouton est retiré plutôt que de promettre l'impossible. */
                            const boutonSupprimer = figee ? '' :
                                `<button class="btn btn-sm btn-outline-danger btn-icon btnSupprimer" data-id="${regle.IDPROMO_REGLE}" title="Supprimer">
                                    <i class="bx bxs-trash" style="font-size:14px"></i>
                                 </button>`

                            lignesRegles.push({
                                action: `<button class="btn btn-sm btn-outline-info btn-icon btnAvantages" data-id="${regle.IDPROMO_REGLE}" data-libelle="${echapperAttribut(regle.LibelleRegle)}" title="Avantages accordés">
                                    <i class="bx bx-list-ul" style="font-size:14px"></i>
                                 </button>
                                 <button class="btn btn-sm btn-outline-warning btn-icon btnEditer" data-id="${regle.IDPROMO_REGLE}" title="Ouvrir">
                                    <i class="bx bxs-edit" style="font-size:14px"></i>
                                 </button>
                                 <button class="btn btn-sm btn-outline-secondary btn-icon btnSuspendre" data-id="${regle.IDPROMO_REGLE}" data-suspendue="${regle.RegleSuspendue}" title="${regle.RegleSuspendue ? 'Réactiver' : 'Suspendre'}">
                                    <i class="bx ${regle.RegleSuspendue ? 'bx-play-circle' : 'bx-pause-circle'}" style="font-size:14px"></i>
                                 </button>
                                 ${boutonSupprimer}`,
                                NumeroRegle: `${echapper(regle.NumeroRegle)}`,
                                LibelleRegle: `${echapper(regle.LibelleRegle)}`,
                                Periode: `${explodeDate(regle.DateDebut)} au ${explodeDate(regle.DateFin)}`,
                                BaseSeuil: libellesBaseSeuil[regle.BaseSeuil] ?? regle.BaseSeuil,
                                ModeCumul: libellesCumulRegle[regle.ModeCumul] ?? regle.ModeCumul,
                                NbreDeclencheurs: `${regle.NbreDeclencheurs}`,
                                NbrePaliers: `${regle.NbrePaliers}`,
                                Portee: parseInt(regle.NbrePortees) === 0 ? 'tous les clients' : regle.NbrePortees +
                                    ' ciblage(s)',
                                NomFournisseur: `${echapper(regle.NomFournisseur)}`,
                                NbreAvantages: `${regle.NbreAvantages}`,
                                Suspendue: `<input class="form-check-input" type="checkbox" ${regle.RegleSuspendue ? 'checked' : ''} disabled>`,
                                IDPROMO_REGLE: regle.IDPROMO_REGLE
                            })
                        })

                        tableRegles = remplissageDataTable({
                            IdentifiantDuTableau: '#tableRegles',
                            obj: lignesRegles,
                            pageLength: 25
                        })
                    },
                    error: function(xhr) {
                        Swal.fire('Offres', 'Le listing n\'a pas pu être chargé.', 'error')
                    }
                })
            }

            /* ---------------------------------------------------------- */
            /*  Les select2 de recherche                                  */
            /* ---------------------------------------------------------- */

            /* dropdownParent visé sur .modal-content et non sur .modal : c'est .modal qui
               défile, et la liste déroulante s'en trouverait décalée d'autant. */
            function select2Recherche(selecteur, url, cle, formateur) {

                $(selecteur).select2({
                    dropdownParent: $(selecteur).closest('.modal-content'),
                    width: '100%',
                    placeholder: 'Tapez au moins deux caractères',
                    minimumInputLength: 2,
                    ajax: {
                        url: url,
                        dataType: 'json',
                        delay: 300,
                        data: params => ({
                            terme: params.term
                        }),
                        processResults: reponse => ({
                            results: (reponse[cle] ?? []).map(element => ({
                                id: element[Object.keys(element)[0]],
                                text: formateur(element)
                            }))
                        })
                    }
                })
            }

            function select2Liste(selecteur, liste, cle, libelle) {

                $(selecteur).select2({
                    dropdownParent: $(selecteur).closest('.modal-content'),
                    width: '100%',
                    placeholder: 'Choisir',
                    data: liste.map(element => ({
                        id: element[cle],
                        text: element[libelle]
                    }))
                })
            }

            function select2Produit(selecteur) {

                select2Recherche(selecteur, '{{ route('promo.rechercheProduit') }}', 'produits',
                    p => p.DesignationProduit + (p.CodeCipProduit1 ? ' — ' + p.CodeCipProduit1 : ''))
            }

            /** Le select de cible change de nature selon le type choisi. */
            function reconstruireCibleDeclencheur() {

                const type = $('#typeDeclencheur').val()

                if ($('#cibleDeclencheur').hasClass('select2-hidden-accessible')) {
                    $('#cibleDeclencheur').select2('destroy')
                }

                $('#cibleDeclencheur').empty()

                if (type === 'PRODUIT') {
                    select2Produit('#cibleDeclencheur')
                } else if (type === 'FAMILLE') {
                    select2Liste('#cibleDeclencheur', references.familles, 'IDFAMILLEPRODUIT',
                        'LibelleFamilleProduit')
                } else {
                    select2Liste('#cibleDeclencheur', references.laboratoires, 'IDLABORATOIRE',
                        'NomLaboratoire')
                }
            }

            function reconstruireCiblePortee() {

                const type = $('#typePortee').val()

                if ($('#ciblePortee').hasClass('select2-hidden-accessible')) {
                    $('#ciblePortee').select2('destroy')
                }

                $('#ciblePortee').empty()

                if (type === 'CLIENT') {
                    select2Recherche('#ciblePortee', '{{ route('promo.rechercheClient') }}', 'clients',
                        c => c.NomClient + (c.CodeClient ? ' — ' + c.CodeClient : ''))
                } else if (type === 'CATEGORIE') {
                    select2Liste('#ciblePortee', references.categoriesClient, 'IDCATEGORIE_CLIENT',
                        'LieblleCategorieClient')
                } else {
                    select2Liste('#ciblePortee', references.groupements, 'IDGROUPEMENT_CLIENT',
                        'LibelleGroupementClient')
                }
            }

            /* ---------------------------------------------------------- */
            /*  Le formulaire de l'offre                                  */
            /* ---------------------------------------------------------- */

            function viderFormulaire() {

                $('#idRegle').val(0)
                $('#libelleRegle, #numeroRegle, #commentaireRegle').val('')
                $('#dateDebutRegle').val(new Date().toISOString().substring(0, 10))
                $('#dateFinRegle').val('')
                $('#idAgenceRegle, #idFournisseurRegle, #idLaboratoireRegle').val(0)
                $('#baseSeuilRegle').val('PRODUIT')
                $('#modeCumulRegle').val('PAR_MULTIPLE')
                $('#suspendueRegle').prop('checked', false)

                /* La nature des saisies revient elle aussi à son état d'origine : on passe
                   d'une offre à l'autre sans traîner derrière soi la famille ou l'avantage
                   de la précédente. */
                $('#typeDeclencheur').val('PRODUIT')
                $('#typePortee').val('CLIENT')
                $('#porteePalier').val('TOUS')
                $('#typePalier').val('PRODUIT_OFFERT')
                $('#assiettePalier').val('TOUTE_LA_QUANTITE')

                viderSaisiePalier()

                declencheurs = []
                paliers = []
                portees = []

                figerStructure(false, 0)
                toutDessiner()

                // On revient au premier onglet : une offre se lit dans cet ordre.
                $('.nav-tabs button[data-bs-target="#ongletOffre"]').trigger('click')
            }

            /** Les valeurs d'un palier, remises à blanc. Sa nature — portée, avantage — est
                conservée : on enchaîne le plus souvent 12 → 1, puis 24 → 3. */
            function viderSaisiePalier() {

                $('#seuilPalier, #tauxPalier, #forfaitPalier, #qteAssiettePalier').val('')
                $('#qteOffertePalier').val(1)
                $('#cumulPalier').val('')
                $('#produitOffertPalier, #produitPalier, #famillePalier').val(null).trigger('change')
            }

            function toutDessiner() {

                dessinerDeclencheurs()
                dessinerPaliers()
                dessinerPortees()
                ajusterPorteePalier()
                ajusterChampsPalier()
            }

            /** Une offre déjà appliquée : ses termes ne se retouchent plus. */
            function figerStructure(figee, nombre) {

                $('#bandeauFigee').toggleClass('d-none', !figee)

                if (figee) {
                    $('#texteFigee').text('Cette offre a déjà accordé ' + nombre + ' avantage(s). Ses termes sont ' +
                        'figés : seuls le libellé, le commentaire, la date de fin et la suspension ' +
                        'restent modifiables. Pour changer ses conditions, suspendez-la et créez une nouvelle offre.')
                }

                $('#dateDebutRegle, #idAgenceRegle, #idFournisseurRegle, #idLaboratoireRegle, #baseSeuilRegle, #modeCumulRegle')
                    .prop('disabled', figee)

                $('.zoneSaisie').toggleClass('d-none', figee)
            }

            function estFigee() {
                return !$('#bandeauFigee').hasClass('d-none')
            }

            function majBadges() {

                $('#badgeDeclencheurs').text(declencheurs.length)
                $('#badgePaliers').text(paliers.length)

                $('#badgePortee')
                    .text(portees.length === 0 ? 'tous' : portees.length)
                    .toggleClass('bg-secondary', portees.length === 0)
                    .toggleClass('bg-primary', portees.length > 0)

                const propres = paliers.filter(p => p.produit > 0).length

                $('#resumeOffre').text(
                    declencheurs.length + ' déclencheur(s) · ' + paliers.length + ' palier(s)' +
                    (propres > 0 ? ' dont ' + propres + ' par produit' : '') + ' · ' +
                    (portees.length === 0 ? 'tous les clients' : portees.length + ' bénéficiaire(s)')
                )
            }

            function boutonRetirer(classe, index) {

                if (estFigee()) return ''

                return `<button class="btn btn-sm btn-outline-danger btn-icon ${classe}" data-index="${index}">
                            <i class="bx bxs-trash" style="font-size:13px"></i>
                        </button>`
            }

            function dessinerDeclencheurs() {

                let html = ''

                $.each(declencheurs, function(index, d) {
                    html += `<tr>
                        <td>${libellesType[d.type]}</td>
                        <td>${echapper(d.libelle)}</td>
                        <td class="text-center">${boutonRetirer('btnRetirerDeclencheur', index)}</td>
                    </tr>`
                })

                if (declencheurs.length === 0) {
                    html = '<tr><td colspan="3" class="text-center text-muted">Aucun déclencheur : l\'offre ne se déclenchera jamais.</td></tr>'
                }

                $('#tableDeclencheurs tbody').html(html)
                majBadges()
            }

            function dessinerPaliers() {

                let html = ''

                /* Les paliers propres à un lot d'abord, regroupés : c'est ainsi qu'une fiche
                   fournisseur se lit, référence par référence. Ceux qui valent pour tout
                   ferment la liste. */
                const nomDuLot = p => p.produit > 0 ? p.libelleProduit :
                    (p.famille > 0 ? p.libelleFamille : '￿')

                const ordonnes = paliers.map((p, index) => ({
                    p: p,
                    index: index
                })).sort((a, b) => {
                    const pa = nomDuLot(a.p)
                    const pb = nomDuLot(b.p)
                    if (pa !== pb) return pa < pb ? -1 : 1
                    return a.p.seuil - b.p.seuil
                })

                $.each(ordonnes, function(rang, element) {

                    const p = element.p

                    let detail = ''

                    if (p.type === 'PRODUIT_OFFERT' || p.type === 'GOODIE') {
                        detail = p.qteOfferte + ' × ' + echapper(p.libelleOffert)
                    } else if (p.type === 'SURREMISE_TAUX') {
                        detail = '+' + p.taux + ' % de remise'
                    } else {
                        detail = '−' + p.forfait + ' € par unité'
                    }

                    /* Un don ne porte pas sur une assiette : ce qui compte pour lui est de
                       savoir s'il se répète, dans sa propre colonne. Une remise n'a pas ce
                       choix, donc rien à y montrer pour elle. */
                    const estUnDon = p.type === 'PRODUIT_OFFERT' || p.type === 'GOODIE'

                    const repetition = estUnDon ? (libellesCumulPalier[p.cumul || ''] ?? '—') : '—'

                    /* Pour une remise, le nombre d'unités ne suffit pas : « 2 unité(s) » ne
                       disait pas lesquelles, ni que la ligne de commande s'en trouverait
                       coupée en deux. On nomme donc les unités concernées, et on annonce le
                       découpage — c'est ce que le paramétreur verra sur la commande. Un don
                       n'a pas d'assiette : rien à y montrer pour lui. */
                    const porteeSur = estUnDon ? '—' : libelleAssiette(p)

                    /* Le lot du palier. La famille se distingue du produit : son seuil se
                       compte sur la somme de ses lignes, ce qui n'est pas la même promesse. */
                    const applique = p.produit > 0 ?
                        `<span class="badge bg-primary-transparent">${echapper(p.libelleProduit)}</span>` :
                        (p.famille > 0 ?
                            `<span class="badge bg-warning-transparent">
                                <i class="ri-folder-2-line"></i> famille ${echapper(p.libelleFamille)}</span>` :
                            '<span class="text-muted">tous les déclencheurs</span>')

                    html += `<tr>
                        <td>${applique}</td>
                        <td class="text-center">${p.seuil}</td>
                        <td>${libellesAvantage[p.type]}</td>
                        <td>${detail}</td>
                        <td>${repetition}</td>
                        <td>${porteeSur}</td>
                        <td class="text-center">${boutonRetirer('btnRetirerPalier', element.index)}</td>
                    </tr>`
                })

                if (paliers.length === 0) {
                    html = '<tr><td colspan="7" class="text-center text-muted">Aucun palier : l\'offre n\'accorderait rien.</td></tr>'
                }

                $('#tablePaliers tbody').html(html)
                majBadges()
            }

            function dessinerPortees() {

                let html = ''

                $.each(portees, function(index, o) {
                    html += `<tr>
                        <td>${libellesPortee[o.type]}</td>
                        <td>${echapper(o.libelle)}</td>
                        <td class="text-center">${boutonRetirer('btnRetirerPortee', index)}</td>
                    </tr>`
                })

                if (portees.length === 0) {
                    html = '<tr><td colspan="3" class="text-center text-muted">Offre ouverte à tous les clients.</td></tr>'
                }

                $('#tablePortees tbody').html(html)
                majBadges()
            }

            function ajusterPorteePalier() {

                const portee = $('#porteePalier').val()

                $('#zoneProduitPalier').toggleClass('d-none', portee !== 'PRODUIT')
                $('#zoneFamillePalier').toggleClass('d-none', portee !== 'FAMILLE')
            }

            /** Les champs d'un palier dépendent de l'avantage choisi : on ne montre que ce qui a un sens. */
            function ajusterChampsPalier() {

                const type = $('#typePalier').val()
                const estUnDon = (type === 'PRODUIT_OFFERT' || type === 'GOODIE')

                $('.champOffert').toggleClass('d-none', !estUnDon)
                $('.champTaux').toggleClass('d-none', type !== 'SURREMISE_TAUX')
                $('.champForfait').toggleClass('d-none', type !== 'REMISE_FORFAIT')
                $('.champAssiette').toggleClass('d-none', estUnDon)

                ajusterChampAssiette()
            }

            function ajusterChampAssiette() {

                const estUnDon = $('.champAssiette').hasClass('d-none')
                const assiette = $('#assiettePalier').val()

                $('.champQteAssiette').toggleClass('d-none',
                    estUnDon || assiette !== 'N_UNITES')

                /* L'avertissement ne s'affiche que là où il vaut : une assiette qui couvre
                   toute la quantité laisse la ligne intacte. */
                $('#avisDecoupage').toggleClass('d-none',
                    estUnDon || assiette === 'TOUTE_LA_QUANTITE')
            }

            /* ---------------------------------------------------------- */
            /*  Actions                                                    */
            /* ---------------------------------------------------------- */

            $('#btnFiltrer').on('click', listerRegles)

            $('#filtreRecherche').on('keypress', function(e) {
                if (e.which === 13) listerRegles()
            })

            $('#btnNouvelleOffre').on('click', function() {

                viderFormulaire()
                $('#titreModalOffre').text('Nouvelle offre')
                $('#modalOffre').modal('show')
            })

            $('#modalOffre').on('shown.bs.modal', function() {

                /* Les select2 s'initialisent une fois le modal visible : sur un élément caché,
                   ils se calculent une largeur nulle. */
                reconstruireCibleDeclencheur()
                reconstruireCiblePortee()

                if (!$('#produitOffertPalier').hasClass('select2-hidden-accessible')) {
                    select2Produit('#produitOffertPalier')
                }

                if (!$('#produitPalier').hasClass('select2-hidden-accessible')) {
                    select2Produit('#produitPalier')
                }

                if (!$('#famillePalier').hasClass('select2-hidden-accessible')) {
                    select2Liste('#famillePalier', references.familles, 'IDFAMILLEPRODUIT',
                        'LibelleFamilleProduit')
                }

                ajusterChampsPalier()
                ajusterPorteePalier()
            })

            $('#typeDeclencheur').on('change', reconstruireCibleDeclencheur)
            $('#typePortee').on('change', reconstruireCiblePortee)
            $('#typePalier').on('change', ajusterChampsPalier)
            $('#assiettePalier').on('change', ajusterChampAssiette)
            $('#porteePalier').on('change', ajusterPorteePalier)

            /** Le texte d'un select2 de recherche, ou celui d'un option ordinaire. */
            function texteChoisi(selecteur) {

                const element = $(selecteur)

                if (element.hasClass('select2-hidden-accessible')) {

                    const donnee = element.select2('data')

                    if (donnee && donnee.length) return donnee[0].text
                }

                return element.find('option:selected').text()
            }

            function ajouterDeclencheur(type, cible, libelle) {

                if (declencheurs.some(d => d.type === type && d.cible === cible)) return false

                declencheurs.push({
                    type: type,
                    cible: cible,
                    libelle: libelle
                })

                dessinerDeclencheurs()
                return true
            }

            $('#btnAjoutDeclencheur').on('click', function() {

                const cible = parseInt($('#cibleDeclencheur').val() ?? 0)

                if (!cible) {
                    Swal.fire('Déclencheur', 'Choisissez d\'abord la cible.', 'info')
                    return
                }

                if (!ajouterDeclencheur($('#typeDeclencheur').val(), cible, texteChoisi('#cibleDeclencheur'))) {
                    Swal.fire('Déclencheur', 'Cette cible est déjà dans la liste.', 'info')
                    return
                }

                $('#cibleDeclencheur').val(null).trigger('change')
            })

            $('#btnAjoutPortee').on('click', function() {

                const cible = parseInt($('#ciblePortee').val() ?? 0)

                if (!cible) {
                    Swal.fire('Portée', 'Choisissez d\'abord le bénéficiaire.', 'info')
                    return
                }

                const type = $('#typePortee').val()

                if (portees.some(o => o.type === type && o.cible === cible)) {
                    Swal.fire('Portée', 'Ce bénéficiaire est déjà dans la liste.', 'info')
                    return
                }

                portees.push({
                    type: type,
                    cible: cible,
                    libelle: texteChoisi('#ciblePortee')
                })

                dessinerPortees()
                $('#ciblePortee').val(null).trigger('change')
            })

            $('#btnAjoutPalier').on('click', function() {

                const type = $('#typePalier').val()
                const seuil = parseFloat($('#seuilPalier').val() || 0)

                if (!(seuil > 0)) {
                    Swal.fire('Palier', 'La quantité minimale doit être supérieure à zéro.', 'info')
                    return
                }

                /* La portée du palier : tous les déclencheurs, un produit, ou une famille. */
                const portee = $('#porteePalier').val()

                let produit = 0
                let libelleProduit = ''
                let famille = 0
                let libelleFamille = ''

                if (portee === 'PRODUIT') {

                    produit = parseInt($('#produitPalier').val() ?? 0)

                    if (!produit) {
                        Swal.fire('Palier', 'Choisissez le produit auquel ce palier s\'applique.', 'info')
                        return
                    }

                    libelleProduit = texteChoisi('#produitPalier')

                } else if (portee === 'FAMILLE') {

                    famille = parseInt($('#famillePalier').val() ?? 0)

                    if (!famille) {
                        Swal.fire('Palier', 'Choisissez la famille à laquelle ce palier s\'applique.', 'info')
                        return
                    }

                    libelleFamille = texteChoisi('#famillePalier')
                }

                const estUnDon = (type === 'PRODUIT_OFFERT' || type === 'GOODIE')

                let palier = {
                    produit: produit,
                    libelleProduit: libelleProduit,
                    famille: famille,
                    libelleFamille: libelleFamille,
                    seuil: seuil,
                    type: type,
                    produitOffert: 0,
                    libelleOffert: '',
                    qteOfferte: 0,
                    taux: 0,
                    forfait: 0,
                    assiette: 'TOUTE_LA_QUANTITE',
                    qteAssiette: 0,
                    cumul: ''
                }

                if (estUnDon) {

                    palier.produitOffert = parseInt($('#produitOffertPalier').val() ?? 0)
                    palier.qteOfferte = parseFloat($('#qteOffertePalier').val() || 0)

                    /* Vide, le palier suivra le mode de cumul de l'offre. */
                    palier.cumul = $('#cumulPalier').val() || ''

                    if (!palier.produitOffert) {
                        Swal.fire('Palier', 'Indiquez l\'article offert.', 'info')
                        return
                    }

                    if (!(palier.qteOfferte > 0)) {
                        Swal.fire('Palier', 'Indiquez combien d\'unités sont offertes.', 'info')
                        return
                    }

                    palier.libelleOffert = texteChoisi('#produitOffertPalier')

                } else if (type === 'SURREMISE_TAUX') {

                    palier.taux = parseFloat($('#tauxPalier').val() || 0)

                    if (!(palier.taux > 0)) {
                        Swal.fire('Palier', 'Indiquez la remise à ajouter, en %.', 'info')
                        return
                    }

                    palier.assiette = $('#assiettePalier').val()
                    palier.qteAssiette = parseFloat($('#qteAssiettePalier').val() || 0)

                } else {

                    palier.forfait = parseFloat($('#forfaitPalier').val() || 0)

                    if (!(palier.forfait > 0)) {
                        Swal.fire('Palier', 'Indiquez le montant de la remise par unité.', 'info')
                        return
                    }

                    palier.assiette = $('#assiettePalier').val()
                    palier.qteAssiette = parseFloat($('#qteAssiettePalier').val() || 0)
                }

                if (palier.assiette === 'N_UNITES' && !(palier.qteAssiette > 0)) {
                    Swal.fire('Palier', 'Indiquez sur combien d\'unités la remise porte.', 'info')
                    return
                }

                if (paliers.some(p => p.produit === palier.produit && p.famille === palier.famille &&
                        p.seuil === palier.seuil && p.type === palier.type &&
                        p.produitOffert === palier.produitOffert)) {

                    Swal.fire('Palier', palier.produit > 0 ?
                        'Ce même avantage est déjà défini à ce seuil pour ce produit.' :
                        (palier.famille > 0 ?
                            'Ce même avantage est déjà défini à ce seuil pour cette famille.' :
                            'Ce même avantage est déjà défini à ce seuil.'), 'info')
                    return
                }

                /* Un palier qui nomme un lot suppose que ce lot déclenche l'offre. On l'ajoute
                   plutôt que de faire ressaisir la même chose deux fois. */
                let ajouteAuxDeclencheurs = false

                if (palier.produit > 0) {
                    ajouteAuxDeclencheurs = ajouterDeclencheur('PRODUIT', palier.produit, libelleProduit)
                } else if (palier.famille > 0) {
                    ajouteAuxDeclencheurs = ajouterDeclencheur('FAMILLE', palier.famille, libelleFamille)
                }

                paliers.push(palier)
                dessinerPaliers()

                viderSaisiePalier()

                if (ajouteAuxDeclencheurs) {
                    Swal.fire('Palier ajouté',
                        (libelleProduit || libelleFamille) + ' a été ajouté aux déclencheurs : sans ' +
                        'cela, ce palier ne se déclencherait jamais.', 'info')
                }
            })

            $('#tableDeclencheurs').on('click', '.btnRetirerDeclencheur', function() {

                const d = declencheurs[$(this).data('index')]

                /* Retirer un déclencheur dont un palier dépend rendrait ce palier inerte : on
                   le dit au lieu de laisser l'enregistrement échouer plus tard. Un palier de
                   famille en dépend au même titre qu'un palier de produit. */
                const dependant = (d.type === 'PRODUIT' && paliers.some(p => p.produit === d.cible)) ||
                    (d.type === 'FAMILLE' && paliers.some(p => p.famille === d.cible))

                if (dependant) {

                    Swal.fire('Déclencheur conservé',
                        'Un palier s\'applique à ' + d.libelle + '. Retirez d\'abord ce palier.', 'warning')
                    return
                }

                declencheurs.splice($(this).data('index'), 1)
                dessinerDeclencheurs()
            })

            $('#tablePaliers').on('click', '.btnRetirerPalier', function() {
                paliers.splice($(this).data('index'), 1)
                dessinerPaliers()
            })

            $('#tablePortees').on('click', '.btnRetirerPortee', function() {
                portees.splice($(this).data('index'), 1)
                dessinerPortees()
            })

            $('#btnEnregistrerOffre').on('click', function() {

                const bouton = $(this)

                bouton.prop('disabled', true)

                $.ajax({
                    url: '{{ route('promo.enregistrerRegle') }}',
                    type: 'POST',
                    data: {
                        idRegle: $('#idRegle').val(),
                        libelle: $('#libelleRegle').val(),
                        numero: $('#numeroRegle').val(),
                        dateDebut: $('#dateDebutRegle').val(),
                        dateFin: $('#dateFinRegle').val(),
                        idAgence: $('#idAgenceRegle').val(),
                        idFournisseur: $('#idFournisseurRegle').val(),
                        idLaboratoire: $('#idLaboratoireRegle').val(),
                        baseSeuil: $('#baseSeuilRegle').val(),
                        modeCumul: $('#modeCumulRegle').val(),
                        commentaire: $('#commentaireRegle').val(),
                        suspendue: $('#suspendueRegle').is(':checked'),
                        declencheurs: declencheurs.map(d => ({
                            type: d.type,
                            cible: d.cible
                        })),
                        paliers: paliers.map(p => ({
                            produit: p.produit,
                            famille: p.famille,
                            seuil: p.seuil,
                            type: p.type,
                            produitOffert: p.produitOffert,
                            qteOfferte: p.qteOfferte,
                            taux: p.taux,
                            forfait: p.forfait,
                            assiette: p.assiette,
                            qteAssiette: p.qteAssiette,
                            cumul: p.cumul ?? ''
                        })),
                        portees: portees.map(o => ({
                            type: o.type,
                            cible: o.cible
                        })),
                        _token: '{{ csrf_token() }}'
                    },
                    dataType: 'json',
                    success: function(reponse) {

                        bouton.prop('disabled', false)

                        if (reponse.error) {
                            Swal.fire('Offre non enregistrée', reponse.messages, 'warning')
                            return
                        }

                        $('#modalOffre').modal('hide')
                        Swal.fire('Offre enregistrée', reponse.messages, 'success')
                        listerRegles()
                    },
                    error: function(xhr) {

                        bouton.prop('disabled', false)

                        const message = xhr.responseJSON?.messages ??
                            'L\'enregistrement a échoué.'

                        Swal.fire('Offre non enregistrée', message, 'warning')
                    }
                })
            })

            $('#tableRegles').on('click', '.btnEditer', function() {

                const idRegle = $(this).data('id')

                $.ajax({
                    url: '{{ route('promo.detailRegle') }}',
                    type: 'GET',
                    data: {
                        idRegle: idRegle
                    },
                    dataType: 'json',
                    success: function(reponse) {

                        if (reponse.error) {
                            Swal.fire('Offre', reponse.messages, 'error')
                            return
                        }

                        viderFormulaire()

                        const regle = reponse.regle

                        $('#idRegle').val(regle.IDPROMO_REGLE)
                        $('#libelleRegle').val(regle.LibelleRegle)
                        $('#numeroRegle').val(regle.NumeroRegle)
                        $('#dateDebutRegle').val(String(regle.DateDebut).substring(0, 10))
                        $('#dateFinRegle').val(String(regle.DateFin).substring(0, 10))
                        $('#idAgenceRegle').val(regle.IDAGENCE)
                        $('#idFournisseurRegle').val(regle.IDFOURNISSEUR)
                        $('#idLaboratoireRegle').val(regle.IDLABORATOIRE)
                        $('#baseSeuilRegle').val(regle.BaseSeuil)
                        $('#modeCumulRegle').val(regle.ModeCumul)
                        $('#commentaireRegle').val(regle.Commentaire ?? '')
                        $('#suspendueRegle').prop('checked', regle.RegleSuspendue == true)

                        declencheurs = reponse.declencheurs.map(d => ({
                            type: d.TypeCible,
                            cible: parseInt(d.IDCIBLE),
                            libelle: d.Libelle
                        }))

                        paliers = reponse.paliers.map(p => ({
                            produit: parseInt(p.IDPRODUIT ?? 0),
                            libelleProduit: p.LibelleProduit ?? '',
                            famille: parseInt(p.IDFAMILLEPRODUIT ?? 0),
                            libelleFamille: p.LibelleFamille ?? '',
                            seuil: parseFloat(p.QteMini),
                            type: p.TypeAvantage,
                            produitOffert: parseInt(p.IDPRODUIT_OFFERT ?? 0),
                            libelleOffert: p.LibelleProduitOffert,
                            qteOfferte: parseFloat(p.QteOfferte),
                            taux: parseFloat(p.TauxSurremise),
                            forfait: parseFloat(p.MontantForfait),
                            assiette: p.AssietteAvantage,
                            qteAssiette: parseFloat(p.QteAssiette),
                            cumul: p.ModeCumulPalier ?? ''
                        }))

                        portees = reponse.portees.map(o => ({
                            type: o.TypePortee,
                            cible: parseInt(o.IDCIBLE),
                            libelle: o.Libelle
                        }))

                        figerStructure(reponse.structureFigee, reponse.avantages)
                        toutDessiner()

                        $('#titreModalOffre').text('Offre ' + (regle.NumeroRegle ?? ''))
                        $('#modalOffre').modal('show')
                    },
                    error: function(xhr) {

                        Swal.fire('Offre',
                            xhr.responseJSON?.messages ?? 'L\'offre n\'a pas pu être ouverte.',
                            'error')
                    }
                })
            })

            $('#tableRegles').on('click', '.btnSuspendre', function() {

                const idRegle = $(this).data('id')
                const suspendue = $(this).data('suspendue') == true

                Swal.fire({
                    title: suspendue ? 'Réactiver cette offre ?' : 'Suspendre cette offre ?',
                    text: suspendue ?
                        'Elle s\'appliquera de nouveau aux commandes mises en préparation.' :
                        'Elle ne s\'appliquera plus. Les avantages déjà accordés restent acquis.',
                    icon: 'question',
                    showCancelButton: true,
                    confirmButtonText: suspendue ? 'Réactiver' : 'Suspendre',
                    cancelButtonText: 'Annuler'
                }).then(function(choix) {

                    if (!choix.isConfirmed) return

                    $.ajax({
                        url: '{{ route('promo.suspendreRegle') }}',
                        type: 'POST',
                        data: {
                            idRegle: idRegle,
                            suspendue: !suspendue,
                            _token: '{{ csrf_token() }}'
                        },
                        dataType: 'json',
                        success: function(reponse) {

                            if (reponse.error) {
                                Swal.fire('Offre', reponse.messages, 'error')
                                return
                            }

                            Swal.fire('Offre', reponse.messages, 'success')
                            listerRegles()
                        },
                        error: function(xhr) {

                            Swal.fire('Offre inchangée',
                                xhr.responseJSON?.messages ??
                                'Le changement d\'état n\'a pas pu être enregistré.',
                                'warning')
                        }
                    })
                })
            })

            $('#tableRegles').on('click', '.btnSupprimer', function() {

                const idRegle = $(this).data('id')

                Swal.fire({
                    title: 'Supprimer cette offre ?',
                    text: 'Elle n\'a rien accordé : sa suppression ne laisse aucune trace derrière elle.',
                    icon: 'warning',
                    showCancelButton: true,
                    confirmButtonText: 'Supprimer',
                    cancelButtonText: 'Annuler'
                }).then(function(choix) {

                    if (!choix.isConfirmed) return

                    $.ajax({
                        url: '{{ route('promo.supprimerRegle') }}',
                        type: 'POST',
                        data: {
                            idRegle: idRegle,
                            _token: '{{ csrf_token() }}'
                        },
                        dataType: 'json',
                        success: function(reponse) {

                            if (reponse.error) {
                                Swal.fire('Offre conservée', reponse.messages, 'warning')
                                return
                            }

                            Swal.fire('Offre supprimée', reponse.messages, 'success')
                            listerRegles()
                        },
                        error: function(xhr) {

                            Swal.fire('Offre conservée',
                                xhr.responseJSON?.messages ?? 'La suppression a échoué.',
                                'warning')
                        }
                    })
                })
            })

            $('#tableRegles').on('click', '.btnAvantages', function() {

                const idRegle = $(this).data('id')

                $('#titreModalAvantages').text('Avantages accordés — ' + $(this).data('libelle'))

                $.ajax({
                    url: '{{ route('promo.avantagesAccordes') }}',
                    type: 'GET',
                    data: {
                        idRegle: idRegle
                    },
                    dataType: 'json',
                    success: function(reponse) {

                        if (reponse.error) {

                            tableAvantages = remplissageDataTable({
                                IdentifiantDuTableau: '#tableAvantages',
                                obj: [],
                                pageLength: 25
                            })

                            Swal.fire('Avantages', reponse.messages, 'error')
                            return
                        }

                        const lignesAvantages = []

                        $.each(reponse.avantages, function(index, a) {

                            let detail = ''

                            if (a.TypeAvantage == 'PRODUIT_OFFERT' || a.TypeAvantage == 'GOODIE') {
                                detail = echapper(a.ProduitOffert)
                            } else if (a.TypeAvantage == 'SURREMISE_TAUX') {
                                detail = '+' + a.TauxApplique + ' %'
                            } else {

                                /* Le forfait baisse le prix unitaire : il se relit par unité,
                                   comme il a été paramétré, et non sous la forme d'un taux
                                   qui ne le porte plus. Les avantages plus anciens, convertis
                                   en taux, n'ont pas de baisse inscrite : on la redresse alors
                                   depuis le montant. */
                                const parUnite = a.BaisseUnitaire > 0 ? Number(a.BaisseUnitaire) :
                                    (a.QteAvantage > 0 ? (a.MontantAvantage / a.QteAvantage) : 0)

                                // Montant nu, sans symbole monétaire : formatNumberPerf est le
                                // formateur de l'application, et la devise ne se devine pas ici.
                                detail = formatNumberPerf(parUnite) + ' par unité'
                            }

                            lignesAvantages.push({
                                AccordeLe: explodeDate(a.CreeLe),
                                NomClient: echapper(a.NomClient),
                                DesignationProduit: echapper(a.DesignationProduit),
                                LibelleTypeAvantage: libellesAvantage[a.TypeAvantage] ?? echapper(a.TypeAvantage),
                                Detail: detail,
                                QteAvantage: formatNumberPerf(a.QteAvantage),
                                MontantAvantage: formatNumberPerf(a.MontantAvantage),
                                NumeroFactureClient: echapper(a.NumeroFactureClient),
                                EtatRepris: a.Repris ?
                                    '<span class="badge bg-warning">repris</span>' :
                                    '<span class="badge bg-success">acquis</span>'
                            })
                        })

                        tableAvantages = remplissageDataTable({
                            IdentifiantDuTableau: '#tableAvantages',
                            obj: lignesAvantages,
                            pageLength: 25
                        })

                        $('#bilanAvantages').html(
                            `<strong>${reponse.bilan.nombre}</strong> avantage(s) accordé(s), dont ` +
                            `<strong>${reponse.bilan.repris}</strong> repris sur retour. ` +
                            `Montant encore acquis : <strong>${formatNumberPerf(reponse.bilan.montant)}</strong>.`
                        )

                        $('#modalAvantages').modal('show')
                    },
                    error: function(xhr) {

                        Swal.fire('Avantages',
                            xhr.responseJSON?.messages ??
                            'Les avantages accordés n\'ont pas pu être chargés.',
                            'error')
                    }
                })
            })

            /* ---------------------------------------------------------- */

            /* Les trois sous-tableaux sont dessinés dès le départ : ils portent chacun une
               phrase qui dit ce qu'un tableau vide signifie — « ouverte à tous les clients »
               n'est pas la même chose qu'un oubli. */
            toutDessiner()

            chargerReferences(listerRegles)
        })
    </script>

@endsection