{# templates/commercial/portefeuille/tabs/contrat/index.html.twig #}
<div class="row">
    {# Section Gauche : Détails techniques du bien #}
    <div class="col-md-7">
        <div class="card border-0 shadow-sm mb-4">
            <div class="card-header bg-white py-3">
                <h6 class="mb-0 fw-bold text-dark">
                    <i class="fas fa-home me-2 text-primary"></i>Détails du Produit
                </h6>
            </div>
            <div class="card-body">
                <table class="table table-hover align-middle mb-0">
                    <tbody>
                        <tr>
                            <td class="text-muted border-0 w-40">Projet Immobilier</td>
                            <td class="fw-bold border-0 text-end">
                                {{ lot.projet ? lot.projet.nom : 'Non spécifié' }}
                            </td>
                        </tr>
                        <tr>
                            <td class="text-muted">Référence / Numéro</td>
                            <td class="text-end">
                                <span class="badge bg-dark px-3">Lot {{ lot.numeroLot }}</span>
                            </td>
                        </tr>
                        <tr>
                            <td class="text-muted">Superficie Terrain</td>
                            <td class="fw-bold text-end">
                                {{ lot.surfaceTerrain|number_format(2, ',', ' ') }} m²
                            </td>
                        </tr>
                        {% if lot.surfaceBatie %}
                        <tr>
                            <td class="text-muted">Surface Bâtie</td>
                            <td class="fw-bold text-end">
                                {{ lot.surfaceBatie|number_format(2, ',', ' ') }} m²
                            </td>
                        </tr>
                        {% endif %}
                        <tr>
                            <td class="text-muted">Type de bien</td>
                            <td class="text-end">
                                <span class="badge bg-info text-dark">
                                    {{ lot.typeBien ? lot.typeBien.libelle : 'N/A' }}
                                </span>
                            </td>
                        </tr>
                        <tr>
                            <td class="text-muted">Prix au m² (Négocié)</td>
                            <td class="text-end fw-bold text-primary">
                                {{ prixM2|number_format(0, ',', ' ') }} FCFA / m²
                            </td>
                        </tr>
                    </tbody>
                </table>
            </div>
        </div>

        {# Statut du lot : Utilisation sécurisée de l'Enum (Backing Value) #}
        <div class="alert alert-{% if lot.statut.value == 'VENDU' %}success{% else %}info{% endif %} border-0 shadow-sm d-flex align-items-center">
            <i class="fas fa-info-circle me-3 fa-lg"></i>
            <div>
                <small class="d-block text-uppercase fw-bold">Statut Actuel du Lot</small>
                <strong>{{ lot.statut.value|upper }}</strong>
            </div>
        </div>
    </div>

    {# Section Droite : Conditions Financières #}
    <div class="col-md-5">
        {# Carte du Prix Final #}
        <div class="card border-0 shadow-sm bg-primary text-white mb-4">
            <div class="card-body p-4 text-center">
                <h6 class="text-uppercase small opacity-75 mb-3 fw-bold">Prix de Vente Final</h6>
                <div class="display-6 fw-bold mb-1">
                    {{ souscription.prixFinal|number_format(0, ',', ' ') }}
                </div>
                <div class="small fw-light">FRANC CFA (FCFA)</div>
            </div>
        </div>

        {# Bilan Financier Détaillé #}
        <div class="card border-0 shadow-sm bg-light mb-4">
            <div class="card-body">
                <h6 class="fw-bold mb-3 text-secondary border-bottom pb-2">Bilan des Paiements (Validés)</h6>
                
                <div class="d-flex justify-content-between mb-2">
                    <span class="text-muted small">Total encaissé :</span>
                    <span class="fw-bold text-success small">
                        {{ dejaPaye|number_format(0, ',', ' ') }} FCFA
                    </span>
                </div>
                
                <div class="d-flex justify-content-between mb-3">
                    <span class="text-muted small">Reste à recouvrer :</span>
                    <span class="fw-bold text-danger small">
                        {{ resteAPayer|number_format(0, ',', ' ') }} FCFA
                    </span>
                </div>

                {# Barre de progression du recouvrement #}
                <div class="progress mb-3" style="height: 10px; border-radius: 5px;">
                    {% set pct_recouvrement = (souscription.prixFinal > 0) ? (dejaPaye / souscription.prixFinal * 100) : 0 %}
                    <div class="progress-bar bg-success" 
                         role="progressbar" 
                         style="width: {{ pct_recouvrement }}%" 
                         aria-valuenow="{{ pct_recouvrement }}" 
                         aria-valuemin="0" 
                         aria-valuemax="100">
                    </div>
                </div>
                <div class="text-center mb-3">
                    <small class="text-muted fw-bold">{{ pct_recouvrement|round(1) }}% du montant total réglé</small>
                </div>

                <hr class="text-muted">

                <div class="d-flex justify-content-between mb-2">
                    <span class="text-muted small">Date de souscription :</span>
                    <span class="fw-bold small">
                        <i class="far fa-calendar-alt me-1 text-primary"></i>
                        {{ souscription.dateSouscription ? souscription.dateSouscription|date('d/m/Y') : 'En attente' }}
                    </span>
                </div>

                {# Actions Documentaires #}
                <div class="d-grid gap-2 mt-4">
                    <a href="#" class="btn btn-outline-dark btn-sm shadow-sm">
                        <i class="fas fa-file-pdf me-2 text-danger"></i>Contrat de Réservation (PDF)
                    </a>
                    <a href="#" class="btn btn-outline-secondary btn-sm shadow-sm">
                        <i class="fas fa-print me-2 text-dark"></i>Imprimer Fiche de Stock
                    </a>
                </div>
            </div>
        </div>
    </div>
</div>