<div class="space-y-6">
	<div class="rounded-2xl border border-slate-200 dark:border-slate-800 bg-white dark:bg-slate-900 p-6 shadow-sm">
		<div class="flex flex-wrap items-start justify-between gap-4">
			<div>
				<p class="text-xs uppercase tracking-wide text-slate-500"><?= lang('project') ?></p>
				<h2 class="mt-1 text-2xl font-semibold text-slate-900 dark:text-slate-100"><?= html_escape($project_details->project_name) ?></h2>
				<div class="mt-2 flex flex-wrap items-center gap-2 text-sm text-slate-500">
					<span><?= lang('client') ?>: <strong class="text-slate-700 dark:text-slate-200"><?= html_escape($name) ?></strong></span>
					<span class="text-slate-300">•</span>
					<span><?= lang('categories') ?>: <strong class="text-slate-700 dark:text-slate-200"><?= html_escape($pc_name) ?></strong></span>
				</div>
			</div>
			<div class="flex flex-wrap items-center gap-2">
				<span class="inline-flex items-center rounded-full border px-2.5 py-1 text-xs font-medium <?= $status_badge ?>">
					<?= lang($status_key) ?>
				</span>
			</div>
		</div>
		<div class="mt-4 flex flex-wrap items-center gap-2">
			<?= get_tags($project_details->tags, true) ?>
			<?php if (!empty($overdueDays)) { ?>
				<span class="rounded-full bg-rose-50 text-rose-700 border border-rose-200 px-2.5 py-1 text-xs">
					<?= lang('overdue') ?> <?= html_escape($overdueDays) ?>
				</span>
			<?php } ?>
		</div>
	</div>

	<div class="grid gap-4 md:grid-cols-4">
		<div class="rounded-2xl border border-slate-200 dark:border-slate-800 bg-white dark:bg-slate-900 p-5 shadow-sm">
			<p class="text-xs uppercase text-slate-500"><?= lang('project_progress') ?></p>
			<p class="mt-2 text-2xl font-semibold text-slate-900 dark:text-slate-100"><?= round($project_progress, 2) ?>%</p>
			<div class="mt-2 h-2 w-full rounded-full bg-slate-100 dark:bg-slate-800">
				<div class="h-2 rounded-full bg-emerald-500" style="width: <?= round($project_progress, 2) ?>%"></div>
			</div>
		</div>
		<div class="rounded-2xl border border-slate-200 dark:border-slate-800 bg-white dark:bg-slate-900 p-5 shadow-sm">
			<p class="text-xs uppercase text-slate-500"><?= lang('tasks') ?></p>
			<p class="mt-2 text-2xl font-semibold text-slate-900 dark:text-slate-100"><?= $completed ?>/<?= $total_task ?></p>
			<p class="text-sm text-slate-500"><?= lang('completed') ?></p>
		</div>
		<div class="rounded-2xl border border-slate-200 dark:border-slate-800 bg-white dark:bg-slate-900 p-5 shadow-sm">
			<p class="text-xs uppercase text-slate-500"><?= lang('deadline') ?></p>
			<p class="mt-2 text-xl font-semibold text-slate-900 dark:text-slate-100"><?= display_date($project_details->end_date) ?></p>
			<p class="text-sm text-slate-500"><?= $TotalGone ?> <?= $lang ?></p>
		</div>
		<?php if (!empty($staff_finance)) { ?>
			<div class="rounded-2xl border border-slate-200 dark:border-slate-800 bg-white dark:bg-slate-900 p-5 shadow-sm">
				<p class="text-xs uppercase text-slate-500"><?= lang('budget_usage') ?></p>
				<p class="mt-2 text-xl font-semibold text-slate-900 dark:text-slate-100"><?= round($budget_percent) ?>%</p>
				<p class="text-sm text-slate-500"><?= display_money($budget_spent, $currency->symbol) ?> / <?= display_money($budget_total, $currency->symbol) ?></p>
			</div>
		<?php } ?>
	</div>

	<div class="grid gap-6 lg:grid-cols-[1.6fr_1fr]">
		<div class="space-y-6">
			<div class="rounded-2xl border border-slate-200 dark:border-slate-800 bg-white dark:bg-slate-900 p-6 shadow-sm">
				<h3 class="text-sm font-semibold text-slate-900 dark:text-slate-100 mb-4"><?= lang('overview') ?></h3>
				<div class="grid gap-4 md:grid-cols-2 text-sm text-slate-600 dark:text-slate-300">
					<div>
						<p class="text-xs uppercase text-slate-400"><?= lang('start_date') ?></p>
						<p class="mt-1 font-semibold text-slate-900 dark:text-slate-100"><?= display_date($project_details->start_date) ?></p>
					</div>
					<div>
						<p class="text-xs uppercase text-slate-400"><?= lang('end_date') ?></p>
						<p class="mt-1 font-semibold text-slate-900 dark:text-slate-100"><?= display_date($project_details->end_date) ?></p>
					</div>
					<div>
						<p class="text-xs uppercase text-slate-400"><?= lang('billing_type') ?></p>
						<p class="mt-1 font-semibold text-slate-900 dark:text-slate-100"><?= lang($project_details->billing_type) ?></p>
					</div>
					<div>
						<p class="text-xs uppercase text-slate-400"><?= lang('timer_status') ?></p>
						<p class="mt-1 font-semibold text-slate-900 dark:text-slate-100"><?= $timer_on ? lang('on') : lang('off') ?></p>
					</div>
				</div>
			</div>
			<div class="rounded-2xl border border-slate-200 dark:border-slate-800 bg-white dark:bg-slate-900 p-6 shadow-sm">
				<h3 class="text-sm font-semibold text-slate-900 dark:text-slate-100 mb-3"><?= lang('project_scope') ?></h3>
				<p class="text-sm text-slate-600 dark:text-slate-300">
					<?= !empty($project_details->description) ? nl2br(html_escape($project_details->description)) : lang('no_description') ?>
				</p>
			</div>
		</div>

		<aside class="space-y-6">
			<div class="rounded-2xl border border-slate-200 dark:border-slate-800 bg-white dark:bg-slate-900 p-6 shadow-sm">
				<p class="text-xs font-semibold uppercase text-slate-400"><?= lang('project_team') ?></p>
				<div class="mt-4 space-y-3">
					<?php if (!empty($participants)) { ?>
						<?php foreach ($participants as $member) { ?>
							<div class="flex items-center gap-3">
								<img src="<?= base_url() . $member->avatar ?>" class="h-8 w-8 rounded-full ring-2 ring-white dark:ring-slate-900" alt="<?= html_escape($member->fullname) ?>">
								<div>
									<p class="text-sm font-medium text-slate-800 dark:text-slate-100"><?= html_escape($member->fullname) ?></p>
									<p class="text-xs text-slate-500"><?= $member->role_id == 1 ? lang('admin') : lang('staff') ?></p>
								</div>
							</div>
						<?php } ?>
					<?php } else { ?>
						<p class="text-sm text-slate-500"><?= lang('everyone') ?></p>
					<?php } ?>
				</div>
			</div>
			<?php if (!empty($staff_finance)) { ?>
				<div class="rounded-2xl border border-slate-200 dark:border-slate-800 bg-white dark:bg-slate-900 p-6 shadow-sm">
					<p class="text-xs font-semibold uppercase text-slate-400"><?= lang('budget_usage') ?></p>
					<div class="mt-3 h-2 w-full rounded-full bg-slate-100 dark:bg-slate-800">
						<div class="h-2 rounded-full bg-emerald-500" style="width: <?= round($budget_percent) ?>%"></div>
					</div>
					<div class="mt-3 text-xs text-slate-500">
						<?= lang('spent') ?> <?= display_money($budget_spent, $currency->symbol) ?> / <?= display_money($budget_total, $currency->symbol) ?>
					</div>
				</div>
			<?php } ?>
		</aside>
	</div>
</div>
