<?php defined('BASEPATH') or exit('No direct script access allowed'); ?>
<?php $money = function ($value) use ($currency_symbol) { return $currency_symbol . number_format((float) $value, 2); }; ?>
<div class="space-y-4 sm:space-y-6">
    <div class="grid grid-cols-1 gap-4 sm:grid-cols-2 xl:grid-cols-4">
        <article class="rounded-2xl border border-border bg-background/70 p-4 sm:p-5 shadow-sm"><p class="text-xs font-semibold uppercase tracking-wide text-muted-foreground">Income</p><p class="mt-3 text-2xl font-semibold text-emerald-500 sm:text-3xl"><?= $money($finance['income_total']) ?></p></article>
        <article class="rounded-2xl border border-border bg-background/70 p-4 sm:p-5 shadow-sm"><p class="text-xs font-semibold uppercase tracking-wide text-muted-foreground">Expense</p><p class="mt-3 text-2xl font-semibold text-rose-500 sm:text-3xl"><?= $money($finance['expense_total']) ?></p></article>
        <article class="rounded-2xl border border-border bg-background/70 p-4 sm:p-5 shadow-sm"><p class="text-xs font-semibold uppercase tracking-wide text-muted-foreground">Net Cash</p><p class="mt-3 text-2xl font-semibold text-foreground sm:text-3xl"><?= $money($finance['net_cash']) ?></p></article>
        <article class="rounded-2xl border border-border bg-background/70 p-4 sm:p-5 shadow-sm"><p class="text-xs font-semibold uppercase tracking-wide text-muted-foreground">Outstanding</p><p class="mt-3 text-2xl font-semibold text-amber-500 sm:text-3xl"><?= $money($finance['outstanding_total']) ?></p></article>
    </div>

    <div class="grid grid-cols-1 gap-6 xl:grid-cols-[minmax(0,1.35fr)_minmax(0,0.9fr)]">
        <article class="min-w-0 overflow-hidden rounded-2xl border border-border bg-background/60 p-4 sm:p-5">
            <div class="mb-4">
                <p class="text-xs font-semibold uppercase tracking-wide text-muted-foreground">Finance Overview</p>
                <h3 class="text-lg font-semibold text-foreground">Income, expense and payment movement</h3>
            </div>
            <div class="min-w-0 overflow-hidden rounded-xl">
                <div data-chart="line" data-height="320" data-height-sm="220" data-series='<?= json_encode($finance['finance_series'], JSON_UNESCAPED_SLASHES) ?>'></div>
            </div>
        </article>

        <article class="min-w-0 rounded-2xl border border-border bg-background/60 p-4 sm:p-5">
            <div class="mb-4">
                <p class="text-xs font-semibold uppercase tracking-wide text-muted-foreground">Quick Reports</p>
                <h3 class="text-lg font-semibold text-foreground">Open report modules</h3>
            </div>
            <div class="space-y-3">
                <a href="<?= base_url('admin/report/income_report') ?>" class="block rounded-xl border border-border bg-card p-4 text-sm font-semibold text-foreground hover:bg-muted">Income Report</a>
                <a href="<?= base_url('admin/report/expense_report') ?>" class="block rounded-xl border border-border bg-card p-4 text-sm font-semibold text-foreground hover:bg-muted">Expense Report</a>
                <a href="<?= base_url('admin/report/payment_reports') ?>" class="block rounded-xl border border-border bg-card p-4 text-sm font-semibold text-foreground hover:bg-muted">Payments Report</a>
                <a href="<?= base_url('admin/report/sales_report') ?>" class="block rounded-xl border border-border bg-card p-4 text-sm font-semibold text-foreground hover:bg-muted">Sales Report</a>
                <a href="<?= base_url('admin/report/account_statement') ?>" class="block rounded-xl border border-border bg-card p-4 text-sm font-semibold text-foreground hover:bg-muted">Account Statement</a>
            </div>
        </article>
    </div>

    <div class="grid grid-cols-1 gap-6 xl:grid-cols-2">
        <article class="rounded-2xl border border-border bg-background/60 p-4 sm:p-5">
            <div class="mb-4"><p class="text-xs font-semibold uppercase tracking-wide text-muted-foreground">Invoice Distribution</p><h3 class="text-lg font-semibold text-foreground">Status summary</h3></div>
            <div data-chart="bar" data-height="280" data-height-sm="220" data-series='<?= json_encode($finance['invoice_status_series'], JSON_UNESCAPED_SLASHES) ?>'></div>
        </article>
        <article class="rounded-2xl border border-border bg-background/60 p-4 sm:p-5">
            <div class="mb-4"><p class="text-xs font-semibold uppercase tracking-wide text-muted-foreground">Expense Mix</p><h3 class="text-lg font-semibold text-foreground">Category allocation</h3></div>
            <div data-chart="bar" data-height="280" data-height-sm="220" data-series='<?= json_encode($finance['expense_category_series'], JSON_UNESCAPED_SLASHES) ?>'></div>
        </article>
    </div>
</div>
