{# templates/entreprise/statistiques/index.html.twig #}
{% extends 'entreprise/entreprise_base.html.twig' %}

{% block title %}Analytics Immobilier | {{ annee }}{% endblock %}

{% block stylesheets %}
    {{ parent() }}
    <style>
        :root { --dark-premium: #1a1c23; --gold-accent: #b89551; }
        .bg-premium { background-color: var(--dark-premium); color: white; }
        .card { border: none; box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075); border-radius: 12px; }
        .kpi-value { font-size: 1.8rem; font-weight: 800; letter-spacing: -1px; }
        .text-gold { color: var(--gold-accent); }
        .progress-thin { height: 6px; border-radius: 10px; }
        .chart-container { position: relative; height: 350px; }
        .trend-up { color: #2ecc71; font-size: 0.85rem; }
        .trend-down { color: #e74c3c; font-size: 0.85rem; }
    </style>
{% endblock %}

{% block body %}
<div class="container-fluid p-4">
    
    {# --- HEADER STRATÉGIQUE --- #}
    <div class="row align-items-center mb-4">
        <div class="col-md-7">
            <h1 class="h3 mb-1 fw-bold">Analyse de Performance Financière</h1>
            <p class="text-muted">Résumé analytique de votre parc immobilier pour l'exercice {{ annee }}</p>
        </div>
        <div class="col-md-5">
            <form method="get" class="row g-2 justify-content-end">
                <div class="col-auto">
                    <select name="immeubleId" class="form-select border-0 shadow-sm" onchange="this.form.submit()">
                        <option value="">Tous les actifs</option>
                        {% for immeuble in immeubles %}
                            <option value="{{ immeuble.id }}" {{ selectedImmeuble == immeuble.id ? 'selected' : '' }}>
                                {{ immeuble.titre }}
                            </option>
                        {% endfor %}
                    </select>
                </div>
                <div class="col-auto">
                    <select name="annee" class="form-select border-0 shadow-sm" onchange="this.form.submit()">
                        {% for i in range("now"|date("Y"), "now"|date("Y") - 2) %}
                            <option value="{{ i }}" {{ annee == i ? 'selected' : '' }}>{{ i }}</option>
                        {% endfor %}
                    </select>
                </div>
            </form>
        </div>
    </div>

    {# --- ROW 1: LES KPIs MAÎTRES --- #}
    <div class="row g-3 mb-4">
        {# Recettes Réelles #}
        <div class="col-md-3">
            <div class="card h-100 p-3">
                <div class="d-flex justify-content-between mb-2">
                    <small class="text-muted fw-bold">ENCAISSEMENT RÉEL</small>
                    <i class="fas fa-check-circle text-success"></i>
                </div>
                <div class="kpi-value text-success">{{ kpi.totalEncaisse|number_format(0, '.', ' ') }} <small class="h6">CFA</small></div>
                <div class="trend-up"><i class="fas fa-arrow-up"></i> Flux de trésorerie positif</div>
            </div>
        </div>
        {# Impayés / Risque #}
        <div class="col-md-3">
            <div class="card h-100 p-3">
                <div class="d-flex justify-content-between mb-2">
                    <small class="text-muted fw-bold">DÉFICIT (IMPAYÉS)</small>
                    <i class="fas fa-exclamation-triangle text-danger"></i>
                </div>
                <div class="kpi-value text-danger">{{ kpi.montantImpayes|number_format(0, '.', ' ') }} <small class="h6">CFA</small></div>
                <div class="progress progress-thin mt-2">
                    <div class="progress-bar bg-danger" style="width: {{ 100 - kpi.tauxRecouvrement }}%"></div>
                </div>
            </div>
        </div>
        {# Taux de Recouvrement #}
        <div class="col-md-3">
            <div class="card h-100 p-3">
                <div class="d-flex justify-content-between mb-2">
                    <small class="text-muted fw-bold">EFFICACITÉ COLLECTE</small>
                    <i class="fas fa-percentage text-primary"></i>
                </div>
                <div class="kpi-value text-primary">{{ kpi.tauxRecouvrement|number_format(1) }} %</div>
                <small class="text-muted">Objectif cible : 95%</small>
            </div>
        </div>
        {# Cash Flow Net #}
        <div class="col-md-3">
            <div class="card bg-premium h-100 p-3">
                <div class="d-flex justify-content-between mb-2">
                    <small class="text-gold fw-bold">CASH-FLOW NET</small>
                    <i class="fas fa-shield-alt text-gold"></i>
                </div>
                <div class="kpi-value text-white">{{ kpi.beneficeNet|number_format(0, '.', ' ') }} <small class="h6">CFA</small></div>
                <small class="text-light-50">Après charges & impôts (10%)</small>
            </div>
        </div>
    </div>

    {# --- ROW 2: ANALYSE GRAPHIQUE --- #}
    <div class="row g-4">
        {# Graphique Flux Mensuel #}
        <div class="col-lg-8">
            <div class="card h-100 shadow-sm">
                <div class="card-header bg-white border-0 py-3">
                    <h6 class="mb-0 fw-bold"><i class="fas fa-chart-area me-2 text-primary"></i>Analyse des Flux Mensuels</h6>
                </div>
                <div class="card-body">
                    <div class="chart-container">
                        <canvas id="performanceChart"></canvas>
                    </div>
                </div>
            </div>
        </div>

        {# Top Rentabilité par Actif #}
        <div class="col-lg-4">
            <div class="card h-100 shadow-sm">
                <div class="card-header bg-white border-0 py-3">
                    <h6 class="mb-0 fw-bold"><i class="fas fa-trophy me-2 text-warning"></i>Performance par Actif</h6>
                </div>
                <div class="card-body">
                    {% for item in kpi.performanceImmeubles %}
                        <div class="mb-4">
                            <div class="d-flex justify-content-between mb-1">
                                <span class="small fw-bold">{{ item.titre }}</span>
                                <span class="small text-muted">{{ item.montant|number_format(0, '.', ' ') }} CFA</span>
                            </div>
                            <div class="progress progress-thin">
                                <div class="progress-bar bg-primary" style="width: {{ item.ratio }}%"></div>
                            </div>
                        </div>
                    {% else %}
                        <p class="text-center text-muted my-5">Aucune donnée disponible pour cette année.</p>
                    {% endfor %}

                    <hr>
                    <div class="p-3 bg-light rounded">
                        <small class="d-block text-muted mb-1">Ratio de charges global</small>
                        <h5 class="fw-bold mb-0 {{ kpi.ratioCharges > 20 ? 'text-danger' : 'text-success' }}">
                            {{ kpi.ratioCharges|number_format(1) }} %
                        </h5>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
{% endblock %}

{% block javascripts %}
    {{ parent() }}
    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
    <script>
        document.addEventListener('DOMContentLoaded', function() {
            const ctx = document.getElementById('performanceChart').getContext('2d');
            
            new Chart(ctx, {
                type: 'line', // Graphique linéaire pour la tendance
                data: {
                    labels: {{ chartData.labels|json_encode|raw }},
                    datasets: [
                        {
                            label: 'Recettes Réelles (Encaissé)',
                            data: {{ chartData.recettes|json_encode|raw }},
                            borderColor: '#2ecc71',
                            backgroundColor: 'rgba(46, 204, 113, 0.1)',
                            fill: true,
                            tension: 0.4,
                            borderWidth: 4,
                            pointBackgroundColor: '#fff',
                            pointBorderWidth: 2,
                            pointRadius: 5
                        },
                        {
                            label: 'Dépenses & Travaux',
                            data: {{ chartData.depenses|json_encode|raw }},
                            borderColor: '#e74c3c',
                            backgroundColor: 'rgba(231, 76, 60, 0.05)',
                            fill: true,
                            tension: 0.4,
                            borderWidth: 2,
                            borderDash: [5, 5],
                            pointRadius: 0
                        }
                    ]
                },
                options: {
                    maintainAspectRatio: false,
                    interaction: { intersect: false, mode: 'index' },
                    plugins: {
                        legend: { display: true, position: 'top', align: 'end' }
                    },
                    scales: {
                        y: { 
                            beginAtZero: true,
                            grid: { color: '#f0f0f0', drawBorder: false },
                            ticks: { callback: value => value.toLocaleString() + ' CFA' }
                        },
                        x: { grid: { display: false } }
                    }
                }
            });
        });
    </script>
{% endblock %}