{% extends 'base.html' %}
{% load static %}

{% block title %}{{ form_template.name }} — IT Requests{% endblock %}

{% block extra_head %}
<link rel="stylesheet" href="{% static 'vision_it_request_forms/css/it_requests.css' %}">
<script src="{% static 'js/htmx.min.js' %}" defer></script>
{% endblock %}

{% block content %}
<div class="itr-page-header">
    <div>
        <a href="{% url 'it_requests:catalog' %}{% if current_group_id %}?group_id={{ current_group_id }}{% endif %}"
           style="font-size:0.85rem;color:#46B976;text-decoration:none;">← Back to catalog</a>
        <h1 style="margin: 4px 0 0 0;">{{ form_template.name }}</h1>
    </div>
</div>

{% if form_template.description %}
<p style="color:#6b7a8d;margin:0 0 20px 0;font-size:0.9rem;">{{ form_template.description }}</p>
{% endif %}

{# HTMX swap target for submission result #}
<div id="submit-result"></div>

<form class="itr-submit-form"
      hx-post="{% url 'it_requests:submit' form_template.id %}"
      hx-target="#submit-result"
      hx-swap="innerHTML"
      hx-indicator="#submit-btn"
      hx-vals='js:{"group_id": (document.getElementById("itr-group-id").value || localStorage.getItem("selectedGroupId") || "")}'
      hx-on:htmx:after-request="if(event.detail.successful){this.reset();window.scrollTo(0,document.getElementById('submit-result').offsetTop-20);itrRefreshConditions();}"
>
    {% csrf_token %}
    <input type="hidden" id="itr-group-id" name="group_id" value="{{ current_group_id|default:'' }}">

    {% for subform in schema.subforms %}
    {# Embed conditional_rules as JSON on the section for client-side evaluation #}
    <section class="itr-subform"
             {% if subform.conditional_rules %}data-conditions="{{ subform.conditional_rules|safe }}"{% endif %}>
        {% if subform.name %}
        <h2 class="itr-subform-title">{{ subform.name }}</h2>
        {% endif %}

        {% for field in subform.fields %}
            {% include 'vision_it_request_forms/_field.html' with field=field subform_slug=subform.slug group_users=group_users %}
        {% endfor %}
    </section>
    {% endfor %}

    <div class="itr-form-actions">
        <button type="submit" id="submit-btn" class="itr-btn itr-btn-primary"
                hx-disabled-elt="this">
            Submit Request
        </button>
        <a href="{% url 'it_requests:catalog' %}{% if current_group_id %}?group_id={{ current_group_id }}{% endif %}"
           class="itr-btn itr-btn-secondary">Cancel</a>
    </div>
</form>
{% endblock %}

{% block extra_scripts %}
<script>
/**
 * If the page was loaded without a group_id in the URL but localStorage has
 * one (set by the sidebar selector), reload with ?group_id=X so the server
 * can resolve any tenant-specific subform overrides on the initial GET.
 */
(function () {
    {% if not current_group_id %}
    var gid = localStorage.getItem('selectedGroupId');
    if (gid) {
        var url = new URL(window.location.href);
        url.searchParams.set('group_id', gid);
        window.location.replace(url.toString());
    }
    {% endif %}
})();

/**
 * Client-side conditional subform display.
 *
 * Reads data-conditions="[...]" JSON attributes from .itr-subform sections
 * and shows/hides them based on the current field values.  The server
 * independently evaluates the same rules, so hidden fields are never
 * required-validated server-side either.
 */
(function () {
    var form = document.querySelector('.itr-submit-form');
    if (!form) return;

    // On first run, snapshot which fields inside conditional sections were
    // originally required so we can restore that state when re-showing.
    form.querySelectorAll('.itr-subform[data-conditions] [required]').forEach(function (el) {
        el.dataset.wasRequired = '1';
    });

    function getAnswers() {
        var answers = {};
        form.querySelectorAll('[name^="f_"]').forEach(function (el) {
            // Full key is slug__fieldname; also index by bare fieldname for
            // condition evaluation (conditional_rules reference bare field names).
            var fullKey = el.name.slice(2); // strips "f_"
            var parts = fullKey.split('__');
            var bareKey = parts.length > 1 ? parts.slice(1).join('__') : fullKey;
            var val;
            if (el.type === 'checkbox') {
                val = el.checked ? 'true' : (answers[fullKey] || 'false');
            } else if (el.type === 'radio') {
                if (!el.checked) return;
                val = el.value;
            } else if (el.tagName === 'SELECT' && el.multiple) {
                val = Array.from(el.selectedOptions).map(function (o) { return o.value; });
            } else {
                val = el.value;
            }
            answers[fullKey] = val;
            answers[bareKey] = val; // allow conditions to reference bare field name
        });
        return answers;
    }

    function evalCondition(cond, answers) {
        var actual = answers[cond.field];
        var empty = actual === undefined || actual === null || actual === '' ||
                    (Array.isArray(actual) && actual.length === 0);
        var expected = cond.value;
        var op = cond.operator || 'equals';

        if (op === 'equals')      return String(actual) === String(expected);
        if (op === 'not_equals')  return String(actual) !== String(expected);
        if (op === 'in') {
            var list = Array.isArray(expected) ? expected : [expected];
            return list.map(String).indexOf(String(actual)) !== -1;
        }
        if (op === 'not_in') {
            var list = Array.isArray(expected) ? expected : [expected];
            return list.map(String).indexOf(String(actual)) === -1;
        }
        if (op === 'contains')     return String(actual || '').indexOf(String(expected)) !== -1;
        if (op === 'not_contains') return String(actual || '').indexOf(String(expected)) === -1;
        if (op === 'is_empty')     return empty;
        if (op === 'is_not_empty') return !empty;
        return true; // unknown operator — permissive
    }

    window.itrRefreshConditions = function () {
        var answers = getAnswers();
        form.querySelectorAll('.itr-subform[data-conditions]').forEach(function (section) {
            var conditions;
            try { conditions = JSON.parse(section.dataset.conditions); }
            catch (e) { return; }
            if (!conditions || !conditions.length) return;

            var visible = conditions.every(function (c) { return evalCondition(c, answers); });
            section.style.display = visible ? '' : 'none';

            // Toggle required on inputs so the browser's built-in validation
            // doesn't block submission for hidden fields
            section.querySelectorAll('input, select, textarea').forEach(function (el) {
                if (visible) {
                    if (el.dataset.wasRequired) el.setAttribute('required', '');
                } else {
                    el.removeAttribute('required');
                }
            });
        });
    };

    form.addEventListener('input', window.itrRefreshConditions);
    form.addEventListener('change', window.itrRefreshConditions);
    window.itrRefreshConditions();
})();
</script>
{% endblock %}