{% extends 'layouts/admin_layout.html.twig' %}

{% block title %}Configuration : {{ page.page }}{% endblock %}

{% block content %}
<div class="container-fluid p-4">
  {{ form_start(form, {'attr': {'enctype': 'multipart/form-data', 'id': 'page-form', 'class': 'needs-validation', 'novalidate': 'novalidate'}}) }}
   {{ form_widget(form.page) }}
    {# SECTION EN-TÊTE : DESIGN ÉPURÉ #}
    <div class="d-flex justify-content-between align-items-center mb-4">
        <div>
            <h3 class="page-header page-header-top mb-0">Configuration de la Page  <span class="badge bg-primary-soft text-primary border border-primary-subtle fw-bold">{{ page.page }}</span></h3>
            <p class="text-muted small mb-0">
                Gestion des contenus, visuels et optimisation SEO  
            </p>
        </div>
        <div class="d-flex gap-2">
            <a href="{{ path('admin_website_page_index') }}" class="btn btn-outline-secondary shadow-sm">
                <i class="fas fa-arrow-left me-2"></i>Retour à la liste
            </a>
        </div>
    </div>

   
    <div class="accordion shadow-sm border-0" id="accordionWebsite">
        
        {# 1. Section HERO - TOUJOURS AFFICHÉE #}
        <div class="accordion-item mb-3 border-0 shadow-sm rounded overflow-hidden">
            <h2 class="accordion-header" id="headingHero">
                <button class="accordion-button fw-bold text-dark bg-white border-start border-primary border-4" type="button" data-bs-toggle="collapse" data-bs-target="#collapseHero" aria-expanded="true">
                    <i class="fas fa-desktop me-2 text-primary"></i> 1. Section Hero (Entête de page)
                </button>
            </h2>
            <div id="collapseHero" class="accordion-collapse collapse show" data-bs-parent="#accordionWebsite">
                <div class="accordion-body bg-white p-4">
                    {% include 'admin/website_page/_partials/_hero.html.twig' %}
                </div>
            </div>
        </div>

        {# 2. Section CONTENU DE PRESENTATION #}
        {% if page.page in ['ABOUT', 'CONSTRUCTION_VENTE'] %}
        <div class="accordion-item mb-3 border-0 shadow-sm rounded overflow-hidden">
            <h2 class="accordion-header" id="headingContent">
                <button class="accordion-button collapsed fw-bold text-dark bg-white border-start border-info border-4" type="button" data-bs-toggle="collapse" data-bs-target="#collapseContent">
                    <i class="fas fa-file-alt me-2 text-info"></i> 2. Contenu de présentation
                </button>
            </h2>
            <div id="collapseContent" class="accordion-collapse collapse" data-bs-parent="#accordionWebsite">
                <div class="accordion-body bg-white p-4">
                    {% include 'admin/website_page/_partials/_presentation.html.twig' %}
                </div>
            </div>
        </div>
        {% endif %}

        {# 3. Section STATISTIQUES #}
        {% if page.page in ['ACCUEIL', 'ABOUT', 'CONSTRUCTION_VENTE'] %}
        <div class="accordion-item mb-3 border-0 shadow-sm rounded overflow-hidden">
            <h2 class="accordion-header" id="headingStats">
                <button class="accordion-button collapsed fw-bold text-dark bg-white border-start border-warning border-4" type="button" data-bs-toggle="collapse" data-bs-target="#collapseStats">
                    <i class="fas fa-chart-line me-2 text-warning"></i> 3. Chiffres Clés / Statistiques
                </button>
            </h2>
            <div id="collapseStats" class="accordion-collapse collapse" data-bs-parent="#accordionWebsite">
                <div class="accordion-body bg-white p-4">
                   {% include 'admin/website_page/_partials/_statistique.html.twig' %}
                </div>
            </div>
        </div>
        {% endif %}

        {# 4. Section ATOUTS #}
        {% if page.page in ['ACCUEIL', 'ABOUT', 'CONSTRUCTION_VENTE'] %}
        <div class="accordion-item mb-3 border-0 shadow-sm rounded overflow-hidden">
            <h2 class="accordion-header" id="headingFuture">
                <button class="accordion-button collapsed fw-bold text-dark bg-white border-start border-secondary border-4" type="button" data-bs-toggle="collapse" data-bs-target="#collapseFuture">
                    <i class="fas fa-star me-2 text-secondary"></i> 4. Section Atouts (Points forts)
                </button>
            </h2>
            <div id="collapseFuture" class="accordion-collapse collapse" data-bs-parent="#accordionWebsite">
                <div class="accordion-body bg-white p-4">
                    {% include 'admin/website_page/_partials/_atouts.html.twig' %}
                </div>
            </div>
        </div>
        {% endif %}

        {# 5. Section CTA #}
        {% if page.page in ['ACCUEIL', 'ABOUT', 'CONSTRUCTION_VENTE'] %}
        <div class="accordion-item mb-3 border-0 shadow-sm rounded overflow-hidden">
            <h2 class="accordion-header" id="headingCTA">
                <button class="accordion-button collapsed fw-bold text-dark bg-white border-start border-success border-4" type="button" data-bs-toggle="collapse" data-bs-target="#collapseCTA">
                    <i class="fas fa-bullhorn me-2 text-success"></i> 5. Bandeau d'Appel à l'action
                </button>
            </h2>
            <div id="collapseCTA" class="accordion-collapse collapse" data-bs-parent="#accordionWebsite">
                <div class="accordion-body bg-white p-4">
                   {% include 'admin/website_page/_partials/_cta.html.twig' %}
                </div>
            </div>
        </div>
        {% endif %}
        {# 5.bis Section ENTREPRISE (Visible uniquement pour CONTACT) #}
{% if page.page == 'CONTACTS' %}
<div class="accordion-item mb-3 border-0 shadow-sm rounded overflow-hidden">
    <h2 class="accordion-header" id="headingEntreprise">
        <button class="accordion-button collapsed fw-bold text-dark bg-white border-start border-danger border-4" type="button" data-bs-toggle="collapse" data-bs-target="#collapseEntreprise">
            <i class="fas fa-building me-2 text-danger"></i> 5. Informations de l'établissement
        </button>
    </h2>
    <div id="collapseEntreprise" class="accordion-collapse collapse" data-bs-parent="#accordionWebsite">
        <div class="accordion-body bg-white p-4">
            <div class="row">
                <div class="col-md-6">
                    {{ form_row(formEntreprise.horaire) }}
                </div>
                <div class="col-md-6">
                    {{ form_row(formEntreprise.googleMapData) }}
                </div>
            </div>
        </div>
    </div>
</div>
{% endif %}

        {# 6. SECTION SEO - TOUJOURS AFFICHÉE #}
        <div class="accordion-item border-0 shadow-sm rounded overflow-hidden">
            <h2 class="accordion-header" id="headingSEO">
                <button class="accordion-button collapsed fw-bold text-white bg-dark border-start border-dark-subtle border-4" type="button" data-bs-toggle="collapse" data-bs-target="#collapseSEO">
                    <i class="fas fa-search me-2 text-info"></i> 6. Optimisation SEO (Google)
                </button>
            </h2>
            <div id="collapseSEO" class="accordion-collapse collapse" data-bs-parent="#accordionWebsite">
                <div class="accordion-body bg-dark text-white p-4">
                   {% include 'admin/website_page/_partials/_seo.html.twig' %}
                </div>
            </div>
        </div>
    </div>

    {# BARRE DE SAUVEGARDE FIXE (STYLISÉE LUXIM) #}
    <div class="sticky-footer-bar bg-white border-top shadow-lg p-3 d-flex justify-content-end align-items-center gap-3">
        <a href="{{ path('admin_website_page_index') }}" class="text-secondary text-decoration-none small fw-bold">
            <i class="fas fa-times me-1"></i>Annuler
        </a>
        <button type="submit" class="btn btn-login text-white px-5 shadow-sm fw-bold">
            <i class="fas fa-save me-2"></i>Appliquer les modifications
        </button>
    </div>

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

<style>
    /* Styles inspirés de l'inventaire global */
    .bg-primary-soft { background-color: #eef2ff !important; }
    .btn-login { background-color: #0d6efd; transition: all 0.3s ease; }
    .btn-login:hover { background-color: #0b5ed7; transform: translateY(-1px); }
    
    /* Accordion Customization */
    .accordion-button:not(.collapsed) {
        background-color: #f8f9fa;
        box-shadow: none;
    }
    .accordion-button::after {
        filter: grayscale(1);
    }
    
    /* Form inputs styling match */
    .form-control:focus, .form-select:focus {
        border-color: #0d6efd;
        box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.1);
    }

    /* Footer fixe */
    .sticky-footer-bar {
        position: fixed;
        bottom: 0;
        right: 0;
        left: 250px; /* Ajuster selon la largeur de votre sidebar */
        z-index: 1000;
    }
    @media (max-width: 992px) { .sticky-footer-bar { left: 0; } }

    /* Transitions */
    .fade-out { opacity: 0; transition: opacity 0.2s ease; }
</style>
{% endblock %}

{% block javascripts %}
    {{ parent() }}
    <script>
        // 1. Prévisualisation des images
        function initImagePreviews() {
            document.querySelectorAll('input[type="file"]').forEach(input => {
                input.addEventListener('change', function() {
                    const file = this.files[0];
                    if (file) {
                        // On cherche un élément img à côté ou on en crée un
                        let preview = this.parentElement.querySelector('.img-preview');
                        if (!preview) {
                            preview = document.createElement('img');
                            preview.className = 'img-preview mt-2 img-thumbnail';
                            preview.style.height = '100px';
                            this.parentElement.appendChild(preview);
                        }
                        const reader = new FileReader();
                        reader.onload = e => preview.src = e.target.result;
                        reader.readAsDataURL(file);
                    }
                });
            });
        }

        document.addEventListener('DOMContentLoaded', function() {
            initImagePreviews();

            // Gestion des collections génériques (pour Atouts/Futures si non encore migré)
            // Note: Vos statistiques utilisent déjà leur propre script dans le partial.
            document.querySelectorAll('.add-collection-btn').forEach(btn => {
                btn.addEventListener('click', function(e) {
                    // Si c'est le bouton des stats, on laisse le script des stats gérer
                    if (this.classList.contains('js-stat-add-btn')) return;

                    const list = document.querySelector(this.getAttribute('data-list-selector'));
                    let counter = parseInt(list.getAttribute('data-widget-counter'));
                    const prototype = list.getAttribute('data-prototype');
                    
                    const newItem = document.createElement('li');
                    newItem.className = 'collection-item border rounded p-3 mb-3 shadow-sm bg-white position-relative animate__animated animate__fadeIn';
                    
                    newItem.innerHTML = prototype.replace(/__name__/g, counter) + 
                        `<button type="button" class="btn btn-danger btn-sm remove-item position-absolute top-0 end-0 m-2">
                            <i class="fas fa-trash"></i>
                        </button>`;

                    list.appendChild(newItem);
                    list.setAttribute('data-widget-counter', counter + 1);
                });
            });

            // Suppression universelle
            document.addEventListener('click', e => {
                const btn = e.target.closest('.remove-item') || e.target.closest('.js-stat-remove');
                if (btn) {
                    const item = btn.closest('.collection-item') || btn.closest('.js-stat-item');
                    if (item && confirm('Confirmer la suppression ?')) {
                        item.classList.add('fade-out');
                        setTimeout(() => item.remove(), 200);
                    }
                }
            });
        });
    </script>
{% endblock %}