<style>
    .sidebar {
        width: var(--sidebar-width);
        background: var(--card-bg);
        box-shadow: 2px 0 10px rgba(0, 0, 0, 0.02);
        display: flex;
        flex-direction: column;
        z-index: 20;
        overflow-y: auto;
    }

    .sidebar::-webkit-scrollbar {
        width: 6px;
    }

    .sidebar::-webkit-scrollbar-thumb {
        background-color: #e2e8f0;
        border-radius: 10px;
    }

    .sidebar-header {
        height: 72px;
        display: flex;
        align-items: center;
        padding: 0 24px;
        font-size: 20px;
        font-weight: 700;
        color: var(--primary);
        flex-shrink: 0;
    }

    .sidebar-menu {
        list-style: none;
        padding: 24px 16px;
        margin: 0;
        flex: 1;
    }

    .sidebar-menu li {
        margin-bottom: 4px;
    }

    .sidebar-menu a {
        display: flex;
        align-items: center;
        padding: 10px 16px;
        color: var(--text-secondary);
        text-decoration: none;
        border-radius: var(--radius-btn);
        font-weight: 500;
        transition: all 0.2s;
        font-size: 14px;
    }

    .sidebar-menu a i.icon {
        font-size: 16px;
        width: 24px;
        margin-right: 12px;
    }

    html[dir="rtl"] .sidebar-menu a i.icon {
        margin-right: 0;
        margin-left: 12px;
    }

    .sidebar-menu a:hover,
    .sidebar-menu a.active {
        background-color: var(--primary-light);
        color: var(--primary);
    }

    .sidebar-menu a[data-bs-toggle="collapse"]::after {
        content: '\f107';
        font-family: 'Font Awesome 5 Free';
        font-weight: 900;
        margin-left: auto;
        transition: transform 0.2s;
    }

    html[dir="rtl"] .sidebar-menu a[data-bs-toggle="collapse"]::after {
        margin-left: 0;
        margin-right: auto;
    }

    .sidebar-menu a[aria-expanded="true"]::after {
        transform: rotate(180deg);
    }

    .submenu {
        padding-left: 2rem;
        margin-top: 4px;
    }

    html[dir="rtl"] .submenu {
        padding-left: 0;
        padding-right: 2rem;
    }

    .submenu a {
        padding: 8px 16px;
        font-size: 13.5px;
        color: #64748b;
    }

    .submenu a.active {
        background: transparent;
        color: var(--primary);
        font-weight: 600;
    }

    .submenu a:hover {
        background: transparent;
        color: var(--primary);
    }
</style>

