{# templates/shared/lot/_lot_details.html.twig #}

{# 1. Navigation par onglets (Pills) #}
<ul class="nav nav-pills mb-3 gap-2" id="tabLot{{ lot.id }}" role="tablist">
    <li class="nav-item" role="presentation">
        <button class="nav-link active btn-sm" data-bs-toggle="tab" data-bs-target="#carac{{ lot.id }}" type="button">
            <i class="fas fa-info-circle me-1"></i> Fiche Technique
        </button>
    </li>
    <li class="nav-item" role="presentation">
        <button class="nav-link btn-sm" data-bs-toggle="tab" data-bs-target="#acq{{ lot.id }}" type="button">
            <i class="fas fa-user me-1"></i> Client
        </button>
    </li>
    <li class="nav-item" role="presentation">
        <button class="nav-link btn-sm" data-bs-toggle="tab" data-bs-target="#finance{{ lot.id }}" type="button">
            <i class="fas fa-coins me-1"></i> Finances
        </button>
    </li>
    <li class="nav-item" role="presentation">
        <button class="nav-link btn-sm" data-bs-toggle="tab" data-bs-target="#docs{{ lot.id }}" type="button">
            <i class="fas fa-file-pdf me-1 text-danger"></i> Documents
        </button>
    </li>
    <li class="nav-item" role="presentation">
        <button class="nav-link btn-sm" data-bs-toggle="tab" data-bs-target="#photos{{ lot.id }}" type="button">
            <i class="fas fa-camera me-1 text-warning"></i> Photos
        </button>
    </li>
</ul>

{# 2. Contenu des onglets #}
<div class="tab-content card border-0 shadow-sm p-3" id="tabContentLot{{ lot.id }}">
    
    {# --- ONGLET : FICHE TECHNIQUE --- #}
    <div class="tab-pane fade show active" id="carac{{ lot.id }}" role="tabpanel">
        <div class="row align-items-center">
            <div class="col-md-12">
                <div class="row g-3">
                    <div class="col-sm-3">
                        <label class="text-muted x-small d-block">Surface Terrain</label>
                        <span class="fw-bold text-dark">{{ lot.surfaceTerrain|number_format(0, ',', ' ') }} m²</span>
                    </div>
                    <div class="col-sm-3">
                        <label class="text-muted x-small d-block">Surface Bâtie</label>
                        <span class="fw-bold text-dark">{{ lot.surfaceBatie|default('0') }} m²</span>
                    </div>
                    <div class="col-sm-3">
                        <label class="text-muted x-small d-block">Type de bien</label>
                        <span class="text-dark fw-medium">{{ lot.typeBien ? lot.typeBien.libelle : 'Non défini' }}</span>
                    </div>
                    <div class="col-sm-3">
                        <label class="text-muted x-small d-block">ID Système</label>
                        <span class="badge bg-secondary-subtle text-secondary border">#{{ lot.id }}</span>
                    </div>
                </div>
            </div>
        </div>
    </div>

    {# --- ONGLET : CLIENT / ACQUÉREUR --- #}
    <div class="tab-pane fade" id="acq{{ lot.id }}" role="tabpanel">
        {% if lot.souscription and lot.souscription.client %}
            <div class="d-flex align-items-center p-2">
                <div class="avatar-circle me-3">
                    {{ lot.souscription.client.prenoms|slice(0,1)|upper }}{{ lot.souscription.client.nom|slice(0,1)|upper }}
                </div>
                <div>
                    <h6 class="mb-0 fw-bold text-primary">{{ lot.souscription.client.nom }} {{ lot.souscription.client.prenoms }}</h6>
                    <div class="text-muted small">
                        <i class="fas fa-phone-alt me-1 opacity-50"></i> {{ lot.souscription.client.telephone }}
                        <span class="mx-2">|</span>
                        <i class="fas fa-envelope me-1 opacity-50"></i> {{ lot.souscription.client.email|default('Pas d\'email') }}
                    </div>
                </div>
                <div class="ms-auto">
                    <a href="#" class="btn btn-light btn-sm border">Voir dossier client</a>
                </div>
            </div>
        {% else %}
            <div class="text-center py-4 text-muted">
                <i class="fas fa-user-slash fa-2x mb-2 opacity-25"></i>
                <p class="small mb-0 fst-italic">Aucun acquéreur n'est actuellement lié à ce lot.</p>
            </div>
        {% endif %}
    </div>

    {# --- ONGLET : FINANCE --- #}
    <div class="tab-pane fade" id="finance{{ lot.id }}" role="tabpanel">
        {% if lot.souscription %}
            <div class="row g-3">
                <div class="col-md-4">
                    <div class="p-3 border rounded bg-light">
                        <div class="x-small text-muted mb-1">Prix de Vente</div>
                        <div class="h5 fw-bold mb-0 text-dark">{{ lot.souscription.prixFinal|number_format(0, '.', ' ') }} <small>FCFA</small></div>
                    </div>
                </div>
                <div class="col-md-4">
                    <div class="p-3 border border-success-subtle rounded bg-success-subtle">
                        <div class="x-small text-success mb-1">Montant Encaissé</div>
                        <div class="h5 fw-bold mb-0 text-success">{{ lot.souscription.getMontantTotalPaye()|number_format(0, '.', ' ') }} <small>FCFA</small></div>
                    </div>
                </div>
                <div class="col-md-4">
                    <div class="p-3 border border-danger-subtle rounded bg-danger-subtle">
                        <div class="x-small text-danger mb-1">Reste à Recouvrer</div>
                        <div class="h5 fw-bold mb-0 text-danger">{{ lot.souscription.getResteAPayer()|number_format(0, '.', ' ') }} <small>FCFA</small></div>
                    </div>
                </div>
            </div>
        {% else %}
            <div class="alert alert-warning d-flex align-items-center border-0 mb-0 shadow-sm" role="alert">
                <i class="fas fa-exclamation-triangle me-3 fa-lg"></i>
                <div>
                    Les données financières seront générées après la <strong>souscription</strong>.
                </div>
            </div>
        {% endif %}
    </div>

    {# --- ONGLET : DOCUMENTS --- #}
    <div class="tab-pane fade" id="docs{{ lot.id }}" role="tabpanel">
        {{ render(path('doc_inline_display', {'targetType': 'LOT_DOC', 'targetId': lot.id  })) }}
    </div>

    {# --- ONGLET : PHOTOS --- #}
    <div class="tab-pane fade" id="photos{{ lot.id }}" role="tabpanel">
        {{ render(path('doc_inline_display', {'targetType': 'LOT_IMG', 'targetId': lot.id  })) }}
    </div>

</div>

<style>
    .x-small { font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.5px; }
    .avatar-circle {
        width: 45px; height: 45px; background-color: #4e73df; color: white;
        border-radius: 50%; display: flex; align-items: center; justify-content: center;
        font-weight: bold; font-size: 0.9rem;
    }
    .border-dashed { border-style: dashed !important; }
</style>