{{--
=====================================================
Etebarit - by Gisoo Web Solutions
------------------------------------------------------
Gisoo.net
------------------------------------------------------
Copyright (c) 2026 Gisoo Web Solutions
=====================================================
This code is protected by copyright
=====================================================
File: dashboard.blade.php
------------------------------------------------------
Use: The admin landing dashboard: headline counters, the
     twelve-month transaction trend, the payment mix, the
     central wallet, the pending-work queue (shortcuts)
     and a recent-activity feed. Follows the approved
     admin dashboard design export.
=====================================================
--}}

@extends('layouts.admin')

@section('title', __('admin.dashboard.title'))

@section('breadcrumb')
    <x-ui.breadcrumb :items="[
        ['label' => __('admin.breadcrumb.home')],
        ['label' => __('admin.dashboard.breadcrumb')],
    ]" />
@endsection

@php
    use App\Support\Format;

    // Compact money: billions / millions / plain Toman, in Persian digits.
    $compact = static function (int $v): string {
        if ($v >= 1_000_000_000) {
            return Format::persianDigits(rtrim(rtrim(number_format($v / 1_000_000_000, 1, '.', ''), '0'), '.')).' '.__('admin.dashboard.units.billion');
        }
        if ($v >= 1_000_000) {
            return Format::persianDigits(rtrim(rtrim(number_format($v / 1_000_000, 1, '.', ''), '0'), '.')).' '.__('admin.dashboard.units.million');
        }

        return Format::persianDigits(Format::tomanFa($v));
    };

    $kpiMeta = [
        'users' => ['money' => false, 'badge' => 'badge_new', 'tone' => 'up', 'accent' => 'primary', 'url' => route('admin.users.index'),
            'icon' => '<circle cx="9" cy="8" r="3.2"/><path d="M3.5 20a5.5 5.5 0 0 1 11 0"/><path d="M16 5.2a3.2 3.2 0 0 1 0 5.6"/><path d="M18 20a5.2 5.2 0 0 0-3-4.7"/>'],
        'volume' => ['money' => true, 'badge' => 'badge_orders', 'tone' => 'neutral', 'accent' => 'primary', 'url' => route('admin.orders.index'),
            'icon' => '<path d="M4 8h13l-3-3M20 16H7l3 3"/>'],
        'pending_requests' => ['money' => false, 'badge' => 'badge_queued', 'tone' => 'alert', 'accent' => 'secondary', 'url' => route('admin.requests.index'),
            'icon' => '<path d="M15 3H6a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/><path d="M15 3v5h5"/><path d="m8.5 14.5 2 2 4-4"/>'],
        'shops' => ['money' => false, 'badge' => 'badge_new', 'tone' => 'up', 'accent' => 'primary', 'url' => route('admin.shops.index'),
            'icon' => '<path d="M4 9.5 5.2 4h13.6L20 9.5"/><path d="M5.5 12v8h13v-8"/>'],
    ];

    $activityIcons = [
        'user' => '<circle cx="12" cy="8" r="3.4"/><path d="M5.5 20a6.5 6.5 0 0 1 13 0"/>',
        'request' => '<path d="M15 3H6a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/><path d="M15 3v5h5"/><path d="m8.5 14.5 2 2 4-4"/>',
        'shop' => '<path d="M4 21V6l7-3v18"/><path d="M11 8h6a2 2 0 0 1 2 2v11"/><path d="M4 21h17"/>',
        'withdraw' => '<rect x="2.5" y="9" width="12" height="9" rx="1.8"/><circle cx="8.5" cy="13.5" r="2"/><path d="M19 16V6"/><path d="m15.5 9.5 3.5-3.5 3.5 3.5"/>',
    ];

    $toneClasses = [
        'green' => 'bg-[#e7f7ee] text-green-600',
        'purple' => 'bg-[#efeafb] text-primary-600',
        'amber' => 'bg-[#fff5e6] text-amber-600',
    ];

    $queueIcons = [
        'requests' => '<path d="M15 3H6a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/><path d="M15 3v5h5"/><path d="m8.5 14.5 2 2 4-4"/>',
        'verifications' => '<circle cx="9" cy="8" r="3.2"/><path d="M3.5 20a5.5 5.5 0 0 1 11 0"/><path d="M15 11l2 2 4-4"/>',
        'shop_applications' => '<path d="M4 9.5 5.2 4h13.6L20 9.5"/><path d="M5.5 12v8h13v-8"/>',
        'gateways' => '<circle cx="12" cy="12" r="9"/><path d="M3 12h18"/><path d="M12 3a15 15 0 0 1 0 18 15 15 0 0 1 0-18z"/>',
        'withdrawals' => '<rect x="2.5" y="9" width="12" height="9" rx="1.8"/><circle cx="8.5" cy="13.5" r="2"/><path d="M19 16V6"/><path d="m15.5 9.5 3.5-3.5 3.5 3.5"/>',
        'settlements' => '<path d="M4 9.5 5.2 4h13.6L20 9.5"/><path d="M5.5 12v8h13v-8"/><path d="M12 19V13M9 16l3 3 3-3"/>',
        'bank_accounts' => '<path d="M3 21h18"/><path d="M5 21V10M9 21V10M15 21V10M19 21V10"/><path d="M3 10 12 4l9 6z"/>',
    ];
