{{-- Revenue chart + collection health --}}
<div class="grid grid-cols-1 gap-6 xl:grid-cols-12">
    <div class="xl:col-span-8">
        <div
            class="h-full rounded-2xl border border-slate-200 bg-white p-6 shadow-sm ring-1 ring-slate-950/[0.04] transition-shadow hover:shadow-md"
            data-revenue-chart-panel
        >
            <div class="mb-5 flex flex-col gap-4 border-b border-slate-100 pb-5 sm:flex-row sm:items-center sm:justify-between">
                <div>
                    <h3 class="text-lg font-bold tracking-tight text-slate-900">Revenue overview</h3>
                    <p class="mt-0.5 text-sm text-slate-600">Paid invoice income vs approved expenses by month</p>
                </div>
                <div class="flex flex-wrap items-center gap-2 rounded-xl bg-slate-100/90 p-1 ring-1 ring-slate-200/80">
                    <button type="button" data-chart-months="3" class="chart-range-tab rounded-lg px-3 py-1.5 text-xs font-semibold text-slate-600 transition-colors hover:text-violet-700">3 mo</button>
                    <button type="button" data-chart-months="6" class="chart-range-tab rounded-lg px-3 py-1.5 text-xs font-semibold bg-white text-violet-700 shadow-sm ring-1 ring-slate-200">6 mo</button>
                    <button type="button" data-chart-months="12" class="chart-range-tab rounded-lg px-3 py-1.5 text-xs font-semibold text-slate-600 transition-colors hover:text-violet-700">12 mo</button>
                </div>
            </div>

            <div class="mb-4 flex flex-wrap items-center justify-between gap-3">
                <div class="flex flex-wrap items-center gap-5 text-xs font-semibold text-slate-600">
                    <span class="inline-flex items-center gap-2">
                        <span class="h-2 w-6 rounded-full bg-violet-600" aria-hidden="true"></span>
                        Revenue
                    </span>
                    <span class="inline-flex items-center gap-2">
                        <span class="h-0.5 w-6 border-t-2 border-dashed border-slate-500" aria-hidden="true"></span>
                        Expenses
                    </span>
                </div>
                <button type="button" id="chart-refresh-btn" class="inline-flex items-center gap-1.5 rounded-lg px-2 py-1.5 text-xs font-semibold text-slate-500 transition-colors hover:bg-slate-50 hover:text-violet-600" title="Refresh chart">
                    <span class="material-symbols-outlined text-[18px]">refresh</span>
                    Refresh
                </button>
            </div>

            <div
                id="revenue-chart-root"
                class="relative w-full"
                data-chart-url="{{ route('admin.dashboard.chart-data') }}"
                data-initial-months="6"
            >
                <div class="relative h-[min(22rem,50vh)] w-full min-h-[240px]">
                    <canvas data-revenue-chart-canvas class="max-h-full w-full" aria-label="Revenue and expenses trend chart"></canvas>
                    <div id="chart-loading" class="absolute inset-0 z-10 hidden items-center justify-center rounded-xl bg-white/90 backdrop-blur-[2px]">
                        <div class="flex items-center gap-2 text-slate-600">
                            <svg class="h-5 w-5 animate-spin text-violet-600" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" aria-hidden="true">
                                <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
                                <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
                            </svg>
                            <span class="text-sm font-medium">Loading chart…</span>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="xl:col-span-4 space-y-6">
        <div class="rounded-2xl border border-slate-200/80 bg-white p-6 shadow-sm transition-shadow hover:shadow-md">
            <h3 class="text-lg font-bold text-slate-900">Collection health</h3>
            <p class="mt-1 text-sm text-slate-500">Paid vs open receivables</p>
            @if ($collectionTotal > 0)
                @php
                    $c1 = (int) $collectionCollectedPct;
                    $c2 = (int) $collectionCollectedPct + (int) $collectionPendingPct;
                @endphp
                <div class="mx-auto mt-6 flex w-44 flex-col items-center">
                    <div class="relative h-44 w-44 rounded-full p-1" style="background: conic-gradient(from -90deg, rgb(124 58 237) 0% {{ $c1 }}%, rgb(99 102 241) {{ $c1 }}% {{ $c2 }}%, rgb(244 63 94) {{ $c2 }}% 100%);">
                        <div class="flex h-full w-full flex-col items-center justify-center rounded-full bg-white">
                            <span class="text-xs font-medium text-slate-500">Collected</span>
                            <span class="text-2xl font-bold text-slate-900">{{ $collectionCollectedPct }}%</span>
                        </div>
                    </div>
                </div>
                <ul class="mt-6 space-y-3 text-sm">
                    <li class="flex items-center justify-between rounded-xl bg-violet-50/80 px-3 py-2">
                        <span class="flex items-center gap-2 text-slate-700"><span class="h-2 w-2 rounded-full bg-violet-600"></span> Collected</span>
                        <span class="font-semibold text-slate-900">{{ \App\Models\Currency::formatAmount((float) $totalRevenue, null) }}</span>
                    </li>
                    <li class="flex items-center justify-between rounded-xl bg-indigo-50/60 px-3 py-2">
                        <span class="flex items-center gap-2 text-slate-700"><span class="h-2 w-2 rounded-full bg-indigo-500"></span> Pending</span>
                        <span class="font-semibold text-slate-900">{{ \App\Models\Currency::formatAmount((float) $pendingCollectionAmount, null) }}</span>
                    </li>
                    <li class="flex items-center justify-between rounded-xl bg-rose-50/80 px-3 py-2">
                        <span class="flex items-center gap-2 text-slate-700"><span class="h-2 w-2 rounded-full bg-rose-500"></span> Overdue</span>
                        <span class="font-semibold text-slate-900">{{ \App\Models\Currency::formatAmount((float) $overdueAmount, null) }}</span>
                    </li>
                </ul>
            @else
                <div class="mt-8 rounded-xl border border-dashed border-slate-200 bg-slate-50/50 py-10 text-center text-sm text-slate-500">
                    No invoice data yet — create your first invoice to see collection insights.
                </div>
            @endif
        </div>
        <div class="rounded-2xl border border-slate-200/80 bg-white p-6 shadow-sm transition-shadow hover:shadow-md">
            <div class="flex items-center justify-between">
                <h3 class="text-lg font-bold text-slate-900">Top customers</h3>
                <a href="{{ route('admin.customers.index') }}" class="text-sm font-semibold text-violet-600 hover:text-violet-700">View all →</a>
            </div>
            <ul class="mt-4 space-y-3">
                @forelse ($topCustomers as $customer)
                    @php
                        $initial = strtoupper(\Illuminate\Support\Str::substr($customer->name ?? '?', 0, 1));
                    @endphp
                    <li class="flex items-center gap-3 rounded-xl border border-transparent px-1 py-2 transition-colors hover:border-slate-100 hover:bg-slate-50/80">
                        <div class="flex h-10 w-10 shrink-0 items-center justify-center overflow-hidden rounded-full bg-gradient-to-br from-violet-100 to-indigo-100 text-sm font-bold text-violet-700">
                            @if ($customer->image && \Illuminate\Support\Facades\Storage::disk('public')->exists($customer->image))
                                <img src="{{ asset('storage/'.$customer->image) }}" alt="" class="h-full w-full object-cover">
                            @else
                                {{ $initial }}
                            @endif
                        </div>
                        <div class="min-w-0 flex-1">
                            <p class="truncate font-semibold text-slate-900">{{ $customer->name }}</p>
                            <p class="text-xs text-slate-500">{{ $customer->invoice_count }} {{ \Illuminate\Support\Str::plural('invoice', $customer->invoice_count) }}</p>
                        </div>
                        <span class="shrink-0 text-sm font-bold text-slate-900">{{ \App\Models\Currency::formatAmount((float) $customer->total_revenue, null) }}</span>
                    </li>
                @empty
                    <li class="py-6 text-center text-sm text-slate-500">No customer revenue yet</li>
                @endforelse
            </ul>
        </div>
    </div>
</div>
