feuerwehr-freising-antragsformular/index.php

<?php

declare(strict_types=1);

use App\App\Bootstrap;
use App\Form\FormSchema;
use App\Security\Csrf;

require __DIR__ . '/src/autoload.php';
Bootstrap::init();

$schema = new FormSchema();
$steps = $schema->getSteps();
$csrf = Csrf::token();
$app = Bootstrap::config('app');
$disclaimerConfigRaw = $app['disclaimer'] ?? [];
if (is_string($disclaimerConfigRaw)) {
    $disclaimerConfig = ['text' => $disclaimerConfigRaw];
} elseif (is_array($disclaimerConfigRaw)) {
    $disclaimerConfig = $disclaimerConfigRaw;
} else {
    $disclaimerConfig = [];
}

$disclaimerTitle = (string) ($disclaimerConfig['title'] ?? 'Hinweis');
$disclaimerText = (string) ($disclaimerConfig['text'] ?? '');
$disclaimerAcceptLabel = (string) ($disclaimerConfig['accept_label'] ?? 'Hinweis gelesen, weiter');
$startConfigRaw = $app['start'] ?? [];
if (is_array($startConfigRaw)) {
    $startConfig = $startConfigRaw;
} else {
    $startConfig = [];
}
$startIntroText = (string) ($startConfig['intro_text'] ?? 'Bitte E-Mail eingeben. Bestehende Entwürfe werden automatisch geladen.');
$addressDisclaimerConfigRaw = $app['address_disclaimer'] ?? ($app['address_disclaimer_text'] ?? '');
if (is_string($addressDisclaimerConfigRaw)) {
    $addressDisclaimerText = $addressDisclaimerConfigRaw;
} elseif (is_array($addressDisclaimerConfigRaw)) {
    $addressDisclaimerText = (string) ($addressDisclaimerConfigRaw['text'] ?? '');
} else {
    $addressDisclaimerText = '';
}
$baseUrl = Bootstrap::baseUrl();

