{# templates/admin/projet/show.html.twig #}
{% extends 'layouts/admin_layout.html.twig' %}

{% block title %}Pilotage : {{ projet.nom }} - GPIM{% endblock %}

{% block stylesheets %}
    {{ parent() }}
    {# On retire l'import CSS ici car il est déjà dans base.html.twig #}
    <style>
        /* Design des onglets (Tabs) Premium */
        .card-header-tabs-container { background-color: #ffffff; border-bottom: 1px solid #edf2f9; }
        .nav-tabs.card-header-tabs { border-bottom: none; margin-bottom: -1px; gap: 0.5rem; }
        .nav-tabs .nav-link { border: none; color: #6e84a3 !important; padding: 1.25rem 1.5rem; font-weight: 600; font-size: 0.95rem; transition: all 0.2s ease; border-bottom: 3px solid transparent; display: flex; align-items: center; }
        .nav-tabs .nav-link:hover { color: #2c7be5 !important; background-color: rgba(44, 123, 229, 0.03); border-bottom-color: #d2ddec; }
        .nav-tabs .nav-link.active { background-color: transparent !important; color: #2c7be5 !important; border-bottom: 3px solid #2c7be5 !important; }
        
        /* Animation icônes */
        .nav-link i { font-size: 1.1rem; transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1); }
        .nav-link.active i { transform: translateY(-2px) scale(1.1); }
        
        /* Aide contextuelle discrète */
        .tab-help { font-size: 0.75rem; margin-left: 5px; opacity: 0.6; cursor: help; }
        .tab-help:hover { opacity: 1; color: #2c7be5; }

        .tab-content > .tab-pane { animation: fadeIn 0.3s ease-out; }
        @keyframes fadeIn { from { opacity: 0; transform: translateY(5px); } to { opacity: 1; transform: translateY(0); } }
        
        /* Style Galerie Photos */
        .gallery-item { transition: transform 0.2s; }
        .gallery-item:hover { transform: scale(1.02); }
    </style>
{% endblock %}

{% block content %}
<div class="container-fluid">
    {# --- EN-TÊTE ET KPIs --- #}
    {% include 'admin/projet/_header_show.html.twig' %}
    {% include 'admin/projet/_kpis_show.html.twig' %}

    {# --- SYSTÈME D'ONGLETS --- #}
    <div class="card border-0 shadow-sm overflow-hidden">
        <div class="card-header card-header-tabs-container p-0">
            <ul class="nav nav-tabs card-header-tabs px-3" id="gpimTab" role="tablist">
               <li class="nav-item">
                    <button class="nav-link active" id="inventory-tab" data-bs-toggle="tab" data-bs-target="#tab-inventory" type="button" role="tab">
                        <i class="fas fa-th-large me-2 text-success"></i> Lots et Biens 
                        <span class="badge bg-success-subtle text-success rounded-pill border ms-1">{{ projet.lots|length }}</span>
                        <i class="fa-solid fa-circle-question tab-help" data-bs-toggle="tooltip" title="Gérez l'inventaire des appartements ou villas."></i>
                    </button>
                </li>
                 <li class="nav-item">
                    <button class="nav-link" id="info-tab" data-bs-toggle="tab" data-bs-target="#tab-info" type="button" role="tab">
                        <i class="fas fa-info-circle me-2 text-primary"></i> Informations
                        <i class="fa-solid fa-circle-question tab-help" data-bs-toggle="tooltip" title="Détails techniques et descriptif commercial."></i>
                    </button>
                </li>
                <li class="nav-item">
                    <button class="nav-link" id="docs-tab" data-bs-toggle="tab" data-bs-target="#tab-docs" type="button" role="tab">
                        <i class="fas fa-folder-open me-2 text-info"></i> Documents
                        <i class="fa-solid fa-circle-info tab-help" data-bs-toggle="tooltip" title="Plans de masse, brochures PDF, etc."></i>
                    </button>
                </li>
                <li class="nav-item">
                    <button class="nav-link" id="photos-tab" data-bs-toggle="tab" data-bs-target="#tab-photos" type="button" role="tab">
                        <i class="fas fa-camera me-2 text-warning"></i> Photos
                        <i class="fa-solid fa-circle-image tab-help" data-bs-toggle="tooltip" title="Galerie d'images et rendus 3D du programme."></i>
                    </button>
                </li>
            </ul>
        </div>

        <div class="card-body tab-content bg-white p-4">
            <div class="tab-pane fade show active" id="tab-inventory" role="tabpanel">{% include 'admin/projet/tabs/_inventory.html.twig' %}</div>
            <div class="tab-pane fade" id="tab-info" role="tabpanel">{% include 'admin/projet/tabs/_info.html.twig' %}</div>
            <div class="tab-pane fade" id="tab-docs" role="tabpanel">
                {# Utilisation du fragment de document global #}
                {{ render(path('doc_inline_display', {'targetType': 'PROJET_DOC', 'targetId': projet.id })) }}
            </div>
            <div class="tab-pane fade" id="tab-photos" role="tabpanel">
                {# Conteneur identifié pour le refresh JS #}
                    {{ render(path('doc_inline_display', {'targetType': 'PROJET_IMG', 'targetId': projet.id })) }}
            </div>
        </div>
    </div>
</div>

<div id="modalContainer">
    {% include 'admin/projet/modals/_add_etape.html.twig' %}
    {% if formLot is defined %}
        {% include 'admin/projet/modals/_lot_modals.html.twig' with {'form': formLot, 'projet': projet, 'typesBien': typesBien} %}
    {% endif %}
    {% include 'admin/projet/modals/_delete_lot.html.twig' %}
</div>
{% endblock %}

{% block javascripts %}
    {{ parent() }}
    {# On ne ré-importe pas dropzone.js ici, il est déjà dans base.html.twig #}
    <script>
        document.addEventListener('DOMContentLoaded', function() {
            
            /**
             * RAFRAÎCHISSEMENT DE LA GALERIE
             * Appelé quand on change d'onglet ou après un upload réussi dans la modale
             */
            window.refreshProjectGallery = function() {
                const galleryContainer = document.getElementById('project-gallery-container');
                if (!galleryContainer) return;

                // On recharge le fragment Twig des documents pour garder le style identique
                fetch(`/shared/document/inline-display/PROJET_IMG/{{ projet.id }}`)
                    .then(res => res.text())
                    .then(html => {
                        galleryContainer.innerHTML = html;
                        // On réinitialise les tooltips si le fragment en contient
                        if (typeof initTooltips === 'function') initTooltips();
                    });
            }

            /**
             * GESTION DES ONGLETS (Héritage du Hash URL)
             */
            const hash = window.location.hash;
            if (hash) {
                const targetTab = document.querySelector(`button[data-bs-target="${hash}"]`);
                if (targetTab) {
                    bootstrap.Tab.getOrCreateInstance(targetTab).show();
                }
            }

            document.querySelectorAll('button[data-bs-toggle="tab"]').forEach(tabEl => {
                tabEl.addEventListener('shown.bs.tab', event => {
                    const target = event.target.getAttribute('data-bs-target');
                    history.replaceState(null, null, target);
                    
                    // Si on arrive sur l'onglet photo, on rafraîchit pour être sûr d'avoir les dernières
                    if (target === '#tab-photos') refreshProjectGallery();
                });
            });

            /**
             * INTERCEPTION DE LA FERMETURE DE MODALE
             * Si une modale de documents a été utilisée, on rafraîchit la vue
             */
            const remoteModal = document.getElementById('remoteModal');
            if (remoteModal) {
                remoteModal.addEventListener('hidden.bs.modal', function () {
                    // On rafraîchit systématiquement les zones de documents au cas où
                    refreshProjectGallery();
                });
            }
        });
    </script>
{% endblock %}