{{Form::open(['route' => 'guardar_formularios', 'method' => 'POST','id'=>'formulario'])}}
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/sweetalert2@11/dist/sweetalert2.min.css">

<style>
    .modal-dialog {
    max-width: 95vw;
}
</style>
<div class="modal-dialog modal-xl">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="exampleModalLabel">Agregar formulario</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">

                    <div class="row"> 
                        <div class="card mb-3">

                            <div class="row">
                                <div class="col-md-4">
                                    <label for=""># Factura</label>
                                    <div class="form-group d-flex">
                                        <input type="text" name="numero_factura" id="numero_factura" class="form-control" placeholder="Ingrese #. Factura">
                                        <button type="button" onclick="searchFactura()" class="btn btn-primary btn-sm" id="btnBuscarFactura"><i class="fas fa-search"></i></button>
                                    </div>
                                </div>
                                <div class="col-md-4">
                                    <div class="form-group">
                                        <label for="categorias" style="padding: 3px 3px;width:100%;">Farmacias</label>
                                        <select name="farmacia" id="farmacia" class="form-control" style="width: 100%;" required>
                                            <option value="0">Seleccionar Farmacia</option>
                                            @foreach ($farmacias as $farmacia)
                                                <option value="{{$farmacia->id}}">{{$farmacia->CardName}} - {{$farmacia->CardCode}}</option>
                                            @endforeach
                                        </select>
        
        
                                       
                                    </div>
                                </div>
                                
                              

                                <div class="col-md-4">
                                    <div class="form-group">
                                        <label for="codigo" style="padding: 3px 3px;">Nombre farmacia</label>
                                        <input type="hidden" name="nombre_editado" id="farmacia_nombre_editado">
                                    <input type="text" name="farmacia_nombre" id="farmacia_nombre" class="form-control" placeholder="Editar farmacia">
                                    </div>
                                </div>
                                <div class="col-md-2">
                                    <div class="form-group">
                                    <label for="codigo" style="padding: 3px 3px;width: 100%;">CIDC</label>
                                    <input type="text" name="cidc_farmacia" id="cidc_farmacia"  value="" class="form-control" placeholder="CIDC Farmacia">	
                                    </div>
                                </label>
                                </div>
                                <div class="col-md-5">
                                    <div class="form-group">
                                    <label for="codigo" style="padding: 3px 3px;width: 100%;">Dirección</label>
                                    <input type="text" name="direccion_farmacia" id="direccion_farmacia"  value="" class="form-control" placeholder="Dirección de la farmacia">	
                                    </div>
                                </label>
                                </div>
                                <div class="col-md-5">
                                    <div class="form-group">
                                    <label for="codigo" style="padding: 3px 3px;width: 100%;">Ciudad</label>
                                    <input type="text" name="ciudad_farmacia" id="ciudad_farmacia"  value="" class="form-control" placeholder="Ciudad de la farmacia" >	
                                    </div>
                                </label>
                                </div>
                                <div class="col-md-4">
                                    <div class="form-group">
                                    <label for="codigo" style="padding: 3px 3px;width: 100%;">RNC</label>
                                    <input type="text" name="rnc_farmacia" id="rnc_farmacia"  value="" class="form-control" placeholder="Rnc de la farmacia" >	
                                    </div>
                                </label>
                                </div>
                              
                                <div class="col-md-4">
                                    <div class="form-group">
                                    <label for="codigo" style="padding: 3px 3px;width: 100%;">Código del formulario</label>
                                    <input type="number" name="codigo" id="codigo"  value="" class="form-control" placeholder="Código del formulario" required>	
                                    </div>
                                </label>
                                </div>

                                <div class="col-md-4">
                                <div class="form-group">
                                    <label for="fecha_formulario" style="padding: 3px 3px;">Fecha del formulario</label>
                                    <input type="date" name="fecha_formulario" id="fecha_formulario" class="form-control" required>
                                </div>
                            </div>
                            </div>

                        

                          

                            <div class="card-body">
                                <div class="mx-auto" style="width: 500px; padding: 5px 0px;">
                                    <input type="text" id="filterModal" class="form-control form-control-sm mb-3" placeholder="Buscar producto"  autofocus>
                                </div>
                                <div class="table-responsive">
                                    <table class="table table-responsive" id="formulario_table">
                                        <thead class="tabla-header">
                                            <tr style="color: black;">
                                                <th>Cantidad</th>
                                                <th>Unidad</th>
                                                <th>Nombre de la Sustancia o droga controlada</th>
                                                <th>Categoría</th>
                                                <th>Total</th>
                                            </tr> 
                                        </thead>
                                        <tbody style="cursor:pointer;" id="productoTable">
                                         
                                        </tbody>
                                    </table>
                                </div>
                            </div> 
                        </div>   
                    <div class="col-12">
                    
                    </div>

                </div>

                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cerrar</button>
                    <button type="submit" class="btn btn-primary"  style="background-color:#07CDAE; border:none;">Guardar</button>
                    {{-- <a href="{{ route('formularios.impresion') }}" class="btn btn-primary" style="background-color:#07CDAE; border:none;"> Guardar </a> --}}
                </div>

            </div>
        </div>
        {{Form::close()}}

        <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