<div class="sidebar">
    <div class="sidebar-header">
        <i class="fas fa-hand-holding-heart icon"
            style="<?= isRTL() ? 'margin-left: 8px;' : 'margin-right: 8px;' ?>"></i> HelperLink
    </div>

    <?php $sidebarPage = $_GET['page'] ?? 'dashboard'; ?>

    <ul class="sidebar-menu">
        <li>
            <a href="?page=dashboard" class="<?= $sidebarPage === 'dashboard' ? 'active' : '' ?>">
                <i class="fas fa-th-large icon"></i> <?= __('dashboard') ?>
            </a>
        </li>

        <li>
            <a href="?page=customers" class="<?= $sidebarPage === 'customers' ? 'active' : '' ?>">
                <i class="fas fa-users icon"></i> <?= __('customers') ?>
            </a>
        </li>

        <!-- Vendors Submenu -->
        <li>
            <a href="#vendorsSub" data-bs-toggle="collapse"
                aria-expanded="<?= in_array($sidebarPage, ['vendors', 'vendor_documents']) ? 'true' : 'false' ?>"
                class="<?= in_array($sidebarPage, ['vendors', 'vendor_documents']) ? 'active' : '' ?>">
                <i class="fas fa-building icon"></i> <?= __('vendors') ?>
            </a>
            <ul class="collapse list-unstyled submenu <?= in_array($sidebarPage, ['vendors', 'vendor_documents']) ? 'show' : '' ?>"
                id="vendorsSub">
                <li><a href="?page=vendors" class="<?= $sidebarPage === 'vendors' ? 'active' : '' ?>"><?= __('vendors') ?></a>
                </li>
                <li><a href="?page=vendor_documents"
                        class="<?= $sidebarPage === 'vendor_documents' ? 'active' : '' ?>"><?= __('vendor_documents') ?></a>
                </li>
            </ul>
        </li>

        <!-- Maids Submenu -->
        <li>
            <a href="#maidsSub" data-bs-toggle="collapse"
                aria-expanded="<?= in_array($sidebarPage, ['maids', 'maid_documents']) ? 'true' : 'false' ?>"
                class="<?= in_array($sidebarPage, ['maids', 'maid_documents']) ? 'active' : '' ?>">
                <i class="fas fa-user-nurse icon"></i> <?= __('maids') ?>
            </a>
            <ul class="collapse list-unstyled submenu <?= in_array($sidebarPage, ['maids', 'maid_documents']) ? 'show' : '' ?>"
                id="maidsSub">
                <li><a href="?page=maids" class="<?= $sidebarPage === 'maids' ? 'active' : '' ?>"><?= __('maids') ?></a></li>
                <li><a href="?page=maid_documents"
                        class="<?= $sidebarPage === 'maid_documents' ? 'active' : '' ?>"><?= __('maid_documents') ?></a></li>
            </ul>
        </li>

        <!-- Operations Submenu -->
        <li>
            <a href="#opsSub" data-bs-toggle="collapse"
                aria-expanded="<?= in_array($sidebarPage, ['interviews', 'quotation_requests', 'quotations', 'contracts']) ? 'true' : 'false' ?>"
                class="<?= in_array($sidebarPage, ['interviews', 'quotation_requests', 'quotations', 'contracts']) ? 'active' : '' ?>">
                <i class="fas fa-tasks icon"></i> <?= __('operations') ?>
            </a>
            <ul class="collapse list-unstyled submenu <?= in_array($sidebarPage, ['interviews', 'quotation_requests', 'quotations', 'contracts']) ? 'show' : '' ?>"
                id="opsSub">
                <li><a href="?page=interviews"
                        class="<?= $sidebarPage === 'interviews' ? 'active' : '' ?>"><?= __('interviews') ?></a></li>
                <li><a href="?page=quotation_requests"
                        class="<?= $sidebarPage === 'quotation_requests' ? 'active' : '' ?>"><?= __('quotation_requests') ?></a>
                </li>
                <li><a href="?page=quotations"
                        class="<?= $sidebarPage === 'quotations' ? 'active' : '' ?>"><?= __('quotations') ?></a></li>
                <!--<li><a href="?page=contracts" class="<?= $sidebarPage === 'contracts' ? 'active' : '' ?>"><?= __('contracts') ?></a></li>-->
            </ul>
        </li>

        <!-- Subscriptions Submenu -->
        <li>
            <a href="#subsSub" data-bs-toggle="collapse"
                aria-expanded="<?= in_array($sidebarPage, ['subscription_plans', 'vendor_subscriptions']) ? 'true' : 'false' ?>"
                class="<?= in_array($sidebarPage, ['subscription_plans', 'vendor_subscriptions']) ? 'active' : '' ?>">
                <i class="fas fa-sync-alt icon"></i> <?= __('subscriptions') ?>
            </a>
            <ul class="collapse list-unstyled submenu <?= in_array($sidebarPage, ['subscription_plans', 'vendor_subscriptions']) ? 'show' : '' ?>"
                id="subsSub">
                <li><a href="?page=subscription_plans"
                        class="<?= $sidebarPage === 'subscription_plans' ? 'active' : '' ?>"><?= __('subscription_plans') ?></a>
                </li>
                <li><a href="?page=vendor_subscriptions"
                        class="<?= $sidebarPage === 'vendor_subscriptions' ? 'active' : '' ?>"><?= __('vendor_subscriptions') ?></a>
                </li>
            </ul>
        </li>

        <!-- Ads Submenu -->
        <li>
            <a href="#adsSub" data-bs-toggle="collapse"
                aria-expanded="<?= in_array($sidebarPage, ['ad_packages', 'vendor_ads']) ? 'true' : 'false' ?>"
                class="<?= in_array($sidebarPage, ['ad_packages', 'vendor_ads']) ? 'active' : '' ?>">
                <i class="fas fa-bullhorn icon"></i> <?= __('ads') ?>
            </a>
            <ul class="collapse list-unstyled submenu <?= in_array($sidebarPage, ['ad_packages', 'vendor_ads']) ? 'show' : '' ?>"
                id="adsSub">
                <li><a href="?page=ad_packages"
                        class="<?= $sidebarPage === 'ad_packages' ? 'active' : '' ?>"><?= __('ad_packages') ?></a></li>
                <li><a href="?page=vendor_ads"
                        class="<?= $sidebarPage === 'vendor_ads' ? 'active' : '' ?>"><?= __('vendor_ads') ?></a></li>
            </ul>
        </li>

        <li>
            <a href="?page=payments" class="<?= $sidebarPage === 'payments' ? 'active' : '' ?>">
                <i class="fas fa-credit-card icon"></i> <?= __('payments') ?>
            </a>
        </li>
        <li>
            <a href="?page=reviews" class="<?= $sidebarPage === 'reviews' ? 'active' : '' ?>">
                <i class="fas fa-star icon"></i> <?= __('reviews') ?>
            </a>
        </li>
        <li>
            <a href="?page=notifications" class="<?= $sidebarPage === 'notifications' ? 'active' : '' ?>">
                <i class="fas fa-bell icon"></i> <?= __('notifications') ?>
            </a>
        </li>

        <li>
            <a href="#cmsSub" data-bs-toggle="collapse"
                aria-expanded="<?= in_array($sidebarPage, ['sliders', 'snippets', 'featured', 'faqs']) ? 'true' : 'false' ?>"
                class="<?= in_array($sidebarPage, ['sliders', 'snippets', 'featured', 'faqs']) ? 'active' : '' ?>">
                <i class="fas fa-layer-group icon"></i> <?= __('cms') ?>
            </a>
            <ul class="collapse list-unstyled submenu <?= in_array($sidebarPage, ['sliders', 'snippets', 'featured', 'faqs']) ? 'show' : '' ?>"
                id="cmsSub">
                <li><a href="?page=sliders" class="<?= $sidebarPage === 'sliders' ? 'active' : '' ?>"><?= __('sliders') ?></a>
                </li>
                <li><a href="?page=snippets"
                        class="<?= $sidebarPage === 'snippets' ? 'active' : '' ?>"><?= __('snippets') ?? 'Snippets' ?></a></li>
                <li><a href="?page=featured"
                        class="<?= $sidebarPage === 'featured' ? 'active' : '' ?>"><?= __('featured_content') ?? 'Featured Content' ?></a>
                </li>
                <li><a href="?page=faqs" class="<?= $sidebarPage === 'faqs' ? 'active' : '' ?>"><?= __('faqs') ?></a></li>
            </ul>
        </li>

        <!-- Lookups Submenu -->
        <li>
            <a href="#lookupsSub" data-bs-toggle="collapse"
                aria-expanded="<?= $sidebarPage === 'lookups' ? 'true' : 'false' ?>"
                class="<?= $sidebarPage === 'lookups' ? 'active' : '' ?>">
                <i class="fas fa-cogs icon"></i> <?= __('lookups') ?>
            </a>
            <ul class="collapse list-unstyled submenu <?= $sidebarPage === 'lookups' ? 'show' : '' ?>" id="lookupsSub">
                <li><a href="?page=lookups&tab=countries"
                        class="<?= ($sidebarPage === 'lookups' && ($_GET['tab'] ?? 'countries') === 'countries') ? 'active' : '' ?>"><?= __('countries') ?></a>
                </li>
                <li><a href="?page=lookups&tab=cities"
                        class="<?= ($sidebarPage === 'lookups' && ($_GET['tab'] ?? '') === 'cities') ? 'active' : '' ?>"><?= __('cities') ?></a>
                </li>
                <li><a href="?page=lookups&tab=nationalities"
                        class="<?= ($sidebarPage === 'lookups' && ($_GET['tab'] ?? '') === 'nationalities') ? 'active' : '' ?>"><?= __('nationalities') ?></a>
                </li>
                <li><a href="?page=lookups&tab=languages"
                        class="<?= ($sidebarPage === 'lookups' && ($_GET['tab'] ?? '') === 'languages') ? 'active' : '' ?>"><?= __('languages') ?></a>
                </li>
                <li><a href="?page=lookups&tab=specialties"
                        class="<?= ($sidebarPage === 'lookups' && ($_GET['tab'] ?? '') === 'specialties') ? 'active' : '' ?>"><?= __('specialties') ?></a>
                </li>
                <li><a href="?page=lookups&tab=skills"
                        class="<?= ($sidebarPage === 'lookups' && ($_GET['tab'] ?? '') === 'skills') ? 'active' : '' ?>"><?= __('skills') ?></a>
                </li>
                <li><a href="?page=lookups&tab=service_models"
                        class="<?= ($sidebarPage === 'lookups' && ($_GET['tab'] ?? '') === 'service_models') ? 'active' : '' ?>"><?= __('service_models') ?></a>
                </li>
                <li><a href="?page=lookups&tab=accommodation_types"
                        class="<?= ($sidebarPage === 'lookups' && ($_GET['tab'] ?? '') === 'accommodation_types') ? 'active' : '' ?>"><?= __('accommodation_types') ?></a>
                </li>
                <li><a href="?page=lookups&tab=interview_platforms"
                        class="<?= ($sidebarPage === 'lookups' && ($_GET['tab'] ?? '') === 'interview_platforms') ? 'active' : '' ?>"><?= __('interview_platforms') ?></a>
                </li>
                <li><a href="?page=lookups&tab=document_types"
                        class="<?= ($sidebarPage === 'lookups' && ($_GET['tab'] ?? '') === 'document_types') ? 'active' : '' ?>"><?= __('document_types') ?></a>
                </li>
            </ul>
        </li>

        <li>
            <a href="?page=support" class="<?= $sidebarPage === 'support' ? 'active' : '' ?>">
                <i class="fas fa-headset icon"></i> <?= __('support') ?>
            </a>
        </li>
        <li>
            <a href="?page=reports" class="<?= $sidebarPage === 'reports' ? 'active' : '' ?>">
                <i class="fas fa-chart-line icon"></i> <?= __('reports') ?>
            </a>
        </li>
        <li>
            <a href="?page=settings" class="<?= $sidebarPage === 'settings' ? 'active' : '' ?>">
                <i class="fas fa-sliders-h icon"></i> <?= __('settings') ?>
            </a>
        </li>
        <li>
            <a href="?page=logs" class="<?= $sidebarPage === 'logs' ? 'active' : '' ?>">
                <i class="fas fa-history icon"></i> <?= __('audit_logs') ?>
            </a>
        </li>
        <li>
            <a href="?page=dev_docs" class="<?= $sidebarPage === 'dev_docs' ? 'active' : '' ?>">
                <i class="fas fa-code icon"></i> <?= __('developer_api_docs') ?>
            </a>
        </li>
    </ul>
