<!DOCTYPE html>
<html lang="en" x-data="adminApp" :class="{ 'dark': darkMode }">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="csrf-token" content="{{ csrf_token() }}">
    <title>@yield('title', 'Admin') — {{ config('app.name') }}</title>
    @php $favicon = \AleshaCMS\Models\CMS\Setting::get('site_favicon'); @endphp
    @if($favicon)
    <link rel="icon" href="{{ $favicon }}" type="{{ str_ends_with($favicon, '.ico') ? 'image/x-icon' : 'image/png' }}">
    <link rel="shortcut icon" href="{{ $favicon }}">
    @endif
    @vite(['resources/css/admin.css', 'resources/js/admin/app.js'])
</head>
<body class="bg-gray-100 dark:bg-gray-900 font-sans antialiased">

<div class="flex h-screen overflow-hidden">

    {{-- Mobile backdrop --}}
    <div x-show="sidebarOpen" x-cloak
         class="fixed inset-0 z-20 bg-black/50 lg:hidden"
         @click="sidebarOpen = false"></div>

    {{-- Sidebar --}}
    <aside class="fixed inset-y-0 left-0 z-30 bg-gray-900 dark:bg-gray-950 flex-shrink-0 flex flex-col
                  transform transition-all duration-200 ease-in-out
                  lg:static lg:translate-x-0 w-64"
           :class="{
               'translate-x-0':            sidebarOpen,
               '-translate-x-full lg:translate-x-0': !sidebarOpen,
               'lg:w-16':  sidebarCollapsed,
               'lg:w-64':  !sidebarCollapsed,
           }">
        {{-- Header --}}
        <div class="h-16 flex items-center border-b border-gray-800 overflow-hidden flex-shrink-0"
             :class="sidebarCollapsed ? 'lg:justify-center lg:px-0 px-6' : 'px-6'">
            <span class="text-white font-bold text-lg whitespace-nowrap"
                  :class="sidebarCollapsed ? 'lg:hidden' : ''">{{ config('app.name') }}</span>
            {{-- collapsed: show first letter as badge --}}
            <span class="hidden text-white font-bold text-lg"
                  :class="sidebarCollapsed ? 'lg:inline' : 'lg:hidden'">
                {{ substr(config('app.name'), 0, 1) }}
            </span>
        </div>

        <nav class="flex-1 overflow-y-auto py-4" :class="sidebarCollapsed ? 'lg:px-2 px-3' : 'px-3'"
             @click="if(window.innerWidth < 1024) sidebarOpen = false">
            @include('admin.layouts.sidebar')
        </nav>

        {{-- Bottom user area --}}
        <div class="p-3 border-t border-gray-800 flex-shrink-0">
            @php $siteLogo = \AleshaCMS\Models\CMS\Setting::get('site_logo'); @endphp
            <div class="flex items-center gap-3 overflow-hidden"
                 :class="sidebarCollapsed ? 'lg:justify-center' : ''">
                @if($siteLogo)
                <div class="w-8 h-8 rounded-full bg-white flex items-center justify-center overflow-hidden flex-shrink-0 border border-white/20">
                    <img src="{{ $siteLogo }}" alt="{{ config('app.name') }}" class="w-full h-full object-contain p-1">
                </div>
                @else
                <div class="w-8 h-8 rounded-full bg-indigo-500 flex items-center justify-center text-white text-sm font-medium flex-shrink-0">
                    {{ substr(auth()->user()->name, 0, 1) }}
                </div>
                @endif
                <div class="flex-1 min-w-0" :class="sidebarCollapsed ? 'lg:hidden' : ''">
                    <p class="text-sm font-medium text-white truncate">{{ auth()->user()->name }}</p>
                    <p class="text-xs text-gray-400 truncate">{{ auth()->user()->roles->first()?->name }}</p>
                </div>
                <button type="button" @click="confirmLogout = true"
                        class="text-gray-400 hover:text-white flex-shrink-0"
                        :class="sidebarCollapsed ? 'lg:hidden' : ''"
                        title="Logout">
                    <svg xmlns="http://www.w3.org/2000/svg" class="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 16l4-4m0 0l-4-4m4 4H7m6 4v1a3 3 0 01-3 3H6a3 3 0 01-3-3V7a3 3 0 013-3h4a3 3 0 013 3v1"/>
                    </svg>
                </button>
            </div>
        </div>
    </aside>

    {{-- Main --}}
    <div class="flex-1 flex flex-col overflow-hidden lg:ml-0 min-w-0">
        {{-- Topbar --}}
        <header class="h-16 bg-white dark:bg-gray-800 border-b border-gray-200 dark:border-gray-700 flex items-center px-6 gap-4">
            {{-- Mobile: open sidebar --}}
            <button @click="sidebarOpen = !sidebarOpen" class="lg:hidden text-gray-500">
                <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16"/>
                </svg>
            </button>
            {{-- Desktop: collapse sidebar --}}
            <button @click="sidebarCollapsed = !sidebarCollapsed"
                    class="hidden lg:flex items-center justify-center text-gray-400 hover:text-gray-700 dark:hover:text-gray-200 transition-colors"
                    :title="sidebarCollapsed ? 'Expand sidebar' : 'Collapse sidebar'">
                <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16"/>
                </svg>
            </button>
            <div class="flex-1">
                <h1 class="text-lg font-semibold text-gray-900 dark:text-white">@yield('page-title', 'Dashboard')</h1>
            </div>
            <a href="{{ url('/') }}" target="_blank"
               class="flex items-center gap-1.5 px-3 py-1.5 text-sm text-gray-500 dark:text-gray-400 hover:text-gray-700 dark:hover:text-gray-200 border border-gray-200 dark:border-gray-700 rounded-lg hover:bg-gray-50 dark:hover:bg-gray-700 transition-colors">
                <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14"/>
                </svg>
                View Site
            </a>
            <button @click="darkMode = !darkMode; localStorage.setItem('darkMode', darkMode)" class="text-gray-500 dark:text-gray-400 hover:text-gray-700 dark:hover:text-gray-200">
                <svg x-show="!darkMode" class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M20.354 15.354A9 9 0 018.646 3.646 9.003 9.003 0 0012 21a9.003 9.003 0 008.354-5.646z"/>
                </svg>
                <svg x-show="darkMode" class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 3v1m0 16v1m9-9h-1M4 12H3m15.364 6.364l-.707-.707M6.343 6.343l-.707-.707m12.728 0l-.707.707M6.343 17.657l-.707.707M16 12a4 4 0 11-8 0 4 4 0 018 0z"/>
                </svg>
            </button>
        </header>

        {{-- Content --}}
        <main class="flex-1 overflow-y-auto p-6">
            @if(session('success'))
                <div class="mb-4 p-4 bg-green-50 dark:bg-green-900/20 border border-green-200 dark:border-green-800 rounded-lg text-green-700 dark:text-green-300 text-sm">
                    {{ session('success') }}
                </div>
            @endif
            @if(session('error'))
                <div class="mb-4 p-4 bg-red-50 dark:bg-red-900/20 border border-red-200 dark:border-red-800 rounded-lg text-red-700 dark:text-red-300 text-sm">
                    {{ session('error') }}
                </div>
            @endif
            @yield('content')
        </main>
    </div>
