@extends('models')
@section('titre-page',"Collecte de bon de préparation")
@section('content-body')

@php
    
    $listeTauxMonnaie = [];
    $ModeGpharma = DB::table('PARAMETRE') -> select('ModeGpharma') -> first() -> ModeGpharma ?? 1;
    $IDMonnaieParDefaut = 0;

    if($ModeGpharma == 2){

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

    <!-- Start::app-content -->
    <style>
        p.btnPoursuivreVlidation:hover{

            color : #26bf94;
            font-size: 13px;
            transition-duration: 0.3s;
        }

        p.fermerModal:hover{
            
            color : #e6533c;
            font-size: 13px;
            transition-duration: 0.3s;
        }
    </style>

    <!-- 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-5 col-md-4 mt-2">
                    <nav>
                        <ol class="breadcrumb mb-0">
                            <li class="breadcrumb-item text-light"><a href="javascript:void(0);">Vente</a></li>
                            <li class="breadcrumb-item active" aria-current="page">Collecte de bon de préparation</li>
                        </ol>
                    </nav>
                </div>
                <div class="col-xl-7 mt-2">
                    <div class="d-flex justify-content-end">
                        <button type="button" class="btn btn-secondary-light btn-wave d-flex me-2" id="btnActualiserTable">
                            <i class="bx bx-refresh me-1" style="font-size: 20px;"></i>Actualiser
                        </button>
                        @if(in_array('DV_ModifLotCollecteCdeCli', session('LISTE_DROIT_ACCESS')))
                            <button type="button" class="btn btn-danger-light btn-wave d-flex me-2" id="btnViderCollectes">
                                <i class="bx bxs-eraser me-1" style="font-size: 20px;"></i>Vider les collectes
                            </button>
                        @endif
                        <button type="button" class="btn btn-warning-light d-flex justify-content-center"  id="pdfBonPrepa" style="font-size:15px">
                            <i class="ri-printer-line me-2"></i>Imprimer
                        </button>
                        <button type="button" class="btn btn-success-light btn-wave d-flex ms-2" id="btnFacturerBon">
                            <i class="bx bxs-receipt me-1" style="font-size: 20px;"></i>Facturer le bon
                        </button>
                    </div>
                </div>
            </div> 
        </div>
    </div>
    <!-- Page Header Close -->

    <!-- Start:: row-7 -->
    <div class="row">
        <div class="d-flex">
            <div class="card custom-card hrm-main-card danger">
                <div class="ps-3 rounded-0 d-flex py-3">
                    <i class='bx bx-edit-alt fs-20 me-1'></i>
                    <span class="text-center fs-16 fw-bold">Préparation du bon</span>
                </div>
                <div class="card-body border mx-3 mt-0 mb-2 pb-2">
                    <div class="row">
                        <div class="col-xl-3 col-md-6 d-flex justify-content-center mb-3">
                            Numéro du bon :
                            <label class="fw-bold ms-2" id="libNumeroBonPreparation"></label>
                        </div>
                        <div class="col-xl-3 col-md-6 d-flex justify-content-center mb-3">
                            Numéro de la cde :
                            <label class="fw-bold ms-2" id="libNumeroCommandeClient"></label>
                        </div>
                        <div class="col-xl-3 col-md-6 d-flex justify-content-center mb-3">
                            Date :
                            <label class="fw-bold ms-2" id="libDateCommandeClient"></label>
                        </div>
                        <div class="col-xl-3 col-md-6 d-flex justify-content-center mb-3">
                            Client : 
                            <label class="fw-bold ms-2" id="libNomClient"></label>
                        </div>
                        <div class="col-xl-3 col-md-6 d-flex justify-content-center mb-3">
                            Montant : 
                            <label class="fw-bold ms-2" id="libTotalTTC"></label>
                        </div>
                        <div class="col-xl-3 col-md-6 d-flex justify-content-center mb-3">
                            Type de cde :
                            <label class="fw-bold ms-2" id="libTypeCde"></label>
                        </div>
                        <div class="col-xl-3 col-md-6 d-flex justify-content-center mb-3">
                            Zone de Stockage :
                            <label class="fw-bold ms-2" id="libZoneStockage"></label>
                        </div>
                        <div class="col-xl-3 col-md-6 d-flex justify-content-center mb-3">
                            Terminal :
                            <label class="fw-bold ms-2" id="libNomLecteur"></label>
                        </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-body">
                    <div class="table-responsive">
                        <table class="tablehover table table-striped text-nowrap w-100 tablehover" id="tableLigneBonPrepa">
                            <thead  class="table-header-primary">
                                <tr>
                                    <th data-orderable="false" class="text-center">
                                        <input class="form-check-input me-4" type="checkbox" id="checkSelectAllLigneBonPrepaLigne">
                                        Action</th>
                                    <th class="text-center">Désignation</th>
                                    <th class="text-center">Cartonnage</th>
                                    <th class="text-center">Qté UG</th>
                                    <th class="text-center">Carton à collecter</th>
                                    <th class="text-center">Qté à collecter</th>
                                    <th class="text-center">C</th>
                                    <th class="text-center">Carton collecté</th>
                                    <th class="text-center" >Qté collectée</th>
                                    <th class="text-center">Ecart</th>
                                    <th class="text-center">Terminal mobile</th>
                                    <th class="text-center">Code</th>
                                </tr>
                            </thead>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- End::app-content -->

    {{-- Section modal --}}
    <div class="modal fade" id="modalSaisieCollecte" tabindex="-1" aria-labelledby="exampleModalScrollable2"
        data-bs-keyboard="false" aria-hidden="true">
        <!-- Scrollable modal -->
        <div class="modal-dialog  modal-xl">
            <div class="modal-content">
                <div class="modal-header">
                    <h6 class="modal-title" id="titleModalInfoCdeClient"> Saisie de collecte</h6>
                    <button type="button" class="btn-close bg-white" id="closeModal" 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-4 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>Qté à collecter&nbsp;:&nbsp;</span>
                                    <span id="QuantiteAPreparer" class="fw-bold ellipsis"></span>
                                </div>
                                <div class="col-xl-4 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>Qté UG à collecter&nbsp;:&nbsp;</span>
                                    <span id="QuantiteUGaCollecter" class="fw-bold"></span>
                                </div>
                                <div class="col-xl-4 col-md-12 col-lg-12 col-sm-12 d-flex mb-xl-0 mb-md-2">
                                    <span>Produit&nbsp;:&nbsp;</span>
                                    <span id="DesignationProduit" class="fw-bold"></span>
                                </div>
                            </div>
                        </div>

                        <div class="card border rounded py-1">
                            <form id="formCdeClientLigneCollecte">
                                <input type="number" style="display:none" id="IDCOMMANDECLIENTLIGNE_COLLECTE" name="IDCOMMANDECLIENTLIGNE_COLLECTE">
                                <div class="card-body row py-1">
                                    <div class="col-md-4">
                                        <p class="mb-0 text-muted">N° lot&nbsp;:</p>
                                        <select class="js-example-basic-single" name="IDSTOCKAGENCE_LOTS" id="IDSTOCKAGENCE_LOTS">

                                        </select>
                                    </div>
                                    <div class="col-md-3">
                                        <p class="mb-0 text-muted">Qté collectée&nbsp;:</p>
                                        <input type="number" class="form-control text-center" id="QteCollectee" name="QteCollectee">
                                    </div>
                                    <div class="col-md-4" style="display : none">
                                        <p class="mb-0 text-muted">N° traçabilité&nbsp;:</p>
                                        <input type="text" class="form-control text-center" id="IDTracabiliteStock" name="IDTracabiliteStock" readonly>
                                    </div>
                                    <div class="col-md-4">
                                        <p class="mb-0 text-muted">Date de péremption&nbsp;:</p>
                                        <input type="text" class="form-control text-center" id="DatePeremption_LOTS" name="DatePeremption_LOTS" disabled>
                                    </div>
                                    <div class="col-md-1 pt-1">
                                        <button type="button" class="btn btn-success btn-wave mt-2  float-end" id="btnnewCdeClientLigneCollecteCollecte" {{ !in_array('DV_ModifLotCollecteCdeCli', session('LISTE_DROIT_ACCESS')) ? 'disabled' : '' }} >
                                            <i class="bx bx-plus" style="font-size:13px; cursor:pointer;"></i>
                                        </button>
                                        <button type="button" class="btn btn-warning btn-wave mt-2  float-end" id="btnModifCdeClientLigneCollecte" style="display:none">
                                            <i class="bx bxs-edit" style="font-size:13px; cursor:pointer;"></i>
                                        </button>
                                    </div>
                                </div>
                            </form>
                        </div>
                    </div>
                    <div class="mt-0 table-responsive">
                        <table class="tablehover table table-striped text-nowrap w-100 tablehover" id="tableLigneCdeClientCollecte">
                            <thead  class="table-header-primary">
                                <tr>
                                    <th class="text-center" data-orderable="false">
                                        <input class="form-check-input me-4" type="checkbox" id="checkSelectAll">
                                        Action
                                    </th>
                                    <th class="text-center">Qté collectée</th>
                                    <th class="text-center">N° lot</th>
                                    <th class="text-center">NTSP</th>
                                    <th class="text-center">Date de péremption</th>
                                    <th class="text-center">Colis</th>
                                    <th class="text-center"></th>
                                </tr>
                            </thead>
                        </table>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-success" id="validerCollecte">
                        <i class='bx bxs-check-circle'></i>
                        Valider
                    </button>
                </div>
            </div>
        </div>
    </div>

    <div id="modalAffecterBac" class="modal fade bd-example-modal-sm" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered">
            <div class="modal-content">
                <div class="modal-header">
                    <h6 class="modal-title" id="titleModalInfoCdeClient">Affectation Emballages</h6>
                    <button type="button" class="btn-close bg-white" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <select name="IDBAC" id="IDBAC" class="js-example-basic-single"></select>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-success" id="validerAffectation">
                        <i class='bx bxs-check-circle'></i>
                        Valider
                    </button>
                    <button type="button" class="btn btn-success" id="validerAffectationLigneBon" style="display : none;">
                        <i class='bx bxs-check-circle'></i>
                        Valider 2
                    </button>
                </div>
            </div>
        </div>
    </div>

    <div class="modal fade" id="modalValidationFacture" tabindex="-1" data-bs-focus="false" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered" role="document">
            <div class="card flex-fill border border-danger custom-card modal-content pb-0">
                <div class="card-header d-flex justify-content-center py-1" style="background:  #F22A1E !important;">
                    <span class="text-light text-center fs-16 fw-bold">Validation de facture client</span>
                </div>
                <div class="card-body pt-3 pb-0">
                    <div class="row">
                        <div class="col-xl-12">
                            <div class="row">
                                <div class="col-md-6 mb-3 d-flex justify-content-center">
                                    Nbre de bacs :
                                    <label class="fw-bold ms-2" id="libNbreBacs"></label>
                                </div>
                                <div class="col-md-6 mb-3 d-flex justify-content-center">
                                    Nbre de carton :
                                    <label class="fw-bold ms-2" id="libNbreCarton"></label>
                                </div>
                                <div class="col-md-12 mb-3 d-flex justify-content-center">
                                    Nbre colis total :
                                    <label class="fw-bold ms-2" id="libNbreColis"></label>
                                </div>
                                <div class="col-md-6 mb-3 d-flex justify-content-center">
                                    Poids :
                                    <label class="fw-bold ms-2" id="libPoidsTT"></label>
                                </div>
                                <div class="col-md-6 mb-3 d-flex justify-content-center">
                                    Volume :
                                    <label class="fw-bold ms-2" id="libVolumeTT"></label>
                                </div>
                            </div>
                        </div>
                    </div>
                    <hr>
                    <div class="d-flex justify-content-around">
                        <div class="d-flex" style="font-size: 22px;">
                            <span class='bx bx-x-circle text-danger me-1 fermerModal' style="cursor:pointer" data-bs-dismiss="modal"></span><p id="fermerModal" style="cursor:pointer" class="fermerModal" data-bs-dismiss="modal">Annuler</p>
                        </div>
                        <div class="d-flex" style="font-size: 22px;">
                            <span class='bx bx-check-double text-success btnPoursuivreVlidation me-1'></span><p id="btnPoursuivreVlidation" class="btnPoursuivreVlidation" style="cursor:pointer">Poursuivre la validation</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="modal fade" id="modalValidationFactureGetraco" tabindex="-1" data-bs-focus="false" role="dialog" aria-labelledby="exampleModalLabel">
        <div class="modal-dialog modal-dialog-centered modal-xl" role="document">
            <div class="card flex-fill border border-danger custom-card modal-content pb-0">
                <div class="modal-header">
                    <h6 class="modal-title" id="titleModalInfoCdeClient">Validation de facture client</h6>
                    <button type="button" class="btn-close bg-white" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="card-body pt-3 pb-0">
                    <div class="row">
                        <div class="col-xl-12">
                            <div class="d-flex justify-content-end w-100 mb-2">
                                <div class="col-md-3">
                                    <div style="margin-top : -5px;" class="badge bg-success-transparent fs-12 py-2 d-flex justify-content-between px-2 w-100">
                                        <span class="text-dark" id="libTtTTCFacP">Total TTC facture : </span>
                                        <span id="libTotalTTCModalValidationFactureGetraco">0</span>
                                    </div>
                                    <div class="d-flex justify-content-end flex-wrap w-100" id="divTTOtherMonnaie">
                                    </div>
                                </div>
                            </div>
                            
                        </div>
                        <hr>
                        <div class="d-flex justify-content-end mb-1" id="divSoldeEncaissement">
                            <div style="min-width : 220px;" class="badge bg-primary-transparent fs-14 py-2 d-flex justify-content-between px-2 me-3">
                                <span class="text-dark">Total réglé : </span>
                                <span id="libRegleModalValidationFactureGetraco">0</span>
                            </div>
                            <div style="min-width : 220px;" class="badge bg-danger-transparent fs-14 py-2 d-flex justify-content-between px-2">
                                <span class="text-dark">Solde : </span>
                                <span id="libSoldeModalValidationFactureGetraco">0</span>
                            </div>
                        </div>
                        <div class="col-xl-12 py-2">
                            <form id="formReglement" class="w-100">
                                <div class="row">
                                    <div class="col-md-11">
                                        <div class="row">
                                            <div class="col-md-2">
                                                <p class="text-muted mb-0">Mode de paiement</p>
                                                <select name="IDMODEPAIEMENT" id="selIDMODEPAIEMENT" class="form-select"></select>
                                            </div>
                                            <div class="col-md-2" id="divReferenceReglementClient">
                                                <p class="text-muted mb-0">Référence</p>
                                                <input type="text" name="ReferenceReglementClient" id="inpReferenceReglementClient" class="form-control">
                                            </div>
                                            <div class="col-md-2" id="divListeOperateurMobileMoney">
                                                <p class="text-muted mb-0">Opérateur mobile money :</p>
                                                <select class="form-select" name="IDBANQUE" id="selIDOPERATEURMOBILEMONEY"></select>
                                            </div>
                                            <div class="col-md-2">
                                                <p class="text-muted mb-0">Devise</p>
                                                <select name="IDMONNAIE" id="selIDMONNAIE" class="form-select">
                                                    @foreach($listeTauxMonnaie as $monnaie)
                                                        <option value="{{ $monnaie -> IDMONNAIE }}" data-tauxmonnaie="{{ $monnaie -> TauxMonnaieInverse }}">{{ $monnaie -> SymboleMonnaie }}</option>
                                                    @endforeach
                                                </select>
                                            </div>
                                            <div class="col-md-2">
                                                <p class="text-muted mb-0">Montant</p>
                                                <input type="text" class="form-control numberInput text-end" value="0" name="MontantRegle" id="inpMontantRegle">
                                            </div>
                                            <div class="col-md-2">
                                                <p class="text-muted mb-0">Montant rendu</p>
                                                <input type="text" class="form-control numberInput text-end" value="0" name="MontantRendu" id="inpMontantRendu">
                                            </div>
                                            <div class="col-md-2">
                                                <p class="text-muted mb-0">Valeur réglée (Frc Cong)</p>
                                                <input type="text" class="form-control numberInput text-end" value="0" name="ValeurRegle" id="inpValeurRegle" readonly>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-md-1 pt-3">
                                        <button class="btn btn-success" id="btnNewLigne">
                                            <i class="bx bx-plus-circle"></i>
                                        </button>
                                    </div>
                                </div>
                            </form>
                        </div>
                        <hr>
                    </div>
                    <div class="table-responsive mt-3">
                        <table class="tablehover table table-striped text-nowrap overflow-auto w-100 " id="tableReglementFacture">
                            <thead class="table-header-primary">
                                <tr>
                                    <th data-column="action" data-orderable="false" class="text-center">#</th>
                                    <th data-column="LibelleModePaiement" class="text-center">Mode</th>
                                    <th data-column="SymboleMonnaie" class="text-center" data-class="text-center">Devise</th>
                                    <th data-column="montantFormat" class="text-center" data-class="text-end pe-2">Montant</th>
                                    <th data-column="MontantRenduFormat" class="text-center" data-class="text-end pe-2">Montant rendu</th>
                                    <th data-column="MontantFrancCongolais" class="text-center" data-class="text-end pe-2">Montant réglé</th>
                                </tr>
                            </thead>
                        </table>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-success" id="btnPoursuivreVlidationGETRACO">
                            <i class='bx bxs-check-circle'></i>
                            Poursuivre la validation
                        </button>
                    </div>
                </div>
            </div>
        </div>
    </div>

@endsection

@section('script')

    {{-- Script executé au chargement de la page --}}
    <script>

        var IDZONESTOCKAGE
        var IDLECTEURCODEBARRE

        // Créer un objet URLSearchParams en utilisant la chaîne de requête de l'URL actuelle
        var urlParams = new URLSearchParams(window.location.search);

        var tableLigneBonPrepa

        // Récupérer la valeur du paramètre 'param1'
        var IDBONPREPARATION = urlParams.get('IDBONPREPARATION');

        var CollecteCloturez
        var ModeGpharma = '{{ $ModeGpharma }}'

        function chargerTableBonPrepaLigne(){

            $.ajax({

                url : '{{ route("infoBonPrepa")}}',
                type : 'GET',
                beforeSend : progressHandler(),
                data : {
                    IDBONPREPARATION : IDBONPREPARATION,
                    ligne : true
                },
                dataType : 'json',
                success : function(response){
                    
                    if (response.success == 1) {

                        obj = response.data

                        _('libNumeroBonPreparation').innerHTML = response.info.NumeroBonPreparation
                        _('libNumeroCommandeClient').innerHTML = response.info.NumeroCommandeClient
                        _('libDateCommandeClient').innerHTML = response.info.dateCommandeClientFormat
                        _('libNomClient').innerHTML = response.info.NomClient
                        _('libTotalTTC').innerHTML = response.info.MontantLigneFormat
                        _('libTypeCde').innerHTML = response.info.libelleType
                        _('libZoneStockage').innerHTML = response.info.NomZoneStockage
                        _('libNomLecteur').innerHTML = response.info.NomLecteur
                        $('#idSiteEnCours').val(response.info.IDAGENCE).trigger('change')
                        IDZONESTOCKAGE = response.info.IDZONESTOCKAGE
                        IDLECTEURCODEBARRE = response.info.IDLECTEURCODEBARRE

                        sendDataSecondEcran()

                        CollecteCloture = response.info.CollecteCloture

                        if (CollecteCloture == false && ModeGpharma == 2) {
                            _('btnFacturerBon').innerHTML = '<i class="bx bxs-receipt me-1" style="font-size: 20px;"></i>Clôturer la collecte'
                        }else if(CollecteCloture == true && ModeGpharma == 2){
                            _('btnFacturerBon').innerHTML = '<i class="bx bxs-receipt me-1" style="font-size: 20px;"></i>Facturer & Encaisser'
                        }

                        $("#tableLigneBonPrepa").DataTable().destroy()
                        tableLigneBonPrepa = $("#tableLigneBonPrepa").DataTable({

                            bFilter: true,
                            language: languageTable,

                            /* scrollX va de pair avec scrollY. Dès qu'on demande un défilement
                               vertical, DataTables sépare l'entête et le corps en deux tables :
                               l'une dans .dataTables_scrollHead, l'autre dans
                               .dataTables_scrollBody. Sans scrollX, seul le corps déborde et
                               défile — l'entête, elle, reste où elle est, et les colonnes ne
                               correspondent plus. Avec, DataTables reporte le défilement du
                               corps sur l'entête, qui suit. */
                            scrollX: true,
                            scrollY: "400px",
                            scrollCollapse: true,
                            paging: false,
                            lengthMenu: [10, 15, 25, 50, 75, 100, 150, 200],
                            "data": obj,
                            'columns': [

                                {
                                    data: 'action',
                                    className: 'text-center'
                                },
                                {
                                    data: 'DesignationProduit'
                                },
                                {
                                    data: 'CartonnageProduit',
                                    className: 'text-center'
                                },
                                {
                                    data: 'QuantiteUGaCollecter',
                                    className: 'text-center'
                                },
                                {
                                    data: 'cartonACollecter',
                                    className: 'text-center'
                                },
                                {
                                    data: 'QuantiteAPreparerFormat',
                                    className: 'text-center'
                                },
                                {
                                    data: 'checkLigneControl',
                                    className: 'text-center'
                                },
                                {
                                    data: 'cartonCollecte',
                                    className: 'text-center'
                                },
                                {
                                    data: 'QuantitePrepareeFormat',
                                    className: 'text-center'
                                },
                                {
                                    data: 'ecart',
                                    className: 'text-center'
                                },
                                {
                                    data: 'NomLecteur'
                                },
                                {
                                    data: 'CodeCipProduit1'
                                }
                            ],
                            initComplete: function(settings, json) {
                            
                                completeHandler()
                            },
                            order: []
                        })

                        if(response.info.GestionParColisage == true){

                            tableLigneBonPrepa.column(5).visible(false);
                            tableLigneBonPrepa.column(8).visible(false);
                        }else{

                            tableLigneBonPrepa.column(4).visible(false);
                            tableLigneBonPrepa.column(7).visible(false);
                        }

                        divShowPer = $('#tableLigneBonPrepa_filter')

                        // // Division des valeur totales
                        divShowPer.parent().removeClass('col-md-6')
                        divShowPer.parent().addClass('col-md-3')
                        BroDivShowPer = divShowPer.parent().prev()
                        BroDivShowPer.removeClass('col-md-6')
                        BroDivShowPer.addClass('d-flex col-md-9 pt-2')
                        BroDivShowPer.prepend(`
                        @if($ModeGpharma != 2)
                            <i id="rattacherCollecteBonLigneAUnBac" class="bx bx-box text-primary me-1" style="font-size : 18px; cursor : pointer;"></i>
                            <span id="labelRattacherCollecteBonLigneAUnBac" class="fw-bold me-3" style="cursor : pointer;">Rattacher les collectes à un bac</span>
                            &nbsp;|&nbsp;
                            <i id="retirerCollecteBonLigneAUnBac" class="bx bx-box text-primary me-1" style="font-size : 18px; cursor : pointer;"></i>
                            <span id="labelRetirerCollecteBonLigneAUnBac" class="fw-bold me-3" style="cursor : pointer;">Retirer le bac des collectes</span>
                            &nbsp;|&nbsp;
                        @endif
                            <i id="controlerAllLignes" class="bx bx-check-square text-primary me-1" style="font-size : 18px; cursor : pointer;"></i>
                            <span id="labelControlerAllLignes" class="fw-bold me-3" style="cursor : pointer;">Contrôler toutes les lignes</span>
                            &nbsp;|&nbsp;
                            <i id="decocherControleAllLignes" class="bx bx-square text-primary me-1" style="font-size : 18px; cursor : pointer;"></i>
                            <span id="labelDecocherControleAllLignes" class="fw-bold me-3" style="cursor : pointer;">Décocher le contrôler de toutes les lignes</span>
                        `) 
                    }else{

                        $("#tableLigneBonPrepa").DataTable().destroy()
                        tableLigneBonPrepa = $("#tableLigneBonPrepa").DataTable({

                            bFilter: true,
                            language: languageTable
                        })

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

        function listeLigneSelectionne() {

            let data = []

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

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

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

        chargerTableBonPrepaLigne()

        var ModePaiementParDefaut

        listingComboModePaiement('#selIDMODEPAIEMENT', true, ' ')
            .then((response) => {

                if (response.success == 1) {
                    
                    ModePaiementParDefaut = response.parDefaut
                    ModePaiementMobileMoney = response.IDMODEPAIEMENT_MOBILE_MONEY
                }
            })

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

            if (ModePaiementMobileMoney != null && $(this).val() == ModePaiementMobileMoney) {
                
                _('divReferenceReglementClient').style.display = 'none'
                _('divListeOperateurMobileMoney').style.display = ''
            }else{

                _('divReferenceReglementClient').style.display = ''
                _('divListeOperateurMobileMoney').style.display = 'none'
            }
        })

        listeOperateurMobileMoney()
            .then((response) => {

                if(response.success == 1){

                    let data = response.data

                    data.unshift({IDBANQUE : 0, NomBanque : ''})

                    populateSelect('#selIDOPERATEURMOBILEMONEY', {
                        data : data,
                        valueKey : 'IDBANQUE',
                        textKey : 'NomBanque'
                    })
                }
            })

        function sendDataSecondEcran(){

            let dataLigne = []

            if (typeof tableReglementFacture !== 'undefined' && $.fn.DataTable.isDataTable(tableReglementFacture.table().node())) {
                
                dataLigne = tableReglementFacture.rows().data().toArray()
            }

            $.ajax({
                url : '{{ route("chargerLignesSecondEcran")}}',
                type : 'POST',
                data : {
                    dataLigne : JSON.stringify(dataLigne),
                    totalTTCFact : chaineEnNumerique(_('libTotalTTC').innerHTML), // _('libTotalTTC').innerHTML.replace(/\s/g, '').replace(',', '.'),
                    _token : '{{ csrf_token() }}'
                },
                dataType : 'json'
            })
        }

        @if($ModeGpharma == 2)
            
        var MonnaieParDefaut = '{{ $IDMonnaieParDefaut }}'
        
        var dataMonaie = {!!$listeTauxMonnaie!!}

        $('#selIDMODEPAIEMENT').select2({
            dropdownParent : $('#modalValidationFactureGetraco')
        })

        @endif

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

            let value = this.checked

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

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

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

            let listeIDBONPREPARATION_LIGNE = listeLigneBonSelectionne()

            if (listeIDBONPREPARATION_LIGNE.length <= 0) {
                notifDanger('Veuillez sélectionner les lignes de bon à rattacher au bac.')
                return 0
            }

            ouvertureModalAffecterBac(1)

            // $('#modalAffecterBac').modal('show')
            // _('validerAffectationLigneBon').style.display = ''
            // _('validerAffectation').style.display = 'none'
        })

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

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

        function listeLigneBonSelectionne(){

            let data = []

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

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

                if(value.checked == true){

                    data.push(value.getAttribute('data-id'))
                }
            })

            return data
        }

        function affectationBacParLigneDeBon(listeIDBONPREPARATION_LIGNE, IDBAC){

            $.ajax({

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

                    IDBAC : IDBAC,
                    listeIDBONPREPARATION_LIGNE : listeIDBONPREPARATION_LIGNE,
                    _token: '{{ csrf_token() }}'
                },
                beforeSend : progressHandler(),
                dataType : 'json',
                success : function(response){
                    
                    if (response.success == 1) {

                        chargerTableBonPrepaLigne()
                        $('#modalAffecterBac').modal('hide')
                        completeHandler()

                        if (IDBAC != 0) {

                            notif('success', 'Succès', 'Affectation éffectuée')
                        }else {

                            notif('success', 'Succès', 'Retrait éffectuée')
                        }
                    }else{

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

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

            let listeIDBONPREPARATION_LIGNE = listeLigneBonSelectionne()

            if (listeIDBONPREPARATION_LIGNE.length <= 0) {
                notifDanger('Veuillez sélectionner les lignes de bon à rattacher au bac.')
                return 0
            }

            let IDBAC = _('IDBAC').value

            affectationBacParLigneDeBon(listeIDBONPREPARATION_LIGNE, IDBAC)
        })

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

            let listeIDBONPREPARATION_LIGNE = listeLigneBonSelectionne()

            if (listeIDBONPREPARATION_LIGNE.length <= 0) {
                notifDanger('Veuillez sélectionner les lignes de bon à détacher du bac.')
                return 0
            }

            affectationBacParLigneDeBon(listeIDBONPREPARATION_LIGNE, 0)
        })
    
        $(document).on('click', '#labelRetirerCollecteBonLigneAUnBac', function(){

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

    <!-- Script de modification de ligne control -->
    <script>

        function modifLigneControle(data = {}){

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

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

                $.ajax({

                    url : "{{ route('modifLigneControle') }}",
                    type : 'POST',
                    data : data,
                    dataType : 'json',
                    beforeSend : progressHandler(),
                    success : function(response){

                        if (response.success != 1) {
                            
                            notifError(response.msg)
                        }

                        resolve(response)
                        completeHandler()
                    },
                    error : function(error){
                        
                        notifError(error.responseJSON.message)
                        reject()
                        completeHandler()
                    }
                })
            })
        }

        // COCHER LE CONTROLE DES LIGNES
        $(document).on('click', '#checkControl', function(){

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

            elmt = this
            value = this.checked

            modifLigneControle({ IDBONPREPARATION_LIGNE : IDBONPREPARATION_LIGNE, value : value })
                .then((response) => {

                    if (response.success != 1) {
                        
                        elmt.checked = !value
                    }
                })
                .catch(() => { elmt.checked = !value })
        })

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

            modifLigneControle({ IDBONPREPARATION : IDBONPREPARATION, value : true })
                .then((response) => {

                    if (response.success == 1) {
                        
                        let listeCheckControl = document.querySelectorAll('.checkControl')
                        
                        listeCheckControl.forEach(el => {
                            
                            el.checked = true;
                        });
                    }
                })
        })

        $(document).on('click', '#labelControlerAllLignes', function(){ $('#controlerAllLignes').click() })

        // DECOCHER LE CONTROLE DES LIGNES
        $(document).on('click', '#decocherControleAllLignes', function(){

            modifLigneControle({ IDBONPREPARATION : IDBONPREPARATION, value : false })
                .then((response) => {

                    if (response.success == 1) {
                        
                        let listeCheckControl = document.querySelectorAll('.checkControl')
                        
                        listeCheckControl.forEach(el => {
                            
                            el.checked = false;
                        });
                    }
                })
        })

        $(document).on('click', '#labelDecocherControleAllLignes', function(){ $('#decocherControleAllLignes').click() })

    </script>

    <!-- Impression du bon de préparation -->
    <script>

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

            @if($ModeGpharma == 2)

                pdfBonPreparationSimple([IDBONPREPARATION])
                return 0
            @endif

            pdfBonPreparation(IDBONPREPARATION)
        })
    </script>

    <!-- Script de saisie de collecte -->
    <script>

        var IDBONPREPARATION_LIGNE
        var IDCOMMANDECLIENTLIGNE

        var tableLigneCdeClientCollecte

        var operationEffectue = false

        var modeAffectationBac

        _('idSiteEnCours').setAttribute('disabled', '')

        function chargerSelectLot(IDPRODUIT, IDZONESTOCKAGE){

            $.ajax({

                url : '{{ route("lotParProduitParZone")}}',
                type : 'GET',
                data : {
                    IDAGENCE : _('idSiteEnCours').value,
                    IDPRODUIT : IDPRODUIT,
                    IDZONESTOCKAGE : IDZONESTOCKAGE
                },
                dataType : 'json',
                success : function(response){
                    
                    if (response.success == 1) {

                        $('#IDSTOCKAGENCE_LOTS').html('')
                        $('#IDSTOCKAGENCE_LOTS').append('<option value="0">Sélectionner un lot</option>')

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

                            $('#IDSTOCKAGENCE_LOTS').append('<option value="'+value.IDSTOCKAGENCE_LOTS+'" numTraca="'+ value.IDTracabiliteStock + '" datePeremption="' + value.DatePeremptionFormat + '">' + value.NumeroLotProduit + ' | S : ' + value.StockTotal_Lot+'</option>')
                        })

                        $('#IDSTOCKAGENCE_LOTS').select2({
                            dropdownParent: $("#modalSaisieCollecte")
                        })
                    }
                }
            })
        }

        // var
        $(document).on('click', '#saisieCollecte', function(){

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

            $.ajax({

                url : '{{ route("infoDeCollecteParBonPrepaLigne")}}',
                type : 'GET',
                data : {
                    IDBONPREPARATION_LIGNE : IDBONPREPARATION_LIGNE,
                    ligne : true
                },
                dataType : 'json',
                success : function(response){
                    
                    if (response.success == 1) {
                        
                        _('QuantiteAPreparer').innerHTML = response.info.QuantiteAPreparer
                        _('QuantiteUGaCollecter').innerHTML = response.info.QuantiteUGaCollecter
                        _('DesignationProduit').innerHTML = response.info.DesignationProduit
                        IDCOMMANDECLIENTLIGNE = response.info.IDCOMMANDECLIENTLIGNE

                        _('QteCollectee').value = 0
                        ancienneQte = null
                        operationEffectue = false

                        _('btnnewCdeClientLigneCollecteCollecte').style.display = ''
                        _('btnModifCdeClientLigneCollecte').style.display = 'none'

                        let IDPRODUIT = response.info.IDPRODUIT
                        chargerSelectLot(IDPRODUIT, IDZONESTOCKAGE)

                        let obj = response.data

                        $("#tableLigneCdeClientCollecte").DataTable().destroy()
                        tableLigneCdeClientCollecte = $("#tableLigneCdeClientCollecte").DataTable({

                            bFilter: true,
                            language: languageTable,
                            maxHeight: "80vh",
                            scrollCollapse: true,
                            paging: false,
                            // lengthMenu: [10, 15, 25, 50, 75, 100, 150, 200],
                            "data": obj,
                            'columns': [

                                {
                                    data: 'action',
                                    className: 'text-center'
                                },
                                {
                                    data: 'QteCollectee',
                                    className: 'text-center'
                                },
                                {
                                    data: 'NumeroLotProduit',
                                    className: 'text-center'
                                },
                                {
                                    data: 'IDTracabiliteStock',
                                    className: 'text-center',
                                    visible : false
                                },
                                {
                                    data: 'DatePeremptionFormat',
                                    className: 'text-center'
                                },
                                {
                                    data: 'NumeroBAC'
                                },
                                {
                                    data: 'ligneEmbale',
                                    className: 'text-center',
                                }
                            ],
                            order: []
                        })

                        divShowPer = $('#tableLigneCdeClientCollecte_filter')
                        divShowPer.parent().addClass('col-xl-3')

                        // // Division des valeur totales
                        BroDivShowPer = divShowPer.parent().prev()
                        BroDivShowPer.addClass('col-xl-9')
                        BroDivShowPer.addClass('d-flex justify-content-between pt-1 pe-3')
                        BroDivShowPer.prepend('<span class="d-flex badge bg-secondary-transparent align-items-center fs-12">Qté totale collectée :&nbsp;<b id="libQteTotalCollecte"> '+formatNumberPerf(response.qteTTCollecte)+'</span>')

                        @if('{{ $ModeGpharma }}' == 2)
                            BroDivShowPer.append('<div class="d-flex"><span id="btnAffectationGlobal" class="fw-bold mt-2 me-3" style="cursor : pointer;">Affecter à un colis</div>')
                            BroDivShowPer.append('<div class="d-flex"><span id="retraitGlobal" class="fw-bold mt-2 me-3" style="cursor : pointer;">Retirer du colis</span></div>')
                        @endif

                        $('#modalSaisieCollecte').modal({
                            backdrop: 'static',
                            keyboard: false
                        })

                        _('IDSTOCKAGENCE_LOTS').removeAttribute('disabled')

                        $('#modalSaisieCollecte').modal('show')
                    }else{

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

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

            let selectedOptionData = $(this).select2('data')[0];

            if(this.value != 0){
                
                _('IDTracabiliteStock').value = selectedOptionData.element.getAttribute('numTraca');
                _('DatePeremption_LOTS').value = selectedOptionData.element.getAttribute('datePeremption')
            }else{

                _('IDTracabiliteStock').value = ''
            }

            _('QteCollectee').value = annulerFormatNumerique(_('QuantiteAPreparer').innerHTML) - annulerFormatNumerique(_('libQteTotalCollecte').innerHTML)
            _('QteCollectee').select()

            // _('btnnewCdeClientLigneCollecteCollecte').style.display = ''
            // _('btnModifCdeClientLigneCollecte').style.display = 'none'
        })

        function chargerTableCdeClientLigneCollecte(){

            $.ajax({

                url : '{{ route("infoDeCollecteParBonPrepaLigne")}}',
                type : 'GET',
                data : {
                    IDBONPREPARATION_LIGNE : IDBONPREPARATION_LIGNE,
                    ligne : true
                },
                dataType : 'json',
                success : function(response){
                    
                    if (response.success == 1) {

                        let obj = response.data

                        $("#tableLigneCdeClientCollecte").DataTable().destroy()
                        tableLigneCdeClientCollecte = $("#tableLigneCdeClientCollecte").DataTable({

                            bFilter: true,
                            language: languageTable,
                            maxHeight: "80vh",
                            scrollCollapse: true,
                            paging: false,
                            // lengthMenu: [10, 15, 25, 50, 75, 100, 150, 200],
                            "data": obj,
                            'columns': [

                                {
                                    data: 'action',
                                    className: 'text-center'
                                },
                                {
                                    data: 'QteCollectee',
                                    className: 'text-center'
                                },
                                {
                                    data: 'NumeroLotProduit',
                                    className: 'text-center'
                                },
                                {
                                    data: 'IDTracabiliteStock',
                                    className: 'text-center',
                                    visible : false
                                },
                                {
                                    data: 'DatePeremptionFormat',
                                    className: 'text-center'
                                },
                                {
                                    data: 'NumeroBAC'
                                },
                                {
                                    data: 'ligneEmbale',
                                    className: 'text-center',
                                }
                            ],
                            initComplete: function(settings, json) {
                            
                                completeHandler()
                            },
                            order: []
                        })

                        divShowPer = $('#tableLigneCdeClientCollecte_filter')

                        // // Division des valeur totales
                        BroDivShowPer = divShowPer.parent().prev()
                        BroDivShowPer.addClass('d-flex pt-2')
                        BroDivShowPer.prepend('<span class="d-flex badge bg-secondary-transparent align-items-center fs-12">Qté totale collectée : <b id="libQteTotalCollecte"> '+formatNumberPerf(response.qteTTCollecte)+'</span>')

                    }else{

                        notifError(response.msg)
                    }
                }
            })
        }

        // Ajouter une ligne de collecte
        _('btnnewCdeClientLigneCollecteCollecte').addEventListener('click', function(e){

            if (_('IDSTOCKAGENCE_LOTS').value == 0) {
                
                notif('danger', 'Erreur', 'Veuillez sélectionner un lot valide')
                return 0
            }

            if (_('QteCollectee').value <= 0 || _('QteCollectee').value.replace(/\s/g, '') == '') {
                
                notif('danger', 'Erreur', 'Veuillez saisir une quantité valide')
                return 0
            }

            if (_('QteCollectee').value > annulerFormatNumerique(_('QuantiteAPreparer').innerHTML) -  annulerFormatNumerique(_('libQteTotalCollecte').innerHTML)) {
                
                notif('danger', 'Erreur', 'Impossible de collecter une quantité supérieure à la quantité préparée')
                return 0
            }

            let formCdeClientLigneCollecte = new FormData(_('formCdeClientLigneCollecte'))
            formCdeClientLigneCollecte.append('IDBONPREPARATION_LIGNE', IDBONPREPARATION_LIGNE)
            formCdeClientLigneCollecte.append('IDCOMMANDECLIENTLIGNE', IDCOMMANDECLIENTLIGNE)
            formCdeClientLigneCollecte.append('IDLECTEURCODEBARRE', IDLECTEURCODEBARRE)

            formCdeClientLigneCollecte.append('_token', '{{ csrf_token() }}')

            $.ajax({

                url : '{{ route("newCdeClientLigneCollecte")}}',
                type : 'POST',
                data : formCdeClientLigneCollecte,
                beforeSend : progressHandler(),
                processData: false,
                contentType: false,
                dataType : 'json',
                success : function(response){
                    
                    if (response.success == 1) {

                        _('IDCOMMANDECLIENTLIGNE_COLLECTE').value = ''
                        $('#IDSTOCKAGENCE_LOTS').val(0).change()
                        _('QteCollectee').value = 0
                        ancienneQte = null

                        _('btnnewCdeClientLigneCollecteCollecte').style.display = ''
                        _('btnModifCdeClientLigneCollecte').style.display = 'none'

                        operationEffectue = true

                        chargerTableCdeClientLigneCollecte()
                    }else{

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

        // Modifier une ligne de collecte 
        var ancienneQte

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

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

            $.ajax({

                url : '{{ route("infoLigneCollecte")}}',
                type : 'GET',
                data : { 
                    IDCOMMANDECLIENTLIGNE_COLLECTE : IDCOMMANDECLIENTLIGNE_COLLECTE
                },
                beforeSend : progressHandler(),
                dataType : 'json',
                success : function(response){
                    
                    if (response.success == 1) {

                        _('IDCOMMANDECLIENTLIGNE_COLLECTE').value = IDCOMMANDECLIENTLIGNE_COLLECTE
                        $('#IDSTOCKAGENCE_LOTS').val(response.data.IDSTOCKAGENCE_LOTS).change()
                        _('QteCollectee').value = response.data.QteCollectee
                        _('QteCollectee').select()
                        ancienneQte = response.data.QteCollectee

                        _('btnnewCdeClientLigneCollecteCollecte').style.display = 'none'
                        _('btnModifCdeClientLigneCollecte').style.display = ''

                        if(true != '{{ in_array('DV_ModifLotCollecteCdeCli', session('LISTE_DROIT_ACCESS')) }}'){
                            
                            $('#IDSTOCKAGENCE_LOTS').prop('disabled', true);
                        }

                        completeHandler()
                    }
                }
            })
        })

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

            if (_('IDSTOCKAGENCE_LOTS').value == 0) {
                
                notif('danger', 'Erreur', 'Veuillez sélectionner un lot valide')
                return 0
            }

            if (_('QteCollectee').value <= 0 || _('QteCollectee').value.replace(/\s/g, '') == '') {
                
                notif('danger', 'Erreur', 'Veuillez saisir une quantité valide')
                return 0
            }

            if (_('QteCollectee').value > annulerFormatNumerique(_('QuantiteAPreparer').innerHTML) -  annulerFormatNumerique(_('libQteTotalCollecte').innerHTML) + ancienneQte) {
                
                notif('danger', 'Erreur', 'Impossible de collecter une quantité supérieure à la quantité préparée')
                return 0
            }

            let formCdeClientLigneCollecte = new FormData(_('formCdeClientLigneCollecte'))

            formCdeClientLigneCollecte.append('IDSTOCKAGENCE_LOTS', $('#IDSTOCKAGENCE_LOTS').val())
            formCdeClientLigneCollecte.append('_token', '{{ csrf_token() }}')

            $.ajax({

                url : '{{ route("editLigneCollecte")}}',
                type : 'POST',
                data : formCdeClientLigneCollecte,
                beforeSend : progressHandler(),
                processData: false,
                contentType: false,
                dataType : 'json',
                success : function(response){
                    
                    if (response.success == 1) {
                        
                        _('IDCOMMANDECLIENTLIGNE_COLLECTE').value = ''
                        $('#IDSTOCKAGENCE_LOTS').val(0).change()
                        _('IDTracabiliteStock').value = ''
                        _('QteCollectee').value = 0

                        notif('success', 'Succès', 'Modification éffectuée')

                        operationEffectue = true
                        $('#IDSTOCKAGENCE_LOTS').prop('disabled', false);
                        chargerTableCdeClientLigneCollecte()
                    }else{

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

        // Supprimer une ligne de collecte
        $(document).on('click', '#deleteLigneCollecte', function(){

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

            Swal.fire({

                title: 'Êtes-vous sûrs ?',
                text: "De vouloir supprimer cette ligne !",
                icon: 'warning',
                showCancelButton: true,
                customClass: {
                    confirmButton: 'btn btn-danger ms-2'
                },
                cancelButtonColor: '#d33',
                confirmButtonText: 'Oui',
                cancelButtonText: 'Non'

            }).then((result) => {

                if (result.isConfirmed) {

                    $.ajax({

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

                            IDCOMMANDECLIENTLIGNE_COLLECTE: IDCOMMANDECLIENTLIGNE_COLLECTE,
                            _token: '{{ csrf_token() }}'
                        },
                        dataType: 'json',
                        success: function(response) {

                            if (response.success == 1) {

                                _('IDCOMMANDECLIENTLIGNE_COLLECTE').value = ''
                                $('#IDSTOCKAGENCE_LOTS').val(0).change()
                                _('QteCollectee').value = 0
                                ancienneQte = null

                                _('btnnewCdeClientLigneCollecteCollecte').style.display = ''
                                _('btnModifCdeClientLigneCollecte').style.display = 'none'
                                
                                operationEffectue = true
                                chargerTableCdeClientLigneCollecte()
                                notif('success', 'Succès', 'Suppression éffectuée')
                            }else{

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

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


            if (operationEffectue == false) {
                
                $('#modalSaisieCollecte').modal('hide')
            }else{

                notif('warning', 'Attention', 'Veuillez confirmer les opérations effectuées avant de fermer la modale')
            }
        })

        // Validation des opérations éffectuées
        _('validerCollecte').addEventListener('click', function(){

            if (operationEffectue == true) {
                
                $.ajax({

                    url : '{{ route("validerCollecte")}}',
                    type : 'POST',
                    data : {
                        IDBONPREPARATION_LIGNE : IDBONPREPARATION_LIGNE,
                        // IDCOMMANDECLIENTLIGNE : IDCOMMANDECLIENTLIGNE,
                        QuantiteAPreparer : _('QuantiteAPreparer').innerHTML,
                        QuantitePreparee : annulerFormatNumerique(_('libQteTotalCollecte').innerHTML),
                        QuantiteUGaCollecter : _('QuantiteUGaCollecter').innerHTML,
                        _token : '{{ csrf_token() }}'
                    },
                    beforeSend : progressHandler(),
                    dataType : 'json',
                    success : function(response){
                        
                        if (response.success == 1) {

                            chargerTableBonPrepaLigne()
                            completeHandler()
                            operationEffectue = false
                            $('#IDSTOCKAGENCE_LOTS').prop('disabled', false);
                            $('#modalSaisieCollecte').modal('hide')
                        }else{

                            notifError(response.msg)
                        }
                    }
                })
            }else{

                $('#modalSaisieCollecte').modal('hide')
            }
        })

        // Script affectation de BAC
        function affectionBacs(Liste_IDCOMMANDECLIENTLIGNE_COLLECTE, IDBAC){

            $.ajax({

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

                    IDBAC : IDBAC,
                    Liste_IDCOMMANDECLIENTLIGNE_COLLECTE : Liste_IDCOMMANDECLIENTLIGNE_COLLECTE,
                    _token: '{{ csrf_token() }}'
                },
                beforeSend : progressHandler(),
                dataType : 'json',
                success : function(response){
                    
                    if (response.success == 1) {

                        chargerTableCdeClientLigneCollecte()
                        $('#modalAffecterBac').modal('hide')
                        completeHandler()

                        if (IDBAC != 0) {

                            notif('success', 'Succès', 'Affectation éffectuée')
                        }else {

                            notif('success', 'Succès', 'Retrait éffectuée')
                        }
                    }else{

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

        function ouvertureModalAffecterBac(niveau = 2){

            $.ajax({

                url : '{{ route("chargerSelectBacPourCollecte")}}',
                type : 'GET',
                data : { 
                    IDAGENCE : _('idSiteEnCours').value
                },
                beforeSend : progressHandler(),
                dataType : 'json',
                success : function(response){
                    
                    if (response.success == 1) {

                        $('#IDBAC').html('')
                        $('#IDBAC').append('<option value="0">Sélectionner un bac</option>')

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

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

                        $('#IDBAC').select2({
                            dropdownParent: $("#modalAffecterBac")
                        })

                        $('#modalAffecterBac').modal('show')

                        if (niveau == 2) {
                            
                            _('validerAffectationLigneBon').style.display = 'none'
                            _('validerAffectation').style.display = ''
                        }else{

                            _('validerAffectationLigneBon').style.display = ''
                            _('validerAffectation').style.display = 'none'
                        }

                        completeHandler()
                    }else{

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

                    notifError(error.responseText)
                }
            })
        }

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

            modeAffectationBac = 1
            _('IDCOMMANDECLIENTLIGNE_COLLECTE').value = $(this).attr('data-id')
            ouvertureModalAffecterBac()
        })

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

            if (modeAffectationBac == 1) {

                Liste_IDCOMMANDECLIENTLIGNE_COLLECTE = [_('IDCOMMANDECLIENTLIGNE_COLLECTE').value]
            }else{

                Liste_IDCOMMANDECLIENTLIGNE_COLLECTE = listeLigneSelectionne()
            }

            affectionBacs(Liste_IDCOMMANDECLIENTLIGNE_COLLECTE, _('IDBAC').value)
        })

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

            let IDCOMMANDECLIENTLIGNE_COLLECTE = $(this).attr('data-id')
            affectionBacs([IDCOMMANDECLIENTLIGNE_COLLECTE], 0)
        })

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

            let listeLigneCollecte = listeLigneSelectionne()

            if(listeLigneCollecte.length == 0){

                notif('danger', 'Erreur', 'Veuillez sélectionner les ligne à affecter')
                return 0
            }

            modeAffectationBac = 2
            ouvertureModalAffecterBac()
        })
        
        $(document).on('click', '#retraitGlobal', function(){

            let listeLigneSelectionne = listeLigneSelectionne()

            if(listeLigneSelectionne.length == 0){

                notif('danger', 'Erreur', 'Veuillez sélectionner les ligne à affecter')
                return 0
            }

            affectionBacs(listeLigneSelectionne, 0)
        })
    </script>

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

            let value = this.checked

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

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

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

            if (_('checkSelectAll').checked == true) {
                _('checkSelectAll').checked = false
            }
        })
    </script>

    <!-- Script de facturation du bon -->
    <script>

        var tableReglementFacture

        function calculerTotalRegle(){
                                
            let indexColonneMontantFrancCongolais = tableReglementFacture.column('MontantFrancCongolais:name').index();
            let totalMontantFrancCongolais = calculerSommeColonne(tableReglementFacture, 'MontantFrancCongolais')

            return parseFloat(totalMontantFrancCongolais)
        }

        function calculerSolde(){

            let totalTTC = parseFloat($('#libTotalTTCModalValidationFactureGetraco').html().replace(',', '.').replace(/\s/g, ''))
            
            let totalRegle = calculerTotalRegle()

            return totalTTC - totalRegle
        }

        function actualiseSoldeEncaissement(){

            _('divSoldeEncaissement').innerHTML = ''

            $('#divSoldeEncaissement').append('\
                <div style="min-width : 220px;" class="badge bg-primary-transparent fs-14 py-2 d-flex justify-content-between px-2">\
                    <span class="text-dark">Total réglé : </span>\
                    <span id="libRegleModalEncaissementFacture">' + formatNumberPerf(calculerTotalRegle()) + '</span>\
                </div>\
            ')

            dataMonaie.forEach(function(value) {

                let idSpan = (value.MonnaieParDefaut == true) ? 'libSoldeModalValidationFactureGetraco' : '' 
                

                $('#divSoldeEncaissement').append('\
                    <div style="min-width : 220px;"\
                        class="badge bg-danger-transparent fs-14 py-2 d-flex justify-content-between px-2 ms-2">\
                        <span class="text-dark">Solde ( ' + value.SymboleMonnaie + ' ) : </span>\
                        <span id="' + idSpan +'">' + formatNumberPerf(calculerSolde() / value.TauxMonnaieInverse) + '</span>\
                    </div>\
                ')
            })
        }

        function verifAvantFacturation(){

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

                $.ajax({

                    url : '{{ route("verifAvantFacturation")}}',
                    type : 'GET',
                    data : {
                        IDBONPREPARATION : IDBONPREPARATION
                    },
                    beforeSend : progressHandler(),
                    dataType : 'json',
                    success : function(response){
                        
                        if (response.success == 1) {

                            notif('danger', 'Erreur', 'Veuillez contrôler toutes les lignes.')
                        }else if(response.success == 0){

                            notifDanger(response.msg)
                        }else if(response.success == 2){

                            notif('danger', 'Erreur', 'Certaines quantités ne sont pas emballées')
                        }else if(response.success == 3){

                            if (response.ModeGpharma == 2 && CollecteCloture == true) {

                                // _('libNbreBacsGetraco').innerHTML = separateurMilliers(parseFloat(response.nbreBacs))
                                // _('libNbreCartonGetraco').innerHTML = separateurMilliers(parseFloat(response.nbreCartons))
                                // _('libNbreColisGetraco').innerHTML = separateurMilliers(parseFloat(response.infos.nbreBacsTotal))
                                // _('libPoidsTTGetraco').innerHTML = separateurMilliers(parseFloat(response.infos.poidsTT))+' g'
                                // _('libVolumeTTGetraco').innerHTML = separateurMilliers(parseFloat(response.infos.volumeTT, true))+' cm3'

                                @if($ModeGpharma == 2)

                                _('libTtTTCFacP').innerHTML = 'Total TTC facture ({!!listeTauxMonnaie($IDMonnaieParDefaut) -> SymboleMonnaie!!}) : '
                                _('divTTOtherMonnaie').innerHTML = ''

                                dataMonaie.forEach(function(value){

                                    if (value.MonnaieParDefaut == true) {
                                        return
                                    }

                                    $('#divTTOtherMonnaie').append('\
                                        <div class="mb-3 me-3 d-flex justify-content-center">\
                                            Total TTC ('+value.SymboleMonnaie+' ['+ formatNumberPerf(value.TauxMonnaieInverse) +']) :\
                                            <label class="fw-bold ms-2">'+ formatNumberPerf(response.totalTTC / value.TauxMonnaieInverse)+'</label>\
                                        </div>\
                                    ')
                                })

                                @endif

                                dataTableReglementFacture = response.dataReglement

                                $('#libTotalTTCModalValidationFactureGetraco').text(formatNumberPerf(response.totalTTC))
                                
                                $('#modalValidationFactureGetraco').modal('show')                           
                                
                            }else if(response.ModeGpharma == 2 && CollecteCloture == false){

                                let url = '{{ url("/ventes/bon_a_lancer")}}'
                                window.location.href = url
                            }else{

                                _('libNbreBacs').innerHTML = formatNumberPerf(chaineEnNumerique(response.nbreBacs ?? 0))
                                _('libNbreCarton').innerHTML = formatNumberPerf(chaineEnNumerique(response.nbreCartons ?? 0))
                                _('libNbreColis').innerHTML = formatNumberPerf(chaineEnNumerique(response.infos.nbreBacsTotal ?? 0))
                                _('libPoidsTT').innerHTML = formatNumberPerf(chaineEnNumerique(response.infos.poidsTT ?? 0))+' g'
                                _('libVolumeTT').innerHTML = formatNumberPerf(chaineEnNumerique(response.infos.volumeTT ?? 0))+' cm3'

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

                        resolve(response)

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

                        completeHandler()
                        notif('danger', 'Erreur', 'Échec de l\'opération veuillez contacter votre administrateur.')
                    }
                })
            })
        }

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

            if (CollecteCloture == false && ModeGpharma == 2) {
                            
                Swal.fire({

                    title : 'Attention !',
                    text: 'Êtes-vous sûrs de vouloir clôturer ce bon ?',
                    icon: 'warning',
                    showCancelButton: true,
                    customClass: {
                        confirmButton: 'btn btn-success ms-2'
                    },
                    cancelButtonColor: '#d33',
                    confirmButtonText: 'Oui',
                    cancelButtonText: 'Non'

                }).then((result) => {

                    if (result.isConfirmed) {

                        verifAvantFacturation()
                    }
                })
            }else{

                verifAvantFacturation()
            }
        })
    </script>

    <!-- Script de remplissage de la table des rêglements -->
    <script>

        dataTableReglementFacture = []

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

            tableReglementFacture = await remplissageDataTable({
                                    IdentifiantDuTableau : '#tableReglementFacture',
                                    obj : dataTableReglementFacture,
                                    // pageLength : 25,
                                    scrollY : '250px',
                                    lengthChange : false, 
                                    bFilter : false
                                })

            _('formReglement').reset()     
            
            $('#libRegleModalValidationFactureGetraco').text(formatNumberPerf(calculerTotalRegle(), 4))

            // $('#libSoldeModalValidationFactureGetraco').text(formatNumberPerf(calculerSolde(), 4))

            actualiseSoldeEncaissement()

            $('#selIDMODEPAIEMENT').val(ModePaiementParDefaut).trigger('change')
            $('#selIDMONNAIE').val(MonnaieParDefaut).trigger('change')
            
        }) 

        function convertirEnValeurParDefaut(){

            let tauxMonnaie = parseFloat($('#selIDMONNAIE').find('option:selected').attr('data-tauxmonnaie'))

            let MontantRegle = chaineEnNumerique(_('inpMontantRegle').value)

            let MontantRendu = chaineEnNumerique(_('inpMontantRendu').value)

            let totalRegle = parseFloat(MontantRegle - MontantRendu)

            $('#inpValeurRegle').val(totalRegle * tauxMonnaie).trigger('input') 
        }

        _('selIDMONNAIE').addEventListener('change', convertirEnValeurParDefaut)

        _('inpMontantRegle').addEventListener('input', function(){ 
            
            convertirEnValeurParDefaut()
            
            if (chaineEnNumerique(this.value) != 0) {
                
                _('inpMontantRendu').setAttribute('readonly', '')
            }else{

                _('inpMontantRendu').removeAttribute('readonly')
            }
        })

        _('inpMontantRendu').addEventListener('input', function(){ 
            
            convertirEnValeurParDefaut()
            
            if (chaineEnNumerique(this.value) != 0) {
                
                _('inpMontantRegle').setAttribute('readonly', '')
            }else{

                _('inpMontantRegle').removeAttribute('readonly')
            }
        })

        _('formReglement').addEventListener('submit', function(e){

            e.preventDefault()
        })

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

            if (_('selIDMODEPAIEMENT').value == 0) {

                notif('danger', 'Erreur', 'Veuillez sélectionner le mode de paiement.')
                return 0
            }

            if (_('selIDMONNAIE').value == 0) {

                notif('danger', 'Erreur', 'Veuillez sélectionner une devise.')
                return 0
            }

            if (chaineEnNumerique(_('inpValeurRegle').value) == 0) {
                
                notif('danger', 'Erreur', 'Veuillez régler une valeur valide.')
                return 0
            }

            if(_('selIDMODEPAIEMENT').value == ModePaiementMobileMoney && (_('selIDOPERATEURMOBILEMONEY').value == 0 || _('selIDOPERATEURMOBILEMONEY').value == null)){

                notif('danger', 'Erreur', 'Veuillez sélectionner l\'opérateur mobile money pour ce mode de paiement')
                return 0
            }

            IDBANQUE = 0
            NomBanque = ''

            let IDMODEPAIEMENT = _('selIDMODEPAIEMENT').value
            let LibelleModePaiement = afficherOptionSelectionnee('selIDMODEPAIEMENT')

            if(_('selIDMODEPAIEMENT').value == ModePaiementMobileMoney){

                IDBANQUE = _('selIDOPERATEURMOBILEMONEY').value
                LibelleModePaiement += ' ( ' + afficherOptionSelectionnee('selIDOPERATEURMOBILEMONEY') + ' )'
            }

            let index = tableReglementFacture.rows().count()

            let IDMONNAIE = _('selIDMONNAIE').value
            let SymboleMonnaie = afficherOptionSelectionnee('selIDMONNAIE')
            
            let montantFormat = _('inpMontantRegle').value
            let MontantRenduFormat = _('inpMontantRendu').value
            let MontantFrancCongolais = _('inpValeurRegle').value

            let ReferenceReglementClient = _('inpReferenceReglementClient').value

            let newLigne = {

                IDMODEPAIEMENT: IDMODEPAIEMENT,
                IDMONNAIE : IDMONNAIE,
                IDBANQUE : IDBANQUE,
                LibelleModePaiement: LibelleModePaiement,
                SymboleMonnaie: SymboleMonnaie,
                action: '<div class="d-flex justify-content-center">\
                            <button class="btn btn-outline-danger p-1 pt-1 pb-0 align-self-center" id="supLigneReglement"><i class="bx bx-trash" style="font-size : 14px;"></i></button>\
                        </div>',
                montantFormat: montantFormat,
                MontantRenduFormat: MontantRenduFormat,
                MontantFrancCongolais: MontantFrancCongolais,
                ReferenceReglementClient : ReferenceReglementClient
            }

            tableReglementFacture.row.add(newLigne).draw()

            let solde = calculerSolde()

            $('#libRegleModalValidationFactureGetraco').text(formatNumberPerf(calculerTotalRegle()))
            // $('#libSoldeModalValidationFactureGetraco').text(formatNumberPerf(solde))
            actualiseSoldeEncaissement()

            _('formReglement').reset()

            $('#selIDMODEPAIEMENT').val(ModePaiementParDefaut).trigger('change')
            $('#selIDMONNAIE').val(MonnaieParDefaut).trigger('change')
            _('inpMontantRegle').removeAttribute('readonly')
            _('inpMontantRendu').removeAttribute('readonly')

            if(solde < 0){

                $('#inpMontantRendu').val(solde * (-1)).trigger('input')
                $('#inpValeurRegle').val(solde).trigger('input')
                _('inpMontantRegle').setAttribute('readonly', '')
            }

            sendDataSecondEcran()
        })

        $(document).on('keydown', '#modalValidationFactureGetraco', function (e) {
            if (e.key === "Enter" || e.keyCode === 13) {
                e.preventDefault(); 
                $("#btnNewLigne").trigger("click")
            }
        });

        // Suppression de ligne de rêglement 
        $(document).on('click', '#supLigneReglement', function() {

            let ligne = $(this).closest('tr')[0]

            Swal.fire({
                title: 'Êtes-vous sûrs ?',
                text: "De vouloirs retirer cette ligne !",
                icon: 'warning',
                showCancelButton: true,
                confirmButtonText: 'Je confirme !',
                cancelButtonText: 'Non !',
                reverseButtons: true
            }).then((result) => {

                if (result.isConfirmed) {

                    tableReglementFacture.row(ligne).remove();
                    tableReglementFacture.draw();

                    $('#libRegleModalValidationFactureGetraco').text(formatNumber(calculerTotalRegle(), 4))
                    // $('#libSoldeModalValidationFactureGetraco').text(formatNumber(calculerSolde(), 4))
                    actualiseSoldeEncaissement()
                    sendDataSecondEcran()
                }
            })
        })
    </script>

    <!-- Script d'actualisation -->
    <script>

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

            chargerTableBonPrepaLigne()
        })
    </script>

    <!-- Script pour vider les collectes du bon -->
    <script>

        function viderLesCollectesDuBon(){

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

                $.ajax({

                    url : '{{ route("supprimerToutesCollectesDuBon") }}',
                    type : 'POST',
                    data : {
                        IDBONPREPARATION : IDBONPREPARATION,
                        IDAGENCE : _('idSiteEnCours').value,
                        _token : '{{ csrf_token() }}'
                    },
                    beforeSend : progressHandler(),
                    dataType : 'json',
                    success : function(response){

                        if (response.success != 1) {

                            /* Une fenêtre, non un bandeau : le refus nomme la facture déjà
                               établie sur le bon, et l'opérateur doit pouvoir la relever. */
                            afficherRefusMetier(response.msg, 'Suppression refusée')
                        }

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

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

        @if(in_array('DV_ModifLotCollecteCdeCli', session('LISTE_DROIT_ACCESS')))

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

            /* Mot de passe demandé, comme pour toute opération irréversible de cet écran :
               la collecte d'un bon entier se refait à la main. */
            confirmMdp('{{ csrf_token() }}', viderLesCollectesDuBon, null,
                title = 'Effacer toutes les collectes saisies sur ce bon ?',
                data = {
                    sousTitre: 'Les quantités préparées et les contrôles de toutes les lignes repartiront de zéro.',
                    infoJNL: "SUPPRESSION DES COLLECTES D'UN BON DE PREPARATION",
                    typeJNL: 3,
                    CodeDroit: "DV_ModifLotCollecteCdeCli"
                })
                .then((response) => {

                    if (! response || response.success != 1) {

                        return
                    }

                    if (response.nbCollectes > 0) {

                        notif('success', 'Succès', response.nbCollectes + ' collecte(s) effacée(s).')

                    } else {

                        notif('info', 'Information', 'Ce bon ne portait aucune collecte.')
                    }

                    chargerTableBonPrepaLigne()
                })
                .catch(() => {})   // mot de passe abandonné : il n'y a rien à faire
        })

        @endif
    </script>

    <!-- Script pour poursuivre la validation -->
    <script>

        /**
         * Propose d'imprimer la facture qui vient d'être créée, avant de quitter l'écran.
         *
         * Sans nouvelle facture — un bon déjà entièrement facturé auparavant, par exemple —
         * la question ne se pose pas : IDFACTURECLIENT vaut alors 0, et on se contente du
         * message de succès. Le PDF s'ouvre dans un nouvel onglet, ce qui laisse la
         * redirection qui suit se faire sans l'emporter avec elle.
         */
        function proposerImpressionFacture(IDFACTURECLIENT){

            if (!IDFACTURECLIENT || IDFACTURECLIENT == 0) {

                return Swal.fire({
                    icon: 'success',
                    title: 'Succès',
                    text: 'Facturation du bon éffectuée.',
                })
            }

            /* L'onglet est ouvert vide depuis preConfirm, dans le prolongement direct du clic :
               c'est le seul instant où le navigateur accorde l'ouverture. SweetAlert referme
               sa boîte avec une animation avant de résoudre .then(), et l'impression fait
               encore un aller-retour réseau pour charger le PDF — demander l'ouverture à ce
               moment-là la ferait passer pour une popup non sollicitée, bloquée sans un mot.
               L'impression retrouve ensuite cet onglet par son nom et l'amène sur le PDF. */
            const nomFenetreImpression = 'impressionFactureCollecte'

            return Swal.fire({
                icon: 'success',
                title: 'Succès',
                text: 'Facturation du bon éffectuée.',
                showDenyButton: true,
                confirmButtonText: 'Imprimer la facture',
                denyButtonText: 'Continuer',
                reverseButtons: true,
                customClass: {
                    confirmButton: 'btn btn-success ms-2',
                    denyButton: 'btn btn-secondary'
                },
                preConfirm: () => {

                    window.open('', nomFenetreImpression)
                }
            }).then((result) => {

                if (! result.isConfirmed) {

                    return
                }

                /* La même impression que depuis le listing des factures. On attend qu'elle
                   ait rendu la main avant de quitter l'écran : la navigation couperait la
                   requête en cours. Un échec ne doit pas retenir l'opérateur ici — il a déjà
                   été signalé par l'impression elle-même — donc on repart dans les deux cas. */
                return new Promise((resolve) => {

                    const impression = ModeGpharma == 2
                        ? printFactureModel2([IDFACTURECLIENT], false, nomFenetreImpression)
                        : printFacture([IDFACTURECLIENT], nomFenetreImpression)

                    if (impression && typeof impression.always === 'function') {

                        impression.always(resolve)

                    } else {

                        resolve()
                    }
                })
            })
        }

        function poursuivreLaValidation(){

            $.ajax({
                url : '{{ route("facturerBonCollecte")}}',
                type : 'POST',
                data : {
                    IDBONPREPARATION : IDBONPREPARATION,
                    IDAGENCE : _('idSiteEnCours').value,
                    _token : '{{ csrf_token() }}'
                },
                beforeSend : progressHandler(),
                dataType : 'json',
                success : function(response){

                    if (response.success == 1) {

                        proposerImpressionFacture(response.IDFACTURECLIENT)
                        .then(() => {

                            let url = '{{ url("/ventes/bon_a_lancer")}}'
                            window.location.href = url
                        })

                    }else{

                        /* Une fenêtre, non un bandeau : un refus de facturation peut nommer
                           plusieurs articles sur-collectés, et l'opérateur doit avoir le temps
                           de tous les relever pour corriger sa collecte. */
                        afficherRefusMetier(response.msg, 'Facturation refusée')
                    }
                    
                    completeHandler()
                },
                error : function(error){

                    notifError(error)
                    completeHandler()
                }
            })
        }

        function poursuivreLaValidationGETRACO(){

            $.ajax({
                url : '{{ route("facturerBonCollecteGETRACO")}}',
                type : 'POST',
                data : {
                    IDBONPREPARATION : IDBONPREPARATION,
                    tableLigne : JSON.stringify(tableReglementFacture.rows().data().toArray()),
                    IDAGENCE : _('idSiteEnCours').value,
                    _token : '{{ csrf_token() }}'
                },
                beforeSend : progressHandler(),
                dataType : 'json',
                success : function(response){

                    if (response.success == 1) {

                        proposerImpressionFacture(response.IDFACTURECLIENT)
                        .then(() => {

                            sendDataSecondEcran()
                            let url = '{{ url("/ventes/bon_a_lancer")}}'
                            window.location.href = url
                        })

                    }else{

                        afficherRefusMetier(response.msg, 'Facturation refusée')
                    }

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

                    notifError(error)
                    completeHandler()
                }
            })
        }

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

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

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

            if (parseFloat($('#libSoldeModalValidationFactureGetraco').text().replace(/\s/g, '')) > 0) {

                @if(in_array('DV_PeutFacturerSansEncaisser', session('LISTE_DROIT_ACCESS')))

                    facturerSansSolderEncaissement()
                    return 0
                @endif
                
                notif('danger', 'Erreur', 'Veuillez régler la totalité de la facture.')
                return 0
            }

            if (chaineEnNumerique($('#libSoldeModalValidationFactureGetraco').text()) < 0) {

                if (chaineEnNumerique($('#libSoldeModalValidationFactureGetraco').text()) < -500) {
                    
                    notifDanger( 'Attention il est impossible de d\'enregistrer plus de 500 en non rendu.')
                    return 0
                }
                
                Swal.fire({

                    title: 'Voulez-vous enregistrer la différence en non-rendu ?',
                    text: "Le total encaissé est supérieur au montant de la facture",
                    icon: 'warning',
                    showCancelButton: true,
                    customClass: {
                        confirmButton: 'btn btn-danger ms-2'
                    },
                    cancelButtonColor: '#d33',
                    confirmButtonText: 'Oui',
                    cancelButtonText: 'Non'

                }).then((result) => {

                    if (result.isConfirmed) {

                        let index = tableReglementFacture.rows().count()

                        newLigne = {

                            IDMODEPAIEMENT: 1,
                            IDMONNAIE : MonnaieParDefaut,
                            LibelleModePaiement: 'NON RENDU',
                            IDBANQUE : 0,
                            SymboleMonnaie: '',
                            action: '<div class="d-flex justify-content-center">\
                                                    <button class="btn btn-outline-danger p-1 pt-1 pb-0 align-self-center" data-id="' +
                                                        index + '" id="supLigneReglement"><i class="bx bx-trash" style="font-size : 14px;"></i></button>\
                                            </div>',
                            montantFormat: 0,
                            MontantRenduFormat: formatNumberPerf(chaineEnNumerique($('#libSoldeModalValidationFactureGetraco').text())),
                            MontantFrancCongolais: $('#libSoldeModalValidationFactureGetraco').text(),
                            nonRendu : 1,
                            ReferenceReglementClient : 'NON RENDU'
                        }

                        tableReglementFacture.row.add(newLigne).draw()

                        let solde = calculerSolde()

                        $('#libRegleModalValidationFactureGetraco').text(formatNumber(calculerTotalRegle(), 4).replace('.', ','))
                        // $('#libSoldeModalValidationFactureGetraco').text(formatNumber(solde, 4).replace('.', ','))
                        actualiseSoldeEncaissement()

                        _('formReglement').reset()

                        $('#selIDMODEPAIEMENT').val(ModePaiementParDefaut).trigger('change')
                        $('#selIDMONNAIE').val(MonnaieParDefaut).trigger('change')

                        // if(solde < 0){

                        //     $('#inpMontantRendu').val(solde * (-1)).trigger('input')
                        //     $('#inpValeurRegle').val(solde).trigger('input')
                        // }

                        return 0

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

                return 0
            }

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

        function facturerSansSolderEncaissement(){

            confirmMdp( '{{ csrf_token() }}', poursuivreLaValidationGETRACO, null, title = 'Êtes-vous sûrs de vouloir enregistrer cette facture sans l\'encaisser totalement ?', data = { sousTitre: '', infoJNL: "FACTURER SANS SOLDER", typeJNL: 3, CodeDroit: "DV_PeutFacturerSansEncaisser" })
        }
    </script>

@endsection