@extends('layouts.admin')

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

@push('styles')
<style>
    .admin-hero-card {
        background: linear-gradient(135deg, var(--color-primary-dark) 0%, var(--color-primary) 50%, var(--color-primary-light) 100%);
        border-radius: 1.25rem;
        color: var(--color-bg);
        padding: 2.25rem 2.5rem;
        position: relative;
        overflow: hidden;
    }
    .admin-hero-card::after {
        content: '';
        position: absolute;
        top: -60%; right: -5%;
        width: 350px; height: 350px;
        border-radius: 50%;
        background: radial-gradient(circle, rgba(198,161,91,0.12) 0%, transparent 70%);
        pointer-events: none;
    }
    .menu-card {
        background: var(--color-white);
        border: 1px solid var(--color-border);
        border-radius: 1.25rem;
        padding: 1.75rem;
        transition: all 0.25s ease;
        text-decoration: none;
        display: block;
        color: inherit;
        height: 100%;
    }
    .menu-card:hover {
        transform: translateY(-4px);
        box-shadow: 0 12px 24px -4px rgba(74, 48, 40, 0.1);
        border-color: var(--color-gold);
        color: inherit;
    }
    .menu-icon-box {
        width: 52px;
        height: 52px;
        border-radius: 1rem;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 1.5rem;
        margin-bottom: 1.25rem;
        transition: transform 0.2s ease;
    }
    .menu-card:hover .menu-icon-box {
        transform: scale(1.1);
    }
    .stat-badge {
        font-size: 0.75rem;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 0.05em;
        color: var(--color-text-muted);
    }
    .stat-number {
        font-size: 1.6rem;
        font-weight: 800;
        color: var(--color-primary);
        line-height: 1.2;
        margin-top: 0.25rem;
    }
</style>
@endpush

@section('content')

    {{-- Hero Banner Admin --}}
    <div class="admin-hero-card mb-4 shadow-sm">
        <div class="d-flex flex-column flex-md-row align-items-md-center justify-content-between gap-3">
            <div>
                <span class="badge bg-danger bg-opacity-25 text-danger-emphasis border border-danger border-opacity-50 px-3 py-1.5 rounded-pill fw-semibold mb-2">
                    <i class="bi bi-shield-lock-fill me-1"></i> Panel Admin &bull; Administrator Terverifikasi
                </span>
                <h1 class="h3 fw-bold mb-1">
                    Selamat Datang di Dashboard Admin, {{ Auth::user()->name }}! 🛡️
                </h1>
                <p class="mb-0 text-white-50 small col-md-10">
                    Panel kendali utama toko online. Anda memiliki hak akses penuh untuk mengelola kategori produk, master barang, dan pesanan pembeli.
                </p>
            </div>
            <div class="d-flex gap-2">
                <span class="badge bg-success bg-opacity-25 text-success border border-success border-opacity-50 px-3 py-2 rounded-3 small fw-semibold">
                    <i class="bi bi-circle-fill me-1 text-success" style="font-size: 0.6rem;"></i> Sistem Online & Aktif
                </span>
            </div>
        </div>
    </div>

    @php
        $categoryCount = \App\Models\Category::count();
        $productCount  = \App\Models\Product::count();
        $stockTotal    = \App\Models\Product::sum('stock');
        $orderCount    = \App\Models\Order::count();
    @endphp

    {{-- Ringkasan Statistik Cepat --}}
    <div class="row g-3 mb-4">
        <div class="col-6 col-md-3">
            <div class="card border-0 shadow-sm rounded-4 p-3 border-start border-4 border-primary">
                <div class="stat-badge">Total Kategori</div>
                <div class="stat-number text-primary">{{ $categoryCount }}</div>
                <span class="text-muted small">Kelompok etalase</span>
            </div>
        </div>
        <div class="col-6 col-md-3">
            <div class="card border-0 shadow-sm rounded-4 p-3 border-start border-4 border-indigo">
                <div class="stat-badge">Total Produk</div>
                <div class="stat-number text-dark">{{ $productCount }}</div>
                <span class="text-muted small">Item terdaftar</span>
            </div>
        </div>
        <div class="col-6 col-md-3">
            <div class="card border-0 shadow-sm rounded-4 p-3 border-start border-4 border-warning">
                <div class="stat-badge">Total Stok Fisik</div>
                <div class="stat-number text-warning-emphasis">{{ number_format($stockTotal) }}</div>
                <span class="text-muted small">Unit siap kirim</span>
            </div>
        </div>
        <div class="col-6 col-md-3">
            <div class="card border-0 shadow-sm rounded-4 p-3 border-start border-4 border-success">
                <div class="stat-badge">Total Pesanan</div>
                <div class="stat-number text-success">{{ $orderCount }}</div>
                <span class="text-muted small">Transaksi masuk</span>
            </div>
        </div>
    </div>

    {{-- Menu Manajemen Admin --}}
    <h2 class="h5 fw-bold text-dark mb-3">Fitur Khusus Administrator</h2>
    <div class="row g-4 mb-4">
        {{-- Card: Produk --}}
        <div class="col-12 col-md-4">
            <a href="{{ route('admin.products.index') }}" class="menu-card">
                <div class="menu-icon-box bg-primary-subtle text-primary">
                    <i class="bi bi-box-seam-fill"></i>
                </div>
                <h3 class="h6 fw-bold text-dark mb-1">Manajemen Produk</h3>
                <p class="text-muted small mb-3">
                    Tambah, ubah, upload gambar, dan kelola stok barang serta harga produk toko.
                </p>
                <span class="text-primary fw-semibold small d-inline-flex align-items-center gap-1">
                    Buka CRUD Produk <i class="bi bi-arrow-right"></i>
                </span>
            </a>
        </div>

        {{-- Card: Kategori --}}
        <div class="col-12 col-md-4">
            <a href="{{ route('admin.categories.index') }}" class="menu-card">
                <div class="menu-icon-box bg-purple-subtle text-purple" style="background: #f3e8ff; color: #7e22ce;">
                    <i class="bi bi-grid-fill"></i>
                </div>
                <h3 class="h6 fw-bold text-dark mb-1">Kelola Kategori</h3>
                <p class="text-muted small mb-3">
                    Atur kelompok dan kategori produk untuk katalog belanja pelanggan.
                </p>
                <span class="text-purple fw-semibold small d-inline-flex align-items-center gap-1" style="color: #7e22ce;">
                    Buka CRUD Kategori <i class="bi bi-arrow-right"></i>
                </span>
            </a>
        </div>

        {{-- Card: Pesanan --}}
        <div class="col-12 col-md-4">
            <a href="{{ route('admin.orders.index') }}" class="menu-card">
                <div class="menu-icon-box bg-success-subtle text-success">
                    <i class="bi bi-receipt-cutoff"></i>
                </div>
                <h3 class="h6 fw-bold text-dark mb-1">Pesanan & Transaksi</h3>
                <p class="text-muted small mb-3">
                    Pantau pesanan yang masuk dari seluruh buyer dan ubah status pengiriman secara real-time.
                </p>
                <span class="text-success fw-semibold small d-inline-flex align-items-center gap-1">
                    Kelola Semua Pesanan <i class="bi bi-arrow-right"></i>
                </span>
            </a>
        </div>
    </div>

@endsection