<?php
include "../include/config.php";

// Optional: check if admin is logged in
if (!isset($_SESSION['email'])) {
    header("location:../index.php");
    exit();
}
 $email = $_SESSION['email'];
    $query = mysqli_query($conn, "SELECT * FROM staff WHERE email='$email' LIMIT 1"); 
    if($query && mysqli_num_rows($query) > 0) {
        $studentRow = mysqli_fetch_array($query);
        $email = htmlspecialchars($studentRow['email']);
        $imagepro = $studentRow['image'] ?? 'default.jpg';
    }
// Fetch counts from database - using only basic tables that exist
$assignments = 0;
$programs = 0;
$courses = 0;
$students = 0;

// Safely fetch counts with error handling
try {
    $result = $conn->query("SELECT COUNT(*) AS total FROM assignments");
    if ($result) $assignments = $result->fetch_assoc()['total'];
} catch (Exception $e) {}

try {
    $result = $conn->query("SELECT COUNT(*) AS total FROM programs");
    if ($result) $programs = $result->fetch_assoc()['total'];
} catch (Exception $e) {}

try {
    $result = $conn->query("SELECT COUNT(*) AS total FROM course");
    if ($result) $courses = $result->fetch_assoc()['total'];
} catch (Exception $e) {}

try {
    $result = $conn->query("SELECT COUNT(*) AS total FROM students");
    if ($result) $students = $result->fetch_assoc()['total'];
} catch (Exception $e) {}

// Get admin info
$admin_email = $_SESSION['email'];
$admin_query = $conn->query("SELECT * FROM admin WHERE email='$admin_email' LIMIT 1");
$admin_data = $admin_query->fetch_assoc();
$admin_name = isset($admin_data['name']) ? $admin_data['name'] : 'Administrator';
$admin_image = isset($admin_data['image']) && !empty($admin_data['image']) ? $admin_data['image'] : 'default_admin.jpg';
?>

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Admin Dashboard</title>

<!-- Fonts & Icons -->
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css">

<style>
:root {
    --primary-light: #4895ef;
    --secondary: #7209b7;
    --success: #4cc9f0;
    --warning: #f72585;
    --info: #3a0ca3;
    --dark: #1a1a2e;
    --light: #ffffff;
    --gray-50: #f8f9fa;
    --gray-100: #e9ecef;
    --gray-200: #dee2e6;
    --gray-600: #6c757d;
    --gray-700: #495057;
    --gray-900: #212529;
    --shadow-sm: 0 2px 8px rgba(0,0,0,0.08);
    --shadow-md: 0 4px 20px rgba(0,0,0,0.12);
    --shadow-lg: 0 8px 30px rgba(0,0,0,0.15);
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'Inter', sans-serif;
    background: linear-gradient(135deg, #f5f7fa 0%, #e4e8f0 100%);
    color: var(--gray-900);
    min-height: 100vh;
    line-height: 1.6;
}

/* Container */
.container {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 24px;
}

/* Header */
.dashboard-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 32px 0;
}

.header-left h1 {
    font-size: 32px;
    font-weight: 800;
    background: linear-gradient(135deg, var(--primary) 0%, var(--secondary) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    margin-bottom: 6px;
}

.header-left p {
    color: var(--gray-600);
    font-size: 15px;
    font-weight: 500;
}

.header-right {
    display: flex;
    align-items: center;
    gap: 24px;
}

.date-card {
    background: white;
    padding: 12px 20px;
    border-radius: 14px;
    font-size: 14px;
    color: var(--gray-700);
    font-weight: 500;
    box-shadow: var(--shadow-sm);
    display: flex;
    align-items: center;
    gap: 10px;
}

.profile-btn {
    background: white;
    border: none;
    padding: 8px 16px;
    border-radius: 14px;
    display: flex;
    align-items: center;
    gap: 12px;
    cursor: pointer;
    box-shadow: var(--shadow-sm);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.profile-btn:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
}

.profile-img {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    object-fit: cover;
    border: 3px solid var(--primary-light);
}

.profile-info h4 {
    font-size: 15px;
    font-weight: 700;
    color: var(--gray-900);
}

.profile-info p {
    font-size: 12px;
    color: var(--gray-600);
    font-weight: 500;
}

/* Stats Grid with Shadows */
.stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 28px;
    margin: 40px 0;
}

.stat-card {
    background: white;
    border-radius: 20px;
    padding: 32px;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: var(--shadow-md);
    position: relative;
    overflow: hidden;
}

.stat-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg, var(--primary) 0%, var(--secondary) 100%);
}

.stat-card:hover {
    transform: translateY(-8px);
    box-shadow: var(--shadow-lg);
}

