@extends('models')
@section('titre-page', 'Règlements clients utilisés')
@section('content-body')


    <!-- Start::app-content -->
    <style>
        .height-input {
            height: 2.5rem !important;
        }
    </style>

    <!-- Page Header -->
    <div class="d-md-flex d-block align-items-center justify-content-between mt-4 page-header-breadcrumb">
        <!-- Start:: row-7 -->
        <div class="col-xl-12 col-12">
            <div class="row mb-3">
                <div class="col-xl-8 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">Règlements clients utilisés</li>
                        </ol>
                    </nav>
                </div>

                <div class="col-xl-4 col-lg-8 col-md-8 mx-0">
                    <div class="d-flex justify-content-between">
                        <div class="col-xl-6 col-lg-6 col-sm-6">
                            <button type="button" class="btn btn-secondary-light btn-wave d-flex"
                                id="bntModalNewReglement">
                                <i class=" ri ri-add-circle-line me-1"></i>Nouveau Règlement
                            </button>
                        </div>
                        <div class="col-xl-6 col-lg-6 col-sm-4 col-6">
                            <div class="btn-group w-100" style="margin-top : 1px;">
                                <button type="button" class="btn btn-warning-light dropdown-toggle d-flex justify-content-center"
                                    data-bs-toggle="dropdown" data-bs-auto-close="true" aria-expanded="false">
                                    Imprimer
                                </button>
                                <ul class="dropdown-menu">
                                    <li>
                                        <a class="dropdown-item" href="javascript:void(0);" id="btnModalPrintBordereauEscompte">
                                            Bordereaux d'escomptes par Clients
                                        </a>
                                    </li>
                                    <li>
                                        <hr class="dropdown-divider">
                                    </li>
                                    <li>
                                        <a class="dropdown-item" href="javascript:void(0);" id="btnPrintLigneSelect">
                                            Ligne(s) de Règlement(s) sélectionné(s)
                                        </a>
                                    </li>
                                </ul>
                            </div>
                        </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-4 col-lg-4 col-sm-4 col-6 d-flex align-items-center">
                            <div class="me-2">
                                <span class="avatar avatar-rounded bg-primary-transparent text-primary">
                                    <i class="bx bx-dice-3 fs-24"></i>
                                </span>
                            </div>
                            <div class="flex-fill d-flex">
                                <div class="">
                                    <p class="fs-18 mb-0 text-primary fw-semibold" id="nbreReglement"></p>
                                    <span class="text-muted fs-12">Nbre de règlement</span>
                                </div>
                            </div>
                        </div>
                        <div class="col-xl-4 col-lg-4 col-sm-4 col-6 d-flex align-items-center">
                            <div class="me-2">
                                <span class="avatar avatar-rounded bg-light text-default">
                                    <i class="bi bi-cash-stack fs-24"></i></span>
                            </div>
                            <div class="flex-fill">
                                <p class="fs-18 mb-0 fw-semibold" id="totalReglement"></p>
                                <span class="text-muted fs-12">Total règlement</span>
                            </div>
                        </div>
                        <div class="col-xl-4 col-lg-4 col-sm-4 col-1 d-flex align-items-center">
                            <div class="me-2">
                                <span class="avatar avatar-rounded bg-success-transparent">
                                    <i class="bi bi-cash-stack fs-24"></i></span>
                            </div>
                            <div class="flex-fill">
                                <p class="fs-18 mb-0 text-success fw-semibold" id="totalEscompte"></p>
                                <span class="text-muted fs-12">Total escompte</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">
                    <form id="formFiltre" class="w-100">
                        <div class="row w-100">
                            <div class="col-xl-2 col-md-2 mb-2">
                                <p class="mb-0 text-muted">Site</p>
                                <select name="IDAGENCE" id="IDAGENCE" class="form-select"  @disabled(checkIfDroit('DG_AccesMultiSite'))></select>
                            </div>
                            <div class="col-xl-2 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-2 col-md-3 mb-0">
                                <p class="mb-0 text-muted">Mode paiement</p>
                                <select class="form-select selectModePaiement" id="IDMODEPAIEMENT" name="IDMODEPAIEMENT">

                                </select>
                            </div>
                            
                            <div class="col-xl-2 col-md-3 mb-0 pt-2">
                                <div class="border rounded w-100 mt-1 d-flex pt-2 ps-2" style="height: 40px;">
                                    <input class="form-check-input me-2" type="checkbox" id="checkSelonEcheance" >
                                    <label class="form-check-label ellipsis" title="Selon Échéance règlement" style="cursor: pointer;" for="RemiseCommercial">
                                        Selon Échéance règlement
                                    </label>
                                </div>
                            </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 text-nowrap overflow-auto" id="tableReglementClient">
                            <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="NumeroReglementClientFormat" class="text-center colTable">N° Règlement</th>
                                    <th data-column="protocol" data-class="text-center" class="text-center colTable">P</th>
                                    <th data-column="document" class="text-center colTable">Document</th>
                                    <th data-column="numDocument" class="text-center colTable">N° Document</th>
                                    <th data-column="Quinzaine" data-class="text-center" class="text-center colTable">Quinzaine</th>
                                    <th data-column="CodeClient" class="text-center colTable">Code Client</th>
                                    <th data-column="NomClient" class="text-center colTable">Client</th>
                                    <th data-column="listePositive" class="text-center colTable">Liste <br>Positive</th>
                                    <th data-column="montantFormat" data-class="text-end pe-3" class="text-center colTable">Montant</th>
                                    <th data-column="LibelleModePaiement" data-class="text-center">Mode paiement</th>
                                    <th data-column="DateEcheanceReleveFormat" data-class="text-center" class="text-center colTable">Échéance Facture</th>
                                    <th data-column="DateReglementClientFormat" data-class="text-center" class="text-center colTable">Date Règlement</th>
                                    <th data-column="heureReglement" data-class="text-center" class="text-center colTable">Heure Règ.</th>
                                    <th data-column="DateEcheanceReglementFormat" data-class="text-center" class="text-center colTable">Date Valeur Règ.</th>
                                    <th data-column="CreeLeFormat" data-class="text-center" class="text-center colTable">Date Saisie</th>
                                    <th data-column="MontantRegleSurReleveFormat" data-class="text-end pe-3" class="text-center colTable">Montant Réglé</th>
                                    <th data-column="TauxEscompteClientFormat" data-class="text-end pe-3" class="text-center colTable">Tx Escompte</th>
                                    <th data-column="MontantEscompteCliFormat" data-class="text-end pe-3" class="text-center colTable">Montant Escompte</th>
                                    <th data-column="CreePar" class="text-center colTable">Saisie par</th>
                                    <th data-column="ReferenceReglementClient" class="text-center colTable">N° Pièce ou Observation</th>
                                </tr>
                            </thead>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- End::app-content -->

    {{-- Section modal --}}
    
    <!-- Modal impression bordereau descompte -->
    <div class="modal fade" id="modalPrintBordereauEscompte" tabindex="-1" data-bs-focus="false" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h6 class="modal-title" id="staticBackdropLabel2"> Impression de bordereaux d'escompte</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">
                        <div class="col-md-6 mb-2">
                            <p class="text-muted mb-0">Mois :</p>
                            <select class="form-select" id="mois">
                                <option value="01">Janvier</option>
                                <option value="02">Février</option>
                                <option value="03">Mars</option>
                                <option value="04">Avril</option>
                                <option value="05">Mai</option>
                                <option value="06">Juin</option>
                                <option value="07">Juillet</option>
                                <option value="08">Août</option>
                                <option value="09">Septembre</option>
                                <option value="10">Octobre</option>
                                <option value="11">Novembre</option>
                                <option value="12">Décembre</option>
                            </select>
                        </div>
                        <div class="col-md-6 mb-2">
                            <p class="text-muted mb-0">Année :</p>
                            <select class="form-select" id="annee">
                                @php
                                    $annee = date('Y');

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

                                        <option value="{{ $i }}" @php if($i == date('Y')){ echo "selected"; }@endphp >{{ $i }}</option>
                                @php
                                    }
                                @endphp
                            </select>
                        </div>
                        <div class="col-md-12 mb-2">
                            <p class="text-muted mb-0">Client : </p>
                            <select class="form-select" id="IDCLIENTModalPrintBordereauEscompte"></select>
                        </div>
                    </div>
                </div>
                <div class="modal-footer p-0">
                    <label
                        class="btn btn-warning-light btn-wave w-100 flex-fill d-flex justify-content-center align-items-center mt-2"
                        id="btnPrintBordereauEscompte">
                        <i class='bx bx-printer  mt-1 me-1' style="cursor:pointer;"></i> Imprimer
                    </label>
                </div>
            </div>
        </div>
    </div>
