<?php
session_start();
require_once '../connection.php';

// Check if admin is logged in
if (!isset($_SESSION['admin_id'])) {
    header('Location: ../admin-login.php');
    exit();
}

// Fetch admin data from admin_table
$admin_id = $_SESSION['admin_id'];
$query = "SELECT * FROM admin_table WHERE id = ?";
$stmt = $conn->prepare($query);
$stmt->bind_param("i", $admin_id);
$stmt->execute();
$result = $stmt->get_result();

if ($result->num_rows === 0) {
    session_destroy();
    header('Location: ../admin-login.php');
    exit();
}

$admin = $result->fetch_assoc();
$stmt->close();

// Fetch statistics from users table
$stats = [];

// Total users
$query = "SELECT COUNT(*) as total_users FROM users";
$result = $conn->query($query);
$stats['total_users'] = $result ? $result->fetch_assoc()['total_users'] : 0;

// Active users (based on account_status)
$query = "SELECT COUNT(*) as active_users FROM users WHERE account_status = 'active'";
$result = $conn->query($query);
$stats['active_users'] = $result ? $result->fetch_assoc()['active_users'] : 0;

// Pending verification (email not verified)
$query = "SELECT COUNT(*) as pending_verification FROM users WHERE email_verified = 0";
$result = $conn->query($query);
$stats['pending_verification'] = $result ? $result->fetch_assoc()['pending_verification'] : 0;

// Suspended accounts
$query = "SELECT COUNT(*) as suspended_users FROM users WHERE account_status = 'suspended'";
$result = $conn->query($query);
$stats['suspended_users'] = $result ? $result->fetch_assoc()['suspended_users'] : 0;

// New users today
$query = "SELECT COUNT(*) as new_users_today FROM users WHERE DATE(created_at) = CURDATE()";
$result = $conn->query($query);
$stats['new_users_today'] = $result ? $result->fetch_assoc()['new_users_today'] : 0;

// Recent users
$query = "SELECT id, username, full_name, email, email_verified, account_status, created_at 
          FROM users 
          ORDER BY created_at DESC 
          LIMIT 5";
$recent_users_result = $conn->query($query);
$recent_users = [];
if ($recent_users_result) {
    while ($row = $recent_users_result->fetch_assoc()) {
        $recent_users[] = $row;
    }
}

// Top countries
$query = "SELECT country, COUNT(*) as user_count 
          FROM users 
          WHERE country IS NOT NULL AND country != '' 
          GROUP BY country 
          ORDER BY user_count DESC 
          LIMIT 5";
$top_countries_result = $conn->query($query);
$top_countries = [];
if ($top_countries_result) {
    while ($row = $top_countries_result->fetch_assoc()) {
        $top_countries[] = $row;
    }
}
?>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Admin Dashboard - Unify Grant</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap" rel="stylesheet">
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    colors: {
                        primary: {
                            50: '#eff6ff',
                            100: '#dbeafe',
                            200: '#bfdbfe',
                            300: '#93c5fd',
                            400: '#60a5fa',
                            500: '#3b82f6',
                            600: '#2563eb',
                            700: '#1d4ed8',
                            800: '#1e40af',
                            900: '#1e3a8a',
                        }
                    },
                    fontFamily: {
                        'inter': ['Inter', 'system-ui', 'sans-serif'],
                    }
                }
            }
        }
    </script>
    <style>
        body {
            font-family: 'Inter', sans-serif;
        }
        
        .sidebar {
            transition: all 0.3s ease;
        }
        
        .sidebar.collapsed {
            width: 70px;
        }
        
        .sidebar.collapsed .sidebar-text {
            display: none;
        }
        
        .sidebar.collapsed .logo-text {
            display: none;
        }
        
        .main-content {
            transition: all 0.3s ease;
        }
        
        .stat-card:hover {
            transform: translateY(-5px);
            box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
        }
        
        .notification-badge {
            animation: pulse 2s infinite;
        }
        
        @keyframes pulse {
            0% {
                box-shadow: 0 0 0 0 rgba(59, 130, 246, 0.5);
            }
            70% {
                box-shadow: 0 0 0 10px rgba(59, 130, 246, 0);
            }
            100% {
                box-shadow: 0 0 0 0 rgba(59, 130, 246, 0);
            }
        }
        
        
        /* Mobile Responsive Styles */
