<?php defined('BASEPATH') or exit('No direct script access allowed'); ?>

<?php
$all_customer_group = isset($all_customer_group) ? $all_customer_group : $this->db->where('type', 'projects')->order_by('customer_group_id', 'DESC')->get('tbl_customer_group')->result();
$all_client = isset($all_client) ? $all_client : $this->project_model->get_permission('tbl_client');
$assign_user = isset($assign_user) ? $assign_user : array();
$created = can_action('57', 'created');
$edited = can_action('57', 'edited');
$deleted = can_action('57', 'deleted');

$total_projects = isset($kpi_stats->total_projects) ? $kpi_stats->total_projects : 0;
$completion_pct = isset($kpi_stats->completion_pct) ? $kpi_stats->completion_pct : 0;
$active_tasks = isset($kpi_stats->active_tasks) ? $kpi_stats->active_tasks : 0;
$upcoming_milestones = isset($kpi_stats->upcoming_milestones) ? $kpi_stats->upcoming_milestones : 0;
$next_milestone_label = isset($kpi_stats->next_milestone_label) ? $kpi_stats->next_milestone_label : null;
?>

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

	<div class="grid grid-cols-1 gap-4 sm:grid-cols-2 xl:grid-cols-4">
		<div class="rounded-2xl border border-border bg-card p-4 shadow-sm">
			<div class="flex items-center justify-between">
				<p class="text-[11px] uppercase tracking-widest text-muted-foreground"><?= lang('total') . ' ' . lang('projects'); ?></p>
				<span class="inline-flex h-9 w-9 items-center justify-center rounded-xl bg-blue-50 text-blue-600 dark:bg-blue-900/30 dark:text-blue-300">
					<i data-lucide="briefcase" class="h-4 w-4"></i>
				</span>
			</div>
			<p class="text-3xl font-bold text-foreground mt-3"><?= $total_projects; ?></p>
			<p class="text-xs text-muted-foreground mt-1"><?= lang('all_time'); ?></p>
		</div>
		<div class="rounded-2xl border border-border bg-card p-4 shadow-sm">
			<div class="flex items-center justify-between">
				<p class="text-[11px] uppercase tracking-widest text-muted-foreground"><?= lang('active') . ' ' . lang('tasks'); ?></p>
				<span class="inline-flex h-9 w-9 items-center justify-center rounded-xl bg-amber-50 text-amber-600 dark:bg-amber-900/30 dark:text-amber-300">
					<i data-lucide="list-checks" class="h-4 w-4"></i>
				</span>
			</div>
			<p class="text-3xl font-bold text-foreground mt-3"><?= $active_tasks; ?></p>
			<p class="text-xs text-muted-foreground mt-1"><?= lang('across') . ' ' . $total_projects . ' ' . lang('projects'); ?></p>
		</div>
		<div class="rounded-2xl border border-border bg-card p-4 shadow-sm">
			<div class="flex items-center justify-between">
				<p class="text-[11px] uppercase tracking-widest text-muted-foreground"><?= lang('upcoming') . ' ' . lang('milestones'); ?></p>
				<span class="inline-flex h-9 w-9 items-center justify-center rounded-xl bg-purple-50 text-purple-600 dark:bg-purple-900/30 dark:text-purple-300">
					<i data-lucide="flag" class="h-4 w-4"></i>
				</span>
			</div>
			<p class="text-3xl font-bold text-foreground mt-3"><?= $upcoming_milestones; ?></p>
			<p class="text-xs text-muted-foreground mt-1"><?= $next_milestone_label ? lang('next') . ': ' . $next_milestone_label : lang('no_data'); ?></p>
		</div>
		<div class="rounded-2xl border border-border bg-card p-4 shadow-sm">
			<div class="flex items-center justify-between">
				<p class="text-[11px] uppercase tracking-widest text-muted-foreground"><?= lang('project') . ' ' . lang('completion'); ?></p>
				<span class="inline-flex h-9 w-9 items-center justify-center rounded-xl bg-emerald-50 text-emerald-600 dark:bg-emerald-900/30 dark:text-emerald-300">
					<i data-lucide="pie-chart" class="h-4 w-4"></i>
				</span>
			</div>
			<p class="text-3xl font-bold text-foreground mt-3"><?= $completion_pct; ?>%</p>
			<div class="mt-2 h-2 w-full rounded-full bg-muted">
				<div class="h-2 rounded-full bg-emerald-500" style="width: <?= $completion_pct; ?>%"></div>
			</div>
		</div>
	</div>
	<div class="min-w-0 rounded-2xl border border-border bg-card shadow-sm">
		<div class="min-w-0 p-4">
			<table class="min-w-full text-sm bulk_table" id="DataTables" cellspacing="0" width="100%">
				<thead class="bg-slate-50 text-slate-500 dark:bg-slate-800 dark:text-slate-300">
					<tr>
						<?php if (!empty($deleted)) : ?>
							<th class="px-4 py-3 text-left" data-orderable="false">
								<div class="checkbox c-checkbox">
									<label class="needsclick">
										<input id="select_all" type="checkbox">
									</label>
								</div>
							</th>
						<?php endif; ?>
						<th class="px-4 py-3 text-left"><?= lang('project_name') ?></th>
						<th class="px-4 py-3 text-left"><?= lang('categories') ?></th>
						<th class="px-4 py-3 text-left"><?= lang('tags') ?></th>
						<th class="px-4 py-3 text-left"><?= lang('client') ?></th>
						<th class="px-4 py-3 text-left"><?= lang('end_date') ?></th>
						<th class="px-4 py-3 text-left"><?= lang('assigned_to') ?></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-right"><?= lang('action') ?></th>
					</tr>
				</thead>
				<tbody></tbody>
			</table>
		</div>
	</div>
