{% extends 'administration/base.html.twig' %}

{% block title %}{{ 'admin.edit_page'|trans }}{% endblock %}

{% block body %}
    <div class="container-fluid">
        {% if content_lock_blocked|default(false) %}
            <div class="alert alert-warning mb-3">
                <i class="bi bi-lock-fill me-2"></i>{{ 'admin.content_lock_blocked'|trans({'%user%': content_lock_blocked_by|default('?')}) }}
            </div>
        {% endif %}
        <!-- Header Section -->
        <div class="row mb-4">
            <div class="col-12">
                <div class="admin-card p-4">
                    <div class="d-flex flex-column flex-md-row justify-content-between align-items-start align-items-md-center">
                        <div class="mb-3 mb-md-0">
                            <h2 class="gradient-text fw-bold mb-2">
                                <i class="bi bi-file-text me-3"></i>
                                {{ 'admin.edit_page'|trans }}
                            </h2>
                            <p class="text-muted mb-0">
                                {{ 'admin.page.edit_description'|trans }}
                            </p>
                        </div>
                        <div class="d-flex gap-2">
                            <a href="{{ path('admin_pages') }}" class="btn btn-outline-secondary btn-lg">
                                <i class="bi bi-arrow-left me-2"></i>
                                {{ 'admin.page.back'|trans }}
                            </a>
                            <a href="{{ path('admin_content_revisions', {type: 'page', id: page.id}) }}" class="btn btn-outline-info btn-lg">
                                <i class="bi bi-clock-history me-2"></i>{{ 'admin.revisions.title'|trans }}
                            </a>
                            <button type="button" class="btn btn-outline-warning btn-lg" onclick="openAdminLivePreview('form', '{{ path('app_storefront_page_live_preview', {id: page.id}) }}', { localeSelectId: 'terraflowPreviewLocale', roleSelectId: 'terraflowPreviewRole', flagsInputId: 'terraflowPreviewFlags' })">
                                <i class="bi bi-box-arrow-up-right me-2"></i>
                                {{ 'admin.preview'|trans }}
                            </button>
                            <button type="submit" form="form" class="btn btn-primary btn-lg">
                                <i class="bi bi-check-circle me-2"></i>
                                {{ 'admin.save'|trans }}
                            </button>
                            <div class="btn-group">
                                <button id="btnGroupDrop1" type="button" class="btn btn-primary dropdown-toggle" data-bs-toggle="dropdown" data-bs-boundary="viewport" data-bs-container="body" aria-expanded="false">
                                    <i class="bi bi-three-dots-vertical"></i>
                                </button>
                                <ul class="dropdown-menu dropdown-menu-end" aria-labelledby="btnGroupDrop1">
                                    <li><a href="{{ path('admin_duplicate_page', {id: page.id}) }}" class="dropdown-item">
                                            <i class="bi bi-copy"></i> {{ 'admin.duplicate'|trans }}
                                        </a>
                                    </li>
                                    <li>
                                        <button type="button" class="dropdown-item" onclick="handleDeletePage('{{ page.id }}', '{{ page.title }}')">
                                            <i class="bi bi-trash"></i> {{ 'admin.delete'|trans }}
                                        </button>
                                    </li>
                                </ul>
                            </div>
                        </div>
                    </div>
                    <div class="mt-3 pt-3 border-top d-flex flex-wrap align-items-center gap-2 small text-muted">
                        <span class="fw-semibold text-body">{{ 'admin.preview_options'|trans }}</span>
                        <label for="terraflowPreviewLocale" class="mb-0">{{ 'admin.preview_locale'|trans }}</label>
                        <select id="terraflowPreviewLocale" class="form-select form-select-sm" style="width:auto;min-width:7rem">
                            <option value="">{{ 'admin.preview_locale_session'|trans }}</option>
                            <option value="de">de</option>
                            <option value="en">en</option>
                        </select>
                        <label for="terraflowPreviewRole" class="mb-0">{{ 'admin.preview_simulated_role'|trans }}</label>
                        <input type="text" id="terraflowPreviewRole" class="form-control form-control-sm" style="max-width:10rem" placeholder="ROLE_…" autocomplete="off">
                        <label for="terraflowPreviewFlags" class="mb-0">{{ 'admin.preview_flags'|trans }}</label>
                        <input type="text" id="terraflowPreviewFlags" class="form-control form-control-sm" style="max-width:10rem" placeholder="a, b" autocomplete="off">
                    </div>
                </div>
            </div>
        </div>

        {% if page.publicationStatus.value == 'published' and page.isPubliclyVisible() %}
            <div class="alert alert-info d-flex align-items-start gap-2 mb-3" role="status">
                <i class="bi bi-info-circle flex-shrink-0 mt-1"></i>
                <div>{{ 'form.page.edit_published_hint'|trans }}</div>
            </div>
        {% endif %}

        {{ form_start(form, {'attr': {'id': 'form'}}) }}
        <div class="row g-4">
            <!-- Basic Information -->
            <div class="col-12 col-lg-4">
                <div class="admin-card p-4">
                    <h4 class="gradient-text fw-bold mb-4">
                        <i class="bi bi-info-circle me-2"></i>
                        {{ 'admin.page.basic_info'|trans }}
                    </h4>
                    <div class="mb-4">
                        {{ form_label(form.title, 'form.page.title'|trans, {'label_attr': {'class': 'form-label fw-semibold text-primary'}}) }}
                        {{ form_widget(form.title, {'attr': {'class': 'form-control form-control-lg', 'required': 'true'}}) }}
                    </div>
                    <div class="mb-4 form-check">
                        {{ form_widget(form.showTitle, {'attr': {'class': 'form-check-input'}}) }}
                        {{ form_label(form.showTitle, null, {'label_attr': {'class': 'form-check-label fw-semibold'}}) }}
                    </div>
                    <div class="mb-4 form-check">
                        {{ form_widget(form.active, {'attr': {'class': 'form-check-input'}}) }}
                        {{ form_label(form.active, null, {'label_attr': {'class': 'form-check-label fw-semibold'}}) }}
                        <div class="form-text">{{ form_help(form.active) }}</div>
                    </div>
                    <div class="mb-4">
                        {{ form_label(form.publicationStatus, null, {'label_attr': {'class': 'form-label fw-semibold text-primary'}}) }}
                        {{ form_widget(form.publicationStatus) }}
                    </div>
                    {% if form.keepPublicVersionWhileDraft is defined %}
                    <div class="mb-4 form-check">
                        {{ form_widget(form.keepPublicVersionWhileDraft, {'attr': {'class': 'form-check-input'}}) }}
                        {{ form_label(form.keepPublicVersionWhileDraft, null, {'label_attr': {'class': 'form-check-label fw-semibold'}}) }}
                        <div class="form-text">{{ form_help(form.keepPublicVersionWhileDraft) }}</div>
                    </div>
                    {% endif %}
                    <div class="mb-4">
                        {{ form_label(form.scheduledPublishAt, null, {'label_attr': {'class': 'form-label fw-semibold text-primary'}}) }}
                        {{ form_widget(form.scheduledPublishAt) }}
                    </div>
                    <div class="mb-4">
                        {{ form_label(form.category, 'form.page.category'|trans, {'label_attr': {'class': 'form-label fw-semibold text-primary'}}) }}
                        {{ form_widget(form.category, {'attr': {'class': 'form-control'}}) }}
                    </div>
                    <div class="mb-4">
                        {{ form_label(form.routePath, 'form.page.route'|trans, {'label_attr': {'class': 'form-label fw-semibold text-primary'}}) }}
                        {{ form_widget(form.routePath, {'attr': {'class': 'form-control', 'id': 'routePathField'}}) }}
                        <small class="form-text text-muted">Leer lassen für Landing Page</small>
                    </div>
                    <div class="mb-4 form-check">
                        {{ form_widget(form.isLanding, {'attr': {'class': 'form-check-input', 'onclick': 'toggleRouteField()'}}) }}
                        {{ form_label(form.isLanding, null, {'label_attr': {'class': 'form-check-label fw-semibold'}}) }}
                    </div>
                    <div class="mb-4 form-check">
                        {{ form_widget(form.listInNavigation, {'attr': {'class': 'form-check-input'}}) }}
                        {{ form_label(form.listInNavigation, null, {'label_attr': {'class': 'form-check-label fw-semibold'}}) }}
                    </div>
                </div>
            </div>
            <!-- Content & Advanced -->
            <div class="col-12 col-lg-8">
                <div class="admin-card p-4 mb-4">
                    <h4 class="gradient-text fw-bold mb-4">
                        <i class="bi bi-file-earmark-text me-2"></i>
                        {{ 'admin.page.content_section'|trans }}
                    </h4>
                    <div class="mb-4">
                        {{ form_label(form.content, 'form.page.content'|trans, {'label_attr': {'class': 'form-label fw-semibold text-primary'}}) }}
                        {{ form_widget(form.content, {'attr': {'class': 'form-control wysiwyg-editor', 'data-ce-title': 'form.page.content'|trans }}) }}
                        <button type="button" class="btn btn-primary mt-1" onclick="openMediaBrowser((referenceCodes) => { insertReferenceCodes(referenceCodes, 'content'); })">
                            <i class="bi bi-images me-2"></i>
                            {{ 'admin.media_browser.title'|trans }}
                        </button>
                    </div>
                </div>
                <div class="admin-card p-4">
                    <div class="d-flex flex-row justify-content-between mb-1" style="cursor: pointer" data-bs-toggle="collapse" data-bs-target="#advancedFields" onclick="toggleIcon('advanced-icon', 'bi-chevron-down', 'bi-chevron-up');">
                        <h4 class="gradient-text fw-bold mb-0">
                            <i class="bi bi-gear me-2"></i>
                            {{ 'admin.advanced'|trans }}
                        </h4>
                        <i id="advanced-icon" class="bi bi-chevron-up"></i>
                    </div>
                    <div id="advancedFields" class="collapse">
                        <div class="mb-3 form-check">
                            {{ form_label(form.hideNavigation) }}
                            {{ form_widget(form.hideNavigation, {'attr': {'class': 'form-check-input'}}) }}
                        </div>
                        <div class="mb-3">
                            {{ form_label(form.permissionRequired) }}
                            {{ form_widget(form.permissionRequired, {'attr': {'class': 'form-control'}}) }}
                        </div>
                        <div class="mb-3">
                            {{ form_label(form.stylesheets) }}
                            {{ form_widget(form.stylesheets, {'attr': {'class': 'form-control editor wysiwyg-css', 'data-editor-language': 'css', 'data-ce-title': 'form.page.stylesheets'|trans }}) }}
                        </div>
                        <div class="mb-3 form-check">
                            {{ form_widget(form.styleSheetsOverwrite, {'attr': {'class': 'form-check-input'}}) }}
                            {{ form_label(form.styleSheetsOverwrite, null, {'label_attr': {'class': 'form-check-label'}}) }}
                        </div>
                        <div class="mb-3">
                            {{ form_label(form.javascripts) }}
                            {{ form_widget(form.javascripts, {'attr': {'class': 'form-control editor wysiwyg-js', 'data-editor-language': 'javascript', 'data-ce-title': 'form.page.javascripts'|trans }}) }}
                        </div>
                        <div class="mb-3 form-check">
                            {{ form_widget(form.javaScriptsOverwrite, {'attr': {'class': 'form-check-input'}}) }}
                            {{ form_label(form.javaScriptsOverwrite, null, {'label_attr': {'class': 'form-check-label'}}) }}
                        </div>
                        <div class="mb-3">
                            {{ form_label(form.javascriptsBottom) }}
                            {{ form_widget(form.javascriptsBottom, {'attr': {'class': 'form-control editor', 'data-editor-language': 'javascript', 'data-ce-title': 'form.page.javascripts_bottom'|trans }}) }}
                        </div>
                        <div class="mb-3 form-check">
                            {{ form_widget(form.javaScriptsBottomOverwrite, {'attr': {'class': 'form-check-input'}}) }}
                            {{ form_label(form.javaScriptsBottomOverwrite, null, {'label_attr': {'class': 'form-check-label'}}) }}
                        </div>
                        <div class="mb-3">
                            {{ form_label(form.metaTags) }}
                            {{ form_widget(form.metaTags, {'attr': {'class': 'form-control editor', 'data-editor-language': 'html', 'data-ce-title': 'form.page.meta_tags'|trans }}) }}
                        </div>
                        <div class="mb-3 form-check">
                            {{ form_widget(form.metaTagsOverwrite, {'attr': {'class': 'form-check-input'}}) }}
                            {{ form_label(form.metaTagsOverwrite, null, {'label_attr': {'class': 'form-check-label'}}) }}
                        </div>
                        <div class="mb-3">
                            {{ form_label(form.footer) }}
                            {{ form_widget(form.footer, {'attr': {'class': 'form-control wysiwyg-editor', 'data-ce-title': 'form.page.footer'|trans }}) }}
                        </div>
                        <div class="mb-3 form-check">
                            {{ form_widget(form.footerOverwrite, {'attr': {'class': 'form-check-input'}}) }}
                            {{ form_label(form.footerOverwrite, null, {'label_attr': {'class': 'form-check-label'}}) }}
                        </div>
                        <div class="mb-3">
                            {{ form_label(form.navigation) }}
                            {{ form_widget(form.navigation, {'attr': {'class': 'form-control wysiwyg-editor', 'rows': 5, 'data-ce-title': 'form.page.navigation'|trans }}) }}
                        </div>
                    </div>
                </div>
            </div>

            <!-- Custom Fields Section -->
            {% if form.custom_field_1 is defined or form.custom_field_2 is defined or form.custom_field_3 is defined %}
            <div class="col-12">
                <div class="admin-card p-4">
                    <h4 class="gradient-text fw-bold mb-4">
                        <i class="bi bi-tags me-2"></i>
                        {{ 'custom_fields.title'|trans }}
                    </h4>
                    <div class="row g-3">
                        {% for field in form %}
                            {% if field.vars.name starts with 'custom_field_' %}
                                <div class="col-12 col-md-6">
                                    <div class="mb-3">
                                        {{ form_label(field, null, {'label_attr': {'class': 'form-label fw-semibold text-primary'}}) }}
                                        {% if field.vars.help is defined and field.vars.help %}
                                            <small class="form-text text-muted">{{ field.vars.help }}</small>
                                        {% endif %}
                                        {% if field.vars.block_prefixes.1 == 'checkbox' %}
                                            <div class="form-check">
                                                {{ form_widget(field, {'attr': {'class': 'form-check-input'}}) }}
                                                {{ form_label(field, null, {'label_attr': {'class': 'form-check-label'}}) }}
                                            </div>
                                        {% else %}
                                            {{ form_widget(field, {'attr': {'class': 'form-control'}}) }}
                                        {% endif %}
                                        {{ form_errors(field) }}
                                    </div>
                                </div>
                            {% endif %}
                        {% endfor %}
                    </div>
                </div>
            </div>
            {% endif %}
        </div>
        
        <!-- Custom Fields Tabs -->
        {% import 'administration/custom_fields/tabs.html.twig' as customFields %}
        {{ customFields.custom_field_tabs(form, 'page', page.id) }}
        
        {{ form_end(form) }}
    </div>

    <!-- Modern Media Browser is loaded via JavaScript -->
    <textarea class="wysiwyg-css" hidden="hidden">{{ appSettings.globalStylesheet|processShortcodes|minifyCss|raw }}</textarea>
    <textarea class="wysiwyg-js" hidden="hidden">{{ appSettings.globalJavaScript|processShortcodes|minifyJs|raw }}</textarea>
    <textarea class="wysiwyg-js-bottom" hidden="hidden">{{ appSettings.globalJavaScriptBottom|processShortcodes|minifyJs|raw }}</textarea>
{% endblock %}

