<!DOCTYPE html>
<html lang="id">
<head>
<meta charset="UTF-8">
<title>@yield('title') - Laravel</title>
<script src="https://cdn.tailwindcss.com"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">
<style>
* { font-family: 'Inter', sans-serif; }
.sidebar-link { transition: all 0.2s ease; }
.sidebar-link:hover { transform: translateX(5px); }
.stat-card { transition: transform 0.3s ease, box-shadow 0.3s ease; }
.stat-card:hover { transform: translateY(-5px); box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1); }
.active-menu { position: relative; }
.active-menu::after { content: ''; position: absolute; right: -8px; top: 50%; transform: translateY(-50%); width: 4px; height: 20px; background: #f97316; border-radius: 2px; }
.badge-orange { background: linear-gradient(135deg, #fb923c 0%, #f97316 100%); color: white; }
.btn-primary { background: linear-gradient(135deg, #f97316 0%, #ea580c 100%); transition: all 0.3s ease; }
.btn-primary:hover { transform: translateY(-2px); box-shadow: 0 4px 12px rgba(249, 115, 22, 0.3); }
</style>

</head>
<body class="bg-gray-50 min-h-screen">

<div class="flex">

    <!-- SIDEBAR -->
    <aside class="w-64 min-h-screen bg-white border-r shadow-sm hidden md:block">
        <div class="p-6">
            <div class="flex items-center gap-3 mb-10">
                <div class="w-10 h-10 bg-orange-600 rounded-lg flex items-center justify-center">
                    <span class="text-white font-bold text-lg">L</span>
                </div>
                <div>
                    <h1 class="font-bold text-lg text-gray-800">Laravel {{ Auth::user()->email == 'admin@gmail.com' ? 'Admin' : 'User' }}</h1>
                    <p class="text-xs text-gray-500">Panel Dashboard</p>
                </div>
            </div>

            <div class="space-y-1">
                @yield('sidebar')
            </div>

            <div class="mt-20 pt-6 border-t border-gray-100">
                <div class="px-4 py-3 bg-orange-50 rounded-lg">
                    <p class="text-xs text-orange-800 font-medium">Selamat datang kembali,</p>
                    <p class="text-sm font-semibold text-orange-900">{{ Auth::user()->name }}</p>
                </div>
            </div>
        </div>
    </aside>

    <!-- CONTENT -->
    <div class="flex-1">

        <!-- HEADER -->
        <header class="bg-white border-b shadow-sm sticky top-0 z-10">
            <div class="px-6 py-4 flex justify-between items-center">
                <h1 class="text-xl font-bold text-gray-800">@yield('page-title')</h1>
                <div class="flex items-center gap-4">
                    <div class="hidden md:block text-sm text-gray-600 bg-gray-50 px-3 py-1 rounded-lg">
                        <i class="fas fa-calendar-alt mr-2"></i>
                        <span id="currentDateTime"></span>
                    </div>
                    <div class="relative">
                        <button onclick="toggleDropdown()" class="flex items-center gap-3 px-3 py-2 hover:bg-gray-100 rounded-lg transition">
                            <div class="w-9 h-9 bg-gradient-to-r from-orange-500 to-orange-600 rounded-full flex items-center justify-center text-white font-semibold">
                                {{ substr(Auth::user()->name, 0, 1) }}
                            </div>
                            <div class="hidden md:block text-left">
                                <p class="text-sm font-medium">{{ Auth::user()->name }}</p>
                                <p class="text-xs text-gray-500">{{ Auth::user()->email == 'admin@gmail.com' ? 'Administrator' : 'User' }}</p>
                            </div>
                            <i class="fas fa-chevron-down text-sm text-gray-400"></i>
                        </button>

                        <div id="dropdownMenu" class="hidden absolute right-0 mt-2 w-56 bg-white rounded-xl shadow-lg border border-gray-200 py-2 z-20">
                            <div class="px-4 py-3 border-b border-gray-100">
                                <p class="font-medium">{{ Auth::user()->name }}</p>
                                <p class="text-sm text-gray-500">{{ Auth::user()->email }}</p>
                            </div>
                            <div class="border-t border-gray-100 mt-1 pt-1">
                                <form method="POST" action="{{ route('logout') }}">
                                    @csrf
                                    <button class="w-full flex items-center gap-3 px-4 py-3 hover:bg-red-50 text-red-600">
                                        <i class="fas fa-sign-out-alt w-5"></i> Keluar
                                    </button>
                                </form>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </header>

        <!-- MAIN -->
        <main class="p-6">
            @yield('content')
        </main>

    </div>
</div>

<script>
function toggleDropdown() {
    document.getElementById('dropdownMenu').classList.toggle('hidden');
}
window.addEventListener('click', function(e) {
    const dropdown = document.getElementById('dropdownMenu');
    const button = document.querySelector('.relative button');
    if (!e.target.closest('.relative') && !dropdown.classList.contains('hidden')) {
        dropdown.classList.add("hidden");
    }
});
function updateDateTime() {
    const now = new Date();
    const options = { weekday:'long', year:'numeric', month:'long', day:'numeric', hour:'2-digit', minute:'2-digit' };
    document.getElementById('currentDateTime').textContent = now.toLocaleDateString('id-ID', options);
}
updateDateTime();
setInterval(updateDateTime, 60000);
</script>
    <!-- TOAST NOTIFICATION -->
    @if (session('success') || session('error'))
    <div id="toast-notification"
        class="fixed bottom-6 right-6 z-[9999] flex items-center gap-3 bg-white border {{ session('success') ? 'border-green-200' : 'border-red-200' }} shadow-2xl rounded-2xl px-5 py-4 max-w-sm w-full"
        style="animation: slideInRight 0.4s ease;">
        <div class="w-10 h-10 {{ session('success') ? 'bg-green-500' : 'bg-red-500' }} rounded-xl flex items-center justify-center flex-shrink-0">
            <i class="fas {{ session('success') ? 'fa-check' : 'fa-exclamation' }} text-white text-sm"></i>
        </div>
        <div class="flex-1 min-w-0">
            <p class="font-semibold text-gray-800 text-sm">{{ session('success') ? 'Berhasil!' : 'Gagal!' }}</p>
            <p class="text-gray-500 text-xs mt-0.5 truncate">{{ session('success') ?? session('error') }}</p>
        </div>
        <button onclick="closeToast()" class="text-gray-400 hover:text-gray-600 flex-shrink-0 ml-1">
            <i class="fas fa-times text-xs"></i>
        </button>
        <div class="absolute bottom-0 left-0 h-1 {{ session('success') ? 'bg-green-500' : 'bg-red-500' }} rounded-b-2xl" id="toastProgress"
            style="width: 100%; transition: width 5s linear;"></div>
    </div>

    <style>
    @keyframes slideInRight {
        from { opacity: 0; transform: translateX(100px); }
        to   { opacity: 1; transform: translateX(0); }
    }
    @keyframes slideOutRight {
        from { opacity: 1; transform: translateX(0); }
        to   { opacity: 0; transform: translateX(100px); }
    }
    </style>

    <script>
        setTimeout(() => {
            const bar = document.getElementById('toastProgress');
            if (bar) bar.style.width = '0%';
        }, 100);
        setTimeout(() => closeToast(), 5100);
        function closeToast() {
            const toast = document.getElementById('toast-notification');
            if (toast) {
                toast.style.animation = 'slideOutRight 0.3s ease forwards';
                setTimeout(() => toast.remove(), 300);
            }
        }
    </script>
    @endif
</body>
</html>