</div>

<script>
	var projectsListBaseUrl = base_url + "admin/projects/projectList";
	list = projectsListBaseUrl;
	window.erpDatatablePreload = window.erpDatatablePreload || {};
	window.erpDatatablePreload.DataTables = window.erpDatatablePreload.DataTables || {};
	<?php if (!empty($datatable_preload)) { ?>
	window.erpDatatablePreload.DataTables["list"] = <?= json_encode($datatable_preload, JSON_UNESCAPED_SLASHES) ?>;
	<?php } ?>
	bulk_url = base_url + "admin/projects/bulk_delete";

	function reloadWith(filter, searchType) {
		var url = projectsListBaseUrl;
		if (filter !== null && filter !== undefined && filter !== '') {
			url += "/" + encodeURIComponent(filter);
			if (searchType) {
				url += "/" + encodeURIComponent(searchType);
			}
		}

		list = url;
		if (typeof table_url === "function") {
			table_url(url);
		} else if (typeof fire_datatable === "function") {
			fire_datatable(url, "DataTables");
		}
	}

	$(function() {
		$(document).on('click', '[data-project-filter-action]', function(e) {
			e.preventDefault();
			var val = $(this).data('project-filter') || '';
			var searchType = $(this).data('project-search') || '';
			var label = $(this).data('project-filter-label') || '<?= addslashes(lang('all')); ?>';
			var $details = $(this).closest('details');
			var $selected = $details.find('[data-header-filter-selected]').first();
			$details.find('[data-header-filter-item]')
				.removeClass('bg-indigo-50 text-indigo-700 dark:bg-indigo-900/30 dark:text-indigo-300')
				.addClass('text-slate-700 hover:bg-slate-50 dark:text-slate-200 dark:hover:bg-slate-800');
			$(this)
				.addClass('bg-indigo-50 text-indigo-700 dark:bg-indigo-900/30 dark:text-indigo-300')
				.removeClass('text-slate-700 hover:bg-slate-50 dark:text-slate-200 dark:hover:bg-slate-800');
			if ($selected.length) {
				$selected.text(label);
			}
			$details.removeAttr('open');
			reloadWith(val, searchType === 'status' ? '' : searchType);
		});

		window.projectClientFilter = function(id) {
			reloadWith(id, 'by_client');
		};
		window.projectStaffFilter = function(id) {
			reloadWith(id, 'by_staff');
		};
		window.projectCategoryFilter = function(id) {
			reloadWith(id, 'by_category');
		};
	});
</script>
