<?php

session_start();

if(!isset($_SESSION['user_id'])){

    header("Location: login.php");
    exit;

}


require_once "config.php";


$id=$_GET['id'] ?? 0;


if(!$id){

    header("Location: expenses_report.php");
    exit;

}



// CATEGORY DETAILS

$stmt=$pdo->prepare("

SELECT *

FROM expense_categories

WHERE id=?

");

$stmt->execute([$id]);

$category=$stmt->fetch();


if(!$category){

    die("Category not found");

}




// EXPENSES UNDER CATEGORY


$stmt=$pdo->prepare("

SELECT

expenses.*,

vendors.vendor_name,

expense_items.item_name,

expense_items.registration_no,

users.fullname


FROM expenses


LEFT JOIN vendors

ON expenses.vendor_id=vendors.id


LEFT JOIN expense_items

ON expenses.item_id=expense_items.id


LEFT JOIN users

ON expenses.created_by=users.id


WHERE expenses.category_id=?


ORDER BY expenses.expense_date DESC


");


$stmt->execute([$id]);


$expenses=$stmt->fetchAll();





// SUMMARY


$total=0;


foreach($expenses as $e){

    $total += $e['total'];

}


$count=count($expenses);



$average=0;


if($count){

    $average=$total/$count;

}





?>

<!DOCTYPE html>

<html>

<head>


<meta name="viewport" content="width=device-width,initial-scale=1">


<title>
Category Statement
</title>



<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600&display=swap" rel="stylesheet">


<link rel="stylesheet" href="assets/css/sidebar.css">


<link rel="stylesheet"

href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css">



<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>



<style>


*{

margin:0;
padding:0;
box-sizing:border-box;
font-family:Poppins;

}



body{

background:#f4f7f9;

transition:.3s;

}



body.dark{

background:#111827;
color:white;

}



.content{

margin-left:260px;

padding:25px;

}



.topbar{

display:flex;

justify-content:space-between;

align-items:center;

margin-bottom:20px;

}



.mobile-btn{

display:none;

font-size:25px;

cursor:pointer;

}



.toggle{

font-size:25px;

cursor:pointer;

color:#059669;

}





.cards{

display:grid;

grid-template-columns:
repeat(auto-fit,minmax(180px,1fr));

gap:15px;

}



.card{

background:white;

padding:18px;

border-radius:15px;

box-shadow:0 5px 20px #0002;

}



body.dark .card{

background:#1f2937;

}



.icon{

width:45px;

height:45px;

background:#ecfdf5;

color:#059669;

border-radius:12px;

display:flex;

align-items:center;

justify-content:center;

margin-bottom:10px;

}





.number{

font-size:22px;

font-weight:bold;

color:#059669;

}





.chart{

background:white;

margin-top:20px;

padding:20px;

border-radius:15px;

}



body.dark .chart{

background:#1f2937;

}




.table-box{

background:white;

padding:20px;

border-radius:15px;

margin-top:20px;

overflow:auto;

}



body.dark .table-box{

background:#1f2937;

}




table{

width:100%;

border-collapse:collapse;

}



th{

background:#065f46;

color:white;

padding:12px;

}



td{

padding:12px;

border-bottom:1px solid #eee;

}



.badge{

background:#dcfce7;

padding:5px 12px;

border-radius:20px;

font-size:12px;

}




.btn{

display:inline-block;

margin-top:20px;

background:#059669;

color:white;

padding:12px 20px;

border-radius:10px;

text-decoration:none;

}





.overlay{

display:none;

position:fixed;

inset:0;

background:#0008;

z-index:999;

}



.overlay.show{

display:block;

}





@media(max-width:768px){


.content{

margin-left:0;

padding:15px;

}


.mobile-btn{

display:block;

}



.sidebar{

left:-260px;

}


.sidebar.active{

left:0;

}





table,
thead,
tbody,
th,
td,
tr{

display:block;

}



thead{

display:none;

}



tbody tr{

background:white;

margin-bottom:15px;

padding:15px;

border-radius:15px;

}



body.dark tbody tr{

background:#1f2937;

}



tbody td{

display:flex;

justify-content:space-between;

border:0;

}



tbody td:before{

font-weight:bold;

color:#065f46;

}



}



</style>


</head>


<body>



<?php include "sidebar.php"; ?>



<div class="overlay"

id="overlay"

onclick="closeMenu()">

</div>





<div class="content">



<div class="topbar">


<i class="fa fa-bars mobile-btn"
onclick="openMenu()"></i>



<h2>

<i class="fa fa-folder-open"></i>

<?=$category['category_name']?> Statement

</h2>



<i class="fa fa-moon toggle"
onclick="theme()"></i>


</div>






<div class="cards">


<div class="card">

<div class="icon">

<i class="fa fa-money-bill"></i>

</div>

<p>Total Spent</p>

<div class="number">

MWK <?=number_format($total)?>

</div>


</div>






<div class="card">

<div class="icon">

<i class="fa fa-list"></i>

</div>


<p>Transactions</p>


<div class="number">

<?=$count?>

</div>


</div>







<div class="card">

<div class="icon">

<i class="fa fa-calculator"></i>

</div>


<p>Average Expense</p>


<div class="number">

MWK <?=number_format($average)?>

</div>


</div>


</div>






<div class="chart">


<h3>

Expense Trend

</h3>


<canvas id="chart"></canvas>


</div>






<div class="table-box">


<table>


<thead>

<tr>

<th>Date</th>

<th>Item</th>

<th>Vendor</th>

<th>Description</th>

<th>Amount</th>

<th>Payment</th>


</tr>


</thead>


<tbody>



<?php foreach($expenses as $e){ ?>


<tr>


<td>

<?=date("d M Y", strtotime($e['expense_date']))?>

</td>



<td>


<?=$e['item_name'] ?? 'None'?>


<?php if($e['registration_no']){ ?>

<br>

<small>

<?=$e['registration_no']?>

</small>

<?php } ?>


</td>




<td>

<?=$e['vendor_name'] ?? 'N/A'?>

</td>




<td>

<?=$e['description']?>

</td>



<td>

MWK <?=number_format($e['total'])?>

</td>



<td>


<span class="badge">

<?=$e['payment_method']?>

</span>


</td>


</tr>



<?php } ?>



</tbody>


</table>



</div>






<a href="javascript:history.back()" class="btn">

<i class="fa fa-arrow-left"></i>

Back

</a>



</div>







<script>


function openMenu(){

document.getElementById("sidebar")
.classList.add("active");


document.getElementById("overlay")
.classList.add("show");

}




function closeMenu(){

document.getElementById("sidebar")
.classList.remove("active");


document.getElementById("overlay")
.classList.remove("show");

}




function theme(){

document.body.classList.toggle("dark");


localStorage.setItem(
"dark",
document.body.classList.contains("dark")
);


}



if(localStorage.getItem("dark")=="true"){

document.body.classList.add("dark");

}





new Chart(
document.getElementById("chart"),
{

type:"line",

data:{

labels:[

<?php

foreach($expenses as $e){

echo "'".$e['expense_date']."',";

}

?>

],


datasets:[{

label:"Expense Amount",

data:[

<?php

foreach($expenses as $e){

echo $e['total'].",";

}

?>

]

}]

}

}

);



</script>



</body>

</html>