@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">
                            <div class="row">

                                <div class="col-xl-4 col-lg-4 col-sm-4 col-6 d-flex align-items-center">
                                    <div class="me-2">
                                        <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" id="totalHTTT"></p>
                                        <span class="text-muted fs-12">Total HT</span>
                                    </div>
                                </div>
                                <div class="col-xl-4 col-lg-4 col-sm-4 col-1 d-flex align-items-center">
                                    <div class="me-2">
                                        <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" id="totalTVATT"></p>
                                        <span class="text-muted fs-12">Total TVA</span>
                                    </div>
                                </div>
                                <div class="col-xl-4 col-lg-4 col-sm-4 col-1 d-flex align-items-center">
                                    <div class="me-2">
                                        <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" id="totalTTCTT"></p>
                                        <span class="text-muted fs-12">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 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>
                                    <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="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>
                    <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>

        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) {

            listingComboClient('#IDCLIENT', 'TOUS LES CLIENTS')

            $('#IDCLIENT').select2()

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

        function chargerSelectProduit(valeur) {

            $.ajax({

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

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

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

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

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

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

        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
                        _('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
        window.addEventListener('load', 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

        $(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

                        $('#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
            }
        })
    </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 == 1) {
                
                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 = {
                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