{% extends 'admin_base.html.twig' %}

{% block title %}Formulare – Fit wie ein Fisch{% endblock %}
{% block header_title %}<i class="fas fa-list-check me-2"></i>Formulare{% endblock %}

{% block stylesheets %}
    {{ parent() }}
    <link href="{{ asset('css/fisch-admin.css') }}" rel="stylesheet">
{% endblock %}

{% block content %}
{% include 'admin/fisch/_fisch_page_header.html.twig' with {
    title: 'Formulare',
    icon: 'list-check',
    subtitle: 'Felder der Einzelanmeldung, des Schul- und des Elternformulars festlegen'
} %}

{% for label, messages in app.flashes %}
    {% for message in messages %}
        <div class="alert alert-{{ label == 'error' ? 'danger' : label }} alert-dismissible fade show" role="alert">
            {{ message }}
            <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Schließen"></button>
        </div>
    {% endfor %}
{% endfor %}

<ul class="nav nav-pills mb-4">
    {% for value, label in forms %}
        <li class="nav-item">
            <a class="nav-link {{ formType == value ? 'active' : '' }}"
               href="{{ path('admin_fisch_forms_index', {typ: value}) }}">{{ label }}</a>
        </li>
    {% endfor %}
</ul>

<div class="alert border-0 shadow-sm mb-3" style="background: var(--fisch-admin-accent-soft);">
    <i class="fas fa-info-circle me-1"></i>
    Mit <span class="badge bg-secondary">Kernfeld</span> markierte Felder bleiben aktiv und pflichtig:
    Altersgruppen-Logik, Kapazitätsprüfung und Mailversand hängen daran.
</div>

<form method="post" action="{{ path('admin_fisch_forms_save') }}">
    <input type="hidden" name="_token" value="{{ csrf_token('fisch_form_builder_' ~ formType) }}">
    <input type="hidden" name="form_type" value="{{ formType }}">

    <div class="fisch-card mb-4">
        <div class="card-header"><i class="fas fa-align-left"></i> Einleitungstext über dem Formular</div>
        <div class="card-body">
            <textarea class="form-control" name="intro_text" rows="3"
                      placeholder="Optionaler Hinweis für die Ausfüllenden">{{ introText }}</textarea>
        </div>
    </div>

    <div class="fisch-table-wrap">
        <div class="table-responsive">
            <table class="table table-fisch mb-0" id="fischFieldsTable">
                <thead>
                    <tr>
                        <th style="width: 18%;">Feld</th>
                        <th style="width: 22%;">Beschriftung</th>
                        <th style="width: 14%;">Typ</th>
                        <th style="width: 8%;">Aktiv</th>
                        <th style="width: 8%;">Pflicht</th>
                        <th>Hilfetext / Auswahlwerte</th>
                        <th style="width: 6%;"></th>
                    </tr>
                </thead>
                <tbody>
                    {% for index, field in fields %}
                        <tr>
                            <td>
                                <input type="hidden" name="fields[{{ index }}][key]" value="{{ field.key }}">
                                <code class="small">{{ field.key }}</code>
                                {% if field.system %}
                                    <div><span class="badge bg-secondary mt-1">Kernfeld</span></div>
                                {% endif %}
                            </td>
                            <td>
                                <input type="text" class="form-control form-control-sm"
                                       name="fields[{{ index }}][label]" value="{{ field.label }}" required>
                            </td>
                            <td>
                                <select class="form-select form-select-sm" name="fields[{{ index }}][type]"
                                        {{ field.system ? 'disabled' : '' }}>
                                    {% for value, label in fieldTypes %}
                                        <option value="{{ value }}" {{ field.type == value ? 'selected' : '' }}>{{ label }}</option>
                                    {% endfor %}
                                </select>
                                {% if field.system %}
                                    <input type="hidden" name="fields[{{ index }}][type]" value="{{ field.type }}">
                                {% endif %}
                            </td>
                            <td class="text-center">
                                {% if field.system %}
                                    <input type="hidden" name="fields[{{ index }}][enabled]" value="1">
                                    <i class="fas fa-lock text-muted" title="Kernfeld, immer aktiv"></i>
                                {% else %}
                                    <input type="checkbox" class="form-check-input js-toggle-hidden"
                                           {{ field.enabled ? 'checked' : '' }}
                                           data-target="fields[{{ index }}][enabled]">
                                    <input type="hidden" name="fields[{{ index }}][enabled]"
                                           value="{{ field.enabled ? 1 : '' }}" data-name="fields[{{ index }}][enabled]">
                                {% endif %}
                            </td>
                            <td class="text-center">
                                {% if field.system %}
                                    <input type="hidden" name="fields[{{ index }}][required]" value="{{ field.required ? 1 : '' }}">
                                    <i class="fas fa-lock text-muted" title="Kernfeld"></i>
                                {% else %}
                                    <input type="checkbox" class="form-check-input js-toggle-hidden"
                                           {{ field.required ? 'checked' : '' }}
                                           data-target="fields[{{ index }}][required]">
                                    <input type="hidden" name="fields[{{ index }}][required]"
                                           value="{{ field.required ? 1 : '' }}" data-name="fields[{{ index }}][required]">
                                {% endif %}
                            </td>
                            <td>
                                <input type="text" class="form-control form-control-sm mb-1"
                                       name="fields[{{ index }}][help]" value="{{ field.help }}"
                                       placeholder="Hilfetext unter dem Feld">
                                <input type="text" class="form-control form-control-sm"
                                       name="fields[{{ index }}][options]" value="{{ field.options|join(', ') }}"
                                       placeholder="Auswahlwerte, mit Komma getrennt">
                            </td>
                            <td class="text-end">
                                {% if not field.system %}
                                    <button type="button" class="btn btn-sm btn-outline-danger btn-action js-remove-row"
                                            title="Feld entfernen"><i class="fas fa-trash"></i></button>
                                {% endif %}
                            </td>
                        </tr>
                    {% endfor %}
                </tbody>
            </table>
        </div>
    </div>

    <div class="d-flex justify-content-between mt-4">
        <button type="button" class="btn btn-outline-secondary" id="fischAddField">
            <i class="fas fa-plus me-1"></i>Zusatzfeld hinzufügen
        </button>
        <button type="submit" class="btn btn-fisch-primary">
            <i class="fas fa-save me-1"></i>Formular speichern
        </button>
    </div>
