@extends('models')
@section('titre-page', 'Etat des UG réceptionnées')

@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 UG réceptionnées</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-3 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_ugrecept"></p>
                                <span class="text-muted fs-12">Nbre Ligne</span>
                            </div>
                        </div>

                        <div class="col-xl-3 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="totalFacture_ugrecept"></p>
                                <span class="text-muted fs-12">Total Qté facturée </span>
                            </div>
                        </div>

                        <div class="col-xl-3 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="totalLivre_ugrecept"></p>
                                <span class="text-muted fs-12">Total Qté livrée </span>
                            </div>
                        </div>

                        <div class="col-xl-3 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="valPFHT_ugrecept"></p>
                                <span class="text-muted fs-12">Total val. PFHT</span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="row mt-3">
        <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-3 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-3 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-3 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>
                                </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">
                        <div class=" table-responsive">
                            <table class="tablehover table table-striped text-nowrap w-100" id="tableListeUgReception">
                                <thead class="table-header-primary">
                                    <tr>
                                       
                                        <th class="text-center text-white">Date du Bon de Livraison</th>
                                        <th class="text-center text-white">N° Facture / BL</th>
                                        <th class="text-center text-white">Bureau d'Achat</th>
                                        <th class="text-center text-white">Fournisseur</th>
                                        <th class="text-center text-white">Laboratoire</th>
                                        <th class="text-center text-white">Code CIP 1</th>
                                        <th class="text-center text-white">Désignation</th>
                                        <th class="text-center text-white">PF HT</th>
                                        <th class="text-center text-white">UG Reclamée</th>
                                        <th class="text-center text-white">UG Livrée</th>
                                        <th class="text-center text-white">NTSP</th>
                                        <th class="text-center text-white">Numéro Lot</th>
                                        <th class="text-center text-white">Date de Péremption</th>
                                        <th class="text-center text-white">Valorisation PFHT</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 remplirInfo(nbreLigne, totalFacture, totalLivre, valPFHT) {
        
            $("#nbreLigne_ugrecept").text(formatNumber(nbreLigne))
            $("#totalFacture_ugrecept").text(formatNumber(totalFacture))
            $("#totalLivre_ugrecept").text(formatNumber(totalLivre))
            $("#valPFHT_ugrecept").text(formatNumber(valPFHT))
        }

        chargerSelectLaboratoire()
        chargerSelectBureauAchat()
        chargerSelectFournisseur()

        var tableListeUgReception = $("#tableListeUgReception").DataTable({
            language: languageTable,
            columnDefs: [
                {
                    targets: [0, 1, 8, 9, 10, 11, 12],
                    className: "text-center"
                },
                {
                    targets: [7, 13],
                    className: "text-end"
                },
            ],
            // pagingType: 'full_numbers',
            pageLength: 25,
            lengthChange: true,
            order: []

        })

            divShowPer = $('#tableListeUgReception_length')
                let BroDivShowPer = divShowPer.parent().parent()

                let search = BroDivShowPer.children().eq(1).removeClass('col-md-6')
                    search.addClass('col-md-4')
                let child = BroDivShowPer.children().eq(0).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-ug-receptionne" class="fw-bold" style="cursor : pointer;">Exporter</span>
                        </span>
                `
                )

        placeboutonPreferenceColonne('tableListeUgReception','ListeUgReceptionShowColonne')
        recuperationPreferenceColonneUtilisateur('tableListeUgReception','ListeUgReceptionShowColonne')

        $(document).on('click', '.ListeUgReceptionShowColonne', function() {
            appliquerPreferenceColonne('tableListeUgReception','Etat-des-UG-receptionné',$(this),'ListeUgReceptionShowColonne')
        })
    </script>

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

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

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

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

            })

            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 listeUgReception(filtrePeriode, IDBUREAUACHAT, IDLABORATOIRE, IDFOURNISSEUR) {
                $.ajax({
                    url: "{{ route('getListeUgReceptionne') }}",
                    type: 'POST',
                    data: {
                        filtrePeriode: filtrePeriode,
                        IDBUREAUACHAT: IDBUREAUACHAT,
                        IDLABORATOIRE: IDLABORATOIRE,
                        IDFOURNISSEUR: IDFOURNISSEUR,
                        _token: "{{ csrf_token() }}"
                    },
                    beforeSend: progressHandler(),
                    dataType: 'json',
                    success: function(response) {
                        console.log(response)
                        if (response.error == false) {
                            let Total_QteFactureeBL = 0
                            let Total_QteLivreeBL = 0
                            let Total_valPFHT = 0

                            data = response.donnee

                            tableListeUgReception.clear().draw()
                            $.each(response.donnee, function(key, value) {
                                let valPFHT = parseFloat(value.QteFactureeBL) * parseFloat(value.PrixAchatFHT)
                                
                                if (isNaN(valPFHT)) {
                                    valPFHT = 0
                                }

                                tableListeUgReception.row.add([
                                    explodeDate(value.DateReceptionBonLivraison),
                                    value.NumeroBonLivraison,
                                    value.NomBureauAchat,
                                    value.NomFournisseur,
                                    value.NomLaboratoire,
                                    value.CodeCipProduit1,
                                    value.DesignationProduit,
                                    formatNumber(value.PrixAchatFHT),
                                    formatNumber(value.QteFactureeBL),
                                    formatNumber(value.QteLivreeBL),
                                    value.NumeroTracabilite,
                                    value.NumeroLotProduit,
                                    explodeDate(value.DatePeremption),
                                    formatNumber(valPFHT)
                                ])

                                Total_QteFactureeBL += parseFloat(value.QteFactureeBL)
                                Total_QteLivreeBL += parseFloat(value.QteLivreeBL)
                                Total_valPFHT += valPFHT
                                
                            })
                            tableListeUgReception.draw()
                            
                            remplirInfo(response.donnee.length, Total_QteFactureeBL, Total_QteLivreeBL, Total_valPFHT)
                            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-ug-receptionne',function(){
                var data =  remplissage_avec_row_add_DataTable('tableListeUgReception')
                const filename =file_name("UG_RECEPTIONNE");
                download_excel_file('{{route("export_global_excel.export")}}', data, filename)
            })
            
        });
    </script>
@endsection