<?php
if (Auth('admin')->User()->dashboard_style == 'light') {
    $bgmenu = 'blue';
    $bg = 'light';
    $text = 'dark';
} else {
    $bgmenu = 'dark';
    $bg = 'dark';
    $text = 'light';
}
?>

<style>
    .main-header {
        --mh-bg: #0f172a;
        --mh-bg-2: #1e3a8a;
        --mh-border: rgba(255, 255, 255, .12);
        --mh-text: #ffffff;
        --mh-muted: #cbd5e1;
        --mh-yellow: #facc15;
        --mh-orange: #f97316;
        --mh-blue: #38bdf8;
        --mh-shadow: 0 12px 28px rgba(15, 23, 42, .18);
        box-shadow: var(--mh-shadow);
        z-index: 999;
    }

    .main-header .logo-header,
    .main-header .navbar-header {
        background:
            radial-gradient(circle at 12% 20%, rgba(56, 189, 248, .16), transparent 28%),
            radial-gradient(circle at 92% 8%, rgba(250, 204, 21, .16), transparent 30%),
            linear-gradient(135deg, var(--mh-bg), var(--mh-bg-2)) !important;
        border-bottom: 1px solid var(--mh-border);
    }

    .main-header .logo-header {
        min-height: 70px;
        padding: 0 .8rem;
        display: flex;
        align-items: center;
        gap: .55rem;
    }

    .main-header .navbar-header {
        min-height: 70px;
    }

    .main-header .logo {
        text-decoration: none;
        max-width: 150px;
        height: 48px;
        padding: 0;
        color: #fff !important;
        font-size: .82rem !important;
        font-weight: 900;
        line-height: 1.1;
        overflow: hidden;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }

    .main-header .logo img {
        display: block;
        max-width: 138px;
        max-height: 48px;
        width: auto;
        height: auto;
        object-fit: contain;
        filter: brightness(0) invert(1);
    }

    .main-header .navbar-toggler,
    .main-header .btn-toggle,
    .main-header .topbar-toggler,
    .admin-header-dark-toggle,
    .admin-header-user-btn {
        width: 40px;
        height: 40px;
        border-radius: 14px;
        border: 1px solid rgba(255,255,255,.16) !important;
        background: rgba(255,255,255,.10) !important;
        color: #fff !important;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        transition: all .18s ease;
        box-shadow: none !important;
    }

    .main-header .navbar-toggler:hover,
    .main-header .btn-toggle:hover,
    .main-header .topbar-toggler:hover,
    .admin-header-dark-toggle:hover,
    .admin-header-user-btn:hover {
        background: rgba(255,255,255,.18) !important;
        color: #fff !important;
        transform: translateY(-1px);
    }

    .admin-shell-burger-icons {
        color: #fff;
        font-weight: 900;
        font-size: 1rem;
        line-height: 1;
    }

    .admin-shell-i-close {
        display: none;
    }

    .main-header .nav-toggle {
        margin-left: auto;
    }

    .main-header .container-fluid {
        min-height: 70px;
        display: flex;
        align-items: center;
    }

    .admin-header-actions {
        display: flex;
        align-items: center;
        gap: .55rem;
    }

    .admin-header-dark-toggle i,
    .admin-header-user-btn i {
        font-size: .95rem;
    }

    .admin-theme-select {
        height: 40px;
        min-width: 118px;
        border-radius: 14px;
        border: 1px solid rgba(255,255,255,.16) !important;
        background: rgba(255,255,255,.10) !important;
        color: #fff !important;
        font-size: .78rem;
        font-weight: 900;
        padding: 0 2rem 0 .8rem;
        outline: none;
        box-shadow: none !important;
        cursor: pointer;
    }

    .admin-theme-select option {
        color: #111827;
        background: #fff;
        font-weight: 800;
    }

    .admin-header-user-btn {
        text-decoration: none !important;
    }

    .admin-header-user-btn::after {
        display: none;
    }

    .admin-header-user-btn .admin-user-dot {
        width: 8px;
        height: 8px;
        border-radius: 999px;
        background: #22c55e;
        position: absolute;
        right: 8px;
        top: 8px;
        border: 2px solid #0f172a;
    }

    .topbar-nav .dropdown-user {
        border: none;
        border-radius: 18px;
        box-shadow: 0 18px 45px rgba(15, 23, 42, .18);
        overflow: hidden;
        min-width: 210px;
        margin-top: .75rem;
    }

    .topbar-nav .dropdown-user::before {
        content: "";
        display: block;
        height: 5px;
        background: linear-gradient(90deg, var(--mh-yellow), var(--mh-orange), var(--mh-blue));
    }

    .topbar-nav .dropdown-user .dropdown-item {
        padding: .75rem 1rem;
        font-weight: 800;
        color: #334155;
        font-size: .84rem;
        display: flex;
        align-items: center;
        gap: .55rem;
    }

    .topbar-nav .dropdown-user .dropdown-item:hover {
        background: #eff6ff;
        color: #1d4ed8;
    }

    .admin-header-meta {
        display: inline-flex;
        flex-direction: column;
        align-items: flex-end;
        line-height: 1.15;
        margin-right: .2rem;
    }

    .admin-header-meta strong {
        color: #fff;
        font-size: .82rem;
        font-weight: 900;
        max-width: 160px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .admin-header-meta small {
        color: rgba(226, 232, 240, .8);
        font-size: .68rem;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: .05em;
    }

    body.dark-mode .main-header .logo-header,
    body.dark-mode .main-header .navbar-header {
        background:
            radial-gradient(circle at 12% 20%, rgba(56, 189, 248, .12), transparent 28%),
            radial-gradient(circle at 92% 8%, rgba(250, 204, 21, .10), transparent 30%),
            linear-gradient(135deg, #020617, #0f172a) !important;
    }

    @media (max-width: 767px) {
        .main-header .logo {
            max-width: 120px;
            height: 40px;
        }

        .main-header .logo img {
            max-width: 100px;
            max-height: 40px;
        }

        .main-header .logo-header,
        .main-header .navbar-header,
        .main-header .container-fluid {
            min-height: 64px;
        }

        .main-header .navbar-toggler,
        .main-header .btn-toggle,
        .main-header .topbar-toggler,
        .admin-header-dark-toggle,
        .admin-header-user-btn {
            width: 36px;
            height: 36px;
            border-radius: 12px;
        }

        .admin-header-meta {
            display: none;
        }
    }
</style>

<div class="main-header">
    <!-- Logo Header -->
    <div class="logo-header" data-background-color="<?php echo e($bgmenu); ?>">
        <button type="button" class="navbar-toggler sidenav-toggler mr-2" id="adminShellBtnMobile"
            aria-label="Toggle navigation menu" aria-controls="adminSidebarNav">
            <span class="admin-shell-burger-icons" aria-hidden="true">
                <span class="admin-shell-i-open">&#9776;</span>
                <span class="admin-shell-i-close">&times;</span>
            </span>
        </button>

        <a href="/" class="logo" aria-label="<?php echo e($settings->site_name); ?>">
            <?php if(!empty($settings->logo)): ?>
                <img src="<?php echo e(asset('storage/app/public/' . $settings->logo)); ?>" alt="<?php echo e($settings->site_name); ?>">
            <?php else: ?>
                <?php echo e($settings->site_name); ?>

            <?php endif; ?>
        </a>

        <button type="button" class="topbar-toggler more">
            <i class="icon-options-vertical"></i>
        </button>

        <div class="nav-toggle">
            <button type="button" class="btn btn-toggle toggle-sidebar" id="adminShellBtnDesktop"
                aria-label="Minimize sidebar">
                <i class="icon-menu"></i>
            </button>
        </div>
    </div>
    <!-- End Logo Header -->

    <!-- Navbar Header -->
    <nav class="navbar navbar-header navbar-expand-lg" data-background-color="<?php echo e($bgmenu); ?>">
        <div class="container-fluid">
            <div class="collapse" id="search-nav"></div>

            <ul class="navbar-nav topbar-nav ml-md-auto align-items-center">
                <li class="nav-item mr-2">
                    <select id="globalAdminThemeSelector" class="admin-theme-select" title="Admin color mode" aria-label="Admin color mode">
                        <option value="light">Light</option>
                        <option value="dark">Dark</option>
                    </select>
                </li>

                <li class="nav-item d-none d-md-flex">
                    <div class="admin-header-meta">
                        <strong><?php echo e(Auth('admin')->User()->firstName); ?> <?php echo e(Auth('admin')->User()->lastName); ?></strong>
                        <small><?php echo e(Auth('admin')->User()->type); ?></small>
                    </div>
                </li>

                <li class="nav-item dropdown hidden-caret">
                    <a class="nav-link admin-header-user-btn position-relative" data-toggle="dropdown" href="#" aria-expanded="false">
                        <i class="fas fa-user"></i>
                        <span class="admin-user-dot"></span>
                    </a>

                    <ul class="dropdown-menu dropdown-user animated fadeIn">
                        <div class="dropdown-user-scroll scrollbar-outer">
                            <li>
                                <a class="dropdown-item" href="<?php echo e(url('admin/dashboard/adminprofile')); ?>">
                                    <i class="fas fa-user-cog"></i>
                                    Account Settings
                                </a>

                                <a class="dropdown-item" href="<?php echo e(url('admin/dashboard/adminchangepassword')); ?>">
                                    <i class="fas fa-key"></i>
                                    Change Password
                                </a>

                                <div class="dropdown-divider"></div>

                                <a class="dropdown-item" href="<?php echo e(route('adminlogout')); ?>"
                                    onclick="event.preventDefault(); document.getElementById('logoutform').submit();">
                                    <i class="fas fa-sign-out-alt"></i>
                                    Logout
                                </a>

                                <form id="logoutform" action="<?php echo e(route('adminlogout')); ?>" method="POST"
                                    style="display: none;">
                                    <?php echo e(csrf_field()); ?>

                                </form>
                            </li>
                        </div>
                    </ul>
                </li>
            </ul>
        </div>
    </nav>
    <!-- End Navbar -->
</div>

<script type="text/javascript">
    (function () {
        function readAdminTheme() {
            try {
                return localStorage.getItem('admin_theme_mode') || localStorage.getItem('theme') || 'light';
            } catch (e) {
                return 'light';
            }
        }

        function writeAdminTheme(mode) {
            try {
                localStorage.setItem('admin_theme_mode', mode);
                localStorage.setItem('theme', mode);
            } catch (e) {}
        }

        function setAdminTheme(mode) {
            var isDark = mode === 'dark';
            document.documentElement.classList.toggle('admin-dark-mode', isDark);
            if (document.body) {
                document.body.classList.toggle('dark-mode', isDark);
                document.body.setAttribute('data-admin-theme', isDark ? 'dark' : 'light');
            }

            var themeSelector = document.getElementById('globalAdminThemeSelector');
            if (themeSelector) {
                themeSelector.value = isDark ? 'dark' : 'light';
            }
        }

        window.applyGlobalAdminTheme = setAdminTheme;
        setAdminTheme(readAdminTheme() === 'dark' ? 'dark' : 'light');

        document.addEventListener('DOMContentLoaded', function () {
            var themeSelector = document.getElementById('globalAdminThemeSelector');
            setAdminTheme(readAdminTheme() === 'dark' ? 'dark' : 'light');

            if (themeSelector) {
                themeSelector.addEventListener('change', function () {
                    var mode = themeSelector.value === 'dark' ? 'dark' : 'light';
                    writeAdminTheme(mode);
                    setAdminTheme(mode);
                });
            }

            if (window.jQuery && document.getElementById('styleform')) {
                window.jQuery('#styleform').on('change', function() {
                    window.jQuery.ajax({
                        url: "<?php echo e(url('admin/dashboard/changestyle')); ?>",
                        type: 'POST',
                        data: window.jQuery('#styleform').serialize(),
                        success: function() {
                            location.reload(true);
                        },
                        error: function() {
                            console.log('Something went wrong');
                        },
                    });
                });
            }
        });

        window.addEventListener('storage', function (event) {
            if (event.key === 'admin_theme_mode' || event.key === 'theme') {
                setAdminTheme(event.newValue === 'dark' ? 'dark' : 'light');
            }
        });
    })();
</script>
<?php /**PATH /home/purecarg/public_html/resources/views/admin/topmenu.blade.php ENDPATH**/ ?>