@extends('layout.master', [
    'activePage' => $activePage,
    'categoria' => $categoria,
    'menuParent' => $menuParent,
    'titlePage' => $titlePage
])

@push('plugin-styles')
{!! Html::style('plugins/apex/apexcharts.css') !!}
{!! Html::style('assets/css/dashboard/dashboard_1.css') !!}
{!! Html::style('plugins/flatpickr/flatpickr.css') !!}
{!! Html::style('plugins/flatpickr/custom-flatpickr.css') !!}
{!! Html::style('assets/css/elements/tooltip.css') !!}
{!! Html::style('plugins/table/datatable/datatables.css') !!}
{!! Html::style('plugins/year-picker/yearpicker.css') !!}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/select2-bootstrap-theme/0.1.0-beta.10/select2-bootstrap.min.css"></link>

<style>
    .ui-autocomplete-input {
        font-size: 14px;
        padding-top: .8rem !important;
        position: relative;
    }

    .ui-menu .ui-menu-item a {
        font-size: 12px;
    }

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

    .ui-autocomplete {
        position: absolute;
        top: 0;
        left: 0;
        z-index: 1000 !important;
        float: left;
        display: none;
        min-width: 160px;
        width: 160px;
        padding: 4px 0;
        margin: 2px 0 0 0;
        list-style: none;
        background-color: #ffffff;
        border-color: #ccc;
        border-color: rgba(0, 0, 0, 0.2);
        border-style: solid;
        border-width: 1px;
        -webkit-border-radius: 2px;
        -moz-border-radius: 2px;
        border-radius: 2px;
        -webkit-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
        -moz-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
        box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
        -webkit-background-clip: padding-box;
        -moz-background-clip: padding;
        background-clip: padding-box;
        *border-right-width: 2px;
        *border-bottom-width: 2px;
    }

    .ui-autocomplete {
        max-height: 200px;
        overflow-y: auto;
        /* prevent horizontal scrollbar */
        overflow-x: hidden;
        /* add padding to account for vertical scrollbar */
        padding-right: 20px;
    }

    .ui-menu-item>a.ui-corner-all {
        display: block;
        padding: 3px 15px;
        clear: both;
        font-weight: normal;
        line-height: 18px;
        color: #555555;
        white-space: nowrap;
        text-decoration: none;
    }

    .ui-state-hover,
    .ui-state-active {
        color: #ffffff;
        text-decoration: none;
        background-color: #0088cc;
        border-radius: 0px;
        -webkit-border-radius: 0px;
        -moz-border-radius: 0px;
        background-image: none;
    }

    input[type="date"].form-control-sm {
        padding: .25rem .5rem !important;
    }

    .btn-submit:hover {
        background-color: #E8C552 !important;
        color: black !important;
        border-color: #E8C552 !important
    }

    .icon-large {
        font-size: 2em !important;
    }

    .btn-csv {
        background-color: #A0A0A0 !important;
        color: white !important;
        border-color: #A0A0A0 !important
    }
    .btn-excel {
        background-color: #00994C !important;
        color: white !important;
        border-color: #00994C !important
    }

    .results-table{
        margin: 20px !important;
        padding: .2rem !important;
        th {
            color: white !important;
            font-size: 12px !important;
        };
        td {
            text-align: center !important;

        };


        .table_body {
            margin-bottom: 10px !important;
        }
    }

    .nav-item:hover {
        background-color: #E8C552 !important;
    }

    .nav-item .active:hover {
        background-color: #0b305d !important;
        color: white !important;
    }

    .nav-item .active {
        background-color: #0b305d !important;
        color: white !important;
    }

    .nav-link.disabled {
        pointer-events: none;
        color: #6c757d;
        cursor: not-allowed;
    }

    .select2-container .select2-selection--single .select2-selection__rendered  {
        display: contents;
    }

    .select2-container--bootstrap {
        min-width: 15rem !important;
    }

    .input-group-text {
        max-height: 2rem !important;
    }

    .text-bold {
        font-weight: bold !important;
    }

    .icon-xl {
        font-size: 3em !important;
    }

    .select2-container .select2-selection--single .select2-selection__rendered  {
        display: contents;
        font-size: .8rem !important;
    }

    .select2-selection {
        max-height: 1.8rem !important;
    }

    .select2-container--bootstrap {
        min-width: 15rem !important;
        max-height: 2rem !important;
        margin-bottom: .5rem !important;
    }

    .btn-excel {
        background-color: #00994C !important;
        color: white !important;
        border-color: #00994C !important
    }

    .hide-element {
        display: none !important;
    }

    .image-loading {
        margin-left: .2rem !important;
        max-width: 2rem;
        max-height: 2rem;
        width: auto;
        height: auto;
    }
