@extends('models')
@section('titre-page', 'Statistique des achats')
@section('content-body')
    <style>
        .height-input {
            height: 2.5rem !important;
        }

        input::-webkit-outer-spin-button,
        input::-webkit-inner-spin-button {
            -webkit-appearance: none;
        }

        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;
        }

        input[type="text"] {
            text-align: center
        }

        @media (min-width: 1200px) {
            .modal-xl {
                --bs-modal-width: 1260px !important;
            }
        }

        .modal-open-noscroll {
            overflow: hidden;
        }

        #tableDetailBl tbody tr:not(.rupture):hover {
            background-color: #f0f0f0;
            /* Couleur de fond lors du survol */
        }
    </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-5 col-lg-4 col-md-4 mt-2">
                    <nav>
                        <ol class="breadcrumb mb-0">
                            <li class="breadcrumb-item text-light"><a href="javascript:void(0);">Achats</a></li>
                            <li class="breadcrumb-item active" aria-current="page">Statistique des achats</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-body">
                    <div class="row mb-2">
                        <div class=" col-xl-12 col-lg-12 col-md-12">
                            <div class=" row justify-content-center border-danger border-2">
                                <div class="col-xl-3 col-lg-3 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-3 col-lg-3 col-md-4 mb-2">
                                    <p class="mb-0 text-muted">Choix du filtre</p>
                                    <select class="form-select" id="choixFiltre">
                                        <option value="1">Bureau achat</option>
                                        <option value="2">Fournisseur</option>
                                        <option value="3">Natures</option>
                                        <option value="4">Classes thérapeutiques</option>
                                        <option value="5">Formes</option>
                                        <option value="6">Laboratoires</option>
                                        <option value="7">Familles</option>
                                        <option value="8">Principe actif</option>
                                    </select>
                                </div>
                                <div class="col-xl-1 col-lg-1 col-md-1 mb-0 pt-1 d-flex align-items-center">
                                    <label class="btn btn-primary btn-wave w-100  float-end mt-2" style="height:40px" id="btnFiltreTable">
                                        <i class="ri-search-line fs-16" style="cursor:pointer;"></i>
                                    </label>
                                </div>
                                <div class="col-xl-1 col-lg-1 col-md-1 mb-0 pt-1 d-flex align-items-center">
                                    <label class="btn btn-warning btn-wave w-100 align-items-center float-end mt-2"
                                        id="btnPrint">
                                        <i class='bx bxs-printer fs-16' style="cursor:pointer;"></i>
                                    </label>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="row">
                        <div class=" table-responsive">
                            <table class="tablehover table table-striped text-nowrap w-100" id="tableStatAchats">
                                <thead class="table-header-primary">
                                    <tr>
                                        <th class="text-center text-white">Formes</th>
                                        <th class="text-center text-white">Nb.Commande</th>
                                        <th class="text-center text-white">Total HT Commande</th>
                                        <th class="text-center text-white">Total Taxe Commande</th>
                                        <th class="text-center text-white">Total TC Commande</th>
                                        <th class="text-center text-white">Nbre BL</th>
                                        <th class="text-center text-white">Total HT Facturée</th>
                                        <th class="text-center text-white">Total Taxe Facturée</th>
                                        <th class="text-center text-white">Total TTC Facturée</th>
                                        <th class="text-center text-white">Nbre Réclamation</th>
                                        <th class="text-center text-white">Total HT Réclamée</th>
                                        <th class="text-center text-white">Total Taxe Réclamé</th>
                                        <th class="text-center text-white">Total TTC Réclamé</th>
                                    </tr>
                                </thead>
                                <tfoot class=" input-edit">
                                    <tr>
                                        <th>Total:</th>
                                        <th id="totalNbreCommande" class="text-center"></th>
                                        <th id="totalHTCommande" class="text-end"></th>
                                        <th id="totalTaxeCommande" class="text-end"></th>
                                        <th id="totalTTCCommande" class="text-end"></th>
                                        <th id="totalNombreBL" class="text-center"></th>
                                        <th id="totalHTFacturee" class="text-end"></th>
                                        <th id="totalTaxeFacturee" class="text-end"></th>
                                        <th id="totalTTCFacturee" class="text-end"></th>
                                        <th id="totalNbreReclammee" class="text-center"></th>
                                        <th id="totalHTReclammee" class="text-end"></th>
                                        <th id="totalTaxeReclammee" class="text-end"></th>
                                        <th id="totalTTCReclammee" class="text-end"></th>
                                    </tr>
                                </tfoot>
                            </table>
                        </div>

                    </div>
                </div>
            </div>
        </div>
    </div>

@endsection

