
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Quiz List</title>
    <script src="https://kit.fontawesome.com/your-font-awesome-kit.js"></script>
    <script src="https://cdn.tailwindcss.com"></script>
    <style>
        .quiz-title { transition: color 0.2s; }
        .quiz-title:hover { color: #059669; }
        .dropdown-menu { display: none; }
        .dropdown-menu.active { display: block; }
    </style>
</head>
<body class="bg-gray-50">
    <div class="container mx-auto px-4 py-8">
        <div id="quizzes-list" class="bg-white rounded-xl p-6 border border-gray-200">
            <!-- Search Bar -->
            <div class="mb-6">
                <div class="relative">
                    <input type="text" id="searchInput"
                        placeholder="Search quizzes..." 
                        class="w-full pl-10 pr-4 py-2 border border-gray-200 rounded-lg focus:outline-none focus:ring-2 focus:ring-green-500">
                    <i class="fa-solid fa-search absolute left-3 top-3 text-gray-400"></i>
                </div>
            </div>

            <!-- Tags Section -->
            <div class="mb-6">
                <div class="flex flex-col sm:flex-row sm:items-center justify-between mb-4 space-y-4 sm:space-y-0">
                    <h2 class="text-lg font-semibold">Tags</h2>
                    <button class="text-sm bg-green-700 text-white px-4 py-2 rounded-lg hover:bg-green-800">
                        <i class="fa-solid fa-plus mr-2"></i>New Quiz
                    </button>
                </div>
                <div class="flex flex-wrap gap-2">
                    <span onclick="filterQuizzes('all')" 
                          class="px-3 py-1 bg-gray-100 text-gray-700 rounded-full text-sm cursor-pointer hover:bg-gray-200 transition-colors tag-filter"
                          data-tag="all">
                        All Tags
                    </span>
                    <?php foreach ($tags as $tag): ?>
                        <span onclick="filterQuizzes('<?php echo htmlspecialchars($tag['name']); ?>')"
                              class="px-3 py-1 rounded-full text-sm cursor-pointer transition-colors tag-filter"
                              style="background-color: <?php echo htmlspecialchars($tag['color']); ?>20; color: <?php echo htmlspecialchars($tag['color']); ?>;"
                              data-tag="<?php echo htmlspecialchars($tag['name']); ?>"
                              data-color="<?php echo htmlspecialchars($tag['color']); ?>">
                            <?php echo htmlspecialchars($tag['name']); ?>
                        </span>
                    <?php endforeach; ?>
                </div>
            </div>

            <!-- Quizzes List -->
            <div class="mt-8">
                <h2 class="text-lg font-semibold mb-6">My Quizzes</h2>
                <div id="quizContainer" class="space-y-4">
                    <?php if (empty($quizzes)): ?>
                        <div class="text-center py-8 text-gray-500">
                            No quizzes found
                        </div>
                    <?php else: ?>
                        <?php foreach ($quizzes as $quiz): 
                            $tagNames = explode(',', $quiz['tag_names']);
                            $tagColors = explode(',', $quiz['tag_colors']);
                        ?>
                            <div class="quiz-item flex items-center justify-between p-4 border border-gray-200 rounded-lg hover:bg-gray-50" 
                                 data-tags="<?php echo htmlspecialchars($quiz['tag_names']); ?>"
                                 data-name="<?php echo htmlspecialchars($quiz['name']); ?>">
                                <div class="flex items-center space-x-4">
                                    <i class="fa-regular fa-file-lines text-2xl text-gray-400"></i>
                                    <div>
                                        <a href="https://muraj3a.com/test/finto/quiz14.php?id=<?php echo urlencode($quiz['quiz_id']); ?>" 
                                           class="quiz-title font-medium cursor-pointer">
                                            <?php echo htmlspecialchars($quiz['title']); ?>
                                        </a>
                                        <?php if (!empty($quiz['quiz_name'])): ?>
                                        <p class="text-sm text-gray-600">
                                            <?php echo htmlspecialchars($quiz['quiz_name']); ?>
                                        </p>
                                        <?php endif; ?>
                                        <p class="text-sm text-gray-500">
                                            Created on <?php echo date('F j, Y', strtotime($quiz['created_at'])); ?>
                                        </p>
                                    </div>
                                </div>
                                <div class="flex items-center space-x-3">
                                    <div class="flex gap-2">
                                        <?php for($i = 0; $i < count($tagNames); $i++): ?>
                                            <span class="px-3 py-1 rounded-full text-sm"
                                                  style="background-color: <?php echo htmlspecialchars($tagColors[$i]); ?>20; color: <?php echo htmlspecialchars($tagColors[$i]); ?>;">
                                                <?php echo htmlspecialchars($tagNames[$i]); ?>
                                            </span>
                                        <?php endfor; ?>
                                    </div>
                                    <div class="relative">
                                        <button class="dropdown-trigger text-gray-400 hover:text-gray-600 p-2">
                                            <i class="fa-solid fa-ellipsis-vertical"></i>
                                        </button>
                                        <div class="dropdown-menu absolute right-0 mt-2 w-48 bg-white rounded-md shadow-lg z-10">
                                            <div class="py-1">
                                                <a href="edit-quiz.php?id=<?php echo urlencode($quiz['quiz_id']); ?>" 
                                                   class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100">
                                                    Edit Quiz
                                                </a>
                                                <a href="view-results.php?id=<?php echo urlencode($quiz['quiz_id']); ?>" 
                                                   class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100">
                                                    View Results
                                                </a>
                                                <button onclick="deleteQuiz(<?php echo $quiz['quiz_id']; ?>)" 
                                                        class="w-full text-left px-4 py-2 text-sm text-red-600 hover:bg-gray-100">
                                                    Delete Quiz
                                                </button>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        <?php endforeach; ?>
                    <?php endif; ?>
                </div>
            </div>
        </div>
    </div>