<?php
session_start();
require 'db_config.php';
// Check if the user is an admin
if (!isset($_SESSION['admin_id']) || $_SESSION['user_type'] !== 'admin') {
    // If not an admin, redirect to a different page (e.g., sub-user dashboard)
    header("Location: sub_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">
                    <i class='fa-solid fa-bowl-food'></i>
                    <span class="links_name">Meals</span>
                </a>
            </li>
            <li>
                <a href="promotion_scanner.php">
                    <i class='bx bx-list-ul'></i>
                    <span class="links_name">Promotions</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>
      
</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
    // Get total allocated meals from users table
    $allocatedResult = $conn->query("SELECT SUM(meals_allocated) AS total_allocated FROM users");
    $total_allocated = 0;
    if ($allocatedResult && $row = $allocatedResult->fetch_assoc()) {
        $total_allocated = $row['total_allocated'];
    }

    // Get total deducted meals from meal_deductions table
    $deductedResult = $conn->query("SELECT COUNT(*) AS total_used FROM meal_deductions");
    $total_used = 0;
    if ($deductedResult && $row = $deductedResult->fetch_assoc()) {
        $total_used = $row['total_used'];
    }

    // Calculate remaining
    $total_remaining = $total_allocated - $total_used;
    ?>

    <p class="dashcount-name">Meals Status</p>
    <p>Total Meals Allocated: <?php echo $total_allocated; ?></p>
    <p>Total Meals Remaining: <?php echo $total_remaining; ?></p>
  </div>
</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>
