<?php
error_reporting(E_ALL);
ini_set('display_errors', 1);
session_start();
include "../include/config.php";
$userlogin=$_SESSION['studentid'];
$intake=$_SESSION['intake'];
if (isset($_SESSION['studentid'])){?>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title></title>
    <link rel="stylesheet" href="../../boostrap/1.css">
    <link rel="stylesheet" href="../../boostrap/2.css">
      <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  <link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@300&family=Source+Sans+Pro:wght@300&display=swap" rel="stylesheet">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
   <link rel="icon" href="favicon.png" type="image/png">
   <!-- jQuery -->
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

<!-- Bootstrap JS -->
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>

    <meta name="theme-color" content="var(--primary)">
      <script src='https://kit.fontawesome.com/a076d05399.js' crossorigin='anonymous'></script>
      <script src='https://kit.fontawesome.com/a076d05399.js' crossorigin='anonymous'></script>
      <script src="https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
      <script src='https://kit.fontawesome.com/a076d05399.js' crossorigin='anonymous'></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-Fy6S3B9q64WdZWQUiU+q4/2Lc9npb8tCaSX9FK7E8HnRr0Jz8D6OP9dO5Vg3Q9ct" crossorigin="anonymous"></script><link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/css/bootstrap.min.css" integrity="sha384-xOolHFLEh07PJGoPkLv1IbcEPTNtaed2xpHsD9ESMhqIYd0nLMwNLD69Npy4HI+N" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Signika+Negative:wght@300..700&display=swap" rel="stylesheet">
<link rel="stylesheet" href="res/bootstrap@5.2.0.min.css">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Source+Sans+Pro&display=swap" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.2/dist/umd/popper.min.js" integrity="sha384-IQsoLXl5PILFhosVNubq5LC7Qb9DXgDA9i+tQ8Zj3iwWAwPtgFTxbJ8NT4GN1R8p" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.min.js" integrity="sha384-cVKIPhGWiC2Al4u+LWgxfKTRIcfu0JTxR+EQDz/bgldoEyl4H0zUF0QKbrJ0EcQF" crossorigin="anonymous"></script>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Rowdies:wght@300;400;700&display=swap" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<style>
    body{
        padding: 0px;
        margin:0px;
        
  font-size:16px;
  width:100%;
  background:white;
    }
    nav{
        background:var(--primary);
        line-height: 60px;
    }
     nav a{
        
        color:white;
        text-decoration:none;
    }
    nav a:hover{
        color: orange;
    }
    .pro,.money{
        display: flex;
        justify-content:center;

    }
    .pro p{
     
      margin-left:30px;
   
    }
    @media only screen and (max-width:500px){
         nav a{
        margin-left:%;
        color:white;
        text-decoration:none;
    }
    nav a:hover{
        color: orange;
    }
    .header{
      
      width:100%;
    }
    }
    .iterm{
        justify-content: center;
        display: flex;
        flex-wrap: wrap;
        margin-top:10px;
        margin-top: 10px;
        color: white;
        overflow: scroll;
        height:100%;
        text-align: center;
    }
    .iterm1{
    
    padding:20px;
    padding-left:30px;
    padding-right:30px;
    }
    .iterm a{
        width:45%;
        height :%;
        box-shadow:rgba(99, 99, 99, 0.4) 0px 2px 8px 0px;
        padding: 10px;
        text-align: center;
        border-radius: 5px;
        margin: 5px;
        background: white;
        text-decoration: none;
        border:1px solid gray;
        
        
    }
    

    .header{
        margin-top:px;
        background:var(--primary);
        background-size:cover;
        background-blend-mode:darken;
        height: 200px;
       
       width:100%;
        
        color: white;
        padding: px;
        text-align: center ;
    
      
        
    }

    .header{
      
      width:100%;
    }
    part{
      margin-top: -50px;
      position: absolute;
      background: white;
      width:93%;
      height:210px;
      top: 60px;
      left: 50%;
      transform: translate(-50%);
      color: gray;
      display: block;
      border-radius: 6px;
    }
.header img{
  width:80px;
  height: 80px;
  border-radius: 50%;
  border: 5px solid white;
  float:right;
  margin-right:15px;
  
}
    
    .iterm_box img{
      
    }
    
    .iterm  i{
      font-size: 20px;
      background:#cc1717bb;
      padding: 9px;
      border-radius: 5px;
    }
    .iterm_box p{
      font-size: 13px;
      margin-top: 5px;
      color:var(--primary);
      margin-bottom: 10px;
    }
    .btn{
      background:#cc1717bb;
      border:none;
      border-radius:2px;
      outline:none;
      color: white;
    }
    .div .btn{
       
      background: transparent;
      border:;
      border-radius:0px;
      padding:7px;
      border-bottom: 2px solid white;
      outline:none;
    }  
    .div .btn:hover{
       border:none;
       outline:none;
       
       background: transparent;
       border-bottom: 2px solid black;
       border-radius:2px;
       box-shadow:none;
     } 
    .dash{
      color: white;
      font-weight: 900px;
      text-align : center ;
    }
    .money{
        justify-content:;
        display:flex;
        flex-wrap:wrap;
        width:100%;
       
   
    }
    .money .card1{
        width:60px;
        margin-left:10px;
        box-shadow:2px 1px 10px 0px rgb(199, 235, 202);
        margin-top:-10px;
     
    }
    #btn{
    background: orange;
    }
   
   .in{
    padding:20px;
    
   }
   .in .card2{
    width:46%;
    margin:5px;
    text-align:center;
    padding:5px;
    box-shadow: rgba(0, 0, 0, 0.16) 0px 1px 4px;
    border-radius:6px;
    background:;
    color:var(--primary);
    border:none;
    font-size:14px;
    height:100%;
   }
   .in .card2 img{
    font-size:30px;
    color:#cc1717bb;
    opacity:0.4;
   }
   .loading {
            display: none;
            text-align: center;
            margin: 1rem 0;
        }

    .content{
        margin-left:210px;
        padding:10px;
    }
