<?= $this->extend('layout/main') ?>
<?= $this->section('content') ?>

<div class="row g-4 mb-4">
    <div class="col-md-3">
        <div class="stat-card">
            <div class="stat-value"><?= number_format($stats['total_revenue'] ?? 0, 2, ',', ' ') ?> TND</div>
            <div class="stat-label">Chiffre d'affaires total</div>
        </div>
    </div>
    <div class="col-md-3">
        <div class="stat-card success">
            <div class="stat-value"><?= number_format($stats['month_revenue'] ?? 0, 2, ',', ' ') ?> TND</div>
            <div class="stat-label">CA du mois</div>
        </div>
    </div>
    <div class="col-md-3">
        <div class="stat-card warning">
            <div class="stat-value"><?= $stats['unpaid_count'] ?? 0 ?></div>
            <div class="stat-label">Factures impayees</div>
        </div>
    </div>
    <div class="col-md-3">
        <div class="stat-card danger">
            <div class="stat-value"><?= $stats['overdue_count'] ?? 0 ?></div>
            <div class="stat-label">En retard</div>
        </div>
    </div>
</div>

<div class="row g-4">
    <div class="col-lg-8">
        <div class="table-card">
            <div class="d-flex justify-content-between align-items-center mb-3">
                <h6 class="m-0">Revenus mensuels (TND)</h6>
            </div>
            <canvas id="revenueChart" height="100"></canvas>
        </div>
    </div>
    <div class="col-lg-4">
        <div class="table-card">
            <h6 class="mb-3">Top Clients</h6>
            <?php foreach ($topClients as $client): ?>
                <div class="d-flex justify-content-between align-items-center py-2 border-bottom">
                    <div>
                        <div class="fw-semibold"><?= $client['company_name'] ?></div>
                        <small class="text-muted"><?= $client['invoice_count'] ?> facture(s)</small>
                    </div>
                    <div class="fw-bold text-primary"><?= number_format($client['total_revenue'], 2, ',', ' ') ?> TND</div>
                </div>
            <?php endforeach; ?>
        </div>
    </div>
</div>

<div class="row g-4 mt-2">
    <div class="col-12">
        <div class="table-card">
            <div class="d-flex justify-content-between align-items-center mb-3">
                <h6 class="m-0">Factures recentes</h6>
                <a href="/invoices" class="btn btn-sm btn-primary">Voir tout</a>
            </div>
            <table class="table table-hover" id="recentInvoices">
                <thead>
                    <tr>
                        <th>N</th>
                        <th>Client</th>
                        <th>Date</th>
                        <th>Montant</th>
                        <th>Statut</th>
                        <th></th>
                    </tr>
                </thead>
                <tbody>
                    <?php foreach ($recentInvoices as $inv): ?>
                        <tr>
                            <td><a href="/invoices/view/<?= $inv['id'] ?>" class="fw-bold text-decoration-none"><?= $inv['invoice_number'] ?></a></td>
                            <td><?= $inv['designation_global'] ?? 'N/A' ?></td>
                            <td><?= date('d/m/Y', strtotime($inv['date'])) ?></td>
                            <td class="fw-bold"><?= number_format($inv['total_ttc'], 2, ',', ' ') ?> TND</td>
                            <td><span class="badge-status status-<?= $inv['status'] ?>"><?= ucfirst($inv['status']) ?></span></td>
                            <td><a href="/invoices/view/<?= $inv['id'] ?>" class="btn btn-sm btn-outline-primary"><i class="bi bi-eye"></i></a></td>
                        </tr>
                    <?php endforeach; ?>
                </tbody>
            </table>
        </div>
    </div>
</div>

<?= $this->endSection() ?>

<?= $this->section('scripts') ?>
<script>
const ctx = document.getElementById('revenueChart').getContext('2d');
const monthlyData = <?= json_encode($monthlyRevenue) ?>;
new Chart(ctx, {
    type: 'line',
    data: {
        labels: monthlyData.map(d => {
            const [y, m] = d.month.split('-');
            return m + '/' + y;
        }),
        datasets: [{
            label: 'Revenus (TND)',
            data: monthlyData.map(d => d.revenue),
            borderColor: '#1a5276',
            backgroundColor: 'rgba(26,82,118,0.1)',
            fill: true,
            tension: 0.4
        }]
    },
    options: {
        responsive: true,
        plugins: { legend: { display: false } },
        scales: {
            y: { beginAtZero: true, grid: { color: 'rgba(0,0,0,0.05)' } },
            x: { grid: { display: false } }
        }
    }
});

$(document).ready(function() {
    $('#recentInvoices').DataTable({ 
        pageLength: 5, 
        searching: false, 
        info: false,
        lengthChange: false,
        language: { url: '//cdn.datatables.net/plug-ins/1.13.7/i18n/fr-FR.json' }
    });
});
</script>
<?= $this->endSection() ?>
