<?php
// ডাটাবেস কানেকশন (যদি আগে থেকে না থাকে)
if (!isset($db)) {
    require_once '../config/database.php';
}

// ইউজার লগইন চেক (সেশন অনুযায়ী)
$is_user_logged_in = isset($_SESSION['user_id']) || isset($_SESSION['is_user_logged_in']);

// ডাইনামিক ক্যাটাগরিগুলো আনা
$sidebar_categories = [];
try {
    $stmt = $db->query("SELECT id, name, icon FROM hosting_categories WHERE status='active' ORDER BY id DESC");
    $sidebar_categories = $stmt->fetchAll();
} catch (PDOException $e) {
    // Error handling
}
?>

<style>
    /* ==========================================
       Premium Glassmorphism Sidebar
       ========================================== */
    .glass-sidebar {
        width: 280px;
        height: 100vh;
        position: fixed;
        left: -300px; /* ডিফল্টভাবে লুকানো থাকবে */
        top: 0;
        background: var(--glass-bg);
        backdrop-filter: blur(20px) saturate(200%);
        -webkit-backdrop-filter: blur(20px) saturate(200%);
        border-right: 1px solid var(--glass-border);
        box-shadow: var(--glass-shadow);
        z-index: 1060;
        transition: left 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
        display: flex;
        flex-direction: column;
        overflow-y: auto;
    }

    /* যখন ৩-ডটে ক্লিক করা হবে তখন এই ক্লাসটি অ্যাড হবে */
    .glass-sidebar.show {
        left: 0;
    }

    /* Sidebar Overlay (পেছনের কালো শ্যাডো) */
    .sidebar-overlay {
        position: fixed;
        top: 0;
        left: 0;
        width: 100vw;
        height: 100vh;
        background: rgba(0, 0, 0, 0.4);
        backdrop-filter: blur(3px);
        z-index: 1055;
        opacity: 0;
        visibility: hidden;
        transition: all 0.4s ease;
    }
    .sidebar-overlay.show {
        opacity: 1;
        visibility: visible;
    }

    /* Sidebar Header & Logo */
    .sidebar-header {
        padding: 20px 25px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        border-bottom: 1px solid rgba(163, 174, 209, 0.1);
    }
    .sidebar-logo img {
        height: 35px;
        transition: all 0.3s ease;
    }

    /* Sidebar Menu Styles */
    .sidebar-menu {
        padding: 20px 15px;
        list-style: none;
        margin: 0;
        flex-grow: 1;
    }

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

    .sidebar-link {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 12px 18px;
        color: var(--text-main);
        text-decoration: none;
        font-weight: 600;
        font-size: 15px;
        border-radius: 12px;
        transition: all 0.3s ease;
        border: 1px solid transparent;
    }

    .sidebar-link .menu-content {
        display: flex;
        align-items: center;
        gap: 12px;
    }

    .sidebar-link i.menu-icon {
        font-size: 18px;
        color: var(--icon-color);
        width: 24px;
        text-align: center;
        transition: all 0.3s;
    }

    .sidebar-link:hover, .sidebar-link[aria-expanded="true"] {
        background: var(--icon-bg);
        color: var(--icon-color);
        border-color: var(--glass-border);
        transform: translateX(5px);
    }

    .sidebar-link:hover i.menu-icon, .sidebar-link[aria-expanded="true"] i.menu-icon {
        transform: scale(1.1);
    }

    /* Accordion Arrow Animation */
    .arrow-icon {
        font-size: 12px;
        transition: transform 0.3s ease;
        color: var(--text-muted);
    }
    .sidebar-link[aria-expanded="true"] .arrow-icon {
        transform: rotate(180deg);
        color: var(--icon-color);
    }

    /* Submenu (Dropdown) Styling */
    .submenu {
        list-style: none;
        padding-left: 45px;
        margin-top: 5px;
        margin-bottom: 10px;
    }
    .submenu li a {
        display: block;
        padding: 8px 10px;
        color: var(--text-muted);
        text-decoration: none;
        font-size: 14px;
        font-weight: 500;
        border-radius: 8px;
        transition: all 0.2s;
    }
    .submenu li a:hover {
        color: var(--icon-color);
        background: rgba(67, 24, 255, 0.03);
        padding-left: 15px;
    }
    .submenu li a i {
        margin-right: 8px;
        font-size: 12px;
    }

    /* Close Button for mobile */
    .btn-close-sidebar {
        background: transparent;
        border: none;
        color: var(--text-muted);
        font-size: 20px;
        cursor: pointer;
        transition: color 0.3s;
    }
    .btn-close-sidebar:hover {
        color: #ef4444;
    }
</style>

<!-- Sidebar Overlay (Background Blur) -->
<div class="sidebar-overlay" id="sidebarOverlay"></div>

