@section('estilos')
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/toastr.min.css">
<link rel="stylesheet" href="{{asset('assets/js/plugins/select2/css/select2.min.css')}}">
@endsection
<div>
    <div class="content">
        <div class="row">
            <h1 class="h3 fw-bold mb-0">
                Registrar movimiento en almacén
            </h1>
            <h2 class="fs-base lh-base fw-medium text-muted">
                Listado de productos registrados en existencia y para nuevos registros.
            </h2>

            <div class="row mt-4">
                <div class="col-6 col-xl-6">
                    <div class="block block-themed">
                        <div class="block-header bg-info">
                            <h3 class="block-title">
                                Productos
                            </h3>
                        </div>
                        <div class="block-content">
                            <div class="row">
                                <div class="col-8">
                                    <div class="mb-0">
                                        <input type="email" class="form-control form-control-alt" wire:model="search" placeholder="Buscar código, nombre...">
                                    </div>
                                </div>
                                <div class="col-4">
                                    <div class="mb-0">
                                        <input type="text" class="form-control form-control-alt" id="codigo" name="codigo" placeholder="🔎Escanear">
                                    </div>
                                </div>
                            </div>

                            <table class="table table-borderless table-vcenter">
                                <thead>
                                    <tr>
                                        <th class="text-center" style="width: 50px;"></th>
                                        <th class="text-center"></th>
                                        <th class="text-center d-none d-sm-table-cell" style="width: 30%;"></th>
                                    </tr>
                                </thead>
                                <tbody>
                                    @foreach($productos as $producto)
                                    <tr>
                                        <td class="text-center">
                                            @if($producto['require_serial'] == 1)
                                            <a href="{{asset('/inventario/productos/lista/'.$producto['id'])}}" target="_blank">
                                                <img class="img-avatar img-avatar48" src="{{asset($producto['url_img'])}}">
                                            </a>
                                            @else
                                                <img class="img-avatar img-avatar48" src="{{asset($producto['url_img'])}}">
                                            @endif
                                        </td>
                                        <td>
                                            <p class="fs-sm fw-semibold mb-0">{{$producto['name']}}</p>
                                        </td>
                                        <td class="text-center">
                                            <div>
                                                <div class="input-group">
                                                    <input type="text" class="form-control form-control-alt" wire:model="cantidad.{{$producto['id']}}">
                                                    <button type="button" id="agregarCesta" name="agregarCesta" class="btn btn-info" wire:click="agregarCesta({{$producto['id']}}, {{$producto['require_serial'] == null ? '-1' : '1'}}, 'null', 'Entrada', 'm')">+</button>
                                                </div>
                                            </div>
                                        </td>
                                    </tr>
                                    @endforeach
                                </tbody>
                            </table>
                            {{$productos->links()}}
                        </div>
                    </div>
                </div>
                <div class="col-6 col-xl-6">
                    <div class="block block-themed">
                        <div class="block-header bg-info">
                            <h3 class="block-title">
                                Productos seleccionados
                            </h3>
                        </div>
                        <div class="block-content">
                            @if($entradas == [])
                            <div class="text-center mb-4">
                                <span class="text-muted">No hay ningún producto en la cesta.</span>
                            </div>
                            @else
                            <table class="table table-borderless table-vcenter">
                                <tbody>
                                    @forelse($entradas as $seleccion)
                                    <tr>
                                        <td class="text-center">
                                            <img class="img-avatar img-avatar48" src="{{asset($seleccion['url_img'])}}">
                                        </td>
                                        <td class="fw-semibold fs-sm">
                                            <span>{{$seleccion['name']}}</span>
                                            @if($seleccion['require_serial'] == 1)
                                            <div class="mb-2">
                                                <input
                                                        type="text"
                                                        id="input{{$seleccion['id_cesta']}}"
                                                        onkeyup="if (event.keyCode == 13) input{{$seleccion['id_cesta']+1}}.focus()"
                                                        class="form-control form-control-alt form-control-sm"
                                                        wire:model.defer="imei.{{$seleccion['id_cesta']}}"
                                                        placeholder="IMEI, Serial o Identificador">
                                            </div>
                                            @endif
                                            @error('imei.'.$seleccion['id_cesta']) <span class="error">{{ $message }}</span> @enderror
                                        </td>
                                        <td class="text-center">
                                            <span class="text-muted">{{$seleccion['qty']}}</span>
                                        </td>
                                        <td>
                                            <button class="btn btn-sm btn-danger" id="eliminarCesta" name="eliminarCesta" wire:click="eliminarCesta({{$seleccion['id_cesta']}}, {{$seleccion['id_product']}}, 'Entrada')"><i class="nav-main-link-icon fa fa-trash"></i></button>
                                        </td>
                                    </tr>
                                    @empty
                                    <div class="text-center">
                                        <span class="text-muted">No hay ningún producto seleccionado.</span>
                                    </div>
                                    @endforelse
                                </tbody>
                            </table>
                            <hr>
                            <div class="row">
                                <div class="row items-push">
                                    <div class="col-md-6">
                                        <div class="form-check form-block">
                                            <input type="radio" class="form-check-input" id="checkEntrada" wire:model.defer="checkbox_tipo" name="checkMovimiento" value="Entrada">
                                            <label class="form-check-label" for="checkEntrada">
                                                <span class="fs-sm fw-semibold"><i class="fa fa-sign-in"></i> Entrada</span>
                                            </label>
                                        </div>
                                    </div>
                                    <div class="col-md-6">
                                        <div class="form-check form-block">
                                            <input type="radio" class="form-check-input" id="checkSalida" wire:model.defer="checkbox_tipo" name="checkMovimiento" value="Salida">
                                            <label class="form-check-label" for="checkSalida">
                                                <span class="fs-sm fw-semibold"><i class="fa fa-sign-out"></i> Salida</span>
                                            </label>
                                        </div>
                                    </div>
                                </div>

                                <div class="col-12" wire:ignore>
                                    <div class="block block-rounded mb-0">
                                        <ul class="nav nav-tabs nav-tabs-alt" role="tablist">
                                            <li class="nav-item" role="presentation">
                                                <button class="nav-link active" id="btabs-static-provider-tab" data-bs-toggle="tab" data-bs-target="#btabs-static-provider" role="tab" aria-controls="btabs-static-provider" aria-selected="true"><i class="nav-main-link-icon fa fa-user-shield"></i> Colaborador</button>
                                            </li>
                                            <li class="nav-item" role="presentation">
                                                <button class="nav-link" id="btabs-static-colab-tab" data-bs-toggle="tab" data-bs-target="#btabs-static-colab" role="tab" aria-controls="btabs-static-colab" aria-selected="false" tabindex="-1"><i class="nav-main-link-icon fa fa-user-tag"></i> Proveedor</button>
                                            </li>
                                            <li class="nav-item" role="presentation">
                                                <button class="nav-link" id="btabs-static-client-tab" data-bs-toggle="tab" data-bs-target="#btabs-static-client" role="tab" aria-controls="btabs-static-client" aria-selected="false" tabindex="-1"><i class="nav-main-link-icon fa fa-user"></i> Cliente</button>
                                            </li>
                                        </ul>
                                        <div class="block-content tab-content">
                                            <div class="tab-pane active" id="btabs-static-provider" role="tabpanel" aria-labelledby="btabs-provider-home-tab" tabindex="0">
                                                <div class="row">
                                                    <div class="col-12">
                                                        <label class="form-label">Colaborador</label>
                                                        <select class="form-select form-control-alt" wire:model.defer="id_user">
                                                            <option>Seleccione un colaborador</option>
                                                            @foreach($usuarios as $usuario)
                                                            <option value="{{$usuario['id']}}">{{$usuario['name']}}</option>
                                                            @endforeach
                                                        </select>
                                                    </div>

                                                    <div class="col-md-6 ms-auto">
                                                        <div class="mt-4 mb-4 text-end">
                                                            <button class="btn btn-lg btn-info" wire:click="registrarMovimiento('Colaborador')">Registrar</button>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="tab-pane" id="btabs-static-colab" role="tabpanel" aria-labelledby="btabs-static-colab-tab" tabindex="0">
                                                <div class="row">
                                                    <div class="col-6">
                                                        <label class="form-label">Proveedor</label>
                                                        <select class="form-select form-control-alt" wire:model.defer="id_provider">
                                                            <option>Seleccione un proveedor</option>
                                                            @foreach($proveedores as $proveedor)
                                                            <option value="{{$proveedor['id']}}">{{$proveedor['name']}}</option>
                                                            @endforeach
                                                        </select>
                                                    </div>
                                                    <div class="col-6">
                                                        <label class="form-label">CIA</label>
                                                        <select class="form-select form-control-alt" id="example-select" name="example-select" wire:model.defer="id_cia">
                                                            <option>Seleccione</option>
                                                            @foreach($ciadata as $item)
                                                            <option value="{{$item['id']}}">{{$item['name']}}</option>
                                                            @endforeach
                                                        </select>
                                                    </div>
                                                    <div class="col-12">
                                                        <input type="text" class="mt-4 form-control form-control-alt" wire:model.defer="referencia" placeholder="Referencia">
                                                    </div>

                                                    <div class="col-md-6 ms-auto">
                                                        <div class="mt-4 mb-4 text-end">
                                                            <button class="btn btn-lg btn-info" wire:click="registrarMovimiento('Proveedor')">Registrar</button>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="tab-pane" id="btabs-static-client" role="tabpanel" aria-labelledby="btabs-static-client-tab" tabindex="0">
                                                <div class="row">
                                                    <label class="form-label">Cliente</label>
                                                    <div class="col-12">
                                                        <div class="mb-4">
                                                            <select class="form-select form-control-alt" id="cliente_select" name="cliente_select" wire:model.defer="id_cliente" data-placeholder="Seleccione un cliente">
                                                                <option></option>
                                                                @foreach($clientes as $cliente)
                                                                <option value="{{$cliente['id']}}">{{$cliente['company_name']}}</option>
                                                                @endforeach
                                                            </select>
                                                        </div>
                                                    </div>

                                                    <div class="col-md-6 ms-auto">
                                                        <div class="mt-4 mb-4 text-end">
                                                            <button class="btn btn-lg btn-info" wire:click="registrarMovimiento('Cliente')">Registrar</button>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                      </div>
                                </div>

                            </div>
                            @endif
                        </div>
                    </div>
                </div>
            </div>

        </div>
    </div>

