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

{% block title %}Paramètres globaux{% endblock %}
{% block breadcrumb %}Paramètres généraux{% endblock %}

{% block stylesheets %}
    <link rel="stylesheet" href="{{ asset('assets/css/heading-styles.css') }}">
    <style type="text/css">
        {% for font in fonts %}
        @font-face {
            font-family: '{{ font.realFontName }}';
            src: url({{ asset('templates/fonts/' ~ font.path) }})
        }
        {% endfor %}

        .dd { position: relative; display: block; margin: 0; padding: 0; list-style: none; font-size: 13px; line-height: 20px; }
        .dd-list { display: block; position: relative; margin: 0; padding: 0; list-style: none; }
        .dd-list .dd-list { padding-left: 30px; }
        .dd-collapsed .dd-list { display: none; }
        .dd-item, .dd-empty, .dd-placeholder { display: block; position: relative; margin: 0; padding: 0; min-height: 20px; font-size: 13px; line-height: 20px; }
        .dd-handle {
            display: block;
            height: 40px;
            margin: 5px 0;
            padding: 10px 15px;
            color: #333;
            text-decoration: none;
            font-weight: 500;
            border: 1px solid #dee2e6;
            background: #fff;
            border-radius: 8px;
            box-sizing: border-box;
            transition: all 0.3s ease;
        }
        .dd-handle:hover {
            color: #667eea;
            background: #f8f9fa;
            border-color: #667eea;
            box-shadow: 0 2px 8px rgba(102, 126, 234, 0.1);
        }
        .dd-item > button {
            display: block;
            position: relative;
            cursor: pointer;
            float: left;
            width: 25px;
            height: 20px;
            margin: 5px 0;
            padding: 0;
            text-indent: 100%;
            white-space: nowrap;
            overflow: hidden;
            border: 0;
            background: transparent;
            font-size: 12px;
            line-height: 1;
            text-align: center;
            font-weight: bold;
        }
        .dd-item > button:before { content: '+'; display: block; position: absolute; width: 100%; text-align: center; text-indent: 0; }
        .dd-item > button[data-action="collapse"]:before { content: '-'; }
        .dd-placeholder, .dd-empty {
            margin: 5px 0;
            padding: 0;
            min-height: 30px;
            background: #f8f9fa;
            border: 2px dashed #dee2e6;
            box-sizing: border-box;
            border-radius: 8px;
        }
        .dd-dragel { position: absolute; pointer-events: none; z-index: 9999; }
        .dd-dragel > .dd-item .dd-handle { margin-top: 0; }
        .dd-dragel .dd-handle {
            box-shadow: 0 4px 12px rgba(0,0,0,.15);
        }
        .dd-hover > .dd-handle {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%) !important;
            color: white !important;
            border-color: #667eea !important;
        }

        #test-font {
            padding: 20px;
            background: #f8f9fa;
            border-radius: 12px;
            border: 1px solid #dee2e6;
        }

        #test-font label {
            font-weight: 600;
            color: #667eea;
            margin-bottom: 15px;
            display: block;
        }

        #test-font p {
            line-height: 1.6;
            color: #495057;
        }

        .noUi-target {
            border-radius: 8px;
            border: 1px solid #dee2e6;
            box-shadow: none;
        }

        .noUi-connect {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        }

        .noUi-handle {
            border-radius: 50%;
            box-shadow: 0 2px 8px rgba(0,0,0,0.15);
        }

        .color-preview {
            width: 50px;
            height: 50px;
            border-radius: 8px;
            border: 2px solid #dee2e6;
            display: inline-block;
            vertical-align: middle;
            margin-left: 10px;
        }

        /* Styles pour les sélecteurs header/footer */
        .form-select-lg {
            padding: 0.75rem 2.5rem 0.75rem 1rem;
            font-size: 1rem;
            border-radius: 10px;
            border: 2px solid #e3e6f0;
            background-color: #ffffff;
            background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23667eea' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e");
            background-repeat: no-repeat;
            background-position: right 0.75rem center;
            background-size: 16px 12px;
            transition: all 0.3s ease;
            cursor: pointer;
            font-weight: 500;
        }

        .form-select-lg:hover {
            border-color: #667eea;
            box-shadow: 0 2px 12px rgba(102, 126, 234, 0.15);
            transform: translateY(-1px);
        }

        .form-select-lg:focus {
            border-color: #667eea;
            box-shadow: 0 0 0 0.25rem rgba(102, 126, 234, 0.25);
            outline: 0;
        }

        .form-select-lg option {
            padding: 0.75rem;
            font-weight: 500;
        }

        .form-text.text-muted {
            font-size: 0.875rem;
            color: #6c757d !important;
        }

        .form-text.text-muted i {
            color: #667eea;
        }
    </style>
{% endblock %}

{% block body %}
<div class="content-header" data-aos="fade-down">
    <h1 class="content-title">Paramètres globaux</h1>
    <p class="content-subtitle">Configurez les paramètres de votre site</p>
</div>

{% if success %}
<div class="alert alert-success alert-success-modern d-flex align-items-center mb-4" role="alert" data-aos="fade-up">
    <i class="fas fa-check-circle me-3 fs-4"></i>
    <div>
        <strong>Succès !</strong> Vos paramètres ont été mis à jour avec succès.
    </div>
