<?php
// Include your PDO database connection file
include('db.php');

// Fetch all topics with their category names and allow_retakes by joining the topics and categories tables
$query = "SELECT topics.id, topics.name AS topic_name, categories.name AS category_name, topics.status, topics.allow_retakes 
          FROM topics 
          JOIN categories ON topics.category_id = categories.id";
$result = $pdo->query($query);
?>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta name="description" content="Responsive Admin & Dashboard Template based on Bootstrap 5">
    <meta name="author" content="AdminKit">
    <meta name="keywords" content="adminkit, bootstrap, bootstrap 5, admin, dashboard, template, responsive, css, sass, html, theme, front-end, ui kit, web">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link rel="shortcut icon" href="img/icons/icon-48x48.png" />
    <link rel="canonical" href="https://demo-basic.adminkit.io/" />
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
    <link rel="stylesheet" href="https://cdn.datatables.net/1.13.6/css/dataTables.bootstrap5.min.css">
    <title>Kijani Quizzes</title>
    <link href="css/app.css" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;600;700&display=swap" rel="stylesheet">
    <style>
        body {
            font-family: 'Inter', sans-serif;
            background-color: #f5f7fb;
        }
        .chart-container {
            max-width: 600px;
            margin: auto;
            margin-bottom: 50px;
            height: 400px;
        }
        .table-container {
            background: #fff;
            border-radius: 8px;
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
            padding: 20px;
            margin-top: 20px;
        }
        .table thead th {
            background-color: #007bff;
            color: #fff;
            font-weight: 600;
            text-align: center;
            padding: 12px;
            border-bottom: 2px solid #dee2e6;
        }
        .table tbody tr {
            transition: background-color 0.2s;
        }
        .table tbody tr:hover {
            background-color: #f1f3f5;
        }
        .table td {
            vertical-align: middle;
            text-align: center;
            padding: 12px;
        }
        .btn-action {
            padding: 6px 12px;
            font-size: 14px;
            border-radius: 4px;
            margin-right: 5px;
        }
        .status-icon {
            font-size: 1.2rem;
        }
        .alert {
            border-radius: 8px;
            margin-bottom: 20px;
        }
        .dataTables_wrapper .dataTables_paginate .paginate_button {
            border-radius: 4px;
            margin: 0 2px;
        }
        .dataTables_wrapper .dataTables_filter input {
            border-radius: 4px;
            border: 1px solid #ced4da;
            padding: 6px;
        }
        .dataTables_wrapper .dataTables_length select {
            border-radius: 4px;
            border: 1px solid #ced4da;
            padding: 6px;
        }
    </style>
</head>
<body>
    <div class="wrapper">
        <nav id="sidebar" class="sidebar js-sidebar">
            <div class="sidebar-content js-simplebar">
                <a class="sidebar-brand" href="index.php">
                    <span class="align-middle">Kijani Admin</span>
                </a>
                <ul class="sidebar-nav">
                    <li class="sidebar-header">Pages</li>
                    <li class="sidebar-item">
                        <a class="sidebar-link" href="index.php">
                            <i class="align-middle" data-feather="sliders"></i>
                            <span class="align-middle">Dashboard</span>
                        </a>
                    </li>
                    <li class="sidebar-item">
                        <a class="sidebar-link" href="categoriesandtopic.php">
                            <i class="align-middle" data-feather="book"></i>
                            <span class="align-middle">Add Category & Topic</span>
                        </a>
                    </li>
                    <li class="sidebar-item">
                        <a class="sidebar-link" href="add_question.php">
                            <i class="align-middle" data-feather="book"></i>
                            <span class="align-middle">Create Questions</span>
                        </a>
                    </li>
                    <li class="sidebar-item">
                        <a class="sidebar-link" href="viewusersscores.php">
                            <i class="align-middle" data-feather="book"></i>
                            <span class="align-middle">View Quiz Results</span>
                        </a>
                    </li>
                    <li class="sidebar-item">
                        <a class="sidebar-link" href="all_questions.php">
                            <i class="align-middle" data-feather="book"></i>
                            <span class="align-middle">View Questions</span>
                        </a>
                    </li>
                    <li class="sidebar-item">
                        <a class="sidebar-link" href="add_user.php">
                            <i class="align-middle" data-feather="user"></i>
                            <span class="align-middle">Add Users</span>
                        </a>
                    </li>
                    <li class="sidebar-item">
                        <a class="sidebar-link" href="viewusers.php">
                            <i class="align-middle" data-feather="user"></i>
                            <span class="align-middle">View Users</span>
                        </a>
                    </li>
                    <li class="sidebar-item active">
                        <a class="sidebar-link" href="quiz_management.php">
                            <i class="align-middle" data-feather="user"></i>
                            <span class="align-middle">Quiz Management</span>
                        </a>
                    </li>
                </ul>
            </div>
        </nav>
        <div class="main">
            <nav class="navbar navbar-expand navbar-light navbar-bg">
                <a class="sidebar-toggle js-sidebar-toggle">
                    <i class="hamburger align-self-center"></i>
                </a>
                <div class="navbar-collapse collapse">
                    <ul class="navbar-nav navbar-align">
                        <li class="nav-item dropdown">
                            <a class="nav-link dropdown-toggle d-none d-sm-inline-block" href="#" data-bs-toggle="dropdown">
                                <img src="img/avatars/kijanilogo.png" class="avatar img-fluid rounded me-1" alt="Kijani Admin" />
                                <span class="text-dark">Kijani Admin</span>
                            </a>
                            <div class="dropdown-menu dropdown-menu-end">
                                <a class="dropdown-item" href="profile.php">
                                    <i class="align-middle me-1" data-feather="user"></i>
                                    Profile
                                </a>
                                <a class="dropdown-item" href="#">
                                    <i class="align-middle me-1" data-feather="pie-chart"></i>
                                    Analytics
                                </a>
                                <div class="dropdown-divider"></div>
                                <a class="dropdown-item" href="settings.php">
                                    <i class="align-middle me-1" data-feather="settings"></i>
                                    Settings & Privacy
                                </a>
                                <a class="dropdown-item" href="#">
                                    <i class="align-middle me-1" data-feather="help-circle"></i>
                                    Help Center
                                </a>
                                <div class="dropdown-divider"></div>
                                <a class="dropdown-item" href="#">Log out</a>
                            </div>
                        </li>
                    </ul>
                </div>
            </nav>
            <main class="content">
                <div class="container-fluid p-0">
                    <h1 class="h3 mb-3">Quiz Management Dashboard</h1>
                    <div class="row">
                        <div class="col-xl-12">
                            <div class="table-container">
                                <div class="card-body">
                                    <?php if (isset($_GET['status']) && $_GET['status'] == 'updated'): ?>
                                        <div class="alert alert-success alert-dismissible fade show" role="alert">
                                            Topic status updated successfully!
                                            <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
                                        </div>
                                    <?php endif; ?>
                                    <?php if (isset($_GET['retakes']) && $_GET['retakes'] == 'updated'): ?>
                                        <div class="alert alert-success alert-dismissible fade show" role="alert">
                                            Allow retakes updated successfully!
                                            <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
                                        </div>
                                    <?php endif; ?>
                                    <table id="topicsTable" class="table table-striped table-hover table-responsive">
                                        <thead>
                                           

