<div class='page-title'>
                      <div>
                      <marquee behavior='scroll' direction='left'><h1><?php echo $school_name; ?></h1></marquee>                          
                        <p class='text-left'><b><?php echo $current_term;?> - <?php echo $current_session; ?> Session</b></p>
                        <h2>Welcome, <?php echo $staff_fullname?></h2>                        
                      </div>                      
                    </div>
<?php
$query = "SELECT COUNT(*) AS total_student FROM `students`";
$run_query = mysqli_query($connection, $query);

// Fetch the result
$row = mysqli_fetch_assoc($run_query);

// Get the total number of students
$total_student = $row['total_student'];

?>
<?php
$query = "SELECT COUNT(*) AS total_subject FROM `school_subjects`";
$run_query = mysqli_query($connection, $query);

// Fetch the result
$row = mysqli_fetch_assoc($run_query);

// Get the total number of subjects
$total_subject = $row['total_subject'];

?>
<?php
$query = "SELECT COUNT(*) AS total_class FROM `classes`";
$run_query = mysqli_query($connection, $query);

// Fetch the result
$row = mysqli_fetch_assoc($run_query);

// Get the total number of classes
$total_class = $row['total_class'];

?>

<?php
$query = "SELECT COUNT(*) AS total_staff FROM `staff`";
$run_query = mysqli_query($connection, $query);

// Fetch the result
$row = mysqli_fetch_assoc($run_query);

// Get the total number of teachers
$total_staff = $row['total_staff'];

?>

<div class="row">
  <!-- Total Class Widget -->
  <div class="col-md-6 col-lg-3">
    <div class="widget-small total-class">
      <div class="widget-content">
        <i class="icon feather fas fa-school"></i>
        <div class="info">
          <h4><b>Class</b></h4>
          <p><b><?php echo $total_class; ?></b></p>
        </div>
      </div>
    </div>
  </div>

  <!-- Total Teacher Widget -->
  <div class="col-md-6 col-lg-3">
    <div class="widget-small total-teacher">
      <div class="widget-content">
        <i class="icon feather fa fa-user"></i>
        <div class="info">
          <h4><b>Staff</b></h4>
          <p><b><?php echo $total_staff; ?></b></p>
        </div>
      </div>
    </div>
  </div>

  <!-- Total Student Widget -->
  <div class="col-md-6 col-lg-3">
    <div class="widget-small total-student">
      <div class="widget-content">
        <i class="icon feather fas fa-users"></i>
        <div class="info">
          <h4><b>Student</b></h4>
          <p><b><?php echo $total_student; ?></b></p>
        </div>
      </div>
    </div>
  </div>

  <!-- Total Subject Widget -->
  <div class="col-md-6 col-lg-3">
    <div class="widget-small total-subject">
      <div class="widget-content">
        <i class="icon feather icon-book-open"></i>
        <div class="info">
          <h4><b>Subject</b></h4>
          <p><b><?php echo $total_subject; ?></b></p>
        </div>
      </div>
    </div>
  </div>
</div>

<style>
  /* General layout */
  .row {
    display: flex;
    flex-wrap: wrap;
    gap: 15px; /* Slightly larger gap for spacing */
  }

  .col-md-6 {
    flex: 0 0 48%; /* Wider columns on medium screens */
  }

  .col-lg-3 {
    flex: 0 0 23%; /* Wider columns on large screens */
  }

  @media (max-width: 768px) {
    .col-md-6 {
      flex: 0 0 100%;
    }
  }

  /* Widget Style */
  .widget-small {
    background: #fff;
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    padding: 15px; /* Increased padding for more space */
    display: flex;
    align-items: center;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    position: relative;
    height: 100%;
  }

  .widget-small:hover {
    transform: translateY(-4px);
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15);
  }

  /* Flexbox Layout inside Widget */
  .widget-content {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    width: 100%;
  }

  .widget-small .icon {
    font-size: 36px; /* Larger icon size */
    margin-right: 15px; /* Increased space between icon and text */
    color: #fff;
    background-color: #5c6bc0;
    padding: 12px; /* Slightly larger padding */
    border-radius: 50%;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
  }

  .widget-small .info {
    display: flex;
    flex-direction: column;
    justify-content: center;
  }

  .widget-small h4 {
    font-size: 1.1rem; /* Larger title font */
    color: #333;
    font-weight: bold; /* Bold title */
    margin-bottom: 8px;
    text-transform: uppercase;
  }

  .widget-small p {
    font-size: 1.8rem; /* Larger number font */
    color: #222;
    font-weight: bold; /* Bold number */
    margin: 0;
    letter-spacing: 0.3px;
  }

  /* Specific Color Themes for Each Widget */
  .total-class .icon {
    background-color: #ff7043;
  }

  .total-teacher .icon {
    background-color: #66bb6a;
  }

  .total-student .icon {
    background-color: #42a5f5;
  }

  .total-subject .icon {
    background-color: #ab47bc;
  }
</style>
