{% extends "admin/base.html" %}
{% block title %}Feld-Konfiguration{% endblock %}

{% block content %}
<div class="d-flex justify-content-between align-items-start mb-4">
    <div>
        <h1><i class="bi bi-sliders me-2"></i>Feld-Konfiguration</h1>
        <p class="text-muted">Legen Sie fest, welche Felder Kunden sehen und bearbeiten koennen</p>
    </div>
</div>

<form method="POST" action="{{ url_for('admin.field_config') }}">
    <!-- Sections -->
    <div class="card mb-4">
        <div class="card-header">
            <i class="bi bi-layout-text-window me-2"></i>
            Sektionen
        </div>
        <div class="card-body">
            <p class="text-muted small mb-3">Aktivieren oder deaktivieren Sie ganze Bereiche im Kundenprofil.</p>
            <div class="table-responsive">
                <table class="table table-dark table-hover mb-0">
                    <thead>
                        <tr>
                            <th>Sektion</th>
                            <th class="text-center" style="width: 100px;">Sichtbar</th>
                            <th style="width: 200px;">Bezeichnung</th>
                        </tr>
                    </thead>
                    <tbody>
                        {% for key, section in config.sections.items() %}
                        <tr>
                            <td>
                                <i class="bi bi-{{ 'person' if key == 'contact' else 'house' if key == 'address' else 'envelope' if key == 'email_settings' else 'shield-check' }} me-2 text-muted"></i>
                                {{ section.label }}
                            </td>
                            <td class="text-center">
                                <div class="form-check form-switch d-inline-block">
                                    <input class="form-check-input" type="checkbox"
                                           name="section_{{ key }}_visible"
                                           id="section_{{ key }}_visible"
                                           {% if section.visible %}checked{% endif %}>
                                </div>
                            </td>
                            <td>
                                <input type="text" class="form-control form-control-sm"
                                       name="section_{{ key }}_label"
                                       value="{{ section.label }}">
                            </td>
                        </tr>
                        {% endfor %}
                    </tbody>
                </table>
            </div>
        </div>
    </div>

    <!-- Profile Fields (Standard) -->
    <div class="card mb-4">
        <div class="card-header">
            <i class="bi bi-person me-2"></i>
            Standard-Felder
        </div>
        <div class="card-body">
            <p class="text-muted small mb-3">Basis-Felder fuer Kontakt und Adresse.</p>
            <div class="table-responsive">
                <table class="table table-dark table-hover mb-0">
                    <thead>
                        <tr>
                            <th>Feld</th>
                            <th class="text-center" style="width: 100px;">Sichtbar</th>
                            <th class="text-center" style="width: 100px;">Editierbar</th>
                            <th style="width: 200px;">Bezeichnung</th>
                        </tr>
                    </thead>
                    <tbody>
                        {% for key, field in config.profile_fields.items() %}
                        <tr>
                            <td>
                                <code class="text-info">{{ key }}</code>
                            </td>
                            <td class="text-center">
                                <div class="form-check form-switch d-inline-block">
                                    <input class="form-check-input" type="checkbox"
                                           name="field_{{ key }}_visible"
                                           id="field_{{ key }}_visible"
                                           {% if field.visible %}checked{% endif %}>
                                </div>
                            </td>
                            <td class="text-center">
                                <div class="form-check form-switch d-inline-block">
                                    <input class="form-check-input" type="checkbox"
                                           name="field_{{ key }}_editable"
                                           id="field_{{ key }}_editable"
                                           {% if field.editable %}checked{% endif %}
                                           {% if key in ['name', 'email'] %}disabled title="Dieses Feld kann nicht editierbar gemacht werden"{% endif %}>
                                </div>
                            </td>
                            <td>
                                <input type="text" class="form-control form-control-sm"
                                       name="field_{{ key }}_label"
                                       value="{{ field.label }}">
                            </td>
                        </tr>
                        {% endfor %}
                    </tbody>
                </table>
            </div>
        </div>
    </div>

    <!-- WordPress Booking Fields -->
    <div class="card mb-4">
        <div class="card-header d-flex justify-content-between align-items-center">
            <span>
                <i class="bi bi-wordpress me-2"></i>
                WordPress Buchungsfelder
                {% if wp_schema and wp_schema.custom_fields %}
                <span class="badge bg-success ms-2">{{ wp_schema.custom_fields|length }} Felder</span>
                {% endif %}
            </span>
            <a href="{{ url_for('admin.field_config') }}" class="btn btn-sm btn-outline-info">
                <i class="bi bi-arrow-clockwise"></i>
            </a>
        </div>
        <div class="card-body">
            {% if wp_error %}
            <div class="alert alert-warning mb-0">
                <i class="bi bi-exclamation-triangle me-2"></i>
                <strong>WordPress nicht erreichbar:</strong> {{ wp_error }}
                <br><small class="text-muted">Bitte <a href="{{ url_for('admin.settings_wordpress') }}" class="text-info">WordPress-Einstellungen</a> pruefen.</small>
            </div>
            {% elif wp_schema and wp_schema.custom_fields %}
            <p class="text-muted small mb-3">
                Diese Felder sind in WordPress unter <strong>Kurs-Booking &rarr; Einstellungen &rarr; Buchungsfelder</strong> definiert.
            </p>
            <table class="table table-dark table-hover mb-0">
                <thead>
                    <tr>
                        <th>Feldname</th>
                        <th style="width: 80px;">Typ</th>
                        <th style="min-width: 180px;">Bezeichnung</th>
                        <th style="width: 50px;" class="text-center">Aktiv</th>
                    </tr>
                </thead>
                <tbody>
                    {% for field in wp_schema.custom_fields %}
                    {% set field_id = field.name or field.id or field.label|lower|replace(' ', '_') %}
                    {% set saved = config.wp_fields.get(field_id, {}) %}
                    <tr>
                        <td class="align-middle" style="word-break: break-word; max-width: 250px;">
                            <code class="text-warning" style="white-space: normal; word-break: break-all;">{{ field_id }}</code>
                            {% if field.mandatory or field.required %}
                            <span class="badge bg-danger ms-1">Pflicht</span>
                            {% endif %}
                        </td>
                        <td class="align-middle">
                            <span class="badge bg-secondary">{{ field.type }}</span>
                        </td>
                        <td class="align-middle">
                            <input type="text" class="form-control form-control-sm"
                                   name="wp_{{ field_id }}_label"
                                   value="{{ saved.get('label', field.label) }}"
                                   placeholder="{{ field.label }}">
                        </td>
                        <td class="text-center align-middle">
                            <div class="form-check form-switch d-inline-block mb-0">
                                <input class="form-check-input" type="checkbox"
                                       name="wp_{{ field_id }}_visible"
                                       id="wp_{{ field_id }}_visible"
                                       {% if saved.get('visible', true) %}checked{% endif %}>
                            </div>
                        </td>
                    </tr>
                    {% endfor %}
                </tbody>
            </table>
            {% elif wp_schema %}
            <div class="text-center text-muted py-4">
                <i class="bi bi-inbox fs-1 mb-2"></i>
                <p class="mb-0">Keine Buchungsfelder in WordPress definiert.</p>
                <small>Felder koennen in WordPress unter Kurs-Booking &rarr; Einstellungen &rarr; Buchungsfelder hinzugefuegt werden.</small>
            </div>
            {% else %}
            <div class="alert alert-info mb-0">
                <i class="bi bi-info-circle me-2"></i>
                WordPress-Verbindung pruefen...
            </div>
            {% endif %}
        </div>
    </div>

    {# Sprint 12: Legacy MEC Fields section removed - all fields now managed via
       WordPress schema or dynamic custom_fields #}

    <!-- Advanced Options -->
    <div class="card mb-4">
        <div class="card-header">
            <i class="bi bi-gear-wide-connected me-2"></i>
            Erweiterte Optionen
        </div>
        <div class="card-body">
            <div class="form-check form-switch mb-3">
                <input class="form-check-input" type="checkbox"
                       name="custom_fields_visible"
                       id="custom_fields_visible"
                       {% if config.custom_fields_visible %}checked{% endif %}>
                <label class="form-check-label" for="custom_fields_visible">
                    <strong>Custom Fields anzeigen</strong>
                </label>
                <p class="text-muted small mb-0 mt-1">
                    Zeigt zusaetzliche Felder aus WordPress-Buchungen im Kundenprofil an.
                </p>
            </div>

            <div class="form-check form-switch">
                <input class="form-check-input" type="checkbox"
                       name="sync_button_visible"
                       id="sync_button_visible"
                       {% if config.sync_button_visible %}checked{% endif %}>
                <label class="form-check-label" for="sync_button_visible">
                    <strong>Sync-Button anzeigen</strong>
                </label>
                <p class="text-muted small mb-0 mt-1">
                    Erlaubt Kunden, ihre Daten aus der letzten WordPress-Buchung zu synchronisieren.
                </p>
            </div>
        </div>
    </div>

    <!-- Submit -->
    <div class="d-flex gap-2">
        <button type="submit" class="btn btn-danger">
            <i class="bi bi-check-lg me-1"></i>
            Speichern
        </button>
    </div>
</form>
{% endblock %}