@extends('models')
@section('titre-page', 'Listing commande client')
@section('content-body')

    @php
        $ModeGpharma = ModeGpharma();
        $IDMonnaieParDefaut = 0;

        $listeTauxMonnaie = [];

        if($ModeGpharma == 2){

            $IDMonnaieParDefaut = (string) IDMonnaieParDefaut();
            $listeTauxMonnaie = listeMonnaieFacturation();
        }
    @endphp

    <!-- Page Header -->
    <div class="d-md-flex d-block align-items-center justify-content-between mt-4 page-header-breadcrumb">
        <!-- Start:: row-7 -->
        <div class="col-xl-12 col-12">
            <div class="row mb-3">
                <div class="col-xl-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">Listing commandes client</li>
                        </ol>
                    </nav>
                </div>

                <div class="col-xl-8">
                    <div class="d-flex">
                        <div class="col-xl-6 mt-md-0 mt-3 m-0 d-flex justify-content-end">
                            <a href="{{ route('pageNewCdeClient') }}" class="btn btn-secondary-light btn-wave d-flex"
                                id="bntNewCommandeClient">
                                <i class=" ri ri-add-circle-line me-1"></i>Nouvelle commande
                            </a>
                        </div>
                        <div class="col-xl-3 mt-md-0 mt-3 m-0 d-flex justify-content-center">
                            <div class="btn-group" style="margin-top : 1px;">
                                <button type="button" class="btn btn-primary-light dropdown-toggle"
                                    data-bs-toggle="dropdown" data-bs-auto-close="inside" aria-expanded="false">
                                    Autres actions
                                </button>
                                <ul class="dropdown-menu">
                                    <li>
                                        <a class="dropdown-item text-start" style="cursor: pointer;"
                                            id="btnExportLaListe">Exporter le tableau</a>
                                    </li>
                                    <li>
                                        <hr class="dropdown-divider">
                                    </li>
                                    <li>
                                        <a class="dropdown-item text-start" style="cursor: pointer;" id="btnExport">Exporter
                                            les cmdes cochées</a>
                                    </li>
                                    @if($ModeGpharma != 2)
                                        <li>
                                            <hr class="dropdown-divider">
                                        </li>
                                        <li>
                                            <a class="dropdown-item" href="javascript:void(0);" id="btnTransCde">
                                                Transférer les cmdes cochées vers un autre site
                                            </a>
                                        </li>
                                        <li>
                                            <a class="dropdown-item" href="javascript:void(0);" id="btnSynchroniserCmde">
                                                Re-synchroniser les commandes sélectionnées
                                            </a>
                                        </li>
                                    @endif
                                </ul>
                            </div>
                        </div>
                        <div class="col-xl-3 mt-md-0 mt-3 m-0">
                            <button type="button" class="btn btn-warning-light d-flex w-100 justify-content-center"
                                id="btnImprimer" style="font-size:15px">
                                <i class="ri-printer-line me-2"></i>Imprimer
                            </button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- Page Header Close -->

    <!-- Start:: row-7 -->
    <div class="row">
        <div class="col-xl-12">
            <div class="card custom-card">
                <div class="card-body">
                    <div class="row px-4">
                        <div class="col-xl-5">
                            <div class="row">
                                <div class="col-xl-6 col-lg-6 col-sm-3 col-6 d-flex align-items-center">
                                    <div class="me-2">
                                        <span class="avatar avatar-rounded bg-primary-transparent text-primary">
                                            <i class="bx bx-dice-3" style="font-size: 24px"></i>
                                        </span>
                                    </div>
                                    <div class="flex-fill">
                                        <p class="fs-18 mb-0 fw-semibold text-primary" id="nbreCdeClient"></p>
                                        <span class="text-muted fs-12">Nbre Cde</span>
                                    </div>
                                </div>
                                <div class="col-xl-6 col-lg-6 col-sm-3 col-6 d-flex align-items-center">
                                    <div class="me-2">
                                        <span class="avatar avatar-rounded bg-primary-transparent text-primary">
                                            <i class="bx bx-dice-3" style="font-size: 24px"></i>
                                        </span>
                                    </div>
                                    <div class="flex-fill"> 
                                        <p class="fs-18 mb-0 fw-semibold  text-primary" id="nbreLigneCmdeClient"></p>
                                        <span class="text-muted fs-12">Nbre ligne Cde</span>
                                    </div>
                                </div>
                            </div>

                        </div>
                        <div class="col-xl-7">
                            {{-- Les quatre totaux dans l'ordre ou ils s'enchainent : le brut, ce qu'on en
                                 retire, la taxe, puis ce qui reste a payer. flex-nowrap les tient
                                 sur une seule ligne. La vignette s'efface sous XL — c'est le
                                 chiffre qui compte, et quatre vignettes ne tiendraient pas sur un
                                 ecran etroit. --}}
                            <div class="row g-2 flex-nowrap">

                                <div class="col-3 d-flex align-items-center">
                                    <div class="me-2 d-none d-xl-block">
                                        <span class="avatar avatar-rounded bg-light text-default">
                                            <i class="bi bi-cash-stack " style="font-size: 24px"></i>
        
                                        </span>
                                    </div>
                                    <div class="flex-fill">
                                        <p class="fs-18 mb-0 fw-semibold text-nowrap" id="totalHTTT"></p>
                                        <span class="text-muted fs-12 text-nowrap">Total HT</span>
                                    </div>
                                </div>
                                <div class="col-3 d-flex align-items-center">
                                    <div class="me-2 d-none d-xl-block">
                                        <span class="avatar avatar-rounded bg-warning-transparent">
                                            <i class="bi bi-cash-stack" style="font-size: 24px"></i>
                                        </span>
                                    </div>
                                    <div class="flex-fill">
                                        <p class="fs-18 mb-0 text-warning fw-semibold text-nowrap" id="totalRemiseTT"></p>
                                        <span class="text-muted fs-12 text-nowrap">Total Remise</span>
                                    </div>
                                </div>
                                <div class="col-3 d-flex align-items-center">
                                    <div class="me-2 d-none d-xl-block">
                                        <span class="avatar avatar-rounded bg-success-transparent">
                                            <i class="bi bi-cash-stack " style="font-size: 24px"></i>
        
                                        </span>
                                    </div>
                                    <div class="flex-fill">
                                        <p class="fs-18 mb-0 text-success fw-semibold text-nowrap" id="totalTVATT"></p>
                                        <span class="text-muted fs-12 text-nowrap">Total TVA</span>
                                    </div>
                                </div>
                                <div class="col-3 d-flex align-items-center">
                                    <div class="me-2 d-none d-xl-block">
                                        <span class="avatar avatar-rounded bg-info-transparent">
                                            <i class="bi bi-cash-stack " style="font-size: 24px"></i>
                                        </span>
                                    </div>
                                    <div class="flex-fill">
                                        <p class="fs-18 mb-0 text-info fw-semibold text-nowrap" id="totalTTCTT"></p>
                                        <span class="text-muted fs-12 text-nowrap">Total TTC</span>
                                    </div>
                                </div>
                            </div>
                        </div>

                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- End:: row-7 -->

    <div class="row">
        <div class="col-xl-12">
            <div class="card custom-card">
                <div class="card-header pe-0">
                    <form id="formFiltre" class="w-100">
                        <div class="row w-100">
                            <div class="col-xl-4 col-md-3 mb-2">
                                <p class="mb-0 text-muted">Période de filtre&nbsp;:</p>
                                <input type="text" class="form-control text-center" name="datetimes"
                                    id="filtrePeriode" />
                            </div>
                            <div class="col-xl-4 col-md-3 mb-0">
                                <p class="mb-0 text-muted">Client&nbsp;:</p>
                                <select class="js-example-basic-single form-select" id="IDCLIENT" name="IDCLIENT">

                                </select>
                            </div>
                            <div class="col-xl-3 col-md-2 mb-2">
                                <p class="mb-0 text-muted">Etape de traitement&nbsp;:</p>
                                <select class="form-select" id="etapeTraitement" name="etapeTraitement">
                                    <option value="1">EN SAISIE</option>
                                    @if($ModeGpharma == 2) <option value="-1">EN ATTENTE</option> @endif
                                    @if($ModeGpharma == 2)
                                        <option value="2">PAYEE</option>
                                    @else
                                        <option value="2">NON COLLECTEE</option>
                                    @endif
                                    <option value="3">EN COLLECTE</option>
                                    <option value="4">FACTUREE</option>
                                    <option value="5">EXPEDIEE</option>
                                    <option value="6">LIVREE</option>
                                    <option value="7">DEJA LIVREE</option>
                                    <option value="8">ANNULEE</option>
                                    <option value="0">TOUTES</option>
                                </select>
                            </div>
                            <div class="col-xl-1 col-md-1 mb-0 pt-1">
                                <button type="button" class="btn btn-primary btn-wave mt-2  float-end"
                                    id="btnFiltreTable" data-bs-toggle="tooltip" data-bs-custom-class="tooltip-primary"
                                    data-bs-placement="top" title="Filtrer">
                                    <i class="ri-search-line" style="font-size:13px; cursor:pointer;"></i>
                                </button>
                            </div>
                            <div class="accordion accordion-flush mt-2" id="accordionFlushExample">
                                <div class="accordion-item">
                                    <h2 class="accordion-header" id="flush-headingOne">
                                        <button class="accordion-button collapsed pb-2" type="button"
                                            style="background: #FFD7DA;font-size : .78rem;" data-bs-toggle="collapse"
                                            data-bs-target="#flush-collapseOne" aria-expanded="false"
                                            aria-controls="flush-collapseOne">
                                            Autres options de filtre
                                        </button>
                                    </h2>
                                    <div id="flush-collapseOne" class="accordion-collapse collapse"
                                        aria-labelledby="flush-headingOne" data-bs-parent="#accordionFlushExample">
                                        <div class="accordion-body bg-tabs">

                                            <div class="row">

                                                <div class="col-xl-3 col-md-3 mb-2">
                                                    <p class="mb-0 text-muted">Type&nbsp; de commande :</p>
                                                    <select class="form-select" id="type" name="type">
                                                        <option value="1">NORMALE</option>
                                                        <option value="2">URGENTE</option>
                                                        <option value="3">GARDE</option>
                                                        <option value="4">MISE EN PLACE</option>
                                                        <option value="5">RENFORCEMENT</option>
                                                        <option value="6">CALL OUT</option>
                                                        <option value="0">TOUS</option>
                                                    </select>
                                                </div>

                                                <div class="col-xl-3 col-md-3 mb-2">
                                                    <p class="mb-0 text-muted">Produit&nbsp;:</p>
                                                    <select class="js-example-basic-single form-select" id="IDPRODUIT"
                                                        name="IDPRODUIT">

                                                    </select>
                                                </div>

                                                <div class="col-xl-3 col-md-3 mb-2">
                                                    <p class="mb-0 text-muted">Mode&nbsp; de passation :</p>
                                                    <select class="form-select" id="mode" name="mode">
                                                        <option value="1">TELEPHONE</option>
                                                        @if($ModeGpharma != 2)
                                                            <option value="2">EXTRANET</option>
                                                            <option value="3">PHARMA-ML</option>
                                                            <option value="4">TEDIS-DIRECT</option>
                                                        @else
                                                            <option value="3">GUICHET</option>
                                                        @endif

                                                        <option value="0">TOUS</option>
                                                    </select>
                                                </div>

                                                <div class="col-xl-3 col-md-3 mb-2">
                                                    <p class="mb-0 text-muted">Tournée&nbsp;:</p>
                                                    <select class="js-example-basic-single form-select" id="IDTOURNEE"
                                                        name="IDTOURNEE">

                                                    </select>
                                                </div>

                                                <div class="col-xl-3 col-md-3 mb-2 pt-2">
                                                    <div class="card pt-0 mt-2" style="height:35px;">
                                                        <div class="card-body d-flex pt-2 ps-2">
                                                            <input type="checkbox" class="form-check-input me-2"
                                                                type="checkbox" name="uniquementCmu"
                                                                id="uniquementCmu" />
                                                            <p class="form-check-label" for="uniquementCmu"
                                                                style="cursor:pointer;">Uniquement les commandes {{ ($ModeGpharma == 3) ? 'TPOM' : 'C.M.U' }}</p>
                                                        </div>
                                                    </div>
                                                </div>

                                                <div class="col-xl-3 col-md-4 mb-2">
                                                    <p class="mb-0 text-muted">Groupement&nbsp;:</p>
                                                    <select class="form-select" id="IDGROUPEMENT_CLIENT"
                                                        name="IDGROUPEMENT_CLIENT">
                                                    </select>
                                                </div>
                                            </div>

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

                <div class="card-body">
                    <div class="table-responsive">
                        <table class="tablehover table table-striped tablehover text-nowrap w-100"
                            id="tableCommandeClient">
                            <thead class="table-header-primary">
                                <tr>
                                    <th data-column="action" data-orderable="false">
                                        <input class="form-check-input me-4" type="checkbox" id="checkSelectAll">
                                        Actions
                                    </th>
                                    <th class="text-center colTable" data-column="date">Date</th>
                                    <th class="text-center colTable" data-column="heure" data-class="text-center">Heure
                                    </th>
                                    <th class="text-center colTable" data-column="mode" data-class="text-center">Mode
                                    </th>
                                    <th class="text-center colTable" data-column="type" data-class="text-center">Type
                                        Commande</th>
                                    {{-- La pastille reste vide sur la plupart des commandes : seules
                                         celles qui ont vraiment obtenu un avantage la portent. --}}
                                    <th class="text-center colTable" data-column="promo" data-class="text-center">
                                        Promo</th>
                                    <th class="text-center colTable" data-column="NumeroCommandeClientFormat">N° de
                                        Commande</th>
                                    <th class="text-center colTable" data-column="NomClient">Client</th>
                                    <th class="text-center colTable" data-column="IntentionCommande" data-class="text-center">Intention<br>Commande</th>
                                    <th class="text-center colTable" data-column="etape" data-class="text-center">Etape
                                        Traitement</th>
                                    <th class="text-center colTable" data-column="totalHTFormat" data-class="text-end">
                                        Total HT</th>
                                    <th class="text-center colTable" data-column="totalRemiseFormat" data-class="text-end">
                                        Total Remise</th>
                                    <th class="text-center colTable" data-column="TVAFormat" data-class="text-center">TVA
                                    </th>
                                    <th class="text-center colTable" data-column="totalTTCFormat" data-class="text-end">
                                        Total TTC</th>
                                    <th class="text-center colTable" data-column="NombreLigneFacture" data-class="text-center">Nbre Ligne</th>
                                    <th class="text-center colTable" data-column="LibelleTournee">Tournée</th>
                                    <th class="text-center colTable" data-column="LibelleGroupementClient">
                                        Groupement Client
                                    </th>
                                    <th class="text-center colTable" data-column="NomPrenomPersonnel">
                                        Crée par
                                    </th>
                                </tr>
                            </thead>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>

    {{-- Section modal --}}
    <div class="modal fade" id="modalInfoCommandeClient" tabindex="-1" aria-labelledby="exampleModalScrollable2"
        data-bs-keyboard="false" aria-hidden="true" data-bs-focus="false">
        <!-- Scrollable modal -->
        <div class="modal-dialog  modal-xl">
            <div class="modal-content">
                <div class="modal-header">
                    <h6 class="modal-title" id="titleModalInfoCdeClient"> Infos de la commande</h6>
                    <button type="button" class="btn-close bg-white" data-bs-dismiss="modal"
                        aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <div class="row px-2 py-0 mb-1">
                        <div class="card shadow-sm bg-white rounded py-1">
                            <div class="card-body row py-1">
                                <div class="col-xl-2 col-lg-6 col-md-6 col-sm-6 px-0 justify-content-betwen d-flex mb-xl-0 mb-md-2"
                                    style="border-right : 1px dashed grey;">
                                    <span class="bx bx-calendar fs-18"></span>&nbsp;
                                    <span id="dateCdeClient" class="fw-bold"></span>
                                </div>
                                <div class="col-xl-3 col-lg-6 col-md-6 col-sm-6 d-flex mb-xl-0 pe-xl-3 mb-md-2"
                                    style="border-right : 1px dashed grey;">
                                    <span>N° cde&nbsp;:&nbsp;</span>
                                    <span id="numCdeClient" class="fw-bold ellipsis"></span>
                                </div>
                                <div class="col-xl-3 col-lg-6 col-md-6 col-sm-6 d-flex mb-xl-0 pe-xl-3 mb-md-2"
                                    style="border-right : 1px dashed grey;">
                                    <span>Client&nbsp;:&nbsp;</span>
                                    <span id="nomClient" class="fw-bold"></span>
                                </div>
                                <div class="col-xl-4 col-lg-6 col-md-6 col-sm-6 d-flex mb-xl-0 mb-md-2 row">
                                    <div class="col-md-8">
                                        <span>Total TTC&nbsp;:&nbsp;</span>
                                        <span id="TotalTTCCde" class="fw-bold"></span>
                                    </div>
                                    <div class="col-md-4" id="blockBadgeEtape">
                                        <span class="" id="badgeEtape">&nbsp;</span>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    {{-- Les avantages de promotion obtenus par cette commande.
                         Deux niveaux de discrétion : le bloc entier reste caché quand il n'y a
                         aucun avantage — la plupart des commandes sont dans ce cas — et son
                         contenu reste plié quand il y en a. Ce qu'on vient chercher d'ordinaire
                         dans cette modale, ce sont les lignes de la commande ; le bandeau
                         suffit à savoir qu'une promotion s'est appliquée et ce qu'elle a
                         rapporté. Qui veut le détail déplie. --}}
                    <style>
                        /* Le chevron dit dans quel sens le clic va agir. */
                        #entetePromoCde .chevron {
                            transition: transform .2s ease;
                        }

                        #entetePromoCde:not(.collapsed) .chevron {
                            transform: rotate(180deg);
                        }

                        /* La barre de ce tableau, amincie.
                           Mesurée, celle du projet rend 15 px sur un débordement horizontal :
                           sa règle globale ne fixe que la largeur, or une barre horizontale
                           tient sa taille de « height ». Quinze pixels sous un tableau de deux
                           lignes pèsent autant que le contenu. La maison amincit déjà les
                           siennes ailleurs — 3 px pour les DataTables ; 6 px reste attrapable
                           à la souris tout en s'effaçant.

                           Pas de « scrollbar-width » ici : la propriété standard désactive les
                           pseudo-éléments webkit dans Chrome moderne, et rendait 10 px au lieu
                           des 6 demandés. Elle est donc réservée aux navigateurs qui n'ont pas
                           ces pseudo-éléments, plus bas. */
                        #corpsPromoCde .table-responsive::-webkit-scrollbar {
                            height: 6px;
                            width: 6px;
                        }

                        #corpsPromoCde .table-responsive::-webkit-scrollbar-thumb {
                            background-color: #182c37;
                            border-radius: 10px;
                        }

                        #corpsPromoCde .table-responsive::-webkit-scrollbar-track {
                            background-color: transparent;
                        }

                        /* Firefox et consorts : la propriété standard, faute de mieux. */
                        @supports not selector(::-webkit-scrollbar) {
                            #corpsPromoCde .table-responsive {
                                scrollbar-width: thin;
                                scrollbar-color: #182c37 transparent;
                            }
                        }
                    </style>

                    <div class="row px-2 py-0 mb-1 d-none" id="blocPromoCde">
                        <div class="card shadow-sm rounded py-1 border border-success">
                            <div class="card-body py-1">
                                <div class="d-flex justify-content-between align-items-center collapsed"
                                    id="entetePromoCde" role="button" style="cursor:pointer"
                                    data-bs-toggle="collapse" data-bs-target="#corpsPromoCde"
                                    aria-expanded="false" aria-controls="corpsPromoCde">
                                    <span class="fw-bold text-success">
                                        <i class="ri-gift-2-line align-middle"></i>
                                        Avantages promotionnels
                                        <span class="badge bg-success ms-1" id="badgePromoCde">0</span>
                                    </span>
                                    <span class="text-muted" style="font-size:9pt">
                                        <span id="resumePromoCde"></span>
                                        <i class="ri-arrow-down-s-line ms-1 align-middle chevron"></i>
                                    </span>
                                </div>
                                <div class="collapse mt-1" id="corpsPromoCde">
                                    <div class="table-responsive">
                                        <table class="table table-sm table-bordered mb-0 text-nowrap"
                                            id="tablePromoCde">
                                            <thead class="table-light">
                                                <tr>
                                                    <th style="width:150px">Avantage</th>
                                                    <th>Sur quel article</th>
                                                    <th style="width:220px">Ce que le client a obtenu</th>
                                                    <th style="width:110px" class="text-end">Gain HT</th>
                                                    <th style="width:240px">Offre</th>
                                                </tr>
                                            </thead>
                                            <tbody></tbody>
                                        </table>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="mt-0 table-responsive">
                        <table class="tablehover table table-striped tablehover text-nowrap w-100 openModalProduit"
                            id="tableLigneCdeClient">
                            <thead class="table-header-primary">
                                <tr>
                                    <th class="text-center" data-column="CodeCipProduit1">Code CIP</th>
                                    <th class="text-center" data-column="DesignationProduit">Désignation</th>
                                    <th class="text-center" data-column="QteCommandee" data-class="text-center">Qté Cdée
                                    </th>
                                    <th class="text-center" data-column="QteAffectee" data-class="text-center">
                                        Qté Affectée</th>
                                    <th class="text-center" data-column="QteUniteGratuiteFormat"
                                        data-class="text-center">Quantité UG</th>
                                    <th class="text-center" data-column="prixCessionFormat" data-class="text-end">
                                        P. Cession HT
                                    </th>
                                    <th class="text-center" data-column="TotalHTFormat" data-class="text-end">Total HT
                                    </th>
                                    <th class="text-center" data-column="tauxRemisePercent" data-class="text-center">
                                        Remise</th>
                                    <th class="text-center" data-column="tauxTVAPercent" data-class="text-center">TVA
                                    </th>
                                    <th class="text-center" data-column="TotalTTCFormat" data-class="text-end">Total TTC
                                    </th>
                                    <th class="text-center" data-column="LibelleFormeProduit">Forme</th>
                                </tr>
                            </thead>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="modal fade" id="modalTransCdeVersProtClient" tabindex="-1" aria-labelledby="exampleModalScrollable2"
        data-bs-keyboard="false" aria-hidden="true" data-bs-focus="false">
        <!-- Scrollable modal -->
        <div class="modal-dialog  modal-md">
            <div class="modal-content">
                <div class="modal-header">
                    <h6 class="modal-title" id="titleModalInfoCdeClient">Transfert relevé client</h6>
                    <button type="button" class="btn-close bg-white" data-bs-dismiss="modal"
                        aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <form id="formTransVerProtClient">
                        <div class="row py-0 mb-1">
                            <div class="col-md-4 mb-2">
                                <input type="number" id="inpIDCOMMANDECLIENTModalTransCdeVersProtClient"
                                    style="display : none;">
                                <p class="text-muted mb-0">N° Commande :</p>
                                <input type="text" class="form-control px-0 text-center" id="inpNumeroCommandeClient"
                                    readonly>
                            </div>
                            <div class="col-md-4 mb-2">
                                <p class="text-muted mb-0">date commande :</p>
                                <input type="date" class="form-control text-center" id="inpDateCommandeClient"
                                    readonly>
                            </div>
                            <div class="col-md-4 mb-2">
                                <p class="text-muted mb-0">Montant commande :</p>
                                <input type="text" class="form-control text-end numberInput" id="inpTotalTTC"
                                    readonly>
                            </div>
                            <div class="col-md-12 mb-0">
                                <p class="text-muted mb-0">Client :</p>
                                <div class="card border rounded w-100 text-center py-2">
                                    <span id="libNomClient" class="ellipsis"></span>
                                </div>
                            </div>
                            <div class="col-md-12 mb-2">
                                <p class="text-muted mb-0">Protocole :</p>
                                <select class="form-select" name="IDPROTOCOLECLIENT" id="selIDPROTOCOLECLIENT"></select>
                            </div>
                            <div class="col-md-6 mb-2">
                                <p class="text-muted mb-0">Numéro protocole :</p>
                                <input type="text" class="form-control text-center" id="inpNumeroProtocoleCLient"
                                    disabled>
                            </div>
                            <div class="col-md-6 mb-2">
                                <p class="text-muted mb-0">Montant restant :</p>
                                <input type="text" class="form-control text-end numberInput" id="inpMontantRestant"
                                    disabled>
                            </div>
                            <div class="col-md-6 mb-2">
                                <p class="text-muted mb-0">Date de démarrage :</p>
                                <input type="date" class="form-control text-center"
                                    id="inpDateDemarrageProtocoleClient" disabled>
                            </div>
                            <div class="col-md-6 mb-2">
                                <p class="text-muted mb-0">Date de fin :</p>
                                <input type="date" class="form-control text-center" id="inpDAteFinProtocoleClient"
                                    disabled>
                            </div>
                        </div>
                    </form>
                </div>
                <div class="modal-footer p-0">
                    <button class="btn btn-success-light w-100" id="btnValiderTransCdeVersProtClient">
                        <i class="ri-arrow-up-down-line me-1"></i> Transférer
                    </button>
                </div>
            </div>
        </div>
    </div>

    <div class="modal fade" id="modalSelectIDMONNAIEPDFCde" tabindex="-1" aria-labelledby="exampleModalScrollable2"
        data-bs-keyboard="false" aria-hidden="true" data-bs-focus="false">
        <!-- Scrollable modal -->
        <div class="modal-dialog  modal-sm">
            <div class="modal-content">
                <div class="modal-header">
                    <h6 class="modal-title" id="titleModalInfoCdeClient">Devise de l'impression</h6>
                    <button type="button" class="btn-close bg-white" data-bs-dismiss="modal"
                        aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <div>
                        <p class="text-muted mb-0">Devise : </p>
                        <select class="form-select" name="IDMONNAIE" id="selIDMONNAIEPDFCde">
                             @foreach($listeTauxMonnaie as $monnaie)
                                <option value="{{ $monnaie -> IDMONNAIE }}">{{ $monnaie -> SymboleMonnaie }}</option>
                            @endforeach
                        </select>
                    </div>
                </div>
                <div class="modal-footer p-0">
                    <button class="btn btn-warning-light w-100" id="btnImprimerPdeCdeGETRACO">
                        Imprimer
                    </button>
                </div>
            </div>
        </div>
    </div>

