{% extends '@EasyAdmin/page/content.html.twig' %}

{% block page_title %}Dashboard RiseUp CRM{% endblock %}

{% block main %}
<div class="row g-4 mb-4">
    <div class="col-md-3">
        <div class="card border-0 shadow-sm bg-primary text-white">
            <div class="card-body d-flex align-items-center gap-3">
                <i class="fa fa-users fa-2x opacity-75"></i>
                <div>
                    <div class="fs-2 fw-bold" id="stat-clients">—</div>
                    <div class="small">Clients actifs</div>
                </div>
            </div>
        </div>
    </div>
    <div class="col-md-3">
        <div class="card border-0 shadow-sm bg-success text-white">
            <div class="card-body d-flex align-items-center gap-3">
                <i class="fa fa-file-invoice-dollar fa-2x opacity-75"></i>
                <div>
                    <div class="fs-2 fw-bold" id="stat-factures">—</div>
                    <div class="small">Factures payées</div>
                </div>
            </div>
        </div>
    </div>
    <div class="col-md-3">
        <div class="card border-0 shadow-sm bg-warning text-white">
            <div class="card-body d-flex align-items-center gap-3">
                <i class="fa fa-tasks fa-2x opacity-75"></i>
                <div>
                    <div class="fs-2 fw-bold" id="stat-tasks">—</div>
                    <div class="small">Tâches en cours</div>
                </div>
            </div>
        </div>
    </div>
    <div class="col-md-3">
        <div class="card border-0 shadow-sm bg-info text-white">
            <div class="card-body d-flex align-items-center gap-3">
                <i class="fa fa-clock fa-2x opacity-75"></i>
                <div>
                    <div class="fs-2 fw-bold" id="stat-pointage">—</div>
                    <div class="small">Présents aujourd'hui</div>
                </div>
            </div>
        </div>
    </div>
</div>

<div class="row g-4">
    <div class="col-md-6">
        <div class="card border-0 shadow-sm">
            <div class="card-header bg-white fw-bold">
                <i class="fa fa-file-invoice me-2 text-primary"></i>Devis récents
            </div>
            <div class="card-body p-0">
                <table class="table table-hover mb-0">
                    <thead class="table-light">
                        <tr>
                            <th>Référence</th><th>Client</th><th>Montant</th><th>Statut</th>
                        </tr>
                    </thead>
                    <tbody id="recent-devis">
                        <tr><td colspan="4" class="text-center text-muted py-3">Chargement...</td></tr>
                    </tbody>
                </table>
            </div>
        </div>
    </div>
    <div class="col-md-6">
        <div class="card border-0 shadow-sm">
            <div class="card-header bg-white fw-bold">
                <i class="fa fa-tasks me-2 text-warning"></i>Tâches urgentes
            </div>
            <div class="card-body p-0">
                <table class="table table-hover mb-0">
                    <thead class="table-light">
                        <tr>
                            <th>Titre</th><th>Assigné</th><th>Priorité</th><th>Statut</th>
                        </tr>
                    </thead>
                    <tbody id="urgent-tasks">
                        <tr><td colspan="4" class="text-center text-muted py-3">Chargement...</td></tr>
                    </tbody>
                </table>
            </div>
        </div>
    </div>
</div>

<script>
document.addEventListener('DOMContentLoaded', function() {
    fetch('/api/dashboard/stats', {
        headers: { 'Authorization': 'Bearer ' + (localStorage.getItem('admin_token') || '') }
    })
    .then(r => r.json())
    .then(data => {
        document.getElementById('stat-clients').textContent = data.activeClients ?? '—';
        document.getElementById('stat-factures').textContent = data.paidInvoices ?? '—';
        document.getElementById('stat-tasks').textContent = data.tasksInProgress ?? '—';
        document.getElementById('stat-pointage').textContent = data.presentToday ?? '—';

        const devisBody = document.getElementById('recent-devis');
        devisBody.innerHTML = (data.recentDevis || []).map(d => `
            <tr>
                <td><code>${d.reference}</code></td>
                <td>${d.client}</td>
                <td>${Number(d.total).toLocaleString('fr-DZ')} DZD</td>
                <td><span class="badge bg-${d.statusColor}">${d.status}</span></td>
            </tr>
        `).join('') || '<tr><td colspan="4" class="text-center text-muted py-3">Aucun devis</td></tr>';

        const tasksBody = document.getElementById('urgent-tasks');
        tasksBody.innerHTML = (data.urgentTasks || []).map(t => `
            <tr>
                <td>${t.title}</td>
                <td>${t.assignee || '—'}</td>
                <td><span class="badge bg-danger">${t.priority}</span></td>
                <td><span class="badge bg-primary">${t.status}</span></td>
            </tr>
        `).join('') || '<tr><td colspan="4" class="text-center text-muted py-3">Aucune tâche urgente</td></tr>';
    })
    .catch(() => {});
});
</script>
{% endblock %}