@php
    
    $listeTauxMonnaie = [];

    $ModeGpharma = DB::table('PARAMETRE') -> select('ModeGpharma') -> first() -> ModeGpharma ?? 1;

    $IDMonnaieParDefaut = 0;

    if($ModeGpharma == 2){

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

<style>
 
    /* ── Champ de saisie ── */
    #numFacture {
        padding-left: 32px;
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%236c757d' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cpath d='m21 21-4.35-4.35'/%3E%3C/svg%3E");
        background-repeat: no-repeat;
        background-position: 10px center;
    }
 
    /* ── Conteneur dropdown ── */
    .ui-autocomplete {
        max-height: 420px;
        min-width: 860px !important;
        overflow-y: auto;
        overflow-x: hidden;
        padding: 0;
        border-radius: 10px !important;
        border: 0.5px solid #dee2e6 !important;
        box-shadow: 0 4px 20px rgba(0, 0, 0, 0.09) !important;
        background: #ffffff;
    }
 
    /* ── En-tête de colonnes ── */
    .ac-col-header {
        display: grid;
        grid-template-columns: 2.5fr 110px 140px 110px 140px 140px;
        gap: 0;
        /* padding: 7px 14px; */
        background: #f8f9fb;
        border-bottom: 0.5px solid #dee2e6;
        font-size: 11px;
        font-weight: 500;
        color: #6c757d;
        text-transform: uppercase;
        letter-spacing: 0.05em;
        position: sticky;
        top: 0;
        z-index: 10;
        padding: 7px 18px;
    }
 
    .ac-col-header span:not(:first-child) {
        text-align: right;
    }
 
    /* ── Lignes ── */
    .ui-menu-item {
        cursor: pointer;
        border-bottom: 0.5px solid #f0f0f0;
    }
 
    .ui-menu-item:last-child {
        border-bottom: none;
    }
 
    .ui-menu-item-wrapper {
        padding: 0 !important;
    }
 
    .ui-menu-item:hover .ui-menu-item-wrapper,
    .ui-menu-item .ui-state-active {
        background: #E5E1F5 !important; 
        border: none !important;
        margin: 0 !important;
    }
 
    .ui-menu-item .ui-state-active {
        background: #E5E1F5 !important;
        color: inherit !important;
    }
 
    /* ── Message vide ── */
    .ui-autocomplete .ac-empty {
        padding: 24px 16px;
        text-align: center;
        font-size: 13px;
        color: #9ca3af;
    }
 
</style>