@media (max-width: 1024px) {
    /* Sidebar - Hidden by default on mobile */
    .sidebar {
        transform: translateX(-100%);
        width: 280px;
        box-shadow: 0 0 20px rgba(0, 0, 0, 0.1);
    }

    .sidebar.active {
        transform: translateX(0);
    }

    /* Main content - full width on mobile */
    .main-content {
        margin-left: 0 !important;
        width: 100%;
    }

    /* Mobile header with hamburger menu */
    .main-content::before {
        content: '';
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        height: 70px;
        background: white;
        z-index: 40;
        box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
        display: block;
    }

    /* Adjust header content for mobile */
    header.bg-white {
        position: relative;
        z-index: 45;
        padding-top: 20px;
        padding-bottom: 20px;
        margin-top: 70px;
        border-bottom: 1px solid #e5e7eb;
    }

    /* Hamburger menu button */
    .hamburger-menu {
        position: fixed;
        top: 18px;
        left: 20px;
        z-index: 100;
        background: white;
        border: none;
        width: 40px;
        height: 40px;
        border-radius: 8px;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        gap: 4px;
        cursor: pointer;
        box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
        transition: all 0.3s ease;
    }

    .hamburger-menu span {
        display: block;
        width: 20px;
        height: 2px;
        background: #4b5563;
        transition: all 0.3s ease;
    }

    .hamburger-menu.active span:nth-child(1) {
        transform: rotate(45deg) translate(5px, 5px);
    }

    .hamburger-menu.active span:nth-child(2) {
        opacity: 0;
    }

    .hamburger-menu.active span:nth-child(3) {
        transform: rotate(-45deg) translate(7px, -6px);
    }

    /* Overlay when sidebar is open */
    .sidebar-overlay {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: rgba(0, 0, 0, 0.5);
        z-index: 45;
        opacity: 0;
        visibility: hidden;
        transition: all 0.3s ease;
    }

    .sidebar-overlay.active {
        opacity: 1;
        visibility: visible;
    }

    /* Adjust admin profile for mobile */
    .absolute.bottom-0 {
        position: relative;
        margin-top: auto;
    }

    /* Adjust stats grid for mobile */
    .grid.grid-cols-1.md\\:grid-cols-2.lg\\:grid-cols-4 {
        grid-template-columns: 1fr;
        gap: 1rem;
    }

    /* Adjust dashboard content layout */
    .grid.grid-cols-1.lg\\:grid-cols-3 {
        grid-template-columns: 1fr;
    }

    /* Adjust header buttons for mobile */
    header .flex.items-center.space-x-4 {
        flex-direction: column;
        align-items: flex-start;
        gap: 1rem;
        margin-top: 1rem;
    }

    .relative:first-child {
        align-self: flex-end;
        position: absolute;
        top: -60px;
        right: 20px;
    }

    /* Make tables scrollable on mobile */
    .overflow-x-auto {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    /* Adjust table font sizes */
    table .text-sm {
        font-size: 0.875rem;
    }

    /* Adjust card padding for mobile */
    .stat-card,
    .bg-white.rounded-xl {
        padding: 1rem;
    }

    /* Adjust notification dropdown for mobile */
    #notificationsDropdown {
        position: fixed;
        top: 80px;
        right: 20px;
        left: 20px;
        width: auto;
        max-height: 60vh;
    }

    /* Adjust actions dropdown for mobile */
    #actionsDropdown {
        position: fixed;
        top: 140px;
        right: 20px;
        left: auto;
        width: 200px;
    }

    /* Adjust quick links grid */
    .grid.grid-cols-2.gap-3 {
        grid-template-columns: repeat(2, 1fr);
        gap: 0.75rem;
    }

    /* Adjust logo section for mobile sidebar */
    .p-6.border-b {
        padding: 1.5rem;
    }
}

