@extends('models')
@section('titre-page', "Listing mouvement de stocks par produit")
@section('substock', "open active")
@section('stock', "active")

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

        .autocomplete-table {
            width: 100%;
            border-collapse: collapse;
        }

        .autocomplete-table th,
        .autocomplete-table td {
            border-left: 1px solid #ddd;
            border-right: 1px solid #ddd;
            padding: 8px;
        }

        .autocomplete-table th {
            background-color: #b9b9b9;
        }

        .ui-menu-item {
            cursor: pointer;
        }

        .ui-menu-item-wrapper {
            white-space: nowrap;
        }

        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 */
        }

        body.modal-open {
            overflow: hidden;
        }

        [data-filepond-item-state='processing-complete'] .filepond--item-panel {
            background-color: green;
        }
    </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-6 col-lg-6 col-md-4 mt-2">
                    <nav>
                        <ol class="breadcrumb mb-0">
                            <li class="breadcrumb-item text-light"><a href="javascript:void(0);">Stocks</a></li>
                            <li class="breadcrumb-item active" aria-current="page">Listing mouvements de stocks par produit</li>
                        </ol>
                    </nav>
                </div>

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

  <!-- 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-3 col-lg-3 col-sm-3 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="nbreLigne"></p>
                            <span class="text-muted fs-12">Nbre lignes</span>
                        </div>
                    </div>
                    <div class="col-xl-3 col-lg-3 col-sm-3 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="totalHTT"></p>
                            <span class="text-muted fs-12">Total HT</span>
                        </div>
                    </div>
                    <div class="col-xl-3 col-lg-3 col-sm-3 col-1 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="totalTVA"></p>
                            <span class="text-muted fs-12">Total TVA</span>
                        </div>
                    </div>
                    <div class="col-xl-3 col-lg-3 col-sm-3 col-1 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="totalTTC"></p>
                            <span class="text-muted fs-12">Total TTC</span>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<!-- End:: row-7 -->

    <div class="row mt-3">
        <div class="col-xl-12 mb-2">
            <div class="accordion " id="">
                <div class="accordion-item">
                    <h2 class="accordion-header" id="headingOne">
                        <button class="accordion-button bg-danger-gradient" type="button" data-bs-toggle="collapse"
                            data-bs-target="#correction_collapse" aria-expanded="true" aria-controls="correction_collapse">
                            Filtre
                        </button>
                    </h2>
                    <div id="correction_collapse" class="accordion-collapse collapse show" aria-labelledby="headingOne"
                        data-bs-parent="#correction_collapse">
                        <div class="accordion-body">


                            <div class="row">

                                <div class="col-xl-2 mb-2">
                                    <p class="mb-0 text-muted">Site</p>
                                    <select class="form-select" name="IDAGENCE" id="IDAGENCE"  @disabled(checkIfDroit('DG_AccesMultiSite'))>

                                    </select>
                                </div>
                                <div class="col-xl-3 mb-2">
                                    <p class="mb-0 text-muted">Période</p>
                                    <input type="text" class="form-control dateperiode" id="periode" name="periode">
                                </div>
                                <div class="col-xl-3 mb-2">
                                    <p class="mb-0 text-muted">Produit</p>
                                    <select class="form-select" name="produit" id="produit">

                                    </select>
                                </div>
                                <div class="col-xl-3 mb-2">
                                    <p class="mb-0 text-muted">Motif du mouvement</p>
                                    <select class="form-select" name="IDCORRECTION_MOTIF" id="IDCORRECTION_MOTIF">
                                        <option value="0"> TOUS </option>
                                        @foreach ($CORRECTION_MOTIF as $item)
                                            <option value="{{ $item->IDCORRECTION_MOTIF }}">
                                                {{ $item->LibelleMotifCorrection }}
                                            </option>
                                        @endforeach
                                    </select>
                                </div>
                                <div class="col-xl-1 mb-2 mt-3">
                                    <button class="btn btn-primary" id="btnSearch">
                                        <i class='bx bx-search-alt'></i>
                                    </button>

                                    <button class="btn btn-primary-transparent btn-loader d-block d-none" id="btnLoader">
                                        <span class="loading"><i class="ri-loader-4-line fs-16"></i></span>
                                    </button>
                                </div>
                            </div>

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

            </div>
        </div>

    </div>

    <div class="row">
        <div class=" col-xl-12">
            <div class="card  custom-card">

                <div class="card-body">
                    <div class="table-responsive">
                        <table class="tablehover table table-striped tablehover text-nowrap w-100 openModalProduit no-footer dataTable"
                            id="tableListeMvtParProduit">
                            <thead class="table-header-primary">
                                <tr>

                                    <th class="text-center" data-column="action" data-class="text-center">
                                        #
                                    </th>

                                    <th class="text-center" data-column="Etat" data-class="text-center">Etat</th>
                                    <th class="text-center" data-column="NomAgence" data-class="text-center">Agence</th>
                                    <th class="text-center" data-column="NomZoneStockage" data-class="text-center">Magasin</th>
                                    <th class="text-center" data-column="DateCorrection" data-class="text-center">Date</th>
                                    <th class="text-center" data-column="LibelleMotifCorrection" data-class="text-center">Motif correction</th>
                                    <th class="text-center" data-column="NumeroCorrection" data-class="text-center">N° Correction</th>
                                    <th class="text-center" data-column="CodeCipProduit1" data-class="text-center">Code Produit</th>
                                    <th class="text-center" data-column="DesignationProduit" data-class="text-start">Désignation</th>
                                    <th class="text-center" data-column="NomLaboratoire" data-class="text-center">Laboratoire</th>
                                    <th class="text-center" data-column="QteCorrigee" data-class="text-center">Qté Corrigée</th>
                                    <th class="text-center" data-column="NumeroTracabilite" data-class="text-center">NTSP</th>
                                    <th class="text-center" data-column="NumeroLotProduit" data-class="text-center">Numéro de Lot</th>
                                    <th class="text-center" data-column="DatePeremption" data-class="text-center">Péremption</th>
                                    <th class="text-center" data-column="TauxTaxe" data-class="text-center">TVA</th>
                                    <th class="text-center" data-column="PrixGHT" data-class="text-end">PGHT</th>
                                    <th class="text-center" data-column="PrixRMP" data-class="text-end">P. Révient HT</th>
                                    <th class="text-center" data-column="TotalHT" data-class="text-end">Total HT</th>
                                    <th class="text-center" data-column="TotalTaxe" data-class="text-end">Total Taxe</th>
                                    <th class="text-center" data-column="TotalTTC" data-class="text-end">Total TTC</th>

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

    <div class="modal fade" id="modalDetailMvt">
        <div class="modal-dialog modal-xl" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h6 class="modal-title">Détail movement de stock</h6>
                    <button aria-label="Close" class="btn-close bg-white" data-bs-dismiss="modal"></button>
                </div>
                <div class="modal-body">
                    <div class="row">
                        <div class="col-xl-12">
                            <div class="card">
                                <div class="card-body">
                                    <div class="row">
                                        <div class="col-3">
                                            Numéro movement : <span id="numMvt" class="fw-bold"></span>
                                        </div>
                                        <div class="col-3">
                                            Total HT : <span id="totalHtMvt" class="fw-bold"></span>
                                        </div>
                                        <div class="col-3">
                                            Total TVA : <span id="totalTvaMvt"></span>
                                        </div>
                                        <div class="col-3">
                                            Total TTC : <span id="totalTtcMvt"></span>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="col-xl-12">
                            <div class="table-responsive">
                                <table class="tablehover table table-striped tablehover text-nowrap w-100 openModalProduit no-footer"
                                    id="tableListeMvtLigne">
                                    <thead class="table-header-primary">
                                        <tr>
                                            <th class="text-center" data-column="CodeCipProduit1"
                                                data-class="text-center">Code Produit</th>
                                            <th class="text-center" data-column="DesignationProduit"
                                                data-class="text-center">Désignation</th>
                                            <th class="text-center" data-column="NomLaboratoire"
                                                data-class="text-center">Laboratoire</th>
                                            <th class="text-center" data-column="QteCorrigee" data-class="text-center">
                                                Qté Corrigée</th>
                                            <th class="text-center" data-column="NumeroTracabilite"
                                                data-class="text-center">NTSP</th>
                                            <th class="text-center" data-column="NumeroLotProduit"
                                                data-class="text-center">Numéro de Lot</th>
                                            <th class="text-center" data-column="DatePeremption"
                                                data-class="text-center">Péremption</th>
                                            <th class="text-center" data-column="TauxTaxe" data-class="text-center">TVA
                                            </th>
                                            <th class="text-center" data-column="PrixGHT" data-class="text-center">PGHT
                                            </th>
                                            <th class="text-center" data-column="PrixRMP" data-class="text-center">P.
                                                Révient HT</th>
                                            <th class="text-center" data-column="TotalHT" data-class="text-center">Total
                                                HT</th>
                                            <th class="text-center" data-column="TotalTaxe" data-class="text-center">
                                                Total Taxe</th>
                                            <th class="text-center" data-column="TotalTTC" data-class="text-center">Total
                                                TTC</th>
                                        </tr>
                                    </thead>
                                </table>
                            </div>

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

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

