{% extends "base.html" %}
{% block content %}
<div class="form-switch">
    <a class="switch-arrow" href="{{ url_for('form_' ~ other.id) }}" title="Comută la: {{ other.name }}" aria-label="Chestionarul anterior">‹</a>
    <span class="switch-name">{{ form.name }}</span>
    <a class="switch-arrow" href="{{ url_for('form_' ~ other.id) }}" title="Comută la: {{ other.name }}" aria-label="Chestionarul următor">›</a>
</div>

<form id="chestionar" class="form-card" method="post" action="{{ url_for('submit') }}" novalidate>
    <input type="hidden" name="form_id" value="{{ form.id }}">
    <button type="button" id="btnReset" class="btn btn-ghost btn-reset" title="Șterge tot și reia de la zero">↺ Resetează</button>

    <div class="form-head">
        <h1>{{ title }}</h1>
        {% if description %}<p class="form-desc">{{ description }}</p>{% endif %}
    </div>

    {% if errors %}
    <div class="alert">
        <strong>Te rugăm să corectezi:</strong>
        <ul>{% for e in errors %}<li>{{ e }}</li>{% endfor %}</ul>
    </div>
    {% endif %}

    {% set vals = values or {} %}
    {% set placeholders = {
        'nume_complet_beneficiar': 'ex: Popescu Ion',
        'telefon': 'ex: 0722 000 000',
        'adresa_e_mail': 'ex: nume@firma.ro',
        'cui_entitate': 'ex: 12345678'
    } %}
    {% for page in pages %}
    <fieldset class="step" data-page="{{ loop.index0 }}">

        {% if page.title %}<legend class="step-title">{{ page.title }}</legend>{% endif %}
        {% if page.description %}<p class="step-desc">{{ page.description }}</p>{% endif %}

        {% for q in page.questions %}
        <div class="question" data-slug="{{ q.slug }}">
            <label class="q-label">
                {{ q.label }}{% if q.required %}<span class="req">*</span>{% endif %}
            </label>
            {% if q.description %}<p class="q-desc">{{ q.description }}</p>{% endif %}

            {% if q.type == 'short' %}
                {% set rule = q.validation %}
                <input class="ipt" type="{{ 'email' if rule and rule.kind == 'email' else 'text' }}"
                       name="{{ q.slug }}" value="{{ vals.get(q.slug, '') }}"
                       placeholder="{{ placeholders.get(q.slug, '') }}"
                       {% if q.required %}data-required="1"{% endif %}
                       {% if rule and rule.kind == 'email' %}data-validate="email" inputmode="email"
                            data-error="Adresă de email invalidă"{% endif %}
                       {% if rule and rule.kind == 'number' %}data-validate="number" inputmode="numeric"
                            pattern="[0-9]*" data-error="{{ rule.error }}"{% endif %}>

            {% elif q.type == 'paragraph' %}
                <textarea class="ipt" name="{{ q.slug }}" rows="4"
                          {% if q.required %}data-required="1"{% endif %}>{{ vals.get(q.slug, '') }}</textarea>

            {% elif q.type in ('radio', 'dropdown') %}
                <div class="options" {% if q.required %}data-required="1"{% endif %}
                     {% if q.is_router %}data-router="1"{% endif %}>
                {% for opt in q.options %}
                    <label class="opt">
                        <input type="radio" name="{{ q.slug }}" value="{{ opt.text }}"
                               data-goto="{{ opt.goto }}"
                               {% if vals.get(q.slug) == opt.text %}checked{% endif %}>
                        <span>{{ opt.text }}</span>
                    </label>
                {% endfor %}
                </div>

            {% elif q.type == 'checkbox' %}
                {% set selected = (vals.get(q.slug, '')).split('; ') %}
                {% set other_text = vals.get(q.other_slug, '') %}
                <div class="options" {% if q.required %}data-required="checkbox"{% endif %}>
                {% for opt in q.options %}
                    <label class="opt">
                        <input type="checkbox" name="{{ q.slug }}" value="{{ opt }}"
                               {% if opt in selected %}checked{% endif %}>
                        <span>{{ opt }}</span>
                    </label>
                {% endfor %}
                {% if q.other %}
                    <label class="opt opt-other">
                        <input type="checkbox" name="{{ q.slug }}" value="__ALTELE__"
                               class="other-toggle" {% if other_text %}checked{% endif %}>
                        <span>Altele:</span>
                        <input type="text" class="ipt other-text" name="{{ q.other_slug }}"
                               value="{{ other_text }}" placeholder="completează..."
                               {% if not other_text %}disabled{% endif %}>
                    </label>
                {% endif %}
                </div>

            {% elif q.type == 'grid' %}
                <div class="grid">
                {% for row in q.rows %}
                    <div class="grid-row" {% if row.required %}data-required="1"{% endif %}>
                        <span class="grid-rowlabel">{{ row.label }}</span>
                        <div class="grid-cells">
                        {% for col in q.options %}
                            <label class="opt opt-cell">
                                <input type="radio" name="{{ row.slug }}" value="{{ col }}"
                                       {% if vals.get(row.slug) == col %}checked{% endif %}>
                                <span>{{ col }}</span>
                            </label>
                        {% endfor %}
                        </div>
                    </div>
                {% endfor %}
                </div>
            {% endif %}
        </div>
        {% endfor %}
    </fieldset>
    {% endfor %}

    <div class="nav">
        <button type="submit" class="btn btn-primary" id="btnSubmit">Trimite chestionarul</button>
    </div>
</form>
{% endblock %}

{% block scripts %}
<script src="{{ url_for('static', filename='form.js') }}"></script>
{% endblock %}