@extends('models')
@section('titre-page', 'Escompte')
@section('content-body')
    <!-- Start::app-content -->

    <style>
        .height-input {
            height: 2.5rem !important;
        }
    </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-4 col-lg-4 col-md-4 mt-2">
                    <nav>
                        <ol class="breadcrumb mb-0">
                            <li class="breadcrumb-item text-light"><a href="javascript:void(0);">Comptabilitée</a></li>
                            <li class="breadcrumb-item active" aria-current="page">Escompte</li>
                        </ol>
                    </nav>
                </div>

                <div class="col-xl-8 col-lg-8 col-md-8">
                    <div class="row">
                        <div class="col-xl-4 col-lg-4 col-sm-4 mx-0">
                            <button type="button" class="btn btn-primary-light w-100 ellipsis" data-bs-toggle="tooltip" data-bs-custom-class="tooltip-primary" data-bs-placement="top" id="bntModalCalculEscompte">
                                <i style="font-size:18px;" class=" bx bx-cog me-1"></i>Calculer ESCOMPTES
                            </button>
                        </div>
                        <div class="col-xl-4 col-lg-4 col-sm-4 col-4 mx-0 px-0">
                            <button type="button" class="btn btn-warning-light dropdown-toggle d-flex justify-content-center w-100"
                                data-bs-toggle="dropdown" data-bs-auto-close="inside" aria-expanded="false">
                                <i class='bx bx-printer fs-22 me-2'></i>
                                Imprimer
                            </button>
                            <ul class="dropdown-menu">
                                <li>
                                    <a class="dropdown-item" href="javascript:void(0);" id="btnPrintBordereauRistClient">
                                        Bordereaux d'Escompte par Client
                                    </a>
                                </li>
                                <li>
                                    <hr class="dropdown-divider">
                                </li>
                                <li>
                                    <a class="dropdown-item" href="javascript:void(0);" id="btnPrintLignesEscompteSelect">
                                        Ligne(s) d'Escompte sélectionnée(s)
                                    </a>
                                </li>
                            </ul>
                        </div>
                        <div class="col-xl-4 col-lg-4 col-sm-4 col-4">
                            <div class="btn-group float-xl-end w-100" style="margin-top : 1px;">
                                <button type="button" class="btn btn-primary-light dropdown-toggle w-100"
                                    data-bs-toggle="dropdown" aria-expanded="false">
                                    Autres actions
                                </button>
                                <ul class="dropdown-menu">
                                    <li id="btnModalModifierQuinzaine">
                                        <a class="dropdown-item" href="javascript:void(0);">
                                            Modifier la quinzaine
                                        </a>
                                    </li>
                                    <li>
                                        <hr class="dropdown-divider">
                                    </li>
                                    <li id="btnImprimFacture">
                                        <a class="dropdown-item" href="javascript:void(0);">
                                            Imprimer facture
                                        </a>
                                    </li>
                                    <li>
                                        <hr class="dropdown-divider">
                                    </li>
                                    <li id="btnImprimerEtiquette">
                                        <a class="dropdown-item" href="javascript:void(0);">
                                            Imprimer étiquette
                                        </a>
                                    </li>
                                    <li>
                                        <hr class="dropdown-divider">
                                    </li>
                                    <li id="btnExporterListeFacture">
                                        <a class="dropdown-item" href="javascript:void(0);">
                                            Exporter la liste des factures
                                        </a>
                                    </li>
                                    <li>
                                        <hr class="dropdown-divider">
                                    </li>
                                    <li id="btnExporterFacturesSelect">
                                        <a class="dropdown-item" href="javascript:void(0);">
                                            Exporter les factures sélectionnées
                                        </a>
                                    </li>

                                </ul>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- Page Header Close -->

    <!-- Start:: row-7 -->
    <div class="row">
        <div class="col-xl-2 d-flex">
            <div class="card custom-card border-top-card border-top-light rounded-0 flex-fill">
                <div class="card-body px-0 py-2">
                    <div class="text-center">
                        <p class="fs-12 text-muted mb-1">Nbre de Clients</p>
                        <div class="d-flex align-items-center justify-content-center flex-wrap">
                            <h6 class="mb-0 fw-semibold" id="libNbreClient">0</h6>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-xl-2 d-flex">
            <div class="card custom-card border-top-card border-top-info rounded-0 flex-fill">
                <div class="card-body px-0 py-2">
                    <div class="text-center">
                        <p class="fs-12 text-muted mb-1">Total CA HT NET</p>
                        <div class="d-flex align-items-center justify-content-center flex-wrap">
                            <h6 class="mb-0 fw-semibold" id="libTotalCAHTNET">0</h6>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-xl-2 d-flex">
            <div class="card custom-card border-top-card border-top-info rounded-0 flex-fill">
                <div class="card-body px-0 py-2">
                    <div class="text-center">
                        <p class="fs-12 text-muted mb-1">Total CA HT NET (Soumis à escompte)</p>
                        <div class="d-flex align-items-center justify-content-center flex-wrap">
                            <h6 class="mb-0 fw-semibold" id="libTotalCAHTNET_ESCOMPTE">0</h6>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-xl-2 d-flex">
            <div class="card custom-card border-top-card border-top-warning rounded-0 flex-fill">
                <div class="card-body px-0 py-2 px-1">
                    <div class="text-center">
                        <p class="fs-12 text-muted mb-1">Montant Total Escompte</p>
                        <div class="d-flex align-items-center justify-content-center flex-wrap">
                            <h6 class="mb-0 fw-semibold" id="libTxEscompte">0</h6>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-xl-2 d-flex">
            <div class="card custom-card border-top-card border-top-danger rounded-0 flex-fill">
                <div class="card-body px-0 py-2">
                    <div class="text-center">
                        <p class="fs-12 text-muted mb-1">% Escompte / CA soumis à l'escompte</p>
                        <div class="d-flex align-items-center justify-content-center flex-wrap">
                            <h6 class="mb-0 fw-semibold" id="libTxEscompte_CAsoumis">0</h6>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-xl-2 d-flex">
            <div class="card custom-card border-top-card border-top-primary rounded-0 flex-fill">
                <div class="card-body px-0 py-2">
                    <div class="text-center">
                        <p class="fs-12 text-muted mb-1">% Escompte / CA HT NET</p>
                        <div class="d-flex align-items-center justify-content-center flex-wrap">
                            <h6 class="mb-0 fw-semibold" id="libTxEscompte_CAHTNET">0</h6>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- End:: row-7 -->

    <div class="row">
        <div class="col-xl-12">
            <div class="card custom-card">
                <div class="card-header pe-0 pe-0">
                    <form id="formFiltre" class="w-100">
                        <div class="row w-100">                    
                            <div class="col-xl-3 col-md-3 mb-2">
                                <p class="mb-0 text-muted">Site&nbsp;:</p>
                                <select name="IDAGENCE" id="IDAGENCE" class="form-select" name="IDAGENCE"  @disabled(checkIfDroit('DG_AccesMultiSite'))>

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

                                </select>
                            </div>
                            <div class="col-xl-1 col-md-1 mb-0 pt-1">
                                <button type="button" class="btn btn-primary btn-wave mt-2  float-end" id="btnFiltreTable">
                                    <i class="ri-search-line" style="font-size:13px; cursor:pointer;"></i>
                                </button>
                            </div>
                        </div>
                    </form>
                </div>
                <div class="card-body">
                    <div class="table-responsive">
                        <table class="tablehover table table-striped text-nowrap overflow-auto" id="tableEscompte">
                            <thead class="table-header-primary">
                                <tr>
                                    <th data-column="action" data-orderable="false">
                                        <input class="form-check-input me-4" type="checkbox" id="checkSelectAll">
                                        Actions
                                    </th>
                                    <th data-column="NumeroReleveClientFormat" data-class="text-center" class="text-center colTable">N° Relevé</th>
                                    <th data-column="NomClient" class="text-center colTable">Client</th>
                                    <th data-column="IntentionCommande" data-class="text-center" class="text-center colTable">Intention<br>Commande</th>
                                    <th data-column="NumeroCompteTiers" class="text-center colTable">N° compte tiers</th>
                                    <th data-column="NumeroCompteTiersEscompte" class="text-center colTable">N° compte tiers Escompte</th>
                                    <th data-column="DateReleveClientFormat" data-class="text-center" class="text-center colTable">Date du Relevé</th>
                                    <th data-column="DateComptableEscompteFormat" data-class="text-center" class="text-center colTable">Date comptable</th>
                                    <th data-column="LibelleQuinzaine" data-class="text-center" class="text-center colTable">Quinzaine</th>
                                    <th data-column="DateReglementClientFormat" data-class="text-center" class="text-center colTable">Date de Saisie<br>Règlement</th>
                                    <th data-column="DateEcheanceReglementFormat" data-class="text-center" class="text-center colTable">Date de Valeur<br>Règlement</th>
                                    <th data-column="delai" data-class="text-center" class="text-center colTable">Délai (Jour)</th>
                                    <th data-column="LibelleModePaiement" class="text-center colTable">Mode paiement</th>
                                    <th data-column="TotalHTNetReleveFormat" data-class="text-end pe-3" class="text-center colTable">Montant HT Relevé</th>
                                    <th data-column="TotalTTCReleveClientFormat" data-class="text-end pe-3" class="text-center colTable">Montant Relevé</th>
                                    <th data-column="MontantRegleSurReleveFormat" data-class="text-end pe-3" class="text-center colTable">Montant Réglé</th>
                                    <th data-column="TauxEscompteClientFormat" data-class="text-center" class="text-center colTable">Taux</th>
                                    <th data-column="MontantEscompteCliFormat" data-class="text-end pe-3" class="text-center colTable">Montant Escompte</th>
                                    <th data-column="CodeClient" class="text-center colTable">Code Client</th>
                                </tr>
                            </thead>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- End::app-content -->

    {{-- Section modal --}}
    <!-- Modal calcul escompte -->
    <div class="modal fade" id="modalCalculEscompte" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel" aria-hidden="true" data-bs-focus="false">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h6 class="modal-title" id="titleModal">Générer les ESCOMPTES client</h6>
                    <button type="button" class="btn-close  bg-light" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <form id="formModalCalculEscompte">
                        <div class="row">
                            <div class="col-md-4 mb-2">
                                <p class="text-muted mb-0">Mois :</p>
                                <select name="mois" id="mois" class="form-select">
                                    <option value="01">JANVIER</option>
                                    <option value="02">FEVRIER</option>
                                    <option value="03">MARS</option>
                                    <option value="04">AVRIL</option>
                                    <option value="05">MAI</option>
                                    <option value="06">JUIN</option>
                                    <option value="07">JUILLET</option>
                                    <option value="08">AOUT</option>
                                    <option value="09">SEPTEMBRE</option>
                                    <option value="10">OCTOBRE</option>
                                    <option value="11">NOVEMBRE</option>
                                    <option value="12">DECEMBRE</option>
                                </select>
                            </div>
                            <div class="col-md-4 mb-2">
                                <p class="text-muted mb-0">Année</p>
                                <select id="AnneeSelect" name="AnneeSelect" class="form-select">
                                    @php
                                        $annee = date('Y');

                                        for($i = $annee - 5; $i <= $annee; $i ++){
                                    @endphp

                                            <option value="{{ $i }}" >{{ $i }}</option>
                                    @php
                                        }
                                    @endphp
                                </select>
                            </div>
                            <div class="col-md-4 mb-2">
                                <p class="text-muted mb-0">Date comptable :</p>
                                <input type="date" class="form-control" id="DateComptableEscompte" name="DateComptableEscompte">
                            </div>
                            <div class="col-md-12 mb-2">
                                <p class="text-muted mb-0">Client :</p>
                                <select name="IDCLIENT" id="inpIDCLIENTCalculEscompte"></select>
                            </div>
                        </div>
                    </form>
                </div>
                <div class="modal-footer p-0">
                    <label
                        class="btn btn-success-light btn-wave w-100 flex-fill d-flex justify-content-center align-items-center mt-2"
                        id="btnValiderCalculEscompte">
                        <i class='bx bxs-check-circle mt-1 me-1' style="cursor:pointer;"></i> Valider
                    </label>
                </div>
            </div>
        </div>
    </div>

    <!-- Modal de modification de paiement -->
    <div class="modal fade" id="modalModifPaieEscompte" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel" aria-hidden="true" data-bs-focus="false">
        <div class="modal-dialog modal-md">
            <div class="modal-content">
                <div class="modal-header">
                    <h6 class="modal-title" id="titleModal">Éffectuer ou modifier un paiement de Ristourne</h6>
                    <button type="button" class="btn-close  bg-light" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">

                    <div class="row mb-3">
                        <div class="card monShadow rounded-0 mb-3">
                            <div class="card-body rounded-0 w-100">
                                <div class="row">
                                    <div class="col-md-4 mb-2">
                                        <p class="text-muted mb-0 me-2">Date relevé :</p>
                                        <div class="card py-0 mb-0">
                                            <div class="card-body d-flex justify-content-center align-items-center" style="height : 30px;">
                                                <label id="libModalModifPaieEscDateReleveClientFormat"></label>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-md-4 mb-2">
                                        <p class="text-muted mb-0 me-2">Quinzaine :</p>
                                        <div class="card py-0 mb-0">
                                            <div class="card-body d-flex justify-content-center align-items-center" style="height : 30px;">
                                                <label id="libModalModifPaieEscLibelleQuinzaine"></label>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-md-4 mb-2">
                                        <p class="text-muted mb-0 me-2">N° Relevé :</p>
                                        <div class="card py-0 mb-0">
                                            <div class="card-body d-flex justify-content-center align-items-center" style="height : 30px;">
                                                <label id="libModalModifPaieEscNumeroReleveClient"></label>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-md-12 mb-2">
                                        <p class="text-muted mb-0 me-2">Client :</p>
                                        <div class="card py-0 mb-0">
                                            <div class="card-body d-flex justify-content-center align-items-center" style="height : 30px;">
                                                <label id="libModalModifPaieEscNomClient"></label>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-md-4 mb-2">
                                        <p class="text-muted mb-0 me-2">Montant relevé :</p>
                                        <div class="card py-0 mb-0">
                                            <div class="card-body d-flex justify-content-center align-items-center" style="height : 30px;">
                                                <label id="libModalModifPaieEscTotalTTCReleveClientFormat"></label>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-md-4 mb-2">
                                        <p class="text-muted mb-0 me-2">Taux Escompte :</p>
                                        <div class="card py-0 mb-0">
                                            <div class="card-body d-flex justify-content-center align-items-center" style="height : 30px;">
                                                <label id="libModalModifPaieEscTauxEscompteClientFormat"></label>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-md-4 mb-2">
                                        <p class="text-muted mb-0 me-2">Montant :</p>
                                        <div class="card py-0 mb-0">
                                            <div class="card-body d-flex justify-content-center align-items-center" style="height : 30px;">
                                                <label id="libModalModifPaieEscMontantEscompteCliFormat"></label>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <form id="formModalModifPaieEsc">
                        <div class="row">
                            <input type="number" name="IDRELEVECLIENT_REGLE" id="IDRELEVECLIENT_REGLEModalModifPaieEsc" style="display:none;">
                            <input type="number" name="IDCLIENT" id="IDCLIENTModalModifPaieEsc" style="display:none;">
                            <input type="number" name="IDPAIEMENT_ESCOMPTE_RISTOURNE" id="IDPAIEMENT_ESCOMPTE_RISTOURNEModalModifPaieEsc" style="display:none;">
                            <input type="number" name="MontantEscompteCli" id="MontantEscompteCliModalModifPaieEsc" style="display:none;">
                            <div class="col-md-6 mb-2">
                                <p class="text-muted mb-0">Date de paiement</p>
                                <input type="date" class="form-control" name="DatePaiementER" id="DatePaiementER">
                            </div>
                            <div class="col-md-6 mb-2">
                                <p class="text-muted mb-0">Mode de paiement</p>
                                <select class="form-select" name="IDMODEPAIEMENT" id="IDMODEPAIEMENTModalModifPaieEsc"></select>
                            </div>
                            <div class="col-md-4 mb-2">
                                <p class="text-muted mb-0">Compte</p>
                                <select name="IDCompteBanque" id="IDCompteBanque" class="form-select"></select>
                            </div>
                            <div class="col-md-8 mb-2">
                                <p class="text-muted mb-0">N° Pièce</p>
                                <input type="text" class="form-control" name="ReferenceDocumentPaiement" id="ReferenceDocumentPaiement">
                            </div>
                        </div>
                    </form>
                </div>
                <div class="modal-footer p-0">
                    <label
                        class="btn btn-success-light btn-wave w-100 flex-fill d-flex justify-content-center align-items-center mt-2"
                        id="btnValiderModifPaieEsc">
                        <i class='bx bxs-check-circle mt-1 me-1' style="cursor:pointer;"></i> Valider
                    </label>
                </div>
            </div>
        </div>
    </div>

    <!-- Modal MODIFIER date comptable -->
    <div class="modal fade" id="modalModifDateComptable" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel" aria-hidden="true" data-bs-focus="false">
        <div class="modal-dialog modal-sm">
            <div class="modal-content">
                <div class="modal-header">
                    <h6 class="modal-title" id="titleModal">Modification date comptable</h6>
                    <button type="button" class="btn-close  bg-light" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <div class="w-100">
                        <p class="text-muted mb-0">Nouvelle date comptable</p>
                        <input type="date" class="form-control" name="DateComp" id="DateComp">
                    </div>
                </div>
                <div class="modal-footer p-0">
                    <label
                        class="btn btn-success-light btn-wave w-100 flex-fill d-flex justify-content-center align-items-center mt-2"
                        id="btnValiderNewDateComptable">
                        <i class='bx bxs-check-circle mt-1 me-1' style="cursor:pointer;"></i> Valider
                    </label>
                </div>
            </div>
        </div>
    </div>

