@extends('models')
@section('titre-page', 'Frais généraux')

@section('content-body')
    

    @php

        $listeTauxMonnaie = listeTauxMonnaie();

        $symbDeviseDeBase = $listeTauxMonnaie -> where('MonnaieParDefaut', true) -> first() -> SymboleMonnaie ?? '';
    @endphp
    <!-- Start::app-content -->
    <style>
        .height-input {
            height: 2.5rem !important;
        }

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

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

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

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

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

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

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

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

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

        .ui-menu-item-wrapper {
            white-space: nowrap;
        }
    </style>

    <!-- Page Header -->
    <div class="d-md-flex d-block align-items-center justify-content-between mt-4 page-header-breadcrumb">
        <!-- Start:: row-7 -->
        <div class="col-xl-12 col-12">
            <div class="row mb-3">
                <div class="col-xl-8 col-lg-6 col-md-4 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">Frais généraux</li>
                        </ol>
                    </nav>
                </div>

                <div class="col-xl-4 col-lg-6 col-md-8 col-sm-12 mx-0">
                    <div class="d-flex flex-row-reverse">
                        <div class="col-xl-4 col-lg-6 col-sm-6 px-2" style="display: none;">
                            <!-- !!! J'ai mis un return 0 au niveau du click de ce boutton !!! -->
                            <button type="button" class="btn btn-secondary-light btn-wave d-flex w-100 justify-content-center align-items-center" id="btnModalNewFraisComptant">
                                <i class="ri ri-add-circle-line me-1"></i>Nouveau frais comptant
                            </button>
                        </div>
                        @if(in_array('GC_AccesTypeOpeFraiGen', session('LISTE_DROIT_ACCESS')))
                        <div class="col-xl-6 col-lg-6 col-sm-6 px-2">
                            <button type="button" class="btn btn-warning btn-wave d-flex w-100 justify-content-center align-items-center" id="btnModalTypeOperation">
                                <i class="bx bx-cog me-1"></i>Type opération
                            </button>
                        </div>
                        @endif
                        <div class="col-xl-6 col-lg-6 col-sm-6 px-2">
                            @if (in_array('GC_AjouterFraisGeneraux', session('LISTE_DROIT_ACCESS')))
                            <button type="button" class="btn btn-secondary btn-wave d-flex w-100 justify-content-center align-items-center" id="btnModalNewFraisDiffere">
                                <i class="ri ri-add-circle-line me-1"></i>Nouveau frais 
                            </button>
                            @endif
                        </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="libTotalSalaireBaseFormat"></p>
                                <span class="text-muted fs-12">Total frais généraux ({{$symbDeviseDeBase }})</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="selIDAGENCE" 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-2 col-md-1 mb-0 pt-1 d-flex">
                                <button type="button" class="btn btn-primary btn-wave float-start mt-2 me-1" id="btnFiltreTable">
                                    <i class="ri-search-line" style="font-size:13px; cursor:pointer;"></i>
                                </button>
                                <button type="button" class="btn btn-success-light btn-wave float-start mt-2" id="btnExportExcel">
                                    <i class="ri ri-file-excel-2-line" style="font-size:13px; cursor:pointer;"></i>
                                </button>
                            </div>
                        </div>
                    </form>
                </div>
                <div class="card-body">
                    <div class="table-responsive">
                        <table class="tablehover table table-striped text-nowrap overflow-auto w-100" id="tableListeFraisGeneraux">
                            <thead class="table-header-primary">
                                <tr>
                                    <th data-column="action" data-class="text-center" data-width="30" data-orderable="false"></th>
                                    <th data-column="DateFactureFormat" data-class="text-center" class="text-center">Date</th>
                                    <th data-column="NomFournisseur" class="text-center">Fournisseur</th>
                                    <th data-column="SymboleMonnaie" data-class="text-center" class="text-center">Devise</th>
                                    <th data-column="totalTTC_DEVISE_FACTURE_Fomat" data-class="text-end pe-2" class="text-center">Montant</th>
                                    <th data-column="soldeFacture_devise_facture_Format" data-class="text-end pe-2" class="text-center">Solde</th>
                                    <th data-column="NomAgence" class="text-center">Agence</th>
                                    <!-- <th data-column="NomPrenomPersonnel" class="text-center">Opérateur</th> -->
                                    <th data-column="CommentaireFactureFseur" class="text-center">Commentaire</th>
                                </tr>
                            </thead>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- End::app-content -->

    {{-- Section modal --}}
    <div class="modal fade" id="modalFraisGeneraux" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-dialog-scrollable modal-lg" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h6 class="modal-title" id="titleModalFraisGeneraux">Frais généraux</h6>
                    <button type="button" class="btn-close bg-white" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <form id="FormFraisGeneraux" class="w-100">
                        <input type="number" name="IDFACTUREFSEUR" id="inpIDFACTUREFSEURModalFraisGeneraux" style="display: none">
                        <div class="row">
                            <div class="col-md-4 mb-2">
                                <p class="mb-0 text-muted">Agence&nbsp;:</p>
                                <select name="IDAGENCE" id="selIDAGENCEModalFraisGeneraux" class="form-select">
                                    @foreach(session('site') as $site)
                                        <option value="{{ $site -> IDAGENCE }}">{{ $site -> NomAgence }}</option>
                                    @endforeach
                                </select>
                            </div>
                            <div class="col-md-4 mb-2">
                                <p class="mb-0 text-muted">Date&nbsp;:</p>
                                <input type="date" class="form-control text-center" autocomplete="off" name="DateFacture" id="inpDateFactureModalFraisGeneraux">
                            </div>
                            <div class="col-md-4 mb-2">
                                <p class="mb-0 text-muted">Fournisseur&nbsp;:</p>
                                <select name="IDFOURNISSEUR" id="selIDFOURNISSEURModalFraisGeneraux" class="form-select">
                                </select>
                            </div>
                            <div class="col-md-6 mb-2">
                                <p class="text-muted mb-0">Type opération :</p>
                                <select name="IDCOMPTA_TYPE_OPERATION" id="selIDCOMPTA_TYPE_OPERATIONModalFraisGeneraux"></select>
                            </div>
                            <div class="col-md-6 mb-2">
                                <p class="text-muted mb-0">Compte :</p>
                                <input type="text" id="inpIntituleCompteGTypeOpeModalFraisGeneraux" autocomplete="off" class="form-control" disabled>
                            </div>
                            <div class="col-md-2 mb-2">
                                <p class="mb-0 text-muted">Devise&nbsp;:</p>
                                <select name="IDMONNAIE" id="selIDMONNAIEModalFraisGeneraux" class="form-select">
                                </select>
                            </div>
                            <div class="col-md-4 mb-2">
                                <p class="text-muted mb-0">Compte caisse</p>
                                <input type="text" class="form-control text-center" name="IntituleCompteG" id="inpIntituleCompteGModalFraisGeneraux" disabled>
                            </div>
                            <!-- <div class="col-md-6 mb-2">
                                <p class="mb-0 text-muted">Opérateur&nbsp;:</p>
                                <select name="IDOperateurConcerne" id="selIDOperateurConcerneModalFraisGeneraux" class="form-select">
                                </select>
                            </div> -->
                            <div class="col-md-3 mb-2">
                                <p class="mb-0 text-muted">N° facture&nbsp;:</p>
                                <input type="text" class="form-control text-center" name="PieceObservation" autocomplete="off" id="inpPieceObservationModalFraisGeneraux">
                            </div>
                            <div class="col-md-3 mb-2">
                                <p class="text-muted mb-0">Montant facture&nbsp;:</p>
                                <input type="text" class="form-control numberInput text-end pe-2" name="TotalTTC" autocomplete="off" id="inpTotalTTCModalFraisGeneraux">
                            </div>
                            <div class="col-md-12 mb-2">
                                <p class="mb-0 text-muted">Commentaire&nbsp;:</p>
                                <textarea class="form-control" name="CommentaireFactureFseur" id="inpCommentaireFactureFseur" rows="2"></textarea>
                            </div>
                            <div class="col-md-2 mb-2">
                                <p class="mb-0 text-muted">Taux du fournisseur&nbsp;:</p>
                                <input type="text" class="form-control text-end pe-2 numberInput" name="TauxMonnaieBL" autocomplete="off" id="inpTauxMonnaieBLModalFraisGeneraux">
                            </div>
                            <div class="w-100" id="divBtnValiderFraisDiffere">
                                <button class="btn btn-success d-flex justify-content-center align-items-center float-end" id="validerFraisGenerauxDiffere">
                                    <i class="bx bx-check-circle me-1 fs-22"></i>
                                    Valider
                                </button>
                            </div>
                        </div>
                    </form>
                    <div class="accordion mt-2" id="accordionExample2">
                        <div class="accordion-item">
                            <h2 class="accordion-header py-0">
                                <button class="accordion-button collapsed py-1" type="button" data-bs-toggle="collapse" data-bs-target="#accordPieceJointes">
                                    <i class="ri-attachment-2 me-1" style="font-size : 22px;"></i>
                                    Pièces jointes
                                </button>
                            </h2>
                            <div id="accordPieceJointes" class="accordion-collapse collapse" data-bs-parent="#accordionExample2">
                                <div class="accordion-body">
                                    <div class="attachment-wrapper">
                                        <div class="attachment-carousel" id="carousel">
                                        </div>
                                        <input type="file" id="captureImage" accept="image/*" capture="environment" style="display: none;" />
                                        <input type="file" id="uploaderFichier" accept="image/*,application/pdf" style="display: none;"/>
                                        <button class="btnNewDoc" id="btnNewDoc"><i class="bx bxs-file-plus"></i></button>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div id="divReglementDiffere" class="w-100">
                        <hr style="margin-top: 12px;margin-bottom: 12px;border-color: rgb(230, 227, 227);">
                        <form id="FormReglementFseur" class="w-100">
                            <div class="row">
                                <div class="col-md-2">
                                    <p class="text-muted mb-0">Date&nbsp;:</p>
                                    <input type="date" class="form-control text-center" name="DateReglementFseur" id="inpDateReglementFseurPourReglement">
                                </div>
                                <div class="col-md-3">
                                    <p class="text-muted mb-0">Mode de paiement&nbsp;:</p>
                                    <select name="IDMODEPAIEMENT" id="selIDMODEPAIEMENTPourReglement" class="form-select"></select>
                                </div>
                                <div class="col-md-2">
                                    <p class="text-muted mb-0">Devise&nbsp;:</p>
                                    <select name="IDMONNAIE" id="selIDMONNAIEPourReglement" class="form-select">
                                        <option value="0"></option>
                                        @foreach($listeTauxMonnaie as $monnaie)
                                            <option value="{{ $monnaie -> IDMONNAIE }}" data-taux="{{ $monnaie -> TauxMonnaieInverse }}">{{ $monnaie -> SymboleMonnaie }}</option>
                                        @endforeach
                                    </select>
                                </div>
                                <div class="col-md-2">
                                    <p class="text-muted mb-0">Montant&nbsp;:</p>
                                    <input type="text" class="form-control numberInput text-end pe-2" autocomplete="off" name="MontantReglementFseur" id="inpMontantReglementFseur">
                                </div>
                                <div class="col-md-2">
                                    <p class="text-muted mb-0">Montant devise opération&nbsp;:</p>
                                    <input type="text" class="form-control numberInput text-end pe-2" name="MontantDeviseOperation" id="inpMontantDeviseOperation" disabled>
                                </div>
                                <div class="col-md-1 pt-2">
                                    <button class="btn btn-success mt-1" id="btnNewReglementFseur">
                                        <i class="ri ri-add-circle-line"></i>
                                    </button>
                                </div>
                            </div>
                        </form>
                        <hr style="margin-top: 12px;margin-bottom: 12px;border-color: rgb(230, 227, 227);">
                        <div class="table-responsive">
                            <table class="tablehover table table-striped text-nowrap overflow-auto w-100" id="tableReglementFseur">
                                <thead class="table-header-primary">
                                    <tr>
                                        <!-- <th data-column="action" data-class="text-center" data-width="30" data-orderable="false"></th> -->
                                        <th data-column="DateReglementFseurFormat" data-class="text-center" class="text-center">Date</th>
                                        <th data-column="LibelleModePaiement" class="text-center">Mode de paiement</th>
                                        <th data-column="SymboleMonnaie" data-class="text-center" class="text-center">Devise</th>
                                        <th data-column="MontantRegDeviseFormat" data-class="text-end pe-2" class="text-center">Montant</th>
                                        <th data-column="MontantDeviseFactureFormat" data-class="text-end pe-2" class="text-center">Montant devise facture</th>
                                    </tr>
                                </thead>
                            </table>
                        </div>
                    </div>
                </div>
                <div class="modal-footer" id="footerModalFraisGenerauxComptant">
                    <button class="btn btn-success d-flex justify-content-center align-items-center" id="validerFraisGenerauxComptant">
                        <i class="bx bx-check-circle me-1 fs-22"></i>
                        Valider
                    </button>
                </div>
                <div class="modal-footer" id="footerModalFraisGenerauxDiffere" style="display: none;">
                    <div class="d-flex align-items-center">
                        <span class="text-muted me-1">Solde&nbsp;:</span>
                        <span class="fw-bold" id="libSoldeFormat"></span>
                    </div>
                    <div class="d-flex align-items-center">
                        <span class="text-muted me-1">Total réglé devise facture&nbsp;:</span>
                        <span class="fw-bold" id="libMontantDeviseFactureFormat"></span>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Modal pour l'aperçu du fichier enregistré -->
    <div class="modal fade" id="modalApercuDoc" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-lg" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h6 class="modal-title">Aperçu du document</h6>
                    <button type="button" class="btn-close bg-white" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <iframe id="frameApercuDoc" class="form-control" style="min-height: 500px;" src="" frameborder="0"></iframe>
                </div>
            </div>
        </div>
    </div>

    <!-- Modal type d'opération -->
    <x-modelModal taille="lg" id="modalCOMPTA_TYPE_OPERATION">
        <x:slot name="title">Type opération</x:slot>
        <x:slot name="zoneButton">
            <a class="btn btn-success " id="newCOMPTA_TYPE_OPERATION">
                <i class='bx bxs-check-circle'></i>
                Valider
            </a>
            <a class="btn btn-warning" data-bs-toggle="tooltip" data-bs-custom-class="tooltip-warning"
                data-bs-placement="top" 
                id="btnEditCOMPTA_TYPE_OPERATION">
                <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"
                data-bs-placement="bottom" title="Annuler l'opération"
                id="annulerModifCOMPTA_TYPE_OPERATION">
                <span class="bx bxs-x-circle me-1" style="font-size:16px;"></span>
                Annuler
            </a>
        </x:slot>
        <x:slot name="zoneInput">
            <form id="formCOMPTA_TYPE_OPERATION" class="w-100">
                <div class="row">
                    <input type="hidden" id="inpIDCOMPTA_TYPE_OPERATIONModalCOMPTA_TYPE_OPERATION" name="IDCOMPTA_TYPE_OPERATION">
                    <div class="col-md-4">
                        <p class="text-muted mb-0">Site<span class="ms-1 text-danger">*</span>:</p>
                        <select name="IDAGENCE" id="selIDAGENCEModalCOMPTA_TYPE_OPERATION" class="form-select" disabled>
                            @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-md-4">
                        <p class="text-muted mb-0">Compte général<span class="ms-1 text-danger">*</span>:</p>
                        <select name="IDCOMPTA_COMPTE_GENERAUX" id="selIDCOMPTA_COMPTE_GENERAUXModalCOMPTA_TYPE"></select>
                    </div>
                    <div class="col-4 mb-2">
                        <p class="mb-0 text-muted">Libellé du type<span class="ms-1 text-danger">*</span>:</p>
                        <input type="text" class="form-control text-uppercase" name="LibelleTypeOperation"
                            id="inpLibelleTypeOperationModalCOMPTA_TYPE_OPERATION" />
                    </div>
                </div>
            </form>
        </x:slot>
        <x:slot name="table">
            <div class="row">
                <div class="table-responsive">
                    <table class="tablehover table table-striped w-100" id="tableCOMPTA_TYPE_OPERATION">
                        <thead class="table-header-primary">
                            <tr class="text-light">
                                <th data-width="80" data-column="action" data-class="text-center" class="text-center p-0">Action</th>
                                <th data-column="LibelleTypeOperation" class="text-center">Libellé</th>
                                <th data-column="IntituleCompteG" class="text-center">Compte</th>
                                <th data-column="NomAgence" class="text-center">Agence</th>
                            </tr>
                        </thead>
                    </table>
                </div>
            </div>
        </x:slot>
    </x-modelModal>

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

        var tableListeFraisGeneraux

        function listeFraisGeneraux(IDFACTUREFSEUR = 0, IDAGENCE = 0, Periode = ''){

            return new Promise(function(resolve, reject) {

                $.ajax({

                    url: "{{ route('listeFraisGeneraux') }}",
                    type: 'GET',
                    data : {
                        IDFACTUREFSEUR : IDFACTUREFSEUR,
                        IDAGENCE : IDAGENCE,
                        Periode : Periode
                    },
                    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 chargerTableFraisGeneraux(){

            listeFraisGeneraux(0, _('selIDAGENCE').value, _('filtrePeriode').value)
                .then((response) => {

                    let data = []

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

                    _('libnbreLigne').innerHTML = data.length
                    _('libTotalSalaireBaseFormat').innerHTML = formatNumberPerf(response.totalFraisGeneraux)
                    tableListeFraisGeneraux = remplissageDataTable({
                                                    IdentifiantDuTableau: '#tableListeFraisGeneraux',
                                                    obj: data,
                                                    scrollY: '400px',
                                                    lengthChange : false
                                                });
                })
                .catch(() => {

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

        chargerTableFraisGeneraux()

        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 listeCaisseParDeviseParAgence(IDAGENCE){

            return new Promise(function(resolve, reject) {

                $.ajax({

                    url: "{{ route('listeCaisseParDeviseParAgence') }}",
                    type: 'GET',
                    data : {
                        IDAGENCE : IDAGENCE
                    },
                    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 listeFournisseurSimple(){

            return new Promise(function(resolve, reject) {

                $.ajax({

                    url: "{{ route('listeFournisseurSimple') }}",
                    type: 'GET',
                    data : {
                        fraisGeneraux : true
                    },
                    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()
                    }
                })
            })
        }

        additionalAttributesFournisseur = {
            'data-comptetiers': function(option) { return option.CompteTiersFournisseur; }
        }

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

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

                    data.unshift({
                        IDFOURNISSEUR : 0,
                        CompteTiersFournisseur : '',
                        NomFournisseur : ''
                    })

                    populateSelect('#selIDFOURNISSEURModalFraisGeneraux', {

                        data : data,
                        valueKey : 'IDFOURNISSEUR',
                        textKey : 'NomFournisseur',
                        additionalAttributes : additionalAttributesFournisseur
                    })

                    $('#selIDFOURNISSEURModalFraisGeneraux').select2({
                        dropdownParent: $('#modalFraisGeneraux')
                    })
                }
            })
    </script>

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

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

            e.preventDefault()
            chargerTableFraisGeneraux()
        })

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

            chargerTableFraisGeneraux()
        })
    </script>

    <!-- Script de frais généraux -->
    <script>

        let tableListeFraisGenerauxUpdate = false

        function desactiverLesChamps(){

            _('selIDAGENCEModalFraisGeneraux').setAttribute('disabled', '')
            _('inpDateFactureModalFraisGeneraux').setAttribute('disabled', '')
            _('selIDFOURNISSEURModalFraisGeneraux').setAttribute('disabled', '')
            _('selIDMONNAIEModalFraisGeneraux').setAttribute('disabled', '')
            // _('selIDOperateurConcerneModalFraisGeneraux').setAttribute('disabled', '')
            _('inpPieceObservationModalFraisGeneraux').setAttribute('disabled', '')
            _('inpTotalTTCModalFraisGeneraux').setAttribute('disabled', '')
            _('validerFraisGenerauxDiffere').setAttribute('disabled', '')
            _('inpTauxMonnaieBLModalFraisGeneraux').setAttribute('disabled', '')
        }

        function activerLesChamps(){

            _('selIDAGENCEModalFraisGeneraux').removeAttribute('disabled')
            _('inpDateFactureModalFraisGeneraux').removeAttribute('disabled')
            _('selIDFOURNISSEURModalFraisGeneraux').removeAttribute('disabled')
            _('selIDMONNAIEModalFraisGeneraux').removeAttribute('disabled')
            // _('selIDOperateurConcerneModalFraisGeneraux').removeAttribute('disabled')
            _('inpPieceObservationModalFraisGeneraux').removeAttribute('disabled')
            _('inpTotalTTCModalFraisGeneraux').removeAttribute('disabled')
            _('validerFraisGenerauxDiffere').removeAttribute('disabled')
            _('inpTauxMonnaieBLModalFraisGeneraux').removeAttribute('disabled')
        }

        function viderModal(){

            _('inpIDFACTUREFSEURModalFraisGeneraux').value = 0
            $('#selIDAGENCEModalFraisGeneraux').val(_('idSiteEnCours').value).trigger('change')
            _('inpDateFactureModalFraisGeneraux').value = "{{ date('Y-m-d') }}"
            $('#selIDFOURNISSEURModalFraisGeneraux').val(0).trigger('change')
            $('#selIDMONNAIEModalFraisGeneraux').val(0).trigger('change') 
            _('inpIntituleCompteGModalFraisGeneraux').value = ''
            _('inpIntituleCompteGTypeOpeModalFraisGeneraux').value = ''
            // $('#selIDOperateurConcerneModalFraisGeneraux').val(0).trigger('change') 
            _('inpPieceObservationModalFraisGeneraux').value = ''
            _('inpTotalTTCModalFraisGeneraux').value = ''
            _('inpCommentaireFactureFseur').value = ''
            _('inpTauxMonnaieBLModalFraisGeneraux').value = ''
            

            activerLesChamps()
        }

        function viderFormReglement(){

            $('#selIDMODEPAIEMENTPourReglement').val(0).trigger('change')
            $('#selIDMONNAIEPourReglement').val(0).trigger('change')
            _('inpMontantReglementFseur').value = ''
            _('inpMontantDeviseOperation').value = ''
            _('inpDateReglementFseurPourReglement').value = '{{ date("Y-m-d") }}'
        }

        function dispositionModalFraisGenerauxComptant(){

            _('selIDAGENCEModalFraisGeneraux').parentElement.classList.remove('col-xl-2')
            _('selIDAGENCEModalFraisGeneraux').parentElement.classList.add('col-xl-4')

            _('inpDateFactureModalFraisGeneraux').parentElement.classList.remove('col-xl-2')
            _('inpDateFactureModalFraisGeneraux').parentElement.classList.add('col-xl-4')

            _('selIDFOURNISSEURModalFraisGeneraux').parentElement.classList.remove('col-xl-3')
            _('selIDFOURNISSEURModalFraisGeneraux').parentElement.classList.add('col-xl-4')

            _('inpIntituleCompteGModalFraisGeneraux').parentElement.classList.remove('col-xl-3')
            _('inpIntituleCompteGModalFraisGeneraux').parentElement.classList.add('col-xl-4')

            // _('selIDOperateurConcerneModalFraisGeneraux').parentElement.classList.remove('col-xl-3')
            // _('selIDOperateurConcerneModalFraisGeneraux').parentElement.classList.add('col-xl-6')

            _('selIDCOMPTA_TYPE_OPERATIONModalFraisGeneraux').parentElement.classList.remove('col-xl-3')
            _('selIDCOMPTA_TYPE_OPERATIONModalFraisGeneraux').parentElement.classList.add('col-xl-6')

            _('inpIntituleCompteGTypeOpeModalFraisGeneraux').parentElement.classList.remove('col-xl-3')
            _('inpIntituleCompteGTypeOpeModalFraisGeneraux').parentElement.classList.add('col-xl-6')

            _('inpPieceObservationModalFraisGeneraux').parentElement.classList.remove('col-xl-2')
            _('inpPieceObservationModalFraisGeneraux').parentElement.classList.add('col-xl-3')

            _('inpTotalTTCModalFraisGeneraux').parentElement.classList.remove('col-xl-2')
            _('inpTotalTTCModalFraisGeneraux').parentElement.classList.add('col-xl-3')

            _('inpCommentaireFactureFseur').parentElement.classList.remove('col-xl-3')
            _('inpCommentaireFactureFseur').parentElement.classList.add('col-xl-12')

            _('modalFraisGeneraux').children[0].classList.remove('modal-xl')
            _('modalFraisGeneraux').children[0].classList.add('modal-lg')

            _('titleModalFraisGeneraux').innerHTML = 'Frais généraux au comptant'

            _('footerModalFraisGenerauxComptant').style.display = ''
            _('divBtnValiderFraisDiffere').style.display = 'none'
            _('divReglementDiffere').style.display = 'none' 
            _('footerModalFraisGenerauxDiffere').style.display = 'none'
        }

        // FRAIS GENERAUX AU COMPTANT
        _('btnModalNewFraisComptant').addEventListener('click', function(){
            
            return 0

            viderModal()
            dispositionModalFraisGenerauxComptant()

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

        additionalAttributesMonnaie = {
            'data-intitulecompteg': function(option) { return option.IntituleCompteG; },
            'data-taux': function(option) { return option.TauxMonnaieInverse; }
        }

        $('#selIDCOMPTA_TYPE_OPERATIONModalFraisGeneraux').select2({
            dropdownParent : $('#modalFraisGeneraux')
        })

        additionalAttributesTypeOpe = {
            'data-intitulecompteg': function(option) { return option.IntituleCompteG; },
            'data-numerocompteg': function(option) { return option.NumeroCompteG; },
            'data-idcomptacomptegeneraux' : function(option) { return option.IDCOMPTA_COMPTE_GENERAUX}
        }

        listeCaisseParDeviseParAgence(_('selIDAGENCEModalFraisGeneraux').value)
            .then((response) => {

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

                    data.unshift({
                        IDMONNAIE : 0,
                        SymboleMonnaie : '',
                        IntituleCompteG : ''
                    });

                    populateSelect('#selIDMONNAIEModalFraisGeneraux', {
                        data : data,
                        valueKey : 'IDMONNAIE',
                        textKey : 'SymboleMonnaie',
                        additionalAttributes : additionalAttributesMonnaie
                    });
                }
            })

        async function handleAgenceChange(agenceId) {

            // console.log('IDAGENCE => '+ agenceId);
            

            const response = await listeCaisseParDeviseParAgence(agenceId);

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

                data.unshift({
                    IDMONNAIE : 0,
                    SymboleMonnaie : '',
                    IntituleCompteG : ''
                });

                populateSelect('#selIDMONNAIEModalFraisGeneraux', {
                    data : data,
                    valueKey : 'IDMONNAIE',
                    textKey : 'SymboleMonnaie',
                    additionalAttributes : additionalAttributesMonnaie
                });
            }

            const response2 = await listeCOMPTA_TYPE_OPERATION(0, agenceId, true)

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

                data.unshift({
                    IDCOMPTA_TYPE_OPERATION : 0,
                    LibelleTypeOperation : '',
                    IntituleCompteG : ''
                })

                populateSelect('#selIDCOMPTA_TYPE_OPERATIONModalFraisGeneraux', {
                    data : data,
                    valueKey : 'IDCOMPTA_TYPE_OPERATION',
                    textKey : 'LibelleTypeOperation',
                    additionalAttributes : additionalAttributesTypeOpe
                })

                $('#selIDCOMPTA_TYPE_OPERATIONModalFraisGeneraux').select2({
                    dropdownParent : $('#modalFraisGeneraux')
                })

                _('inpIntituleCompteGTypeOpeModalFraisGeneraux').value = ''
            }
        }

        $(document).on('change', '#selIDAGENCEModalFraisGeneraux', function(){

            handleAgenceChange(this.value);
        })

        $(document).on('change', '#selIDMONNAIEModalFraisGeneraux', function(){
            
            _('inpIntituleCompteGModalFraisGeneraux').value = $(this).find('option:selected').attr('data-intitulecompteg')
            $('#inpTauxMonnaieBLModalFraisGeneraux').val($(this).find('option:selected').attr('data-taux')).trigger('input') 
        })

        $(document).on('change', '#selIDCOMPTA_TYPE_OPERATIONModalFraisGeneraux', function(){

            _('inpIntituleCompteGTypeOpeModalFraisGeneraux').value = $(this).find('option:selected').attr('data-intitulecompteg')
        })

        // Valider frais generaux au comptant C'EST CE CODE QUI EST UTILISE
        function validerFraisGenerauxAuComptant(){

            let IDCOMPTA_COMPTE_GENERAUX = $('#selIDCOMPTA_TYPE_OPERATIONModalFraisGeneraux').find('option:selected').attr('data-idcomptacomptegeneraux')
            let numerocomptegOpe = $('#selIDCOMPTA_TYPE_OPERATIONModalFraisGeneraux').find('option:selected').attr('data-numerocompteg')

            let FormFraisGeneraux = new FormData(_('FormFraisGeneraux'))

            FormFraisGeneraux.append('IDCOMPTA_COMPTE_GENERAUX', IDCOMPTA_COMPTE_GENERAUX)
            FormFraisGeneraux.append('numerocomptegOpe', numerocomptegOpe)

            FormFraisGeneraux.append('CompteTiersFournisseur', $('#selIDFOURNISSEURModalFraisGeneraux').find('option:selected').attr('data-comptetiers'))
            FormFraisGeneraux.append('_token', '{{ csrf_token() }}')

            return new Promise(function(resolve, reject) {

                $.ajax({

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

                        if (response.success != 2) {

                            notifError(response.msg)
                        }

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

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

                        completeHandler()
                    }
                })
            })
        }

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

            if (_('inpDateFactureModalFraisGeneraux').value == '' || _('inpDateFactureModalFraisGeneraux').value == null) {
                
                notif('danger', 'Erreur', 'Veuillez saisir la date de l\'opération')
                return 0
            }

            if (_('selIDFOURNISSEURModalFraisGeneraux').value == 0) {
                
                notif('danger', 'Erreur', 'Veuillez sélectionner le fournisseur')
                return 0
            }

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

            if (_('inpTotalTTCModalFraisGeneraux').value.replace(/\s/g, '') == '') {
                
                notif('danger', 'Erreur', 'Veuillez saisir le montant de l\'opération')
                return 0
            }

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

                    if (response.success == 2) {
                        
                        notif('success', 'Succès', 'Opération éffectuée avec succès')
                        chargerTableFraisGeneraux()
                        $('#modalFraisGeneraux').modal('hide')
                    }
                })
        })

        // FRAIS GENERAUX DIFFERE NON UTILISE 
        var tableReglementFseur

        var dataTableReglementFseur = []

        function dispositionModalFraisGenerauxDiffere(){

            _('selIDAGENCEModalFraisGeneraux').parentElement.classList.remove('col-xl-4')
            _('selIDAGENCEModalFraisGeneraux').parentElement.classList.add('col-xl-2')

            _('inpDateFactureModalFraisGeneraux').parentElement.classList.remove('col-xl-4')
            _('inpDateFactureModalFraisGeneraux').parentElement.classList.add('col-xl-2')

            _('selIDFOURNISSEURModalFraisGeneraux').parentElement.classList.remove('col-xl-4')
            _('selIDFOURNISSEURModalFraisGeneraux').parentElement.classList.add('col-xl-2')

            _('inpIntituleCompteGModalFraisGeneraux').parentElement.classList.remove('col-xl-4')
            _('inpIntituleCompteGModalFraisGeneraux').parentElement.classList.add('col-xl-3')

            // _('selIDOperateurConcerneModalFraisGeneraux').parentElement.classList.remove('col-xl-6')
            // _('selIDOperateurConcerneModalFraisGeneraux').parentElement.classList.add('col-xl-3')

            _('selIDCOMPTA_TYPE_OPERATIONModalFraisGeneraux').parentElement.classList.remove('col-xl-6')
            _('selIDCOMPTA_TYPE_OPERATIONModalFraisGeneraux').parentElement.classList.add('col-xl-3')

            _('inpIntituleCompteGTypeOpeModalFraisGeneraux').parentElement.classList.remove('col-xl-6')
            _('inpIntituleCompteGTypeOpeModalFraisGeneraux').parentElement.classList.add('col-xl-3')
            
            _('inpPieceObservationModalFraisGeneraux').parentElement.classList.remove('col-xl-3')
            _('inpPieceObservationModalFraisGeneraux').parentElement.classList.add('col-xl-2')

            _('inpTotalTTCModalFraisGeneraux').parentElement.classList.remove('col-xl-3')
            _('inpTotalTTCModalFraisGeneraux').parentElement.classList.add('col-xl-2')

            _('inpCommentaireFactureFseur').parentElement.classList.remove('col-xl-12')
            _('inpCommentaireFactureFseur').parentElement.classList.add('col-xl-3')

            _('modalFraisGeneraux').children[0].classList.remove('modal-lg')
            _('modalFraisGeneraux').children[0].classList.add('modal-xl')
            
            // _('titleModalFraisGeneraux').innerHTML = 'Frais généraux'

            _('footerModalFraisGenerauxComptant').style.display = 'none'
            _('divBtnValiderFraisDiffere').style.display = ''
            _('divReglementDiffere').style.display = ''
            _('footerModalFraisGenerauxDiffere').style.display = ''
        }

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

            viderModal()
            viderFormReglement()
            dispositionModalFraisGenerauxDiffere()

            dataTableReglementFseur = []

            progressHandler()
            $('#modalFraisGeneraux').modal('show')
        })

        const chargerTableReglementFseur = async () =>{

            tableReglementFseur = await remplissageDataTable({
                                        IdentifiantDuTableau: '#tableReglementFseur',
                                        obj: dataTableReglementFseur,
                                        scrollY: '300',
                                        lengthChange : false
                                    });

            _('libMontantDeviseFactureFormat').innerHTML = await calculerSommeColonne(tableReglementFseur, 'MontantDeviseFacture')
            
            _('libSoldeFormat').innerHTML = formatNumberPerf(_('inpTotalTTCModalFraisGeneraux').value.replace(/\s/g, '') - _('libMontantDeviseFactureFormat').innerHTML.replace(/\s/g, ''))
        }

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

            chargerTableReglementFseur()
            completeHandler()
        })

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

            if (tableListeFraisGenerauxUpdate == true) {
                
                chargerTableFraisGeneraux()
            }
        })

        //  NON UTILISE 
        function validerFraisGenerauxDiffere(){

            let FormFraisGeneraux = new FormData(_('FormFraisGeneraux'))

            let numerocomptegOpe = $('#selIDCOMPTA_TYPE_OPERATIONModalFraisGeneraux').find('option:selected').attr('data-numerocompteg')
            FormFraisGeneraux.append('numerocomptegOpe', numerocomptegOpe)

            let IDCOMPTA_COMPTE_GENERAUX = $('#selIDCOMPTA_TYPE_OPERATIONModalFraisGeneraux').find('option:selected').attr('data-idcomptacomptegeneraux')
            FormFraisGeneraux.append('IDCOMPTA_COMPTE_GENERAUX', IDCOMPTA_COMPTE_GENERAUX)
            
            FormFraisGeneraux.append('CompteTiersFournisseur', $('#selIDFOURNISSEURModalFraisGeneraux').find('option:selected').attr('data-comptetiers'))
            FormFraisGeneraux.append('_token', '{{ csrf_token() }}')

            return new Promise(function(resolve, reject) {

                $.ajax({

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

                        if (response.success != 2) {

                            notifError(response.msg)
                        }

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

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

                        completeHandler()
                    }
                })
            })
        }

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

            e.preventDefault()
        })

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

            e.preventDefault()

            if (_('inpDateFactureModalFraisGeneraux').value == '' || _('inpDateFactureModalFraisGeneraux').value == null) {
                
                notif('danger', 'Erreur', 'Veuillez saisir la date de l\'opération')
                return 0
            }

            if (_('selIDFOURNISSEURModalFraisGeneraux').value == 0) {
                
                notif('danger', 'Erreur', 'Veuillez sélectionner le fournisseur')
                return 0
            }

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

            if (chaineEnNumerique(_('inpTotalTTCModalFraisGeneraux').value) == '') {
                
                notif('danger', 'Erreur', 'Veuillez saisir le montant de l\'opération')
                return 0
            }

            if (chaineEnNumerique(_('inpTotalTTCModalFraisGeneraux').value) <= 0) {
                
                notif('danger', 'Erreur', 'Veuillez saisir un montant valide pour cette de opération')
                return 0
            }

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

                    if (response.success == 2) {
                        
                        notif('success', 'Succès', 'Opération éffectuée avec succès')
                        _('inpIDFACTUREFSEURModalFraisGeneraux').value = response.IDFACTUREFSEUR
                        chargerTableFraisGeneraux()
                        desactiverLesChamps()
                        tableListeFraisGenerauxUpdate = true
                    }
                })
        })

        function infoFACTUREFSEUR(IDFACTUREFSEUR){

            return new Promise(function(resolve, reject) {

                $.ajax({

                    url: "{{ route('infoFACTUREFSEUR') }}",
                    type: 'GET',
                    data : {
                        IDFACTUREFSEUR : IDFACTUREFSEUR
                    },
                    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', '#reglerFACTUREFSEUR', function(){

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

            infoFACTUREFSEUR(IDFACTUREFSEUR)
                .then(async (response) => {

                    if (response.success == 1) {

                        dataTableReglementFseur = response.data

                        dispositionModalFraisGenerauxDiffere()
                        desactiverLesChamps()

                        let data = response.info

                        _('inpIDFACTUREFSEURModalFraisGeneraux').value = IDFACTUREFSEUR
                        
                        await handleAgenceChange(data.IDAGENCE);
                        $('#selIDAGENCEModalFraisGeneraux').val(data.IDAGENCE).trigger('change');
                        
                        setTimeout(() => {
                            
                            $('#selIDCOMPTA_TYPE_OPERATIONModalFraisGeneraux').val(data.IDComptaTypeOperation).trigger('change')
                            $('#selIDMONNAIEModalFraisGeneraux').val(data.IDMONNAIE).trigger('change');
                            _('inpTauxMonnaieBLModalFraisGeneraux').value = data.TauxMonnaieBL
                        }, 3000);

                        _('inpPieceObservationModalFraisGeneraux').value = data.PieceObservation
                        _('inpDateFactureModalFraisGeneraux').value = data.DateFacture
                        _('inpTotalTTCModalFraisGeneraux').value = parseFloat(data.TotalTTC_Devise)
                        _('inpCommentaireFactureFseur').value = data.CommentaireFactureFseur
                        

                        $('#selIDFOURNISSEURModalFraisGeneraux').val(data.IDFOURNISSEUR).trigger('change')

                        let listeDoc = response.listeDoc

                        _('carousel').innerHTML = ''

                        listeDoc.forEach((itemDoc) => {

                            addPieceJointe(itemDoc)
                        })

                        $('.numberInput').trigger('input')
                        viderFormReglement()
                        $('#modalFraisGeneraux').modal('show')
                        
                    }
                })
        })

    </script>

    <!-- Script de règlement différé -->
    <script>

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

                $('#selIDMODEPAIEMENTPourReglement').select2({
                    dropdownParent: $('#modalFraisGeneraux')
                })
            })

        function newReglementFseur(){

            let FormReglementFseur = new FormData(_('FormReglementFseur'))
            FormReglementFseur.append('IDFACTUREFSEUR', _('inpIDFACTUREFSEURModalFraisGeneraux').value)

            let tauxMonnaie = $('#selIDMONNAIEPourReglement').val() == $('#selIDMONNAIEModalFraisGeneraux').val() ? chaineEnNumerique($('#inpTauxMonnaieBLModalFraisGeneraux').val()) : parseFloat($('#selIDMONNAIEPourReglement').find('option:selected').attr('data-taux'))
        
            FormReglementFseur.append('TauxMonnaie', tauxMonnaie)
            FormReglementFseur.append('MontantDeviseOperation', _('inpMontantDeviseOperation').value.replace(/\s/g, ''))
            FormReglementFseur.append('_token', '{{ csrf_token() }}')

            return new Promise(function(resolve, reject) {

                $.ajax({

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

                        if (response.success != 2) {

                            notifError(response.msg)
                        }

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

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

                        completeHandler()
                    }
                })
            })
        }

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

            e.preventDefault()
        })

        $(document).on('input', '#inpMontantReglementFseur', function(){

            let valeur = parseFloat(this.value.replace(/\s/g, ''))
            let taux = parseFloat($('#selIDMONNAIEPourReglement').find('option:selected').attr('data-taux'))
            let valeurDeviseDeBase = valeur * taux

            let tauxDeviseOperation = parseFloat($('#selIDMONNAIEModalFraisGeneraux').find('option:selected').attr('data-taux'))            

            $('#inpMontantDeviseOperation').val(valeurDeviseDeBase / tauxDeviseOperation).trigger('input')
        })

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

            e.preventDefault()

            let totalDejaRegle = parseFloat(_('libMontantDeviseFactureFormat').innerHTML.replace(/\s/g, ''))
            let montantNewReglement = parseFloat(_('inpMontantDeviseOperation').value.replace(/\s/g, ''))

            let futurTotalRegle = totalDejaRegle + montantNewReglement


            if (futurTotalRegle > parseFloat(_('inpTotalTTCModalFraisGeneraux').value.replace(/\s/g, ''))) {
                
                notif('danger', 'Erreur', 'Le montant total réglé dépasse le montant de la facture')
                return 0
            }

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

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

            if (_('inpMontantReglementFseur').value.replace(/\s/g, '') == '' || parseFloat(_('inpMontantReglementFseur').value.replace(/\s/g, '')) == 0) {
                
                notif('danger', 'Erreur', 'Veuillez saisir le montant de l\'opération')
                return 0
            }

            if (_('inpIDFACTUREFSEURModalFraisGeneraux').value.replace(/\s/g, '') == '' || _('inpIDFACTUREFSEURModalFraisGeneraux').value.replace(/\s/g, '') == 0) {
                
                notif('danger', 'Erreur', 'Veuillez valider la facture')
                return 0
            }

            if ($('#selIDCOMPTA_TYPE_OPERATIONModalFraisGeneraux').find('option:selected').attr('data-idcomptacomptegeneraux') == null || $('#selIDCOMPTA_TYPE_OPERATIONModalFraisGeneraux').find('option:selected').attr('data-idcomptacomptegeneraux') == 0 || $('#selIDCOMPTA_TYPE_OPERATIONModalFraisGeneraux').find('option:selected').attr('data-idcomptacomptegeneraux') == '') {
                
                notif('danger', 'Erreur', 'Le compte général de la devise de la facture n\'est pas configuré.')
                return 0
            }

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

                    if (response.success == 2) {
                        
                        infoFACTUREFSEUR(_('inpIDFACTUREFSEURModalFraisGeneraux').value)
                            .then(async (response) => {

                                if (response.success == 1) {

                                    dataTableReglementFseur = response.data
                                    progressHandler()
                                    await chargerTableReglementFseur()
                                    completeHandler()
                                    tableListeFraisGenerauxUpdate = true
                                }
                            })

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


        })
    </script>

    <!-- Script de type d'opération -->
    <script>

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

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

            // $('#selIDAGENCEModalCOMPTA_TYPE_OPERATION').val(_('idSiteEnCours').value).trigger('change')
            
            _('annulerModifCOMPTA_TYPE_OPERATION').click()

            progressHandler()

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

        _('annulerModifCOMPTA_TYPE_OPERATION').addEventListener('click', function(){
            
            _('inpIDCOMPTA_TYPE_OPERATIONModalCOMPTA_TYPE_OPERATION').value = 0
            _('inpLibelleTypeOperationModalCOMPTA_TYPE_OPERATION').value = ''
            // _('selIDAGENCEModalCOMPTA_TYPE_OPERATION').removeAttribute('disabled')
            $('#selIDCOMPTA_COMPTE_GENERAUXModalCOMPTA_TYPE').val(0).trigger('change')
            _('newCOMPTA_TYPE_OPERATION').style.display = ''
            _('btnEditCOMPTA_TYPE_OPERATION').style.display = 'none'
        })

        $('#selIDCOMPTA_COMPTE_GENERAUXModalCOMPTA_TYPE').select2({
            dropdownParent : $('#modalCOMPTA_TYPE_OPERATION')
        })

        // $(document).on('change', '#selIDAGENCEModalCOMPTA_TYPE_OPERATION', function(){

        //     if (_('inpIDCOMPTA_TYPE_OPERATIONModalCOMPTA_TYPE_OPERATION').value != 0 && viderLesEspaces(_('inpIDCOMPTA_TYPE_OPERATIONModalCOMPTA_TYPE_OPERATION').value) != '') {
                
        //         return 0
        //     }

            listeCOMPTA_COMPTE_GENERAUXPourSelect(_('selIDAGENCEModalCOMPTA_TYPE_OPERATION').value)
                .then(async (response) => {

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

                        data.unshift({
                            IDCOMPTA_COMPTE_GENERAUX : 0,
                            valeurAffiche : ''
                        })

                        populateSelect('#selIDCOMPTA_COMPTE_GENERAUXModalCOMPTA_TYPE', {
                            data : data,
                            valueKey : 'IDCOMPTA_COMPTE_GENERAUX',
                            textKey : 'valeurAffiche'
                        })

                        $('#selIDCOMPTA_COMPTE_GENERAUXModalCOMPTA_TYPE').select2({
                            dropdownParent : $('#modalCOMPTA_TYPE_OPERATION')
                        })

                        progressHandler()

                        await chargerTableCOMPTA_TYPE_OPERATION()

                        completeHandler()
                    }
                })
        // })

        function listeCOMPTA_TYPE_OPERATION(IDCOMPTA_TYPE_OPERATION = 0, IDAGENCE, pourSelect = false) {

            return new Promise(function(resolve, reject) {

                $.ajax({

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

        var tableCOMPTA_TYPE_OPERATION
        dataTableCOMPTA_TYPE_OPERATION = []

        function chargerTableCOMPTA_TYPE_OPERATION(){

            listeCOMPTA_TYPE_OPERATION(0, _('selIDAGENCEModalCOMPTA_TYPE_OPERATION').value)
                .then((response) => {

                    dataTableCOMPTA_TYPE_OPERATION = []

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

                    tableCOMPTA_TYPE_OPERATION = remplissageDataTable({
                                                    IdentifiantDuTableau: '#tableCOMPTA_TYPE_OPERATION',
                                                    obj: dataTableCOMPTA_TYPE_OPERATION,
                                                    scrollY: '350px'
                                                });
                })
        }

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

            await chargerTableCOMPTA_TYPE_OPERATION()
            completeHandler()
        })

        function newEditCOMPTA_TYPE_OPERATION(){

            let formCOMPTA_TYPE_OPERATION = new FormData(_('formCOMPTA_TYPE_OPERATION'))
            formCOMPTA_TYPE_OPERATION.append('IDAGENCE', _('selIDAGENCEModalCOMPTA_TYPE_OPERATION').value)
            formCOMPTA_TYPE_OPERATION.append('_token', '{{ csrf_token() }}')

            return new Promise(function(resolve, reject) {

                $.ajax({

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

                        if (response.success != 2) {

                            notifError(response.msg)
                        }

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

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

                        completeHandler()
                    }
                })
            })
        }

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

            e.preventDefault()
        })

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

            if (_('selIDCOMPTA_COMPTE_GENERAUXModalCOMPTA_TYPE').value == 0) {
                
                notif('danger', 'Erreur', 'Veuillez sélectionner le compte général')
                return 0
            }

            if (_('inpLibelleTypeOperationModalCOMPTA_TYPE_OPERATION').value.replace(/\s/g, '') == '') {
                
                notif('danger', 'Erreur', 'Veuillez saisir Le libéllé')
                return 0
            }

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

                    if (response.success == 2) {
                        
                        notif('success', 'Succès', 'Opération éffectuée avec succès')
                        _('annulerModifCOMPTA_TYPE_OPERATION').click()
                        chargerTableCOMPTA_TYPE_OPERATION()
                    }
                })
        })

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

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

            listeCOMPTA_TYPE_OPERATION(IDCOMPTA_TYPE_OPERATION, -1)
                .then((response) => {

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

                        _('inpIDCOMPTA_TYPE_OPERATIONModalCOMPTA_TYPE_OPERATION').value = IDCOMPTA_TYPE_OPERATION
                        // $('selIDAGENCEModalCOMPTA_TYPE_OPERATION').val(info.IDAGENCE).trigger('change')
                        // _('selIDAGENCEModalCOMPTA_TYPE_OPERATION').setAttribute('disabled', '')
                        $('#selIDCOMPTA_COMPTE_GENERAUXModalCOMPTA_TYPE').val(info.IDCOMPTA_COMPTE_GENERAUX).trigger('change')
                        _('inpLibelleTypeOperationModalCOMPTA_TYPE_OPERATION').value = info.LibelleTypeOperation

                        _('newCOMPTA_TYPE_OPERATION').style.display = 'none'
                        _('btnEditCOMPTA_TYPE_OPERATION').style.display = ''
                    }
                })
        })

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

            if (_('selIDCOMPTA_COMPTE_GENERAUXModalCOMPTA_TYPE').value == 0) {
                
                notif('danger', 'Erreur', 'Veuillez sélectionner le compte général')
                return 0
            }

            if (_('inpLibelleTypeOperationModalCOMPTA_TYPE_OPERATION').value.replace(/\s/g, '') == '') {
                
                notif('danger', 'Erreur', 'Veuillez saisir Le libéllé')
                return 0
            }

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

                    if (response.success == 2) {
                        
                        notif('success', 'Succès', 'Opération éffectuée avec succès')
                        _('annulerModifCOMPTA_TYPE_OPERATION').click()
                        chargerTableCOMPTA_TYPE_OPERATION()
                    }
                })
        })

    </script>

    <!-- Script pour uploader un fichier -->
    <script>

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

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

        function returnItemPieceJointe(item){

            let IDDocument = item.IDDOCUMENT_NUMERISE
            let src = item.base64
            let extension = item.ExtensionFichier
            // let base64 = item.base64

            switch (extension) {
                case 'jpg':
                case 'jpeg':
                case 'png':
                case 'gif':
                case 'bmp':
                case 'webp':
                case 'svg':
                    classIcone = 'bx bx-image'
                    classBgBtn = 'bg-secondary'
                    break;
                case 'doc':
                case 'docx':
                case 'txt':
                    classIcone = 'ri-file-word-line'
                    classBgBtn = 'bg-primary'
                    break;
                case '':
                    
                    break;
                case 'xls':
                case 'xlsx':
                    classIcone = 'ri-file-excel-2-line'
                    classBgBtn = 'bg-success'
                    break;
                case 'pdf':
                    classIcone = 'ri-file-pdf-line'
                    classBgBtn = 'bg-danger'
                    break;
                default:
                    classIcone = 'bx bx-image'
                    classBgBtn = 'bg-secondary'
                    break;
            }

            return `
                <div class="attachment ${classBgBtn}" id="itemPieceJointe" data-id="${IDDocument}" data-src="${src}">
                    <i class="${classIcone} text-white" style="font-size : 30px;"></i>
                </div>
            `
        }

        function addPieceJointe(item){

            $('#carousel').append(returnItemPieceJointe(item))
        }

        function televerserDocument(file, typeDoc, IDDocumentSrc) {

            let formData = new FormData();
            formData.append('file', file);
            formData.append('typeDoc', typeDoc);
            formData.append('IDDocumentSrc', IDDocumentSrc);
            formData.append('_token', '{{ csrf_token() }}');

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

                $.ajax({
                    url: "{{ route('televerserDocument') }}",
                    type: 'POST',
                    data: formData,
                    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) {

                        notif('danger', 'Erreur', 'Échec de la requête')
                        reject(error)
                        completeHandler()
                    }
                });
            });
        }

        _('uploaderFichier').addEventListener('change', function() {
            
            let IDIDFACTUREFSEUR = _('inpIDFACTUREFSEURModalFraisGeneraux').value

            if (this.files.length > 0) {

                let file = this.files[0]

                if (file.size > 5 * 1024 * 1024) { // 5 Mo

                    notif('danger', 'Erreur', 'Le fichier est trop volumineux, maximum 5 Mo')
                    return 0
                }

                console.log(file, 1, IDIDFACTUREFSEUR);
                

                televerserDocument(file, 1, IDIDFACTUREFSEUR)
                    .then((response) => {

                        if (response.success == 1) {

                            let data = response.data

                            addPieceJointe(data)
                            notif('success', 'Succes', 'Fichier téléversé avec succès')
                        }

                        this.value = '';
                    })
            }
        })
    </script>

    <!-- Script pour afficher l'aperçu d'un document -->
    <script>

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

            $('#modalFraisGeneraux').modal('hide')

            _('frameApercuDoc').src = $(this).data('src');

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

        $(document).on('hide.bs.modal', '#modalApercuDoc', function(){

            $('#modalFraisGeneraux').modal('show')
        })
    </script>

    <!-- Script export excel liste frais généraux -->
    <script>
        _('btnExportExcel').addEventListener('click', function() {

            // exportExcel('tableExpedition', 'tableExpedition', [0])
            var data = getCleanedTableData('tableListeFraisGeneraux')
            const filename = file_name("LISTE_FRAIS_GENERAUX");
            const tabs_format = {
                D: '#,##0',
                E: '#,##0',
            //     L: '#,##0',
            //     M: '#,##0',
            //     N: '#,##0',
            //     O: '#,##0',
            //     P: '#,##0',
            //     R: '#,##0',
            //     S: '#,##0'
            };
            download_excel_file('{{ route('export_global_excel.export') }}', data, filename, ['action'], tabs_format)
        })
    </script>

@endsection