<!doctype html>
<html lang="id" class="h-full bg-slate-50">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="csrf-token" content="{{ csrf_token() }}">

    <title>@yield('title', 'Admin') &middot; {{ config('app.name', 'DSI112') }}</title>

    @vite(['resources/css/app.css', 'resources/js/site.js'])
</head>
<body class="h-full font-sans text-slate-700 antialiased">
    <div class="flex min-h-full">
        <!-- Sidebar -->
        <aside class="hidden w-64 shrink-0 border-r border-slate-100 bg-white md:flex md:flex-col">
            <div class="flex h-16 items-center px-6 text-xl font-semibold tracking-tight text-slate-900">
                DSI<span class="text-indigo-600">112</span>
            </div>

            <nav class="flex-1 space-y-1 px-4 py-4 text-sm font-medium">
                <a href="{{ route('admin.dashboard') }}"
                   class="flex items-center gap-3 rounded-lg px-3 py-2 transition {{ request()->routeIs('admin.dashboard') ? 'bg-indigo-50 text-indigo-600' : 'text-slate-600 hover:bg-slate-50' }}">
                    Dashboard
                </a>

                @can('view users')
                    <a href="{{ route('admin.users.index') }}"
                       class="flex items-center gap-3 rounded-lg px-3 py-2 transition {{ request()->routeIs('admin.users.*') ? 'bg-indigo-50 text-indigo-600' : 'text-slate-600 hover:bg-slate-50' }}">
                        Pengguna
                    </a>
                @endcan

                @can('view sections')
                    <a href="{{ route('admin.sections.index') }}"
                       class="flex items-center gap-3 rounded-lg px-3 py-2 transition {{ request()->routeIs('admin.sections.*') ? 'bg-indigo-50 text-indigo-600' : 'text-slate-600 hover:bg-slate-50' }}">
                        Konten Section
                    </a>
                @endcan

                @can('view themes')
                    <a href="{{ route('admin.themes.index') }}"
                       class="flex items-center gap-3 rounded-lg px-3 py-2 transition {{ request()->routeIs('admin.themes.*') ? 'bg-indigo-50 text-indigo-600' : 'text-slate-600 hover:bg-slate-50' }}">
                        Tema Warna
                    </a>
                @endcan

                @role('superadmin')
                    <a href="{{ route('admin.roles.index') }}"
                       class="flex items-center gap-3 rounded-lg px-3 py-2 transition {{ request()->routeIs('admin.roles.*') ? 'bg-indigo-50 text-indigo-600' : 'text-slate-600 hover:bg-slate-50' }}">
                        Role
                    </a>
                    <a href="{{ route('admin.permissions.index') }}"
                       class="flex items-center gap-3 rounded-lg px-3 py-2 transition {{ request()->routeIs('admin.permissions.*') ? 'bg-indigo-50 text-indigo-600' : 'text-slate-600 hover:bg-slate-50' }}">
                        Permission
                    </a>
                @endrole
            </nav>

            <div class="border-t border-slate-100 p-4">
                <a href="{{ url('/') }}" class="text-xs font-medium text-slate-400 hover:text-indigo-600">&larr; Kembali ke website</a>
            </div>
        </aside>

        <div class="flex min-w-0 flex-1 flex-col">
            <!-- Topbar -->
            <header class="flex h-16 items-center justify-between border-b border-slate-100 bg-white px-6">
                <div class="text-lg font-semibold text-slate-900">@yield('title', 'Admin')</div>

                <div class="flex items-center gap-4">
                    <span class="text-sm text-slate-500">{{ auth()->user()->name }}</span>
                    <form method="POST" action="{{ route('logout') }}">
                        @csrf
                        <button type="submit" class="rounded-full bg-slate-900 px-4 py-1.5 text-sm font-medium text-white transition hover:bg-indigo-600">
                            Keluar
                        </button>
                    </form>
                </div>
            </header>

            <main class="flex-1 px-6 py-8">
                @yield('content')
            </main>
        </div>
    </div>
</body>
</html>