</div>
{% endif %}

{{ form_start(form, {'attr': {'id': 'global-params-form', 'enctype': 'multipart/form-data'}}) }}

<!-- Section Général -->
<div class="modern-card mb-4" data-aos="fade-up">
    <h5 class="fw-bold mb-4">
        <i class="fas fa-info-circle me-2" style="background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent;"></i>
        Informations générales
    </h5>
    <div class="row g-3">
        <div class="col-md-6">
            <label class="form-label fw-semibold">{{ form_label(form.name, 'Nom du site') }}</label>
            {{ form_widget(form.name, {'attr':{'class':'form-control'}, 'label': false}) }}
        </div>
        <div class="col-md-6">
            <label class="form-label fw-semibold">{{ form_label(form.domain, 'Nom de domaine') }}</label>
            {{ form_widget(form.domain, {'attr':{'class':'form-control', 'placeholder': 'https://www.monsite.com'}, 'label': false}) }}
        </div>
        <div class="col-12">
            <div class="form-check form-switch">
                {{ form_widget(form.domainActif, {'attr':{'class':'form-check-input', 'role': 'switch'}, 'label': false}) }}
                <label class="form-check-label fw-semibold" for="{{ form.domainActif.vars.id }}">
                    {{ form_label(form.domainActif, 'Activer le domaine personnalisé') }}
                </label>
                <div class="form-text">
                    <i class="fas fa-info-circle me-1"></i>
                    Lorsque cette option est activée, tous les liens du site pointeront vers votre domaine personnalisé.
                </div>
            </div>
        </div>
        <div class="col-12">
            <label class="form-label fw-semibold">{{ form_label(form.description, 'Description') }}</label>
            {{ form_widget(form.description, {'attr':{'class':'form-control', 'rows': 3}, 'label': false}) }}
        </div>
    </div>
</div>

<!-- Section Logo et Favicon -->
<div class="row g-4 mb-4">
    <div class="col-md-6" data-aos="fade-up" data-aos-delay="100">
        <div class="modern-card h-100">
            <h5 class="fw-bold mb-3">
                <i class="fas fa-image me-2 text-primary"></i>
                Logo
            </h5>
            <div class="text-center mb-3">
                {% set logoPath = vich_uploader_asset(site, 'logoFile') %}
                <img id="edit_global_parameters_logo-img"
                     src="{% if logoPath %}{{ logoPath }}{% else %}{{ asset('assets/img/logo.png') }}{% endif %}"
                     class="img-fluid rounded"
                     style="max-height: 150px; max-width: 100%; object-fit: contain;"
                     onerror="this.src='{{ asset('assets/img/logo.png') }}'" />
            </div>
            {{ form_widget(form.logo, {'attr':{'class':'form-control js-file-attachment-logo'}, 'label': false}) }}
            <div class="form-check form-switch mt-3">
                {{ form_widget(form.nameInLogo, {'attr':{'class':'form-check-input', 'role': 'switch'}, 'label': false}) }}
                <label class="form-check-label">{{ form_label(form.nameInLogo, 'Le nom est visible dans le logo') }}</label>
            </div>
        </div>
    </div>
    <div class="col-md-6" data-aos="fade-up" data-aos-delay="200">
        <div class="modern-card h-100">
            <h5 class="fw-bold mb-3">
                <i class="fas fa-star me-2 text-warning"></i>
                Favicon
            </h5>
            <div class="text-center mb-3">
                {% set faviconPath = vich_uploader_asset(site, 'faviconFile') %}
                <img id="edit_global_parameters_favicon-img" width="32"
                     src="{% if faviconPath %}{{ faviconPath }}{% else %}{{ asset('assets/img/logo/favicon.png') }}{% endif %}"
                     onerror="this.src='{{ asset('assets/img/logo/favicon.png') }}'" />
            </div>
            {{ form_widget(form.favicon, {'attr':{'class':'form-control js-file-attachment-favicon'}, 'label': false}) }}
        </div>
    </div>
</div>

<!-- Section Réseaux sociaux -->
<div class="modern-card mb-4" data-aos="fade-up">
    <h5 class="fw-bold mb-4">
        <i class="fas fa-share-alt me-2" style="background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent;"></i>
        Réseaux sociaux
    </h5>
    <div class="row g-3">
        <div class="col-md-4">
            <label class="form-label fw-semibold">
                <i class="fab fa-facebook text-primary me-2"></i>
                {{ form_label(form.facebook, 'Facebook') }}
            </label>
            {{ form_widget(form.facebook, {'attr':{'class':'form-control', 'placeholder': 'https://facebook.com/...'}, 'label': false}) }}
        </div>
        <div class="col-md-4">
            <label class="form-label fw-semibold">
                <i class="fab fa-twitter text-info me-2"></i>
                {{ form_label(form.twitter, 'Twitter') }}
            </label>
            {{ form_widget(form.twitter, {'attr':{'class':'form-control', 'placeholder': 'https://twitter.com/...'}, 'label': false}) }}
        </div>
        <div class="col-md-4">
            <label class="form-label fw-semibold">
                <i class="fab fa-instagram text-danger me-2"></i>
                {{ form_label(form.instagram, 'Instagram') }}
            </label>
            {{ form_widget(form.instagram, {'attr':{'class':'form-control', 'placeholder': 'https://instagram.com/...'}, 'label': false}) }}
        </div>
    </div>
