@extends('models')
@section('titre-page', 'Paiement ristourne escompte')
@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">Paiement ristourne escompte</li>
                    </ol>
                </nav>
            </div>

            <div class="col-xl-2 col-lg-2 col-md-2">
                <button type="button" class="btn btn-warning-light d-flex w-100 justify-content-center" id="btnImprimer" style="font-size:15px">
                    <i class="ri-printer-line me-2"></i>Imprimer
                </button>
            </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" style="font-size: 24px"></i>
                            </span>
                        </div>
                        <div class="flex-fill">
                            <p class="fs-18 mb-0 text-primary fw-semibold" id="nbrePaiement"></p>
                            <span class="text-muted fs-12">Nbre de Paiement</span>
                        </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-light text-default">
                                <i class="bi bi-cash-stack " style="font-size: 24px"></i>

                            </span>
                        </div>
                        <div class="flex-fill">
                            <p class="fs-18 mb-0 fw-semibold" id="totalTTCTT"></p>
                            <span class="text-muted fs-12">Total</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-4 col-md-3 mb-0">
                            <p class="mb-0 text-muted">Client&nbsp;:</p>
                            <select class="js-example-basic-single form-select" id="IDCLIENT" name="IDCLIENT">

                            </select>
                        </div>
                        <div class="col-xl-3 col-md-2 mb-2">
                            <p class="mb-0 text-muted">Type&nbsp;:</p>
                            <select class="form-select" id="typePaiement" name="typePaiement">
                                <option value="1">ESCOMPTE</option>
                                <option value="2">RISTOURNE</option>
                                <option value="0">TOUS</option>
                            </select>
                        </div>
                        <div class="col-xl-4 col-md-3 mb-2">
                            <p class="mb-0 text-muted">Période de filtre&nbsp;:</p>
                            <input type="text" class="form-control text-center" name="datetimes" id="filtrePeriode" />
                        </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="tablePaiementRistourneEscompte">
                        <thead class="table-header-primary">
                            <tr>
                                <th data-column="action" data-orderable="false">
                                    <input class="form-check-input me-4" type="checkbox" id="checkSelectAll">
                                    Actions
                                </th>
                                <th class="text-center colTable" data-column="NumeroPaiementER" data-class="text-center">N° Paiement Escomptes/RIST;</th>
                                <th class="text-center colTable" data-column="DatePaiementERFormat" data-class="text-center">Date de paiement</th>
                                <th class="text-center colTable" data-column="NomClient">Client</th>
                                <th class="text-center colTable" data-column="ReferenceDocumentPaiement">N° Pièce</th>
                                <th class="text-center colTable" data-column="CodeJournalComptable" >Compte Banque</th>
                                <th class="text-center colTable" data-column="libelleTypePaiement" >Type</th>
                                <th class="text-center colTable" data-column="LibelleModePaiement">Mode de Paiement</th>
                                <th class="text-center colTable" data-column="MontantTTCRistourneClientFormat" data-class="text-end">Montant Payé</th>
                            </tr>
                        </thead>
                    </table>
                </div>
            </div>
        </div>
    </div>
</div>

@endsection
@section('script')

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

    var tablePaiementRistourneEscompte

    $('#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) {

        // Combo client en select2 AJAX (recherche à la frappe)
        initSelect2ClientAjax('#IDCLIENT', { labelFirst: 'TOUS LES CLIENTS' })
        preselectClientSelect2('#IDCLIENT', valeur)
    }

    function chargerTablePaiementEscompteRistourne() {

        $.ajax({

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

                if (response.success == 1) {

                    let obj = response.data

                    _('nbrePaiement').innerHTML = formatNumber(response.nbrePaiement)
                    _('totalTTCTT').innerHTML = formatNumber(response.totalTTCTT)
                    
                    tablePaiementRistourneEscompte = remplissageDataTable({
                        IdentifiantDuTableau : '#tablePaiementRistourneEscompte',
                        obj : obj
                    })


                     let divShowPer = $('#tablePaiementRistourneEscompte_filter')
                            let BroDivShowPer = divShowPer.parent().parent()
                            let child = BroDivShowPer.children().eq(0)
                            let child2 = BroDivShowPer.children().eq(1)

                            child2.removeClass('col-md-6')
                            child2.addClass('col-md-4 d-flex  justify-content-end')
                          
                            child.removeClass('col-md-6')
                            child.addClass('d-flex pt-2 col-md-8')
                            child.append(`
                                         <span class="d-flex align-items-center px-2" 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-paiement-ristourne-escompte" class="fw-bold" style="cursor : pointer;">Exporter</span>
                                            </span>
                                        `)

                    completeHandler()
                } else {

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

    recupererValeurSession('filterMemory.filtrePaiementEscompteRistourne')
        .then((data) => {

            _('filtrePeriode').value =explodeDate(data.debutPeriode, '-') + ' - ' + explodeDate( data.finPeriode, '-')
            $('#typePaiement').val(data.type).trigger('change')
            chargerSelectClient(data.IDCLIENT)

            chargerTablePaiementEscompteRistourne()
        })

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

        let session = 'filterMemory.filtrePaiementEscompteRistourne'

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

        let valeurSession = {

            'debutPeriode' : Periode[0],
            'finPeriode' : Periode[1],
            'IDCLIENT' : _('IDCLIENT').value,
            'type' : _('typePaiement').value
        }

        modifierValeurSession('{{ csrf_token() }}', session, valeurSession)
            .then(function(data){

                chargerTablePaiementEscompteRistourne()
            })
    })

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

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

    $(document).on('click','#btn-export-paiement-ristourne-escompte',function(){
            var data =  getCleanedTableData('tablePaiementRistourneEscompte')
            const filename =file_name("PAIEMENT_RISTOURNE_ESCOMPTE");
            const tabs_format = { H: '#,##0'};
            download_excel_file('{{route("export_global_excel.export")}}', data,filename,[],tabs_format)
    }) 
</script>

@endsection