<%- include('navbar.ejs') %>

    <style>
        .dashboard-wrapper {
            padding: 50px 40px;
        }

        /* ===== Header ===== */

        .dashboard-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 50px;
        }

        .dashboard-title {
            font-weight: 600;
            font-size: 18px;
            background: linear-gradient(90deg, #6366f1, #ec4899);
            padding: 12px 24px;
            color: white;
            border-radius: 13px;
        }

        .dashboard-sub {
            font-size: 14px;
            color: #6b7280;
            margin-top: 10px;
            margin-left: 4px;
        }

        .dashboard-date {
            background: #fff;
            padding: 10px 18px;
            border-radius: 12px;
            box-shadow: 0 10px 25px rgba(0, 0, 0, 0.05);
            font-size: 13px;
            font-weight: 600;
        }

        /* ===== KPI Grid ===== */

        .kpi-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
            gap: 30px;
        }

        .kpi-card {
            background: #ffffff;
            border-radius: 22px;
            padding: 30px;
            position: relative;
            overflow: hidden;
            box-shadow: 0 20px 45px rgba(0, 0, 0, 0.06);
            transition: 0.4s ease;
        }

        .kpi-card:hover {
            transform: translateY(-8px);
            box-shadow: 0 30px 60px rgba(0, 0, 0, 0.08);
        }

        .kpi-card::before {
            content: "";
            position: absolute;
            top: -50px;
            right: -50px;
            width: 150px;
            height: 150px;
            border-radius: 50%;
            opacity: 0.08;
        }

        .purple::before {
            background: #ec4899;
        }

        .pink::before {
            background: #030451;
        }

        .blue::before {
            background: #0ea5e9;
        }

        .green::before {
            background: #10b981;
        }

        .kpi-icon {
            width: 50px;
            height: 50px;
            border-radius: 14px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 20px;
            color: #fff;
            margin-bottom: 20px;
        }

        .bg-purple {
            background: linear-gradient(135deg, #6366f1, #4f46e5);
        }

        .bg-pink {
            background: linear-gradient(135deg, #ec4899, #db2777);
        }

        .bg-blue {
            background: linear-gradient(135deg, #0ea5e9, #0284c7);
        }

        .bg-green {
            background: linear-gradient(135deg, #10b981, #059669);
        }

        .kpi-value {
            font-size: 32px;
            font-weight: 800;
            margin-bottom: 5px;
            color: #111827;
        }

        .kpi-label {
            font-size: 14px;
            color: #6b7280;
            font-weight: 500;
        }

        @media(max-width:768px) {
            .dashboard-wrapper {
                padding: 30px 20px;
            }
        }
    </style>

    <div class="dashboard-wrapper">

        <!-- Header -->
        <div class="dashboard-header">
            <div>
                <h2 class="dashboard-title">Ar Learning - Dashboard</h2>
                <div class="dashboard-sub">Monitor your platform performance in real-time</div>
            </div>

            <div class="dashboard-date">
                <%= new Date().toDateString() %>
            </div>
        </div>

        <!-- KPI Cards -->
        <div class="kpi-grid">

            <div class="kpi-card purple">
                <div class="kpi-icon bg-purple">
                    <i class="fa fa-book"></i>
                </div>
                <div class="kpi-value">
                    <%= totalCourses || 0 %>
                </div>
                <div class="kpi-label">Total Courses</div>
            </div>

            <div class="kpi-card pink">
                <div class="kpi-icon bg-pink">
                    <i class="fa fa-users"></i>
                </div>
                <div class="kpi-value">
                    <%= totalStudents || 0 %>
                </div>
                <div class="kpi-label">Total Students</div>
            </div>

            <div class="kpi-card blue">
                <div class="kpi-icon bg-blue">
                    <i class="fa fa-registered"></i>
                </div>
                <div class="kpi-value">
                   
                </div>
                <div class="kpi-label">Total Enrollments</div>
            </div>

            <a href="/admin/leaderboard" style="text-decoration: none;">
                <div class="kpi-card green">

                    <div class="kpi-icon bg-green">
                        <i class="fa fa-trophy"></i>
                    </div>

                    <!-- 🔥 TOTAL COUNT -->
                    <div class="kpi-value">
                        <%= totalLeaderboard %>
                    </div>

                    <div class="kpi-label">Leaderboard</div>

                </div>
            </a>
            <style>
                .kpi-card {
                    cursor: pointer;
                    transition: 0.3s;
                }

                .kpi-card:hover {
                    transform: translateY(-5px);
                }
            </style>
        </div>

    </div>

    <%- include('footer.ejs') %>
