<!DOCTYPE html>
<html lang="en">
<?php include 'includes/head.php'; ?>

<body>
	<div id="global-loader">
		<div class="whirly-loader"> </div>
	</div>
	<!-- Main Wrapper -->
	<div class="main-wrapper">

		<!-- Header -->
		<?php include './includes/navbar.php'; ?>
		<!-- /Header -->

		<?php $page = 'expense-category';
		include './includes/sidebar.php'; ?>

		<div class="page-wrapper">
			<div class="content">
				<div class="page-header">
					<div class="add-item d-flex">
						<div class="page-title">
							<h4>Expense Category</h4>
							<h6>Manage Your Expense Category</h6>
						</div>
					</div>
					<ul class="table-top-head">
						<li>
							<a data-bs-toggle="tooltip" data-bs-placement="top" title="Pdf"><img src="images/pdf.svg" alt="img"></a>
						</li>
						<li>
							<a data-bs-toggle="tooltip" data-bs-placement="top" title="Excel"><img src="images/excel.svg" alt="img"></a>
						</li>
						<li>
							<a data-bs-toggle="tooltip" data-bs-placement="top" title="Print"><i data-feather="printer" class="feather-rotate-ccw"></i></a>
						</li>
						<li>
							<a data-bs-toggle="tooltip" data-bs-placement="top" title="Refresh"><i data-feather="rotate-ccw" class="feather-rotate-ccw"></i></a>
						</li>
						<li>
							<a data-bs-toggle="tooltip" data-bs-placement="top" title="Collapse" id="collapse-header"><i data-feather="chevron-up" class="feather-chevron-up"></i></a>
						</li>
					</ul>
					<div class="page-btn">
						<a href="#" class="btn btn-added" data-bs-toggle="modal" data-bs-target="#add-units"><i data-feather="plus-circle" class="me-2"></i> Add Expense Category</a>
					</div>
				</div>


				<!-- /product list -->
				<div class="card table-list-card">
					<div class="card-body">
						<div class="table-top">
							<div class="search-set">
								<div class="search-input">
									<a href="" class="btn btn-searchset"><i data-feather="search" class="feather-search"></i></a>
								</div>
							</div>
							<div class="search-path">
								<div class="d-flex align-items-center">
									<a class="btn btn-filter" id="filter_search">
										<i data-feather="filter" class="filter-icon"></i>
										<span><img src="images/closes.svg" alt="img"></span>
									</a>

								</div>

							</div>
							<div class="form-sort">
								<i data-feather="sliders" class="info-img"></i>
								<select class="select">
									<option>Sort by Date</option>
									<option>25 9 23</option>
									<option>12 9 23</option>
								</select>
							</div>
						</div>
						<div class="table-responsive">
							<table class="table  datanew">
								<thead>
									<tr>
										<th class="no-sort">
											<label class="checkboxs">
												<input type="checkbox" id="select-all">
												<span class="checkmarks"></span>
											</label>
										</th>
										<th>Category name</th>
										<th>Description</th>
										<th>Status</th>
										<th class="no-sort">Action</th>
									</tr>
								</thead>
								<tbody class="Expense-list-blk">
									<?php

									require_once 'php/categoryDataFromDatabase.php';
									foreach ($categories as $category) {
									?>
										<tr>
											<td>
												<label class="checkboxs">
													<input type="checkbox">
													<span class="checkmarks"></span>
												</label>
											</td>
											<td><?php echo $category['category']; ?></td>
											<td><?php echo $category['description']; ?></td>
											<td>
												<span class="badges status-badge fs-7 py-0 px-1 rounded-1 text-nowrap d-inline-block 
    <?php echo ($category['status'] === 'Inactive') ? 'bg-danger text-white' : 'bg-success text-white'; ?>">
													<?php echo htmlspecialchars($category['status']); ?>
												</span>
											</td>

											<td class="action-table-data">
												<div class="edit-delete-action">
													<a class="me-2 p-2 mb-0" href="edit-category.php?id=<?php echo $category['category']; ?>">
														<i data-feather="edit" class="feather-edit"></i>
													</a>
													<a class="me-0 confirm-text p-2 mb-0" href="javascript:void(0);">
														<i data-feather="trash-2" class="feather-trash-2"></i>
													</a>
												</div>
											</td>
										</tr>
									<?php } ?>
								</tbody>
							</table>
						</div>
					</div>
				</div>
				<!-- /product list -->
			</div>
		</div>
		<!-- Add Expense Category-->
		<div class="modal fade" id="add-units">
			<div class="modal-dialog modal-dialog-centered custom-modal-two">
				<div class="modal-content">
					<div class="page-wrapper-new p-0">
						<div class="content">
							<div class="modal-header border-0 custom-modal-header">
								<div class="page-title">
									<h4>Add Expense Category</h4>
								</div>
							</div>
							<div class="modal-body custom-modal-body">
								<form action="php/addCategory.php" enctype="multipart/form-data" method="post">
									<div class="row">
										<div class="col-lg-12">
											<div class="mb-3">
												<label class="form-label">Category</label>
												<input type="text" name="category" class="form-control">
											</div>

										</div>
										<!-- Editor -->
										<div class="col-md-12 mb-3">
											<div class="edit-add card">
												<div class="edit-add">
													<label class="form-label">Description</label>
												</div>
												<div class="card-body-list input-blocks mb-0">
													<textarea class="form-control" name="description"></textarea>
												</div>
											</div>
										</div>
										<!-- /Editor -->
										<div class="status-toggle modal-status d-flex justify-content-between align-items-center">
											<span class="status-label">Status</span>
											<input type="checkbox" id="user1" class="check" name="status" value="Active" checked>
											<label for="user1" class="checktoggle"> </label>
										</div>
									</div>
									<div class="modal-footer-btn">
										<button type="button" class="btn btn-cancel me-2" data-bs-dismiss="modal">Cancel</button>
										<button type="submit" class="btn btn-submit">Submit</button>
									</div>
								</form>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
		<!-- /Add Expense Category-->
	</div>
	<!-- /Main Wrapper -->



	<!-- Edit Expense Category-->
	<div class="modal fade" id="edit-units">
		<div class="modal-dialog modal-dialog-centered custom-modal-two">
			<div class="modal-content">
				<div class="page-wrapper-new p-0">
					<div class="content">
						<div class="modal-header border-0 custom-modal-header">
							<div class="page-title">
								<h4>Edit Expense Category</h4>
							</div>
							<button type="button" class="close" data-bs-dismiss="modal" aria-label="Close">
								<span aria-hidden="true">�</span>
							</button>
						</div>
						<div class="modal-body custom-modal-body">
							<div class="row">
								<div class="col-lg-12">
									<div class="mb-3">
										<label class="form-label">Expense Name</label>
										<input type="text" value="Employee Benefits" class="form-control">
									</div>

								</div>
								<!-- Editor -->
								<div class="col-md-12">
									<div class="edit-add card">
										<div class="edit-add">
											<label class="form-label">Description</label>
										</div>
										<div class="card-body-list input-blocks mb-0">
											<textarea class="form-control">Employee Vehicle</textarea>
										</div>
										<p>Maximum 600 Characters</p>
									</div>
								</div>
								<!-- /Editor -->
							</div>
							<div class="modal-footer-btn">
								<a href="javascript:void(0);" class="btn btn-cancel me-2" data-bs-dismiss="modal">Cancel</a>
								<a href="expense-category.php" class="btn btn-submit">Save Changes</a>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
	<!-- /Edit Expense -->
	<div class="customizer-links" id="setdata">
		<ul class="sticky-sidebar">
			<li class="sidebar-icons">
				<a href="#" class="navigation-add" data-bs-toggle="tooltip" data-bs-placement="left" data-bs-original-title="Theme">
					<i data-feather="settings" class="feather-five"></i>
				</a>
			</li>
		</ul>
	</div>


	<!-- jQuery -->
	<script src="js/jquery-3.7.1.min.js" type="78c3f989720decd7ae94f25c-text/javascript"></script>

	<!-- Feather Icon JS -->
	<script src="js/feather.min.js" type="78c3f989720decd7ae94f25c-text/javascript"></script>

	<!-- Slimscroll JS -->
	<script src="js/jquery.slimscroll.min.js" type="78c3f989720decd7ae94f25c-text/javascript"></script>

	<!-- Datatable JS -->
	<script src="js/jquery.dataTables.min.js" type="78c3f989720decd7ae94f25c-text/javascript"></script>
	<script src="js/dataTables.bootstrap5.min.js" type="78c3f989720decd7ae94f25c-text/javascript"></script>

	<!-- Datetimepicker JS -->
	<script src="js/moment.min.js" type="78c3f989720decd7ae94f25c-text/javascript"></script>
	<script src="js/bootstrap-datetimepicker.min.js" type="78c3f989720decd7ae94f25c-text/javascript"></script>

	<!-- Bootstrap Core JS -->
	<script src="js/bootstrap.bundle.min.js" type="78c3f989720decd7ae94f25c-text/javascript"></script>

	<!-- Summernote JS -->
	<script src="js/summernote-bs4.min.js" type="78c3f989720decd7ae94f25c-text/javascript"></script>

	<!-- Select2 JS -->
	<script src="js/select2.min.js" type="78c3f989720decd7ae94f25c-text/javascript"></script>

	<!-- Sweetalert 2 -->
	<script src="js/sweetalert2.all.min.js" type="78c3f989720decd7ae94f25c-text/javascript"></script>
	<script src="js/sweetalerts.min.js" type="78c3f989720decd7ae94f25c-text/javascript"></script>

	<!-- Custom JS -->
	<script src="js/script.js" type="78c3f989720decd7ae94f25c-text/javascript"></script>


	<script src="js/rocket-loader.min.js" data-cf-settings="78c3f989720decd7ae94f25c-|49" defer=""></script>

</body>

</html>