@extends('adminlte::page')

@section('plugins.Sweetalert2', true)
@section('plugins.Datatables', true)
@section('plugins.MomentJs', true)
@section('plugins.Select1', true)

@section('title', 'Intranet | Establecer Stock Crítico')

@section('content_header')
    <div class="container-fluid">
        <div class="row mb-2">
            <div class="col-sm-12">
                <h1 class="m-0">{{ $bodega->bodega }}</h1>
            </div>
        </div>
    </div>
@stop

@section('content')
    <div class="container-fluid">
        <div class="row justify-content-center">

            <div class="col-lg-6">
                <div class="card card-aspen">
                    <div class="card-header">
                        <h3 class="card-title">Establecer Stock Crítico</h3>
                    </div>

                    <form id="formularioDeStockCritico">
                        @csrf
                        <div class="card-body">

                            <div class="form-group">
                                <label>Código Artículo</label>
                                <div class="input-group mb-3">
                                    <input type="text" id="campoCodigoArticulo" class="form-control" name="codigo_articulo" value="{{ old('codigo_articulo') }}" readonly="true">
                                    <div class="input-group-append">
                                        <button type="button" class="btn btn-aspen" onclick="abrirModalSeleccionarArticulo()">Seleccionar</button>
                                    </div>
                                    <div class="invalid-feedback" id="valicacionCampoCodigoArticulo">

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

                            <div class="form-group">
                                <label>Nombre Artículo</label>
                                <div class="input-group mb-3">
                                    <input type="text" id="campoNombreArticulo" class="form-control" name="nombre_articulo" value="{{ old('nombre_articulo') }}" readonly="true">
                                    <div class="input-group-append">
                                        <button type="button" class="btn btn-aspen" onclick="abrirModalSeleccionarArticulo()">Seleccionar</button>
                                    </div>
                                    <div class="invalid-feedback" id="valicacionCampoNombreArticulo">

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

                            <div class="form-group">
                                <label>Cuenta De Gasto</label>
                                <div class="input-group mb-3">
                                    <input type="text" id="campoCuentaGasto" class="form-control" name="cuenta_gasto" value="{{ old('cuenta_gasto') }}" readonly="true">
                                    <div class="input-group-append">
                                        <button type="button" class="btn btn-aspen" onclick="abrirModalSeleccionarArticulo()">Seleccionar</button>
                                    </div>
                                    <div class="invalid-feedback" id="valicacionCampoCuentaGasto">

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

                            <div class="form-group">
                                <label>Stock Crítico</label>
                                <input type="text" id="campoStockCritico" class="form-control" name="stock_critico" value="{{ old('stock_critico') }}">
                                <div class="invalid-feedback" id="valicacionCampoStockCritico">

                                </div>
                            </div>

                            <input type="hidden" name="id_articulo" id="idArticulo">

                        </div>

                        <div class=" card-footer">
                            <button type="button" class="btn btn-aspen" id="botonDeStockCritico" onclick="establecerStockCritico()"><i class="fas fa-plus-circle" style="margin-right: 2px;"></i> Establecer Stock Crítico </button>
                            <a href="{{ route('bodega.inventario-articulo', $bodega) }}" role="button" class="btn btn-secondary"><i class="fas fa-arrow-alt-circle-left" style="margin-right: 2px;"></i> Volver</a>
                        </div>
                    </form>
                </div>
            </div>

        </div>
    </div>

    <div class="modal fade" id="modalSelecionarArticulo" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
        <form>
            <div class="modal-dialog modal-lg">
                <div class="modal-content">
                    <div class="modal-header" style="background-color: #B08C1C; color:white;">
                        <h5 class="modal-title">Artículos</h5>
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close" style="color:white;">
                            <span aria-hidden="true">&times;</span>
                        </button>
                    </div>
                    <div class="modal-body">
                        <div class="table-responsive">
                            <table class="table" id="datatable-articulos" style="width: 100%;">
                                <thead>
                                    <tr>
                                        <th>id</th>
                                        <th>Código Artículo</th>
                                        <th>Nombre Artículo</th>
                                        <th>Tipo</th>
                                        <th>Marca</th>
                                        <th>Modelo</th>
                                        <th>Talla</th>
                                        <th>Clasificación Artículo</th>
                                        <th>Cuenta De Gasto</th>
                                        <th>Unidad De Medición</th>
                                        <th>id clasificacion</th>
                                        <th>id cuenta gasto</th>
                                        <th>id unidad</th>
                                        <th>Stock Critico</th>
                                    </tr>
                                </thead>
                                <tbody>

                                </tbody>
                            </table>
                        </div>

                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-secondary" data-dismiss="modal">Cerrar</button>
                        <button type="button" class="btn btn-aspen" id="botonSeleccionarArticulo" onclick="seleccionarArticulo()">Seleccionar Artículo</button>
                    </div>
                </div>
            </div>
        </form>
    </div>
@stop

@section('footer')
    <div class="float-right d-none d-sm-inline">
        Intranet
    </div>
    <strong>Copyright © 2023 <a href="https://aspenspa.cl/">aspenspa.cl</a></strong>
