<%- include("navbar") %>

    <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap"
        rel="stylesheet">

    <style>
        body {
            font-family: 'Poppins', sans-serif;
            background: linear-gradient(135deg, #0f172a, #1e293b);
            min-height: 100vh;
        }

        /* OFFSET FOR SIDEBAR + NAVBAR */
        .course-wrapper {
            margin-left: 250px;
            margin-top: 70px;
            padding: 40px;
        }

        /* ===== COURSE HEADER ===== */
        .course-header {
            background: linear-gradient(135deg, #6366f1, #8b5cf6);
            padding: 45px;
            border-radius: 20px;
            color: #fff;
            margin-bottom: 45px;
            box-shadow: 0 20px 50px rgba(99, 102, 241, 0.3);
            position: relative;
            overflow: hidden;
        }

        .course-header h2 {
            font-weight: 600;
            font-size: 26px;
        }

        .course-header p {
            opacity: .9;
            margin-top: 6px;
        }

        .progress-container {
            margin-top: 25px;
            background: rgba(255, 255, 255, 0.3);
            height: 10px;
            border-radius: 20px;
            overflow: hidden;
        }

        .progress-bar {
            height: 100%;
            width: 60%;
            background: #fff;
            border-radius: 20px;
            animation: progressAnim 1.5s ease;
        }

        @keyframes progressAnim {
            from {
                width: 0;
            }
        }

        /* ===== GRID ===== */
        .content-grid {
            display: grid;
            grid-template-columns: 2fr 1fr;
            gap: 35px;
        }

        /* ===== MAIN CARDS ===== */
        .card-box {
            background: #ffffff;
            padding: 35px;
            border-radius: 20px;
            box-shadow: 0 15px 40px rgba(0, 0, 0, 0.08);
            transition: .3s;
        }

        .card-box h4 {
            font-weight: 600;
            margin-bottom: 25px;
            color: #0f172a;
        }

        /* ===== CONTENT ITEMS ===== */
        .item {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 18px 20px;
            border-radius: 14px;
            transition: .3s;
            margin-bottom: 15px;
            background: #f1f5f9;
        }

        .item:hover {
            background: #e0f2fe;
            transform: translateX(6px);
        }

        .item span {
            font-size: 14px;
            font-weight: 500;
            color: #1e293b;
        }

        /* BUTTON */
        .btn-action {
            padding: 9px 16px;
            border-radius: 10px;
            font-size: 13px;
            text-decoration: none;
            color: white;
            background: linear-gradient(90deg, #6366f1, #22d3ee);
            transition: .3s;
            box-shadow: 0 8px 20px rgba(99, 102, 241, 0.3);
        }

        .btn-action:hover {
            transform: translateY(-2px);
            box-shadow: 0 12px 25px rgba(99, 102, 241, 0.4);
        }

        /* ===== SIDEBAR STATS ===== */
        .sidebar-card {
            background: #ffffff;
            padding: 30px;
            border-radius: 20px;
            box-shadow: 0 15px 40px rgba(0, 0, 0, 0.08);
        }

        .sidebar-card h5 {
            margin-bottom: 20px;
            font-weight: 600;
            color: #0f172a;
        }

        .stat-box {
            background: #f1f5f9;
            padding: 18px;
            border-radius: 14px;
            margin-bottom: 15px;
            text-align: center;
            transition: .3s;
        }

        .stat-box:hover {
            background: #e0f2fe;
        }

        .stat-box h3 {
            color: #6366f1;
            margin-bottom: 6px;
        }

        .stat-box p {
            font-size: 13px;
            color: #64748b;
        }

        /* ===== RESPONSIVE ===== */
        @media(max-width:992px) {
            .course-wrapper {
                margin-left: 0;
                padding: 25px;
            }

            .content-grid {
                grid-template-columns: 1fr;
            }
        }
    </style>


    <div class="course-wrapper">

        <!-- COURSE HEADER -->
        <div class="course-header">
            <h2>
                <%= course.course_name %>
            </h2>
            <p>Continue your learning journey 🚀</p>

            <div class="progress-container">
                <div class="progress-bar"></div>
            </div>
        </div>

        <div class="content-grid">

            <!-- LEFT CONTENT -->
            <div>

                <div class="card-box">
                    <h4>📹 Recorded Lectures</h4>

                    <% let videoCount=0; %>

                        <% contents.forEach(c=> { %>
                            <% if(c.video_file){ videoCount++; %>
                                <div class="item">
                                    <span>
                                        <%= c.title %>
                                    </span>
                                    <a href="/watch/<%= c.content_id %>" target="_blank" class="btn-action">Watch</a>
                                </div>
                                <% } %>
                                    <% }) %>

                                        <% if(videoCount===0){ %>
                                            <p style="color: #888;">No recorded lectures available</p>
                                            <% } %>
                </div>

                <div class="card-box mt-4">
                    <h4>📄 Study Material (PDFs)</h4>

                    <% let pdfCount=0; %>

                        <% contents.forEach(c=> { %>
                            <% if(c.pdf_file){ pdfCount++; %>
                                <div class="item">
                                    <span>
                                        <%= c.title %>
                                    </span>
                                    <a href="/uploads/pdfs/<%= c.pdf_file %>" target="_blank"
                                        class="btn-action">Open</a>
                                </div>
                                <% } %>
                                    <% }) %>

                                        <% if(pdfCount===0){ %>
                                            <p style="color: #888;">No PDFs available</p>
                                            <% } %>
                </div>

                <!-- QUIZZES -->
                <div class="card-box" style="margin-top:35px;">
                    <h4>📝 Quizzes</h4>

                    <% quizzes.forEach(q=> {
                        let attempted = false;
                        results.forEach(r=>{
                        if(r.quiz_id == q.id){ attempted = true; }
                        });
                        %>

                        <div class="item">
                            <span>
                                <%= q.quiz_title %>
                            </span>

                            <% if(attempted){ %>
                                <a href="/result/<%= q.id %>" style="text-decoration: none;font-weight: bold;"
                                    class="btn-action">View Result</a>
                                <% } else { %>
                                    <a href="/attempt/<%= q.id %>" style="text-decoration: none;font-weight: bold;"
                                        class="btn-action">Start Quiz</a>
                                    <% } %>
                        </div>


                        <% }) %>
                </div>

            </div>

            <!-- RIGHT SIDEBAR -->
            <div class="sidebar-card">
                <h5>📊 Course Stats</h5>

                <div class="stat-box">
                    <h3>
                        <%= contents.length %>
                    </h3>
                    <p>Total Lectures</p>
                </div>

                <div class="stat-box">
                    <h3>
                        <%= quizzes.length %>
                    </h3>
                    <p>Total Quizzes</p>
                </div>

                <div class="stat-box">
                    <h3>
                        <%= results.length %>
                    </h3>
                    <p>Attempted Quizzes</p>
                </div>
            </div>

            <a href="/leaderboard/<%= course.course_id %>" class="text-center">
                <button class="btn btn-primary" style="font-weight: 500;">View Leaderboard</button>
            </a>

        </div>

    </div>

    <%- include("footer") %>