<!-- Glassmorphism Sidebar -->
<aside class="glass-sidebar" id="userSidebar">
    
    <!-- Sidebar Header -->
    <div class="sidebar-header">
        <div class="sidebar-logo">
            <a href="dashboard.php">
                <img id="sidebarLogo" src="../assets/images/logo-dark.png" alt="Plexio IT">
            </a>
        </div>
        <button class="btn-close-sidebar" id="closeSidebarBtn"><i class="fas fa-times"></i></button>
    </div>

    <!-- Sidebar Menu -->
    <ul class="sidebar-menu">
        
        <!-- Dashboard / Home -->
        <li>
            <a href="dashboard.php" class="sidebar-link">
                <div class="menu-content"><i class="fas fa-home menu-icon"></i> Home</div>
            </a>
        </li>

        <!-- Products (Dynamic Categories) -->
        <li>
            <a href="#productMenu" class="sidebar-link" data-bs-toggle="collapse" aria-expanded="false">
                <div class="menu-content"><i class="fas fa-server menu-icon"></i> Products</div>
                <i class="fas fa-chevron-down arrow-icon"></i>
            </a>
            <ul class="collapse submenu" id="productMenu" data-bs-parent=".sidebar-menu">
                <?php if (empty($sidebar_categories)): ?>
                    <li><a href="#"><i class="fas fa-ban"></i> No Categories</a></li>
                <?php else: ?>
                    <?php foreach ($sidebar_categories as $cat): ?>
                        <li>
                            <a href="category.php?id=<?= $cat['id'] ?>">
                                <i class="<?= htmlspecialchars($cat['icon']) ?>"></i> <?= htmlspecialchars($cat['name']) ?>
                            </a>
                        </li>
                    <?php endforeach; ?>
                <?php endif; ?>
            </ul>
        </li>

        <!-- Domains -->
        <li>
            <a href="#domainMenu" class="sidebar-link" data-bs-toggle="collapse" aria-expanded="false">
                <div class="menu-content"><i class="fas fa-globe menu-icon"></i> Domains</div>
                <i class="fas fa-chevron-down arrow-icon"></i>
            </a>
            <ul class="collapse submenu" id="domainMenu" data-bs-parent=".sidebar-menu">
                <li><a href="register-domain.php"><i class="fas fa-search"></i> Register New Domain</a></li>
                <li><a href="domain_pricing.php"><i class="fas fa-tags"></i> Domain Pricing</a></li>
            </ul>
        </li>

        <!-- Support -->
        <li>
            <a href="support.php" class="sidebar-link">
                <div class="menu-content"><i class="fas fa-headset menu-icon"></i> Support Tickets</div>
            </a>
        </li>

        <!-- ==============================================
             LOGGED IN USER MENU (Only visible if logged in)
             ============================================== -->
        <?php if ($is_user_logged_in): ?>
            
            <li class="mt-3 mb-2 px-3"><small class="text-muted fw-bold text-uppercase" style="font-size: 11px; letter-spacing: 1px;">My Account</small></li>

            <!-- My Services -->
            <li>
                <a href="#servicesMenu" class="sidebar-link" data-bs-toggle="collapse" aria-expanded="false">
                    <div class="menu-content"><i class="fas fa-box-open menu-icon"></i> My Services</div>
                    <i class="fas fa-chevron-down arrow-icon"></i>
                </a>
                <ul class="collapse submenu" id="servicesMenu" data-bs-parent=".sidebar-menu">
                    <li><a href="my-domains.php"><i class="fas fa-globe-americas"></i> My Domains</a></li>
                    <li><a href="my_hosting.php"><i class="fas fa-server"></i> My Hosting</a></li>
                </ul>
            </li>

            <!-- Add Funds -->
            <li>
                <a href="add_funds.php" class="sidebar-link">
                    <div class="menu-content"><i class="fas fa-wallet menu-icon text-success"></i> Add Funds</div>
                </a>
            </li>

        <?php endif; ?>

    </ul>
</aside>

<!-- Sidebar JavaScript Logic -->
<script>
    document.addEventListener("DOMContentLoaded", function() {
        const sidebarToggle = document.getElementById('sidebarToggle'); // হেডারের ৩-ডট বাটন
        const userSidebar = document.getElementById('userSidebar');
        const sidebarOverlay = document.getElementById('sidebarOverlay');
        const closeSidebarBtn = document.getElementById('closeSidebarBtn');
        const sidebarLogo = document.getElementById('sidebarLogo');
        const body = document.body;

        // সাইডবার ওপেন করা
        if(sidebarToggle) {
            sidebarToggle.addEventListener('click', function(e) {
                e.preventDefault();
                userSidebar.classList.add('show');
                sidebarOverlay.classList.add('show');
            });
        }

        // সাইডবার ক্লোজ করা
        function closeSidebar() {
            userSidebar.classList.remove('show');
            sidebarOverlay.classList.remove('show');
        }

        if(closeSidebarBtn) closeSidebarBtn.addEventListener('click', closeSidebar);
        if(sidebarOverlay) sidebarOverlay.addEventListener('click', closeSidebar);

        // ডার্ক মোডের সাথে সাইডবারের লোগো চেঞ্জ করা (হেডারের সাথে সিঙ্ক)
        function updateSidebarLogo() {
            if (body.classList.contains('dark-mode')) {
                sidebarLogo.src = '../assets/images/logo-light.png';
            } else {
                sidebarLogo.src = '../assets/images/logo-dark.png';
            }
        }
        
        // প্রথমবার লোড হওয়ার সময় চেক করা
        updateSidebarLogo();

        // ডার্ক মোড বাটনে ক্লিক করলে সাইডবার লোগোও চেঞ্জ হবে
        const darkModeToggle = document.getElementById('darkModeToggle');
        if(darkModeToggle) {
            darkModeToggle.addEventListener('click', function() {
                setTimeout(updateSidebarLogo, 50); // একটু ডিলে (Delay) দিয়ে চেক করা যাতে বডির ক্লাস আপডেট হয়ে যায়
            });
        }
    });
</script>