{% extends 'layouts/admin_layout.html.twig' %}

{% block title %}Gestion des Souscriptions{% endblock %}

{% block content %}
<div class="container-fluid shadow-sm p-4 bg-white rounded">
    {# EN-TÊTE #}
    <div class="d-flex justify-content-between align-items-center mb-4">
        <div>
            <h4 class="fw-bold mb-1"><i class="fas fa-check-double me-2 text-primary"></i>Gestion des Souscriptions</h4>
            <p class="text-muted small mb-0">Visualisez et validez les dossiers de réservation clients.</p>
        </div>
        <div class="d-flex gap-2">
             <form method="get" class="d-flex gap-2 align-items-center">
                <select name="statut" class="form-select form-select-sm border-secondary-subtle" onchange="this.form.submit()">
                    <option value="">Tous les statuts</option>
                    <option value="BROUILLON" {{ currentStatut == 'BROUILLON' ? 'selected' : '' }}>Brouillon</option>
                    <option value="VALIDE" {{ currentStatut == 'VALIDE' ? 'selected' : '' }}>Validé</option>
                    <option value="REJETE" {{ currentStatut == 'REJETE' ? 'selected' : '' }}>Rejeté</option>
                </select>
            </form>
        </div>
    </div>

    {# TABLEAU DES SOUSCRIPTIONS #}
    <div class="table-responsive">
        <table class="table align-middle border-bottom mb-0">
            <thead class="table-light">
                <tr class="small text-uppercase fw-bold text-secondary border-top">
                    <th class="ps-3" style="width: 50px;"></th>
                    <th>Client / Prospect</th>
                    <th>Lot Concerné</th>
                    <th>Agent</th>
                    <th>Statut Dossier</th>
                    <th class="text-end pe-3">Date Réception</th>
                </tr>
            </thead>
            <tbody id="accordionSouscriptions">
                {% for s in souscriptions %}
                    {# LIGNE PRINCIPALE #}
                    <tr class="clickable-row pointer" 
                        data-bs-toggle="collapse" 
                        data-bs-target="#detailSous{{ s.id }}" 
                        aria-expanded="false">
                        <td class="ps-3 text-center">
                            <i class="fas fa-chevron-right text-muted transition-icon"></i>
                        </td>
                        <td>
                            <div class="fw-bold text-dark">{{ s.client.nom }} {{ s.client.prenoms }}</div>
                            <div class="text-muted small">{{ s.client.email }}</div>
                        </td>
                        <td>
                            <span class="text-primary small fw-medium">{{ s.lot.projet.nom }}</span>
                            <div class="small fw-bold">Lot {{ s.lot.numeroLot }}</div>
                        </td>
                        <td>
                            {% if s.agent %}
                                <div class="small"><i class="fas fa-user-tie me-1 text-muted"></i>{{ s.agent.nom }}</div>
                            {% else %}
                                <span class="badge bg-light text-warning border border-warning-subtle x-small">Non assigné</span>
                            {% endif %}
                        </td>
                        <td>
                            {% set status = s.statutDossier.value|default(s.statutDossier) %}
                            <span class="badge rounded-pill x-small border {{ status == 'VALIDE' ? 'bg-success-soft text-success border-success' : (status == 'REJETE' ? 'bg-danger-soft text-danger border-danger' : 'bg-info-soft text-info border-info') }}">
                                {{ status }}
                            </span>
                        </td>
                        <td class="text-end pe-3 small">
                            {{ s.dateSouscription|date('d/m/Y') }}<br>
                            <span class="text-muted">{{ s.dateSouscription|date('H:i') }}</span>
                        </td>
                    </tr>

                    {# LIGNE DE DÉTAIL (ACCORDÉON) #}
                    <tr class="collapse-row">
                        <td colspan="6" class="p-0 border-0">
                            <div class="collapse bg-white border-start border-end border-primary border-4 shadow-inner" 
                                 id="detailSous{{ s.id }}" 
                                 data-bs-parent="#accordionSouscriptions">
                                <div class="p-3">
                                    {# ONGLETS INTERNES #}
                                    <ul class="nav nav-tabs nav-fill mb-3" id="tabSous{{ s.id }}" role="tablist">
                                        <li class="nav-item">
                                            <button class="nav-link active small fw-bold" data-bs-toggle="tab" data-bs-target="#infos{{ s.id }}">
                                                <i class="fas fa-user-check me-1"></i> État Civil & Lot
                                            </button>
                                        </li>
                                        <li class="nav-item">
                                            <button class="nav-link small fw-bold" data-bs-toggle="tab" data-bs-target="#docs{{ s.id }}">
                                                <i class="fas fa-folder-open me-1"></i> Pièces Jointes
                                            </button>
                                        </li>
                                        <li class="nav-item">
                                            <button class="nav-link small fw-bold text-danger" data-bs-toggle="tab" data-bs-target="#action{{ s.id }}">
                                                <i class="fas fa-gavel me-1"></i> Décision Admin
                                            </button>
                                        </li>
                                    </ul>

                                    <div class="tab-content p-3 border rounded">
                                        {# Onglet Infos #}
                                        <div class="tab-pane fade show active" id="infos{{ s.id }}">
                                            <div class="row">
                                                <div class="col-md-6">
                                                    <h6 class="x-small text-muted mb-2">Détails de l'Acquéreur</h6>
                                                    <table class="table table-sm table-borderless small">
                                                        <tr><td class="text-muted">Civilité :</td><td class="fw-bold">{{ s.client.civilite }}</td></tr>
                                                        <tr><td class="text-muted">Téléphone :</td><td class="fw-bold">{{ s.client.telephone }}</td></tr>
                                                        <tr><td class="text-muted">Mode Financement :</td><td class="fw-bold text-primary">{{ s.modeFinancement|default('Non défini') }}</td></tr>
                                                    </table>
                                                </div>
                                                <div class="col-md-6">
                                                    <h6 class="x-small text-muted mb-2">Détails Financiers du Bien</h6>
                                                    <div class="p-2 bg-light rounded border">
                                                        <div class="d-flex justify-content-between">
                                                            <span class="small">Prix du Lot :</span>
                                                            <span class="fw-bold">{{ s.prixFinal|number_format(0,'.',' ') }} FCFA</span>
                                                        </div>
                                                        <div class="d-flex justify-content-between text-success">
                                                            <span class="small">Apport initial :</span>
                                                            <span class="fw-bold">- {{ (s.prixFinal * 0.1)|number_format(0,'.',' ') }} FCFA</span>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>

                                        {# Onglet Documents #}
                                        <div class="tab-pane fade" id="docs{{ s.id }}">
                                            <div class="alert alert-light border small">
                                                <i class="fas fa-info-circle me-2"></i> Documents liés à ce dossier (CNI, Attestations, etc.)
                                            </div>
                                            <div class="d-flex gap-3">
                                                {# Simulation de documents #}
                                                <div class="text-center p-2 border rounded pointer bg-light-subtle" style="width: 100px;">
                                                    <i class="fas fa-file-pdf fa-2x text-danger mb-1"></i>
                                                    <div class="x-small fw-bold">PIECE_ID.pdf</div>
                                                </div>
                                            </div>
                                        </div>

                                        {# Onglet Action #}
                                        <div class="tab-pane fade" id="action{{ s.id }}">
                                            <div class="d-flex justify-content-center gap-3">
                                                {% if status == 'BROUILLON' %}
                                                    <form action="{{ path('app_admin_souscription_approuver', {id: s.id}) }}" method="POST">
                                                        <button class="btn btn-success btn-sm px-4 shadow-sm">
                                                            <i class="fas fa-check-circle me-2"></i>Approuver la réservation
                                                        </button>
                                                    </form>
                                                    <form action="{{ path('app_admin_souscription_rejeter', {id: s.id}) }}" method="POST">
                                                        <button class="btn btn-outline-danger btn-sm px-4">
                                                            <i class="fas fa-times-circle me-2"></i>Rejeter le dossier
                                                        </button>
                                                    </form>
                                                {% else %}
                                                    <div class="text-muted fst-italic">
                                                        Dossier déjà traité le {{ s.dateSouscription|date('d/m/Y') }}
                                                    </div>
                                                {% endif %}
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </td>
                    </tr>
                {% else %}
                    <tr><td colspan="6" class="text-center py-5 text-muted">Aucune souscription à traiter.</td></tr>
                {% endfor %}
            </tbody>
        </table>
    </div>
</div>

<style>
    /* Intégration de vos styles spécifiques */
    .bg-info-soft { background-color: #e0f7fa; color: #00acc1; }
    .bg-success-soft { background-color: #e8fadf; color: #198754; }
    .bg-danger-soft { background-color: #ffe5e5; color: #dc3545; }
    .bg-warning-soft { background-color: #fff3e0; color: #ef6c00; }
    
    .x-small { font-size: 10px; text-transform: uppercase; font-weight: 800; letter-spacing: 0.5px; }
    
    .nav-tabs .nav-link.active {
        background-color: #0d6efd !important;
        color: white !important;
        border: none;
    }
    
    .clickable-row[aria-expanded="true"] { 
        background-color: #f0f7ff !important; 
        border-left: 4px solid #0d6efd; 
    }
    
    .clickable-row[aria-expanded="true"] .transition-icon { 
        transform: rotate(90deg); 
        color: #0d6efd !important; 
    }
    
    .shadow-inner { box-shadow: inset 0 3px 10px rgba(0,0,0,0.05); }
    .pointer { cursor: pointer; }
    .transition-icon { transition: all 0.3s ease; }
</style>
{% endblock %}