@extends('metronic.base')
@section('extrajs')
    <script src="{{ asset('js/jquery.chained.min.js') }}"></script>
    <script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js"></script>
    <script>
        $("#mainForm #location_id").chainedTo("#mainForm #bodega_id");
      //  $("#mainForm #producto_id").chainedTo("#mainForm #proveedor_id");
    </script>
    <script>
        $(document).ready(function() {
            $('select[name="proveedor_id"]').select2();
            document.querySelector('select[name="proveedor_id"]').parentElement.querySelector(
                    'span.select2-container')
                .style.width = "100%"
        });
        $(document).ready(function() {
            $('select[name="producto_id"]').select2();
            document.querySelector('select[name="producto_id"]').parentElement.querySelector(
                    'span.select2-container')
                .style.width = "100%"
        });




        $(document).ready(function() {
            $('select[name="location_id"]').select2();
            document.querySelector('select[name="location_id"]').parentElement.querySelector(
                    'span.select2-container')
                .style.width = "100%"
        });

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

    <!-- SET DE PRECIO SUGERIDO POR EL PROVEEDOR -->
    <script>
        $(document).ready(function() {
            bodegaLocation();
            function bodegaLocation() {
                var bodegaId = $('#bodega_id').val();
                $.ajax({
                    url: '{{ route('inventario.getLocalidad') }}',
                    type: 'GET',
                    data: {
                        bodega: bodegaId
                    },
                    success: function(response) {
                        $('#location_id').empty();
                        $.each(response, function(index, producto) {
                            $('#location_id').append($('<option>', {
                                value: producto.id,
                                text: producto.ubicacion
                            }));
                        });
                    }
                });
            }
            $('#bodega_id').on('change', function() {
                bodegaLocation()
            });



            // Detectar el cambio en la selección del producto
            $('#producto_id').change(function() {
                // Obtener el valor del producto seleccionado
                var productoID = $(this).val();

                // Verificar si se seleccionó un producto
                if (productoID !== "") {
                    // Obtener el precio del producto seleccionado
                    var precio = $(this).find(':selected').data('precio');

                    // Establecer el precio obtenido en el campo de entrada de precio
                    $('#precio').val(precio);
                } else {
                    // Si no se selecciona ningún producto, dejar el campo de entrada de precio vacío
                    $('#precio').val('');
                }
            });

            function obtenerCantidadProductoBodega(productoId, bodegaId) {
                $.ajax({
                    type: 'GET',
                    url: `/inventario/recepcion/producto/${productoId}/bodega/${bodegaId}`,
                    success: function(data) {
                        // Cuando se obtiene la cantidad, actualizar el input correspondiente
                        //console.log(data)
                        $('#cantidad_bodega').val(data);
                    },
                    error: function() {
                        // En caso de error, manejarlo adecuadamente
                        console.log(
                            'Error al obtener la cantidad del producto en la bodega seleccionada.');
                    }
                });
            }

            // Evento para actualizar la cantidad cuando se seleccione un producto o una bodega
            $('#producto_id, #bodega_id').on('change', function() {
                var productoId = $('#producto_id').val();
                var bodegaId = $('#bodega_id').val();

                // Verificar que ambos valores estén seleccionados
                if (productoId && bodegaId) {
                    obtenerCantidadProductoBodega(productoId, bodegaId);
                } else {
                    // Si falta alguna selección, desactivar el input de cantidad
                    $('#cantidad_bodega').val('').attr('disabled', 'disabled');
                }
            });
        });
    </script>
    <script>
        $(document).ready(function() {



                $('#bodega_id').change(function(){
            bodega = $("#bodega_id").val();
                    $.ajax({
                    url: "{{ route('inventario.localidadesBodega') }}", // Ruta definida en Laravel
                    type: "GET", // Método HTTP
                    data: { bodega: bodega }, // Parámetro de consulta
                    success: function(response){

                        var selectBodegas = $('#location_id');
                        $('#location_id').empty();
                        $.each(response, function(index, bodega){
                            selectBodegas.append($('<option>', {
                                value: bodega.id,
                                text: bodega.ubicacion
                            }));
                        });


                    },
                    error: function(xhr){
                        // Manejar errores
                        console.error(xhr);
                    }
                });
            });





            // Manejar el cambio en el select "tipo_recepcion"
            $('#tipo_recepcion').change(function() {
                var selectedOption = $(this).val();
                $('#qty').val("");
                $('#producto_id').empty();
                $('#producto_id').prop("disabled", true);

                if (selectedOption === '2') { // Si se selecciona "Recepción por orden de compra"
                    // Mostrar el select "orden_compra_select"
                    $('#orden_compra_select').show();
                    $('#orden_compra_id').prop("disabled", false);
                    $('#proveedor_id').empty();
                    $('#traslado_select').hide();
                    $('#traslado_id').empty();
                    $('#traslado_id').prop("disabled", true);
                    $('#qty').val("");
                    $('#barcode').val("");
                    $("#qty").prop("readonly", false);
                    $("#barcode").prop("readonly", false);
                    $('#barcode2').empty();
                    $('#barcode2').prop("disabled", true);
                    $('#barcode_select').hide();
                    $('#barcode_div').show();
                    $("#proveedor_id").prop("disabled", false);
                    $("#producto_id").prop("disabled", true);
                    $("#um_id").prop("disabled", false);
                    $("#um_id").empty();
                    unidadesMedida();
                    // Realizar una petición AJAX para obtener las órdenes de compra
                    $.ajax({
                        url: '{{ route('orden.getOrdenesCompra') }}', // Debes crear esta ruta en tu archivo de rutas de Laravel
                        method: 'GET',
                        dataType: 'json',
                        success: function(data) {

                            // Limpiar y cargar las órdenes de compra en el select "orden_compra_id"
                            console.log("aquii");
                            console.log(data);
                            $('#orden_compra_id').empty();
                            $('#orden_compra_id').append($('<option>', {
                                value: '',
                                text: ''
                            }));
                            $.each(data, function(key, value) {
                                $('#orden_compra_id').append($('<option>', {
                                    value: value.id,
                                    text: value.codigo + ' - ' + value
                                        .proveedor // Ajusta esto según el campo de la orden de compra que desees mostrar
                                }));
                            });
                        },
                        error: function(xhr, status, error) {
                            console.error(error);
                        }
                    });
                } else if (selectedOption === '1') {
                    // Ocultar el select "orden_compra_select" y limpiar el select "orden_compra_id"
                    $('#orden_compra_select').hide();
                    $('#orden_compra_id').empty();
                    $('#orden_compra_id').prop("disabled", true);
                    $('#traslado_select').hide();
                    $('#traslado_id').empty();
                    $('#traslado_id').prop("disabled", true);
                    $('#proveedor_id').empty();
                    $('#qty').val("");
                    $('#producto_id').empty();
                    $('#producto_id').prop("disabled", true);
                    $('#qty').val("");
                    //$('#barcode').val("");
                    $("#qty").prop("readonly", false);
                    $("#barcode").prop("readonly", false);

                    $('#barcode2').empty();
                    $('#barcode2').prop("disabled", true);
                    $('#barcode_select').hide();
                    $('#barcode_div').show();
                    $("#proveedor_id").prop("disabled", false);
                    $("#producto_id").prop("disabled", true);
                    $("#um_id").prop("disabled", false);
                    $("#um_id").empty();
                    unidadesMedida();
                    // Realizar una petición AJAX para obtener las órdenes de compra
                    $.ajax({
                        url: '{{ route('orden.getProveedores') }}', // Debes crear esta ruta en tu archivo de rutas de Laravel
                        method: 'GET',
                        dataType: 'json',
                        success: function(data) {
                            $('#proveedor_id').append($('<option>', {
                                value: '',
                                text: ''
                            }));
                            $.each(data, function(key, value) {
                                $('#proveedor_id').append($('<option>', {
                                    value: value.id,
                                    text: value.nombreProveedor
                                }));
                            });
                        },
                        error: function(xhr, status, error) {
                            console.error(error);
                        }
                    });
                } else if (selectedOption === '3') {
                    $('#orden_compra_select').hide();
                    $('#orden_compra_id').empty();
                    $('#orden_compra_id').prop("disabled", true);
                    $('#proveedor_id').empty();
                    $('#qty').val("");
                    $('#producto_id').empty();
                    $('#producto_id').prop("disabled", true);
                    $('#traslado_select').show();
                    $('#traslado_id').empty();
                    $('#traslado_id').prop("disabled", false);

                    $('#barcode2').empty();
                    $('#barcode_select').hide();
                    $('#barcode_div').show();
                    $("#proveedor_id").prop("disabled", false);
                    $("#producto_id").prop("disabled", true);
                    $("#um_id").prop("disabled", false);
                    $("#um_id").empty();
                    unidadesMedida();
                    $.ajax({
                        url: '{{ route('inventario.getTraslados') }}', // Debes crear esta ruta en tu archivo de rutas de Laravel
                        method: 'GET',
                        dataType: 'json',
                        success: function(data) {
                            console.log(data);
                            $('#traslado_id').append($('<option>', {
                                value: '',
                                text: ''
                            }));
                            $.each(data, function(key, value) {
                                var fechaDB = value.fecha;

                                $('#traslado_id').append($('<option>', {
                                    value: value.id,
                                    text: 'ID: ' + value.id + ', Fecha: ' +
                                    fechaDB
                                }));
                            });
                        },
                        error: function(xhr, status, error) {
                            console.error(error);
                        }
                    });

                }
            });

            // Manejar el cambio en el select "tipo_recepcion"
            $('#orden_compra_id').change(function() {
                actualizarProveedor();
                $('#qty').val("");
                $('#producto_id').empty();
                $('#producto_id').prop("disabled", true);
            });

            function actualizarProveedor() {
                $('#proveedor_id').empty();
                // Obtener el proveedor de la orden de compra seleccionada
                var selectedOrdenCompraId = $('#orden_compra_id').val();
                if (selectedOrdenCompraId) {
                    // Realizar una petición AJAX para obtener el proveedor de la orden de compra
                    $.ajax({
                        url: '{{ route('orden.getProveedorOrdenCompra') }}', // Debes crear esta ruta en tu archivo de rutas de Laravel
                        method: 'GET',
                        dataType: 'json',
                        data: {
                            orden_compra_id: selectedOrdenCompraId,

                        },
                        success: function(data) {
                            // Agregar el proveedor de la orden de compra al select "proveedor_id"
                            $('#proveedor_id').append($('<option>', {
                                value: '',
                                text: ''
                            }));
                            $('#proveedor_id').append($('<option>', {
                                value: data.proveedor_id,
                                text: data.proveedor_nombre
                            }));
                            console.log(data);
                        },
                        error: function(xhr, status, error) {
                            console.error(error);
                        }
                    });
                }
            }



            $('#producto_id').change(function(){
                //$('#qty').val("");
                $.ajax({
                        url: '{{ route('orden.getProductoOrdenCompraOne') }}', // Debes crear esta ruta en tu archivo de rutas de Laravel
                        method: 'GET',
                        dataType: 'json',
                        data: {
                            orden_compra_id: $('#orden_compra_id').val(),
                            producto_id: $('#producto_id').val(),
                        },
                        success: function(data) {
                            console.log("xxxxxxxxxaAAAA");
                            console.log(data);
                            $('#qty').val(data.cantidad_final);
                            $('#precio').val(data.precio_unitario);
                            $('#orden_compra_detalle_id').val(data.orden_compra_detalle_id);
                          /*  $('#producto_id').append($('<option>', {
                                value: '',
                                text: ''
                            }));
                            $.each(data, function(key, value) {
                                $('#producto_id').append($('<option>', {
                                    value: value.producto_id,
                                    text: value.codigo_producto + '-' +
                                        value.nombre_producto
                                }));
                            });*/
                        },
                        error: function(xhr, status, error) {
                            console.error(error);
                        }
                    });
            });

            $('#bodega_id').change(function (){
                $('#producto_id').prop("disabled", false).empty();
                $('#proveedor_id').val('').change();
            })

            $('#proveedor_id').change(function() {

                var selectedOption = $('#tipo_recepcion').val();
                var selectedOrdenCompraId = $('#orden_compra_id').val();
                $('#qty').val("");
                $('#producto_id').empty();
                $('#producto_id').prop("disabled", true);
                if (selectedOption === '2') {
                    $('#producto_id').prop("disabled", false);
                    $('#producto_id').empty();
                    // Realizar una petición AJAX para obtener los productos de la órden de compra
                    $.ajax({
                        url: '{{ route('orden.getProductoOrdenCompra') }}', // Debes crear esta ruta en tu archivo de rutas de Laravel
                        method: 'GET',
                        dataType: 'json',
                        data: {
                            orden_compra_id: selectedOrdenCompraId
                        },
                        success: function(data) {
                            console.log("xxxxxxxxxaAAAA");
                            console.log(selectedOrdenCompraId);
                            console.log(data);


                            $.each(data, function(key, value) {
                                if (!value.lote) { // Omitir si lote tiene un valor
                                        $('#producto_id').append($('<option>', {
                                            value: value.producto_id,
                                            text: value.codigo_producto + '-' + value.nombre_producto
                                        }));
                                    }
                            });
                        },
                        error: function(xhr, status, error) {
                            console.error(error);
                        }
                    });
                } else if (selectedOption === '1') {
                    var selectedProveedorId = $('#proveedor_id').val();
                    $('#producto_id').prop("disabled", false);
                    $('#producto_id').empty();
                    // Realizar una petición AJAX para obtener los productos de la órden de compra
                    $.ajax({
                        url: '{{ route('orden.getProductoProveedor') }}', // Debes crear esta ruta en tu archivo de rutas de Laravel
                        method: 'GET',
                        dataType: 'json',
                        data: {
                            bodega: $('#bodega_id').val(),
                            proveedor_id: selectedProveedorId
                        },
                        success: function(data) {
                            $.each(data, function(key, value) {
                                $('#producto_id').append($('<option>', {
                                    value: value.producto_id,
                                    text: value.codigo + '-' +
                                        value.producto
                                }));
                            });
                        },
                        error: function(xhr, status, error) {
                            console.error(error);
                        }
                    });
                } else if (selectedOption === '3') {
                    var selectedTrasladoId = $('#traslado_id').val();
                    var selectedProveedorId = $('#proveedor_id').val();
                    $('#producto_id').prop("disabled", false);
                    $('#producto_id').empty();
                    $('#qty').val("");
                    $('#barcode').val("");
                    $("#qty").prop("readonly", false);
                    $("#barcode").prop("readonly", false);
                    // Realizar una petición AJAX para obtener los productos de la órden de compra
                    $.ajax({
                        url: '{{ route('inventario.getProductosProveedorTraslado') }}', // Debes crear esta ruta en tu archivo de rutas de Laravel
                        method: 'GET',
                        dataType: 'json',
                        data: {
                            traslado_id: selectedTrasladoId,
                            proveedor_id: selectedProveedorId,
                        },
                        success: function(data) {
                            $('#producto_id').append($('<option>', {
                                value: '',
                                text: ''
                            }));
                            $.each(data, function(key, value) {
                                $('#producto_id').append($('<option>', {
                                    value: value.producto_id,
                                    text: value.codigo_producto + '-' +
                                        value.nombre_producto
                                }));
                            });
                            $('#qty').val("");
                            $('#barcode').val("");
                            $("#qty").prop("readonly", false);
                            $("#barcode").prop("readonly", false);
                        },
                        error: function(xhr, status, error) {
                            console.error(error);
                        }
                    });
                }
            });

            $('#producto_id').change(function() {
                var selectedOption = $('#tipo_recepcion').val();
                var selectedOrdenCompraId = $('#orden_compra_id').val();
                var selectedProductoId = $(this).val();
                var selectedTrasladoId = $('#traslado_id').val();
                var selectedProveedorId = $('#proveedor_id').val();
                if (selectedOption === '2') {
                    //$('#producto_id').prop("disabled", false);
                    $('#qty').val("");
                    // Realizar una petición AJAX para obtener los productos de la órden de compra
                    $.ajax({
                        url: '{{ route('orden.getCantidadProductoOrdenCompra') }}', // Debes crear esta ruta en tu archivo de rutas de Laravel
                        method: 'GET',
                        dataType: 'json',
                        data: {
                            orden_compra_id: selectedOrdenCompraId,
                            producto_id: selectedProductoId
                        },
                        success: function(data) {
                            $('#qty').val(data.cantidad);
                        }
                    });
                } else {
                    $('#qty').val("");
                    $('#barcode').val("");
                }
            });
            $('#producto_id').change(function() {
                var selectedOption = $('#tipo_recepcion').val();
                var selectedOrdenCompraId = $('#orden_compra_id').val();
                var selectedProductoId = $('#producto_id').val();
                var selectedTrasladoId = $('#traslado_id').val();
                var selectedProveedorId = $('#proveedor_id').val();
                $('#qty').val("");
                $('#barcode').val("");
                if (selectedOption === '3') {
                    $.ajax({
                        url: '{{ route('inventario.getFieldsProductoProveedorTraslado') }}', // Debes crear esta ruta en tu archivo de rutas de Laravel
                        method: 'GET',
                        dataType: 'json',
                        data: {
                            traslado_id: selectedTrasladoId,
                            producto_id: selectedProductoId,
                            proveedor_id: selectedProveedorId
                        },
                        success: function(data) {
                            var arreglo = data[0];
                            console.log(data);
                            $('#qty').val(arreglo.cantidad);
                            $('#barcode').val(arreglo.barcode);
                            $("#qty").prop("readonly", true);
                            $("#barcode").prop("readonly", true);
                        },
                        error: function(xhr, status, error) {
                            console.error(error);
                        }
                    });
                }
            });
            $('#traslado_id').change(function() {
                $('#proveedor_id').empty();
                $('#producto_id').empty();
                $('#producto_id').prop("disabled", true);
                $('#qty').val("");
                $('#barcode').val("");
                $("#qty").prop("readonly", false);
                $("#barcode_select").show();
                $('#barcode2').empty();
                $('#um_id').empty();
                //DESABILITANDO OPCIONES
                $('#proveedor_id').prop("disabled", true);
                $('#um_id').prop("disabled", true);
                $('#barcode').prop("disabled", true);
                $('#barcode_div').hide();
                $('#qty').prop("disabled", true);
                $('#precio').prop("disabled", true);
                // Obtener el proveedor de la orden de compra seleccionada
                var selectedTrasladoId = $(this).val();
                if (selectedTrasladoId) {
                    // Realizar una petición AJAX para obtener el proveedor de la orden de compra
                    /* $.ajax({
                        url: '{{ route('inventario.getProveedoresTraslado') }}', // Debes crear esta ruta en tu archivo de rutas de Laravel
                        method: 'GET',
                        dataType: 'json',
                        data: {
                            traslado_id: selectedTrasladoId
                        },
                        success: function(data) {
                            $.each(data, function(key, value) {
                                // Agregar el proveedor de la orden de compra al select "proveedor_id"
                                $('#proveedor_id').append($('<option>', {
                                    value: '',
                                    text: ''
                                }));
                                $('#proveedor_id').append($('<option>', {
                                    value: value.proveedor_id,
                                    text: value.codigo_proveedor + '-' +
                                        value.nombre_proveedor
                                }));
                            });

                            console.log(data);
                            $('#qty').val("");
                            $('#barcode').val("");
                            $("#qty").prop("readonly", false);
                            $("#barcode").prop("readonly", false);
                        },
                        error: function(xhr, status, error) {
                            console.error(error);
                        }
                    }); */
                    $.ajax({
                        url: '{{ route('inventario.getBarcodesByTraslado') }}', // Debes crear esta ruta en tu archivo de rutas de Laravel
                        method: 'GET',
                        dataType: 'json',
                        data: {
                            traslado_id: selectedTrasladoId
                        },
                        success: function(data) {
                            $.each(data, function(key, value) {
                                // Agregar el proveedor de la orden de compra al select "proveedor_id"
                                $('#barcode2').append($('<option>', {
                                    value: '',
                                    text: ''
                                }));
                                $('#barcode2').append($('<option>', {
                                    value: value.barcode,
                                    text: value.barcode
                                }));
                            });
                        },
                        error: function(xhr, status, error) {
                            console.error(error);
                        }
                    });
                }
            });
            //OPCION 3 RECEPCION POR TRASLADO Y SELECCIONADO UN BARCODE
            $('#barcode2').change(function() {
                var selectedBarcode = $('#barcode2').val();
                $('#proveedor_id').prop("disabled", false);
                $('#um_id').prop("disabled", false);
                $('#barcode_div').hide();
                $('#qty').prop("disabled", false);
                $('#precio').prop("disabled", false);
                $('#producto_id').prop("disabled", false);
                $('#um_id').empty();
                $.ajax({
                    url: '{{ route('inventario.getFieldsByBarcodeTraslado') }}', // Debes crear esta ruta en tu archivo de rutas de Laravel
                    method: 'GET',
                    dataType: 'json',
                    data: {
                        barcode2: selectedBarcode
                    },
                    success: function(data) {
                        var item = data[0];
                        $('#proveedor_id').append($('<option>', {
                            value: item.proveedor_id,
                            text: item.nombre_proveedor,
                            selected: true
                        }));
                        /*  $("#proveedor_id").select2({
                             disabled: true
                         });
                         $('#proveedor_id').attr("readonly", true); */

                        $('#producto_id').append($('<option>', {
                            value: item.producto_id,
                            text: item.codigo_producto + '-' + item.nombre_producto,
                            selected: true
                        }));
                        /* $("#producto_id").select2({
                            disabled: true
                        });
                        $('#producto_id').attr("readonly", true); */

                        $('#um_id').append($('<option>', {
                            value: item.unidad_id,
                            text: item.unidad,
                            selected: true
                        }));
                        /* $("#um_id").select2({
                            disabled: true
                        }); */
                        $('#um_id').attr("readonly", true);
                        $('#qty').val(item.cantidad);
                        $('#qty').prop("readonly", true);
                        $('#precio').val(item.precio);
                        $('#precio').prop("readonly", true);
                        console.log(data);

                    },
                    error: function(xhr, status, error) {
                        console.error(error);
                    }
                });
            });

            function unidadesMedida() {
                $.ajax({
                    url: '{{ route('inventario.getUnidadesMedida') }}', // Debes crear esta ruta en tu archivo de rutas de Laravel
                    method: 'GET',
                    dataType: 'json',
                    success: function(data) {
                        $.each(data, function(key, value) {
                            $('#um_id').append($('<option>', {
                                value: value.id,
                                text: value.unidad
                            }));
                        });
                    },
                    error: function(xhr, status, error) {
                        console.error(error);
                    }
                });
            }
        });
    </script>

    <!-- Script jQuery para obtener la cantidad de producto disponible -->
    {{-- <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script> --}}
