<?php

if (session_status() === PHP_SESSION_NONE) { session_start(); }

$site_name = $settings['site_name'] ?? 'Online Server';
$user_id = $_SESSION['user_id'] ?? null;
$user_name = "Guest";
$user_balance = "0.00";

if (!isset($settings)) {
    $settings = [];
    try {
        $stmt = $pdo->query("SELECT setting_key, setting_value FROM settings");
        while ($row = $stmt->fetch(PDO::FETCH_ASSOC)) {
            $settings[$row['setting_key']] = $row['setting_value'];
        }
    } catch (PDOException $e) {
        error_log("Settings loading error: " . $e->getMessage());
    }
}

if ($user_id) {
    $stmt = $pdo->prepare("SELECT name, balance FROM users WHERE id = ?");
    $stmt->execute([$user_id]);
    $userData = $stmt->fetch();
    if ($userData) {
        $user_name = htmlspecialchars($userData['name']);
        $user_balance = number_format($userData['balance'], 2);
    }
}

/** * সিস্টেম আপডেট: 
 * এখানে ORDER BY sort_order ASC যোগ করা হয়েছে যাতে এডমিন প্যানেলের সিরিয়াল অনুযায়ী শো করে।
 */
$services_for_nav = $pdo->query("SELECT id, name FROM services WHERE is_active=1 ORDER BY sort_order ASC, id ASC")->fetchAll();

$current_page = basename($_SERVER['PHP_SELF']);
$current_service_id = $_GET['service_id'] ?? null;

$top_notice = $settings['top_bar_notice'] ?? '';
$show_notice = !empty(trim($top_notice));
?>

