<?php include'../includes/session.php';?>
<?php include'includes/header.php';?>
<?php include'includes/sidebar.php';?>
<?php include'includes/navbar.php';?>
<?php include'includes/functions.php';?>
<style>
.sideNav{height:118vh;}
.insider{
  padding-left: 260px;
}
@media(max-width: 992px){
  .sideNav{
    height: 128vh;
  }
  .insider{
    margin-top: -50px;
    padding-left: 15px!important;
    padding-right: 15px!important;
  }
}
.the-logo{
  margin-top: 0!important;
}

@media(max-width: 992px){
  .icon-card i{
    font-size: 46px;
  }
  .content-card h4{
    font-size: 20px;
  }
  .content-card span{
    font-size: 18px;
  }
}
</style>
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<?php

// Total Student
$totalStd = $pdo->query("SELECT COUNT(*) FROM student")->fetchColumn();

// Total Staff
$totalStaff = $pdo->query("SELECT COUNT(*) FROM staff")->fetchColumn();

// Total Subject
$totalSub = $pdo->query("SELECT COUNT(DISTINCT(subName)) FROM subject")->fetchColumn();

// Total Class
$totalClass = $pdo->query("SELECT COUNT(*) FROM classes")->fetchColumn();
?>
<div class="insider" style="margin-top: -15px;">
    <div class="container">
        <span style="font-weight: bold;">Hi <?php echo $username;?>, Welcome.</span>
        <div class="all-cards">
            <div class="row row-cols-2">
                <div class="col-lg-3 mt-3">
                    <a href="students.php">
                        <div class="single-card success">
                            <div class="content-card">
                                <h4><?=$totalStd?></h4>
                                <span>Total Students</span>
                            </div>
                            <div class="icon-card">
                                <!-- <label>$</label> -->
                                <i class="fa fa-user-graduate"></i>
                            </div>
                        </div>
                    </a>
                </div>

                <div class="col-lg-3 mt-3">
                    <a href="staff.php">
                        <div class="single-card info">
                            <div class="content-card">
                                <h4><?=$totalStaff?></h4>
                                <span>Total Staffs</span>
                            </div>
                            <div class="icon-card">
                                <i class="fa fa-chalkboard-teacher"></i>
                            </div>
                        </div>
                    </a>
                </div>

                <div class="col-lg-3 mt-3">
                    <a href="subject.php">
                        <div class="single-card warning">
                            <div class="content-card">
                                <h4><?=$totalSub?></h4>
                                <span>Total Subjects</span>
                            </div>
                            <div class="icon-card">
                                <i class="fa fa-book-open"></i>
                            </div>
                        </div>
                    </a>
                </div>

                <div class="col-lg-3 mt-3">
                    <a href="class.php">
                        <div class="single-card primary">
                            <div class="content-card">
                                <h4><?=$totalClass?></h4>
                                <span>Total Class</span>
                            </div>
                            <div class="icon-card">
                                <i class="fa fa-school"></i>
                            </div>
                        </div>
                    </a>
                </div>
                                
            </div>
        </div>
    </div>
    <!-- Chart Section (Responsive Container) -->
    <div class="chart-container" style="position: relative; width: 100%; max-width: 100%; margin: 20px auto; background: #fff; padding: 15px; border-radius: 10px; box-shadow: 0 2px 8px rgba(0,0,0,0.1);">
      <h5 class="text-center mb-3" style="font-weight: 600; color: #007bff;">
        <i class="fa fa-chart-bar"></i> <span>DE-GOODNESS Dashboard Overview</span>
      </h5>
      <canvas id="schoolOverviewChart"></canvas>
    </div>

    <script>
      // Handle possible PHP output safely
      const totalStd = <?= isset($totalStd) ? (int)$totalStd : 0 ?>;
      const totalStaff = <?= isset($totalStaff) ? (int)$totalStaff : 0 ?>;
      const totalSub = <?= isset($totalSub) ? (int)$totalSub : 0 ?>;
      const totalClass = <?= isset($totalClass) ? (int)$totalClass : 0 ?>;
      const principalCount = 2; // static or dynamic if needed

      const ctx = document.getElementById('schoolOverviewChart').getContext('2d');

      new Chart(ctx, {
        type: 'bar',
        data: {
          labels: ['Students', 'Staffs', 'Subjects', 'Classes', 'Principal'],
          datasets: [{
            label: 'Total Records',
            data: [totalStd, totalStaff, totalSub, totalClass, principalCount],
            backgroundColor: [
              '#007bff',
              '#28a745',
              '#ffc107',
              '#17a2b8',
              '#6f42c1'
            ],
            borderRadius: 6
          }]
        },
        options: {
          responsive: true,
          maintainAspectRatio: false,
          scales: {
            y: {
              beginAtZero: true,
              ticks: { color: '#333', stepSize: 1 }
            },
            x: {
              ticks: { color: '#333' }
            }
          },
          plugins: {
            legend: { display: false },
            title: {
              display: false
            },
            tooltip: {
              backgroundColor: '#007bff',
              titleColor: '#fff',
              bodyColor: '#fff',
              borderWidth: 1,
              borderColor: '#0062cc'
            }
          }
        }
      });
    </script>
</div>

<!-- Responsive Fix -->
<style>
  .chart-container {
    width: 100%;
    max-width: 100%;
    height: 300px;
    min-height: 300px;
  }

  @media (max-width: 768px) {
    .chart-container {
      padding: 10px;
      min-height: 250px;
    }
  }
</style>




<?php include'includes/footer.php';?>