<%- include('navbar.ejs') %>

<style>
    .edit-quiz-wrapper {
        max-width: 750px;
        margin: 40px auto;
    }

    .edit-card {
        background: #ffffff;
        border-radius: 20px;
        overflow: hidden;
        box-shadow: 0 15px 40px rgba(0,0,0,0.08);
    }

    .edit-header {
        background: linear-gradient(135deg, #4e73df, #224abe);
        padding: 25px 30px;
        color: #fff;
        font-size: 20px;
        font-weight: 600;
    }

    .edit-body {
        padding: 35px;
    }

    .form-label {
        font-weight: 600;
        margin-bottom: 6px;
        color: #444;
    }

    .form-control-custom {
        border-radius: 12px;
        border: 1px solid #ddd;
        height: 40px;
        transition: all 0.3s ease;
    }

    .form-control-custom:focus {
        border-color: #4e73df;
        box-shadow: 0 0 0 3px rgba(78,115,223,0.15);
        outline: none;
    }

    .btn-update {
        background: linear-gradient(45deg, #1cc88a, #17a673);
        border: none;
        padding: 12px 28px;
        border-radius: 30px;
        color: #fff;
        font-weight: 600;
        transition: 0.3s ease;
    }

    .btn-update:hover {
        transform: translateY(-2px);
        box-shadow: 0 10px 25px rgba(28,200,138,0.3);
    }

    .btn-cancel {
        background: #f8f9fc;
        border: 1px solid #ddd;
        padding: 12px 28px;
        border-radius: 30px;
        font-weight: 600;
        margin-left: 10px;
    }

    .btn-cancel:hover {
        background: #e2e6f5;
    }
</style>

<div class="container-fluid">

    <div class="edit-quiz-wrapper">

        <div class="edit-card">

            <div class="edit-header">
                ✏️ Edit Quiz
            </div>

            <div class="edit-body">

                <form action="/admin/update-quiz" method="POST">

                    <input type="hidden" name="id" value="<%= quiz.id %>">

                    <!-- Course -->
                    <div class="mb-4">
                        <label class="form-label">Select Course</label>
                        <select name="course_id"
                                class="form-control form-control-custom"
                                required style="height: 40px;">

                            <% courses.forEach(course => { %>

                                <option value="<%= course.course_id %>"
                                    <%= course.course_id == quiz.course_id ? "selected" : "" %>>
                                    <%= course.course_name %>
                                </option>

                            <% }) %>

                        </select>
                    </div>

                    <!-- Title -->
                    <div class="mb-4">
                        <label class="form-label">Quiz Title</label>
                        <input type="text"
                               name="quiz_title"
                               class="form-control form-control-custom"
                               value="<%= quiz.quiz_title %>"
                               placeholder="Enter Quiz Title"
                               required>
                    </div>

                    <!-- Buttons -->
                    <div class="text-end">

                        <a href="/admin/quiz-list" class="btn btn-cancel">
                            Cancel
                        </a>

                        <button type="submit" class="btn-update">
                            Update Quiz
                        </button>

                    </div>

                </form>

            </div>

        </div>

    </div>

</div>

<%- include('footer.ejs') %>
