<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}" data-theme="@themeId">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="csrf-token" content="{{ csrf_token() }}">

    <title>{{ $title ?? config('app.name', 'Laravel') }}</title>

      <!--THEME:--ADD TO TOP OT PREVENT FLICKERING -->
      <script>

         /* Function to apply or remove the dark theme */
        function updateTheme(isDark) {
            if (isDark) {
                // document.documentElement.classList.add('dark');  // Add dark class to the root element
            } else {
                document.documentElement.classList.remove('dark');
            }
        }
    
        /* Check the initial theme preference */ 
        const darkModeMediaQuery = window.matchMedia('(prefers-color-scheme: dark)');
        updateTheme(darkModeMediaQuery.matches);
    
        /* listen to changed in (prefers-color-scheme: dark) */
        darkModeMediaQuery.addEventListener('change', (event) => {
            updateTheme(event.matches);
        });

        /* Add This to update theme when page is wire navigated */
        document.addEventListener('livewire:navigated', () => {
          const darkModeMediaQuery = window.matchMedia('(prefers-color-scheme: dark)');
          updateTheme(darkModeMediaQuery.matches);  // Re-apply the theme based on system preference
         });
      </script>
    
    <!-- Fonts -->
    {{-- <link rel="preconnect" href="https://fonts.bunny.net">
    <link href="https://fonts.bunny.net/css?family=figtree:400,500,600&display=swap" rel="stylesheet" /> --}}

    <!-- Dynamic Theme CSS Custom Properties -->
    <style>
        :root {
            {!! theme_css_vars() !!}
        }
    </style>

    @vite(['resources/css/app.css', 'resources/css/fonts.css', 'resources/js/app.js'])
    @livewireStyles
    @wirechatStyles
    @wireUiScripts

    <style>
/* Theme-aware typography */
body {
    font-family: var(--font-family-body, 'Poppins', sans-serif) !important;
}

/* Theme-aware heading styles */
h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-family-heading, 'Oswald', sans-serif) !important;
    text-transform: var(--heading-transform, uppercase) !important;
}

/* Apply theme-specific CSS custom properties */
:root {
    @themeCssVars
}
    </style>
</head>

<body class="font-sans antialiased flex flex-col min-h-screen">

    <x-jetstream.banner />
    <x-jetstream.toaster />

       <div class="flex-grow bg-gray-100">
        @livewire('navigation-menu')
        <x-notifications position="bottom-end" />


        <header class="bg-theme-brand shadow lg:mt-16">
                <!-- System Anounnucement -->
                @livewire('system-announcement', ['type' => 'SiteContents\SystemAnnouncement' ?? null, 'limit' => 1])
                <!-- Header --->
                <div class="max-w-7xl mx-auto pt-1 pb-2 px-4 sm:px-6 lg:px-8">
                    <div class="mt-2 text-xl font-semibold leading-tight text-gray-100">
                        {{ __('Chat messenger') }}
                    </div>
                </div>
            </header>
        <div class="bg-[var(--wc-light-primary)] dark:bg-[var(--wc-dark-primary)]">
            <!-- Page Content -->
            <main class="h-[calc(100vh_-_3rem)] lg:h-[calc(100vh_-_7rem)] max-w-7xl mx-auto overflow-hidden bg-white shadow-xl">
                {{ $slot }}
            </main>
        </div>
    </div>
    @auth
        @livewire('account-info-modal')
    @endauth
    @livewireScripts
    @wirechatAssets
</body>

</html>
