Steuerkram/src/Views/bank/_modal_new_connection.php

<!-- Modal: Neue Verbindung -->
<div id="modal-new-connection"
     style="display:none;position:fixed;inset:0;z-index:1000;background:rgba(0,0,0,.4);align-items:center;justify-content:center">
    <div class="modal-inline-form" style="background:#fff;border-radius:var(--radius);box-shadow:0 8px 32px rgba(0,0,0,.15);width:100%;max-width:480px;padding:1.5rem">
        <div style="display:flex;justify-content:space-between;align-items:center;margin-bottom:1.25rem">
            <h2 style="margin:0;font-size:1.125rem">Neue Direktverbindung</h2>
            <button type="button" id="btn-modal-close"
                    style="background:none;border:none;font-size:1.25rem;cursor:pointer;color:var(--color-muted)">&times;</button>
        </div>

        <form method="post" action="/bank/direkt">
            <div class="form-group">
                <label for="fc-provider">Bank / Anbieter</label>
                <select id="fc-provider" name="provider_id" required>
                    <option value="">Bitte wählen…</option>
                    <?php foreach ($providers as $p): ?>
                    <option value="<?= (int)$p['id'] ?>"
                            data-typ="<?= $h($p['verbindungstyp']) ?>">
                        <?= $h($p['name']) ?>
                    </option>
                    <?php endforeach; ?>
                    <option value="__new__" data-typ="FinTS">+ Neue Bank…</option>
                    <option value="__csv__" data-typ="CSV">+ CSV-Importformat…</option>
                </select>
            </div>

            <div id="fc-new-bank-wrap" style="display:none">
                <div class="form-group">
                    <label for="fc-new-bank-name">Name der neuen Bank</label>
                    <input type="text" id="fc-new-bank-name" name="new_bank_name"
                           placeholder="z. B. Sparkasse Musterstadt" maxlength="100">
                </div>
                <div class="form-group">
                    <label title="FinTS = klassischer Bank-Abruf via PIN. API = REST/NVP-Schnittstelle (wie PayPal).">Verbindungstyp</label>
                    <div style="display:flex;gap:1rem;padding:.25rem 0">
                        <label style="display:flex;align-items:center;gap:.4rem;font-weight:normal;cursor:pointer">
                            <input type="radio" name="new_bank_typ" value="FinTS" checked style="width:auto;margin:0">
                            <span>FinTS</span>
                        </label>
                        <label style="display:flex;align-items:center;gap:.4rem;font-weight:normal;cursor:pointer">
                            <input type="radio" name="new_bank_typ" value="API" style="width:auto;margin:0">
                            <span>API</span>
                        </label>
                    </div>
                </div>
            </div>

            <div class="form-group">
                <label for="fc-bezeichnung">Bezeichnung</label>
                <input type="text" id="fc-bezeichnung" name="bezeichnung" required
                       placeholder="z. B. Geschäftskonto PayPal">
            </div>

            <div style="display:flex;gap:.75rem;align-items:flex-end">
                <div class="form-group" style="flex:1;margin-bottom:0">
                    <label for="fc-kuerzel">Kürzel (Badge)</label>
                    <input type="text" id="fc-kuerzel" name="kuerzel" maxlength="10" placeholder="PP">
                </div>
                <div class="form-group" style="margin-bottom:0">
                    <label for="fc-farbe">Farbe</label>
                    <input type="color" id="fc-farbe" name="farbe" value="#6366f1" style="width:48px;height:36px;padding:2px;cursor:pointer">
                </div>
            </div>

            <div id="api-fields" style="display:none">
                <div class="form-group">
                    <label for="fc-app-name">API-Benutzer</label>
                    <input type="text" id="fc-app-name" name="app_name" autocomplete="off">
                </div>
                <div class="form-group">
                    <label for="fc-client-id">API-Kennwort</label>
                    <input type="password" id="fc-client-id" name="client_id" autocomplete="new-password">
                </div>
                <div class="form-group">
                    <label for="fc-secret">Signature (Secret)</label>
                    <input type="password" id="fc-secret" name="secret" autocomplete="new-password">
                </div>
                <div class="form-group" style="display:flex;align-items:center;gap:.5rem">
                    <input type="checkbox" id="fc-sandbox" name="sandbox" value="1" style="width:auto;margin:0">
                    <label for="fc-sandbox" style="margin:0;font-weight:normal;cursor:pointer">Sandbox-Modus (Testumgebung)</label>
                </div>
            </div>

            <div id="fints-fields" style="display:none">
                <div class="form-group">
                    <label for="fc-blz">Bankleitzahl (BLZ)</label>
                    <input type="text" id="fc-blz" name="blz" maxlength="11" placeholder="z. B. 12030000">
                </div>
                <div class="form-group">
                    <label for="fc-benutzerkennung">Benutzerkennung / Anmeldename</label>
                    <input type="text" id="fc-benutzerkennung" name="benutzerkennung" autocomplete="off">
                </div>
                <div class="form-group">
                    <label for="fc-pin">PIN</label>
                    <input type="password" id="fc-pin" name="pin" autocomplete="new-password">
                </div>
                <div class="form-group">
                    <label for="fc-fints-url" title="Optional, wird sonst über BLZ ermittelt">FinTS-Server-URL</label>
                    <input type="url" id="fc-fints-url" name="fints_url" placeholder="https://...">
                    <div style="margin-top:.4rem;flex-basis:100%">
                        <input type="text" id="fc-blz-search" placeholder="Bankleitzahl, BIC, Name oder Ort suchen…" style="font-size:.8rem">
                        <div id="fc-blz-results" style="display:none;margin-top:.3rem;max-height:160px;overflow-y:auto;border:1px solid var(--color-border);border-radius:var(--radius)"></div>
                    </div>
                </div>
                <div class="text-muted text-sm">Die Konto-Auswahl wird beim ersten Abruf abgefragt.</div>
            </div>

            <div id="csv-fields" style="display:none">
                <div class="text-muted text-sm" style="margin-bottom:.75rem">
                    Grundeinstellungen für ein neues CSV-Importformat. Die Spaltenzuordnung kann danach unter
                    <a href="/settings/bankimport">Einstellungen → CSV Bankimport Formate</a> verfeinert werden.
                </div>
                <div style="display:flex;gap:.75rem">
                    <div class="form-group" style="flex:1">
                        <label for="fc-csv-delimiter">Trennzeichen</label>
                        <input type="text" id="fc-csv-delimiter" name="csv_delimiter" value=";" maxlength="1">
                    </div>
                    <div class="form-group" style="flex:1">
                        <label for="fc-csv-enclosure">Anführungszeichen</label>
                        <input type="text" id="fc-csv-enclosure" name="csv_enclosure" value='"' maxlength="1">
                    </div>
                </div>
                <div class="form-group">
                    <label for="fc-csv-date-format">Datumsformat</label>
                    <select id="fc-csv-date-format" name="csv_date_format">
                        <?php foreach ($csvDateFormatOptions as $val => $label): ?>
                        <option value="<?= $h($val) ?>"><?= $h($label) ?></option>
                        <?php endforeach; ?>
                    </select>
                </div>
                <div style="display:flex;gap:.75rem">
                    <div class="form-group" style="flex:1">
                        <label for="fc-csv-decimal">Dezimaltrennzeichen</label>
                        <input type="text" id="fc-csv-decimal" name="csv_decimal_separator" value="," maxlength="1">
                    </div>
                    <div class="form-group" style="flex:1">
                        <label for="fc-csv-thousands">Tausendertrennzeichen</label>
                        <input type="text" id="fc-csv-thousands" name="csv_thousands_separator" value="." maxlength="1">
                    </div>
                </div>
                <div style="display:flex;gap:.75rem">
                    <div class="form-group" style="flex:1">
                        <label for="fc-csv-header">Headerzeile vorhanden</label>
                        <select id="fc-csv-header" name="csv_has_header_row">
                            <option value="1" selected>Ja</option>
                            <option value="0">Nein</option>
                        </select>
                    </div>
                    <div class="form-group" style="flex:1">
                        <label for="fc-csv-skip">Übersprungene Zeilen</label>
                        <input type="number" id="fc-csv-skip" name="csv_skip_rows" value="0" min="0" max="99">
                    </div>
                </div>
            </div>

            <div style="display:flex;justify-content:flex-end;gap:.5rem;margin-top:1rem">
                <button type="button" id="btn-modal-cancel" class="btn btn-secondary">Abbrechen</button>
                <button type="submit" class="btn btn-primary">Speichern</button>
            </div>
        </form>
    </div>
</div>