<?php session_start();?>
<?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;
    }
}
</style>
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>

<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="my-students.php">
                        <div class="single-card success">
                            <div class="content-card">
                                <h4>45</h4>
                                <span>Total Students</span>
                            </div>
                            <div class="icon-card">
                                <!-- <label>$</label> -->
                                <i class="fa fa-users"></i>
                            </div>
                        </div>
                    </a>
                </div>

                <div class="col-lg-3 mt-3">
                    <a href="my-subjects.php">
                        <div class="single-card info">
                            <div class="content-card">
                                <h4>12</h4>
                                <span>Total Teachers</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="pending.php">
                        <div class="single-card notifications">
                            <div class="content-card">
                                <h4>3</h4>
                                <span>Pending Approval</span>
                            </div>
                            <div class="icon-card">
                                <i class="fa fa-clipboard-check"></i>
                            </div>
                        </div>
                    </a>
                </div>

                <div class="col-lg-3 mt-3">
                    <a href="all-graded.php">
                        <div class="single-card invoice">
                            <div class="content-card">
                                <h4>4</h4>
                                <span>Classes</span>
                            </div>
                            <div class="icon-card">
                                <i class="fa fa-school"></i>
                            </div>
                        </div>
                    </a>
                </div>
                                
            </div>
        </div>
    </div>
    <!-- Chart Section -->
    <canvas id="salesChart" width="800" height="300"></canvas>

    <script>
      const ctx = document.getElementById('salesChart').getContext('2d');
      new Chart(ctx, {
        type: 'bar',
        data: {
          labels: ['Jan', 'Feb', 'Mar', 'Apr', 'May'],
          datasets: [{
            label: 'Monthly Sales (₦)',
            data: [50000, 75000, 60000, 90000, 120000],
            backgroundColor: '#007bff'
          }]
        },
        options: {
          responsive: true,
          plugins: {
            legend: { display: false },
            title: {
              display: true,
              text: 'Monthly Sales Overview'
            }
          }
        }
      });

      function applyFilter() {
        alert("Filter logic can be added here based on selected fields.");
      }
    </script>
</div>





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