{% block javascriptBottom %}
    <script>
        function toggleRouteField() {
            var checkbox = document.getElementById('page_isLanding');
            var routeField = document.querySelector('[name="page[routePath]"]')?.closest('.mb-4');
            var routeInput = document.querySelector('[name="page[routePath]"]');
            
            if (checkbox && routeField && routeInput) {
                if (checkbox.checked) {
                    // Bei Startseite: Route leeren und Hinweis setzen
                    routeInput.value = '';
                    routeInput.placeholder = 'Wird als Landing Page (/) verwendet';
                    routeInput.disabled = true;
                } else {
                    // Bei normaler Seite: Feld aktivieren
                    routeInput.placeholder = 'z.B. meine-seite';
                    routeInput.disabled = false;
                }
            }
        }
        function initAdminEditPage() {
            toggleRouteField();
            document.getElementById('advancedFields').classList.add('collapse');
            var landingPageCheckbox = document.getElementById('page_isLanding');
            if (landingPageCheckbox) {
                toggleRouteField();
                landingPageCheckbox.addEventListener('change', toggleRouteField);
            }
            
            // Form-Validierung vor dem Absenden
            var form = document.getElementById('form');
            if (form) {
                form.addEventListener('submit', function(e) {
                    var landingPageCheckbox = document.getElementById('page_isLanding');
                    var routeInput = document.querySelector('[name="page[routePath]"]');
                    
                    if (landingPageCheckbox && landingPageCheckbox.checked && routeInput) {
                        // Bei Startseite: Feld leeren
                        routeInput.value = '';
                    }
                });
            }
        }

        document.addEventListener('DOMContentLoaded', initAdminEditPage);

        {% if not content_lock_blocked|default(false) %}
        (function contentLockHeartbeat() {
            var urlHb = '{{ path('admin_api_content_lock_heartbeat')|e('js') }}';
            var urlRel = '{{ path('admin_api_content_lock_release')|e('js') }}';
            var payload = JSON.stringify({ entityType: 'page', entityId: {{ page.id }} });
            setInterval(function () {
                fetch(urlHb, { method: 'POST', headers: { 'Content-Type': 'application/json' }, credentials: 'same-origin', body: payload });
            }, 55000);
            window.addEventListener('beforeunload', function () {
                fetch(urlRel, { method: 'POST', headers: { 'Content-Type': 'application/json' }, credentials: 'same-origin', keepalive: true, body: payload });
            });
        })();
        {% endif %}

        async function handleDeletePage(pageId, pageTitle) {
            const confirmed = await showDeleteConfirm(`{{ 'admin.page.delete_confirm_prefix'|trans }} "${pageTitle}"`);
            
            if (confirmed) {
                window.location.href = '{{ path('admin_delete_page', {id: page.id}) }}';
            }
        }

        function insertReferenceCodes(referenceCodes, targetField) {
            const textarea = document.querySelector(`[name="page[${targetField}]"]`);
            if (!textarea) {
                return;
            }
            const insertion = '\n' + referenceCodes.join('\n');
            if (window.terraflowEditors && typeof window.terraflowEditors.appendToField === 'function') {
                window.terraflowEditors.appendToField(textarea, insertion);
                return;
            }
            textarea.value = (textarea.value || '') + insertion;
            textarea.dispatchEvent(new Event('change', { bubbles: true }));
        }
    </script>
{% endblock %}