@endsection
@section('script')

    <!-- Script exécuté au chargement -->
    <script>

        // (function () {
        //     var w = $($('#tableCommandeClient').DataTable().settings()[0].nTableWrapper);
        //     var head = w.find('.dataTables_scrollHead'), body = w.find('.dataTables_scrollBody');
        //     var ths = head.find('table thead th').toArray();
        //     var tds = body.find('table tbody tr:first td').toArray();
        //     console.log('scrollLeft head/body :', head[0].scrollLeft, body[0].scrollLeft);
        //     console.log('largeur table head/body :', head.find('table')[0].offsetWidth, body.find('table')[0].offsetWidth);
        //     console.log('largeur conteneur head/body :', head[0].clientWidth, body[0].clientWidth);
        //     console.table(ths.map(function (th, i) {
        //         var td = tds[i], rt = th.getBoundingClientRect(),
        //             rd = td ? td.getBoundingClientRect() : { left: NaN, width: NaN };
        //         return {
        //         col: (th.getAttribute('data-column') || th.textContent.trim()).slice(0, 20),
        //         thLeft: Math.round(rt.left), tdLeft: Math.round(rd.left),
        //         ecart: Math.round(rd.left - rt.left),
        //         thW: Math.round(rt.width), tdW: Math.round(rd.width),
        //         thPos: getComputedStyle(th).position, thLeftCss: getComputedStyle(th).left,
        //         tdPos: td ? getComputedStyle(td).position : '', tdLeftCss: td ? getComputedStyle(td).left : ''
        //         };
        //     }));
        //     })();


        var ModeGpharma = {{ $ModeGpharma }}
        var tableCommandeClient

        var listeDesAgences = []
        dateRangeInput('#filtrePeriode', true, "DD/MM/YYYY HH:mm")

        function chargerSelectAgence(valeur) {

            $.ajax({

                url: '{{ route('listeAgence') }}',
                type: 'GET',
                dataType: 'json',
                success: function(response) {

                    $('#IDAGENCE').html('')

                    $.each(response.data, function(key, value) {

                        $('#IDAGENCE').append('<option value="' + value["IDAGENCE"] + '">' + value[
                            "NomAgence"] + '</option>')

                        listeDesAgences.push({
                            text: value["NomAgence"],
                            value: value["IDAGENCE"]
                        })
                    })

                    $('#IDAGENCE').val(valeur).trigger('change')
                }
            })
        }

        function chargerSelectClient(valeur) {

            // Combo client en select2 AJAX (recherche à la frappe)
            initSelect2ClientAjax('#IDCLIENT', { labelFirst: 'TOUS LES CLIENTS' })
            preselectClientSelect2('#IDCLIENT', valeur)
        }

        function chargerSelectProduit(valeur) {

            // Combo produit en select2 AJAX (recherche à la frappe) — plus de préchargement des ~2000 produits.
            initSelect2ProduitAjax('#IDPRODUIT', { labelFirst: 'TOUS LES PRODUITS' })
            preselectProduitSelect2('#IDPRODUIT', valeur)
        }

        function chargerSelectTournee(valeur, IDAGENCE) {

            $.ajax({

                url: '{{ route('listingTourneeSimpleParAgence') }}',
                type: 'GET',
                data: {
                    IDAGENCE: IDAGENCE
                },
                dataType: 'json',
                success: function(response) {

                    if (response.success == 2) {

                        $('#IDTOURNEE').html('')
                        $('#IDTOURNEE').append('<option value="0">TOUTES LES TOURNEES</option>')

                        $.each(response.data, function(key, value) {

                            $('#IDTOURNEE').append('<option value="' + value["IDTOURNEE"] + '">' +
                                value[
                                    "LibelleTournee"] + '</option>')
                        })

                        $('#IDTOURNEE').val(valeur).trigger('change')

                        $('#IDTOURNEE').select2()
                    } else {

                        notifError(response.msg)
                    }
                },
                error: function(error) {

                    notifError(error)
                }
            })
        }

        function chargerTableCdeClient() {

            $.ajax({

                url: '{{ route('listingCommandeClient') }}',
                type: 'GET',
                beforeSend: progressHandler(),
                dataType: 'json',
                success: function(response) {

                    if (response.success == 1) {

                        let obj = response.data

                        _('nbreCdeClient').innerHTML = response.nbreCdeClient
                        _('nbreLigneCmdeClient').innerHTML = response.NbreLigneCmde
                        _('totalHTTT').innerHTML = response.totalHTTT
                        _('totalRemiseTT').innerHTML = response.totalRemiseTT
                        _('totalTVATT').innerHTML = response.totalTVATT
                        _('totalTTCTT').innerHTML = response.totalTTCTT

                        tableCommandeClient = remplissageDataTable({
                            IdentifiantDuTableau: '#tableCommandeClient',
                            obj: obj,
                            pageLength: 100,
                            // paging: false,
                            lengthChange: true,
                            // scrollY: '500px'
                        })

                        divShowPer = $('#tableCommandeClient_filter')

                        // // Division des valeur totales
                        BroDivShowPer = divShowPer.parent().prev()
                        BroDivShowPer.addClass('d-flex pt-2')
                        BroDivShowPer.prepend(
                            '<i id="suppLignesCochee" class="bx bxs-trash text-danger me-1 mt-2" style="font-size : 18px; cursor : pointer;"></i><span id="labelSuppLignesCochee" class="fw-bold mt-2 me-3" style="cursor : pointer;">Supprimer les lignes cochées</span>'
                        )

                        placeboutonPreferenceColonne('tableCommandeClient', 'ListingCmdeClientShowColonne', 2)
                        recuperationPreferenceColonneUtilisateur('tableCommandeClient',
                            'ListingCmdeClientShowColonne')

                        completeHandler()
                    } else {

                        notifError(response.msg)
                        completeHandler()
                    }
                },
                error: function(error) {
                    notifError(error)
                    completeHandler()
                }
            })
        }

        $(document).on('click', '.ListingCmdeClientShowColonne', function() {
            appliquerPreferenceColonne('tableCommandeClient', 'Listing-commande-client', $(this),
                'ListingCmdeClientShowColonne')
        })

        function listeLigneSelectionne() {

            let data = []

            let lignes = tableCommandeClient.rows().nodes()

            $.each($(lignes).find('.checkSelectLigne'), function(key, value) {

                if (value.checked == true) {
                    data.push(value.getAttribute('data-id'))
                }
            })
            return data
        }

        function chargerSelectGroupement(valeur) {

            $.ajax({

                url: '{{ route('listingGroupementClient') }}',
                type: 'GET',
                dataType: 'json',
                success: function(response) {

                    $('#IDGROUPEMENT_CLIENT').html('')
                    $('#IDGROUPEMENT_CLIENT').append('<option value="0">TOUS LES GROUPEMENTS</option>')

                    $.each(response.data, function(key, value) {

                        $('#IDGROUPEMENT_CLIENT').append('<option value="' + value[
                            "IDGROUPEMENT_CLIENT"] + '">' + value[
                            "LibelleGroupementClient"] + '</option>')
                    })

                    $('#IDGROUPEMENT_CLIENT').val(valeur).trigger('change')

                    $('#IDGROUPEMENT_CLIENT').select2()
                }
            })
        }

        var dataRecup = null
        // Perf : démarrer sur DOMContentLoaded ($(document).ready) au lieu de l'événement 'load'.
        // 'load' attend le téléchargement de TOUS les assets (images/JS/CSS) avant de lancer la chaîne
        // (session + combos + tableau) -> l'affichage des données démarre bien plus tôt ainsi.
        $(document).ready(function() {

            // recupereValeurSession()
            recupererValeurSession('filterMemory.ListeCdeClient')
                .then((data) => {
                    dataRecup = data
                    chargerSelectClient(data.IDCLIENT)
                    chargerSelectProduit(data.IDPRODUIT)
                    // chargerSelectAgence(data.IDAGENCE)
                    chargerSelectAgence({{session('IDAGENCE')}})
                    chargerSelectTournee(data.IDTOURNEE, {{session('IDAGENCE')}})
                    chargerSelectGroupement(data.IDGROUPEMENT_CLIENT)

                    _('etapeTraitement').value = data.etapeTraitement
                    _('type').value = data.type
                    _('mode').value = data.mode

                    _('uniquementCmu').checked = (data.uniquementCmu == 0) ? false : true
                    _('filtrePeriode').value = explodeDate(data.debutPeriode, '-') + ' - ' + explodeDate(data
                        .finPeriode, '-')
                })

            chargerTableCdeClient()
        })

        // Click sur le boutton de refresh
        _('btnFiltreTable').addEventListener('click', function() {

            let session = 'filterMemory.ListeCdeClient'

            let Periode = convertirFormatDate2(_('filtrePeriode').value, true, 'YYYY-MM-DD HH:mm')

            let valeurSession = {

                'IDAGENCE': {{session('IDAGENCE')}},
                'debutPeriode': Periode[0],
                'finPeriode': Periode[1],
                'IDCLIENT': _('IDCLIENT').value,
                'IDPRODUIT': _('IDPRODUIT').value,
                'etapeTraitement': _('etapeTraitement').value,
                'type': _('type').value,
                'mode': _('mode').value,
                'IDTOURNEE': _('IDTOURNEE').value,
                'uniquementCmu': (_('uniquementCmu').checked == true) ? 1 : 0,
                'IDGROUPEMENT_CLIENT': _('IDGROUPEMENT_CLIENT').value,

            }

            modifierValeurSession('{{ csrf_token() }}', session, valeurSession)
                .then(function(data) {

                    chargerTableCdeClient()
                })
        })

        _('formFiltre').addEventListener('submit', function(e) {
            e.preventDefault()
            _('btnFiltreTable').click()
        })

        @if($ModeGpharma == 2)

            var MonnaieParDefaut = '{{ $IDMonnaieParDefaut }}'
        @endif
    </script>

    <!-- Script info commande client -->
    <script>
        function infoCdeClient(IDCOMMANDECLIENT) {

            return new Promise((resolve, reject) => {

                $.ajax({

                    url: '{{ route('infoCdeClient') }}',
                    type: 'POST',
                    data: {
                        IDCOMMANDECLIENT: IDCOMMANDECLIENT,
                        _token: '{{ csrf_token() }}'
                    },
                    beforeSend: progressHandler(),
                    dataType: 'json',
                    success: function(response) {

                        if (response.success != 1) {

                            notif('danger', 'Erreur', response.msg)
                        }

                        resolve(response)
                        completeHandler()
                    },
                    error: function(error) {

                        notifError('Échec de l\'opération.')
                        reject()

                        completeHandler()
                    }
                })
            })
        }

        var dataTableLigneCdeClient = []
        var etapeCde
        var IDCOMMANDECLIENT

        /* ------------------------------------------------------------------ */
        /*  Les avantages de promotion, dans la modale de detail               */
        /* ------------------------------------------------------------------ */

        const libellesAvantagePromoCde = {
            PRODUIT_OFFERT: 'Produit offert',
            GOODIE: 'Cadeau offert',
            SURREMISE_TAUX: 'Remise',
            REMISE_FORFAIT: 'Remise sur prix cession HT'
        }

        /**
         * Remplit le bloc des avantages, ou le cache s'il n'y en a aucun.
         *
         * Un avantage repris — le client a retourné la marchandise — reste affiché, barré :
         * effacer l'histoire empêcherait de la comprendre, et c'est bien elle qu'on vient
         * chercher en ouvrant cette modale.
         */
        function remplirBlocPromoCde(avantages, bilan, manques) {

            avantages = avantages || []
            manques = manques || []

            if (avantages.length === 0 && manques.length === 0) {
                $('#blocPromoCde').addClass('d-none')
                return
            }

            let html = ''

            /* Ce que le stock a refusé, en tête : c'est l'information qu'on vient chercher
               quand une commande semble n'avoir rien reçu. */
            $.each(manques, function(index, m) {

                const du = formatNumberPerf(m.QteVoulue)
                const servi = formatNumberPerf(m.QteServie)

                html += `<tr class="table-warning">
                    <td><i class="ri-alert-line align-middle"></i> Non accordé</td>
                    <td>${m.DesignationProduit || ''}</td>
                    <td><span class="badge bg-warning-transparent">${du} ×
                        ${m.ProduitOffert || ''}</span>
                        <span class="text-muted ms-1">stock insuffisant, ${servi} servi(s)</span></td>
                    <td class="text-end">—</td>
                    <td class="text-muted">${(m.NumeroRegle ? m.NumeroRegle + ' — ' : '') + (m.LibelleRegle || '')}</td>
                </tr>`
            })

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

                const estUnDon = (a.TypeAvantage === 'GOODIE' || a.TypeAvantage === 'PRODUIT_OFFERT')
                const repris = (a.Repris === true || a.Repris === 't' || a.Repris === 1)

                /* Le forfait est exprimé par unité sur la fiche : on le redit ainsi. */
                /* La baisse consentie sur le prix unitaire, telle qu'elle a été
                   portée. Les avantages plus anciens, convertis en taux, n'en ont
                   pas : on la redresse alors depuis le montant. */
                const parUnite = a.BaisseUnitaire > 0 ? Number(a.BaisseUnitaire) :
                    (a.QteAvantage > 0 ? (a.MontantAvantage / a.QteAvantage) : 0)

                const obtenu = estUnDon ?
                    `<span class="badge bg-success-transparent">${formatNumberPerf(a.QteAvantage)} ×
                        ${a.ProduitOffert || ''}</span>` :
                    (a.TypeAvantage === 'SURREMISE_TAUX' ?
                        `+ ${formatNumberPerf(a.TauxApplique)} % sur ${formatNumberPerf(a.QteAvantage)} unité(s)` :
                        `${formatNumberPerf(parUnite)} € par unité, sur ${formatNumberPerf(a.QteAvantage)} unité(s)`)

                const offre = (a.NumeroRegle ? a.NumeroRegle + ' — ' : '') + (a.LibelleRegle || '')

                html += `<tr class="${repris ? 'text-decoration-line-through text-muted' : ''}">
                    <td>${libellesAvantagePromoCde[a.TypeAvantage] || a.TypeAvantage}
                        ${repris ? '<span class="badge bg-danger-transparent ms-1">retourné</span>' : ''}</td>
                    <td>${a.DesignationProduit || ''}</td>
                    <td>${obtenu}</td>
                    <td class="text-end">${a.MontantAvantage > 0 ? formatNumberPerf(a.MontantAvantage) : '—'}</td>
                    <td class="text-muted">${offre}</td>
                </tr>`
            })

            $('#tablePromoCde tbody').html(html)
            $('#badgePromoCde').text(bilan.nombre)
                .toggleClass('bg-success', manques.length === 0)
                .toggleClass('bg-warning', manques.length > 0)

            /* Replié à chaque ouverture, et non seulement à la première : sans cela le bloc
               resterait déplié de la commande consultée juste avant.
               Les classes suffisent — Bootstrap 5 lit l'état du collapse sur la classe
               « show » plutôt que dans un objet, donc rien à désynchroniser ici. */
            $('#corpsPromoCde').removeClass('show')
            $('#entetePromoCde').addClass('collapsed').attr('aria-expanded', 'false')

            let resume = []

            if (bilan.montant > 0) resume.push(formatNumberPerf(bilan.montant) + ' de remise')
            if (bilan.uniteOfferte > 0) resume.push(formatNumberPerf(bilan.uniteOfferte) + ' article(s) offert(s)')
            resume.push(bilan.offres + ' offre(s)')
            if (bilan.repris > 0) resume.push(bilan.repris + ' retourné(s)')

            $('#resumePromoCde').text(resume.join(' · '))
            $('#blocPromoCde').removeClass('d-none')
        }

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

            IDCOMMANDECLIENT = $(this).attr('data-id')

            infoCdeClient(IDCOMMANDECLIENT)
                .then(function(response) {

                    if (response.success == 1) {

                        _('dateCdeClient').innerHTML = response.info.DateCommandeClient
                        _('numCdeClient').innerHTML = response.info.NumeroCommandeClient
                        _('nomClient').innerHTML = response.info.NomClient
                        _('TotalTTCCde').innerHTML = response.info.TotalTTCFormat
                        etapeCde = response.info.EtapeCommande

                        if (etapeCde == 1) {

                            _('blockBadgeEtape').innerHTML =
                                '<span class="badge bg-danger-transparent" style="font-size:.78rem;  width:115px;">EN SAISIE</span>'
                            // _('badgeEtape').classList.add('badge', 'bg-danger', 'w-100')
                        } else if (etapeCde == 2) {

                            _('blockBadgeEtape').innerHTML =
                                '<span class="badge bg-warning-transparent" style="font-size:.78rem;  width:115px;">NON COLLECTEE</span>'
                            // _('badgeEtape').classList.add('badge', 'bg-success', 'w-100')
                        } else if (etapeCde == 3) {

                            _('blockBadgeEtape').innerHTML =
                                '<span class="badge bg-dark-transparent" style="font-size:.78rem;  width:115px;">EN COLLECTE</span>'
                            // _('badgeEtape').classList.add('badge', 'bg-dark', 'w-100')
                        } else if (etapeCde == 4) {

                            _('blockBadgeEtape').innerHTML =
                                '<span class="badge bg-dark-transparent" style="font-size:.78rem;  width:115px;">FACTUREE</span>'
                            // _('badgeEtape').classList.add('badge', 'bg-dark', 'w-100')
                        } else if (etapeCde == 5) {

                            _('blockBadgeEtape').innerHTML =
                                '<span class="badge bg-dark-transparent" style="font-size:.78rem;  width:115px;">EXPEDIEE</span>'
                            // _('badgeEtape').classList.add('badge', 'bg-dark', 'w-100')
                        } else if (etapeCde == 6) {

                            _('blockBadgeEtape').innerHTML =
                                '<span class="badge bg-success-transparent" style="font-size:.78rem;  width:115px;">LIVREE</span>'
                            // _('badgeEtape').classList.add('badge', 'bg-dark', 'w-100')
                        } else if (etapeCde == 7) {

                            _('blockBadgeEtape').innerHTML =
                                '<span class="badge bg-dark-transparent" style="font-size:.78rem;  width:115px;">DEJA LIVREE</span>'
                            // _('badgeEtape').classList.add('badge', 'bg-dark', 'w-100')
                        } else if (etapeCde == 0) {

                            _('blockBadgeEtape').innerHTML =
                                '<span class="badge bg-dark-transparent" style="font-size:.78rem;  width:115px;">TOUTES</span>'
                            // _('badgeEtape').classList.add('badge', 'bg-dark', 'w-100')
                        }

                        dataTableLigneCdeClient = response.data

                        remplirBlocPromoCde(response.promo, response.bilanPromo, response.manquesPromo)

                        $('#modalInfoCommandeClient').modal('show')
                    }
                })
        })

        function chargerTableLigneCdeClient() {

            remplissageDataTable({
                IdentifiantDuTableau: '#tableLigneCdeClient',
                obj: dataTableLigneCdeClient
            })

            // Division icones d'action
            let divAction = $('#tableLigneCdeClient_length').parent().parent().children()

            divAction.eq(0).removeClass('col-md-6');
            divAction.eq(0).addClass('d-flex col-md-8 pt-2');
            divAction.eq(1).removeClass('col-md-6');
            divAction.eq(1).addClass('col-md-4 pt-2')

            if (etapeCde < 3) {

                divAction.eq(0).append('<i id="editLaCde" data-id = "' + IDCOMMANDECLIENT +
                    '" class="bx bx-edit text-warning me-1 mt-2" style="font-size : 18px; cursor : pointer;"></i><span id="labelEditLaCde" class="fw-bold me-3 mt-2" style="cursor : pointer;">Modifier la commande</span>'
                )
                divAction.eq(0).append('<i id="suppLaCde" data-id = "' + IDCOMMANDECLIENT +
                    '" class="bx bxs-trash text-danger me-1 mt-2" style="font-size : 18px; cursor : pointer;"></i><span id="labelSuppLaCde" class="fw-bold me-3 mt-2" style="cursor : pointer;">Supprimer la commande</span>'
                )
            }

            divAction.eq(0).append(
                '<i id="printLaCde" class="bx bxs-file-pdf text-danger me-1 mt-2" style="font-size : 18px; cursor : pointer;"></i><span id="labelPrintLaCde" class="fw-bold me-3 mt-2" style="cursor : pointer;">Imprimer la commande</span>' +
                `<span class="d-flex align-items-center px-2" style="cursor : pointer;" id="btn-export-listing-cmdeClient">
                    <i class="ri ri-file-excel-2-line text-success me-1" style="font-size : 18px; cursor : pointer;"></i>
                    <span class="fw-bold" style="cursor : pointer;">Exporter</span>
                </span>`
            )
        }

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

            progressHandler()
            await chargerTableLigneCdeClient()
            completeHandler()
        })

        $('#modalInfoCommandeClient').on('hidden.bs.modal', function(evt) {
            setIdOnfirstOpenModalBeforeProd(evt.target.id)
        })
    </script>

    // <!-- Script de sélection des lignes -->
    <script>
        _('checkSelectAll').addEventListener('click', function() {

            let value = this.checked

            let lignes = tableCommandeClient.rows().nodes()

            $(lignes).find('.checkSelectLigne').prop('checked', value)
        })

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

            if (_('checkSelectAll').checked == true) {
                _('checkSelectAll').checked = false
            }
        })

        /* La sélection de lignes au glissé vaut pour tous les tableaux de
           l'application : elle vit dans assets/js/selectionAuGlisse.js, charge une seule
           fois, et s'active d'elle-meme sur tout tableau dont l'entete porte une case
           « tout cocher ». Rien a declarer ici. */
    </script>

    // <!-- Script d'export PDF -->
    <script>
        function printPDFCdeClient(listeLigneSelectionne, IDMONNAIE = null) {

            let routePDF = '{{ $ModeGpharma == 2 ? route("pdfCdeClientGETRACO") : route("pdfCdeClient") }}';

            $.ajax({

                url: routePDF,
                type: 'POST',
                data: {

                    listeLigneSelectionne: listeLigneSelectionne,
                    IDMONNAIE : IDMONNAIE,
                    _token: '{{ csrf_token() }}'
                },
                beforeSend: progressHandler(),
                dataType: 'json',
                success: function(response) {

                    if (response.success == 1) {

                        if (response.tablePDF.length > 0) {

                            response.tablePDF.forEach(function(value) {

                                // Récupérez le PDF en base64 depuis la réponse
                                var pdfBase64 = value;

                                // Créez un objet blob à partir du PDF en base64
                                var blob = b64toBlob(pdfBase64, 'application/pdf');

                                // Créez un objet URL pour le blob
                                var blobUrl = URL.createObjectURL(blob);

                                // Créez une fenêtre d'impression avec l'URL du blob
                                var printWindow = window.open(blobUrl);
                                // printWindow.print();
                            })
                        } else {

                            notif('danger', 'Erreur', 'Aucun pdf n\'a été chargé')
                        }
                    } else {

                        notifError(response.msg)
                    }
                    completeHandler()
                },
                error: function(response) {

                    notifError(response.msg)
                    completeHandler()
                }
            })
        }

        function printPDFProformatCdeClient(listeLigneSelectionne) {

            $.ajax({

                url: '{{ route('pdfProformatCdeClient') }}',
                type: 'POST',
                data: {

                    listeLigneSelectionne: listeLigneSelectionne,
                    _token: '{{ csrf_token() }}'
                },
                beforeSend: progressHandler(),
                dataType: 'json',
                success: function(response) {

                    if (response.success == 1) {

                        if (response.tablePDF.length > 0) {

                            response.tablePDF.forEach(function(value) {

                                // Récupérez le PDF en base64 depuis la réponse
                                var pdfBase64 = value;

                                // Créez un objet blob à partir du PDF en base64
                                var blob = b64toBlob(pdfBase64, 'application/pdf');

                                // Créez un objet URL pour le blob
                                var blobUrl = URL.createObjectURL(blob);

                                // Créez une fenêtre d'impression avec l'URL du blob
                                var printWindow = window.open(blobUrl);
                                // printWindow.print();
                            })
                        } else {

                            notif('danger', 'Erreur', 'Aucun pdf n\'a été chargé')
                        }
                    } else {

                        notifError(response.msg)
                    }
                    completeHandler()
                },
                error: function(response) {

                    notifError(response.msg)
                    completeHandler()
                }
            })
        }

        // Generation multiple des pdf par coche
        $(document).on('click', '#btnImprimer', function() {

            let maListeLigneSelectionne = listeLigneSelectionne()

            if (maListeLigneSelectionne.length == 0) {

                notif('danger', 'Attention', 'VEUILLEZ COCHER AU MOINS UNE LIGNE POUR ÉFFECTUER UNE IMPRESSION')
                return 0
            }

            if (ModeGpharma != 2) {
                
                printPDFCdeClient(maListeLigneSelectionne)
            }else{

                $('#selIDMONNAIEPDFCde').val(MonnaieParDefaut).trigger('change')
                $('#modalSelectIDMONNAIEPDFCde').modal('show')
            }
        })

        _('btnImprimerPdeCdeGETRACO').addEventListener('click', function(){

            let maListeLigneSelectionne = listeLigneSelectionne()
            printPDFCdeClient(maListeLigneSelectionne, $('#selIDMONNAIEPDFCde').val())
        })

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

            IDCOMMANDECLIENT = $(this).attr('data-id')
            printPDFCdeClient([IDCOMMANDECLIENT])
        })
    </script>

    <!-- Script de suppression de commande -->
    <script>
        var lignesASupprimer

        function suprimeCdeClient() {
            return new Promise(function(resolve, reject) {
                let success = 0;

                if (lignesASupprimer.length > 0) {

                    $.ajax({
                        url: '{{ route('suppCdeClient') }}',
                        type: 'POST',
                        beforeSend: progressHandler(),
                        data: {
                            lignes: lignesASupprimer,
                            _token: '{{ csrf_token() }}'
                        },
                        dataType: 'json',
                        success: function(response) {
                            success = response.success;

                            if (success == 1) {

                                let nbreLigneSupp = response.nbreLigneSupp 
                                let nbreLignes = response.nbreLignes

                                if (nbreLigneSupp > 0) {
                                    
                                    chargerTableCdeClient();
                                }

                                if (nbreLignes > nbreLigneSupp) {
                                    
                                    if (nbreLigneSupp == 0) {
                                        
                                        notif('warning', 'Attention', 'Aucune commande sélectionnée n\'a été supprimée');
                                    }else if(nbreLigneSupp == 1){

                                        notif('warning', 'Attention', 'Seule une ligne a été supprimée sur ' + formatNumberPerf(nbreLignes))
                                    }else{

                                        notif('warning', 'Attention', 'Seules ' + nbreLigneSupp + ' lignes ont été supprimées sur ' + formatNumberPerf(nbreLignes))
                                    }
                                }else{

                                    notif('success', 'Succès', 'Suppression des lignes éffectuée')
                                }
                                    
                                resolve(success);
                            } else {
                                notifError(response.msg);
                                reject(success);
                            }
                        },
                        error: function(error) {
                            console.log(error);
                            reject('Erreur lors de la requête AJAX');
                        },
                        finally : completeHandler()
                    });
                } else {
                    // Aucune ligne fournie, résolvez immédiatement avec la valeur par défaut (0)
                    resolve(0);
                }
            });
        }

        // Suppression de la ligne direct
        $(document).on('click', '#deleteCdeClient', function() {

            lignesASupprimer = []

            lignesASupprimer.push($(this).attr('data-id'))

            @if ($ModeGpharma != 2)
                let message = 'Les commandes déjà collectées ou lancées ne seront pas supprimées'
            @else
                let message = 'Les commandes déjà validées ne seront pas supprimées'
            @endif

            confirmMdp('{{ csrf_token() }}', suprimeCdeClient, null, message)
        })

        //  Supprimer plusieurs lignes
        $(document).on('click', '#suppLignesCochee', function() {

            lignesASupprimer = listeLigneSelectionne()

            if (lignesASupprimer.length == 0) {

                notif('danger', 'Succès', 'Veuillez cocher au moins une ligne pour éffectuer une suppression')
            } else {

                confirmMdp('{{ csrf_token() }}', suprimeCdeClient, null,
                    'Les commandes déjà collectées ou lancées ne seront pas supprimées')
            }
        })

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

            $('#suppLignesCochee').click()
        })

        // supprimer étant sur la modal
        $(document).on('click', '#suppLaCde', function() {

            lignesASupprimer = []

            lignesASupprimer.push($(this).attr('data-id'))

            confirmMdp('{{ csrf_token() }}', suprimeCdeClient, null,
                'Les commandes déjà collectées ou lancées ne seront pas supprimées')

            $('#modalInfoCommandeClient').modal('hide')
        })
    </script>

     <!-- Script de modification de la commande -->
    <script>
        var IDCOMMANDE_MODIF

        function modifierCde() {

            $.ajax({

                url: '{{ route('infoCdeClient') }}',
                type: 'POST',
                data: {
                    IDCOMMANDECLIENT: IDCOMMANDE_MODIF,
                    afficherLigne: true,
                    _token: '{{ csrf_token() }}'
                },
                beforeSend: progressHandler(),
                dataType: 'json',
                success: function(response) {

                    if (response.success == 0) {

                        notifError('Échec de l\'opération.')
                        completeHandler()
                        return 0
                    }

                    if (response.info.IDAGENCE != _('idSiteEnCours').value) {

                        notif('danger', 'ATTENTION', 'Cette commande ne peut être ouverte sur cette agence ')
                        completeHandler()
                        return 0
                    }

                    let url = '{{ url('/ventes/cmdeclient?idCdeClient=') }}';

                    if (response.info.EtapeCommande <= 2) {

                        window.location.href = url + IDCOMMANDE_MODIF
                    } else {

                        notifWarning('Cette commande n\'est pas modifiable')
                    }

                    completeHandler()
                },
                error: function(error) {

                    notifError('Échec de l\'opération.')
                    completeHandler()
                }
            })
        }

        function verifModifierCde() {

            confirmMdp('{{ csrf_token() }}', modifierCde)
        }

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

            IDCOMMANDE_MODIF = $(this).attr('data-id')

            verifModifierCde()
        })

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

            IDCOMMANDE_MODIF = $(this).attr('data-id')

            verifModifierCde()
        })

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

            $('#editLaCde').click()
        })
    </script>

    // <!-- Script export excel -->
    <script>
    
        function exporterListingCdeClient(data) {

            data._token = '{{ csrf_token() }}'

            return new Promise(function(resolve, reject) {

                $.ajax({

                    url: "{{ route('exporterListingCdeClient') }}",
                    type: 'POST',
                    data: data,
                    // contentType : false,
                    // processData : false,
                    dataType: 'json',
                    beforeSend: progressHandler(),
                    success: function(response) {

                        if (response.success == 1) {

                            if (response.tableExcel.length > 0) {

                                response.tableExcel.forEach(function(value) {

                                    var excelBase64 = value;

                                    // let nomDoc = (response.nomDoc == '' || response.nomDoc == null) ? 'export' : response.nomDoc

                                    let dateString = _('filtrePeriode').value

                                    let periode = convertirFormatDate2(dateString,
                                        inclureHeure = false, formatSortie = 'DD-MM-YYYY',
                                        separateur = ' - ')

                                    let nomDoc = "LISTING_COMMANDE_CLIENT_(" + periode[0] +
                                        "_AU_" + periode[1] + ")"

                                    // Convertit le base64 en Blob
                                    var blob = b64toBlob(excelBase64,
                                        'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet'
                                    );

                                    // Crée un URL pour le blob
                                    var blobUrl = URL.createObjectURL(blob);

                                    // Crée un élément `<a>` pour le téléchargement
                                    var link = document.createElement('a');
                                    link.href = blobUrl;
                                    link.download = nomDoc +
                                        ".xlsx"; // Nom du fichier à télécharger

                                    // Ajoute le lien au document et déclenche le clic
                                    document.body.appendChild(link);
                                    link.click();

                                    // Nettoie après le téléchargement
                                    document.body.removeChild(link);
                                    URL.revokeObjectURL(blobUrl);
                                })
                            } else {

                                notif('danger', 'Erreur', 'Aucun fichier excel n\'a été chargé')
                            }
                        } else {

                            notifError(response.msg)
                        }

                        completeHandler()
                    },
                    error: function(error) {

                        notifError('Échec de l\'opération.')
                        reject()

                        completeHandler()
                    }
                })
            })
        }

        _('btnExport').addEventListener('click', function() {

            let data = []

            let lignes = tableCommandeClient.rows().nodes()

            $.each($(lignes).find('.checkSelectLigne'), function(key, value) {

                if (value.checked == true) {
                    data.push(tableCommandeClient.row(key).data())
                }
            })

            if (data.length == 0) {

                notif('danger', 'Succès', 'Veuillez cocher au moins une ligne pour pouvoir effectuer l\'export.')
                return 0
            }

            data = JSON.stringify(data)

            donnee = {
                data: data
            }

            exporterListingCdeClient(donnee)
        })

        _('btnExportLaListe').addEventListener('click', function() {

            let tailleTable = tableCommandeClient.data().count()

            if (tailleTable <= 0) {

                notif('danger', 'Erreur', 'Aucune ligne à exporter')
                return 0
            }

            if (tailleTable > 10000) {

                donnee = {

                    parRequete: 1
                }
            } else {

                let data = tableCommandeClient.data().toArray()

                data = JSON.stringify(data)

                donnee = {
                    data: data
                }
            }

            exporterListingCdeClient(donnee)
        })
    </script>

    // <!-- Script de transfert de commande vers un autre site -->
    <script>
        if (_('btnTransCde')) {

            _('btnTransCde').addEventListener('click', function() {

                let lignes = listeLigneSelectionne()

                if (lignes.length == 0) {

                    notif('danger', 'Erreur', 'Veuillez cocher au moins une ligne pour éffectuer un traitement !')
                } else {

                    var inputOptions = {};

                    // Remplir l'objet avec les options
                    listeDesAgences.forEach((option) => {
                        inputOptions[option.value] = option.text;
                    });

                    Swal.fire({
                        title: 'Sélectionnez un site',
                        input: 'select', // Type de champ d'entrée (select dans ce cas)
                        inputOptions: inputOptions,
                        inputPlaceholder: 'Sélectionnez',
                        showCancelButton: true,
                        confirmButtonText: 'Valider',
                        cancelButtonText: 'Annuler',
                        inputValidator: (value) => {
                            // Validation du champ de sélection
                            if (!value) {
                                return 'Vous devez sélectionner un site !';
                            }
                        }
                    }).then((result) => {
                        // Traitement après la confirmation
                        if (result.isConfirmed) {

                            const selectedOption = result.value;

                            // Faites quelque chose avec l'option sélectionnée
                            console.log('Option sélectionnée : ' + selectedOption);

                            $.ajax({

                                url: '{{ route('transCdeClient') }}',
                                type: 'POST',
                                data: {

                                    lignes: lignes,
                                    newSite: selectedOption,
                                    _token: '{{ csrf_token() }}'
                                },
                                dataType: 'json',
                                success: function(response) {

                                    chargerTableCdeClient()
                                    notif('success', 'Succès', 'Transfert de ' + response
                                        .nbreLigneTrans + ' élément(s) sur ' + response
                                        .nbreLignes)
                                    _('checkSelectAll').checked = false
                                }
                            })
                        }
                    })
                }
            })
        }

        if (_('btnSynchroniserCmde')) {

            _('btnSynchroniserCmde').addEventListener('click', function() {

                let lignes = listeLigneSelectionne()

                if (lignes.length == 0) {
                    notif('danger', 'Erreur', 'Veuillez cocher au moins une ligne pour éffectuer un traitement !')
                    return false
                }

                confirmAction(()=> {
                    $.ajax({
                        type: "post",
                        url: "{{ route("synchroniserCommandeClient") }}",
                        data: {
                            data : lignes,
                            _token : "{{ csrf_token() }}"
                        },
                        dataType: "json",
                        beforeSend : progressHandler(),
                        success: function (response) {
                            if(response.error == false){
                                completeHandler()
                                notifSuccess(response.messages)
                                return false
                            }
                            completeHandler()
                            notifWarning(response.messages)
                        },
                        error: function (response) {
                            completeHandler()
                            notifDanger(response.responseJSON.messages)
                        }
                    });

                }, "Voulez-vous lancer la synchronisation des lignes séléctionnées ?")

            })
        }
    </script>

    // <!-- Script de transfert de commande vers protocole -->
    <script>
        function verifPeutTransCdeVersProtClient(IDCOMMANDECLIENT) {

            return new Promise((resolve, reject) => {

                $.ajax({

                    url: '{{ route('verifPeutTransCdeVersProtClient') }}',
                    type: 'GET',
                    data: {
                        IDCOMMANDECLIENT: IDCOMMANDECLIENT
                    },
                    beforeSend: progressHandler(),
                    dataType: 'json',
                    success: function(response) {

                        if (response.success != 1) {

                            notif('danger', 'Erreur', response.msg)
                        }

                        resolve(response)
                        completeHandler()
                    },
                    error: function(error) {

                        notifError('Échec de l\'opération.')
                        reject()

                        completeHandler()
                    }
                })
            })
        }

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

            let IDCOMMANDECLIENT = $(this).attr('data-id')

            verifPeutTransCdeVersProtClient(IDCOMMANDECLIENT)
                .then((response) => {

                    if (response.success == 1) {

                        let info = response.info

                        _('inpIDCOMMANDECLIENTModalTransCdeVersProtClient').value = IDCOMMANDECLIENT
                        _('libNomClient').innerHTML = info.NomClient
                        _('inpNumeroCommandeClient').value = info.NumeroCommandeClient
                        _('inpDateCommandeClient').value = info.DateCommandeClient.split(' ')[0]
                        _('inpTotalTTC').value = parseFloat(info.TotalTTC)

                        _('inpNumeroProtocoleCLient').value = ''
                        _('inpMontantRestant').value = ''
                        _('inpDateDemarrageProtocoleClient').value = ''
                        _('inpDAteFinProtocoleClient').value = ''

                        let data = response.dataProtocole

                        data.unshift({
                            IDPROTOCOLECLIENT: 0,
                            LibelleProtocoleClient_Type: ''
                        })

                        populateSelect('#selIDPROTOCOLECLIENT', {
                            data: data,
                            valueKey: 'IDPROTOCOLECLIENT',
                            textKey: 'LibelleProtocoleClient_Type'
                        })

                        $('#selIDPROTOCOLECLIENT').select2({
                            dropdownParent: $('#modalTransCdeVersProtClient')
                        })

                        $('.numberInput').trigger('input')

                        $('#modalTransCdeVersProtClient').modal('show')
                    }
                })
        })

        $(document).on('change', '#selIDPROTOCOLECLIENT', function() {

            if ($(this).val() <= 0) {

                _('inpNumeroProtocoleCLient').value = ''
                _('inpMontantRestant').value = ''
                _('inpDateDemarrageProtocoleClient').value = ''
                _('inpDAteFinProtocoleClient').value = ''

                return 0
            }

            $.ajax({

                url: '{{ route('recupererInfoProtocolePourTransCde') }}',
                type: 'GET',
                data: {
                    IDPROTOCOLECLIENT: $(this).val()
                },
                beforeSend: progressHandler(),
                dataType: 'json',
                success: function(response) {

                    if (response.success != 1) {

                        notif('danger', 'Erreur', response.msg)
                        completeHandler()
                        return 0
                    }

                    let info = response.info

                    _('inpNumeroProtocoleCLient').value = info.NumeroProtocoleCLient
                    _('inpMontantRestant').value = info.MontantRestantProtocole
                    _('inpDateDemarrageProtocoleClient').value = (info.DateDemarrageProtocoleClient !=
                            '' && info.DateDemarrageProtocoleClient != null) ? info
                        .DateDemarrageProtocoleClient.split(' ')[0] : ''
                    _('inpDAteFinProtocoleClient').value = (info.DAteFinProtocoleClient != '' && info
                        .DAteFinProtocoleClient != null) ? info.DAteFinProtocoleClient.split(' ')[
                        0] : ''

                    $('.numberInput').trigger('change')

                    completeHandler()
                },
                error: function(error) {

                    notifError('Échec de l\'opération.')
                    completeHandler()
                }
            })
        })

        function transCdeVersProtClient() {

            return new Promise(function(resolve, reject) {

                $.ajax({

                    url: "{{ route('transCdeVersProtClient') }}",
                    type: 'POST',
                    data: {
                        IDPROTOCOLECLIENT: _('selIDPROTOCOLECLIENT').value,
                        IDCOMMANDECLIENT: _('inpIDCOMMANDECLIENTModalTransCdeVersProtClient').value,
                        _token: '{{ csrf_token() }}'
                    },
                    dataType: 'json',
                    beforeSend: progressHandler(),
                    success: function(response) {

                        if (response.success != 1) {

                            notifError(response.msg)
                        }

                        completeHandler()
                        resolve(response)
                    },
                    error: function(error) {

                        notifError('Échec de l\'opération.')
                        reject()

                        completeHandler()
                    }
                })
            })
        }

        _('btnValiderTransCdeVersProtClient').addEventListener('click', function() {

            confirmMdp('{{ csrf_token() }}', transCdeVersProtClient, null, title = '', data = {
                    sousTitre: 'Voulez-vous mettre la commande client sur le protocole ?',
                    infoJNL: "TRANSFERT DE COMMANDES CLIENT SUR PROTOCOLE CLIENT",
                    typeJNL: 3,
                    CodeDroit: "DV_ComdeClientModifi"
                })
                .then((response) => {

                    if (response.success == 1) {

                        notif('success', 'Succès', 'Transfert de commande client réussi sur protocole client !')
                        _('btnFiltreTable').click()
                        $('#modalTransCdeVersProtClient').modal('hide')
                    }
                })
        })

        function transCdeVersCmptClient() {

            return new Promise(function(resolve, reject) {

                $.ajax({

                    url: "{{ route('transCdeVersCmptClient') }}",
                    type: 'POST',
                    data: {
                        IDCOMMANDECLIENT: IDCOMMANDECLIENT_TransVersCpteClient,
                        _token: '{{ csrf_token() }}'
                    },
                    dataType: 'json',
                    beforeSend: progressHandler(),
                    success: function(response) {

                        if (response.success != 1) {

                            notifError(response.msg)
                        }

                        completeHandler()
                        resolve(response)
                    },
                    error: function(error) {

                        notifError('Échec de l\'opération.')
                        reject()

                        completeHandler()
                    }
                })
            })
        }

        var IDCOMMANDECLIENT_TransVersCpteClient

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

            IDCOMMANDECLIENT_TransVersCpteClient = $(this).attr('data-id')

            confirmMdp('{{ csrf_token() }}', transCdeVersCmptClient, null, title = '', data = {
                    sousTitre: 'Voulez-vous mettre la commade client sur le compte principal du client ?',
                    infoJNL: "TRANSFERT DE COMMANDE CLIENT SUR COMPTE CLIENT",
                    typeJNL: 3,
                    CodeDroit: "DV_ComdeClientModifi"
                })
                .then((response) => {

                    if (response.success == 1) {

                        notif('success', 'Succès',
                            'Transfert de la commande client effectué avec succès sur le compte principal client !'
                        )
                        _('btnFiltreTable').click()
                        $('#modalTransCdeVersProtClient').modal('hide')
                    }
                })
        })


        $(document).on('click', '#btn-export-listing-cmdeClient', function() {
            var data = getCleanedTableData('tableLigneCdeClient')
            const filename = file_name("DETAIL_CMDE_CLIENT");
            const tabs_format = {
                A: '@',
                C: '#,##0',
                D: '#,##0',
                E: '#,##0',
                F: '#,##0',
                G: '#,##0',
                H: '#,##0',
                I: '#,##0',
                J: '#,##0',
            };
            download_excel_file('{{ route('export_global_excel.export') }}', data, filename, [], tabs_format)
        })
    </script>

    // <!-- Script de modification de site -->
    <script>

        ignoreGlobalSessionUpdate = false

        _('idSiteEnCours').addEventListener('change', function(){

            modifierSessionSite()
                .then(() => {

                    location.reload()
                })
        })
    </script>

@endsection