</div>

<div class="main-panel">
    <div class="top-navbar">
        <div class="d-flex align-items-center">
            <!-- Mobile Sidebar Toggle -->
            <button class="btn btn-light d-lg-none me-2" id="sidebarToggle"
                style="width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; border-radius: 12px; border: none; background: var(--bg-main);">
                <i class="fas fa-bars text-secondary"></i>
            </button>

            <!-- Search -->
            <div class="position-relative d-none d-md-block" style="width: 300px;">
                <i class="fas fa-search position-absolute text-muted"
                    style="top: 16px; <?= isRTL() ? 'right: 16px;' : 'left: 16px;' ?>"></i>
                <input type="text" class="form-control" placeholder="<?= __('search') ?>"
                    style="<?= isRTL() ? 'padding-right: 48px;' : 'padding-left: 48px;' ?> border-radius: 50rem;">
            </div>
        </div>

        <div class="d-flex align-items-center gap-3">
            <a href="?lang=<?= isRTL() ? 'en' : 'ar' ?>" class="btn btn-sm btn-light rounded-circle"
                title="<?= __('language') ?>"
                style="width: 40px; height: 40px; display: flex; align-items: center; justify-content: center;">
                <i class="fas fa-globe"></i>
            </a>
            <div class="dropdown">
                <div class="d-flex align-items-center gap-2 cursor-pointer" data-bs-toggle="dropdown"
                    aria-expanded="false" style="cursor: pointer;">
                    <div
                        style="width: 40px; height: 40px; border-radius: 12px; background: var(--primary-light); color: var(--primary); display: flex; align-items: center; justify-content: center; font-weight: bold;">
                        <?= strtoupper(substr($_SESSION['admin_name'] ?? 'A', 0, 1)) ?>
                    </div>
                    <div class="d-none d-md-block">
                        <div class="fw-bold" style="font-size: 14px;">
                            <?= htmlspecialchars($_SESSION['admin_name'] ?? __('admin')) ?></div>
                        <div class="text-secondary" style="font-size: 12px;">Admin <i
                                class="fas fa-chevron-down ms-1 small"></i></div>
                    </div>
                </div>
                <ul class="dropdown-menu dropdown-menu-end border-0 shadow-sm mt-2 rounded-4 p-2" style="width: 220px;">
                    <li><a class="dropdown-item py-2 px-3 rounded-3" href="?page=settings&tab=profile"><i
                                class="fas fa-user-circle me-2 text-primary"></i> <?= __('admin_profile') ?></a></li>
                    <li><a class="dropdown-item py-2 px-3 rounded-3" href="?page=settings&tab=security"><i
                                class="fas fa-key me-2 text-warning"></i> <?= __('change_password') ?></a></li>
                    <li>
                        <hr class="dropdown-divider opacity-50">
                    </li>
                    <li><a class="dropdown-item py-2 px-3 rounded-3 text-danger" href="?page=logout"><i
                                class="fas fa-sign-out-alt me-2"></i> <?= __('logout') ?></a></li>
                </ul>
            </div>
        </div>
    </div>
    <div class="content">