@extends('models')
@section('titre-page', 'Gestion salaire')
@section('content-body')

    @php

        $PARAMETRE = DB::table('PARAMETRE') -> select('IDNumeroCompteGeneralClient', 'IDNumeroCompteGeneralFournisseur') -> first();

        $IDNumeroCompteGeneralClient = $PARAMETRE -> IDNumeroCompteGeneralClient;
        $IDNumeroCompteGeneralFournisseur = $PARAMETRE -> IDNumeroCompteGeneralFournisseur;

        $listeTauxMonnaie = listeTauxMonnaie();

    @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-6 col-sm-12 mt-2 mb-md-2">
                    <nav>
                        <ol class="breadcrumb mb-0">
                            <li class="breadcrumb-item text-light"><a href="javascript:void(0);">Comptabilité</a></li>
                            <li class="breadcrumb-item active" aria-current="page">Gestion salaire</li>
                        </ol>
                    </nav>
                </div>

                <div class="col-xl-4 col-lg-6 col-md-6 col-sm-12 mx-0">
                    <div class="d-flex justify-content-between">
                        @if (in_array('GC_AjouterSalaire', session('LISTE_DROIT_ACCESS')))
                        <div class="col-xl-6 col-lg-6 col-sm-6 px-2">
                            <button type="button" class="btn btn-secondary-light btn-wave d-flex w-100 justify-content-center align-items-center" id="btnModalNewSalaire">
                                <i class="ri ri-add-circle-line me-1"></i>Nouveaux salaires
                            </button>
                        </div>
                        @endif
                        <div class="col-xl-6 col-lg-6 col-sm-6 px-2">
                            <button type="button" class="btn btn-warning-light btn-wave d-flex w-100 justify-content-center align-items-center" id="btnImprimerSalaire">
                                <i class="bx bx-printer me-1"></i>Imprimer
                            </button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- Page Header Close -->

    <!-- Start:: row-7 -->
    <div class="row">
        <div class="col-xl-12">
            <div class="card custom-card">
                <div class="card-body">
                    <div class="row px-4">
                        <div class="col-xl-3 col-lg-3 col-sm-3 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-3 col-lg-3 col-sm-3 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">Salaire de base</span>
                            </div>
                        </div>
                        <div class="col-xl-3 col-lg-3 col-sm-3 col-1 d-flex align-items-center">
                            <div class="me-2">
                                <span class="avatar avatar-rounded bg-success-transparent">
                                    <i class='bx bx-right-top-arrow-circle fs-24'></i>
                                </span>
                            </div>
                            <div class="flex-fill">
                                <p class="fs-18 mb-0 text-success fw-semibold" id="libtotalPrimeFormat"></p>
                                <span class="text-muted fs-12">Prime</span>
                            </div>
                        </div>
                        <div class="col-xl-3 col-lg-3 col-sm-3 col-1 d-flex align-items-center">
                            <div class="me-2">
                                <span class="avatar avatar-rounded bg-info-transparent">
                                    <i class="bi bi-cash-stack fs-24"></i>
                                </span>
                            </div>
                            <div class="flex-fill">
                                <p class="fs-18 mb-0 text-info fw-semibold" id="libTotalNetAPayerFormat"></p>
                                <span class="text-muted fs-12">Net à payer</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-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 text-nowrap overflow-auto w-100" id="tableListeComptaSalaire">
                            <thead class="table-header-primary">
                                <tr>
                                    <th data-column="action" data-class="text-center" data-width="30" data-orderable="false">Actions</th>
                                    <th data-column="PeriodeSalaireFormat" data-class="text-center" class="text-center">Date</th>
                                    <th data-column="NomAgence" class="text-center">Site</th>
                                    <th data-column="TotalSalaireBaseFormat" data-class="text-end pe-2" class="text-center">Salaire de base</th>
                                    <th data-column="TotalPrimeFormat" data-class="text-end pe-2" class="text-center">Prime</th>
                                    <th data-column="TotalNetAPayerFormat" data-class="text-end pe-2" class="text-center">Net à payer</th>
                                    <th data-column="CommentaireComptaSalaire" class="text-center">Commentaire</th>
                                </tr>
                            </thead>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- End::app-content -->

    {{-- Section modal --}}
    <x-modelModal taille="xl" id="modalEnregistrementSalaire">
        <x:slot name="title">Exercice comptable</x:slot>
        <x:slot name="zoneButton">
            <button class="btn btn-warning me-2" id="btnReinitialiserSaisie">
                <i class="bx bx-reset me-1" style="font-size:16px;"></i>Réinitialiser
            </button>
            <button class="btn btn-info me-2" id="btnEnregistrerSalaire">
                <i class='bx bx-save me-1'></i>Enregistrer
            </button>
            <button class="btn btn-success" id="btnValiderSalaire">
                <i class='bx bx-check-circle me-1'></i>Valider
            </button>
        </x:slot>
        <x:slot name="zoneInput">
            <div class="row">
                <input type="number" id="inpIDCOMPTA_SALAIRE" name="IDCOMPTA_SALAIRE" style="display: none;">
                <input type="number" id="inpStatutComptaSalaire" name="StatutComptaSalaire" style="display: none;">
                <div class="col-md-3 mb-2">
                    <p class="mb-0 text-muted">Site&nbsp;:</p>
                    <select name="IDAGENCE" id="selIDAGENCEModalEnregistrementSalaire" class="form-select">
                        @foreach(session('site') as $site)
                            <option value="{{ $site -> IDAGENCE }}">{{ $site -> NomAgence }}</option>
                        @endforeach
                    </select>
                </div>
                <div class="col-md-9 mb-2">
                    <p class="text-muted mb-0">Période :</p>
                    <input type="text" class="form-control text-center" name="filtrePeriode" id="inpPeriodeSalaire">
                </div>
                <div id="tableTotauxParDeviseContainer" class="my-2 p-3 pt-1 rounded" style="background : rgb(255, 247, 247);"></div>
                <div class="col-md-12">
                    <p class="text-muted mb-0">Commentaire :</p>
                    <textarea name="CommentaireComptaSalaire" id="inpCommentaireComptaSalaire" class="form-control" cols="30" rows="2"></textarea>
                </div>
            </div>
            <hr style="margin-top: 12px;margin-bottom: 12px;border-color: rgb(230, 227, 227);">
            <div class="row">
                <div class="col-md-3">
                    <p class="text-muted mb-0">Fonction :</p>
                    <select class="form-select" name="IDPERSONNEL_FONCTION" id="selIDPERSONNEL_FONCTIONModalEnregistrementSalaire"></select>
                </div>
                <div class="col-md-3">
                    <p class="text-muted mb-0">Monnaie :</p>
                    <select class="form-select" name="IDMONNAIE" id="selIDMONNAIEModalEnregistrementSalaire">
                        @foreach($listeTauxMonnaie as $monnaie)
                            <option value="{{ $monnaie -> IDMONNAIE }}">{{ $monnaie -> LibelleMonnaie }}</option>
                        @endforeach
                    </select>
                </div>
                <div class="col-md-4">
                    <p class="text-muted mb-0">Prime :</p>
                    <input type="text" class="form-control text-end pe-2 numberInput" id="inpPrimeGroupeModalEnregistrementSalaire">
                </div>
                <div class="col-md-2 pt-3">
                    <button class="btn btn-success" id="btnValiderPrimeGroupe">
                        <i class="bx bx-check-circle"></i>
                    </button>
                </div>
            </div>
        </x:slot>
        <x:slot name="table">
            <div class="row">
                <div class="table-responsive">
                    <table class="tablehover table table-striped text-nowrap overflow-auto w-100 tablehover" id="tableEnregistrementSalaire">
                        <thead class="table-header-primary">
                            <tr>
                                <th data-column="action" data-class="text-center" data-width="20" class="text-center"></th>
                                <th data-column="NomPrenomPersonnel" class="text-center">Personnel</th>
                                <th data-column="NumeroComptePersonnel" data-class="text-start" class="text-center">N° compte</th>
                                <th data-column="LibelleFonction" data-class="text-start" class="text-center">Fonction</th>
                                <th data-column="selectDevise" class="text-center">Devise</th>
                                <th data-column="inpMontantSalaireBase" data-class="text-center" class="text-center">Salaire base</th>
                                <th data-column="inpMontantSalairePrime" data-class="text-center" class="text-center">Prime</th>
                                <th data-column="inpMontantSalaireNetAPayer" data-class="text-center" class="text-center">Net à payer</th>
                            </tr>
                        </thead>
                    </table>
                </div>
            </div>
        </x:slot>
    </x-modelModal>

