@extends('models')
@section('titre-page', 'Tableau S2')
@section('content-body')

<!-- 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-10 col-lg-10 col-md-10 mt-2">
                <nav>
                    <ol class="breadcrumb mb-0">
                        <li class="breadcrumb-item text-light"><a href="javascript:void(0);">Comptabilité</a></li>
                        <li class="breadcrumb-item active" aria-current="page">Tableau S2</li>
                    </ol>
                </nav>
            </div>
        </div>
    </div>
</div>
<!-- Page Header Close -->

<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-0">
                            <p class="mb-0 text-muted">Site&nbsp;:</p>
                            <select class="form-select" id="selIDAGENCE" name="IDAGENCE">
                                @foreach(session('site') as $site)
                                    <option value="{{ $site -> IDAGENCE }}">{{ $site -> NomAgence }}</option>
                                @endforeach
                            </select>
                        </div>
                        <div class="col-xl-3 col-md-3 mb-0">
                            <p class="mb-0 text-muted">Client&nbsp;:</p>
                            <select class="js-example-basic-single form-select" id="selIDCLIENT" name="IDCLIENT">

                            </select>
                        </div>
                        <div class="col-xl-3 col-md-2 mb-2">
                            <p class="mb-0 text-muted">Tournée&nbsp;:</p>
                            <select class="form-select" id="selIDTOURNEE" name="IDTOURNEE">
                            </select>
                        </div>
                        <div class="col-xl-3 col-md-3 mb-2">
                            <p class="mb-0 text-muted">Groupement client&nbsp;:</p>
                            <select class="form-select" id="selIDGROUPEMENT_CLIENT" name="IDGROUPEMENT_CLIENT">
                            </select>
                        </div>
                        <div class="col-xl-1 col-md-1 mb-0 pt-1">
                            <button type="button" class="btn btn-primary btn-wave mt-2  float-end" id="btnFiltreTable">
                                <i class="ri-search-line" style="font-size:13px; cursor:pointer;"></i>
                            </button>
                        </div>
                    </div>
                </form>
            </div>
            <div class="card-body">
                <div class="table-responsive">
                    <table class="tablehover table table-striped tablehover text-nowrap w-100" id="tableS2">
                        <thead class="table-header-primary">
                            <tr>
                                <th class="text-center">Site</th>
                                <th class="text-center">Code client</th>
                                <th class="text-center">Raison sociale</th>
                                <th class="text-center">Commerciale</th>
                                <th class="text-center">État<br>Compte</th>
                                <th class="text-center">Delai paiement</th>
                                <th class="text-center">Tournée</th>
                                <th class="text-center">Crédit MAX</th>
                                <th class="text-center">Solde disponible</th>
                                <th class="text-center">N</th>
                                <th class="text-center">I</th>
                                <th class="text-center">Groupement client</th>
                                <th class="text-center">Créance Totale<br>Échue</th>
                                <th class="text-center">Créance {{ date("Y") }}</th>
                                <th class="text-center">Créance Non <br>Échue</th>
                            </tr>
                        </thead>
                    </table>
                </div>
            </div>
        </div>
    </div>
</div>

@endsection
@section('script')

