<div class="header">
    <h1>Dashboard</h1>
</div>

<style>
.dash-cards {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 1.25rem;
    margin-bottom: 2rem;
}
.dash-card {
    background: var(--surface);
    padding: 1.25rem 1.5rem;
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    border-left: 4px solid var(--border);
    transition: box-shadow 0.2s, transform 0.15s;
}
.dash-card:hover {
    box-shadow: var(--shadow-md);
}
.dash-card__label {
    color: var(--text-light);
    font-size: 0.8125rem;
    font-weight: 500;
    margin-bottom: 0.35rem;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}
.dash-card__value {
    font-size: 1.75rem;
    font-weight: 700;
    color: var(--text);
    line-height: 1.2;
}
.dash-card--earnings { border-left-color: #059669; }
.dash-card--earnings .dash-card__value { color: #059669; }
.dash-card--orders { border-left-color: var(--primary); }
.dash-card--dispatched { border-left-color: #d97706; }
.dash-card--dispatched .dash-card__value { color: #d97706; }
.dash-card--delivered { border-left-color: #10b981; }
.dash-card--delivered .dash-card__value { color: #10b981; }
.dash-card--pending { border-left-color: #6366f1; }
.dash-card--pending .dash-card__value { color: #6366f1; }
.dash-card--users { border-left-color: #0ea5e9; }
.dash-card--drivers { border-left-color: #8b5cf6; }
.dash-card--drivers .dash-card__value { color: #8b5cf6; }
.dash-card--cancelled { border-left-color: #ef4444; }
.dash-card--cancelled .dash-card__value { color: #6b7280; font-size: 1.25rem; }
@media (max-width: 900px) {
    .dash-cards { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 480px) {
    .dash-cards { grid-template-columns: 1fr; }
}
</style>

<div class="dash-cards">
    <div class="dash-card dash-card--earnings">
        <div class="dash-card__label">Total earnings</div>
        <div class="dash-card__value"><?= number_format($total_earnings ?? 0) ?> <span style="font-size: 0.75rem; font-weight: 600; color: var(--text-light);">UGX</span></div>
    </div>
    <div class="dash-card dash-card--orders">
        <div class="dash-card__label">Total orders</div>
        <div class="dash-card__value"><?= (int) ($orders_count ?? 0) ?></div>
    </div>
    <div class="dash-card dash-card--dispatched">
        <div class="dash-card__label">Dispatched</div>
        <div class="dash-card__value"><?= (int) ($orders_dispatched ?? 0) ?></div>
    </div>
    <div class="dash-card dash-card--delivered">
        <div class="dash-card__label">Delivered</div>
        <div class="dash-card__value"><?= (int) ($orders_delivered ?? 0) ?></div>
    </div>
    <div class="dash-card dash-card--pending">
        <div class="dash-card__label">Pending / Paid</div>
        <div class="dash-card__value"><?= (int) ($orders_pending ?? 0) ?></div>
    </div>
    <div class="dash-card dash-card--cancelled">
        <div class="dash-card__label">Cancelled</div>
        <div class="dash-card__value"><?= (int) ($orders_cancelled ?? 0) ?></div>
    </div>
    <div class="dash-card dash-card--users">
        <div class="dash-card__label">Users</div>
        <div class="dash-card__value"><?= (int) ($users_count ?? 0) ?></div>
    </div>
    <div class="dash-card dash-card--drivers">
        <div class="dash-card__label">Drivers</div>
        <div class="dash-card__value"><?= (int) ($drivers_count ?? 0) ?></div>
    </div>
</div>

<h2 style="margin: 2rem 0 1rem;">Recent orders</h2>
<table>
    <thead>
        <tr><th>ID</th><th>Type</th><th>Status</th><th>Amount</th><th>Date</th></tr>
    </thead>
    <tbody>
        <?php foreach ($recent_orders ?? [] as $o): ?>
        <tr>
            <td>#<?= $o->id ?></td>
            <td><?= esc($o->order_type ?? '—') ?></td>
            <td><span style="display: inline-block; padding: 0.25rem 0.75rem; background: #e5e7eb; border-radius: 9999px; font-size: 0.75rem; font-weight: 600;"><?= esc($o->status) ?></span></td>
            <td><?= number_format($o->total_amount) ?> UGX</td>
            <td><?= esc($o->created_at) ?></td>
        </tr>
        <?php endforeach ?>
    </tbody>
</table>

<h2 style="margin: 2rem 0 1rem;">Drivers (God View)</h2>
<p style="color: var(--text-light); margin-bottom: 1rem;">🟢 Online · ⚪ Offline</p>
<table>
    <thead>
        <tr><th>ID</th><th>Phone</th><th>Status</th><th>Location</th></tr>
    </thead>
    <tbody>
        <?php foreach ($drivers as $d): ?>
        <tr>
            <td><?= $d->id ?></td>
            <td><?= esc($d->phone) ?></td>
            <td style="color:<?= $d->online ? '#10b981' : '#9ca3af' ?>; font-weight: 600;"><?= $d->online ? '🟢 Online' : '⚪ Offline' ?></td>
            <td><?= $d->lat !== null ? "{$d->lat}, {$d->lng}" : '—' ?></td>
        </tr>
        <?php endforeach ?>
    </tbody>
</table>