<%- include('navbar.ejs') %>

    <style>
        .lms-container {
            padding: 40px;
        }

        /* ===== Header ===== */

        .lms-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 35px;
        }

        .lms-header h2 {
            font-weight: 600;
            font-size: 14px;
            background: linear-gradient(90deg, #6366f1, #ec4899);
            padding: 12px 24px;

            color: white;
            border-radius: 13px;
        }

        .btn-lms-add {
            background: linear-gradient(135deg, #6366f1, #ec4899);
            border: none;
            padding: 12px 24px;
            border-radius: 14px;
            color: #fff;
            font-weight: 600;
            box-shadow: 0 10px 25px rgba(99, 102, 241, 0.3);
            transition: 0.3s;
        }

        .btn-lms-add:hover {
            transform: translateY(-3px);
            box-shadow: 0 15px 35px rgba(236, 72, 153, 0.4);
            color: white;
        }

        /* ===== Stats Cards ===== */

        .stats-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
            gap: 20px;
            margin-bottom: 40px;
        }

        .stat-card {
            background: white;
            border-radius: 18px;
            padding: 25px;
            box-shadow: 0 15px 40px rgba(0, 0, 0, 0.06);
            position: relative;
            overflow: hidden;
        }

        .stat-card::before {
            content: "";
            position: absolute;
            top: -40px;
            right: -40px;
            width: 120px;
            height: 120px;
            background: linear-gradient(135deg, #6366f1, #ec4899);
            border-radius: 50%;
            opacity: 0.1;
        }

        .stat-card h3 {
            font-size: 24px;
            font-weight: 800;
            margin: 0;
            color: #111827;
        }

        .stat-card p {
            margin: 5px 0 0;
            font-size: 13px;
            color: #6b7280;
        }

        /* ===== Courses Grid ===== */

        .courses-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
            gap: 25px;
        }

        .course-box {
            background: white;
            border-radius: 20px;
            padding: 25px;
            position: relative;
            box-shadow: 0 15px 40px rgba(0, 0, 0, 0.05);
            transition: 0.4s ease;
            border: 1px solid transparent;
        }

        .course-box:hover {
            transform: translateY(-6px);
            border-image: linear-gradient(135deg, #6366f1, #ec4899) 1;
            border-width: 1px;
            border-style: solid;
        }

        .course-title {
            font-size: 18px;
            font-weight: 700;
            margin-bottom: 10px;
            color: #111827;
        }

        .course-desc {
            font-size: 14px;
            color: #6b7280;
            min-height: 45px;
        }

        .course-actions {
            display: flex;
            justify-content: space-between;
        }

        .btn-edit {
            background: #eef2ff;
            color: #6366f1;
            border-radius: 10px;
            padding: 8px 14px;
            font-size: 13px;
            font-weight: 600;
            transition: 0.3s;
        }

        .btn-edit:hover {
            background: #6366f1;
            color: #fff;
        }

        .btn-delete {
            background: #fef2f2;
            color: #dc2626;
            border-radius: 10px;
            padding: 8px 14px;
            font-size: 13px;
            font-weight: 600;
            transition: 0.3s;
        }

        .btn-delete:hover {
            background: #dc2626;
            color: #fff;
        }

        .no-data {
            text-align: center;
            padding: 50px;
            color: #9ca3af;
            font-size: 15px;
        }

        @media(max-width:768px) {
            .lms-container {
                padding: 20px;
            }

            .lms-header {
                flex-direction: column;
                align-items: flex-start;
                gap: 15px;
            }
        }
    </style>

    <div class="lms-container">

        <!-- HEADER -->
        <div class="lms-header">
            <h2>📚 Ar Learning Course Dashboard</h2>
            <a href="/admin/add-courses" class="btn-lms-add">
                <i class="fa fa-plus"></i> Create Course
            </a>
        </div>

        <!-- STATS -->
        <div class="stats-grid">
            <div class="stat-card">
                <h3>
                    <%= courses.length %>
                </h3>
                <p>Total Courses</p>
            </div>

            <div class="stat-card">
                <h3>Active</h3>
                <p>Published Courses</p>
            </div>

            <div class="stat-card">
                <h3>Draft</h3>
                <p>Unpublished Courses</p>
            </div>
        </div>

        <!-- COURSES GRID -->
        <% if(courses && courses.length> 0){ %>

            <div class="courses-grid">

                <% courses.forEach((c)=> { %>

                    <div class="course-box">

                        <div class="course-title">
                            <%= c.course_name %>
                        </div>

                        <div class="course-desc">
                            <%= c.course_description || 'No description provided.' %>
                        </div>

                        <div class="course-actions">

                            <a href="/admin/edit-course/<%= c.course_id %>" class="btn-edit">
                                <i class="fa fa-edit"></i> Edit
                            </a>

                            <a href="/admin/delete-courses/<%= c.course_id %>"
                                onclick="return confirm('Delete this course?')" class="btn-delete">
                                <i class="fa fa-trash"></i> Delete
                            </a>

                        </div>

                    </div>

                    <% }) %>

            </div>

            <% } else { %>

                <div class="no-data">
                    No courses available
                </div>

                <% } %>

    </div>

    <%- include('footer.ejs') %>