/** @param array<string, mixed> $field */
function renderField(array $field, string $addressDisclaimerText): void
{
    $keyRaw = (string) ($field['key'] ?? '');
    $key = htmlspecialchars($keyRaw);
    $label = htmlspecialchars((string) $field['label']);
    $type = (string) ($field['type'] ?? 'text');
    $requiredAlways = (bool) ($field['required'] ?? false);
    $requiredConditional = isset($field['required_if']) && is_array($field['required_if']);
    $required = $requiredAlways ? 'required' : '';
    $maxLengthAttr = '';
    if (isset($field['max_length']) && is_int($field['max_length']) && $field['max_length'] > 0) {
        $maxLengthAttr = ' maxlength="' . (string) $field['max_length'] . '"';
    }
    $requiredLabel = '';
    if ($requiredAlways) {
        $requiredLabel = ' <span class="required-mark required-mark-field" aria-hidden="true">* Pflichtfeld</span>';
    } elseif ($requiredConditional) {
        $requiredLabel = ' <span class="required-mark required-mark-field" aria-hidden="true">* Pflichtfeld</span>';
    }
    $fieldClass = 'field';
    if ($requiredAlways || $requiredConditional) {
        $fieldClass .= ' mandatory-field';
    }
    if ($requiredAlways) {
        $fieldClass .= ' mandatory-field-hard';
    }

    echo '<div class="' . $fieldClass . '" data-field="' . $key . '">';

    if ($type === 'checkbox') {
        echo '<label class="checkbox-label"><input type="checkbox" name="form_data[' . $key . ']" value="1" ' . $required . '> ' . $label . $requiredLabel . '</label>';
    } else {
        $labelFor = $type === 'table' ? htmlspecialchars($keyRaw . '__r0__c0') : $key;
        echo '<label for="' . $labelFor . '">' . $label . $requiredLabel . '</label>';

        if ($type === 'textarea') {
            echo '<textarea id="' . $key . '" name="form_data[' . $key . ']" ' . $required . $maxLengthAttr . '></textarea>';
        } elseif ($type === 'select') {
            echo '<select id="' . $key . '" name="form_data[' . $key . ']" ' . $required . '>';
            echo '<option value="">Bitte wählen</option>';
            foreach (($field['options'] ?? []) as $option) {
                if (!is_array($option)) {
                    continue;
                }
                $value = htmlspecialchars((string) ($option['value'] ?? ''));
                $optLabel = htmlspecialchars((string) ($option['label'] ?? ''));
                echo '<option value="' . $value . '">' . $optLabel . '</option>';
            }
            echo '</select>';
        } elseif ($type === 'table') {
            $rows = (int) ($field['rows'] ?? 4);
            if ($rows < 1) {
                $rows = 1;
            } elseif ($rows > 50) {
                $rows = 50;
            }

            $columns = [];
            if (isset($field['columns']) && is_array($field['columns'])) {
                foreach ($field['columns'] as $index => $column) {
                    if (!is_array($column)) {
                        continue;
                    }

                    $columnLabelRaw = trim((string) ($column['label'] ?? ''));
                    if ($columnLabelRaw === '') {
                        $columnLabelRaw = 'Spalte ' . ($index + 1);
                    }

                    $columnTypeRaw = strtolower(trim((string) ($column['type'] ?? 'text')));
                    $columnType = in_array($columnTypeRaw, ['text', 'date', 'number', 'email', 'tel'], true) ? $columnTypeRaw : 'text';

                    $columns[] = [
                        'label' => $columnLabelRaw,
                        'type' => $columnType,
                        'placeholder' => (string) ($column['placeholder'] ?? ''),
                    ];
                }
            }

            if (empty($columns)) {
                $columns = [
                    ['label' => 'Spalte 1', 'type' => 'text', 'placeholder' => ''],
                    ['label' => 'Spalte 2', 'type' => 'text', 'placeholder' => ''],
                    ['label' => 'Spalte 3', 'type' => 'text', 'placeholder' => ''],
                ];
            }

            echo '<input id="' . $key . '" type="hidden" name="form_data[' . $key . ']">';
            echo '<div class="table-input-wrapper">';
            echo '<div class="table-responsive">';
            echo '<table class="form-table-input" data-table-field="1" data-table-key="' . $key . '" data-table-rows="' . (string) $rows . '">';
            echo '<thead><tr>';
            foreach ($columns as $column) {
                echo '<th>' . htmlspecialchars($column['label']) . '</th>';
            }
            echo '</tr></thead>';
            echo '<tbody>';
            for ($row = 0; $row < $rows; $row++) {
                echo '<tr>';
                foreach ($columns as $columnIndex => $column) {
                    $cellId = $keyRaw . '__r' . $row . '__c' . $columnIndex;
                    $cellIdEscaped = htmlspecialchars($cellId);
                    $placeholder = trim((string) ($column['placeholder'] ?? ''));
                    $placeholderEscaped = htmlspecialchars($placeholder);
                    $ariaLabel = htmlspecialchars($column['label'] . ' Zeile ' . ($row + 1));
                    echo '<td>';
                    echo '<input id="' . $cellIdEscaped . '" class="table-cell-input" type="' . htmlspecialchars((string) $column['type']) . '" data-table-cell="1" data-table-key="' . $key . '" data-row-index="' . (string) $row . '" data-col-index="' . (string) $columnIndex . '" aria-label="' . $ariaLabel . '" autocomplete="off"';
                    if ($placeholder !== '') {
                        echo ' placeholder="' . $placeholderEscaped . '"';
                    }
                    echo '>';
                    echo '</td>';
                }
                echo '</tr>';
            }
            echo '</tbody>';
            echo '</table>';
            echo '</div>';
            echo '</div>';
        } elseif ($type === 'file') {
            $accept = htmlspecialchars((string) ($field['accept'] ?? ''));
            $description = trim((string) ($field['description'] ?? ''));
            $fileInputId = $key . '_file';
            $cameraInputId = $key . '_camera';
            echo '<div class="upload-control" data-upload-key="' . $key . '">';
            echo '<div class="upload-actions">';
            echo '<label class="upload-action-btn" for="' . $fileInputId . '">Datei auswählen</label>';
            echo '<label class="upload-action-btn upload-action-btn-camera" for="' . $cameraInputId . '">Foto aufnehmen</label>';
            echo '</div>';
            if ($description !== '') {
                echo '<small class="hint">' . nl2br(htmlspecialchars($description)) . '</small>';
            }
            echo '<input id="' . $fileInputId . '" class="upload-native-input" type="file" name="' . $key . '" accept="' . $accept . '">';
            echo '<input id="' . $cameraInputId . '" class="upload-native-input" type="file" name="' . $key . '__camera" accept="image/*" capture="environment">';
            echo '<p class="upload-selected" data-upload-selected="' . $key . '">Keine Datei gewählt</p>';
            echo '</div>';
            echo '<div class="upload-list" data-upload-list="' . $key . '"></div>';
        } else {
            $inputType = htmlspecialchars($type);
            echo '<input id="' . $key . '" type="' . $inputType . '" name="form_data[' . $key . ']" ' . $required . $maxLengthAttr . '>';
        }
    }

    $subtext = trim((string) ($field['subtext'] ?? ''));
    if ($subtext !== '') {
        echo '<small class="hint">' . nl2br(htmlspecialchars($subtext)) . '</small>';
    }
    if ($keyRaw === 'strasse' && trim($addressDisclaimerText) !== '') {
        echo '<div class="address-disclaimer">' . nl2br(htmlspecialchars($addressDisclaimerText)) . '</div>';
    }
    if (isset($field['required_if']) && is_array($field['required_if'])) {
        $depField = htmlspecialchars((string) ($field['required_if']['field'] ?? ''));
        $depValue = htmlspecialchars((string) ($field['required_if']['equals'] ?? ''));
    }

    echo '<div class="error" data-error-for="' . $key . '"></div>';
    echo '</div>';
}
?><!doctype html>
<html lang="de">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title><?= htmlspecialchars((string) $app['project_name']) ?></title>
    <link rel="stylesheet" href="<?= htmlspecialchars(Bootstrap::url('assets/css/tokens.css')) ?>">
    <link rel="stylesheet" href="<?= htmlspecialchars(Bootstrap::url('assets/css/base.css')) ?>">
