<?php
$all_status = array(
	'' => 'all',
	'cancel' => 'cancel',
	'in_progress' => 'in_progress',
	'on_hold' => 'on_hold',
	'started' => 'started',
	'completed' => 'completed'
);
?>

<div class="space-y-4">
	<?= message_box('success'); ?>
	<?= message_box('error'); ?>

	<div class="rounded-2xl border border-border bg-card shadow-sm">
		<div class="flex flex-wrap items-center gap-2 border-b border-border py-3 px-4">
			<?php foreach ($all_status as $key => $v_statuses) { ?>
				<button type="button"
					class="t_status rounded-full border border-border px-3 py-1.5 text-xs font-semibold text-foreground hover:border-primary <?= $key === '' ? 'bg-primary text-white border-primary' : ''; ?>"
					data-filter="<?= $key ?>" data-search="status">
					<?= lang($v_statuses); ?>
				</button>
			<?php } ?>
		</div>

		<div class="p-4">
			<table class="min-w-full text-sm DataTables" id="DataTables" cellspacing="0" width="100%">
				<thead class="bg-slate-50 text-slate-500 dark:bg-slate-800 dark:text-slate-300">
					<tr>
						<th class="px-4 py-3 text-left"><?= lang('project_name') ?></th>
						<th class="px-4 py-3 text-left"><?= lang('start_date') ?></th>
						<th class="px-4 py-3 text-left"><?= lang('end_date') ?></th>
						<th class="px-4 py-3 text-left"><?= lang('status') ?></th>
						<?php $show_custom_fields = custom_form_table(4, null);
						if (!empty($show_custom_fields)) {
							foreach ($show_custom_fields as $c_label => $v_fields) {
								if (!empty($c_label)) { ?>
									<th class="px-4 py-3 text-left"><?= $c_label ?> </th>
						<?php }
							}
						}
						?>
						<th class="col-options no-sort px-4 py-3 text-left"><?= lang('action') ?></th>
					</tr>
				</thead>
				<tbody></tbody>
			</table>
		</div>
	</div>
</div>

<script type="text/javascript">
	list = base_url + "client/projects/projectList";

	function reloadWith(filter) {
		var url = list;
		if (filter) {
			url += "/" + filter + "/1";
		}
		if (typeof table_url !== "undefined") {
			table_url(url);
		} else if (typeof fire_datatable === "function") {
			fire_datatable(url);
		}
	}

	$(function() {
		$('[data-search="status"]').on('click', function() {
			var val = $(this).data('filter');
			$('[data-search="status"]').removeClass('bg-primary text-white border-primary');
			$(this).addClass('bg-primary text-white border-primary');
			reloadWith(val);
		});
	});
</script>