</style>
@endpush

@section('content')
    <input type="hidden" id="idProducto">
    <input type="hidden" id="descripcionProducto">
    <input type="hidden" id="periodo">

    <div class="layout-px-spacing mt-5">
        <div class="container-fluid p-0">

            <div class="row d-flex justify-content-center">
                <div class="col-md-10">
                    <div class="card">
                        <div class="card-body">
                            <form action="#" method="post" id="frm_kardex_almacen">
                                <h5 class="card-title">Kardex por articulo</h5>

                                <div class="row d-flex justify-content-center">
                                    <div class="col-lg-2">
                                        <label class="text-bold">Código del producto: <span class="text-danger">*</span></label>
                                        <input type="text" class="form-control form-control-sm" id="codigo_producto" onkeydown="if (event.key === 'Enter') { searchProducto(); } " oninput="unlockSearchButton()" required>
                                    </div>
                                    <div class="col-lg-6">
                                        <label class="text-bold">Descripción del producto: <span class="text-danger">*</span></label>
                                        <div class="d-flex justify-content-center">
                                            <input type="text" class="form-control form-control-sm bs-popover" id="name_producto" data-container="body" data-trigger="hover" data-content="Teclea la descripción del producto a buscar." required>
                                            <img id="loadingSearchProducto" class="image-loading" src="{{ asset('assets/img/loading.gif')  }}" alt="Loading..." style="display: none">
                                        </div>
                                    </div>
                                    <div class="col-lg-2">
                                        <button id="btnSearchProduct" class="btn btn-primary btn-submit mt-4" type="button" onclick="searchProducto()" title="Buscar producto por el codigo ingresado" disabled>Buscar</button>
                                    </div>
                                </div>

                                <div class="row d-flex justify-content-center">
                                    <div class="col-md-6">
                                        <label class="text-bold">Almacen: <span class="text-danger">*</span></label>
                                        <select id="almacen" name="almacen" class="form-control form-control-sm text-center form-select2" required onchange="unlockProcesarKardex()">
                                            <option value="" disabled selected>Seleccione un almacen...</option>
                                            @foreach ($almacenes as $almacen)
                                                <option value="{{ $almacen->id }}">{{ $almacen->almacen . ' - ' .  $almacen->descripcion }}</option>
                                            @endforeach
                                        </select>
                                    </div>

                                    <div class="col-md-3 d-flex justify-content-center align-items-center mt-3">
                                        <h6 class="text-bold text-center mb-0 mr-2">Periodo:</h6>
                                        <button type="button" class="btn btn-primary-outlined btn-submit d-inline-flex align-items-center yearpicker" title="Selecciona un periodo"></button>
                                    </div>

                                    <div class="col-md-3">
                                        <button id="btnProcesarKardex" style="max-height: 2.5rem !important; " type="button" class="btn btn-primary btn-submit d-inline-flex align-items-center mt-4" title="Procesar kardex" onclick="processKardex()" disabled>
                                            <i class="las la-check-circle icon-large mr-2"></i> Procesar
                                        </button>
                                    </div>
                                </div>
                            </form>
                        </div>
                    </div>
                </div>
            </div>

            <hr>

            <div class="row hide-element" id="divKardex">
                <div class="col-md-12">
                    <h5 class="card-title" id="kardexDescripcion">Kardex del articulo: </h5>
                    <h5 class="card-title" id="existenciaInicialArticulo">Existencia inicial del articulo: </h5>
                    <div class="col-md-12 d-flex justify-content-center">
                        <button id="btnExcel" type="button" class="btn btn-excel btn-submit d-inline-flex align-items-center mt-4" data-url="" data-filename="" title="Descargar archivo Excel" onclick="downloadPdfWithUrl(this)">
                            <i class="las la-file-excel icon-large mr-2"></i> Descargar
                        </button>
                    </div>
                    <table id="tabla_kardex" class="table table-responsive-lg">
                        <thead>
                            <tr>
                                @foreach ($columnas as $campo)
                                    <th style="text-align: center">{{ $campo }}</th>
                                @endforeach
                            </tr>
                        </thead>
                        <tbody id="table_body">
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
@endsection