</style>
<body>

  
  
      


    <?php include "../include/nav.php";?>

  
      
<div class="content" style="">
    <br>
<div class="in">

<?php
// ✅ Fix query
$query = "SELECT id, payid, fee_type, studentid, amount, intake, mobile, year, status, period, paidday 
          FROM payments 
          WHERE studentid = '$userlogin'
          GROUP BY period
          ORDER BY year ASC, period ASC";

$result = mysqli_query($conn, $query);

$fees = [];

while ($row = mysqli_fetch_assoc($result)) {
    $key = $row['year'] . ' - ' . $row['period'];
    $fees[$key][] = $row;
}

// ✅ Section Title
echo "<div style='margin:25px 0; padding:12px; background:#f8f9fa; border-left:5px solid #0a6ebd; border-radius:6px;'>
        <h4 style='margin:0; color:var(--primary); font-weight:bold;'>
            <img src='icons/money.png' width='40px' style='margin-right:8px; vertical-align:middle;'/>
            Fees Paid Summary
        </h4>
      </div>";

foreach ($fees as $group => $rows) {
    echo "<p style='font-weight:bold; color:#444; margin-top:15px;'>Year-Period: $group</p>";
    
    echo "<table class='table' style='width:100%; border-collapse:collapse; margin-bottom:20px;'>";
    echo "<thead style='background:#f1f1f1; color:var(--primary);'>";
    echo "<tr>
            <th style='padding:8px; border:1px solid #ddd;'>Fee Type</th>
            <th style='padding:8px; border:1px solid #ddd;'>Amount</th>
            <th style='padding:8px; border:1px solid #ddd;'>Status</th>
            <th style='padding:8px; border:1px solid #ddd;'>Paid Day</th>
          </tr>";
    echo "</thead><tbody>";
    
    $total = 0;
    foreach ($rows as $r) {
        $statusColor = ($r['status'] == 'Paid') ? "#28a745" : "var(--primary)";
        $total += $r['amount'];
        
        echo "<tr>";
        echo "<td style='padding:8px; border:1px solid #ddd; color:#0a6ebd;'>{$r['fee_type']}</td>";
        echo "<td style='padding:8px; border:1px solid #ddd; font-weight:bold;'>K{$r['amount']}</td>";
        echo "<td style='padding:8px; border:1px solid #ddd; color:$statusColor;'>{$r['status']}</td>";
        echo "<td style='padding:8px; border:1px solid #ddd; color:#555;'>{$r['paidday']}</td>";
        echo "</tr>";
    }

    // ✅ Total per period
    echo "<tr style='background:#f8f9fa; font-weight:bold;'>";
    echo "<td colspan='3' style='padding:8px; border:1px solid #ddd; text-align:right;'>Total Paid:</td>";
    echo "<td style='padding:8px; border:1px solid #ddd; color:#28a745;'>K$total</td>";
    echo "</tr>";

    echo "</tbody></table>";
}
?>
       
       </div> 
    
             
        
</body>
</html>
<?php
}else {
  header("location:../index.php");
}

?>


