<?php
$announcement = $announcements_details;
$uploaded_file = [];
if (!empty($announcement->attachment)) {
	$uploaded_file = json_decode($announcement->attachment);
}

$show_custom_fields = custom_form_label(16, $announcement->announcements_id);
$status_badge = '<span class="inline-flex items-center rounded-full bg-emerald-100 px-2.5 py-0.5 text-xs font-semibold text-emerald-700">' . lang('published') . '</span>';
?>

<div class="space-y-6">
	<div class="rounded-2xl border border-border bg-card p-5 shadow-sm">
		<div class="flex flex-wrap items-start justify-between gap-4">
			<div class="space-y-2">
				<p class="text-xs font-semibold uppercase tracking-wide text-muted-foreground"><?= lang('announcements'); ?></p>
				<h2 class="text-xl font-semibold text-foreground"><?= html_escape($announcement->title); ?></h2>
				<div class="flex flex-wrap items-center gap-2 text-sm text-muted-foreground">
					<?= $status_badge; ?>
					<span class="inline-flex rounded-full bg-slate-100 px-2 py-0.5 text-xs text-slate-600"><?= lang('created_by'); ?>: <?= html_escape(fullname($announcement->user_id)); ?></span>
				</div>
			</div>
			<a href="<?= base_url('client/dashboard'); ?>" class="inline-flex items-center gap-2 rounded-lg border border-border px-4 py-2 text-sm font-medium text-foreground transition hover:bg-muted">
				<i data-lucide="arrow-left" class="h-4 w-4"></i>
				<span><?= lang('dashboard'); ?></span>
			</a>
		</div>
	</div>

	<div class="grid gap-6 lg:grid-cols-12">
		<aside class="space-y-4 lg:col-span-4">
			<div class="rounded-2xl border border-border bg-card p-5 shadow-sm">
				<h3 class="text-sm font-semibold text-foreground"><?= lang('details'); ?></h3>
				<div class="mt-4 space-y-4 text-sm">
					<div>
						<p class="text-xs font-semibold uppercase tracking-wide text-muted-foreground"><?= lang('start_date'); ?></p>
						<p class="mt-1 text-foreground"><?= display_date($announcement->start_date); ?></p>
					</div>
					<div>
						<p class="text-xs font-semibold uppercase tracking-wide text-muted-foreground"><?= lang('end_date'); ?></p>
						<p class="mt-1 text-foreground"><?= display_date($announcement->end_date); ?></p>
					</div>
					<div>
						<p class="text-xs font-semibold uppercase tracking-wide text-muted-foreground"><?= lang('created_date'); ?></p>
						<p class="mt-1 text-foreground"><?= display_date($announcement->created_date) . ' ' . display_time($announcement->created_date); ?></p>
					</div>
					<div>
						<p class="text-xs font-semibold uppercase tracking-wide text-muted-foreground"><?= lang('share_with'); ?></p>
						<p class="mt-1 text-foreground"><?= lang('client'); ?></p>
					</div>
				</div>
			</div>

			<?php if (!empty($show_custom_fields)) : ?>
				<div class="rounded-2xl border border-border bg-card p-5 shadow-sm">
					<h3 class="text-sm font-semibold text-foreground"><?= lang('custom_field'); ?></h3>
					<div class="mt-4 space-y-3">
						<?php foreach ($show_custom_fields as $c_label => $v_fields) :
							if (empty($v_fields)) {
								continue;
							}
							?>
							<div class="rounded-lg border border-border bg-muted/30 px-3 py-2">
								<p class="text-xs font-semibold uppercase tracking-wide text-muted-foreground"><?= $c_label; ?></p>
								<p class="mt-1 text-sm text-foreground"><?= $v_fields; ?></p>
							</div>
						<?php endforeach; ?>
					</div>
				</div>
			<?php endif; ?>
		</aside>

		<section class="space-y-6 lg:col-span-8">
			<div class="rounded-2xl border border-border bg-card p-5 shadow-sm">
				<h3 class="text-sm font-semibold text-foreground"><?= lang('description'); ?></h3>
				<div class="prose mt-4 max-w-none text-sm text-foreground">
					<?= $announcement->description; ?>
				</div>
			</div>

			<div class="rounded-2xl border border-border bg-card p-5 shadow-sm">
				<div class="flex items-center justify-between gap-3">
					<h3 class="text-sm font-semibold text-foreground"><?= lang('attachment'); ?></h3>
					<span class="text-xs text-muted-foreground"><?= !empty($uploaded_file) ? count((array) $uploaded_file) . ' ' . lang('files') : lang('no_data_found'); ?></span>
				</div>

				<?php if (!empty($uploaded_file)) : ?>
					<div class="mt-4 grid gap-3 sm:grid-cols-2">
						<?php foreach ($uploaded_file as $fKey => $v_files) :
							if (empty($v_files)) {
								continue;
							}
							?>
							<a href="<?= base_url('client/announcements/download_files/' . $announcement->announcements_id . '/' . $fKey); ?>"
								class="group flex items-center justify-between gap-3 rounded-lg border border-border bg-white px-3 py-3 text-sm transition-all hover:border-slate-400 hover:shadow-sm dark:bg-gray-800 dark:border-gray-700 dark:hover:border-gray-500 dark:hover:bg-gray-750">
								<span class="flex items-center gap-3 overflow-hidden">
									<span class="flex h-10 w-10 shrink-0 items-center justify-center rounded-md bg-slate-100 text-slate-500 transition-colors group-hover:bg-slate-200 dark:bg-gray-700 dark:text-gray-300 dark:group-hover:bg-gray-600">
										<i data-lucide="<?= !empty($v_files->is_image) ? 'image' : 'file-text'; ?>" class="h-4 w-4"></i>
									</span>
									<span class="min-w-0">
										<span class="block truncate font-medium text-foreground"><?= html_escape($v_files->fileName); ?></span>
										<span class="block text-xs text-muted-foreground"><?= (float) $v_files->size; ?> <?= lang('kb'); ?></span>
									</span>
								</span>
								<span class="shrink-0 text-xs font-semibold text-primary"><?= lang('download'); ?></span>
							</a>
						<?php endforeach; ?>
					</div>
				<?php else : ?>
					<div class="mt-4 rounded-xl border border-dashed border-border px-4 py-8 text-center text-sm text-muted-foreground">
						<?= lang('no_data_found'); ?>
					</div>
				<?php endif; ?>
			</div>
		</section>
	</div>
</div>