</head>
<body>
<header class="site-header">
    <div class="container header-inner">
        <a class="brand" href="<?= htmlspecialchars(Bootstrap::url('index.php')) ?>">
            <img class="brand-logo" src="<?= htmlspecialchars(Bootstrap::url('assets/images/feuerwehr-logo-invers.webp')) ?>" alt="Feuerwehr Logo">
            <div>
                <div class="brand-title"><?= htmlspecialchars((string) $app['project_name']) ?></div>
                <div class="brand-subtitle">Feuerwehr Freising</div>
            </div>
        </a>
    </div>
</header>
<main class="container">
    <h1>Digitaler Mitgliedsantrag Feuerwehrverein</h1>

    <section id="disclaimerSection" class="card hidden">
        <h2><?= htmlspecialchars($disclaimerTitle) ?></h2>
        <p class="disclaimer-text"><?= nl2br(htmlspecialchars($disclaimerText)) ?></p>
        <div class="field disclaimer-ack-field">
            <label class="checkbox-label">
                <input id="disclaimerReadCheckbox" type="checkbox" value="1">
                Ich habe den Hinweis gelesen und verstanden.
            </label>
            <div id="disclaimerReadError" class="error"></div>
        </div>
        <button id="acceptDisclaimerBtn" type="button" class="btn" disabled><?= htmlspecialchars($disclaimerAcceptLabel) ?></button>
    </section>

    <section id="wizardSection" class="card hidden">
        <h2>Mitgliedsantrag</h2>
        <p class="required-legend"><span class="required-mark" aria-hidden="true">*</span> Pflichtfeld</p>
        <div id="progress" class="progress"></div>
        <form id="applicationForm" enctype="multipart/form-data" novalidate>
            <input type="hidden" name="csrf" value="<?= htmlspecialchars($csrf) ?>">
            <input type="hidden" id="applicationEmail" name="email" value="">
            <div class="hp-field" aria-hidden="true">
                <label for="applicationWebsite">Website</label>
                <input id="applicationWebsite" type="text" name="website" autocomplete="off" tabindex="-1">
            </div>

            <?php foreach ($steps as $index => $step): ?>
                <section class="step hidden" data-step="<?= $index + 1 ?>">
                    <h3>Schritt <?= $index + 1 ?>: <?= htmlspecialchars((string) ($step['title'] ?? '')) ?></h3>
                    <p><?= htmlspecialchars((string) ($step['description'] ?? '')) ?></p>

                    <?php foreach (($step['fields'] ?? []) as $field): ?>
                        <?php if (is_array($field)) { renderField($field, $addressDisclaimerText); } ?>
                    <?php endforeach; ?>
                </section>
            <?php endforeach; ?>

            <section id="summarySection" class="step-summary hidden">
                <h3>Zusammenfassung</h3>
                <p>Bitte prüfen Sie alle Angaben vor dem verbindlichen Absenden.</p>
                <div id="summaryMissingNotice" class="summary-missing-note hidden" role="status" aria-live="polite"></div>
                <div id="summaryContent" class="summary-content"></div>
            </section>

            <div class="wizard-actions">
                <button type="button" id="prevBtn" class="btn btn-secondary">Zurück</button>
                <button type="button" id="nextBtn" class="btn">Weiter</button>
                <button type="button" id="submitBtn" class="btn hidden">
                    <span data-submit-label>Verbindlich absenden</span>
                    <span id="submitSpinner" class="btn-spinner hidden" aria-hidden="true"></span>
                </button>
            </div>
            <p id="feedbackMessage" class="status-text" role="status" aria-live="polite"></p>
        </form>
    </section>

    <section id="startSection" class="card">
        <h2>Status</h2>
        <p id="startIntroText"><?= htmlspecialchars($startIntroText) ?></p>
        <form id="startForm" novalidate>
            <input type="hidden" name="csrf" value="<?= htmlspecialchars($csrf) ?>">
            <div class="hp-field" aria-hidden="true">
                <label for="website">Website</label>
                <input id="website" type="text" name="website" autocomplete="off" tabindex="-1">
            </div>
            <div class="field" id="startEmailField">
                <label for="startEmail">E-Mail <span class="required-mark required-mark-field-start" aria-hidden="true">* Pflichtfeld</span></label>
                <input id="startEmail" type="email" name="email" required inputmode="email" autocomplete="email">
                <div id="startEmailError" class="error"></div>
            </div>
            <div class="inline-actions" id="startActions">
                <button id="startSubmitBtn" type="submit" class="btn">Code senden</button>
            </div>
            <section id="otpSection" class="hidden" aria-live="polite">
                <p id="otpInfoText" class="status-text"></p>
                <div class="field" id="startOtpField">
                    <label for="startOtp">Sicherheitscode <span class="required-mark required-mark-field-start" aria-hidden="true">* Pflichtfeld</span></label>
                    <input id="startOtp" type="text" inputmode="numeric" autocomplete="one-time-code" maxlength="6" pattern="[0-9]{6}">
                    <div id="startOtpError" class="error"></div>
                </div>
                <div class="inline-actions" id="otpActions">
                    <button id="verifyOtpBtn" type="button" class="btn">Code bestätigen</button>
                    <button id="resendOtpBtn" type="button" class="btn btn-secondary">Code erneut senden</button>
                </div>
                <p id="otpCooldownMessage" class="status-text"></p>
            </section>
            <div id="compactStatusBox" class="compact-status hidden">
                <p><strong>E-Mail:</strong> <span id="statusEmailValue">-</span></p>
                <p><strong>Speicherstatus:</strong> <span id="draftStatusValue">Noch nicht gespeichert</span></p>
                <button id="resetDataBtn" type="button" class="btn btn-small">Gespeicherte Daten löschen und neu starten</button>
            </div>
            <p id="startFeedbackMessage" class="status-text" role="status" aria-live="polite"></p>
        </form>
    </section>
</main>
<script>
window.APP_BOOT = {
    steps: <?= json_encode($steps, JSON_UNESCAPED_UNICODE | JSON_UNESCAPED_SLASHES) ?>,
    csrf: <?= json_encode($csrf, JSON_UNESCAPED_UNICODE | JSON_UNESCAPED_SLASHES) ?>,
    contactEmail: <?= json_encode((string) ($app['contact_email'] ?? ''), JSON_UNESCAPED_UNICODE | JSON_UNESCAPED_SLASHES) ?>,
    baseUrl: <?= json_encode($baseUrl, JSON_UNESCAPED_UNICODE | JSON_UNESCAPED_SLASHES) ?>,
    verification: <?= json_encode((array) ($app['verification'] ?? []), JSON_UNESCAPED_UNICODE | JSON_UNESCAPED_SLASHES) ?>
};
</script>
<script src="<?= htmlspecialchars(Bootstrap::url('assets/js/form.js')) ?>"></script>
</body>
</html>