{{Form::open(['route' => ['actualizar_formularios',$formulario->id], 'method' => 'POST'])}}
<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">Editar 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">
                                <div class="form-group">
                                    <div class="select">
                                        <label for="categorias" style="padding: 3px 3px;width:100%;">Farmacias</label>
                                        <select name="farmacia" id="farmacia" class="form-control" style="width: 100%;">
                                            @foreach ($farmacias as $farmacia)
                                                <option value="{{ $farmacia->id }}" {{ $farmacia->id == $formulario->farmacia_id ? 'selected' : '' }}>{{ $farmacia->nombre }}</option>
                                            @endforeach
                                        </select>
                                        
                                        
                                    </div>
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="form-group">
                                    <label for="codigo" style="padding: 3px 3px;">Nombre farmacia</label>

                                <input type="text" name="farmacia_nombre" value="{{$formulario->nombre_editado}}" 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="{{$formulario->cidc_farmacia}}" class="form-control" placeholder="CIDC Farmacia">	
                                    </div>
                                </label>
                                </div>
                                <div class="col-md-4">
                                    <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="{{$formulario->direccion_farmacia}}" class="form-control" placeholder="Dirección de la farmacia">	
                                    </div>
                                </label>
                                </div>
                                <div class="col-md-4">
                                    <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="{{$formulario->ciudad_farmacia}}" 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="number" name="rnc_farmacia" id="rnc_farmacia"  value="{{$formulario->rnc_farmacia}}" 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="{{$formulario->codigo_id}}" 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" value="{{!empty($formulario->fecha_formulario) ? \Carbon\Carbon::parse($formulario->fecha_formulario)->format('Y-m-d') : ''}}" 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">
                                        @foreach ($formulario->detalles as $detalle)
                                        
                                            <tr>
                                                <td class="d-none"><input type="number" class="form-control" name="producto[{{ $loop->index }}][product_id]" required style="width: 130px;" value="{{ $detalle->producto_id }}"></td>
                                                <td><input type="number" class="form-control cantidad" name="producto[{{ $loop->index }}][cantidad]" required style="width: 80px;" value="{{ intval($detalle->cantidad) }}" step="1"></td>
                                                <td><input type="number" class="form-control unidad" name="producto[{{ $loop->index }}][unidad]" required style="width: 80px;" value="{{ intval($detalle->unidad) }}" step="1"></td>
                                                <td><input type="text" class="form-control" name="producto[{{ $loop->index }}][label]" readonly style="width: 500px;" value="{{ $detalle->producto?->name }}" ></td>
                                                <td><input type="number" class="form-control" name="producto[{{ $loop->index }}][categoria]" required style="width: 80px;" value="{{ $detalle->categoria_id }}"></td>
                                                <td><input type="number" class="form-control total" name="producto[{{ $loop->index }}][total]" readonly style="width: 100px;" value="{{ intval($detalle->total) }}" step="1"></td>
                                            </tr>
                                        @endforeach
                                    </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;">Actualizar</button>
            </div>

        {{-- <div>
                <button class="btn btn-success" onclick="redirigirVistaFormularioImagen({{ $formulario->id }})">
                    Imprimir
                    <i class="fas fa-print"></i>
                </button>
            </div> --}}
        </div>
    </div>
    {{ Form::close() }}
    
    <script>

    $(document).ready(function () {
        // Cuando se selecciona una farmacia, mostrar su nombre en el campo de texto
        $('#farmacia').on('change', function () {
            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_nombre').val(data.nombre);
                $('#direccion_farmacia').val(data.direccion);
                $('#ciudad_farmacia').val(data.city);
                $('#rnc_farmacia').val(data.rnc);
            }
        });
        });

        // Habilitar la edición del nombre de la farmacia
        $('#editar_farmacia').on('click', function () {
            $('#farmacia_nombre').prop('readonly', false).focus();
        });

        // Actualizar el campo oculto con el nombre editado
        $('#farmacia_nombre').on('input', function () {
            $('#farmacia_nombre_editado').val($(this).val());
        });

        // Evitar que el nombre editado afecte el backend
        $('#farmacia_nombre').on('input', function () {
            // Este cambio solo afecta el frontend y no se envía al backend
        });
    });


    $(document).on('input', '.cantidad, .unidad, .total', function() {
        let value = Math.floor($(this).val()); // Redondear hacia abajo
        $(this).val(value);
    });
        
        function redirigirVistaFormularioImagen(formularioId) {
        // Redirigir a la ruta de vistaFormularioImagen
        window.location.href = "{{ route('formularios.impresion', ':id') }}".replace(':id', formularioId);
        }
        //     function imprimirPagina() {
        //     window.print();
        //  }

        var index = {{ $formulario->detalles->count() }};
    
        $(document).ready(function() {
            $('#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) {
                                    let unidad = item.unidad ? item.unidad.name : "--";
                                    let categoria = item.categoria ? item.categoria.name : "--";
                                    return {
                                        label: item.name,
                                        value: item.name,
                                        id: item.id,
                                        categoria: categoria,
                                        unidad: unidad,
                                    };
                                }));
                            }
                        });
                    },
                    select: function(event, ui) {
                        
                let tableBody = $("#productoTable");

                        
                        let exists = false;
                        tableBody.find('tr').each(function() {
                            let productId = $(this).find('input[name$="[product_id]"]').val(); 
                            if (productId == 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="${ui.item.unidad}"></td>
                                <td><input type="text" class="form-control" name="producto[${index}][label]" readonly style="width: 130px;" value="${ui.item.label}"></td>
                                <td><input type="number" class="form-control" name="producto[${index}][categoria]" required style="width: 80px;" value="${ui.item.categoria}"></td>
                                <td><input type="number" class="form-control total" name="producto[${index}][total]" readonly style="width: 100px;" value="${ui.item.unidad * 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 = row.find('.cantidad').val();
                let unidad = row.find('.unidad').val();
                let total = cantidad * unidad;
                row.find('.total').val(total);
            });
        });
    </script>