@endsection

@section('script')

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

        var tableEscompte

        // liste des colones masquables de la table liste des clients
        listeColonnes = $('.colTable')

        function fnShowHide(iCol) {
            /* Get the DataTables object again - this is not a recreation, just a get of the object */
            var oTable = $('#tableFactureClient').dataTable();

            var bVis = oTable.fnSettings().aoColumns[iCol].bVisible;
            oTable.fnSetColumnVis(iCol, bVis ? false : true);
        }

        $(function() {
            dateRangeInput('input[name="datetimes"]', true, "DD/MM/YYYY")
            // $('input[name="datetimes"]').daterangepicker({
            //     timePicker: true,
            //     // startDate: moment().startOf('day'),
            //     // endDate: moment().endOf('day'),
            //     "locale": {
            //         "format": "DD/MM/YYYY",
            //         "separator": " - ",
            //         "applyLabel": "Appliquer",
            //         "cancelLabel": "Annuler",
            //         "fromLabel": "From",
            //         "toLabel": "To",
            //         "customRangeLabel": "Custom",
            //         "weekLabel": "W",
            //         "daysOfWeek": [
            //             "Dim",
            //             "Lun",
            //             "Mar",
            //             "Mer",
            //             "Jeu",
            //             "Ven",
            //             "Sam"
            //         ],
            //         "firstDay": 2
            //     },
            // });
        })
        
        $(document).on('click', '.showCol', function() {

            fnShowHide($(this).attr('valeur'))
        })

        function chargerSelectAgence(valeur) {

            listingComboAgence('#IDAGENCE').then((result) => {
                console.log(result);
                
                if(valeur){
                    $('#IDAGENCE').val(valeur).trigger('change')
                }else{
                    $('#IDAGENCE').val($("#idSiteEnCours").val()).trigger('change')
                }

            });

        }

        function chargerSelectClient(valeur) {

            listingComboClient('#IDCLIENT', labelFirstOption = 'TOUS LES CLIENTS')
                .then((response) => {

                    let data = response

                    data.unshift({
                        IDCLIENT : 0,
                        NomClient : 'TOUS LES CLIENTS'
                    })

                    populateSelect('#inpIDCLIENTCalculEscompte', {
                        data : data,
                        valueKey : 'IDCLIENT',
                        textKey : 'NomClient'
                    })

                    $('#inpIDCLIENTCalculEscompte').select2({
                        dropdownParent : $('#modalCalculEscompte')
                    })
                })

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

        function listeLigneSelectionne() {

            let data = []

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

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

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

        function chargerTableEscompte(){

            $.ajax({

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

                    if (response.success == 1) {

                        let obj = response.data

                        _('libNbreClient').innerHTML = formatNumber(response.nbreClient, 4)
                        _('libTotalCAHTNET').innerHTML = formatNumber(response.TxCA_HT_NET, 4)
                        _('libTotalCAHTNET_ESCOMPTE').innerHTML = formatNumber(response.TxCA_HT_NET_ESCOMPTE, 4)
                        _('libTxEscompte').innerHTML = formatNumber(response.TxEscompte, 4)
                        _('libTxEscompte_CAsoumis').innerHTML = formatNumber(response.TxEscompte_CAsoumis, 2)+' %'
                        _('libTxEscompte_CAHTNET').innerHTML = formatNumber(response.TxEscompte_CAHTNET, 2)+' %'
                        
                        tableEscompte = remplissageDataTable({
                            IdentifiantDuTableau : '#tableEscompte',
                            obj : obj,
                            pageLength : 25
                        })

                         let divShowPer = $('#tableEscompte_filter')
                            let BroDivShowPer = divShowPer.parent().parent()
                            let child = BroDivShowPer.children().eq(0)
                            let child2 = BroDivShowPer.children().eq(1)

                            child2.removeClass('col-md-6')
                            child2.addClass('col-md-4 d-flex  justify-content-end')
                          
                            child.removeClass('col-md-6')
                            child.addClass('d-flex pt-2 col-md-8')
                            child.append(`
                                            <i id="marquerNonComptab" class="bx bx-checkbox-minus text-warning me-1 mt-2" style="font-size : 18px; cursor : pointer;"></i><span id="labelMarquerNonComptab" class="fw-bold mt-2 me-3" style="cursor : pointer;">Marquer non comptabilisé</span>
                                            <i id="editDateComptable" class="bx bx-transfer-alt text-info me-1 mt-2" style="font-size : 18px; cursor : pointer;"></i><span id="labelEditDateComptable" class="fw-bold mt-2 me-3" style="cursor : pointer;">Modifier la date comptable</span>
                                            <i id="suppLignesCochee" class="bx bxs-trash text-danger me-2 mt-2" style="font-size : 18px; cursor : pointer;"></i><span id="labelSuppLignesCochee" class="fw-bold mt-2 me-3" style="cursor : pointer;">Supprimer les lignes cochées</span>

                                         <span class="d-flex align-items-center px-2 mt-1" style="cursor : pointer;">
                                                <i class='ri ri-file-excel-2-line text-success me-1' style="font-size : 18px; cursor : pointer;"></i>
                                                <span id="btn-export-escompte" class="fw-bold" style="cursor : pointer;">Exporter</span>
                                            </span>
                                        `)
        placeboutonPreferenceColonne('tableEscompte', 'tableEscompteShowColonne', 2)

                        completeHandler()
                    } else {

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

recuperationPreferenceColonneUtilisateur('tableEscompte','ListePreShowColonne')
$(document).on('click', '.tableEscompteShowColonne', function() {
   appliquerPreferenceColonne('tableEscompte', 'tableEscompte', $(this),'tableEscompteShowColonne')
})


        recupererValeurSession('filterMemory.filtreEscompte')
            .then((data) => {

                _('filtrePeriode').value = explodeDate(data.debutPeriode, '-') + ' - ' + explodeDate(data.finPeriode, '-')

                chargerSelectAgence(data.IDAGENCE)
                chargerSelectClient(data.IDCLIENT)

                chargerTableEscompte()
            })
    </script>

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

            let value = this.checked

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

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

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

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

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

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

            e.preventDefault()
            _('btnFiltreTable').click()
        })

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

            let session = 'filterMemory.filtreEscompte'

            let Periode = convertirFormatDate2(_('filtrePeriode').value)

            let valeurSession = {

                'IDAGENCE' : _('IDAGENCE').value,
                'debutPeriode' : Periode[0],
                'finPeriode' : Periode[1],
                'IDCLIENT' : _('IDCLIENT').value,
            }

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

                    chargerTableEscompte()
                })
        })
    </script>

    <!-- Script modal calcule d'escompte -->
    <script>

        function selectModeCalculEscompte(){

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

                $.ajax({

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

                        if (response.success != 1) {

                            notifError(response.msg)
                        }

                        resolve(response)

                        completeHandler()
                    },
                    error : function(){

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

        function calculerEscompte(ModeCalculEscompte){

            switch (ModeCalculEscompte) {
                case ModeCalculEscompte = 1:
                    @php
                        $route = 'Escompte_CI';
                    @endphp
                    break;
                case ModeCalculEscompte = 2:
                    @php
                        $route = 'Escompte_ML';
                    @endphp
                    break;
                case ModeCalculEscompte = 3:
                    @php
                        $route = 'Escompte_BF';
                    @endphp
                    break;
                case ModeCalculEscompte = 4:
                    @php
                        $route = 'Escompte_BF_TauxMoinsDistant_New';
                    @endphp
                    break;
                default:
                    @php
                        $route = 'Escompte_CI';
                    @endphp
                    break;
            }

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

                let formModalCalculEscompte = new FormData(_('formModalCalculEscompte'))
                formModalCalculEscompte.append('_token', '{{ csrf_token() }}')

                $.ajax({

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

                        if (response.success != 2) {

                            notifError(response.msg)
                        }

                        resolve(response)

                        completeHandler()
                    },
                    error : function(){

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

        function executerCalcul(){

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

                    if (response.success == 1) {

                        let ModeCalculEscompte = response.data
                        
                        calculerEscompte(ModeCalculEscompte)
                    }
                })
        }

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

            _('DateComptableEscompte').value = '{{ date('Y-m-t', strtotime(date('Y-m-d', strtotime('- 1 month'))))}}'
            $('#inpIDCLIENTCalculEscompte').val(0).trigger('change')
            $('#mois').val("{{ date('m', strtotime('-1 month')) }}").trigger('change');
            $('#AnneeSelect').val("{{ date('Y') }}").trigger('change')

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

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

            // if ($('#inpIDCLIENTCalculEscompte').val() == 0) {
                
            //     notif('danger', 'Erreur', 'Veuillez sélectionner un client SVP !')
            //     return 0
            // }

            if (_('DateComptableEscompte').value == null) {
                
                notif('danger', 'Erreur', 'Veuillez saisir une date valide SVP !')
                return 0
            }

            confirmMdp('{{ csrf_token() }}', executerCalcul, null, title = '', { sousTitre: '', infoJNL: "CALCUL DES ESCOMPTES", typeJNL: 3, CodeDroit: "DC_EscompteArret" })
                .then((response) => {

                    if (response.success == 2) {
                        
                        chargerTableEscompte()
                    }
                })
        })
    </script>

    <!-- Script de modification de paiement d'escompte -->
    <script>

        listingComboModePaiement('#IDMODEPAIEMENTModalModifPaieEsc', true, 'AUCUN MODE')

        listingComboCompte('#IDCompteBanque', true, ' ')

        function infoEscompteClient(IDRELEVECLIENT_REGLE){

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

                $.ajax({

                    url : "{{ route('infoEscompteClient') }}",
                    type : 'GET',
                    data : {
                        IDRELEVECLIENT_REGLE : IDRELEVECLIENT_REGLE
                    },
                    dataType : 'json',
                    beforeSend : progressHandler(),
                    success : function(response){

                        if (response.success != 2) {

                            notifError(response.msg)
                        }

                        resolve(response)

                        completeHandler()
                    },
                    error : function(){

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

        function effectuerModifierPaiementEscompte(){

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

                let formModalModifPaieEsc = new FormData(_('formModalModifPaieEsc'))
                formModalModifPaieEsc.append('_token', '{{ csrf_token() }}')

                $.ajax({

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

                        if (response.success != 1) {

                            notifError(response.msg)
                        }

                        resolve(response)

                        completeHandler()
                    },
                    error : function(){

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

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

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

            _('formModalModifPaieEsc').reset()

            infoEscompteClient(IDRELEVECLIENT_REGLE)
                .then((response) => {

                    if (response.success == 2) {

                        let info = response.info

                        _('libModalModifPaieEscDateReleveClientFormat').innerHTML = info.DateReleveClientFormat
                        _('libModalModifPaieEscLibelleQuinzaine').innerHTML = info.LibelleQuinzaine
                        _('libModalModifPaieEscNumeroReleveClient').innerHTML = info.NumeroReleveClient
                        _('libModalModifPaieEscNomClient').innerHTML = info.NomClient
                        _('libModalModifPaieEscTotalTTCReleveClientFormat').innerHTML = info.TotalTTCReleveClientFormat
                        _('libModalModifPaieEscTauxEscompteClientFormat').innerHTML = info.TauxEscompteClientFormat
                        _('libModalModifPaieEscMontantEscompteCliFormat').innerHTML = info.MontantEscompteCliFormat

                        _('IDCLIENTModalModifPaieEsc').value = info.IDCLIENT
                        _('IDPAIEMENT_ESCOMPTE_RISTOURNEModalModifPaieEsc').value = info.IDPAIEMENT_ESCOMPTE_RISTOURNE
                        _('MontantEscompteCliModalModifPaieEsc').value = info.MontantEscompteCli
                        _('IDRELEVECLIENT_REGLEModalModifPaieEsc').value = info.IDRELEVECLIENT_REGLE

                        if (info.IDPAIEMENT_ESCOMPTE_RISTOURNE != null && info.IDPAIEMENT_ESCOMPTE_RISTOURNE > 0) {
                            
                            remplirChampDate(info.DatePaiementER, 'DatePaiementER');
                            $('#IDMODEPAIEMENTModalModifPaieEsc').val(info.IDMODEPAIEMENT).trigger('change') 
                            $('#IDCompteBanque').val(info.IDCompteBanque).trigger('IDCompteBanque')
                            _('ReferenceDocumentPaiement').value = info.ReferenceDocumentPaiement
                        }else{

                            // Utilisation correcte de 'await' dans une fonction async
                            remplirChampDate('today', 'DatePaiementER');
                        }
                        
                        $('#modalModifPaieEscompte').modal('show')
                    }
                })
        })

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

            if (new Date(_('DatePaiementER').value) > new Date()) {
                
                notif('danger', 'Erreur', 'La date de paiement ne peut être postérieure à la date du jour, SVP !')
                return 0
            }

            if (_('IDMODEPAIEMENTModalModifPaieEsc').value <= 0) {
                
                notif('danger', 'Erreur', 'Veuillez sélectionner un mode de paiement, SVP !')
                return 0
            }

            if (_('IDCompteBanque').value <= 0) {
                
                notif('danger', 'Erreur', 'Veullez sélectionner le compte, SVP !')
                return 0
            }

            confirmMdp('{{ csrf_token() }}', effectuerModifierPaiementEscompte, null, 'Confirmez-vous l\'autorisation ?', { sousTitre: '', infoJNL: "CREATION/MODIFICATION DE PAIEMENT ESCOMPTE CLIENT", typeJNL: 3, CodeDroit: "DC_PaieEscompteRistourne" })
                .then((response) => {

                    if (response.success == 1) {

                        chargerTableEscompte()
                        $('#modalModifPaieEscompte').modal('hide');
                    }
                })
        })
    </script>

    <!-- Script modifier date comptable -->
    <script>

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

            listeDesLignesSelectionne = listeLigneSelectionne()

            if (listeDesLignesSelectionne.length <= 0) {

                notif('danger', 'Erreur', 'Veuillez sélectionnner les lignes à modifier.')
                return 0                
            }

            remplirChampDate('today', 'DateComp');

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

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

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

        function modifierDateComptableEscompte(){

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

                $.ajax({

                    url : "{{ route('modifierDateComptableEscompte') }}",
                    type : 'POST',
                    data : {
                        listeDesLignesSelectionne : listeDesLignesSelectionne,
                        DateComp : _('DateComp').value,
                        _token : '{{ csrf_token() }}'
                    },
                    dataType : 'json',
                    beforeSend : progressHandler(),
                    success : function(response){

                        if (response.success != 1) {

                            notifError(response.msg)
                        }

                        resolve(response)

                        completeHandler()
                    },
                    error : function(){

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

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

            if (listeDesLignesSelectionne.length <= 0) {

                notif('danger', 'Erreur', 'Veuillez sélectionnner les lignes à modifier.')
                return 0                
            }

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

                    if (response.success == 1) {
                        
                        chargerTableEscompte()
                        $('#modalModifDateComptable').modal('hide')
                    }
                })
        })
    </script>

    <!-- Script de marquer nom comptabilisé -->
    <script>

        function marquerEscompteNonCompta(){

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

                $.ajax({

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

                        if (response.success != 1) {

                            notifError(response.msg)
                        }

                        resolve(response)

                        completeHandler()
                    },
                    error : function(){

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

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

            listeDesLignesSelectionne = listeLigneSelectionne()

            if (listeDesLignesSelectionne.length <= 0) {

                notif('danger', 'Erreur', 'Veuillez sélectionnner les lignes à modifier.')
                return 0                
            }

            confirmMdp('{{ csrf_token() }}', marquerEscompteNonCompta, null, 'Confirmez-vous l\'autorisation ?', { sousTitre: '', infoJNL: "CREATION/MODIFICATION DE PAIEMENT DE RISTOURNE CLIENT", typeJNL: 3, CodeDroit: "DC_PaieEscompteRistourne" })
                .then((response) => {

                    if (response.success == 1) {

                        chargerTableEscompte()
                    }
                })
        })

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

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

    </script>

    <!-- Script de suppression de paiement d'escompte -->
    <script>

        var listeDesLignesSelectionne

        function supprimeEscompte(){

            if (listeDesLignesSelectionne.length <= 0) {
                
                notif('danger', 'Erreur', 'Veuillez sélectionner les lignes à supprimer')
                return 0
            }

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

                $.ajax({

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

                        if (response.success != 1) {

                            notifError(response.msg)
                        }

                        resolve(response)

                        completeHandler()
                    },
                    error : function(){

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

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

            listeDesLignesSelectionne = listeLigneSelectionne()

            if (listeDesLignesSelectionne.length <= 0) {
                
                notif('danger', 'Erreur', 'Veuillez sélectionner les lignes à supprimer')
                return 0
            }

            confirmMdp('{{ csrf_token() }}', supprimeEscompte, null, 'Voulez-vous supprimer l\'(es) escompte(s) sélectionné(s) ?', { sousTitre: 'Le(s) ligne(s) d\'escomptes payés ne seront pas supprimée(s).', infoJNL: "SUPPRESSION D'ESCOMPTE CLIENT", typeJNL: 3, CodeDroit: "DG_PeutSuppirmer" })
                .then((response) => {

                    if (response.success == 1) {

                        _('checkSelectAll').checked = false
                        chargerTableEscompte()
                    }
                })
            
        })

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

            _('suppLignesCochee').click()
        })
    </script>

    <!-- Script d'impression bordereau d'escompte client -->
    <script>

        function printBordereauEscompteClient(data){

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

                $.ajax({

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

                        if (response.success == 1) {
                            
                            if (response.tablePDF.length > 0) {

                                response.tablePDF.forEach(function (value) {

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

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

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

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

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

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

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

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

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

            listeDesLignesSelectionne = listeLigneSelectionne()

            if (listeDesLignesSelectionne.length <= 0) {

                notif('danger', 'Erreur', 'Veuillez sélectionnner les ristournes à imprimer.')
                return 0                
            }

            printBordereauEscompteClient(listeDesLignesSelectionne)
        })
    </script>

    <!-- Script d'impression des lignes d'escomptes sélectionnées -->
    <script>

        function printLignesEscompteSelect(data){

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

                $.ajax({

                    url : "{{ route('printLignesEscompteSelect') }}",
                    type : 'POST',
                    data : {
                        data : data,
                        periode : _('filtrePeriode').value.replace('-', 'au'),
                        NomClient : afficherOptionSelectionnee('IDCLIENT'),
                        nbreLigneTT : tableEscompte.rows().count(),
                        _token : '{{ csrf_token() }}'
                    },
                    dataType : 'json',
                    beforeSend : progressHandler(),
                    success : function(response){

                        if (response.success == 1) {
                            
                            if (response.tablePDF.length > 0) {

                                response.tablePDF.forEach(function (value) {

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

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

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

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

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

                            notif('danger', 'Erreur', response.msg)
                        }
                        
                        completeHandler()
                    },
                    error : function(error){

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

        function listeDesIndexes() {
            let indexes = [];

            let lignes = tableEscompte.rows().nodes();

            $.each($(lignes).find('.checkSelectLigne'), function(key, value) {
                if (value.checked == true) {
                    // Récupérer l'index de la ligne
                    let rowIndex = tableEscompte.row($(value).closest('tr')).index();
                    indexes.push(rowIndex);
                }
            });

            return indexes;
        }

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

            let ligneSelectionne = listeDesIndexes()

            let data = []

            if (ligneSelectionne.length == 0) {
                
                notif('danger', 'Erreur', 'Veuillez sélectionner des lignes à imprimer')
                return 0
            }

            ligneSelectionne.forEach(element => {
                
                data.push(tableEscompte.row(element).data())
            });

            printLignesEscompteSelect(data)
        })

        $(document).on('click', '#btn-export-escompte', function(){
            var data = getCleanedTableData('tableEscompte')
            const filename = file_name("ESCOMPTE");
            const tabs_format = { M: '#,##0',N: '#,##0',O: '#,##0',Q: '#,##0'};
            download_excel_file('{{route("export_global_excel.export")}}', data, filename,[],tabs_format)
        })
        
    </script>
@endsection