@stop

@section('css')
    <link rel="stylesheet" href="{{ asset('css/estilo-generico.css') }}">
    <style>
        .hide_column {
            display: none;
        }

        .kv-file-upload {
            display: none;
        }

        .contenedorParaVisualizarImagenDelArchivo {
            background-color: rgba(0, 0, 0, .8);
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            z-index: 10000;
            display: grid;
            grid-template-rows: 10vh 90vh;
            color: white;

        }

        .contenedorVolver {
            padding-left: 10px;
            padding-right: 10px;
            display: grid;
            grid-template-columns: 90% 10%;
        }

        .contenedorDeImagenes {
            display: grid;
            grid-template-columns: 100%;
        }

        .tamanoImagen {
            max-width: 80%;
        }

        .tamanoIframe {
            width: 80%;
            height: 700px;
        }

        .tamanoIframeTxt {
            width: 80%;
            height: 700px;
            background-color: white;
        }
    </style>
@stop

@section('js')
    <script src="{{ asset('js/funcionalidades-genericas.js') }}"></script>

    <script>
        var datatableArticulos = $("#datatable-articulos").DataTable({
            columnDefs: [{
                "targets": [0],
                "visible": true,
                "searchable": false,
                "className": "hide_column"
            }, {
                "targets": [10],
                "visible": true,
                "searchable": false,
                "className": "hide_column"
            }, {
                "targets": [11],
                "visible": true,
                "searchable": false,
                "className": "hide_column"
            }, {
                "targets": [12],
                "visible": true,
                "searchable": false,
                "className": "hide_column"
            }, {
                "targets": [13],
                "visible": true,
                "searchable": false,
                "className": "hide_column"
            },],
            processing: true,
            serverSide: true,
            ajax: {
                url: '{{ route('articulo.obtener-registros-datatable-sin-servicios-stock-critico',$bodega) }}',
                dataType: "json",
                type: "POST",
                data: {
                    _token: "{{ csrf_token() }} "
                },
            },
            columns: [{
                "data": "id",
                "name": "id"
            }, {
                "data": "codigo",
                "name": "codigo"
            }, {
                "data": "nombre",
                "name": "nombre"
            }, {
                "data": "tipo",
                "name": "tipo"
            }, {
                "data": "marca",
                "name": "marca"
            }, {
                "data": "modelo",
                "name": "modelo"
            }, {
                "data": "talla",
                "name": "talla"
            }, {
                "data": "clasificacion",
                "name": "clasificacion"
            }, {
                "data": "cuenta_gasto",
                "name": "cuenta_gasto"
            }, {
                "data": "unidad",
                "name": "unidad"
            }, {
                "data": "id_clasificacion",
                "name": "id_clasificacion"
            }, {
                "data": "id_cuenta_gasto",
                "name": "id_cuenta_gasto"
            }, {
                "data": "id_unidad",
                "name": "id_unidad"
            }, {
                "data": "stock_critico",
                "name": "stock_critico"
            }],
            select: {
                style: 'single'
            },
            orderCellsTop: true,
            //fixedHeader: true,
            lengthMenu: [
                [5, 10, 25, 50, 100, -1],
                [5, 10, 25, 50, 100, "Todos"],
            ],
            language: {
                processing: "Cargando Registros...",
                search: "Buscar",
                lengthMenu: "Mostrar_MENU_ Registros",
                info: "Mostrar desde _START_ hasta _END_ de _TOTAL_ registros",
                infoEmpty: "Opcion no disponible",
                infoFiltered: "",
                infoPostFix: "",
                loadingRecords: "Cargandos registros.",
                zeroRecords: "No hay datos disponibles en la tabla",
                emptyTable: "No hay datos disponibles en la tabla",
                paginate: {
                    first: "Primero",
                    previous: "Anterior",
                    next: "Siguiente",
                    last: "Ultimo",
                },
            },
            dom: "<'row'<'col-sm-4'l><'col-sm-4 d-flex justify-content-center' ><'col-sm-4'f>>" + "<'row'<'col-sm-12'tr>>" + "<'row'<'col-sm-6'i><'col-sm-6'p>>"
        });

        $("#datatable-articulos thead tr").clone(true).appendTo("#datatable-articulos thead");

        $("#datatable-articulos thead tr:eq(1) th").each(function(i) {
            var title = $(this).text(); //es el nombre de la columna
            if (title != "Acción" && title != "Selección") {
                $(this).html(
                    '<input class="form-control" type="text" placeholder="Buscar ' + title + '" />'
                );
                $(this).removeClass("sorting");
                $(this).removeClass("sorting_asc");
                $(this).unbind();
                $(this).parent().attr('id', 'searchColumns');

                $("input", this).on("keyup change", function() {
                    if (datatableArticulos.column(i).search() !== this.value) {
                        datatableArticulos.column(i).search(this.value).draw();
                    }
                });
            } else {
                $(this).html("<div></div>");
                $(this).removeClass("sorting");
                $(this).removeClass("sorting_asc");
            }
        });
    </script>

    <script>
        function abrirModalSeleccionarArticulo() {
            datatableArticulos.ajax.reload();
            datatableArticulos.rows().deselect();
            $("#modalSelecionarArticulo").modal("show");
        }

        function seleccionarArticulo() {
            if (datatableArticulos.$('tr.selected').hasClass('selected')) {
                var articulo = datatableArticulos.rows({
                    selected: true
                }).data();

                document.getElementById("campoCodigoArticulo").value=articulo[0].codigo;
                document.getElementById("campoNombreArticulo").value=articulo[0].nombre;
                document.getElementById("campoCuentaGasto").value=articulo[0].cuenta_gasto;
                document.getElementById("idArticulo").value=articulo[0].id;
                console.log(articulo[0])
                if(articulo[0].stock_critico>0){
                    document.getElementById("campoStockCritico").value=articulo[0].stock_critico;
                }else{
                    document.getElementById("campoStockCritico").value="";
                }
                $("#modalSelecionarArticulo").modal("hide");
            }
        }
    </script>

    <script>
        function validarCampos(data) {
            if (typeof data.responseJSON.errors.codigo_articulo !== 'undefined') {
                document.getElementById("campoCodigoArticulo").setAttribute("class", "form-control is-invalid");
                document.getElementById("valicacionCampoCodigoArticulo").innerHTML = data.responseJSON.errors.codigo_articulo;
            } else {
                document.getElementById("campoCodigoArticulo").setAttribute("class", "form-control is-valid");
                document.getElementById("valicacionCampoCodigoArticulo").innerHTML = "";
            }

            if (typeof data.responseJSON.errors.nombre_articulo !== 'undefined') {
                document.getElementById("campoNombreArticulo").setAttribute("class", "form-control is-invalid");
                document.getElementById("valicacionCampoNombreArticulo").innerHTML = data.responseJSON.errors.nombre_articulo;
            } else {
                document.getElementById("campoNombreArticulo").setAttribute("class", "form-control is-valid");
                document.getElementById("valicacionCampoNombreArticulo").innerHTML = "";
            }

            if (typeof data.responseJSON.errors.cuenta_gasto !== 'undefined') {
                document.getElementById("campoCuentaGasto").setAttribute("class", "form-control is-invalid");
                document.getElementById("valicacionCampoCuentaGasto").innerHTML = data.responseJSON.errors.cuenta_gasto;
            } else {
                document.getElementById("campoCuentaGasto").setAttribute("class", "form-control is-valid");
                document.getElementById("valicacionCampoCuentaGasto").innerHTML = "";
            }

            if (typeof data.responseJSON.errors.stock_critico !== 'undefined') {
                document.getElementById("campoStockCritico").setAttribute("class", "form-control is-invalid");
                document.getElementById("valicacionCampoStockCritico").innerHTML = data.responseJSON.errors.stock_critico;
            } else {
                document.getElementById("campoStockCritico").setAttribute("class", "form-control is-valid");
                document.getElementById("valicacionCampoStockCritico").innerHTML = "";
            }
        }

        function limpiarCampos() {
            document.getElementById("valicacionCampoCodigoArticulo").innerHTML = "";
            document.getElementById("campoCodigoArticulo").setAttribute("class", "form-control");
            document.getElementById("campoCodigoArticulo").value="";
            document.getElementById("idArticulo").value="";

            document.getElementById("valicacionCampoNombreArticulo").innerHTML = "";
            document.getElementById("campoNombreArticulo").setAttribute("class", "form-control");
            document.getElementById("campoNombreArticulo").value="";

            document.getElementById("valicacionCampoCuentaGasto").innerHTML = "";
            document.getElementById("campoCuentaGasto").setAttribute("class", "form-control");
            document.getElementById("campoCuentaGasto").value="";

            document.getElementById("valicacionCampoStockCritico").innerHTML = "";
            document.getElementById("campoStockCritico").setAttribute("class", "form-control");
            document.getElementById("campoStockCritico").value="";
        }

        function establecerStockCritico() {
            document.getElementById("botonDeStockCritico").setAttribute("disabled", true);
            var datosFormulario = $("#formularioDeStockCritico").serialize();
            generarLoading('{{ asset('img/logo.png') }}')

            $.ajax({
                type: 'POST',
                datatype: 'json',
                url: '{{ route('bodega.store-stock-critico', $bodega) }}',
                data: datosFormulario,
                success: function(data) {
                    limpiarCampos();

                    Swal.fire({
                        icon: 'success',
                        title: '¡Stock Crítico Establecido!',
                        text: 'Se estableció el stock crítico del artículo ' + data.descripcion,
                        confirmButtonColor: "#448aff",
                        confirmButtonText: "Confirmar"
                    })

                    document.getElementById("botonDeStockCritico").removeAttribute("disabled");
                    eliminarLoading()
                },
                error: function(data) {
                    console.log(data)
                    validarCampos(data);
                    document.getElementById("botonDeStockCritico").removeAttribute("disabled");
                    eliminarLoading()
                }
            })
        }
    </script>
@stop