@push('plugin-scripts')
    {!! Html::script('assets/js/loader.js') !!}
    {!! Html::script('plugins/jquery-ui/jquery-ui.min.js') !!}
    {!! Html::script('plugins/table/datatable/datatables.js') !!}
    {!! Html::script('plugins/year-picker/yearpicker.js') !!}
@endpush

@push('custom-scripts')
    <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
    <script>

        const noContentMessageOptions = {
            icon: 'info',
            title: '¡Sin contenido!',
            text: 'La consulta no obtuvo ningún resultado.',
            confirmButtonText: 'Aceptar',
            customClass: {
                container: 'alert-in-modal'
            },
        }

        const noMovmentsMessageOptions = {
            icon: 'info',
            title: '¡No hay movimientos para el almacen!',
            text: '¡El almacen seleccionado no cuenta con historial!',
            confirmButtonText: 'Aceptar',
            customClass: {
                container: 'alert-in-modal'
            },
        }

        const ajaxErrorMessage = {
            icon: 'error',
            title: '¡Lo sentimos!',
            text: 'Ha ocurrido un error inesperado, intentelo de nuevo más tarde'
        }

        $(document).ready(() => {
            $('#tabla_kardex').dataTable({ scrollX: true, responsive: true, paging: false});

            $(".form-select2").select2({
                theme: "bootstrap",
            });

            $(".yearpicker").yearpicker({
                year: new Date().getFullYear(),
                onChange: function(periodo) {
                    $('#periodo').val(periodo);
                }
            })

            $('#name_producto').autocomplete({
                source: function(request, response) {
                    $.ajax({
                        url: "{{url('reportes/kardex-almacen/buscar-producto-por-descripcion')}}",
                        dataType: 'json',
                        data: {
                            descripcion: request.term
                        },
                        success: function(data) {
                            response(data)
                        }
                    })
                },
                select: function(event, ui) {
                    fillProducto(ui.item);
                },
                selectFirst: true,
                minLength: 3
            });


            $("#name_producto").on("autocompleteresponse", function() {
                $('#loadingSearchProducto').hide();
            });

            $("#name_producto").on("autocompletesearch", function() {
                $('#loadingSearchProducto').show();
            });

        })

        function searchProducto() {
            const codigo = $('#codigo_producto').val();

            if(codigo !== '') {
                $.ajax({
                    url: "{{ url('reportes/kardex-almacen/buscar-producto-por-codigo') }}",
                    data: {
                        codigo: codigo
                    },
                    beforeSend: () => {
                        $("#loadingModal").modal("show")
                        $('#idProducto').val('');
                    },
                    success: (res, _, jqXHR) => {
                        setTimeout(() => {

                            $("#loadingModal").modal("hide")

                            if(jqXHR.status == 204) {
                                return Swal.fire(noContentMessageOptions);
                            }

                            fillProducto(res.producto);

                            unlockProcesarKardex();
                        }, 500);
                    },
                    error: (error) => {
                        setTimeout(() => {
                            $("#loadingModal").modal("hide")
                            Swal.fire(ajaxErrorMessage);
                        }, 500);
                    }
                })
            }
        }

        function unlockSearchButton() {
            $('#idProducto').val('');
            unlockProcesarKardex();
            $('#btnSearchProduct').prop('disabled', $('#codigo_producto').val() === '');
        }

        function fillProducto(producto) {
            $('#name_producto').val(producto.descripcion);
            $('#codigo_producto').val(producto.codigo);
            $('#idProducto').val(producto.id);
            $('#descripcionProducto').val(producto.codigo + ' - ' + producto.descripcion);
        }

        function unlockProcesarKardex() {
            const producto = $('#idProducto').val();
            const form = $('#frm_kardex_almacen')[0];

            if(producto === '') {
                $('#btnProcesarKardex').prop('disabled', true);
            } else {
                $('#btnProcesarKardex').prop('disabled', !form.checkValidity());
            }
        }

        function processKardex() {
            let formData = new FormData($('#frm_kardex_almacen')[0]);
            formData.append('producto', $('#idProducto').val());
            formData.append('periodo', $('#periodo').val());

            $.ajax({
                url: "{{ url('reportes/kardex-almacen/procesar-kardex') }}",
                type: 'POST',
                data: formData,
                processData: false,
                contentType: false,
                beforeSend: () => {
                    $("#loadingModal").modal("show");
                    $("#divKardex").addClass('hide-element');
                },
                success: (res, _, jqXHR) => {
                    setTimeout(() => {
                        $("#loadingModal").modal("hide");
                        $('#tabla_kardex').dataTable().fnDestroy();

                        if(jqXHR.status === 204) {
                            Swal.fire(noMovmentsMessageOptions);
                            return
                        }

                        $("#kardexDescripcion").text('Kardex del producto: ' + res.producto);
                        $("#existenciaInicialArticulo").text('Existencia inicial: ' + res.existenciaInicial);
                        $("#divKardex").removeClass('hide-element');

                        const excelUrl = res.excelUrl;
                        const excelFileName = res.excelFileName;
                        let btnExcel = document.getElementById('btnExcel');

                        btnExcel.setAttribute('data-url', excelUrl);
                        btnExcel.setAttribute('data-filename', excelFileName);

                        fillKardexTable(res.infoKardex, res.columnas);
                    }, 500);
                },
                error: (error) => {
                    setTimeout(() => {
                        $("#loadingModal").modal("hide")
                        Swal.fire(ajaxErrorMessage)
                    }, 500);
                }
            })
        }

        function fillKardexTable(infoKardex, columnas) {
            const columnKeys = Object.keys(columnas);
            const columns = columnKeys.map(function (key) {
                return columnas.length == key + 1 ? {
                    data: columnas[key],
                    render: $.fn.dataTable.render.text()
                } : {
                    data: columnas[key],
                }
            });

            $('#tabla_kardex').dataTable({
                responsive: true,
                paging: false,
                processing: true,
                autoWidth: true,
                scrollY: '400px',
                scrollX: true,
                data: infoKardex,
                columns: columns,
                order: [],
                drawCallback: function(settings) {
                    const api = this.api();
                    const lastRowIndex = api.rows().count() - 1;
                    $(api.row(lastRowIndex).node()).css('background-color', '#ffcccc');
                    $(api.row(0).node()).css('background-color', '#E8C552');
                }
            });

            $('#tabla_kardex').DataTable().columns.adjust();
        }


        function downloadPdfWithUrl(button) {
            const excelUrl = button.getAttribute('data-url');
            const excelFileName = button.getAttribute('data-filename');

            let link = document.createElement('a');
            link.href = excelUrl;
            link.download = excelFileName;

            // Descarga EXCEL
            link.click();
            link.remove();
        }
    </script>
@endpush