{# templates/admin/technique/index.html.twig #}
{% extends 'layouts/admin_layout.html.twig' %}

{% block title %}Gestion Technique & Évolution - LUXIM{% endblock %}

{% block stylesheets %}
    {{ parent() }}
    <style>
        /* Miller Columns Layout */
        .miller-container { 
            height: calc(100vh - 180px); 
            min-height: 600px; 
            display: flex;
            flex-direction: column;
            background: #f8f9fa;
        }
        
        /* Gestion des lignes */
        .row-programmes { flex: 0 0 auto; background: #fff; }
        .row-details { flex: 1 1 auto; overflow: hidden; } /* Empêche le scroll global pour activer le scroll par colonne */

        /* Chaque colonne devient scrollable indépendamment */
        .miller-column { 
            height: 100%; 
            overflow-y: auto; 
            background: #fff; 
            border-right: 1px solid #dee2e6;
        }
        
        .column-header { 
            position: sticky; 
            top: 0; 
            z-index: 10; 
            background: #f8f9fa; 
            border-bottom: 1px solid #dee2e6; 
            padding: 0.8rem 1rem; 
        }
        
        /* Items Styling */
        .clickable-item { cursor: pointer; border-left: 4px solid transparent; transition: all 0.2s; border-bottom: 1px solid #f1f1f1; }
        .clickable-item:hover { background-color: rgba(44, 123, 229, 0.05); }
        .clickable-item.active { 
            background-color: #f0f7ff !important; 
            border-left-color: #2c7be5 !important; 
            font-weight: 500;
        }

        /* Visuels Projets */
        .project-img-container { width: 40px; height: 40px; border-radius: 8px; overflow: hidden; background: #eee; flex-shrink: 0; }
        .progress-thin { height: 6px; border-radius: 10px; background-color: #eee; }
        .loader-sm { width: 1.2rem; height: 1.2rem; }
        
        /* Personnalisation Scrollbar pour un look "App" */
        .miller-column::-webkit-scrollbar { width: 5px; }
        .miller-column::-webkit-scrollbar-track { background: #f1f1f1; }
        .miller-column::-webkit-scrollbar-thumb { background: #ccc; border-radius: 10px; }
        .miller-column::-webkit-scrollbar-thumb:hover { background: #bbb; }

        /* Animation de mise à jour */
        @keyframes pulse-update {
            0% { opacity: 1; }
            50% { opacity: 0.5; }
            100% { opacity: 1; }
        }
        .sync-flash { animation: pulse-update 0.8s ease-in-out; }
    </style>
{% endblock %}

{% block content %}
<div class="d-flex justify-content-between align-items-center mb-4">
    <div>
        <h3 class="page-header page-header-top mb-0">Suivi Technique</h3>
        <p class="text-muted small mb-0">
            <i class="fas fa-hard-hat me-1 text-warning"></i> Suivi en temps réel de l'avancement des chantiers.
        </p>
    </div>
    <div class="d-flex gap-2">
        <button type="button" class="btn btn-login shadow-sm px-3 d-flex align-items-center" onclick="window.location.reload()">
            <i class="fas fa-sync-alt me-2"></i>
            <span>Actualiser</span>
        </button>
    </div>
</div>

<div class="bg-white shadow-sm rounded border miller-container overflow-hidden">
    
    {# --- LIGNE 1 : PROGRAMMES --- #}
    <div class="row g-0 border-bottom row-programmes">
        <div class="col-12">
            <div class="column-header border-bottom-0">
                <h6 class="m-0 fw-bold text-primary text-uppercase small">1. Programmes ({{ projets|length }})</h6>
            </div>
            
            <div class="d-flex flex-nowrap p-2 gap-3" id="project-list" style="overflow-x: auto; white-space: nowrap; -webkit-overflow-scrolling: touch; padding-bottom: 12px !important;">
                {% for p in projets %}
                    <div class="clickable-item project-item p-2 border rounded shadow-sm flex-shrink-0 bg-white" 
                         style="width: 250px;"
                         data-id="{{ p.id }}" 
                         data-lot-url="{{ path('ajax_technique_lots', {id: p.id}) }}"
                         data-evol-url="{{ path('ajax_technique_projet_evolution', {id: p.id}) }}">
                        
                        <div class="d-flex align-items-center gap-2">
                            <div class="project-img-container border">
                                {% if p.imagePrincipale %}
                                    <img src="{{ asset('uploads/projets/' ~ p.imagePrincipale) }}" class="w-100 h-100 object-fit-cover">
                                {% else %}
                                    <div class="w-100 h-100 d-flex align-items-center justify-content-center bg-light">
                                        <i class="fas fa-image text-muted opacity-25 small"></i>
                                    </div>
                                {% endif %}
                            </div>
                            
                            <div class="flex-grow-1 min-w-0">
                                <div class="d-flex justify-content-between align-items-center mb-1">
                                    <span class="fw-bold text-dark text-truncate small" style="max-width: 140px;">{{ p.nom }}</span>
                                    <span class="badge bg-light text-primary border rounded-pill" style="font-size: 0.65rem;">{{ p.lots|length }} lots</span>
                                </div>
                                <div class="progress progress-thin">
                                    <div class="progress-bar bg-primary js-project-progress-bar" style="width: {{ p.avancement|default(0) }}%"></div>
                                </div>
                            </div>
                        </div>
                    </div>
                {% else %}
                    <div class="p-3 text-center text-muted w-100 small">Aucun projet trouvé.</div>
                {% endfor %}
            </div>
        </div>
    </div>

    {# --- LIGNE 2 : LOTS ET ÉVOLUTION (Scrollable) --- #}
    <div class="row g-0 row-details">
        {# COLONNE 2 : LOTS #}
        <div class="col-md-4 miller-column border-end bg-light-subtle">
            <div class="column-header">
                <h6 class="m-0 fw-bold text-primary text-uppercase small">2. Lots du projet</h6>
            </div>
            <div id="container-lots" class="p-2">
                <div class="h-100 d-flex flex-column align-items-center justify-content-center text-muted p-5 mt-4">
                    <i class="fas fa-arrow-up fa-2x mb-3 opacity-25"></i>
                    <p class="small text-center italic">Sélectionnez un programme pour voir ses lots.</p>
                </div>
            </div>
        </div>

        {# COLONNE 3 : EVOLUTION #}
        <div class="col-md-8 miller-column">
            <div class="column-header d-flex justify-content-between align-items-center">
                <h6 class="m-0 fw-bold text-primary text-uppercase small">3. Détails & Évolution</h6>
                <div id="evolution-loader" class="spinner-border text-primary loader-sm d-none" role="status"></div>
            </div>
            <div id="container-evolution" class="p-3">
                <div class="h-100 d-flex flex-column align-items-center justify-content-center text-muted p-5 mt-4">
                    <i class="fas fa-chart-line fa-3x mb-3 opacity-25"></i>
                    <p class="small text-center">Sélectionnez un élément pour afficher son avancement détaillé.</p>
                </div>
            </div>
        </div>
    </div>

</div>
{% endblock %}

{% block javascripts %}
    {{ parent() }}
    <script>
        document.addEventListener('DOMContentLoaded', function() {
            const containerLots = document.getElementById('container-lots');
            const containerEvol = document.getElementById('container-evolution');
            const evolLoader = document.getElementById('evolution-loader');

            // --- 1. CLIC SUR PROJET ---
            document.querySelectorAll('.project-item').forEach(item => {
                item.addEventListener('click', function() {
                    document.querySelectorAll('.project-item').forEach(i => i.classList.remove('active'));
                    this.classList.add('active');

                    // Loader Lots
                    containerLots.innerHTML = '<div class="p-5 text-center"><div class="spinner-border spinner-border-sm text-primary"></div></div>';
                    
                    fetch(this.dataset.lotUrl)
                        .then(r => r.text())
                        .then(html => {
                            containerLots.innerHTML = html;
                            attachLotEvents(); 
                        });

                    loadEvolution(this.dataset.evolUrl);
                });
            });

            // --- 2. CLIC SUR LOT ---
            function attachLotEvents() {
                document.querySelectorAll('.lot-item').forEach(item => {
                    item.addEventListener('click', function(e) {
                        e.preventDefault();
                        document.querySelectorAll('.lot-item').forEach(i => i.classList.remove('active'));
                        this.classList.add('active');
                        loadEvolution(this.dataset.evolUrl);
                    });
                });
            }

            // --- 3. CHARGEMENT ÉVOLUTION ---
            function loadEvolution(url) {
                evolLoader.classList.remove('d-none');
                fetch(url)
                    .then(r => r.text())
                    .then(html => {
                        containerEvol.innerHTML = html;
                        evolLoader.classList.add('d-none');
                        initStepsUpdateHandler();
                    })
                    .catch(err => {
                        containerEvol.innerHTML = '<div class="alert alert-danger m-3 small">Erreur de chargement des détails.</div>';
                        evolLoader.classList.add('d-none');
                    });
            }

            // --- 4. HANDLER MISE À JOUR ---
            function initStepsUpdateHandler() {
                const progressInputs = containerEvol.querySelectorAll('.update-progress-input');
                
                progressInputs.forEach(input => {
                    input.addEventListener('change', function() {
                        const url = this.dataset.updateUrl;
                        const value = parseInt(this.value);
                        
                        if (isNaN(value) || value < 0 || value > 100) return;

                        this.classList.add('opacity-50');
                        this.disabled = true;

                        fetch(url, {
                            method: 'POST',
                            headers: {
                                'Content-Type': 'application/json',
                                'X-Requested-With': 'XMLHttpRequest'
                            },
                            body: JSON.stringify({ pourcentage: value })
                        })
                        .then(response => response.json())
                        .then(data => {
                            if (data.success) {
                                // Mise à jour visuelle immédiate (CSS classes/widths)
                                updateUIAfterProgress(this, value, data);
                            }
                        })
                        .finally(() => {
                            this.classList.remove('opacity-50');
                            this.disabled = false;
                        });
                    });
                });
            }

            function updateUIAfterProgress(input, value, data) {
                const row = input.closest('.mb-4') || input.closest('.position-relative');
                if (!row) return;

                const progressBar = row.querySelector('.progress-bar');
                const timelineDot = row.querySelector('.rounded-circle');
                
                let colorClass = value >= 100 ? 'bg-success' : (value >= 50 ? 'bg-warning' : (value > 0 ? 'bg-primary' : 'bg-danger'));
                
                if(progressBar) {
                    progressBar.style.width = value + '%';
                    progressBar.className = 'progress-bar ' + colorClass;
                }
                if(timelineDot) {
                    timelineDot.className = 'position-absolute start-0 translate-middle-x rounded-circle shadow-sm ' + colorClass;
                }
                
                // Maj Global Header
                const globalText = document.getElementById('global-avancement-text');
                const globalBar = document.getElementById('global-progress-bar');
                if (globalText) globalText.innerText = data.newAvancementLot + '%';
                if (globalBar) {
                    globalBar.style.width = data.newAvancementLot + '%';
                    globalBar.classList.add('sync-flash');
                    setTimeout(() => globalBar.classList.remove('sync-flash'), 800);
                }

                // Maj Barre dans la liste des lots
                const activeLotBar = document.querySelector('.lot-item.active .progress-bar');
                if (activeLotBar) activeLotBar.style.width = data.newAvancementLot + '%';

                // Maj Barre dans la liste des projets
                const activeProjectBar = document.querySelector('.project-item.active .js-project-progress-bar');
                if (activeProjectBar && data.newAvancementProjet !== undefined) {
                    activeProjectBar.style.width = data.newAvancementProjet + '%';
                    activeProjectBar.classList.add('sync-flash');
                    setTimeout(() => activeProjectBar.classList.remove('sync-flash'), 800);
                }
            }
        });
    </script>
{% endblock %}