@extends('layouts.admin')

@section('title', 'Admin Dashboard')

@section('content')
<div class="row g-4 mb-4">
    <!-- Hero Welcome Card -->
    <div class="col-12">
        <div class="hero-welcome-card p-4 p-lg-5 position-relative overflow-hidden shadow-sm">
            <div class="row align-items-center position-relative" style="z-index: 2;">
                <div class="col-lg-8">
                    <div class="d-inline-flex align-items-center gap-2 px-3 py-1 rounded-pill bg-white/20 backdrop-blur mb-3 text-white small fw-semibold">
                        <i class="bi bi-stars"></i>
                        <span>Admin Control Center</span>
                    </div>
                    <h1 class="display-6 fw-bold text-white mb-2 font-serif">Selamat Datang, {{ $user->name }}!</h1>
                    <p class="text-white/90 mb-0 fs-6 col-lg-10 lh-base">
                        Pantau performa penjualan, ketersediaan stok produk, serta kelola pesanan pelanggan Anda secara efisien dalam satu dasbor terpadu yang elegan.
                    </p>
                </div>
                <div class="col-lg-4 text-lg-end mt-3 mt-lg-0">
                    <a href="{{ route('admin.products.create') }}" class="btn btn-light text-pink-dark fw-bold px-4 py-2 shadow-sm rounded-pill d-inline-flex align-items-center gap-2">
                        <i class="bi bi-plus-circle-fill"></i> Tambah Produk Baru
                    </a>
                </div>
            </div>
            <!-- Decorative Background Blobs -->
            <div class="hero-decor-circle-1"></div>
            <div class="hero-decor-circle-2"></div>
        </div>
    </div>
</div>

<!-- Statistik Ringkas Peachy Beauty -->
<div class="row g-3 g-xl-4 mb-4">
    <!-- Total Produk -->
    <div class="col-sm-6 col-xl-3">
        <div class="card stat-card border-0 shadow-sm h-100">
            <div class="card-body p-4 d-flex align-items-center justify-content-between">
                <div>
                    <span class="stat-badge-title d-block mb-1">Total Produk</span>
                    <h3 class="stat-number mb-2">{{ number_format($stats['total_products']) }}</h3>
                    <a href="{{ route('admin.products.index') }}" class="stat-link d-inline-flex align-items-center gap-1">
                        <span>Kelola Produk</span>
                        <i class="bi bi-arrow-right"></i>
                    </a>
                </div>
                <div class="stat-icon-wrapper bg-pink-soft text-pink-dark">
                    <i class="bi bi-box-seam-fill fs-4"></i>
                </div>
            </div>
        </div>
    </div>

    <!-- Total Kategori -->
    <div class="col-sm-6 col-xl-3">
        <div class="card stat-card border-0 shadow-sm h-100">
            <div class="card-body p-4 d-flex align-items-center justify-content-between">
                <div>
                    <span class="stat-badge-title d-block mb-1">Total Kategori</span>
                    <h3 class="stat-number mb-2">{{ number_format($stats['total_categories']) }}</h3>
                    <a href="{{ route('admin.categories.index') }}" class="stat-link d-inline-flex align-items-center gap-1">
                        <span>Kelola Kategori</span>
                        <i class="bi bi-arrow-right"></i>
                    </a>
                </div>
                <div class="stat-icon-wrapper bg-pink-light text-pink-primary">
                    <i class="bi bi-tags-fill fs-4"></i>
                </div>
            </div>
        </div>
    </div>

    <!-- Total Pesanan -->
    <div class="col-sm-6 col-xl-3">
        <div class="card stat-card border-0 shadow-sm h-100">
            <div class="card-body p-4 d-flex align-items-center justify-content-between">
                <div>
                    <span class="stat-badge-title d-block mb-1">Total Pesanan</span>
                    <h3 class="stat-number mb-2">{{ number_format($stats['total_orders']) }}</h3>
                    <a href="{{ route('admin.orders.index') }}" class="stat-link d-inline-flex align-items-center gap-1">
                        <span>Kelola Pesanan</span>
                        <i class="bi bi-arrow-right"></i>
                    </a>
                </div>
                <div class="stat-icon-wrapper bg-peach-soft text-peach-dark">
                    <i class="bi bi-receipt-cutoff fs-4"></i>
                </div>
            </div>
        </div>
    </div>

    <!-- Total Pelanggan (Buyer) -->
    <div class="col-sm-6 col-xl-3">
        <div class="card stat-card border-0 shadow-sm h-100">
            <div class="card-body p-4 d-flex align-items-center justify-content-between">
                <div>
                    <span class="stat-badge-title d-block mb-1">Pelanggan Terdaftar</span>
                    <h3 class="stat-number mb-2">{{ number_format($stats['total_buyers']) }}</h3>
                    <span class="text-muted small fw-semibold">
                        <i class="bi bi-people-fill me-1"></i> Akun Buyer Aktif
                    </span>
                </div>
                <div class="stat-icon-wrapper bg-rose-subtle text-rose-accent">
                    <i class="bi bi-person-heart fs-4"></i>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Navigasi Pintas Cepat (Quick Actions) & Info Proteksi -->
