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

{% block title %}Éditeur moderne{% endblock %}

{% block breadcrumb %}Pages <i class="fas fa-chevron-right"></i> Modifier : {{ page.nameMenu }}{% endblock %}

{% block stylesheets %}
    <link href="{{ asset('assets/css/page-builder.css') }}" rel="stylesheet">
    <link href="{{ asset('assets/css/containers.css') }}" rel="stylesheet">
    <link href="{{ asset('assets/css/media-picker.css') }}?v={{ 'now'|date('U') }}" rel="stylesheet">
    <link href="{{ asset('assets/css/page-editor-tabs.css') }}" rel="stylesheet">
    <!-- FontAwesome pour les icônes -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <!-- Quill.js CSS -->
    <link href="https://cdn.quilljs.com/1.3.7/quill.snow.css" rel="stylesheet">
{% endblock %}

{% block body %}
    {% if success %}
        <div class="alert alert-success alert-success-modern d-flex align-items-center mb-2" role="alert" data-aos="fade-down">
            <i class="fas fa-check-circle me-3 fs-4"></i>
            <div>
                <strong>Parfait !</strong> Votre page a bien été mise à jour.
            </div>
        </div>
    {% endif %}

    {# Formulaire Symfony #}
    {{ form_start(form, {'attr': {'id': 'page-form'}}) }}

    {# Système d'onglets #}
    <div class="modern-card mb-2">
        <ul class="nav nav-tabs page-editor-tabs" id="pageEditorTabs" role="tablist">
            <li class="nav-item" role="presentation">
                <button class="nav-link active" id="edition-tab" data-bs-toggle="tab" data-bs-target="#edition-panel" type="button" role="tab">
                    <i class="fas fa-paint-brush me-2"></i>
                    Édition
                </button>
            </li>
            <li class="nav-item" role="presentation">
                <button class="nav-link" id="settings-tab" data-bs-toggle="tab" data-bs-target="#settings-panel" type="button" role="tab">
                    <i class="fas fa-cog me-2"></i>
                    Paramètres
                </button>
            </li>
            <li class="nav-item" role="presentation">
                <button class="nav-link" id="seo-tab" data-bs-toggle="tab" data-bs-target="#seo-panel" type="button" role="tab">
                    <i class="fas fa-search me-2"></i>
                    Référencement
                </button>
            </li>
        </ul>

        <div class="tab-content" id="pageEditorTabsContent">
            {# ONGLET 1 : ÉDITION #}
            <div class="tab-pane fade show active" id="edition-panel" role="tabpanel">
                <div class="page-builder">
                    {# Toolbar sur 2 lignes #}
                    <div class="page-builder-toolbar-wrapper">
                        {# LIGNE 1 : Templates et Structure #}
                        <div class="page-builder-toolbar toolbar-row-1">
                            <div class="toolbar-section">
                                <h4 class="toolbar-section-title">
                                    <i class="fas fa-file-alt"></i>
                                    <span>Templates</span>
                                </h4>
                                <div class="toolbar-items-list">
                                    <button type="button" class="btn btn-sm btn-outline-primary" id="load-template-btn">
                                        <i class="fas fa-download me-1"></i>
                                        Charger un template
                                    </button>
                                </div>
                            </div>

                            <div class="toolbar-divider"></div>

                            <div class="toolbar-section">
                                <h4 class="toolbar-section-title">
                                    <i class="fas fa-th-large"></i>
                                    <span>Structure</span>
                                </h4>
                                <div id="containers-toolbar" class="toolbar-items-list">
                                    <!-- Sera rempli par JavaScript -->
                                </div>
                            </div>
                        </div>

                        {# LIGNE 2 : Widgets par catégories #}
                        <div class="page-builder-toolbar toolbar-row-2">
                            <div class="toolbar-section toolbar-section-full">
                                <h4 class="toolbar-section-title">
                                    <i class="fas fa-puzzle-piece"></i>
                                    <span>Widgets</span>
                                </h4>
                                <div id="widgets-toolbar" class="toolbar-items-list">
                                    <!-- Sera rempli par JavaScript avec les catégories -->
                                </div>
                            </div>
                        </div>
                    </div>

                    {# Zone d'édition principale - pleine largeur #}
                    <main class="editor-canvas">
                        <div id="sections-container" class="sections-container">
                            <!-- Sera rempli par JavaScript -->
                        </div>
                    </main>

                    {# Champ caché pour les sections #}
                    {{ form_widget(form.sectionsData, {
                        'attr': {
                            'id': 'sections-data-field'
                        }
                    }) }}
                </div>
            </div>

            {# ONGLET 2 : PARAMÈTRES #}
            <div class="tab-pane fade" id="settings-panel" role="tabpanel">
                <div class="p-4">
                    <h5 class="fw-bold mb-4">
                        <i class="fas fa-cog me-2 text-primary"></i>
                        Paramètres de la page
                    </h5>

                    <div class="row g-4">
                        <div class="col-md-12">
                            <label class="form-label fw-semibold">
                                <i class="fas fa-tag me-2 text-muted"></i>
                                Nom de la page
                            </label>
                            <small class="d-block text-muted mb-2">
                                Ce nom apparaîtra dans les menus de navigation de votre site.
                            </small>
                            {{ form_widget(form.name, {'attr': {'class': 'form-control'}, 'label': false}) }}
                            {{ form_errors(form.name) }}
                        </div>

                        <div class="col-md-12">
                            <h6 class="fw-semibold mb-3">
                                <i class="fas fa-bars me-2 text-muted"></i>
                                Affichage dans les menus
                            </h6>
                        </div>

                        <div class="col-md-6">
                            <div class="form-check form-switch">
                                {{ form_widget(form.displayMenuHeader, {'attr': {'class': 'form-check-input', 'role': 'switch', 'id': 'displayMenuHeader'}, 'label': false}) }}
                                <label class="form-check-label fw-semibold" for="displayMenuHeader">
                                    Afficher dans le menu du haut (header)
                                </label>
                            </div>
                            <small class="text-muted">
                                La page sera visible dans le menu de navigation principal de votre site.
                            </small>
                            {{ form_errors(form.displayMenuHeader) }}
                        </div>

                        <div class="col-md-6">
                            <div class="form-check form-switch">
                                {{ form_widget(form.displayMenuFooter, {'attr': {'class': 'form-check-input', 'role': 'switch', 'id': 'displayMenuFooter'}, 'label': false}) }}
                                <label class="form-check-label fw-semibold" for="displayMenuFooter">
                                    Afficher dans le menu du bas (footer)
                                </label>
                            </div>
                            <small class="text-muted">
                                La page sera visible dans le menu du pied de page de votre site.
                            </small>
                            {{ form_errors(form.displayMenuFooter) }}
                        </div>
                    </div>
                </div>
            </div>

            {# ONGLET 3 : RÉFÉRENCEMENT #}
            <div class="tab-pane fade" id="seo-panel" role="tabpanel">
                <div class="p-4">
                    <h5 class="fw-bold mb-2">
                        <i class="fas fa-search me-2 text-success"></i>
                        Référencement naturel (SEO)
                    </h5>
                    <p class="text-muted mb-4">
                        Optimisez votre page pour les moteurs de recherche comme Google. Un bon référencement augmente votre visibilité.
                    </p>

                    <div class="row g-4">
                        <div class="col-md-12">
                            <label class="form-label fw-semibold">
                                <i class="fas fa-heading me-2 text-muted"></i>
                                Titre SEO
                                <span class="badge bg-info ms-2" id="seo-title-count">0/70</span>
                            </label>
                            <div class="alert alert-info alert-sm mb-2">
                                <i class="fas fa-info-circle me-2"></i>
                                <strong>Pourquoi c'est important ?</strong> Ce titre apparaît en bleu dans les résultats de recherche Google.
                                Il doit être <strong>accrocheur</strong> et contenir vos <strong>mots-clés principaux</strong>.
                                Idéal : entre 50 et 60 caractères.
                            </div>
                            {{ form_widget(form.seoTitle, {'attr': {'class': 'form-control', 'placeholder': 'Ex: Meilleur restaurant italien à Paris | Nom de votre restaurant', 'id': 'seo-title-input'}, 'label': false}) }}
                            {{ form_errors(form.seoTitle) }}
                        </div>

                        <div class="col-md-12">
                            <label class="form-label fw-semibold">
                                <i class="fas fa-align-left me-2 text-muted"></i>
                                Description SEO
                                <span class="badge bg-info ms-2" id="seo-desc-count">0/155</span>
                            </label>
                            <div class="alert alert-info alert-sm mb-2">
                                <i class="fas fa-info-circle me-2"></i>
                                <strong>Pourquoi c'est important ?</strong> Cette description s'affiche sous le titre dans Google.
                                Elle doit <strong>inciter au clic</strong> en décrivant clairement ce que l'internaute trouvera sur votre page.
                                Idéal : entre 120 et 155 caractères.
                            </div>
                            {{ form_widget(form.seoDescription, {'attr': {'class': 'form-control', 'placeholder': 'Ex: Découvrez notre cuisine italienne authentique avec des produits frais. Réservez votre table dès maintenant et profitez d\'une expérience gastronomique unique.', 'rows': 3, 'id': 'seo-desc-input'}, 'label': false}) }}
                            {{ form_errors(form.seoDescription) }}
                        </div>

                        <div class="col-md-12">
                            <h6 class="fw-semibold mb-3">
                                <i class="fas fa-eye me-2 text-muted"></i>
                                Aperçu dans Google
                            </h6>
                            <div class="google-preview">
                                <div class="google-preview-url">
                                    <i class="fas fa-globe me-2"></i>
                                    <span id="google-preview-domain">{{ page.site.domain|default('votre-site.fr') }}</span>
                                </div>
                                <div class="google-preview-title" id="google-preview-title">
                                    Votre titre SEO apparaîtra ici
                                </div>
                                <div class="google-preview-description" id="google-preview-description">
                                    Votre description SEO apparaîtra ici. Elle donne un aperçu du contenu de votre page aux internautes.
                                </div>
                            </div>
                        </div>

                        <div class="col-md-12">
                            <div class="alert alert-light border">
                                <h6 class="fw-semibold mb-2">
                                    <i class="fas fa-lightbulb me-2 text-warning"></i>
                                    Conseils pour un bon référencement
                                </h6>
                                <ul class="mb-0 small">
                                    <li>Utilisez des <strong>mots-clés pertinents</strong> que vos visiteurs pourraient rechercher</li>
                                    <li>Rendez votre titre <strong>unique</strong> pour chaque page</li>
                                    <li>Évitez le bourrage de mots-clés, restez <strong>naturel</strong></li>
                                    <li>Incitez à l'action dans votre description (Ex: "Découvrez", "Réservez", "Contactez-nous")</li>
                                </ul>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    {# Champs cachés restants #}
    <div style="display:none;">
        {{ form_rest(form) }}
    </div>

    {# Barre d'actions en bas de page #}
    <div style="background: white; border-top: 2px solid #e2e8f0; padding: 1.5rem; margin-top: 2rem; display: flex; justify-content: space-between; align-items: center; border-radius: 0 0 12px 12px;">
        <button type="button" id="delete-page-button" data-page-id="{{ app.request.attributes.get('id') }}" class="btn btn-outline-danger" style="padding: 0.75rem 1.5rem; border-radius: 8px; font-weight: 600;">
            <i class="fa-solid fa-trash me-2"></i>
            Supprimer la page
        </button>
        <button type="button" id="save-button" class="btn-gradient" style="padding: 0.75rem 2rem;">
            <i class="fa-solid fa-save me-2"></i>
            Enregistrer les modifications
        </button>
    </div>

    {{ form_end(form, {'render_rest': false}) }}

    {# Sidebar d'édition à droite - au même niveau que la sidebar de gauche #}
    <aside id="section-editor-panel" class="section-editor-sidebar" style="display:none;">
        <!-- Sera rempli par JavaScript -->
    </aside>

    <!-- Modal de confirmation de suppression de container -->
    <div class="modal fade" id="deleteContainerModal" tabindex="-1" aria-labelledby="deleteContainerModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered">
            <div class="modal-content">
                <div class="modal-header bg-danger text-white">
                    <h5 class="modal-title" id="deleteContainerModalLabel">
                        <i class="fas fa-exclamation-triangle me-2"></i>
                        Confirmer la suppression
                    </h5>
                    <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <p class="mb-0">Êtes-vous sûr de vouloir supprimer ce container et tout son contenu ?</p>
                    <p class="text-muted small mt-2 mb-0">Cette action est irréversible.</p>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">
                        <i class="fas fa-times me-1"></i> Annuler
                    </button>
                    <button type="button" class="btn btn-danger" id="confirmDeleteContainer">
                        <i class="fas fa-trash me-1"></i> Supprimer
                    </button>
                </div>
            </div>
        </div>
    </div>

    <!-- Modal de clonage de container vers une autre page -->
    <div class="modal fade" id="cloneContainerModal" tabindex="-1" aria-labelledby="cloneContainerModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered">
            <div class="modal-content">
                <div class="modal-header bg-primary text-white">
                    <h5 class="modal-title" id="cloneContainerModalLabel">
                        <i class="fas fa-clone me-2"></i>
                        Cloner le container vers une autre page
                    </h5>
                    <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <p class="mb-3">Sélectionnez la page de destination pour cloner ce container :</p>
                    <div class="form-group">
                        <label for="targetPageSelect" class="form-label">Page de destination</label>
                        <select class="form-select" id="targetPageSelect">
                            <option value="">Chargement des pages...</option>
                        </select>
                    </div>
                    <p class="text-muted small mt-3 mb-0">
                        <i class="fas fa-info-circle me-1"></i>
                        Le container sera ajouté à la fin de la page sélectionnée avec tous ses widgets.
                    </p>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">
                        <i class="fas fa-times me-1"></i> Annuler
                    </button>
                    <button type="button" class="btn btn-primary" id="confirmCloneContainer">
                        <i class="fas fa-clone me-1"></i> Cloner
                    </button>
                </div>
            </div>
        </div>
    </div>

    <!-- Modal de confirmation de suppression de widget -->
    <div class="modal fade" id="deleteWidgetModal" tabindex="-1" aria-labelledby="deleteWidgetModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered">
            <div class="modal-content">
                <div class="modal-header bg-danger text-white">
                    <h5 class="modal-title" id="deleteWidgetModalLabel">
                        <i class="fas fa-exclamation-triangle me-2"></i>
                        Confirmer la suppression
                    </h5>
                    <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <p class="mb-0">Êtes-vous sûr de vouloir supprimer ce widget ?</p>
                    <p class="text-muted small mt-2 mb-0">Cette action est irréversible.</p>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">
                        <i class="fas fa-times me-1"></i> Annuler
                    </button>
                    <button type="button" class="btn btn-danger" id="confirmDeleteWidget">
                        <i class="fas fa-trash me-1"></i> Supprimer
                    </button>
                </div>
            </div>
        </div>
    </div>

    <!-- Modal de chargement de template -->
    <div class="modal fade" id="templateModal" tabindex="-1" aria-labelledby="templateModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-xl modal-dialog-centered modal-dialog-scrollable">
            <div class="modal-content">
                <div class="modal-header bg-primary text-white">
                    <h5 class="modal-title" id="templateModalLabel">
                        <i class="fas fa-file-alt me-2"></i>
                        Charger un template de page
                    </h5>
                    <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <p class="text-muted mb-4">
                        <i class="fas fa-info-circle me-1"></i>
                        Sélectionnez un template pour démarrer rapidement. Vous pourrez le personnaliser après.
                    </p>
                    <div id="templates-grid" class="row g-4">
                        <!-- Sera rempli par JavaScript -->
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">
                        <i class="fas fa-times me-1"></i> Fermer
                    </button>
                </div>
            </div>
        </div>
    </div>

    <!-- Modal pour insérer du code HTML -->
    <div class="modal fade" id="htmlInsertModal" tabindex="-1" aria-labelledby="htmlInsertModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-lg modal-dialog-centered">
            <div class="modal-content">
                <div class="modal-header bg-dark text-white">
                    <h5 class="modal-title" id="htmlInsertModalLabel">
                        <i class="fas fa-code me-2"></i>
                        Insérer du code HTML
                    </h5>
                    <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <div class="alert alert-info mb-3">
                        <i class="fas fa-info-circle me-2"></i>
                        <strong>Astuce :</strong> Collez votre code HTML brut (iframe, video, script, etc.). Le code sera inséré directement dans votre contenu.
                    </div>

                    <div class="mb-3">
                        <label for="htmlCodeInput" class="form-label fw-semibold">Code HTML</label>
                        <textarea class="form-control font-monospace" id="htmlCodeInput" rows="10"
                                  placeholder='Exemple : <iframe src="..." width="100%" height="166"></iframe>'
                                  style="font-size: 13px; background: #f8f9fa;"></textarea>
                        <small class="text-muted">
                            <i class="fas fa-lightbulb me-1"></i>
                            Exemples : iframe Soundcloud, YouTube, Google Maps, etc.
                        </small>
                    </div>

                    <div class="accordion" id="htmlExamples">
                        <div class="accordion-item">
                            <h2 class="accordion-header">
                                <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#exampleSoundcloud">
                                    <i class="fab fa-soundcloud me-2"></i> Exemple SoundCloud
                                </button>
                            </h2>
                            <div id="exampleSoundcloud" class="accordion-collapse collapse" data-bs-parent="#htmlExamples">
                                <div class="accordion-body">
                                    <pre class="bg-light p-2 rounded" style="font-size: 12px; overflow-x: auto;"><code>&lt;iframe width="100%" height="166" scrolling="no" frameborder="no"
  src="https://w.soundcloud.com/player/?url=https://soundcloud.com/..."&gt;&lt;/iframe&gt;</code></pre>
                                </div>
                            </div>
                        </div>
                        <div class="accordion-item">
                            <h2 class="accordion-header">
                                <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#exampleYoutube">
                                    <i class="fab fa-youtube me-2"></i> Exemple YouTube
                                </button>
                            </h2>
                            <div id="exampleYoutube" class="accordion-collapse collapse" data-bs-parent="#htmlExamples">
                                <div class="accordion-body">
                                    <pre class="bg-light p-2 rounded" style="font-size: 12px; overflow-x: auto;"><code>&lt;iframe width="560" height="315"
  src="https://www.youtube.com/embed/VIDEO_ID"
  frameborder="0" allowfullscreen&gt;&lt;/iframe&gt;</code></pre>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">
                        <i class="fas fa-times me-1"></i> Annuler
                    </button>
                    <button type="button" class="btn btn-dark" id="insertHtmlBtn">
                        <i class="fas fa-code me-1"></i> Insérer le code
                    </button>
                </div>
            </div>
        </div>
    </div>

{% endblock %}

{% block javascripts %}
    <!-- SortableJS pour le drag & drop -->
    <script src="https://cdn.jsdelivr.net/npm/sortablejs@1.15.0/Sortable.min.js"></script>

    <!-- Quill.js WYSIWYG Editor (Open Source) -->
    <script src="https://cdn.quilljs.com/1.3.7/quill.min.js"></script>

    <!-- MediaPicker -->
    <script src="{{ asset('assets/js/media-picker.js') }}"></script>

    <!-- Page Builder Vanilla JS -->
    <script src="{{ asset('assets/js/page-builder-vanilla.js') }}?v={{ 'now'|date('U') }}"></script>

    <!-- SEO Tools JS -->
    <script src="{{ asset('assets/js/seo-tools.js') }}"></script>

    <!-- Initialisation -->
    <script>
        document.addEventListener('DOMContentLoaded', function() {
            const initialSections = {{ sectionsData is defined and sectionsData is not null ? sectionsData|json_encode|raw : '[]' }};
            const siteId = {{ page.site.id }};
            console.log('=== DEBUG CHARGEMENT PAGE ===');
            console.log('Sections Data:', initialSections);
            console.log('Type:', typeof initialSections);
            console.log('JSON:', JSON.stringify(initialSections, null, 2));
            // Vérifier chaque widget
            if (Array.isArray(initialSections)) {
                initialSections.forEach((container, cIdx) => {
                    if (container.columns) {
                        container.columns.forEach((col, colIdx) => {
                            if (col.widgets) {
                                col.widgets.forEach((widget, wIdx) => {
                                    console.log(`Container ${cIdx}, Col ${colIdx}, Widget ${wIdx}:`, widget.type, widget);
                                });
                            }
                        });
                    }
                });
            }
            console.log('=============================');
            window.initPageBuilder(initialSections, siteId);

            // Initialiser les outils SEO
            if (window.initSEOTools) {
                window.initSEOTools();
            }

            // Gestion du bouton "Charger un template"
            const loadTemplateBtn = document.getElementById('load-template-btn');
            const templateModal = new bootstrap.Modal(document.getElementById('templateModal'));
            const templatesGrid = document.getElementById('templates-grid');

            loadTemplateBtn.addEventListener('click', async function() {
                // Charger les templates depuis l'API
                try {
                    const response = await fetch('/admin/api/page-templates');
                    const data = await response.json();

                    if (data.templates && data.templates.length > 0) {
                        // Afficher les templates dans la modal
                        templatesGrid.innerHTML = data.templates.map(template => `
                            <div class="col-md-6 col-lg-4">
                                <div class="card h-100 template-card" style="cursor: pointer; transition: all 0.3s;">
                                    <div class="card-body">
                                        <div class="d-flex align-items-start mb-3">
                                            <div class="flex-shrink-0">
                                                <div class="template-icon" style="width: 48px; height: 48px; background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); border-radius: 8px; display: flex; align-items: center; justify-content: center;">
                                                    <i class="fas fa-file-alt text-white"></i>
                                                </div>
                                            </div>
                                            <div class="flex-grow-1 ms-3">
                                                <h6 class="card-title mb-1 fw-bold">${template.name}</h6>
                                                <span class="badge bg-primary bg-opacity-10 text-primary">${template.category}</span>
                                            </div>
                                        </div>
                                        <p class="card-text text-muted small mb-3">${template.description}</p>
                                        <button class="btn btn-sm btn-primary w-100 load-template-action" data-template-id="${template.id}">
                                            <i class="fas fa-download me-1"></i> Charger ce template
                                        </button>
                                    </div>
                                </div>
                            </div>
                        `).join('');

                        // Ajouter les gestionnaires d'événements pour chaque bouton
                        document.querySelectorAll('.load-template-action').forEach(btn => {
                            btn.addEventListener('click', function(e) {
                                e.stopPropagation();
                                const templateId = this.getAttribute('data-template-id');
                                const template = data.templates.find(t => t.id === templateId);

                                if (template && template.sectionsData) {
                                    // Confirmer avant de charger si du contenu existe
                                    if (window.pageBuilder.data.containers.length > 0) {
                                        showConfirmModal({
                                            title: 'Charger un template',
                                            message: 'Charger ce template remplacera tout le contenu actuel. Voulez-vous continuer ?',
                                            actionText: 'Charger',
                                            actionClass: 'btn-primary',
                                            onConfirm: () => {
                                                // Fermer la modal de template AVANT de charger
                                                const modalElement = document.getElementById('templateModal');
                                                const modalInstance = bootstrap.Modal.getInstance(modalElement);
                                                if (modalInstance) {
                                                    modalInstance.hide();
                                                }

                                                // Charger le template après fermeture
                                                setTimeout(() => {
                                                    window.pageBuilder.loadFromData(template.sectionsData);
                                                    window.pageBuilder.render();
                                                }, 300);
                                            }
                                        });
                                        return;
                                    }

                                    // Fermer la modal AVANT de charger (évite les problèmes de z-index)
                                    const modalElement = document.getElementById('templateModal');
                                    const modalInstance = bootstrap.Modal.getInstance(modalElement);
                                    if (modalInstance) {
                                        modalInstance.hide();
                                    }

                                    // Petit délai pour que la modal se ferme proprement
                                    setTimeout(() => {
                                        // Charger le template
                                        window.pageBuilder.loadTemplate(template.sectionsData);
                                    }, 300);
                                }
                            });
                        });

                        // Afficher la modal
                        templateModal.show();
                    }
                } catch (error) {
                    console.error('Erreur lors du chargement des templates:', error);
                    alert('Erreur lors du chargement des templates. Veuillez réessayer.');
                }
            });

            // Hover effect sur les cartes
            document.addEventListener('mouseover', function(e) {
                if (e.target.closest('.template-card')) {
                    e.target.closest('.template-card').style.transform = 'translateY(-4px)';
                    e.target.closest('.template-card').style.boxShadow = '0 4px 12px rgba(0,0,0,0.15)';
                }
            });

            document.addEventListener('mouseout', function(e) {
                if (e.target.closest('.template-card')) {
                    e.target.closest('.template-card').style.transform = '';
                    e.target.closest('.template-card').style.boxShadow = '';
                }
            });

            // Gestion de la suppression de page
            const deletePageBtn = document.getElementById('delete-page-button');
            if (deletePageBtn) {
                deletePageBtn.addEventListener('click', function() {
                    const pageId = this.getAttribute('data-page-id');

                    showConfirmModal({
                        title: 'Supprimer la page',
                        message: 'Êtes-vous sûr de vouloir supprimer cette page ? Cette action est irréversible et supprimera tout le contenu de la page.',
                        actionText: 'Supprimer définitivement',
                        actionClass: 'btn-danger',
                        onConfirm: () => {
                            // Créer un formulaire pour soumettre la suppression
                            const form = document.createElement('form');
                            form.method = 'POST';
                            form.action = `/admin/page-remove/${pageId}`;

                            document.body.appendChild(form);
                            form.submit();
                        }
                    });
                });
            }
        });
    </script>
{% endblock %}