<!doctype html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}" dir="{{ app()->getLocale() == 'ar' ? 'rtl' : 'ltr' }}" data-layout="vertical" data-topbar="light" data-sidebar="light"
    data-sidebar-size="lg" data-sidebar-image="none" data-preloader="disable">

<head>
  @include('admin.partials.style')
</head>

<body>

    {{-- <div class="admin-locale-flags">
        <a href="{{ route('admin.locale.switch', 'en') }}"
           class="locale-flag {{ app()->getLocale() === 'en' ? 'active' : '' }}"
           title="English">
            <img src="{{ asset('assets/images/flags/us.svg') }}" alt="English" height="18">
        </a>
        <a href="{{ route('admin.locale.switch', 'ar') }}"
           class="locale-flag {{ app()->getLocale() === 'ar' ? 'active' : '' }}"
           title="العربية">
            <img src="{{ asset('assets/images/flags/ae.svg') }}" alt="Arabic" height="18">
        </a>
    </div> --}}

    <!-- Begin page -->
    <div id="layout-wrapper">

        @include('admin.partials.topbar')

        @include('admin.partials.sidebar')

        <!-- ============================================================== -->
        <!-- Start right Content here -->
        <!-- ============================================================== -->
        <div class="main-content">

            <div class="page-content">
                <div class="container-fluid">

                    @yield('content')

                </div>
                <!-- container-fluid -->
            </div>
            <!-- End Page-content -->

            @include('admin.partials.footer')

        </div>
        <!-- end main content-->

    </div>
    <!-- END layout-wrapper -->

    @include('admin.partials.customizer')
    @include('admin.partials.scripts')

    <script>
        // Quick locale switcher with both flags always visible.
        (function () {
            const style = document.createElement('style');
            style.textContent = `
                .admin-locale-flags{
                    position:fixed;
                    top:10px;
                    right:12px;
                    z-index:1100;
                    display:flex;
                    gap:6px;
                    background:rgba(255,255,255,.85);
                    border:1px solid rgba(0,0,0,.08);
                    border-radius:999px;
                    padding:4px 6px;
                    backdrop-filter:blur(4px);
                }
                html[dir="rtl"] .admin-locale-flags{
                    right:auto;
                    left:12px;
                }
                .admin-locale-flags .locale-flag{
                    width:28px;
                    height:28px;
                    border-radius:50%;
                    display:flex;
                    align-items:center;
                    justify-content:center;
                    border:1px solid transparent;
                    transition:all .15s ease;
                }
                .admin-locale-flags .locale-flag:hover{
                    transform:translateY(-1px);
                    border-color:rgba(0,0,0,.12);
                }
                .admin-locale-flags .locale-flag.active{
                    border-color:#405189;
                    box-shadow:0 0 0 2px rgba(64,81,137,.15);
                    background:#fff;
                }
            `;
            document.head.appendChild(style);
        })();

        // Handle light/dark mode icon toggle
        document.addEventListener('DOMContentLoaded', function() {
            const lightDarkBtn = document.querySelector('.light-dark-mode');
            if (lightDarkBtn) {
                const icon = lightDarkBtn.querySelector('i');

                function updateIcon() {
                    const isDark = document.documentElement.getAttribute('data-bs-theme') === 'dark';
                    if (icon) {
                        icon.className = isDark ? 'bx bx-sun fs-22' : 'bx bx-moon fs-22';
                    }
                }

                // Update icon on page load
                updateIcon();

                // Update icon on click
                lightDarkBtn.addEventListener('click', function() {
                    setTimeout(updateIcon, 50);
                });

                // Watch for theme changes
                const observer = new MutationObserver(function(mutations) {
                    mutations.forEach(function(mutation) {
                        if (mutation.attributeName === 'data-bs-theme') {
                            updateIcon();
                        }
                    });
                });
                observer.observe(document.documentElement, { attributes: true });
            }
        });
    </script>
</body>

</html>
