<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Admin</title>
    <link rel="icon" type="image/x-icon" href="assets/images/Logo.webp">
    <script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script>
    <link href="https://cdn.jsdelivr.net/npm/remixicon/fonts/remixicon.css" rel="stylesheet">
    <link href="https://cdn.jsdelivr.net/npm/tom-select@2.3.1/dist/css/tom-select.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/tom-select@2.3.1/dist/js/tom-select.complete.min.js"></script>
    <style>
    @keyframes fadeIn {
        from {
            opacity: 0;
            transform: translateY(20px) scale(.95)
        }

        to {
            opacity: 1;
            transform: translateY(0) scale(1)
        }
    }

    .modal-animation {
        animation: fadeIn .3s ease
    }

    #sidebar::-webkit-scrollbar {
        display: none
    }

    #sidebar {
        scrollbar-width: none
    }

    .ts-control {
        padding-left: 40px !important;
        padding-right: 12px !important;
        height: 44px !important;
        min-height: 44px !important;
        display: flex !important;
        align-items: center !important;
        border: 1px solid #e2e8f0 !important;
        border-radius: 6px !important;
        background: #f8fafc !important;
        box-shadow: none !important
    }

    .ts-control input {
        margin: 0 !important;
        padding: 0 !important;
        font-size: 14px !important;
        color: #334155 !important;
        background: transparent !important
    }

    .ts-control.focus {
        border-color: #3b82f6 !important;
        background: #fff !important;
        box-shadow: 0 0 0 2px #dbeafe !important
    }

    html,
    body {
        overflow-x: hidden;
        overflow-y: auto;
    }

    .swal2-container {
        z-index: 99999 !important;
    }

    .swal2-popup {
        transform: none !important;
    }

    body.swal2-shown {
        overflow-y: auto !important;
        padding-right: 0 !important;
    }

    body.swal2-height-auto {
        height: 100% !important;
    }

    main {
        overflow: hidden
    }

    .active-link {
        background-color: #122CB8;
        color: #fff !important
    }

    .active-link i {
        color: #fff !important
    }

    #crmMenu,
    #lockoraMenu {
        display: none;
    }

    .scrollbar-hide::-webkit-scrollbar {
        height: 4px;
    }

    .scrollbar-hide::-webkit-scrollbar-thumb {
        background: #cbd5e1;
        border-radius: 9999px;
    }

    #erpApps {
        scroll-behavior: smooth;
    }
    </style>
</head>

