@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="bodega"').select2();
            document.querySelector('select[name="bodega"').parentElement.querySelector('span.select2-container')
                .style.width = "100%"
        });
    </script>

    <script>
        $("#barcode").keyup(function() {

            $.ajax({
                url: "{{ route('inventario.descarga.itemDescarga') }}",
                type: "GET",
                data: {
                    barcode: $('#barcode').val()
                },
                success: function(data) {
                    if (data == 1) {
                        console.log(1);
                        $("#padre").append(`<div class="alert alert-warning alert-dismissible fade show" role="alert">
                            Error, el barcode ya ha sido leido.
                            <button type="button" class="btn btn-icon btn-sm btn-active-light-danger ms-2" data-bs-dismiss="modal" aria-label="Close">
                                <i class="ki-outline ki-cross fs-1"></i>
                            </button>
                        </div>`);
                    } else if (data == 2) {
                        console.log(2);
                        window.location.reload();
                    } else if (data == 4) {
                        console.log(4);
                        window.location.href = "/inventario/descarga";
                    }

                }
            });



        });
    </script> --}}
    <script>
        $(document).ready(function() {
            var bodegaSelect = document.querySelector('select[name="bodega"');

            if (bodegaSelect) {
                bodegaSelect.select2();

                var select2Container = bodegaSelect.parentElement.querySelector('span.select2-container');

                if (select2Container) {
                    select2Container.style.width = "100%";
                }
            }

            $("#barcode").keyup(function() {
                $.ajax({
                    url: "{{ route('inventario.descarga.itemDescarga') }}",
                    type: "GET",
                    data: {
                        barcode: $('#barcode').val()
                    },
                    success: function(data) {
                        console.log(data);
                        if (data == 1) {
                            console.log(1);
                            $("#padre").append(`<div class="alert alert-warning alert-dismissible fade show" role="alert">
                            Error, el barcode ya ha sido leído.
                            <button type="button" class="close" data-dismiss="alert" aria-label="Close">
                            <span aria-hidden="true">&times;</span>
                            </button>
                        </div>`);
                        } else if (data == 2) {
                            console.log(2);
                            window.location.reload();
                        } else if (data == 4) {
                            console.log(4);
                            window.location.href = "/inventario/descarga";
                        }
                    }
                });
            });
        });
    </script>
@endsection

@section('titulo')
    Descarga de bodega
@endsection

@section('content')
    <nav aria-label="breadcrumb">
        <ol class="breadcrumb">
            <li class="breadcrumb-item"><a href="/">Home</a></li>
            <li class="breadcrumb-item"><a href="/inventario/descarga">Descarga</a></li>
            <li class="breadcrumb-item active" aria-current="page">Descarga de bodega</li>
        </ol>
    </nav>
    @include('sessions')
    <h3 style="text-align: center">Descarga de bodega</h3>

    <div class="padre" id="padre">

    </div>


    <div class="col-md-12">
        <br>
        <h5><strong>Estado del movimiento:</strong> {{ $mov->estado->estado }}</h5>

    </div>
    @if ($mov->estado_traslado_id == 3 || $mov->estado_traslado_id == 4)
        <div class="col-md-12">
            <label class="mb-2" for="">Barcode</label>
            <input type="text" class="form-control" name="barcode" id="barcode">
            <br>
        </div>
    @endif
    @if ($mov->estado_traslado_id == 4)
        <div class="col-md-12">
            <a href="{{ route('inventario.descarga.terminarForzado', $mov->id) }}" class="btn btn-danger mb-2">TERMINAR
                FORZADO </a>
        </div>
    @endif

    @if (count($detalles) > 0)
        <table class="table table-bordered table-hover">
            <thead class="thead-dark">
                <tr>
                    <th scope="col" width="30">#</th>
                    <th scope="col">Barcode</th>
                    <th scope="col">Cantidad</th>
                </tr>
            </thead>
            <tbody>
                @foreach ($detalles as $key => $item)
                    <tr>
                        <td>{{ $key + 1 }}</td>
                        <td>{{ $item->barcode }}</td>
                        <td>{{ $item->cantidad }}</td>
                    </tr>
                @endforeach
            </tbody>
        </table>
    @else
        <div class="alert alert-danger">
            <strong>¡Opps! Parece que no tienes ningun proceso de descarga.</strong>
        </div>
    @endif



@endsection