@endsection


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

@section('titulo')
    Recepción de inventario
@endsection

@section('content')
    @include('sessions')
    <div class="card shadow-sm">
        <div class="card-body">
            <div class="content">
                @if (session('error'))
                        <div class="alert alert-danger text-center">
                            {{ session('error') }}
                        </div>
                    @endif
                <form id="mainForm" action="{{ route('inventario.recepcion.storeContainer') }}" method="POST">
                    @csrf
                    <div class="row">
                        <div class="col-sm-12 col-md-12 col-lg-4 mb-3">
                            <div class="form-group">
                                <label for="bodega_id">{{ __('Bodega') }}</label>
                                <select class="form-select" id="bodega_id" name="bodega_id">
                                    @foreach ($bodegas as $bodega)
                                        <option value="{{ $bodega->id }}">{{ $bodega->bodega }}</option>
                                    @endforeach
                                </select>
                            </div>
                        </div>
                        <div class="col-sm-12 col-md-12 col-lg-4 mb-3">
                            <div class="form-group">
                                <label for="barcode">{{ __('Tipo de recepción') }}</label>
                                <select required class="form-select" id="tipo_recepcion" name="tipo_recepcion">
                                    <option></option>
                                    <option value="1">Recepción ordinaria</option>
                                    <option value="2">Recepción por orden de compra</option>
                                    <option value="3">Recepción por traslado de otra bodega</option>
                                </select>
                            </div>
                        </div>
                        <div class="col-sm-12 col-md-12 col-lg-4 mb-3" id="orden_compra_select" style="display: none;">
                            <div class="form-group">
                                <label for="orden_compra_id">{{ __('Orden de Compra') }}</label>
                                <select required class="form-select" id="orden_compra_id" name="orden_compra_id">
                                    <option value=""></option>
                                    <!-- Aquí cargarás las opciones de las órdenes de compra dinámicamente usando JavaScript -->
                                </select>
                            </div>
                        </div>
                        <input type="hidden" value="" name="orden_compra_detalle_id" id="orden_compra_detalle_id">
                        <div class="col-sm-12 col-md-12 col-lg-4 mb-3" id="traslado_select" style="display: none;">
                            <div class="form-group">
                                <label for="traslado_id">{{ __('Traslado') }}</label>
                                <select required class="form-select" id="traslado_id" name="traslado_id">
                                    <option value=""></option>
                                    <!-- Aquí cargarás las opciones de las órdenes de compra dinámicamente usando JavaScript -->
                                </select>
                            </div>
                        </div>
                        <div class="col-sm-12 col-md-12 col-lg-4 mb-3" id="barcode_select" style="display: none;">
                            <div class="form-group">
                                <label for="traslado_id">{{ __('Código de barra') }}</label>
                                <select required class="form-select" id="barcode2" name="barcode2">
                                    <option value=""></option>
                                    <!-- Aquí cargarás las opciones de las órdenes de compra dinámicamente usando JavaScript -->
                                </select>
                            </div>
                        </div>
                        <div class="col-sm-12 col-md-12 col-lg-4 mb-3">
                            <div class="form-group">
                                <label for="barcode">{{ __('Proveedor') }}</label>
                                <select required class="form-select" id="proveedor_id" name="proveedor_id">
                                    <option value=""></option>
                                    @foreach ($proveedores as $proveedor)
                                        <option value="{{ $proveedor->id }}">{{ $proveedor->nombreProveedor }}</option>
                                    @endforeach
                                </select>
                            </div>
                        </div>
                        <div class="col-sm-12 col-md-12 col-lg-4 mb-3">
                            <div class="form-group">
                                <label for="barcode">{{ __('Producto') }}</label>
                                <select required class="form-select" id="producto_id" name="producto_id" disabled>
                                    <option value=""></option>

                                </select>
                            </div>
                        </div>
                        <div class="col-sm-12 col-md-12 col-lg-4 mb-3">
                            <div class="form-group">
                                <label for="um_id">{{ __('Unidad de Medida') }}</label>
                                <select class="form-select" id="um_id" name="um_id">
                                    @foreach ($ums as $um)
                                        <option value={{ $um->id }}>{{ $um->unidad }}</option>
                                    @endforeach
                                </select>
                            </div>
                        </div>

                        <div class="col-sm-12 col-md-12 col-lg-4 mb-3">
                            <div class="form-group">
                                <label for="location_id">{{ __('Ubicacion') }}</label>
                                <select class="form-select" id="location_id" name="location_id">
                                    <option value="0" selected disabled>Seleccione..</option>
                                </select>
                            </div>
                        </div>

                        <div class="col-sm-12 col-md-12 col-lg-4 mb-3">
                            <div class="form-group">
                                <label for="barcode">{{ __('Cantidad a recibir') }}</label>
                                <input required class="form-control" id="qty" name="qty">
                            </div>
                        </div>
                        <div class="col-sm-12 col-md-12 col-lg-4 mb-3">
                            <div class="form-group">
                                <label for="barcode">{{ __('Precio') }}</label>
                                <input required class="form-control" id="precio" name="precio">
                            </div>
                        </div>
                        <div class="col-sm-12 col-md-12 col-lg-4 mb-3">
                            <div class="form-group">
                                <label for="barcode">{{ __('Fecha') }}</label>
                                <input type="date" value="{{ date('Y-m-d') }}" required class="form-control" id="fecha" name="fecha">
                            </div>
                        </div>
                        <div class="col-sm-12 col-md-12 col-lg-4 mb-3">
                            <div class="form-group">
                                <label for="cantidad_en_bodega">{{ __('Cantidad en bodega seleccionada') }}</label>
                                <input class="form-control" id="cantidad_bodega" name="cantidad_bodega" disabled>
                            </div>
                        </div>
                        <div class="col-sm-12 col-md-12 col-lg-4 mb-3" id="barcode_div">
                            <div class="form-group">
                                <label for="barcode">{{ __('Codigo de barra') }}</label>
                                <div class="input-group">
                                    <input name="barcode" value="" required class="form-control" 
                                        id="barcode" 
                                        pattern="\d{10,}" 
                                        title="El código de barras debe contener solo números, y una cantidad minima de 10 números">
                                </div>
                            </div>
                        </div>
                        <div class="col-md-12">
                            <button class="btn btn-primary"><i class="ki-outline ki-arrow-down fs-2"></i> Ingresar</button>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>

    <script>
        document.getElementById('barcode').addEventListener('input', function (e) {
            e.target.value = e.target.value.replace(/\D/g, '');
        });
    </script>
@endsection