@endsection

@section('script')
    {{-- Script executé au chargement de la page --}}
    <script>

        var tableReglementClient

        $('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 listeLigneSelectionne(attr = 'data-id') {

            let data = []

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

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

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

        listingComboAgence('#IDAGENCE')
            .then(function(){

                // $('#IDAGENCE').val(_('idSiteEnCours').value).trigger('change')
            })

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

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

        function chargerTableReglementClient(){

            return new Promise(function(resolve, reject){

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

                $.ajax({

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

                        if (response.success == 1) {

                            let obj = response.data

                            _('nbreReglement').innerHTML = formatNumber(obj.length)
                            _('totalReglement').innerHTML = formatNumber(response.totalReglement)
                            _('totalEscompte').innerHTML = formatNumber(response.totalEscompte)

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

                            divShowPer = $('#tableReglementClient_filter')
                            // Division des valeur totales
                            BroDivShowPer = divShowPer.parent().prev()
                            BroDivShowPer.addClass('d-flex pt-2')
                            BroDivShowPer.prepend('<i id="suppLignesCochée1" class="bx bxs-trash text-danger me-1 mt-2" style="font-size : 18px; cursor : pointer;"></i><span id="labelSuppLignesCochee1" class="fw-bold mt-2 me-3" style="cursor : pointer;">Supprimer les lignes cochées</span>')
                             BroDivShowPer.prepend(`<span class="d-flex align-items-center px-2 mt-1" style="cursor : pointer;">
                                                        <i class='ri ri-file-excel-2-line text-success me-1' style="font-size : 18px; cursor : pointer;"></i>
                                                        <span id="btn-export-reglement-client" class="fw-bold" style="cursor : pointer;">Exporter</span>
                                                    </span>`)

                            placeboutonPreferenceColonne('tableReglementClient','ReglementClientShowColonne')
                            recuperationPreferenceColonneUtilisateur('tableReglementClient','ReglementClientShowColonne')
                    
                            resolve(obj)
                            
                        }else{

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

                            _('nbreReglement').innerHTML = 0
                            _('totalReglement').innerHTML = 0
                            _('totalEscompte').innerHTML = 0

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

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

                        _('nbreReglement').innerHTML = 0
                        _('totalReglement').innerHTML = 0
                        _('totalEscompte').innerHTML = 0

                        completeHandler()
                    }
                })
            })
        }

        $(document).on('click', '.ReglementClientShowColonne', function() {
            appliquerPreferenceColonne('tableReglementClient','Reglement-Client',$(this),'ReglementClientShowColonne')
        })

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

                _('filtrePeriode').value = explodeDate(data.debutPeriode, '-') + ' - ' + explodeDate( data.finPeriode, '-')
                $('#IDAGENCE').val(data.IDAGENCE).trigger('change')
                $('#IDCLIENT').val(data.IDCLIENT).trigger('change')
                $('#IDMODEPAIEMENT').val(data.IDMODEPAIEMENT).trigger('change')
                _('checkSelonEcheance').checked = (data.checkSelonEcheance) == 1 ? true : false

                chargerTableReglementClient()
                    .then(function(data){
                        completeHandler()
                    })
            })

    </script>

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

            let value = this.checked

            let lignes = tableReglementClient.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>

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

            e.preventDefault()
        })

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

            let session = 'filterMemory.filtreReglementClient'

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

            let valeurSession = {

                'IDAGENCE' : _('IDAGENCE').value,
                'debutPeriode' : Periode[0],
                'finPeriode' : Periode[1],
                'IDCLIENT' : _('IDCLIENT').value,
                'IDMODEPAIEMENT' : _('IDMODEPAIEMENT').value,
                'checkSelonEcheance' : (_('checkSelonEcheance').checked == true) ? 1 : 0
            }

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

                    chargerTableReglementClient()
                        .then(function(data){

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

    @include('pages/comptabilite/modalReglement')
    
    <!-- Script de suppression des lignes du tableau principal -->
    <script>

        $(document).on('click', '#suppLignesCochée1', function(){

            ligneSelectionne = listeLigneSelectionne()

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

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

        $(document).on('click', '#labelSuppLignesCochee1', function(){
            $('#suppLignesCochée1').click()
        })
    </script>

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

        // Impression de bordereaux de règlements par client
        function printBordereauxReglementParClient(mois, annee, IDCLIENT){

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

                $.ajax({

                    url : "{{ route('printBordereauxReglementParClient') }}",
                    type : 'POST',
                    data : {
                        mois : mois,
                        annee : annee,
                        IDCLIENT : IDCLIENT,
                        _token : '{{ csrf_token() }}'
                    },
                    dataType : 'json',
                    beforeSend : progressHandler(),
                    success : function(response){

                        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é')
                        }

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

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

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

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

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

            printBordereauxReglementParClient(_('mois').value, _('annee').value, _('IDCLIENTModalPrintBordereauEscompte').value)
        })

        // Impression des lignes de règlement sélectionné
        function printLigneReleveReglement(data = []){

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

                $.ajax({

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

                        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é')
                        }
                        completeHandler()
                    },
                    error : function(error){

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

        function listeDesIndexes() {
            let indexes = [];

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

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

            return indexes;
        }

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

            let ligneSelectionne = listeDesIndexes()

            let data = []

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

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

            printLigneReleveReglement(data)
        })

        $(document).on('click', '#btn-export-reglement-client', function(){

            var data = getCleanedTableData('tableReglementClient')
            const filename = file_name("REGLEMENT_CLIENT");
            const tabs_format = { P: '#,##0', I: '#,##0', R: '#,##0'};
            download_excel_file('{{route("export_global_excel.export")}}', data, filename, [], tabs_format)
        })

    </script>
@endsection