@section('script')
    <script>
        $(function() {
            dateRangeInput('input[name="datetimes"]', true, "DD/MM/YYYY HH:mm")
            // $('input[name="datetimes"]').daterangepicker({
            //     timePicker: true,
            //     // startDate: moment().startOf('day'),
            //     // endDate: moment().endOf('day'),
            //     "locale": {
            //         "format": "DD/MM/YYYY HH:mm",
            //         "separator": " - ",
            //         "applyLabel": "Appliquer",
            //         "cancelLabel": "Annuler",
            //         "fromLabel": "From",
            //         "toLabel": "To",
            //         "customRangeLabel": "Custom",
            //         "weekLabel": "W",
            //         "daysOfWeek": [
            //             "Dim",
            //             "Lun",
            //             "Mar",
            //             "Mer",
            //             "Jeu",
            //             "Ven",
            //             "Sam"
            //         ],
            //         "firstDay": 2
            //     },
            // });
        })


        function remplirInfo(nbreLigne, totalFacture, totalLivre, valPFHT) {

            $("#nbreLigne").text(formatNumber(nbreLigne))
            $("#totalFacture").text(formatNumber(totalFacture))
            $("#totalLivre").text(formatNumber(totalLivre))
            $("#valPFHT").text(formatNumber(valPFHT))
        }

        var tableStatAchats = $("#tableStatAchats").DataTable({
            language: {
                dom: 'Bfrtip',
                processing: false,

                lengthMenu: "Afficher :&nbsp; _MENU_ &eacute;l&eacute;ments",
                info: "Affichage de l'&eacute;lement _START_ &agrave; _END_ sur _TOTAL_ &eacute;l&eacute;ments",
                infoEmpty: "Affichage de l'&eacute;lement 0 &agrave; 0 sur 0 &eacute;l&eacute;ments",
                infoFiltered: "(filtr&eacute; de _MAX_ &eacute;l&eacute;ments au total)",
                infoPostFix: "",
                loadingRecords: "Chargement en cours...",
                zeroRecords: "Aucun &eacute;l&eacute;ment &agrave; afficher",
                emptyTable: tableVide,

                paginate: {
                    first: "",
                    previous: "Pr&eacute;c&eacute;dent",
                    next: "Suivant",
                    last: ""
                },
                aria: {
                    sortAscending: ": activer pour trier la colonne par ordre croissant",
                    sortDescending: ": activer pour trier la colonne par ordre décroissant"
                },
                search: "Rechercher&nbsp;:",
            },
            paging : false,
            scrollY : "400px",
            scrollX : true,
            lengthChange : false,
            columnDefs: [
                {
                    targets: [1, 5, 9],
                    className: "text-center"
                },
                {
                    targets: [2, 3, 4, 6, 7, 8, 10, 11, 12],
                    className: "text-end"
                },
            ],
            // pagingType: 'full_numbers',
            pageLength: 25,
            lengthChange: true,
            // order: [5, "desc"],
        })
        

            divShowPer = $('#tableStatAchats_filter')
                let BroDivShowPer = divShowPer.parent().prev()

                BroDivShowPer.append(
                    `
                <span class="d-flex align-items-center px-2 mt-2" style="cursor : pointer;">
                            <i class='ri ri-file-excel-2-line text-success me-1 ' style="font-size : 13px; cursor : pointer;"></i>
                            <span id="btn-export-Stat-Achats-excel" class="fw-bold" style="cursor : pointer;">Exporter</span>
                        </span>
                `
                )

               