<!DOCTYPE html>
<html lang="bn">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title><?php echo htmlspecialchars($site_name); ?> | বেষ্ট সেবা</title>
    
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css2?family=Hind+Siliguri:wght@400;500;600;700&family=Inter:wght@400;600&display=swap" rel="stylesheet">
    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css" rel="stylesheet">
    
    <style>
    :root {
        --primary: #6C3FAA;
        --primary-dark: #4B2A7A;
        --accent: #FF9F43;
        --sidebar-width: 280px;
        --topbar-height: 70px;
        --text-light: #f8f9fa;
        --bg-main: #F5F0FF;
        --card-bg: #FFFFFF;
        --border: #E2DEF0;
        --shadow-sm: 0 4px 15px rgba(108, 63, 170, 0.08);
        --shadow-md: 0 8px 25px rgba(108, 63, 170, 0.12);
        --shadow-lg: 0 12px 40px rgba(108, 63, 170, 0.2);
        --transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
    }

    body {
        background-color: var(--bg-main);
        font-family: 'Hind Siliguri', sans-serif;
        margin: 0;
        overflow-x: hidden;
        background: linear-gradient(135deg, #F5F0FF 0%, #EDE4FB 100%);
        min-height: 100vh;
    }

    /* Top Accent Bar */
    .flag-top-bar {
        height: 4px;
        background: linear-gradient(90deg, var(--primary), var(--accent), var(--primary-dark));
        position: fixed;
        top: 0;
        width: 100%;
        z-index: 2000;
    }

    /* Notice Bar */
    .gov-notice {
        background: linear-gradient(135deg, var(--primary), var(--primary-dark));
        border-bottom: 1px solid rgba(255,255,255,0.1);
        color: #fff;
        padding: 10px 0;
        position: fixed;
        top: 4px;
        width: 100%;
        z-index: 1060;
        font-size: 0.85rem;
        font-weight: 500;
        box-shadow: 0 4px 10px rgba(0,0,0,0.1);
    }
    .gov-notice marquee {
        padding: 0 20px;
    }
    .gov-notice i {
        color: var(--accent);
    }

    /* Sidebar */
    .sidebar {
        width: var(--sidebar-width);
        height: 100vh;
        position: fixed;
        left: 0;
        top: 0;
        background: linear-gradient(180deg, #5A3A8A 0%, #402568 100%);
        color: white;
        z-index: 1050;
        transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        padding-top: 70px;
        box-shadow: 5px 0 25px rgba(0,0,0,0.3);
        overflow: hidden;
    }
    .sidebar::before {
        content: '';
        position: absolute;
        top: -50px;
        right: -50px;
        width: 150px;
        height: 150px;
        background: rgba(255,255,255,0.03);
        border-radius: 50%;
    }

    .sidebar-brand {
        position: absolute;
        top: 20px;
        left: 0;
        width: 100%;
        padding: 0 25px 15px;
        border-bottom: 1px solid rgba(255,255,255,0.1);
    }
    .brand-info div:first-child {
        font-size: 18px;
        font-weight: 800;
        color: #fff;
        letter-spacing: 0.5px;
    }
    .brand-info div:last-child {
        font-size: 11px;
        color: var(--accent);
        font-weight: 600;
        text-transform: uppercase;
    }

    .sidebar-nav {
        list-style: none;
        padding: 15px;
        height: calc(100vh - 180px);
        overflow-y: auto;
    }
    .sidebar-nav::-webkit-scrollbar { width: 4px; }
    .sidebar-nav::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.2); border-radius: 10px; }

    .nav-link {
        display: flex;
        align-items: center;
        padding: 12px 18px;
        color: rgba(255,255,255,0.8);
        border-radius: 12px;
        margin-bottom: 5px;
        font-weight: 500;
        transition: var(--transition);
        text-decoration: none;
        background: transparent;
    }
    .nav-link i { 
        margin-right: 12px; 
        width: 24px; 
        text-align: center; 
        color: var(--accent); 
        font-size: 1.1rem;
    }
    .nav-link:hover, .nav-link.active {
        background: rgba(255,255,255,0.15);
        color: #fff;
        transform: translateX(5px);
        box-shadow: 0 4px 10px rgba(0,0,0,0.2);
    }
    .nav-link.active {
        background: var(--accent);
        color: var(--primary-dark);
        font-weight: 700;
    }
    .nav-link.active i { color: var(--primary-dark); }

    .nav-section {
        font-size: 11px;
        text-transform: uppercase;
        color: rgba(255,255,255,0.5);
        padding: 20px 18px 8px;
        letter-spacing: 1.5px;
        font-weight: 700;
    }

    /* Topbar */
    .topbar {
        height: var(--topbar-height);
        position: fixed;
        top: <?php echo $show_notice ? '48px' : '4px'; ?>;
        left: var(--sidebar-width);
        right: 0;
        background: rgba(255, 255, 255, 0.9);
        backdrop-filter: blur(15px);
        border-bottom: 1px solid var(--border);
        z-index: 1000;
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 0 30px;
        transition: left 0.3s ease;
        box-shadow: var(--shadow-sm);
    }

    .balance-card {
        background: linear-gradient(135deg, #7B4DC7, #542E90);
        color: white;
        padding: 8px 18px;
        border-radius: 12px;
        font-weight: 700;
        font-size: 0.95rem;
        display: flex;
        align-items: center;
        gap: 10px;
        box-shadow: 0 4px 15px rgba(108,63,170,0.3);
    }
    .balance-card i {
        color: var(--accent);
    }

    .user-info {
        text-align: right;
    }
    .user-info .fw-bold {
        color: var(--primary-dark);
    }

    /* Main Content */
    .main-content {
        margin-left: var(--sidebar-width);
        padding: calc(var(--topbar-height) + <?php echo $show_notice ? '80px' : '40px'; ?>) 25px 30px;
        transition: margin-left 0.3s ease;
    }

    /* Mobile */
    #mobileToggle {
        display: none;
        font-size: 1.4rem;
        color: var(--primary);
        cursor: pointer;
    }

    @media (max-width: 992px) {
        .sidebar { transform: translateX(-100%); }
        .topbar { left: 0; }
        .main-content { margin-left: 0; }
        body.sidebar-open .sidebar { transform: translateX(0); }
        #mobileToggle { display: block; margin-right: 15px; }
        body.sidebar-open::after {
            content: '';
            position: fixed;
            inset: 0;
            background: rgba(0,0,0,0.6);
            z-index: 1040;
        }
    }

    .whatsapp-support {
        margin: 20px 15px;
        padding: 15px;
        background: rgba(255,255,255,0.05);
        border-radius: 15px;
        text-align: center;
        border: 1px solid rgba(255,255,255,0.1);
    }
    .whatsapp-support .btn-light {
        background: white;
        color: var(--primary-dark);
        font-weight: 700;
        border-radius: 50px;
        transition: var(--transition);
    }
    .whatsapp-support .btn-light:hover {
        background: var(--accent);
        color: var(--primary-dark);
    }
    </style>