@endsection

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

        var tableListeComptaSalaire

        var listeMonnaie = {!! json_encode($listeTauxMonnaie) !!}

        $('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') }}'
        });

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

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

        function listeCOMPTA_SALAIRE(){

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

            return new Promise(function(resolve, reject) {

                $.ajax({

                    url: "{{ route('listeCOMPTA_SALAIRE') }}",
                    type: 'POST',
                    data: {
                        IDAGENCE : IDAGENCE,
                        dateDebut: Periode[0],
                        dateFin : Periode[1],
                        _token : '{{ csrf_token() }}'
                    },
                    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()
                    }
                })
            })
        }

        function chargerTableListeComptaSalaire(){

            listeCOMPTA_SALAIRE()
                .then(async (response) => {

                    let data = []

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

                        _('libnbreLigne').innerHTML = response.nbreLigne
                        _('libTotalSalaireBaseFormat').innerHTML = response.TotalSalaireBaseFormat
                        _('libtotalPrimeFormat').innerHTML = response.totalPrimeFormat
                        _('libTotalNetAPayerFormat').innerHTML = response.TotalNetAPayerFormat
                    }

                    tableListeComptaSalaire = await remplissageDataTable({
                                                IdentifiantDuTableau: '#tableListeComptaSalaire',
                                                obj: data,
                                                scrollY: '350px'
                                            });

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

                })
                .catch(() => {

                    tableListeComptaSalaire = remplissageDataTable({
                                                IdentifiantDuTableau: '#tableListeComptaSalaire',
                                                obj: [],
                                                scrollY: '350px'
                                            });
                })
        }

        function listeFonctionPersonnel(){

            return new Promise(function(resolve, reject) {

                $.ajax({

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

                        if (response.succes != true) {

                            notifError(response.msg || 'Échec de l\'opération.')
                        }

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

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

                        completeHandler()
                    }
                })
            })
        }

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

                if (response.succes == true) {
                    
                    let data = response.data

                    data.unshift({
                        IDPERSONNEL_FONCTION : '0',
                        LibelleFonction : ''
                    })

                    populateSelect('#selIDPERSONNEL_FONCTIONModalEnregistrementSalaire', {
                        data : data,
                        valueKey : 'IDPERSONNEL_FONCTION',
                        textKey : 'LibelleFonction'
                    })
                    
                }
            })

        chargerTableListeComptaSalaire()

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

            chargerTableListeComptaSalaire()
        })
    </script>

    <!-- Script enregistrement des salaires -->
    <script>

        var dataTableEnregistrementSalaire = []
        var tableEnregistrementSalaire

        function listeDesSalaireACreer(IDCOMPTA_SALAIRE = 0){

            return new Promise(function(resolve, reject) {

                $.ajax({

                    url: "{{ route('listeDesSalaireACreer') }}",
                    type: 'GET',
                    data: {
                        IDCOMPTA_SALAIRE: IDCOMPTA_SALAIRE,
                        IDAGENCE : _('selIDAGENCEModalEnregistrementSalaire').value
                    },
                    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 MAJNetAPayerUneLigne(IDPERSONNEL){

            let MontantSalaireBase = $('.inpMontantSalaireBase[data-idpersonnel="'+IDPERSONNEL+'"]').val().replace(',', '.').replace(/\s/g, '')
            MontantSalaireBase = MontantSalaireBase == '' ? 0 : MontantSalaireBase
            MontantSalaireBase = parseFloat(MontantSalaireBase)

            let MontantSalairePrime = $('.inpMontantSalairePrime[data-idpersonnel="'+IDPERSONNEL+'"]').val().replace(',', '.').replace(/\s/g, '')
            MontantSalairePrime = MontantSalairePrime == '' ? 0 : MontantSalairePrime
            MontantSalairePrime = parseFloat(MontantSalairePrime)

            MontantSalaireNetAPayer = MontantSalaireBase + MontantSalairePrime

            $('.inpMontantSalaireNetAPayer[data-idpersonnel="'+IDPERSONNEL+'"]').val(MontantSalaireNetAPayer).trigger('change')
        }

        function chargerTableTotauxParDevise(){

            let data = tableEnregistrementSalaire.rows().data().toArray();

            let dataTotaux = {};

            data.forEach(function(value) {

                let IDPERSONNEL = value.IDPERSONNEL
                
                let IDMONNAIE = $('.selMONNAIE[data-idpersonnel="'+IDPERSONNEL+'"]').val()

                if (!dataTotaux[IDMONNAIE]) {
                    dataTotaux[IDMONNAIE] = {
                        MontantSalaireBase: 0,
                        MontantSalairePrime: 0,
                        MontantSalaireNetAPayer: 0
                    };
                }                

                dataTotaux[IDMONNAIE].MontantSalaireBase += chaineEnNumerique($('.inpMontantSalaireBase[data-idpersonnel="'+IDPERSONNEL+'"]').val())
                dataTotaux[IDMONNAIE].MontantSalairePrime += chaineEnNumerique($('.inpMontantSalairePrime[data-idpersonnel="'+IDPERSONNEL+'"]').val())
                dataTotaux[IDMONNAIE].MontantSalaireNetAPayer += chaineEnNumerique($('.inpMontantSalaireNetAPayer[data-idpersonnel="'+IDPERSONNEL+'"]').val())
            });

            let result = {
                MontantSalaireBase: {},
                MontantSalairePrime: {},
                MontantSalaireNetAPayer: {}
            };

            Object.keys(dataTotaux).forEach(function(IDMONNAIE) {
                result.MontantSalaireBase[IDMONNAIE] = dataTotaux[IDMONNAIE].MontantSalaireBase;
                result.MontantSalairePrime[IDMONNAIE] = dataTotaux[IDMONNAIE].MontantSalairePrime;
                result.MontantSalaireNetAPayer[IDMONNAIE] = dataTotaux[IDMONNAIE].MontantSalaireNetAPayer;
            });

            let tableHTML = `
                <table class="tablehover table">
                    <thead>
                        <tr>
                            <th class="text-dark text-center py-1"></th>
            `;            

            Object.keys(result.MontantSalaireBase).forEach((IDMONNAIE) => {
                tableHTML += `<th class="text-dark text-center py-1">${listeMonnaie.find(monnaie => monnaie.IDMONNAIE == IDMONNAIE)?.SymboleMonnaie || 'N/A'}</th>`;
                
            });

            tableHTML += `
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <td class="py-1">Salaire de Base</td>
            `;

            Object.keys(result.MontantSalaireBase).forEach((IDMONNAIE) => {
                tableHTML += `<td class="py-1 text-end pe-2 montantSalaireBase" data-id="${IDMONNAIE}">${formatNumberPerf(result.MontantSalaireBase[IDMONNAIE])}</td>`;
            });

            tableHTML += `
                        </tr>
                        <tr>
                            <td class="py-1">Prime</td>
            `;

            Object.keys(result.MontantSalairePrime).forEach((IDMONNAIE) => {
                tableHTML += `<td class="py-1 text-end pe-2 montantSalairePrime" data-id="${IDMONNAIE}">${formatNumberPerf(result.MontantSalairePrime[IDMONNAIE])}</td>`;
            });

            tableHTML += `
                        </tr>
                        <tr>
                            <td class="py-1">Net à Payer</td>
            `;

            Object.keys(result.MontantSalaireNetAPayer).forEach((IDMONNAIE) => {
                tableHTML += `<td class="py-1 text-end pe-2 montantSalaireNet" data-id="${IDMONNAIE}">${formatNumberPerf(result.MontantSalaireNetAPayer[IDMONNAIE])}</td>`;
            });

            tableHTML += `
                        </tr>
                    </tbody>
                </table>
            `;

            document.getElementById('tableTotauxParDeviseContainer').innerHTML = tableHTML;
            $('.numberInput').trigger('input')
        }

        _('btnModalNewSalaire').addEventListener('click', async function(){

            $('#selIDAGENCEModalEnregistrementSalaire').val(_('idSiteEnCours').value).trigger('change')

            let response = await listeDesSalaireACreer(0);

            if (response.success == 1) {

                dataTableEnregistrementSalaire = response.data;

                _('inpIDCOMPTA_SALAIRE').value = 0
                _('inpCommentaireComptaSalaire').value = ''
                _('inpPeriodeSalaire').value = "{{date('01/m/Y')}} - {{date('t/m/Y')}}"
                _('selIDAGENCEModalEnregistrementSalaire').removeAttribute('disabled')

                _('btnReinitialiserSaisie').removeAttribute('disabled')
                _('btnEnregistrerSalaire').removeAttribute('disabled')
                _('btnValiderSalaire').removeAttribute('disabled')

                progressHandler()

                $('#modalEnregistrementSalaire').modal({
                    backdrop: 'static',
                    keyboard: false
                })

                $('#modalEnregistrementSalaire').modal('show',);
            }
        })

        _('selIDAGENCEModalEnregistrementSalaire').addEventListener('change', async function(){

            if ($('#modalEnregistrementSalaire').hasClass('show')) {

                let response = await listeDesSalaireACreer(0);

                if (response.success == 1) {

                    dataTableEnregistrementSalaire = response.data;
                    _('inpCommentaireComptaSalaire').value = ''

                    progressHandler()

                    tableEnregistrementSalaire = await remplissageDataTable({
                                                    IdentifiantDuTableau: '#tableEnregistrementSalaire',
                                                    obj: dataTableEnregistrementSalaire,
                                                    scrollY: '350px'
                                                });

                    // MAJTotauxMontant()

                    completeHandler()
                }
            }
        })

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

            tableEnregistrementSalaire = await remplissageDataTable({
                                                IdentifiantDuTableau: '#tableEnregistrementSalaire',
                                                obj: dataTableEnregistrementSalaire,
                                                scrollY: '350px'
                                            });

            _('btnValiderPrimeGroupe').removeAttribute('disabled')

            // MAJTotauxMontant()
            await chargerTableTotauxParDevise()
            
            if(_('inpStatutComptaSalaire').value > 0){

                _('btnValiderPrimeGroupe').setAttribute('disabled', '')

                document.querySelectorAll('.selMONNAIE').forEach(function(element){

                    element.setAttribute('disabled', 'disabled')
                })
                document.querySelectorAll('.inpMontantSalaireBase').forEach(function(element){

                    element.setAttribute('disabled', 'disabled')
                })
                document.querySelectorAll('.inpMontantSalairePrime').forEach(function(element){

                    element.setAttribute('disabled', 'disabled')
                })
            }

            completeHandler()
        })

        $(document).on('change', '.inpMontantSalaireBase', function(){

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

            let IDPERSONNEL = $(this).attr('data-idpersonnel')
            MAJNetAPayerUneLigne(IDPERSONNEL)
        })

        $(document).on('change', '.inpMontantSalairePrime', function(){

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

            let IDPERSONNEL = $(this).attr('data-idpersonnel')
            MAJNetAPayerUneLigne(IDPERSONNEL)
        })

        $(document).on('change', '.inpMontantSalaireNetAPayer', function(){

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

        $(document).on('change', '.selMONNAIE', function(){

            let IDPERSONNEL = $(this).attr('data-idpersonnel')

            let IDMONNAIE = $(this).val()

            let monnaie = listeMonnaie.find(item => item.IDMONNAIE == IDMONNAIE);

            // Récupérer les données complètes du tableau
            let allData = tableEnregistrementSalaire.rows().data().toArray();

            // Trouver l'objet correspondant
            let ligne = allData.find(item => item.IDPERSONNEL == IDPERSONNEL);

            if (ligne && monnaie) {
                // Modifier directement l'objet sans appeler row().data()
                ligne.IDMONNAIE = IDMONNAIE;
                ligne.TauxMonnaie = monnaie.TauxMonnaie;
            }
            
            // MAJTotauxMontant()
            chargerTableTotauxParDevise()
        })

        // Script du boutton de réinitialisation
        _('btnReinitialiserSaisie').addEventListener('click', function(){

            Swal.fire({

                title: 'Voulez-vous réinitialiser tous les montants saisis ?',
                // text: 'Seules les commandes non collectées seront supprimées.',
                icon: 'warning',
                showCancelButton: true,
                customClass: {
                    confirmButton: 'btn btn-danger ms-2'
                },
                cancelButtonColor: '#d33',
                confirmButtonText: 'Oui',
                cancelButtonText: 'Non'

            }).then((result) => {

                if (result.isConfirmed) {

                    let elements = tableEnregistrementSalaire.rows().nodes(); 

                    $(elements).find('.inpMontantSalaireBase').val(0)
                    $(elements).find('.inpMontantSalairePrime').val(0)
                    $(elements).find('.inpMontantSalaireNetAPayer').val(0)
                    
                    // MAJTotauxMontant()
                    chargerTableTotauxParDevise()
                }
            })
        })

        // Script d'enregistrement du salaire
        function enregistrerSalaire(){

            let dataSalaire = []

            tableEnregistrementSalaire.rows().data().each(function(value) {

                let IDPERSONNEL = value.IDPERSONNEL

                let IDMONNAIE = $('.selMONNAIE[data-idpersonnel="'+IDPERSONNEL+'"]').val()

                MontantSalaireBase = $('.inpMontantSalaireBase[data-idpersonnel="'+IDPERSONNEL+'"]').val().replace(',', '.').replace(/\s/g, '')
                MontantSalaireBase = MontantSalaireBase == '' ? 0 : MontantSalaireBase
                MontantSalaireBase = parseFloat(MontantSalaireBase)

                MontantSalairePrime = $('.inpMontantSalairePrime[data-idpersonnel="'+IDPERSONNEL+'"]').val().replace(',', '.').replace(/\s/g, '')
                MontantSalairePrime = MontantSalairePrime == '' ? 0 : MontantSalairePrime
                MontantSalairePrime = parseFloat(MontantSalairePrime)

                MontantSalaireNetAPayer = $('.inpMontantSalaireNetAPayer[data-idpersonnel="'+IDPERSONNEL+'"]').val().replace(',', '.').replace(/\s/g, '')
                MontantSalaireNetAPayer = MontantSalaireNetAPayer == '' ? 0 : MontantSalaireNetAPayer
                MontantSalaireNetAPayer = parseFloat(MontantSalaireNetAPayer)


                dataSalaire.push({
                    IDPERSONNEL : IDPERSONNEL,
                    IDMONNAIE : IDMONNAIE,
                    MontantSalaireBase : MontantSalaireBase,
                    MontantSalairePrime : MontantSalairePrime,
                    MontantSalaireNetAPayer : MontantSalaireNetAPayer,
                })

            })

            dataSalaire = JSON.stringify(dataSalaire)

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

            return new Promise(function(resolve, reject) {

                $.ajax({

                    url: "{{ route('enregistrerSalaire') }}",
                    type: 'POST',
                    data: {
                        IDAGENCE : _('selIDAGENCEModalEnregistrementSalaire').value,
                        IDCOMPTA_SALAIRE : _('inpIDCOMPTA_SALAIRE').value,
                        DateDebutPeriodeSalaire : Periode[0],
                        DateFinPeriodeSalaire : Periode[1],
                        dataSalaire : dataSalaire,
                        CommentaireComptaSalaire : _('inpCommentaireComptaSalaire').value,
                        _token : '{{ csrf_token() }}'
                    },
                    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()
                    }
                })
            })
        }

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

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

                    if (response.success == 1) {

                        _('inpIDCOMPTA_SALAIRE').value = response.IDCOMPTA_SALAIRE
                        
                        notif('success', 'Succès', 'Opération éffectuée avec succès')
                        chargerTableListeComptaSalaire()
                    }
                })
        })

        // Script de validation du salaire
        function validerSalaire(){

            return new Promise(function(resolve, reject) {

                $.ajax({

                    url: "{{ route('validerSalaire') }}",
                    type: 'POST',
                    data: {
                        IDCOMPTA_SALAIRE : _('inpIDCOMPTA_SALAIRE').value,
                        _token : '{{ csrf_token() }}'
                    },
                    dataType: 'json',
                    beforeSend: progressHandler(),
                    success: function(response) {

                        if (response.success != 2) {

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

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

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

                        completeHandler()
                    }
                })
            })
        }

        _('btnValiderSalaire').addEventListener('click', async function(){

            await enregistrerSalaire()
                .then((response) => {

                    if (response.success == 1) {
                        
                        _('inpIDCOMPTA_SALAIRE').value = response.IDCOMPTA_SALAIRE
                    }else{

                        return 0
                    }
                })

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

            confirmMdp('{{ csrf_token() }}', validerSalaire, null, title = '', data = { sousTitre: 'Après cette opération ces lignes ne seront plus modifiables.', infoJNL: "GENERATION DES ECRITURES COMPTABLES DES SALAIRES", typeJNL: 3, CodeDroit: "GC_GestionSalaire" })
                .then((response) => {

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

        // Script d'ouverture de la modal en modification
        $(document).on('click', '#editCOMPTA_SALAIRE', async function(){

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

            let response = await listeDesSalaireACreer(IDCOMPTA_SALAIRE);

            if (response.success == 1) {

                let info = response.info
                dataTableEnregistrementSalaire = response.data;

                let PeriodeSalaireFormat = info.PeriodeSalaireFormat.split(' - ')

                $('#inpPeriodeSalaire').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: PeriodeSalaireFormat[0],
                    endDate: PeriodeSalaireFormat[1]
                });

                _('inpCommentaireComptaSalaire').value = info.CommentaireComptaSalaire
                $('#selIDAGENCEModalEnregistrementSalaire').val(info.IDAGENCE).trigger('change')
                _('inpIDCOMPTA_SALAIRE').value = IDCOMPTA_SALAIRE
                _('inpStatutComptaSalaire').value = info.StatutComptaSalaire

                _('selIDAGENCEModalEnregistrementSalaire').setAttribute('disabled', '')
                
                progressHandler()
                
                if (info.StatutComptaSalaire > 0) {

                    _('btnReinitialiserSaisie').setAttribute('disabled', '')
                    _('btnEnregistrerSalaire').setAttribute('disabled', '')
                    _('btnValiderSalaire').setAttribute('disabled', '')

                }else if(info.StatutComptaSalaire == 0){

                    _('btnReinitialiserSaisie').removeAttribute('disabled')
                    _('btnEnregistrerSalaire').removeAttribute('disabled')
                    _('btnValiderSalaire').removeAttribute('disabled')
                } 

                $('#modalEnregistrementSalaire').modal({
                    backdrop: 'static',
                    keyboard: false
                })
                
                $('#modalEnregistrementSalaire').modal('show');

            }
        })

        // Script de validation du salaire
    </script>

    <!-- Script de modification des primes groupées -->
    <script>

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

            let IDPERSONNEL_FONCTION = _('selIDPERSONNEL_FONCTIONModalEnregistrementSalaire').value
            let IDMONNAIE = _('selIDMONNAIEModalEnregistrementSalaire').value
            let MontantSalairePrime = _('inpPrimeGroupeModalEnregistrementSalaire').value

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

            let newPrime = _('inpPrimeGroupeModalEnregistrementSalaire').value.replace(',', '.').replace(/\s/g, '')

            let filteredRows = tableEnregistrementSalaire.rows().data().toArray().filter(row => 
                row.FonctionPersonnel == IDPERSONNEL_FONCTION && row.IDMONNAIE == IDMONNAIE
            );

            filteredRows.forEach(function(value){

                $('.inpMontantSalairePrime[data-idpersonnel="'+value.IDPERSONNEL+'"]').val(MontantSalairePrime).trigger('change')
            })

            _('inpPrimeGroupeModalEnregistrementSalaire').value = 0

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

            notif('success', 'Succès', 'lignes mises à jours')
        })
    </script>

    <!-- Script de génération des écriture comptable -->
    <script>

        var IDCOMPTA_SALAIREPourEcriture

        function payerComptaSalaire(){

            return new Promise(function(resolve, reject) {

                $.ajax({

                    url: "{{ route('payerComptaSalaire') }}",
                    type: 'POST',
                    data: {
                        IDCOMPTA_SALAIRE : IDCOMPTA_SALAIREPourEcriture,
                        _token : '{{ csrf_token() }}'
                    },
                    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()
                    }
                })
            })
        }

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

            IDCOMPTA_SALAIREPourEcriture = $(this).attr('data-id')

            if (IDCOMPTA_SALAIREPourEcriture == 0) {
                
                notif('danger', 'Erreur', 'Échec de l\'opération.')
                return 0
            }

            confirmMdp('{{ csrf_token() }}', payerComptaSalaire, null, title = '', data = { sousTitre: '', infoJNL: "GENERATION DES ECRITURES COMPTABLES DES SALAIRES", typeJNL: 3, CodeDroit: "GC_GestionSalaire" })
                .then((response) => {

                    if (response.success == 2) {
                        
                        notif('success', 'Succès', 'Opération effectuée avec succès')
                        chargerTableListeComptaSalaire()
                    }
                })
        })
    </script>

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

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

            let data = []

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

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

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

        function printSalaire(listeIDCOMPTA_SALAIRE){

            return new Promise(function(resolve, reject) {

                $.ajax({

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

                        if (response.success == 1) {

                            if (response.tablePDF.length > 0) {

                                response.tablePDF.forEach(function (value) {

                                    // Récupérez le PDF en base64 depuis la réponse
                                    var pdfBase64 = value;

                                    // Créez un objet blob à partir du PDF en base64
                                    var blob = b64toBlob(pdfBase64, 'application/pdf');

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

                                    // Créez une fenêtre d'impression avec l'URL du blob
                                    var printWindow = window.open(blobUrl);
                                    // printWindow.print();
                                })
                            } else {

                                notif('danger', 'Erreur', 'Aucun pdf n\'a été chargé')
                            }
                        } else {

                            notifError(response.msg)
                        }

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

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

                        completeHandler()
                    }
                })
            })
        }

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

            let listeIDCOMPTA_SALAIRE = listeLigneSelectionne()

            if (listeIDCOMPTA_SALAIRE.length == 0) {
                
                notif('danger', 'Erreur', 'Veuillez sélectionner au moins une ligne')
                return 0
            }

            printSalaire(listeIDCOMPTA_SALAIRE)
        })
    </script>
@endsection