<!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-list';
		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 List</h4>
							<h6>Manage Your Expenses</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 New Expense</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>11 09 23</option>
									<option>20 09 23</option>
								</select>
							</div>
						</div>
						<div class="table-responsive">
							<table class="table  datanew">
								<thead>
									<tr>
										<th>Reference</th>
										<th>Expense Name</th>
										<th>Category</th>
										<th>Narration</th>
										<th>Date</th>
										<th>Amount</th>
										<th>Status</th>
										<th class="no-sort">Action</th>
									</tr>
								</thead>
								<tbody class="Expense-list-blk">
									<?php
									require_once 'php/expenseDataFromDatabase.php';
									foreach ($expenses as $expense) {
									?>
										<tr>
											<td><?php echo $expense['reference']; ?></td>
											<td><?php echo $expense['expense']; ?></td>
											<td><?php echo $expense['category']; ?></td>
											<td><?php echo $expense['narration']; ?></td>
											<td><?php echo $expense['date']; ?></td>
											<td>Rs <?php echo $expense['amount']; ?></td>
											<td> <?php
													$status = strtolower($expense['status']); // normalize for comparison

													if ($status === 'approved') {
														echo '<span class="badges status-badge fs-10 p-1 px-2 rounded-1" style="background-color: #28a745; color: white;">Approved</span>';
													} elseif ($status === 'pending') {
														echo '<span class="badges status-badge fs-10 p-1 px-2 rounded-1" style="background-color: #dc3545; color: white;">Pending</span>';
													} else {
														// Optional: default or other status style
														echo '<span class="badges status-badge fs-10 p-1 px-2 rounded-1" style="background-color: #6c757d; color: white;">' . htmlspecialchars(ucfirst($expense['status'])) . '</span>';
													}
													?></td>
											<td class="action-table-data">
												<div class="edit-delete-action">
													<a class="me-2 p-2 mb-0" href="edit-expense.php?id=<?php echo $expense['reference']; ?>">
														<i data-feather="edit" class="feather-edit"></i>
													</a>
													<a class="me-3 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 -->
		<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</h4>
								</div>
							</div>
							<div class="modal-body custom-modal-body">
								<form action="php/addExpense.php" method="POST" enctype="multipart/form-data">
									<div class="row">
										<?php
										require_once 'php/databaseConnection.php';
										$mysqli = db_connect();

										// Get the latest reference starting with 'PT'
										$result = $mysqli->query("SELECT reference FROM addExpense WHERE reference LIKE 'PT%' ORDER BY ID DESC LIMIT 1");
										$row = $result->fetch_row();

										if ($row == null) {
											// No existing references, start from PT001
											$new_reference = "PT001";
										} else {
											$last_reference = $row[0]; // e.g., "PT023"
											$last_num = (int)substr($last_reference, 2); // extract number after 'PT'
											$new_num = $last_num + 1;

											// Pad the number with zeros (3 digits)
											$new_reference = "PT" . str_pad($new_num, 3, '0', STR_PAD_LEFT);
										}
										?>

										<div class="col-lg-6">
											<div class="mb-3">
												<label class="form-label">Reference</label>
												<input type="text" name="reference" class="form-control" value="<?php echo htmlspecialchars($new_reference); ?>" readonly>
											</div>
										</div>

										<div class="col-lg-6">
											<div class="mb-3">
												<label class="form-label">Expense</label>
												<input type="text" name="expense" 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">Narration</label>
												</div>
												<div class="card-body-list input-blocks mb-0">
													<textarea class="form-control" name="narration"></textarea>
												</div>
											</div>
										</div>
										<!-- /Editor -->
										<div class="col-lg-6">
											<div class="mb-3">
												<label class="form-label">Expense Category</label>
												<select class="select" name="category" required>
													<option value="">Choose</option>
													<?php require_once 'php/categoryDataFromDatabase.php';
													foreach ($categories as $cat): ?>
														<option value="<?php echo htmlspecialchars($cat['category']); ?>">
															<?php echo htmlspecialchars($cat['category']); ?>
														</option>
													<?php endforeach; ?>
												</select>
											</div>
										</div>

										<div class="col-lg-6">
											<div class="mb-3">
												<label class="form-label">Date</label>
												<input type="date" name="date" id="expenseDate" class="form-control">
											</div>
										</div>
										<script>
											document.addEventListener("DOMContentLoaded", function() {
												let today = new Date().toISOString().split('T')[0]; // Get today's date in YYYY-MM-DD format
												document.getElementById("expenseDate").value = today;
											});
										</script>
										<div class="col-lg-6">
											<div class="mb-3">
												<label class="form-label">Amount</label>
												<input type="text" class="form-control" name="amount" placeholder="$">
											</div>
										</div>
										<div class="col-lg-6">
											<div class="mb-3">
												<label class="form-label">Status</label>
												<select class="select" name="status" required>
													<option value="">Choose</option>
													<option value="Approved">Approved</option>
													<option value="Pending">Pending</option>
												</select>

											</div>
										</div>
									</div>
									<div class="modal-footer-btn">
										<button type="submit" class="btn btn-submit">Submit</button>
										<a href="javascript:void(0);" class="btn btn-cancel me-2" data-bs-dismiss="modal">Cancel</a>
									</div>
								</form>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
		<!-- /Add Expense -->
	</div>
	<!-- /Main Wrapper -->

	<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 data-cfasync="false" src="js/email-decode.min.js"></script>
	<script src="js/jquery-3.7.1.min.js" type="dd44cb44084ec2184f6b2968-text/javascript"></script>

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

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

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

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

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

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

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

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


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

</html>