<?php
require 'db_config.php';

// Fetch all registered users
$sql = "SELECT * FROM users";
$result = $conn->query($sql);
?>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Mips Annual Conference Participants</title>
    <link rel="stylesheet" href="../Css/dash.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
    <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;700&display=swap" rel="stylesheet">
    <!-- Boxicons CDN Link -->
    <link href='https://unpkg.com/boxicons@2.0.7/css/boxicons.min.css' rel='stylesheet'>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.3.0/css/all.min.css">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
     <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
      <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css">
    <style>
    @import url('https://fonts.googleapis.com/css2?family=Material+Icons');
       

        h2 {
            text-align: center;
            margin-bottom: 20px;
        }

        table {
            width: 100%;
            border-collapse: collapse;
            margin-bottom: 20px;
        }

        table, th, td {
            border: 1px solid #ddd;
        }

        th, td {
            padding: 12px;
            text-align: left;
        }

        th {
            background-color: #007BFF;
            color: white;
        }

        tr:nth-child(even) {
            background-color: #f2f2f2;
        }

        tr:hover {
            background-color: #ddd;
        }

         .button-container {
            display: inline-flex;
            align-items: center;
            margin-bottom: 20px;

        }

        .button-container button {
            border: none;
            padding: 10px 20px;
            margin: 10px;
            cursor: pointer;
            font-size: 16px;
            border-radius: 5px;
            display: inline-flex;
            align-items: center;
            transition: background-color 0.3s;
        }

        .button-container .pdf-button {
            background-color: #FF4136;
            color: white;
        }

        .button-container .excel-button {
            background-color: #217346;
            color: white;
        }

        .button-container button:hover {
            filter: brightness(0.9);
        }

        .button-container .material-icons {
            margin-right: 8px;
        }

        button {
            background-color: #007BFF;
            color: white;
            border: none;
            padding: 5px 10px;
            cursor: pointer;
            font-size: 14px;
            border-radius: 3px;
            transition: background-color 0.3s;
        }

        button:hover {
            background-color: #0056b3;
        }
    </style>
</head>
<body>
<div class="sidebar">
    <div class="logo-details">
      <i class='bx bx-desktop'></i>
      <span class="logo_name">Mips</span>
    </div>
      <ul class="nav-links">
        <li>
          <a href="dashboard.php" >
            <i class='bx bx-grid-alt' ></i>
            <span class="links_name">Dashboard</span>
          </a>
        </li>
        <li>
          <a href="index.php" >
            <i class='bx bx-box' ></i>
            <span class="links_name">Register</span>
          </a>
        </li>
        <li>
          <a href="users.php" class="active">
            <i class='bx bx-list-ul' ></i>
            <span class="links_name">Participants</span>
          </a>
        </li>
         <li>
                <a href="attendance_scanner.php">
                    <i class='bx bxs-user-detail'></i>
                    <span class="links_name">Attendance</span>
                </a>
            </li>
            <li>
                <a href="meals_deduction.php" class="active">
                    <i class='bx bxs-user-detail'></i>
                    <span class="links_name">Meals</span>
                </a>
            </li>
        <li>
          <a href="sub_user.php">
            <i class="fas fa-user"></i>
            <span class="links_name">Create User</span>
          </a>
        </li>
        <li>
          <a href="Disubuser.php">
            <i class="fas fa-user-check"></i>
            <span class="links_name">Sub User</span>
          </a>
        </li>       
        <li class="log_out">
          <a href="logout.php">
            <i class='bx bx-log-out'></i>
            <span class="links_name">Log out</span>
          </a>
        </li>
      </ul>
  </div>
  <section class="home-section">
    <nav>
      <div class="sidebar-button">
        <i class='bx bx-menu sidebarBtn'></i>
        <span class="dashboard">Dashboard</span>
      </div>
      <div class="search-box">
        <input input type="text" id="search-input" class="form-control form-control-sm mx-2" placeholder="Search...">
        <i class='bx bx-search' ></i>
</div>
</nav>
 <div class="home-content">
    <div class="container">
        <br><br>
      
<input type="text" id="qrInput" style="position:absolute; top:-1000px;">

<script>
    // Automatically focus the hidden input field on page load
    document.getElementById("qrInput").focus();

    // Detect when the scanner inputs data and redirect
    document.getElementById("qrInput").addEventListener("input", function(e) {
        const scannedData = e.target.value;
        // Check if the scanned data is a URL, optionally validate it further
        if (scannedData.startsWith("http://") || scannedData.startsWith("https://")) {
            window.location.href = scannedData;
        }
    });
</script>


    <h2>2024 Annual Conference Participants</h2>
     <div class="button-container">
        
        <button class="excel-button" onclick="window.location.href='generate_all_excel.php'">
            <span class="material-icons">grid_on</span> Excel
        </button>
    </div>
    <table>
    <thead>
        <tr>
            <th>ID</th>
            <th>Participant Type</th>
            <th>Full Name</th>
            <th>Email</th>
            <th>Phone</th>
            <th>Payment Status</th>
            <th>Commitment Status</th>
            <th>Hotel</th>
            <th>Meals Allocated</th>
            <th>Membership Type</th>
            <th>Action</th>
        </tr>
    </thead>
    <tbody>
        <?php
        $sql = "SELECT id, participant_type, fullname, email, phone, payment_status, commitment_status, hotel, meals_allocated, membership_type, qr_code FROM users";
        $result = $conn->query($sql);

        if ($result->num_rows > 0) {
            while ($row = $result->fetch_assoc()) {
                echo "<tr>";
                echo "<td>" . $row['id'] . "</td>";
                echo "<td>" . $row['participant_type'] . "</td>";
                echo "<td>" . $row['fullname'] . "</td>";
                echo "<td>" . $row['email'] . "</td>";
                echo "<td>" . $row['phone'] . "</td>";
                echo "<td>" . $row['payment_status'] . "</td>";
                echo "<td>" . $row['commitment_status'] . "</td>";
                echo "<td>" . $row['hotel'] . "</td>";
                echo "<td>" . $row['meals_allocated'] . "</td>";
                echo "<td>" . $row['membership_type'] . "</td>";
                echo "<td><button onclick=\"window.location.href='generate_pdf.php?id=" . $row['id'] . "'\">QRCODE</button></td>";
                echo "</tr>";
            }
        } else {
            echo "<tr><td colspan='12'>No registered users found.</td></tr>";
        }
        ?>
    </tbody>
</table>

</div>
</div>

 </section>

  <script>
 
let sidebar = document.querySelector(".sidebar");
let sidebarBtn = document.querySelector(".sidebarBtn");
sidebarBtn.onclick = function() {
  sidebar.classList.toggle("active");
  if(sidebar.classList.contains("active")){
  sidebarBtn.classList.replace("bx-menu" ,"bx-menu-alt-right");
}else
  sidebarBtn.classList.replace("bx-menu-alt-right", "bx-menu");
}
 </script>
 
</body>
</html>

<?php
$conn->close();
?>
