<?php
$show_custom_fields = custom_form_label(16, $resignation_details->id);
?>

<div class="mx-auto max-w-5xl space-y-4 p-1">
	<div class="flex flex-wrap items-center justify-end gap-2">
		<a href="<?= base_url('admin/resignation/resignation_letter_pdf/' . $resignation_details->id) ?>" class="inline-flex h-9 items-center gap-2 rounded-lg bg-indigo-600 px-3 py-2 text-xs font-semibold text-white shadow-sm hover:bg-indigo-700">
			<i data-lucide="file-text" class="h-4 w-4"></i>
			<span><?= lang('pdf') ?></span>
		</a>
		<a href="<?= base_url('admin/resignation/resignation_letter_print/' . $resignation_details->id) ?>" target="_blank" class="inline-flex h-9 items-center gap-2 rounded-lg border border-gray-200 bg-white px-3 py-2 text-xs font-semibold text-gray-700 shadow-sm hover:bg-gray-50 dark:border-gray-700 dark:bg-gray-900 dark:text-gray-200 dark:hover:bg-gray-800">
			<i data-lucide="printer" class="h-4 w-4"></i>
			<span><?= lang('print') ?></span>
		</a>
	</div>

	<div class="rounded-2xl bg-gradient-to-r from-amber-500 via-orange-500 to-rose-500 p-[1px] shadow-lg">
		<div class="rounded-2xl bg-white p-4 dark:bg-gray-800">
			<div class="flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between">
				<div>
					<p class="text-xs font-semibold uppercase tracking-[0.2em] text-amber-600 dark:text-amber-300"><?= lang('resignation') ?></p>
					<p class="mt-1 text-lg font-semibold text-gray-900 dark:text-white">
						<?= !empty($resignation_details->fullname) ? html_escape($resignation_details->fullname) : '-' ?>
					</p>
				</div>
				<div class="rounded-lg bg-amber-50 px-3 py-2 text-sm text-amber-700 dark:bg-amber-900/40 dark:text-amber-200">
					<?= lang('resignation_date') ?>: <?= !empty($resignation_details->resignation_date) ? display_date($resignation_details->resignation_date) : '-' ?>
				</div>
			</div>
		</div>
	</div>

	<div class="grid grid-cols-1 gap-4 lg:grid-cols-12">
		<div class="space-y-4 lg:col-span-4">
			<div class="rounded-xl border border-gray-200 bg-white p-4 shadow-sm dark:border-gray-700 dark:bg-gray-800">
				<p class="text-xs font-semibold uppercase tracking-wide text-gray-500 dark:text-gray-400"><?= lang('employee') ?></p>
				<p class="mt-1 text-sm font-medium text-gray-800 dark:text-gray-100">
					<?= !empty($resignation_details->fullname) ? html_escape($resignation_details->fullname) : '-' ?>
				</p>
			</div>

			<div class="rounded-xl border border-gray-200 bg-white p-4 shadow-sm dark:border-gray-700 dark:bg-gray-800">
				<p class="text-xs font-semibold uppercase tracking-wide text-gray-500 dark:text-gray-400"><?= lang('notice_date') ?></p>
				<p class="mt-1 text-sm text-gray-700 dark:text-gray-200">
					<?= !empty($resignation_details->notice_date) ? display_date($resignation_details->notice_date) : '-' ?>
				</p>
			</div>
		</div>

		<div class="space-y-4 lg:col-span-8">
			<?php if (!empty($show_custom_fields)) : ?>
				<div class="rounded-xl border border-gray-200 bg-white p-4 shadow-sm dark:border-gray-700 dark:bg-gray-800">
					<p class="text-xs font-semibold uppercase tracking-wide text-gray-500 dark:text-gray-400"><?= lang('custom_fields') ?></p>
					<div class="mt-3 divide-y divide-gray-200 dark:divide-gray-700">
						<?php foreach ($show_custom_fields as $c_label => $v_fields) :
							if (empty($v_fields)) {
								continue;
							} ?>
							<div class="grid grid-cols-12 gap-2 py-2">
								<div class="col-span-5 text-sm font-medium text-gray-700 dark:text-gray-300"><?= html_escape($c_label) ?></div>
								<div class="col-span-7 text-sm text-gray-700 dark:text-gray-100"><?= $v_fields ?></div>
							</div>
						<?php endforeach; ?>
					</div>
				</div>
			<?php endif; ?>

			<div class="rounded-xl border border-gray-200 bg-white p-4 shadow-sm dark:border-gray-700 dark:bg-gray-800">
				<p class="text-xs font-semibold uppercase tracking-wide text-gray-500 dark:text-gray-400"><?= lang('description') ?></p>
				<div class="mt-3 rounded-lg border-l-4 border-amber-500 bg-amber-50 p-3 text-sm leading-6 text-gray-700 dark:border-amber-400 dark:bg-amber-900/20 dark:text-gray-200">
					<?= !empty($resignation_details->description) ? $resignation_details->description : '-' ?>
				</div>
			</div>
		</div>
	</div>
</div>
