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

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta name="description" content="">
    <title>@yield('title') - {{ config('app.name', 'Laravel') }}</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=Inter:wght@300;400;500;600&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/5.0.2/css/bootstrap.min.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css">
    @vite(['resources/sass/app.scss', 'resources/js/app.js'])

    <!-- Custom styles for this Page-->
    @yield('custom_styles')
    @stack('stacked_styles')

    <style>
        :root {
            --tblr-font-sans-serif: 'Inter';
        }

        [x-cloak] {
            display: none !important;
        }

        html:is(.theme-dark) .hide-theme-light {
            display: inline !important;
        }


    a.nav-linke {
        color: gray;
        font-size: 18px;
        padding: 0;
    }


    input:focus {
        outline: 0px !important;
        box-shadow: none !important;
    }

    .card-text {
        border: 2px solid #ddd;
        border-radius: 8px;
    }
    </style>
    @livewireStyles

    <script>
        // It's best to inline this in head to avoid FOUC (flash of unstyled content) when changing pages or themes
        if (
            localStorage.getItem('darkMode') === 'enabled' ||
            (!('darkMode' in localStorage) &&
                window.matchMedia('(prefers-color-scheme: dark)').matches)
        ) {
            document.documentElement.classList.add('theme-dark');
        } else {
            document.documentElement.classList.remove('theme-dark');
        }
    </script>

</head>
{{-- <body class="theme-dark-auto"> --}}

<body>
    <div class="page">
        <div class="sticky-top">
			<header class="navbar navbar-expand-md navbar-light sticky-top d-print-none">
				<div class="container-xl">
					<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbar-menu">
						<span class="navbar-toggler-icon"></span>
					</button>

					<div class="navbar-nav flex-row order-md-last gap-2">

                        <div class="nav-item dropdown" data-bs-toggle="tooltip" data-bs-placement="bottom"
                            aria-label="{{ __('Language') }}" data-bs-original-title="{{ __('Language') }}">
                            <a href="#" class="nav-link d-flex lh-1 text-reset p-0" data-bs-toggle="dropdown"
                                aria-label="Open user menu" aria-expanded="false">
                                <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-language"
                                    width="24" height="24" viewBox="0 0 24 24" stroke-width="2"
                                    stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
                                    <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
                                    <path d="M4 5h7"></path>
                                    <path d="M9 3v2c0 4.418 -2.239 8 -5 8"></path>
                                    <path d="M5 9c-.003 2.144 2.952 3.908 6.7 4"></path>
                                    <path d="M12 20l4 -9l4 9"></path>
                                    <path d="M19.1 18h-6.2"></path>
                                </svg>
                                <span class="badge bg-blue"
                                    style="font-size: 8px">{{ Session()->get('locale') ?? app()->getLocale() }}</span>
                            </a>

                        </div>


                        <div class="d-none d-md-flex align-items-center mx-2">
                            <a href="javascript:toggleDarkMode()" class="nav-link px-0 hide-theme-dark"
                                data-bs-toggle="tooltip" data-bs-placement="bottom" aria-label="Enable dark mode"
                                data-bs-original-title="Enable dark mode">
                                <!-- Download SVG icon from http://tabler-icons.io/i/moon -->
                                <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24"
                                    viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none"
                                    stroke-linecap="round" stroke-linejoin="round">
                                    <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
                                    <path
                                        d="M12 3c.132 0 .263 0 .393 0a7.5 7.5 0 0 0 7.92 12.446a9 9 0 1 1 -8.313 -12.454z">
                                    </path>
                                </svg>
                            </a>
                            <a href="javascript:toggleDarkMode()" class="nav-link px-0 hide-theme-light"
                                data-bs-toggle="tooltip" data-bs-placement="bottom" aria-label="Enable light mode"
                                data-bs-original-title="Enable light mode">
                                <!-- Download SVG icon from http://tabler-icons.io/i/sun -->
                                <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24"
                                    viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none"
                                    stroke-linecap="round" stroke-linejoin="round">
                                    <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
                                    <circle cx="12" cy="12" r="4"></circle>
                                    <path
                                        d="M3 12h1m8 -9v1m8 8h1m-9 8v1m-6.4 -15.4l.7 .7m12.1 -.7l-.7 .7m0 11.4l.7 .7m-12.1 -.7l-.7 .7">
                                    </path>
                                </svg>
                            </a>
                        </div>
                        @auth
                            <div class="nav-item dropdown">
                                <form method="POST" action="{{ route('logout') }}">
                                    @csrf
                                    <a href="{{ route('logout') }}" class="btn btn-ghost-danger"
                                        onclick="event.preventDefault(); this.closest('form').submit();">
                                        <svg xmlns="http://www.w3.org/2000/svg"
                                            class="icon icon-tabler icon-tabler-logout me-2" width="24"
                                            height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor"
                                            fill="none" stroke-linecap="round" stroke-linejoin="round">
                                            <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
                                            <path
                                                d="M14 8v-2a2 2 0 0 0 -2 -2h-7a2 2 0 0 0 -2 2v12a2 2 0 0 0 2 2h7a2 2 0 0 0 2 -2v-2">
                                            </path>
                                            <path d="M7 12h14l-3 -3m0 6l3 -3"></path>
                                        </svg>
                                        {{ __('Log Out') }}
                                    </a>
                                </form>

                            </div>
                        @endauth

                    </div>
                </div>
            </header>

            @include('layouts.navigation')

        </div>
        <div class="page-wrapper">

            @yield('content')

            <footer class="footer footer-transparent d-print-none">
                <div class="container-xl">
                    <div class="row text-center align-items-center flex-row-reverse">
                        <div class="col-12 col-lg-auto mt-3 mt-lg-0">
                            <ul class="list-inline list-inline-dots mb-0">
                                <li class="list-inline-item">
                                    &copy; {{ date('Y') }}
                                    <a href="{{ config('app.url') }}"
                                        class="link-secondary">{{ config('app.name') }}</a>
                                </li>
                                <li class="list-inline-item">
                                    Version 0.0.1
                                </li>
                            </ul>
                        </div>
                    </div>
                </div>
            </footer>

        </div>
    </div>
    </div>


    <!-- Core plugin JavaScript-->
    @livewireScripts

    <!-- Page level custom scripts -->
    @yield('custom_scripts')

    @stack ('scripts')

    <script>
        function toggleDarkMode() {
            document.documentElement.classList.toggle("theme-dark");

            // Store the preference in local storage
            if (document.documentElement.classList.contains("theme-dark")) {
                localStorage.setItem("darkMode", "enabled");
            } else {
                localStorage.setItem("darkMode", "disabled");
            }
        }
    </script>

</body>

</html>
