{% extends 'entreprise/entreprise_base.html.twig' %}

{% block title %}Bureau | {{ entreprise.raisonSociale }}{% endblock %}

{% block stylesheets %}
    {{ parent() }}
    {# On lie le nouveau fichier CSS externe ici #}
        <link href="{{ asset('assets/css/theme-entreprise-dashboard.css') }}" type="text/css" rel="stylesheet" id="style-default" />
{% endblock %}

{% block body %}

<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script>
document.addEventListener("DOMContentLoaded", function() {
    // Configuration des couleurs communes
    const colorGreen = getComputedStyle(document.documentElement).getPropertyValue('--express-green').trim() || '#72a333';

    // 1. Graphique Linéaire
    const ctxFinance = document.getElementById('mainFinanceChart').getContext('2d');
    new Chart(ctxFinance, {
        type: 'line',
        data: {
            labels: ['Jan', 'Fév', 'Mar', 'Avr', 'Mai', 'Juin', 'Juil', 'Août', 'Sep', 'Oct', 'Nov', 'Déc'],
            datasets: [{
                label: 'Recettes',
                data: {{ chartData.recettes|json_encode|raw }},
                borderColor: colorGreen,
                backgroundColor: 'rgba(114, 163, 51, 0.05)',
                fill: true,
                tension: 0.4,
                borderWidth: 3,
                pointRadius: 4,
                pointBackgroundColor: colorGreen
            }, {
                label: 'Dépenses',
                data: {{ chartData.depenses|json_encode|raw }},
                borderColor: '#e74c3c',
                borderDash: [5, 5],
                fill: false,
                tension: 0.4,
                borderWidth: 2
            }]
        },
        options: { 
            responsive: true, maintainAspectRatio: false,
            plugins: { legend: { position: 'top', labels: { usePointStyle: true, boxSize: 6 } } },
            scales: { y: { beginAtZero: true, grid: { color: '#f0f0f0' } }, x: { grid: { display: false } } }
        }
    });

    // 2. Graphique Camembert
    const ctxInter = document.getElementById('interventionPieChart').getContext('2d');
    new Chart(ctxInter, {
        type: 'doughnut',
        data: {
            labels: ['Plomberie', 'Élec', 'Peinture', 'Maçonnerie', 'Clim', 'Froid', 'Autres'],
            datasets: [{
                data: {{ pieData|json_encode|raw }},
                backgroundColor: ['#3498db', '#f1c40f', '#e67e22', '#9b59b6', '#1abc9c', '#d35400', '#95a5a6'],
                borderWidth: 2,
                hoverOffset: 10
            }]
        },
        options: { 
            responsive: true, maintainAspectRatio: false,
            cutout: '70%',
            plugins: { legend: { position: 'bottom', labels: { padding: 20, usePointStyle: true, font: { size: 11 } } } }
        }
    });
});
</script>

{% include 'flash_messages.html.twig' %}

<div class="container-fluid py-4 px-md-4">

    {# --- EN-TÊTE --- #}
    <div class="d-flex justify-content-between align-items-center mb-4">
        <div>
            <h3 class="page-header page-header-top mb-1">Bonjour 
                {% if app.user.civilite == '1' or app.user.civilite == 'M.' %} M. 
                {% elseif app.user.civilite == '2' or app.user.civilite == 'Mme' %} Mme 
                {% else %} Mlle 
                {% endif %} 
                {{ app.user.nom | default('Utilisateur') }}
            </h3>
            <p class="text-muted small mb-0">Tableau de bord<strong> : {{ entreprise.raisonSociale }}</strong></p>
        </div>

        <div class="text-end d-none d-sm-block">
           {# FORMULAIRE DE FILTRE PAR ANNÉE #}
        <form method="get" action="{{ path('app_entreprise_dashboard') }}" class="me-3">
            <select name="annee" class="form-select form-select-sm shadow-sm" onchange="this.form.submit()">
                {% for a in anneesDisponibles %}
                    <option value="{{ a }}" {{ a == anneeSelectionnee ? 'selected' : '' }}>Année {{ a }}</option>
                {% endfor %}
            </select>
        </form>
        </div>

        <div class="text-end d-none d-sm-block">
            <span class="badge bg-white text-dark border px-3 py-2 shadow-sm">
                <i class="far fa-calendar-alt me-2 text-success"></i>{{ "now"|date("d/m/Y") }}
            </span>
        </div>
    </div>

    {# --- ACTIONS RAPIDES --- #}
    <div class="nav-dash">
        <ul class="round-buttons">
            <li>
                <div class="round-depth"><div class="depth"><a href="{{ path('app_entreprise_immeuble_new') }}" title="Nouveau Lot"><i class="fas fa-city"></i></a></div></div>
                <h5>Nouveau Lot</h5>
            </li>
            <li>
                <div class="round-depth"><div class="depth"><a href="{{ path('app_entreprise_appartement_new_selection') }}" title="Nouvel Appartement"><i class="fas fa-door-open"></i></a></div></div>
                <h5>Appartement</h5>
            </li>
            <li>
                <div class="round-depth"><div class="depth"><a href="{{ path('app_entreprise_locataire_new') }}" title="Nouveau Locataire"><i class="fas fa-user-plus"></i></a></div></div>
                <h5>Locataire</h5>
            </li>
            <li>
                <div class="round-depth"><div class="depth"><a href="{{ path('app_entreprise_location_new') }}" title="Nouvelle Location"><i class="fas fa-file-contract"></i></a></div></div>
                <h5>Location</h5>
            </li>
            <li>
                <div class="round-depth"><div class="depth green"><a href="{{ path('app_entreprise_loyer_mensuel_new') }}" title="Nouvelle Facture"><i class="fas fa-file-invoice-dollar"></i></a></div></div>
                <h5>Facture</h5>
            </li>
            <li>
                <div class="round-depth"><div class="depth green"><a href="#" title="Nouveau Paiement"><i class="fas fa-hand-holding-usd"></i></a></div></div>
                <h5>Paiement</h5>
            </li>
            <li>
                <div class="round-depth"><div class="depth red"><a href="{{ path('app_entreprise_intervention_new') }}" title="Nouvelle Intervention"><i class="fas fa-tools"></i></a></div></div>
                <h5>Intervention</h5>
            </li>
        </ul>
    </div>

    {# --- COMPTEURS (Tiles) --- #}
    <div class="row g-3 mb-4">
        <div class="col-md-4">
            <div class="dash-tile clearfix shadow-sm">
                <div class="dash-tile-header">Patrimoine</div>
                <div class="dash-tile-icon"><i class="fas fa-home"></i></div>
                <div class="dash-tile-text green">
                    {{ stats.biens|default(0) }} <span><b>Appartements</b><br>Gérés</span>
                </div>
            </div>
        </div>
        <div class="col-md-4">
            <div class="dash-tile clearfix shadow-sm">
                <div class="dash-tile-header">Locataires</div>
                <div class="dash-tile-icon"><i class="fas fa-users"></i></div>
                <div class="dash-tile-text green">
                    {{ stats.locataires|default(0) }} <span><b>Inscrits</b><br>En contrat</span>
                </div>
            </div>
        </div>
        <div class="col-md-4">
            <div class="dash-tile clearfix shadow-sm">
                <div class="dash-tile-header">Interventions</div>
                <div class="dash-tile-icon"><i class="fas fa-tools"></i></div>
                <div class="dash-tile-text red">
                    {{ kpi.countInterventions|default(0) }} <span><b>Maintenance</b><br>Travaux</span>
                </div>
            </div>
        </div>
    </div>

    {# --- GRAPHIQUES --- #}
    <div class="row mb-4 g-4">
        <div class="col-xl-8">
            <div class="card shadow-sm border-0">
                <div class="card-header bg-white fw-bold d-flex justify-content-between align-items-center py-3">
                    Flux de trésorerie ({{ anneeSelectionnee }})
                    <i class="fas fa-chart-line text-muted"></i>
                </div>
                <div class="card-body">
                    <div style="height: 300px;">
                        <canvas id="mainFinanceChart"></canvas>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-xl-4">
            <div class="card shadow-sm border-0">
                <div class="card-header bg-white fw-bold py-3">Répartition des Travaux</div>
                <div class="card-body">
                    <div style="height: 300px;">
                        <canvas id="interventionPieChart"></canvas>
                    </div>
                </div>
            </div>
        </div>
    </div>

    {# --- KPI FINANCIERS DÉTAILLÉS --- #}
    <div class="row g-3">
        <div class="col-md-4">
            <div class="info-box b-l-green bg-white shadow-sm p-3 h-100">
                <div class="text-muted small">Recettes perçues ({{ anneeSelectionnee }})</div>
                <div class="h4 fw-bold text-success">{{ kpi.totalEncaisse|format_money }} </div>
                <div class="progress mt-2" style="height: 5px;">
                    <div class="progress-bar bg-success" style="width: {{ kpi.tauxRecouvrement }}%"></div>
                </div>
                <small class="text-muted">{{ kpi.tauxRecouvrement|round }}% de recouvrement</small>
            </div>
        </div>
        <div class="col-md-4">
            <div class="info-box b-l-red bg-white shadow-sm p-3 h-100">
                <div class="text-muted small">Maintenance appartements</div>
                <div class="h4 fw-bold text-danger">{{ kpi.totalDepenses|format_money }} </div>
                <small class="text-muted">Total des factures travaux</small>
            </div>
        </div>
        <div class="col-md-4">
            <div class="info-box border-start border-4 border-warning bg-white shadow-sm p-3 h-100">
                <div class="text-muted small">Impayés & Retards</div>
                <div class="h4 fw-bold text-warning">{{ kpi.montantImpayes|format_money }} </div>
                <small class="text-muted">Total des impayés sur le lot</small>
            </div>
        </div>
    </div>
</div>

{% endblock %}