@extends('models')

@section('titre-page', 'Journal caisse')
@section('content-body')
    

    @php

        $listeMonnaie = listeTauxMonnaie();

        $symbDeviseDeBase = $listeMonnaie -> where('MonnaieParDefaut', true) -> first() -> SymboleMonnaie ?? '';
    @endphp

    <!-- 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-6 col-lg-6 col-md-6 col-sm-12 mt-2 mb-md-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">Gestion caisse</li>
                        </ol>
                    </nav>
                </div>

                <div class="col-xl-6 col-lg-4 col-md-6 col-sm-12 mx-0">
                    <div class="row flex-row-reverse">
                        <div class="col-md-4">
                            <button type="button" class="btn btn-success-light btn-wave d-flex w-100 justify-content-center align-items-center" id="btnExportExcel">
                                <i class="ri-file-excel-2-line me-1"></i>Exporter
                            </button>
                        </div>
                        @if(in_array('GC_AccesRemiseCentrale', session('LISTE_DROIT_ACCESS')))
                        <div class="col-md-4">
                            <button type="button" class="btn btn-teal-light btn-wave d-flex w-100 justify-content-center align-items-center" id="btnModalRemiseCentral">
                                <i class="bx bx-export fs-16 me-1"></i>Remise centrale
                            </button>
                        </div>
                        @endif
                        @if(in_array('CG_AccesVersement', session('LISTE_DROIT_ACCESS')))
                        <div class="col-md-4">
                            <button type="button" class="btn btn-info-light btn-wave d-flex w-100 justify-content-center align-items-center" id="btnModalVersement">
                                <i class="bx bx-wallet fs-16 me-1"></i>Versement
                            </button>
                        </div>
                        @endif
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- Page Header Close -->

    <!-- Start:: row-7 -->
    <div class="row">
        <div class="col-md-6">
            <div class="card custom-card">
                <div class="card-header">
                    <div class="card-title">Total Montant Encaissé</div>
                </div>
                <div class="card-body">
                    <div class="row" id="divTotalMontantDu">
                    </div>
                </div>
            </div>
        </div>
        
        <div class="col-md-6">
            <div class="card custom-card">
                <div class="card-header">
                    <div class="card-title">Total Montant Versé</div>
                </div>
                <div class="card-body">
                    <div class="row" id="divTotalMontantVerse">
                    </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-3 mb-2">
                                <p class="mb-0 text-muted">Site&nbsp;:</p>
                                <select name="IDAGENCE" id="selIDAGENCEFiltre" class="form-select">
                                    @if(session("filterMemory.AccesMultiSite"))
                                        <option value="0">TOUS</option>
                                    @endif
                                    @foreach(session('site') as $site)
                                        <option value="{{ $site -> IDAGENCE }}">{{ $site -> NomAgence }}</option>
                                    @endforeach
                                </select>
                            </div>
                            <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-3 mb-2">
                                <p class="mb-0 text-muted">Operateur&nbsp;:</p>
                                <select name="IDPERSONNEL" id="selIDPERSONNEL"></select>
                            </div>
                            <div class="col-xl-1 col-md-1 mb-0 pt-1">
                                <button type="button" class="btn btn-primary btn-wave float-start 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="tableListeJournalCaisse">
                            <thead class="table-header-primary">
                                <tr>
                                    <th data-column="DateEcritureFormat" data-class="text-center" class="text-center">Date</th>
                                    <th data-column="SymboleMonnaie" data-class="text-center" class="text-center">Devise</th>
                                    <th data-column="MontantCredit" data-class="text-end pe-2" class="text-center">Montant encaissé</th>
                                    <th data-column="MontantGlobalConverti" data-class="text-end pe-2" class="text-center">Montant Versé</th>
                                    <th data-column="ecart" data-class="text-end pe-2" class="text-center">Écart</th>
                                    <th data-column="NomAgence" data-class="text-center" class="text-center">Site</th>
                                    <th data-column="NomPrenomPersonnel" class="text-center">Opérateur</th>
                                </tr>
                            </thead>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- End::app-content -->

    <!-- Modal des versements -->
    <div class="modal fade" id="modalVersement" tabindex="-1" aria-labelledby="exampleModalFullscreenLabel" data-bs-focus="false" aria-hidden="true" style="display: none;">
        <div class="modal-dialog modal-fullscreen modal-dialog-scrollable">
            <div class="modal-content">
                <div class="modal-header">
                    <h6 class="modal-title" id="exampleModalFullscreenLabel">Versement</h6>
                    <button type="button" class="btn-close bg-white" data-bs-dismiss="modal"
                        aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    @if(in_array('GC_AjouterVersement', session('LISTE_DROIT_ACCESS')) || in_array('GC_ModifierVersement', session('LISTE_DROIT_ACCESS')))
                    <div class="accordion accordion-flush mb-3 " id="accordionFormVERSEMENT_RECETTE">
                        <div class="accordion-item">
                            <h2 class="accordion-header" id="flush-headingOne">
                                <button class="accordion-button collapsed pb-2" type="button" style="background: #FFD7DA;font-size : .78rem;" data-bs-toggle="collapse" data-bs-target="#flush-FormVERSEMENT_RECETTE" aria-expanded="false" aria-controls="flush-FormVERSEMENT_RECETTE">
                                    Formulaire de saisie de versement
                                </button>
                            </h2>
                            <div id="flush-FormVERSEMENT_RECETTE" class="accordion-collapse collapse" aria-labelledby="flush-headingOne" data-bs-parent="#accordionFormVERSEMENT_RECETTE">
                                <div class="accordion-body bg-tabs">
                                    <div class="w-100 d-flex justify-content-end">
                                        @if(in_array('GC_AjouterVersement', session('LISTE_DROIT_ACCESS')))
                                        <a class="btn btn-success " id="btnEnregistrerVersement">
                                            <i class='bx bxs-check-circle'></i>
                                            Enregistrer
                                        </a>
                                        @endif
                                        @if(in_array('GC_ModifierVersement', session('LISTE_DROIT_ACCESS')))
                                        <a class="btn btn-warning" id="btnModifierVersement">
                                            <span class="bx bxs-edit" style="font-size:16px;"></span>
                                            Modifier
                                        </a>
                                        @endif
                                        <a class="btn btn-danger ms-2" data-bs-toggle="tooltip" data-bs-custom-class="tooltip-dark" data-bs-placement="bottom" title="Annuler l'opération" id="annulerVersement">
                                            <span class="bx bxs-x-circle me-1" style="font-size:16px;"></span>
                                            Annuler
                                        </a>
                                    </div>
                                    <hr style="margin-top: 8px; border-color : #fff">
                                    <form id="formVERSEMENT_RECETTE">
                                        <input type="number" name="IDVERSEMENT_RECETTE" id="inpIDVERSEMENT_RECETTE" style="display: none">
                                        <div class="row">
                                            <div class="col-xl-4 mb-2">
                                                <div class="row">
                                                    <div class="col-xl-4 mb-2">
                                                        <p class="text-muted mb-0">Site :</p>
                                                        <select class="form-select" name="IDAGENCE" id="selIDAGENCEModalVersement">
                                                            @foreach(session('site') as $site)
                                                                <option value="{{ $site -> IDAGENCE }}">{{ $site -> NomAgence }}</option>
                                                            @endforeach
                                                        </select>
                                                    </div>
                                                    <div class="col-xl-4 mb-2">
                                                        <p class="text-muted mb-0">Date :</p>
                                                        <input type="date" class="form-control" autocomplete="off" id="inpDateVersementRecetteModalVersement" name="DateVersementRecette">
                                                    </div>
                                                    <div class="col-xl-4 mb-2">
                                                        <p class="text-muted mb-0">Devise :</p>
                                                        <select name="IDMONNAIE" id="selIDMONNAIEModalVersement" class="form-select">
                                                            @foreach($listeMonnaie as $monnaie)
                                                                <option value="{{ $monnaie -> IDMONNAIE }}">{{ $monnaie -> SymboleMonnaie}}</option>
                                                            @endforeach
                                                        </select>
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="col-md-2 mb-2">
                                                <p class="text-muted mb-0">Opérateur :</p>
                                                <select name="IDPERSONNEL" id="selIDPERSONNELModalVersement"></select>
                                            </div>
                                            <div class="col-md-2 mb-2">
                                                <p class="text-muted mb-0">Mode de paiement :</p>
                                                <select name="IDMODEPAIEMENT" id="selMODEPAIEMENTModalVersement" class="form-select"></select>
                                            </div>
                                            <div class="col-md-2 mb-2">
                                                <p class="text-muted mb-0">Solde devise :</p>
                                                <input type="text" class="form-control numberInput text-end" name="soldeDeviseOpe" id="inpSoldeDeviseOpe" disabled value="0">
                                            </div>
                                            <div class="col-md-2 mb-2">
                                                <p class="text-muted mb-0">Montant versé :</p>
                                                <input type="text" class="form-control numberInput text-end" autocomplete="off" name="MontantVerseDevise" id="inpMontantVerseDevise">
                                            </div>
                                            <div>
                                                <p class="text-muted mb-0">Commentaire :</p>
                                                <textarea class="form-control" autocomplete="off" name="CommentaireVersementRecette" id="inpCommentaireVersementRecette" cols="30" rows="5"></textarea>
                                            </div>
                                        </div>
                                    </form>
                                </div>
                            </div>
                        </div>
                    </div>
                    <hr>
                    @endif
                    <span class="fw-semibold fs-14">Filtre du tableau</span>
                    <form id="formFiltreModalVersement mt-1" class="w-100">
                        <div class="row w-100">
                            <div class="col-xl-2 col-md-3 mb-2">
                                <p class="mb-0 text-muted">Site&nbsp;:</p>
                                <select name="IDAGENCE" id="selIDAGENCEFiltreModalVersement" class="form-select">
                                    @if(session("filterMemory.AccesMultiSite"))
                                        <option value="0">TOUS</option>
                                    @endif
                                    @foreach(session('site') as $site)
                                        <option value="{{ $site -> IDAGENCE }}">{{ $site -> NomAgence }}</option>
                                    @endforeach
                                </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="filtrePeriodeModalVersement" />
                            </div>
                            <div class="col-xl-2 col-md-3 mb-2">
                                <p class="mb-0 text-muted">Opérateur&nbsp;:</p>
                                <select name="IDPERSONNEL" id="selFiltreIDPERSONNELModalVersement"></select>
                            </div>
                            <div class="col-xl-1 col-md-1 mb-0 pt-1">
                                <button type="button" class="btn btn-primary btn-wave float-start mt-2" id="btnFiltreTableModalVersement">
                                    <i class="ri-search-line" style="font-size:13px; cursor:pointer;"></i>
                                </button>
                            </div>
                        </div>
                    </form>
                    <hr>
                    <div class="table-responsive">
                        <table class="tablehover table table-striped tablehover text-nowrap overflow-auto w-100" id="tableVersementRecette">
                            <thead class="table-header-primary">
                                <tr>
                                    <th data-column="action" data-class="text-center" class="text-center" data-orderable="false">#</th>
                                    <th data-column="DateVersementRecette" data-class="text-center" class="text-center">Date</th>
                                    <th data-column="LibelleModePaiement" data-class="text-center" class="text-center">Mode de paiement</th>
                                    <th data-column="SymboleMonnaie" data-class="text-end pe-2" class="text-center">Devise</th>
                                    <th data-column="MontantVerseDeviseFormat" data-class="text-end pe-2" class="text-center">Montant Versé</th>
                                    <th data-column="montantDeviseAffichageFormat" data-class="text-end pe-2" class="text-center">Montant devise</th>
                                    <th data-column="NomAgence" class="text-center">Site</th>
                                    <th data-column="NomPrenomPersonnel" class="text-center">Opérateur</th>
                                    <th data-column="CommentaireVersementRecette" class="text-center">Commentaire</th>
                                </tr>
                            </thead>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Modal de remise centrale -->
    <div class="modal fade" id="modalRemiseCentrale" tabindex="-1" data-bs-focus="false" role="dialog" aria-labelledby="exampleModalLabel">
        <div class="modal-dialog modal-dialog-centered modal-dialog-scrollable modal-xl" role="document">
            <div class="card flex-fill border custom-card modal-content pb-0">
                <div class="modal-header">
                    <h6 class="modal-title" id="titleModalRemiseCentrale">Remise</h6>
                    <button type="button" class="btn-close bg-white" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body pt-3">
                    @if(in_array('GC_AjoutRemiseCentrale', session('LISTE_DROIT_ACCESS')) || in_array('GC_ModifRemiseCentrale', session('LISTE_DROIT_ACCESS')))
                    <div class="accordion accordion-flush mb-3 " id="accordionFormCOMPTA_REMISE_AGENCE">
                        <div class="accordion-item">
                            <h2 class="accordion-header" id="flush-headingOne">
                                <button class="accordion-button collapsed pb-2" type="button" style="background: #FFD7DA;font-size : .78rem;" data-bs-toggle="collapse" data-bs-target="#flush-FormCOMPTA_REMISE_AGENCE" aria-expanded="false" aria-controls="flush-FormCOMPTA_REMISE_AGENCE">
                                    Formulaire de remise
                                </button>
                            </h2>
                            <div id="flush-FormCOMPTA_REMISE_AGENCE" class="accordion-collapse collapse" aria-labelledby="flush-headingOne" data-bs-parent="#accordionFormCOMPTA_REMISE_AGENCE">
                                <div class="accordion-body bg-tabs">
                                    <div class="w-100 d-flex justify-content-end">
                                        @if(in_array('GC_AjoutRemiseCentrale', session('LISTE_DROIT_ACCESS')))
                                        <a class="btn btn-info " id="newCOMPTA_REMISE_AGENCE">
                                            <i class='bx bx-save fs-16 me-1'></i>
                                            Enregistrer
                                        </a>
                                        @endif
                                        @if (in_array('GC_ModifRemiseCentrale', session('LISTE_DROIT_ACCESS')))
                                        <a class="btn btn-warning" id="btnEditCOMPTA_REMISE_AGENCE">
                                            <span class="bx bxs-edit" style="font-size:16px;"></span>
                                            Modifier
                                        </a>
                                        @endif
                                        <a class="btn btn-danger ms-2" data-bs-toggle="tooltip" data-bs-custom-class="tooltip-dark"cdata-bs-placement="bottom" title="Annuler l'opération"
                                            id="annulerModifCOMPTA_REMISE_AGENCE">
                                            <span class="bx bxs-x-circle me-1" style="font-size:16px;"></span>
                                            Annuler
                                        </a>
                                    </div>
                                    <hr style="margin-top: 8px; border-color : #fff">
                                    <form id="formCOMPTA_REMISE_AGENCE">
                                        <input type="number" name="IDCOMPTA_REMISE_AGENCE" id="inpIDCOMPTA_REMISE_AGENCE" style="display: none">
                                        <div class="row">
                                            <div class="col-md-2 mb-2">
                                                <p class="text-muted mb-0">Site départ :</p>
                                                <select class="form-select" name="IDAGENCE" id="selIDAGENCEModalRemiseCentrale">
                                                    @foreach(session('site') as $site)
                                                        <option value="{{ $site -> IDAGENCE }}">{{ $site -> NomAgence }}</option>
                                                    @endforeach
                                                </select>
                                            </div>
                                            <div class="col-md-2 mb-2">
                                                <p class="text-muted mb-0">Nature remise : </p>
                                                <select class="form-select" name="NatureRemise" id="selNatureRemise">
                                                    <option value="1">INTER-SITE</option>
                                                    <option value="2">BANQUE</option>
                                                </select>
                                            </div>
                                            <div class="col-md-2 mb-2">
                                                <p class="text-muted mb-0">Site destination :</p>
                                                <select class="form-select" name="IDAGENCE_DESTINATION" id="selIDAGENCE_DESTINATIONModalRemiseCentrale"></select>
                                            </div>
                                            <div class="col-md-2 mb-2">
                                                <p class="text-muted mb-0">Banque : </p>
                                                <select name="IDBANQUE" id="selIDBANQUE">

                                                </select>
                                            </div>
                                            <div class="col-md-2 mb-2">
                                                <p class="text-muted mb-0">Devise :</p>
                                                <select name="IDMONNAIE" id="selIDMONNAIEModalRemiseCentrale" class="form-select">
                                                    @foreach($listeMonnaie as $monnaie)
                                                        <option value="{{ $monnaie -> IDMONNAIE }}">{{ $monnaie -> SymboleMonnaie}}</option>
                                                    @endforeach
                                                </select>
                                            </div>
                                            <div class="col-md-2 mb-2">
                                                <p class="text-muted mb-0">Montant versé :</p>
                                                <input type="text" class="form-control numberInput text-end" autocomplete="off" name="MontantDevise" id="inpMontantDevise">
                                            </div>
                                            <div class="col-md-2 mb-2">
                                                <p class="text-muted mb-0">Date de remise :</p>
                                                <input type="date" class="form-control" name="DateRemise" id="inpDateRemise">
                                            </div>
                                            <div class="col-md-10 mb-2">
                                                <p class="text-muted mb-0">Commentaire :</p>
                                                <textarea class="form-control" name="CommentaireRemiseAgence" id="inpCommentaireRemiseAgence" cols="30" rows="4"></textarea>
                                            </div>
                                        </div>
                                    </form>
                                </div>
                            </div>
                        </div>
                    </div>
                    <hr>
                    @endif
                    <span class="fw-semibold fs-14">Filtre du tableau</span>
                    <div class="row mt-2">
                        <div class="col-md-2">
                            <p class="text-muted mb-0">Site : </p>
                            <select class="form-select" id="selFiltreAgenceModalRemiseCentrale">
                                @foreach(session('site') as $site)
                                    <option value="{{ $site -> IDAGENCE }}">{{ $site -> NomAgence }}</option>
                                @endforeach
                            </select>
                        </div>
                        <div class="col-xl-3 col-md-4 mb-2">
                            <p class="mb-0 text-muted">Période&nbsp;:</p>
                            <input type="text" class="form-control text-center" name="filtrePeriode" id="filtrePeriodeModalRemiseCentrale" />
                        </div>
                        <div class="col-md-2 py-1">
                            <button type="button" class="btn btn-primary btn-wave float-start mt-2" id="btnFiltreTableModalRemiseCentrale">
                                <i class="ri-search-line" style="font-size:13px; cursor:pointer;"></i>
                            </button>
                        </div>
                    </div>
                    <hr>
                    <div class="table-responsive mt-2">
                        <table class="tablehover table table-striped w-100" id="tableCOMPTA_REMISE_AGENCE">
                            <thead class="table-header-primary">
                                <tr class="text-light">
                                    <th data-orderable="false" data-column="action" data-class="text-center" class="text-center p-0">
                                        <input class="form-check-input me-4" type="checkbox" id="checkSelectAll">
                                    </th>
                                    <th data-column="DateRemiseFormat" data-class="text-center" class="text-center">Date</th>
                                    <th data-column="NumeroRemiseAgence" data-class="text-center" class="text-center">N° document</th>
                                    <th data-column="libelleNatureRemise" data-class="text-center" data-width="80" class="text-center">Nature</th>
                                    <th data-column="NomAgence" data-class="text-center" class="text-center">Site</th>
                                    <th data-column="NomAgence_DESTINATION" data-class="text-center" class="text-center" title="Site de destination">Site dest.</th>
                                    <th data-column="NomBanque" class="text-center">Banque</th>
                                    <th data-column="SymboleMonnaie" data-class="text-center" class="text-center">Devise</th>
                                    <th data-column="MontantDeviseFormat" data-class="text-end" class="text-center">Montant</th>
                                    <th data-column="MontantDeviseAffichageFormat" data-class="text-end" class="text-center">Montant devise</th>
                                    <th data-column="badgeStatut" data-class="text-center" class="text-center">Statut</th>
                                    <th data-column="CommentaireRemiseAgence" class="text-center">Commentaire</th>
                                </tr>
                            </thead>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>

