<?php

session_start();

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


require_once "config.php";


// SEARCH

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



$stmt=$pdo->prepare("

SELECT *

FROM expense_items

WHERE item_name LIKE ?
OR registration_no LIKE ?
OR item_type LIKE ?

ORDER BY id DESC

");


$stmt->execute([

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

]);


$items=$stmt->fetchAll();


?>


<!DOCTYPE html>

<html>

<head>


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


<title>
Items Management
</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;

transition:.3s;

}



body.dark{

background:#111827;
color:white;

}




.content{

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

}





.header{

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

margin-bottom:20px;

}



.header h2{

color:#065f46;

}



body.dark .header h2{

color:#10b981;

}



.mobile-btn{

display:none;

font-size:24px;

cursor:pointer;

}



.add-btn{


background:#059669;

color:white;

padding:12px 18px;

border-radius:12px;

text-decoration:none;

font-size:14px;


}





.search-box{


background:white;

padding:15px;

border-radius:15px;

margin-bottom:20px;


}



body.dark .search-box{

background:#1f2937;

}



.search-box input{


width:100%;

padding:12px;

border-radius:10px;

border:1px solid #ddd;

outline:none;


}





.table-card{


background:white;

border-radius:18px;

padding:20px;

overflow:auto;


}



body.dark .table-card{

background:#1f2937;

}





table{

width:100%;

border-collapse:collapse;

}



th{

background:#ecfdf5;

color:#065f46;

}

.back-btn{

background:#64748b;
color:white;
padding:10px 15px;
border-radius:12px;
text-decoration:none;
font-size:14px;
display:inline-flex;
align-items:center;
gap:8px;

}


.back-btn:hover{

background:#475569;

}

th,td{

padding:14px;

text-align:left;

border-bottom:1px solid #eee;

}




.badge{


padding:6px 12px;

border-radius:20px;

font-size:12px;

font-weight:500;


}



.active{


background:#dcfce7;

color:#166534;


}



.inactive{


background:#fee2e2;

color:#991b1b;


}



.action a{


margin-right:12px;

font-size:18px;


}





/* MOBILE CARDS */


.cards{

display:none;

}



.item-card{


background:white;

padding:18px;

border-radius:18px;

margin-bottom:15px;

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


}



body.dark .item-card{

background:#1f2937;

}




.item-header{


display:flex;

justify-content:space-between;

align-items:center;


}



.item-icon{


width:50px;

height:50px;


border-radius:50%;


background:#ecfdf5;

color:#059669;


display:flex;

align-items:center;

justify-content:center;


font-size:22px;


}




.item-card h3{


margin-top:15px;

font-size:18px;


}




.info{


margin-top:15px;

line-height:32px;

font-size:14px;


}



.actions{


margin-top:15px;

display:flex;

gap:20px;


}



.actions a{


text-decoration:none;

color:#059669;

font-weight:500;


}



.delete{

color:red!important;

}




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


}




.header{


gap:10px;

}



.add-btn{


padding:10px;

font-size:12px;


}




.table-card{

display:none;

}




.cards{

display:block;

}



}



@media(max-width:400px){


.header{


flex-direction:column;

align-items:flex-start;


}



.add-btn{


width:100%;

text-align:center;


}


}





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

Items

</h2>


</div>

<button onclick="history.back()" class="back-btn">
    <i class="fa fa-arrow-left"></i>
    Back
</button>


<a href="items_add.php"
class="add-btn">

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

Add Item

</a>


</div>






<div class="search-box">


<form>


<input

type="text"

name="search"

placeholder="Search item..."

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


</form>


</div>





<!-- DESKTOP TABLE -->


<div class="table-card">


<table>


<tr>

<th>#</th>

<th>Item</th>

<th>Registration</th>

<th>Type</th>

<th>Status</th>

<th>Date</th>

<th>Action</th>


</tr>



<?php if(count($items)>0): ?>


<?php foreach($items as $item): ?>


<tr>


<td>
<?=$item['id']?>
</td>


<td>

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

<?=$item['item_name']?>

</td>



<td>

<?=$item['registration_no'] ?: '-'?>

</td>



<td>

<?=$item['item_type'] ?: '-'?>

</td>



<td>

<?php if($item['status']==1): ?>

<span class="badge active">
Active
</span>

<?php else: ?>

<span class="badge inactive">
Inactive
</span>

<?php endif; ?>

</td>



<td>

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

</td>



<td class="action">


<a href="items_edit.php?id=<?=$item['id']?>">

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

</a>


<a onclick="return confirm('Delete item?')"

href="items_delete.php?id=<?=$item['id']?>">

<i class="fa fa-trash"
style="color:red"></i>

</a>


</td>


</tr>


<?php endforeach; ?>


<?php endif; ?>


</table>


</div>








<!-- MOBILE CARDS -->


<div class="cards">


<?php foreach($items as $item): ?>


<div class="item-card">



<div class="item-header">


<div class="item-icon">

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

</div>



<?php if($item['status']==1): ?>


<span class="badge active">

Active

</span>


<?php else: ?>


<span class="badge inactive">

Inactive

</span>


<?php endif; ?>


</div>




<h3>

<?=$item['item_name']?>

</h3>



<div class="info">


<div>

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

Registration:

<b>
<?=$item['registration_no'] ?: '-'?>
</b>


</div>



<div>

<i class="fa fa-layer-group"></i>

Type:

<b>
<?=$item['item_type'] ?: '-'?>
</b>


</div>



<div>

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

Created:

<b>
<?=date("d M Y",strtotime($item['created_at']))?>
</b>


</div>



</div>




<div class="actions">


<a href="items/edit.php?id=<?=$item['id']?>">

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

Edit

</a>



<a class="delete"

onclick="return confirm('Delete item?')"

href="items/delete.php?id=<?=$item['id']?>">

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

Delete

</a>


</div>


</div>


<?php endforeach; ?>


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