</head>
<body class="<?php echo $show_notice ? 'has-notice' : ''; ?>">

    <div class="flag-top-bar"></div>

    <?php if ($show_notice): ?>
    <div class="gov-notice">
        <div class="container-fluid">
            <marquee onmouseover="this.stop();" onmouseout="this.start();">
                <i class="fas fa-bullhorn"></i> <?php echo htmlspecialchars($top_notice); ?>
            </marquee>
        </div>
    </div>
    <?php endif; ?>

    <nav class="sidebar" id="sidebar">
        <div class="sidebar-brand">
            <div class="brand-info">
                <div>ই-সেবা পোর্টাল</div>
                <div><?php echo htmlspecialchars($site_name); ?></div>
            </div>
        </div>

        <ul class="sidebar-nav">
            <li class="nav-section">প্রধান মেনু</li>
            <li><a href="index.php" class="nav-link <?php echo $current_page == 'index.php' ? 'active' : ''; ?>"><i class="fas fa-grid-2"></i> ড্যাশবোর্ড</a></li>
            
            <li class="nav-section">মেক সার্ভিস</li>
            <li><a href="sign_old_nid.php" class="nav-link <?php echo $current_page == 'sign_old_nid.php' ? 'active' : ''; ?>"><i class="fas fa-file-signature"></i> SIGN TO NID (অটো)</a></li>
            <li><a href="smart.php" class="nav-link <?php echo $current_page == 'smart.php' ? 'active' : ''; ?>"><i class="fas fa-file-signature"></i> SIGN TO SMART (অটো)</a></li>

            <li class="nav-section">আটো সার্ভিস</li>
            <li><a href="server_copy.php" class="nav-link <?php echo $current_page == 'server_copy.php' ? 'active' : ''; ?>"><i class="fas fa-id-card"></i> সার্ভার কপি (অটো)</a></li>

            <li><a href="order_history.php" class="nav-link <?php echo $current_page == 'order_history.php' ? 'active' : ''; ?>"><i class="fas fa-history"></i> অর্ডার হিস্টরি</a></li>
            <li><a href="recharge.php" class="nav-link <?php echo $current_page == 'recharge.php' ? 'active' : ''; ?>"><i class="fas fa-wallet"></i> রিচার্জ করুন</a></li>

            <li class="nav-section">ডিজিটাল সেবাসমূহ</li>
            <?php foreach($services_for_nav as $nav_service): ?>
            <li>
                <a href="subcategories.php?service_id=<?php echo $nav_service['id']; ?>" class="nav-link <?php echo ($current_service_id == $nav_service['id']) ? 'active' : ''; ?>">
                    <i class="fas fa-layer-group"></i> <span><?php echo htmlspecialchars($nav_service['name']); ?></span>
                </a>
            </li>
            <?php endforeach; ?>

            <li class="nav-section">ইউজার প্রোফাইল</li>
            <li><a href="profile.php" class="nav-link <?php echo $current_page == 'profile.php' ? 'active' : ''; ?>"><i class="fas fa-user-cog"></i> প্রোফাইল সেটিংস</a></li>
            <li><a href="logout.php" class="nav-link text-warning"><i class="fas fa-power-off"></i> লগ আউট</a></li>
        </ul>

        <?php if(!empty($settings['support_group_link'])): ?>
        <div class="whatsapp-support">
            <div class="small mb-2" style="color: rgba(255,255,255,0.6);">সহায়তার প্রয়োজন?</div>
            <a href="<?php echo htmlspecialchars($settings['support_group_link']); ?>" target="_blank" class="btn btn-sm btn-light w-100 rounded-pill fw-bold">
                <i class="fab fa-whatsapp me-1 text-success"></i> হোয়াটসঅ্যাপ 
            </a>
        </div>
        <?php endif; ?>
    </nav>

    <header class="topbar">
        <div class="d-flex align-items-center">
            <i class="fas fa-bars-staggered" id="mobileToggle"></i>
            <h6 class="mb-0 fw-bold d-none d-md-block" style="color: var(--primary-dark); letter-spacing: -0.2px;">সবাই গোপনীয়তার সাথে কাজ করবেন।</h6>
        </div>
        
        <div class="d-flex align-items-center gap-3">
            <div class="balance-card">
                <i class="fas fa-wallet"></i>
                <span>৳ <?php echo $user_balance; ?></span>
            </div>
            <div class="user-info d-none d-sm-block">
                <div class="fw-bold small"><?php echo $user_name; ?></div>
                <div style="font-size: 10px; color: #94a3b8; font-weight: 600; text-transform: uppercase;">অনলাইন ইউজার</div>
            </div>
        </div>
    </header>

    <main class="main-content">
        
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
<script>
    $(document).ready(function() {
        // Mobile Toggle
        $('#mobileToggle').on('click', function() {
            $('body').toggleClass('sidebar-open');
        });

        // Close sidebar when clicking outside
        $(document).on('click', function(e) {
            if (window.innerWidth <= 992) {
                if (!$(e.target).closest('#sidebar').length && !$(e.target).closest('#mobileToggle').length) {
                    $('body').removeClass('sidebar-open');
                }
            }
        });
    });
</script>
</body>
</html>