</form>

<form method="post" action="{{ path('admin_fisch_forms_reset') }}" class="mt-4"
      onsubmit="return confirm('Alle Anpassungen dieses Formulars verwerfen?');">
    <input type="hidden" name="_token" value="{{ csrf_token('fisch_form_reset_' ~ formType) }}">
    <input type="hidden" name="form_type" value="{{ formType }}">
    <button type="submit" class="btn btn-sm btn-outline-danger">
        <i class="fas fa-rotate-left me-1"></i>Auf Standardfelder zurücksetzen
    </button>
</form>
{% endblock %}

{% block javascripts %}
{{ parent() }}
<script>
(function () {
    const table = document.querySelector('#fischFieldsTable tbody');
    const addBtn = document.getElementById('fischAddField');
    if (!table || !addBtn) return;

    let nextIndex = table.querySelectorAll('tr').length;

    function bindToggles(scope) {
        scope.querySelectorAll('.js-toggle-hidden').forEach(function (box) {
            const hidden = scope.querySelector('input[data-name="' + box.dataset.target + '"]')
                || document.querySelector('input[data-name="' + box.dataset.target + '"]');
            if (!hidden) return;
            hidden.value = box.checked ? '1' : '';
            box.addEventListener('change', function () {
                hidden.value = box.checked ? '1' : '';
            });
        });
    }

    function bindRemove(scope) {
        scope.querySelectorAll('.js-remove-row').forEach(function (btn) {
            btn.addEventListener('click', function () {
                const row = btn.closest('tr');
                if (row) row.remove();
            });
        });
    }

    bindToggles(document);
    bindRemove(document);

    addBtn.addEventListener('click', function () {
        const i = nextIndex++;
        const tr = document.createElement('tr');
        tr.innerHTML =
            '<td><input type="hidden" name="fields[' + i + '][key]" value="">' +
            '<span class="small text-muted">wird aus der Beschriftung erzeugt</span></td>' +
            '<td><input type="text" class="form-control form-control-sm" name="fields[' + i + '][label]" required></td>' +
            '<td><select class="form-select form-select-sm" name="fields[' + i + '][type]"></select></td>' +
            '<td class="text-center"><input type="checkbox" class="form-check-input js-toggle-hidden" checked data-target="fields[' + i + '][enabled]">' +
            '<input type="hidden" name="fields[' + i + '][enabled]" value="1" data-name="fields[' + i + '][enabled]"></td>' +
            '<td class="text-center"><input type="checkbox" class="form-check-input js-toggle-hidden" data-target="fields[' + i + '][required]">' +
            '<input type="hidden" name="fields[' + i + '][required]" value="" data-name="fields[' + i + '][required]"></td>' +
            '<td><input type="text" class="form-control form-control-sm mb-1" name="fields[' + i + '][help]" placeholder="Hilfetext unter dem Feld">' +
            '<input type="text" class="form-control form-control-sm" name="fields[' + i + '][options]" placeholder="Auswahlwerte, mit Komma getrennt"></td>' +
            '<td class="text-end"><button type="button" class="btn btn-sm btn-outline-danger btn-action js-remove-row"><i class="fas fa-trash"></i></button></td>';

        const select = tr.querySelector('select');
        const types = {{ fieldTypes|json_encode|raw }};
        Object.keys(types).forEach(function (value) {
            const option = document.createElement('option');
            option.value = value;
            option.textContent = types[value];
            select.appendChild(option);
        });

        table.appendChild(tr);
        bindToggles(tr);
        bindRemove(tr);
    });
})();
</script>
{% endblock %}