<?php echo message_box('success'); ?>
<?php echo message_box('error'); ?>
<?php
$totalDays = round((human_to_unix($project_details->end_date . ' 00:00') - human_to_unix($project_details->start_date . ' 00:00')) / 3600 / 24);
$TotalGone = $totalDays;
$tprogress = 100;
if ($totalDays > 0 && human_to_unix($project_details->start_date . ' 00:00') < time() && human_to_unix($project_details->end_date . ' 00:00') > time()) {
	$TotalGone = round((human_to_unix($project_details->end_date . ' 00:00') - time()) / 3600 / 24);
	$tprogress = $TotalGone / $totalDays * 100;
}
if (human_to_unix($project_details->end_date . ' 00:00') < time()) {
	$TotalGone = 0;
	$tprogress = 0;
}
if (safe_strtotime(date('Y-m-d')) > safe_strtotime($project_details->end_date . ' 00:00')) {
	$lang = lang('days_gone');
} else {
	$lang = lang('days_left');
}
$overdueDays = null;
$is_overdue = $project_details->project_status != 'completed' && $totalDays < 0;
if ($is_overdue) {
	$overdueDays = $totalDays . ' ' . lang('days_gone');
}

$edited = can_action('57', 'edited');
$can_edit = $this->project_model->can_action('tbl_project', 'edit', array('project_id' => $project_details->project_id));
$tab_style = $this->input->get('tab_style', true);
$allowed_styles = array('pills', 'underline', 'stacked', 'segmented', 'card', '1', '2', '3', '4', '5');
if (empty($tab_style) || !in_array($tab_style, $allowed_styles, true)) {
	$tab_style = 'card';
}
$participants = isset($project_participants) ? $project_participants : array();
$client_label = !empty($project_details->client_name) ? $project_details->client_name : lang('undefined_client');
$category_label = !empty($project_details->category_name) ? $project_details->category_name : lang('uncategorized');
$schedule_completion = max(0, min(100, round(100 - $tprogress)));
$participant_count = !empty($participants) ? count($participants) : 0;
$tabs_wrapper_class = 'project-tabs-shell';
$tabs_nav_class = 'project-tabs-nav';
$tabs_panel_class = 'project-tabs-panel';
?>

