{% extends "base.html" %}
{% load static %}
{% load custom_tags_and_filters %}
{% block extrahead %}
    <link rel="stylesheet" type="text/css" href="{% static 'NEMO_monitors/monitors.css' %}" />
{% endblock %}
{% block title %}Monitors for {{ tool.name }}{% endblock %}
{% block content %}
    <div class="well well-monitors-dashboard">
        <ol class="breadcrumb breadcrumb-monitors-dashboard">
            <li>
                <a href="{% url 'monitors' %}">Dashboard</a>
            </li>
            {% if tool_category %}
                {% for ancestor in tool_category.ancestors %}
                    <li>
                        <a href="{% url 'monitors_category' ancestor.path %}">{{ ancestor.name }}</a>
                    </li>
                {% endfor %}
                <li>
                    <a href="{% url 'monitors_category' tool_category.path %}">{{ tool_category.name }}</a>
                </li>
            {% endif %}
            <li class="active">{{ tool.name }}</li>
        </ol>
        <div class="panel-body">
            {% if messages %}
                <div class="monitor-messages" style="margin-bottom: 15px;">
                    {% for message in messages %}
                        <div class="alert {% if 'error' in message.tags %}alert-danger{% elif 'warning' in message.tags %}alert-warning{% elif 'success' in message.tags %}alert-success{% else %}alert-info{% endif %}"
                             role="alert">
                            {{ message }}
                        </div>
                    {% endfor %}
                </div>
            {% endif %}
            <div class="form-inline" style="margin-bottom: 15px;">
                <h3 style="display:inline-block;margin-right:15px;">Monitors for {{ tool.name }}</h3>
            </div>
            {% if can_upload and monitors %}
                <div class="panel panel-default" style="margin-bottom: 20px;">
                    <div class="panel-heading"><strong>Add a data point</strong></div>
                    <div class="panel-body">
                        <form method="post"
                              id="tool-monitors-quick-add"
                              class="form-horizontal"
                              style="max-width: 720px;">
                            {% csrf_token %}
                            <input type="hidden" name="return_to_tool" value="{{ tool.id }}" />
                            <div class="form-group">
                                <label class="control-label col-sm-3" for="qa-monitor">Monitor</label>
                                <div class="col-sm-9">
                                    <select class="form-control" id="qa-monitor" required>
                                        <option value="">— Select monitor —</option>
                                        {% for monitor in monitors %}
                                            <option value="{{ monitor.id }}">{{ monitor.name }}</option>
                                        {% endfor %}
                                    </select>
                                </div>
                            </div>
                            <div id="qa-entry-section" style="display: none;">
                                <div class="form-group" id="qa-single-value-group">
                                    <label class="control-label col-sm-3" for="qa-value">Value</label>
                                    <div class="col-sm-9">
                                        <input class="form-control"
                                               type="number"
                                               step="any"
                                               id="qa-value"
                                               name="value"
                                               required />
                                    </div>
                                </div>
                                <div id="qa-column-fields"></div>
                                <div class="form-group">
                                    <label class="control-label col-sm-3" for="qa-date">Timestamp</label>
                                    <div class="col-sm-9">
                                        <input class="form-control"
                                               type="text"
                                               id="qa-date"
                                               name="created_date"
                                               placeholder="leave blank for now" />
                                        <span class="help-block">e.g. 2026-05-14 12:30 or 05/14/2026 12:30 PM</span>
                                    </div>
                                </div>
                                <div class="form-group" id="qa-notes-group">
                                    <label class="control-label col-sm-3" for="qa-notes">Notes</label>
                                    <div class="col-sm-9">
                                        <textarea class="form-control"
                                                  id="qa-notes"
                                                  name="notes"
                                                  rows="2"
                                                  placeholder="Optional"></textarea>
                                    </div>
                                </div>
                                <div class="form-group">
                                    <div class="col-sm-offset-3 col-sm-9">
                                        <button type="submit" class="btn btn-success">Add data point</button>
                                        <span class="help-block" style="margin-top:8px;">
                                            Bulk CSV upload and editing points: open the monitor and use the <strong>Upload</strong> or <strong>Data</strong> tab.
                                        </span>
                                    </div>
                                </div>
                            </div>
                        </form>
                    </div>
                </div>
                <script type="text/javascript">
                    (function ()
                    {
                        const tpl = "{{ add_data_action_template|escapejs }}";
                        const monitorsColumns = {{ monitors_columns_json|safe }};
                        const form = document.getElementById("tool-monitors-quick-add");
                        const qaMonitorSelect = document.getElementById("qa-monitor");
                        const qaSingleValueGroup = document.getElementById("qa-single-value-group");
                        const qaValue = document.getElementById("qa-value");
                        const qaColumnFields = document.getElementById("qa-column-fields");
                        const qaNotesGroup = document.getElementById("qa-notes-group");
                        const qaEntrySection = document.getElementById("qa-entry-section");

                        if (!form) return;

                        function escapeHtml(str)
                        {
                            return String(str)
                                .replace(/&/g, "&amp;")
                                .replace(/</g, "&lt;")
                                .replace(/>/g, "&gt;")
                                .replace(/"/g, "&quot;");
                        }

                        function updateValueFields()
                        {
                            const mid = qaMonitorSelect.value;
                            const cols = (monitorsColumns[mid] || []);
                            qaColumnFields.innerHTML = "";
                            if (cols.length > 0)
                            {
                                qaSingleValueGroup.style.display = "none";
                                qaNotesGroup.style.display = "none";
                                qaValue.removeAttribute("required");
                                qaValue.value = "";
                                cols.forEach(function (col)
                                {
                                    const fieldId = "qa-col-" + col.id;
                                    const isString = col.data_type === "string";
                                    const isInt = col.data_type === "integer";
                                    let inputHtml;
                                    if (isString)
                                    {
                                        inputHtml = '<input class="form-control" type="text"'
                                            + ' id="' + fieldId + '" name="col_value_' + col.id + '" />';
                                    }
                                    else
                                    {
                                        inputHtml = '<input class="form-control" type="number"'
                                            + ' step="' + (isInt ? "1" : "any") + '"'
                                            + ' id="' + fieldId + '" name="col_value_' + col.id + '" />';
                                    }
                                    qaColumnFields.innerHTML +=
                                        '<div class="form-group">'
                                        + '<label class="control-label col-sm-3" for="' + fieldId + '">'
                                        + escapeHtml(col.name) + '</label>'
                                        + '<div class="col-sm-9">' + inputHtml + '</div>'
                                        + '</div>';
                                });
                            }
                            else
                            {
                                qaSingleValueGroup.style.display = "";
                                qaNotesGroup.style.display = "";
                                qaValue.setAttribute("required", "");
                            }
                        }

                        function syncEntryVisibility()
                        {
                            const mid = qaMonitorSelect.value;
                            if (!mid)
                            {
                                qaEntrySection.style.display = "none";
                                qaValue.removeAttribute("required");
                                return;
                            }
                            qaEntrySection.style.display = "";
                            updateValueFields();
                        }

                        qaMonitorSelect.addEventListener("change", syncEntryVisibility);

                        form.addEventListener("submit", function (e)
                        {
                            const mid = qaMonitorSelect.value;
                            if (!mid)
                            {
                                e.preventDefault();
                                return;
                            }
                            form.action = tpl.replace("/0/", "/" + mid + "/");
                        });
                    })();
                </script>
            {% endif %}
            {% if monitors %}
                <table class="table table-bordered table-hover table-striped">
                    <thead>
                        <tr class="info">
                            <th>Name</th>
                            <th>Last monitor</th>
                            <th></th>
                        </tr>
                    </thead>
                    <tbody>
                        {% for monitor in monitors %}
                            <tr class="{% if monitor.alert_triggered %}danger{% endif %}">
                                <td>
                                    <a href="{% url 'monitor_details' monitor.id %}">{{ monitor.name }}</a>
                                </td>
                                <td>{{ monitor.last_read|date:"SHORT_DATETIME_FORMAT"|default:"no data" }}</td>
                                <td class="text-right">
                                    <a class="btn btn-default btn-xs" href="{% url 'monitor_details' monitor.id %}">View</a>
                                </td>
                            </tr>
                        {% endfor %}
                    </tbody>
                </table>
            {% else %}
                <div class="dashboard-no-group-items">
                    No monitors yet for this tool. Monitors are created by site staff in
                    <strong>Django administration</strong> (Monitors).
                    {% if user.is_superuser and "django.contrib.admin"|app_installed %}
                        <br>
                        <br>
                        <a class="btn btn-default" href="{% url 'admin:monitors_monitor_add' %}?tool={{ tool.id }}">Add monitor in admin</a>
                    {% endif %}
                </div>
            {% endif %}
        </div>
    </div>
{% endblock %}