@extends('admin.layout')
@section('title', 'Dashboard')
@section('subtitle', 'Ringkasan data SeribuJasa')

@php
    $orderMeta = [
        'searching'   => ['Mencari', 'amber'],
        'accepted'    => ['Diterima', 'blue'],
        'on_the_way'  => ['Menuju lokasi', 'blue'],
        'in_progress' => ['Dikerjakan', 'blue'],
        'completed'   => ['Selesai', 'green'],
        'cancelled'   => ['Dibatalkan', 'red'],
        'rejected'    => ['Ditolak', 'red'],
    ];
    $mitraMeta = [
        'pending'  => ['Pending', 'amber'],
        'verified' => ['Terverifikasi', 'green'],
        'rejected' => ['Ditolak', 'red'],
    ];
    $cards = [
        ['Customer', $stats['customers'], 'admin.users', 'blue', '👤'],
        ['Mitra', $stats['mitra'], 'admin.mitra', 'orange', '🧰'],
        ['Pesanan', $stats['orders'], 'admin.orders', 'blue', '📦'],
        ['Kategori jasa', $stats['categories'], 'admin.categories', 'orange', '🗂'],
        ['Ulasan', $stats['reviews'], 'admin.reviews', 'blue', '⭐'],
        ['Percakapan', $stats['conversations'], 'admin.conversations', 'orange', '💬'],
    ];
@endphp

@section('content')
    <div class="grid grid-cols-2 lg:grid-cols-3 gap-4">
        @foreach ($cards as [$label, $value, $route, $tone, $icon])
            <a href="{{ route($route) }}"
               class="bg-white rounded-2xl border border-line p-5 hover:shadow-md hover:-translate-y-0.5 transition">
                <div class="flex items-center justify-between">
                    <span class="w-10 h-10 rounded-xl grid place-items-center text-lg
                        {{ $tone === 'orange' ? 'bg-accent-soft' : 'bg-brand-soft' }}">{{ $icon }}</span>
                    <span class="text-sub text-lg">›</span>
                </div>
                <div class="mt-4 text-3xl font-extrabold tracking-tight">{{ number_format($value) }}</div>
                <div class="text-sm text-sub font-medium">{{ $label }}</div>
            </a>
        @endforeach
    </div>

    <div class="grid lg:grid-cols-2 gap-4 mt-4">
        {{-- Pesanan per status --}}
        <div class="bg-white rounded-2xl border border-line p-5">
            <h2 class="font-bold">Pesanan per status</h2>
            <div class="mt-4 space-y-2.5">
                @foreach ($orderMeta as $key => [$label, $tone])
                    @php $count = $ordersByStatus[$key] ?? 0; $pct = $stats['orders'] ? round($count / $stats['orders'] * 100) : 0; @endphp
                    <div class="flex items-center gap-3">
                        <div class="w-32 shrink-0"><x-badge :color="$tone">{{ $label }}</x-badge></div>
                        <div class="flex-1 h-2 rounded-full bg-line overflow-hidden">
                            <div class="h-full rounded-full bg-brand" style="width: {{ $pct }}%"></div>
                        </div>
                        <div class="w-8 text-right text-sm font-semibold">{{ $count }}</div>
                    </div>
                @endforeach
            </div>
        </div>

        {{-- Mitra per status verifikasi --}}
        <div class="bg-white rounded-2xl border border-line p-5">
            <h2 class="font-bold">Verifikasi mitra</h2>
            <div class="mt-4 grid grid-cols-3 gap-3">
                @foreach ($mitraMeta as $key => [$label, $tone])
                    <div class="rounded-xl border border-line p-4 text-center">
                        <div class="text-2xl font-extrabold">{{ $mitraByStatus[$key] ?? 0 }}</div>
                        <div class="mt-1.5"><x-badge :color="$tone">{{ $label }}</x-badge></div>
                    </div>
                @endforeach
            </div>
            <div class="mt-4 pt-4 border-t border-line flex items-center justify-between text-sm">
                <span class="text-sub">Total pesan chat</span>
                <span class="font-bold">{{ number_format($stats['messages']) }}</span>
            </div>
        </div>
    </div>

    {{-- Pesanan terbaru --}}
    <div class="bg-white rounded-2xl border border-line mt-4 overflow-hidden">
        <div class="p-5 flex items-center justify-between">
            <h2 class="font-bold">Pesanan terbaru</h2>
            <a href="{{ route('admin.orders') }}" class="text-sm font-semibold text-brand hover:text-brand-dark">Lihat semua ›</a>
        </div>
        <div class="overflow-x-auto">
            <table class="w-full text-sm">
                <thead class="bg-canvas text-sub text-xs uppercase tracking-wide">
                    <tr>
                        <th class="text-left font-semibold px-5 py-3">Kode</th>
                        <th class="text-left font-semibold px-5 py-3">Layanan</th>
                        <th class="text-left font-semibold px-5 py-3">Customer</th>
                        <th class="text-left font-semibold px-5 py-3">Mitra</th>
                        <th class="text-left font-semibold px-5 py-3">Status</th>
                        <th class="text-left font-semibold px-5 py-3">Tanggal</th>
                    </tr>
                </thead>
                <tbody class="divide-y divide-line">
                    @forelse ($recentOrders as $order)
                        <tr class="hover:bg-canvas transition">
                            <td class="px-5 py-3">
                                <a href="{{ route('admin.orders.show', $order) }}" class="font-semibold text-brand hover:text-brand-dark">{{ $order->code }}</a>
                            </td>
                            <td class="px-5 py-3">{{ $order->title ?? $order->category?->name ?? '—' }}</td>
                            <td class="px-5 py-3">{{ $order->customer?->name ?? '—' }}</td>
                            <td class="px-5 py-3">{{ $order->mitra?->name ?? '—' }}</td>
                            <td class="px-5 py-3">
                                @php [$lbl, $tone] = $orderMeta[$order->status->value ?? $order->status] ?? ['—','gray']; @endphp
                                <x-badge :color="$tone">{{ $lbl }}</x-badge>
                            </td>
                            <td class="px-5 py-3 text-sub">{{ $order->created_at?->format('d M Y, H:i') }}</td>
                        </tr>
                    @empty
                        <tr><td colspan="6" class="px-5 py-8 text-center text-sub">Belum ada pesanan.</td></tr>
                    @endforelse
                </tbody>
            </table>
        </div>
    </div>
@endsection