.stat-card:nth-child(2)::before { background: linear-gradient(90deg, var(--secondary) 0%, #9d4edd 100%); }
.stat-card:nth-child(3)::before { background: linear-gradient(90deg, var(--success) 0%, #4cc9f0 100%); }
.stat-card:nth-child(4)::before { background: linear-gradient(90deg, var(--warning) 0%, #f72585 100%); }

.stat-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 24px;
}

.stat-icon {
    width: 60px;
    height: 60px;
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 26px;
    color: white;
    box-shadow: 0 8px 20px rgba(67, 97, 238, 0.3);
}

.stat-card:nth-child(1) .stat-icon { background: linear-gradient(135deg, var(--primary) 0%, var(--primary-light) 100%); }
.stat-card:nth-child(2) .stat-icon { background: linear-gradient(135deg, var(--secondary) 0%, #9d4edd 100%); }
.stat-card:nth-child(3) .stat-icon { background: linear-gradient(135deg, var(--success) 0%, #4cc9f0 100%); }
.stat-card:nth-child(4) .stat-icon { background: linear-gradient(135deg, var(--warning) 0%, #f72585 100%); }

.stat-trend {
    font-size: 13px;
    font-weight: 700;
    padding: 6px 14px;
    border-radius: 20px;
    background: rgba(76, 201, 240, 0.1);
    color: var(--success);
}

.stat-value {
    font-size: 40px;
    font-weight: 900;
    color: var(--gray-900);
    margin-bottom: 10px;
    line-height: 1;
    letter-spacing: -1px;
}

.stat-title {
    font-size: 17px;
    color: var(--gray-700);
    font-weight: 600;
    margin-bottom: 10px;
}

.stat-subtext {
    font-size: 14px;
    color: var(--gray-600);
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: 500;
}

/* Main Content */
.main-content {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 32px;
    margin: 48px 0;
}

/* Quick Actions with Shadows */
.quick-actions-card {
    background: white;
    border-radius: 20px;
    padding: 36px;
    box-shadow: var(--shadow-md);
    transition: transform 0.3s ease;
}

.quick-actions-card:hover {
    transform: translateY(-4px);
}

.quick-actions-card h3 {
    font-size: 22px;
    font-weight: 800;
    color: var(--gray-900);
    margin-bottom: 28px;
    display: flex;
    align-items: center;
    gap: 12px;
}

.actions-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
}

.action-btn {
    background: white;
    border: 2px solid var(--gray-100);
    border-radius: 16px;
    padding: 28px;
    display: flex;
    align-items: center;
    gap: 18px;
    text-decoration: none;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    cursor: pointer;
    box-shadow: var(--shadow-sm);
}

.action-btn:hover {
    border-color: var(--primary);
    transform: translateY(-4px);
    box-shadow: var(--shadow-md);
    text-decoration: none;
}

.action-icon {
    width: 56px;
    height: 56px;
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    color: white;
    box-shadow: 0 8px 20px rgba(0,0,0,0.15);
}

.action-btn:nth-child(1) .action-icon { background: linear-gradient(135deg, var(--primary) 0%, var(--primary-light) 100%); }
.action-btn:nth-child(2) .action-icon { background: linear-gradient(135deg, var(--secondary) 0%, #9d4edd 100%); }
.action-btn:nth-child(3) .action-icon { background: linear-gradient(135deg, #06d6a0 0%, #4cc9f0 100%); }
.action-btn:nth-child(4) .action-icon { background: linear-gradient(135deg, #ff9e00 0%, #ff5400 100%); }
.action-btn:nth-child(5) .action-icon { background: linear-gradient(135deg, #8338ec 0%, #ff006e 100%); }
.action-btn:nth-child(6) .action-icon { background: linear-gradient(135deg, #3a86ff 0%, #00bbf9 100%); }

.action-content h4 {
    font-size: 17px;
    font-weight: 700;
    color: var(--gray-900);
    margin-bottom: 8px;
}

.action-content p {
    font-size: 14px;
    color: var(--gray-600);
    line-height: 1.5;
}

/* Recent Activity with Shadows */
.activity-card {
    background: white;
    border-radius: 20px;
    padding: 36px;
    box-shadow: var(--shadow-md);
    margin-bottom: 32px;
    transition: transform 0.3s ease;
}

.activity-card:hover {
    transform: translateY(-4px);
}

.activity-card h3 {
    font-size: 22px;
    font-weight: 800;
    color: var(--gray-900);
    margin-bottom: 28px;
    display: flex;
    align-items: center;
    gap: 12px;
}

.activity-list {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.activity-item {
    display: flex;
    align-items: center;
    gap: 18px;
    padding: 20px;
    background: var(--gray-50);
    border-radius: 14px;
    transition: all 0.3s ease;
    box-shadow: var(--shadow-sm);
}

.activity-item:hover {
    background: white;
    transform: translateX(8px);
    box-shadow: var(--shadow-md);
}

.activity-icon {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    color: white;
    flex-shrink: 0;
    box-shadow: 0 6px 16px rgba(0,0,0,0.1);
}

.activity-item:nth-child(1) .activity-icon { background: linear-gradient(135deg, var(--primary) 0%, var(--primary-light) 100%); }
.activity-item:nth-child(2) .activity-icon { background: linear-gradient(135deg, var(--secondary) 0%, #9d4edd 100%); }
.activity-item:nth-child(3) .activity-icon { background: linear-gradient(135deg, #06d6a0 0%, #4cc9f0 100%); }
.activity-item:nth-child(4) .activity-icon { background: linear-gradient(135deg, #ff9e00 0%, #ff5400 100%); }

.activity-content {
    flex: 1;
}

.activity-content h4 {
    font-size: 16px;
    font-weight: 700;
    color: var(--gray-900);
    margin-bottom: 6px;
}

.activity-time {
    font-size: 13px;
    color: var(--gray-600);
    font-weight: 500;
}

.view-more {
    text-align: center;
    margin-top: 24px;
}

.view-more a {
    color: var(--primary);
    text-decoration: none;
    font-size: 15px;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    transition: gap 0.3s ease;
}

.view-more a:hover {
    gap: 14px;
    text-decoration: underline;
}

/* System Info with Shadows */
.system-info-card {
    background: white;
    border-radius: 20px;
    padding: 36px;
    box-shadow: var(--shadow-md);
    transition: transform 0.3s ease;
}

.system-info-card:hover {
    transform: translateY(-4px);
}

.system-info-card h3 {
    font-size: 22px;
    font-weight: 800;
    color: var(--gray-900);
    margin-bottom: 28px;
    display: flex;
    align-items: center;
    gap: 12px;
}

.info-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
}

.info-item {
    background: linear-gradient(135deg, var(--primary) 0%, var(--secondary) 100%);
    border-radius: 14px;
    padding: 24px;
    text-align: center;
    transition: all 0.3s ease;
    box-shadow: 0 8px 20px rgba(67, 97, 238, 0.3);
}

.info-item:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 30px rgba(67, 97, 238, 0.4);
}

.info-item:nth-child(2) { background: linear-gradient(135deg, var(--secondary) 0%, #9d4edd 100%); }
.info-item:nth-child(3) { background: linear-gradient(135deg, #06d6a0 0%, #4cc9f0 100%); }
.info-item:nth-child(4) { background: linear-gradient(135deg, #ff9e00 0%, #ff5400 100%); }

.info-item h4 {
    font-size: 28px;
    font-weight: 800;
    color: white;
    margin-bottom: 8px;
}

.info-item p {
    font-size: 14px;
    color: rgba(255, 255, 255, 0.9);
    font-weight: 500;
}

/* Footer */
.dashboard-footer {
    text-align: center;
    padding: 40px 0;
    border-top: 1px solid var(--gray-200);
    margin-top: 40px;
}

.footer-links {
    display: flex;
    justify-content: center;
    gap: 28px;
    margin-top: 20px;
}

.footer-links a {
    color: var(--gray-600);
    text-decoration: none;
    font-size: 14px;
    font-weight: 500;
    transition: all 0.3s ease;
    padding: 8px 16px;
    border-radius: 8px;
}

.footer-links a:hover {
    color: var(--primary);
    background: var(--gray-100);
}

/* Responsive */
@media (max-width: 1200px) {
    .main-content {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 992px) {
    .actions-grid {
        grid-template-columns: 1fr;
    }
    
    .info-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 768px) {
    .dashboard-header {
        flex-direction: column;
        gap: 24px;
        text-align: center;
    }
    
    .stats-grid {
        grid-template-columns: 1fr;
    }
    
    .footer-links {
        flex-wrap: wrap;
        gap: 16px;
    }
    
    .container {
        padding: 0 16px;
    }
}

@media (max-width: 480px) {
    .header-left h1 {
        font-size: 26px;
    }
    
    .stat-card, .quick-actions-card, .activity-card, .system-info-card {
        padding: 24px;
    }
    
    .action-btn {
        padding: 20px;
    }
    
    .info-item {
        padding: 20px;
    }
}
</style>
</head>
<body>

<div class="container">
    <!-- Header -->
    <div class="dashboard-header">
        <div class="header-left">
            <h1>Admin Dashboard</h1>
            <p>Welcome back, <?php echo htmlspecialchars($admin_name); ?> 👋</p>
        </div>
        <div class="header-right">
            <div class="date-card">
                <i class="far fa-calendar-alt"></i>
                <span id="currentDate"></span>
            </div>
            <button class="profile-btn">
                <img src="<?php echo htmlspecialchars($imagepro); ?>" class="profile-img" alt="Profile">
                <div class="profile-info">
                    <h4><?php echo htmlspecialchars($admin_name); ?></h4>
                    <p>System Admin</p>
                </div>
                <i class="fas fa-chevron-right"></i>
            </button>
        </div>
    </div>

    <!-- Stats Overview -->
    <div class="stats-grid">
        <div class="stat-card">
            <div class="stat-header">
                <div class="stat-icon">
                    <i class="fas fa-graduation-cap"></i>
                </div>
                <div class="stat-trend">
                    <i class="fas fa-arrow-up"></i> 8%
                </div>
            </div>
            <div class="stat-value"><?php echo number_format($programs); ?></div>
            <div class="stat-title">Academic Programs</div>
            <div class="stat-subtext">
                <i class="fas fa-chart-line"></i> Active in system
            </div>
        </div>
        
        <div class="stat-card">
            <div class="stat-header">
                <div class="stat-icon">
                    <i class="fas fa-book-open"></i>
                </div>
                <div class="stat-trend">
                    <i class="fas fa-arrow-up"></i> 12%
                </div>
            </div>
            <div class="stat-value"><?php echo number_format($courses); ?></div>
            <div class="stat-title">Total Courses</div>
            <div class="stat-subtext">
                <i class="fas fa-layer-group"></i> All departments
            </div>
        </div>
        
        <div class="stat-card">
            <div class="stat-header">
                <div class="stat-icon">
                    <i class="fas fa-users"></i>
                </div>
                <div class="stat-trend">
                    <i class="fas fa-arrow-up"></i> 15%
                </div>
            </div>
            <div class="stat-value"><?php echo number_format($students); ?></div>
            <div class="stat-title">Active Students</div>
            <div class="stat-subtext">
                <i class="fas fa-user-check"></i> Enrolled this year
            </div>
        </div>
        
        <div class="stat-card">
            <div class="stat-header">
                <div class="stat-icon">
                    <i class="fas fa-tasks"></i>
                </div>
                <div class="stat-trend">
                    <i class="fas fa-arrow-up"></i> 24%
                </div>
            </div>
            <div class="stat-value"><?php echo number_format($assignments); ?></div>
            <div class="stat-title">Assignments</div>
            <div class="stat-subtext">
                <i class="fas fa-calendar-alt"></i> Posted this month
            </div>
        </div>
    </div>

    
<script>
// Update current date and time
function updateDateTime() {
    const now = new Date();
    const options = { 
        weekday: 'long', 
        year: 'numeric', 
        month: 'long', 
        day: 'numeric'
    };
    const dateString = now.toLocaleDateString('en-US', options);
    document.getElementById('currentDate').textContent = dateString;
}

// Animate elements on load
document.addEventListener('DOMContentLoaded', function() {
    updateDateTime();
    
    // Animate stat cards with staggered effect
    const statCards = document.querySelectorAll('.stat-card');
    statCards.forEach((card, index) => {
        card.style.opacity = '0';
        card.style.transform = 'translateY(40px) scale(0.9)';
        
        setTimeout(() => {
            card.style.transition = 'all 0.6s cubic-bezier(0.34, 1.56, 0.64, 1)';
            card.style.opacity = '1';
            card.style.transform = 'translateY(0) scale(1)';
        }, index * 150);
    });
    
    // Animate action buttons
    const actionBtns = document.querySelectorAll('.action-btn');
    actionBtns.forEach((btn, index) => {
        btn.style.opacity = '0';
        btn.style.transform = 'translateY(20px) rotateX(-10deg)';
        
        setTimeout(() => {
            btn.style.transition = 'all 0.5s cubic-bezier(0.34, 1.56, 0.64, 1)';
            btn.style.opacity = '1';
            btn.style.transform = 'translateY(0) rotateX(0)';
        }, 600 + (index * 100));
    });
    
    // Animate activity items
    const activityItems = document.querySelectorAll('.activity-item');
    activityItems.forEach((item, index) => {
        item.style.opacity = '0';
        item.style.transform = 'translateX(-40px)';
        
        setTimeout(() => {
            item.style.transition = 'all 0.5s cubic-bezier(0.34, 1.56, 0.64, 1)';
            item.style.opacity = '1';
            item.style.transform = 'translateX(0)';
        }, 1000 + (index * 150));
    });
    
    // Animate info items
    const infoItems = document.querySelectorAll('.info-item');
    infoItems.forEach((item, index) => {
        item.style.opacity = '0';
        item.style.transform = 'scale(0.8)';
        
        setTimeout(() => {
            item.style.transition = 'all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1)';
            item.style.opacity = '1';
            item.style.transform = 'scale(1)';
        }, 1200 + (index * 100));
    });
});
</script>

</body>
</html>