@extends('models')
@section('titre-page', 'Etat des MISES EN PLACES')

@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">Etat des MISES EN PLACES</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 px-4">

                        <div class="col-xl-4 col-lg-4 col-sm-12 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="nbreLigne"></p>
                                <span class="text-muted fs-12">Nbre Ligne</span>
                            </div>
                        </div>

                        <div class="col-xl-4 col-lg-4 col-sm-12 d-flex align-items-center">
                            <div class="me-2">
                                <span class="avatar avatar-rounded bg-success-transparent">
                                    <i class="bi bi-cash-stack " style="font-size: 24px"></i>

                                </span>
                            </div>
                            <div class="flex-fill">
                                <p class="fs-18 mb-0 text-success fw-semibold" id="valPGHT"></p>
                                <span class="text-muted fs-12">Valeur à payer PGHT</span>
                            </div>
                        </div>
                        <div class="col-xl-4 col-lg-4 col-sm-12 d-flex align-items-center">
                            <div class="me-2">
                                <span class="avatar avatar-rounded bg-info-transparent">
                                    <i class="bi bi-cash-stack " style="font-size: 24px"></i>
                                </span>
                            </div>
                            <div class="flex-fill">
                                <p class="fs-18 mb-0 text-info fw-semibold" id="valPRMP"></p>
                                <span class="text-muted fs-12">Total valeur PRMP</span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="row">
        <div class=" col-xl-12">
            <div class=" card custom-card">
                <div class=" card-body pe-0 pe-0">
                    <div class="row w-100">
                        <form id="formFiltre">
                            <div class="row">
                                <div class=" col-xl-11 col-lg-11 col-md-10">
                                    <div class=" row">
                                        <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-2 col-lg-3 col-md-4 mb-2">
                                            <p class="mb-0 text-muted">Bureau d'achat</p>
                                            <select class="form-select" id="IDBUREAUACHAT">

                                            </select>
                                        </div>
                                        <div class="col-xl-2 col-lg-3 col-md-4 mb-2">
                                            <p class="mb-0 text-muted">Fournisseur</p>
                                            <select class="form-select" id="IDFOURNISSEUR">

                                            </select>
                                        </div>
                                        <div class="col-xl-2 col-lg-3 col-md-4 mb-2">
                                            <p class="mb-0 text-muted">Laboratoire</p>
                                            <select class="form-select" id="IDLABORATOIRE">

                                            </select>
                                        </div>

                                        <div class="col-xl-3 col-lg-3 col-md-4 mb-2">
                                            <p class="mb-0 text-muted">Produit</p>
                                            <select class="form-select" id="IDPRODUIT">

                                            </select>
                                        </div>
                                    </div>
                                </div>
                                <div class=" col-xl-1 d-flex justify-content-center">
                                    <div class="col-xl-1 col-lg-1 col-md-1 mb-0 pt-1 d-flex flex-fill">
                                        <label class="btn btn-primary btn-wave w-100 float-end mt-2" id="btnFiltreTable">
                                            <i class="ri-search-line fs-16" style="cursor:pointer;"></i>
                                        </label>
                                    </div>
                                </div>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="row">
        <div class="col-xl-12">
            <div class="card custom-card">
                <div class="card-body">
                    <div class="row justify-content-end mb-2">


                        <div class="col-lg-1 mx-0 px-0">
                            <button type="button"
                                class="btn btn-warning-light btn-wave d-flex justify-content-center w-100" id="btnImprime">
                                <i class='bx bx-printer mt-1 me-1'></i>Imprimer
                            </button>
                        </div>

                        <div class="col-lg-2 mx-1 px-0">
                            <button type="button"
                                class="btn btn-success-light btn-wave d-flex justify-content-center w-100"
                                id="btn-export-mise-en-place">
                                <i class='ri ri-file-excel-2-line text-succes me-1'></i>Exporter en excel
                            </button>
                        </div>
                    </div>
                    <div class="row">
                        <div class=" table-responsive">
                            <table class="tablehover table table-striped text-nowrap w-100 openModalProduit"
                                id="tableListeMiseEnPlace">
                                <thead class="table-header-primary">
                                    <tr>
                                        <th data-column="NumeroTracabilite" data-class="text-center" class="text-center text-white">NTSP</th>
                                        <th data-column="CodeCipProduit1" data-class="text-center" class="text-center text-white">CIP</th>
                                        <th data-column="DesignationProduit" data-class="text-start" class="text-center text-white">Désignation</th>
                                        <th data-column="NomLaboratoire" data-class="text-start" class="text-center text-white">Laboratoire</th>
                                        <th data-column="NomFournisseur" data-class="text-start" class="text-center text-white">Fournisseur</th>
                                        <th data-column="DateReceptionBonLivraison" data-class="text-center" class="text-center text-white">Date Facture Achat</th>
                                        <th data-column="NumeroLotProduit" data-class="text-center" class="text-center text-white">Numéro de Lot</th>
                                        <th data-column="DatePeremption" data-class="text-center" class="text-center text-white">Date de péremption</th>
                                        <th data-column="la_somme_QteLivreeBL" data-class="text-center" class="text-center text-white">Qté livrée</th>
                                        <th data-column="la_somme_QteFactureeBL" data-class="text-center" class="text-center text-white">Qté vendue</th>
                                        <th data-column="QteMVT" data-class="text-center" class="text-center text-white">Qté en Mvt</th>
                                        <th data-column="QteAPayer" data-class="text-center" class="text-center text-white">Qté à payer</th>
                                        <th data-column="StockTotal" data-class="text-center" class="text-center text-white">Stock Total</th>
                                        <th data-column="PrixGHTBL" data-class="text-center" class="text-center text-white">PGHT</th>
                                        <th data-column="Total_PGHT" data-class="text-end" class="text-center text-white">Valeur PGHT Qté à payer</th>
                                        <th data-column="PrixRevientHT" data-class="text-end" class="text-center text-white">PRMP</th>
                                        <th data-column="Total_PrixRevient" data-class="text-end" class="text-center text-white">Valeur PRMP Qté à payer</th>

                                    </tr>
                                </thead>
                            </table>
                        </div>

                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection

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

        function chargerSelectBureauAchat() {

            $.ajax({

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

                    if (response.success == 0) {

                        notifError(response.msg)
                    } else if (response.success != 0) {

                        $('#IDBUREAUACHAT').html('')
                        $('#IDBUREAUACHAT').append('<option value="0">TOUS</option>')

                        $.each(response.data, function(key, value) {
                            $('#IDBUREAUACHAT').append('<option value="' + value['IDBUREAUACHAT'] +
                                '">' + value['NomBureauAchat'] + '</option>')
                        })
                    }
                    completeHandler()
                },
                error: function(error) {

                    notifError(error)
                    completeHandler()
                }
            })
        }

        function chargerSelectFournisseur() {

            $.ajax({

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

                    if (response.success == 0) {

                        notifError(response.msg)
                    } else if (response.success != 0) {

                        $('#IDFOURNISSEUR').html('')
                        $('#IDFOURNISSEUR').append('<option value="0">TOUS</option>')
                        $('#IDFOURNISSEUR_edit').append('<option value="0">TOUS</option>')
                        $.each(response.data, function(key, value) {

                            $('#IDFOURNISSEUR').append('<option value="' + value['IDFOURNISSEUR'] +
                                '">' + value['NomFournisseur'] + '</option>')
                        })
                        $('#IDFOURNISSEUR').select2()
                    }
                    completeHandler()
                },
                error: function(error) {

                    notifError(error)
                    completeHandler()
                }
            })
        }

        function chargerSelectLaboratoire() {

            $.ajax({

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

                    if (response.success == 0) {

                        notifError(response.msg)
                    } else if (response.success != 0) {

                        $('#IDLABORATOIRE').html('')
                        $('#IDLABORATOIRE').append('<option value="0">TOUS</option>')
                        $.each(response.data, function(key, value) {
                            $('#IDLABORATOIRE').append('<option value="' + value['IDLABORATOIRE'] +
                                '">' + value['NomLaboratoire'] + '</option>')
                        })
                        $('#IDLABORATOIRE').select2()
                    }
                    completeHandler()
                },
                error: function(error) {

                    notifError(error)
                    completeHandler()
                }
            })
        }

        function chargerSelectProduit() {

            $.ajax({

                url: '{{ route('listingProduitSimple') }}',
                type: 'GET',
                dataType: 'json',
                success: function(response) {

                    $('#IDPRODUIT').html('')
                    $('#IDPRODUIT').append('<option value="0">TOUS LES PRODUITS</option>')

                    $.each(response.data, function(key, value) {

                        $('#IDPRODUIT').append('<option value="' + value["IDPRODUIT"] + '">' + value[
                            "DesignationProduit"] + '</option>')
                    })
                    $('#IDPRODUIT').select2()
                }
            })
        }

        function remplirInfo(nbreLigne, valPGHT, valPRMP) {
            $("#nbreLigne").text(formatNumber(nbreLigne))
            $("#valPGHT").text(formatNumber(valPGHT))
            $("#valPRMP").text(formatNumber(valPRMP))
        }

        chargerSelectLaboratoire()
        chargerSelectProduit()
        chargerSelectBureauAchat()
        chargerSelectFournisseur()

        var tableListeMiseEnPlace = remplissageDataTable({
            IdentifiantDuTableau: '#tableListeMiseEnPlace',
            obj: []
        })

         placeboutonPreferenceColonne('tableListeMiseEnPlace','ListeMiseEnPlaceShowColonne')
         recuperationPreferenceColonneUtilisateur('tableListeMiseEnPlace','ListeMiseEnPlaceShowColonne')

        $(document).on('click', '.ListeMiseEnPlaceShowColonne', function() {
            appliquerPreferenceColonne('tableListeMiseEnPlace','Etat-des-mises-en-place',$(this),'ListeMiseEnPlaceShowColonne')
        })
    </script>

    <script>
        $(document).ready(function() {

            // listeEtatMiseEnPlace(
            //     $("#filtrePeriode").val(),
            //     $("#IDBUREAUACHAT").val(),
            //     $("#IDLABORATOIRE").val(),
            //     $("#IDFOURNISSEUR").val(),
            //     $("#IDPRODUIT").val()
            // )

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

                listeEtatMiseEnPlace(
                    $("#filtrePeriode").val(),
                    $("#IDBUREAUACHAT").val(),
                    $("#IDLABORATOIRE").val(),
                    $("#IDFOURNISSEUR").val(),
                    $("#IDPRODUIT").val()
                )

            })
            var data = []

            // Fonction pour indexer les données par les noms des colonnes
            function indexDataByColumnNames(data, columnNames) {
                return data.map(function(row) {
                    var indexedRow = {};
                    row.forEach(function(cell, index) {
                        indexedRow[columnNames[index]] = cell;
                    });
                    return indexedRow;
                });
            }


            $("#btnImprime").on("click", function() {
                // Récupère les données de la table
                var data = tableListeMiseEnPlace.rows().data().toArray();
                // Recupère l'entête du tableau et supprime les especes
                var columnNames = tableListeMiseEnPlace.columns().header().toArray().map(function(header) {
                    return $(header).text().replace(/\s+/g, '');
                });

                console.log(data, columnNames);
                

                // var dataTables = indexDataByColumnNames(data, columnNames);


                $.ajax({
                    url: "{{ route('miseEnPlace.getPrint') }}",
                    type: 'POST',
                    data: {
                        date: $("#filtrePeriode").val(),
                        data: data,
                        _token: "{{ csrf_token() }}"
                    },
                    beforeSend: progressHandler(),
                    dataType: 'json',
                    success: function(response) {
                        // console.log(response)

                        if (response.error == false) {
                            if (response.tablePDF.length <= 0) {
                                notifWarning("Aucun donnée trouvée !!")
                                return 0
                            }

                            genererPDF(response.tablePDF)
                            completeHandler()
                            return 0
                        }
                        notifWarning(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) {
                        // data - idclient
                        dataIdLigne.push(value.getAttribute('data-id'))
                    }
                })
                return dataIdLigne
            }

            function listeEtatMiseEnPlace(filtrePeriode, IDBUREAUACHAT, IDLABORATOIRE, IDFOURNISSEUR, IDPRODUIT) {
                $.ajax({
                    url: "{{ route('getListeEtatMiseEnPlace') }}",
                    type: 'POST',
                    data: {
                        filtrePeriode: filtrePeriode,
                        IDBUREAUACHAT: IDBUREAUACHAT,
                        IDLABORATOIRE: IDLABORATOIRE,
                        IDFOURNISSEUR: IDFOURNISSEUR,
                        IDPRODUIT: IDPRODUIT,
                        _token: "{{ csrf_token() }}"
                    },
                    beforeSend: progressHandler(),
                    dataType: 'json',
                    success: function(response) {
                        // console.log(response)

                        if (response.error == false) {
                            let Total_PGHT = 0
                            let Total_PrixRevient = 0

                            // data = response.donnee

                            tableListeMiseEnPlace = remplissageDataTable({
                                IdentifiantDuTableau: '#tableListeMiseEnPlace',
                                obj: response.donnee
                            })


                            // tableListeMiseEnPlace.clear().draw()
                            // $.each(response.donnee, function(key, value) {
                            //     tableListeMiseEnPlace.row.add([
                            //         value.NumeroTracabilite,
                            //         value.CodeCipProduit1,
                            //         value.DesignationProduit,
                            //         value.NomLaboratoire,
                            //         value.NomFournisseur,
                            //         explodeDate(value.DateReceptionBonLivraison),
                            //         value.NumeroLotProduit,
                            //         explodeDate(value.DatePeremption),
                            //         value.la_somme_QteLivreeBL,
                            //         value.la_somme_QteFactureeBL,
                            //         value.QteMVT,
                            //         value.QteAPayer,
                            //         value.StockTotal,
                            //         value.PrixGHTBL,
                            //         value.Total_PGHT,
                            //         value.PrixRevientHT,
                            //         value.Total_PrixRevient
                            //     ])

                            //     Total_PGHT += parseFloat(value.Total_PGHT)
                            //     Total_PrixRevient += parseFloat(value.Total_PrixRevient)
                            // })
                            // tableListeMiseEnPlace.draw()
                            remplirInfo(response.donnee.length, response.totaux.Total_PGHT, response
                                .totaux.Total_PrixRevient)
                            completeHandler()
                            return 0
                        }
                        notifWarning(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-mise-en-place', function() {
                // var data =  remplissage_avec_row_add_DataTable('tableListeMiseEnPlace')
                var data = getCleanedTableData('tableListeMiseEnPlace')
                const filename = file_name("MISE_EN_PLACE");
                download_excel_file('{{ route('export_global_excel.export') }}', data, filename)
            })
        });
    </script>
@endsection