@extends('models')

@section('titre-page', 'Versement')
@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-8 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">Versement</li>
                        </ol>
                    </nav>
                </div>

                <div class="col-xl-6 col-lg-4 col-md-6 col-sm-12 mx-0">
                    <div class="row">
                        <div class="col-md-4">
                            @if (in_array('GC_AjouterVersement', session('LISTE_DROIT_ACCESS')))
                            <button type="button" class="btn btn-info-light btn-wave d-flex w-100 justify-content-center align-items-center" id="btnModalSaisieVersement">
                                <i class="bx bx-plus-circle fs-16 me-1"></i>Nouveau versement
                            </button>
                            @endif
                        </div>
                        <div class="col-md-4">
                            @if (in_array('GC_EffectuerClotureJournee', session('LISTE_DROIT_ACCESS')))
                            <button type="button" class="btn btn-danger-light btn-wave d-flex w-100 justify-content-center align-items-center" id="btnCloturerLesLignesSelect">
                                <i class="bx bx-lock-open-alt fs-16 me-1"></i>Cloturer
                            </button>
                            @endif
                        </div>
                        <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>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- Page Header Close -->

    <!-- Start:: row-7 -->
    <div class="row">
        <div class="col-xl-12">
            <div class="card custom-card">
                <div class="card-body">
                    <div class="row px-4">
                        <div class="col-xl-6 col-lg-6 col-sm-6 col-6 d-flex align-items-center">
                            <div class="me-2">
                                <span class="avatar avatar-rounded bg-primary-transparent text-primary">
                                    <i class="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="libnbreLigne"></p>
                                    <span class="text-muted fs-12">Nbre</span>
                                </div>
                            </div>
                        </div>
                        <div class="col-xl-6 col-lg-6 col-sm-6 col-6 d-flex align-items-center">
                            <div class="me-2">
                                <span class="avatar avatar-rounded bg-danger-transparent">
                                    <i class='bx bx-right-down-arrow-circle fs-24'></i>
                                </span>
                            </div>
                            <div class="flex-fill">
                                <p class="fs-18 mb-0 fw-semibold" id="libTotalVersement"></p>
                                <span class="text-muted fs-12">Total versement</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-3 mb-2">
                                <p class="mb-0 text-muted">Site&nbsp;:</p>
                                <select name="IDAGENCE" id="selIDAGENCEFiltre" class="form-select">
                                    <option value="0">TOUS</option>
                                    @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">Opérateur&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="tableVersementRecette">
                            <thead class="table-header-primary">
                                <tr>
                                    <th data-column="action" data-class="text-center" class="text-center" data-orderable="false">
                                        <input class="form-check-input me-4" type="checkbox" id="checkSelectAll">Action
                                    </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>
    <!-- End::app-content -->

    {{-- Section modal --}}

    <!-- Modal de saisie des versements -->
    <div class="modal fade" id="modalSaisieVersement" tabindex="-1" data-bs-focus="false" role="dialog" aria-labelledby="exampleModalLabel">
        <div class="modal-dialog modal-dialog-centered modal-dialog-scrollable" role="document">
            <div class="card flex-fill border border-primary custom-card modal-content pb-0">
                <div class="modal-header">
                    <h6 class="modal-title" id="titleModalSaisieVersement">Nouveau versement</h6>
                    <button type="button" class="btn-close bg-white" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body pt-3">
                    <form id="formVERSEMENT_RECETTE">
                        <input type="number" name="IDVERSEMENT_RECETTE" id="inpIDVERSEMENT_RECETTE" style="display: none">
                        <div class="row">
                            <div class="col-md-6 mb-2">
                                <p class="text-muted mb-0">Site :</p>
                                <select class="form-select" name="IDAGENCE" id="selIDAGENCEModalSaisieVersement">
                                    @foreach(session('site') as $site)
                                        <option value="{{ $site -> IDAGENCE }}">{{ $site -> NomAgence }}</option>
                                    @endforeach
                                </select>
                            </div>
                            <div class="col-md-6 mb-2">
                                <p class="text-muted mb-0">Date :</p>
                                <input type="date" class="form-control" id="inpDateVersementRecetteModalSaisieVersement" name="DateVersementRecette">
                            </div>
                            <div class="col-md-12 mb-2">
                                <p class="text-muted mb-0">Opérateur :</p>
                                <select name="IDPERSONNEL" id="selIDPERSONNELModalSaisieVersement"></select>
                            </div>
                            <div class="col-md-6 mb-2">
                                <p class="text-muted mb-0">Mode de paiement :</p>
                                <select name="IDMODEPAIEMENT" id="selMODEPAIEMENTModalSaisieVersement" class="form-select"></select>
                            </div>
                            <div class="col-md-6 mb-2">
                                <p class="text-muted mb-0">Devise :</p>
                                <select name="IDMONNAIE" id="selIDMONNAIEModalSaisieVersement" class="form-select">
                                    @foreach($listeMonnaie as $monnaie)
                                        <option value="{{ $monnaie -> IDMONNAIE }}" data-tauxmonnaie="{{ $monnaie -> TauxMonnaie }}">{{ $monnaie -> SymboleMonnaie}}</option>
                                    @endforeach
                                </select>
                            </div>
                            <div class="col-md-6 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-6 mb-2">
                                <p class="text-muted mb-0">Montant versé :</p>
                                <input type="text" class="form-control numberInput text-end" name="MontantVerseDevise" id="inpMontantVerseDevise">
                            </div>
                            <div>
                                <p class="text-muted mb-0">Commentaire :</p>
                                <textarea class="form-control" name="CommentaireVersementRecette" id="inpCommentaireVersementRecette" cols="30" rows="5"></textarea>
                            </div>
                        </div>
                    </form>
                </div>
                <div class="modal-footer">
                    <button class="btn btn-success" id="btnValiderVersement">
                        <i class="bx bx-check-circle fs-18 me-2"></i>Valider
                    </button>
                    <button class="btn btn-warning" id="btnModifierVersement">
                        <i class="bx bx-check-circle fs-18 me-2"></i>Modifier
                    </button>
                </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 centrale</h6>
                    <button type="button" class="btn-close bg-white" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body pt-3">
                    <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">
                                        <a class="btn btn-success " id="newCOMPTA_REMISE_AGENCE">
                                            <i class='bx bxs-check-circle'></i>
                                            Valider
                                        </a>
                                        <a class="btn btn-warning" id="btnEditCOMPTA_REMISE_AGENCE">
                                            <span class="bx bxs-edit" style="font-size:16px;"></span>
                                            Modifier
                                        </a>
                                        <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-4 mb-2">
                                                <p class="text-muted mb-0">Site :</p>
                                                <select class="form-select" name="IDAGENCE" id="selIDAGENCEModalRemiseCentrale">
                                                    @if (count(session('site')) > 0)
                                                        <option value="0"></option>
                                                    @endif
                                                    @foreach(session('site') as $site)
                                                        <option value="{{ $site -> IDAGENCE }}">{{ $site -> NomAgence }}</option>
                                                    @endforeach
                                                </select>
                                            </div>
                                            <div class="col-md-4 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 }}" data-tauxmonnaie="{{ $monnaie -> TauxMonnaie }}">{{ $monnaie -> SymboleMonnaie}}</option>
                                                    @endforeach
                                                </select>
                                            </div>
                                            <div class="col-md-4 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>
                                    </form>
                                </div>
                            </div>
                        </div>
                    </div>
                    <hr>
                    <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" name="" id="selFiltreAgenceModalRemiseCentrale">
                                @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-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-width="80" 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="NomAgence" data-class="text-center" class="text-center">Site</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>
                                </tr>
                            </thead>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Modal de choix de banque -->
    <div class="modal fade" id="modalChoixBanque" tabindex="-1" data-bs-focus="false" role="dialog" aria-labelledby="exampleModalLabel">
        <div class="modal-dialog modal-dialog-centered modal-dialog-scrollable modal-sm" role="document">
            <div class="card flex-fill border custom-card modal-content pb-0">
                <div class="modal-header">
                    <h6 class="modal-title">Choix banque</h6>
                    <button type="button" class="btn-close bg-white" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body pt-3">
                    <div class="w-100">
                        <p class="text-muted mb-0">Banque : </p>
                        <select name="IDBANQUE" id="selIDBANQUE">

                        </select>
                    </div>
                </div>
                <div class="modal-footer">
                    <button class="btn btn-success d-flex align-items-center" id="btnValiderRemiseVersBanque">
                        <i class="bx bx-check-circle me-2"></i> Valider
                    </button>
                </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 tableVersementRecette

        function listeTableVersementRecette(){

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

            return new Promise(function(resolve, reject) {

                $.ajax({

                    url: "{{ route('listeTableVersementRecette') }}",
                    type: 'POST',
                    data : {
                        IDAGENCE : IDAGENCE,
                        dateDebut : Periode[0],
                        dateFin : Periode[1],
                        IDPERSONNEL : _('selIDPERSONNEL').value == '' ? 0 : _('selIDPERSONNEL').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()
                    }
                })
            })
        }

        function chargerTableVersementRecette(){

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

                    let data = []

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

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

                    @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

                    _('libnbreLigne').innerHTML = formatNumberPerf(data.length)


                    _('libTotalVersement').innerHTML = formatNumberPerf(calculerSommeColonne(tableVersementRecette, 'montantDeviseAffichageFormat'))
                })
                .catch(() => {

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

                    _('libnbreLigne').innerHTML = '0'
                    _('libTotalVersement').innerHTML = '0'
                })
        }

        chargerTableVersementRecette()

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

                    data[0].NomPrenomPersonnel = ''

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

                    $('#selIDPERSONNELModalSaisieVersement').select2({
                        dropdownParent : $('#modalSaisieVersement')
                    })

                    $('#selIDPERSONNEL').select2()
                }
            })

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

                $('#selMODEPAIEMENTModalSaisieVersement').select2({
                    dropdownParent : $('#modalSaisieVersement')
                })
            })

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

            let value = this.checked

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

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

        function listeLigneSelectionne() {

            let data = []

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

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

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

    </script>

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

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

            chargerTableVersementRecette()
        })
    </script>

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

        function initialiserForm(){

            _('inpIDVERSEMENT_RECETTE').value = 0
            
            $('#selIDAGENCEModalSaisieVersement').val(_('idSiteEnCours').value).trigger('change')
            $('#selIDPERSONNELModalSaisieVersement').val(0).trigger('change')
            $('#selMODEPAIEMENTModalSaisieVersement').val(0).trigger('change')
            $('#selIDMONNAIEModalSaisieVersement').val(0).trigger('change')
            $('#inpSoldeDevise').val(0).trigger('change')
            $('#inpMontantVerseDevise').val(0).trigger('change')
            $('#inpSoldeDeviseOpe').val(0).trigger('change')
            _('inpCommentaireVersementRecette').value = ''

            _('btnValiderVersement').style.display = ''
            _('btnModifierVersement').style.display = 'none'
        }

        function returnSoldeDeviseOpe(){

            if (_('selIDPERSONNELModalSaisieVersement').value == 0 || _('selIDMONNAIEModalSaisieVersement').value == 0 || _('inpDateVersementRecetteModalSaisieVersement').value == null) {
                
                $('#inpSoldeDeviseOpe').val(0).trigger('input')
                return 0
            }

            $.ajax({

                url: "{{ route('returnSoldeDeviseOpe') }}",
                type: 'GET',
                data: {
                    IDAGENCE : _('selIDAGENCEModalSaisieVersement').value,
                    date : _('inpDateVersementRecetteModalSaisieVersement').value,
                    IDPERSONNEL : _('selIDPERSONNELModalSaisieVersement').value,
                    IDMONNAIE : _('selIDMONNAIEModalSaisieVersement').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()
                }
            })
        }

        _('selIDAGENCEModalSaisieVersement').addEventListener('change', returnSoldeDeviseOpe)
        _('inpDateVersementRecetteModalSaisieVersement').addEventListener('change', returnSoldeDeviseOpe)
        _('selIDPERSONNELModalSaisieVersement').addEventListener('change', returnSoldeDeviseOpe)
        _('selIDMONNAIEModalSaisieVersement').addEventListener('change', returnSoldeDeviseOpe)

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

            initialiserForm()
            _('inpDateVersementRecetteModalSaisieVersement').value = "{{ date('Y-m-d') }}"
            $('#modalSaisieVersement').modal('show')
        })

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

            e.preventDefault()
        })

        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', $('#selIDMONNAIEModalSaisieVersement').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()
                    }
                })
            })
        }

        _('btnValiderVersement').addEventListener('click', function(e){

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

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

            if (_('selMODEPAIEMENTModalSaisieVersement').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) {
                        
                        $('#modalSaisieVersement').modal('hide')
                        chargerTableVersementRecette()
                        notif('success', 'Succès', 'Opération écctuée avec succès')
                    }
                })
        })
    </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 $('#selIDAGENCEModalSaisieVersement').val(versement.IDAGENCE).trigger('change')
                        await $('#inpDateVersementRecetteModalSaisieVersement').val(versement.DateVersementRecette).trigger('change')
                        await $('#selIDPERSONNELModalSaisieVersement').val(versement.IDPERSONNEL).trigger('change')
                        await $('#selMODEPAIEMENTModalSaisieVersement').val(versement.IDMODEPAIEMENT).trigger('change')
                        await $('#selIDMONNAIEModalSaisieVersement').val(versement.IDMONNAIE).trigger('change')
                        $('#inpMontantVerseDevise').val(formatNumberPerf(versement.MontantVerseDevise)).trigger('input')
                        $('#inpCommentaireVersementRecette').val(versement.CommentaireVersementRecette).trigger('change')

                        returnSoldeDeviseOpe()

                        _('btnValiderVersement').style.display = 'none'
                        _('btnModifierVersement').style.display = ''

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

        _('btnModifierVersement').addEventListener('click', function(e){

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

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

            if (_('selMODEPAIEMENTModalSaisieVersement').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) {
                        
                        $('#modalSaisieVersement').modal('hide')
                        chargerTableVersementRecette()
                        notif('success', 'Succès', 'Opération écctuée avec succès')
                    }
                })
        })
    </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 data = listeLigneSelectionne()

            if (data.length <= 0) {
                
                notif('danger', 'Erreur', 'Veuillez sélectionner les lignes à clôturer.')
                return 0
            }

            $.ajax({

                url: "{{ route('cloturerLignesVersementSelectionne') }}",
                type: 'POST',
                data: {
                    data : data,
                    _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.')
                        chargerTableVersementRecette()
                    }
                    
                    completeHandler()
                },
                error: function(error) {

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

                    completeHandler()
                }
            })
        }

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

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

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

        })
    </script>

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

        initModal = true

        function initFormCOMPTA_REMISE_AGENCE(){

            _('newCOMPTA_REMISE_AGENCE').style.display = ''
            _('btnEditCOMPTA_REMISE_AGENCE').style.display = 'none'

            _('inpIDCOMPTA_REMISE_AGENCE').value = '0'
            $('#selIDAGENCEModalRemiseCentrale option:first').prop('selected', true).trigger('change');
            $('#selIDMONNAIEModalRemiseCentrale option:first').prop('selected', true).trigger('change');
            _('inpMontantDevise').value = 0
        }

        _('annulerModifCOMPTA_REMISE_AGENCE').addEventListener('click', initFormCOMPTA_REMISE_AGENCE)

        _('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 : $('#modalChoixBanque')
                    })
                }
            })

        
        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: '600',
                                                    lengthChange : false
                                                });

                    divShowPer = $('#tableCOMPTA_REMISE_AGENCE_filter')

                    // // Division des valeur totales
                    let BroDivShowPer = divShowPer.parent().prev()
                    BroDivShowPer.addClass('d-flex pt-2')
                    BroDivShowPer.prepend('<i id="btnConfirmLesRemisesSelect" class="bx bx-check-double text-success me-1 mt-2" style="font-size : 18px; cursor : pointer;"></i><span id="labelBtnConfirmLesRemisesSelect" class="fw-bold textSuccessUnderline mt-2 me-3" style="cursor : pointer;">Confirmer les remises cochées</span>')
                    BroDivShowPer.append('<i id="btnValiderLesRemisesCentralSelect" class="bx bx-check-double text-teal me-1 mt-2" style="font-size : 18px; cursor : pointer;"></i><span id="labelBtnValiderLesRemisesCentralSelect" class="fw-bold textTealUnderline mt-2 me-3" style="cursor : pointer;">Valider remise centrale</span>')
                    BroDivShowPer.append('<i id="btnValiderLesRemisesBanqueSelect" class="bx bx-check-double text-info me-1 mt-2" style="font-size : 18px; cursor : pointer;"></i><span id="labelBtnValiderLesRemisesBanqueSelect" class="fw-bold textInfoUnderline mt-2 me-3" style="cursor : pointer;">Valider remise banque</span>')
                                                
                })
                .catch(() => {

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

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

            if (initModal == true) {

                $('#selFiltreAgenceModalRemiseCentrale').val(_('idSiteEnCours').value).trigger('change')
                initFormCOMPTA_REMISE_AGENCE()
                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'))

            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) {

                            notifError(response.msg)
                        }

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

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

                        completeHandler()
                    }
                })
            })
        }

        _('newCOMPTA_REMISE_AGENCE').addEventListener('click', function(e){

            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) {
                        
                        // $('#modalSaisieFondCaisse').modal('hide')
                        // chargerTableFondCaisse()
                        notif('success', 'Succès', 'Opération écctuée avec succès')
                    }
                })
        })

        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) {

                            notifError(response.msg)
                        }

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

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

                        completeHandler()
                    }
                })
            })
        }

        $(document).on('click', '#btnConfirmLesRemisesSelect', 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', '#labelBtnConfirmLesRemisesSelect', function(){

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

        function validationRemiseAgenceVersCentrale(){

            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,
                        _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()
                    }
                })
            })
        }

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

            if (_('idSiteEnCours').value != 1) {
                
                notif('danger', 'Erreur', 'Cette opération n\'est possible qu\'étant positionné sur la centrale.')
                return 0
            }

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

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

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

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

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

            $('#modalRemiseCentrale').modal('hide')
            $('#modalChoixBanque').modal('show')
        })

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

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

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

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

        function validationRemiseAgenceVersBanque(){

            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 : 4,
                        IDBANQUE : _('selIDBANQUE').value,
                        NumeroCompteBanque :  $('#selIDBANQUE').find('option:selected').attr('data-numerocomptebanque'),
                        _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()
                    }
                })
            })
        }

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

            if (_('idSiteEnCours').value != 1) {
                
                notif('danger', 'Erreur', 'Cette opération n\'est possible qu\'étant positionné sur la centrale.')
                return 0
            }

            if (_('selIDBANQUE').value == 0) {
                
                notif('danger', 'Erreur', 'Veuillez sélectionner une banque.')
                return 0
            }

            let NumeroCompteBanque = $('#selIDBANQUE').find('option:selected').attr('data-numerocomptebanque')

            if (NumeroCompteBanque == '' || NumeroCompteBanque == null) {
                
                notif('danger', 'Erreur', 'Cette banque n\'a pas de numéro de compte.')
                return 0
            }

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

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


    </script>

@endsection