{# templates/admin/projet/modals/_show_lot.html.twig #}
<div class="modal fade" id="modalShowLot{{ lot.id }}" tabindex="-1" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered modal-lg">
        <div class="modal-content border-0 shadow-lg">
            <div class="modal-header bg-primary text-white">
                <h5 class="modal-title fw-bold">
                    <i class="fas fa-info-circle me-2"></i>Détails du Lot {{ lot.numeroLot }}
                </h5>
                <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            
            <div class="modal-body p-0">
                {# Header du bien #}
                <div class="p-4 bg-light border-bottom">
                    <div class="row align-items-center">
                        <div class="col-md-8">
                            <h3 class="fw-bold text-dark mb-1">{{ lot.nomBien }}</h3>
                            <p class="text-muted mb-0">
                                <i class="fas fa-map-marker-alt me-1"></i> 
                                Îlot : {{ lot.ilot|default('N/A') }} — N° {{ lot.numeroLot }}
                            </p>
                        </div>
                        <div class="col-md-4 text-md-end">
                            <h4 class="fw-bold text-primary mb-0">{{ lot.prixStandard|number_format(0, '.', ' ') }} <small>FCFA</small></h4>
                            <span class="badge rounded-pill bg-white border text-dark mt-2">
                                {{ lot.typeBien ? lot.typeBien.libelle : 'Type non défini' }}
                            </span>
                        </div>
                    </div>
                </div>

                <div class="p-4">
                    <div class="row g-4">
                        {# Colonne Gauche : Caractéristiques techniques #}
                        <div class="col-md-6">
                            <h6 class="text-uppercase fw-bold small text-muted mb-3">Spécifications</h6>
                            <ul class="list-group list-group-flush">
                                <li class="list-group-item d-flex justify-content-between px-0">
                                    <span class="text-muted">Surface Terrain</span>
                                    <span class="fw-bold">{{ lot.surfaceTerrain }} m²</span>
                                </li>
                                {% if lot.surfaceBatie %}
                                <li class="list-group-item d-flex justify-content-between px-0">
                                    <span class="text-muted">Surface Bâtie</span>
                                    <span class="fw-bold">{{ lot.surfaceBatie }} m²</span>
                                </li>
                                {% endif %}
                                <li class="list-group-item d-flex justify-content-between px-0">
                                    <span class="text-muted">Statut Actuel</span>
                                    <span class="badge {{ lot.statut.value == 'DISPONIBLE' ? 'bg-success' : (lot.statut.value == 'VENDU' ? 'bg-danger' : 'bg-warning') }}">
                                        {{ lot.statut.value|default(lot.statut) }}
                                    </span>
                                </li>
                            </ul>
                        </div>

                        {# Colonne Droite : Aménagements #}
                        <div class="col-md-6 border-start ps-md-4">
                            <h6 class="text-uppercase fw-bold small text-muted mb-3">Composition du bien</h6>
                            <div class="row g-2 text-center">
                                <div class="col-4">
                                    <div class="p-2 border rounded bg-light">
                                        <i class="fas fa-door-open d-block mb-1 text-primary"></i>
                                        <small class="d-block text-muted">Pièces</small>
                                        <span class="fw-bold">{{ lot.nbPieces|default('0') }}</span>
                                    </div>
                                </div>
                                <div class="col-4">
                                    <div class="p-2 border rounded bg-light">
                                        <i class="fas fa-bed d-block mb-1 text-primary"></i>
                                        <small class="d-block text-muted">Chambres</small>
                                        <span class="fw-bold">{{ lot.nbChambres|default('0') }}</span>
                                    </div>
                                </div>
                                <div class="col-4">
                                    <div class="p-2 border rounded bg-light">
                                        <i class="fas fa-bath d-block mb-1 text-primary"></i>
                                        <small class="d-block text-muted">Salles d'eau</small>
                                        <span class="fw-bold">{{ lot.nbSallesEau|default('0') }}</span>
                                    </div>
                                </div>
                            </div>

                            <div class="mt-4">
                                <h6 class="text-uppercase fw-bold small text-muted mb-2">Commodités</h6>
                                <div class="d-flex flex-wrap gap-1">
                                    {% if lot.commoditesInternes is iterable and lot.commoditesInternes|length > 0 %}
                                        {% for commodite in lot.commoditesInternes %}
                                            <span class="badge bg-info-subtle text-info border border-info-subtle rounded-pill">
                                                <i class="fas fa-check small me-1"></i> {{ commodite }}
                                            </span>
                                        {% endfor %}
                                    {% else %}
                                        <small class="text-muted italic">Aucune commodité renseignée</small>
                                    {% endif %}
                                </div>
                            </div>
                        </div>
                    </div>

                    {% if lot.batiment or lot.etage %}
                    <div class="mt-4 p-3 bg-light rounded border border-dashed">
                        <i class="fas fa-building me-2 text-secondary"></i>
                        Localisation : <strong>{{ lot.batiment|default('N/A') }}</strong> 
                        {% if lot.etage %}— Étage : <strong>{{ lot.etage }}</strong>{% endif %}
                    </div>
                    {% endif %}
                </div>
            </div>
            
            <div class="modal-footer bg-light border-0">
                <button type="button" class="btn btn-secondary px-4" data-bs-dismiss="modal">Fermer</button>
                <button class="btn btn-warning fw-bold px-4 shadow-sm" 
                        data-bs-toggle="modal" 
                        data-bs-target="#modalEditLot{{ lot.id }}">
                    <i class="fas fa-edit me-1"></i> Modifier ce lot
                </button>
            </div>
        </div>
    </div>
</div>