@extends('models')
@section('titre-page', 'Liste des factures vente au comptant')
@section('content-body')
    <!-- Start::app-content -->

    <style>
        .height-input {
            height: 2.5rem !important;
        }
    </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-10 col-lg-9 col-md-8 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">Liste des factures vente au comptant</li>
                        </ol>
                    </nav>
                </div>

                <div class="col-xl-2 col-lg-3 col-md-4">
                    <button type="button" id="btnImprimFacture" class="btn btn-warning-light d-flex justify-content-center w-100">
                        <i class="bx bx-printer fs-18 me-2"></i>
                        Imprimer
                    </button>
                </div>
            </div>
        </div>
    </div>
    <!-- Page Header Close -->

    <!-- Start:: row-7 -->
    <div class="row">
        <div class="col-xl-2">
            <div class="card custom-card border-top-card border-top-light rounded-0">
                <div class="card-body px-0 py-2">
                    <div class="text-center">
                        <p class="fs-12 text-muted mb-1">Total HT</p>
                        <div class="d-flex align-items-center justify-content-center flex-wrap">
                            <h6 class="mb-0 fw-semibold" id="libTotalHT">0</h6>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-xl-2">
            <div class="card custom-card border-top-card border-top-primary rounded-0">
                <div class="card-body px-0 py-2">
                    <div class="text-center">
                        <p class="fs-12 text-muted mb-1">Total TVA</p>
                        <div class="d-flex align-items-center justify-content-center flex-wrap">
                            <h6 class="mb-0 fw-semibold" id="libTotalTVA">0</h6>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-xl-2">
            <div class="card custom-card border-top-card border-top-info rounded-0">
                <div class="card-body px-0 py-2">
                    <div class="text-center">
                        <p class="fs-12 text-muted mb-1">Total BIC</p>
                        <div class="d-flex align-items-center justify-content-center flex-wrap">
                            <h6 class="mb-0 fw-semibold" id="libTotalBIC">0</h6>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-xl-2">
            <div class="card custom-card border-top-card border-top-warning rounded-0">
                <div class="card-body px-0 py-2 px-1">
                    <div class="text-center">
                        <p class="fs-12 text-muted mb-1">Total TTC</p>
                        <div class="d-flex align-items-center justify-content-center flex-wrap">
                            <h6 class="mb-0 fw-semibold" id="libTotalTTC">0</h6>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-xl-2">
            <div class="card custom-card border-top-card border-top-danger rounded-0">
                <div class="card-body px-0 py-2">
                    <div class="text-center">
                        <p class="fs-12 text-muted mb-1">Total Règlement</p>
                        <div class="d-flex align-items-center justify-content-center flex-wrap">
                            <h6 class="mb-0 fw-semibold" id="libTotalReglement">0</h6>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-xl-2">
            <div class="card custom-card border-top-card border-top-primary rounded-0">
                <div class="card-body px-0 py-2">
                    <div class="text-center">
                        <p class="fs-12 text-muted mb-1">Total Solde</p>
                        <div class="d-flex align-items-center justify-content-center flex-wrap">
                            <h6 class="mb-0 fw-semibold" id="libTotalSolde">0</h6>
                        </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 pe-0">
                    <form id="formFiltre" class="w-100">
                        <div class="row w-100">                    
                            <div class="col-xl-3 col-md-4 mb-2">
                                <p class="mb-0 text-muted">Site&nbsp;:</p>
                                <select name="IDAGENCE" id="IDAGENCE" class="form-select" name="IDAGENCE"  @disabled(checkIfDroit('DG_AccesMultiSite'))>

                                </select>
                            </div>
                            <div class="col-xl-4 col-md-4 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-4 col-md-4 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-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 text-nowrap overflow-auto" id="tableFactureVenteAuComptant">
                            <thead class="table-header-primary">
                                <tr>
                                    <th class="text-center colTable" data-column = "DateFactureClientFormat">Date</th>
                                    <th class="text-center colTable" data-column = "NumeroFactureClientFormat" data-class="text-center">N° facture</th>
                                    <th class="text-center colTable" data-column = "LibelleQuinzaine" data-class="text-center" >Quinzaine</th>
                                    <th class="text-center colTable" data-column = "CodeClient">Code Client</th>
                                    <th class="text-center colTable" data-column = "NomClient">Client</th>
                                    <th class="text-center colTable" data-column = "IntentionCommande" data-class="text-center">Posit°</th>
                                    <th class="text-center colTable" data-column = "RepresentantLegalClient">Titulaire</th>
                                    <th class="text-center colTable" data-column = "TotalHTFormat" data-class="text-end pe-3">Total HT</th>
                                    <th class="text-center colTable" data-column = "TotalRemiseFormat" data-class="text-end pe-3">Total Remise</th>
                                    <th class="text-center colTable" data-column = "TotalTaxeFormat" data-class="text-end pe-3">TVA</th>
                                    <th class="text-center colTable" data-column = "TotalBICFormat" data-class="text-end pe-3">BIC</th>
                                    <th class="text-center colTable" data-column = "TotalTTCFormat" data-class="text-end pe-3">Total TTC</th>
                                    <th class="text-center colTable" data-column = "TotalReglementFormat" data-class="text-end pe-3">Total Règlement</th>
                                    <th class="text-center colTable" data-column = "soldeFormat" data-class="text-end pe-3">Solde</th>
                                </tr>
                            </thead>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- End::app-content -->

