<?php
$display = config_item('logo_or_icon');
$companyName = config_item('company_name') ?: config_item('copyright_name');
$currentUri = trim((string) uri_string(), '/');
?>
<script>
    (function () {
        try {
            var stored = localStorage.getItem('frontend-theme');
            var prefersDark = window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches;
            var theme = stored || (prefersDark ? 'dark' : 'light');
            document.body.classList.toggle('frontend-dark', theme === 'dark');
        } catch (e) {}
    })();
</script>
<style>
    .frontend-topbar {
        position: sticky;
        top: 0;
        z-index: 30;
        border-bottom: 1px solid #dbe3ee;
        background: rgba(255, 255, 255, .94);
        backdrop-filter: blur(14px);
    }

    body.frontend-dark .frontend-topbar {
        border-bottom-color: #263244;
        background: rgba(15, 23, 42, .92);
    }

    .frontend-topbar-inner {
        width: min(1180px, calc(100% - 32px));
        min-height: 66px;
        margin: 0 auto;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 24px;
    }

    .frontend-brand {
        display: inline-flex;
        align-items: center;
        min-width: 0;
        gap: 10px;
        color: #0f172a;
        font-size: 15px;
        font-weight: 800;
        text-decoration: none;
    }

    .frontend-brand:hover {
        color: #0f172a;
        text-decoration: none;
    }

    .frontend-logo-mark {
        display: inline-flex;
        height: 38px;
        width: 38px;
        align-items: center;
        justify-content: center;
        border: 1px solid #dbe3ee;
        border-radius: 8px;
        background: #ffffff;
        color: #1d4ed8;
        font-weight: 900;
        box-shadow: 0 8px 20px rgba(15, 23, 42, .05);
    }

    body.frontend-dark .frontend-brand,
    body.frontend-dark .frontend-brand:hover {
        color: #e5edf8;
    }

    body.frontend-dark .frontend-logo-mark {
        border-color: #263244;
        background: #111827;
        color: #60a5fa;
        box-shadow: none;
    }

    .frontend-brand img {
        max-height: 38px;
        width: auto;
        object-fit: contain;
    }

    .frontend-brand-text {
        max-width: 230px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .frontend-nav {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        border: 1px solid #dbe3ee;
        border-radius: 999px;
        background: #f8fafc;
        padding: 5px;
    }

    body.frontend-dark .frontend-nav {
        border-color: #263244;
        background: #0f172a;
    }

    .frontend-nav a {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-height: 34px;
        border-radius: 999px;
        padding: 0 13px;
        color: #475569;
        font-size: 13px;
        font-weight: 800;
        text-decoration: none;
        transition: background .15s ease, color .15s ease;
        white-space: nowrap;
    }

    body.frontend-dark .frontend-nav a {
        color: #94a3b8;
    }

    .frontend-nav a:hover,
    .frontend-nav a.is-active {
        background: #ffffff;
        color: #0f172a;
        text-decoration: none;
        box-shadow: 0 6px 16px rgba(15, 23, 42, .06);
    }

    body.frontend-dark .frontend-nav a:hover,
    body.frontend-dark .frontend-nav a.is-active {
        background: #111827;
        color: #e5edf8;
        box-shadow: none;
    }

    .frontend-actions {
        display: inline-flex;
        align-items: center;
        gap: 8px;
    }

    .frontend-theme-toggle {
        display: inline-flex;
        min-height: 38px;
        min-width: 38px;
        align-items: center;
        justify-content: center;
        border: 1px solid #dbe3ee;
        border-radius: 8px;
        background: #ffffff;
        color: #475569;
        font-size: 15px;
        font-weight: 800;
        padding: 0 12px;
    }

    body.frontend-dark .frontend-theme-toggle {
        border-color: #263244;
        background: #111827;
        color: #e5edf8;
    }

    .frontend-login {
        display: inline-flex;
        min-height: 38px;
        align-items: center;
        justify-content: center;
        border: 1px solid #0f172a;
        border-radius: 8px;
        background: #0f172a;
        padding: 0 14px;
        color: #ffffff;
        font-size: 13px;
        font-weight: 800;
        text-decoration: none;
        white-space: nowrap;
    }

    .frontend-login:hover {
        background: #1d4ed8;
        border-color: #1d4ed8;
        color: #ffffff;
        text-decoration: none;
    }

    body.frontend-dark .frontend-login {
        border-color: #3b82f6;
        background: #3b82f6;
    }

    @media (max-width: 760px) {
        .frontend-topbar-inner {
            align-items: flex-start;
            flex-direction: column;
            gap: 12px;
            padding: 12px 0;
        }

        .frontend-nav {
            width: 100%;
            justify-content: space-between;
            overflow-x: auto;
        }

        .frontend-login {
            min-height: 36px;
        }
    }
</style>

<header class="topnavbar-wrapper frontend-topbar">
    <div class="frontend-topbar-inner">
        <a href="<?= base_url('frontend') ?>" class="frontend-brand">
            <?php if (($display == 'logo' || $display == 'logo_title') && config_item('company_logo')) { ?>
                <img src="<?= base_url() . config_item('company_logo') ?>" alt="<?= html_escape($companyName ?: 'Logo') ?>">
            <?php } else { ?>
                <span class="frontend-logo-mark"><?= html_escape(strtoupper(substr((string) ($companyName ?: 'E'), 0, 1))) ?></span>
            <?php } ?>
            <?php if ($display == 'logo_title' || $display != 'logo') { ?>
                <span class="frontend-brand-text"><?= html_escape($companyName ?: 'ERP') ?></span>
            <?php } ?>
        </a>

        <nav class="frontend-nav" aria-label="Public navigation">
            <a href="<?= base_url('frontend') ?>" class="<?= ($currentUri === 'frontend' || $currentUri === '') ? 'is-active' : '' ?>"><?= lang('all_job_circular') ?: 'Recruitment' ?></a>
            <a href="<?= base_url('knowledgebase') ?>" class="<?= strpos($currentUri, 'knowledgebase') === 0 ? 'is-active' : '' ?>"><?= lang('knowledgebase') ?: 'Knowledge Base' ?></a>
        </nav>

        <div class="frontend-actions">
            <button type="button" class="frontend-theme-toggle" data-frontend-theme-toggle aria-label="Toggle theme">Theme</button>
            <a href="<?= base_url('login') ?>" class="frontend-login"><?= lang('login') ?: 'Login' ?></a>
        </div>
    </div>
</header>
<script>
    (function () {
        var toggle = document.querySelector('[data-frontend-theme-toggle]');
        if (!toggle) {
            return;
        }

        function setTheme(theme, persist) {
            document.body.classList.toggle('frontend-dark', theme === 'dark');
            toggle.textContent = theme === 'dark' ? 'Dark' : 'Light';
            toggle.setAttribute('aria-pressed', theme === 'dark' ? 'true' : 'false');
            if (persist) {
                try {
                    localStorage.setItem('frontend-theme', theme);
                } catch (e) {}
            }
        }

        function currentTheme() {
            return document.body.classList.contains('frontend-dark') ? 'dark' : 'light';
        }

        toggle.addEventListener('click', function () {
            setTheme(currentTheme() === 'dark' ? 'light' : 'dark', true);
        });

        if (window.matchMedia) {
            var media = window.matchMedia('(prefers-color-scheme: dark)');
            var syncSystemTheme = function (event) {
                try {
                    if (!localStorage.getItem('frontend-theme')) {
                        setTheme(event.matches ? 'dark' : 'light', false);
                    }
                } catch (e) {}
            };
            if (typeof media.addEventListener === 'function') {
                media.addEventListener('change', syncSystemTheme);
            } else if (typeof media.addListener === 'function') {
                media.addListener(syncSystemTheme);
            }
        }

        setTheme(currentTheme(), false);
    })();
</script>
