@extends('models')
@section('substock', 'open active')
@section('stock', 'active')
@section('titre-page', 'Blocage de lot')
{{-- @section('TrfInterSite', '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">Blocage par lot</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-3 col-sm-3 col-md-3 d-flex justify-content-center">

                            <button class=" btn btn-wave waves-effect waves-light btn-info-light w-100" id="btnNew">
                                <i class='bx bx-plus-circle me-2'></i> Nouveau
                            </button>

                        </div>


                    </div>
                </div>

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

    <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">
                                    <p class="mb-0 text-muted">Zone de stockage</p>
                                    <select class="form-select" name="IDZONESTOCKAGE" id="IDZONESTOCKAGE">

                                    </select>
                                </div>
                                <div class="col-xl-1 mb-2 mt-3">
                                    <button class="btn btn-primary" id="btnSearch" data-bs-toggle="tooltip"
                                        data-bs-custom-class="tooltip-primary" data-bs-placement="right" title="Filtrer">
                                        <i class='bx bx-search-alt'></i>
                                    </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="tableListeLotBloque">
                            <thead class="table-header-primary">
                                <tr>
                                    <th class="text-center" data-column="DateHeureBloquee" data-class="text-center">Date et
                                        heure</th>
                                    <th class="text-center" data-column="NomAgence" data-class="text-center">Site</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="NomZoneStockage" data-class="text-center">Zone</th>
                                    <th class="text-center" data-column="QuantiteBloquee" data-class="text-center">Qté
                                        Bloqué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="BloquePar" data-class="text-start">Bloqué par
                                    </th>
                                    <th class="text-center" data-column="CommentaireBlocage" data-class="text-start">
                                        Commentaires</th>

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


    <div class="modal fade" id="modalAdd">
        <div class="modal-dialog modal-lg" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h6 class="modal-title">Fiche lot bloqué</h6>
                    <button aria-label="Close" class="btn-close bg-white" data-bs-dismiss="modal"></button>
                </div>
                <form id="formAdd">
                    @csrf
                    <div class="modal-body">
                        <div class="row">

                            <div class="col-xl-8 mb-2">
                                <p class="mb-0 text-muted">Produit</p>
                                <select class="form-select" name="produit_add" id="produit_add">

                                </select>
                            </div>

                            <div class="col-xl-2 mb-2">
                                <p class="mb-0 text-muted">Stock</p>
                                <input type="text" class="form-control" name="stock_agence" id="stock_agence"
                                    value="0" readonly>
                            </div>
                            <div class="col-xl-2 mb-2">
                                <p class="mb-0 text-muted">Stock bloqué</p>
                                <input type="text" class="form-control" name="stock_bloque" id="stock_bloque"
                                    value="0" readonly>
                            </div>
                            <div class="col-xl-4 mb-2">
                                <p class="mb-0 text-muted">Zone de stockage</p>
                                <select class="form-select" name="IDZONESTOCKAGE_add" id="IDZONESTOCKAGE_add">

                                </select>
                            </div>
                            <div class="col-xl-8 mb-2">
                                <p class="mb-0 text-muted">Lot</p>
                                <input type="text" class="form-select" id="IDLOT" name="numlot">
                                <input type="hidden" name="idNumLot" id="idNumLot">
                                <input type="hidden" name="idstockagence" id="idstockagence">
                                <input type="hidden" name="idstockagence_lot" id="idstockagence_lot">
                                <input type="hidden" name="IDTracabiliteStock" id="IDTracabiliteStock">
                                <input type="hidden" name="NumeroLotProduit" id="NumeroLotProduit">
                            </div>
                            <div class="col-xl-3 mb-2">
                                <p class="mb-0 text-muted">Stock zone</p>
                                <input type="text" class="form-control" name="stock_zone" id="stock_zone"
                                    value="0" readonly>
                            </div>
                            <div class="col-xl-3 mb-2">
                                <p class="mb-0 text-muted">Stock de la zone bloqué</p>
                                <input type="text" class="form-control" name="stock_zone_bloque"
                                    id="stock_zone_bloque" value="0" readonly>
                            </div>
                            <div class="col-xl-3 mb-2">
                                <p class="mb-0 text-muted">Date péremption</p>
                                <input type="date" class="form-control text-center" id="DatePeremption"
                                    name="DatePeremption" readonly>
                            </div>
                            <div class="col-xl-3 mb-2">
                                <p class="mb-0 text-muted">Qté bloquée</p>
                                <input type="text" class="form-control" id="qte_bloque" name="qte_bloque"
                                    value="0">
                            </div>
                            <div class="col-xl-12">
                                <p class="mb-0 text-muted">Commentaire</p>
                                <textarea class="form-control" name="commentaire" id="commentaire" cols="30" rows="3"></textarea>
                            </div>
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="submit" class="btn btn-success">Enregistrer</button>
                    </div>
                </form>
            </div>
        </div>
    </div>

@endsection

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

            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>')
                        $('#produit_add').html('')
                        $('#produit_add').append('<option value="0"></option>')

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

            function getDataMvt() {
                $.ajax({
                    type: "get",
                    url: "{{ route('stock.blocageParLot.listing') }}",
                    data: {
                        IDAGENCE: $("#IDAGENCE").val(),
                        periode: $("#periode").val(),
                        produit: $("#produit").val(),
                        IDZONESTOCKAGE: $("#IDZONESTOCKAGE").val()
                    },
                    dataType: "json",
                    beforeSend: progressHandler(),
                    success: function(response) {
                        // console.log(response)
                        if (response.error == false) {
                            remplissageDataTable({
                                IdentifiantDuTableau: '#tableListeLotBloque',
                                obj: response.data
                            })

                            let divShowPer = $('#tableListeLotBloque_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-blocage-par-lot" 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)
                            completeHandler()
                            return 0
                        }
                        completeHandler()
                    },
                    error: function(response) {
                        completeHandler()
                        // console.log(response)
                    }
                });
            }

            function chargerLot(site, idproduit, idzoneexpedition) {
                $.ajax({
                    url: "{{ route('stocks.getOnChangeProduit') }}",
                    type: 'POST',
                    data: {
                        site: site,
                        data: idproduit,
                        IDZONESTOCKAGE: idzoneexpedition,
                        _token: "{{ csrf_token() }}"
                    },
                    dataType: 'json',
                    success: function(responses) {
                        // console.log(responses)

                        listeLot = responses

                        // notif("warning", "Attention", response.messages)
                    },
                    error: function(response) {
                        // // console.log(response)
                        notifError(response.messages)
                    }
                })
            }

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

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

            $("#IDAGENCE").on("change", function() {
                let data = $(this).val()
                listeZone(data, '#IDZONESTOCKAGE')
            })

            function listeZone(idAgence, idSelect) {
                $.ajax({
                    url: `{{ route('tiz.ZoneStockage', '') }}/${idAgence}`,
                    type: 'GET',
                    dataType: 'json',
                    success: function(response) {
                        // console.log(response)

                        $(idSelect).html("")
                        $(idSelect).append(`<option value="0">TOUTES</option>`)
                        $.each(response, function(key, value) {
                            $(idSelect).append(
                                `<option value="${value["IDZONESTOCKAGE"]}">${value["NomZoneStockage"]}</option>`
                            )
                        })
                    },
                    error: function(response) {
                        // // console.log(response)
                        notifError(response.messages)
                    }
                })
            }

            $("#btnNew").click(function(e) {
                listeZone($("#idSiteEnCours").val(), '#IDZONESTOCKAGE_add')
                $("#modalAdd").modal("show")
            });

            $(document).on("change", "#produit_add", function(e) {
                e.preventDefault();
                let idprod = $(this).val()

                if (idprod == "0" || idprod == "") {
                    return false
                }

                $.ajax({
                    type: "post",
                    url: "{{ route('stocks.mouvementStock.onlysDetailProduit') }}",
                    data: {
                        IDAGENCE: $("#idSiteEnCours").val(),
                        PRODUIT: idprod,
                        _token: "{{ csrf_token() }}"
                    },
                    dataType: "json",
                    success: function(response) {
                        // console.log(response.data)
                        // if (response.data.length > 0) {
                        _("stock_agence").value = response.data.StockTotal_Lot
                        _("idstockagence").value = response.data.IDSTOCKAGENCE
                        _("stock_bloque").value = response.data.StockIndisponible
                        // }
                    },
                    error: function(response) {
                        // console.log(response)
                        notifError(response.responseJSON.messages)
                    }
                });
                if (parseInt($('#IDZONESTOCKAGE_add').val()) != 0) {
                    chargerLot($("#idSiteEnCours").val(), idprod, $('#IDZONESTOCKAGE_add').val())
                }
            }).on("change", "#IDZONESTOCKAGE_add", function(e) {
                e.preventDefault();
                chargerLot($("#idSiteEnCours").val(), $('#produit_add').val(), $(this).val())
            }).on("submit", "#formAdd", function(e) {
                e.preventDefault();

                if (parseInt($("#produit_add").val()) <= 0) {
                    alertSwal("Veuillez renseigner le produit à bloquer !")
                    return false
                }
                if (parseInt($("#IDZONESTOCKAGE_add").val()) <= 0) {
                    alertSwal("Veuillez renseigner la zone de stockage concernée !")
                    return false
                }
                if (parseInt($("#qte_bloque").val()) == 0) {
                    alertSwal("Veuillez renseigner la quantité à bloquer !")
                    return false
                }
                let qte_bloque = parseInt($("#qte_bloque").val())
                let stock_zone_bloque = parseInt($("#stock_zone_bloque").val())
                let stock_zone = parseInt($("#stock_zone").val())

                if (qte_bloque < 0) {
                    if (Math.abs(qte_bloque) > stock_zone_bloque) {
                        alertSwal("La quantité à débloquer est supérieure à la quantité bloquée !")
                        return false
                    }
                } else {
                    if (qte_bloque > (stock_zone - stock_zone_bloque)) {
                        alertSwal("La quantité à bloquer est supérieure à la quantité non bloquée !")
                        return false
                    }
                }


                let formData = new FormData(_("formAdd"))
                formData.append("IDAGENCE", $("#idSiteEnCours").val())
                $.ajax({
                    type: "POST",
                    url: "{{ route('stock.blocageParLot.create') }}",
                    data: formData,
                    dataType: "json",
                    processData: false,
                    contentType: false,
                    beforeSend: progressHandler(),
                    success: function(response) {
                        // console.log(response)
                        if (response.error == false) {
                            modalHide("#modalAdd")
                            completeHandler()
                            getDataMvt()
                            notifSuccess(response.messages)
                            return false
                        }

                        completeHandler()
                        notifWarning(response.messages)
                    },
                    error: function(response) {
                        // console.log(response)
                        completeHandler()
                        notifError(response.responseJSON.messages)
                    }
                });
            });

            $("#IDLOT").on('focus', function() {
                $(this).autocomplete("search", "");
            });

            $("#modalAdd").on('hidden.bs.modal', function() {
                $("#formAdd")[0].reset()
                $("#produit_add").val(0).trigger("change")
                listeLot = []
            });

            $("#IDLOT").autocomplete({
                delay: 500,
                minLength: 0,
                autoFocus: true,
                source: function(request, response) {

                    if (listeLot.length <= 0) {
                        response($.map(listeLot, function(item, key) {
                            item.label = "Aucun lot trouvé"
                            item.taille = 0
                            item.NumeroLotProduit = 0
                            item.DatePeremption = 0
                            item.StockTotal_Lot = 0
                            item.id = 0
                            return item
                        }))
                        return 0
                    }

                    response($.map(listeLot, function(item, key) {
                        item.label = item.NumeroLotProduit + " | " + explodeDate(item
                            .DatePeremption) + " | " + item.StockTotal_Lot
                        item.taille = key + 1
                        return item
                    }))
                },
                focus: function(event, ui) {
                    // Optionnel: ajouter des comportements sur le focus de l'élément
                },
                select: function(event, ui) {

                    if (ui.item.taille > 0) {
                        _('idNumLot').value = parseInt(ui.item.id)
                        _('stock_zone').value = ui.item.StockTotal_Lot
                        _('DatePeremption').value = ui.item.DatePeremption
                        _('idstockagence_lot').value = ui.item.IDSTOCKAGENCE_LOTS
                        _('IDTracabiliteStock').value = ui.item.IDTracabiliteStock
                        _('NumeroLotProduit').value = ui.item.NumeroLotProduit
                        _('stock_zone_bloque').value = ui.item.StockLotIndisponible ?? 0

                        $("#qte_bloque").focus()
                        $("#qte_bloque").select()

                    }

                    // idstockagence_lot
                }
            }).data("ui-autocomplete")._renderMenu = function(ul, items) {
                console.log(items)
                if (items[0].taille == 0) {
                    var li = $(
                        "<li style='padding-top: 2px; font-size : 12pt;background : white; text-align : center'> Aucun lot trouvé </li>"
                    )

                    // li.append($div)
                    return li.appendTo(ul)
                } else {

                    var $table = $(`<table class='autocomplete-table'></table>`);
                    var $header = $(`<thead>
                                        <tr>
                                            <th>N° Lot</th>
                                            <th>Date péremption</th>
                                            <th>Stock</th>
                                        </tr>
                                    </thead>`);

                    var $tbody = $("<tbody></tbody>");

                    $table.append($header);
                    $table.append($tbody);
                    ul.append($table);

                    $.each(items, function(index, item) {
                        var $tr = $(
                            "<tr class='ui-menu-item' role='presentation'></tr>"
                        );
                        $tr.data("ui-autocomplete-item", item);
                        $tr.append(
                            "<td class='ui-menu-item-wrapper' style='text-align:center'>" +
                            item.NumeroLotProduit + "</td>");
                        $tr.append(
                            "<td class='ui-menu-item-wrapper' style='text-align:center'>" +
                            item.DatePeremption + "</td>");
                        $tr.append(
                            "<td class='ui-menu-item-wrapper' style='text-align:center'>" +
                            item.StockTotal_Lot + "</td>");

                        $tbody.append($tr);
                    });
                }
            };

            $(document).on('click', '#btn-export-blocage-par-lot', function() {
                var data = getCleanedTableData('tableListeLotBloque')
                const filename = file_name("BLOCAGE_PAR_LOT");
                download_excel_file('{{ route('export_global_excel.export') }}', data, filename)
            })
        })
    </script>
@endsection