<script>

$(document).ready(function () {
    // Cuando se selecciona una farmacia, mostrar su nombre en el campo de texto
    $('#farmacia').on('change', function () {
        // let selectedOption = $(this).find('option:selected');
        // $('#farmacia_nombre').val(selectedOption.text());
        let idfarmacia = $(this).val();
        let url_data="{{ route('farmacia_data',':id') }}";
        url_data = url_data.replace(':id', idfarmacia);
        $.ajax({
            url: url_data,
            type: "GET",
            data: { idfarmacia: idfarmacia },
            success: function (data_farmacia) {
                console.log({data_farmacia});
                $('#farmacia_nombre').val(data_farmacia.nombre);
                $('#direccion_farmacia').val(data_farmacia.direccion);
                 $('#ciudad_farmacia').val(data_farmacia.ciudad);
                $('#rnc_farmacia').val(data_farmacia.rnc);
            }
        });
    });

});

const searchFactura = async () => {
    let numero_factura = $('#numero_factura').val();
    consultarFactura(numero_factura);
}

const getProductControlado = async () => {
    try {
        let url_search = "{{ route('getProductoControlados') }}";
        
        // Convertir $.ajax en Promise para poder usar await
        const productos = await new Promise((resolve, reject) => {
            $.ajax({
                url: url_search,
                type: "POST",
                data: {},
                headers: {
                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                },
                success: function (data) {
                    console.log('Productos obtenidos:', data);
                    resolve(data); // ✅ Resuelve la Promise con los datos
                },
                error: function(err) {
                    console.error('Error:', err);
                    reject(err); // ✅ Rechaza la Promise en caso de error
                }
            });
        });
        
        return productos;
        
    } catch (error) {
        console.error('Error al obtener productos controlados:', error);
        return []; // Retorna array vacío en caso de error
    }
}

const consultarFactura = (numero_factura) => {
    let url_search = "{{ route('sap.factura') }}";

    $.ajax({
        url: url_search,
        type: "GET",
        data: { numero_factura: numero_factura },
        beforeSend: function () {
            $('#btnBuscarFactura').prop('disabled', true).html('<i class="fas fa-spinner fa-spin"></i>');
            Swal.fire({
                title: 'Buscando factura...',
                text: 'Por favor, espera mientras se realiza la búsqueda.',
                allowOutsideClick: false,
                didOpen: () => { Swal.showLoading(); }
            });
        },
        success: function (data) {
            console.log({ data });
            if (data.success) {
                buscarCliente(data.cabecera.CardCode);

                let tableBody = $("#productoTable");
                tableBody.empty();
                data.productos.forEach((item, indexProducto) => {
                    tableBody.append(`
                        <tr>
                            <td class="d-none"><input type="number" class="form-control" name="producto[${indexProducto}][product_id]" required style="width: 130px;" value="${item.id}"></td>
                            <td><input type="number" class="form-control cantidad" name="producto[${indexProducto}][cantidad]" required style="width: 80px;" value="${Number(item.CANTIDAD || 0).toFixed(2)}"></td>
                            <td><input type="number" class="form-control unidad" name="producto[${indexProducto}][unidad]" required style="width: 80px;" value="${Number(item.unidad || 0).toFixed(2)}"></td>
                            <td><input type="text" class="form-control" name="producto[${indexProducto}][label]" readonly style="width: 500px;" value="${item.NOMBRE}"></td>
                            <td><input type="number" class="form-control" name="producto[${indexProducto}][categoria]" required style="width: 80px;" value="4"></td>
                            <td><input type="number" class="form-control total" name="producto[${indexProducto}][total]" readonly style="width: 100px;" value="${(Number(item.CANTIDAD || 0) * Number(item.unidad || 0)).toFixed(2)}"></td>
                        </tr>
                    `);
                });

                Swal.close();
            } else {
                Swal.fire({
                    icon: 'warning',
                    title: 'Advertencia',
                    text: data.msg,
                    confirmButtonText: 'Entendido',
                    confirmButtonColor: '#007BFF'
                });
            }
        },
        error: (err) => {
            console.log({ err });
            Swal.fire({
                icon: 'error',
                title: 'Error en la búsqueda',
                text: 'Ocurrió un error al buscar la factura. Por favor, inténtalo de nuevo.',
                confirmButtonText: 'Entendido',
                confirmButtonColor: '#007BFF'
            });
        },
        complete: function () {
            $('#btnBuscarFactura').prop('disabled', false).html('<i class="fas fa-search"></i>');
        }
    });
}