<div class="row g-4 mb-4">
    <!-- Quick Actions -->
    <div class="col-lg-7">
        <div class="card border-0 shadow-sm h-100 quick-card">
            <div class="card-header bg-white border-bottom-0 pt-4 px-4 pb-2">
                <div class="d-flex align-items-center justify-content-between">
                    <div>
                        <h5 class="fw-bold text-dark-title mb-1 font-serif">Aksi Cepat Manajemen</h5>
                        <p class="text-muted small mb-0">Pintas menu untuk mempermudah operasional toko Anda.</p>
                    </div>
                    <span class="badge bg-pink-soft text-pink-dark px-3 py-2 rounded-pill small fw-bold">Shortcut</span>
                </div>
            </div>
            <div class="card-body px-4 pb-4">
                <div class="row g-3">
                    <div class="col-sm-6">
                        <a href="{{ route('admin.products.create') }}" class="quick-action-btn">
                            <div class="quick-icon bg-pink-soft text-pink-dark">
                                <i class="bi bi-bag-plus"></i>
                            </div>
                            <div>
                                <h6 class="mb-1 fw-bold text-dark">Tambah Produk</h6>
                                <p class="mb-0 text-muted small">Input stok dan katalog baru</p>
                            </div>
                        </a>
                    </div>
                    <div class="col-sm-6">
                        <a href="{{ route('admin.categories.create') }}" class="quick-action-btn">
                            <div class="quick-icon bg-pink-light text-pink-primary">
                                <i class="bi bi-folder-plus"></i>
                            </div>
                            <div>
                                <h6 class="mb-1 fw-bold text-dark">Tambah Kategori</h6>
                                <p class="mb-0 text-muted small">Kelompokkan jenis barang</p>
                            </div>
                        </a>
                    </div>
                    <div class="col-sm-6">
                        <a href="{{ route('admin.orders.index') }}" class="quick-action-btn">
                            <div class="quick-icon bg-peach-soft text-peach-dark">
                                <i class="bi bi-clock-history"></i>
                            </div>
                            <div>
                                <h6 class="mb-1 fw-bold text-dark">Pesanan Masuk</h6>
                                <p class="mb-0 text-muted small">Verifikasi status transaksi</p>
                            </div>
                        </a>
                    </div>
                    <div class="col-sm-6">
                        <a href="{{ route('toko') }}" target="_blank" class="quick-action-btn">
                            <div class="quick-icon bg-rose-subtle text-rose-accent">
                                <i class="bi bi-shop-window"></i>
                            </div>
                            <div>
                                <h6 class="mb-1 fw-bold text-dark">Lihat Toko (Etalase)</h6>
                                <p class="mb-0 text-muted small">Tinjau tampilan sisi pembeli <i class="bi bi-box-arrow-up-right small"></i></p>
                            </div>
                        </a>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Informasi Akun & Keamanan Role -->
    <div class="col-lg-5">
        <div class="card border-0 shadow-sm h-100 quick-card">
            <div class="card-header bg-white border-bottom-0 pt-4 px-4 pb-2">
                <div class="d-flex align-items-center justify-content-between">
                    <div>
                        <h5 class="fw-bold text-dark-title mb-1 font-serif">Informasi Akun</h5>
                        <p class="text-muted small mb-0">Rincian profil & proteksi hak akses sistem.</p>
                    </div>
                    <span class="badge bg-success-subtle text-success border border-success-subtle px-3 py-1 rounded-pill small fw-bold">Aktif</span>
                </div>
            </div>
            <div class="card-body px-4 pb-4">
                <div class="user-profile-strip p-3 rounded-3 mb-3 d-flex align-items-center gap-3">
                    <div class="user-avatar-circle">
                        <i class="bi bi-person-fill fs-3 text-pink-dark"></i>
                    </div>
                    <div>
                        <div class="fw-bold text-dark">{{ $user->name }}</div>
                        <div class="text-muted small">{{ $user->email }}</div>
                        <div class="mt-1">
                            <span class="role-badge-soft">ROLE: ADMINISTRATOR</span>
                        </div>
                    </div>
                </div>

                <div class="security-note p-3 rounded-3">
                    <div class="d-flex gap-2">
                        <i class="bi bi-shield-lock-fill text-pink-dark mt-1"></i>
                        <div>
                            <strong class="text-dark d-block small mb-1">Proteksi Keamanan Role</strong>
                            <p class="text-muted small mb-0 lh-sm">
                                Halaman admin diamankan oleh middleware <code>check.login</code> dan <code>role:admin</code>. Akses tidak sah akan diblokir otomatis demi keamanan data.
                            </p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection