@extends('models')
@section('titre-page', 'Échéanciers protocoles')
@section('content-body')
    <!-- Start::app-content -->

    <style>
        .height-input {
            height: 2.5rem !important;
        }

        .monDrop:hover{
            cursor: pointer;
            background: rgba(164, 131, 234, 0.2);
            transition: 2s;
        }

        ul.ui-autocomplete {
            z-index: 1100;
        }

        .ui-autocomplete {
            max-height: 350px;
            max-width: 1000px;
            overflow-y: auto;
            /* position: static !important; */
        }

        .ui-menu-item .ui-state-active {
            background: #D7C5FF8E;
            border: none;
            color: black
        }

        .ui-menu .ui-menu-item-wrapper {
            position: relative;
            padding: 1px 1em 1px 0.4em !important;
        }

        .autocomplete-table {
            width: 100%;
            border-collapse: collapse;
        }

        .autocomplete-table th,
        .autocomplete-table td {
            border-left: 1px solid #ddd;
            border-right: 1px solid #ddd;
            padding: 8px;
        }

        .autocomplete-table th {
            background-color: #b9b9b9;
        }

        .ui-menu-item {
            cursor: pointer;
        }

        .ui-menu-item-wrapper {
            white-space: nowrap;
        }
    </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-9 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é</a></li>
                            <li class="breadcrumb-item active" aria-current="page">Échéanciers protocoles</li>
                        </ol>
                    </nav>
                </div>

                <div class="col-xl-3 col-lg-8 col-md-8 mx-0">
                    <div class="d-flex justify-content-between">
                        <div class="col-xl-4 col-lg-4 col-sm-4">
                            <button type="button" class="btn btn-secondary-light btn-wave d-flex"
                                id="btnModalNewEcheance">
                                <i class=" ri ri-add-circle-line me-1"></i>Ajouter
                            </button>
                        </div>
                        <div class="col-xl-7 col-lg-4 col-sm-4 col-4">
                            <button type="button" id="btnPrint" class="btn btn-warning-light d-flex justify-content-center w-100">
                                Imprimer
                            </button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- Page Header Close -->

    <!-- Start:: row-7 -->
    <div class="row">
        <div class="col-xl-12">
            <div class="card custom-card">
                <div class="card-body">
                    <div class="row px-4">
                        <div class="col-xl-6 col-lg-6 col-sm-6 col-6 d-flex align-items-center">
                            <div class="me-2">
                                <span class="avatar avatar-rounded bg-primary-transparent text-primary">
                                    <i class="bi bi-cash-stack fs-24"></i>
                                </span>
                            </div>
                            <div class="flex-fill d-flex">
                                <div class="">
                                    <p class="fs-18 mb-0 text-primary fw-semibold" id="nbreEcheance"></p>
                                    <span class="text-muted fs-12">Nbre d'échéance</span>
                                </div>
                            </div>
                        </div>
                        <div class="col-xl-6 col-lg-6 col-sm-6 col-6 d-flex align-items-center">
                            <div class="me-2">
                                <span class="avatar avatar-rounded bg-success-transparent">
                                    <i class="bi bi-cash-stack fs-24"></i></span>
                            </div>
                            <div class="flex-fill">
                                <p class="fs-18 mb-0 text-success fw-semibold" id="totalEcheancePeriode"></p>
                                <span class="text-muted fs-12">Total des échéances de la période</span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- End:: row-7 -->

    <div class="row">
        <div class="col-xl-12">
            <div class="card custom-card">
                <div class="card-header pe-0 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">Période&nbsp;:</p>
                                <input type="text" class="form-control text-center" name="filtrePeriode"
                                    id="filtrePeriode" />
                            </div>
                            <div class="col-xl-3 col-md-2 mb-2">
                                <p class="mb-0 text-muted">Client</p>
                                <select class="form-select" id="IDCLIENT" name="IDCLIENT">
                                </select>
                            </div>
                            <div class="col-xl-3 col-lg-3 col-md-3 mb-4">
                                <p class="mb-0 text-muted">Type protocole :</p>
                                <select class="form-select" id="IDPROTOCOLECLIENT_TYPE" name="IDPROTOCOLECLIENT_TYPE">

                                </select>
                            </div>
                            <div class="col-xl-2 col-lg-3 col-md-3 mb-4">
                                <p class="mb-0 text-muted">État :</p>
                                <select class="form-select" id="selectEtat" name="selectEtat">
                                    <option value="0">TOUS</option>
                                    <option value="1">PAYÉ</option>
                                    <option value="2">NON PAYÉ</option>
                                </select>
                            </div>
                            <div class="col-xl-1 col-md-1 mb-0 pt-1">
                                <button type="button" class="btn btn-primary btn-wave float-end mt-2" 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 tablehover text-nowrap overflow-auto w-100" id="tableEcheancierProtocole">
                            <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="NumeroProtocoleCLientFormat" class="text-center colTable">N° Protocole</th>
                                    <th data-column="CodeClient" class="text-center colTable">Code client</th>
                                    <th data-column="NomClient" class="text-center colTable">Raison sociale</th>
                                    <th data-column="IntentionCommande" data-class="text-center" class="text-center colTable">Posit°</th>
                                    <th data-column="LibelleProtocoleClient_Type" class="text-center colTable">Type protocole</th>
                                    <th data-column="DateEcheanceReglementFormat" data-class="text-center" class="text-center colTable">Date d'échéance</th>
                                    <th data-column="MontantReglementClientFormat" data-class="text-end" class="text-center colTable">Montant de l'échéance</th>
                                </tr>
                            </thead>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- End::app-content -->

    {{-- Section modal --}}    
    <!-- Modal modifier où éffectuer un rêglement -->
    <div class="modal fade" id="modalModifierEffectuerReglement" tabindex="-1" data-bs-focus="false" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered modal-md" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h6 class="modal-title" id="staticBackdropLabel2"> Saisie de rêglement </h6>
                    <button type="button" class="btn-close  bg-light" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <form id="formModifierEffectuerReglement">
                        <div class="row">
                            <input type="number" id="IDREGLEMENTCLIENT" name="IDREGLEMENTCLIENT" style="display : none;">
                            <div class="col-md-6 mb-2">
                                <p class="text-muted mb-0">Mode de paiement :</p>
                                <select class="form-select" id="IDMODEPAIEMENT" name="IDMODEPAIEMENT">
                                    
                                </select>
                            </div>
                            <div class="col-md-6 mb-2">
                                <p class="text-muted mb-0">Montant du rêglement :</p>
                                <input type="text" id="MontantReglementClient" name="MontantReglementClient" class="numberInput form-control text-end">
                            </div>
                            <div class="col-md-6 mb-2">
                                <p class="text-muted mb-0">Date de saisie : </p>
                                <input type="date" id="DateReceptionReglementClient" name="DateReceptionReglementClient" class="form-control">
                            </div>
                            <div class="col-md-6 mb-2">
                                <p class="text-muted mb-0">Date valeur : </p>
                                <input type="date" id="DateEcheanceReglement" name="DateEcheanceReglement" class="form-control">
                            </div>
                            <div class="col-md-12 mb-2">
                                <p class="text-muted mb-0">N° pièce ou observation : </p>
                                <textarea class="form-control" name="ReferenceReglementClient" id="ReferenceReglementClient" cols="30" rows="5"></textarea>
                            </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="btnValiderModifierEffectuerReglement">
                        <i class='bx bx-check-circle mt-1 me-1' style="cursor:pointer;"></i> Valider
                    </label>
                </div>
            </div>
        </div>
    </div>
    
    <!-- Modal ajouter rêglement -->
    <div class="modal fade" id="modalAjouterReglement" tabindex="-1" data-bs-focus="false" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered modal-md" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h6 class="modal-title" id="staticBackdropLabel2">Création d'une échéance de protocole</h6>
                    <button type="button" class="btn-close  bg-light" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <form id="formModalNewEcheance">
                        <div class="w-100 d-flex justify-content-center">
                            <input type="number" id="inpIDPROTOCOLECLIENT" name="IDPROTOCOLECLIENT" style="display : none;">
                            <input type="number" id="inpIDCLIENT" name="IDCLIENT" style="display : none;">
                            <div class="col-md-6 mb-2">
                                <p class="text-muted mb-0">N° Protocole</p>
                                <input type="text" class="text-center form-control" name="NumeroProtocoleCLient" id="NumeroProtocoleCLient">
                            </div>
                        </div>
                        <div class="w-100 border rounded py-2 ps-2 mb-2" style="background: #42799747;">
                            <div class="d-flex mt-1 mb-1">
                                <label>Type de protocole :</label>
                                <p class="ms-2 mb-0" id="libTypeProtocole"></p>
                            </div>
                            <div class="d-flex mt-1 mb-1">
                                <label>Code client :</label>
                                <p class="ms-2 mb-0" id="libCodeClient"></p>
                            </div>
                            <div class="d-flex mt-1 mb-1">
                                <label>Client :</label>
                                <p class="ms-2 mb-0" id="libNomClient"></p>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-md-6 mb-2">
                                <p class="text-muted mb-0">Montant à rembourser :</p>
                                <input type="text" class="form-control text-end numberInput" id="inpMontantTTCProtocoleClient" name="MontantTTCProtocoleClient" style="background : #F1F7CF;" disabled>
                            </div>
                            <div class="col-md-6 mb-2">
                                <p class="text-muted mb-0">Somme des échéances :</p>
                                <input type="text" class="form-control text-end numberInput" id="inpSommeEcheance" name="sommeEcheance" style="background : #F1F7CF;" disabled>
                            </div>
                            <div class="col-md-6 mb-2">
                                <p class="text-muted mb-0">Date d'échéance :</p>
                                <input type="date" class="form-control" id="inpDateEcheanceReglement" name="DateEcheanceReglement">
                            </div>
                            <div class="col-md-6 mb-2">
                                <p class="text-muted mb-0">Montant d'échéance :</p>
                                <input type="text" class="form-control text-end numberInput" id="inpMontantReglementClient" name="MontantReglementClient">
                            </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="btnValiderCreationEcheance">
                        <i class='bx bx-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 tableEcheancierProtocole

        $('input[name="filtrePeriode"]').daterangepicker({
            "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": 1
            },
            opens: 'center',
            startDate: moment().subtract(6, 'days'),
            endDate: moment()
        });

        function listingTypeProtocole(){

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

                $.ajax({

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

                        if (response.success == 1) {
                            
                            resolve(response)
                        }else{

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

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

        function chargerComboTypeProtocole(){

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

                    if (response.success == 1) {
                    
                        let data = response.data
                        data.unshift({
                            'IDPROTOCOLECLIENT_TYPE' : 0,
                            'LibelleProtocoleClient_Type' : 'TOUS LES TYPES'
                        })
                        populateSelect('#IDPROTOCOLECLIENT_TYPE', {
                            data : data,
                            valueKey : 'IDPROTOCOLECLIENT_TYPE',
                            textKey : 'LibelleProtocoleClient_Type'
                        })

                        // data[0].LibelleProtocoleClient_Type = 'SÉLECTIONNER TYPE'
                        // populateSelect('#IDPROTOCOLECLIENT_TYPEModalProtocoleClient', {
                        //     data : data,
                        //     valueKey : 'IDPROTOCOLECLIENT_TYPE',
                        //     textKey : 'LibelleProtocoleClient_Type',
                        //     additionalAttributes: {
                        //         'data-ProtocolePrisStock': function(option) {
                        //             return option.ProtocolePrisStock;
                        //         }
                        //     }
                        // })
                    }
                })
        }

        function listeLigneSelectionne(attr = 'data-id') {

            let data = []

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

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

                if (value.checked == true) {
                    data.push(value.getAttribute(attr))
                }
            })
            return data
        }

        listingComboClient(['#IDCLIENT', '#IDCLIENTModalPrintBordereauEscompte'])
            .then(function(data){

                $('#IDCLIENT').select2()
                $('#IDCLIENTModalPrintBordereauEscompte').select2({
                    dropdownParent : $('#modalPrintBordereauEscompte')
                })
            })

        function chargerTableEcheancierProtocole(){

            return new Promise(function(resolve, reject){

                $.ajax({

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

                        if (response.success == 1) {

                            let obj = response.data

                            _('nbreEcheance').innerHTML = obj.length
                            _('totalEcheancePeriode').innerHTML = formatNumber(response.totalEcheancePeriode)

                            tableEcheancierProtocole = remplissageDataTable({
                                IdentifiantDuTableau : '#tableEcheancierProtocole',
                                bFilter : true,
                                obj : obj,
                                lengthChange : true,
                                pageLength : 20
                            })

                       
                            let divShowPer = $('#tableEcheancierProtocole_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="suppLignesCochee" class="bx bxs-trash text-danger me-1 mt-2" style="font-size : 13px; cursor : pointer;"></i><span id="labelSuppLignesCochee" class="fw-bold mt-1 me-3" style="cursor : pointer;">Supprimer les lignes cochées</span>
                                         <span class="d-flex align-items-center px-2" 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-echeancier-protocole" class="fw-bold" style="cursor : pointer;">Exporter</span>
                                            </span>
                                        `)
                            resolve(obj)
                            
                        }else{

                            notifError(response.msg)
                            reject()
                            $('#tableEcheancierProtocole').DataTable().destroy()
                            $('#tableEcheancierProtocole').DataTable({
                                bFilter : true,
                                language : languageTable,
                                data : []
                            })

                            _('nbreEcheance').innerHTML = 0
                            _('totalEcheancePeriode').innerHTML = 0
                        }

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

                        notifError('Échec de l\'opération.')
                        reject()
                        $('#tableEcheancierProtocole').DataTable({
                            bFilter : true,
                            language : languageTable,
                            data : []
                        })

                        _('nbreEcheance').innerHTML = 0
                        _('totalEcheancePeriode').innerHTML = 0

                        completeHandler()
                    }
                })
            })
        }

        listingComboModePaiement('#IDMODEPAIEMENT')

        _('formFiltre').addEventListener('submit', (e) => e.preventDefault())

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

                _('filtrePeriode').value = explodeDate('-', data.debutPeriode) + ' - ' + explodeDate('-', data.finPeriode)
                $('#IDCLIENT').val(data.IDCLIENT).trigger('change')
                $('#IDPROTOCOLECLIENT_TYPE').val(data.IDPROTOCOLECLIENT_TYPE).trigger('change')
                $('#selectEtat').val(data.ChoixEtat).trigger('change')

                chargerTableEcheancierProtocole()
                    .then(function(data){

                        completeHandler()
                    })
            })

        chargerComboTypeProtocole()
    </script>

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

            let value = this.checked

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

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

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

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

    <!-- Script actualiser les filtres du tableau -->
    <script>

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

            let session = 'filterMemory.filtreEcheancierProtocole'

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

            let valeurSession = {

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

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

                    chargerTableEcheancierProtocole()
                        .then(function(data){

                            completeHandler()
                        })
                })
        })
            
    </script>

    <!-- Script de modification ou d'éffectuement de rêglement -->
    <script>

        function infoEcheancierProtocole(IDREGLEMENTCLIENT){

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

                $.ajax({

                    url : "{{ route('infoEcheancierProtocole') }}",
                    type : 'GET',
                    data : {
                        IDREGLEMENTCLIENT : IDREGLEMENTCLIENT
                    },
                    dataType : 'json',
                    success : function(response){

                        if (response.success == 1) {
                            
                            resolve(response)
                        }else{

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

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

        function modifierEffectuerReglement(){

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

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

                $.ajax({

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

                        if (response.success == 1) {
                            
                            resolve(response)
                        }else{

                            resolve(response)
                            notifError(response.msg)
                        }

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

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

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

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

            infoEcheancierProtocole(IDREGLEMENTCLIENT)
                .then((response) => {

                    if (response.success == 1) {

                        let info = response.info
                        
                        _('IDREGLEMENTCLIENT').value = info.IDREGLEMENTCLIENT
                        $('#IDMODEPAIEMENT').val(info.IDMODEPAIEMENT).trigger('change')
                        _('MontantReglementClient').value = Math.round(info.MontantReglementClient)

                        if (info.ReglementNonValide == 0) {
                            
                            _('ReferenceReglementClient').value = info.ReferenceReglementClient
                            _('DateReceptionReglementClient').value = info.DateReceptionReglementClient
                            _('DateEcheanceReglement').value = info.DateEcheanceReglement
                        }else{

                            remplirChampDate('today', 'DateReceptionReglementClient')
                            remplirChampDate('today', 'DateEcheanceReglement')
                            _('ReferenceReglementClient').value = ''
                        }

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

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

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

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

            confirmMdp( '{{ csrf_token() }}', modifierEffectuerReglement, null, title = '', data = { sousTitre: '', infoJNL: "CREATION/MODIFICATION DE REGLEMENT CLIENT", typeJNL: 3, CodeDroit: "DC_ReglementClient" })
                .then((response) => {

                    if (response.success == 1) {
                        
                        notif('success', 'Succès', 'Règlement effectué avec succès !')
                        chargerTableEcheancierProtocole()
                            .then(function(data){

                                completeHandler()
                            })
                        $('#modalModifierEffectuerReglement').modal('hide')
                    }
                })
        })

    </script>

    <!-- Script de création de nouvelle échéance de protocole -->
    <script>

        function infoPROTOCOLECLIENT(IDPROTOCOLECLIENT = 0, NumeroProtocoleCLient = '', lignes = 1){

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

                $.ajax({

                    url : "{{ route('infoPROTOCOLECLIENT') }}",
                    type : 'GET',
                    data : {
                        IDPROTOCOLECLIENT : IDPROTOCOLECLIENT,
                        NumeroProtocoleCLient : NumeroProtocoleCLient,
                        lignes : lignes
                    },
                    dataType : 'json',
                    beforeSend : progressHandler(),
                    success : function(response){

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

                            resolve(response)
                        }else{

                            resolve(response)
                            notifError(response.msg)
                        }

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

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

        function chargerModalNewEcheance(data){

            _('inpIDPROTOCOLECLIENT').value = data.IDPROTOCOLECLIENT
            _('libTypeProtocole').innerHTML = data.LibelleProtocoleClient_Type
            _('libCodeClient').innerHTML = data.CodeClient
            _('libNomClient').innerHTML = data.NomClient
            _('inpMontantTTCProtocoleClient').value = formatNumber(data.MontantTTCProtocoleClient)
            _('inpSommeEcheance').value = formatNumber(data.la_somme_montantreglementclient)
            _('inpIDCLIENT').value = data.IDCLIENT

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

        function creerNewEcheanche(){

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

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

                $.ajax({

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

                        if (response.success == 1) {

                            resolve(response)
                        }else{

                            resolve(response)
                            notifError(response.msg)
                        }

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

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

        _('formModalNewEcheance').addEventListener('submit', (e) => e.preventDefault())

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

            _('inpIDPROTOCOLECLIENT').value = 0
            _('libTypeProtocole').innerHTML = ''
            _('libCodeClient').innerHTML = ''
            _('libNomClient').innerHTML = ''
            _('inpMontantTTCProtocoleClient').value = formatNumber(0)
            _('inpSommeEcheance').value = formatNumber(0)
            _('inpIDCLIENT').value = 0

            $('#modalAjouterReglement').modal('show')
            remplirChampDate('today', 'inpDateEcheanceReglement')
            _('inpMontantReglementClient').value = 0

        })

        _('NumeroProtocoleCLient').addEventListener('keypress', function(e){

            let NumeroProtocoleCLient = this.value

            if (e.keyCode == 13) {
                
                infoPROTOCOLECLIENT(null, NumeroProtocoleCLient, 0)
                    .then((response) => {

                        if (response.success == 2) {
                            
                            let info = response.info
                            chargerModalNewEcheance(info)
                        }
                    })
            }
        })

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

            if (_('inpIDPROTOCOLECLIENT').value == 0 || _('inpIDPROTOCOLECLIENT').value.replace(/\s/g,'') == '') {
                
                notif('danger', 'Erreur', 'Veuillez sélectionner le protocole, SVP')
                return 0
            }

            if (_('inpMontantReglementClient').value == 0 || _('inpMontantReglementClient').value.replace(/\s/g,'') == '') {
                
                notif('danger', 'Erreur', 'Veuillez saisir le montant de l\'échéance, SVP.')
                return 0
            }            

            if (_('inpDateEcheanceReglement').value == null || _('inpDateEcheanceReglement').value == '') {
                
                notif('danger', 'Erreur', 'Veuillez saisir le date de l\'échéance, SVP.')
                return 0
            }

            let SommeEcheance = parseFloat(_('inpSommeEcheance').value.replace(',', '.').replace(/\s/g,''))
            let MontantReg = parseFloat(_('inpMontantReglementClient').value.replace(',', '.').replace(/\s/g,''))
            let MontantARembourser = parseFloat(_('inpMontantTTCProtocoleClient').value.replace(',', '.').replace(/\s/g,''))

            if ((SommeEcheance + MontantReg) > MontantARembourser) {
                
                notif('danger', 'Erreur', 'La somme des échéances ne peut être supérieure au montant à rembourser du protocole.')
                return 0
            }

            confirmMdp( '{{ csrf_token() }}', creerNewEcheanche, null, title = '', data = { sousTitre: '', infoJNL: "CREATION/MODIFICATION DE REGLEMENT CLIENT", typeJNL: 3, CodeDroit: "DC_ReglementClient" })
                .then((response) => {

                    if (response.success == 1) {
                        
                        notif('success', 'Succès', 'Echéance créée avec succès')
                        chargerTableEcheancierProtocole()
                            .then(function(data){

                                completeHandler()
                            })
                        $('#modalAjouterReglement').modal('hide')
                    }
                })
                .catch((error) => notifError('Échec de l\'opération.'))
        })

    </script>

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

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

            $.ajax({

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

                    data : tableEcheancierProtocole.rows().data().toArray(),
                    periode : _('filtrePeriode').value.replace('-', 'au'),
                    NomClient : afficherOptionSelectionnee('IDCLIENT'),
                    _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 {

                        notifError(response.msg)
                    }

                    completeHandler()
                },
                error : function(){

                    notifError('Échec de l\'opération.')
                    completeHandler()
                }
            })
        })
    </script>

    <!-- Script suppression des lignes d'échéanciers protocole -->
    <script>

        var listeDesLigneSelectionne

        function supprimerEcheancierProtocole(){

            $.ajax({

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

                    if (response.success == 1) {

                        chargerTableEcheancierProtocole()
                            .then(function(data){

                                completeHandler()
                            })
                    }else{

                        notifError(response.msg)
                    }

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

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

        $(document).on('click', '#suppLignesCochee', function(){
            listeDesLigneSelectionne = listeLigneSelectionne()
            if (listeDesLigneSelectionne.length <= 0) {
                notif('danger', 'Erreur', 'Veuillez sélectionner les lignes à supprimer')
                return 0
            }
            confirmMdp('{{ csrf_token() }}', supprimerEcheancierProtocole, null, '', { sousTitre: '', infoJNL: "SUPPRESSION DE REGLEMENT CLIENT", typeJNL: 3, CodeDroit: "DG_PeutSuppirmer" })
        })

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

        $(document).on('click', '#btn-export-echeancier-protocole', function(){
            var data = getCleanedTableData('tableEcheancierProtocole')
            const filename = file_name("ECHEANCIER-PROTOCOLE");
            const tabs_format = { G: '#,##0' };
            download_excel_file('{{route("export_global_excel.export")}}', data, filename,[], tabs_format)
        })
        
    </script>
@endsection