<?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); };
$date_text = function ($value) { return !empty($value) ? date('M d, Y', strtotime($value)) : '--'; };
?>
<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">Invoice Total</p><p class="mt-3 text-2xl font-semibold text-foreground sm:text-3xl"><?= $money($finance['invoice_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">Paid Total</p><p class="mt-3 text-2xl font-semibold text-emerald-500 sm:text-3xl"><?= $money($finance['paid_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">Outstanding</p><p class="mt-3 text-2xl font-semibold text-amber-500 sm:text-3xl"><?= $money($finance['outstanding_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">Pipeline</p><p class="mt-3 text-2xl font-semibold text-violet-500 sm:text-3xl"><?= $money($crm['pipeline_total']) ?></p></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">Transactions</p><h3 class="text-lg font-semibold text-foreground">Financial status mix</h3></div>
            <div data-chart="bar" data-height="280" data-height-sm="220" data-series='<?= json_encode($finance['transaction_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">Opportunity Pipeline</p><h3 class="text-lg font-semibold text-foreground">Value by sales stage</h3></div>
            <div data-chart="bar" data-height="280" data-height-sm="220" data-series='<?= json_encode($crm['pipeline_series'], JSON_UNESCAPED_SLASHES) ?>'></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">Recent Invoices</p><h3 class="text-lg font-semibold text-foreground">Commercial billing activity</h3></div>
            <div class="space-y-3">
                <?php foreach ($finance['recent_invoices'] as $invoice): ?>
                    <div class="rounded-xl border border-border bg-card p-4">
                        <div class="flex flex-col gap-3 sm:flex-row sm:items-start sm:justify-between">
                            <div>
                                <p class="text-sm font-semibold text-foreground"><?= html_escape($invoice->reference_no) ?></p>
                                <p class="mt-1 text-xs text-muted-foreground"><?= html_escape($invoice->client_name ?: 'Unassigned Client') ?> • Due <?= $date_text($invoice->due_date) ?></p>
                            </div>
                            <span class="rounded-full bg-muted px-2.5 py-1 text-[11px] font-semibold text-foreground"><?= html_escape(ucfirst($invoice->status)) ?></span>
                        </div>
                    </div>
                <?php endforeach; ?>
            </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">Recent Transactions</p><h3 class="text-lg font-semibold text-foreground">Posted cash movement</h3></div>
            <div class="space-y-3">
                <?php foreach ($finance['recent_transactions'] as $tx): ?>
                    <div class="rounded-xl border border-border bg-card p-4">
                        <div class="flex flex-col gap-3 sm:flex-row sm:items-start sm:justify-between">
                            <div>
                                <p class="text-sm font-semibold text-foreground"><?= html_escape($tx->name ?: $tx->transaction_prefix) ?></p>
                                <p class="mt-1 text-xs text-muted-foreground"><?= html_escape($tx->type) ?> • <?= $date_text($tx->date) ?></p>
                            </div>
                            <div class="text-right">
                                <p class="text-sm font-semibold text-foreground"><?= $money($tx->amount) ?></p>
                                <p class="mt-1 text-xs text-muted-foreground"><?= html_escape(ucfirst($tx->status ?: 'posted')) ?></p>
                            </div>
                        </div>
                    </div>
                <?php endforeach; ?>
            </div>
        </article>
    </div>
</div>
