{% extends "base.html" %}

{% block title %}Dashboard — Plots{% endblock %}

{% block content %}
<h1>Dashboard</h1>

    <div class="plot-controls">
        <form method="GET" action="{{ url_for('dash.dash_plots') }}" id="controls-form" style="display:inline;">
            
            <label for="hours">Time window:</label>
            <select name="hours" id="hours" onchange="clearDates(); this.form.submit();">
                {% for h, label in [(1, 'Last 1 hour'), (6, 'Last 6 hours'),
                                    (24, 'Last 24 hours'), (168, 'Last 7 days'),
                                    (720, 'Last 30 days')] %}
                <option value="{{ h }}" {% if h == hours %}selected{% endif %}>{{ label }}</option>
                {% endfor %}
            </select>

            &nbsp;|&nbsp;

            <label for="date_from">From:</label>
            <input type="datetime-local" name="date_from" id="date_from" value="{{ date_from or '' }}">

            <label for="date_to">To:</label>
            <input type="datetime-local" name="date_to" id="date_to" value="{{ date_to or '' }}">

            <button type="submit" class="secondary-btn">Apply Range</button>
        </form>

        <form method="POST" action="{{ url_for('dash.dash_change') }}" style="display:inline;">
            <button type="submit" class="secondary-btn">← Change Devices</button>
        </form>
        <button id="refresh-btn" class="secondary-btn">↻ Refresh</button>
    </div>

    <script>
function clearDates() {
    document.getElementById("date_from").value = "";
    document.getElementById("date_to").value = "";
}
</script>

{% if plots %}
    {% for plot in plots %}
    <div class="plot-wrapper">
        <div id="plot-{{ plot.device.id }}" class="plotly-chart"></div>
    </div>
    {% endfor %}
{% else %}
    <p>No data found for the selected devices.</p>
{% endif %}

{% endblock %}

{% block scripts %}
{{ super() }}
<script src="https://cdn.plot.ly/plotly-latest.min.js"></script>
<script>
    {% for plot in plots %}
    (function() {
        {% if plot.fig_json %}
            // Pre-built subplot figure
            const fig = {{ plot.fig_json | safe }};
            Plotly.newPlot("plot-{{ plot.device.id }}", fig.data, fig.layout, { responsive: true });
        {% else %}
            // Simple traces + layout
            const traces = {{ plot.traces | safe }};
            const layout = {{ plot.layout | safe }};
            Plotly.newPlot("plot-{{ plot.device.id }}", traces, layout, { responsive: true });
        {% endif %}
    })();
    {% endfor %}

    document.getElementById("refresh-btn").addEventListener("click", () => {
        window.location.reload();
    });
</script>
{% endblock %}