<div class="space-y-6">
	<div class="overflow-hidden rounded-3xl border border-slate-200 bg-white shadow-sm dark:border-slate-700 dark:bg-slate-900">
		<div class="h-1 bg-gradient-to-r from-cyan-500 via-blue-500 to-indigo-500"></div>
		<div class="p-6">
			<div class="flex flex-wrap items-start justify-between gap-4">
				<div>
					<p class="text-xs uppercase tracking-wider text-slate-500 dark:text-slate-400"><?= lang('project') ?></p>
					<h2 class="mt-1 text-2xl font-bold 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 dark:text-slate-400">
						<span><?= lang('client') ?>: <strong class="text-slate-700 dark:text-slate-200"><?= html_escape($name) ?></strong></span>
						<span>&bull;</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-semibold <?= $status_badge ?>"><?= lang($status_key) ?></span>
					<?php if (!empty($overdueDays)) { ?>
						<span class="inline-flex items-center rounded-full border border-rose-200 bg-rose-50 px-2.5 py-1 text-xs font-semibold text-rose-700 dark:border-rose-800 dark:bg-rose-900/30 dark:text-rose-300">
							<?= lang('overdue') ?> <?= html_escape($overdueDays) ?>
						</span>
					<?php } ?>
				</div>
			</div>

			<div class="mt-5 grid grid-cols-1 gap-3 sm:grid-cols-2 xl:grid-cols-4">
				<div class="min-w-0 rounded-xl border border-slate-200 bg-slate-50/70 p-4 dark:border-slate-700 dark:bg-slate-800/60">
					<p class="text-[11px] uppercase tracking-wide text-slate-500 dark:text-slate-400"><?= lang('project_progress') ?></p>
					<p class="mt-1 text-xl font-bold text-slate-900 dark:text-slate-100"><?= round($project_progress, 2) ?>%</p>
					<div class="mt-2 h-2 w-full rounded-full bg-slate-200 dark:bg-slate-700">
						<div class="h-2 rounded-full bg-emerald-500" style="width: <?= round($project_progress, 2) ?>%"></div>
					</div>
				</div>
				<div class="min-w-0 rounded-xl border border-slate-200 bg-slate-50/70 p-4 dark:border-slate-700 dark:bg-slate-800/60">
					<p class="text-[11px] uppercase tracking-wide text-slate-500 dark:text-slate-400"><?= lang('tasks') ?></p>
					<p class="mt-1 text-xl font-bold text-slate-900 dark:text-slate-100"><?= $completed ?>/<?= $total_task ?></p>
					<p class="text-xs text-slate-500 dark:text-slate-400"><?= lang('completed') ?></p>
				</div>
				<div class="min-w-0 rounded-xl border border-slate-200 bg-slate-50/70 p-4 dark:border-slate-700 dark:bg-slate-800/60">
					<p class="text-[11px] uppercase tracking-wide text-slate-500 dark:text-slate-400"><?= lang('deadline') ?></p>
					<p class="mt-1 text-sm font-semibold text-slate-900 dark:text-slate-100"><?= display_date($project_details->end_date) ?></p>
					<p class="text-xs text-slate-500 dark:text-slate-400"><?= $TotalGone ?> <?= $lang ?></p>
				</div>
				<div class="min-w-0 rounded-xl border border-slate-200 bg-slate-50/70 p-4 dark:border-slate-700 dark:bg-slate-800/60">
					<p class="text-[11px] uppercase tracking-wide text-slate-500 dark:text-slate-400"><?= lang('budget_usage') ?></p>
					<p class="mt-1 text-sm font-semibold text-slate-900 dark:text-slate-100"><?= display_money($budget_spent, $currency->symbol) ?></p>
					<p class="text-xs text-slate-500 dark:text-slate-400"><?= lang('total') ?> <?= display_money($budget_total, $currency->symbol) ?></p>
				</div>
			</div>
		</div>
	</div>

	<div class="grid gap-6 xl:grid-cols-[1.65fr_1fr]">
		<div class="min-w-0 space-y-6">
			<div class="min-w-0 rounded-2xl border border-slate-200 bg-white p-6 shadow-sm dark:border-slate-700 dark:bg-slate-900">
				<h3 class="mb-3 text-sm font-semibold text-slate-900 dark:text-slate-100"><?= lang('project_scope') ?></h3>
				<p class="text-sm leading-relaxed text-slate-600 dark:text-slate-300">
					<?= !empty($project_details->description) ? nl2br(html_escape($project_details->description)) : lang('no_description') ?>
				</p>
				<div class="mt-4 flex flex-wrap gap-2">
					<?= get_tags($project_details->tags, true) ?>
				</div>
			</div>

			<div class="min-w-0 rounded-2xl border border-slate-200 bg-white p-6 shadow-sm dark:border-slate-700 dark:bg-slate-900">
				<h3 class="mb-3 text-sm font-semibold text-slate-900 dark:text-slate-100"><?= lang('overview') ?></h3>
				<div class="grid grid-cols-1 gap-4 sm:grid-cols-2 text-sm">
					<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>

		<aside class="min-w-0 space-y-6">
			<div class="min-w-0 rounded-2xl border border-slate-200 bg-white p-6 shadow-sm dark:border-slate-700 dark:bg-slate-900">
				<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) { ?>
							<?php $member_avatar = !empty($member->avatar) ? base_url() . $member->avatar : base_url('uploads/default_avatar.jpg'); ?>
							<div class="flex items-center gap-3">
								<img src="<?= $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 dark:text-slate-400"><?= lang('everyone') ?></p>
					<?php } ?>
				</div>
			</div>

			<div class="min-w-0 rounded-2xl border border-slate-200 bg-white p-6 shadow-sm dark:border-slate-700 dark:bg-slate-900">
				<p class="text-xs font-semibold uppercase text-slate-400"><?= lang('financials') ?></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 dark:text-slate-400">
					<?= lang('spent') ?> <?= display_money($budget_spent, $currency->symbol) ?>
				</div>
				<div class="text-xs text-slate-500 dark:text-slate-400">
					<?= lang('total') ?> <?= display_money($budget_total, $currency->symbol) ?>
				</div>
			</div>
		</aside>
	</div>
</div>
