<?php

session_start();

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


require_once "config.php";



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


$item_name=$_POST['item_name'];
$registration_no=$_POST['registration_no'];
$item_type=$_POST['item_type'];
$status=$_POST['status'];



$stmt=$pdo->prepare("

INSERT INTO expense_items
(
item_name,
registration_no,
item_type,
status
)

VALUES
(?,?,?,?)

");


$stmt->execute([

$item_name,
$registration_no,
$item_type,
$status

]);



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


}


?>



<!DOCTYPE html>

<html>

<head>


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



<title>
Add Item
</title>



<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600&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>


*{

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

}



body{

background:#f4f7f9;

}




.content{

margin-left:260px;

padding:25px;

}




.header{

display:flex;

justify-content:space-between;

align-items:center;

margin-bottom:20px;

}



.header h2{

color:#065f46;

}




.mobile-btn{

display:none;

font-size:25px;

cursor:pointer;

}



.back-btn{


background:#64748b;

color:white;

padding:10px 15px;

border-radius:12px;

text-decoration:none;

font-size:14px;

display:inline-flex;

gap:8px;

align-items:center;


}




.form-card{


background:white;

max-width:650px;

padding:25px;

border-radius:18px;

box-shadow:
0 5px 20px rgba(0,0,0,.08);


}




.form-group{

margin-bottom:18px;

}



label{

display:block;

font-size:14px;

margin-bottom:6px;

color:#374151;

}



input,select{


width:100%;

padding:13px;

border-radius:12px;

border:1px solid #ddd;

outline:none;

font-size:14px;

}




input:focus,
select:focus{

border-color:#059669;

}




.save-btn{


background:#059669;

color:white;

border:none;

padding:13px 25px;

border-radius:12px;

cursor:pointer;

font-size:15px;

}




.overlay{


display:none;

position:fixed;

inset:0;

background:#0008;

z-index:999;


}



.overlay.show{

display:block;

}





@media(max-width:768px){



.sidebar{

left:-280px;

transition:.3s;

}



.sidebar.active{

left:0;

}




.content{

margin-left:0;

padding:15px;

}




.mobile-btn{

display:block;

}



.header h2{

font-size:20px;

}



.form-card{

padding:18px;

}




}



</style>



</head>



<body>



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



<div id="overlay"
class="overlay"
onclick="closeMenu()">

</div>




<div class="content">



<div class="header">



<div style="display:flex;align-items:center;gap:15px;">


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



<h2>

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

Add Item

</h2>


</div>




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

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

Back

</a>



</div>








<div class="form-card">



<form method="post">



<div class="form-group">


<label>

Item Name

</label>


<input

type="text"

name="item_name"

placeholder="Enter item name"

required>


</div>






<div class="form-group">


<label>

Registration Number

</label>


<input

type="text"

name="registration_no"

placeholder="Enter registration number">


</div>






<div class="form-group">


<label>

Item Type

</label>


<input

type="text"

name="item_type"

placeholder="Example: Laptop, Vehicle, Furniture">


</div>






<div class="form-group">


<label>

Status

</label>


<select name="status">


<option value="1">

Active

</option>


<option value="0">

Inactive

</option>


</select>


</div>






<button class="save-btn"
name="save">


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

Save Item


</button>




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


}



</script>



</body>

</html>