<?php

session_start();

if(!isset($_SESSION['user_id'])){
    header("Location: login.php");
    exit;
}

require_once "config.php";


// SAVE BUDGET

if(isset($_POST['save_budget'])){


    $category_id=$_POST['category_id'];
    $budget_limit=$_POST['budget_limit'];


    $stmt=$pdo->prepare("
        UPDATE expense_categories
        SET budget_limit=?
        WHERE id=?
    ");


    $stmt->execute([
        $budget_limit,
        $category_id
    ]);


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

}



// GET BUDGET DATA

$stmt=$pdo->query("

SELECT

c.id,
c.category_name,
c.budget_limit,

COALESCE(SUM(e.total),0) spent,

(c.budget_limit-COALESCE(SUM(e.total),0)) balance


FROM expense_categories c


LEFT JOIN expenses e

ON c.id=e.category_id


GROUP BY c.id


ORDER BY c.category_name


");


$budgets=$stmt->fetchAll();



$totalBudget=array_sum(array_column($budgets,'budget_limit'));

$totalSpent=array_sum(array_column($budgets,'spent'));

$totalBalance=array_sum(array_column($budgets,'balance'));



?>


<!DOCTYPE html>

<html>

<head>


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


<title>
Budget Allocation
</title>



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


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


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



<style>


*{

box-sizing:border-box;
font-family:Poppins;

}


body{

margin:0;
background:#f4f7f9;

}



body.dark{

background:#111827;
color:white;

}



.content{

margin-left:260px;
padding:25px;

}



.header{

display:flex;
justify-content:space-between;
align-items:center;

}



.mobile-btn{

display:none;
font-size:25px;
cursor:pointer;

}



.cards{

display:grid;

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

gap:20px;

margin-top:25px;

}



.card{


background:white;

padding:20px;

border-radius:18px;

box-shadow:
0 8px 25px #0002;

}



body.dark .card,
body.dark table{

background:#1f2937;
color:white;

}



.card h4{

color:#6b7280;

}



.amount{

font-size:25px;

font-weight:700;

color:#059669;

}





.search{

margin-top:25px;

}


.search input{


width:100%;

padding:14px;

border-radius:15px;

border:1px solid #ddd;

}



.table-box{

overflow-x:auto;

}



table{


width:100%;

margin-top:20px;

border-collapse:collapse;

background:white;

border-radius:15px;

overflow:hidden;

}



th{


background:#059669;

color:white;

padding:15px;

}



td{

padding:15px;

border-bottom:1px solid #eee;

}



input{

width:120px;

padding:10px;

border-radius:10px;

border:1px solid #ddd;

}



button{

background:#059669;

color:white;

border:0;

padding:10px 15px;

border-radius:10px;

cursor:pointer;

}



.progress{

height:12px;

background:#e5e7eb;

border-radius:20px;

overflow:hidden;

}



.bar{

height:100%;

background:#22c55e;

transition:1s;

}



.orange{

background:#f59e0b;

}



.red{

background:#ef4444;

}




.badge{


padding:6px 12px;

border-radius:20px;

font-size:12px;

}



.good{

background:#dcfce7;
color:#166534;

}



.warning{

background:#fef3c7;
color:#92400e;

}



.over{

background:#fee2e2;
color:#991b1b;

}





.mobile-card{

display:none;

}





@media(max-width:768px){


.sidebar{

left:-260px;

}


.sidebar.active{

left:0;

}



.content{

margin-left:0;

padding:15px;

}



.mobile-btn{

display:block;

}



.table-box table,
.table-box thead,
.table-box tbody,
.table-box th,
.table-box td,
.table-box tr{

display:block;

}



table{

background:none;

}



thead{

display:none;

}



tr{


background:white;

margin-bottom:15px;

border-radius:15px;

padding:15px;

box-shadow:0 5px 15px #0001;

}



body.dark tr{

background:#1f2937;

}



td{

border:0;

display:flex;

justify-content:space-between;

}



td:before{

font-weight:bold;

content:attr(data-label);

}



form{

display:flex;

gap:5px;

}



}


</style>


</head>


<body>


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


<div class="content">


<div class="header">


<h2>

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

Budget Allocations

</h2>



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


</div>




<div class="cards">


<div class="card">

<h4>Total Budget</h4>

<div class="amount">

 <?=number_format($totalBudget)?>

</div>


</div>



<div class="card">

<h4>Total Spent</h4>

<div class="amount">

 <?=number_format($totalSpent)?>

</div>

</div>




<div class="card">

<h4>Remaining</h4>

<div class="amount">

 <?=number_format($totalBalance)?>

</div>

</div>



</div>





<div class="search">

<input type="text"
id="search"
placeholder="Search category..."
onkeyup="filterTable()">

</div>




<div class="table-box">


<table id="budgetTable">


<thead>

<tr>

<th>Category</th>
<th>Budget</th>
<th>Spent</th>
<th>Balance</th>
<th>Usage</th>
<th>Status</th>


</tr>


</thead>



<tbody>


<?php foreach($budgets as $b){


$percent=0;


if($b['budget_limit']>0){

$percent=round(($b['spent']/$b['budget_limit'])*100);

}


$class="";


$status="Within Budget";


if($percent>=100){

$class="red";
$status="Over Budget";

}
elseif($percent>=70){

$class="orange";
$status="Warning";

}



?>


<tr>


<td data-label="Category">

<a href="category_details.php?id=<?=$b['id']?>">

<?=htmlspecialchars($b['category_name'])?>

</a>

</td>



<td data-label="Budget">


<form method="post">


<input type="hidden"
name="category_id"
value="<?=$b['id']?>">


<input type="number"
name="budget_limit"
value="<?=$b['budget_limit']?>">


<button name="save_budget">

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

</button>


</form>


</td>




<td data-label="Spent">

 <?=number_format($b['spent'])?>

</td>



<td data-label="Balance">

 <?=number_format($b['balance'])?>

</td>



<td data-label="Usage">


<div class="progress">

<div class="bar <?=$class?>"
style="width:<?=min($percent,100)?>%">
</div>

</div>


<?=$percent?>%

</td>



<td data-label="Status">


<span class="badge <?=str_replace(' ','-',strtolower($status))?>">

<?=$status?>

</span>


</td>



</tr>


<?php } ?>


</tbody>


</table>


</div>


</div>





<script>


function filterTable(){

let value=document
.getElementById("search")
.value
.toLowerCase();


document
.querySelectorAll("#budgetTable tbody tr")
.forEach(row=>{


row.style.display=
row.innerText
.toLowerCase()
.includes(value)
?
"block"
:
"none";


});


}



function openMenu(){

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

}



</script>


</body>

</html>