@endsection

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

        $('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: '{{ date('d/m/Y') }}',
            endDate: '{{ date('d/m/Y') }}'
        });

        var tableListeJournalCaisse
        var dataTotaux = []

        function listeTableJournalCaisse(){

            let Periode = convertirFormatDate2(_('filtrePeriode').value)
            let IDAGENCE = _('selIDAGENCEFiltre').value
            let IDPERSONNEL = _('selIDPERSONNEL').value == '' ? 0 : _('selIDPERSONNEL').value

            @if(!in_array('GC_JounCaisAutreUser', session('LISTE_DROIT_ACCESS')))

                IDPERSONNEL = '{{ session('IDPERSONNEL') }}'
            @endif

            return new Promise(function(resolve, reject) {

                $.ajax({

                    url: "{{ route('listeTableJournalCaisse') }}",
                    type: 'POST',
                    data : {
                        IDAGENCE : IDAGENCE,
                        dateDebut : Periode[0],
                        dateFin : Periode[1],
                        IDPERSONNEL : IDPERSONNEL,
                        _token : '{{ csrf_token() }}'
                    },
                    dataType: 'json',
                    beforeSend: progressHandler(),
                    success: function(response) {

                        if (response.success != 1) {

                            notifError(response.msg)
                        }

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

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

                        completeHandler()
                    }
                })
            })
        }

        function chargerTableJournalCaisse(){

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

                    let data = []
                    dataTotaux = []

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

                    tableListeJournalCaisse = remplissageDataTable({
                                                    IdentifiantDuTableau: '#tableListeJournalCaisse',
                                                    obj: data,
                                                    scrollY: '600',
                                                    lengthChange : false
                                                });

                    let dataTtDeviseAffichage = response.dataTtDeviseAffichage

                    data.forEach(element => {
                        
                        let existingRow = dataTotaux.find(row => row.SymboleMonnaie === element.SymboleMonnaie);
                        if (existingRow) {
                            existingRow.montantDu += chaineEnNumerique(element.MontantCredit);
                            existingRow.montantVerse += chaineEnNumerique(element.MontantGlobalConverti);
                        } else {
                            dataTotaux.push({
                                SymboleMonnaie: element.SymboleMonnaie,
                                montantDu: chaineEnNumerique(element.MontantCredit),
                                montantVerse: chaineEnNumerique(element.MontantGlobalConverti),
                            });
                        }
                    });

                    $('#divTotalMontantDu').html('')

                    dataTotaux.forEach(element => {
                        $('#divTotalMontantDu').append(`
                            <div class="col-auto mx-auto my-0">
                                <div class="d-flex align-items-top">
                                    <div class="d-flex">
                                        <span class="d-block mb-1 text-muted me-1">${element.SymboleMonnaie} :</span>
                                        <h6 class="fw-semibold mb-0 fs-14">${formatNumberPerf(element.montantDu)}</h6>
                                    </div>
                                </div>
                            </div>
                        `)
                    })

                    $('#divTotalMontantDu').append(`
                        <hr>
                        <div class="d-flex align-items-top">
                            <div class="d-flex">
                                <span class="d-block mb-1 text-muted me-1">${dataTtDeviseAffichage.SymboleMonnaie} :</span>
                                <h6 class="fw-semibold mb-0 fs-14">${formatNumberPerf(dataTtDeviseAffichage.ttEncaisse)}</h6>
                            </div>
                        </div>
                    `)

                    $('#divTotalMontantVerse').html('')
                    dataTotaux.forEach(element => {
                        $('#divTotalMontantVerse').append(`
                            <div class="col-auto mx-auto my-0">
                                <div class="d-flex align-items-top">
                                    <div class="d-flex">
                                        <span class="d-block mb-1 text-muted me-1">${element.SymboleMonnaie} :</span>
                                        <h6 class="fw-semibold mb-0 fs-14">${formatNumberPerf(element.montantVerse)}</h6>
                                    </div>
                                </div>
                            </div>
                        `)
                    })

                    $('#divTotalMontantVerse').append(`
                        <hr>
                        <div class="d-flex align-items-top">
                            <div class="d-flex">
                                <span class="d-block mb-1 text-muted me-1">${dataTtDeviseAffichage.SymboleMonnaie} :</span>
                                <h6 class="fw-semibold mb-0 fs-14">${formatNumberPerf(dataTtDeviseAffichage.ttVerse)}</h6>
                            </div>
                        </div>
                    `)
                    
                })
                .catch(() => {

                    _('libnbreLigne').innerHTML = 0
                    _('libTotalSalaireBaseFormat').innerHTML = 0
                    tableListeJournalCaisse = remplissageDataTable({
                                                    IdentifiantDuTableau: '#tableListeJournalCaisse',
                                                    obj: [],
                                                    scrollY: '600',
                                                    lengthChange : false
                                                });
                })
        }

        chargerTableJournalCaisse()

        function listeCOMPTA_COMPTE_GENERAUXPourSelect(IDAGENCE = 0) {

            return new Promise(function(resolve, reject) {

                $.ajax({

                    url: "{{ route('listeCOMPTA_COMPTE_GENERAUXPourSelect') }}",
                    type: 'GET',
                    dataType: 'json',
                    data : {
                        IDAGENCE : IDAGENCE
                    },
                    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 listePersonnelSimple(){

            return new Promise(function(resolve, reject) {

                $.ajax({

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

                        if (response.success != 1) {

                            notifError(response.msg)
                        }

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

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

                        completeHandler()
                    }
                })
            })
        }

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

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

                    data.unshift({
                        IDPERSONNEL : 0,
                        NomPrenomPersonnel : 'TOUS'
                    })

                    populateSelect('#selIDPERSONNEL', {
                        data : data,
                        valueKey : 'IDPERSONNEL',
                        textKey : 'NomPrenomPersonnel'
                    })

                    $('#selIDPERSONNEL').select2()

                    @if(!in_array('GC_JounCaisAutreUser', session('LISTE_DROIT_ACCESS')))

                        $('#selIDPERSONNEL').val('{{ session('IDPERSONNEL') }}').trigger('change')
                        $('#selIDPERSONNEL').prop('disabled', 'true')
                    @endif
                }
            })

    </script>

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

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

            chargerTableJournalCaisse()
        })
    </script>

    <!-- Script d'export en excel -->
    <script>

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

            let data = tableListeJournalCaisse.data().toArray()

            if (data.length == 0) {

                notif('danger', 'Erreur', 'Aucune donnée à exporter')
                return 0
            }

            $.ajax({

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

                    if (response.success == 1) {

                        if (response.tableExcel.length > 0) {

                            response.tableExcel.forEach(function (value) {

                                let dateString = _('filtrePeriode').value

                                let periode = convertirFormatDate2(dateString, inclureHeure = false, formatSortie = 'DD-MM-YYYY', separateur = ' - ')

                                let nomDoc = "JOURNAL_CAISSE_("+periode[0]+"_AU_"+periode[1]+")"

                                var excelBase64 = value;

                                // Convertit le base64 en Blob
                                var blob = b64toBlob(excelBase64, 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet');

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

                                // Crée un élément `<a>` pour le téléchargement
                                var link = document.createElement('a');
                                link.href = blobUrl;


                                link.download = nomDoc+".xlsx"; // Nom du fichier à télécharger

                                // Ajoute le lien au document et déclenche le clic
                                document.body.appendChild(link);
                                link.click();

                                // Nettoie après le téléchargement
                                document.body.removeChild(link);
                                URL.revokeObjectURL(blobUrl);
                            })
                        } else {

                            notif('danger', 'Erreur', 'Aucun fichier excel n\'a été chargé')
                        }

                    } else {

                        notifError(response.msg)
                    }

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

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

    <!-- Script ouverture modal versement -->
    <script>

        function listePersonnelSimple(){

            return new Promise(function(resolve, reject) {

                $.ajax({

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

                        if (response.success != 1) {

                            notifError(response.msg)
                        }

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

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

                        completeHandler()
                    }
                })
            })
        }

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

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

                    data.unshift({
                        IDPERSONNEL : 0,
                        NomPrenomPersonnel : 'TOUS'
                    })

                    populateSelect('#selFiltreIDPERSONNELModalVersement', {
                        data : data,
                        valueKey : 'IDPERSONNEL',
                        textKey : 'NomPrenomPersonnel'
                    })

                    data[0].NomPrenomPersonnel = ''

                    populateSelect('#selIDPERSONNELModalVersement', {
                        data : data,
                        valueKey : 'IDPERSONNEL',
                        textKey : 'NomPrenomPersonnel'
                    })

                    $('#selIDPERSONNELModalVersement').select2({
                        dropdownParent : $('#modalVersement')
                    })

                    $('#selFiltreIDPERSONNELModalVersement').select2({
                        dropdownParent : $('#modalVersement')
                    })
                }
            })

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

                $('#selMODEPAIEMENTModalVersement').select2({
                    dropdownParent : $('#modalVersement')
                })
            })

        function initialiserForm(){

            _('inpIDVERSEMENT_RECETTE').value = 0
            
            $('#selIDAGENCEModalVersement').val(_('idSiteEnCours').value).trigger('change')
            $('#selIDPERSONNELModalVersement').val(0).trigger('change')
            $('#selMODEPAIEMENTModalVersement').val(0).trigger('change')
            $('#selIDMONNAIEModalVersement').val(0).trigger('change')
            $('#inpSoldeDevise').val(0).trigger('change')
            $('#inpMontantVerseDevise').val(0).trigger('change')
            $('#inpSoldeDeviseOpe').val(0).trigger('change')
            _('inpCommentaireVersementRecette').value = ''

            _('inpDateVersementRecetteModalVersement').value = "{{ date('Y-m-d') }}"

            @if(in_array('GC_AjouterVersement', session('LISTE_DROIT_ACCESS')))
                _('btnEnregistrerVersement').style.display = ''
            @endif

            @if(in_array('GC_ModifierVersement', session('LISTE_DROIT_ACCESS')))
                _('btnModifierVersement').style.display = 'none'
            @endif
        }

        function chargerTableVersementRecette( data = []){

            tableVersementRecette = remplissageDataTable({
                                            IdentifiantDuTableau: '#tableVersementRecette',
                                            obj: data,
                                            scrollY: '400',
                                            lengthChange : false
                                        });

            divShowPer = $('#tableVersementRecette_filter')

            // // Division des valeur totales
            let BroDivShowPer = divShowPer.parent().prev()
            BroDivShowPer.addClass('d-flex pt-2')
            BroDivShowPer.prepend('<i id="btnCloturerLesLignesSelect" class="bx bx-check-double text-danger me-1 mt-2" style="font-size : 18px; cursor : pointer;"></i><span id="labelBtnCloturerLesLignesSelect" class="fw-bold textDangerUnderline mt-2 me-3" style="cursor : pointer;">Comptabiliser les lignes en attente</span>')

            @if (!in_array('GC_ModifierVersement', session('LISTE_DROIT_ACCESS')))
                
                document.querySelectorAll('.editVersement').forEach( element => {                            
                    
                    element.setAttribute('disabled', 'disabled')
                    $(element).removeAttr('id')
                })
            @endif

            @if (!in_array('GC_SupprimerVersement', session('LISTE_DROIT_ACCESS')))
                
                document.querySelectorAll('.suppVersement').forEach( element => {                            
                    
                    element.setAttribute('disabled', 'disabled')
                    $(element).removeAttr('id')
                })
            @endif
        }

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

            initialiserForm()
            $('#modalVersement').modal('show')
        })

        $(document).on('shown.bs.modal', '#modalVersement', function(){

            chargerTableVersementRecette()
        })

        var tableVersementRecette

        function listeTableVersementRecette(){

            let Periode = convertirFormatDate2(_('filtrePeriodeModalVersement').value)
            let IDAGENCE = _('selIDAGENCEFiltreModalVersement').value

            return new Promise(function(resolve, reject) {

                $.ajax({

                    url: "{{ route('listeTableVersementRecette') }}",
                    type: 'POST',
                    data : {
                        IDAGENCE : IDAGENCE,
                        dateDebut : Periode[0],
                        dateFin : Periode[1],
                        IDPERSONNEL : _('selFiltreIDPERSONNELModalVersement').value == '' ? 0 : _('selFiltreIDPERSONNELModalVersement').value,
                        _token : '{{ csrf_token() }}'
                    },
                    dataType: 'json',
                    beforeSend: progressHandler(),
                    success: function(response) {

                        if (response.success != 1) {

                            notifError(response.msg)
                        }

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

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

                        completeHandler()
                    }
                })
            })
        }

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

            listeTableVersementRecette()
                .then(response => {

                    let data = []

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

                    chargerTableVersementRecette(data)
                })
        })
    </script>

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

        function returnSoldeDeviseOpe(){

            if (_('selIDPERSONNELModalVersement').value == 0 || _('selIDMONNAIEModalVersement').value == 0 || _('inpDateVersementRecetteModalVersement').value == null) {
                
                $('#inpSoldeDeviseOpe').val(0).trigger('input')
                return 0
            }

            $.ajax({

                url: "{{ route('returnSoldeDeviseOpe') }}",
                type: 'GET',
                data: {
                    IDAGENCE : _('selIDAGENCEModalVersement').value,
                    date : _('inpDateVersementRecetteModalVersement').value,
                    IDPERSONNEL : _('selIDPERSONNELModalVersement').value,
                    IDMONNAIE : _('selIDMONNAIEModalVersement').value,
                },
                dataType: 'json',
                // beforeSend: progressHandler(),
                success: function(response) {

                    if (response.success == 1) {

                        let data = response.data

                        if (data.length == 0) {
                            
                            $('#inpSoldeDeviseOpe').val(0).trigger('input')
                        }else{

                            ligne = data[0]
                            $('#inpSoldeDeviseOpe').val(ligne.ecart * (-1)).trigger('input')
                        }
                        
                    }else{
                        
                        notifError(response.msg)
                    }
                    // completeHandler()
                },
                error: function(error) {

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

                    // completeHandler()
                }
            })
        }

        @if(in_array('GC_AjouterVersement', session('LISTE_DROIT_ACCESS')) || in_array('GC_ModifierVersement', session('LISTE_DROIT_ACCESS')))
            _('selIDAGENCEModalVersement').addEventListener('change', returnSoldeDeviseOpe)
            _('inpDateVersementRecetteModalVersement').addEventListener('change', returnSoldeDeviseOpe)
            $('#selIDPERSONNELModalVersement').on('change', returnSoldeDeviseOpe) 
            _('selIDMONNAIEModalVersement').addEventListener('change', returnSoldeDeviseOpe)
        @endif


        @if(in_array('GC_AjouterVersement', session('LISTE_DROIT_ACCESS')) || in_array('GC_ModifierVersement', session('LISTE_DROIT_ACCESS')))
        _('formVERSEMENT_RECETTE').addEventListener('submit', function(e){

            e.preventDefault()
        })
        @endif

        function validerVersement(){

            let formVERSEMENT_RECETTE = new FormData(_('formVERSEMENT_RECETTE'))
            formVERSEMENT_RECETTE.append('_token', '{{ csrf_token() }}')
            formVERSEMENT_RECETTE.append('MontantVerseDevise', chaineEnNumerique(_('inpMontantVerseDevise').value))
            // formVERSEMENT_RECETTE.append('tauxDevise', $('#selIDMONNAIEModalVersement').find('option:selected').attr('data-tauxmonnaie'))

            return new Promise(function(resolve, reject) {

                $.ajax({

                    url: "{{ route('validerVersement') }}",
                    type: 'POST',
                    data: formVERSEMENT_RECETTE,
                    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()
                    }
                })
            })
        }

        @if(in_array('GC_AjouterVersement', session('LISTE_DROIT_ACCESS')))
        _('btnEnregistrerVersement').addEventListener('click', function(e){

            if (_('inpDateVersementRecetteModalVersement').value == null || _('inpDateVersementRecetteModalVersement').value == '') {
                
                notif('danger', 'Erreur', 'Veuillez sélectionner une date valide')
                return 0
            }

            if (_('selIDPERSONNELModalVersement').value == 0) {
                
                notif('danger', 'Erreur', 'Veuillez sélectionner l\'opérateur.')
                return 0
            }

            if (_('selMODEPAIEMENTModalVersement').value == 0) {
                
                notif('danger', 'Erreur', 'Veuillez sélectionner le mode de paiement.')
                return 0
            }

            if(_('inpMontantVerseDevise').value.replace(/\s/g, '') == '' || _('inpMontantVerseDevise').value.replace(/\s/g, '') == 0){

                notif('danger', 'Erreur', 'Veuillez saisir un montant valide')
                return 0
            } 

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

                    if (response.success == 1) {

                        initialiserForm()
                        _('btnFiltreTableModalVersement').click()
                        notif('success', 'Succès', 'Opération écctuée avec succès')
                    }
                })
        })
        @endif
    </script>

    <!-- Script de modification de versement -->
    <script>

        function infoVersementRecette(IDVERSEMENT_RECETTE){

            return new Promise(function(resolve, reject) {

                $.ajax({

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

                        if (response.success != 1) {

                            notifError(response.msg)
                        }

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

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

                        completeHandler()
                    }
                })
            })
        }

        $('#tableVersementRecette').on('click', '#editVersement', function(e){

            e.preventDefault()
            let IDVERSEMENT_RECETTE = $(this).data('id')
            
            infoVersementRecette(IDVERSEMENT_RECETTE)
                .then(async (response) => {

                    if (response.success == 1) {

                        let versement = response.info

                        if (versement == null) {
                            
                            notif('danger', 'Erreur', 'Aucun versement trouvé.')
                            return 0
                        }
                        
                        $('#inpIDVERSEMENT_RECETTE').val(versement.IDVERSEMENT_RECETTE)
                        await $('#selIDAGENCEModalVersement').val(versement.IDAGENCE).trigger('change')
                        await $('#inpDateVersementRecetteModalVersement').val(versement.DateVersementRecette).trigger('change')
                        await $('#selIDPERSONNELModalVersement').val(versement.IDPERSONNEL).trigger('change')
                        await $('#selMODEPAIEMENTModalVersement').val(versement.IDMODEPAIEMENT).trigger('change')
                        await $('#selIDMONNAIEModalVersement').val(versement.IDMONNAIE).trigger('change')
                        $('#inpMontantVerseDevise').val(formatNumberPerf(versement.MontantVerseDevise)).trigger('input')
                        $('#inpCommentaireVersementRecette').val(versement.CommentaireVersementRecette).trigger('change')

                        returnSoldeDeviseOpe()

                        @if(in_array('GC_AjouterVersement', session('LISTE_DROIT_ACCESS')))
                            _('btnEnregistrerVersement').style.display = 'none'
                        @endif

                        @if(in_array('GC_ModifierVersement', session('LISTE_DROIT_ACCESS')))
                            _('btnModifierVersement').style.display = ''
                        @endif

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

        @if(in_array('GC_ModifierVersement', session('LISTE_DROIT_ACCESS')))
        _('btnModifierVersement').addEventListener('click', function(e){

            if (_('inpDateVersementRecetteModalVersement').value == null || _('inpDateVersementRecetteModalVersement').value == '') {
                
                notif('danger', 'Erreur', 'Veuillez sélectionner une date valide')
                return 0
            }

            if (_('selIDPERSONNELModalVersement').value == 0) {
                
                notif('danger', 'Erreur', 'Veuillez sélectionner l\'opérateur.')
                return 0
            }

            if (_('selMODEPAIEMENTModalVersement').value == 0) {
                
                notif('danger', 'Erreur', 'Veuillez sélectionner le mode de paiement.')
                return 0
            }

            if(_('inpMontantVerseDevise').value.replace(/\s/g, '') == '' || _('inpMontantVerseDevise').value.replace(/\s/g, '') == 0){

                notif('danger', 'Erreur', 'Veuillez saisir un montant valide')
                return 0
            } 

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

                    if (response.success == 1) {

                        initialiserForm()
                        _('btnFiltreTableModalVersement').click()
                        notif('success', 'Succès', 'Opération écctuée avec succès')
                    }
                })
        })
        @endif
    </script>

    <!-- Script de suppression de versement -->
    <script>

        $('#tableVersementRecette').on('click', '#suppVersement', function(e){

            e.preventDefault()
            let IDVERSEMENT_RECETTE = $(this).data('id')

            Swal.fire({

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

            }).then((result) => {

                if (result.isConfirmed) {

                    $.ajax({

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

                            if (response.success != 1) {

                                notifError(response.msg)
                            }else{

                                chargerTableVersementRecette()
                                notif('success', 'Succès', 'Opération écctuée avec succès')
                            }

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

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

    <!-- Script cloturer les versement éffectué -->
    <script>

        function cloturerLignesVersementSelectionne(){

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

            $.ajax({

                url: "{{ route('cloturerLignesVersementSelectionne') }}",
                type: 'POST',
                data: {
                    dateDebut : Periode[0],
                    dateFin : Periode[1],
                    IDAGENCE : _('selIDAGENCEFiltreModalVersement').value ?? 0,
                    _token : '{{ csrf_token() }}'
                },
                dataType: 'json',
                beforeSend: progressHandler(),
                success: function(response) {

                    if (response.success != 1) {

                        notif('danger', 'Erreur', response.msg)
                    }else{
                    
                        notif('success', 'Succès', 'Opération éffectuée avec succès.')
                        _('btnFiltreTableModalVersement').click()
                    }
                    
                    completeHandler()
                },
                error: function(error) {

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

                    completeHandler()
                }
            })
        }

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

            confirmMdp('{{ csrf_token() }}', cloturerLignesVersementSelectionne, null)

        })

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

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

    <!-- Script remise central -->
    <script>

        initModal = true

        function initFormCOMPTA_REMISE_AGENCE(){
            
            @if(in_array('GC_AjoutRemiseCentrale', session('LISTE_DROIT_ACCESS')))
                _('newCOMPTA_REMISE_AGENCE').style.display = ''
            @endif

            @if (in_array('GC_ModifRemiseCentrale', session('LISTE_DROIT_ACCESS')))
                _('btnEditCOMPTA_REMISE_AGENCE').style.display = 'none'
            @endif

            $('#selNatureRemise').val(1).trigger('change')

            _('selIDBANQUE').setAttribute('disabled', '')
            _('selIDAGENCE_DESTINATIONModalRemiseCentrale').removeAttribute('disabled')

            _('inpIDCOMPTA_REMISE_AGENCE').value = '0'
            _('inpMontantDevise').value = 0

            $('#selIDAGENCEModalRemiseCentrale').val(_('idSiteEnCours').value).trigger('change');
            $('#selIDAGENCE_DESTINATIONModalRemiseCentrale').val(0).trigger('change')
            $('#selIDMONNAIEModalRemiseCentrale option:first').prop('selected', true).trigger('change');

            _('inpDateRemise').value = '{{ date('Y-m-d') }}'
        }

        $(document).on('change', '#selNatureRemise', function(){
            
            if (this.value == 2) {
                
                _('selIDAGENCE_DESTINATIONModalRemiseCentrale').setAttribute('disabled', '')
                _('selIDBANQUE').removeAttribute('disabled', '')
            }else{

                _('selIDAGENCE_DESTINATIONModalRemiseCentrale').removeAttribute('disabled')
                _('selIDBANQUE').setAttribute('disabled', '')
                $('#selIDBANQUE').val(0).trigger('change')

            }
        })

        @if(in_array('GC_AjoutRemiseCentrale', session('LISTE_DROIT_ACCESS')) || in_array('GC_ModifRemiseCentrale', session('LISTE_DROIT_ACCESS')))
            _('annulerModifCOMPTA_REMISE_AGENCE').addEventListener('click', initFormCOMPTA_REMISE_AGENCE)
        @endif

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

            initModal = true
            $('#modalRemiseCentrale').modal('show')
        })

        function listeCOMPTA_REMISE_AGENCE(IDCOMPTA_REMISE_AGENCE = 0, filtre = []){

            return new Promise(function(resolve, reject) {

                $.ajax({

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

                        if (response.success != 1) {

                            notifError(response.msg)
                        }

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

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

                        completeHandler()
                    }
                })
            })
        }

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

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

                    data.unshift({

                        IDBANQUE : 0,
                        NomBanque : '',
                        NumeroCompteBanque : ''
                    })

                    additionalAttributes = {
                        'data-numerocomptebanque': function(option) { return option.NumeroCompteBanque ?? ''; }
                    }

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

                    $('#selIDBANQUE').select2({
                        dropdownParent : $('#modalRemiseCentrale')
                    })
                }
            })

        listingComboAgence('#selIDAGENCE_DESTINATIONModalRemiseCentrale', true, '')
        
        var tableCOMPTA_REMISE_AGENCE

        function chargerTableCOMPTA_REMISE_AGENCE(){

            let Periode = convertirFormatDate2(_('filtrePeriodeModalRemiseCentrale').value, true, 'YYYY-MM-DD')
            let filtre = {
                'IDAGENCE' : _('selFiltreAgenceModalRemiseCentrale').value,
                dateDebut : Periode[0],
                dateFin : Periode[1]
            }

            listeCOMPTA_REMISE_AGENCE(0, filtre)
                .then((response) => {

                    let data = []

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

                    tableCOMPTA_REMISE_AGENCE = remplissageDataTable({
                                                    IdentifiantDuTableau: '#tableCOMPTA_REMISE_AGENCE',
                                                    obj: data,
                                                    scrollY: '300',
                                                    lengthChange : false
                                                });

                    divShowPer = $('#tableCOMPTA_REMISE_AGENCE_filter')

                    // // Division des valeur totales
                    let BroDivShowPer = divShowPer.parent().prev()
                    BroDivShowPer.addClass('d-flex pt-2')
                    
                    BroDivShowPer.append('<i id="btnValiderLesRemisesSelect" class="bx bx-check-double text-teal me-1 mt-2" style="font-size : 18px; cursor : pointer;"></i><span id="labelBtnValiderLesRemisesSelect" class="fw-bold textTealUnderline mt-2 me-3" style="cursor : pointer;">Valider les remises</span>')
                    BroDivShowPer.append('<i id="btnConfirmerLesRemisesSelect" class="bx bx-check-double text-info me-1 mt-2" style="font-size : 18px; cursor : pointer;"></i><span id="labelBtnConfirmerLesRemisesSelect" class="fw-bold textInfoUnderline mt-2 me-3" style="cursor : pointer;">Confirmer les remises</span>')
                                                
                })
                .catch(() => {

                    tableCOMPTA_REMISE_AGENCE = remplissageDataTable({
                                                    IdentifiantDuTableau: '#tableCOMPTA_REMISE_AGENCE',
                                                    obj: [],
                                                    scrollY: '300',
                                                    lengthChange : false
                                                });
                })
        }

        $(document).on('shown.bs.modal', '#modalRemiseCentrale', function(){

            if (initModal == true) {

                $('#selFiltreAgenceModalRemiseCentrale').val(_('idSiteEnCours').value).trigger('change')
                @if(in_array('GC_AjoutRemiseCentrale', session('LISTE_DROIT_ACCESS')) || in_array('GC_ModifRemiseCentrale', session('LISTE_DROIT_ACCESS')))
                    initFormCOMPTA_REMISE_AGENCE()
                @endif

                chargerTableCOMPTA_REMISE_AGENCE()
            }
        })

        $('#tableCOMPTA_REMISE_AGENCE').on('click', '#checkSelectAll', function() {

            let value = this.checked

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

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

        function listeLigneSelectionneTableCOMPTA_REMISE_AGENCE() {

            let data = []

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

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

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

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

            chargerTableCOMPTA_REMISE_AGENCE()
        })

        function newEditRemiseCentrale(){

            let formCOMPTA_REMISE_AGENCE = new FormData(_('formCOMPTA_REMISE_AGENCE'))
            formCOMPTA_REMISE_AGENCE.append('_token', '{{ csrf_token() }}')
            formCOMPTA_REMISE_AGENCE.append('MontantDevise', chaineEnNumerique(_('inpMontantDevise').value))
            // formCOMPTA_REMISE_AGENCE.append('TauxDevise', $('#selIDMONNAIEModalRemiseCentrale').find('option:selected').attr('data-tauxmonnaie'))
            formCOMPTA_REMISE_AGENCE.append('IDAGENCE_DESTINATION', _('selIDAGENCE_DESTINATIONModalRemiseCentrale').value)
            formCOMPTA_REMISE_AGENCE.append('NumeroCompteBanque',  $('#selIDBANQUE').find('option:selected').attr('data-numerocomptebanque'))
            formCOMPTA_REMISE_AGENCE.append('IDBANQUE', _('selIDBANQUE').value)

            return new Promise(function(resolve, reject) {

                $.ajax({

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

                        if (response.success != 1) {

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

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

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

                        completeHandler()
                    }
                })
            })
        }

        @if(in_array('GC_AjoutRemiseCentrale', session('LISTE_DROIT_ACCESS')))
        _('newCOMPTA_REMISE_AGENCE').addEventListener('click', function(e){

            if(_('selIDAGENCEModalRemiseCentrale').value == _('selIDAGENCE_DESTINATIONModalRemiseCentrale').value){

                notifDanger('Le site de départ ne peut être le site de destination')
                return 0
            }  

            if(_('selIDAGENCEModalRemiseCentrale').value == 0 || _('selIDAGENCEModalRemiseCentrale').value == null){

                notifDanger('Veuillez sélectionner le site de départ de l\'opération.')
                return 0
            }

            if((_('selNatureRemise').value == 1 && _('selIDAGENCE_DESTINATIONModalRemiseCentrale').value == 0) || (_('selNatureRemise').value == 1 && _('selIDAGENCE_DESTINATIONModalRemiseCentrale').value == null)){

                notifDanger('Veuillez sélectionner le site de destination de l\'opération.')
                return 0
            }

            if((_('selNatureRemise').value == 2 && _('selIDBANQUE').value == 0) || (_('selNatureRemise').value == 2 && _('selIDBANQUE').value == null)){

                notifDanger('Veuillez sélectionner la banque liée à cette opération.')
                return 0
            }

            if (chaineEnNumerique(_('inpIDCOMPTA_REMISE_AGENCE').value) != 0 && viderLesEspaces(_('inpIDCOMPTA_REMISE_AGENCE').value) != '') {
                
                _('annulerModifCOMPTA_REMISE_AGENCE').click()
                notifDanger('Échec de l\'opération.')
                return 0
            }

            if (chaineEnNumerique(_('inpIDCOMPTA_REMISE_AGENCE').value) != 0 && viderLesEspaces(_('inpIDCOMPTA_REMISE_AGENCE').value) != '') {
                
                _('annulerModifCOMPTA_REMISE_AGENCE').click()
                notifDanger('Échec de l\'opération.')
                return 0
            }

            if (_('selIDAGENCEModalRemiseCentrale').value == 0) {
                
                notifDanger('Veuillez sélectionner l\'agence.')
                return 0
            }

            if (_('selIDMONNAIEModalRemiseCentrale').value == 0) {
                
                notifDanger('Veuillez sélectionner la devise.')
                return 0
            }

            if(viderLesEspaces(_('inpMontantDevise').value) == '' || chaineEnNumerique(_('inpMontantDevise').value) == 0){

                notifDanger('Veuillez saisir un montant valide')
                return 0
            } 

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

                    if (response.success == 1) {
                        
                        chargerTableCOMPTA_REMISE_AGENCE()
                        initFormCOMPTA_REMISE_AGENCE()
                        notifSuccess('Opération éffectuée avec succès')
                    }
                })
        })
        @endif

        function validerRemiseAgenceVersCompteAttente(){

            let liste = listeLigneSelectionneTableCOMPTA_REMISE_AGENCE()

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

            return new Promise(function(resolve, reject) {

                $.ajax({

                    url: "{{ route('validationRemiseAgence') }}",
                    type: 'POST',
                    data : {
                        data : liste,
                        StatutRemiseAgence : 2,
                        _token : '{{ csrf_token() }}'
                    },
                    dataType: 'json',
                    beforeSend: progressHandler(),
                    success: function(response) {

                        if (response.success != 1) {

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

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

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

                        completeHandler()
                    }
                })
            })
        }

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

            confirmMdp('{{ csrf_token() }}', validerRemiseAgenceVersCompteAttente, null)
                .then((response) => {

                    if (response.success == 1) {
                        
                        notif('success', 'Succès', 'Opération éffectuée avec succès.')
                        chargerTableCOMPTA_REMISE_AGENCE()
                    }
                })
        })

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

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

        function confirmationDeLaRemise(){

            let liste = listeLigneSelectionneTableCOMPTA_REMISE_AGENCE()

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

            return new Promise(function(resolve, reject) {

                $.ajax({

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

                        if (response.success != 1) {

                            notifDanger(response.msg)
                        }

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

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

                        completeHandler()
                    }
                })
            })
        }

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

            if (_('idSiteEnCours').value != 1) {
                
                let data = listeLigneSelectionneTableCOMPTA_REMISE_AGENCE()

                let existeRemiseBanque = false

                existeRemiseBanque = data.some(element => {                    

                    let ligne = tableCOMPTA_REMISE_AGENCE
                        .rows()
                        .nodes()
                        .data()
                        .toArray()
                        .find(item => item.IDCOMPTA_REMISE_AGENCE == element);
                        

                    return ligne && ligne.NatureRemise == 2;
                });
                

                if (existeRemiseBanque == true) {
                    
                    notifDanger('Veuillez vous logger sur la centrale pour effectuer cette opération.');
                    return 0
                }
            }

            confirmMdp('{{ csrf_token() }}', confirmationDeLaRemise, null, title = 'Veuillez saisir votre mot de passe pour confirmer l\'opération', data = { sousTitre: '', infoJNL: "CONFIRMER UNE REMISE EN AGENCE", typeJNL: 3, CodeDroit: "GC_ValidRemiseCentrale" })
                .then((response) => {

                    if (response.success == 1) {
                        
                        notif('success', 'Succès', 'Opération éffectuée avec succès.')
                        chargerTableCOMPTA_REMISE_AGENCE()
                    }
                })
        })

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

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

        // MODIFICATION DE LA REMISE
        $('#tableCOMPTA_REMISE_AGENCE').on('click', '#editRemise', function(){

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

            listeCOMPTA_REMISE_AGENCE(IDCOMPTA_REMISE_AGENCE)
                .then((response) => {

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

                        info.MontantDevise = Math.round(info.MontantDevise, 2)

                        remplirLeForm('formCOMPTA_REMISE_AGENCE', info)

                        @if(in_array('GC_AjoutRemiseCentrale', session('LISTE_DROIT_ACCESS')))
                            _('newCOMPTA_REMISE_AGENCE').style.display = 'none'
                        @endif

                        @if (in_array('GC_ModifRemiseCentrale', session('LISTE_DROIT_ACCESS')))
                            _('btnEditCOMPTA_REMISE_AGENCE').style.display = ''
                        @endif

                        let accordionItem = $('#flush-FormCOMPTA_REMISE_AGENCE');

                        if (!accordionItem.hasClass('show')) {

                            $('#flush-headingOne button').trigger('click');
                        }
                    }
                })
        })

        @if (in_array('GC_ModifRemiseCentrale', session('LISTE_DROIT_ACCESS')))
        _('btnEditCOMPTA_REMISE_AGENCE').addEventListener('click', function(){

            if(_('selIDAGENCEModalRemiseCentrale').value == _('selIDAGENCE_DESTINATIONModalRemiseCentrale').value){

                notif('danger', 'Erreur', 'Le site de départ ne peut être le site de destination')
                return 0
            }

            if (chaineEnNumerique(_('inpIDCOMPTA_REMISE_AGENCE').value) == 0 || viderLesEspaces(_('inpIDCOMPTA_REMISE_AGENCE').value) == '') {
                
                _('annulerModifCOMPTA_REMISE_AGENCE').click()
                notif('danger', 'Erreur', 'Échec de l\'opération.')
                return 0
            }

            if (_('selIDAGENCEModalRemiseCentrale').value == 0) {
                
                notif('danger', 'Erreur', 'Veuillez sélectionner l\'agence.')
                return 0
            }

            if (_('selIDMONNAIEModalRemiseCentrale').value == 0) {
                
                notif('danger', 'Erreur', 'Veuillez sélectionner la devise.')
                return 0
            }

            if(viderLesEspaces(_('inpMontantDevise').value) == '' || chaineEnNumerique(_('inpMontantDevise').value) == 0){

                notif('danger', 'Erreur', 'Veuillez saisir un montant valide')
                return 0
            } 

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

                    if (response.success == 1) {
                        
                        chargerTableCOMPTA_REMISE_AGENCE()
                        initFormCOMPTA_REMISE_AGENCE()
                        notif('success', 'Succès', 'Opération écctuée avec succès')
                    }
                })
        })
        @endif

        // SUPPRESSION DE LA REMISE
        $('#tableCOMPTA_REMISE_AGENCE').on('click', '#suppRemise', function(){

            let IDCOMPTA_REMISE_AGENCE = $(this).data('id')

            Swal.fire({

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

            }).then((result) => {

                if (result.isConfirmed) {

                    $.ajax({

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

                            if (response.success != 1) {

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

                                chargerTableCOMPTA_REMISE_AGENCE()
                                notif('success', 'Succès', 'Opération écctuée avec succès')
                            }

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

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

    </script>

    <!-- Script annulation de versement -->
    <script>

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

            _('formCOMPTA_REMISE_AGENCE').reset()
            _('newCOMPTA_REMISE_AGENCE').style.display = ''
            _('btnEditCOMPTA_REMISE_AGENCE').style.display = 'none'
        })
    </script>

@endsection