{# templates/client/dashboard/index.html.twig #}
{% extends 'layouts/client_layout.html.twig' %}

{% block title %}Mon Espace Client{% endblock %}


{% block content %}
<div class="container-fluid">
    {# --- EN-TÊTE BIENVENUE --- #}
    {# CORRECTION : On utilise .prenoms au lieu de .prenom #}
    <div class="row mb-4 align-items-center">
        <div class="col-md-8">
            <h2 class="fw-bold text-dark">Bienvenue, {{ app.user.prenoms }} {{ app.user.nom }} !</h2>
            <p class="text-muted mb-0">Suivez en temps réel l'évolution de votre patrimoine immobilier chez LUXIM.</p>
        </div>
        <div class="col-md-4 text-md-end">
            <span class="badge bg-soft-primary text-primary p-2 px-3">
                <i class="fa fa-calendar-alt me-2"></i>{{ "now"|date("d F Y")|trans }}
            </span>
        </div>
    </div>

    {# --- STATISTIQUES RAPIDES --- #}
    <div class="row g-4 mb-5">
        <div class="col-md-4">
            <div class="card border-0 shadow-sm p-3">
                <div class="d-flex align-items-center">
                    <div class="bg-soft-primary p-3 rounded-circle me-3">
                        <i class="fa fa-home text-primary fs-4"></i>
                    </div>
                    <div>
                        <h6 class="mb-0 text-muted small">Mes Biens</h6>
                        <h4 class="mb-0 fw-bold">{{ souscriptions|length }}</h4>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-md-4">
            <div class="card border-0 shadow-sm p-3">
                <div class="d-flex align-items-center">
                    <div class="bg-soft-success p-3 rounded-circle me-3" style="background-color: rgba(25, 135, 84, 0.1);">
                        <i class="fa fa-check-double text-success fs-4"></i>
                    </div>
                    <div>
                        <h6 class="mb-0 text-muted small">Dossiers Validés</h6>
                        {% set valides = 0 %}
                        {% for s in souscriptions %}
                            {% if s.statutDossier.value == 'VALIDE' %}{% set valides = valides + 1 %}{% endif %}
                        {% endfor %}
                        <h4 class="mb-0 fw-bold">{{ valides }}</h4>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-md-4">
            <div class="card border-0 shadow-sm p-3">
                <div class="d-flex align-items-center">
                    <div class="bg-soft-info p-3 rounded-circle me-3" style="background-color: rgba(13, 202, 240, 0.1);">
                        <i class="fa fa-file-invoice-dollar text-info fs-4"></i>
                    </div>
                    <div>
                        <h6 class="mb-0 text-muted small">Paiements validés</h6>
                        <h4 class="mb-0 fw-bold text-dark">
                            {% set totalPaye = 0 %}
                            {% for s in souscriptions %}{% set totalPaye = totalPaye + s.getMontantTotalPaye %}{% endfor %}
                            {{ totalPaye|number_format(0, ',', ' ') }} <small class="fs-6">FCFA</small>
                        </h4>
                    </div>
                </div>
            </div>
        </div>
    </div>

    {# --- LISTE DES SOUSCRIPTIONS --- #}
    <div class="card border-0 shadow-sm">
        <div class="card-header bg-white py-3 d-flex justify-content-between align-items-center">
            <h5 class="mb-0 fw-bold text-dark"><i class="fa fa-list-ul me-2 text-primary"></i>Mes Acquisitions Immobilières</h5>
            <span class="badge bg-light text-dark border">{{ souscriptions|length }} Dossier(s)</span>
        </div>
        <div class="table-responsive">
            <table class="table table-hover align-middle mb-0">
                <thead class="bg-light text-muted small text-uppercase">
                    <tr>
                        <th class="ps-4">Détails du Lot</th>
                        <th>Statut Dossier</th>
                        <th>Avancement Chantier</th>
                        <th>Situation Financière</th>
                        <th class="text-end pe-4">Actions</th>
                    </tr>
                </thead>
                <tbody>
                    {% for souscription in souscriptions %}
                        <tr>
                            <td class="ps-4 py-3">
                                <div class="d-flex align-items-center">
                                    <div class="rounded-3 bg-light d-flex align-items-center justify-content-center me-3" style="width: 45px; height: 45px;">
                                        <i class="fa fa-building text-primary"></i>
                                    </div>
                                    <div>
                                        {# CORRECTION : On utilise .nomBien de l'entité Lot #}
                                        <span class="fw-bold d-block text-dark">{{ souscription.lot.nomBien }}</span>
                                        <small class="text-muted"><i class="fa fa-map-marker-alt me-1"></i>{{ souscription.lot.projet.nom }}</small>
                                    </div>
                                </div>
                            </td>
                            <td>
                                {% set badge_class = 'bg-secondary' %}
                                {% if souscription.statutDossier.value == 'VALIDE' %}
                                    {% set badge_class = 'bg-success' %}
                                {% elseif souscription.statutDossier.value == 'BROUILLON' %}
                                    {% set badge_class = 'bg-warning text-dark' %}
                                {% elseif souscription.statutDossier.value == 'ANNULE' %}
                                    {% set badge_class = 'bg-danger' %}
                                {% endif %}
                                <span class="badge {{ badge_class }} px-2 py-1">{{ souscription.statutDossier.value }}</span>
                            </td>
                            <td>
                                <div class="d-flex align-items-center" style="max-width: 150px;">
                                    <div class="progress flex-grow-1 me-2" style="height: 6px; border-radius: 10px;">
                                        {# On utilise la méthode de logique métier de Souscription #}
                                        <div class="progress-bar bg-info" role="progressbar" 
                                             style="width: {{ souscription.evolutionChantier }}%" 
                                             aria-valuenow="{{ souscription.evolutionChantier }}" 
                                             aria-valuemin="0" aria-valuemax="100"></div>
                                    </div>
                                    <small class="fw-bold text-info">{{ souscription.evolutionChantier }}%</small>
                                </div>
                                <small class="text-muted x-small">Suivi technique</small>
                            </td>
                            <td>
                                <div class="d-flex align-items-center" style="max-width: 150px;">
                                    <div class="progress flex-grow-1 me-2" style="height: 6px; border-radius: 10px;">
                                        <div class="progress-bar bg-primary" role="progressbar" 
                                             style="width: {{ souscription.pourcentagePaiement }}%" 
                                             aria-valuenow="{{ souscription.pourcentagePaiement }}" 
                                             aria-valuemin="0" aria-valuemax="100"></div>
                                    </div>
                                    <small class="fw-bold text-primary">{{ souscription.pourcentagePaiement }}%</small>
                                </div>
                                <small class="text-muted x-small">Recouvrement</small>
                            </td>
                            <td class="text-end pe-4">
                                <div class="btn-group">
                                    <a href="#" class="btn btn-sm btn-outline-primary px-3 shadow-sm">
                                        <i class="fa fa-eye me-1"></i> Suivre
                                    </a>
                                    <button type="button" class="btn btn-sm btn-light border dropdown-toggle dropdown-toggle-split shadow-sm" data-bs-toggle="dropdown" aria-expanded="false">
                                        <span class="visually-hidden">Options</span>
                                    </button>
                                    <ul class="dropdown-menu dropdown-menu-end shadow-lg border-0">
                                        <li><a class="dropdown-item" href="#"><i class="fa fa-camera me-2 text-muted"></i>Photos du chantier</a></li>
                                        <li><a class="dropdown-item" href="#"><i class="fa fa-file-invoice me-2 text-muted"></i>Historique Paiements</a></li>
                                        <li><hr class="dropdown-divider"></li>
                                        <li><a class="dropdown-item text-primary" href="#"><i class="fa fa-download me-2"></i>Mes Documents</a></li>
                                    </ul>
                                </div>
                            </td>
                        </tr>
                    {% else %}
                        <tr>
                            <td colspan="5" class="text-center py-5">
                                <div class="py-4">
                                    <i class="fa fa-folder-open fa-3x text-light mb-3"></i>
                                    <h5 class="text-muted">Aucune souscription active</h5>
                                    <p class="text-muted small">Vous n'avez pas encore de dossier enregistré ou validé.</p>
                                    <a href="#" class="btn btn-primary btn-sm mt-2">Découvrir nos projets</a>
                                </div>
                            </td>
                        </tr>
                    {% endfor %}
                </tbody>
            </table>
        </div>
    </div>
</div>

<style>
    .bg-soft-primary { background-color: rgba(13, 110, 253, 0.1); }
    .x-small { font-size: 0.75rem; }
    .table-hover tbody tr:hover { background-color: rgba(13, 110, 253, 0.02); }
    .btn-group .btn { transition: all 0.2s; }
</style>
{% endblock %}