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

{% block title %}Tableau de Bord Décisionnel - GPIM{% endblock %}

{% block stylesheets %}
    {{ parent() }}
    <style>
        .main-content-inner { max-width: 100%; overflow-x: hidden; background: #f8f9fa; }
        
        /* KPI Cards */
        .stat-card {
            border: none;
            border-radius: 15px;
            transition: transform 0.3s ease;
            box-shadow: 0 4px 20px rgba(0,0,0,0.05);
        }
        .stat-card:hover { transform: translateY(-5px); }
        .icon-shape {
            width: 48px;
            height: 48px;
            background-position: center;
            border-radius: 12px;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        /* Chart Heights */
        .chart-container { position: relative; height: 300px; width: 100%; }
        
        /* Table Custom */
        .table-custom thead { background: #f1f5f9; }
        .table-custom th { font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.025em; border: none; }
        
        .bg-gradient-primary { background: linear-gradient(87deg, #5e72e4 0, #825ee4 100%); }
        .bg-gradient-success { background: linear-gradient(87deg, #2dce89 0, #2dcecc 100%); }
        .bg-gradient-info { background: linear-gradient(87deg, #11cdef 0, #1171ef 100%); }
        .bg-gradient-warning { background: linear-gradient(87deg, #fb6340 0, #fbb140 100%); }
        
        /* Soft Badges */
        .badge-success-soft { background-color: #e6fffa; color: #38b2ac; }
        .badge-warning-soft { background-color: #fffaf0; color: #ed8936; }
    </style>
{% endblock %}

{% block content %}
<div class="">
    <div class="container-fluid py-4">
        
        {# HEADER & FILTRE RAPIDE #}
        <div class="d-flex justify-content-between align-items-center mb-4">
            <div>
                <h3 class="page-header page-header-top mb-1">Pilotage Stratégique</h3>
                <p class="text-muted">Vue d'ensemble de l'activité au {{ "now"|date("d/m/Y H:i") }}</p>
            </div>
            <div class="d-flex gap-2">
                <select id="filterProgramme" class="form-select form-select-sm shadow-sm border-0" style="width: 200px;">
    <option value="">Tous les programmes</option>
    {% for p in programmes %}
        <option value="{{ p.id }}" {{ app.request.query.get('programme') == p.id ? 'selected' : '' }}>
            {{ p.nom }}
        </option>
    {% endfor %}
</select>
                <button class="btn btn-white btn-sm shadow-sm"><i class="fas fa-download me-2"></i>Rapport PDF</button>
            </div>
        </div>

        {# 1. ALERTES CRITIQUES (Dossiers Orphelins) #}
        {% if souscriptions_orphelines|length > 0 %}
        <div class="alert alert-custom bg-white border-start border-danger border-4 shadow-sm mb-4">
            <div class="d-flex align-items-center justify-content-between">
                <div class="d-flex align-items-center">
                    <div class="icon-shape bg-light-danger text-danger me-3">
                        <i class="fas fa-user-clock fa-lg"></i>
                    </div>
                    <div>
                        <h6 class="mb-0 fw-bold text-danger">{{ souscriptions_orphelines|length }} Nouveaux prospects en attente d'affectation</h6>
                        <small class="text-muted">Ces clients ont souscrit en ligne mais n'ont pas encore de commercial attitré.</small>
                    </div>
                </div>
                <button class="btn btn-danger btn-sm rounded-pill px-4" data-bs-toggle="modal" data-bs-target="#modalAffectation">Gérer</button>
            </div>
        </div>
        {% endif %}

        {# 2. KPI FINANCIERS ET STOCK #}
        <div class="row g-4 mb-4">
            <div class="col-md-3">
                <div class="card stat-card p-3">
                    <div class="d-flex justify-content-between">
                        <div>
                            <span class="text-muted small fw-bold">CHIFFRE D'AFFAIRES (CA)</span>
                            <h3 class="fw-bold mb-0 mt-1">{{ kpi.caGlobal|number_format(0, ',', ' ') }} <small>FCFA</small></h3>
                        </div>
                        <div class="icon-shape bg-gradient-primary text-white shadow-primary">
                            <i class="fas fa-coins"></i>
                        </div>
                    </div>
                    <p class="mb-0 mt-2 text-sm">
                        <span class="text-success fw-bold"><i class="fa fa-arrow-up"></i> +3.4%</span>
                        <span class="text-muted"> vs mois dernier</span>
                    </p>
                </div>
            </div>
            <div class="col-md-3">
                <div class="card stat-card p-3">
                    <div class="d-flex justify-content-between">
                        <div>
                            <span class="text-muted small fw-bold">TAUX DE RECOUVREMENT</span>
                            <h3 class="fw-bold mb-0 mt-1">{{ kpi.tauxRecouvrement|default(0)|round }}%</h3>
                        </div>
                        <div class="icon-shape bg-gradient-success text-white">
                            <i class="fas fa-hand-holding-usd"></i>
                        </div>
                    </div>
                    <div class="progress mt-3" style="height: 6px;">
                        <div class="progress-bar bg-success" style="width: {{ kpi.tauxRecouvrement }}%"></div>
                    </div>
                </div>
            </div>
            <div class="col-md-3">
                <div class="card stat-card p-3">
                    <div class="d-flex justify-content-between">
                        <div>
                            <span class="text-muted small fw-bold">STOCK DISPONIBLE</span>
                            <h3 class="fw-bold mb-0 mt-1">{{ kpi.lotsDisponibles }} / {{ kpi.totalLots }}</h3>
                        </div>
                        <div class="icon-shape bg-gradient-info text-white">
                            <i class="fas fa-home"></i>
                        </div>
                    </div>
                    <p class="mb-0 mt-2 text-sm text-muted">Lots non réservés</p>
                </div>
            </div>
            <div class="col-md-3">
                <div class="card stat-card p-3">
                    <div class="d-flex justify-content-between">
                        <div>
                            <span class="text-muted small fw-bold">ARRIÉRÉS DE PAIEMENT</span>
                            <h3 class="fw-bold mb-0 mt-1 text-danger">{{ kpi.montantImpayes|number_format(0, ',', ' ') }}</h3>
                        </div>
                        <div class="icon-shape bg-gradient-warning text-white">
                            <i class="fas fa-exclamation-circle"></i>
                        </div>
                    </div>
                    <p class="mb-0 mt-2 text-sm text-muted">Relances à effectuer</p>
                </div>
            </div>
        </div>

        {# 3. ANALYSE GRAPHIQUE #}
        <div class="row g-4 mb-4">
            <div class="col-xl-8">
                <div class="card border-0 shadow-sm">
                    <div class="card-header bg-white border-0 py-3 d-flex justify-content-between align-items-center">
                        <h6 class="mb-0 fw-bold">Evolution des Encaissements vs Prévisions</h6>
                        <ul class="nav nav-pills nav-pills-sm border-0">
                            <li class="nav-item"><a class="nav-link active py-1 px-3 small" href="#">Mensuel</a></li>
                            <li class="nav-item"><a class="nav-link py-1 px-3 small" href="#">Annuel</a></li>
                        </ul>
                    </div>
                    <div class="card-body">
                        <div class="chart-container">
                            <canvas id="chartFinanceDecisive"></canvas>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-xl-4">
                <div class="card border-0 shadow-sm h-100">
                    <div class="card-header bg-white border-0 py-3">
                        <h6 class="mb-0 fw-bold">Répartition du Stock par Statut</h6>
                    </div>
                    <div class="card-body d-flex flex-column justify-content-center">
                        <div class="chart-container" style="height: 200px;">
                            <canvas id="chartStockStatus"></canvas>
                        </div>
                        <div class="mt-4">
                            <div class="d-flex justify-content-between small mb-1">
                                <span><i class="fas fa-circle text-primary me-2"></i>Vendus</span>
                                <span class="fw-bold">{{ kpi.percentVendu }}%</span>
                            </div>
                            <div class="d-flex justify-content-between small mb-1">
                                <span><i class="fas fa-circle text-success me-2"></i>Disponibles</span>
                                <span class="fw-bold">{{ kpi.percentDispo }}%</span>
                            </div>
                            <div class="d-flex justify-content-between small">
                                <span><i class="fas fa-circle text-warning me-2"></i>Réservés</span>
                                <span class="fw-bold">{{ kpi.percentReserve }}%</span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        {# 4. DERNIÈRES OPÉRATIONS #}
        <div class="row">
            <div class="col-12">
                <div class="card border-0 shadow-sm">
                    <div class="card-header bg-white border-0 py-3 d-flex justify-content-between">
                        <h6 class="mb-0 fw-bold">Flux de trésorerie récent (Paiements)</h6>
                        <a href="#" class="btn btn-sm btn-outline-primary rounded-pill">Voir tout</a>
                    </div>
                    <div class="table-responsive">
                        <table class="table table-custom align-middle mb-0">
                            <thead>
                                <tr>
                                    <th class="ps-4">Date</th>
                                    <th>Client / Lot</th>
                                    <th>Mode</th>
                                    <th>Montant</th>
                                    <th>Statut</th>
                                    <th class="text-end pe-4">Justificatif</th>
                                </tr>
                            </thead>
                            <tbody>
                                {% for p in derniers_paiements %}
                                <tr>
                                    <td class="ps-4 small">{{ p.datePaiement|date('d/m/Y') }}</td>
                                    <td>
                                        <div class="fw-bold text-dark">{{ p.souscription.client.nom }}</div>
                                        <div class="small text-muted">{{ p.souscription.lot.numeroLot }}</div>
                                    </td>
                                    {# CORRECTION ENUM ICI #}
                                    <td><span class="badge bg-light text-dark border">{{ p.moyenPaiement.getLabel() }}</span></td>
                                    <td class="fw-bold text-dark">{{ p.montant|number_format(0, ',', ' ') }}</td>
                                    <td>
                                        {% if p.estValide %}
                                            <span class="badge badge-success-soft"><i class="fa fa-check me-1"></i> Validé</span>
                                        {% else %}
                                            <span class="badge badge-warning-soft"><i class="fa fa-clock me-1"></i> En attente</span>
                                        {% endif %}
                                    </td>
                                    <td class="text-end pe-4">
                                        {% if p.preuveUrl %}
                                            <a href="{{ p.preuveUrl }}" target="_blank" class="btn btn-sm btn-light">
                                                <i class="fa fa-file-download text-primary"></i>
                                            </a>
                                        {% else %}
                                            <span class="text-muted small">N/A</span>
                                        {% endif %}
                                    </td>
                                </tr>
                                {% endfor %}
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

{# MODALE D'AFFECTATION #}
<div class="modal fade" id="modalAffectation" tabindex="-1">
    <div class="modal-dialog modal-lg">
        <div class="modal-content border-0 shadow">
            <div class="modal-header bg-danger text-white">
                <h5 class="modal-title fw-bold"><i class="fas fa-user-plus me-2"></i>Affectation des dossiers orphelins</h5>
                <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body p-0">
                <div class="table-responsive">
                    <table class="table table-hover align-middle mb-0">
                        <thead class="bg-light">
                            <tr>
                                <th class="ps-3">Date</th>
                                <th>Prospect</th>
                                <th>Lot visé</th>
                                <th>Action</th>
                            </tr>
                        </thead>
                        <tbody>
                            {% for s in souscriptions_orphelines %}
                            <tr>
                                <td class="ps-3">{{ s.dateSouscription|date('d/m/Y') }}</td>
                                <td>
                                    <div class="fw-bold">{{ s.client.nom }}</div>
                                    <div class="small text-muted">{{ s.client.email }}</div>
                                </td>
                                <td>{{ s.lot.numeroLot }} ({{ s.lot.projet.nom }})</td>
                                <td>
                                    <form action="{{ path('app_admin_souscription_assign') }}" method="POST" class="d-flex gap-2">
                                        <input type="hidden" name="souscription_id" value="{{ s.id }}">
                                        <select name="commercial_id" class="form-select form-select-sm" required>
                                            <option value="">Choisir un agent...</option>
                                            {% for agent in commerciaux %}
                                                <option value="{{ agent.id }}">{{ agent.nom }}</option>
                                            {% endfor %}
                                        </select>
                                        <button type="submit" class="btn btn-sm btn-primary">Assigner</button>
                                    </form>
                                </td>
                            </tr>
                            {% endfor %}
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
</div>

{% endblock %}

{% block javascripts %}
    {{ parent() }}
    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
    <script>
        document.addEventListener('DOMContentLoaded', function() {
            // 1. Graphique de Trésorerie
            const ctxFinance = document.getElementById('chartFinanceDecisive').getContext('2d');
            new Chart(ctxFinance, {
                type: 'bar',
                data: {
                    labels: ['Jan', 'Fév', 'Mar', 'Avr', 'Mai', 'Juin'],
                    datasets: [{
                        label: 'Prévisions (M)',
                        data: [120, 150, 180, 140, 200, 250],
                        backgroundColor: 'rgba(94, 114, 228, 0.1)',
                        borderColor: '#5e72e4',
                        borderWidth: 1,
                        type: 'line',
                        tension: 0.4
                    }, {
                        label: 'Réalisé (M)',
                        data: [100, 145, 160, 130, 190, 240],
                        backgroundColor: '#2dce89',
                        borderRadius: 5
                    }]
                },
                options: { maintainAspectRatio: false, plugins: { legend: { position: 'bottom' } } }
            });

            // 2. Graphique de Stock (Donut)
            const ctxStock = document.getElementById('chartStockStatus').getContext('2d');
            new Chart(ctxStock, {
                type: 'doughnut',
                data: {
                    labels: ['Vendus', 'Dispos', 'Réservés'],
                    datasets: [{
                        data: [{{ kpi.percentVendu }}, {{ kpi.percentDispo }}, {{ kpi.percentReserve }}],
                        backgroundColor: ['#5e72e4', '#2dce89', '#fb6340'],
                        borderWidth: 0,
                        cutout: '80%'
                    }]
                },
                options: { maintainAspectRatio: false, plugins: { legend: { display: false } } }
            });
        });

        document.getElementById('filterProgramme').addEventListener('change', function() {
    const programmeId = this.value;
    const url = new URL(window.location.href);
    
    if (programmeId) {
        url.searchParams.set('programme', programmeId);
    } else {
        url.searchParams.delete('programme');
    }
    
    window.location.href = url.toString();
});
    </script>
{% endblock %}