const buscarCliente=(cliente)=>{
    console.log({cliente});
    let url_data="{{ route('cliente_data') }}";
     
        $.ajax({
            url: url_data,
            type: "GET",
            data: { cliente: cliente },
            success: function (data) {
                if(data.success){
                    console.log("Data cliente",{data});
                    $('#farmacia').val(data.cliente.id).trigger('change');
                    
        
                }else{
                    Swal.fire({
                        icon: 'warning',
                        title: 'Advertencia',
                        text: data.msg,
                        confirmButtonText: 'Entendido',
                        confirmButtonColor: '#007BFF'
                    });
                }
            },
            error:(err)=>{
                console.log({err});
                Swal.fire({
                        icon: 'error',
                        title: 'Error en la búsqueda',
                        text: 'Ocurrió un error al buscar el cliente. Por favor, inténtalo de nuevo.',
                        confirmButtonText: 'Entendido',
                        confirmButtonColor: '#007BFF'
                    });
            }
        });
}

var index=0;
const seleccionarProducto=(producto_data_send)=>{
   // Crear objeto con índices para cada producto
    let dataToSend = {};
    producto_data_send.forEach((producto, index) => {
        dataToSend[`productos[${index}][ARTICULO]`] = producto.ARTICULO;
        dataToSend[`productos[${index}][FACTURA]`] = producto.FACTURA;
        dataToSend[`productos[${index}][CANTIDAD]`] = producto.CANTIDAD;
    });
    let url_data="{{ route('producto_data') }}";
    $.ajax({
        url: url_data,
        type: "GET",
           data:dataToSend,
        success: function (product_data) {
           
            let tableBody = $("#productoTable");
            tableBody.empty(); // Limpiar tabla antes de agregar nuevos productos
            product_data.productos.forEach((item, indexProducto) => {
                  tableBody.append(`
                    <tr>
                        <td class="d-none"><input type="number" class="form-control" name="producto[${indexProducto}][product_id]" required style="width: 130px;" value="${item.id}"></td>
                        <td><input type="number" class="form-control cantidad" name="producto[${indexProducto}][cantidad]" required style="width: 80px;" value="${Number(item.CANTIDAD || 0).toFixed(2)}"></td>
                        <td><input type="number" class="form-control unidad" name="producto[${indexProducto}][unidad]" required style="width: 80px;" value="${Number(item.unidad || 0).toFixed(2)}"></td>
                        <td><input type="text" class="form-control" name="producto[${indexProducto}][label]" readonly style="width: 500px;" value="${item.NOMBRE}"></td>
                         <td><input type="number" class="form-control" name="producto[${indexProducto}][categoria]" required style="width: 80px;" value="4"></td>
                         <td><input type="number" class="form-control total" name="producto[${indexProducto}][total]" readonly style="width: 100px;" value="${Number(item.CANTIDAD || 0).toFixed(2)*Number(item.unidad || 0).toFixed(2)}"></td>

                    </tr>
                `);
                index=indexProducto+1;
            });
        },
        error:(err)=>{
            console.log({err});
            Swal.fire({
                    icon: 'error',
                    title: 'Error en la búsqueda',
                    text: 'Ocurrió un error al buscar el producto. Por favor, inténtalo de nuevo.',
                    confirmButtonText: 'Entendido',
                    confirmButtonColor: '#007BFF'
                });
        }
    });
}


    $(document).ready(function() {

          // Inicializar jQuery Validate
          $('#formulario').validate({
            rules: {
                farmacia: {
                    required: true,
                    min: 1 // Asegurarse de que no sea "Seleccionar Farmacia"
                }
            },
            messages: {
                farmacia: {
                    required: function() {
                        Swal.fire({
                            icon: 'warning',
                            title: 'Campo requerido',
                            text: 'Por favor, selecciona una farmacia.',
                            confirmButtonText: 'Entendido',
                            confirmButtonColor: '#007BFF'
                        });
                        return false;
                    },
                    min: function() {
                        Swal.fire({
                            icon: 'warning',
                            title: 'Selección inválida',
                            text: 'Por favor, selecciona una farmacia válida.',
                            confirmButtonText: 'Entendido',
                            confirmButtonColor: '#007BFF'
                        });
                        return false;
                    }
                }
            },
            submitHandler: function(form) {
                // Validar si hay productos en la tabla
                let productosEnTabla = $('#productoTable tr').length;
                    if (productosEnTabla === 0) {
                        Swal.fire({
                            icon: 'warning', // Tipo de alerta
                            title: 'Selección inválida',
                            text: 'Por favor, agrega al menos un producto.',
                            confirmButtonText: 'Entendido',
                            confirmButtonColor: '#007BFF'
                        });
                    return false;
                }

                // Si todo está correcto, enviar el formulario
                form.submit();
            }
        });

        $('#farmacia').select2({
            dropdownParent: $('#modal')
        });
        function initAutocomplete() {
            $("#filterModal").autocomplete({
                source: function(request, response) {
                    $.ajax({
                        url: "{{ route('searchProducto') }}",
                        type: "GET",
                        data: { query: request.term },
                        success: function(data) {                        
                            response($.map(data, function(item) {
                            if (!!item.unidad) {
                                unidad=item.unidad.id;
                            }else{
                                unidad="--";
                            }

                            if (!!item.categoria) {
                                categoria='';
                            }else{
                                categoria="--";
                            }
                            return {
                                label: item.name,
                                value: item.name,
                                id: item.id,
                                unidad: unidad,
                                // precio: item.precio
                            };
                        }));
                    }
                });
            },
            select: function(event, ui) {

                let tableBody = $("#productoTable");

                     
                     let exists = false;
                    tableBody.find('tr').each(function() {
                        if ($(this).find('input[name^="producto"]').val() == ui.item.id) {
                            exists = true;
                            return false; 
                        }
                    });

                    if (exists) {
                        Swal.fire({
                        icon: 'warning',
                        title: 'No se puede agregar el producto',
                        text: 'El producto ya está en la lista.',
                        confirmButtonText: 'Entendido',
                        confirmButtonColor: '#007BFF'
                    });
                    return false;
                    }
                    
                console.log(ui.item);
                tableBody.append(`
                    <tr>
                        <td class="d-none"><input type="number" class="form-control" name="producto[${index}][product_id]" required style="width: 130px;" value="${ui.item.id}"></td>
                        <td><input type="number" class="form-control cantidad" name="producto[${index}][cantidad]" required style="width: 80px;" value="1"></td>
                        <td><input type="number" class="form-control unidad" name="producto[${index}][unidad]" required style="width: 80px;" value="1"></td>
                        <td><input type="text" class="form-control" name="producto[${index}][label]" readonly style="width: 500px;" value="${ui.item.label}"></td>
                         <td><input type="number" class="form-control" name="producto[${index}][categoria]" required style="width: 80px;" value=""></td>
                         <td><input type="number" class="form-control total" name="producto[${index}][total]" readonly style="width: 100px;" value="1"></td>

                    </tr>
                `);
                index++;
                $(this).val(""); // Limpiar el input después de agregar el producto
                return false;
            },
            appendTo: "#modal" // Especifica dónde se renderizará la lista de sugerencias

        });
    }

    // Detectar cuando el modal se abre y aplicar el autocomplete
    $("#modal").on("shown.bs.modal", function () {
        initAutocomplete();
        $("#filterModal").focus(); // Poner foco en el input
    });

     // Actualizar el total cuando se cambie la cantidad o la unidad
     $(document).on('input', '.cantidad, .unidad', function() {
            let row = $(this).closest('tr');
            let cantidad = parseFloat(row.find('.cantidad').val()) || 0;
            let unidad = parseFloat(row.find('.unidad').val()) || 0;
            let total = cantidad * unidad;
            row.find('.total').val(total);
        });

});

 </script>