<?php
session_start();
require_once 'config/database.php';
require_once 'includes/sidebar_layout.php';

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

$user_role = $_SESSION['user_role'];
$user_name = $_SESSION['user_name'];

// Get dashboard statistics
$stats = [];

// Student statistics
$stmt = $pdo->query("
    SELECT 
        COUNT(*) as total_students,
        SUM(CASE WHEN status = 'active' THEN 1 ELSE 0 END) as active_students,
        SUM(CASE WHEN gender = 'male' THEN 1 ELSE 0 END) as male_students,
        SUM(CASE WHEN gender = 'female' THEN 1 ELSE 0 END) as female_students
    FROM students
");
$stats['students'] = $stmt->fetch();

// Teacher statistics
$stmt = $pdo->query("
    SELECT 
        COUNT(*) as total_teachers,
        SUM(CASE WHEN status = 'active' THEN 1 ELSE 0 END) as active_teachers,
        AVG(experience_years) as avg_experience
    FROM teachers
");
$stats['teachers'] = $stmt->fetch();

// Class statistics
$stmt = $pdo->query("
    SELECT 
        COUNT(*) as total_classes,
        SUM(capacity) as total_capacity
    FROM classes WHERE status = 'active'
");
$stats['classes'] = $stmt->fetch();

// Fee statistics
$stmt = $pdo->query("
    SELECT 
        COUNT(*) as total_fees,
        SUM(amount) as total_amount,
        SUM(paid_amount) as total_paid,
        SUM(CASE WHEN status = 'paid' THEN 1 ELSE 0 END) as paid_fees,
        SUM(CASE WHEN status = 'pending' THEN 1 ELSE 0 END) as pending_fees,
        SUM(CASE WHEN status = 'overdue' THEN 1 ELSE 0 END) as overdue_fees
    FROM fees
");
$stats['fees'] = $stmt->fetch();

// Attendance statistics (last 30 days)
$stmt = $pdo->query("
    SELECT 
        COUNT(*) as total_attendance,
        SUM(CASE WHEN status = 'present' THEN 1 ELSE 0 END) as present_count,
        SUM(CASE WHEN status = 'absent' THEN 1 ELSE 0 END) as absent_count,
        ROUND((SUM(CASE WHEN status = 'present' THEN 1 ELSE 0 END) * 100.0 / COUNT(*)), 2) as attendance_rate
    FROM attendance 
    WHERE date >= DATE_SUB(CURDATE(), INTERVAL 30 DAY)
");
$stats['attendance'] = $stmt->fetch();

// Recent activities
$stmt = $pdo->query("
    SELECT 'student' as type, CONCAT(first_name, ' ', last_name) as name, created_at as date
    FROM students 
    WHERE created_at >= DATE_SUB(NOW(), INTERVAL 7 DAY)
    UNION ALL
    SELECT 'teacher' as type, CONCAT(first_name, ' ', last_name) as name, created_at as date
    FROM teachers 
    WHERE created_at >= DATE_SUB(NOW(), INTERVAL 7 DAY)
    ORDER BY date DESC
    LIMIT 10
");
$recent_activities = $stmt->fetchAll();

// Get recent marks entries
$stmt = $pdo->query("
    SELECT r.*, s.first_name, s.last_name, sub.name as subject_name
    FROM results r
    JOIN students s ON r.student_id = s.id
    JOIN subjects sub ON r.subject_id = sub.id
    ORDER BY r.created_at DESC
    LIMIT 5
");
$recent_marks = $stmt->fetchAll();

// Get upcoming exams
$stmt = $pdo->query("
    SELECT * FROM exams 
    WHERE exam_date >= CURDATE() 
    ORDER BY exam_date ASC 
    LIMIT 5
");
$upcoming_exams = $stmt->fetchAll();
?>

<!DOCTYPE html>
<html lang="bn">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>ড্যাশবোর্ড - স্কুল ম্যানেজমেন্ট সিস্টেম</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet">
    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" rel="stylesheet">
    <link href="assets/css/style.css" rel="stylesheet">
    <link href="assets/css/sidebar.css" rel="stylesheet">
    <style>
        .dashboard-card {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            color: white;
            border-radius: 15px;
            padding: 25px;
            margin-bottom: 20px;
            box-shadow: 0 10px 30px rgba(0,0,0,0.1);
            transition: transform 0.3s ease, box-shadow 0.3s ease;
            position: relative;
            overflow: hidden;
        }
        
        .dashboard-card::before {
            content: '';
            position: absolute;
            top: -50%;
            right: -50%;
            width: 100%;
            height: 100%;
            background: rgba(255,255,255,0.1);
            border-radius: 50%;
            transition: all 0.3s ease;
        }
        
        .dashboard-card:hover {
            transform: translateY(-5px);
            box-shadow: 0 15px 40px rgba(0,0,0,0.2);
        }
        
        .dashboard-card:hover::before {
            top: -30%;
            right: -30%;
        }
        
        .dashboard-card.card-students {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        }
        
        .dashboard-card.card-teachers {
            background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
        }
        
        .dashboard-card.card-classes {
            background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
        }
        
        .dashboard-card.card-attendance {
            background: linear-gradient(135deg, #43e97b 0%, #38f9d7 100%);
        }
        
        .dashboard-card.card-fees {
            background: linear-gradient(135deg, #fa709a 0%, #fee140 100%);
        }
        
        .dashboard-card.card-exams {
            background: linear-gradient(135deg, #a8edea 0%, #fed6e3 100%);
            color: #333;
        }
        
        .card-icon {
            font-size: 3rem;
            opacity: 0.8;
            margin-bottom: 15px;
            position: relative;
            z-index: 2;
        }
        
        .card-number {
            font-size: 2.5rem;
            font-weight: bold;
            margin-bottom: 10px;
            position: relative;
            z-index: 2;
        }
        
        .card-title {
            font-size: 1.1rem;
            opacity: 0.9;
            position: relative;
            z-index: 2;
        }
        
        .card-subtitle {
            font-size: 0.9rem;
            opacity: 0.7;
            margin-top: 5px;
            position: relative;
            z-index: 2;
        }
        
        .activity-item {
            background: white;
            border-radius: 10px;
            padding: 15px;
            margin-bottom: 10px;
            box-shadow: 0 2px 10px rgba(0,0,0,0.05);
            border-left: 4px solid #667eea;
            transition: all 0.3s ease;
        }
        
        .activity-item:hover {
            transform: translateX(5px);
            box-shadow: 0 5px 20px rgba(0,0,0,0.1);
        }
        
        .activity-icon {
            width: 40px;
            height: 40px;
            background: linear-gradient(45deg, #667eea, #764ba2);
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            color: white;
            margin-right: 15px;
        }
        
        .quick-action-btn {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            border: none;
            color: white;
            padding: 15px 25px;
            border-radius: 10px;
            font-weight: 600;
            transition: all 0.3s ease;
            text-decoration: none;
            display: inline-block;
            margin: 5px;
            position: relative;
            overflow: hidden;
        }
        
        .quick-action-btn::before {
            content: '';
            position: absolute;
            top: 0;
            left: -100%;
            width: 100%;
            height: 100%;
            background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent);
            transition: left 0.5s;
        }
        
        .quick-action-btn:hover::before {
            left: 100%;
        }
        
        .quick-action-btn:hover {
            transform: translateY(-2px);
            box-shadow: 0 5px 15px rgba(102, 126, 234, 0.4);
            color: white;
        }
        
        .welcome-section {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            color: white;
            border-radius: 15px;
            padding: 30px;
            margin-bottom: 30px;
            text-align: center;
            position: relative;
            overflow: hidden;
        }
        
        .welcome-section::before {
            content: '';
            position: absolute;
            top: -50%;
            left: -50%;
            width: 200%;
            height: 200%;
            background: radial-gradient(circle, rgba(255,255,255,0.1) 0%, transparent 70%);
            animation: float 6s ease-in-out infinite;
        }
        
        @keyframes float {
            0%, 100% { transform: translateY(0px) rotate(0deg); }
            50% { transform: translateY(-20px) rotate(180deg); }
        }
        
        .welcome-title {
            font-size: 2rem;
            font-weight: bold;
            margin-bottom: 10px;
            position: relative;
            z-index: 2;
        }
        
        .welcome-subtitle {
            font-size: 1.1rem;
            opacity: 0.9;
            position: relative;
            z-index: 2;
        }
        
        .info-card {
            background: white;
            border-radius: 15px;
            padding: 20px;
            box-shadow: 0 5px 20px rgba(0,0,0,0.1);
            margin-bottom: 20px;
            transition: all 0.3s ease;
        }
        
        .info-card:hover {
            transform: translateY(-3px);
            box-shadow: 0 10px 30px rgba(0,0,0,0.15);
        }
        
        .progress-ring {
            width: 80px;
            height: 80px;
            margin: 0 auto 15px;
        }
        
        .progress-ring circle {
            fill: none;
            stroke-width: 8;
            stroke-linecap: round;
            transform: rotate(-90deg);
            transform-origin: 50% 50%;
        }
        
        .progress-ring .bg {
            stroke: #e9ecef;
        }
        
        .progress-ring .progress {
            stroke: #667eea;
            stroke-dasharray: 0 251.2;
            transition: stroke-dasharray 0.3s;
        }
        
        .chart-container {
            position: relative;
            height: 300px;
            margin: 20px 0;
        }
        
        .notification-badge {
            position: absolute;
            top: -8px;
            right: -8px;
            background: #e74c3c;
            color: white;
            border-radius: 50%;
            width: 20px;
            height: 20px;
            font-size: 12px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-weight: bold;
        }
    </style>
</head>
<body>
    <div class="sidebar-container">
        <?php echo renderSidebar('index_with_sidebar.php', $user_role, $user_name); ?>
        
        <div class="main-content">
            <!-- Content Header -->
            <div class="content-header">
                <h1 class="content-title">
                    <i class="fas fa-tachometer-alt me-2"></i>
                    ড্যাশবোর্ড
                </h1>
                <p class="content-breadcrumb">
                    <i class="fas fa-home me-1"></i>
                    হোম / ড্যাশবোর্ড
                    <span class="ms-3 text-muted">
                        <i class="fas fa-clock me-1"></i>
                        <?php echo date('d F Y, l'); ?>
                    </span>
                </p>
            </div>
            
            <!-- Floating Sidebar Toggle Button -->
            <button class="sidebar-toggle-float" onclick="toggleSidebar()" title="সাইডবার টগল করুন">
                <i class="fas fa-bars"></i>
            </button>
            
            <!-- Content Body -->
            <div class="content-body">
                <!-- Welcome Section -->
                <div class="welcome-section fade-in">
                    <h2 class="welcome-title">
                        স্বাগতম, <?php echo htmlspecialchars($user_name); ?>!
                    </h2>
                    <p class="welcome-subtitle">
                        কুড়ুলগাছি মাধ্যমিক বিদ্যালয় ম্যানেজমেন্ট সিস্টেমে আপনাকে স্বাগতম
                    </p>
                </div>
                
                <!-- Statistics Cards -->
                <div class="row mb-4">
                    <div class="col-lg-3 col-md-6">
                        <div class="dashboard-card card-students slide-in">
                            <div class="card-icon">
                                <i class="fas fa-user-graduate"></i>
                            </div>
                            <div class="card-number"><?php echo $stats['students']['active_students'] ?: 0; ?></div>
                            <div class="card-title">সক্রিয় ছাত্র-ছাত্রী</div>
                            <div class="card-subtitle">
                                মোট: <?php echo $stats['students']['total_students'] ?: 0; ?> জন
                            </div>
                        </div>
                    </div>
                    
                    <div class="col-lg-3 col-md-6">
                        <div class="dashboard-card card-teachers slide-in">
                            <div class="card-icon">
                                <i class="fas fa-chalkboard-teacher"></i>
                            </div>
                            <div class="card-number"><?php echo $stats['teachers']['active_teachers'] ?: 0; ?></div>
                            <div class="card-title">সক্রিয় শিক্ষক</div>
                            <div class="card-subtitle">
                                গড় অভিজ্ঞতা: <?php echo round($stats['teachers']['avg_experience'] ?: 0, 1); ?> বছর
                            </div>
                        </div>
                    </div>
                    
                    <div class="col-lg-3 col-md-6">
                        <div class="dashboard-card card-classes slide-in">
                            <div class="card-icon">
                                <i class="fas fa-school"></i>
                            </div>
                            <div class="card-number"><?php echo $stats['classes']['total_classes'] ?: 0; ?></div>
                            <div class="card-title">মোট ক্লাস</div>
                            <div class="card-subtitle">
                                আসন: <?php echo $stats['classes']['total_capacity'] ?: 0; ?> টি
                            </div>
                        </div>
                    </div>
                    
                    <div class="col-lg-3 col-md-6">
                        <div class="dashboard-card card-attendance slide-in">
                            <div class="card-icon">
                                <i class="fas fa-calendar-check"></i>
                            </div>
                            <div class="card-number"><?php echo round($stats['attendance']['attendance_rate'] ?: 0, 1); ?>%</div>
                            <div class="card-title">উপস্থিতির হার</div>
                            <div class="card-subtitle">
                                গত ৩০ দিনে
                            </div>
                        </div>
                    </div>
                </div>
                
                <!-- Secondary Stats -->
                <?php if ($user_role == 'admin'): ?>
                <div class="row mb-4">
                    <div class="col-lg-4 col-md-6">
                        <div class="dashboard-card card-fees slide-in">
                            <div class="card-icon">
                                <i class="fas fa-money-bill-wave"></i>
                            </div>
                            <div class="card-number">৳<?php echo number_format($stats['fees']['total_paid'] ?: 0); ?></div>
                            <div class="card-title">সংগৃহীত ফি</div>
                            <div class="card-subtitle">
                                বকেয়া: <?php echo $stats['fees']['pending_fees'] ?: 0; ?> টি
                            </div>
                        </div>
                    </div>
                    
                    <div class="col-lg-4 col-md-6">
                        <div class="dashboard-card card-exams slide-in">
                            <div class="card-icon">
                                <i class="fas fa-clipboard-list"></i>
                            </div>
                            <div class="card-number"><?php echo count($upcoming_exams); ?></div>
                            <div class="card-title">আসন্ন পরীক্ষা</div>
                            <div class="card-subtitle">
                                এই মাসে
                            </div>
                        </div>
                    </div>
                    
                    <div class="col-lg-4 col-md-6">
                        <div class="dashboard-card card-students slide-in">
                            <div class="card-icon">
                                <i class="fas fa-chart-line"></i>
                            </div>
                            <div class="card-number"><?php echo count($recent_marks); ?></div>
                            <div class="card-title">সাম্প্রতিক মার্কস</div>
                            <div class="card-subtitle">
                                গত ৭ দিনে
                            </div>
                        </div>
                    </div>
                </div>
                <?php endif; ?>
                
                <div class="row">
                    <!-- Quick Actions -->
                    <div class="col-lg-8">
                        <div class="info-card">
                            <div class="d-flex justify-content-between align-items-center mb-3">
                                <h5 class="mb-0">
                                    <i class="fas fa-bolt me-2 text-primary"></i>
                                    দ্রুত কার্যক্রম
                                </h5>
                                <span class="badge bg-primary">জনপ্রিয়</span>
                            </div>
                            <div class="row">
                                <?php if ($user_role == 'admin' || $user_role == 'teacher'): ?>
                                <div class="col-md-6 col-lg-4 mb-3">
                                    <a href="students/add.php" class="quick-action-btn w-100 text-center">
                                        <i class="fas fa-user-plus d-block mb-2" style="font-size: 1.5rem;"></i>
                                        নতুন ছাত্র ভর্তি
                                    </a>
                                </div>
                                <div class="col-md-6 col-lg-4 mb-3">
                                    <a href="marks/entry.php" class="quick-action-btn w-100 text-center">
                                        <i class="fas fa-edit d-block mb-2" style="font-size: 1.5rem;"></i>
                                        মার্কস এন্ট্রি
                                    </a>
                                </div>
                                <div class="col-md-6 col-lg-4 mb-3">
                                    <a href="attendance/mark.php" class="quick-action-btn w-100 text-center">
                                        <i class="fas fa-calendar-check d-block mb-2" style="font-size: 1.5rem;"></i>
                                        উপস্থিতি নিন
                                    </a>
                                </div>
                                <?php endif; ?>
                                
                                <div class="col-md-6 col-lg-4 mb-3">
                                    <a href="reports/marksheet.php" class="quick-action-btn w-100 text-center">
                                        <i class="fas fa-certificate d-block mb-2" style="font-size: 1.5rem;"></i>
                                        মার্কশীট তৈরি
                                    </a>
                                </div>
                                <div class="col-md-6 col-lg-4 mb-3">
                                    <a href="students/list.php" class="quick-action-btn w-100 text-center">
                                        <i class="fas fa-list d-block mb-2" style="font-size: 1.5rem;"></i>
                                        ছাত্র তালিকা
                                    </a>
                                </div>
                                <div class="col-md-6 col-lg-4 mb-3">
                                    <a href="reports/tabulation_sheet.php" class="quick-action-btn w-100 text-center">
                                        <i class="fas fa-table d-block mb-2" style="font-size: 1.5rem;"></i>
                                        টেবুলেশন শীট
                                    </a>
                                </div>
                                <div class="col-md-6 col-lg-4 mb-3">
                                    <a href="reports/merit_position_bulk_print.php" class="quick-action-btn w-100 text-center">
                                        <i class="fas fa-trophy d-block mb-2" style="font-size: 1.5rem;"></i>
                                        মেরিট পজিশন বাল্ক প্রিন্ট
                                    </a>
                                </div>
                            </div>
                        </div>
                    </div>
                    
                    <!-- Recent Activities -->
                    <div class="col-lg-4">
                        <div class="info-card">
                            <div class="d-flex justify-content-between align-items-center mb-3">
                                <h5 class="mb-0">
                                    <i class="fas fa-history me-2 text-success"></i>
                                    সাম্প্রতিক কার্যক্রম
                                </h5>
                                <?php if (count($recent_activities) > 0): ?>
                                    <span class="notification-badge"><?php echo count($recent_activities); ?></span>
                                <?php endif; ?>
                            </div>
                            <div style="max-height: 400px; overflow-y: auto;">
                                <?php if (empty($recent_activities)): ?>
                                    <div class="text-center text-muted py-4">
                                        <i class="fas fa-inbox fa-3x mb-3 opacity-50"></i>
                                        <p>কোন সাম্প্রতিক কার্যক্রম নেই</p>
                                    </div>
                                <?php else: ?>
                                    <?php foreach ($recent_activities as $activity): ?>
                                        <div class="activity-item d-flex align-items-center">
                                            <div class="activity-icon">
                                                <i class="fas fa-<?php echo $activity['type'] == 'student' ? 'user-graduate' : 'chalkboard-teacher'; ?>"></i>
                                            </div>
                                            <div>
                                                <div class="fw-bold"><?php echo htmlspecialchars($activity['name']); ?></div>
                                                <small class="text-muted">
                                                    <?php echo $activity['type'] == 'student' ? 'নতুন ছাত্র যোগ হয়েছে' : 'নতুন শিক্ষক যোগ হয়েছে'; ?>
                                                    <br>
                                                    <i class="fas fa-clock me-1"></i>
                                                    <?php echo date('d/m/Y H:i', strtotime($activity['date'])); ?>
                                                </small>
                                            </div>
                                        </div>
                                    <?php endforeach; ?>
                                <?php endif; ?>
                            </div>
                        </div>
                    </div>
                </div>
                
                <!-- Additional Info Cards -->
                <div class="row mt-4">
                    <!-- Gender Distribution -->
                    <div class="col-lg-4">
                        <div class="info-card text-center">
                            <h6 class="text-primary mb-3">
                                <i class="fas fa-users me-2"></i>
                                ছাত্র-ছাত্রী বিতরণ
                            </h6>
                            <div class="row">
                                <div class="col-6">
                                    <div class="progress-ring">
                                        <svg width="80" height="80">
                                            <circle class="bg" cx="40" cy="40" r="36"></circle>
                                            <circle class="progress" cx="40" cy="40" r="36" 
                                                    style="stroke: #3498db; stroke-dasharray: <?php echo ($stats['students']['male_students'] / max($stats['students']['total_students'], 1)) * 226; ?> 226;"></circle>
                                        </svg>
                                    </div>
                                    <h4 class="text-info"><?php echo $stats['students']['male_students'] ?: 0; ?></h4>
                                    <small class="text-muted">ছেলে</small>
                                </div>
                                <div class="col-6">
                                    <div class="progress-ring">
                                        <svg width="80" height="80">
                                            <circle class="bg" cx="40" cy="40" r="36"></circle>
                                            <circle class="progress" cx="40" cy="40" r="36" 
                                                    style="stroke: #e74c3c; stroke-dasharray: <?php echo ($stats['students']['female_students'] / max($stats['students']['total_students'], 1)) * 226; ?> 226;"></circle>
                                        </svg>
                                    </div>
                                    <h4 class="text-danger"><?php echo $stats['students']['female_students'] ?: 0; ?></h4>
                                    <small class="text-muted">মেয়ে</small>
                                </div>
                            </div>
                        </div>
                    </div>
                    
                    <!-- Recent Marks -->
                    <div class="col-lg-4">
                        <div class="info-card">
                            <h6 class="text-warning mb-3">
                                <i class="fas fa-star me-2"></i>
                                সাম্প্রতিক মার্কস
                            </h6>
                            <?php if (empty($recent_marks)): ?>
                                <p class="text-muted text-center">কোন মার্কস এন্ট্রি নেই</p>
                            <?php else: ?>
                                <?php foreach ($recent_marks as $mark): ?>
                                    <div class="d-flex justify-content-between align-items-center mb-2 p-2 bg-light rounded">
                                        <div>
                                            <small class="fw-bold"><?php echo $mark['first_name'] . ' ' . $mark['last_name']; ?></small>
                                            <br>
                                            <small class="text-muted"><?php echo $mark['subject_name']; ?></small>
                                        </div>
                                        <span class="badge bg-<?php echo $mark['grade'] == 'F' ? 'danger' : 'success'; ?>">
                                            <?php echo $mark['grade']; ?>
                                        </span>
                                    </div>
                                <?php endforeach; ?>
                            <?php endif; ?>
                        </div>
                    </div>
                    
                    <!-- Upcoming Exams -->
                    <div class="col-lg-4">
                        <div class="info-card">
                            <h6 class="text-info mb-3">
                                <i class="fas fa-calendar-alt me-2"></i>
                                আসন্ন পরীক্ষা
                            </h6>
                            <?php if (empty($upcoming_exams)): ?>
                                <p class="text-muted text-center">কোন আসন্ন পরীক্ষা নেই</p>
                            <?php else: ?>
                                <?php foreach ($upcoming_exams as $exam): ?>
                                    <div class="d-flex justify-content-between align-items-center mb-2 p-2 bg-light rounded">
                                        <div>
                                            <small class="fw-bold"><?php echo $exam['name']; ?></small>
                                            <br>
                                            <small class="text-muted">
                                                <i class="fas fa-calendar me-1"></i>
                                                <?php echo date('d/m/Y', strtotime($exam['exam_date'])); ?>
                                            </small>
                                        </div>
                                        <span class="badge bg-primary"><?php echo $exam['exam_type']; ?></span>
                                    </div>
                                <?php endforeach; ?>
                            <?php endif; ?>
                        </div>
                    </div>
                </div>
                
                <!-- System Info -->
                <div class="row mt-4">
                    <div class="col-12">
                        <div class="info-card">
                            <div class="text-center">
                                <h6 class="text-muted mb-3">
                                    <i class="fas fa-info-circle me-2"></i>
                                    সিস্টেম তথ্য
                                </h6>
                                <div class="row">
                                    <div class="col-md-3">
                                        <div class="text-center">
                                            <i class="fas fa-server fa-2x text-primary mb-2"></i>
                                            <h6>সার্ভার স্ট্যাটাস</h6>
                                            <span class="badge bg-success">অনলাইন</span>
                                        </div>
                                    </div>
                                    <div class="col-md-3">
                                        <div class="text-center">
                                            <i class="fas fa-database fa-2x text-info mb-2"></i>
                                            <h6>ডাটাবেস</h6>
                                            <span class="badge bg-success">সংযুক্ত</span>
                                        </div>
                                    </div>
                                    <div class="col-md-3">
                                        <div class="text-center">
                                            <i class="fas fa-shield-alt fa-2x text-warning mb-2"></i>
                                            <h6>নিরাপত্তা</h6>
                                            <span class="badge bg-success">সুরক্ষিত</span>
                                        </div>
                                    </div>
                                    <div class="col-md-3">
                                        <div class="text-center">
                                            <i class="fas fa-clock fa-2x text-danger mb-2"></i>
                                            <h6>শেষ আপডেট</h6>
                                            <small class="text-muted"><?php echo date('H:i'); ?></small>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script>
    <script>
        // Add interactive animations
        document.addEventListener('DOMContentLoaded', function() {
            // Animate cards on scroll
            const observerOptions = {
                threshold: 0.1,
                rootMargin: '0px 0px -50px 0px'
            };
            
            const observer = new IntersectionObserver(function(entries) {
                entries.forEach(entry => {
                    if (entry.isIntersecting) {
                        entry.target.style.opacity = '1';
                        entry.target.style.transform = 'translateY(0)';
                    }
                });
            }, observerOptions);
            
            // Observe all cards
            document.querySelectorAll('.dashboard-card, .info-card').forEach(card => {
                card.style.opacity = '0';
                card.style.transform = 'translateY(20px)';
                card.style.transition = 'opacity 0.6s ease, transform 0.6s ease';
                observer.observe(card);
            });
            
            // Add hover effects to quick action buttons
            document.querySelectorAll('.quick-action-btn').forEach(btn => {
                btn.addEventListener('mouseenter', function() {
                    this.style.transform = 'translateY(-3px) scale(1.02)';
                });
                
                btn.addEventListener('mouseleave', function() {
                    this.style.transform = 'translateY(0) scale(1)';
                });
            });
            
            // Auto-refresh stats every 5 minutes
            setInterval(function() {
                // You can add AJAX call here to refresh stats
                console.log('Stats refreshed at:', new Date().toLocaleTimeString());
            }, 300000);
            
            // Add click animation to dashboard cards
            document.querySelectorAll('.dashboard-card').forEach(card => {
                card.addEventListener('click', function() {
                    this.style.transform = 'scale(0.98)';
                    setTimeout(() => {
                        this.style.transform = 'translateY(-5px)';
                    }, 100);
                });
            });
        });
    </script>
</body>
</html>