@extends('metronic.base')
@section('extracss')
    <link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css" rel="stylesheet" />
@endsection

@section('extrajs')
    <script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js"></script>

    <script>
        $(document).ready(function() {
            $('select[name="producto"').select2();
            document.querySelector('select[name="producto"').parentElement.querySelector('span.select2-container')
                .style.width = "100%"
        });
    </script>

    <script>
        $(document).ready(function() {
            $('select[name="proveedor"').select2();
            document.querySelector('select[name="proveedor"').parentElement.querySelector('span.select2-container')
                .style.width = "100%"
        });
    </script>
    <script>
        $(document).ready(function() {

            $("#bodega").change(function() {
                locaciones();
            });

            $("#proveedor").change(function() {
                productos();
            });
        });

        function locaciones() {
            bodega = $('#bodega').val(); // Cogemos del formulario el valor nom

            // Función que envía y recibe respuesta con AJAX
            $.ajax({
                type: 'GET', // Envío con método POST
                url: '{{ route('inventario.getLocaciones') }}?id=' + bodega,
                //  data: { id: bodega } // Datos que se envían
            }).done(function(msg) { // Función que se ejecuta si todo ha ido bien
                $("#locacion").children("option").remove();

                $('#locacion').append(`<option disabled selected value="">Seleccione...</option>`);

                msg.forEach(function(data) {
                    console.log(data);
                    optText = data.ubicacion;
                    optValue = data.id;
                    optBarcode = data.barcode;
                    $('#locacion').append(
                        `<option value="${optValue}">${optText} / ${optBarcode}</option>`);

                });
                /**/
            }).fail(function(jqXHR, textStatus, errorThrown) { // Función que se ejecuta si algo ha ido mal
                // Mostramos en consola el mensaje con el error que se ha producido
                $("#consola").html("The following error occured: " + textStatus + " " + errorThrown);
            });
        }


        function productos() {
            proveedor = $('#proveedor').val(); // Cogemos del formulario el valor nom

            // Función que envía y recibe respuesta con AJAX
            $.ajax({
                type: 'GET', // Envío con método POST
                url: '{{ route('inventario.getProductosProveedor') }}?id=' + proveedor,
                //  data: { id: bodega } // Datos que se envían
            }).done(function(msg) { // Función que se ejecuta si todo ha ido bien
                $("#producto").children("option").remove();

                $('#producto').append(`<option disabled selected value="">Seleccione...</option>`);
                console.log(msg);
                msg.forEach(function(data) {

                    optText = data.codigo + " " + data.producto + " / " + data.proveedor.codProveedor +
                        " " + data.proveedor.nombreProveedor;
                    optValue = data.id;
                    $('#producto').append(`<option value="${optValue}">${optText}</option>`);

                });
                /**/
            }).fail(function(jqXHR, textStatus, errorThrown) { // Función que se ejecuta si algo ha ido mal
                // Mostramos en consola el mensaje con el error que se ha producido
                $("#consola").html("The following error occured: " + textStatus + " " + errorThrown);
            });
        }
    </script>
    <script>
        $(document).ready(function() {
            //SCRIPT DE MODAL ATRIBUTOS
            $('#modalAjusteInventario').on('show.bs.modal', function(event) {
                var button = $(event.relatedTarget) // Button that triggered the modal
                var recipient = button.data('id') // Extract info from data-* attributes
                var name = button.data('name')
                var modal = $(this)
                var cantidad = button.data('cantidad')
                $('.cantidad b').text(cantidad);
                $('.barcode b').text(name);
                $('#barcode').val(name)
                $('#idContenedor').val(recipient)
            });
        });
    </script>
@endsection

@section('titulo')
    Inventario
@endsection

