<?php
session_start();
require 'db_config.php';
// Check if the user is a sub-user
if (!isset($_SESSION['sub_user_id']) || $_SESSION['user_type'] !== 'sub_user') {
    // If not a sub-user, redirect to a different page (e.g., admin dashboard)
    header("Location: dashboard.php");
    exit();
}

?>

  
<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
<meta charset="UTF-8">
<link rel="stylesheet" href="../Css/dash.css">
    <!-- 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">
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
    <style>
       
        .dashcounter.color-one {
            background-color: #003366; /* Dark blue color */
            color: white; /* Change text color to white for better contrast */
            border: 1px solid #002244; /* Optional: Darker border for a clearer edge */
            border-radius: 15px; /* Adds curved edges with a 15px radius */
            padding: 20px;
        }
        .dashcounter.color-two {
            background-color: #b30000; /* Dark blue color */
            color: white; /* Change text color to white for better contrast */
            border: 1px solid #b30000; /* Optional: Darker border for a clearer edge */
            border-radius: 15px; /* Adds curved edges with a 15px radius */
            padding: 20px;
        }
         .dashcounter.color-three {
            background-color: #ff6600; /* Dark blue color */
            color: white; /* Change text color to white for better contrast */
            border: 1px solid #ff6600; /* Optional: Darker border for a clearer edge */
            border-radius: 15px; /* Adds curved edges with a 15px radius */
            padding: 20px; /* Padding to ensure text doesn't touch the edges */
        }
        .dashcounter.color-four {
            background-color: #006666; /* Dark blue color */
            color: white; /* Change text color to white for better contrast */
            border: 1px solid #006666; /* Optional: Darker border for a clearer edge */
            border-radius: 15px; /* Adds curved edges with a 15px radius */
            padding: 20px; /* Padding to ensure text doesn't touch the edges */
        }
        .large-icon {
            font-size: 50px; /* Adjust this value for the desired size */
        }
    </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" class="active">
            <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">
            <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 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>
<br><br><br><br><br><br>
<div class="row p-2">

<div class="col-xl-3 col-lg-6 col-md-6 col-sm-12 col-xs-12 animated fadeIn">
    <div data-toggle="tooltip" data-placement="bottom" data-title="Today's Date" class="dashcounter color-three p-4 box-hover">
        <p>
            <i class="fas fa-calendar-alt large-icon"></i>
        </p>
        <!-- Display today's date -->
        <?php
            // Get today's date
            $today = date("F j, Y"); 
            echo '<h3 class="counter">' . $today . '</h3>';
        ?>
        <p class="dashcount-name">Today's Date</p>
    </div>
</div>
<div class="col-xl-3 col-lg-6 col-md-6 col-sm-12 col-xs-12 animated fadeIn">
    <div data-toggle="tooltip" data-placement="bottom" data-title="Total Daily Activities" class="dashcounter color-one p-4 box-hover">
        <p>
            <i class="fas fa-user-check large-icon"></i>
        </p>
        <?php 
$query = "SELECT COUNT(*) AS total_users FROM users";
$query_run = mysqli_query($conn, $query);

$total_users = 0;
if ($query_run) {
    $result = mysqli_fetch_assoc($query_run);
    $total_users = $result['total_users'] ?? 0;
} else {
    echo "Error: " . mysqli_error($conn);
}?>
        <h3 class="counter"><?php echo $total_users; ?></h3>
        
        <p class="dashcount-name">Participants Registered</p>
    </div>
</div>
<div class="col-xl-3 col-lg-6 col-md-6 col-sm-12 col-xs-12 animated fadeIn">
    <div data-toggle="tooltip" data-placement="bottom" data-title="Total Meals" class="dashcounter color-two p-4 box-hover">
    <p>
        <i class="fas fa-concierge-bell large-icon"></i>
    </p>
    <?php
        // Query to get the total meals allocated
    $result = $conn->query("SELECT SUM(meals_allocated) AS total_meals_allocated, SUM(meals_remaining) AS total_meals_remaining FROM users");

    if ($result) {
        $row = $result->fetch_assoc();
        $total_meals_allocated = $row['total_meals_allocated'];
        $total_meals_remaining = $row['total_meals_remaining'];
    } else {
        $total_meals_allocated = 0;
        $total_meals_remaining = 0;
    }
    ?>

    <p class="dashcount-name">Meals Status</p>
    <p>Total Meals Allocated: <?php echo $total_meals_allocated; ?></p>
    <p>Total Meals Remaining: <?php echo $total_meals_remaining; ?></p>
</div>

</div>
<div style="width: 80%; margin: auto; padding: 50px 0;">
    <canvas id="usersChart"></canvas>
</div>
<?php
//Query to fetch users data
$sql = "SELECT participant_type, COUNT(*) as count FROM users GROUP BY participant_type";
$result = mysqli_query($conn, $sql);

// Prepare data for JavaScript
$participant_types = [];
$counts = [];

while ($row = mysqli_fetch_assoc($result)) {
    $participant_types[] = $row['participant_type'];
    $counts[] = $row['count'];
}
?>
</div>

 </section>
<script>
    // Fetching data from PHP
    const participantTypes = <?php echo json_encode($participant_types); ?>;
    const userCounts = <?php echo json_encode($counts); ?>;

    // Configuring and creating the chart
    const ctx = document.getElementById('usersChart').getContext('2d');
    const usersChart = new Chart(ctx, {
        type: 'bar', // You can change this to 'line', 'pie', etc.
        data: {
            labels: participantTypes,
            datasets: [{
                label: 'Number of Participants',
                data: userCounts,
                backgroundColor: 'rgba(54, 162, 235, 0.5)',
                borderColor: 'rgba(54, 162, 235, 1)',
                borderWidth: 1
            }]
        },
        options: {
            scales: {
                y: {
                    beginAtZero: true
                }
            },
            plugins: {
                legend: {
                    display: true
                }
            }
        }
    });
</script>
  <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>