/* Tablet adjustments */
@media (min-width: 768px) and (max-width: 1024px) {
    .grid.grid-cols-1.md\\:grid-cols-2.lg\\:grid-cols-4 {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .sidebar {
        width: 300px;
    }
}

/* Ensure sidebar stays visible on desktop */
@media (min-width: 1025px) {
    .hamburger-menu,
    .sidebar-overlay {
        display: none !important;
    }
    
    .sidebar {
        transform: translateX(0) !important;
    }
}

/* Fix for sidebar text visibility */
.sidebar.collapsed .sidebar-text,
.sidebar.collapsed .logo-text {
    display: none !important;
}

/* Smooth transitions */
.sidebar,
.main-content,
.hamburger-menu,
.sidebar-overlay {
    transition: all 0.3s ease;
}
    </style>
    
    
</head>
<body class="bg-gray-50 font-inter">

<?php include("nav.php"); ?>

<div class="sidebar-overlay"></div>


    <!-- Main Content -->
    <div class="main-content ml-64">
        <button class="hamburger-menu">
    <span></span>
    <span></span>
    <span></span>
</button>
        <!-- Header -->
        <header class="bg-white shadow-sm border-b border-gray-200 px-8 py-4">
            <div class="flex items-center justify-between">
                <div>
                    <h2 class="text-2xl font-bold text-gray-800">Dashboard</h2>
                    <p class="text-gray-600">Welcome back, Administrator!</p>
                </div>
                
                <div class="flex items-center space-x-4">
                    <!-- Notifications -->
                    <div class="relative">
                        <button onclick="toggleNotifications()" class="relative p-2 text-gray-600 hover:text-primary-600 transition">
                            <i class="fas fa-bell text-xl"></i>
                            <?php if ($stats['pending_verification'] > 0): ?>
                            <span class="absolute -top-1 -right-1 w-5 h-5 bg-yellow-500 text-white text-xs rounded-full flex items-center justify-center notification-badge">
                                <?php echo min($stats['pending_verification'], 9); ?>
                            </span>
                            <?php endif; ?>
                        </button>
                        
                        <!-- Notifications Dropdown -->
                        <div id="notificationsDropdown" class="hidden absolute right-0 mt-2 w-80 bg-white rounded-lg shadow-lg border border-gray-200 z-50">
                            <div class="p-4 border-b border-gray-200">
                                <h3 class="font-semibold text-gray-800">Notifications</h3>
                            </div>
                            <div class="max-h-96 overflow-y-auto">
                                <?php if ($stats['pending_verification'] > 0): ?>
                                <a href="users.php?status=pending" class="block px-4 py-3 hover:bg-gray-50 border-b border-gray-100">
                                    <div class="flex items-start">
                                        <div class="flex-shrink-0">
                                            <div class="w-8 h-8 bg-yellow-100 rounded-full flex items-center justify-center">
                                                <i class="fas fa-user-clock text-yellow-600 text-sm"></i>
                                            </div>
                                        </div>
                                        <div class="ml-3">
                                            <p class="text-sm font-medium text-gray-800">
                                                <?php echo $stats['pending_verification']; ?> pending verification
                                            </p>
                                            <p class="text-xs text-gray-500 mt-1">Email verification required</p>
                                        </div>
                                    </div>
                                </a>
                                <?php endif; ?>
                                
                                <?php if ($stats['new_users_today'] > 0): ?>
                                <a href="users.php" class="block px-4 py-3 hover:bg-gray-50 border-b border-gray-100">
                                    <div class="flex items-start">
                                        <div class="flex-shrink-0">
                                            <div class="w-8 h-8 bg-green-100 rounded-full flex items-center justify-center">
                                                <i class="fas fa-user-plus text-green-600 text-sm"></i>
                                            </div>
                                        </div>
                                        <div class="ml-3">
                                            <p class="text-sm font-medium text-gray-800">
                                                <?php echo $stats['new_users_today']; ?> new user<?php echo $stats['new_users_today'] > 1 ? 's' : ''; ?> today
                                            </p>
                                            <p class="text-xs text-gray-500 mt-1">Registered today</p>
                                        </div>
                                    </div>
                                </a>
                                <?php endif; ?>
                                
                                <?php if ($stats['suspended_users'] > 0): ?>
                                <a href="users.php?status=suspended" class="block px-4 py-3 hover:bg-gray-50">
                                    <div class="flex items-start">
                                        <div class="flex-shrink-0">
                                            <div class="w-8 h-8 bg-red-100 rounded-full flex items-center justify-center">
                                                <i class="fas fa-user-slash text-red-600 text-sm"></i>
                                            </div>
                                        </div>
                                        <div class="ml-3">
                                            <p class="text-sm font-medium text-gray-800">
                                                <?php echo $stats['suspended_users']; ?> suspended user<?php echo $stats['suspended_users'] > 1 ? 's' : ''; ?>
                                            </p>
                                            <p class="text-xs text-gray-500 mt-1">Requires attention</p>
                                        </div>
                                    </div>
                                </a>
                                <?php endif; ?>
                            </div>
                            <div class="p-4 border-t border-gray-200">
                                <a href="notifications.php" class="text-primary-600 hover:text-primary-800 text-sm font-medium">
                                    View all notifications
                                </a>
                            </div>
                        </div>
                    </div>
                    
                    <!-- Quick Actions -->
                    <div class="relative">
                        <button onclick="toggleActions()" class="flex items-center space-x-2 px-4 py-2 bg-primary-600 text-white rounded-lg hover:bg-primary-700 transition">
                            <i class="fas fa-plus"></i>
                            <span>Quick Actions</span>
                            <i class="fas fa-chevron-down text-xs"></i>
                        </button>
                        
                        <!-- Actions Dropdown -->
                        <div id="actionsDropdown" class="hidden absolute right-0 mt-2 w-48 bg-white rounded-lg shadow-lg border border-gray-200 z-50">
                            <div class="py-1">
                                <a href="users.php?action=add" class="block px-4 py-2 text-gray-700 hover:bg-gray-100">
                                    <i class="fas fa-user-plus mr-2 text-gray-400"></i>
                                    Add New User
                                </a>
                                <a href="users.php?action=import" class="block px-4 py-2 text-gray-700 hover:bg-gray-100">
                                    <i class="fas fa-file-import mr-2 text-gray-400"></i>
                                    Import Users
                                </a>
                                <a href="analytics.php?generate=new" class="block px-4 py-2 text-gray-700 hover:bg-gray-100">
                                    <i class="fas fa-chart-line mr-2 text-gray-400"></i>
                                    Generate Report
                                </a>
                                <a href="admins.php?action=add" class="block px-4 py-2 text-gray-700 hover:bg-gray-100">
                                    <i class="fas fa-user-shield mr-2 text-gray-400"></i>
                                    Add Admin User
                                </a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </header>

        <!-- Dashboard Content -->
        <main class="p-8">
            <!-- Stats Grid -->
            <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mb-8">
                <!-- Total Users Card -->
                <div class="stat-card bg-white rounded-xl shadow-sm border border-gray-200 p-6 hover:shadow-lg transition">
                    <div class="flex items-center justify-between">
                        <div>
                            <p class="text-sm font-medium text-gray-600">Total Users</p>
                            <p class="text-3xl font-bold text-gray-800 mt-2"><?php echo number_format($stats['total_users']); ?></p>
                        </div>
                        <div class="w-12 h-12 bg-blue-100 rounded-lg flex items-center justify-center">
                            <i class="fas fa-users text-blue-600 text-xl"></i>
                        </div>
                    </div>
                    <div class="mt-4 flex items-center text-sm">
                        <span class="text-green-600 font-medium">
                            <i class="fas fa-arrow-up mr-1"></i>
                            <?php echo $stats['new_users_today']; ?> today
                        </span>
                        <a href="users.php" class="ml-auto text-primary-600 hover:text-primary-800 font-medium">
                            View all →
                        </a>
                    </div>
                </div>

                <!-- Active Users Card -->
                <div class="stat-card bg-white rounded-xl shadow-sm border border-gray-200 p-6 hover:shadow-lg transition">
                    <div class="flex items-center justify-between">
                        <div>
                            <p class="text-sm font-medium text-gray-600">Active Users</p>
                            <p class="text-3xl font-bold text-gray-800 mt-2"><?php echo number_format($stats['active_users']); ?></p>
                        </div>
                        <div class="w-12 h-12 bg-green-100 rounded-lg flex items-center justify-center">
                            <i class="fas fa-user-check text-green-600 text-xl"></i>
                        </div>
                    </div>
                    <div class="mt-4">
                        <div class="flex items-center justify-between text-sm">
                            <span class="text-gray-500">
                                <?php echo $stats['total_users'] > 0 ? round(($stats['active_users'] / $stats['total_users']) * 100, 1) : 0; ?>% active
                            </span>
                            <a href="users.php?status=active" class="text-primary-600 hover:text-primary-800 font-medium">
                                Details →
                            </a>
                        </div>
                    </div>
                </div>

                <!-- Pending Verification Card -->
                <div class="stat-card bg-white rounded-xl shadow-sm border border-gray-200 p-6 hover:shadow-lg transition">
                    <div class="flex items-center justify-between">
                        <div>
                            <p class="text-sm font-medium text-gray-600">Pending Verification</p>
                            <p class="text-3xl font-bold text-gray-800 mt-2"><?php echo number_format($stats['pending_verification']); ?></p>
                        </div>
                        <div class="w-12 h-12 bg-yellow-100 rounded-lg flex items-center justify-center">
                            <i class="fas fa-user-clock text-yellow-600 text-xl"></i>
                        </div>
                    </div>
                    <div class="mt-4">
                        <div class="flex items-center justify-between text-sm">
                            <?php if ($stats['pending_verification'] > 0): ?>
                            <span class="text-yellow-600 font-medium">
                                <i class="fas fa-exclamation-circle mr-1"></i>
                                Requires attention
                            </span>
                            <?php else: ?>
                            <span class="text-green-600 font-medium">
                                <i class="fas fa-check-circle mr-1"></i>
                                All verified
                            </span>
                            <?php endif; ?>
                            <a href="users.php?status=pending" class="text-primary-600 hover:text-primary-800 font-medium">
                                Review →
                            </a>
                        </div>
                    </div>
                </div>

                <!-- Suspended Users Card -->
                <div class="stat-card bg-white rounded-xl shadow-sm border border-gray-200 p-6 hover:shadow-lg transition">
                    <div class="flex items-center justify-between">
                        <div>
                            <p class="text-sm font-medium text-gray-600">Suspended Users</p>
                            <p class="text-3xl font-bold text-gray-800 mt-2"><?php echo number_format($stats['suspended_users']); ?></p>
                        </div>
                        <div class="w-12 h-12 bg-red-100 rounded-lg flex items-center justify-center">
                            <i class="fas fa-user-slash text-red-600 text-xl"></i>
                        </div>
                    </div>
                    <div class="mt-4">
                        <div class="flex items-center justify-between text-sm">
                            <?php if ($stats['suspended_users'] > 0): ?>
                            <span class="text-red-600 font-medium">
                                <i class="fas fa-exclamation-triangle mr-1"></i>
                                Needs review
                            </span>
                            <?php else: ?>
                            <span class="text-green-600 font-medium">
                                <i class="fas fa-check-circle mr-1"></i>
                                All active
                            </span>
                            <?php endif; ?>
                            <a href="users.php?status=suspended" class="text-primary-600 hover:text-primary-800 font-medium">
                                Manage →
                            </a>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Recent Activity & Analytics -->
            <div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
                <!-- Recent Users -->
                <div class="lg:col-span-2 bg-white rounded-xl shadow-sm border border-gray-200 p-6">
                    <div class="flex items-center justify-between mb-6">
                        <h3 class="text-lg font-semibold text-gray-800">Recent Users</h3>
                        <a href="users.php" class="text-primary-600 hover:text-primary-800 text-sm font-medium">
                            View all →
                        </a>
                    </div>
                    
                    <div class="overflow-x-auto">
                        <table class="w-full">
                            <thead>
                                <tr class="text-left text-sm text-gray-500 border-b border-gray-200">
                                    <th class="pb-3 font-medium">User</th>
                                    <th class="pb-3 font-medium">Email</th>
                                    <th class="pb-3 font-medium">Joined</th>
                                    <th class="pb-3 font-medium">Status</th>
                                    <th class="pb-3 font-medium">Actions</th>
                                </tr>
                            </thead>
                            <tbody>
                                <?php if (empty($recent_users)): ?>
                                <tr>
                                    <td colspan="5" class="py-8 text-center text-gray-500">
                                        <i class="fas fa-users text-3xl mb-2 block"></i>
                                        No users found
                                    </td>
                                </tr>
                                <?php else: ?>
                                <?php foreach ($recent_users as $user): ?>
                                <tr class="border-b border-gray-100 hover:bg-gray-50 transition">
                                    <td class="py-4">
                                        <div class="flex items-center">
                                            <div class="w-8 h-8 bg-primary-100 rounded-full flex items-center justify-center mr-3">
                                                <span class="text-primary-800 font-medium text-sm">
                                                    <?php echo isset($user['full_name']) && !empty($user['full_name']) ? strtoupper(substr($user['full_name'], 0, 1)) : 'U'; ?>
                                                </span>
                                            </div>
                                            <div>
                                                <p class="font-medium text-gray-800">
                                                    <?php 
                                                    $name = !empty($user['full_name']) ? htmlspecialchars($user['full_name']) : htmlspecialchars($user['username']);
                                                    echo $name;
                                                    ?>
                                                </p>
                                                <p class="text-sm text-gray-500">@<?php echo htmlspecialchars($user['username']); ?></p>
                                            </div>
                                        </div>
                                    </td>
                                    <td class="py-4">
                                        <p class="text-gray-600"><?php echo htmlspecialchars($user['email']); ?></p>
                                        <?php if (!$user['email_verified']): ?>
                                        <span class="text-xs text-yellow-600">Unverified</span>
                                        <?php endif; ?>
                                    </td>
                                    <td class="py-4">
                                        <p class="text-sm text-gray-600">
                                            <?php echo date('M d, Y', strtotime($user['created_at'])); ?>
                                        </p>
                                    </td>
                                    <td class="py-4">
                                        <?php 
                                        $status_class = '';
                                        $status_text = '';
                                        switch($user['account_status']) {
                                            case 'active':
                                                $status_class = 'bg-green-100 text-green-800';
                                                $status_text = 'Active';
                                                break;
                                            case 'suspended':
                                                $status_class = 'bg-red-100 text-red-800';
                                                $status_text = 'Suspended';
                                                break;
                                            case 'pending':
                                                $status_class = 'bg-yellow-100 text-yellow-800';
                                                $status_text = 'Pending';
                                                break;
                                            default:
                                                $status_class = 'bg-gray-100 text-gray-800';
                                                $status_text = ucfirst($user['account_status']);
                                        }
                                        ?>
                                        <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium <?php echo $status_class; ?>">
                                            <i class="fas fa-circle text-[8px] mr-1"></i>
                                            <?php echo $status_text; ?>
                                        </span>
                                    </td>
                                    <td class="py-4">
                                        <div class="flex space-x-2">
                                            <a href="users.php?view=<?php echo $user['id']; ?>" class="text-primary-600 hover:text-primary-800" title="View">
                                                <i class="fas fa-eye"></i>
                                            </a>
                                            <a href="users.php?edit=<?php echo $user['id']; ?>" class="text-blue-600 hover:text-blue-800" title="Edit">
                                                <i class="fas fa-edit"></i>
                                            </a>
                                            <?php if ($user['account_status'] == 'active'): ?>
                                            <a href="users.php?suspend=<?php echo $user['id']; ?>" class="text-red-600 hover:text-red-800" title="Suspend" onclick="return confirm('Suspend this user?')">
                                                <i class="fas fa-user-slash"></i>
                                            </a>
                                            <?php elseif ($user['account_status'] == 'suspended'): ?>
                                            <a href="users.php?activate=<?php echo $user['id']; ?>" class="text-green-600 hover:text-green-800" title="Activate" onclick="return confirm('Activate this user?')">
                                                <i class="fas fa-user-check"></i>
                                            </a>
                                            <?php endif; ?>
                                        </div>
                                    </td>
                                </tr>
                                <?php endforeach; ?>
                                <?php endif; ?>
                            </tbody>
                        </table>
                    </div>
                </div>

                <!-- Analytics & Quick Stats -->
                <div class="bg-white rounded-xl shadow-sm border border-gray-200 p-6">
                    <h3 class="text-lg font-semibold text-gray-800 mb-6">Analytics</h3>
                    
                    <div class="space-y-6">
                        <!-- User Growth -->
                        <div>
                            <div class="flex items-center justify-between mb-2">
                                <p class="text-sm font-medium text-gray-600">Daily Signups</p>
                                <span class="text-lg font-bold text-gray-800"><?php echo $stats['new_users_today']; ?></span>
                            </div>
                            <div class="w-full bg-gray-200 rounded-full h-2">
                                <div class="bg-primary-600 h-2 rounded-full" style="width: <?php echo min($stats['new_users_today'] * 20, 100); ?>%"></div>
                            </div>
                        </div>
                        
                        <!-- User Distribution -->
                        <div>
                            <p class="text-sm font-medium text-gray-600 mb-3">User Distribution</p>
                            <div class="space-y-2">
                                <div class="flex items-center justify-between">
                                    <span class="text-sm text-gray-600">Active</span>
                                    <span class="text-sm font-medium text-green-600"><?php echo $stats['active_users']; ?> (<?php echo $stats['total_users'] > 0 ? round(($stats['active_users'] / $stats['total_users']) * 100, 1) : 0; ?>%)</span>
                                </div>
                                <div class="flex items-center justify-between">
                                    <span class="text-sm text-gray-600">Pending</span>
                                    <span class="text-sm font-medium text-yellow-600"><?php echo $stats['pending_verification']; ?> (<?php echo $stats['total_users'] > 0 ? round(($stats['pending_verification'] / $stats['total_users']) * 100, 1) : 0; ?>%)</span>
                                </div>
                                <div class="flex items-center justify-between">
                                    <span class="text-sm text-gray-600">Suspended</span>
                                    <span class="text-sm font-medium text-red-600"><?php echo $stats['suspended_users']; ?> (<?php echo $stats['total_users'] > 0 ? round(($stats['suspended_users'] / $stats['total_users']) * 100, 1) : 0; ?>%)</span>
                                </div>
                            </div>
                        </div>
                        
                        <!-- Top Countries -->
                        <?php if (!empty($top_countries)): ?>
                        <div class="pt-6 border-t border-gray-200">
                            <p class="text-sm font-medium text-gray-600 mb-3">Top Countries</p>
                            <div class="space-y-2">
                                <?php foreach ($top_countries as $country): ?>
                                <div class="flex items-center justify-between">
                                    <span class="text-sm text-gray-600"><?php echo htmlspecialchars($country['country']); ?></span>
                                    <span class="text-sm font-medium text-gray-800"><?php echo $country['user_count']; ?></span>
                                </div>
                                <?php endforeach; ?>
                            </div>
                        </div>
                        <?php endif; ?>
                        
                        <!-- Quick Links -->
                        <div class="pt-6 border-t border-gray-200">
                            <p class="text-sm font-medium text-gray-600 mb-4">Quick Actions</p>
                            <div class="grid grid-cols-2 gap-3">
                                <a href="users.php?action=export" class="flex items-center justify-center p-3 bg-blue-50 text-blue-700 rounded-lg hover:bg-blue-100 transition">
                                    <i class="fas fa-download mr-2"></i>
                                    Export Users
                                </a>
                                <a href="analytics.php" class="flex items-center justify-center p-3 bg-purple-50 text-purple-700 rounded-lg hover:bg-purple-100 transition">
                                    <i class="fas fa-chart-pie mr-2"></i>
                                    Analytics
                                </a>
                                <a href="admins.php" class="flex items-center justify-center p-3 bg-emerald-50 text-emerald-700 rounded-lg hover:bg-emerald-100 transition">
                                    <i class="fas fa-user-shield mr-2"></i>
                                    Admins
                                </a>
                                <a href="../account/logout.php" class="flex items-center justify-center p-3 bg-red-50 text-red-700 rounded-lg hover:bg-red-100 transition" onclick="return confirm('Are you sure you want to logout?')">
                                    <i class="fas fa-sign-out-alt mr-2"></i>
                                    Logout
                                </a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </main>
    </div>

    <!-- JavaScript -->
    <script>
        // Toggle sidebar
        function toggleSidebar() {
            const sidebar = document.querySelector('.sidebar');
            const mainContent = document.querySelector('.main-content');
            sidebar.classList.toggle('collapsed');
            mainContent.classList.toggle('ml-64');
            mainContent.classList.toggle('ml-20');
        }

        // Toggle notifications dropdown
        function toggleNotifications() {
            const dropdown = document.getElementById('notificationsDropdown');
            dropdown.classList.toggle('hidden');
            
            // Close other dropdowns
            document.getElementById('actionsDropdown').classList.add('hidden');
        }

        // Toggle actions dropdown
        function toggleActions() {
            const dropdown = document.getElementById('actionsDropdown');
            dropdown.classList.toggle('hidden');
            
            // Close other dropdowns
            document.getElementById('notificationsDropdown').classList.add('hidden');
        }

        // Close dropdowns when clicking outside
        document.addEventListener('click', function(event) {
            if (!event.target.closest('#notificationsDropdown') && !event.target.closest('button[onclick*="toggleNotifications"]')) {
                document.getElementById('notificationsDropdown').classList.add('hidden');
            }
            
            if (!event.target.closest('#actionsDropdown') && !event.target.closest('button[onclick*="toggleActions"]')) {
                document.getElementById('actionsDropdown').classList.add('hidden');
            }
        });

        // Logout function
        function logout() {
            if (confirm('Are you sure you want to logout?')) {
                window.location.href = '../logout.php';
            }
        }

        // Auto-refresh dashboard every 5 minutes
        setTimeout(() => {
            window.location.reload();
        }, 300000); // 5 minutes
        
        
        // Add to your existing JavaScript
const hamburgerMenu = document.querySelector('.hamburger-menu');
const sidebar = document.querySelector('.sidebar');
const overlay = document.querySelector('.sidebar-overlay');

if (hamburgerMenu) {
    hamburgerMenu.addEventListener('click', function() {
        sidebar.classList.toggle('active');
        this.classList.toggle('active');
        overlay.classList.toggle('active');
    });
}

if (overlay) {
    overlay.addEventListener('click', function() {
        sidebar.classList.remove('active');
        hamburgerMenu.classList.remove('active');
        this.classList.remove('active');
    });
}

// Close sidebar when clicking on links (for mobile)
const sidebarLinks = document.querySelectorAll('.sidebar a');
sidebarLinks.forEach(link => {
    link.addEventListener('click', function() {
        if (window.innerWidth <= 1024) {
            sidebar.classList.remove('active');
            hamburgerMenu.classList.remove('active');
            overlay.classList.remove('active');
        }
    });
});
    </script>
</body>
</html>