<tr>
                                                <th>ID</th>
                                                <th>Topic Name</th>
                                                <th>Category Name</th>
                                                <th>Status</th>
                                                <th>Allow Retakes</th>
                                                <th>Action</th>
                                            </tr>
                                        </thead>
                                        <tbody>
                                            <?php while($row = $result->fetch(PDO::FETCH_ASSOC)): ?>
                                                <tr>
                                                    <td><?php echo $row['id']; ?></td>
                                                    <td><?php echo htmlspecialchars($row['topic_name']); ?></td>
                                                    <td><?php echo htmlspecialchars($row['category_name']); ?></td>
                                                    <td>
                                                        <span class="badge bg-<?php echo $row['status'] ? 'success' : 'danger'; ?>">
                                                            <i class="fas fa-<?php echo $row['status'] ? 'check-circle' : 'times-circle'; ?> status-icon"></i>
                                                            <?php echo $row['status'] ? 'Active' : 'Inactive'; ?>
                                                        </span>
                                                    </td>
                                                    <td>
                                                        <span class="badge bg-<?php echo $row['allow_retakes'] ? 'primary' : 'warning'; ?>">
                                                            <i class="fas fa-<?php echo $row['allow_retakes'] ? 'redo' : 'ban'; ?> status-icon"></i>
                                                            <?php echo $row['allow_retakes'] ? 'Allowed' : 'Not Allowed'; ?>
                                                        </span>
                                                    </td>
                                                    <td>
                                                        <form action="update_topic_status.php" method="POST" class="d-inline">
                                                            <input type="hidden" name="topic_id" value="<?php echo $row['id']; ?>">
                                                            <button type="submit" name="status" value="<?php echo $row['status'] ? '0' : '1'; ?>" class="btn btn-<?php echo $row['status'] ? 'danger' : 'success'; ?> btn-action">
                                                                <i class="fas fa-<?php echo $row['status'] ? 'pause' : 'play'; ?>"></i>
                                                                <?php echo $row['status'] ? 'Deactivate' : 'Activate'; ?>
                                                            </button>
                                                        </form>
                                                        <form action="update_topic_retakes.php" method="POST" class="d-inline">
                                                            <input type="hidden" name="topic_id" value="<?php echo $row['id']; ?>">
                                                            <button type="submit" name="allow_retakes" value="<?php echo $row['allow_retakes'] ? '0' : '1'; ?>" class="btn btn-<?php echo $row['allow_retakes'] ? 'warning' : 'primary'; ?> btn-action">
                                                                <i class="fas fa-<?php echo $row['allow_retakes'] ? 'ban' : 'redo'; ?>"></i>
                                                                <?php echo $row['allow_retakes'] ? 'Disable Retakes' : 'Enable Retakes'; ?>
                                                            </button>
                                                        </form>
                                                    </td>
                                                </tr>
                                            <?php endwhile; ?>
                                        </tbody>
                                    </table>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </main>
        </div>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script src="https://cdn.datatables.net/1.13.6/js/jquery.dataTables.min.js"></script>
    <script src="https://cdn.datatables.net/1.13.6/js/dataTables.bootstrap5.min.js"></script>
    <script src="js/app.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
    <script>
        $(document).ready(function () {
            $('#topicsTable').DataTable({
                "paging": true,
                "searching": true,
                "ordering": true,
                "info": true,
                "lengthMenu": [10, 25, 50, 100],
                "pageLength": 10,
                "language": {
                    "search": "Search Topics:",
                    "lengthMenu": "Show _MENU_ entries"
                }
            });
        });
    </script>
</body>
</html>