<!DOCTYPE html>
<html>

<head>
    <title>Test Autocomplete Medicamentos</title>
    <link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
    <style>
        body {
            font-family: Arial, sans-serif;
            padding: 20px;
        }

        .test-container {
            max-width: 600px;
            margin: 0 auto;
        }

        input {
            width: 100%;
            padding: 10px;
            margin: 10px 0;
            font-size: 16px;
        }

        .result {
            background: #f0f0f0;
            padding: 10px;
            margin: 10px 0;
        }
    </style>
</head>

<body>
    <div class="test-container">
        <h1>Test de Autocompletado de Medicamentos</h1>

        <div>
            <label>Medicamento (escribe al menos 2 caracteres):</label>
            <input type="text" id="medicamento_test" class="medicamento-input" data-row="test" autocomplete="off">
            <input type="hidden" id="medicamento_id_test">
        </div>

        <div>
            <label>Presentación (se llenará automáticamente):</label>
            <input type="text" id="presentacion_test" readonly>
        </div>

        <div class="result" id="resultado" style="display:none;">
            <h3>Medicamento Seleccionado:</h3>
            <p><strong>ID:</strong> <span id="res_id"></span></p>
            <p><strong>Denominación:</strong> <span id="res_denominacion"></span></p>
            <p><strong>Forma Farmacéutica:</strong> <span id="res_forma"></span></p>
        </div>
    </div>

    <script src="../public/js/jquery-3.1.1.min.js"></script>
    <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>
    <script>
        $(document).ready(function () {
            console.log("Inicializando autocomplete de prueba...");

            $('#medicamento_test').autocomplete({
                source: function (request, response) {
                    console.log("Buscando:", request.term);
                    $.ajax({
                        url: "../ajax/medicamentos.php?op=buscar_medicamentos",
                        dataType: "json",
                        data: { texto: request.term },
                        success: function (data) {
                            console.log("Datos recibidos:", data);
                            response(data);
                        },
                        error: function (xhr, status, error) {
                            console.error("Error:", error);
                            console.error("Response:", xhr.responseText);
                            response([]);
                        }
                    });
                },
                minLength: 2,
                select: function (event, ui) {
                    console.log("Seleccionado:", ui.item);
                    $(this).val(ui.item.denominacion);
                    $('#medicamento_id_test').val(ui.item.id);
                    $('#presentacion_test').val(ui.item.forma_farmaceutica);

                    // Mostrar resultado
                    $('#res_id').text(ui.item.id);
                    $('#res_denominacion').text(ui.item.denominacion);
                    $('#res_forma').text(ui.item.forma_farmaceutica);
                    $('#resultado').show();

                    return false;
                },
                focus: function (event, ui) {
                    $(this).val(ui.item.denominacion);
                    return false;
                }
            });

            console.log("Autocomplete inicializado correctamente");
        });
    </script>
</body>

</html>