@endsection

@section('script')

    {{-- Script executé au chargement de la page --}}
    <script>

        var tableFactureVenteAuComptant   

        $(function() {
            dateRangeInput('input[name="datetimes"]', true, "DD/MM/YYYY")
            // $('input[name="datetimes"]').daterangepicker({
            //     timePicker: true,
            //     // startDate: moment().startOf('day'),
            //     // endDate: moment().endOf('day'),
            //     "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": 2
            //     },
            // });
        })

        listingComboClient('#IDCLIENT')
        listingComboAgence('#IDAGENCE')

        function chargerTableListeFactureVenteAuComptant(){

            $.ajax({

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

                    if (response.success == 1) {

                        let data = response.data

                        tableFactureVenteAuComptant = remplissageDataTable({
                                                        IdentifiantDuTableau : '#tableFactureVenteAuComptant',
                                                        obj : data,
                                                        pageLength : 25,
                                                    })
                        
                            let divShowPer = $('#tableFactureVenteAuComptant_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-facture-vente-au-comptant" class="fw-bold" style="cursor : pointer;">Exporter</span>
                                            </span>
                                        `)

                        _('libTotalHT').innerHTML = formatNumber(response.totalHT)
                        _('libTotalTVA').innerHTML = formatNumber(response.totalTVA)
                        _('libTotalBIC').innerHTML = formatNumber(response.totalBIC)
                        _('libTotalTTC').innerHTML = formatNumber(response.totalTTC)
                        _('libTotalReglement').innerHTML = formatNumber(response.totalReglement)
                        _('libTotalSolde').innerHTML = formatNumber(response.totalSolde)
                        
                    }else{
                        notifError(response.msg)
                    }

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

                    notifError(error.responseText)
                    completeHandler()
                }
            })
        }

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

                _('filtrePeriode').value = explodeDate(data.debutPeriode, '-') + ' - ' + explodeDate(data.finPeriode, '-')

                $('#IDAGENCE').val(data.IDAGENCE).trigger('change')
                $('#IDCLIENT').val(data.IDCLIENT).trigger('change')

                chargerTableListeFactureVenteAuComptant()
            })
            
    </script>

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

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

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

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

            let session = 'filterMemory.filtreListeFactureVenteAuComptant'

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

            let valeurSession = {

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

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

                    chargerTableListeFactureVenteAuComptant()
                })
        })
    </script>
    
    <!-- Script d'impression -->
    <script>

        // Imprimer une facture client
        _('btnImprimFacture').addEventListener('click', function(){

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

                let data = tableFactureVenteAuComptant.rows().data().toArray()

                $.ajax({

                    url : "{{ route('printListeFactureVenteAuComptant') }}",
                    type : 'POST',
                    data : {
                        data : data,
                        periode : _('filtrePeriode').value.replace('-', 'au'),
                        NomClient : afficherOptionSelectionnee('IDCLIENT'),
                        _token : '{{ csrf_token() }}'
                    },
                    dataType : 'json',
                    beforeSend : progressHandler(),
                    success : function(response){

                        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é')
                        }
                        completeHandler()
                    },
                    error : function(error){

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

        })

        $(document).on('click', '#btn-export-facture-vente-au-comptant', function(){

            var data = getCleanedTableData('tableFactureVenteAuComptant')
            const filename = file_name("FACTURE_VENTE_AU_COMPTANT");
            const tabs_format = { H: '#,##0', I: '#,##0', K: '#,##0', L: '#,##0', M: '#,##0', N: '#,##0'};
            download_excel_file('{{route("export_global_excel.export")}}', data, filename, [], tabs_format)
        })
    </script>



@endsection