<!DOCTYPE html>
<html lang="id">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Dashboard Admin</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    animation: {
                        'fade-in': 'fadeIn 1s ease-out forwards',
                        'slide-up': 'slideUp 0.8s ease-out forwards'
                    },
                    keyframes: {
                        fadeIn: {
                            '0%': { opacity: '0' },
                            '100%': { opacity: '1' },
                        },
                        slideUp: {
                            '0%': { transform: 'translateY(20px)', opacity: '0' },
                            '100%': { transform: 'translateY(0)', opacity: '1' },
                        }
                    }
                }
            }
        }
    </script>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap-icons/font/bootstrap-icons.css" rel="stylesheet">
    <style>
        body {
            font-family: 'Inter', sans-serif;
        }
    </style>
</head>
<body class="bg-gray-50 min-h-screen">

<!-- Sidebar -->
<div id="sidebar" class="fixed top-0 left-0 w-64 bg-white shadow-md z-30 h-screen overflow-y-auto md:block hidden">
    <div class="p-5 border-b">
        <h2 class="text-2xl font-bold text-blue-600">Admin Panel</h2>
    </div>
    <nav class="p-4 space-y-3">
        <a href="/admin/bookings" class="flex items-center gap-3 px-4 py-2 rounded hover:bg-blue-100 transition-all">
            <i class="bi bi-calendar3 text-blue-500"></i> Booking
        </a>
        <a href="/admin/users" class="flex items-center gap-3 px-4 py-2 rounded hover:bg-blue-100 transition-all">
            <i class="bi bi-people-fill text-blue-500"></i> Pengguna
        </a>
        <a href="/admin/upload" class="flex items-center gap-3 px-4 py-2 rounded hover:bg-blue-100 transition-all">
            <i class="bi bi-upload text-blue-500"></i> Token Foto
        </a>
        <a href="/admin/reports" class="flex items-center gap-3 px-4 py-2 rounded hover:bg-blue-100 transition-all">
            <i class="bi bi-boxes text-blue-500"></i> Produk
        </a>
        <form action="/logout" method="POST" class="px-4 mt-4">
            @csrf
            <button type="submit" class="w-full flex items-center justify-center gap-2 bg-red-500 text-white py-2 rounded hover:bg-red-600 transition-all">
                <i class="bi bi-box-arrow-right"></i> Logout
            </button>
        </form>
    </nav>
</div>

<!-- Mobile Sidebar Toggle Button -->
<div class="md:hidden flex justify-between items-center bg-white shadow px-4 py-3 fixed top-0 left-0 w-full z-20">
    <button onclick="toggleSidebar()" class="text-2xl text-blue-600">
        <i class="bi bi-list"></i>
    </button>
    <h1 class="text-xl font-bold text-blue-600">Admin Panel</h1>
</div>

<!-- Overlay for Mobile Sidebar -->
<div id="overlay" class="fixed inset-0 bg-black bg-opacity-40 hidden z-20" onclick="toggleSidebar()"></div>

<!-- Main Content -->
<div class="md:ml-64 p-6 pt-24 md:pt-6 space-y-6 animate-fade-in">
    <h1 class="text-3xl font-bold text-gray-700 animate-slide-up">Halo, {{ session('username') }}</h1>
    <p class="text-gray-500">Selamat datang di dashboard admin.</p>

    <!-- Quick Stats -->
    <div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-4 gap-4">
        <div class="bg-blue-100 p-4 rounded-lg shadow animate-slide-up">
            <i class="bi bi-calendar-check text-2xl text-blue-600"></i>
            <div class="text-sm mt-2">Total Booking</div>
            <div class="text-xl font-bold">{{ $totalBookings ?? 0 }}</div>
        </div>
        <div class="bg-yellow-100 p-4 rounded-lg shadow animate-slide-up">
            <i class="bi bi-hourglass-split text-2xl text-yellow-600"></i>
            <div class="text-sm mt-2">Pending</div>
            <div class="text-xl font-bold">{{ $pendingBookings ?? 0 }}</div>
        </div>
        <div class="bg-green-100 p-4 rounded-lg shadow animate-slide-up">
            <i class="bi bi-check-circle-fill text-2xl text-green-600"></i>
            <div class="text-sm mt-2">Disetujui</div>
            <div class="text-xl font-bold">{{ $approvedBookings ?? 0 }}</div>
        </div>
        <div class="bg-red-100 p-4 rounded-lg shadow animate-slide-up">
            <i class="bi bi-x-circle-fill text-2xl text-red-600"></i>
            <div class="text-sm mt-2">Ditolak</div>
            <div class="text-xl font-bold">{{ $declinedBookings ?? 0 }}</div>
        </div>
    </div>

    <!-- User Info -->
    <div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
        <div class="bg-cyan-100 p-4 rounded-lg shadow animate-slide-up">
            <i class="bi bi-person-fill text-2xl text-cyan-600"></i>
            <div class="text-sm mt-2">Total Pelanggan</div>
            <div class="text-xl font-bold">{{ $totalCustomers ?? 0 }}</div>
        </div>
        <div class="bg-indigo-100 p-4 rounded-lg shadow animate-slide-up">
            <i class="bi bi-briefcase-fill text-2xl text-indigo-600"></i>
            <div class="text-sm mt-2">Total Karyawan</div>
            <div class="text-xl font-bold">{{ $totalEmployees ?? 0 }}</div>
        </div>
    </div>

    <!-- Informasi Login -->
    <div class="bg-white p-4 rounded-lg shadow animate-slide-up">
        <h2 class="text-lg font-semibold text-gray-700 mb-2">Informasi Pengguna</h2>
        <p class="text-sm text-gray-600">Login sebagai: <strong>{{ Auth::user()->role }}</strong></p>
        <p class="text-sm text-gray-600">Email: <strong>{{ Auth::user()->email }}</strong></p>
        <p class="text-sm text-gray-600">Waktu Login: <strong>{{ now()->translatedFormat('l, d F Y') }}</strong></p>
    </div>
</div>

<!-- Toggle Script -->
<script>
    function toggleSidebar() {
        const sidebar = document.getElementById('sidebar');
        const overlay = document.getElementById('overlay');
        const isHidden = sidebar.classList.contains('hidden');

        if (isHidden) {
            sidebar.classList.remove('hidden');
            overlay.classList.remove('hidden');
        } else {
            sidebar.classList.add('hidden');
            overlay.classList.add('hidden');
        }
    }
</script>

</body>
</html>
