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

@section('content')
<div class="grid grid-cols-2 md:grid-cols-4 gap-4 mb-6">
    <div class="bg-white rounded-xl border border-slate-200 p-4">
        <div class="text-xs uppercase text-slate-500">Total User</div>
        <div class="text-2xl font-bold">{{ number_format($totalUsers) }}</div>
        <div class="text-xs text-slate-500">{{ $totalAdmins }} admin</div>
    </div>
    <div class="bg-white rounded-xl border border-slate-200 p-4">
        <div class="text-xs uppercase text-slate-500">Total Tenant</div>
        <div class="text-2xl font-bold">{{ number_format($totalTenants) }}</div>
        <div class="text-xs text-slate-500">{{ $activeTenants }} aktif · {{ $suspendedTenants }} suspended</div>
    </div>
    <div class="bg-white rounded-xl border border-slate-200 p-4">
        <div class="text-xs uppercase text-slate-500">Total Invoice</div>
        <div class="text-2xl font-bold">{{ number_format($totalInvoices) }}</div>
        <div class="text-xs text-slate-500">+{{ $invoiceHariIni }} hari ini</div>
    </div>
    <div class="bg-white rounded-xl border border-slate-200 p-4">
        <div class="text-xs uppercase text-slate-500">Total Nilai Global</div>
        <div class="text-xl font-bold text-[#1e6fbf]">Rp {{ number_format($totalNilai, 0, ',', '.') }}</div>
    </div>
</div>

<div class="grid grid-cols-1 lg:grid-cols-2 gap-4 mb-6">
    <div class="bg-white rounded-xl border border-slate-200 p-5">
        <h3 class="font-bold text-slate-800 mb-3">Grafik User Baru (6 Bulan)</h3>
        <canvas id="userChart" height="120"></canvas>
    </div>
    <div class="bg-white rounded-xl border border-slate-200 p-5">
        <h3 class="font-bold text-slate-800 mb-3">Grafik Invoice (6 Bulan)</h3>
        <canvas id="invoiceChart" height="120"></canvas>
    </div>
</div>

<div class="grid grid-cols-1 lg:grid-cols-2 gap-4">
    <div class="bg-white rounded-xl border border-slate-200 p-5">
        <h3 class="font-bold text-slate-800 mb-3">User Terbaru</h3>
        <div class="space-y-2">
            @foreach($recentUsers as $u)
                <div class="flex justify-between items-center p-2 rounded hover:bg-slate-50">
                    <div>
                        <div class="font-semibold text-sm">{{ $u->name }}</div>
                        <div class="text-xs text-slate-500">{{ $u->email }}</div>
                    </div>
                    <div class="text-right">
                        <div class="text-xs text-slate-500">{{ $u->tenant->nama_perusahaan ?? 'ADMIN' }}</div>
                        <span class="text-[10px] px-2 py-0.5 rounded {{ $u->role === 'admin' ? 'bg-red-100 text-red-700' : 'bg-blue-100 text-blue-700' }}">{{ strtoupper($u->role) }}</span>
                    </div>
                </div>
            @endforeach
        </div>
    </div>

    <div class="bg-white rounded-xl border border-slate-200 p-5">
        <h3 class="font-bold text-slate-800 mb-3">Tenant Paling Aktif</h3>
        <div class="space-y-2">
            @foreach($topTenants as $t)
                <a href="{{ route('admin.tenants.show', $t) }}" class="flex justify-between items-center p-2 rounded hover:bg-slate-50">
                    <div>
                        <div class="font-semibold text-sm">{{ $t->nama_perusahaan }}</div>
                        <div class="text-xs text-slate-500 font-mono">{{ $t->kode_tenant }}</div>
                    </div>
                    <div class="text-right">
                        <div class="font-bold text-sm">{{ $t->invoices_count }}</div>
                        <div class="text-xs text-slate-500">invoice</div>
                    </div>
                </a>
            @endforeach
        </div>
    </div>
</div>
@endsection

@push('scripts')
<script>
    new Chart(document.getElementById('userChart'), {
        type: 'bar',
        data: {
            labels: {!! json_encode($userGrowth->keys()) !!},
            datasets: [{ label: 'User Baru', data: {!! json_encode($userGrowth->values()) !!}, backgroundColor: '#7f1d1d' }]
        },
        options: { responsive: true, plugins: { legend: { display: false } } }
    });
    new Chart(document.getElementById('invoiceChart'), {
        type: 'line',
        data: {
            labels: {!! json_encode($invoiceGrowth->pluck('bulan')) !!},
            datasets: [
                { label: 'Jumlah Invoice', data: {!! json_encode($invoiceGrowth->pluck('total')) !!}, borderColor: '#1e6fbf', backgroundColor: 'rgba(30,111,191,0.15)', fill: true, tension: 0.3 },
                { label: 'Nilai', data: {!! json_encode($invoiceGrowth->pluck('nilai')) !!}, borderColor: '#059669', backgroundColor: 'rgba(5,150,105,0.15)', fill: true, tension: 0.3, yAxisID: 'y1' }
            ]
        },
        options: {
            responsive: true,
            scales: {
                y: { position: 'left' },
                y1: { position: 'right', grid: { drawOnChartArea: false } }
            }
        }
    });
</script>
@endpush