  <?php 
    include('menu_admin.php');
    include_once 'model/complaints_model.php';
    include_once 'model/posts_model.php';
    include_once 'model/posts_model.php';

    $users_model = new users_model();
    $complaints_model = new complaints_model();
    $posts_model = new posts_model();

    $num_posts = $posts_model->countActivePosts();
    $num_complaints = $complaints_model->countComplaints();
    $num_users = $users_model->getNumberofUsers();
    $num_categories = $posts_model->countNumcategories();
    $num_releases = $posts_model->count_releases();

  
?>
<!DOCTYPE html>
  <html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Dashboard</title>
    <link rel="apple-touch-icon" sizes="76x76" href="images/logo.png">
    <link rel="icon" type="image/png" href="images/logo.png">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <link rel="stylesheet" href="plugins/fontawesome-free/css/all.min.css">
    <link rel="stylesheet" href="dist/css/adminlte.min.css">
  </head>
  <body class="hold-transition sidebar-mini layout-fixed">

  




  <div class="content-wrapper">
    <section class="content">
      <div class="container-fluid">
        <div class="row">
          <!-- Services Card -->
          <div class="col-lg-3 col-6">
            <div class="small-box bg-info">
              <div class="inner">
                <h3><?php echo number_format($num_posts, 0); ?></h3>
                <p>Active Posts Services</p>
              </div>
              <div class="icon"><i class="fa fa-sticky-note"></i></div>
              <a href="posts.php" class="small-box-footer">View Posts <i class="fas fa-arrow-circle-right"></i></a>
            </div>
          </div>

          <!-- Active Bookings Card -->
          <div class="col-lg-3 col-6">
            <div class="small-box bg-success">
              <div class="inner">
                <h3><?php echo $num_complaints; ?></h3>
                <p>Active Complaints</p>
              </div>
              <div class="icon"><i class="fas fa-file-signature"></i></div>
              <a href="#" class="small-box-footer">View Complaints <i class="fas fa-arrow-circle-right"></i></a>
            </div>
          </div>

          <!-- View Bookings Card -->
          <div class="col-lg-3 col-6">
            <div class="small-box bg-info">
              <div class="inner">
                <h3><?php echo $num_categories?></h3>
                <p>View Categories</p>
              </div>
              <div class="icon"><i class="fas fa-calendar"></i></div>
              <a href="post_categories.php" class="small-box-footer">View Categories <i class="fas fa-arrow-circle-right"></i></a>
            </div>
          </div>

          <!-- System Users Card -->
          <div class="col-lg-3 col-6">
            <div class="small-box bg-info">
              <div class="inner">
                <h3><?php echo $num_users; ?></h3>
                <p>System Users</p>
              </div>
              <div class="icon"><i class="fa fa-users"></i></div>
              <a href="system_users.php" class="small-box-footer">View Users <i class="fas fa-arrow-circle-right"></i></a>
            </div>
          </div>
        </div>
        <div class="row">

          <div class="col-lg-3 col-6">
            <div class="small-box bg-info">
              <div class="inner">
                <h3>&nbsp;</h3>
                <p>&nbsp;</p>
              </div>
              <div class="icon"><i class="fa fa-tasks"></i></div>
              <a href="#" class="small-box-footer">&nbsp;</a>
            </div>
          </div>
        

          <div class="col-lg-3 col-6">
            <div class="small-box bg-info">
              <div class="inner">
                <h3>&nbsp;</h3>
                <p>&nbsp;</p>
              </div>
              <div class="icon"><i class="fa fa-tasks"></i></div>
              <a href="#" class="small-box-footer">&nbsp;</a>
            </div>
          </div>
        

          <div class="col-lg-3 col-6">
            <div class="small-box bg-info">
              <div class="inner">
                <h3>&nbsp;</h3>
                <p>&nbsp;</p>
              </div>
              <div class="icon"><i class="fa fa-tasks"></i></div>
              <a href="#" class="small-box-footer">&nbsp;</a>
            </div>
          </div>
        

        <div class="col-lg-3 col-6">
            <div class="small-box bg-info">
              <div class="inner">
                <h3><?php echo $num_releases; ?></h3>
                <p>Press Release</p>
              </div>
              <div class="icon"><i class="fas fa-newspaper"></i></div>
              <a href="releases.php" class="small-box-footer">Open Releases <i class="fas fa-arrow-circle-right"></i></a>
            </div>
          </div>
        </div>
          
        </div>

        <!-- Chart Section -->
        <div class="row mt-4">
          <div class="col-12">
            <div class="card">
              <div class="card-header bg-gradient-primary">
                <h3 class="card-title">Complaints Graph</h3>
              </div>
              <div class="card-body">
                <canvas id="bookingsChart" height="120"></canvas>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
  </div>

  <aside class="control-sidebar control-sidebar-dark"></aside>

  <!-- JS Libraries -->
  <script src="plugins/jquery/jquery.min.js"></script>
  <script src="plugins/jquery-ui/jquery-ui.min.js"></script>
  <script src="plugins/bootstrap/js/bootstrap.bundle.min.js"></script>
  <script src="dist/js/adminlte.js"></script>
  <script src="plugins/chart.js/Chart.min.js"></script>
  <script src="js/script.js"></script>

  <!-- Toast Function -->
  <script>
    function refuse(Role) {
      toastr.options = {
        "closeButton": true,
        "progressBar": false,
        "positionClass": "toast-top-right",
        "timeOut": "5000",
        "extendedTimeOut": "3000"
      };
      toastr.error(`You don't have permission to view ${Role} Transactions.`, "Permission Denied");
    }
  </script>

  <!-- Booking Chart Data -->
  <script>
  const bookingLabels = <?php echo json_encode($labels); ?>;
  const cancelledData = <?php echo json_encode($cancelled); ?>;
  const awaitingData = <?php echo json_encode($awaiting); ?>;
  const successfulData = <?php echo json_encode($successful); ?>;
  const missedData = <?php echo json_encode($missed); ?>;
  document.addEventListener('DOMContentLoaded', function () {
  const ctx = document.getElementById('bookingsChart').getContext('2d');

  new Chart(ctx, {
    type: 'bar', // Overall chart type
    data: {
      labels: bookingLabels,
      datasets: [
        {
          label: 'Cancelled',
          data: cancelledData,
          backgroundColor: 'rgba(255, 99, 132, 0.6)',
          borderColor: 'rgba(255, 99, 132, 1)',
          borderWidth: 1
        },
        {
          label: 'Missed / Skipped',
          data: missedData,
          backgroundColor: 'rgba(255, 159, 64, 0.6)',
          borderColor: 'rgba(255, 159, 64, 1)',
          borderWidth: 1
        },
        {
          label: 'Awaiting Confirmation',
          data: awaitingData,
          type: 'line',  // Line chart type
          borderColor: 'rgba(54, 162, 235, 1)', // Line color
          backgroundColor: 'rgba(54, 162, 235, 0.2)', // Transparent fill for line
          pointBackgroundColor: 'rgba(54, 162, 235, 1)', // Point color
          pointRadius: 4, // Make points noticeable
          fill: false,  // No fill under the line
          tension: 0.3, // Line smoothness
          borderWidth: 2,
        },
        {
          label: 'Successful',
          data: successfulData,
          backgroundColor: 'rgba(75, 192, 192, 0.6)',
          borderColor: 'rgba(75, 192, 192, 1)',
          borderWidth: 1
        }
      ]
    },
    options: {
      responsive: true,
      plugins: {
        legend: { position: 'top' },
        tooltip: { mode: 'index', intersect: false }
      },
      scales: {
        y: {
          beginAtZero: true,
          title: {
            display: true,
            text: 'Bookings Count'
          }
        }
      }
    }
  });
});

  </script>

  </body>
  </html>
