{% extends "base.html" %}
{% load static %}
{% load custom_tags_and_filters %}
{% block title %}{% if monitor %}Edit monitor{% else %}New monitor{% endif %}{% endblock %}
{% block content %}
    <div class="well">
        <ol class="breadcrumb">
            <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>
                <a href="{% url 'monitors_for_tool' tool.id %}">{{ tool.name }}</a>
            </li>
            <li class="active">{% if monitor %}Edit {{ monitor.name }}{% else %}New monitor{% endif %}</li>
        </ol>
        <form method="POST" class="form-horizontal">
            {% csrf_token %}
            {% if error %}<div class="alert alert-danger">{{ error }}</div>{% endif %}
            <div class="form-group">
                <label class="control-label col-md-3" for="name">Name</label>
                <div class="col-md-6">
                    <input type="text"
                           id="name"
                           name="name"
                           class="form-control"
                           required
                           value="{{ monitor.name|default:'' }}" />
                </div>
            </div>
            <div class="form-group">
                <label class="control-label col-md-3" for="description">Description</label>
                <div class="col-md-6">
                    <textarea id="description"
                              name="description"
                              class="form-control"
                              rows="4">{{ monitor.description|default_if_none:'' }}</textarea>
                    <span class="help-block">Shown at the top of the monitor details page. HTML is allowed (e.g. &lt;a href&gt; links). Use a full URL (https://…) or a bare domain (google.com); bare domains are saved with https:// so they do not break on chart/data tabs.</span>
                </div>
            </div>
            <div class="form-group">
                <div class="col-md-offset-3 col-md-6">
                    <label class="checkbox-inline">
                        <input type="checkbox"
                               name="visible"
                               value="1"
                               {% if monitor is None or monitor.visible %}checked{% endif %} />
                        Visible in dashboard
                    </label>
                </div>
            </div>
            <div class="form-group">
                <label class="control-label col-md-3">Data entry fields</label>
                <div class="col-md-9">
                    <p class="help-block" style="margin-bottom: 8px;">
                        Define the fields shown when adding data and expected in uploaded CSVs.
                        New monitors start with <strong>Value</strong> and <strong>Notes</strong>; remove or rename them as needed.
                        For numeric fields, optional control limits can be shown on the chart: <strong>3σ (statistical)</strong> uses mean ± 3 standard deviations of data in the selected date range, or <strong>fixed</strong> min/max lines.
                    </p>
                    <table class="table table-condensed table-bordered" id="data-entry-fields-table" style="margin-bottom: 8px;">
                        <thead>
                            <tr>
                                <th>Field name</th>
                                <th>Type</th>
                                <th>Unit label</th>
                                <th>Control limits</th>
                                <th>Fixed min</th>
                                <th>Fixed max</th>
                                <th></th>
                            </tr>
                        </thead>
                        <tbody id="data-entry-fields-body">
                            {% for field in data_entry_fields %}
                                <tr class="data-entry-field-row">
                                    <td>
                                        <input type="text"
                                               name="column_name[]"
                                               class="form-control input-sm"
                                               value="{{ field.name }}"
                                               placeholder="e.g. Mean" />
                                    </td>
                                    <td>
                                        <select name="column_type[]" class="form-control input-sm js-column-type">
                                            {% for value, label in column_type_choices %}
                                                <option value="{{ value }}" {% if field.data_type == value %}selected{% endif %}>{{ label }}</option>
                                            {% endfor %}
                                        </select>
                                    </td>
                                    <td>
                                        <input type="text"
                                               name="column_unit_label[]"
                                               class="form-control input-sm"
                                               value="{{ field.unit_label|default_if_none:'' }}"
                                               placeholder="e.g. A/min, %" />
                                    </td>
                                    <td class="js-control-limits-cell">
                                        <label class="radio-inline" style="margin-right: 6px;">
                                            <input type="radio"
                                                   name="column_control_limits_mode_{{ forloop.counter0 }}"
                                                   class="js-limits-mode"
                                                   value=""
                                                   data-field-name="column_control_limits_mode[]"
                                                   {% if not field.control_limits_mode %}checked{% endif %} />
                                            None
                                        </label>
                                        <label class="radio-inline" style="margin-right: 6px;">
                                            <input type="radio"
                                                   class="js-limits-mode"
                                                   value="statistical"
                                                   data-field-name="column_control_limits_mode[]"
                                                   {% if field.control_limits_mode == 'statistical' %}checked{% endif %} />
                                            3σ
                                        </label>
                                        <label class="radio-inline">
                                            <input type="radio"
                                                   class="js-limits-mode"
                                                   value="fixed"
                                                   data-field-name="column_control_limits_mode[]"
                                                   {% if field.control_limits_mode == 'fixed' %}checked{% endif %} />
                                            Fixed
                                        </label>
                                        <input type="hidden"
                                               name="column_control_limits_mode[]"
                                               class="js-limits-mode-value"
                                               value="{{ field.control_limits_mode|default:'' }}" />
                                    </td>
                                    <td>
                                        <input type="number"
                                               step="any"
                                               name="column_fixed_min[]"
                                               class="form-control input-sm js-fixed-min"
                                               value="{% if field.fixed_limit_min is not None %}{{ field.fixed_limit_min }}{% endif %}"
                                               placeholder="Min" />
                                    </td>
                                    <td>
                                        <input type="number"
                                               step="any"
                                               name="column_fixed_max[]"
                                               class="form-control input-sm js-fixed-max"
                                               value="{% if field.fixed_limit_max is not None %}{{ field.fixed_limit_max }}{% endif %}"
                                               placeholder="Max" />
                                    </td>
                                    <td class="text-center">
                                        <button type="button" class="btn btn-danger btn-xs js-remove-data-entry-field">Remove</button>
                                    </td>
                                </tr>
                            {% endfor %}
                        </tbody>
                    </table>
                    <button type="button" class="btn btn-default btn-sm" id="add-data-entry-field-btn">
                        + Add data entry field
                    </button>
                </div>
            </div>
            <div class="form-group">
                <div class="col-md-offset-3 col-md-6">
                    <button class="btn btn-success" type="submit">
                        {% if monitor %}Save changes{% else %}Create monitor{% endif %}
                    </button>
                    <a class="btn btn-default" href="{% url 'monitors_for_tool' tool.id %}">Cancel</a>
                </div>
            </div>
        </form>
    </div>
    <script>
        const columnTypeChoices = [
            {% for value, label in column_type_choices %}
                { value: "{{ value }}", label: "{{ label }}" }{% if not forloop.last %},{% endif %}
            {% endfor %}
        ];

        function buildTypeSelect(selectedValue) {
            let opts = columnTypeChoices.map(function(c) {
                const sel = c.value === selectedValue ? ' selected' : '';
                return '<option value="' + c.value + '"' + sel + '>' + c.label + '</option>';
            }).join('');
            return '<select name="column_type[]" class="form-control input-sm js-column-type">' + opts + '</select>';
        }

        function syncLimitsModeHidden(row) {
            const checked = row.querySelector('.js-limits-mode:checked');
            const hidden = row.querySelector('.js-limits-mode-value');
            if (hidden && checked) {
                hidden.value = checked.value;
            }
        }

        function updateControlLimitsRowState(row) {
            const typeSelect = row.querySelector('.js-column-type');
            const isPlottable = typeSelect && typeSelect.value !== 'string';
            const mode = row.querySelector('.js-limits-mode-value');
            const modeValue = mode ? mode.value : '';
            const fixedMin = row.querySelector('.js-fixed-min');
            const fixedMax = row.querySelector('.js-fixed-max');
            const limitsRadios = row.querySelectorAll('.js-limits-mode');
            const limitsCell = row.querySelector('.js-control-limits-cell');

            limitsRadios.forEach(function(radio) {
                radio.disabled = !isPlottable;
            });
            if (!isPlottable && limitsCell) {
                limitsRadios.forEach(function(radio) {
                    if (radio.value === '') {
                        radio.checked = true;
                    }
                });
                if (mode) {
                    mode.value = '';
                }
            }
            const fixedEnabled = isPlottable && modeValue === 'fixed';
            if (fixedMin) {
                fixedMin.disabled = !fixedEnabled;
                if (!fixedEnabled) {
                    fixedMin.value = '';
                }
            }
            if (fixedMax) {
                fixedMax.disabled = !fixedEnabled;
                if (!fixedEnabled) {
                    fixedMax.value = '';
                }
            }
        }

        function buildDataEntryFieldRow(name, type, unitLabel, limitsMode, fixedMin, fixedMax) {
            name = name || '';
            type = type || 'float';
            unitLabel = unitLabel || '';
            limitsMode = limitsMode || '';
            fixedMin = fixedMin != null && fixedMin !== '' ? fixedMin : '';
            fixedMax = fixedMax != null && fixedMax !== '' ? fixedMax : '';
            const noneChecked = limitsMode === '' ? ' checked' : '';
            const statChecked = limitsMode === 'statistical' ? ' checked' : '';
            const fixedChecked = limitsMode === 'fixed' ? ' checked' : '';
            return '<tr class="data-entry-field-row">'
                + '<td><input type="text" name="column_name[]" class="form-control input-sm" value="' + name + '" placeholder="e.g. Mean" /></td>'
                + '<td>' + buildTypeSelect(type) + '</td>'
                + '<td><input type="text" name="column_unit_label[]" class="form-control input-sm" value="' + unitLabel + '" placeholder="e.g. A/min, %" /></td>'
                + '<td class="js-control-limits-cell">'
                + '<label class="radio-inline" style="margin-right: 6px;"><input type="radio" class="js-limits-mode" value="" data-field-name="column_control_limits_mode[]"' + noneChecked + ' /> None</label>'
                + '<label class="radio-inline" style="margin-right: 6px;"><input type="radio" class="js-limits-mode" value="statistical" data-field-name="column_control_limits_mode[]"' + statChecked + ' /> 3σ</label>'
                + '<label class="radio-inline"><input type="radio" class="js-limits-mode" value="fixed" data-field-name="column_control_limits_mode[]"' + fixedChecked + ' /> Fixed</label>'
                + '<input type="hidden" name="column_control_limits_mode[]" class="js-limits-mode-value" value="' + limitsMode + '" />'
                + '</td>'
                + '<td><input type="number" step="any" name="column_fixed_min[]" class="form-control input-sm js-fixed-min" value="' + fixedMin + '" placeholder="Min" /></td>'
                + '<td><input type="number" step="any" name="column_fixed_max[]" class="form-control input-sm js-fixed-max" value="' + fixedMax + '" placeholder="Max" /></td>'
                + '<td class="text-center"><button type="button" class="btn btn-danger btn-xs js-remove-data-entry-field">Remove</button></td>'
                + '</tr>';
        }

        function initDataEntryFieldRow(row) {
            syncLimitsModeHidden(row);
            updateControlLimitsRowState(row);
        }

        document.getElementById('add-data-entry-field-btn').addEventListener('click', function() {
            const tbody = document.getElementById('data-entry-fields-body');
            tbody.insertAdjacentHTML('beforeend', buildDataEntryFieldRow());
            initDataEntryFieldRow(tbody.lastElementChild);
        });

        document.getElementById('data-entry-fields-body').addEventListener('click', function(e) {
            if (e.target && e.target.classList.contains('js-remove-data-entry-field')) {
                e.target.closest('tr').remove();
            }
        });

        document.getElementById('data-entry-fields-body').addEventListener('change', function(e) {
            const row = e.target.closest('tr');
            if (!row) {
                return;
            }
            if (e.target.classList.contains('js-limits-mode')) {
                syncLimitsModeHidden(row);
            }
            if (e.target.classList.contains('js-limits-mode') || e.target.classList.contains('js-column-type')) {
                updateControlLimitsRowState(row);
            }
        });

        document.querySelectorAll('#data-entry-fields-body .data-entry-field-row').forEach(initDataEntryFieldRow);
    </script>
{% endblock %}