{# templates/commercial/portefeuille/tabs/chantier/index.html.twig #}
<div class="card border-0 shadow-sm">
    <div class="card-body p-4">
        <div class="d-flex align-items-center justify-content-between mb-4">
            <h6 class="fw-bold mb-0 text-dark">
                <i class="fas fa-tools me-2 text-primary"></i>Progression des travaux
            </h6>
            {# Affichage du pourcentage global calculé par le poids #}
            <div class="text-end">
                <span class="badge bg-primary px-3 py-2 fs-6">{{ pourcentage }}% Terminés</span>
            </div>
        </div>

        {# Barre de progression visuelle #}
        <div class="progress mb-5" style="height: 10px; border-radius: 5px;">
            <div class="progress-bar progress-bar-striped progress-bar-animated bg-success" 
                 role="progressbar" 
                 style="width: {{ pourcentage }}%" 
                 aria-valuenow="{{ pourcentage }}" 
                 aria-valuemin="0" 
                 aria-valuemax="100">
            </div>
        </div>

        {# Timeline des étapes #}
        <div class="position-relative ms-2 border-start ps-4" style="border-color: #e9ecef !important;">
            {% for le in etapes %}
                <div class="d-flex mb-4 position-relative">
                    {# Indicateur visuel sur la ligne de temps #}
                    <div class="position-absolute" style="left: -33px; top: 0;">
                        {% if le.estTerminee %}
                            <i class="fas fa-check-circle text-success bg-white fa-lg"></i>
                        {% else %}
                            <i class="fas fa-dot-circle text-light bg-white fa-lg"></i>
                        {% endif %}
                    </div>

                    <div class="flex-grow-1">
                        <div class="d-flex justify-content-between align-items-start">
                            <div>
                                <div class="fw-bold {{ not le.estTerminee ? 'text-muted' }} mb-0">
                                    {{ le.libelle }}
                                </div>
                                <small class="text-muted d-block">
                                    <i class="far fa-calendar-alt me-1"></i>
                                    {{ le.estTerminee and le.dateMaj ? 'Validé le ' ~ le.dateMaj|date('d/m/Y') : 'En attente de réalisation' }}
                                </small>
                            </div>
                            
                            {# Affichage du poids de l'étape pour justifier le pourcentage #}
                            <div class="text-end">
                                <span class="badge {{ le.estTerminee ? 'bg-light text-success' : 'bg-light text-muted' }} rounded-pill border">
                                    Poids : {{ le.poids }}
                                </span>
                            </div>
                        </div>

                        {# Si vous avez des images d'illustration du chantier #}
                        {% if le.imageIllustration %}
                            <div class="mt-2">
                                <a href="{{ asset('uploads/chantier/' ~ le.imageIllustration) }}" target="_blank">
                                    <img src="{{ asset('uploads/chantier/' ~ le.imageIllustration) }}" 
                                         class="img-thumbnail" style="max-height: 80px;" alt="Preuve travaux">
                                </a>
                            </div>
                        {% endif %}
                    </div>
                </div>
            {% else %}
                <div class="text-center py-4">
                    <i class="fas fa-tasks fa-3x text-light mb-3"></i>
                    <p class="text-muted">Aucune étape de chantier définie pour ce type de bien.</p>
                </div>
            {% endfor %}
        </div>
    </div>
</div>

<style>
    /* Style pour accentuer la ligne verticale de la timeline */
    .border-start {
        border-width: 3px !important;
    }
</style>