<!-- Modal fiche règlement -->
<div class="modal fade" id="modalFicheReglement" tabindex="-1" aria-labelledby="exampleModalScrollable2" data-bs-keyboard="false" data-bs-focus="false" aria-hidden="true">
    <!-- Scrollable modal -->
    <div class="modal-dialog modal-dialog-scrollable modal-xl">
        <div class="modal-content">
            <div class="modal-header">
                <h6 class="modal-title" id="staticBackdropLabel2"> Ajouter règlement client</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">
                    <div class="row">
                        <div class="col-xl-3">
                            <div class="card custom-card border-top-card border-top-warning rounded-0">
                                <div class="card-body px-0 py-2">
                                    <div class="text-center">
                                        <p class="fs-12 text-muted mb-1">Solde du règlement</p>
                                        <div class="d-flex align-items-center justify-content-center flex-wrap">
                                            <h6 class="mb-0 fw-semibold" id="libTtSoldeRegle">0</h6>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="col-xl-3">
                            <div class="card custom-card border-top-card border-top-primary rounded-0">
                                <div class="card-body px-0 py-2">
                                    <div class="text-center">
                                        <p class="fs-12 text-muted mb-1">Total montant réglé</p>
                                        <div class="d-flex align-items-center justify-content-center flex-wrap">
                                            <h6 class="mb-0 fw-semibold" id="libTtMontantRegle">0</h6>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="col-xl-3">
                            <div class="card custom-card border-top-card border-top-success rounded-0">
                                <div class="card-body px-0 py-2">
                                    <div class="text-center">
                                        <p class="fs-12 text-muted mb-1">Total solde</p>
                                        <div class="d-flex align-items-center justify-content-center flex-wrap">
                                            <h6 class="mb-0 fw-semibold" id="libTtSoldeReglement">0</h6>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="col-xl-3">
                            <div class="card custom-card border-top-card border-top-danger rounded-0">
                                <div class="card-body px-0 py-2">
                                    <div class="text-center">
                                        <p class="fs-12 text-muted mb-1">Nbre ligne</p>
                                        <div class="d-flex align-items-center justify-content-center flex-wrap">
                                            <h6 class="mb-0 fw-semibold" id="libNbreLigneReglement">0</h6>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="card flex-fill border border-danger custom-card rounded-0">
                        <div class="card-header rounded-0 d-flex justify-content-center py-1" style="background:  #F22A1E !important;">
                            <span class="text-light text-center fs-14 fw-bold">Informations du règlement client</span>
                        </div>
                        <div class="card-body pt-1 pb-0">
                            <form id="formTraitement">
                                <div class="row">
                                    <div class="col-xl-10">
                                        <input type="number" id="IDREGLEMENT" name="IDREGLEMENT" style="display : none;">
                                        <div class="row">
                                            <div class="col-xl-6 mt-1 mb-2">
                                                <p class="text-muted mb-0">Client :</p>
                                                <select name="IDCLIENT" id="IDCLIENTmodalFicheReglement" class="form-select">

                                                </select>
                                            </div>
                                            <div class="col-xl-3 mt-1 mb-2">
                                                <p class="text-muted mb-0">Règlement disponible :</p>
                                                <select name="selectReglementDispo" id="selectReglementDispo" class="form-select">

                                                </select>
                                            </div>
                                            @if($ModeGpharma == 2)
                                            <div class="col-xl-2 mt-1 mb-2">
                                                <p class="text-muted mb-0">Montant devise :</p>
                                                <input type="text" class="form-control numberInput text-end pe-2" autocomplete="off" id="inpMontantDevise">
                                            </div>
                                            @endif
                                            <div class="col-xl-3 mt-1 mb-2">
                                                <p class="text-muted mb-0">Montant règlement :</p>
                                                <input type="text" class="form-control numberInput text-end pe-2" autocomplete="off" id="inpMontantReglement">
                                            </div>
                                            <div class="col-xl-4 mb-2">
                                                <p class="text-muted mb-0">Mode de paiement :</p>
                                                <select name="IDMODEPAIEMENT" id="IDMODEPAIEMENTmodalFicheReglement" class="form-select selectModePaiement">

                                                </select>
                                            </div>
                                            <div class="col-xl-8 row">
                                                <div class="col-xl-4 mb-2">
                                                    <p class="text-muted mb-0">Banque :</p>
                                                    <select class="form-select" name="IDBANQUE" id="selIDBANQUEModalFicheReglement"></select>
                                                </div>
                                                <div class="col-xl-4 mb-2">
                                                    <p class="text-muted mb-0">Date de règlement :</p>
                                                    <input type="date" class="form-control" name="DateReglementClient" id="inpDateReglementClientModalFicheReglement">
                                                </div>
                                                <div class="col-xl-4 mb-2">
                                                    <p class="text-muted mb-0">Date de valeur :</p>
                                                    <input type="date" class="form-control" name="DateEcheanceReglement" id="inpDateEcheanceReglementModalFicheReglement">
                                                </div>
                                            </div>
                                            <div class="col-xl-12 mb-2">
                                                <p class="text-muted mb-0">N° Pièce ou observation :</p>
                                                <textarea cols="30" rows="1" class="form-control" name="ReferenceReglementClient" id="inpReferenceReglementClientModalFicheReglement"></textarea>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-xl-2 d-flex flex-column justify-content-around">
                                        @if($ModeGpharma == 2)
                                        <div class="w-100">
                                            <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>
                                        @endif
                                        <div class="w-100">
                                            <button class="btn btn-success w-100" id="btnNewReglementClient">
                                                <i class="bx bx-check-circle"></i>
                                                Enregistrer
                                            </button>
                                        </div>
                                        <div class="w-100">
                                            <button class="btn btn-danger w-100">
                                                <i class="bx bx-x-circle"></i>
                                                Annuler
                                            </button>
                                        </div>
                                    </div>
                                </div>
                            </form>
                        </div>
                    </div>
                    <form id="formREGLEMENTCLIENT">
                        <div class="row">
                            <div class="col-xl-3">
                                <p class="text-muted mb-0">N°Relévé / Facture</p>
                                <input type="text" class="form-control" name="IDReleveOuFacture" id="IDFACTURE" style="display : none;">
                                <input type="text" class="form-control" name="numFacture" id="numFacture">
                                <input type="text" class="form-control" name="IDCLIENT_RELEVE_FACTURE" id="IDCLIENT_RELEVE_FACTURE" style="display : none;">
                                <input type="text" class="form-control" name="TypeSelect" id="typeRELEVE_FACTURE" style="display : none;">
                                <input type="text" class="form-control" name="SoldeReleveOuFacture" id="inpSolde_RELEVE_FACTURE" style="display : none;">
                                <input type="text" style="display:none" name="Tx_Reglement" id="Tx_Reglement">
                            </div>
                            <div class="col-xl-9">
                                <div class="row">
                                    <div class="col-xl-11">
                                        <div class="row">
                                            <div class="col-xl-2 px-0 ps-1">
                                                <p class="text-muted mb-0">Type</p>
                                                <div class="border rounded w-100 d-flex ps-2" style="height: 35px;">
                                                    <p class="mt-2 text-center w-100" id="libTypeFacture"></p>
                                                </div>
                                            </div>
                                            <div class="col-xl-2 px-0 ps-1">
                                                <p class="text-muted ellipsis mb-0">Date du rélevé</p>
                                                <div class="border rounded w-100 d-flex ps-2" style="height: 35px;">
                                                    <p class="mt-2 text-center w-100" id="libDateReleve"></p>
                                                </div>
                                            </div>
                                            <div class="col-xl-2 px-0 ps-1">
                                                <p class="text-muted ellipsis mb-0">Quinzaine</p>
                                                <div class="border rounded w-100 d-flex ps-2" style="height: 35px;">
                                                    <p class="mt-2 text-center w-100" id="libQuinzaine"></p>
                                                </div>
                                            </div>
                                            <div class="col-xl-2 px-0 ps-1">
                                                <p class="text-muted ellipsis mb-0">Montant relévé / facture</p>
                                                <div class="border rounded w-100 d-flex ps-2" style="height: 35px;">
                                                    <p class="mt-2 text-end w-100 pe-2" id="libMontantReleve"></p>
                                                </div>
                                            </div>
                                            <div class="col-xl-2 px-0 ps-1">
                                                <p class="text-muted ellipsis mb-0">Solde</p>
                                                <div class="border rounded w-100 d-flex ps-2" style="height: 35px;">
                                                    <p class="mt-2 text-end w-100 pe-2" id="libSolde"></p>
                                                </div>
                                            </div>
                                            <div class="col-xl-2 px-0 ps-1">
                                                <p class="text-muted ellipsis mb-0">Montant réglé</p>
                                                <input type="text" class="form-control text-end pe-2" name="MontantRegle" id="inpMontantRegle">
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-xl-1 pt-2">
                                        <button class="btn btn-success-light mt-1" id="btnNewLigneReglement">
                                            <i class="bx bx-check-circle fs-12"></i>
                                        </button>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </form>
                    <div class="table-responsive mt-3">
                        <table class="tablehover table table-striped w-100 text-nowrap overflow-auto" id="tableFicheReglementModal" style="width: 100%">
                            <thead class="table-header-primary">
                                <tr>
                                    <th class="text-center text-white" data-column="action">#</th>
                                    <th class="text-center text-white" data-column="NumReleveOuFact" id="headerheader">N° Relévé/Facture</th>
                                    <th class="text-center text-white" data-column="LibDoc">Type</th>
                                    <th class="text-center text-white" data-class="text-center" data-column="DateReleveOuFactFormat">Date du relevé</th>
                                    <th class="text-center text-white" data-class="text-center" data-column="LibQuinzaine">Quinzaine</th>
                                    <th class="text-center text-white" data-class="text-end pe-2" data-column="MontReleveOufactureFormat">Montant du relevé</th>
                                    <th class="text-center text-white" data-class="text-end pe-2" data-column="MontantRegleSurReleveFormat">Montant Reglé</th>
                                    <th class="text-center text-white" data-class="text-end pe-2" data-column="SoldeRestantFormat">Solde</th>
                                </tr>
                            </thead>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<div class="modal fade" id="modalFicheMultiReglement" tabindex="-1" aria-labelledby="exampleModalScrollable2" data-bs-keyboard="false" data-bs-focus="false" aria-hidden="true">
    <!-- Scrollable modal -->
    <div class="modal-dialog modal-dialog-scrollable modal-xl">
        <div class="modal-content">
            <div class="modal-header">
                <h6 class="modal-title" id="staticBackdropLabel2">Multi règlement</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">
                        <div class="card-body rounded-0 w-100">
                            <div class="d-flex flex-wrap w-100">
                                <div class="d-flex align-items-center pe-3 me-3 borderRightDotted">
                                    <p class="text-muted mb-0 me-2">CLIENT : </p>
                                    <label id="libNomClientModalFicheMultiReglement"></label>
                                </div>
                                <div class="d-flex align-items-center pe-2 me-3 borderRightDotted">
                                    <p class="text-muted mb-0 me-2">Montant règlement :</p>
                                    <label id="libMontantReglementModalFicheMultiReglement"></label>
                                </div>
                                <div class="d-flex align-items-center pe-2 me-3 borderRightDotted">
                                    <p class="text-muted mb-0 me-2">Solde :</p>
                                    <label id="libSoldeReglementModalFicheMultiReglement"></label>
                                </div>
                                <div class="d-flex align-items-center pe-2 me-3 borderRightDotted">
                                    <p class="text-muted mb-0 me-2">N° règlement :</p>
                                    <label id="libNumeroReglementModalFicheMultiReglement"></label>
                                </div>
                                <div class="d-flex align-items-center pe-2 me-3 borderRightDotted">
                                    <p class="text-muted mb-0 me-2">Date règlement :</p>
                                    <label id="libDateReglementModalFicheMultiReglement"></label>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="table-responsive w-100">
                    <table class="tablehover table table-striped tablehover text-nowrap " id="tableFicheMultiReglementModal">
                        <thead class="table-header-primary">
                            <tr>
                                <th class="text-center text-white"  data-orderable="false"></th>
                                <th class="text-center text-white" >N° Relévé/Facture</th>
                                <th class="text-center text-white" >Type</th>
                                <th class="text-center text-white" data-class="text-center" >Date du relevé</th>
                                <th class="text-center text-white" data-class="text-center" >Quinzaine</th>
                                <th class="text-center text-white" data-class="text-end pe-2" >Montant du relevé</th>
                                <th class="text-center text-white" data-class="text-end pe-2" >Solde</th>
                                <th class="text-center text-white" data-class="text-end pe-2" >Montant Reglé</th>
                                <th class="text-center text-white" data-class="text-center pe-2" data-orderable="false">
                                    <input class="form-check-input me-4" type="checkbox" id="checkSelectAllMultiReglement">
                                </th>
                                <th  data-orderable="false" class="text-center text-white" data-class="text-end pe-2" >Observation</th>
                            </tr>
                        </thead>
                    </table>
                </div>
            </div>
            <div class="modal-footer">
                <div class="col-md-3" style="margin-top: -10px;">
                    <p class="text-muted mb-0">Total montant réglé</p>
                    <input type="text" id="totalMontantRegle" class="form-control text-end numberInput" value="0" disabled>
                </div>
                <button type="button" class="btn btn-success" id="btnValiderMultiReglement">
                    <i class='bx bx-check'></i>
                    Valider
                </button>
            </div>
        </div>
    </div>
</div>