</div>

{{-- Sidebar nav tooltip (icon-only mode) --}}
<div x-show="navTooltip.visible" x-cloak
     :style="{ top: navTooltip.y + 'px' }"
     style="position:fixed; left:68px; z-index:50; transform:translateY(-50%); pointer-events:none;">
    <div style="position:relative; background:#1f2937; color:#fff; padding:5px 10px; border-radius:6px; font-size:13px; font-weight:500; white-space:nowrap; box-shadow:0 4px 12px rgba(0,0,0,.3);">
        <div style="position:absolute; left:-4px; top:50%; transform:translateY(-50%); width:0; height:0; border-top:4px solid transparent; border-bottom:4px solid transparent; border-right:4px solid #1f2937;"></div>
        <span x-text="navTooltip.text"></span>
    </div>
</div>

{{-- Logout confirm modal — di luar aside agar fixed positioning benar --}}
<div x-show="confirmLogout" x-cloak
     style="display:none"
     @keydown.escape.window="confirmLogout = false">
    <div class="fixed inset-0 z-50 bg-black/50"></div>
    <div class="fixed inset-0 z-50 flex items-center justify-center pointer-events-none">
        <div class="bg-white dark:bg-gray-800 rounded-xl shadow-xl p-6 w-80 mx-4 pointer-events-auto">
            <h3 class="text-base font-semibold text-gray-900 dark:text-white mb-2">Keluar dari sistem?</h3>
            <p class="text-sm text-gray-500 dark:text-gray-400 mb-5">Sesi kamu akan diakhiri.</p>
            <div class="flex gap-3 justify-end">
                <button type="button" @click="confirmLogout = false"
                        class="px-4 py-2 text-sm rounded-lg border border-gray-300 dark:border-gray-600 text-gray-600 dark:text-gray-300 hover:bg-gray-50 dark:hover:bg-gray-700">
                    Batal
                </button>
                <form method="POST" action="{{ route('logout') }}">
                    @csrf
                    <button type="submit"
                            class="px-4 py-2 text-sm rounded-lg bg-red-600 hover:bg-red-700 text-white font-medium">
                        Ya, Keluar
                    </button>
                </form>
            </div>
        </div>
    </div>
</div>

@stack('scripts')
</body>
</html>