<!-- Script exécuté au chargement -->
<script>

    var tablePaiementRistourneEscompte

    $('#tableS2').DataTable({
        language : languageTable,
        scrollY: '400px',
        scrollCollapse: true,
        paging : false,
        scrollX : true,
        order : [],
        obj : []
    })

    $('#filtrePeriode').daterangepicker({
        "locale": {
            "format": "DD/MM/YYYY",
            "separator": " - ",
            "applyLabel": "Appliquer",
            "cancelLabel": "Annuler",
            "fromLabel": "From",
            "toLabel": "To",
            "customRangeLabel": "Custom",
            "weekLabel": "W",
            "daysOfWeek": [
                "Dim",
                "Lun",
                "Mar",
                "Mer",
                "Jeu",
                "Ven",
                "Sam"
            ],
            "firstDay": 1
        },
        opens: 'center',
        startDate: moment().subtract(6, 'days'),
        endDate: moment()
    });

    function chargerSelectClient(valeur = 0) {

        listingComboClient('#selIDCLIENT', 'TOUS LES CLIENTS')

        $('#selIDCLIENT').select2()

        $('#selIDCLIENT').val(valeur).trigger('change')
    }

    function chargerTableS2() {

        $.ajax({

            url: '{{ route("chargerTableS2") }}',
            type: 'GET',
            data : {
                IDAGENCE : _('selIDAGENCE').value,
                IDCLIENT : _('selIDCLIENT').value,
                IDTOURNEE : _('selIDTOURNEE').value,
                IDGROUPEMENT_CLIENT : _('selIDGROUPEMENT_CLIENT').value
            },
            beforeSend: progressHandler(),
            dataType: 'json',
            success: function(response) {

                // console.log(response);

                if (response.success == 1) {

                    let dataColonne = response.dataColonne
                    let dataColPourLigne = response.dataColPourLigne
                    let data = response.data
                    let dataTotaux = response.dataTotaux

                    $('#tableS2').DataTable().destroy()

                    let entete = _('tableS2').querySelector('.table-header-primary tr')

                    entete.innerHTML = ''
                    entete.insertAdjacentHTML('beforeend','<th class="text-center"  data-class="text-center">Site</th>')
                    entete.insertAdjacentHTML('beforeend','<th class="text-center"  data-class="text-center">Code client</th>')
                    entete.insertAdjacentHTML('beforeend','<th class="text-center"  data-class="">Raison sociale</th>')
                    entete.insertAdjacentHTML('beforeend','<th class="text-center"  data-class="">Commerciale</th>')
                    entete.insertAdjacentHTML('beforeend','<th class="text-center"  data-class="text-center">État<br>Compte</th>')
                    entete.insertAdjacentHTML('beforeend','<th class="text-center"  data-class="text-center">Delai paiement</th>')
                    entete.insertAdjacentHTML('beforeend','<th class="text-center"  data-class="">Tournée</th>')
                    entete.insertAdjacentHTML('beforeend','<th class="text-center"  data-class="text-end">Crédit MAX</th>')
                    entete.insertAdjacentHTML('beforeend','<th class="text-center"  data-class="text-end">Solde disponible</th>')
                    entete.insertAdjacentHTML('beforeend','<th class="text-center"  data-class="text-center">N</th>')
                    entete.insertAdjacentHTML('beforeend','<th class="text-center"  data-class="text-center">I</th>')
                    entete.insertAdjacentHTML('beforeend','<th class="text-center"  data-class="">Groupement client</th>')
                    entete.insertAdjacentHTML('beforeend','<th class="text-center"  data-class="text-end">Créance Totale<br>Échue</th>')
                    entete.insertAdjacentHTML('beforeend','<th class="text-center"  data-class="text-end">Créance {{ date("Y") }}</th>')
                    entete.insertAdjacentHTML('beforeend','<th class="text-center"  data-class="text-end">Créance Non <br>Échue</th>')
                    entete.insertAdjacentHTML('beforeend','<th class="text-center"  data-class=""></th>')

                    dataColonne.forEach(value => {
                                               
                        entete.insertAdjacentHTML('beforeend','<th class="text-center" data-column="' + value['data-column'] + '" data-class="text-end">' + value['data-titre'] + '</th>')
                    });

                    if (!_('tableS2').querySelector('tbody')) {
                        
                        $('#tableS2').append('<tbody></tbody>')
                    }else{

                        _('tableS2').querySelector('tbody').innerHTML = ''
                    }

                    let entrer = 0

                    dataColCreanceAn = [
                        'FCFA74',
                        'FDFDDC',
                        'FBFAAC',
                        'FCFBC5',
                        'FDFDDC'
                    ]

                    dataColCreanceQ = [
                        'FDD888',
                        'FDBEB4',
                        'CFFDC4',
                        'CFFDFD',
                        'FDFBE2'
                    ]

                    for (let [key, element] of dataTotaux.entries()) {

                        let ligne = '<tr>';

                        ligne += '<td class=""></td>';
                        ligne += '<td class=""></td>';
                        ligne += '<td class="">' + element['colTemps'] + '</td>';

                        dataColPourLigne.forEach(colonne => {

                            let value = element[colonne]

                            let classe = ''
                            let style = ''

                            if (entrer == 1) {

                                if (key == 4 && (colonne == 'LibelleGroupementClient' || colonne == 'CreanceEch' || colonne == 'CreanceEchAnneeEnCours' || colonne == 'CreanceNonEch')) {
                                    
                                    style = 'background-color : #FFFFE8;'
                                }

                                if (colonne.startsWith('CCreanceAn')) {

                                    style = 'background-color : #' + dataColCreanceAn[key] + ';'
                                }

                                if (colonne.startsWith('CCreanceQ')) {

                                    style = 'background-color : #' + dataColCreanceQ[key] + ';'
                                }
                                
                                ligne += '<td class="' + classe + '" style="' + style + '">' + value + '</td>';
                            }

                            if (colonne == 'NomClient') {
                                
                                entrer = 1
                            }
                        })

                        entrer = 0

                        ligne += '</tr>';
                        
                        _('tableS2').querySelector('tbody').insertAdjacentHTML('beforeend', ligne);
                    }


                    for (let [key, element] of data.entries()) {

                        let ligne = '<tr>';

                        dataColPourLigne.forEach(colonne => {

                            let value = element[colonne]
                            let classe = ''
                            let style = ''

                            if (colonne.startsWith('CCreanceAn')) {
                                
                                // classe += 'bg-warning'
                                style += 'background-color : #FCFA74; '
                            }

                            if (typeof(chaineEnNumerique(value)) == 'number' && chaineEnNumerique(value) < 0) {

                                classe += ' text-danger'
                            }

                            if (colonne == 'EtatCompteClient') {

                                if (value == 'ACTIF') {

                                    classe += ' text-success'
                                } else if (value == 'BLOQUE') {

                                    classe += ' text-danger'
                                }                               
                            }

                            ligne += '<td class="' + classe + '" style="' + style + '">' + value + '</td>';

                        });

                        ligne += '</tr>';
                        
                        _('tableS2').querySelector('tbody').insertAdjacentHTML('beforeend', ligne);

                    }

                    $('#tableS2').DataTable({
                        language : languageTable,
                        scrollY: '400px',
                        paging : false,
                        scrollX : true,
                        order : []
                    })

                    divShowPer = $('#tableS2_filter')

                    // Division des valeur totales
                    BroDivShowPer = divShowPer.parent().prev()
                    BroDivShowPer.addClass('d-flex pt-2')
                    BroDivShowPer.prepend(`<span class="d-flex align-items-center px-2 mt-1" style="cursor : pointer;">
                                            <i class='ri ri-file-excel-2-line text-success me-1' style="font-size : 18px; cursor : pointer;"></i>
                                            <span id="btn-export-tableS2" class="fw-bold" style="cursor : pointer;">Exporter</span>
                                        </span>`)

                    completeHandler()
                } else {

                    notifError(response.msg)
                    completeHandler()
                }
            },
            error: function(error) {
                notifError(error)
                completeHandler()
            }
        })
    }

    chargerSelectClient()
    listingComboTourneeClient('#selIDTOURNEE', {{ session('IDAGENCE') }}, 'TOUTES LES TOURNEES')
    $('#selIDTOURNEE').select2()
    listingComboGroupementClient('#selIDGROUPEMENT_CLIENT', 'TOUS LES GROUPEMENTS')
    $('#selIDGROUPEMENT_CLIENT').select2()

    // Click sur le boutton de refresh
    _('btnFiltreTable').addEventListener('click', function() {

        chargerTableS2()
    })

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

        e.preventDefault()
        _('btnFiltreTable').click()
    })

</script>

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

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

        var data = getCleanedTableData('tableS2')
        const filename = file_name("TABLE_S2");
        const tabs_format = { H: '#,##0', I: '#,##0', M: '#,##0', N: '#,##0', O: '#,##0'};
        // const tabs_format = { };
        download_excel_file('{{route("export_global_excel.export")}}', data, filename, [], tabs_format)
    })

</script>

@endsection