@extends('layouts.admin')

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

@push('styles')
<style>
    .stat-card {
        border-radius: 1rem;
        border: 1px solid var(--border);
        background: var(--surface);
        padding: 1.5rem;
        display: flex;
        align-items: center;
        gap: 1.25rem;
        box-shadow: 0 4px 12px rgba(0,0,0,.03);
        transition: transform .2s ease, box-shadow .2s ease;
    }
    .stat-card:hover {
        transform: translateY(-4px);
        box-shadow: 0 8px 24px rgba(230,57,70,.08);
    }
    .stat-icon {
        width: 3.5rem;
        height: 3.5rem;
        border-radius: 1rem;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 1.5rem;
        flex-shrink: 0;
    }
    .hero-banner {
        background: linear-gradient(135deg, var(--red) 0%, #d90429 100%);
        border-radius: 1.2rem;
        color: #fff;
        padding: 2rem;
        position: relative;
        overflow: hidden;
        margin-bottom: 2rem;
    }
    .hero-banner h1 { font-weight: 900; color: #111 !important; }
    .hero-banner .badge-hero {
        background: rgba(0,0,0,.08);
        color: #111;
        border: 1px solid rgba(0,0,0,.15);
        font-size: .75rem;
        padding: .2rem .75rem;
        border-radius: 50px;
    }
</style>
@endpush

@section('content')
    <div class="hero-banner">
        <div style="position: relative; z-index: 1;">
            <div class="d-inline-flex align-items-center mb-3 badge-hero">
                <i class="bi bi-shield-lock-fill me-1"></i> Panel Kendali Administrator
            </div>
            <h1 class="h3 mb-2" style="color:#111;">Selamat Datang, Administrator {{ $user->name ?? session('user_name') }}!</h1>
            <p class="mb-0" style="color:#222;">Anda memiliki akses penuh untuk mengelola pengguna, memantau produk, dan aktivitas toko.</p>
        </div>
        <i class="bi bi-gear-fill position-absolute" style="font-size: 10rem; right: -2rem; bottom: -3rem; opacity: .1;"></i>
    </div>

    <div class="row g-4 mb-5">
        <div class="col-md-3 col-sm-6">
            <div class="stat-card h-100">
                <div class="stat-icon" style="background: var(--red-lt); color: var(--red-dk);">
                    <i class="bi bi-people-fill"></i>
                </div>
                <div>
                    <div class="text-muted small fw-bold text-uppercase">Total User</div>
                    <div class="fs-4 fw-bold text-dark lh-1 mt-1">{{ $stats['total_users'] ?? 0 }}</div>
                    <div class="small text-muted mt-1" style="font-size: .7rem;">{{ $stats['total_buyers'] ?? 0 }} Buyer | {{ $stats['total_admins'] ?? 0 }} Admin</div>
                </div>
            </div>
        </div>
        <div class="col-md-3 col-sm-6">
            <div class="stat-card h-100">
                <div class="stat-icon" style="background: #e0f2fe; color: #0284c7;">
                    <i class="bi bi-box-seam-fill"></i>
                </div>
                <div>
                    <div class="text-muted small fw-bold text-uppercase">Total Produk</div>
                    <div class="fs-4 fw-bold text-dark lh-1 mt-1">{{ $stats['total_products'] ?? 0 }}</div>
                    <div class="small text-muted mt-1" style="font-size: .7rem;">Produk terdaftar</div>
                </div>
            </div>
        </div>
        <div class="col-md-3 col-sm-6">
            <a href="{{ route('admin.categories.index') }}" class="text-decoration-none">
                <div class="stat-card h-100">
                    <div class="stat-icon" style="background: #fef3c7; color: #d97706;">
                        <i class="bi bi-tags-fill"></i>
                    </div>
                    <div>
                        <div class="text-muted small fw-bold text-uppercase">Kategori</div>
                        <div class="fs-4 fw-bold text-dark lh-1 mt-1">{{ $stats['total_categories'] ?? 0 }}</div>
                        <div class="small fw-bold mt-1" style="color: #d97706; font-size: .7rem;">Kelola Kategori <i class="bi bi-arrow-right"></i></div>
                    </div>
                </div>
            </a>
        </div>
        <div class="col-md-3 col-sm-6">
            <div class="stat-card h-100">
                <div class="stat-icon" style="background: #f3e8ff; color: #9333ea;">
                    <i class="bi bi-cart-check-fill"></i>
                </div>
                <div>
                    <div class="text-muted small fw-bold text-uppercase">Pesanan</div>
                    <div class="fs-4 fw-bold text-dark lh-1 mt-1">{{ $stats['total_orders'] ?? 0 }}</div>
                    <div class="small text-muted mt-1" style="font-size: .7rem;">Transaksi masuk</div>
                </div>
            </div>
        </div>
    </div>

    <div class="row g-4">
        <div class="col-lg-6">
            <div class="card h-100 border-0 shadow-sm">
                <div class="card-header py-3 d-flex justify-content-between align-items-center">
                    <h5 class="mb-0 fw-bold fs-6"><i class="bi bi-person-lines-fill me-2" style="color: var(--red);"></i>Pengguna Terbaru</h5>
                    <span class="badge bg-light text-dark border">{{ $recentUsers->count() }} User</span>
                </div>
                <div class="table-responsive">
                    <table class="table table-hover align-middle mb-0">
                        <thead class="table-light">
                            <tr>
                                <th class="ps-3">Nama</th>
                                <th>Email</th>
                                <th>Role</th>
                            </tr>
                        </thead>
                        <tbody>
                            @forelse($recentUsers as $u)
                                <tr>
                                    <td class="fw-semibold ps-3">{{ $u->name }}</td>
                                    <td class="text-muted small">{{ $u->email }}</td>
                                    <td>
                                        @if($u->role === 'admin')
                                            <span class="badge" style="background: var(--red-lt); color: var(--red-dk);">Admin</span>
                                        @else
                                            <span class="badge bg-info-subtle text-info-emphasis">Buyer</span>
                                        @endif
                                    </td>
                                </tr>
                            @empty
                                <tr><td colspan="3" class="text-center py-4 text-muted">Belum ada pengguna</td></tr>
                            @endforelse
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
        
        <div class="col-lg-6">
            <div class="card h-100 border-0 shadow-sm">
                <div class="card-header py-3 d-flex justify-content-between align-items-center">
                    <h5 class="mb-0 fw-bold fs-6"><i class="bi bi-box-seam me-2" style="color: var(--red);"></i>Daftar Produk & Foto</h5>
                    <div>
                        <span class="badge bg-light text-dark border me-2">{{ $products->count() }} Produk</span>
                        <a href="{{ route('admin.products.index') }}" class="btn btn-sm btn-outline-danger py-0 px-2 fw-semibold" style="font-size: .75rem;">
                            Semua <i class="bi bi-arrow-right"></i>
                        </a>
                    </div>
                </div>
                <div class="table-responsive">
                    <table class="table table-hover align-middle mb-0">
                        <thead class="table-light">
                            <tr>
                                <th class="ps-3" style="width: 54px;">Foto</th>
                                <th>Produk</th>
                                <th>Kategori</th>
                                <th>Harga</th>
                                <th>Stok</th>
                                <th class="text-end pe-3">Aksi</th>
                            </tr>
                        </thead>
                        <tbody>
                            @forelse($products as $p)
                                <tr>
                                    <td class="ps-3">
                                        @if ($p->image)
                                            <img src="{{ asset('storage/' . $p->image) }}"
                                                 alt="{{ $p->name }}"
                                                 class="rounded-2 shadow-sm"
                                                 style="width: 44px; height: 44px; object-fit: cover; border: 1.5px solid #e2e8f0;">
                                        @else
                                            <div class="rounded-2 bg-light d-flex align-items-center justify-content-center text-muted"
                                                 style="width: 44px; height: 44px; border: 1.5px dashed #cbd5e1;">
                                                <i class="bi bi-image"></i>
                                            </div>
                                        @endif
                                    </td>
                                    <td>
                                        <div class="fw-semibold text-dark">{{ $p->name }}</div>
                                        <div class="text-muted" style="font-size: 0.72rem;">ID: #{{ $p->id }}</div>
                                    </td>
                                    <td>
                                        <span class="badge bg-light text-dark border">{{ $p->category->name ?? '-' }}</span>
                                    </td>
                                    <td class="fw-bold">Rp {{ number_format($p->price, 0, ',', '.') }}</td>
                                    <td>
                                        <span class="badge {{ $p->stock > 0 ? 'bg-success-subtle text-success-emphasis' : 'bg-danger-subtle text-danger-emphasis' }}">
                                            {{ $p->stock > 0 ? $p->stock : 'Habis' }}
                                        </span>
                                    </td>
                                    <td class="text-end pe-3">
                                        <a href="{{ route('admin.products.edit', $p) }}" class="btn btn-sm btn-outline-primary py-1 px-2" title="Edit Produk" style="font-size: .75rem;">
                                            <i class="bi bi-pencil-fill"></i>
                                        </a>
                                    </td>
                                </tr>
                            @empty
                                <tr><td colspan="6" class="text-center py-4 text-muted">Belum ada produk</td></tr>
                            @endforelse
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
@endsection