@extends('layouts.app')
@section('title', 'Dashboard Akun')

@php
    $statusColors = [
        'pending_payment' => 'bg-amber-100 text-amber-700','paid' => 'bg-blue-100 text-blue-700',
        'production' => 'bg-indigo-100 text-indigo-700','shipped' => 'bg-cyan-100 text-cyan-700',
        'completed' => 'bg-emerald-100 text-emerald-700','complaint' => 'bg-rose-100 text-rose-700',
        'refund' => 'bg-rose-100 text-rose-700','cancelled' => 'bg-slate-200 text-slate-600',
    ];
@endphp

@section('content')
<div class="max-w-7xl mx-auto px-4 py-8">
    <div class="flex flex-col lg:flex-row gap-8">
        @include('account.partials.sidebar')
        <div class="flex-1">
            <h1 class="text-2xl font-extrabold mb-1">Halo, {{ explode(' ', $user->name)[0] }} 👋</h1>
            <p class="text-slate-500 mb-6">Selamat datang di dashboard akun Anda.</p>

            <div class="grid sm:grid-cols-3 gap-4 mb-6">
                <div class="bg-gradient-to-br from-brand-500 to-brand-700 text-white rounded-2xl p-5">
                    <p class="text-brand-100 text-sm">Total Pesanan</p>
                    <p class="text-3xl font-extrabold mt-1">{{ $orderCount }}</p>
                </div>
                <div class="bg-white border border-slate-100 rounded-2xl p-5">
                    <p class="text-slate-400 text-sm">Desain Tersimpan</p>
                    <p class="text-3xl font-extrabold mt-1">{{ $designCount }}</p>
                </div>
                <div class="bg-white border border-slate-100 rounded-2xl p-5">
                    @if ($store)
                        <p class="text-slate-400 text-sm">Toko · {{ $store->name }}</p>
                        <p class="text-sm mt-2"><span class="font-bold text-emerald-600">{{ $sellerStats['live'] }}</span> live · <span class="font-bold text-amber-600">{{ $sellerStats['pending'] }}</span> moderasi</p>
                        <a href="{{ route('account.store') }}" class="inline-block mt-2 text-brand-600 font-semibold text-sm hover:underline">Kelola toko →</a>
                    @else
                        <p class="text-slate-400 text-sm">Mulai Jualan</p>
                        <a href="{{ route('account.store') }}" class="inline-block mt-2 text-brand-600 font-semibold text-sm hover:underline">Buka toko →</a>
                    @endif
                </div>
            </div>

            <div class="bg-white border border-slate-100 rounded-2xl p-6">
                <div class="flex items-center justify-between mb-4">
                    <h2 class="font-bold">Pesanan Terbaru</h2>
                    <a href="{{ route('account.orders') }}" class="text-brand-600 text-sm font-semibold hover:underline">Lihat semua</a>
                </div>
                @forelse ($orders as $order)
                    <a href="{{ route('order.show', $order->order_code) }}" class="flex items-center justify-between py-3 border-b border-slate-50 last:border-0 hover:bg-slate-50 -mx-2 px-2 rounded-lg">
                        <div>
                            <p class="font-semibold text-sm">{{ $order->order_code }}</p>
                            <p class="text-xs text-slate-400">{{ $order->created_at->format('d M Y') }}</p>
                        </div>
                        <div class="text-right">
                            <p class="font-bold text-sm">@rupiah($order->total)</p>
                            <span class="text-xs px-2 py-0.5 rounded-full {{ $statusColors[$order->status] ?? 'bg-slate-100' }}">{{ $order->statusLabel() }}</span>
                        </div>
                    </a>
                @empty
                    <p class="text-sm text-slate-400 py-6 text-center">Belum ada pesanan. <a href="{{ route('catalog.index') }}" class="text-brand-600">Mulai belanja →</a></p>
                @endforelse
            </div>
        </div>
    </div>
</div>
@endsection