</div>
@section('scripts')
<script src="{{asset('assets/js/lib/jquery.min.js')}}"></script>
<script src="{{asset('assets/js/plugins/select2/js/select2.full.min.js')}}"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/toastr.min.js"></script>
<script src="//cdn.jsdelivr.net/npm/sweetalert2@11"></script>
<script>

    window.addEventListener('swal', event => {
        if(event.detail.type_alert == "swal")
        {
            Swal.fire({
                title: event.detail.title,
                text: event.detail.text,
                icon: event.detail.type,
                timer: event.detail.timer,
                showConfirmButton: event.detail.showConfirmButton,
            });
        }
        else if(event.detail.type_alert == "toastr")
        {
            toastr.success(event.detail.t_title);
        }
        else if(event.detail.type_alert == "toastr_error")
        {
            toastr.error(event.detail.t_title);
        }
    });

    document.addEventListener("DOMContentLoaded", () => {

        const $codigo = document.querySelector("#codigo");
        $codigo.addEventListener("keydown", evento => {
            if (evento.keyCode === 13) {
                // El lector ya terminó de leer
                const codigoDeBarras = $codigo.value;
                // Aquí ya podemos hacer algo con el código. Yo solo lo imprimiré
                window.livewire.emit('emitBarcode', codigoDeBarras);
                // Limpiar el campo
                $codigo.value = "";
            }
        });

        $('#cliente_select').select2();
        $('#cliente_select').on('change', function (e) {
            var data = $('#cliente_select').select2("val");
            @this.set('id_cliente', data);
        });
    });
</script>
@endsection