@extends('models')
@section('substock')
    open active
@endsection
@section('stock')
    active
@endsection
{{-- @section('TrfInterSite', 'active') --}}
@section('titre-page', 'Etat des taux de ruptures')
@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">Etat des taux de ruptures</li>
                        </ol>
                    </nav>
                </div>
                <div class="col-xl-6 col-lg-6 col-md-8 col-sm-12 mt-xl-0 mt-2 mx-0 ">
                    <div class="row justify-content-end">
                        <div class="col-xl-4 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-2 col-sm-3 col-md-3 mt-3">
                            <button class=" btn btn-wave waves-effect waves-light btn-warning-light w-100" id="btnGenerer" data-bs-toggle="tooltip"
                                data-bs-placement="top"
                                data-bs-custom-class="tooltip-warning"
                                data-bs-trigger="hover"
                                title="Imprimer">
                                <i class="bx bx-printer mt-1 me-1"></i>
                            </button>
                        </div>
                        
                        {{-- <div class="col-xl-3 col-sm-3 col-md-3 d-flex justify-content-center">
                            <button class=" btn btn-wave waves-effect waves-light btn-warning-light w-100" id="btnImprimer">
                                <i class="bx bx-printer mt-1 me-1"></i> Imprimer
                            </button>
                        </div> --}}
                    </div>
                </div>

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

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

                <div class="card-body p-1">
                    <div class="table-responsive">
                        <table class="tablehover table table-striped tablehover text-nowrap w-100 no-footer dataTable"
                            id="tableFamille">
                            <thead class="table-header-primary">
                                <tr id="tableHead">
                                    
                                  <th class="text-center" data-column="libelle" data-class="text-start">Famille</th>
                                     <th class="text-center" data-column="statut" data-class="text-center">Statut <br> N-M-R</th>
                                     <th class="text-center" data-column="rupture" data-class="text-center">Rupture</th>
                                     <th class="text-center" data-column="taux" data-class="text-center">Taux <br> Rupture</th>

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

        <div class=" col-xl-4">
            <div class="card  custom-card">

                <div class="card-body p-1">
                    <div class="table-responsive">
                        <table class="tablehover table table-striped tablehover text-nowrap w-100 no-footer dataTable"
                            id="tableCate">
                            <thead class="table-header-primary">
                                <tr id="tableHead">
                                    
                                    <th class="text-center" data-column="libelle" data-class="text-start">Catégorie</th>
                                    <th class="text-center" data-column="statut" data-class="text-center">Statut <br> N-M-R</th>
                                    <th class="text-center" data-column="rupture" data-class="text-center">Rupture</th>
                                    <th class="text-center" data-column="taux" data-class="text-center">Taux <br> Rupture</th>

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

        <div class=" col-xl-4">
            <div class="card  custom-card">

                <div class="card-body p-1">
                    <div class="table-responsive">
                        <table class="tablehover table table-striped tablehover text-nowrap w-100 no-footer dataTable"
                            id="tableMode">
                            <thead class="table-header-primary">
                                <tr id="tableHead">
                                   
                                    <th class="text-center" data-column="libelle" data-class="text-start">Mode Expédition	</th>
                                    <th class="text-center" data-column="statut" data-class="text-center">Statut <br> N-M-R</th>
                                    <th class="text-center" data-column="rupture" data-class="text-center">Rupture</th>
                                    <th class="text-center" data-column="taux" data-class="text-center">Taux <br> Rupture</th>

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

        <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 no-footer dataTable"
                            id="tableRupture">
                            <thead class="table-header-primary">
                                <tr>
                                    <td class="text-center text-white"  style="background-color: white"></td>
                                    <td class="text-center text-black" colspan="4"  style="background-color: #FFFFE8; border: 1px solid !important;">CATEGORIE</td>
                                    <td class="text-center text-black" colspan="4" style="background-color: #FFFFE8; border: 1px solid !important;">MODE D'EXPEDITION</td>
                                </tr>
                                <tr id="tableHead">
                                    
                                    <th class="text-center" data-column="libelle_famille" data-class="text-start">Famille</th>
                                    <th class="text-center" data-column="libelle_cat" data-class="text-center">Catégorie</th>
                                    <th class="text-center" data-column="statut_cat" data-class="text-center">Statut N-M-R</th>
                                    <th class="text-center" data-column="rupture_cat" data-class="text-center">Rupture</th>
                                    <th class="text-center" data-column="taux_cat" data-class="text-center">Taux</th>
                                    <th class="text-center" data-column="libelle_modeExp" data-class="text-center">Mode expédition</th>
                                    <th class="text-center" data-column="statut_modeExp" data-class="text-center">Statut N-M-R</th>
                                    <th class="text-center" data-column="rupture_modeExp" data-class="text-center">Rupture</th>
                                    <th class="text-center" data-column="taux_modeExp" data-class="text-center">Taux</th>

                                </tr>
                            </thead>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection

