<?php
include "../include/db.php";
include "include/header.php";

// Fetch Stats
$total_contacts = $conn->query("SELECT COUNT(*) FROM contacts")->fetch_row()[0];
$unread_contacts = $conn->query("SELECT COUNT(*) FROM contacts WHERE status = 'unread'")->fetch_row()[0];
?>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Admin Dashboard - CourseLMS</title>
    <link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet">
    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css" rel="stylesheet">
    <style>
        @import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');
        body { font-family: 'Inter', sans-serif; overflow-x: hidden; }
        .content { transition: margin-left 0.3s ease; margin-left: 250px; }
        .top-nav { background: linear-gradient(135deg, #1E293B 0%, #334155 100%); box-shadow: 0 10px 20px rgba(0,0,0,0.1); }
        .search-input { transition: all 0.3s; }
        .search-input:focus { transform: scale(1.02); box-shadow: 0 0 0 3px rgba(251, 191, 36, 0.3); }

        /* Cards */
        .stat-card {
            background: white;
            border-radius: 16px;
            box-shadow: 0 10px 25px rgba(0,0,0,0.08);
            transition: all 0.3s ease;
            overflow: hidden;
        }
        .stat-card:hover {
            transform: translateY(-8px);
            box-shadow: 0 20px 40px rgba(0,0,0,0.15);
        }
        .card-header {
            padding: 1.5rem;
            background: linear-gradient(135deg, #1E293B 0%, #334155 100%);
            color: white;
        }
        .card-body {
            padding: 2rem;
            text-align: center;
        }
        .card-icon {
            font-size: 2.5rem;
            margin-bottom: 1rem;
            opacity: 0.9;
        }
        .card-value {
            font-size: 2.5rem;
            font-weight: 700;
            color: #1e293b;
        }
        .card-label {
            color: #64748b;
            margin-top: 0.5rem;
            font-size: 1rem;
        }

        @media (max-width: 768px) {
            .content { margin-left: 0; }
        }
    </style>
</head>
<body class="bg-gray-50">

    <!-- Top Navigation -->
    <nav class="top-nav sticky top-0 text-white p-4 flex justify-between items-center shadow-lg z-40 backdrop-blur-md bg-white/10">
        <div class="logo text-2xl font-bold">CourseLMS Admin</div>
        <div class="search flex-1 max-w-xs mx-4">
            <input type="text" placeholder="Search anything..." class="search-input w-full p-3 border border-gray-300 rounded-xl bg-white/20 backdrop-blur text-white placeholder-gray-300 focus:outline-none focus:ring-2 focus:ring-amber-400">
        </div>
        <div class="right-nav flex items-center gap-4">
            <a href="send_mail.php" class="bg-gradient-to-r from-amber-500 to-amber-600 text-white px-5 py-2.5 rounded-xl font-semibold flex items-center gap-2 shadow-lg hover:from-amber-600 hover:to-amber-700 transition-all">
                Send Mail
            </a>
            <i class="fas fa-bell text-xl p-2 rounded-full hover:bg-amber-500 cursor-pointer transition-all"></i>
            <i class="fas fa-envelope text-xl p-2 rounded-full hover:bg-amber-500 cursor-pointer transition-all"></i>
            <div class="profile flex items-center gap-2">
                <img src="https://via.placeholder.com/40" alt="Profile" class="w-10 h-10 rounded-full ring-2 ring-amber-400">
                <span class="text-white font-medium">Admin</span>
            </div>
            <i id="toggle" class="fas fa-bars text-xl p-2 rounded-full hover:bg-amber-500 cursor-pointer transition-all"></i>
        </div>
    </nav>

    <!-- Main Content -->
    <div class="content p-6 min-h-screen">
        <div class="max-w-7xl mx-auto my-8">

            <!-- Welcome Message -->
            <div class="mb-10 text-center">
                <h1 class="text-4xl font-bold text-gray-800 mb-3">Welcome back, Admin! 👋</h1>
                <p class="text-lg text-gray-600">Here's what's happening with your platform today.</p>
            </div>

        
        
        
        
        
        
        
        
        
        

        </div>
    </div>

    <?php include "include/footer.php"; ?>
    <?php $conn->close(); ?>
</body>
</html>