{% extends 'base.html' %}

{% block content %}

<h1> Realizar Lectura</h1>


<form action="/readings" method="post">
    <label for="plant_select">Seleccionar Planta:</label>
    <select id="plant_select" name="plant_select" class="form-control" required>
        <option value="type" class="form-control">Seleccione una planta</option>
        {% for plant in plants %}
            <option value="{{ plant['_id'] }}">{{ plant['species'] }} - {{ plant['num. planta'] }} - {{ plant['num grupo'] }}</option>
        {% endfor %}
        {% endfor %}
    </select><br><br>

    <label for="Tipo">Tipo de Lectura:</label>
    <select id="Tipo" name="Tipo" class="form-control" required>
    <option value="Voltaje">Voltaje</option>
    <!-- <option value="Corriente">Corriente</option>
        <option value="Resistencia">Resistencia</option>
        <option value="Carga">Carga</option> 
        -->
    </select>
    <br>
    <input type="submit" class="tn btn-primary" value="Enviar">
</form>
<script>
document.querySelector('form').addEventListener('submit', function(event) {
    event.preventDefault(); 
    window.location.href = '/data_acquisition';
});
</script>
<canvas id="myChart"></canvas>
<form action="/readings" method="post">
    <button type="submit" class="btn btn-primary">Enviar</button>
</form>
<script>
// Variables globales
let data = [];
let graphType = '';
let labels = ['Voltaje', 'Corriente', 'Resistencia', 'Carga'];

// Función para recopilar datos
function collectData() {
    // Preguntar por el tipo de gráfico
    graphType = prompt("¿Qué tipo de gráfico deseas crear? (Voltaje, Corriente, Resistencia, Carga)");

    // Validar que el tipo de gráfico esté en la lista de etiquetas
    if (!labels.includes(graphType)) {
        alert("Por favor, selecciona un tipo de gráfico válido: " + labels.join(", "));
        return;
    }

    // Preguntar por el número de datos
    let dataCount = parseInt(prompt("¿Cuántos datos deseas ingresar?"), 10);

    // Recopilar los datos
    for (let i = 0; i < dataCount; i++) {
        let value = parseFloat(prompt(`Ingresa el valor ${i + 1} para ${graphType}:`));
        data.push(value);
    }

    // Llamar a la función para graficar
    plotGraph(graphType, data);
}

// Función para graficar
function plotGraph(graphType, data) {
    const ctx = document.getElementById('myChart').getContext('2d');

    // Configuración del gráfico
    const chartConfig = {
        type: 'line', // Puedes cambiar el tipo de gráfico según tus necesidades
        data: {
            labels: data.map((_, index) => `Dato ${index + 1}`), // Etiquetas para el eje X
            datasets: [{
                label: graphType,
                data: data,
                borderColor: 'rgba(75, 192, 192, 1)',
                backgroundColor: 'rgba(75, 192, 192, 0.2)',
            }]
        },
        options: {
            responsive: true,
            scales: {
                y: {
                    beginAtZero: true,
                    title: {
                        display: true,
                        text: graphType
                    }
                },
                x: {
                    title: {
                        display: true,
                        text: 'Datos'
                    }
                }
            }
        }
    };

    // Crear el gráfico
    new Chart(ctx, chartConfig);
}
</script>

{% endblock %}