{% extends 'django_forms_workflows/base.html' %}
{% load crispy_forms_tags %}
{% load static %}

{% block title %}{{ form_def.name }} - {{ site_name }}{% endblock %}

{% block content %}
<div class="row">
    <div class="col-lg-8 mx-auto">
        <div class="d-flex justify-content-between align-items-center mb-4">
            <h1>{{ form_def.name }}</h1>
            {% if is_draft %}
                <span class="badge bg-warning text-dark">Draft</span>
            {% endif %}
        </div>
        {% if form_def.instructions %}
            <div class="alert alert-info">
                <i class="bi bi-info-circle"></i> <strong>Helpful Info</strong>
                {{ form_def.instructions|safe }}
            </div>
        {% endif %}
        {% if form.errors %}
        <div class="alert alert-danger d-flex align-items-center gap-2" role="alert" id="form-error-summary">
            <i class="bi bi-exclamation-triangle-fill fs-5 flex-shrink-0"></i>
            <span>
                <strong>{{ form.errors|length }} field{{ form.errors|length|pluralize }} need{{ form.errors|length|pluralize:"s," }} attention.</strong>
                Each problem is highlighted in red below — please review and correct all errors before submitting.
            </span>
        </div>
        {% endif %}

        <div class="card">
            <div class="card-body">
                {% crispy form %}
            </div>
        </div>

        {% if form_def.allow_batch_import %}
        {# ── Batch Import Panel ─────────────────────────────────────────────── #}
        <div class="card mt-4 border-primary">
            <div class="card-header bg-primary text-white d-flex align-items-center gap-2">
                <i class="bi bi-table fs-5"></i>
                <strong>Batch Import via Excel</strong>
            </div>
            <div class="card-body">
                <p class="mb-2">
                    Need to submit multiple entries at once? Download the Excel template,
                    fill in your data row by row, then upload it here.
                    Each row will be validated with the same rules as the individual form.
                </p>

                {# Step 1 – Download template #}
                <div class="d-flex align-items-start gap-3 mb-3 p-3 bg-light rounded border">
                    <div class="fs-4 text-primary pt-1"><i class="bi bi-download"></i></div>
                    <div>
                        <strong>Step 1 — Download the template</strong>
                        <p class="mb-1 text-muted small">
                            The template is generated from the current form fields.
                            <span class="text-danger fw-semibold">Red columns are required</span>;
                            <span class="text-primary fw-semibold">blue columns are optional</span>.
                            See the <em>Instructions</em> and <em>Choices&nbsp;Reference</em>
                            sheets inside the workbook for guidance.
                        </p>
                        <a href="{% url 'forms_workflows:batch_template_download' form_def.slug %}"
                           class="btn btn-outline-primary btn-sm">
                            <i class="bi bi-file-earmark-excel"></i> Download Excel Template
                        </a>
                    </div>
                </div>

                {# Step 2 – Fill and upload #}
                <div class="d-flex align-items-start gap-3 p-3 bg-light rounded border">
                    <div class="fs-4 text-success pt-1"><i class="bi bi-upload"></i></div>
                    <div class="flex-grow-1">
                        <strong>Step 2 — Upload your completed file</strong>
                        <p class="mb-2 text-muted small">
                            Only <code>.xlsx</code> files are accepted.
                            Rows that pass validation will be submitted immediately.
                            Rows with errors will be listed so you can correct and re-upload.
                        </p>
                        <form method="post"
                              action="{% url 'forms_workflows:batch_import_upload' form_def.slug %}"
                              enctype="multipart/form-data"
                              class="d-flex align-items-center gap-2 flex-wrap">
                            {% csrf_token %}
                            <input type="file"
                                   name="batch_file"
                                   accept=".xlsx,application/vnd.openxmlformats-officedocument.spreadsheetml.sheet"
                                   class="form-control form-control-sm"
                                   style="max-width: 320px;"
                                   required>
                            <button type="submit" class="btn btn-success btn-sm">
                                <i class="bi bi-cloud-upload"></i> Upload &amp; Validate
                            </button>
                        </form>
                    </div>
                </div>
            </div>
        </div>
        {% endif %}

        <div class="mt-3 d-flex gap-2 align-items-center">
            <a href="{% url 'forms_workflows:form_list' %}" class="btn btn-outline-secondary">
                <i class="bi bi-arrow-left"></i> Back to Forms
            </a>
            {% if is_draft and draft_id %}
            <a href="{% url 'forms_workflows:discard_draft' draft_id %}"
               class="btn btn-outline-danger ms-auto">
                <i class="bi bi-trash3"></i> Discard Draft
            </a>
            {% endif %}
        </div>
    </div>
</div>
{% endblock %}

{% block extra_js %}
<script src="{% static 'django_forms_workflows/js/form-enhancements.js' %}"></script>
<script>
    // Scroll to the error summary banner (or first invalid field) after
    // server-side validation returns errors.
    (function () {
        const summary = document.getElementById('form-error-summary');
        const firstInvalid = document.querySelector('.is-invalid');
        const target = summary || firstInvalid;
        if (target) {
            target.scrollIntoView({ behavior: 'smooth', block: 'start' });
        }
    })();

    document.addEventListener('DOMContentLoaded', function() {
        const formElement = document.querySelector('[data-form-enhancements="true"]');
        if (formElement) {
            // Configuration from Django
            const config = {{ form_enhancements_config|safe }};

            // Initialize form enhancements
            const formEnhancements = new FormEnhancements(formElement, config);

            // Store instance for debugging
            window.formEnhancements = formEnhancements;
        }
    });

    // ── Calculated / Formula fields ──────────────────────────────────────────
    // Each [data-calculated] input carries a data-formula attribute like
    // "{dept_code} - {job_type}".  We watch every referenced source field
    // and update the calculated field live.
    (function () {
        function evaluateFormula(formula, form) {
            return formula.replace(/\{(\w+)\}/g, function (_, name) {
                const el = form.querySelector('[name="' + name + '"]');
                if (!el) return '';
                if (el.type === 'checkbox') return el.checked ? el.value || 'true' : '';
                return el.value || '';
            });
        }

        function wireCalculatedFields(form) {
            const calcFields = form.querySelectorAll('[data-calculated="true"]');
            if (!calcFields.length) return;

            // Collect all source field names across every formula
            const sourceNames = new Set();
            calcFields.forEach(function (el) {
                const formula = el.dataset.formula || '';
                (formula.match(/\{(\w+)\}/g) || []).forEach(function (tok) {
                    sourceNames.add(tok.slice(1, -1));
                });
            });

            function updateAll() {
                calcFields.forEach(function (el) {
                    el.value = evaluateFormula(el.dataset.formula || '', form);
                });
            }

            // Attach listeners to every source field
            sourceNames.forEach(function (name) {
                const src = form.querySelector('[name="' + name + '"]');
                if (src) src.addEventListener('input', updateAll);
                if (src) src.addEventListener('change', updateAll);
            });

            updateAll(); // run once on page load
        }

        document.querySelectorAll('form').forEach(wireCalculatedFields);
    })();
</script>
{% endblock %}