recuperationPreferenceColonneUtilisateur('tableStatAchats','tableStatAchatsShowColonne')
$(document).on('click', '.tableStatAchatsShowColonne', function() {
   appliquerPreferenceColonne('tableStatAchats', 'tableStatAchats', $(this),'tableStatAchatsShowColonne')
})

    </script>

    <script>
        $(document).ready(function() {
            var data = []
            listeStatAchat(
                $("#filtrePeriode").val(),
                $("#choixFiltre").val(),
            )

            $("#btnFiltreTable").click(function() {

                listeStatAchat(
                    $("#filtrePeriode").val(),
                    $("#choixFiltre").val()
                )

            })

            $("#btnPrint").click(function() {

                $.ajax({
                    url: "{{ route('statAchat.getPrint') }}",
                    type: 'POST',
                    data: {
                        data: data,
                        filtrePeriode: $("#filtrePeriode").val(),
                        nomCol : $("#choixFiltre option:selected").text(),
                        _token: "{{ csrf_token() }}"
                    },
                    beforeSend: progressHandler(),
                    dataType: 'json',
                    success: function(response) {
                        console.log(response)

                        if (response.error == false) {

                            genererPDF(response.tablePDF)
                            completeHandler()
                            return 0
                        }
                        notif("warning", "Attention", response.messages)
                        completeHandler()
                    },
                    error: function(response) {
                        console.log(response)
                        completeHandler()
                        notifError(response.responseJSON.messages)
                    }
                })

            })

            
            function listeLigneBonAttenteSelectionne() {

                let dataIdLigne = []
                let dataPack = []
                let valNow = ""
                let lignes = tableListeRtourAttente.rows().nodes()

                $.each($(lignes).find('#checkLigneAttente'), function(key, value) {
                    if (value.checked == true) {
                        dataIdLigne.push(value.getAttribute('data-id'))
                    }
                })
                return dataIdLigne
            }

            function listeStatAchat(filtrePeriode, choixFiltre) {
                $.ajax({
                    url: "{{ route('getListeStatAchat') }}",
                    type: 'POST',
                    data: {
                        filtrePeriode: filtrePeriode,
                        choixFiltre: choixFiltre,
                        _token: "{{ csrf_token() }}"
                    },
                    beforeSend: progressHandler(),
                    dataType: 'json',
                    success: function(response) {

                        if (response.error == false) {

                            var totalNbreCommande = 0;
                            var totalHTCommande = 0;
                            var totalTaxeCommande = 0;
                            var totalTTCCommande = 0;
                            var totalNombreBL = 0;
                            var totalHTFacturee = 0;
                            var totalTaxeFacturee = 0;
                            var totalTTCFacturee = 0;
                            var totalNbreReclammee = 0;
                            var totalHTReclammee = 0;
                            var totalTaxeReclammee = 0;
                            var totalTTCReclammee = 0;

                            tableStatAchats.clear().draw()
                            $.each(response.donnee, function(key, value) {
                                if (value != null) {

                                    data.push(value)

                                    tableStatAchats.row.add([
                                        value.Nom,
                                        value.NbreCommande,
                                        formatNumberPerf(value.HTCommande),
                                        formatNumberPerf(value.TaxeCommande),
                                        formatNumberPerf(value.TTCCommande),
                                        formatNumberPerf(value.NombreBL),
                                        formatNumberPerf(value.TotalHTFacturee),
                                        formatNumberPerf(value.TotalTaxeFacturee),
                                        formatNumberPerf(value.TotalTTCFacturee),
                                        formatNumberPerf(value.NbreReclammee),
                                        formatNumberPerf(value.TotalHTReclammee),
                                        formatNumberPerf(value.TotalTaxeReclammee),
                                        formatNumberPerf(value.TotalTTCReclammee)
                                    ])
                                    totalNbreCommande += parseFloat(value.NbreCommande);
                                    totalHTCommande += parseFloat(value.HTCommande);
                                    totalTaxeCommande += parseFloat(value.TaxeCommande);
                                    totalTTCCommande += parseFloat(value.TTCCommande);
                                    totalNombreBL += parseFloat(value.NombreBL);
                                    totalHTFacturee += parseFloat(value.TotalHTFacturee);
                                    totalTaxeFacturee += parseFloat(value.TotalTaxeFacturee);
                                    totalTTCFacturee += parseFloat(value.TotalTTCFacturee);
                                    totalNbreReclammee += parseFloat(value.NbreReclammee);
                                    totalHTReclammee += parseFloat(value.TotalHTReclammee);
                                    totalTaxeReclammee += parseFloat(value.TotalTaxeReclammee);
                                    totalTTCReclammee += parseFloat(value.TotalTTCReclammee);
                                }
                            })


                            tableStatAchats.draw()

                            $(tableStatAchats.columns(0).header()).text($(
                                "#choixFiltre option:selected").text())

                            $('#totalNbreCommande').text(formatNumberPerf(totalNbreCommande));
                            $('#totalHTCommande').text(formatNumberPerf(totalHTCommande));
                            $('#totalTaxeCommande').text(formatNumberPerf(totalTaxeCommande));
                            $('#totalTTCCommande').text(formatNumberPerf(totalTTCCommande));
                            $('#totalNombreBL').text(formatNumberPerf(totalNombreBL));
                            $('#totalHTFacturee').text(formatNumberPerf(totalHTFacturee));
                            $('#totalTaxeFacturee').text(formatNumberPerf(totalTaxeFacturee));
                            $('#totalTTCFacturee').text(formatNumberPerf(totalTTCFacturee));
                            $('#totalNbreReclammee').text(formatNumberPerf(totalNbreReclammee));
                            $('#totalHTReclammee').text(formatNumberPerf(totalHTReclammee));
                            $('#totalTaxeReclammee').text(formatNumberPerf(totalTaxeReclammee));
                            $('#totalTTCReclammee').text(formatNumberPerf(totalTTCReclammee));

                            // remplirInfo(response.donnee.length, Total_QteFactureeBL, Total_QteLivreeBL,
                            //     Total_valPFHT)
                             placeboutonPreferenceColonne('tableStatAchats', 'tableStatAchatsShowColonne', 2)
                            completeHandler()
                            return 0
                        }
                        notif("warning", "Attention", response.messages)
                        completeHandler()
                    },
                    error: function(response) {
                        console.log(response)
                        completeHandler()
                        notifError(response.responseJSON.messages)
                    }
                })
            }

            function genererPDF(value) {
                // Créez un objet blob à partir du PDF en base64
                var blob = b64toBlob(value, '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
                // window.open(blobUrl);
                var printWindow = window.open(blobUrl);
            }
                
            $(document).on('click','#btn-export-Stat-Achats-excel',function(){
             
                var data =  remplissage_avec_row_add_DataTable('tableStatAchats')
                const filename =file_name("STAT_ACHAT");
                  const tabs_format = { F: '#,##0', G: '#,##0', H: '#,##0', I: '#,##0', K: '#,##0', L: '#,##0', M: '#,##0'};
                download_excel_file('{{route("export_global_excel.export")}}', data, filename,[],tabs_format)
            })
        });
    </script>
@endsection