@section('content')
    @include('sessions')
    <div class="alert alert-dismissible bg-light-primary border border-primary d-flex flex-column flex-sm-row p-5 mb-3">
        <!--begin::Icon-->
        <i class="ki-duotone ki-notification-bing fs-2hx text-primary me-4 mb-5 mb-sm-0"><span class="path1"></span><span
                class="path2"></span><span class="path3"></span></i>
        <!--end::Icon-->

        <!--begin::Wrapper-->
        <div class="d-flex flex-column pe-0 pe-sm-10">
            <!--begin::Title-->
            <h4 class="fw-semibold">Importante</h4>
            <!--end::Title-->

            <!--begin::Content-->
            <span>La consulta de inventario nos informara del estado actual del contenedor o de varios contenedores
                ubicaciones en las
                diferentes
                bodegas, las consultas se pueden hacer por fecha, bodega, ubicaciones de las diferentes bodegas, proveedor o
                productos. Además
                podra hacerlo directo con el barcode.
                <br>
                Si desea agregar realizar un ajuste de inventario, realice una consulta de inventario y en el movimiento a
                ajustar
                de clic en el botón <button class="btn btn-xs btn-info" style="font-size: 5px"><span
                        title="Realizar ajuste de inventario"><i class="fas fa-sliders-h"></i></span></button></td> ubicado
                en la
                tabla de resultados para realizar el ajuste según sea el caso.</span>
            <!--end::Content-->
        </div>
    </div>
    <div class="card shadow-sm mb-5">
        <div class="card-body">
            <form action="{{ route('ajusteDeInventario') }}" method="get">
                <div class="row">
                    <div class="col-md-4 mt-2">
                        <label for="">Fecha </label>
                        <input type="date" value="{{ $fecha }}" class="form-control" name="fecha">
                    </div>
                    <div class="col-md-4 mt-2">
                        <label for="">Bodega</label>
                        <select id="bodega" class="form-select" name="bodega">
                            <option selected disabled value="">Seleccione...</option>
                            @foreach ($bodegas as $bodega)
                                <option @if ($bodegaId == $bodega->id) selected @endif value="{{ $bodega->id }} ">
                                    {{ $bodega->bodega }} </option>
                            @endforeach
                        </select>
                    </div>
                    <div class="col-md-4 mt-2">
                        <label for="">Ubicaciones</label>
                        <select id="locacion" class="form-select" name="locacion">
                            <option selected disabled value="">Seleccione...</option>
                            @foreach ($locaciones as $u)
                                <option @if ($locacionId == $u->id) selected @endif value="{{ $u->id }}">
                                    {{ $u->ubicacion }}</option>
                            @endforeach
                        </select>
                    </div>
                    <input type="hidden" value="query" name="query">
                    <div class="col-md-4 mt-2">
                        <label for="">Proveedores</label>
                        <select id="proveedor" class="form-select" name="proveedor">
                            <option selected disabled value="">Seleccione...</option>
                            @foreach ($proveedores as $proveedor)
                                <option @if ($proveedorId == $proveedor->id) selected @endif value="{{ $proveedor->id }} ">
                                    {{ $proveedor->nombreProveedor }} </option>
                            @endforeach
                        </select>
                    </div>
                    <div class="col-md-4 mt-2">
                        <label for="">Productos</label>
                        <select id="producto" class="form-select" name="producto">
                            <option selected disabled value="">Seleccione...</option>
                            @foreach ($productosProveedores as $pro)
                                <option @if ($productoId == $pro->id) selected @endif value="{{ $pro->id }} ">
                                    {{ $pro->codigo }} {{ $pro->producto }} / {{ $pro->proveedor->codProveedor }}
                                    {{ $pro->proveedor->nombreProveedor }} </option>
                            @endforeach
                        </select>
                    </div>
                    <div class="col-md-4 mt-2">
                        <label for="">Barcode</label></label>
                        <input type="text" class="form-control" name="barcode" value="{{ $barcode }}">
                    </div>
                    <div class="col-md-12 mt-2">
                        <button type="submit" class="btn btn-success"><i class="ki-outline ki-magnifier fs-2"></i> Buscar</button>
                        <a href="/inventario/ajuste-inventario" class="btn btn-warning">Limpiar campos</a>
                    </div>
                </div>
            </form>
        </div>
    </div>
    <div class="card shadow-sm">
        <div class="card-body">
            @if (count($data) > 0)
                <h3> <span class="badge bg-secondary" style="color:rgb(105, 107, 109)">Total items:
                        {{ count($data) }}</span></h3>
                <br>
                <a href="{{ $url }}" target="_blank" class="btn btn-warning mb-2">PDF</a>
                <table class="table table-bordered table-hover table-bordered table-sm" style="font-size: 12px">
                    <thead class="thead-dark">
                        <tr>
                            {{-- <th scope="col" width="30">#</th> --}}
                            <th scope="col">Proveedor</th>
                            <th>Precio</th>
                            <th>Bodega</th>
                            <th>Ubicación</th>
                            <th>Producto</th>
                            <th>Unidad</th>
                            <th>Barcode</th>
                            <th>Cantidad</th>
                            <th>Fecha</th>
                            <th>Ajuste</th>
                        </tr>
                    </thead>
                    <tbody>
                        @foreach ($data as $key => $item)
                            {{-- <td> {{ $key + 1 }} </td> --}}
                            <td>{{ $item->proveedor->nombreProveedor }}</td>
                            <td>{{ number_format($item->contenedor->precio, 2) }}</td>
                            <td>{{ $item->bodega->bodega }}</td>
                            <td>{{ $item->contenedor->locacion->ubicacion }}</td>
                            <td>{{ $item->productoProveedor->producto }} {{ $item->productoProveedor->codigo }}</td>
                            <td>{{ $item->contenedor->unidad->unidad }}</td>
                            <td>{{ $item->barcode }}</td>
                            <td>{{ $item->cantidad }}</td>
                            <td>{{ $help::formato_fecha($item->fecha) }}</td>
                            @include('inventario.modalAjusteInventario')
                            <td class="text-center"><button class="btn btn-xs btn-info" data-bs-toggle="modal"
                                    data-bs-target="#modalAjusteInventario" data-id="{{ $item->id }}"
                                    data-name="{{ $item->barcode }}" data-cantidad="{{ $item->cantidad }}"
                                    value="{{ $item->id }}" style="font-size: 5px"><span
                                        title="Realizar ajuste de inventario"><i
                                            class="fas fa-sliders-h"></i></span></button></td>
                            </tr>
                        @endforeach
                    </tbody>
                </table>
            @else
                <div class="alert alert-danger">
                    <strong>¡Opps! Parece que no tienes ninguna dato la consulta realizada</strong>
                </div>
            @endif
            <!-- Modal de ajuste de inventario -->
        </div>
    </div>






@endsection