@extends('metronic.base')

@section('extracss')
@endsection

@section('extrajs')
    <script>
        $(document).ready(function() {
        $('#bodega_id').change(function() {
            var bodegaId = $(this).val();
            $.ajax({
                url: '/inventario/obtener-localidades/prod/' + bodegaId,
                type: 'GET',
                success: function(data) {
                    $('#localidad_id').empty().append('<option disabled selected>Seleccione...</option>');
                    $.each(data, function(id, ubicacion) {
                        $('#localidad_id').append('<option value="' + id + '">' + ubicacion + '</option>');
                    });
                },
                error: function(xhr, status, error) {
                    console.error('Error en la solicitud AJAX:', error);
                }
            });
        });
    });
    </script>
    <script>
        function agregarBtnClick(codigo, producto, productoId, total_cantidad, ingreso_id, unidad_medida) {
                //console.log(codigo, producto);
                document.getElementById('codigo').value = codigo;
                document.getElementById('producto').value = producto;
                document.getElementById('idProducto').value = productoId;
                document.getElementById('totalCantidad').value = total_cantidad;
                document.getElementById('ingresoId').value = ingreso_id;
                document.getElementById('unidadMedidaId').value = unidad_medida;
            }
    </script>
@endsection

@section('titulo')
    Descarga ingreso de Producción
@endsection

@section('content')
    @include('sessions')
    <div class="card shadow-sm">
        <div class="card-header">
            <h3 class="card-title">Mover producto terminado</h3>
        </div>
        <div class="card-body">
            <div class="table-responsive">
                <table class="table table-rounded table-striped border gy-7 gs-7">
                    <thead>
                        <tr class="fw-bold fs-6 text-gray-800 border-bottom border-gray-200">
                            <th>ID</th>
                            <th>#OP</th>
                            <th>Código</th>
                            <th>Producto</th>
                            <th>Unidad Med.</th>
                            <th>QTY Disponible</th>
                            <th>Acciones</th>
                        </tr>
                    </thead>
                    <tbody>
                        @if (count($ingresosProd) > 0)
                            @foreach ($ingresosProd as $item)
                                <tr>
                                    <td>{{ $item->ingreso_id }}</td>
                                    <td>{{ $item->order_number }}</td>
                                    <td>{{ $item->codigo }}</td>
                                    <td>{{ $item->producto }}</td>
                                    <td>{{ $item->unidad_medida }}</td>
                                    <td>{{ $item->total_cantidad }}</td>
                                    <td style="vertical-align: middle; padding: 0;">
                                        <button type="button" class="btn"
                                            onclick="agregarBtnClick('{{ $item->codigo }}', '{{ $item->producto }}', '{{ $item->productoId }}', '{{ $item->total_cantidad }}', '{{ $item->ingreso_id }}', '{{ $item->unidad_medida_id }}')"
                                            data-bs-toggle="modal" data-bs-target="#kt_modal_1" title="Ingresar"
                                            style="color: gray !important; margin-right: 12px; margin: 0; padding: 0; line-height: 1;">
                                            <i class="ki-outline ki-arrow-down text-info fs-2x mx-2"></i>
                                        </button>
                                    </td>
                                </tr>
                            @endforeach
                        @else
                            <tr>
                                <td colspan="6" class="text-center">No hay registros por mostrar</td>
                            </tr>
                        @endif
                    </tbody>
                </table>
            </div>
        </div>
    </div>
    <div class="modal fade" tabindex="-1" id="kt_modal_1">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header bg-light">
                    <h3 class="modal-title">Ingreso a bodega de producto terminado</h3>
                    <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>
                <form action="{{ route('produccion.ingreso-produccion-descarga.store') }}" method="post"
                    enctype="multipart/form-data">
                    @csrf
                    <div class="modal-body">
                        <div class="row mb-2">
                            <div class="form-group col-sm-12">
                                <input type="hidden" id="idProducto" name="idProducto"
                                    class="form-control form-control-solid" readonly />
                                <input type="hidden" id="totalCantidad" name="totalCantidad"
                                    class="form-control form-control-solid" readonly />
                                <input type="hidden" id="ingresoId" name="ingresoId"
                                    class="form-control form-control-solid" readonly />
                                <input type="hidden" id="unidadMedidaId" name="unidadMedidaId"
                                    class="form-control form-control-solid" readonly />
                            </div>
                            <div class="form-group col-sm-4 mb-5">
                                <label for="codigo" class="form-label">Código</label>
                                <input type="text" id="codigo" name="codigoProducto"
                                    class="form-control form-control-solid" readonly />
                            </div>
                            <div class="form-group col-sm-8 mb-5">
                                <label for="producto" class="form-label">Producto</label>
                                <input type="text" id="producto" name="producto" class="form-control form-control-solid"
                                    readonly />
                            </div>
                        </div>
                        <hr>
                        <div class="row">
                            <div class="form-group col-sm-12 mb-3">
                                <label for="cantidad" class="required form-label">Bodega</label>
                                <select class="form-select form-select-solid" data-control="select2" name="bodega_id"
                                    id="bodega_id">
                                    <option disabled selected>Seleccione...</option>
                                    @foreach ($bodegas as $bodega)
                                        <option value="{{ $bodega->id }}">{{ $bodega->bodega }}</option>
                                    @endforeach
                                </select>
                            </div>
                            <div class="form-group col-sm-12 mb-3">
                                <label for="cantidad" class="required form-label">Localidad</label>
                                <select class="form-select form-select-solid" data-control="select2" name="localidad_id"
                                    id="localidad_id">
                                    <option disabled selected>Seleccione...</option>

                                </select>
                            </div>
                            <div class="form-group col-sm-12 mb-3">
                                <label for="cantidad" class="required form-label">Cantidad</label>
                                <input type="number" id="cantidadInput" name="cantidad"
                                    placeholder="Ingrese la cantidad..." class="form-control form-control-solid" required />
                            </div>
                            <div class="form-group col-sm-12 mb-3">
                                <label for="cajas" class="form-label">Cajas</label>
                                <input type="number" id="cajas" name="numCajas"
                                    placeholder="Ingrese la qty de cajas..." class="form-control form-control-solid" />
                            </div>
                        </div>
                    </div>
                    <div class="text-center mb-4">
                        <button type="submit" class="btn btn-primary"><i class="ki-outline ki-send fs-2"></i> Enviar</button>
                        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal"><i class="ki-outline ki-cross-circle fs-2"></i> Cancelar</button>
                    </div>
                </form>
            </div>
        </div>
    </div>
@endsection