{% extends "base.html" %}

{% block title %}LabRat Setup{% endblock %}

{% block content %}
<h1>LabRat Setup</h1>

<h2>Logging</h2>
<strong>{{ set_mess }}</strong>

<!-- Flash Messages -->
{% with messages = get_flashed_messages(with_categories=true) %}
  {% if messages %}
    {% for category, message in messages %}
      <div class="flash {{ category }}">{{ message }}</div>
    {% endfor %}
  {% endif %}
{% endwith %}

<!-- ---------------------------
     Database Setup Form
---------------------------- -->
<form method="POST">
    {{ db_form.hidden_tag() }}
    <p>
        {{ db_form.file_path.label }}<br>
        {{ db_form.file_path(size=60) }}
        {% for error in db_form.file_path.errors %}
            <span style="color: red;">{{ error }}</span>
        {% endfor %}
    </p>
    <p>{{ db_form.submit() }}</p>
</form>

<hr>

<!-- ---------------------------
     Device & Sensor Setup Form
---------------------------- -->
<form method="POST" id="device-form">
    {{ device_form.hidden_tag() }}

    <div id="devices-container">
        {% for device in device_form.devices %}
        <div class="device-entry" data-index="{{ loop.index0 }}">
            <h3>Device {{ loop.index }}</h3>

            <p>{{ device.device_name.label }} {{ device.device_name() }}</p>
            <p>{{ device.device_guid.label }} {{ device.device_guid(placeholder="Auto-generated if left blank") }}</p>
            <p>{{ device.num_sensors.label }} {{ device.num_sensors() }}</p>
            <p>{{ device.device_info.label }} {{ device.device_info() }}</p>
            <p>{{ device.device_type.label }} {{ device.device_type() }}</p>
            <p>{{ device.device_location.label }} {{ device.device_location() }}</p>
            <p>{{ device.device_active.label }} {{ device.device_active() }}</p>
            <p>{{ device.connection.label }} {{ device.connection() }}</p>

            <!-- Sensors -->
            <div class="sensors-container">
                {% for sensor in device.sensors %}
                <div class="sensor-entry" data-index="{{ loop.index0 }}">
                    <h4>Sensor {{ loop.index }}</h4>
                    <p>{{ sensor.sens_name.label }} {{ sensor.sens_name() }}</p>
                    <p>{{ sensor.measures.label }} {{ sensor.measures() }}</p>
                    <p>{{ sensor.returns.label }} {{ sensor.returns() }}</p>
                    <p>{{ sensor.calib.label }} {{ sensor.calib() }}</p>
                    <p>{{ sensor.range.label }} {{ sensor.range() }}</p>
                    <p>{{ sensor.info.label }} {{ sensor.info() }}</p>
                    <p>{{ sensor.comments.label }} {{ sensor.comments() }}</p>
                </div>
                {% endfor %}
            </div>

            <button type="button" class="add-sensor-btn">+ Add Sensor</button>
        </div>
        {% endfor %}
    </div>

    <button type="button" id="add-device-btn">+ Add Device</button>
    <p>{{ device_form.submit() }}</p>
</form>

{% endblock %}

{% block scripts %}
{{ super() }}

<script>
document.addEventListener("DOMContentLoaded", () => {

    const devicesContainer = document.getElementById("devices-container");
    const addDeviceBtn = document.getElementById("add-device-btn");

    // Function to create a new device block
    function createDevice(index) {
        const div = document.createElement("div");
        div.className = "device-entry";
        div.dataset.index = index;

        div.innerHTML = `
            <h3>Device ${index + 1}</h3>
            <p>Name: <input type="text" name="devices-${index}-device_name" required></p>
            <p>GUID: <input type="text" name="devices-${index}-device_guid" placeholder="Auto-generated if left blank"></p>
            <p>Number of Sensors: <input type="number" name="devices-${index}-num_sensors" value="0"></p>
            <p>Info: <input type="text" name="devices-${index}-device_info" required></p>
            <p>Type: <input type="text" name="devices-${index}-device_type" required></p>
            <p>Location: <input type="text" name="devices-${index}-device_location" required></p>
            <p>Active: <input type="number" name="devices-${index}-device_active" min="0" max="1" value="1"></p>
            <p>Connection:
                <select name="devices-${index}-connection" required>
                    <option value="">--Select Connection--</option>
                    <option value="Serial">Serial</option>
                    <option value="MQTT">MQTT</option>
                    <option value="http">http</option>
                    <option value="Other">Other</option>
                </select>
            </p>
            <div class="sensors-container"></div>
            <button type="button" class="add-sensor-btn">+ Add Sensor</button>
        `;
        return div;
    }

    // Function to create a sensor block
    function createSensor(deviceIndex, sensorIndex) {
        const div = document.createElement("div");
        div.className = "sensor-entry";
        div.dataset.index = sensorIndex;

        div.innerHTML = `
            <h4>Sensor ${sensorIndex + 1}</h4>
            <p>Name: <input type="text" name="devices-${deviceIndex}-sensors-${sensorIndex}-sens_name" required></p>
            <p>Measures: <input type="text" name="devices-${deviceIndex}-sensors-${sensorIndex}-measures" required></p>
            <p>Returns: <input type="text" name="devices-${deviceIndex}-sensors-${sensorIndex}-returns" required></p>
            <p>Calibration: <input type="text" name="devices-${deviceIndex}-sensors-${sensorIndex}-calib" required></p>
            <p>Range: <input type="text" name="devices-${deviceIndex}-sensors-${sensorIndex}-range" required></p>
            <p>Info: <input type="text" name="devices-${deviceIndex}-sensors-${sensorIndex}-info" required></p>
            <p>Comments: <input type="text" name="devices-${deviceIndex}-sensors-${sensorIndex}-comments" required></p>
        `;
        return div;
    }

    // Add new device dynamically
    addDeviceBtn.addEventListener("click", () => {
        const deviceIndex = devicesContainer.children.length;
        const deviceBlock = createDevice(deviceIndex);
        devicesContainer.appendChild(deviceBlock);
    });

    // Delegate sensor addition to device container
    devicesContainer.addEventListener("click", (e) => {
        if (e.target.classList.contains("add-sensor-btn")) {
            const deviceDiv = e.target.closest(".device-entry");
            const deviceIndex = Array.from(devicesContainer.children).indexOf(deviceDiv);
            const sensorsContainer = deviceDiv.querySelector(".sensors-container");
            const sensorIndex = sensorsContainer.children.length;
            const sensorBlock = createSensor(deviceIndex, sensorIndex);
            sensorsContainer.appendChild(sensorBlock);
        }
    });
});
</script>
{% endblock %}