<div class="project-overview-shell space-y-4">
	<div class="grid grid-cols-1 gap-3 sm:grid-cols-2 xl:grid-cols-4">

		<div class="project-kpi-card min-w-0 rounded-xl border border-border bg-card p-4 shadow-sm">
			<div class="flex items-center gap-3">
				<div class="rounded-xl bg-blue-50 p-2.5 text-blue-600 dark:bg-blue-900/30 dark:text-blue-400">
				<i data-lucide="pie-chart" class="h-5 w-5"></i>
			</div>
			<div>
					<p class="text-xl font-bold text-slate-900 dark:text-gray-100"><?= round($project_progress, 2) ?>%</p>
					<p class="text-[11px] font-medium uppercase tracking-[0.16em] text-slate-500 dark:text-gray-400"><?= lang('overall_completion')  ?></p>
				</div>
			</div>
		</div>

		<div class="project-kpi-card min-w-0 rounded-xl border border-border bg-card p-4 shadow-sm">
			<div class="flex items-center gap-3">
				<div class="rounded-xl bg-cyan-50 p-2.5 text-cyan-600 dark:bg-cyan-900/30 dark:text-cyan-400">
				<i data-lucide="check-square" class="h-5 w-5"></i>
			</div>
			<div>
					<p class="text-xl font-bold text-slate-900 dark:text-gray-100"><?= $completed ?>/<?= $total_task ?></p>
					<p class="text-[11px] font-medium uppercase tracking-[0.16em] text-slate-500 dark:text-gray-400"><?= lang('tasks_completed') ?></p>
				</div>
			</div>
		</div>

		<div class="project-kpi-card min-w-0 rounded-xl border border-border bg-card p-4 shadow-sm">
			<div class="flex items-center gap-3">
				<div class="rounded-xl bg-purple-50 p-2.5 text-purple-600 dark:bg-purple-900/30 dark:text-purple-400">
				<i data-lucide="calendar" class="h-5 w-5"></i>
			</div>
			<div>
					<p class="text-xl font-bold text-slate-900 dark:text-gray-100"><?= $TotalGone ?> </p>
					<p class="text-[11px] font-medium uppercase tracking-[0.16em] text-slate-500 dark:text-gray-400"><?= $lang ?></p>
				</div>
			</div>
		</div>

		<div class="project-kpi-card min-w-0 rounded-xl border border-border bg-card p-4 shadow-sm">
			<div class="flex items-center gap-3">
				<div class="rounded-xl bg-emerald-50 p-2.5 text-emerald-600 dark:bg-emerald-900/30 dark:text-emerald-400">
				<i data-lucide="trending-up" class="h-5 w-5"></i>
			</div>
			<div>
					<p class="text-xl font-bold text-slate-900 dark:text-gray-100"><?= $health_score ?>%</p>
					<p class="text-[11px] font-medium uppercase tracking-[0.16em] text-slate-500 dark:text-gray-400"><?= lang('health_score') ?></p>
				</div>
			</div>
		</div>

	</div>




	<div class="grid gap-6 xl:grid-cols-[2fr_1fr]">
		<div class="min-w-0 space-y-4">
			<div class="project-section-card min-w-0 rounded-xl border border-border bg-card p-4 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 class="mt-3 flex flex-wrap items-center gap-3 text-xs text-slate-500">
					<span class="inline-flex items-center gap-2"><i data-lucide="calendar" class="h-3 w-3"></i><?= lang('start_date') ?>: <?= display_date($project_details->start_date) ?></span>
					<span class="inline-flex items-center gap-2"><i data-lucide="calendar" class="h-3 w-3"></i><?= lang('end_date') ?>: <?= display_date($project_details->end_date) ?></span>
					<span class="inline-flex items-center gap-2"><i data-lucide="briefcase" class="h-3 w-3"></i><?= lang('billing_type') ?>: <?= lang($project_details->billing_type) ?></span>
				</div>
			</div>

			<div class="grid gap-4 xl:grid-cols-[1.6fr_1fr]">
				<div class="project-section-card min-w-0 rounded-xl border border-border bg-card p-4 shadow-sm">
					<div class="mb-3 flex items-center justify-between">
						<h3 class="text-sm font-semibold text-slate-900 dark:text-slate-100"><?= lang('recent_activity') ?></h3>
						<a href="<?= base_url() ?>admin/projects/project_details/<?= $project_details->project_id ?>/activities" class="text-xs text-primary hover:underline">
							<?= lang('view_all') ?>
						</a>
					</div>
					<div class="space-y-3 text-sm text-slate-600 dark:text-slate-300">
						<div class="flex items-start gap-3">
							<span class="mt-1 h-2 w-2 rounded-full bg-blue-500"></span>
							<div>
								<p class="font-medium text-slate-700 dark:text-slate-200"><?= lang('project_status') ?>: <?= lang($status_key) ?></p>
								<p class="text-xs text-slate-500"><?= lang('updated') ?> <?= display_date($project_details->end_date) ?></p>
							</div>
						</div>
						<div class="flex items-start gap-3">
							<span class="mt-1 h-2 w-2 rounded-full bg-emerald-500"></span>
							<div>
								<p class="font-medium text-slate-700 dark:text-slate-200"><?= lang('tasks_completed') ?></p>
								<p class="text-xs text-slate-500"><?= $completed ?> / <?= $total_task ?></p>
							</div>
						</div>
						<div class="flex items-start gap-3">
							<span class="mt-1 h-2 w-2 rounded-full bg-amber-500"></span>
							<div>
								<p class="font-medium text-slate-700 dark:text-slate-200"><?= lang('budget_usage') ?></p>
								<p class="text-xs text-slate-500"><?= display_money($budget_spent, $currency->symbol) ?> / <?= display_money($budget_total, $currency->symbol) ?></p>
							</div>
						</div>
					</div>
				</div>

				<div class="project-section-card min-w-0 rounded-xl border border-border bg-card p-4 shadow-sm">
					<h3 class="mb-3 text-sm font-semibold text-slate-900 dark:text-slate-100"><?= lang('upcoming_milestones') ?></h3>
					<div class="space-y-3 text-sm text-slate-600 dark:text-slate-300">
						<div class="project-inline-card flex items-center justify-between rounded-lg border border-border p-2.5">
							<div>
								<p class="font-medium text-slate-700 dark:text-slate-200"><?= lang('start_date') ?></p>
								<p class="text-xs text-slate-500"><?= display_date($project_details->start_date) ?></p>
							</div>
							<span class="rounded-full bg-emerald-50 px-2 py-1 text-xs font-semibold text-emerald-700"><?= lang('started') ?></span>
						</div>
						<div class="project-inline-card flex items-center justify-between rounded-lg border border-border p-2.5">
							<div>
								<p class="font-medium text-slate-700 dark:text-slate-200"><?= lang('end_date') ?></p>
								<p class="text-xs text-slate-500"><?= display_date($project_details->end_date) ?></p>
							</div>
							<span class="rounded-full bg-slate-100 px-2 py-1 text-xs font-semibold text-slate-600"><?= $lang ?></span>
						</div>
						<a href="<?= base_url() ?>admin/projects/project_details/<?= $project_details->project_id ?>/milestones" class="mt-3 inline-flex items-center justify-center gap-1
			  rounded-lg border border-slate-200 dark:border-gray-700
			  bg-white dark:bg-gray-800
			  px-3 py-1.5 text-xs font-semibold
			  text-slate-600 dark:text-gray-300
			  hover:border-slate-300 dark:hover:border-gray-500
			  hover:bg-slate-50 dark:hover:bg-gray-700
			  transition">
							<?= lang('view_roadmap') ?>
						</a>
					</div>
				</div>
			</div>

			<div class="project-section-card min-w-0 rounded-xl border border-border bg-card p-4 shadow-sm">
				<div class="mb-3 flex items-center justify-between">
					<h3 class="text-sm font-semibold text-slate-900 dark:text-slate-100"><?= lang('key_assets') ?></h3>
					<a href="<?= base_url() ?>admin/projects/project_details/<?= $project_details->project_id ?>/attachments" class="text-xs text-primary hover:underline">
						<?= lang('view_all') ?>
					</a>
				</div>
				<div class="grid grid-cols-1 gap-3 sm:grid-cols-2">
						<div class="project-inline-card min-w-0 rounded-lg border border-border p-3 text-sm text-slate-600 dark:text-slate-300">
							<p class="font-medium text-slate-700 dark:text-slate-200"><?= lang('attachments') ?></p>
							<p class="text-xs text-slate-500"><?= $attachments_count ?> <?= lang('files') ?></p>
						</div>
						<div class="project-inline-card min-w-0 rounded-lg border border-border p-3 text-sm text-slate-600 dark:text-slate-300">
							<p class="font-medium text-slate-700 dark:text-slate-200"><?= lang('comments') ?></p>
							<p class="text-xs text-slate-500"><?= $comments_count ?> <?= lang('updates') ?></p>
						</div>
				</div>
			</div>
		</div>

		<aside class="space-y-4">
			<div class="project-aside-card min-w-0 rounded-xl border border-border bg-card p-4 shadow-sm">
				<p class="text-xs font-semibold uppercase text-slate-400"><?= lang('at_a_glance') ?></p>
				<div class="mt-3 flex items-center gap-3">
					<div class="flex h-9 w-9 items-center justify-center rounded-lg bg-indigo-100 font-semibold text-indigo-700">
						<?= strtoupper(mb_substr($name, 0, 1)) ?>
					</div>
					<div>
						<p class="text-sm font-semibold text-slate-900 dark:text-slate-100"><?= html_escape($name) ?></p>
						<p class="text-xs text-slate-500"><?= lang('client') ?></p>
					</div>
				</div>
				<?php if (!empty($project_details->client_email)) { ?>
					<a class="mt-3 inline-flex text-xs text-primary hover:underline" href="mailto:<?= html_escape($project_details->client_email) ?>">
						<?= html_escape($project_details->client_email) ?>
					</a>
				<?php } ?>

				<div class="mt-5">
					<p class="text-xs font-semibold text-slate-500 mb-3"><?= lang('project_team') ?></p>
					<div class="space-y-2.5">
						<?php if (!empty($participants)) { ?>
							<?php foreach ($participants as $member) { ?>
								<div class="flex items-center gap-3">
									<img src="<?= base_url() . $member->avatar ?>" class="h-7 w-7 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>
					<?php if (!empty($can_edit) && !empty($edited)) { ?>
						<?= btn_modal(
							'admin/projects/update_users/' . $project_details->project_id,
							lang('assign_member'),
							lang('assign_member'),
							'md',
							'plus',
							array('class' => 'mt-3 inline-flex items-center justify-center gap-1 rounded-lg border border-slate-200 dark:border-gray-700 bg-white dark:bg-gray-800 px-3 py-1.5 text-xs font-semibold text-slate-600 dark:text-gray-300 hover:border-slate-300 dark:hover:border-gray-500 hover:bg-slate-50 dark:hover:bg-gray-700 transition')
						) ?>
					<?php } ?>

				</div>

				<div class="mt-5">
					<div class="flex items-center justify-between">
						<p class="text-xs font-semibold text-slate-500"><?= lang('budget_usage') ?></p>
						<span class="text-xs font-semibold text-slate-700 dark:text-slate-200"><?= round($budget_percent) ?>%</span>
					</div>
					<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($budget_percent) ?>%"></div>
					</div>
					<div class="mt-3 flex items-center justify-between text-xs text-slate-500">
						<span><?= lang('spent') ?> <?= display_money($budget_spent, $currency->symbol) ?></span>
						<span><?= lang('total') ?> <?= display_money($budget_total, $currency->symbol) ?></span>
					</div>
				</div>

				<div class="mt-5">
					<p class="text-xs font-semibold text-slate-500 mb-2"><?= lang('tags') ?></p>
					<div class="flex flex-wrap gap-2">
						<?= get_tags($project_details->tags, true) ?>
					</div>
				</div>
			</div>
		</aside>
	</div>
</div>
