<?php
session_start();
if (!isset($_SESSION['AccAdminID'])) {
    header('Location: login.html');
    exit();
}

include("connection.php");
$AccID = $_SESSION['AccAdminID'];

// Fetching the user's name
$sql = "SELECT Admin_Name FROM admin WHERE Admin_ID = '$AccID'";
$result = mysqli_query($conn, $sql);
$user = mysqli_fetch_assoc($result);
$userName = $user['Admin_Name'];

if ($conn->connect_error) {
    die("Connection failed: " . $conn->connect_error);
}

// Fetch data for Bar Chart (order table) 
$sql1 = "SELECT Category_Type, COUNT(Category_Type) as Quantity FROM orders GROUP BY Category_Type";

$result1 = $conn->query($sql1);

$labels1 = [];
$data1 = [];

if ($result1->num_rows > 0) {
    while($row = $result1->fetch_assoc()) {
        $labels1[] = $row["Category_Type"];
        $data1[] = $row["Quantity"];
    }
}

// Fetch data for Pie Chart (report table)
$sql2 = "SELECT Department, COUNT(Department) as Quantity FROM report GROUP BY Department";
$result2 = $conn->query($sql2);

$labels2 = [];
$data2 = [];

if ($result2->num_rows > 0) {
    while($row = $result2->fetch_assoc()) {
        $labels2[] = $row["Department"];
        $data2[] = $row["Quantity"];
    }
}

// Close MySQL connection
$conn->close();
?>

<!DOCTYPE html>
<html>
<head>
    <title>Report | UITM BAZAAR</title>
    <link rel="stylesheet" href="style.css">
    <link rel="stylesheet" href="style2.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/4.4.1/chart.umd.js"></script>
    <style>
        body {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            height: 100vh;
        }
        .chart-container {
            margin-top: 300px;
            margin-bottom: 100px;
            display: flex;
            justify-content: center;
            align-items: center;
            flex-wrap: wrap;
            width: 100%;
        }
        .chart-box {
            flex: 1 1 calc(33.333% - 20px);
            margin: 10px;
            max-width: calc(33.333% - 20px);
        }
        .chart-box #chart1{
            margin-bottom: 100px;
        }
        canvas {
            width: 100% !important;
            height: auto !important;
        }
    </style>
</head>
<body>

    <aside class="sidebar">
      <div class="logo">
        <img src="pic/profiles.png" alt="logo">
        <h2><?php echo $userName; ?>'s</h2>
      </div>
      <ul class="links">
        <h4>Main Menu</h4>
        <li>
          <span class="material-symbols-outlined"><img src="pic/home.png"></span>
          <a href="adminmenu.php">Main Menu</a>
        </li>
        <hr>
        <h4>Advanced</h4>
        <li>
          <span class="material-symbols-outlined"><img src="pic/admin.png"></span>
          <a href="newAdmin.php">New Admin Acc</a>
        </li>
        <hr>
        <h4>Account</h4>
        <li>
          <span class="material-symbols-outlined"><img src="pic/profile2.png"></span>
          <a href="adminProfile.php">Profile</a>
        </li>
        <hr>
        <h4>Sign Out</h4>
        <li class="logout-link">
          <span class="material-symbols-outlined"><i class="fa-solid fa-right-from-bracket"></i></span>
          <a href="logoutAdmin.php">Logout</a>
        </li>
      </ul>
    </aside>
<header class = "header">
        <a href= "adminmenu.php" class = "logo">
        <span><?php echo $userName; ?>'s</span></a>
        
        <i class="fa-solid fa-bars" id="menu-icon"></i>
        
        <nav class="navbar">            
            <a href="report.php">Report</a>    
            <a href="renterList.php">Renter List</a>    
            <a href="viewFeedback.php">Feedback</a>
            <a href="approval.php">Order</a>
            <a href="postEvents.php">Events</a>
            </nav>        
    </header>

<div class="chart-container">
    <div class="chart-box" >
        <canvas id="chart1"></canvas>
    </div>
    <div class="chart-box">
        <canvas id="chart2"></canvas>
    </div>
</div>

<footer class="footer" id="footer">
        <p class="copyright">
            NextGen Techne © | All Rights Reserved
        </p>
</footer>

<script>
// Retrieve the labels and data for the bar chart from PHP variables
var barLabels = <?php echo json_encode($labels1); ?>;
var barData = <?php echo json_encode($data1); ?>;
// Define the colors to be used for the bar chart
var barColors = ["blue", "green", "red", "orange", "brown"];

// Retrieve the labels and data for the pie chart from PHP variables
var pieLabels = <?php echo json_encode($labels2); ?>;
var pieData = <?php echo json_encode($data2); ?>;
// Define the colors to be used for the pie chart
var pieColors = ["blue", "green", "red", "orange", "brown", "purple"];

// Debugging: insert the values to the console to verify data
console.log("Bar Chart Labels:", barLabels);
console.log("Bar Chart Data:", barData);
console.log("Pie Chart Labels:", pieLabels);
console.log("Pie Chart Data:", pieData);

// Bar Chart
new Chart(document.getElementById('chart1'), {
  type: 'bar', //set chart type
  data: 
  {
    labels: barLabels, //set label for x-axis
    datasets: 
    [{
      backgroundColor: barColors, //set color for each bar
      data: barData, // set the data for the bar
    }]
  },
  options:
  {
    plugins: 
    {
      legend: { display: false }, //hide the legend
      title: 
      {
        display: true,
        text: 'TYPE OF RENTER CATEGORY', //display chart title
        color: 'white',
        font: {
          size: 24 // Change the title font size here
        }
      }
    },
    scales: {
      x: {
        title: {
          display: true,
          text: 'Renter Category',
          color: 'white',
          font: {
            size: 18 // Change the x-axis title font size here
          }
        }
      },
      y:
      {
        title: 
        {
          display: true,
          text: 'Quantity',
          color: 'white',
          font: {
            size: 18 // Change the y-axis title font size here
          }
        }
      }
    }
  }
});

// Pie Chart
new Chart(document.getElementById('chart2'), {
  type: 'pie',
  data: {
    labels: pieLabels,
    datasets: [{
      backgroundColor: pieColors,
      data: pieData,
    }]
  },
  options: {
    plugins: {
      title: {
        display: true,
        text: 'Report from Department',
        color: 'white',
        font: {
          size: 24 // Change the title font size here
        }
      }
    }
  }
});
</script>

</body>
</html>