</div>

<!-- Section Structure -->
<div class="modern-card mb-4" data-aos="fade-up">
    <h5 class="fw-bold mb-4">
        <i class="fas fa-palette me-2" style="background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent;"></i>
        Apparence et structure
    </h5>
    <div class="row g-3">
        <div class="col-md-6">
            <label class="form-label fw-semibold">{{ form_label(form.menuTheme, 'Thème du menu') }}</label>
            {{ form_widget(form.menuTheme, {'attr':{'class':'form-select'}, 'label': false}) }}
        </div>
        <div class="col-md-6">
            <label class="form-label fw-semibold">{{ form_label(form.colorTheme, 'Couleur principale') }}</label>
            <div class="position-relative">
                {# Champ texte caché pour la soumission du formulaire #}
                {{ form_widget(form.colorTheme, {'attr': {'class': 'd-none'}, 'label': false}) }}

                {# Interface visuelle avec color picker superposé #}
                <div class="input-group position-relative">
                    <div class="btn btn-outline-secondary d-flex align-items-center justify-content-center position-relative" style="width: 60px; height: 45px; padding: 0; border: 2px solid #dee2e6; overflow: hidden;">
                        <div id="color-preview" style="width: 50px; height: 35px; border-radius: 4px; border: 1px solid #ddd;"></div>
                        {# Color picker natif transparent superposé #}
                        <input type="color" id="color-picker-native" style="position: absolute; top: 0; left: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer;" />
                    </div>
                    <input type="text" id="color-value-display" class="form-control" readonly value="" style="background-color: white; font-family: monospace; font-weight: 600; cursor: default; user-select: none;" />
                </div>
            </div>
            <small class="text-muted">Cliquez sur le carré de couleur pour modifier</small>
        </div>
        <div class="col-md-6">
            <label class="form-label fw-semibold">{{ form_label(form.defaultPage, 'Page d\'accueil par défaut') }}</label>
            {{ form_widget(form.defaultPage, {'attr':{'class':'form-select'}, 'label': false}) }}
        </div>
    </div>
</div>

<!-- Section Police -->
<div class="modern-card mb-4" data-aos="fade-up">
    <h5 class="fw-bold mb-4">
        <i class="fas fa-font me-2" style="background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent;"></i>
        Typographie
    </h5>
    <div class="row g-4">
        <div class="col-md-4">
            <label class="form-label fw-semibold">{{ form_label(form.font, 'Police de caractères') }}</label>
            {{ form_widget(form.font, {'attr':{'class':'form-select'}, 'label': false}) }}
        </div>
        <div class="col-md-8">
            <label class="form-label fw-semibold">Aperçu</label>
            <div id="test-font">
                <label>Exemple de texte</label>
                <p>
                    Le Lorem Ipsum est simplement du faux texte employé dans la composition et la
                    mise en page avant impression. Le Lorem Ipsum est le faux texte standard de
                    l'imprimerie depuis les années 1500, quand un imprimeur anonyme assembla
                    ensemble des morceaux de texte pour réaliser un livre spécimen de polices de
                    texte.
                </p>
                <p>
                    Il n'a pas fait que survivre cinq siècles, mais s'est aussi adapté à la
                    bureautique informatique, sans que son contenu n'en soit modifié. Il a été
                    popularisé dans les années 1960 grâce à la vente de feuilles Letraset contenant
                    des passages du Lorem Ipsum, et, plus récemment, par son inclusion dans des
                    applications de mise en page de texte, comme Aldus PageMaker.
                </p>
            </div>
        </div>
    </div>
</div>

<!-- Section Style des Titres -->
<div class="modern-card mb-4" data-aos="fade-up">
    <h5 class="fw-bold mb-4">
        <i class="fas fa-heading me-2" style="background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent;"></i>
        Style des titres
    </h5>
    <p class="text-muted mb-4">
        <i class="fas fa-info-circle text-primary me-1"></i>
        Choisissez un style par défaut pour tous les titres de votre site. Vous pourrez le personnaliser pour chaque widget si nécessaire.
    </p>

    <!-- Champ caché pour le formulaire -->
    <div style="display: none;">
        {{ form_widget(form.defaultHeadingStyle, {'attr':{'class':'heading-style-input'}, 'label': false}) }}
    </div>

    <!-- Grille de preview des styles -->
    <div class="heading-styles-grid row g-3">
        <div class="col-md-6 col-lg-3 heading-style-item" data-style="classic">
            <div class="style-preview-card">
                <div class="style-preview-content heading-style-classic">
                    <h3>Titre H3</h3>
                    <p class="mb-0 text-muted small">Style classique et professionnel</p>
                </div>
                <div class="style-overlay">
                    <i class="fas fa-check-circle"></i>
                </div>
            </div>
        </div>

        <div class="col-md-6 col-lg-3 heading-style-item" data-style="modern">
            <div class="style-preview-card">
                <div class="style-preview-content heading-style-modern">
                    <h3>Titre H3</h3>
                    <p class="mb-0 text-muted small">Moderne avec accent coloré</p>
                </div>
                <div class="style-overlay">
                    <i class="fas fa-check-circle"></i>
                </div>
            </div>
        </div>

        <div class="col-md-6 col-lg-3 heading-style-item" data-style="gradient">
            <div class="style-preview-card">
                <div class="style-preview-content heading-style-gradient">
                    <h3>Titre H3</h3>
                    <p class="mb-0 text-muted small">Effet dégradé dynamique</p>
                </div>
                <div class="style-overlay">
                    <i class="fas fa-check-circle"></i>
                </div>
            </div>
        </div>

        <div class="col-md-6 col-lg-3 heading-style-item" data-style="underlined">
            <div class="style-preview-card">
                <div class="style-preview-content heading-style-underlined">
                    <h3>Titre H3</h3>
                    <p class="mb-0 text-muted small">Souligné élégant</p>
                </div>
                <div class="style-overlay">
                    <i class="fas fa-check-circle"></i>
                </div>
            </div>
        </div>

        <div class="col-md-6 col-lg-3 heading-style-item" data-style="badge">
            <div class="style-preview-card">
                <div class="style-preview-content heading-style-badge">
                    <h3>Titre H3</h3>
                    <p class="mb-0 text-muted small">Badge avec fond coloré</p>
                </div>
                <div class="style-overlay">
                    <i class="fas fa-check-circle"></i>
                </div>
            </div>
        </div>

        <div class="col-md-6 col-lg-3 heading-style-item" data-style="outlined">
            <div class="style-preview-card">
                <div class="style-preview-content heading-style-outlined">
                    <h3>Titre H3</h3>
                    <p class="mb-0 text-muted small">Contour typographique</p>
                </div>
                <div class="style-overlay">
                    <i class="fas fa-check-circle"></i>
                </div>
            </div>
        </div>

        <div class="col-md-6 col-lg-3 heading-style-item" data-style="handwritten">
            <div class="style-preview-card">
                <div class="style-preview-content heading-style-handwritten">
                    <h3>Titre H3</h3>
                    <p class="mb-0 text-muted small">Style manuscrit</p>
                </div>
                <div class="style-overlay">
                    <i class="fas fa-check-circle"></i>
                </div>
            </div>
        </div>

        <div class="col-md-6 col-lg-3 heading-style-item" data-style="tech">
            <div class="style-preview-card">
                <div class="style-preview-content heading-style-tech">
                    <h3>Titre H3</h3>
                    <p class="mb-0 text-muted small">Tech/Code</p>
                </div>
                <div class="style-overlay">
                    <i class="fas fa-check-circle"></i>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Section Styles Header/Footer -->
<div class="modern-card mb-4" data-aos="fade-up">
    <h5 class="fw-bold mb-4">
        <i class="fas fa-layer-group me-2" style="background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent;"></i>
        Styles du header et footer
    </h5>

    {# Headers #}
    <div class="mb-5">
        <label class="form-label fw-semibold mb-3">
            <i class="fas fa-browser me-2 text-primary"></i>
            Menu du site (Header)
        </label>

        {# Champ caché pour le formulaire #}
        <div style="display: none;">
            {{ form_widget(form.headerPreset, {'attr':{'class':'header-preset-input'}, 'label': false}) }}
        </div>

        {# Grille de preview #}
        <div class="preset-grid row g-3">
            <div class="col-md-6 preset-item" data-preset-id="sport-header-1">
                <div class="preset-card">
                    <div class="preset-preview">
                        <img src="{{ asset('assets/img/presets/headers/sport-1.jpg') }}"
                             alt="Sport Moderne"
                             onerror="this.src='{{ asset('assets/img/presets/headers/placeholder.svg') }}'">
                        <div class="preset-overlay">
                            <i class="fas fa-check-circle"></i>
                        </div>
                    </div>
                    <div class="preset-info">
                        <h6 class="preset-name">Sport Moderne</h6>
                        <p class="preset-desc">Menu épuré avec icônes dynamiques</p>
                    </div>
                </div>
            </div>

            <div class="col-md-6 preset-item" data-preset-id="sport-header-2">
                <div class="preset-card">
                    <div class="preset-preview">
                        <img src="{{ asset('assets/img/presets/headers/sport-2.jpg') }}"
                             alt="Sport Compact"
                             onerror="this.src='{{ asset('assets/img/presets/headers/placeholder.svg') }}'">
                        <div class="preset-overlay">
                            <i class="fas fa-check-circle"></i>
                        </div>
                    </div>
                    <div class="preset-info">
                        <h6 class="preset-name">Sport Compact</h6>
                        <p class="preset-desc">Menu compact avec hamburger animé</p>
                    </div>
                </div>
            </div>

            <div class="col-md-6 preset-item" data-preset-id="business-header-1">
                <div class="preset-card">
                    <div class="preset-preview">
                        <img src="{{ asset('assets/img/presets/headers/business-1.jpg') }}"
                             alt="Business Professionnel"
                             onerror="this.src='{{ asset('assets/img/presets/headers/placeholder.svg') }}'">
                        <div class="preset-overlay">
                            <i class="fas fa-check-circle"></i>
                        </div>
                    </div>
                    <div class="preset-info">
                        <h6 class="preset-name">Business Professionnel</h6>
                        <p class="preset-desc">Menu corporate avec dropdown élégant</p>
                    </div>
                </div>
            </div>

            <div class="col-md-6 preset-item" data-preset-id="business-header-2">
                <div class="preset-card">
                    <div class="preset-preview">
                        <img src="{{ asset('assets/img/presets/headers/business-2.jpg') }}"
                             alt="Business Minimal"
                             onerror="this.src='{{ asset('assets/img/presets/headers/placeholder.svg') }}'">
                        <div class="preset-overlay">
                            <i class="fas fa-check-circle"></i>
                        </div>
                    </div>
                    <div class="preset-info">
                        <h6 class="preset-name">Business Minimal</h6>
                        <p class="preset-desc">Menu minimaliste et élégant</p>
                    </div>
                </div>
            </div>

            <div class="col-md-6 preset-item" data-preset-id="creative-header-1">
                <div class="preset-card">
                    <div class="preset-preview">
                        <img src="{{ asset('assets/img/presets/headers/creative-1.jpg') }}"
                             alt="Creative Artistique"
                             onerror="this.src='{{ asset('assets/img/presets/headers/placeholder.svg') }}'">
                        <div class="preset-overlay">
                            <i class="fas fa-check-circle"></i>
                        </div>
                    </div>
                    <div class="preset-info">
                        <h6 class="preset-name">Creative Artistique</h6>
                        <p class="preset-desc">Menu avec animations micro-interactions</p>
                    </div>
                </div>
            </div>

            <div class="col-md-6 preset-item" data-preset-id="minimal-header-1">
                <div class="preset-card">
                    <div class="preset-preview">
                        <img src="{{ asset('assets/img/presets/headers/minimal-1.jpg') }}"
                             alt="Minimal Pur"
                             onerror="this.src='{{ asset('assets/img/presets/headers/placeholder.svg') }}'">
                        <div class="preset-overlay">
                            <i class="fas fa-check-circle"></i>
                        </div>
                    </div>
                    <div class="preset-info">
                        <h6 class="preset-name">Minimal Pur</h6>
                        <p class="preset-desc">Menu ultra-épuré, noir et blanc</p>
                    </div>
                </div>
            </div>

            <div class="col-md-6 preset-item" data-preset-id="elegant-header-1">
                <div class="preset-card">
                    <div class="preset-preview">
                        <img src="{{ asset('assets/img/presets/headers/elegant-1.jpg') }}"
                             alt="Élégant Raffiné"
                             onerror="this.src='{{ asset('assets/img/presets/headers/placeholder.svg') }}'">
                        <div class="preset-overlay">
                            <i class="fas fa-check-circle"></i>
                        </div>
                    </div>
                    <div class="preset-info">
                        <h6 class="preset-name">Élégant Raffiné</h6>
                        <p class="preset-desc">Menu sophistiqué avec transitions douces</p>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <hr class="my-5">

    {# Footers #}
    <div>
        <label class="form-label fw-semibold mb-3">
            <i class="fas fa-grip-lines-vertical me-2 text-success"></i>
            Pied de page (Footer)
        </label>

        {# Champ caché pour le formulaire #}
        <div style="display: none;">
            {{ form_widget(form.footerPreset, {'attr':{'class':'footer-preset-input'}, 'label': false}) }}
        </div>

        {# Grille de preview #}
        <div class="preset-grid row g-3">
            <div class="col-md-4 preset-item" data-preset-id="sport-footer-1">
                <div class="preset-card">
                    <div class="preset-preview">
                        <img src="{{ asset('assets/img/presets/footers/sport-1.jpg') }}"
                             alt="Sport Stats"
                             onerror="this.src='{{ asset('assets/img/presets/headers/placeholder.svg') }}'">
                        <div class="preset-overlay">
                            <i class="fas fa-check-circle"></i>
                        </div>
                    </div>
                    <div class="preset-info">
                        <h6 class="preset-name">Sport Stats</h6>
                        <p class="preset-desc">Footer avec stats et réseaux sociaux</p>
                    </div>
                </div>
            </div>

            <div class="col-md-4 preset-item" data-preset-id="sport-footer-2">
                <div class="preset-card">
                    <div class="preset-preview">
                        <img src="{{ asset('assets/img/presets/footers/sport-2.jpg') }}"
                             alt="Sport Compact"
                             onerror="this.src='{{ asset('assets/img/presets/headers/placeholder.svg') }}'">
                        <div class="preset-overlay">
                            <i class="fas fa-check-circle"></i>
                        </div>
                    </div>
                    <div class="preset-info">
                        <h6 class="preset-name">Sport Compact</h6>
                        <p class="preset-desc">Footer compact une ligne</p>
                    </div>
                </div>
            </div>

            <div class="col-md-4 preset-item" data-preset-id="business-footer-1">
                <div class="preset-card">
                    <div class="preset-preview">
                        <img src="{{ asset('assets/img/presets/footers/business-1.jpg') }}"
                             alt="Business Newsletter"
                             onerror="this.src='{{ asset('assets/img/presets/headers/placeholder.svg') }}'">
                        <div class="preset-overlay">
                            <i class="fas fa-check-circle"></i>
                        </div>
                    </div>
                    <div class="preset-info">
                        <h6 class="preset-name">Business Newsletter</h6>
                        <p class="preset-desc">4 colonnes avec newsletter</p>
                    </div>
                </div>
            </div>

            <div class="col-md-4 preset-item" data-preset-id="business-footer-2">
                <div class="preset-card">
                    <div class="preset-preview">
                        <img src="{{ asset('assets/img/presets/footers/business-2.jpg') }}"
                             alt="Business Structuré"
                             onerror="this.src='{{ asset('assets/img/presets/headers/placeholder.svg') }}'">
                        <div class="preset-overlay">
                            <i class="fas fa-check-circle"></i>
                        </div>
                    </div>
                    <div class="preset-info">
                        <h6 class="preset-name">Business Structuré</h6>
                        <p class="preset-desc">3 colonnes structurées</p>
                    </div>
                </div>
            </div>

            <div class="col-md-4 preset-item" data-preset-id="creative-footer-1">
                <div class="preset-card">
                    <div class="preset-preview">
                        <img src="{{ asset('assets/img/presets/footers/creative-1.jpg') }}"
                             alt="Creative Social"
                             onerror="this.src='{{ asset('assets/img/presets/headers/placeholder.svg') }}'">
                        <div class="preset-overlay">
                            <i class="fas fa-check-circle"></i>
                        </div>
                    </div>
                    <div class="preset-info">
                        <h6 class="preset-name">Creative Social</h6>
                        <p class="preset-desc">Footer artistique centré sur réseaux</p>
                    </div>
                </div>
            </div>

            <div class="col-md-4 preset-item" data-preset-id="minimal-footer-1">
                <div class="preset-card">
                    <div class="preset-preview">
                        <img src="{{ asset('assets/img/presets/footers/minimal-1.jpg') }}"
                             alt="Minimal Simple"
                             onerror="this.src='{{ asset('assets/img/presets/headers/placeholder.svg') }}'">
                        <div class="preset-overlay">
                            <i class="fas fa-check-circle"></i>
                        </div>
                    </div>
                    <div class="preset-info">
                        <h6 class="preset-name">Minimal Simple</h6>
                        <p class="preset-desc">Footer minimaliste une ligne</p>
                    </div>
                </div>
            </div>

            <div class="col-md-4 preset-item" data-preset-id="elegant-footer-1">
                <div class="preset-card">
                    <div class="preset-preview">
                        <img src="{{ asset('assets/img/presets/footers/elegant-1.jpg') }}"
                             alt="Élégant Raffiné"
                             onerror="this.src='{{ asset('assets/img/presets/headers/placeholder.svg') }}'">
                        <div class="preset-overlay">
                            <i class="fas fa-check-circle"></i>
                        </div>
                    </div>
                    <div class="preset-info">
                        <h6 class="preset-name">Élégant Raffiné</h6>
                        <p class="preset-desc">Footer sophistiqué 3 colonnes</p>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<style>
.preset-grid {
    margin-top: 1rem;
}

.preset-card {
    border: 2px solid #e0e0e0;
    border-radius: 12px;
    overflow: hidden;
    cursor: pointer;
    transition: all 0.3s ease;
    background: white;
}

.preset-card:hover {
    border-color: #667eea;
    box-shadow: 0 4px 12px rgba(102, 126, 234, 0.15);
    transform: translateY(-2px);
}

.preset-item.selected .preset-card {
    border-color: #667eea;
    box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.2);
}

.preset-preview {
    position: relative;
    background: #f8f9fa;
    overflow: hidden;
}

/* Styles pour les cards de styles de titres */
.heading-style-item {
    cursor: pointer;
}

.style-preview-card {
    border: 2px solid #e0e0e0;
    border-radius: 12px;
    overflow: hidden;
    cursor: pointer;
    transition: all 0.3s ease;
    background: white;
    min-height: 140px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    padding: 20px;
}

.style-preview-card:hover {
    border-color: #667eea;
    box-shadow: 0 4px 12px rgba(102, 126, 234, 0.15);
    transform: translateY(-2px);
}

.heading-style-item.selected .style-preview-card {
    border-color: #667eea;
    box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.2);
}

.style-preview-content {
    text-align: center;
    width: 100%;
}

.style-preview-content h3 {
    margin: 0 0 8px 0;
}

.style-overlay {
    position: absolute;
    top: 10px;
    right: 10px;
    width: 28px;
    height: 28px;
    background: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.3s ease;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

.heading-style-item.selected .style-overlay {
    opacity: 1;
}

.style-overlay i {
    color: #10b981;
    font-size: 16px;
}

/* Format par défaut */
.preset-preview {
    aspect-ratio: 16/9;
}

/* Headers : format très large et peu haut (aspect naturel d'un header) */
.preset-item[data-preset-id*="header"] .preset-preview {
    aspect-ratio: 5/1;
}

/* Footers : format large mais un peu plus haut */
.preset-item[data-preset-id*="footer"] .preset-preview {
    aspect-ratio: 4/1;
}

.preset-preview img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center;
    background: #f8f9fa;
}

.preset-overlay {
    position: absolute;
    top: 10px;
    right: 10px;
    width: 32px;
    height: 32px;
    background: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.preset-item.selected .preset-overlay {
    opacity: 1;
}

.preset-overlay i {
    color: #10b981;
    font-size: 20px;
}

.preset-info {
    padding: 16px;
}

.preset-name {
    font-size: 1rem;
    font-weight: 600;
    margin-bottom: 4px;
    color: #1e293b;
}

.preset-desc {
    font-size: 0.875rem;
    color: #64748b;
    margin: 0;
}
</style>

<!-- Section Menu -->
<div class="modern-card mb-4" data-aos="fade-up">
    <h5 class="fw-bold mb-4">
        <i class="fas fa-bars me-2" style="background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent;"></i>
        Organisation des menus
    </h5>
    <div class="row g-4">
        <div class="col-md-6">
            <label class="form-label fw-semibold">{{ form_label(form.orderMenu, 'Ordre du menu principal (header)') }}</label>
            <p class="text-muted small mb-2">Glissez-déposez pour réorganiser</p>
            <div class="dd" id="nestable">
                <ol class="dd-list">
                    {% for page in site.pages|filter(v => v.displayMenuHeader == true)|sort((a, b) => a.menuHeaderOrder <=> b.menuHeaderOrder) %}
                        <li class="dd-item" data-id="{{ page.id }}">
                            <div class="dd-handle">
                                <i class="fas fa-grip-vertical me-2"></i>
                                {{ page.nameMenu }}
                            </div>
                        </li>
                    {% endfor %}
                </ol>
            </div>
        </div>
        <div class="col-md-6">
            <label class="form-label fw-semibold">{{ form_label(form.orderMenuFooter, 'Ordre du menu du pied de page (footer)') }}</label>
            <p class="text-muted small mb-2">Glissez-déposez pour réorganiser</p>
            <div class="dd" id="nestable2">
                <ol class="dd-list">
                    {% for page in site.pages|filter(v => v.displayMenuFooter == true)|sort((a, b) => a.menuFooterOrder <=> b.menuFooterOrder) %}
                        <li class="dd-item" data-id="{{ page.id }}">
                            <div class="dd-handle">
                                <i class="fas fa-grip-vertical me-2"></i>
                                {{ page.nameMenu }}
                            </div>
                        </li>
                    {% endfor %}
                </ol>
            </div>
        </div>
    </div>
</div>

<!-- Section E-commerce -->
<div class="modern-card mb-4" data-aos="fade-up">
    <h5 class="fw-bold mb-4">
        <i class="fas fa-shopping-cart me-2" style="background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent;"></i>
        E-commerce
    </h5>
    <div class="row g-3">
        <div class="col-12">
            <div class="d-flex align-items-center justify-content-between p-3 rounded" style="background: #f8f9fa; border: 1px solid #e9ecef;">
                <div>
                    <label class="form-label fw-semibold mb-1" for="{{ form.shopEnabled.vars.id }}">
                        <i class="fas fa-store me-2 text-primary"></i>
                        Activer la boutique en ligne
                    </label>
                    <p class="text-muted small mb-0">Activez cette option pour afficher le menu E-commerce dans la sidebar et gérer vos produits</p>
                </div>
                <div class="form-check form-switch" style="font-size: 1.5rem;">
                    {{ form_widget(form.shopEnabled, {'attr': {'class': 'form-check-input', 'role': 'switch'}}) }}
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Section Chatbot IA -->
<div class="modern-card mb-4" data-aos="fade-up">
    <h5 class="fw-bold mb-4">
        <i class="fas fa-robot me-2" style="background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent;"></i>
        Chatbot IA (Intelligence Artificielle)
    </h5>
    <div class="row g-3">
        <div class="col-12">
            <div class="p-3 rounded" style="background: linear-gradient(135deg, #667eea15 0%, #764ba215 100%); border: 2px solid #667eea;">
                <div class="d-flex align-items-start mb-3">
                    <div class="me-3" style="font-size: 2.5rem;">
                        🤖
                    </div>
                    <div class="flex-grow-1">
                        <h6 class="fw-bold mb-2">Assistant virtuel intelligent avec RAG</h6>
                        <p class="text-muted small mb-2">
                            Ajoutez un chatbot IA ultra-rapide à votre site qui répond automatiquement aux questions de vos visiteurs
                            en s'appuyant sur le contenu de vos pages, articles, produits et services.
                        </p>
                        <div class="d-flex flex-wrap gap-2 mb-3">
                            <span class="badge bg-primary"><i class="fas fa-bolt me-1"></i> Réponses < 1 seconde</span>
                            <span class="badge bg-success"><i class="fas fa-database me-1"></i> Base de connaissances automatique</span>
                            <span class="badge bg-info text-dark"><i class="fas fa-dollar-sign me-1"></i> API Groq gratuite</span>
                            <span class="badge bg-warning text-dark"><i class="fas fa-shield-alt me-1"></i> Anti-spam intégré</span>
                        </div>
                    </div>
                </div>

                <div class="d-flex align-items-center justify-content-between">
                    <div>
                        <p class="mb-0 small text-muted">
                            <i class="fas fa-info-circle me-1"></i>
                            <strong>Nouveau !</strong> Technologie RAG (Retrieval-Augmented Generation) - L'IA utilise VOS données pour répondre
                        </p>
                    </div>
                    <a href="{{ path('admin_chatbot_settings', {'siteId': site.id}) }}" class="btn btn-primary">
                        <i class="fas fa-cog me-2"></i>
                        Configurer le chatbot
                    </a>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Bouton de sauvegarde -->
<div class="d-flex justify-content-end gap-3" data-aos="fade-up">
    <button class="btn-gradient" type="submit">
        <i class="fas fa-save me-2"></i>
        Enregistrer les modifications
    </button>
</div>

{{ form_end(form) }}

{% endblock %}

{% block javascripts %}
    <script src="{{ asset('assets/plugins/noUiSlider/nouislider.min.js') }}"></script>
    <script src="{{ asset('assets/plugins/wnumb/wNumb.js') }}"></script>
    <script src="{{ asset('assets/bo/js/components/nestable/jquery.nestable.js') }}"></script>
    <script src="{{ asset('assets/js/imageTool.js') }}"></script>

    <script type="text/javascript">
        $(document).ready(function () {
            // Gestion du color picker
            const colorFormInput = $('#edit_global_parameters_colorTheme'); // Champ de formulaire Symfony
            const colorPickerNative = $('#color-picker-native'); // Color picker natif transparent
            const colorPreview = $('#color-preview');
            const colorValueDisplay = $('#color-value-display');

            // Initialiser le color picker natif avec la valeur du formulaire
            const initialColor = colorFormInput.val() || '#667eea';
            colorPickerNative.val(initialColor);

            function updateColorDisplay(color) {
                const colorUpper = color.toUpperCase();
                colorValueDisplay.val(colorUpper);
                colorPreview.css('background-color', color);
            }

            // Quand la couleur change dans le picker natif, synchroniser avec le formulaire
            colorPickerNative.on('input change', function() {
                const newColor = colorPickerNative.val();
                colorFormInput.val(newColor);
                updateColorDisplay(newColor);
            });

            // Initialiser l'affichage
            updateColorDisplay(initialColor);

            // Aperçu de la police
            $('#edit_global_parameters_font').on('change', function () {
                changeTestFont();
            });

            function changeTestFont() {
                const fontName = $('#edit_global_parameters_font :selected').text();
                $('#test-font p').css({
                    'font-family': fontName
                });
            }

            changeTestFont();

            // Nestable pour les menus
            var updateOutput = function(e) {
                var list = e.length ? e : $(e.target);
                $('input[id=edit_global_parameters_orderMenu]').val(window.JSON.stringify(list.nestable('serialize')));
            };

            $('#nestable').nestable({ group: 1 }).on('change', updateOutput);

            var updateOutput2 = function(e) {
                var list = e.length ? e : $(e.target);
                $('input[id=edit_global_parameters_orderMenuFooter]').val(window.JSON.stringify(list.nestable('serialize')));
            };

            $('#nestable2').nestable({ group: 1 }).on('change', updateOutput2);

            // Gestion de la sélection des presets header/footer via preview
            $('.preset-item[data-preset-id]').on('click', function() {
                const presetId = $(this).data('preset-id');
                const isHeader = presetId.includes('header');

                // Update selected state
                $(this).closest('.preset-grid').find('.preset-item').removeClass('selected');
                $(this).addClass('selected');

                // Update hidden select
                if (isHeader) {
                    $('.header-preset-input').val(presetId).trigger('change');
                } else {
                    $('.footer-preset-input').val(presetId).trigger('change');
                }
            });

            // Initialize selected state on page load
            const currentHeaderPreset = $('.header-preset-input').val();
            const currentFooterPreset = $('.footer-preset-input').val();

            if (currentHeaderPreset) {
                $('.preset-item[data-preset-id="' + currentHeaderPreset + '"]').addClass('selected');
            }
            if (currentFooterPreset) {
                $('.preset-item[data-preset-id="' + currentFooterPreset + '"]').addClass('selected');
            }

            // Gestion de la sélection des styles de titres
            $('.heading-style-item[data-style]').on('click', function() {
                const styleValue = $(this).data('style');

                // Update selected state
                $('.heading-style-item').removeClass('selected');
                $(this).addClass('selected');

                // Update hidden select
                $('#edit_global_parameters_defaultHeadingStyle').val(styleValue).trigger('change');
            });

            // Initialize selected heading style on page load
            const currentHeadingStyle = $('#edit_global_parameters_defaultHeadingStyle').val();
            if (currentHeadingStyle) {
                $('.heading-style-item[data-style="' + currentHeadingStyle + '"]').addClass('selected');
            } else {
                // Par défaut, sélectionner 'classic'
                $('.heading-style-item[data-style="classic"]').addClass('selected');
            }

            // Gestion des uploads d'images
            $("#edit_global_parameters_favicon, #edit_global_parameters_logo").change(function () {
                readURL(this, true);
            });
        });
    </script>
{% endblock %}