<?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:categories.php");
    exit;

}





// GET CATEGORY


$stmt=$pdo->prepare("

SELECT *

FROM expense_categories

WHERE id=?

");


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


$category=$stmt->fetch();



if(!$category){

    die("Category not found");

}





// UPDATE CATEGORY


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


$name=$_POST['category_name'];

$status=$_POST['status'];





$stmt=$pdo->prepare("

UPDATE expense_categories SET

category_name=?,

status=?

WHERE id=?

");



$stmt->execute([

$name,

$status,

$id

]);




$_SESSION['success']="Category updated successfully";


header("Location:categories.php");

exit;


}



?>

<!DOCTYPE html>

<html>

<head>


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


<title>
Edit Category
</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;

}





.card{

background:white;
max-width:700px;
padding:25px;
border-radius:18px;
box-shadow:0 5px 20px #0002;

}



body.dark .card{

background:#1f2937;

}




.title{

display:flex;
gap:10px;
align-items:center;
color:#065f46;
margin-bottom:20px;

}




.form-group{

margin-bottom:15px;

}




label{

font-weight:600;
font-size:14px;
display:block;
margin-bottom:6px;

}



input,
select{

width:100%;
padding:12px;
border-radius:10px;
border:1px solid #ddd;
outline:none;

}




button,
.back{


padding:12px 22px;
border-radius:10px;
border:none;
cursor:pointer;
text-decoration:none;

}



button{

background:#059669;
color:white;

}



.back{

background:#64748b;
color:white;

}



.buttons{

display:flex;
gap:10px;
margin-top:20px;

}





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

}



.card{

padding:18px;

}



.buttons{

flex-direction:column;

}



button,
.back{

width:100%;
text-align:center;

}


}



</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-edit"></i>

Edit Category

</h2>



<i class="fa fa-moon toggle"

onclick="theme()">

</i>



</div>







<div class="card">



<div class="title">

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

<h3>
Category Details
</h3>

</div>







<form method="POST">





<div class="form-group">


<label>
Category Name
</label>


<input type="text"

name="category_name"

value="<?=htmlspecialchars($category['category_name'])?>"

required>


</div>







<div class="form-group">


<label>
Status
</label>



<select name="status">


<option value="1"

<?=($category['status']==1)?'selected':''?>

>

Active

</option>



<option value="0"

<?=($category['status']==0)?'selected':''?>

>

Inactive

</option>



</select>



</div>







<div class="buttons">


<button name="update">

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

Update Category

</button>




<a href="categories.php"

class="back">

Cancel

</a>



</div>







</form>





</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>