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

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

{% block body %}
    <div class="container-fluid">
        <!-- 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-earmark-plus me-3"></i>
                                {{ 'admin.createPage'|trans }}
                            </h2>
                            <p class="text-muted mb-0">
                                {{ 'admin.page.new_description'|trans }}
                            </p>
                        </div>
                        <div class="d-flex flex-wrap gap-2 align-items-center">
                            <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>
                            <button type="button" class="btn btn-outline-warning btn-lg" onclick="openAdminLivePreview('form', '{{ path('app_storefront_page_live_preview_new') }}', { 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>
                    </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>

        {{ 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>
                    <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 automatische Generierung aus Titel oder 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', null) }}
        
        {{ 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 als 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 initAdminNewPage() {
            document.getElementById('advancedFields').classList.add('collapse');
            
            // Toggle route field based on landing page checkbox
            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_landingPage');
                    var routeInput = document.querySelector('[name="page[route]"]');
                    
                    if (landingPageCheckbox && landingPageCheckbox.checked && routeInput) {
                        // Bei Startseite: required-Attribut entfernen
                        routeInput.removeAttribute('required');
                    }
                });
            }
        }

        document.addEventListener('DOMContentLoaded', initAdminNewPage);

        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 %}