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

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

{% block body %}
    {% set settings = get_settings() %}
    <div class="container-fluid">
        <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-gear-fill me-3"></i>
                                {{ 'admin.settings'|trans }}
                            </h2>
                            <p class="text-muted mb-0">{{ 'admin.configure_system_settings'|trans }}</p>
                        </div>
                        <div class="d-flex flex-wrap gap-2">
                            <a href="{{ path('admin_content_revisions', {type: 'settings', id: 1}) }}" class="btn btn-outline-info btn-lg">
                                <i class="bi bi-clock-history me-2"></i>{{ 'admin.revisions.title'|trans }}
                            </a>
                            <button type="submit" class="btn btn-primary btn-lg" onclick="document.getElementById('form').requestSubmit()">
                                <i class="bi bi-check-circle me-2"></i>
                                {{ 'admin.save'|trans }}
                            </button>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        {{ form_start(form, {'attr': {'id': 'form'}}) }}
        <div class="row g-4">
            <div class="col-12 col-lg-3">
                <div class="admin-card p-3 settings-nav-wrapper">
                    <nav class="settings-nav" id="settingsNav">
                        <button type="button" class="settings-nav-link active" data-target="section-general">{{ 'admin.settings_nav.general'|trans }}</button>
                        <button type="button" class="settings-nav-link" data-target="section-seo">{{ 'admin.settings_nav.seo'|trans }}</button>
                        <button type="button" class="settings-nav-link" data-target="section-code">{{ 'admin.settings_nav.code'|trans }}</button>
                        <button type="button" class="settings-nav-link" data-target="section-navigation">{{ 'admin.settings_nav.navigation'|trans }}</button>
                        <button type="button" class="settings-nav-link" data-target="section-security">{{ 'admin.settings_nav.security'|trans }}</button>
                        {% if settingsHasCustomFieldSets|default(false) %}
                        <button type="button" class="settings-nav-link" data-target="section-custom-fields">{{ 'admin.settings_nav.custom_fields'|trans }}</button>
                        {% endif %}
                    </nav>
                </div>
            </div>

            <div class="col-12 col-lg-9">
                <section class="settings-section active" id="section-general">
                    <div class="admin-card p-4">
                        <h4 class="gradient-text fw-bold mb-4">
                            <i class="bi bi-info-circle me-2"></i>{{ 'admin.general_settings'|trans }}
                        </h4>
                        <div class="row g-3">
                            <div class="col-12 col-md-6">
                                {{ form_label(form.systemName, null, {'label_attr': {'class': 'form-label fw-semibold'}}) }}
                                {{ form_widget(form.systemName, {'attr': {'class': 'form-control'}}) }}
                            </div>
                            <div class="col-12 col-md-6">
                                {{ form_label(form.theme, null, {'label_attr': {'class': 'form-label fw-semibold'}}) }}
                                {{ form_widget(form.theme, {'attr': {'class': 'form-control'}}) }}
                            </div>
                            <div class="col-12 col-md-6">
                                {{ form_label(form.timezone, null, {'label_attr': {'class': 'form-label fw-semibold'}}) }}
                                {{ form_widget(form.timezone, {'attr': {'class': 'form-control'}}) }}
                            </div>
                            <div class="col-12 col-md-6">
                                {{ form_label(form.textSeparator, null, {'label_attr': {'class': 'form-label fw-semibold'}}) }}
                                {{ form_widget(form.textSeparator, {'attr': {'class': 'form-control'}}) }}
                            </div>
                            <div class="col-12">
                                {{ form_label(form.favicon, null, {'label_attr': {'class': 'form-label fw-semibold'}}) }}
                                {{ form_widget(form.favicon, {'attr': {'class': 'form-control'}}) }}
                            </div>
                        </div>
                    </div>
                </section>

                <section class="settings-section" id="section-seo">
                    <div class="admin-card p-4">
                        <h4 class="gradient-text fw-bold mb-4">
                            <i class="bi bi-search me-2"></i>{{ 'admin.seo_meta_tags'|trans }}
                        </h4>
                        {{ form_label(form.metaTags, null, {'label_attr': {'class': 'form-label fw-semibold'}}) }}
                        {{ form_widget(form.metaTags, {'attr': {'class': 'form-control editor', 'rows': 5, 'data-editor-language': 'html', 'data-ce-title': 'form.settings.meta_tags'|trans }}) }}
                        <small class="text-muted">{{ 'admin.meta_tags_description'|trans }}</small>
                    </div>
                </section>

                <section class="settings-section" id="section-code">
                    <div class="admin-card p-4">
                        <h4 class="gradient-text fw-bold mb-4">
                            <i class="bi bi-code-slash me-2"></i>{{ 'admin.settings_nav.code'|trans }}
                        </h4>
                        <div class="mb-3">
                            {{ form_label(form.globalStylesheet, null, {'label_attr': {'class': 'form-label fw-semibold'}}) }}
                            {{ form_widget(form.globalStylesheet, {'attr': {'class': 'form-control editor wysiwyg-css', 'rows': 10, 'data-editor-language': 'css', 'data-ce-title': 'form.settings.global_stylesheet'|trans}}) }}
                            <small class="text-muted">{{ 'admin.global_css_description'|trans }}</small>
                        </div>
                        <div class="mb-3">
                            {{ form_label(form.globalJavascript, null, {'label_attr': {'class': 'form-label fw-semibold'}}) }}
                            {{ form_widget(form.globalJavascript, {'attr': {'class': 'form-control editor wysiwyg-js', 'rows': 10, 'data-editor-language': 'javascript', 'data-ce-title': 'form.settings.global_javascript'|trans}}) }}
                            <small class="text-muted">{{ 'admin.global_js_description'|trans }}</small>
                        </div>
                        <div class="mb-0">
                            {{ form_label(form.globalJavascriptBottom, null, {'label_attr': {'class': 'form-label fw-semibold'}}) }}
                            {{ form_widget(form.globalJavascriptBottom, {'attr': {'class': 'form-control editor wysiwyg-js-body', 'rows': 8, 'data-editor-language': 'javascript', 'data-ce-title': 'form.settings.global_javascript_bottom'|trans}}) }}
                            <small class="text-muted">{{ 'admin.global_js_bottom_description'|trans }}</small>
                        </div>
                    </div>
                </section>

                <section class="settings-section" id="section-navigation">
                    <div class="admin-card p-4 mb-4">
                        <h4 class="gradient-text fw-bold mb-4">
                            <i class="bi bi-list me-2"></i>{{ 'admin.custom_navigation'|trans }}
                        </h4>
                        {{ form_label(form.navigation, null, {'label_attr': {'class': 'form-label fw-semibold'}}) }}
                        {{ form_widget(form.navigation, {'attr': {'class': 'form-control wysiwyg-editor', 'rows': 8, 'data-ce-title': 'form.settings.navigation'|trans}}) }}
                        <small class="text-muted">{{ 'admin.custom_navigation_description'|trans }}</small>
                    </div>
                    <div class="admin-card p-4">
                        <h4 class="gradient-text fw-bold mb-4">
                            <i class="bi bi-layout-text-window-reverse me-2"></i>{{ 'admin.global_footer'|trans }}
                        </h4>
                        {{ form_label(form.globalFooter, null, {'label_attr': {'class': 'form-label fw-semibold'}}) }}
                        {{ form_widget(form.globalFooter, {'attr': {'class': 'form-control wysiwyg-editor', 'rows': 8, 'data-ce-title': 'form.settings.global_footer'|trans}}) }}
                        <small class="text-muted">{{ 'admin.global_footer_description'|trans }}</small>
                    </div>
                    <div class="admin-card p-4 mt-4">
                        <h4 class="gradient-text fw-bold mb-4">
                            <i class="bi bi-list-ul me-2"></i>{{ 'admin.navigation_settings'|trans }}
                        </h4>
                        <div class="row g-3">
                            <div class="col-12 col-md-6">
                                <div class="mb-3 form-check">
                                    {{ form_widget(form.showAdministrationInNavigation, {'attr': {'class': 'form-check-input'}}) }}
                                    {{ form_label(form.showAdministrationInNavigation, null, {'label_attr': {'class': 'form-check-label fw-semibold'}}) }}
                                    <small class="d-block text-muted">{{ 'admin.show_admin_in_nav_description'|trans }}</small>
                                </div>
                            </div>
                            <div class="col-12 col-md-6">
                                <div class="mb-3 form-check">
                                    {{ form_widget(form.showLoginInNavigation, {'attr': {'class': 'form-check-input'}}) }}
                                    {{ form_label(form.showLoginInNavigation, null, {'label_attr': {'class': 'form-check-label fw-semibold'}}) }}
                                    <small class="d-block text-muted">{{ 'admin.show_login_in_nav_description'|trans }}</small>
                                </div>
                            </div>
                            <div class="col-12 col-md-6">
                                <div class="mb-3 form-check">
                                    {{ form_widget(form.showLogoutInNavigation, {'attr': {'class': 'form-check-input'}}) }}
                                    {{ form_label(form.showLogoutInNavigation, null, {'label_attr': {'class': 'form-check-label fw-semibold'}}) }}
                                    <small class="d-block text-muted">{{ 'admin.show_logout_in_nav_description'|trans }}</small>
                                </div>
                            </div>
                            <div class="col-12 col-md-6">
                                <div class="mb-3 form-check">
                                    {{ form_widget(form.showRegistrationInNavigation, {'attr': {'class': 'form-check-input'}}) }}
                                    {{ form_label(form.showRegistrationInNavigation, null, {'label_attr': {'class': 'form-check-label fw-semibold'}}) }}
                                    <small class="d-block text-muted">{{ 'admin.show_registration_in_nav_description'|trans }}</small>
                                </div>
                            </div>
                        </div>
                    </div>
                </section>

                <section class="settings-section" id="section-security">
                    <div class="admin-card p-4">
                        <h4 class="gradient-text fw-bold mb-4">
                            <i class="bi bi-shield-check me-2"></i>{{ 'admin.system_security'|trans }}
                        </h4>
                        <div class="row g-3">
                            <div class="col-12 col-md-6">
                                <div class="mb-3 form-check">
                                    {{ form_widget(form.automaticBackup, {'attr': {'class': 'form-check-input'}}) }}
                                    {{ form_label(form.automaticBackup, null, {'label_attr': {'class': 'form-check-label fw-semibold'}}) }}
                                    <small class="d-block text-muted">{{ 'admin.automatic_backups_description'|trans }}</small>
                                </div>
                            </div>
                            <div class="col-12 col-md-6">
                                <div class="mb-3 form-check">
                                    {{ form_widget(form.allowRegistrations, {'attr': {'class': 'form-check-input'}}) }}
                                    {{ form_label(form.allowRegistrations, null, {'label_attr': {'class': 'form-check-label fw-semibold'}}) }}
                                    <small class="d-block text-muted">{{ 'admin.allow_new_registrations'|trans }}</small>
                                </div>
                            </div>
                            <div class="col-12 col-md-6">
                                <div class="mb-3 form-check">
                                    {{ form_widget(form.allowRememberMeOnLogin, {'attr': {'class': 'form-check-input'}}) }}
                                    {{ form_label(form.allowRememberMeOnLogin, null, {'label_attr': {'class': 'form-check-label fw-semibold'}}) }}
                                    <small class="d-block text-muted">{{ 'admin.show_remember_me_description'|trans }}</small>
                                </div>
                            </div>
                            <div class="col-12 col-md-6">
                                <div class="mb-3">
                                    {{ form_label(form.loginIdentifierMode, null, {'label_attr': {'class': 'form-label fw-semibold'}}) }}
                                    {{ form_widget(form.loginIdentifierMode, {'attr': {'class': 'form-select'}}) }}
                                    <small class="d-block text-muted">{{ 'admin.login_identifier_mode_description'|trans }}</small>
                                </div>
                            </div>
                            <div class="col-12 col-md-6">
                                <div class="mb-3 form-check">
                                    {{ form_widget(form.allowPasswordReset, {'attr': {'class': 'form-check-input'}}) }}
                                    {{ form_label(form.allowPasswordReset, null, {'label_attr': {'class': 'form-check-label fw-semibold'}}) }}
                                    <small class="d-block text-muted">{{ 'admin.allow_password_reset_description'|trans }}</small>
                                </div>
                            </div>
                        </div>
                    </div>
                </section>

                {% if settingsHasCustomFieldSets|default(false) %}
                <section class="settings-section" id="section-custom-fields">
                    <div class="admin-card p-4">
                        {% import 'administration/custom_fields/tabs.html.twig' as customFields %}
                        {{ customFields.custom_field_tabs(form, 'settings', 1) }}
                    </div>
                </section>
                {% endif %}

                <div class="admin-card p-4 text-center mt-4">
                    <button type="submit" class="btn btn-primary btn-lg">
                        <i class="bi bi-check-circle me-2"></i>{{ 'admin.save'|trans }}
                    </button>
                    <p class="text-muted mt-3 mb-0">
                        <i class="bi bi-info-circle me-1"></i>{{ 'admin.save_shortcut_hint'|trans }}
                    </p>
                </div>
            </div>
        </div>

        {{ form_end(form) }}
    </div>

    <textarea class="wysiwyg-css" hidden="hidden">{{ settings.globalStylesheet|processShortcodes|minifyCss|raw }}</textarea>
    <textarea class="wysiwyg-js" hidden="hidden">{{ settings.globalJavascript|processShortcodes|minifyJs|raw }}</textarea>
    <textarea class="wysiwyg-js-bottom" hidden="hidden">{{ settings.globalJavascriptBottom|processShortcodes|minifyJs|raw }}</textarea>

    <style>
        .settings-nav-wrapper {
            position: sticky;
            top: 1rem;
        }

        .settings-nav {
            display: flex;
            flex-direction: column;
            gap: 0.5rem;
        }

        .settings-nav-link {
            text-align: left;
            border: 1px solid var(--border-color);
            border-radius: 8px;
            background: transparent;
            color: var(--text-color);
            padding: 0.6rem 0.75rem;
            transition: all 0.2s ease;
            font-weight: 600;
        }

        .settings-nav-link:hover,
        .settings-nav-link.active {
            background: var(--light-bg);
            border-color: var(--primary-color);
            color: var(--primary-color);
        }

        .settings-section {
            display: none;
        }

        .settings-section.active {
            display: block;
        }

        .admin-card {
            transition: transform 0.2s ease, box-shadow 0.2s ease;
        }
        
        .admin-card:hover {
            transform: translateY(-1px);
            box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1) !important;
        }
        
        .form-check {
            padding: 1rem;
            border-radius: 8px;
            background: var(--light-bg);
            border: 1px solid var(--border-color);
            transition: all 0.2s ease;
        }
        
        .form-check:hover {
            background: var(--card-bg);
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
        }
        
        .form-control {
            border-radius: 8px;
            border: 1px solid var(--border-color);
            transition: all 0.2s ease;
        }
        
        .form-control:focus {
            border-color: var(--primary-color);
            box-shadow: 0 0 0 0.2rem rgba(var(--primary-rgb), 0.25);
        }
        
        @media (max-width: 768px) {
            .settings-nav-wrapper {
                position: static;
            }

            .settings-nav {
                flex-direction: row;
                overflow-x: auto;
                padding-bottom: 0.25rem;
            }

            .settings-nav-link {
                white-space: nowrap;
            }

            .admin-card {
                padding: 1rem !important;
            }
            
            .form-check {
                padding: 0.75rem;
            }
            
            .btn-lg {
                padding: 0.75rem 1.5rem;
                font-size: 1rem;
            }
        }
    </style>

    <script>
        function initAdminSettingsPage() {
            const navLinks = document.querySelectorAll('.settings-nav-link');
            const sections = document.querySelectorAll('.settings-section');

            navLinks.forEach((link) => {
                link.addEventListener('click', () => {
                    const targetId = link.dataset.target;
                    const targetSection = document.getElementById(targetId);

                    if (!targetSection) {
                        return;
                    }

                    navLinks.forEach((item) => item.classList.remove('active'));
                    sections.forEach((section) => section.classList.remove('active'));

                    link.classList.add('active');
                    targetSection.classList.add('active');
                });
            });
        }

        document.addEventListener('DOMContentLoaded', initAdminSettingsPage);
    </script>
{% endblock %}