<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>@yield('title', 'FILE APP PORTAL')</title>
    @vite(['resources/css/app.css', 'resources/js/app.js'])
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" />
    <style>
        @import url("https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&display=swap");

        body {
            font-family: "Plus Jakarta Sans", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
            background-color: #f4f7f9;
            overflow: hidden;
        }

        #sidebar {
            width: 85px;
            transition: width 0.4s cubic-bezier(0.4, 0, 0.2, 1);
            border-radius: 0 1.5rem 1.5rem 0;
        }

        #sidebar.expanded {
            width: 250px;
        }

        .sidebar-text {
            display: none;
            white-space: nowrap;
        }

        #sidebar.expanded .sidebar-text {
            display: inline-block;
        }

        .workspace-console {
            background: linear-gradient(135deg, #ffffff 0%, #f0fdfa 100%);
            border-radius: 2rem;
            border: 1px solid #e2e8f0;
        }

        .tray-hidden { display: none; }
        .tray-visible { display: block; }

        .scroll-custom::-webkit-scrollbar {
            width: 5px;
        }

        .scroll-custom::-webkit-scrollbar-thumb {
            background: #cbd5e1;
            border-radius: 10px;
        }

        @stack('styles')
    </style>
</head>
<body class="text-slate-900">
    <div class="flex h-screen overflow-hidden">
        <!-- Sidebar -->
        <aside
            id="sidebar"
            class="flex flex-col z-30 shadow-2xl shrink-0"
            style="background: radial-gradient(circle at top left, #062a27 43%, #61d7d4 112%)"
        >
            <div class="h-20 flex items-center px-6">
                <div
                    class="min-w-[42px] h-10 w-10 flex items-center justify-center bg-white/15 rounded-xl border border-white/20 overflow-hidden shadow-lg"
                >
                    <img
                        src="{{ asset('images/favicon.png') }}"
                        alt="Logo"
                        class="w-full h-full object-contain p-1.5"
                        onerror="this.style.display='none'; this.nextElementSibling.style.display='flex'"
                    />
                    <i class="fa-solid fa-layer-group text-white" style="display: none"></i>
                </div>
                <span class="sidebar-text ml-4 font-extrabold text-lg tracking-tight text-white">
                    FMP <span class="text-[#61d7d4]">CORE</span>
                </span>
            </div>
            @php
            // Slug → [route_name, active_pattern]
            $sidebarRouteMap = [
                'portal'          => ['admin.users.index',             'admin.users.*'],
                'accountlayer'    => ['admin.account-lawyer.index',    'admin.account-lawyer.*'],
                'casefile'        => ['admin.case-file.index',         'admin.case-file.*'],
                'generaldocument' => ['admin.general-documents.index', 'admin.general-documents.*'],
                'reports'         => ['admin.reports.index',           'admin.reports.*'],
                'dashboard'       => ['admin.dashboard',               'admin.dashboard'],
                'setting'         => [null,                            null],
                'auditlog'        => [null,                            null],
            ];
            // Fallback icons when module.icon is empty
            $sidebarIconMap = [
                'portal'          => 'fa-users',
                'accountlayer'    => 'fa-diagram-project',
                'casefile'        => 'fa-folder-open',
                'generaldocument' => 'fa-file-lines',
                'reports'         => 'fa-chart-line',
                'dashboard'       => 'fa-gauge',
                'setting'         => 'fa-gear',
                'auditlog'        => 'fa-clock-rotate-left',
            ];
            @endphp
            <nav class="flex-1 px-3 mt-6 space-y-2 text-white/70 text-sm font-semibold overflow-y-auto">
                @foreach($sidebarModules as $mod)
                @php
                    $mapEntry      = $sidebarRouteMap[$mod->slug] ?? [null, null];
                    $routeName     = $mapEntry[0];
                    $activePattern = $mapEntry[1];
                    $icon          = $mod->icon ?: ($sidebarIconMap[$mod->slug] ?? 'fa-circle-dot');
                    $href          = $routeName ? route($routeName) : '#';
                    $isActive      = $activePattern && request()->routeIs($activePattern);
                @endphp
                <a href="{{ $href }}"
                   class="flex items-center p-3.5 rounded-2xl hover:bg-white/10 transition-colors {{ $isActive ? 'bg-white/15 border-r-4 border-[#61d7d4]' : '' }}">
                    <div class="min-w-[30px] flex justify-center">
                        <i class="fa-solid {{ $icon }} text-white"></i>
                    </div>
                    <span class="sidebar-text ml-4 text-sm font-bold text-white">{{ $mod->name }}</span>
                </a>
                @endforeach
            </nav>
        </aside>

        <!-- Main column -->
        <div id="mainColumn" class="flex-1 flex flex-col min-w-0">
            <!-- Header -->
            <header class="h-20 flex items-center justify-between px-8 bg-transparent">
                <div class="flex items-center space-x-6">
                    <button
                        id="toggleBtn"
                        class="w-11 h-11 flex items-center justify-center bg-white rounded-xl shadow-sm border border-slate-200 text-[#00ada8] hover:bg-teal-50"
                        type="button"
                    >
                        <i class="fa-solid fa-bars-staggered"></i>
                    </button>
                    <nav class="flex items-center text-[11px] font-bold text-slate-400 uppercase tracking-widest">
                        <a href="{{ route('admin.dashboard') }}" class="hover:text-[#00ada8] flex items-center">
                            <i class="fa-solid fa-house-chimney text-xs mr-2"></i> Home
                        </a>
                        @yield('breadcrumbs')
                    </nav>
                </div>

                <div class="flex items-center">
                    <div class="flex items-center bg-white rounded-xl p-1 shadow-sm border border-slate-200">
                        <button id="themeToggle" class="p-2 w-10 h-10 text-slate-400 hover:text-[#00ada8]" type="button" title="Theme">
                            <i class="fa-solid fa-moon"></i>
                        </button>
                        <button class="p-2 w-10 h-10 text-slate-400 hover:text-[#00ada8] relative" type="button" title="Notifications">
                            <i class="fa-solid fa-bell"></i>
                            <span class="absolute top-2 right-2 w-2 h-2 bg-red-600 rounded-full"></span>
                        </button>
                        <button class="p-2 w-10 h-10 text-slate-400 hover:text-red-600" type="button" title="Power">
                            <i class="fa-solid fa-power-off"></i>
                        </button>

                        <div class="relative ml-2 border-l border-slate-100 pl-2">
                            <button id="profileBtn" class="flex items-center space-x-3 pr-2" type="button">
                                <img
                                    class="h-8 w-8 rounded-lg"
                                    src="https://ui-avatars.com/api/?name=AD&background=00ada8&color=fff&bold=true"
                                    alt="Profile"
                                />
                                <div class="text-left hidden lg:block">
                                    <p class="text-[11px] font-bold leading-none text-slate-800">{{ auth()->user()->name ?? 'Super Admin' }}</p>
                                    <p class="text-[9px] text-[#00ada8] mt-1 font-bold">● ONLINE</p>
                                </div>
                            </button>
                            <div
                                id="profileTray"
                                class="tray-hidden absolute right-0 mt-4 w-56 bg-white rounded-2xl shadow-2xl border border-slate-100 py-3 z-50"
                            >
                                <a
                                    href="{{ route('admin.profile.show') }}"
                                    class="flex items-center px-5 py-3 text-sm font-bold text-slate-600 hover:bg-teal-50 hover:text-[#00ada8] transition-colors"
                                >
                                    <i class="fa-solid fa-circle-user mr-4"></i> My Profile
                                </a>
                                <div class="border-t border-slate-50 my-2"></div>
                                <form method="POST" action="{{ route('logout') }}" class="m-0">
                                    @csrf
                                    <button
                                        type="submit"
                                        class="w-full flex items-center px-5 py-3 text-sm font-bold text-red-500 hover:bg-red-50 transition-colors text-left"
                                    >
                                        <i class="fa-solid fa-right-from-bracket mr-4"></i> Sign Out
                                    </button>
                                </form>
                            </div>
                        </div>
                    </div>
                </div>
            </header>

            <div id="contentArea" class="flex-1 flex flex-col overflow-hidden">
                @yield('top_content')
                <div class="flex flex-1 overflow-hidden">
                    <main class="flex-1 overflow-y-auto px-8 pb-8 pt-2 scroll-custom transition-all duration-350">
                        @yield('content')
                    </main>
                </div>
            </div>
        </div>
    </div>

    @stack('modals')

    <script>
        // Sidebar toggle
        document.getElementById("toggleBtn").addEventListener("click", () => {
            document.getElementById("sidebar").classList.toggle("expanded");
        });

        // Profile tray toggle
        const profileBtn = document.getElementById("profileBtn");
        const profileTray = document.getElementById("profileTray");

        if (profileBtn && profileTray) {
            profileBtn.addEventListener("click", (e) => {
                e.stopPropagation();
                profileTray.classList.toggle("tray-hidden");
                profileTray.classList.toggle("tray-visible");
            });

            document.addEventListener("click", (e) => {
                if (!profileBtn.contains(e.target) && !profileTray.contains(e.target)) {
                    profileTray.classList.add("tray-hidden");
                    profileTray.classList.remove("tray-visible");
                }
            });
        }
    </script>
    
    @stack('scripts')
</body>
</html>