@endphp

@section('page')
    <h1 class="mb-1 text-2xl font-bold tracking-tight">{{ __('admin.dashboard.heading') }}</h1>

    <x-ui.info-box class="mt-4">
        {{ __('admin.dashboard.info') }}
    </x-ui.info-box>

    {{-- ===== KPI row ===== --}}
    <div class="mt-6 grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-4">
        @foreach ($kpiMeta as $key => $meta)
            @php $kpi = $data['kpis'][$key]; @endphp
            <a href="{{ $meta['url'] }}" class="block rounded-2xl border border-line bg-white p-5 transition hover:border-primary-600/40 hover:shadow-sm">
                <div class="mb-3.5 flex items-center justify-between">
                    <span @class([
                        'flex size-11 items-center justify-center rounded-[13px]',
                        'bg-secondary-50 text-secondary-500' => $meta['accent'] === 'secondary',
                        'bg-[#efeafb] text-primary-600' => $meta['accent'] !== 'secondary',
                    ])>
                        <svg class="size-[22px]" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.9" stroke-linecap="round" stroke-linejoin="round">{!! $meta['icon'] !!}</svg>
                    </span>
                    <span @class([
                        'rounded-lg px-2.5 py-1 text-[12px] font-bold',
                        'bg-[#e7f7ee] text-green-600' => $meta['tone'] === 'up',
                        'bg-secondary-50 text-secondary-500' => $meta['tone'] === 'alert',
                        'bg-[#f2f0fa] text-primary-600' => $meta['tone'] === 'neutral',
                    ])>
                        @fa($kpi['badge']) {{ __('admin.dashboard.kpis.'.$meta['badge']) }}
                    </span>
                </div>
                <div class="text-[26px] font-black leading-none tracking-tight" dir="ltr">
                    {{ $meta['money'] ? Format::tomanFa($kpi['value']) : Format::persianDigits((string) $kpi['value']) }}
                </div>
                <div class="mt-2 text-[13px] text-ink-muted">{{ __('admin.dashboard.kpis.'.$key) }}</div>
            </a>
        @endforeach
    </div>

    {{-- ===== Good-standing distribution ===== --}}
    @php
        $stTiers = array_reverse(\App\Support\GoodStanding::tiers());
        $stTotal = (int) $standing['total'];
        $stAvgLevel = \App\Support\GoodStanding::levelForScore($standing['average']);
    @endphp
    <div class="mt-5 rounded-2xl border border-line bg-white p-5.5">
        <div class="mb-5">
            <div class="text-[15px] font-bold">{{ __('admin.dashboard.standing.title') }}</div>
            <div class="mt-1 text-[12.5px] text-ink-muted">{{ __('admin.dashboard.standing.subtitle', ['count' => \App\Support\Format::persianDigits((string) $stTotal)]) }}</div>
        </div>

        <div class="grid gap-x-8 gap-y-6 lg:grid-cols-[1.5fr_1fr]">
            {{-- Per-level bars --}}
            <div class="flex flex-col justify-center gap-2.5">
                @foreach ($stTiers as $tier)
                    @php
                        $stCount = (int) ($standing['counts'][$tier['index']] ?? 0);
                        $stPct = $stTotal > 0 ? round($stCount / $stTotal * 100) : 0;
                    @endphp
                    <div class="flex items-center gap-3">
                        <span class="inline-flex w-[104px] shrink-0 items-center gap-1.5 whitespace-nowrap text-[12.5px] font-bold">
                            <span class="size-2.5 shrink-0 rounded-full" style="background: {{ $tier['color'] }}"></span>
                            {{ $tier['label'] }}
                        </span>
                        <div class="h-3 flex-1 overflow-hidden rounded-full bg-[#f2f0f7]">
                            <div class="h-full rounded-full transition-all" style="width: {{ $stPct }}%; background: {{ $tier['color'] }}"></div>
                        </div>
                        <span class="w-20 shrink-0 text-left text-[12px] text-ink-muted">
                            <span class="font-bold text-ink">{{ \App\Support\Format::persianDigits((string) $stCount) }}</span>
                            <span dir="ltr">({{ \App\Support\Format::persianDigits((string) $stPct) }}٪)</span>
                        </span>
                    </div>
                @endforeach
            </div>

            {{-- Average summary --}}
            <div class="flex flex-col justify-center rounded-2xl border border-line bg-[#faf9fd] p-5">
                <div class="text-[12.5px] text-ink-muted">{{ __('admin.dashboard.standing.average') }}</div>
                <div class="mb-3 mt-1 flex items-baseline gap-2">
                    <span class="text-[20px] font-bold" style="color: {{ \App\Support\GoodStanding::color($stAvgLevel) }}">{{ \App\Support\GoodStanding::label($stAvgLevel) }}</span>
                    <span class="text-[13px] text-ink-faint" dir="ltr">{{ \App\Support\Format::persianDigits((string) $standing['average']) }} / {{ \App\Support\Format::persianDigits((string) \App\Support\GoodStanding::MAX_SCORE) }}</span>
                </div>
                <x-standing.bar :score="$standing['average']" :level="$stAvgLevel" :show-meta="false" />
            </div>
        </div>
    </div>

    {{-- ===== Charts (tabbed, Chart.js) ===== --}}
    @php
        $units = [
            'billion' => __('admin.dashboard.units.billion'),
            'million' => __('admin.dashboard.units.million'),
            'toman' => __('admin.toman'),
        ];

        $mixColors = ['installment' => '#563bb1', 'cash' => '#e80e23', 'online' => '#16a34a'];
        $mixParts = array_map(fn ($p) => ['label' => __('admin.dashboard.mix.'.$p['key']), 'value' => $p['amount'], 'color' => $mixColors[$p['key']]], $data['mix']['parts']);

        $creditColors = ['pending' => '#d97706', 'approved' => '#563bb1', 'active' => '#16a34a', 'rejected' => '#e80e23', 'expired' => '#78748c'];
        $creditParts = array_map(fn ($s) => ['label' => __('admin.requests.statuses.'.$s['key']), 'value' => $s['value'], 'color' => $creditColors[$s['key']]], $data['credit_status']);

        $instColors = ['upcoming' => '#3b6bd8', 'due' => '#d97706', 'overdue' => '#e80e23', 'paid' => '#16a34a'];
        $instParts = array_map(fn ($s) => ['label' => __('admin.installments.statuses.'.$s['key']), 'value' => $s['value'], 'color' => $instColors[$s['key']]], $data['installment_status']);

        $instAmts = [
            ['label' => __('admin.dashboard.installments.outstanding'), 'value' => $data['installments']['outstanding'], 'color' => '#563bb1'],
            ['label' => __('admin.dashboard.installments.overdue'), 'value' => $data['installments']['overdue_amount'], 'color' => '#e80e23'],
            ['label' => __('admin.dashboard.installments.paid'), 'value' => $data['installments']['paid_total'], 'color' => '#16a34a'],
            ['label' => __('admin.dashboard.installments.penalties'), 'value' => $data['installments']['penalties'], 'color' => '#d97706'],
        ];

        // Compact server-side specs; the JS builder turns each into a branded chart.
        $labels = fn ($rows) => array_map(fn ($r) => $r['label'], $rows);
        $vals = fn ($rows, $k) => array_map(fn ($r) => $r[$k], $rows);
        $sum = fn ($rows, $k) => array_sum($vals($rows, $k));

        $trendPts = $data['trend']['points'];
        $uPts = $data['users_trend']['points'];

        $trendSpec = ['kind' => 'bar', 'labels' => array_map(fn ($p) => $p['label'], $trendPts), 'values' => array_map(fn ($p) => $p['amount'], $trendPts), 'color' => '#563bb1', 'money' => true, 'units' => $units];
        $mixSpec = ['kind' => 'doughnut', 'labels' => $labels($mixParts), 'values' => $vals($mixParts, 'value'), 'colors' => $vals($mixParts, 'color'), 'money' => true, 'units' => $units, 'center' => $compact($data['mix']['total']), 'centersub' => __('admin.toman')];
        $usersSpec = ['kind' => 'line', 'labels' => array_map(fn ($p) => $p['label'], $uPts), 'values' => array_map(fn ($p) => $p['value'], $uPts), 'color' => '#563bb1', 'money' => false];
        $creditSpec = ['kind' => 'doughnut', 'labels' => $labels($creditParts), 'values' => $vals($creditParts, 'value'), 'colors' => $vals($creditParts, 'color'), 'money' => false, 'centersub' => __('admin.dashboard.charts.requests_word')];
        $instSpec = ['kind' => 'doughnut', 'labels' => $labels($instParts), 'values' => $vals($instParts, 'value'), 'colors' => $vals($instParts, 'color'), 'money' => false, 'centersub' => __('admin.dashboard.charts.installments_word')];
        $instAmtSpec = ['kind' => 'hbar', 'labels' => $labels($instAmts), 'values' => $vals($instAmts, 'value'), 'colors' => $vals($instAmts, 'color'), 'money' => true, 'units' => $units];

        $trendTotal = array_sum(array_map(fn ($p) => $p['amount'], $trendPts));
        $usersTotal = array_sum(array_map(fn ($p) => $p['value'], $uPts));
        $creditTotal = $sum($creditParts, 'value');
        $instTotal = $sum($instParts, 'value');
        $instAmtTotal = $sum($instAmts, 'value');
    @endphp

    <div class="mt-5 rounded-2xl border border-line bg-white p-5.5" x-data="{ tab: 'transactions' }">
        <div class="mb-5 inline-flex flex-wrap gap-0.5 rounded-xl bg-[#f2f0fa] p-1">
            @foreach (['transactions', 'users', 'installments'] as $t)
                <button type="button" x-on:click="tab = @js($t); $dispatch('charts-reflow')"
                        x-bind:class="tab === @js($t) ? 'bg-white text-primary-600 shadow-sm' : 'text-ink-muted hover:text-primary-600'"
                        class="rounded-[9px] px-4 py-2 text-[13px] font-bold transition">{{ __('admin.dashboard.charts.tabs.'.$t) }}</button>
            @endforeach
        </div>

        {{-- Tab: transactions --}}
        <div x-show="tab === 'transactions'" class="grid grid-cols-1 gap-6 lg:grid-cols-[1.7fr_1fr]">
            <div>
                <div class="mb-4 flex items-center justify-between">
                    <h3 class="text-[14px] font-bold">{{ __('admin.dashboard.trend.title') }}</h3>
                    <span class="text-[12.5px] text-ink-faint">{{ __('admin.dashboard.trend.subtitle') }}</span>
                </div>
                @if ($trendTotal === 0)
                    <p class="py-16 text-center text-sm text-ink-muted">{{ __('admin.dashboard.trend.empty') }}</p>
                @else
                    <div class="relative" style="height:230px" x-data="dashChart(@js($trendSpec))" x-on:charts-reflow.window="reflow()">
                        <canvas x-ref="canvas"></canvas>
                    </div>
                @endif
            </div>
            <div>
                <h3 class="mb-3 text-[14px] font-bold">{{ __('admin.dashboard.mix.title') }}</h3>
                @if ($data['mix']['total'] === 0)
                    <p class="py-16 text-center text-sm text-ink-muted">{{ __('admin.dashboard.mix.empty') }}</p>
                @else
                    <div class="relative" style="height:250px" x-data="dashChart(@js($mixSpec))" x-on:charts-reflow.window="reflow()">
                        <canvas x-ref="canvas"></canvas>
                    </div>
                @endif
            </div>
        </div>

        {{-- Tab: users + credit --}}
        <div x-show="tab === 'users'" x-cloak class="grid grid-cols-1 gap-6 lg:grid-cols-[1.7fr_1fr]">
            <div>
                <div class="mb-4 flex items-center justify-between">
                    <h3 class="text-[14px] font-bold">{{ __('admin.dashboard.charts.users_trend') }}</h3>
                    <span class="text-[12.5px] text-ink-faint">{{ __('admin.dashboard.charts.users_trend_sub') }}</span>
                </div>
                @if ($usersTotal === 0)
                    <p class="py-16 text-center text-sm text-ink-muted">{{ __('admin.dashboard.charts.no_users') }}</p>
                @else
                    <div class="relative" style="height:230px" x-data="dashChart(@js($usersSpec))" x-on:charts-reflow.window="reflow()">
                        <canvas x-ref="canvas"></canvas>
                    </div>
                @endif
            </div>
            <div>
                <h3 class="mb-3 text-[14px] font-bold">{{ __('admin.dashboard.charts.credit_status') }}</h3>
                @if ($creditTotal === 0)
                    <p class="py-16 text-center text-sm text-ink-muted">{{ __('admin.dashboard.charts.no_credit') }}</p>
                @else
                    <div class="relative" style="height:250px" x-data="dashChart(@js($creditSpec))" x-on:charts-reflow.window="reflow()">
                        <canvas x-ref="canvas"></canvas>
                    </div>
                @endif
            </div>
        </div>

        {{-- Tab: installments --}}
        <div x-show="tab === 'installments'" x-cloak class="grid grid-cols-1 gap-6 lg:grid-cols-2">
            <div>
                <h3 class="mb-3 text-[14px] font-bold">{{ __('admin.dashboard.charts.installment_status') }}</h3>
                @if ($instTotal === 0)
                    <p class="py-16 text-center text-sm text-ink-muted">{{ __('admin.dashboard.charts.no_installments') }}</p>
                @else
                    <div class="relative" style="height:250px" x-data="dashChart(@js($instSpec))" x-on:charts-reflow.window="reflow()">
                        <canvas x-ref="canvas"></canvas>
                    </div>
                @endif
            </div>
            <div>
                <h3 class="mb-3 text-[14px] font-bold">{{ __('admin.dashboard.charts.installment_amounts') }}</h3>
                @if ($instAmtTotal === 0)
                    <p class="py-16 text-center text-sm text-ink-muted">{{ __('admin.dashboard.charts.no_installments') }}</p>
                @else
                    <div class="relative" style="height:250px" x-data="dashChart(@js($instAmtSpec))" x-on:charts-reflow.window="reflow()">
                        <canvas x-ref="canvas"></canvas>
                    </div>
                @endif
            </div>
        </div>
    </div>

    {{-- ===== Central wallet + revenue ===== --}}
    @php
        $c = $data['central'];
        $centralNet = $c['central_balance'] - ($c['shops_owed'] + $c['users_cash'] + $c['users_installment'] + $c['pending_withdrawals'] + $c['pending_settlements']);
    @endphp
    @if ($centralNet < 0)
        <a href="{{ route('admin.central.index') }}" class="mt-5 flex items-start gap-3 rounded-xl border border-secondary-500/25 bg-secondary-50 px-4 py-3.5 transition hover:bg-[#fbe4e7]">
            <svg class="mt-0.5 size-5 shrink-0 text-secondary-500" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 3 2 20h20L12 3z"/><line x1="12" y1="10" x2="12" y2="14.5"/><circle cx="12" cy="17.5" r="0.5"/></svg>
            <p class="text-[13px] font-bold leading-7 text-secondary-600">{{ __('admin.central.negative_warning') }}</p>
        </a>
    @endif
    <div class="mt-5 grid grid-cols-1 gap-5 lg:grid-cols-[1fr_2fr]">
        <a href="{{ route('admin.central.index') }}" @class([
            'flex flex-col justify-center overflow-hidden rounded-2xl p-6 text-white transition hover:opacity-95',
            'bg-gradient-to-l from-primary-600 to-[#6f52c8]' => $centralNet >= 0,
            'bg-gradient-to-l from-[#b70b1c] to-secondary-500' => $centralNet < 0,
        ])>
            <div class="flex items-center justify-between gap-2 text-[13px] font-bold text-white/85">
                <span class="flex items-center gap-2">
                    <svg class="size-4.5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="3" width="18" height="18" rx="2.5"/><circle cx="12" cy="12" r="3.5"/><path d="M12 3v2M12 19v2M12 10.5v3M10.5 12h3"/></svg>
                    {{ __('admin.dashboard.central.title') }}
                </span>
                <svg class="size-4 text-white/70" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M15 6l-6 6 6 6"/></svg>
            </div>
            <div class="mt-4 flex items-baseline gap-2">
                <span class="text-[30px] font-black leading-none tracking-tight" dir="ltr">{{ $centralNet < 0 ? '−' : '' }}@toman(abs($centralNet))</span>
                <span class="text-[14px] font-bold text-white/75">{{ __('admin.toman') }}</span>
            </div>
            <p class="mt-3 text-[11.5px] leading-6 text-white/70">{{ __('admin.central.net_hint') }}</p>
        </a>
        <div class="grid grid-cols-1 gap-4 sm:grid-cols-2 xl:grid-cols-4">
            <x-admin.stat-tile :label="__('admin.dashboard.revenue.credit_fees')" :amount="$data['central']['credit_fees']" />
            <x-admin.stat-tile :label="__('admin.dashboard.revenue.merchant_fees')" :amount="$data['central']['merchant_fees']" />
            <x-admin.stat-tile :label="__('admin.dashboard.revenue.penalties')" :amount="$data['central']['penalties']" />
            <x-admin.stat-tile :label="__('admin.dashboard.revenue.total')" :amount="$data['central']['revenue_total']" accent />
        </div>
    </div>

    {{-- ===== Installment book ===== --}}
    <h2 class="mb-3 mt-8 text-[15px] font-bold">{{ __('admin.dashboard.installments.title') }}</h2>
    <div class="grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-4">
        <a href="{{ route('admin.installments.index') }}" class="block rounded-2xl border border-primary-100 bg-white px-5 py-4.5 transition hover:opacity-90">
            <div class="text-[12.5px] font-medium text-ink-muted">{{ __('admin.dashboard.installments.outstanding') }}</div>
            <div class="mt-2 flex items-baseline gap-1.5">
                <span class="text-[22px] font-black leading-none tracking-tight text-primary-600" dir="ltr">@toman($data['installments']['outstanding'])</span>
                <span class="text-[12px] font-bold text-ink-faint">{{ __('admin.toman') }}</span>
            </div>
            <p class="mt-2 text-[11.5px] text-ink-faint">@fa($data['installments']['outstanding_count']) {{ __('admin.dashboard.installments.count_suffix') }}</p>
        </a>
        <a href="{{ route('admin.installments.index', ['status' => 'overdue']) }}" class="block rounded-2xl border border-secondary-100 bg-white px-5 py-4.5 transition hover:opacity-90">
            <div class="text-[12.5px] font-medium text-ink-muted">{{ __('admin.dashboard.installments.overdue') }}</div>
            <div class="mt-2 flex items-baseline gap-1.5">
                <span class="text-[22px] font-black leading-none tracking-tight text-secondary-500" dir="ltr">@toman($data['installments']['overdue_amount'])</span>
                <span class="text-[12px] font-bold text-ink-faint">{{ __('admin.toman') }}</span>
            </div>
            <p class="mt-2 text-[11.5px] text-ink-faint">@fa($data['installments']['overdue_count']) {{ __('admin.dashboard.installments.count_suffix') }}</p>
        </a>
        <a href="{{ route('admin.installments.index', ['status' => 'due']) }}" class="block rounded-2xl border border-line bg-white px-5 py-4.5 transition hover:opacity-90">
            <div class="text-[12.5px] font-medium text-ink-muted">{{ __('admin.dashboard.installments.due') }}</div>
            <div class="mt-2 text-[22px] font-black leading-none tracking-tight text-amber-600">@fa($data['installments']['due_count'])</div>
            <p class="mt-2 text-[11.5px] text-ink-faint">{{ __('admin.dashboard.installments.count_suffix') }}</p>
        </a>
        <x-admin.stat-tile :label="__('admin.dashboard.installments.penalties')" :amount="$data['installments']['penalties']" tone="muted" />
    </div>

    {{-- ===== Installment flows through the central wallet ===== --}}
    <h2 class="mb-3 mt-8 text-[15px] font-bold">{{ __('admin.dashboard.flows.title') }}</h2>
    <div class="grid grid-cols-1 gap-4 sm:grid-cols-3">
        <x-admin.stat-tile :label="__('admin.dashboard.flows.repayments')" :amount="$data['central']['repayments']" :hint="__('admin.dashboard.flows.repayments_hint')" />
        <x-admin.stat-tile :label="__('admin.dashboard.flows.reversed')" :amount="$data['central']['reversed_out']" :hint="__('admin.dashboard.flows.reversed_hint')" tone="muted" />
        <x-admin.stat-tile :label="__('admin.dashboard.installments.paid')" :amount="$data['installments']['paid_total']" />
    </div>

    {{-- ===== What the system owes outward ===== --}}
    <h2 class="mb-1 mt-8 text-[15px] font-bold">{{ __('admin.dashboard.liabilities.title') }}</h2>
    <p class="mb-3 text-[12.5px] text-ink-muted">{{ __('admin.dashboard.liabilities.subtitle') }}</p>
    <div class="grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-5">
        <x-admin.stat-tile :label="__('admin.dashboard.liabilities.shops_owed')" :amount="$data['central']['shops_owed']" />
        <x-admin.stat-tile :label="__('admin.dashboard.liabilities.users_cash')" :amount="$data['central']['users_cash']" />
        <x-admin.stat-tile :label="__('admin.dashboard.liabilities.users_installment')" :amount="$data['central']['users_installment']" />
        <a href="{{ route('admin.withdrawals.index') }}" class="block transition hover:opacity-90">
            <x-admin.stat-tile :label="__('admin.dashboard.liabilities.pending_withdrawals')" :amount="$data['central']['pending_withdrawals']" />
        </a>
        <x-admin.stat-tile :label="__('admin.dashboard.liabilities.pending_settlements')" :amount="$data['central']['pending_settlements']" />
    </div>

    {{-- ===== Counts ===== --}}
    <h2 class="mb-3 mt-8 text-[15px] font-bold">{{ __('admin.dashboard.counts.title') }}</h2>
    <div class="grid grid-cols-2 gap-4 sm:grid-cols-3 lg:grid-cols-5">
        @php
            $countLinks = [
                'users' => route('admin.users.index'),
                'shops' => route('admin.shops.index'),
                'active_credits' => route('admin.requests.index'),
                'overdue_installments' => route('admin.installments.index', ['status' => 'overdue']),
                'pending_withdrawals' => route('admin.withdrawals.index'),
            ];
        @endphp
        @foreach (['users', 'shops', 'active_credits', 'overdue_installments', 'pending_withdrawals'] as $key)
            <a href="{{ $countLinks[$key] }}" @class([
                'block rounded-2xl border bg-white px-5 py-4 text-center transition hover:border-primary-600/40',
                'border-secondary-100' => $key === 'overdue_installments' && $data['central']['counts'][$key] > 0,
                'border-line' => ! ($key === 'overdue_installments' && $data['central']['counts'][$key] > 0),
            ])>
                <div @class([
                    'text-[26px] font-black leading-none',
                    'text-secondary-500' => $key === 'overdue_installments' && $data['central']['counts'][$key] > 0,
                    'text-ink' => ! ($key === 'overdue_installments' && $data['central']['counts'][$key] > 0),
                ])>@fa($data['central']['counts'][$key])</div>
                <div class="mt-2 text-[12.5px] text-ink-muted">{{ __("admin.dashboard.counts.{$key}") }}</div>
            </a>
        @endforeach
    </div>

    {{-- ===== Queue (shortcuts) + recent activity ===== --}}
    <div class="mt-8 grid grid-cols-1 gap-5 lg:grid-cols-2">
        {{-- Pending-work queue: each row jumps straight to the page that clears it --}}
        <div class="rounded-2xl border border-line bg-white p-5.5">
            <h2 class="mb-4 text-[15px] font-bold">{{ __('admin.dashboard.queue.title') }}</h2>
            @forelse ($data['queue'] as $row)
                <a href="{{ $row['url'] }}" @class(['flex items-center gap-3 rounded-[13px] border border-line p-3 transition hover:border-primary-600/40 hover:bg-[#faf9fd]', 'mt-3' => ! $loop->first])>
                    <span class="flex size-9 shrink-0 items-center justify-center rounded-[10px] bg-[#fff5e6] text-amber-600">
                        <svg class="size-[17px]" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.9" stroke-linecap="round" stroke-linejoin="round">{!! $queueIcons[$row['key']] !!}</svg>
                    </span>
                    <div class="min-w-0 flex-1">
                        <div class="text-[13.5px] font-bold">{{ __('admin.dashboard.queue.'.$row['key']) }}</div>
                    </div>
                    <span class="flex h-6 min-w-6 items-center justify-center rounded-full bg-secondary-500 px-1.5 text-[12px] font-bold text-white">@fa($row['count'])</span>
                    <span class="rounded-[9px] bg-primary-600 px-3.5 py-1.5 text-[12px] font-bold text-white">{{ __('admin.dashboard.queue.review') }}</span>
                </a>
            @empty
                <div class="flex flex-col items-center gap-3 py-10 text-center">
                    <span class="flex size-12 items-center justify-center rounded-2xl bg-[#e7f7ee] text-green-600">
                        <svg class="size-6" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"><path d="M20 6 9 17l-5-5"/></svg>
                    </span>
                    <p class="text-[13px] text-ink-muted">{{ __('admin.dashboard.queue.empty') }}</p>
                </div>
            @endforelse
        </div>

        {{-- Recent activity feed --}}
        <div class="rounded-2xl border border-line bg-white p-5.5">
            <h2 class="mb-4 text-[15px] font-bold">{{ __('admin.dashboard.activity.title') }}</h2>
            @forelse ($data['activity'] as $item)
                <div @class(['flex items-center gap-3', 'mt-4' => ! $loop->first])>
                    <span @class(['flex size-9 shrink-0 items-center justify-center rounded-[11px]', $toneClasses[$item['tone']]])>
                        <svg class="size-[17px]" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">{!! $activityIcons[$item['icon']] !!}</svg>
                    </span>
                    <div class="min-w-0 flex-1">
                        <div class="text-[13.5px] font-bold">{{ $item['title'] }}</div>
                        <div class="truncate text-[12px] text-ink-faint">{{ $item['subtitle'] }}</div>
                    </div>
                    <span class="shrink-0 text-[11px] text-ink-faint">@jalali($item['at'])</span>
                </div>
            @empty
                <p class="py-10 text-center text-sm text-ink-muted">{{ __('admin.dashboard.activity.empty') }}</p>
            @endforelse
        </div>
    </div>
@endsection