@extends('layouts.admin')
@section('title', 'Dashboard')
@section('page-title', 'Dashboard')

@section('content')
{{-- KPI cards --}}
<div class="grid grid-cols-2 gap-4 lg:grid-cols-4">
    @foreach([
        ['Total Member', number_format($stats['members']), 'users', 'text-qr-accent-light'],
        ['Total Video', number_format($stats['videos']), 'film', 'text-blue-300'],
        ['Total Viewer', number_format($stats['viewers']), 'play-circle', 'text-purple-300'],
        ['Pendapatan', 'Rp'.number_format($stats['transactions_total'],0,',','.'), 'cash', 'text-qr-gold'],
    ] as [$label,$value,$icon,$color])
    <div class="card p-5">
        <div class="flex items-center justify-between">
            <x-icon :name="$icon" class="w-7 h-7 {{ $color }}"/>
        </div>
        <p class="mt-3 text-2xl font-extrabold">{{ $value }}</p>
        <p class="text-sm text-qr-muted">{{ $label }}</p>
    </div>
    @endforeach
</div>

{{-- Secondary stats --}}
<div class="mt-4 grid grid-cols-2 gap-4 lg:grid-cols-4">
    @foreach([
        ['Likes', number_format($stats['likes'])],
        ['Komentar', number_format($stats['comments'])],
        ['Event', number_format($stats['events'])],
        ['Transaksi Pending', number_format($stats['pending_count'])],
    ] as [$label,$value])
    <div class="card p-4">
        <p class="text-xl font-bold">{{ $value }}</p>
        <p class="text-xs text-qr-muted">{{ $label }}</p>
    </div>
    @endforeach
</div>

<div class="mt-6 grid gap-6 lg:grid-cols-2">
    {{-- Transaksi terbaru --}}
    <div class="card p-5">
        <div class="mb-4 flex items-center justify-between">
            <h2 class="font-bold">Transaksi Terbaru</h2>
            <a href="{{ route('admin.transactions.index') }}" class="text-sm text-qr-accent-light">Semua</a>
        </div>
        <div class="space-y-3">
            @forelse($latestTransactions as $t)
            <div class="flex items-center justify-between text-sm">
                <div>
                    <p class="font-semibold">{{ $t->code }}</p>
                    <p class="text-xs text-qr-muted">{{ $t->user?->name }} · {{ $t->created_at->diffForHumans() }}</p>
                </div>
                <div class="text-right">
                    <p class="font-bold">Rp{{ number_format($t->total_amount,0,',','.') }}</p>
                    <p class="text-xs {{ in_array($t->status,['paid','confirmed']) ? 'text-qr-accent-light' : 'text-qr-gold' }}">{{ $t->status }}</p>
                </div>
            </div>
            @empty
            <p class="text-sm text-qr-muted">Belum ada transaksi.</p>
            @endforelse
        </div>
    </div>

    {{-- Member terbaru --}}
    <div class="card p-5">
        <div class="mb-4 flex items-center justify-between">
            <h2 class="font-bold">Member Terbaru</h2>
            <a href="{{ route('admin.members.index') }}" class="text-sm text-qr-accent-light">Semua</a>
        </div>
        <div class="space-y-3">
            @forelse($latestMembers as $m)
            <div class="flex items-center gap-3">
                <div class="grid h-9 w-9 place-items-center rounded-full bg-qr-accent/20 text-sm font-bold text-qr-accent-light">
                    {{ strtoupper(substr($m->name,0,1)) }}
                </div>
                <div class="flex-1 text-sm">
                    <p class="font-semibold">{{ $m->name }}</p>
                    <p class="text-xs text-qr-muted">{{ $m->email }}</p>
                </div>
                <span class="text-xs text-qr-muted">{{ $m->created_at->diffForHumans() }}</span>
            </div>
            @empty
            <p class="text-sm text-qr-muted">Belum ada member.</p>
            @endforelse
        </div>
    </div>
</div>
@endsection