@section('script')
    <script>
        $(document).ready(function() {

            $("#IDCORRECTION_MOTIF").select2()
            chargerSelectlisteAgence()
            chargerSelectProduit()

            function chargerSelectlisteAgence() {
                $.ajax({
                    url: '{{ route('listeAgence') }}',
                    type: 'GET',
                    dataType: 'json',
                    success: function(response) {
                        // console.log(response)
                        $('#IDAGENCE').html('')

                        $('#IDAGENCE').append('<option value="0">TOUS</option>')
                        $.each(response.data, function(key, value) {
                            $('#IDAGENCE').append(
                                `<option value="${value["IDAGENCE"]}">${value["NomAgence"]}</option>`
                            )
                        })

                        $('#IDAGENCE').val('{{ session()->get('IDAGENCE') }}').change()
                    }
                })
            }

            function chargerSelectProduit() {

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

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

                        $.each(response.data, function(key, value) {
                            $('#produit').append(
                                `<option value="${value["IDPRODUIT"]}">${value["DesignationProduit"]}</option>`
                            )
                        })
                        $('#produit').select2()
                    }
                })
            }

            function getDataMvt() {
                $.ajax({
                    type: "get",
                    url: "{{ route('stock.listingMouvementStockParProduit.listing') }}",
                    data: {
                        IDAGENCE: $("#IDAGENCE").val(),
                        periode: $("#periode").val(),
                        produit: $("#produit").val(),
                        IDCORRECTION_MOTIF: $("#IDCORRECTION_MOTIF").val()
                    },
                    beforeSend : function () {
                        $("#btnSearch").addClass("d-none")
                        $("#btnLoader").removeClass("d-none")
                      },
                    dataType: "json",
                    success: function(response) {
                        console.log(response)
                        if (response.error == false) {
                            remplissageDataTable({
                                IdentifiantDuTableau: '#tableListeMvtParProduit',
                                obj: response.data
                            })

                             let divShowPer = $('#tableListeMvtParProduit_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-mvt-stock-produit" class="fw-bold" style="cursor : pointer;">Exporter</span>
                                            </span>
                                            
                                        `)

                            $("#nbreLigne").text(response.data.length)
                            $("#totalHTT").text(response.dataTotaux.TotalHT)
                            $("#totalTVA").text(response.dataTotaux.TotalTaxe)
                            $("#totalTTC").text(response.dataTotaux.TotalTTC)

                            $("#btnLoader").addClass("d-none")
                            $("#btnSearch").removeClass("d-none")
                            return 0
                        }
                        $("#btnLoader").addClass("d-none")
                        $("#btnSearch").removeClass("d-none")
                    },
                    error: function(response) {
                        console.log(response)
                        notifError(response.responseJSON.messages)
                        $("#btnLoader").addClass("d-none")
                        $("#btnSearch").removeClass("d-none")
                    }
                });
            }

            var tableListeMvtParProduit = $("#tableListeMvtParProduit").DataTable({
                language: languageTable,
                // pagingType: 'full_numbers',
                pageLength: 25,
                lengthChange: true,
                order: [],
            })

            $("#btnSearch").on("click", function(e) {
                getDataMvt()
            });

            $(document).on('click','#btn-export-mvt-stock-produit',function(){
                var data =  getCleanedTableData('tableListeMvtParProduit')
                const filename =file_name("LISTING_MOUVEMENT_STOCK_PAR_PRODUIT");
                const tabs_format = { P: '#,##0', Q: '#,##0', R: '#,##0', S: '#,##0' };
               download_excel_file('{{route("export_global_excel.export")}}', data,filename,['#'],tabs_format)
            })

        })
    </script>
@endsection