<!doctype html>
<html lang="{{ App::getLocale() }}" data-bs-theme="auto">
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <meta name="csrf-token" content="{{ csrf_token() }}">
        <title>{{ config('app.name', '[% application_name %]') }}</title>
        <script>
            const darkThemeName = 'dark';
            const lightThemeName = 'light';
            const getTenantName = () => document.documentElement.getAttribute('data-tenant') || '';
            const getStoredTheme = () => localStorage.getItem(getTenantName() + '-admintheme');
            const setStoredTheme = theme => localStorage.setItem(getTenantName() + '-admintheme', theme);
            const getPreferredTheme = () => {
                const storedTheme = getStoredTheme()
                if (storedTheme) {
                    return storedTheme;
                }

                return window.matchMedia('(prefers-color-scheme: dark)').matches ? darkThemeName : lightThemeName;
            }
            const setTheme = theme => {
                if (theme === 'auto' && window.matchMedia('(prefers-color-scheme: dark)').matches) {
                    document.documentElement.setAttribute('data-bs-theme', darkThemeName);
                } else {
                    document.documentElement.setAttribute('data-bs-theme', theme);
                }
            }
            const getAdminPreferenceKey = () => getTenantName() + '-adminPreferences';
            const getAdminPreferences = () => JSON.parse(localStorage.getItem(getAdminPreferenceKey()));
            const setAdminPreferences = (adminPreferences) => {
                const key = getAdminPreferenceKey();

                localStorage.setItem(key, JSON.stringify(adminPreferences));
                Cookies.set(key, JSON.stringify(adminPreferences), { expires: 360 });
            };

            const themeObserver = new MutationObserver(function (mutations) {

                for (let i = 0; i < mutations.length; i++) {
                    for (let j = 0; j < mutations[i].addedNodes.length; j++) {

                        if (mutations[i].addedNodes[j].tagName == 'BODY') {
                            setTheme(getPreferredTheme());

                            // we're done: 
                            themeObserver.disconnect();
                        };
                    }
                }
            });

            themeObserver.observe(document.documentElement, {
                childList: true,
                subtree: true
            });

            const showActiveTheme = (theme, focus = false) => {
                const themeSwitcher = document.querySelector('#bd-theme');

                if (!themeSwitcher) {
                    return;
                }

                const themeSwitcherText = document.querySelector('#bd-theme-text');
                const activeThemeIcon = document.querySelector('.theme-icon-active');
                const btnToActive = document.querySelector(`[data-bs-theme-value="${theme}"]`);
                const svgOfActiveBtn = btnToActive.querySelector('.theme-icon');

                btnToActive.classList.add('active');
                btnToActive.setAttribute('aria-pressed', 'true');

                activeThemeIcon.innerHTML = svgOfActiveBtn.innerHTML;

                const themeSwitcherLabel = `${themeSwitcherText.textContent} (${btnToActive.dataset.bsThemeValue})`;
                themeSwitcher.setAttribute('aria-label', themeSwitcherLabel);

                const btnsToInactive = document.querySelectorAll(`[data-bs-theme-value]:not([data-bs-theme-value="${theme}"])`);

                for (let i = 0; i < btnsToInactive.length; i++) {
                    btnsToInactive[i].classList.remove('active');
                    btnsToInactive[i].setAttribute('aria-pressed', 'false');
                }

                if (focus) {
                    themeSwitcher.focus();
                }
            }

            window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', () => {
                const storedTheme = getStoredTheme()
                if (storedTheme !== lightThemeName && storedTheme !== darkThemeName) {
                    setTheme(getPreferredTheme());
                }
            });

            window.addEventListener('DOMContentLoaded', () => {
                showActiveTheme(getPreferredTheme());

                document.querySelectorAll('[data-bs-theme-value]')
                    .forEach(toggle => {
                        toggle.addEventListener('click', () => {
                            const theme = toggle.getAttribute('data-bs-theme-value');
                            setStoredTheme(theme);
                            setTheme(theme);
                            showActiveTheme(theme, true);
                        })
                    })
            });
        </script>
        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css" integrity="sha512-DTOQO9RWCH3ppGqcWaEA1BIZOC6xxalwEsw9c2QQeAIftl+Vegovlnee1c9QX4TctnWMn13TZye+giMm8e2LwA==" crossorigin="anonymous" referrerpolicy="no-referrer" />
        <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN" crossorigin="anonymous">
        {{-- <link href="{{ asset('css/app.css') }}" rel="stylesheet"> --}}
    </head>
    <body>

    <nav class="navbar-main navbar navbar-expand-lg fixed-stiky bg-body-tertiary">
        <div class="container-fluid">
            <a class="navbar-brand" href="{!! url('/') !!}">{{ config('app.name', '[% application_name %]') }}</a>
            
            <button type="button" class="navbar-toggler" data-bs-toggle="collapse" data-bs-target="#navbar" aria-expanded="false" aria-controls="navbar" aria-label="Toggle navigation">
                <span class="navbar-toggler-icon"></span>
            </button>
            <div class="collapse navbar-collapse" id="navbar">
                <div class="navbar-nav d-flex align-items-end justify-content-end w-100">
                    <ul class="menu menu-main-menu navbar-nav">
                        <li class="nav-item px-2">
                            <a class="nav-link active" aria-current="page" href="{!! url('/') !!}">Home</a>
                        </li>
                    </ul>

                    <ul class="navbar-nav user-top-navbar">
                        <li class="nav-item">
                            <div class="dropdown">
                                <button class="btn btn-link nav-link dropdown-toggle" id="bd-theme" type="button" aria-expanded="false" data-bs-toggle="dropdown" data-bs-display="static" aria-label="Toggle theme (light)">
                                    <span class="theme-icon-active">
                                        <i class="fa-solid fa-sun"></i>
                                    </span>
                                    <span class="d-none" id="bd-theme-text">Toggle theme</span>
                                </button>
                                <ul class="dropdown-menu dropdown-menu-end position-absolute" aria-labelledby="bd-theme-text">
                                    <li>
                                        <button type="button" class="dropdown-item" data-bs-theme-value="auto" aria-pressed="false">
                                            <span class="theme-icon">
                                                <i class="fa-solid fa-circle-half-stroke"></i>
                                            </span>
                                            <span class="ps-2">Auto</span>
                                        </button>
                                    </li>
                                    <li>
                                        <button type="button" class="dropdown-item active" data-bs-theme-value="light" aria-pressed="true">
                                            <span class="theme-icon">
                                                <i class="fa-solid fa-sun"></i>
                                            </span>
                                            <span class="ps-2">Light</span>
                                        </button>
                                    </li>
                                    <li>
                                        <button type="button" class="dropdown-item" data-bs-theme-value="dark" aria-pressed="false">
                                            <span class="theme-icon">
                                                <i class="fa-solid fa-moon"></i>
                                            </span>
                                            <span class="ps-2">Dark</span>
                                        </button>
                                    </li>
                                </ul>
                            </div>
                        </li>
    
                        @if (!Auth::check())

                            <li class="nav-item">
                                <a class="nav-link" href="{{ url('/login') }}"> <i class="fa-solid fa-sign-in-alt fa-fw" aria-hidden="true"></i> Log in</a>
                            </li>

                            <li class="nav-item">
                                <a class="nav-link" href="{{ url('/register') }}"> Register</a>
                            </li>
                        @endif

                    </ul>
                </div>
            </div>
        </div>
    </nav>

    <div class="container body-content py-3">
        @yield('content')
    </div>

    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-C6RzsynM9kWDrMNeT87bh95OGNyZPhcTNXj1NW7RuBCsyN/o0jlpcV8Qyq46cDfL" crossorigin="anonymous"></script>
    {{-- <script src="{{ asset('js/app.js') }}"></script> --}}
  </body>
</html>