<!-- Script modal règlement -->
<script>

    modificationEffectuee = false
    var reinitialiserModalReglement = true
    var dataAutoComplete = []

    @if($ModeGpharma == 2)

    let parentIDCLIENTmodalFicheReglement = $('#IDCLIENTmodalFicheReglement').parent()

    parentIDCLIENTmodalFicheReglement.removeClass('col-xl-6')
    parentIDCLIENTmodalFicheReglement.addClass('col-xl-4')

    var MonnaieParDefaut = {!!$IDMonnaieParDefaut!!}

    function calculValeurEnFrancCongolais(){

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

        let MontantRegle = parseFloat(_('inpMontantDevise').value.replace(/\s/g, '').replace(',', '.'))
        MontantRegle = MontantRegle != '' ? MontantRegle : 0

        let totalRegle = Math.round(parseFloat(MontantRegle), 4)

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

    _('inpMontantDevise').addEventListener('input', calculValeurEnFrancCongolais)
    _('selIDMONNAIE').addEventListener('change', calculValeurEnFrancCongolais)
    _('inpMontantReglement').setAttribute('disabled', '')

    @endif

    function chargerTableFicheReglementModal(data = []){

        remplissageDataTable({
            IdentifiantDuTableau :'#tableFicheReglementModal',
            obj : data,
            scrollX : true,
        })

        divShowPer = $('#tableFicheReglementModal').parent().parent()
                
        divShowPer.prepend('\
            <div class="d-flex justify-content-between">\
                <div class="col-md-2 pt-4">\
                    <div class="d-flex align-items-center">\
                        <i class="bx bx-check-square text-warning me-2 fs-18" style="cursor : pointer"></i>\
                        <p class="labelMultipleReglement mb-0" style="cursor : pointer">Multiple Règlement</p>\
                    </div>\
                </div>\
            </div>\
        ')
    }

    listingComboClient('#IDCLIENTmodalFicheReglement', ' ')
        .then(function(data){

            $('#IDCLIENTmodalFicheReglement').select2({dropdownParent : $('#modalFicheReglement')})
        })

    listingComboModePaiement('#IDMODEPAIEMENT', true)
        .then(function(response){

            if (response.success == 1) {
                        
                $('#IDMODEPAIEMENTmodalFicheReglement').html('<option></option>')
                $.each(response.data, function(key, value){

                    $('#IDMODEPAIEMENTmodalFicheReglement').append('<option value="'+value['IDMODEPAIEMENT']+'">'+value['LibelleModePaiement']+'</option>')
                })

                $('#IDMODEPAIEMENTmodalFicheReglement').select2({dropdownParent : $('#modalFicheReglement')})

            }else{

                notifError(response.msg)
            }
        })


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

            if (response.success == 1) {
                
                let data = response.data

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

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

                $('#selIDBANQUEModalFicheReglement').select2({
                    dropdownParent : $('#modalFicheReglement')
                })
            }
        })
        
    function chargerLesSelectModalReglement(IDCLIENT, IDREGLEMENTCLIENT, resultat = {}){

        return new Promise(function(resolve, reject){
            
            $.ajax({

                url : "{{ route('chargerLesSelectModalReglement') }}",
                type : 'POST',
                data : {
                    IDCLIENT : IDCLIENT,
                    IDREGLEMENTCLIENT : IDREGLEMENTCLIENT,
                    resultat : resultat,
                    _token : '{{ csrf_token() }}'
                },
                beforeSend : progressHandler(),
                dataType : 'json',
                success : function(response){
                    
                    if (response.success == 1) {

                        resolve(response)

                        console.log(response);
                    }else{

                        resolve(response)
                        notifError(response.msg)
                    }

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

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

    // function autoComplete
    function autocompleteReleve(data = []){

        dataAutoComplete = data

        $("#numFacture").autocomplete({
            delay: 300,
            minLength: 0,
            autoFocus: true,
 
            source: function (request, response) {
 
                const term = (request.term || "").toLowerCase();
 
                const filtered = $.map(dataAutoComplete, function (item) {
 
                    if (
                        item.NumeroReleveClient.toLowerCase().includes(term) ||
                        String(item.IDRELEVECLIENT).includes(term)
                    ) {
                        return {
                            label: item.NumeroReleveClient,
                            value: item.NumeroReleveClient,
 
                            IDFACTURE: item.IDRELEVECLIENT,
                            NumeroReleveClient: item.NumeroReleveClient,
                            DateReleveClientFormat: item.DateReleveClientFormat,
                            LibelleQuinzaine: item.LibelleQuinzaine,
                            TotalTTCReleveClientFormat: item.TotalTTCReleveClientFormat,
                            MontantResteFormat: item.MontantResteFormat,
                            libelleTypeDocument: item.libelleTypeDocument,
                            typeDocument: item.typeDocument,
                            IDCLIENT: item.IDCLIENT
                        };
                    }
                });
 
                response(filtered);
            },
 
            focus: function () {
                return false;
            },
 
            open: function () {
                const menu = $(this).autocomplete("widget");
                if (!menu.find(".ac-col-header").length) {
                    menu.prepend(`
                        <div class="ac-col-header">
                            <span>N° Document</span>
                            <span>Type</span>
                            <span>Date</span>
                            <span>Quinzaine</span>
                            <span>Montant TTC</span>
                            <span>Solde restant</span>
                        </div>
                    `);
                }
            },
 
            select: function (event, ui) {
 
                if (!ui.item) return false;
 
                $("#IDFACTURE").val(ui.item.IDFACTURE);
                $("#numFacture").val(ui.item.NumeroReleveClient);
 
                $("#libTypeFacture").html(ui.item.libelleTypeDocument);
                $("#libDateReleve").html(ui.item.DateReleveClientFormat);
                $("#libQuinzaine").html(ui.item.LibelleQuinzaine);
                $("#libMontantReleve").html(ui.item.TotalTTCReleveClientFormat);
                $("#libSolde").html(ui.item.MontantResteFormat);
 
                $("#IDCLIENT_RELEVE_FACTURE").val(ui.item.IDCLIENT);
                $("#typeRELEVE_FACTURE").val(ui.item.typeDocument);
 
                $("#inpSolde_RELEVE_FACTURE").val(ui.item.MontantResteFormat);
                $("#inpMontantRegle").val(ui.item.MontantResteFormat).select();
 
                return false;
            }
 
        }).autocomplete("instance")._renderItem = function (ul, item) {

            console.log(ul, item);
            
 
            const badgeStyle = {
                'FACTURE': 'background:#E6F1FB; color:#0C447C;',
                'RELEVE':  'background:#E1F5EE; color:#085041;',
                'RELEVÉ':  'background:#E1F5EE; color:#085041;',
                'AVOIR':   'background:#FAECE7; color:#712B13;',
            }[item.libelleTypeDocument?.toUpperCase()] || 'background:#F1EFE8; color:#5F5E5A;';
 
            const montantBrut = parseFloat(
                String(item.MontantResteFormat).replace(/[^\d,.-]/g, '').replace(',', '.')
            );
            const soldeStyle = (!isNaN(montantBrut) && montantBrut === 0)
                ? 'color:#0F6E56;'
                : 'color:#A32D2D;';
 
            return $("<li>")
                .append(`
                    <div style="
                        display: grid;
                        grid-template-columns: 2.5fr 110px 140px 110px 140px 140px;
                        gap: 0;
                        padding: 9px 14px;
                        align-items: center;
                    ">
 
                        <div>
                            <div style="font-size:13px; font-weight:500; color:inherit; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;">
                                ${item.NumeroReleveClient}
                            </div>
                        </div>
 
                        <div style="text-align:right;">
                            <span style="
                                display: inline-block;
                                padding: 2px 7px;
                                border-radius: 999px;
                                font-size: 10px;
                                font-weight: 500;
                                letter-spacing: 0.03em;
                                ${badgeStyle}
                            ">${item.libelleTypeDocument}</span>
                        </div>
 
                        <div style="text-align:right; font-size:12px; color:#6c757d; white-space:nowrap;">
                            ${item.DateReleveClientFormat}
                        </div>
 
                        <div style="text-align:right; font-size:12px; color:#6c757d;">
                            ${item.LibelleQuinzaine ?? ''}
                        </div>
 
                        <div style="text-align:right; font-size:13px; font-weight:500; white-space:nowrap;">
                            ${item.TotalTTCReleveClientFormat}
                        </div>
 
                        <div style="text-align:right; font-size:13px; font-weight:500; white-space:nowrap; ${soldeStyle}">
                            ${item.MontantResteFormat}
                        </div>
 
                    </div>
                `)
                .appendTo(ul);
        };
    }

    // Script de sélection d'un client
    $('#IDCLIENTmodalFicheReglement').on('select2:select', function(e) {

        // Get the selected option
        let selectedOption = $(e.target).find(':selected');
        
        // Get the data-IDMODEPAIEMENT attribute value
        let idModePaiement = selectedOption.data('idmodepaiement');
        
        $('#IDMODEPAIEMENTmodalFicheReglement').val(idModePaiement).trigger('change')

        let IDCLIENT = $(this).val()
        
        chargerLesSelectModalReglement(IDCLIENT, _('IDREGLEMENT').value, {reglementDispo : 1, autoComplete : 1})
            .then(function(response){

                if (response.success == 1) {
                    
                    let REQ_REGLEMENTCLIENT_DISPO = response.REQ_REGLEMENTCLIENT_DISPO
                    $('#selectReglementDispo').html('<option value="0"> </option>')
                    $.each(REQ_REGLEMENTCLIENT_DISPO, function(key, value){

                        $('#selectReglementDispo').append('<option value="'+value['IDREGLEMENTCLIENT']+'">'+value['NumeroReglementClient']+'</option>')
                    })

                    $('#selectReglementDispo').val(_('IDREGLEMENT').value).trigger('change')                        

                    if (_('IDREGLEMENT').value.replace(/\s/g, '') != '' && parseInt(_('IDREGLEMENT').value) > 0) {
                        
                        _('IDCLIENTmodalFicheReglement').setAttribute('disabled', '')
                        _('selectReglementDispo').setAttribute('disabled', '')
                    }

                    

                    // Remplissage de l'autocomplete
                    let tableSelectReleve = response.tableSelectReleve
                    
                    autocompleteReleve(tableSelectReleve)
                }
            })
    });

    // Ouverture en ajout
    _('bntModalNewReglement').addEventListener('click', function(){

        @if($ModeGpharma == 2)
            $('#selIDMONNAIE').val(MonnaieParDefaut).trigger('change')
            _('inpMontantDevise').removeAttribute('disabled')
        @endif

        modificationEffectuee = false

        
        _('btnNewReglementClient').removeAttribute('disabled')
        
        $('#modalFicheReglement').modal('show')

        setTimeout(() => {
            chargerTableFicheReglementModal()
        }, 200);
    })

    // Ouverture en modification
    $(document).on('click', '#editRegleClient', function(){

        let IDREGLEMENTCLIENT = $(this).attr('data-id')
        _('IDREGLEMENT').value = IDREGLEMENTCLIENT

        chargerLesSelectModalReglement(null, IDREGLEMENTCLIENT, {infoREGLEMENT : 1, tableModalReglement : 1, reglementDispo : 1, autoComplete : 1})
            .then(function(response){

                if (response.success == 1) {

                    let infoREGLEMENT = response.infoREGLEMENT
                    
                    $('#IDCLIENTmodalFicheReglement').val(infoREGLEMENT.IDCLIENT).trigger('change')

                    // Get the selected option of the first element
                    let selectedOption = $('#IDCLIENTmodalFicheReglement option:selected');
                    
                    // Get the data-IDMODEPAIEMENT attribute value
                    // let idModePaiement = selectedOption.data('idmodepaiement');

                    let idModePaiement = infoREGLEMENT.IDMODEPAIEMENT
                    
                    // Set the value and trigger change on the second element
                    $('#IDMODEPAIEMENTmodalFicheReglement').val(idModePaiement).trigger('change');

                    $('#selIDBANQUEModalFicheReglement').val(response.infoREGLEMENT.IDBANQUE).trigger('change')
                    _('inpDateReglementClientModalFicheReglement').value = response.infoREGLEMENT.DateReglementClient
                    _('inpDateEcheanceReglementModalFicheReglement').value = response.infoREGLEMENT.DateEcheanceReglement
                    _('inpReferenceReglementClientModalFicheReglement').value = response.infoREGLEMENT.ReferenceReglementClient
                    _('inpMontantReglement').value = tronquerValeur(infoREGLEMENT.MontantReglementClient)

                    _('libNbreLigneReglement').innerHTML = formatNumber(response.nbreLigne)
                    _('libTtSoldeReglement').innerHTML = formatNumber(response.ttSoldeReglement)
                    _('libTtMontantRegle').innerHTML = formatNumber(response.ttMontantRegle)
                    _('Tx_Reglement').value = response.ttMontantRegle
                    _('libTtSoldeRegle').innerHTML = formatNumber(infoREGLEMENT.MontantReglementClient - response.ttMontantRegle)

                    // Remplissage de la liste des règlements dispo et sélection du règlement en cours
                    let REQ_REGLEMENTCLIENT_DISPO = response.REQ_REGLEMENTCLIENT_DISPO
                    $('#selectReglementDispo').html('<option value="0"> </option>')
                    $.each(REQ_REGLEMENTCLIENT_DISPO, function(key, value){

                        $('#selectReglementDispo').append('<option value="'+value['IDREGLEMENTCLIENT']+'">'+value['NumeroReglementClient']+'</option>')
                    })

                    // Remplissage de l'autocomplete
                    let tableSelectReleve = response.tableSelectReleve
                    
                    autocompleteReleve(tableSelectReleve)

                    _('selectReglementDispo').value = _('IDREGLEMENT').value

                    let tableModalReglement = response.tableModalReglement

                    chargerTableFicheReglementModal(tableModalReglement)

                    // Griser le sélect de client et celui de règlement dispo
                    _('IDCLIENTmodalFicheReglement').setAttribute('disabled', '')
                    _('selectReglementDispo').setAttribute('disabled', '')

                    @if($ModeGpharma == 2)

                        if (infoREGLEMENT.IDMONNAIE == null) {
                            
                            $('#selIDMONNAIE').val(MonnaieParDefaut).trigger('change')
                        }else{

                            $('#selIDMONNAIE').val(infoREGLEMENT.IDMONNAIE).trigger('change')
                        }

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

                        let MontantRegle = parseFloat(_('inpMontantReglement').value.replace(/\s/g, '').replace(',', '.'))
                        MontantRegle = MontantRegle != '' ? MontantRegle : 0

                        let totalRegle = Math.round(parseFloat(MontantRegle), 4)
                        
                        $('#inpMontantDevise').val(totalRegle / tauxMonnaie).trigger('input')

                        _('inpMontantDevise').setAttribute('disabled', '')
                        _('btnNewReglementClient').setAttribute('disabled', '')
                        
                    @endif

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

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

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

        let value = this.value

        if (value != null && value.replace(/\s/g, '') != '' && value > 0) {
            
            _('IDREGLEMENT').value = value

            // Griser le sélect de client et celui de règlement dispo
            _('IDCLIENTmodalFicheReglement').setAttribute('disabled', '')

            chargerLesSelectModalReglement(null, value, {infoREGLEMENT : 1, tableModalReglement : 1})
                .then(function(response){

                    if(response.success == 1){

                        let infoREGLEMENT = response.infoREGLEMENT
                    
                        $('#IDCLIENTmodalFicheReglement').val(infoREGLEMENT.IDCLIENT).trigger('change')
                        _('inpDateReglementClientModalFicheReglement').value = response.infoREGLEMENT.DateReglementClient
                        _('inpDateEcheanceReglementModalFicheReglement').value = response.infoREGLEMENT.DateEcheanceReglement
                        _('inpReferenceReglementClientModalFicheReglement').value = response.infoREGLEMENT.ReferenceReglementClient
                        _('inpMontantReglement').value = infoREGLEMENT.MontantReglementClient

                        _('libNbreLigneReglement').innerHTML = formatNumber(response.nbreLigne)
                        _('libTtSoldeReglement').innerHTML = formatNumber(response.ttSoldeReglement)
                        _('libTtMontantRegle').innerHTML = formatNumber(response.ttMontantRegle)
                        _('Tx_Reglement').value = response.ttMontantRegle
                        _('libTtSoldeRegle').innerHTML = formatNumber(infoREGLEMENT.MontantReglementClient - response.ttMontantRegle)
                    
                        let tableModalReglement = response.tableModalReglement

                        chargerTableFicheReglementModal(tableModalReglement)

                        @if($ModeGpharma == 2)

                        if (infoREGLEMENT.IDMONNAIE == null) {
                            
                            $('#selIDMONNAIE').val(MonnaieParDefaut).trigger('change')
                        }else{

                            $('#selIDMONNAIE').val(infoREGLEMENT.IDMONNAIE).trigger('change')
                        }

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

                        let MontantRegle = parseFloat(_('inpMontantReglement').value.replace(/\s/g, '').replace(',', '.'))
                        MontantRegle = MontantRegle != '' ? MontantRegle : 0

                        let totalRegle = Math.round(parseFloat(MontantRegle), 4)

                        $('#inpMontantDevise').val(totalRegle / tauxMonnaie).trigger('input')
                            
                        @endif

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

    function newLigneReglement(forceExcedent = false){

        return new Promise(function(resolve, reject){

            let formREGLEMENTCLIENT = new FormData(_('formREGLEMENTCLIENT'))
            formREGLEMENTCLIENT.append('forceExcedent', forceExcedent)
            formREGLEMENTCLIENT.append('IDREGLEMENTCLIENT', _('IDREGLEMENT').value)
            formREGLEMENTCLIENT.append('DateReglementClient', _('inpDateReglementClientModalFicheReglement').value)
            formREGLEMENTCLIENT.append('IDCLIENT', _('IDCLIENTmodalFicheReglement').value)
            formREGLEMENTCLIENT.append('MontantReglementClient', _('inpMontantReglement').value)
            formREGLEMENTCLIENT.append('IDMODEPAIEMENT', _('IDMODEPAIEMENTmodalFicheReglement').value)
            formREGLEMENTCLIENT.append('IDBANQUE', _('selIDBANQUEModalFicheReglement').value)
            formREGLEMENTCLIENT.append('DateReceptionReglementClient', _('inpDateReglementClientModalFicheReglement').value)
            formREGLEMENTCLIENT.append('DateEcheanceReglement', _('inpDateEcheanceReglementModalFicheReglement').value)
            formREGLEMENTCLIENT.append('ReferenceReglementClient', _('inpReferenceReglementClientModalFicheReglement').value)
            formREGLEMENTCLIENT.append('IDMONNAIE', $('#selIDMONNAIE').val())
            
            @if($ModeGpharma == 2)
                formREGLEMENTCLIENT.append('MontantDevise', $('#inpMontantDevise').val())
            @endif
            
            formREGLEMENTCLIENT.append('_token', '{{ csrf_token() }}')

            $.ajax({

                url : "{{ route ('ajoutModifREGLEMENTCLIENT') }}",
                type : 'POST',
                data : formREGLEMENTCLIENT,
                processData: false,
                contentType: false,
                dataType : 'json',
                success : function(response){

                    if (response.success == 0) {
                        
                        notifError(response.msg)
                        resolve(response)
                    }else{

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

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

    function executeNewLigneReglement(forceExcedent = 0){

        newLigneReglement(forceExcedent)
            .then(function(response){

                if (response.success == 1) {
                    
                    Swal.fire({

                    title: 'Voulez-vous poursuivre la saisie ?',
                    text: response.msg,
                    icon: 'warning',
                    showCancelButton: true,
                    customClass: {
                        confirmButton: 'btn btn-danger ms-2'
                    },
                    cancelButtonColor: '#d33',
                    confirmButtonText: 'Oui',
                    cancelButtonText: 'Non'

                    })
                    
                    .then((result) => {

                        if (result.isConfirmed) {

                            newLigneReglement(1)
                        }
                    })
                }else if(response.success == 2){

                    notif('danger', 'Erreur', response.msg)
                }else if(response.success == 3){

                    modificationEffectuee = true

                    _('IDREGLEMENT').value = response.IDREGLEMENTCLIENT

                    chargerLesSelectModalReglement(null, _('IDREGLEMENT').value, {infoREGLEMENT : 1, tableModalReglement : 1, autoComplete : 1 })
                        .then(function(response){

                            if (response.success == 1) {

                                let tableSelectReleve = response.tableSelectReleve

                                // Script autoComplete
                                $("#numFacture").autocomplete({
                                    delay: 500,
                                    minLength: 0,
                                    autoFocus: true,
                                    source: function(request, response) {
                                        // Filtrer les résultats basés sur la saisie de l'utilisateur
                                        let filtered = $.map(tableSelectReleve, function(item) {
                                            if (item.NumeroReleveClient.toLowerCase().includes(request.term.toLowerCase())) {
                                                return {
                                                    label: item.NumeroReleveClient,
                                                    id: item.IDRELEVECLIENT,
                                                    NumeroReleveClient: item.NumeroReleveClient,
                                                    IDFACTURE: item.IDRELEVECLIENT,
                                                    DateReleveClient: item.DateReleveClient,
                                                    DateReleveClientFormat: item.DateReleveClientFormat,
                                                    LibelleQuinzaine: item.LibelleQuinzaine,
                                                    DateEcheanceReleve: item.DateEcheanceReleve,
                                                    DateEcheanceReleveFormat: item.DateEcheanceReleveFormat,
                                                    TotalTTCReleveClient: item.TotalTTCReleveClient,
                                                    TotalTTCReleveClientFormat: item.TotalTTCReleveClientFormat,
                                                    la_somme_MontantReglementClient: item.la_somme_MontantReglementClient,
                                                    la_somme_MontantReglementClientFormat: item.la_somme_MontantReglementClientFormat,
                                                    MontantReste: item.MontantReste,
                                                    MontantResteFormat: item.MontantResteFormat,
                                                    typeDocument: item.typeDocument,
                                                    libelleTypeDocument: item.libelleTypeDocument,
                                                    IDCLIENT : item.IDCLIENT
                                                };
                                            }
                                        });

                                        response(filtered);
                                    },
                                    focus: function(event, ui) {
                                        // Optionnel: ajouter des comportements sur le focus de l'élément
                                    },
                                    select: function(event, ui) {
                                        
                                        _('IDFACTURE').value = parseInt(ui.item.IDFACTURE)
                                        _('libTypeFacture').innerHTML = ui.item.libelleTypeDocument
                                        _('libDateReleve').innerHTML = ui.item.DateReleveClientFormat
                                        _('libQuinzaine').innerHTML = ui.item.LibelleQuinzaine
                                        _('libMontantReleve').innerHTML = ui.item.TotalTTCReleveClientFormat
                                        _('libSolde').innerHTML = ui.item.MontantResteFormat

                                        // IDFACTURE
                                        _('numFacture').value = ui.item.NumeroReleveClient
                                        _('IDCLIENT_RELEVE_FACTURE').value = ui.item.IDCLIENT
                                        _('typeRELEVE_FACTURE').value = ui.item.typeDocument
                                        _('inpSolde_RELEVE_FACTURE').value = ui.item.MontantResteFormat
                                    }
                                }).data("ui-autocomplete")._renderMenu = function(ul, items) {
                                    var $table = $("<table class='autocomplete-table'></table>");
                                    var $header = $("<thead><tr>\
                                        <th>N° Relevé / Facture</th>\
                                        <th>Type</th>\
                                        <th>Date du Relevé</th>\
                                        <th>Quinzaine</th>\
                                        <th>Montant Relevé / Facture</th>\
                                        <th>Solde</th>\
                                    </tr></thead>");
                                    var $tbody = $("<tbody></tbody>");

                                    $table.append($header);
                                    $table.append($tbody);
                                    ul.append($table);

                                    $.each(items, function(index, item) {
                                        var $tr = $("<tr class='ui-menu-item' role='presentation'></tr>");
                                        $tr.data("ui-autocomplete-item", item);
                                        $tr.append("<td class='ui-menu-item-wrapper'>" + item.NumeroReleveClient + "</td>");
                                        $tr.append("<td class='ui-menu-item-wrapper'>" + item.libelleTypeDocument + "</td>");
                                        $tr.append("<td class='ui-menu-item-wrapper text-center'>" + item.DateReleveClientFormat + "</td>");
                                        $tr.append("<td class='ui-menu-item-wrapper text-center'>" + item.LibelleQuinzaine + "</td>");
                                        $tr.append("<td class='ui-menu-item-wrapper text-end pe-2'>" + item.TotalTTCReleveClientFormat + "</td>");
                                        $tr.append("<td class='ui-menu-item-wrapper text-end pe-2'>" + item.MontantResteFormat + "</td>");
                                        $tbody.append($tr);
                                    });
                                }

                                _('IDFACTURE').value = 0
                                _('libTypeFacture').innerHTML = ''
                                _('libDateReleve').innerHTML = ''
                                _('libQuinzaine').innerHTML = ''
                                _('libMontantReleve').innerHTML = ''
                                _('libSolde').innerHTML = ''

                                // IDFACTURE
                                _('numFacture').value = ''
                                _('IDCLIENT_RELEVE_FACTURE').value = ''
                                _('typeRELEVE_FACTURE').value = ''
                                _('inpSolde_RELEVE_FACTURE').value = ''
                                _('inpMontantRegle').value = ''

                                let infoREGLEMENT = response.infoREGLEMENT

                                // totaux de la modal
                                _('libNbreLigneReglement').innerHTML = formatNumber(response.nbreLigne)
                                _('libTtSoldeReglement').innerHTML = formatNumber(response.ttSoldeReglement)
                                _('libTtMontantRegle').innerHTML = formatNumber(response.ttMontantRegle)
                                _('Tx_Reglement').value = response.ttMontantRegle
                                _('libTtSoldeRegle').innerHTML = formatNumber(infoREGLEMENT.MontantReglementClient - response.ttMontantRegle)

                                let tableModalReglement = response.tableModalReglement

                                chargerTableFicheReglementModal(tableModalReglement)

                                @if($ModeGpharma == 2)

                                    _('inpMontantDevise').setAttribute('disabled', '')
                                    _('btnNewReglementClient').setAttribute('disabled', '')

                                @endif
                            }
                        })
                }
            })
    }

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

        e.preventDefault()
    })

    // Ajout d'une nouvelle ligne de reglement
    _('btnNewLigneReglement').addEventListener('click', function(e){

        // Vérifie le mode de paiement
        if (_('IDMODEPAIEMENTmodalFicheReglement').value <= 0) {
            notif('danger', 'Erreur', 'Veuillez sélectionner un mode de paiement, SVP !');
            return 0;
        }

        // Vérifie le montant du règlement
        const montantReglement = parseFloat(_('inpMontantReglement').value.replace(/\s/g, ''));
        if (isNaN(montantReglement) || montantReglement <= 0) {
            notif('danger', 'Erreur', 'Veuillez renseigner le montant du règlement, SVP !');
            return 0;
        }

        // Vérifie la sélection du client
        if (_('IDCLIENTmodalFicheReglement').value == 0) {
            notif('danger', 'Erreur', 'Veuillez sélectionner le client, SVP !');
            return 0;
        }

        // Vérifie la sélection du document
        if (_('IDCLIENT_RELEVE_FACTURE').value <= 0) {
            notif('danger', 'Erreur', 'Veuillez sélectionner le document, SVP !');
            return 0;
        }

        // Vérifie que le document appartient au client
        if (_('IDCLIENT_RELEVE_FACTURE').value != _('IDCLIENTmodalFicheReglement').value) {
            const errorMsg = _('typeRELEVE_FACTURE').value != 1
                ? 'La facture sélectionnée n\'appartient pas au client !'
                : 'Le relevé sélectionné n\'appartient pas au client !';

            notif('danger', 'Erreur', errorMsg);
            return 0;
        }

        // Vérifie le montant réglé
        const montantRegle = parseFloat(_('inpMontantRegle').value.replace(/\s/g, ''));
        if (isNaN(montantRegle) || montantRegle <= 0) {
            notif('danger', 'Erreur', 'Veuillez renseigner le montant réglé, SVP !');
            return 0;
        }

        if (parseFloat(_('Tx_Reglement').value) + parseFloat(_('inpMontantRegle').value.replace(/\s/g, '')) > parseFloat(_('inpMontantReglement').value.replace(/\s/g, ''))) {
            
            notif('danger', 'Erreur', 'La somme des montants reglés ne peut excéder le montant du réglement !');
            return 0;
        }

        confirmMdp('{{ csrf_token() }}', executeNewLigneReglement, callback2 = null, title = 'Confirmez cette opération', {CodeDroit: "DC_ReglementClient", typeJNL : 3, infoJNL: "CREATION/MODIFICATION DE REGLEMENT CLIENT" })
    })

    // Supprimer les lignes de RELEVECLIENT_REGLE
    function supprimerRELEVECLIENT_REGLE1(){

        return new Promise(function(resolve, reject){

            $.ajax({

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

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

                    if (response.success == 1) {
                        
                        chargerLesSelectModalReglement(null, _('IDREGLEMENT').value, {infoREGLEMENT : 1, tableModalReglement : 1, autoComplete : 1 })
                            .then(function(response){

                                if (response.success == 1) {

                                    let tableSelectReleve = response.tableSelectReleve

                                    // Script autoComplete
                                    $("#numFacture").autocomplete({
                                        delay: 500,
                                        minLength: 0,
                                        autoFocus: true,
                                        source: function(request, response) {
                                            // Filtrer les résultats basés sur la saisie de l'utilisateur
                                            let filtered = $.map(tableSelectReleve, function(item) {
                                                if (item.NumeroReleveClient.toLowerCase().includes(request.term.toLowerCase())) {
                                                    return {
                                                        label: item.NumeroReleveClient,
                                                        id: item.IDRELEVECLIENT,
                                                        NumeroReleveClient: item.NumeroReleveClient,
                                                        IDFACTURE: item.IDRELEVECLIENT,
                                                        DateReleveClient: item.DateReleveClient,
                                                        DateReleveClientFormat: item.DateReleveClientFormat,
                                                        LibelleQuinzaine: item.LibelleQuinzaine,
                                                        DateEcheanceReleve: item.DateEcheanceReleve,
                                                        DateEcheanceReleveFormat: item.DateEcheanceReleveFormat,
                                                        TotalTTCReleveClient: item.TotalTTCReleveClient,
                                                        TotalTTCReleveClientFormat: item.TotalTTCReleveClientFormat,
                                                        la_somme_MontantReglementClient: item.la_somme_MontantReglementClient,
                                                        la_somme_MontantReglementClientFormat: item.la_somme_MontantReglementClientFormat,
                                                        MontantReste: item.MontantReste,
                                                        MontantResteFormat: item.MontantResteFormat,
                                                        typeDocument: item.typeDocument,
                                                        libelleTypeDocument: item.libelleTypeDocument,
                                                        IDCLIENT : item.IDCLIENT
                                                    };
                                                }
                                            });

                                            response(filtered);
                                        },
                                        focus: function(event, ui) {
                                            // Optionnel: ajouter des comportements sur le focus de l'élément
                                        },
                                        select: function(event, ui) {
                                            
                                            _('IDFACTURE').value = parseInt(ui.item.IDFACTURE)
                                            _('libTypeFacture').innerHTML = ui.item.libelleTypeDocument
                                            _('libDateReleve').innerHTML = ui.item.DateReleveClientFormat
                                            _('libQuinzaine').innerHTML = ui.item.LibelleQuinzaine
                                            _('libMontantReleve').innerHTML = ui.item.TotalTTCReleveClientFormat
                                            _('libSolde').innerHTML = ui.item.MontantResteFormat

                                            // IDFACTURE
                                            _('numFacture').value = ui.item.NumeroReleveClient
                                            _('IDCLIENT_RELEVE_FACTURE').value = ui.item.IDCLIENT
                                            _('typeRELEVE_FACTURE').value = ui.item.typeDocument
                                            _('inpSolde_RELEVE_FACTURE').value = ui.item.MontantResteFormat
                                        }
                                    }).data("ui-autocomplete")._renderMenu = function(ul, items) {
                                        var $table = $("<table class='autocomplete-table'></table>");
                                        var $header = $("<thead><tr>\
                                            <th>N° Relevé / Facture</th>\
                                            <th>Type</th>\
                                            <th>Date du Relevé</th>\
                                            <th>Quinzaine</th>\
                                            <th>Montant Relevé / Facture</th>\
                                            <th>Solde</th>\
                                        </tr></thead>");
                                        var $tbody = $("<tbody></tbody>");

                                        $table.append($header);
                                        $table.append($tbody);
                                        ul.append($table);

                                        $.each(items, function(index, item) {
                                            var $tr = $("<tr class='ui-menu-item' role='presentation'></tr>");
                                            $tr.data("ui-autocomplete-item", item);
                                            $tr.append("<td class='ui-menu-item-wrapper'>" + item.NumeroReleveClient + "</td>");
                                            $tr.append("<td class='ui-menu-item-wrapper'>" + item.libelleTypeDocument + "</td>");
                                            $tr.append("<td class='ui-menu-item-wrapper text-center'>" + item.DateReleveClientFormat + "</td>");
                                            $tr.append("<td class='ui-menu-item-wrapper text-center'>" + item.LibelleQuinzaine + "</td>");
                                            $tr.append("<td class='ui-menu-item-wrapper text-end pe-2'>" + item.TotalTTCReleveClientFormat + "</td>");
                                            $tr.append("<td class='ui-menu-item-wrapper text-end pe-2'>" + item.MontantResteFormat + "</td>");
                                            $tbody.append($tr);
                                        });
                                    }

                                    _('IDFACTURE').value = 0
                                    _('libTypeFacture').innerHTML = ''
                                    _('libDateReleve').innerHTML = ''
                                    _('libQuinzaine').innerHTML = ''
                                    _('libMontantReleve').innerHTML = ''
                                    _('libSolde').innerHTML = ''

                                    // IDFACTURE
                                    _('numFacture').value = ''
                                    _('IDCLIENT_RELEVE_FACTURE').value = ''
                                    _('typeRELEVE_FACTURE').value = ''
                                    _('inpSolde_RELEVE_FACTURE').value = ''
                                    _('inpMontantRegle').value = ''

                                    let infoREGLEMENT = response.infoREGLEMENT

                                    // totaux de la modal
                                    _('libNbreLigneReglement').innerHTML = formatNumber(response.nbreLigne)
                                    _('libTtSoldeReglement').innerHTML = formatNumber(response.ttSoldeReglement)
                                    _('libTtMontantRegle').innerHTML = formatNumber(response.ttMontantRegle)
                                    _('Tx_Reglement').value = response.ttMontantRegle
                                    _('libTtSoldeRegle').innerHTML = formatNumber(infoREGLEMENT.MontantReglementClient - response.ttMontantRegle)

                                    let tableModalReglement = response.tableModalReglement

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

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

    function supprimerRELEVECLIENT_REGLE2(){

        return new Promise(function(resolve, reject){

            $.ajax({

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

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

                    if (response.success == 1) {
                        
                        chargerTableReglementClient()
                            .then(function(data){

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

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

    var ligneSelectionne

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

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

        ligneSelectionne = [IDRELEVECLIENT_REGLE]

        confirmMdp('{{ csrf_token() }}', supprimerRELEVECLIENT_REGLE1, callback2 = null, title = 'SUPPRESSION DE REGLEMENT CLIENT', {CodeDroit: "DC_ReglementClient", typeJNL : 3, infoJNL: ""})
        modificationEffectuee = true
    })

    $('#modalFicheReglement').on('hidden.bs.modal', function(){

        if (reinitialiserModalReglement == false) {
            
            return 0
        }

        _('IDREGLEMENT').value = '' 
        $('#IDCLIENTmodalFicheReglement').val(0).trigger('change')
        _('inpMontantReglement').value = ''

        _('libNbreLigneReglement').innerHTML = 0
        _('libTtSoldeReglement').innerHTML = 0
        _('libTtMontantRegle').innerHTML = 0
        _('Tx_Reglement').value = ''
        _('libTtSoldeRegle').innerHTML = 0

        _('IDCLIENTmodalFicheReglement').removeAttribute('disabled')
        _('selectReglementDispo').removeAttribute('disabled')

        _('formTraitement').reset()
        _('formREGLEMENTCLIENT').reset()

        _('IDFACTURE').value = ''
        _('libTypeFacture').innerHTML = ''
        _('libDateReleve').innerHTML = ''
        _('libQuinzaine').innerHTML = ''
        _('libMontantReleve').innerHTML = ''
        _('libSolde').innerHTML = ''

        // IDFACTURE
        _('numFacture').value = ''
        _('IDCLIENT_RELEVE_FACTURE').value =''
        _('typeRELEVE_FACTURE').value = ''
        _('inpSolde_RELEVE_FACTURE').value = ''

        _('inpMontantRegle').value = ''

        if (modificationEffectuee == true ) {
            
            chargerTableReglementClient()
                .then(function(data){

                    completeHandler()
                })
        }
    })

    function newReglementClient(){

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

            $.ajax({

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

                    IDREGLEMENTCLIENT : _('IDREGLEMENT').value,
                    IDCLIENT : _('IDCLIENTmodalFicheReglement').value,
                    DateReglementClient : _('inpDateReglementClientModalFicheReglement').value,
                    MontantDuReglement : _('inpMontantReglement').value,
                    IDMODEPAIEMENT : _('IDMODEPAIEMENTmodalFicheReglement').value,
                    DateEcheanceReglement : _('inpDateEcheanceReglementModalFicheReglement').value,
                    ReferenceReglementClient : _('inpReferenceReglementClientModalFicheReglement').value,
                    IDBANQUE : _('selIDBANQUEModalFicheReglement').value,
                    
                    @if($ModeGpharma == 2)
                        IDMONNAIE : _('selIDMONNAIE').value,
                        MontantDevise : _('inpMontantDevise').value,
                    @endif
                    
                    _token : '{{ csrf_token() }}'
                },
                dataType : 'json',
                beforeSend : progressHandler(),
                success : function(response){

                    if (response.success == 1) {
                        
                        modificationEffectuee = true
                        notif('success', 'Succès', response.msg)
                        resolve(response)
                    }else{

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

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

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

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

        e.preventDefault()
    })

    // Script enregistrer règlement
    _('btnNewReglementClient').addEventListener('click', function(){

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

        if ( _('inpMontantReglement').value.replace(/\s/g, '') == '' || parseFloat(_('inpMontantReglement').value) == 0) {
            
            notif('danger', 'Erreur', 'Veuillez renseigner le montant réglé, SVP !')
            _('inpMontantReglement').select()
            return 0
        }

        confirmMdp('{{ csrf_token() }}', newReglementClient, callback2 = null, 'Confirmez cette opération', {CodeDroit: "DC_ReglementClient", typeJNL : 3, infoJNL: "CREATION/MODIFICATION DE REGLEMENT CLIENT" })
            .then(response => {

                if (response.success == 1) {

                    let IDREGLEMENTCLIENT = response.IDREGLEMENTCLIENT

                    _('IDREGLEMENT').value = IDREGLEMENTCLIENT
                    
                    @if($ModeGpharma == 2)
                        _('inpMontantDevise').setAttribute('disabled', '')
                        _('btnNewReglementClient').setAttribute('disabled', '')
                    @endif
                }
            })
    })

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

        ligneSelectionne = [$(this).attr('data-id')]
        confirmMdp('{{ csrf_token() }}', supprimerRELEVECLIENT_REGLE2, callback2 = null, title = 'SUPPRESSION DE REGLEMENT CLIENT', {CodeDroit: "DC_ReglementClient", typeJNL : 3, infoJNL: ""})   
    })
</script>

<!-- Script modal multiple reglement -->
<script>

    var tableFicheMultiReglementModal = $('#tableFicheMultiReglementModal').DataTable({
                                            language : languageTable,
                                            bFilter : true,
                                            lengthChange : false,
                                            pageLength : 7,
                                            order : [],
                                            columns: [
                                                { data: 'attention'},
                                                { data: 'numReleveFacture' }, // Correspond à la première colonne
                                                { data: 'libelleTypeDocument' }, // Correspond à la deuxième colonne
                                                { data: 'DateReleveClientFormat' }, // Troisième colonne
                                                { data: 'LibelleQuinzaine' }, // Quatrième colonne
                                                { data: 'TotalTTCReleveClientFormat' }, // Cinquième colonne
                                                { data: 'MontantResteFormat' }, // Sixième colonne
                                                { data: 'montantRegleFormat' }, // Septième colonne
                                                { data: 'checkValideReglement' }, // Huitième colonne
                                                { data: 'observation' } // neuvième colonne
                                            ]
                                        })

    function calculMontantTotalRegle(){

        let montantTotalRegle = 0

        $('.checkModalMultiReglement:checked').each(function() {

            let IDFACTURE = $(this).attr('data-id')
            montantTotalRegle += parseInt($('.inputMontantRegle[data-id="'+IDFACTURE+'"]').val().replace(/\s/g, ''))
        });

        _('totalMontantRegle').value = montantTotalRegle
        $('#totalMontantRegle').trigger('input')
    }

    function ajoutMultiReglement(data){

        return new Promise(function(resolve, reject){

            data['_token'] = '{{ csrf_token() }}'

            $.ajax({

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

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

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

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

    function chargerTableFicheMultiReglementModal(data){

        _('libNomClientModalFicheMultiReglement').innerHTML = afficherOptionSelectionneeSelect2('IDCLIENTmodalFicheReglement')
        _('libMontantReglementModalFicheMultiReglement').innerHTML = formatNumber(_('inpMontantReglement').value.replace(/\s/g, '').replace(',', '.'))
        _('libSoldeReglementModalFicheMultiReglement').innerHTML = _('libTtSoldeRegle').innerHTML
        _('libNumeroReglementModalFicheMultiReglement').innerHTML = afficherOptionSelectionnee('selectReglementDispo')
        _('libDateReglementModalFicheMultiReglement').innerHTML = _('inpDateReglementClientModalFicheReglement').value

        tableFicheMultiReglementModal.clear()

        progressHandler()

        data.forEach((value) => {

            ligne = {

                attention : '',
                IDREGLEMENTCLIENT : _('IDREGLEMENT').value,
                IDRELEVECLIENT : value.IDRELEVECLIENT,
                numReleveFacture : value.NumeroReleveClient,
                libelleTypeDocument : value.libelleTypeDocument,
                DateReleveClientFormat : value.DateReleveClientFormat,
                LibelleQuinzaine : value.LibelleQuinzaine,
                TotalTTCReleveClientFormat : value.TotalTTCReleveClientFormat,
                MontantResteFormat : value.MontantResteFormat,
                typeDocument : value.typeDocument,
                SoldeReleveOuFacture : value.SoldeReleveOuFacture,
                MontantRegle : value.MontantRegle,
                montantRegleFormat : '<input type="text" class="inputMontantRegle form-control input-edit text-end numberInput" value="'+value.MontantResteFormat+'" data-id="'+value.IDRELEVECLIENT+'">',
                checkValideReglement : '<input type="checkbox" class="form-check-input checkModalMultiReglement" data-id="'+value.IDRELEVECLIENT+'" >',
                observation : ''
            }

            tableFicheMultiReglementModal.row.add(ligne)
        })

        // Redessine le DataTable pour afficher les nouvelles lignes ajoutées
        tableFicheMultiReglementModal.draw();

        calculMontantTotalRegle()

        completeHandler()
    }

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

        if ($('#IDCLIENTmodalFicheReglement').val() == 0) {
            
            notif('danger', 'Erreur', 'Veuillez sélectionner le client qui éffectue le règlement')
            return 0
        }

        if ($('#inpMontantReglement').val() == 0 || _('inpMontantReglement').value.replace(/\s/g, '') == '') {
            
            notif('danger', 'Erreur', 'Veuillez saisir un montant de règlement valide')
            return 0
        }

        // Vérifie le mode de paiement
        if (_('IDMODEPAIEMENTmodalFicheReglement').value <= 0) {
            notif('danger', 'Erreur', 'Veuillez sélectionner un mode de paiement, SVP !');
            return 0;
        }
        
        // _('libNomClientModalFicheMultiReglement').innerHTML = afficherOptionSelectionneeSelect2('IDCLIENTmodalFicheReglement')
        // _('libMontantReglementModalFicheMultiReglement').innerHTML = formatNumber(_('inpMontantReglement').value.replace(/\s/g, '').replace(',', '.'))
        // _('libSoldeReglementModalFicheMultiReglement').innerHTML = _('libTtSoldeRegle').innerHTML      

        reinitialiserModalReglement = false

        // tableFicheMultiReglementModal.clear()

        // let dataTableAdd = []

        // dataAutoComplete.forEach((value) => {

        //     ligne = {

        //         attention : '',
        //         IDREGLEMENTCLIENT : _('IDREGLEMENT').value,
        //         IDRELEVECLIENT : value.IDRELEVECLIENT,
        //         numReleveFacture : value.NumeroReleveClient,
        //         libelleTypeDocument : value.libelleTypeDocument,
        //         DateReleveClientFormat : value.DateReleveClientFormat,
        //         LibelleQuinzaine : value.LibelleQuinzaine,
        //         TotalTTCReleveClientFormat : value.TotalTTCReleveClientFormat,
        //         MontantResteFormat : value.MontantResteFormat,
        //         typeDocument : value.typeDocument,
        //         SoldeReleveOuFacture : value.SoldeReleveOuFacture,
        //         MontantRegle : value.MontantRegle,
        //         montantRegleFormat : '<input type="text" class="inputMontantRegle form-control input-edit text-end numberInput" value="'+value.MontantResteFormat+'" data-id="'+value.IDRELEVECLIENT+'">',
        //         checkValideReglement : '<input type="checkbox" class="form-check-input checkModalMultiReglement" data-id="'+value.IDRELEVECLIENT+'" >',
        //         observation : ''
        //     }

        //     tableFicheMultiReglementModal.row.add(ligne)
        // })

        // // Redessine le DataTable pour afficher les nouvelles lignes ajoutées
        // tableFicheMultiReglementModal.draw();

        // calculMontantTotalRegle()

        chargerTableFicheMultiReglementModal(dataAutoComplete)

        $('#modalFicheReglement').modal('hide')
        $('#modalFicheMultiReglement').modal('show')
    })

    // Ferméture de la modal
    $('#modalFicheMultiReglement').on('hidden.bs.modal', function(){

        $('#modalFicheReglement').modal('show')
        reinitialiserModalReglement = true
    })

    // Script de check toutes les lignes 
    _('checkSelectAllMultiReglement').addEventListener('click', function() {

        let value = this.checked

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

        $(lignes).find('.checkModalMultiReglement').prop('checked', value)

        calculMontantTotalRegle()
    })

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

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

    // Script de modification de montant réglé
    $(document).on('input', '.inputMontantRegle', calculMontantTotalRegle)

    $(document).on('change', '.checkModalMultiReglement', calculMontantTotalRegle)

    // Script de validation du multi règlement 
    _('btnValiderMultiReglement').addEventListener('click', function(){

        let listeCheckCoche = []

        // Parcours de chaque case à cocher cochée avec la classe 'checkModalMultiReglement'
        $('.checkModalMultiReglement:checked').each(function() {

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

            let indexLigne = tableFicheMultiReglementModal.data().toArray().findIndex(item => item.IDRELEVECLIENT == IDFACTURE)
            let infoLigne = tableFicheMultiReglementModal.data().toArray()[indexLigne]
            let numReleveFacture = infoLigne.numReleveFacture
            let typeDocument = infoLigne.typeDocument
            
            // Ajoute la valeur de la case à cocher cochée dans le tableau
            listeCheckCoche.push({
                indexLigne : indexLigne,
                IDReleveOuFacture : IDFACTURE,
                montantRegle : $('.inputMontantRegle[data-id="'+IDFACTURE+'"]').val().replace(/\s/g, ''),
                numReleveFacture : numReleveFacture,
                typeDocument : typeDocument
            });
        });

        let data = {

            Tx_Reglement : _('Tx_Reglement').value,
            IDREGLEMENTCLIENT : _('IDREGLEMENT').value,
            IDMODEPAIEMENT : _('IDMODEPAIEMENTmodalFicheReglement').value,
            IDCLIENT : $('#IDCLIENTmodalFicheReglement').val(),
            MontantReglementClient : _('inpMontantReglement').value.replace(/\s/g, ''),
            DateReglementClient : _('inpDateReglementClientModalFicheReglement').value,
            DateReceptionReglementClient : _('inpDateReglementClientModalFicheReglement').value,
            DateEcheanceReglement : _('inpDateEcheanceReglementModalFicheReglement').value,
            ReferenceReglementClient : _('inpReferenceReglementClientModalFicheReglement').value,
            data : listeCheckCoche
        }        

        ajoutMultiReglement(data)
            .then((response) => {

                if (response.success != 1) {
                    return 0
                }

                if (response.tableErreur.length > 0) {
                    
                    response.tableErreur.forEach((value) => {

                        let indexLigne = value.index
                        let IDReleveOuFacture = value.IDReleveOuFacture
                        let infoLigne = tableFicheMultiReglementModal.data().toArray()[indexLigne]
                        
                        infoLigne.numReleveFacture = value.numReleveFacture
                        infoLigne.attention = `<img class="animate__animated animate__heartBeat animate__infinite animate__slower" src="{{ asset('assets/images/alert-triangle-gif.png') }}" style="height: 20px; width: 20px">`
                        infoLigne.montantRegleFormat = `<input type="text" class="inputMontantRegle form-control input-edit text-end numberInput" value="${value.MontantRegle}" data-id="${value.IDReleveOuFacture}">`
                        infoLigne.observation = value.erreur
                        infoLigne.checkValideReglement = '<input type="checkbox" class="form-check-input checkModalMultiReglement" data-id="'+IDReleveOuFacture+'" checked >'
                        
                        tableFicheMultiReglementModal.row(indexLigne).data(infoLigne).draw(false)
                        $(tableFicheMultiReglementModal.row(indexLigne).node()).addClass('ligne-modifiee');
                    })

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

                    notif('danger', 'Erreur', 'Erreurs rencontrée lors de l\'exécution de l\'opération')
                }else{

                    let IDCLIENT = $('#IDCLIENTmodalFicheReglement').val()

                    chargerLesSelectModalReglement(IDCLIENT, _('IDREGLEMENT').value, {infoREGLEMENT : 1, reglementDispo : 1, autoComplete : 1, tableModalReglement : 1})
                        .then(function(response){

                            if (response.success == 1) {

                                let infoREGLEMENT = response.infoREGLEMENT
                                
                                let REQ_REGLEMENTCLIENT_DISPO = response.REQ_REGLEMENTCLIENT_DISPO
                                $('#selectReglementDispo').html('<option value="0"> </option>')
                                $.each(REQ_REGLEMENTCLIENT_DISPO, function(key, value){

                                    $('#selectReglementDispo').append('<option value="'+value['IDREGLEMENTCLIENT']+'">'+value['NumeroReglementClient']+'</option>')
                                })

                                $('#selectReglementDispo').val(_('IDREGLEMENT').value).trigger('change')                        

                                if (_('IDREGLEMENT').value.replace(/\s/g, '') != '' && parseInt(_('IDREGLEMENT').value) > 0) {
                                    
                                    _('IDCLIENTmodalFicheReglement').setAttribute('disabled', '')
                                    _('selectReglementDispo').setAttribute('disabled', '')
                                }

                                _('libNbreLigneReglement').innerHTML = formatNumber(response.nbreLigne)
                                _('libTtSoldeReglement').innerHTML = formatNumber(response.ttSoldeReglement)
                                _('libTtMontantRegle').innerHTML = formatNumber(response.ttMontantRegle)
                                _('Tx_Reglement').value = response.ttMontantRegle
                                _('libTtSoldeRegle').innerHTML = formatNumber(infoREGLEMENT.MontantReglementClient - response.ttMontantRegle)

                                // Remplissage de l'autocomplete
                                let tableSelectReleve = response.tableSelectReleve
                                autocompleteReleve(tableSelectReleve)

                                let tableModalReglement = response.tableModalReglement
                                chargerTableFicheReglementModal(tableModalReglement)

                                chargerTableFicheMultiReglementModal(tableSelectReleve)
                            }
                        })
                }
            })
    })

</script>