<%- include('navbar.ejs') %>

<style>
    .quiz-card {
        border-radius: 18px;
        padding: 25px;
        background: #ffffff;
        box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
        transition: 0.3s ease;
        position: relative;
        overflow: hidden;
    }

    .quiz-card:hover {
        transform: translateY(-5px);
        box-shadow: 0 15px 35px rgba(0, 0, 0, 0.12);
    }

    .quiz-title {
        font-weight: 600;
        font-size: 18px;
        color: #333;
    }

    .quiz-meta {
        font-size: 14px;
        color: #666;
    }

    .quiz-badge {
        background: linear-gradient(45deg, #4e73df, #224abe);
        padding: 6px 14px;
        border-radius: 20px;
        font-size: 12px;
        color: #fff;
        font-weight: 500;
    }

    .action-btn {
        border-radius: 25px;
        padding: 6px 16px;
        font-size: 13px;
        margin-right: 5px;
    }

    .btn-view {
        background: #2e59d9;
        color: #fff;
        border: none;
    }

    .btn-view:hover {
        background: #1c3faa;
    }

    .btn-edit {
        background: #f6c23e;
        color: #fff;
        border: none;
    }

    .btn-delete {
        background: #e74a3b;
        color: #fff;
        border: none;
    }

    .page-title {
        font-weight: 600;
        color: #333;
        margin-bottom: 25px;
    }
</style>

<div class="container-fluid mt-4">

    <h4 class="page-title">All Quizzes</h4>

    <div class="row">

        <% quizzes.forEach(q => { %>

            <div class="col-lg-4 col-md-6 mb-4">
                <div class="quiz-card">

                    <div class="quiz-title mb-2">
                        <%= q.quiz_title %>
                    </div>

                    <div class="quiz-meta mb-2">
                        Course: <strong><%= q.course_name %></strong>
                    </div>

                    <div class="mb-3">
                        <span class="quiz-badge">
                            <%= q.total_questions %> Questions
                        </span>
                    </div>

                    <div>
                        <a href="/admin/quiz-details/<%= q.id %>"
                           class="btn action-btn btn-view">
                           View
                        </a>

                        <a href="/admin/edit-quiz/<%= q.id %>"
                           class="btn action-btn btn-edit">
                           Edit
                        </a>

                        <button onclick="deleteQuiz(<%= q.id %>)"
                                class="btn action-btn btn-delete">
                           Delete
                        </button>
                    </div>

                </div>
            </div>

        <% }) %>

    </div>

</div>

<%- include('footer.ejs') %>

<script>
async function deleteQuiz(id) {

    if (!confirm("Are you sure you want to delete this quiz?")) return;

    await fetch(`/admin/delete-quiz/${id}`, {
        method: "DELETE"
    });

    location.reload();
}
</script>
