<?php

session_start();


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

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

}


require_once "config.php";




// SEARCH

$search=$_GET['search'] ?? '';



$sql="

SELECT *

FROM expense_categories

";



$params=[];



if($search!=""){


$sql.="

WHERE category_name LIKE ?

OR description LIKE ?

";


$params=[

"%$search%",
"%$search%"

];


}



$sql.=" ORDER BY id DESC";




$stmt=$pdo->prepare($sql);

$stmt->execute($params);


$categories=$stmt->fetchAll();





// STATISTICS


$totalCategories=$pdo->query("

SELECT COUNT(*)

FROM expense_categories

")->fetchColumn();




$activeCategories=$pdo->query("

SELECT COUNT(*)

FROM expense_categories

WHERE status=1

")->fetchColumn();





$inactiveCategories=$pdo->query("

SELECT COUNT(*)

FROM expense_categories

WHERE status=0

")->fetchColumn();



?>



<!DOCTYPE html>

<html>

<head>


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


<title>
Expense Categories
</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">



<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;
align-items:center;
justify-content:space-between;
margin-bottom:20px;

}




.mobile-btn{

display:none;
font-size:25px;
cursor:pointer;
color:#065f46;

}



.toggle{

font-size:25px;
cursor:pointer;
color:#059669;

}





.btn{

background:#059669;
color:white;
padding:10px 18px;
border-radius:10px;
text-decoration:none;

}





.cards{

display:grid;

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

gap:15px;

margin-bottom:20px;

}



.card{

background:white;
padding:18px;
border-radius:15px;
box-shadow:0 5px 20px #0001;
display:flex;
align-items:center;
gap:15px;

}



body.dark .card{

background:#1f2937;

}



.icon{

width:45px;
height:45px;
border-radius:12px;
background:#ecfdf5;
display:flex;
align-items:center;
justify-content:center;
color:#059669;

}




.number{

font-size:20px;
font-weight:bold;

}




.search-box{

background:white;
padding:15px;
border-radius:15px;
margin-bottom:20px;

}



input{

padding:12px;
border-radius:10px;
border:1px solid #ddd;
width:300px;

}




button{

background:#065f46;
color:white;
border:0;
padding:12px 20px;
border-radius:10px;

}





.table-box{

background:white;
padding:20px;
border-radius:15px;
overflow:auto;

}



table{

width:100%;
border-collapse:collapse;

}



th{

background:#065f46;
color:white;
padding:12px;

}



td{

padding:12px;
border-bottom:1px solid #eee;

}





.badge{

padding:5px 12px;
border-radius:20px;
font-size:12px;

}


.active{

background:#dcfce7;
color:#166534;

}


.inactive{

background:#fee2e2;
color:#991b1b;

}





.edit{

color:#0284c7;

}



.delete{

color:#dc2626;

}



.action a{

margin-right:10px;

}





.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;

}




input{

width:100%;

}




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

display:block;

}



thead{

display:none;

}





tbody tr{

background:white;
padding:15px;
margin-bottom:15px;
border-radius:15px;
box-shadow:0 5px 20px #0002;

}




tbody td{

display:flex;
justify-content:space-between;
border:0;

}




tbody td:before{

font-weight:bold;
color:#065f46;

}



tbody td:nth-child(1):before{

content:"Category";

}


tbody td:nth-child(2):before{

content:"Description";

}



tbody td:nth-child(3):before{

content:"Status";

}



tbody td:nth-child(4):before{

content:"Action";

}



}


</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-layer-group"></i>

Categories

</h2>




<div>


<i class="fa fa-moon toggle"

onclick="theme()">

</i>



<a href="add_category.php"

class="btn">

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

Add Category

</a>

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

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

Back

</a>

</div>


</div>







<div class="cards">



<div class="card">

<div class="icon">

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

</div>


<div>

<p>Total</p>

<div class="number">

<?=$totalCategories?>

</div>

</div>

</div>





<div class="card">

<div class="icon">

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

</div>


<div>

<p>Active</p>

<div class="number">

<?=$activeCategories?>

</div>

</div>

</div>





<div class="card">

<div class="icon">

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

</div>


<div>

<p>Inactive</p>

<div class="number">

<?=$inactiveCategories?>

</div>

</div>

</div>



</div>








<form class="search-box">


<input

name="search"

placeholder="Search category..."

value="<?=htmlspecialchars($search)?>"

>


<button>

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

Search

</button>


</form>







<div class="table-box">



<table>



<thead>


<tr>

<th>Category</th>

<th>Description</th>

<th>Status</th>

<th>Action</th>

</tr>


</thead>




<tbody>


<?php foreach($categories as $c){ ?>


<tr>


<td>

<?=$c['category_name']?>

</td>



<td>

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

</td>




<td>


<span class="badge <?=($c['status'])?'active':'inactive'?>">


<?=($c['status'])?'Active':'Inactive'?>


</span>


</td>





<td>


<a class="edit"

href="edit_category.php?id=<?=$c['id']?>">

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

</a>





<a class="delete"

href="delete_category.php?id=<?=$c['id']?>"

onclick="return confirm('Delete this category?')">

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

</a>



</td>




</tr>


<?php } ?>



</tbody>



</table>



</div>





</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");

}



</script>




</body>

</html>