<body class="bg-gray-100">

    <!-- Mobile Overlay -->
    <div id="overlay" class="fixed inset-0 bg-black/50 z-40 hidden lg:hidden"></div>

    <!-- Sidebar -->
    <aside id="sidebar"
        class="fixed top-0 left-0 z-[60] h-screen w-72 overflow-y-auto scrollbar-thin bg-[#0B102E] shadow-xl transform -translate-x-full lg:translate-x-0 transition-transform duration-300 ease-in-out">

        <div class="h-16 flex items-center justify-center px-6 border-b border-white/10">
            <h1 id="sidebarTitle" class="text-3xl font-bold text-white font-serif">
                
            </h1>
            <button id="closeSidebar" class="lg:hidden text-2xl text-white">
                <i class="ri-close-line"></i>
            </button>
        </div>

        <!-- office crm Menu -->
        <nav id="crmMenu" class="p-5 space-y-2 mt-4">

            <!--Dashboard-->
            <a href="dashboard.php"
                class="sidebar-link flex items-center gap-3 px-4 py-3 rounded-xl text-white hover:bg-blue-400/20 transition-all duration-200">
                <i class="ri-dashboard-line"></i>
                Dashboard
            </a>

            <!--User-->
            <a href="user.php"
                class="sidebar-link flex items-center gap-3 px-4 py-3 rounded-xl text-white hover:bg-blue-400/20 transition-all duration-200">
                <i class="ri-user-line text-lg"></i>
                User
            </a>

            <!-- Master -->
            <a href="master.php"
                class="sidebar-link flex items-center gap-3 px-4 py-3 rounded-xl text-white hover:bg-blue-400/20 transition-all duration-200">
                <i class="ri-shield-user-line text-lg"></i>
                Master
            </a>

            <!--Account-->
            <a href="account.php"
                class="sidebar-link flex items-center gap-3 px-4 py-3 rounded-xl text-white hover:bg-blue-400/20 transition-all duration-200">
                <i class="ri-account-circle-line text-lg"></i>
                Account
            </a>

            <!--Sales-->
            <a href="sales.php"
                class="sidebar-link flex items-center gap-3 px-4 py-3 rounded-xl text-white hover:bg-blue-400/20 transition-all duration-200">
                <i class="ri-line-chart-line text-lg"></i>
                CRM
            </a>

            <!--Project Management-->
            <a href="projects.php"
                class="sidebar-link flex items-center gap-3 px-4 py-3 rounded-xl text-white hover:bg-blue-400/20 transition-all duration-200">
                <i class="ri-folder-chart-line text-lg"></i>
                Project Management
            </a>

            <!--Task Management-->
            <a href="task.php"
                class="sidebar-link flex items-center gap-3 px-4 py-3 rounded-xl text-white hover:bg-blue-400/20 transition-all duration-200">
                <i class="ri-checkbox-multiple-line text-lg"></i>
                Task Management
            </a>

            <!--AMC Management-->
            <a href="amc.php"
                class="sidebar-link flex items-center gap-3 px-4 py-3 rounded-xl text-white hover:bg-blue-400/20 transition-all duration-200">
                <i class="ri-checkbox-multiple-line text-lg"></i>
                AMC Management
            </a>

            <!--SMO & SEO Management-->
            <a href="smo_seo.php"
                class="sidebar-link flex items-center gap-3 px-4 py-3 rounded-xl text-white hover:bg-blue-400/20 transition-all duration-200">
                <i class="ri-checkbox-multiple-line text-lg"></i>
                SMO & SEO Management
            </a>

            <!--HRMS-->
            <a href="hrms.php"
                class="sidebar-link flex items-center gap-3 px-4 py-3 rounded-xl text-white hover:bg-blue-400/20 transition-all duration-200">
                <i class="ri-team-line text-lg"></i>
                HRMS
            </a>

            <!-- QA Bug-->
            <a href="qa_bug_list.php"
                class="sidebar-link flex items-center gap-3 px-4 py-3 rounded-xl text-white hover:bg-blue-400/20 transition-all duration-200">
                <i class="ri-bug-line text-lg"></i>
                QA Bug List
            </a>

            <!-- Graphics Workflow-->
            <a href="graphics_workflow.php"
                class="sidebar-link flex items-center gap-3 px-4 py-3 rounded-xl text-white hover:bg-blue-400/20 transition-all duration-200">
                <i class="ri-palette-line text-lg"></i>
                Graphics Workflow
            </a>

            <!--Rights Management-->
            <a href="rights_management.php"
                class="sidebar-link flex items-center gap-3 px-4 py-3 rounded-xl text-white hover:bg-blue-400/20 transition-all duration-200">
                <i class="ri-shield-check-line text-lg"></i>
                Rights Management
            </a>

            <!--Chats-->
            <a href="chats.php"
                class="sidebar-link flex items-center gap-3 px-4 py-3 rounded-xl text-white hover:bg-blue-400/20 transition-all duration-200">
                <i class="ri-chat-3-line text-lg"></i>
                Chat
            </a>
        </nav>

        <!-- Lockora Menu -->
        <nav id="lockoraMenu" class="p-5 space-y-2 hidden">

            <!-- Dashboard -->
            <a href="lockora_dashboard.php"
                class="sidebar-link flex items-center gap-3 px-4 py-3 rounded-xl text-white hover:bg-blue-400/20 transition-all duration-200">
                <i class="ri-dashboard-line"></i>
                Dashboard
            </a>

            <!-- Website Management -->
            <div class="pt-4 border-b border-b-indigo-950">
                <h6 class="px-4 mb-2 text-xs font-semibold uppercase tracking-wider text-blue-200">
                    Channel Partners
                </h6>

                <a href="lockora_sales_partner.php"
                    class="sidebar-link flex items-center gap-3 px-4 py-3 rounded-xl text-white hover:bg-blue-400/20 transition-all duration-200">
                    <i class="ri-team-line"></i>
                    Sales Partner
                </a>

                <a href="lockora_dealer.php"
                    class="sidebar-link flex items-center gap-3 px-4 py-3 rounded-xl text-white hover:bg-blue-400/20 transition-all duration-200">
                    <i class="ri-store-2-line"></i>
                    Dealer
                </a>
            </div>

            <a href="lockora_account.php"
                class="sidebar-link flex items-center gap-3 px-4 py-3 rounded-xl text-white hover:bg-blue-400/20 transition-all duration-200">
                <i class="ri-user-settings-line"></i>
                Account
            </a>

            <!-- Website Management -->
            <div class="pt-4 border-b border-b-indigo-950">
                <h6 class="px-4 mb-2 text-xs font-semibold uppercase tracking-wider text-blue-200">
                    Website Management
                </h6>


                <a href="lockora_demo.php"
                    class="sidebar-link flex items-center gap-3 px-4 py-3 rounded-xl text-white hover:bg-blue-400/20 transition-all duration-200">
                    <i class="ri-slideshow-line"></i>
                    Demo Management
                </a>

                <a href="lockora_order_list.php"
                    class="sidebar-link flex items-center gap-3 px-4 py-3 rounded-xl text-white hover:bg-blue-400/20 transition-all duration-200">
                    <i class="ri-shopping-bag-3-line"></i>
                    Order Management
                </a>

                <a href="lockora_installation.php"
                    class="sidebar-link flex items-center gap-3 px-4 py-3 rounded-xl text-white hover:bg-blue-400/20 transition-all duration-200">
                    <i class="ri-tools-line"></i>
                    Installation
                </a>

                <a href="lockora_warranty_registration.php"
                    class="sidebar-link flex items-center gap-3 px-4 py-3 rounded-xl text-white hover:bg-blue-400/20 transition-all duration-200">
                    <i class="ri-shield-check-line"></i>
                    Warranty Registration
                </a>

                <a href="lockora_extended_warranty.php"
                    class="sidebar-link flex items-center gap-3 px-4 py-3 rounded-xl text-white hover:bg-blue-400/20 transition-all duration-200">
                    <i class="ri-shield-star-line"></i>
                    Extended Warranty
                </a>

                <a href="lockora_product.php"
                    class="sidebar-link flex items-center gap-3 px-4 py-3 rounded-xl text-white hover:bg-blue-400/20 transition-all duration-200">
                    <i class="ri-box-3-line"></i>
                    Inventory Management
                </a>

                <a href="lockora_return_order.php"
                    class="sidebar-link flex items-center gap-3 px-4 py-3 rounded-xl text-white hover:bg-blue-400/20 transition-all duration-200">
                    <i class="ri-arrow-go-back-line"></i>
                    Return Order
                </a>

                <a href="lockora_complete_order.php"
                    class="sidebar-link flex items-center gap-3 px-4 py-3 rounded-xl text-white hover:bg-blue-400/20 transition-all duration-200">
                    <i class="ri-checkbox-circle-line"></i>
                    Complete Order
                </a>

                <a href="lockora_ticket_list.php"
                    class="sidebar-link flex items-center gap-3 px-4 py-3 rounded-xl text-white hover:bg-blue-400/20 transition-all duration-200">
                    <i class="ri-ticket-2-line"></i>
                   Complaint Management
                </a>

                <!--<a href="lockora_testimonial.php"-->
                <!--    class="sidebar-link flex items-center gap-3 px-4 py-3 rounded-xl text-white hover:bg-blue-400/20 transition-all duration-200">-->
                <!--    <i class="ri-chat-quote-line"></i>-->
                <!--    Testimonial-->
                <!--</a>-->
            </div>


            <!-- Policies -->
            <div class="pt-4">
                <h6 class="px-4 mb-2 text-xs font-semibold uppercase tracking-wider text-blue-200">
                    Policies
                </h6>

                <a href="lockora_replacement_policy.php"
                    class="sidebar-link flex items-center gap-3 px-4 py-3 rounded-xl text-white hover:bg-blue-400/20 transition-all duration-200">
                    <i class="ri-refresh-line"></i>
                    Replacement Policy
                </a>

                <a href="lockora_terms_conditions.php"
                    class="sidebar-link flex items-center gap-3 px-4 py-3 rounded-xl text-white hover:bg-blue-400/20 transition-all duration-200">
                    <i class="ri-file-list-3-line"></i>
                    Terms & Conditions
                </a>

                <a href="lockora_privacy_policy.php"
                    class="sidebar-link flex items-center gap-3 px-4 py-3 rounded-xl text-white hover:bg-blue-400/20 transition-all duration-200">
                    <i class="ri-shield-user-line"></i>
                    Privacy Policy
                </a>

            </div>


            <a href="lockora_contact_us.php"
                class="sidebar-link flex items-center gap-3 px-4 py-3 rounded-xl text-white hover:bg-blue-400/20 transition-all duration-200">
                <i class="ri-contacts-line"></i>
                Contact Us
            </a>

        </nav>

        <!-- Puresaas menus -->
        <nav id="puresaasMenu" class="p-5 space-y-2 hidden">


            <!-- Dashboard -->
            <a href="puresaas_dashboard.php"
                class="sidebar-link flex items-center gap-3 px-4 py-3 rounded-xl text-white hover:bg-blue-400/20 transition-all duration-200">
                <i class="ri-dashboard-line"></i>
                Dashboard
            </a>

            <!-- Account -->
            <!--<a href="puresaas_account.php"-->
            <!--    class="sidebar-link flex items-center gap-3 px-4 py-3 rounded-xl text-white hover:bg-blue-400/20 transition-all duration-200">-->
            <!--    <i class="ri-account-circle-line text-lg"></i>-->
            <!--    Account-->
            <!--</a>-->
            
                <a href="puresaas_sales_partner.php"
                    class="sidebar-link flex items-center gap-3 px-4 py-3 rounded-xl text-white hover:bg-blue-400/20 transition-all duration-200">
                    <i class="ri-team-line"></i>
                    Sales Partner
                </a>
                
                <a href="puresaas_customers.php"
                    class="sidebar-link flex items-center gap-3 px-4 py-3 rounded-xl text-white hover:bg-blue-400/20 transition-all duration-200">
                    <i class="ri-user-3-line"></i>
                    Customer Management
                </a>

            <!-- Sales -->
            <a href="puresaas_sales.php"
                class="sidebar-link flex items-center gap-3 px-4 py-3 rounded-xl text-white hover:bg-blue-400/20 transition-all duration-200">
                <i class="ri-line-chart-line text-lg"></i>
                CRM
            </a>

            <!-- Demo -->
            <a href="puresaas_demo.php"
                class="sidebar-link flex items-center gap-3 px-4 py-3 rounded-xl text-white hover:bg-blue-400/20 transition-all duration-200">
                <i class="ri-slideshow-line"></i>
                Demo
            </a>

            <!-- Free Trial -->
            <a href="puresaas_free_trial.php"
                class="sidebar-link flex items-center gap-3 px-4 py-3 rounded-xl text-white hover:bg-blue-400/20 transition-all duration-200">
                <i class="ri-gift-line"></i>
                Free Trial
            </a>

            <!-- Register User -->
            <a href="puresaas_register_user.php"
                class="sidebar-link flex items-center gap-3 px-4 py-3 rounded-xl text-white hover:bg-blue-400/20 transition-all duration-200">
                <i class="ri-user-add-line"></i>
               Existing Users
            </a>

            <!-- Membership Plan -->
            <a href="puresaas_membership_plan.php"
                class="sidebar-link flex items-center gap-3 px-4 py-3 rounded-xl text-white hover:bg-blue-400/20 transition-all duration-200">
                <i class="ri-vip-crown-line"></i>
                Membership Plan
            </a>

            <!-- Complaint Management -->
            <a href="puresaas_complaint_management.php"
                class="sidebar-link flex items-center gap-3 px-4 py-3 rounded-xl text-white hover:bg-blue-400/20 transition-all duration-200">
                <i class="ri-customer-service-2-line"></i>
                Complaint Management
            </a>


        </nav>

        <nav id="uturnMenu" class="p-5 space-y-2 hidden">
                <!-- Dashboard -->
            <a href="uturn_dashboard.php"
                class="sidebar-link flex items-center gap-3 px-4 py-3 rounded-xl text-white hover:bg-blue-400/20 transition-all duration-200">
                <i class="ri-dashboard-line"></i>
                Dashboard
            </a>
            
                        <!--Account-->
            <a href="uturn_account.php"
                class="sidebar-link flex items-center gap-3 px-4 py-3 rounded-xl text-white hover:bg-blue-400/20 transition-all duration-200">
                <i class="ri-account-circle-line text-lg"></i>
                Account
            </a>
            
        </nav>
    </aside>
    <!-- Main Content -->
    <div class="lg:ml-72 min-h-screen flex flex-col">
        <!-- Navbar -->
        <header
            class="fixed top-0 right-0 left-0 lg:left-72 h-16 bg-white shadow-sm flex items-center justify-between px-4 md:px-6 z-50">
            <!-- Left -->
            <div class="flex items-center gap-2 no-scrollbar">

                <!-- Menu Button -->
                <button id="openSidebar" class="text-2xl text-gray-700 lg:hidden flex-shrink-0">
                    <i class="ri-menu-line"></i>
                </button>

                <!-- Applications Dropdown -->
                <div class="relative">
                    <button id="appDropdownBtn"
                        class="flex items-center gap-3 px-4 py-2.5 bg-white border border-gray-200 rounded-xl shadow-sm hover:shadow-md hover:border-blue-300 transition-all duration-300">

                        <div class="w-8 h-8 flex items-center justify-center rounded-lg bg-blue-50 text-blue-600">
                            <i class="ri-apps-line"></i>
                        </div>

                        <span  id="selectedCompany" class="font-medium text-gray-700">Companies</span>

                        <i class="ri-arrow-down-s-line text-gray-500 ml-auto"></i>
                    </button>

                    <!-- Dropdown -->
                    <div id="appDropdown"
                        class="hidden absolute top-full mt-2 left-0 w-72 bg-white rounded-2xl border border-gray-200 shadow-xl z-[99999] overflow-hidden">

                        <div class="p-3 border-b border-gray-200 bg-gray-50">
                            <h3 class="font-semibold text-gray-800 text-sm">Quick Access</h3>
                            <p class="text-xs text-gray-500">Switch between applications</p>
                        </div>

                        <div class="p-2 space-y-1">
                            
                                <!-- Main Dashboard -->
                                <a href="all_company.php"
                                   class="group flex items-center gap-3 p-2.5 rounded-xl hover:bg-blue-50 transition-all border-b border-gray-100 mb-2">
                            
                                    <div class="w-10 h-10 rounded-xl bg-blue-50 flex items-center justify-center">
                                        <i class="ri-dashboard-line text-xl text-blue-600"></i>
                                    </div>
                            
                                    <div>
                                        <h4 class="font-medium text-sm text-gray-800">
                                            Main Dashboard
                                        </h4>
                                        <p class="text-xs text-gray-500">
                                            Central Control Panel
                                        </p>
                                    </div>
                            
                                </a>

                            <a href="dashboard.php"
                                data-company="SIT"
                              class="company-link group flex items-center gap-3 p-2.5 rounded-xl hover:bg-blue-50 transition-all">

                                <div
                                    class="w-10 h-10 rounded-xl bg-blue-50 flex items-center justify-center overflow-hidden">
                                    <img src="assets/images/Logo_1.webp" alt="Office CRM"
                                        class="w-7 h-7 object-contain">
                                </div>

                                <div>
                                    <h4 class="font-medium text-sm text-gray-800">SIT</h4>
                                    <p class="text-xs text-gray-500">Company Management</p>
                                </div>
                            </a>

                            <a href="lockora_dashboard.php"
                                data-company="Lockora"
                                class="company-link group flex items-center gap-3 p-2.5 rounded-xl hover:bg-purple-50 transition-all">

                                <div
                                    class="w-10 h-10 rounded-xl bg-orange-50 flex items-center justify-center overflow-hidden">
                                    <img src="assets/images/lo_favicon.png" alt="Lockora"
                                        class="w-7 h-7 object-contain">
                                </div>

                                <div>
                                    <h4 class="font-medium text-sm text-gray-800">Lockora</h4>
                                    <p class="text-xs text-gray-500">Security Platform</p>
                                </div>
                            </a>

                            <a href="puresaas_dashboard.php"
                                data-company="PureSaaS"
                                class="company-link group flex items-center gap-3 p-2.5 rounded-xl hover:bg-emerald-50 transition-all">

                                <div
                                    class="w-10 h-10 rounded-xl bg-indigo-50 flex items-center justify-center overflow-hidden">
                                    <img src="assets/images/Ps_favicon.png" alt="PureSaaS"
                                        class="w-7 h-7 object-contain">
                                </div>

                                <div>
                                    <h4 class="font-medium text-sm text-gray-800">PureSaaS</h4>
                                    <p class="text-xs text-gray-500">SaaS Management</p>
                                </div>
                            </a>

                            <a href="uturn_dashboard.php"
                                data-company="U-Turn Media"
                               class="company-link group flex items-center gap-3 p-2.5 rounded-xl hover:bg-orange-50 transition-all">

                                <div
                                    class="w-10 h-10 rounded-xl bg-yellow-50 flex items-center justify-center overflow-hidden">
                                    <img src="assets/images/uturn_logo.png" alt="U-Turn Media"
                                        class="w-7 h-7 object-contain">
                                </div>

                                <div>
                                    <h4 class="font-medium text-sm text-gray-800">U-Turn Media</h4>
                                    <p class="text-xs text-gray-500">Marketing & Media</p>
                                </div>
                            </a>

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


            <!-- Right -->
            <div class="flex items-center gap-4">

                <!-- Notification -->
                <div class="relative flex justify-end">
                    <!-- Notification Button -->
                    <button id="notificationBtn"
                        class="relative w-10 h-10 rounded-lg bg-gray-100 hover:bg-gray-200 flex items-center justify-center transition">
                        <i class="ri-notification-3-line text-xl"></i>
                        <!-- Badge -->
                        <span
                            class="absolute -top-1 -right-1 min-w-[20px] h-5 px-1 bg-red-500 text-white text-[10px] font-semibold rounded-lg flex items-center justify-center">
                            3
                        </span>
                    </button>


                    <!-- Notification Dropdown -->
                    <div id="notificationDropdown"
                        class="hidden fixed top-20 left-1/2 -translate-x-1/2 sm:absolute sm:left-auto sm:right-0 sm:translate-x-0 w-[92%] sm:w-80 max-w-sm bg-white rounded-lg shadow-xl border border-gray-200 overflow-hidden z-50">
                        <!-- Header -->
                        <div class="flex items-center justify-between px-4 py-3 border-b border-gray-200 bg-gray-50">
                            <h4 class="text-sm font-semibold text-gray-700">
                                Notifications
                            </h4>
                            <span class="text-xs text-blue-600 font-medium">
                                3 New
                            </span>
                        </div>

                        <!-- Notification Item -->
                        <a href="#"
                            class="flex items-start gap-3 px-4 py-4 hover:bg-gray-50 transition border-b border-gray-200">
                            <div
                                class="min-w-[40px] h-10 rounded-lg bg-blue-100 text-blue-600 flex items-center justify-center">
                                <i class="ri-user-add-line"></i>
                            </div>
                            <div class="flex-1 min-w-0">
                                <p class="text-sm font-medium text-gray-700 break-words">
                                    New user registered
                                </p>
                                <p class="text-xs text-gray-500 mt-1">
                                    2 min ago
                                </p>
                            </div>
                        </a>

                        <!-- Notification Item -->
                        <a href="#"
                            class="flex items-start gap-3 px-4 py-4 hover:bg-gray-50 transition border-b border-gray-200">
                            <div
                                class="min-w-[40px] h-10 rounded-lg bg-green-100 text-green-600 flex items-center justify-center">
                                <i class="ri-money-rupee-circle-line"></i>
                            </div>
                            <div class="flex-1 min-w-0">
                                <p class="text-sm font-medium text-gray-700 break-words">
                                    Payment received
                                </p>
                                <p class="text-xs text-gray-500 mt-1">
                                    10 min ago
                                </p>
                            </div>
                        </a>

                        <!-- Notification Item -->
                        <a href="#" class="flex items-start gap-3 px-4 py-4 hover:bg-gray-50 transition">
                            <div
                                class="min-w-[40px] h-10 rounded-lg bg-red-100 text-red-600 flex items-center justify-center">
                                <i class="ri-error-warning-line"></i>
                            </div>
                            <div class="flex-1 min-w-0">
                                <p class="text-sm font-medium text-gray-700 break-words">
                                    Server warning detected
                                </p>
                                <p class="text-xs text-gray-500 mt-1">
                                    30 min ago
                                </p>
                            </div>
                        </a>
                    </div>
                </div>

                <!-- Profile Dropdown -->
                <div class="relative">
                    <!-- Profile Button -->
                    <button id="profileBtn" class="flex items-center gap-3">
                        <img src="assets/images/Logo.webp"
                            class="min-w-[42px] min-h-[42px] max-w-[42px] max-h-[42px] rounded-full object-cover border-2 border-gray-200 shadow-sm"
                            alt="profile">
                        <div class="hidden sm:block text-left">
                            <h4 class="text-sm font-semibold text-gray-700">
                                User
                            </h4>
                            <p class="text-xs text-gray-500">
                                Admin
                            </p>
                        </div>
                        <i class="ri-arrow-down-s-line text-gray-500 text-xl"></i>
                    </button>

                    <!-- Dropdown -->
                    <div id="profileDropdown"
                        class="hidden absolute right-0 top-14 w-52 bg-white rounded-lg shadow-xl border border-gray-200 overflow-hidden z-50">
                        <div class="px-4 py-3 border-b border-gray-200 bg-gray-50">
                            <h4 class="text-sm font-semibold text-gray-700">
                                User
                            </h4>
                            <p class="text-xs text-gray-500 mt-1">
                                Admin
                            </p>
                        </div>
                        <a href="profile.php" class="flex items-center gap-3 px-4 py-3 hover:bg-gray-100 transition">
                            <i class="ri-user-line text-lg"></i>
                            Profile
                        </a>

                        <a href="index.php"
                            class="flex items-center gap-3 px-4 py-3 text-red-600 hover:bg-red-50 transition">
                            <i class="ri-logout-box-r-line text-lg"></i>
                            Logout
                        </a>
                    </div>
                </div>
            </div>
        </header>

        <!-- Page Content -->
        <main class="flex-1 p-4 md:p-6 mt-10 overflow-x-hidden">