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

{% block title %}Documentation : Guide Complet Création de Site | Izibrick{% endblock %}

{% block meta_description %}Guides et tutoriels pour maîtriser Izibrick : créer des pages, gérer le contenu, personnaliser le design. Documentation complète et pas-à-pas illustrés.{% endblock %}

{% block meta_keywords %}documentation izibrick, guide création site, tutoriel, aide{% endblock %}

{% block stylesheets %}
    {{ parent() }}
    <style>
        /* Hero Section */
        .doc-hero {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            padding: 80px 0 50px;
            position: relative;
            overflow: hidden;
        }

        .doc-hero::before {
            content: '';
            position: absolute;
            top: 10%;
            left: 5%;
            width: 100px;
            height: 100px;
            background: rgba(255,255,255,0.1);
            border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%;
            animation: float 6s ease-in-out infinite;
        }

        .doc-hero::after {
            content: '';
            position: absolute;
            bottom: 10%;
            right: 10%;
            width: 150px;
            height: 150px;
            background: rgba(255,255,255,0.1);
            border-radius: 63% 37% 54% 46% / 55% 48% 52% 45%;
            animation: float 8s ease-in-out infinite;
        }

        @keyframes float {
            0%, 100% { transform: translateY(0px); }
            50% { transform: translateY(-20px); }
        }

        .documentation-container {
            background: #f8f9fa;
            padding: 40px 0 80px;
        }

        /* Layout avec sidebar */
        .doc-layout {
            display: grid;
            grid-template-columns: 280px 1fr;
            gap: 30px;
            position: relative;
        }

        /* Sidebar navigation */
        .doc-sidebar {
            position: sticky;
            top: 20px;
            height: fit-content;
            max-height: calc(100vh - 100px);
            overflow-y: auto;
            background: white;
            border-radius: 16px;
            padding: 24px;
            box-shadow: 0 4px 20px rgba(0,0,0,0.08);
        }

        .doc-sidebar::-webkit-scrollbar {
            width: 6px;
        }

        .doc-sidebar::-webkit-scrollbar-track {
            background: #f1f5f9;
            border-radius: 10px;
        }

        .doc-sidebar::-webkit-scrollbar-thumb {
            background: #cbd5e1;
            border-radius: 10px;
        }

        .doc-sidebar::-webkit-scrollbar-thumb:hover {
            background: #94a3b8;
        }

        .sidebar-title {
            font-size: 0.875rem;
            font-weight: 700;
            text-transform: uppercase;
            letter-spacing: 0.5px;
            color: #64748b;
            margin-bottom: 16px;
        }

        /* Champ de recherche */
        .doc-search {
            position: relative;
            margin-bottom: 24px;
        }

        .doc-search input {
            width: 100%;
            padding: 10px 16px 10px 40px;
            border: 2px solid #e2e8f0;
            border-radius: 8px;
            font-size: 0.875rem;
            transition: all 0.3s;
        }

        .doc-search input:focus {
            outline: none;
            border-color: #667eea;
            box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
        }

        .doc-search i {
            position: absolute;
            left: 14px;
            top: 50%;
            transform: translateY(-50%);
            color: #94a3b8;
        }

        /* Table des matières */
        .doc-toc {
            list-style: none;
            padding: 0;
            margin: 0;
        }

        .doc-toc-item {
            margin-bottom: 8px;
        }

        .doc-toc-link {
            display: flex;
            align-items: center;
            gap: 8px;
            padding: 8px 12px;
            color: #64748b;
            text-decoration: none;
            border-radius: 6px;
            font-size: 0.875rem;
            transition: all 0.2s;
            font-weight: 500;
        }

        .doc-toc-link:hover {
            background: #f1f5f9;
            color: #667eea;
        }

        .doc-toc-link.active {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            color: white;
        }

        .doc-toc-link i {
            font-size: 0.75rem;
            opacity: 0.6;
        }

        .doc-toc-link.active i {
            opacity: 1;
        }

        /* Main content */
        .doc-content {
            background: white;
            border-radius: 16px;
            padding: 48px;
            box-shadow: 0 4px 20px rgba(0,0,0,0.08);
            line-height: 1.7;
            min-height: 70vh;
        }

        /* Section accordion */
        .doc-section {
            margin-bottom: 32px;
            border: 2px solid #e2e8f0;
            border-radius: 12px;
            overflow: hidden;
            transition: all 0.3s;
        }

        .doc-section.active {
            border-color: #667eea;
            box-shadow: 0 4px 12px rgba(102, 126, 234, 0.1);
        }

        .doc-section-header {
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 20px 24px;
            background: #f8fafc;
            cursor: pointer;
            transition: all 0.3s;
            border: none;
            width: 100%;
            text-align: left;
        }

        .doc-section.active .doc-section-header {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            color: white;
        }

        .doc-section-header:hover {
            background: #f1f5f9;
        }

        .doc-section.active .doc-section-header:hover {
            background: linear-gradient(135deg, #5568d3 0%, #6a3f8c 100%);
        }

        .doc-section-title {
            display: flex;
            align-items: center;
            gap: 12px;
            margin: 0;
            font-size: 1.25rem;
            font-weight: 600;
            color: #1e293b;
        }

        .doc-section.active .doc-section-title {
            color: white;
        }

        .doc-section-icon {
            display: flex;
            align-items: center;
            justify-content: center;
            width: 40px;
            height: 40px;
            background: white;
            border-radius: 8px;
            color: #667eea;
            font-size: 1.125rem;
        }

        .doc-section.active .doc-section-icon {
            background: rgba(255, 255, 255, 0.2);
            color: white;
        }

        .doc-section-toggle {
            display: flex;
            align-items: center;
            justify-content: center;
            width: 32px;
            height: 32px;
            background: white;
            border-radius: 50%;
            color: #667eea;
            transition: transform 0.3s;
        }

        .doc-section.active .doc-section-toggle {
            transform: rotate(180deg);
            background: rgba(255, 255, 255, 0.2);
            color: white;
        }

        .doc-section-body {
            max-height: 0;
            overflow: hidden;
            transition: max-height 0.5s ease-out;
        }

        .doc-section.active .doc-section-body {
            max-height: 50000px;
            transition: max-height 0.8s ease-in;
        }

        .doc-section-content {
            padding: 32px 24px;
        }

        /* Markdown styling */
        .doc-content h1 {
            color: #1e293b;
            font-size: 2.5rem;
            font-weight: 700;
            margin-bottom: 1.5rem;
            padding-bottom: 1rem;
            border-bottom: 3px solid #667eea;
        }

        .doc-content h2 {
            color: #334155;
            font-size: 1.875rem;
            font-weight: 600;
            margin-top: 2.5rem;
            margin-bottom: 1rem;
            padding-bottom: 0.5rem;
            border-bottom: 2px solid #e2e8f0;
        }

        .doc-content h3 {
            color: #475569;
            font-size: 1.5rem;
            font-weight: 600;
            margin-top: 2rem;
            margin-bottom: 0.75rem;
        }

        .doc-content h4 {
            color: #64748b;
            font-size: 1.25rem;
            font-weight: 600;
            margin-top: 1.5rem;
            margin-bottom: 0.5rem;
        }

        .doc-content p {
            margin-bottom: 1rem;
            color: #475569;
        }

        .doc-content ul, .doc-content ol {
            margin-bottom: 1rem;
            padding-left: 2rem;
        }

        .doc-content li {
            margin-bottom: 0.5rem;
            color: #475569;
        }

        .doc-content code {
            background: #f1f5f9;
            padding: 3px 8px;
            border-radius: 4px;
            font-family: 'Monaco', 'Courier New', monospace;
            font-size: 0.9em;
            color: #e11d48;
        }

        .doc-content pre {
            background: #1e293b;
            color: #e2e8f0;
            padding: 24px;
            border-radius: 12px;
            overflow-x: auto;
            margin-bottom: 1.5rem;
            box-shadow: 0 4px 12px rgba(0,0,0,0.1);
        }

        .doc-content pre code {
            background: transparent;
            color: #e2e8f0;
            padding: 0;
        }

        .doc-content table {
            width: 100%;
            border-collapse: collapse;
            margin-bottom: 1.5rem;
            box-shadow: 0 2px 8px rgba(0,0,0,0.05);
            border-radius: 8px;
            overflow: hidden;
        }

        .doc-content table th,
        .doc-content table td {
            padding: 12px 16px;
            border: 1px solid #e2e8f0;
            text-align: left;
        }

        .doc-content table th {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            font-weight: 600;
            color: white;
            border: none;
        }

        .doc-content blockquote {
            border-left: 4px solid #667eea;
            padding-left: 20px;
            margin-left: 0;
            margin-right: 0;
            padding: 16px 20px;
            background: #f8fafc;
            border-radius: 0 8px 8px 0;
            color: #64748b;
            font-style: italic;
        }

        .doc-content hr {
            border: none;
            border-top: 2px solid #e2e8f0;
            margin: 3rem 0;
        }

        .doc-content a {
            color: #667eea;
            text-decoration: none;
            font-weight: 500;
            transition: color 0.2s;
        }

        .doc-content a:hover {
            color: #764ba2;
            text-decoration: underline;
        }

        .back-link {
            display: inline-flex;
            align-items: center;
            gap: 10px;
            padding: 12px 24px;
            background: white;
            color: #667eea;
            text-decoration: none;
            font-weight: 600;
            border-radius: 50px;
            box-shadow: 0 4px 12px rgba(102, 126, 234, 0.2);
            transition: all 0.3s;
            margin-bottom: 30px;
        }

        .back-link:hover {
            transform: translateY(-2px);
            box-shadow: 0 6px 20px rgba(102, 126, 234, 0.3);
            background: #667eea;
            color: white;
        }

        /* Message pas de résultats */
        .no-results {
            display: none;
            padding: 20px;
            text-align: center;
            color: #64748b;
            background: #f8fafc;
            border-radius: 8px;
            margin-top: 16px;
        }

        .no-results.show {
            display: block;
        }

        /* Highlight search results */
        .highlight {
            background: #fef3c7;
            padding: 2px 4px;
            border-radius: 3px;
        }

        /* Smooth scrolling */
        html {
            scroll-behavior: smooth;
        }

        /* Responsive */
        @media (max-width: 992px) {
            .doc-layout {
                grid-template-columns: 1fr;
            }

            .doc-sidebar {
                position: relative;
                top: 0;
                max-height: none;
                margin-bottom: 20px;
            }

            .doc-content {
                padding: 32px 24px;
            }
        }

        @media (max-width: 768px) {
            .doc-hero {
                padding: 60px 0 40px;
            }

            .documentation-container {
                padding: 30px 15px 60px;
            }

            .doc-content {
                padding: 24px 16px;
                border-radius: 12px;
            }

            .doc-content h1 {
                font-size: 2rem;
            }

            .doc-content h2 {
                font-size: 1.5rem;
            }

            .doc-content h3 {
                font-size: 1.25rem;
            }

            .doc-section-header {
                padding: 16px;
            }

            .doc-section-title {
                font-size: 1.125rem;
            }

            .doc-section-content {
                padding: 24px 16px;
            }
        }
    </style>
{% endblock %}

{% block body %}
    {# Hero Section #}
    <section class="doc-hero">
        <div class="container">
            <div class="row justify-content-center">
                <div class="col-lg-8 text-center text-white">
                    <span class="badge bg-white text-primary px-4 py-2 mb-3 rounded-pill fw-semibold">
                        <i class="fas fa-book me-2"></i>Documentation
                    </span>
                    <h1 class="display-4 fw-bold mb-4">Guide complet d'utilisation</h1>
                    <p class="lead" style="opacity: 0.95;">
                        Apprenez à maîtriser tous les outils Izibrick pour créer des sites web professionnels
                    </p>
                </div>
            </div>
        </div>
    </section>

    {# Content Section #}
    <section class="documentation-container">
        <div class="container">
            <a href="{{ path('index') }}" class="back-link">
                <i class="fas fa-arrow-left"></i>
                Retour à l'accueil
            </a>

            {% if markdownContent %}
                <div class="doc-layout">
                    {# Sidebar Navigation #}
                    <aside class="doc-sidebar">
                        <div class="sidebar-title">
                            <i class="fas fa-list me-2"></i>Table des matières
                        </div>

                        {# Search #}
                        <div class="doc-search">
                            <i class="fas fa-search"></i>
                            <input type="text" id="docSearch" placeholder="Rechercher dans la doc...">
                        </div>

                        {# TOC #}
                        <ul class="doc-toc" id="docToc">
                            <li class="doc-toc-item">
                                <a href="#" class="doc-toc-link active" data-section="introduction">
                                    <i class="fas fa-home"></i>
                                    <span>Introduction</span>
                                </a>
                            </li>
                            <li class="doc-toc-item">
                                <a href="#" class="doc-toc-link" data-section="concepts">
                                    <i class="fas fa-lightbulb"></i>
                                    <span>Concepts de base</span>
                                </a>
                            </li>
                            <li class="doc-toc-item">
                                <a href="#" class="doc-toc-link" data-section="containers">
                                    <i class="fas fa-layer-group"></i>
                                    <span>Les Containers</span>
                                </a>
                            </li>
                            <li class="doc-toc-item">
                                <a href="#" class="doc-toc-link" data-section="widgets">
                                    <i class="fas fa-puzzle-piece"></i>
                                    <span>Les Widgets</span>
                                </a>
                            </li>
                            <li class="doc-toc-item">
                                <a href="#" class="doc-toc-link" data-section="ia">
                                    <i class="fas fa-robot"></i>
                                    <span>Intelligence Artificielle</span>
                                </a>
                            </li>
                            <li class="doc-toc-item">
                                <a href="#" class="doc-toc-link" data-section="users">
                                    <i class="fas fa-users"></i>
                                    <span>Utilisateurs et rôles</span>
                                </a>
                            </li>
                            <li class="doc-toc-item">
                                <a href="#" class="doc-toc-link" data-section="admin">
                                    <i class="fas fa-cog"></i>
                                    <span>Administration</span>
                                </a>
                            </li>
                            <li class="doc-toc-item">
                                <a href="#" class="doc-toc-link" data-section="templates">
                                    <i class="fas fa-file-alt"></i>
                                    <span>Templates prédéfinis</span>
                                </a>
                            </li>
                            <li class="doc-toc-item">
                                <a href="#" class="doc-toc-link" data-section="guides">
                                    <i class="fas fa-map-signs"></i>
                                    <span>Guides pratiques</span>
                                </a>
                            </li>
                            <li class="doc-toc-item">
                                <a href="#" class="doc-toc-link" data-section="tips">
                                    <i class="fas fa-star"></i>
                                    <span>Astuces</span>
                                </a>
                            </li>
                        </ul>

                        <div class="no-results" id="noResults">
                            <i class="fas fa-search mb-2"></i>
                            <p class="mb-0">Aucun résultat trouvé</p>
                        </div>
                    </aside>

                    {# Main Content #}
                    <main class="doc-content">
                        <div id="docSections">
                            {# Les sections seront générées dynamiquement #}
                        </div>
                    </main>
                </div>
            {% else %}
                <div class="doc-content">
                    <div class="alert alert-warning border-0 shadow-sm">
                        <i class="fas fa-exclamation-triangle me-2"></i>
                        Fichier de documentation non trouvé.
                    </div>
                </div>
            {% endif %}
        </div>
    </section>

    <script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script>
    <script>
        document.addEventListener('DOMContentLoaded', function() {
            const rawMarkdown = `{{ markdownContent|raw|e('js') }}`;

            if (!rawMarkdown) return;

            // Configuration de marked
            marked.setOptions({
                headerIds: true,
                mangle: false,
                breaks: true
            });

            // Structure des sections avec leurs contenus
            const sections = [
                {
                    id: 'introduction',
                    title: 'Introduction',
                    icon: 'fa-home',
                    startMarker: '## Introduction',
                    endMarker: '## Concepts de base'
                },
                {
                    id: 'concepts',
                    title: 'Concepts de base',
                    icon: 'fa-lightbulb',
                    startMarker: '## Concepts de base',
                    endMarker: '## Les Containers'
                },
                {
                    id: 'containers',
                    title: 'Les Containers',
                    icon: 'fa-layer-group',
                    startMarker: '## Les Containers',
                    endMarker: '## Les Widgets'
                },
                {
                    id: 'widgets',
                    title: 'Les Widgets',
                    icon: 'fa-puzzle-piece',
                    startMarker: '## Les Widgets',
                    endMarker: '## Intelligence Artificielle'
                },
                {
                    id: 'ia',
                    title: 'Intelligence Artificielle',
                    icon: 'fa-robot',
                    startMarker: '## Intelligence Artificielle',
                    endMarker: '## Gestion des utilisateurs et rôles'
                },
                {
                    id: 'users',
                    title: 'Gestion des utilisateurs et rôles',
                    icon: 'fa-users',
                    startMarker: '## Gestion des utilisateurs et rôles',
                    endMarker: '## Fonctionnalités d\'administration'
                },
                {
                    id: 'admin',
                    title: 'Fonctionnalités d\'administration',
                    icon: 'fa-cog',
                    startMarker: '## Fonctionnalités d\'administration',
                    endMarker: '## Templates prédéfinis'
                },
                {
                    id: 'templates',
                    title: 'Templates prédéfinis',
                    icon: 'fa-file-alt',
                    startMarker: '## Templates prédéfinis',
                    endMarker: '## Guides pratiques'
                },
                {
                    id: 'guides',
                    title: 'Guides pratiques',
                    icon: 'fa-map-signs',
                    startMarker: '## Guides pratiques',
                    endMarker: '## Astuces et bonnes pratiques'
                },
                {
                    id: 'tips',
                    title: 'Astuces et bonnes pratiques',
                    icon: 'fa-star',
                    startMarker: '## Astuces et bonnes pratiques',
                    endMarker: '## Raccourcis clavier'
                }
            ];

            // Extraire le contenu de chaque section
            function extractSectionContent(markdown, startMarker, endMarker) {
                const startIndex = markdown.indexOf(startMarker);
                if (startIndex === -1) return '';

                const endIndex = endMarker ? markdown.indexOf(endMarker, startIndex + 1) : markdown.length;
                return markdown.substring(startIndex, endIndex !== -1 ? endIndex : markdown.length);
            }

            // Générer les sections accordéon
            const sectionsContainer = document.getElementById('docSections');

            sections.forEach((section, index) => {
                const content = extractSectionContent(rawMarkdown, section.startMarker, section.endMarker);
                if (!content) return;

                const sectionDiv = document.createElement('div');
                sectionDiv.className = 'doc-section';
                sectionDiv.id = `section-${section.id}`;
                sectionDiv.dataset.sectionId = section.id;

                // Ouvrir la première section par défaut
                if (index === 0) {
                    sectionDiv.classList.add('active');
                }

                sectionDiv.innerHTML = `
                    <button class="doc-section-header" onclick="toggleSection('${section.id}')">
                        <div class="doc-section-title">
                            <div class="doc-section-icon">
                                <i class="fas ${section.icon}"></i>
                            </div>
                            <span>${section.title}</span>
                        </div>
                        <div class="doc-section-toggle">
                            <i class="fas fa-chevron-down"></i>
                        </div>
                    </button>
                    <div class="doc-section-body">
                        <div class="doc-section-content">
                            ${marked.parse(content)}
                        </div>
                    </div>
                `;

                sectionsContainer.appendChild(sectionDiv);
            });

            // Fonction toggle section
            window.toggleSection = function(sectionId) {
                const section = document.getElementById(`section-${sectionId}`);
                section.classList.toggle('active');
            };

            // Navigation TOC
            document.querySelectorAll('.doc-toc-link').forEach(link => {
                link.addEventListener('click', function(e) {
                    e.preventDefault();

                    // Update active state
                    document.querySelectorAll('.doc-toc-link').forEach(l => l.classList.remove('active'));
                    this.classList.add('active');

                    // Scroll to section and open it
                    const sectionId = this.dataset.section;
                    const section = document.getElementById(`section-${sectionId}`);

                    if (section) {
                        // Close all sections
                        document.querySelectorAll('.doc-section').forEach(s => s.classList.remove('active'));

                        // Open target section
                        section.classList.add('active');

                        // Scroll to section
                        section.scrollIntoView({ behavior: 'smooth', block: 'start' });

                        // Add offset
                        setTimeout(() => {
                            window.scrollBy(0, -20);
                        }, 300);
                    }
                });
            });

            // Recherche
            const searchInput = document.getElementById('docSearch');
            const tocItems = document.querySelectorAll('.doc-toc-item');
            const noResults = document.getElementById('noResults');

            searchInput.addEventListener('input', function(e) {
                const searchTerm = e.target.value.toLowerCase().trim();

                if (searchTerm === '') {
                    // Réinitialiser
                    tocItems.forEach(item => item.style.display = '');
                    document.querySelectorAll('.doc-section').forEach(section => section.style.display = '');
                    noResults.classList.remove('show');

                    // Remove highlights
                    document.querySelectorAll('.highlight').forEach(el => {
                        el.outerHTML = el.innerHTML;
                    });
                    return;
                }

                let hasResults = false;

                // Rechercher dans les sections
                document.querySelectorAll('.doc-section').forEach(section => {
                    const sectionContent = section.querySelector('.doc-section-content');
                    const text = sectionContent.textContent.toLowerCase();

                    if (text.includes(searchTerm)) {
                        section.style.display = '';
                        section.classList.add('active');
                        hasResults = true;

                        // Highlight search term
                        highlightText(sectionContent, searchTerm);
                    } else {
                        section.style.display = 'none';
                    }
                });

                // Filter TOC
                tocItems.forEach(item => {
                    const link = item.querySelector('.doc-toc-link');
                    const sectionId = link.dataset.section;
                    const section = document.getElementById(`section-${sectionId}`);

                    if (section && section.style.display !== 'none') {
                        item.style.display = '';
                    } else {
                        item.style.display = 'none';
                    }
                });

                // Show/hide no results
                if (hasResults) {
                    noResults.classList.remove('show');
                } else {
                    noResults.classList.add('show');
                }
            });

            // Fonction de highlight
            function highlightText(element, searchTerm) {
                // Remove existing highlights
                element.querySelectorAll('.highlight').forEach(el => {
                    el.outerHTML = el.innerHTML;
                });

                // Add new highlights
                const walker = document.createTreeWalker(
                    element,
                    NodeFilter.SHOW_TEXT,
                    null,
                    false
                );

                const nodesToReplace = [];
                let node;

                while (node = walker.nextNode()) {
                    if (node.nodeValue.toLowerCase().includes(searchTerm)) {
                        nodesToReplace.push(node);
                    }
                }

                nodesToReplace.forEach(node => {
                    const span = document.createElement('span');
                    span.innerHTML = node.nodeValue.replace(
                        new RegExp(searchTerm, 'gi'),
                        match => `<span class="highlight">${match}</span>`
                    );
                    node.parentNode.replaceChild(span, node);
                });
            }

            // Smooth scroll pour les liens d'ancre
            document.addEventListener('click', function(e) {
                if (e.target.tagName === 'A' && e.target.getAttribute('href')?.startsWith('#')) {
                    e.preventDefault();
                    const targetId = e.target.getAttribute('href').substring(1);
                    const targetElement = document.getElementById(targetId);

                    if (targetElement) {
                        targetElement.scrollIntoView({
                            behavior: 'smooth',
                            block: 'start'
                        });

                        setTimeout(() => {
                            window.scrollBy(0, -20);
                        }, 300);
                    }
                }
            });
        });
    </script>
{% endblock %}