<div class="space-y-4">
	<div class="grid grid-cols-1 gap-4 sm:grid-cols-2 xl:grid-cols-4">
		<div class="min-w-0 rounded-2xl border border-slate-200 bg-white p-5 shadow-sm dark:border-slate-800 dark:bg-slate-900">
			<div class="flex items-center gap-3">
				<span class="inline-flex h-11 w-11 items-center justify-center rounded-2xl bg-blue-50 text-blue-600 dark:bg-blue-900/30 dark:text-blue-300">
					<i data-lucide="calendar-range" class="h-5 w-5"></i>
				</span>
				<div>
					<p class="text-[11px] font-semibold uppercase tracking-[0.2em] text-slate-500 dark:text-slate-400"><?= lang('timeline') ?></p>
					<p class="mt-1 text-sm font-semibold text-slate-900 dark:text-slate-100"><?= display_date($project_details->start_date); ?> <span class="mx-1 text-slate-300">&rarr;</span> <?= display_date($project_details->end_date); ?></p>
				</div>
			</div>
			<p class="mt-4 text-sm text-slate-500 dark:text-slate-400"><?= !empty($overdueDays) ? $overdueDays : $TotalGone . ' ' . $lang ?></p>
		</div>

		<div class="min-w-0 rounded-2xl border border-slate-200 bg-white p-5 shadow-sm dark:border-slate-800 dark:bg-slate-900">
			<div class="flex items-center justify-between">
				<div>
					<p class="text-[11px] font-semibold uppercase tracking-[0.2em] text-slate-500 dark:text-slate-400"><?= lang('completion') ?></p>
					<p class="mt-1 text-3xl font-bold text-slate-900 dark:text-slate-100"><?= $schedule_completion ?>%</p>
				</div>
				<span class="inline-flex h-11 w-11 items-center justify-center rounded-2xl bg-emerald-50 text-emerald-600 dark:bg-emerald-900/30 dark:text-emerald-300">
					<i data-lucide="chart-no-axes-column" class="h-5 w-5"></i>
				</span>
			</div>
			<div class="mt-4 h-2.5 rounded-full bg-slate-100 dark:bg-slate-800">
				<div class="h-2.5 rounded-full bg-emerald-500" style="width: <?= $schedule_completion ?>%"></div>
			</div>
			<p class="mt-3 text-xs text-slate-500 dark:text-slate-400"><?= lang('project') . ' ' . lang('completion') ?></p>
		</div>

		<div class="min-w-0 rounded-2xl border border-slate-200 bg-white p-5 shadow-sm dark:border-slate-800 dark:bg-slate-900">
			<div class="flex items-center justify-between gap-3">
				<div>
					<p class="text-[11px] font-semibold uppercase tracking-[0.2em] text-slate-500 dark:text-slate-400"><?= lang('project_team') ?></p>
					<p class="mt-1 text-sm font-semibold text-slate-900 dark:text-slate-100"><?= $participant_count > 0 ? $participant_count . ' ' . lang('members') : lang('everyone') ?></p>
				</div>
				<?php if (!empty($can_edit) && !empty($edited)) { ?>
					<?= btn_modal(
						'admin/projects/update_users/' . $project_details->project_id,
						'',
						lang('add') . ' ' . lang('participants'),
						'lg',
						'plus',
						array('class' => 'inline-flex h-10 w-10 items-center justify-center rounded-xl border border-slate-200 bg-white text-slate-700 hover:bg-slate-50 dark:border-slate-700 dark:bg-slate-900 dark:text-slate-200 dark:hover:bg-slate-800')
					); ?>
				<?php } ?>
			</div>
			<div class="mt-4 flex -space-x-3">
				<?php if (!empty($participants)) { ?>
					<?php foreach (array_slice($participants, 0, 4) as $member) { ?>
						<img class="relative inline-block h-10 w-10 rounded-full object-cover ring-2 ring-white dark:ring-slate-900"
							src="<?= base_url() . $member->avatar ?>"
							alt="<?= html_escape($member->fullname); ?>"
							title="<?= html_escape($member->fullname); ?>">
					<?php } ?>
					<?php if ($participant_count > 4) { ?>
						<span class="relative inline-flex h-10 w-10 items-center justify-center rounded-full bg-slate-900 text-xs font-semibold text-white ring-2 ring-white dark:ring-slate-900">+<?= $participant_count - 4 ?></span>
					<?php } ?>
				<?php } else { ?>
					<span class="relative flex h-10 w-10 items-center justify-center rounded-full bg-slate-100 text-xs font-bold text-slate-600 ring-2 ring-white dark:bg-slate-800 dark:text-slate-300 dark:ring-slate-900"><?= lang('all') ?></span>
				<?php } ?>
			</div>
		</div>

		<div class="min-w-0 rounded-2xl border border-slate-200 bg-white p-5 shadow-sm dark:border-slate-800 dark:bg-slate-900">
			<div class="flex items-center gap-3">
				<span class="inline-flex h-11 w-11 items-center justify-center rounded-2xl bg-violet-50 text-violet-600 dark:bg-violet-900/30 dark:text-violet-300">
					<i data-lucide="badge-info" class="h-5 w-5"></i>
				</span>
				<div>
					<p class="text-[11px] font-semibold uppercase tracking-[0.2em] text-slate-500 dark:text-slate-400"><?= lang('project_code') ?></p>
					<p class="mt-1 text-2xl font-bold text-slate-900 dark:text-slate-100">#<?= html_escape($project_details->project_no) ?></p>
				</div>
			</div>
			<div class="mt-4 flex flex-wrap gap-2">
				<span class="inline-flex items-center rounded-full border border-slate-200 bg-slate-50 px-3 py-1 text-xs font-medium text-slate-700 dark:border-slate-700 dark:bg-slate-800 dark:text-slate-200"><?= html_escape($client_label) ?></span>
				<span class="inline-flex items-center rounded-full border border-slate-200 bg-slate-50 px-3 py-1 text-xs font-medium text-slate-700 dark:border-slate-700 dark:bg-slate-800 dark:text-slate-200"><?= html_escape($category_label) ?></span>
			</div>
		</div>
	</div>
</div>

<?php
$this->load->view('admin/common/tabs');
?>
