<x-layouts.dashboard title="Admin Dashboard">
    @php
        $statDesign = [
            'Total Clients' => ['clients', 'blue', '+12.4%', 'All client accounts'],
            'Active Clients' => ['profile', 'green', '+4.8%', 'Retained this month'],
            'Active Plans' => ['plans', 'purple', '+8.1%', 'Monthly packages'],
            'Pending Requests' => ['requests', 'orange', 'Needs review', 'Client queue'],
            'Pending Payments' => ['payments', 'blue', 'Manual proof', 'Approval waiting'],
            'Remaining Tasks' => ['tasks', 'blue', 'In flow', 'Open work items'],
            'Completed Tasks' => ['downloads', 'green', '+18.6%', 'Delivered output'],
            'Monthly Revenue' => ['reports', 'purple', '+10.2%', 'Approved payments'],
            'Today Work' => ['calendar', 'orange', 'Due today', 'Priority lane'],
            'Designers' => ['designer', 'blue', 'Creative team', 'Available makers'],
        ];
    @endphp
    <div class="stats saas-stats">
        @foreach ($stats as $label => $value)
            @php
                [$icon, $tone, $growth, $detail] = $statDesign[$label];
            @endphp
            <a class="stat stat-link saas-stat" href="{{ $statLinks[$label] }}">
                <span class="stat-top"><i class="stat-icon {{ $tone }}"><x-sidebar-icon :name="$icon"/></i><em><x-sidebar-icon name="more"/></em></span>
                <small>{{ $label }}</small>
                <strong>{{ is_numeric($value) ? number_format($value) : $value }}</strong>
                <span class="stat-growth">{{ $growth }} <b>{{ $detail }}</b></span>
            </a>
        @endforeach
    </div>
    <div class="dashboard-charts">
        <section class="card saas-chart revenue-card">
            <header><div><h3>Revenue Overview</h3><p>Approved agency revenue</p></div><button class="ghost small">This Month</button></header>
            <div class="revenue-plot"><svg viewBox="0 0 560 210" preserveAspectRatio="none"><path d="M0 170 C70 164 82 122 145 132 S242 86 294 102 S382 42 440 64 S515 28 560 46"/><path class="plot-fill" d="M0 170 C70 164 82 122 145 132 S242 86 294 102 S382 42 440 64 S515 28 560 46 V210 H0Z"/></svg><span>Jan</span><span>Feb</span><span>Mar</span><span>Apr</span><span>May</span><span>Jun</span></div>
        </section>
        <section class="card saas-chart task-donut">
            <header><div><h3>Task Progress</h3><p>Completed vs remaining</p></div><button class="ghost small">This Month</button></header>
            @php
                $taskTotal = max(($stats['Completed Tasks'] ?? 0) + ($stats['Remaining Tasks'] ?? 0), 1);
                $taskDone = (int) round((($stats['Completed Tasks'] ?? 0) / $taskTotal) * 100);
            @endphp
            <div class="donut-panel"><div class="ring-chart" style="--value:{{ $taskDone }}"><b>{{ $taskDone }}%</b><small>done</small></div><div><span><i></i>Completed</span><span><i></i>Remaining</span></div></div>
        </section>
        <section class="card saas-chart dashboard-pulse">
            <header><div><h3>Plus Tracker</h3><p>Current work pulse</p></div><a class="ghost small" href="{{ route('admin.tracker') }}">View</a></header>
            @foreach ([
                ['Remaining Monthly Work', $stats['Remaining Tasks'], 'blue'],
                ['Remaining Requests', $stats['Pending Requests'], 'blue'],
                ['Due Tasks', $stats['Today Work'], 'orange'],
                ['Overdue Tasks', max(($stats['Remaining Tasks'] ?? 0) - ($stats['Today Work'] ?? 0), 0), 'red'],
                ['Completed Work', $stats['Completed Tasks'], 'green'],
                ['Pending Work', $stats['Pending Payments'], 'blue'],
            ] as [$pulseLabel, $pulseValue, $tone])
                <div class="pulse-row"><span>{{ $pulseLabel }}</span><div class="progress {{ $tone }}"><i style="width:{{ min(max($pulseValue * 12, 8), 100) }}%"></i></div><b>{{ $pulseValue }}</b></div>
            @endforeach
        </section>
    </div>
    <div class="grid two dashboard-tables">
        <div class="table-card"><header class="table-head"><div><h3>G.Work / Task Management</h3><p>Latest designer and client work</p></div><a class="ghost small" href="{{ route('admin.tasks.index') }}">View All</a></header>@include('partials.task-table', ['tasks' => $tasks])</div>
        <div class="table-card"><header class="table-head"><div><h3>Pending Payments</h3><p>Manual proof review queue</p></div><a class="ghost small" href="{{ route('admin.payments.index') }}">View All</a></header>@include('partials.payment-table', ['payments' => $payments])</div>
    </div>
</x-layouts.dashboard>
