<!DOCTYPE html>
<html lang="id">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>@yield('title', 'Dashboard Anggota') - Sarakata</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <script>
        tailwind.config = {
            theme: { extend: {
                fontFamily: { sans: ['Inter', 'sans-serif'] },
                colors: {
                    primary: { 50:'#eef2ff',100:'#e0e7ff',200:'#c7d2fe',300:'#a5b4fc',400:'#818cf8',500:'#6366f1',600:'#4f46e5',700:'#4338ca',800:'#3730a3',900:'#312e81' },
                }
            }}
        }
    </script>
    <style>
        .gradient-text { background: linear-gradient(135deg, #4f46e5 0%, #7c3aed 50%, #2563eb 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; }
    </style>
</head>
<body class="bg-gray-50 font-sans antialiased flex flex-col h-screen overflow-hidden">

    {{-- TOP HEADER --}}
    <header class="bg-gradient-to-r from-primary-600 via-primary-700 to-primary-800 text-white h-16 flex items-center justify-between px-6 shadow-lg z-20">
        <div class="flex items-center gap-3">
            <div class="w-9 h-9 bg-white/15 rounded-xl flex items-center justify-center backdrop-blur-sm">
                <i class="fas fa-book-open text-lg"></i>
            </div>
            <h1 class="text-base font-bold tracking-wide">SARAKATA <span class="font-normal text-primary-200 hidden sm:inline">— Dashboard Anggota</span></h1>
        </div>
        <div class="flex items-center gap-4">
            <form method="POST" action="{{ route('logout') }}">
                @csrf
                <button class="flex items-center gap-2 px-3 py-1.5 rounded-lg bg-white/10 hover:bg-white/20 transition text-sm font-medium">
                    <i class="fas fa-sign-out-alt text-xs"></i> Logout
                </button>
            </form>
            <div class="w-9 h-9 rounded-xl overflow-hidden border-2 border-white/30">
                <img src="https://ui-avatars.com/api/?name={{ auth()->user()->name ?? 'User' }}&background=6366f1&color=fff" class="w-full h-full object-cover">
            </div>
        </div>
    </header>

    <div class="flex flex-1 overflow-hidden">
        {{-- SIDEBAR --}}
        <aside class="w-64 bg-white shadow-xl flex-col overflow-y-auto z-10 border-r border-gray-100 hidden md:flex">
            <div class="flex flex-col items-center py-8 border-b border-gray-100 px-4">
                <div class="w-20 h-20 rounded-2xl overflow-hidden border-4 border-primary-100 shadow-lg shadow-primary-100">
                    <img src="https://ui-avatars.com/api/?name={{ auth()->user()->name ?? 'User' }}&background=6366f1&color=fff&size=128" class="w-full h-full object-cover">
                </div>
                <h2 class="mt-4 font-bold text-gray-800 text-lg">{{ auth()->user()->name ?? 'User' }}</h2>
                <span class="px-3 py-1 mt-1.5 text-[10px] font-bold text-primary-700 bg-primary-50 rounded-full uppercase tracking-wider">Anggota</span>
            </div>

            <nav class="flex-1 py-6 space-y-1 px-3">
                <a href="{{ route('user.dashboard') }}"
                   class="flex items-center gap-3 px-4 py-3 rounded-xl transition-all duration-300 mb-1
                   {{ request()->routeIs('user.dashboard') ? 'bg-gradient-to-r from-primary-500 to-primary-600 text-white shadow-lg shadow-primary-200' : 'text-gray-500 hover:bg-primary-50 hover:text-primary-600' }}">
                    <i class="fas fa-th-large w-5 text-center"></i>
                    <span class="font-semibold text-sm">Dashboard</span>
                </a>

                <a href="#" class="flex items-center gap-3 px-4 py-3 rounded-xl text-gray-300 cursor-not-allowed mb-1" title="Coming Soon">
                    <i class="fas fa-history w-5 text-center"></i>
                    <span class="text-sm">Riwayat Peminjaman</span>
                </a>
            </nav>
        </aside>

        {{-- CONTENT --}}
        <main class="flex-1 overflow-y-auto bg-gray-50 p-8">
            @yield('content')
        </main>
    </div>

</body>
</html>
