{{-- <link rel="icon" href="favicon.ico" sizes="any">
<link rel="icon" href="favicon.svg" type="image/svg+xml">
<link rel="apple-touch-icon" href="apple-touch-icon.png"> --}}
{{-- <link rel="icon" href="../favicon.ico" sizes="any">
<link rel="icon" href="../favicon.svg" type="image/svg+xml">
<link rel="apple-touch-icon" href="../apple-touch-icon.png"> --}}

@include('components.favicon_Icons')
{{-- <link rel="manifest" href="{{ asset('site.webmanifest') }}"> --}}

<style>
    :root,
    [data-bs-theme=light] {
  --bs-gray-100: #f8f9fa;
  --bs-gray-200: #e9ecef;
  --bs-gray-300: #dee2e6;
  --bs-gray-400: #ced4da;
  --bs-gray-500: #adb5bd;
  --bs-gray-600: #6c757d;
  --bs-gray-700: #495057;
  --bs-gray-800: #343a40;
  --bs-gray-900: #212529;
    }

    .center {
    background-color: var(--bs-gray-200);
    /* box-shadow: 10px 10px 5px var(--bs-gray-400); */
    border-radius:5px;
    margin: auto;
    margin-bottom: 10px;
    min-width: 300px;
    max-width: 300px;
    padding: 10px;
    text-align: center;
    }

    .text-gray-600 { color: #718096; }

</style>

<div class="img-fluid">
@include('components/members-logo', ['logotype' => 'homePage'])
</div>

@php
    $user = Illuminate\Support\Facades\Auth::user();

    // Using ?-> prevents crashes when $user is null (unauthenticated guest)
    $side_header_code = $user?->side_header_code ?? '';
    $appearanceCode = $user?->appearance ?? 'system';
    // dump("App system appearanceCode = " . $appearanceCode);
@endphp

{{-- @php $initialValue = Illuminate\Support\Facades\Auth::user()->appearance;  @endphp --}}
@php $initialValue = Illuminate\Support\Facades\Auth::user()?->appearance ?? 'system'; @endphp

    <!-- Pre-load theme preference from localStorage to prevent FOUC (flash of unstyled content) -->
    <script>
        function getPreferredColorScheme() {
        if (window.matchMedia) {
            if(window.matchMedia('(prefers-color-scheme: dark)').matches){
            return 'dark';
            } else {
            return 'light';
            }
        }
        return 'light';
        }

        function setTheme(theme) {
            // console.log('setTheme start');
            // const element = document.getElementById("darkMode-id");
            const element = document.getElementById("data-theme");
            if (theme === 'dark') {
                console.log('setTheme dark');
                document.addEventListener('DOMContentLoaded', (event) => {
                    // Your code here, ensuring 'element' is defined within this scope
                    const element = document.body; // Example: targeting the body
                    element.classList.add('dark');
                });
            } else {
                console.log('setTheme light');
                document.addEventListener('DOMContentLoaded', (event) => {
                    // Your code here, ensuring 'element' is defined within this scope
                    const element = document.body; // Example: targeting the body
                    element.classList.remove('dark');
                });
            }
        }

        // Function to change the theme and save to localStorage
        function switchTheme(newTheme) {
            const htmlElement = document.getElementById('site-html');
            // htmlElement.setAttribute('data-theme', newTheme);
            localStorage.setItem('theme', newTheme); // Save the preference
        }

        function selectLightTheme() {
        // Code to switch the UI to light mode (e.g., add/remove CSS classes)
        document.documentElement.classList.remove('theme-dark');
        // Save the preference
        localStorage.setItem('theme', 'light');
        }

        // Example: when the user clicks the dark mode option
        function selectDarkMode() {
        // Code to switch the UI to dark mode
        document.documentElement.classList.add('theme-dark');
        // Save the preference
        localStorage.setItem('theme', 'dark');
        }

        // console.log("app.blade script jeroen ");
        // // Check local storage for the user's theme preference
        // var appearanceCodeScript = '';
        // console.log("app.blade script appearanceCodeScript = " + appearanceCodeScript);
        // var savedAppearance = "";
        // switch(appearanceCodeScript) {
        // case 'light':
        //     savedAppearance = 'light';
        //     break;
        // case 'dark':
        //     savedAppearance = 'dark';
        //     break;
        // case 'system':
        //     savedAppearance = getPreferredColorScheme();
        //     console.log("app.blade savedAppearance = " + savedAppearance);
        //     break;
        // }
        //     console.log("app.blade savedAppearance end = " + savedAppearance);

        switch('{{ $initialValue }}') {
        case 'light':
            savedAppearance = 'light';
            switchTheme('light');
            selectLightTheme();
            console.log("app.blade light, savedAppearance = " + savedAppearance);
            break;
        case 'dark':
            savedAppearance = 'dark';
            switchTheme('dark');
            selectDarkMode();
            console.log("app.blade dark, savedAppearance = " + savedAppearance);
            break;
        case 'system':
            savedAppearance = getPreferredColorScheme();
            console.log("app.blade system, savedAppearance = " + savedAppearance);
            break;
        }
        setTheme(savedAppearance);
        console.log("app.blade savedAppearance end = " + savedAppearance);

        // If a preference is saved, apply it. Otherwise, check system preference.
        // if (savedAppearance === 'dark' || (savedAppearance === null && window.matchMedia('(prefers-color-scheme: dark)').matches)) {
        //     document.documentElement.classList.add('dark');

        // } else {
        //     document.documentElement.classList.remove('dark');
        // }


</script>

@if ($side_header_code == 'sd')
    <x-layouts.app.sidebar :title="$title ?? null">
        <flux:main>
            {{ $slot }}
        </flux:main>
        {{-- <flux:footer class="mt-10 py-6 bg-white text-center shadow-md dark:bg-gray dark:text-black">
            <p class="text-gray-600">&copy; {{ now()->year }} benit.org. All rights reserved.</p>
        </flux:footer> --}}
        <flux:footer class="center dark:bg-gray dark:text-black">
            <p class="text-gray-600">&copy; {{ now()->year }} benit.org. All rights reserved.</p>
        </flux:footer>
    </x-layouts.app.sidebar>
@endif
@if ($side_header_code == 'hd')
    <x-layouts.app.header :title="$title ?? null">
        <flux:main>
            {{ $slot }}
        </flux:main>
        {{-- <flux:footer class="mt-10 py-6 bg-white text-center shadow-md dark:bg-gray dark:text-black">
            <p class="text-gray-600">&copy; {{ now()->year }} benit.org. All rights reserved.</p>
        </flux:footer> --}}
        <flux:footer class="center dark:bg-gray dark:text-black mt-3">
            <p class="text-gray-600">&copy; {{ now()->year }} benit.org. All rights reserved.</p>
        </flux:footer>
    </x-layouts.app.header>
@endif

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">

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


    <!-- ... other head elements (Tailwind CSS, etc.) ... -->
    @vite(['resources/css/app.css', 'resources/js/app.js'])
    @livewireStyles
</head>

<body>
    <script>
        // (function () {
        //     // 1. Check local storage on page load

        // //     for (var i = 0; i<localStorage.length; i++) {
        // //     console.log(localStorage.getItem(localStorage.key(i)));
        // // }

        //     // const savedTheme = localStorage.getItem('theme');
        //     const savedTheme = document.documentElement.classList.contains('dark');
        //     const htmlElement = document.getElementById('site-html');

        //     console.log("savedTheme = " + savedTheme);
        //     if (savedTheme) {
        //         // 2. Apply the saved theme immediately if it exists
        //         // htmlElement.setAttribute('data-theme', savedTheme);
        //         document.querySelector("html").setAttribute("data-theme", savedTheme);
        //     } else {
        //         // Optional: Apply a default (e.g., system preference) if no theme is saved
        //         const prefersDark = window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches;
        //         console.log("prefersDark = " + prefersDark);
        //         const defaultTheme = prefersDark ? 'dark' : 'light';
        //         console.log("defaultTheme = " + defaultTheme);
        //         // htmlElement.setAttribute('data-theme', defaultTheme);
        //         document.querySelector("html").setAttribute("data-theme", defaultTheme);
        //         localStorage.setItem('theme', defaultTheme);

        //     }
        // })();

        // function setTheme(theme) {
        //     // console.log('setTheme start');
        //     // const element = document.getElementById("darkMode-id");
        //     const element = document.getElementById("data-theme");
        //     if (theme === 'dark') {
        //         console.log('setTheme dark');
        //         document.addEventListener('DOMContentLoaded', (event) => {
        //             // Your code here, ensuring 'element' is defined within this scope
        //             const element = document.body; // Example: targeting the body
        //             element.classList.add('dark');
        //         });
        //     } else {
        //         console.log('setTheme light');
        //         document.addEventListener('DOMContentLoaded', (event) => {
        //             // Your code here, ensuring 'element' is defined within this scope
        //             const element = document.body; // Example: targeting the body
        //             element.classList.remove('dark');
        //         });
        //     }
        // }


        // var darkMode = savedAppearance;
        // var isDarkModeActive = document.documentElement.classList.contains('dark');
        // console.log("isDarkModeActive = " + isDarkModeActive);

        // if (isDarkModeActive) {
        //     console.log('dark');
        //     setTheme('dark');
        // }
        // else {
        //     console.log('light');
        //     setTheme('light');
        // }

</script>

@livewireScripts
</body>