<!doctype html>
<html lang="id">
<head>
    <meta charset="utf-8">
    <meta name="csrf-token" content="{{ csrf_token() }}">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>{{ $title ?? 'NusaClouds API Center' }}</title>
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Public+Sans:wght@300;400;500;600;700&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="{{ asset('vendor/vuexy-lite/admin.css') }}">
</head>
<body>
@if ($guest ?? false)
    {{ $slot }}
@else
    @php
        $icons = [
            'dashboard' => '<path d="M3 13h8V3H3v10Zm0 8h8v-6H3v6Zm10 0h8V11h-8v10Zm0-18v6h8V3h-8Z" />',
            'products' => '<path d="m12 3 8 4.5v9L12 21l-8-4.5v-9L12 3Z" /><path d="m4.5 8 7.5 4.2L19.5 8" /><path d="M12 12.2V21" />',
            'clients' => '<path d="M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2" /><circle cx="9" cy="7" r="4" /><path d="M22 21v-2a4 4 0 0 0-3-3.9" /><path d="M16 3.1a4 4 0 0 1 0 7.8" />',
            'licenses' => '<circle cx="7.5" cy="15.5" r="5.5" /><path d="m12 11 8-8" /><path d="m16 7 3 3" /><path d="m18 5 3 3" />',
            'releases' => '<path d="M12 16V4" /><path d="m7 9 5-5 5 5" /><path d="M20 16.5A4.5 4.5 0 0 1 15.5 21h-7A4.5 4.5 0 0 1 4 16.5" />',
            'changelog' => '<path d="M4 19.5A2.5 2.5 0 0 1 6.5 17H20" /><path d="M6.5 2H20v20H6.5A2.5 2.5 0 0 1 4 19.5v-15A2.5 2.5 0 0 1 6.5 2Z" /><path d="M8 7h8" /><path d="M8 11h6" />',
            'logs' => '<path d="M3 12h4l3 8 4-16 3 8h4" />',
            'setup' => '<circle cx="12" cy="12" r="3" /><path d="M19.4 15a1.7 1.7 0 0 0 .3 1.9l.1.1a2 2 0 1 1-2.8 2.8l-.1-.1a1.7 1.7 0 0 0-1.9-.3 1.7 1.7 0 0 0-1 1.6V21a2 2 0 1 1-4 0v-.1a1.7 1.7 0 0 0-1-1.6 1.7 1.7 0 0 0-1.9.3l-.1.1A2 2 0 1 1 4.2 17l.1-.1A1.7 1.7 0 0 0 4.6 15a1.7 1.7 0 0 0-1.6-1H3a2 2 0 1 1 0-4h.1a1.7 1.7 0 0 0 1.6-1 1.7 1.7 0 0 0-.3-1.9l-.1-.1A2 2 0 1 1 7 4.2l.1.1A1.7 1.7 0 0 0 9 4.6a1.7 1.7 0 0 0 1-1.6V3a2 2 0 1 1 4 0v.1a1.7 1.7 0 0 0 1 1.6 1.7 1.7 0 0 0 1.9-.3l.1-.1A2 2 0 1 1 19.8 7l-.1.1a1.7 1.7 0 0 0-.3 1.9 1.7 1.7 0 0 0 1.6 1h.1a2 2 0 1 1 0 4H21a1.7 1.7 0 0 0-1.6 1Z" />',
            'logout' => '<path d="M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4" /><path d="M16 17l5-5-5-5" /><path d="M21 12H9" />',
            'menu' => '<path d="M4 6h16" /><path d="M4 12h16" /><path d="M4 18h16" />',
        ];

        $iconSvg = function (string $name) use ($icons): string {
            return '<svg class="nav-icon" viewBox="0 0 24 24" aria-hidden="true">' . $icons[$name] . '</svg>';
        };

        $items = [
            ['route' => 'admin.dashboard', 'label' => 'Dashboard', 'icon' => 'dashboard'],
            ['route' => 'admin.products', 'label' => 'Products', 'icon' => 'products'],
            ['route' => 'admin.clients', 'label' => 'Clients', 'icon' => 'clients'],
            ['route' => 'admin.licenses', 'label' => 'Licenses', 'icon' => 'licenses'],
            ['route' => 'admin.releases', 'label' => 'Releases', 'icon' => 'releases'],
            ['route' => 'admin.changelog', 'label' => 'Changelog', 'icon' => 'changelog'],
            ['route' => 'admin.logs', 'label' => 'API Logs', 'icon' => 'logs'],
            ['route' => 'admin.setup', 'label' => 'Setup', 'icon' => 'setup'],
        ];
    @endphp

    <div class="layout">
        <aside class="sidebar" id="adminSidebar" aria-label="Admin navigation">
            <a class="brand" href="{{ route('admin.dashboard') }}">
                <span class="brand-mark">N</span>
                <span class="brand-text">NusaClouds</span>
            </a>

            <nav class="menu">
                @foreach ($items as $item)
                    <a class="menu-link @if (request()->routeIs($item['route'])) active @endif" href="{{ route($item['route']) }}">
                        {!! $iconSvg($item['icon']) !!}
                        <span>{{ $item['label'] }}</span>
                    </a>
                @endforeach
            </nav>

            <form class="logout-form" method="post" action="{{ route('admin.logout') }}">
                @csrf
                <button class="menu-link logout-button" type="submit">
                    {!! $iconSvg('logout') !!}
                    <span>Logout</span>
                </button>
            </form>
        </aside>

        <div class="layout-page">
            <header class="topbar">
                <button class="icon-button sidebar-toggle" type="button" aria-label="Open navigation" aria-controls="adminSidebar">
                    {!! $iconSvg('menu') !!}
                </button>
                <div>
                    <div class="breadcrumb">Admin / {{ $title ?? 'Dashboard' }}</div>
                    <h1>{{ $title ?? 'Dashboard' }}</h1>
                </div>
                <a class="health-button" href="{{ url('/api/health') }}">Health</a>
            </header>

            <main class="content">
                @if (session('status'))
                    <div class="flash">{{ session('status') }}</div>
                @endif
                @if ($errors->any())
                    <div class="errors">{{ $errors->first() }}</div>
                @endif
                {{ $slot }}
            </main>
        </div>
    </div>
    <div class="sidebar-backdrop"></div>
@endif

<script src="{{ asset('vendor/vuexy-lite/admin.js') }}"></script>
</body>
</html>
