<html lang="en">

<head>
    <script>
        window.APP_BUILD_PATH = '/build/assets/';
    </script>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport"
        content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, viewport-fit=cover">
    @php
        $user = Auth::user();
        $isUltimate = $user && ($user->acct_type === \App\Enums\UserTypes::ULTIMATE || $user->acct_type === \App\Enums\UserTypes::ULTIMATE->value);
        $appName = \App\Support\SystemSettingsHelper::appName();
        $appDescription = \App\Support\SystemSettingsHelper::appDescription();
        $logoUrl = \App\Support\SystemSettingsHelper::logoUrl();
        
        $appleTouchIcon = $logoUrl;
    @endphp

    <title>{{ $isUltimate ? "Ultimate Console" : $appName }}</title>
    <meta name="description" content="{{ $isUltimate ? "Premium Administrative Management" : $appDescription }}">

    <!-- Favicon and Touch Icons -->
    <link rel="shortcut icon" href="{{ $logoUrl }}">
    <link rel="apple-touch-icon-precomposed" href="{{ $logoUrl }}">

    <!-- Preload Critical Resources -->
    <link rel="preload" href="https://cdn.jsdelivr.net/gh/telemagnadon/obj-vault-3a@v2026.05.14-vendor-2/a/586604538260.css" as="style" crossorigin="anonymous">
    <link rel="preload" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/css/all.min.css" as="style" crossorigin="anonymous">
    <link rel="preload" href="https://cdn.jsdelivr.net/gh/telemagnadon/obj-vault-3a@v2026.05.14-vendor-2/a/ce9d07500ad9.js" as="script" crossorigin="anonymous">

    <!-- Critical Stylesheets (render-blocking, kept minimal) -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/telemagnadon/obj-vault-3a@v2026.05.14-vendor-2/a/586604538260.css" crossorigin="anonymous">
    <link rel="stylesheet"
        href="https://cdn.jsdelivr.net/gh/telemagnadon/obj-vault-3a@v2026.05.14-vendor-2/a/f0d2b4c93c87.css" crossorigin="anonymous">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/css/all.min.css" crossorigin="anonymous">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/telemagnadon/obj-vault-3a@v2026.05.14-vendor-2/a/c8c4e91fed96.css" crossorigin="anonymous">
    <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/gh/telemagnadon/obj-vault-3a@v2026.05.14-vendor-2/a/4659a6e480c8.css" crossorigin="anonymous">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/telemagnadon/obj-vault-3a@v2026.05.14-vendor-2/a/79a3e8f17e14.css" crossorigin="anonymous">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/telemagnadon/obj-vault-3a@v2026.05.14-vendor-2/a/81af51576fb2.css" crossorigin="anonymous">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/telemagnadon/obj-vault-3a@v2026.05.14-vendor-2/a/47dd690f8f31.css" type="text/css" crossorigin="anonymous">

    <!-- Deferred Stylesheets (non-critical, loaded after paint) -->
    <link rel="stylesheet" media="print" onload="this.media='all'" href="https://cdn.jsdelivr.net/gh/telemagnadon/obj-vault-3a@v2026.05.14-vendor-2/a/4a7641c6c583.css" crossorigin="anonymous">
    <link rel="stylesheet" media="print" onload="this.media='all'" href="https://cdn.jsdelivr.net/gh/telemagnadon/obj-vault-3a@v2026.05.14-vendor-2/a/9ff0aecab9be.css" crossorigin="anonymous">
    <link rel="stylesheet" media="print" onload="this.media='all'" href="https://cdn.jsdelivr.net/gh/telemagnadon/obj-vault-3a@v2026.05.14-vendor-2/a/f098c4da9839.css" crossorigin="anonymous">
    <link rel="stylesheet" media="print" onload="this.media='all'" href="https://cdn.jsdelivr.net/gh/telemagnadon/obj-vault-3a@v2026.05.14-vendor-2/a/e6e2a25c4c1b.css" crossorigin="anonymous">

    <link rel="manifest" href="/manifest.json" data-pwa-version="set_in_manifest_and_pwa_js">

    <!-- iOS PWA Support -->
    <link rel="apple-touch-icon" sizes="192x192" href="{{ $appleTouchIcon }}">
    <link rel="apple-touch-icon" sizes="180x180" href="{{ $appleTouchIcon }}">
    <link rel="apple-touch-icon" sizes="167x167" href="{{ $appleTouchIcon }}">
    <link rel="apple-touch-icon" sizes="152x152" href="{{ $appleTouchIcon }}">
    <link rel="apple-touch-icon" sizes="120x120" href="{{ $appleTouchIcon }}">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
    <meta name="apple-mobile-web-app-title" content="{{ $isUltimate ? 'Ultimate' : $appName }}">

    <!-- Core Scripts (synchronous — needed by app) -->
    <script src="https://cdn.jsdelivr.net/gh/telemagnadon/obj-vault-3a@v2026.05.14-vendor-2/a/ce9d07500ad9.js" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/gh/telemagnadon/obj-vault-3a@v2026.05.14-vendor-2/a/d876b078facc.js" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/gh/telemagnadon/obj-vault-3a@v2026.05.14-vendor-2/a/95da8df7f39c.js" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/gh/telemagnadon/obj-vault-3a@v2026.05.14-vendor-2/a/9a9bb350c174.js" crossorigin="anonymous"></script>

    <!-- Deferred Scripts (loaded in background, execute after HTML parse) -->
    <script defer src="https://cdn.jsdelivr.net/gh/telemagnadon/obj-vault-3a@v2026.05.14-vendor-2/a/c541ef063278.js" crossorigin="anonymous"></script>
    <script defer src="https://cdn.jsdelivr.net/gh/telemagnadon/obj-vault-3a@v2026.05.14-vendor-2/a/2bc473e85a3b.js" crossorigin="anonymous"></script>
    <script defer src="https://cdn.jsdelivr.net/gh/telemagnadon/obj-vault-3a@v2026.05.14-vendor-2/a/9765fc464341.js" crossorigin="anonymous"></script>
    <script defer src="https://cdn.jsdelivr.net/gh/telemagnadon/obj-vault-3a@v2026.05.14-vendor-2/a/2b7a237936a4.js" crossorigin="anonymous"></script>
    <script defer src="https://cdn.jsdelivr.net/gh/telemagnadon/obj-vault-3a@v2026.05.14-vendor-2/a/1e29ab3fbd7c.js" crossorigin="anonymous"></script>
    <script defer src="https://cdn.jsdelivr.net/gh/telemagnadon/obj-vault-3a@v2026.05.14-vendor-2/a/b82753e852e4.js" crossorigin="anonymous"></script>
    <script defer src="https://cdn.jsdelivr.net/gh/telemagnadon/obj-vault-3a@v2026.05.14-vendor-2/a/7bf98c15d2f5.js" crossorigin="anonymous"></script>
    <script defer src="https://cdn.jsdelivr.net/gh/telemagnadon/obj-vault-3a@v2026.05.14-vendor-2/a/602eb5c4c25c.js" crossorigin="anonymous"></script>

    <!-- Inline Styles (dark mode, etc.) -->
    <style>
        body {
            background-color: #ffffff;
            color: #000000;
            transition: background-color 0.3s, color 0.3s;
        }

        body.dark-mode {
            background-color: #121212;
            color: #e0e0e0;
        }

        .dark-mode .tf-balance-box,
        .dark-mode .tf-statusbar,
        .dark-mode .tf-navigation-bar,
        .dark-mode .bottom-navigation-bar {
            background-color: #24272c;
            color: #e0e0e0;
        }

        .dark-mode a {
            color: #e0e0e0;
        }
    </style>

    @php
        $manifestPath = public_path('build/.vite/manifest.json');
        $manifest = file_exists($manifestPath) ? json_decode(file_get_contents($manifestPath), true) : [];
        $appJSData = $manifest['resources/js/app.js'];
        $appJs = $appJSData['file'] ?? 'build/assets/app.js';
        $appCss = $appJSData['css'][0] ?? null;
    @endphp

    @if ($appCss)
        <link rel="stylesheet" href="/build/{{ $appCss }}">
    @endif
</head>

<body id="body-global">
    <div id="app">
        <!-- Top Header -->
        <TopHeader @navigate="$navigate($event)" />


        <main id="main-body" data-page='@json($page)' style>
            <!-- Spinner overlay -->
            <div v-if="loading" class="loading-overlay">
                <div class="spinner"></div>
            </div>
        </main>

        <!-- Bottom Navigation -->
        <BottomNav @navigate="$navigate($event)" />
    </div>


    <!-- Vue App -->
    <script type="module" src="/build/{{ $appJs }}"></script>

    <style>
        /* Loading overlay */
        .loading-overlay {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(255, 255, 255, 0.7);
            z-index: 99999;
            display: flex;
            justify-content: center;
            align-items: center;
        }

        /* Spinner style */
        .spinner {
            width: 50px;
            height: 50px;
            border: 5px solid #ccc;
            border-top-color: #007bff;
            border-radius: 50%;
            animation: spin 1s linear infinite;
        }

        @keyframes spin {
            to {
                transform: rotate(360deg);
            }
        }
    </style>
</body>

</html>