@section('script')
    <script>
        $(document).ready(function() {
            chargerSelectlisteAgence()
            function chargerSelectlisteAgence() {
                $.ajax({
                    url: '{{ route('listeAgence') }}',
                    type: 'GET',
                    dataType: 'json',
                    success: function(response) {
                        // // console.log(response)
                        $.each(response.data, function(key, value) {
                            $('#IDAGENCE').append(
                                `<option value="${value["IDAGENCE"]}">${value["NomAgence"]}</option>`
                            )
                        })

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

            function getDataMvt(idagence) {
                $.ajax({
                    type: "post",
                    url: "{{ route('stock.etatTauxRuptures.listing') }}",
                    data: {
                        idagence :idagence,
                        _token : "{{ csrf_token() }}"
                    },
                    beforeSend: progressHandler(),
                    dataType: "json",
                    success: function(response) {
                        // console.log(response)
                        if (response.error == false) {
                            tableFamille = remplissageDataTable({
                                IdentifiantDuTableau : '#tableFamille',
                                obj : response.data.Famille,
                                lengthChange : false,
                                bFilter : false,
                                bFilter : false,
                                paging : false,
                                scrollX : true,
                                scrollY : "180px",
                            })

                            tableCate = remplissageDataTable({
                                IdentifiantDuTableau: '#tableCate',
                                obj: response.data.Categorie,
                                lengthChange : false,
                                bFilter : false,
                                   paging :false,
                                scrollX : true,
                                scrollY : "180px",
                            })

                            tableMode = remplissageDataTable({
                                IdentifiantDuTableau: '#tableMode',
                                obj: response.data.ModeExpedition,
                                lengthChange : false,
                                bFilter : false,
                                   paging :false,
                                scrollX : true,
                                scrollY : "180px",
                            })
                            
                            tableRupture = remplissageDataTable({
                                IdentifiantDuTableau: '#tableRupture',
                                obj: response.data.General,
                                lengthChange : false,
                                bFilter : false,
                                paging :false,
                                scrollX : true,
                                scrollY : "500px",
                            })
                            


                            // $("#nbreligne").text(response.data.length)
                            // $("#nbreRemb").text(response.nbreArembourse)
                            // $("#valeurRemb").text(response.montantArembourse)
                            completeHandler()
                            return 0
                        }
                        completeHandler()
                    },
                    error: function(response) {
                        // console.log(response)
                        completeHandler()
                        notifError(response.messages)
                    }
                });
            }

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

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


            $(document).on("change", "#IDAGENCE", function() {
                getDataMvt($(this).val())
            })

        })
    </script>

    <!-- Script de bouton d'impression -->
    <script>
        
        _('btnGenerer').addEventListener('click', function(){

            $.ajax({

                url: "{{ route('imprimerPDFEtatRupture') }}",
                type: 'POST',
                data: {

                    dataTableFamille : $('#tableFamille').DataTable().rows().data().toArray(),
                    dataTableCategorie : $('#tableCate').DataTable().rows().data().toArray(),
                    dataTableModeExpe : $('#tableMode').DataTable().rows().data().toArray(),
                    dataTableRupture : $('#tableRupture').DataTable().rows().data().toArray(),
                    _token : '{{ csrf_token() }}'
                },
                dataType: 'json',
                beforeSend: progressHandler(),
                success: function (response) {

                    if (response.success == 1) {

                        if (response.tablePDF.length > 0) {

                            response.tablePDF.forEach(function (value) {

                                // Récupérez le PDF en base64 depuis la réponse
                                var pdfBase64 = value;

                                // Créez un objet blob à partir du PDF en base64
                                var blob = b64toBlob(pdfBase64, 'application/pdf');

                                // Créez un objet URL pour le blob
                                var blobUrl = URL.createObjectURL(blob);

                                // Créez une fenêtre d'impression avec l'URL du blob
                                var printWindow = window.open(blobUrl);
                                // printWindow.print();
                            })
                        } else {

                            notif('danger', 'Erreur', 'Aucun pdf n\'a été chargé')
                        }
                    } else {

                        notifError(response.msg)
                    }

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

                    notifError(error.responseText);
                    completeHandler()
                }
            })
        })
    </script>
@endsection