@extends('layouts.admin')

@section('header', 'Dashboard')

@section('content')

<!-- Mobile Grid Menu (Visible only on small screens) -->
<div class="block md:hidden">
    <div class="grid grid-cols-3 gap-4">
        <!-- Dashboard -->
        <a href="{{ route('admin.dashboard') }}" class="flex flex-col items-center justify-center p-4 bg-gray-900 rounded-xl text-white hover:bg-gray-800 transition aspect-square">
            <i class="fas fa-tachometer-alt text-3xl mb-2"></i>
            <span class="text-xs font-semibold text-center">Dashboard</span>
        </a>

        <!-- Daftar Produk -->
        <a href="{{ route('admin.products.index') }}" class="flex flex-col items-center justify-center p-4 bg-gray-900 rounded-xl text-white hover:bg-gray-800 transition aspect-square">
            <i class="fas fa-shopping-cart text-3xl mb-2"></i>
            <span class="text-xs font-semibold text-center">Daftar Produk</span>
        </a>

        <!-- Upload -->
        <a href="{{ route('admin.products.create') }}" class="flex flex-col items-center justify-center p-4 bg-gray-900 rounded-xl text-white hover:bg-gray-800 transition aspect-square">
            <i class="fas fa-file-upload text-3xl mb-2"></i>
            <span class="text-xs font-semibold text-center">Upload</span>
        </a>

        <!-- Kategori -->
        <a href="{{ route('admin.categories.index') }}" class="flex flex-col items-center justify-center p-4 bg-gray-900 rounded-xl text-white hover:bg-gray-800 transition aspect-square">
            <i class="fas fa-tag text-3xl mb-2"></i>
            <span class="text-xs font-semibold text-center">Kategori</span>
        </a>

        <!-- Payment -->
        <a href="{{ route('payment.index') }}" class="flex flex-col items-center justify-center p-4 bg-gray-900 rounded-xl text-white hover:bg-gray-800 transition aspect-square">
            <i class="fas fa-money-bill-wave text-3xl mb-2"></i>
            <span class="text-xs font-semibold text-center">Payment</span>
        </a>

        <!-- Bukti Pembayaran -->
        <a href="{{ route('admin.payment-proofs.index') }}" class="flex flex-col items-center justify-center p-4 bg-gray-900 rounded-xl text-white hover:bg-gray-800 transition aspect-square">
            <i class="fas fa-receipt text-3xl mb-2"></i>
            <span class="text-xs font-semibold text-center">Bukti Bayar</span>
        </a>

        <!-- Testimoni Produk -->
        <a href="{{ route('admin.reviews.index') }}" class="flex flex-col items-center justify-center p-4 bg-gray-900 rounded-xl text-white hover:bg-gray-800 transition aspect-square">
            <i class="fas fa-comments text-3xl mb-2"></i>
            <span class="text-xs font-semibold text-center">Testimoni</span>
        </a>

        <!-- Pengaturan -->
        <a href="{{ route('admin.settings.index') }}" class="flex flex-col items-center justify-center p-4 bg-gray-900 rounded-xl text-white hover:bg-gray-800 transition aspect-square">
            <i class="fas fa-cog text-3xl mb-2"></i>
            <span class="text-xs font-semibold text-center">Pengaturan</span>
        </a>

        @if(auth()->user()->isSuperAdmin())
        <!-- Style Web -->
        <a href="{{ route('admin.style.index') }}" class="flex flex-col items-center justify-center p-4 bg-gray-900 rounded-xl text-white hover:bg-gray-800 transition aspect-square">
            <i class="fas fa-palette text-3xl mb-2"></i>
            <span class="text-xs font-semibold text-center">Style Web</span>
        </a>

        <!-- Manage Admin -->
        <a href="{{ route('admin.manage.index') }}" class="flex flex-col items-center justify-center p-4 bg-gray-900 rounded-xl text-white hover:bg-gray-800 transition aspect-square">
            <i class="fas fa-users-cog text-3xl mb-2"></i>
            <span class="text-xs font-semibold text-center">Manage Admin</span>
        </a>
        @endif

        <!-- Logout -->
        <form action="{{ route('admin.logout') }}" method="POST" class="contents">
            @csrf
            <button type="submit" class="flex flex-col items-center justify-center p-4 bg-gray-900 rounded-xl text-white hover:bg-gray-800 transition aspect-square w-full h-full">
                <i class="fas fa-sign-out-alt text-3xl mb-2"></i>
                <span class="text-xs font-semibold text-center">Logout</span>
            </button>
        </form>
    </div>
</div>

<!-- Desktop Stats (Hidden on Mobile) -->
<div class="hidden md:grid grid-cols-1 md:grid-cols-2 gap-6 mb-8">
    <!-- Stats Cards -->
    <div class="bg-white p-6 rounded-xl shadow-md border-l-4 border-yellow-500">
        <div class="flex items-center justify-between">
            <div>
                <p class="text-gray-500 text-sm">Total Produk</p>
                <h3 class="text-2xl font-bold text-gray-800">{{ \App\Models\Product::count() }}</h3>
            </div>
            <div class="p-3 bg-yellow-100 rounded-full">
                <i class="fas fa-gem text-yellow-600 text-xl"></i>
            </div>
        </div>
    </div>

    <div class="bg-white p-6 rounded-xl shadow-md border-l-4 border-blue-500">
        <div class="flex items-center justify-between">
            <div>
                <p class="text-gray-500 text-sm">Total Kategori</p>
                <h3 class="text-2xl font-bold text-gray-800">{{ \App\Models\Category::count() }}</h3>
            </div>
            <div class="p-3 bg-blue-100 rounded-full">
                <i class="fas fa-tags text-blue-600 text-xl"></i>
            </div>
        </div>
    </div>
</div>

<div class="hidden md:block bg-white rounded-xl shadow-md overflow-hidden">
    <div class="px-6 py-4 border-b border-gray-200">
        <h3 class="text-lg font-bold text-gray-800">Aktivitas Terbaru</h3>
    </div>
    <div class="p-6 text-center text-gray-500">
        <p>Belum ada aktivitas terbaru.</p>
    </div>
</div>
@endsection