<script lang="ts">
	import type { PageData } from './$types';
	export let data: PageData;
	let date = new Date().getFullYear();
	import { env } from '$env/dynamic/public';
	const positions_base_url = env.PUBLIC_URL_REGISTER_QUALIFY_EXAM + '/exam/';
	import dayjs from 'dayjs';
	import { each } from 'svelte/internal';
	function formatDate(start: string, end: string | undefined = undefined) {
		if (!end) return dayjs(start).add(543, 'year').format('DD MMM YYYY');
		return (
			dayjs(start).add(543, 'year').format('DD MMM YYYY') +
			' - ' +
			dayjs(end).add(543, 'year').format('DD MMM YYYY')
		);
	}
	function isEndDatePassed(endDate: string | undefined) {
		if (endDate) {
			const today = new Date();
			const endDateDate = new Date(endDate);
			endDateDate.setDate(endDateDate.getDate() + 1);
			return endDateDate.getTime() < today.getTime();
		}
		return false;
	}

	function isRegistrationOpen() {
		if (!data.register_startDate) return false;
		const today = new Date().toISOString().slice(0, 10);
		const startDate = data.register_startDate;
		const endDate = data.register_endDate;

		if (endDate) {
			return today >= startDate && today <= endDate;
		}
		return today >= startDate;
	}

	function isRegistrationExpired() {
		if (!data.register_endDate) return false;
		const today = new Date().toISOString().slice(0, 10);
		return today > data.register_endDate;
	}

	function getRegistrationText() {
		if (isRegistrationExpired()) return 'ดาวน์โหลดใบสมัคร';
		if (isRegistrationOpen()) return 'ใบสมัคร';
		return 'สมัครสอบ';
	}
</script>

<section>
	<div class="p-one parallax-inner">
		<h2>การคัดเลือก</h2>
	</div>
</section>
<section class="pb-40 relative bg-blueGray-100">
	<div class="container mx-auto justify-center flex flex-wrap">
		<div class=" bg-blueGray-100 -mt-6 px-5 top-0 bottom-auto absolute z-40 rounded-md">
			<div class="text-sm breadcrumbs">
				<ul>
					<li class="text-pink-500 hover:text-pink-700">
						<a href="/">
							<svg
								xmlns="http://www.w3.org/2000/svg"
								class="h-4 w-4"
								fill="none"
								viewBox="0 0 24 24"
								stroke="currentColor"
								><path
									stroke-linecap="round"
									stroke-linejoin="round"
									stroke-width="2"
									d="M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1m-6 0h6"
								/></svg
							>
						</a>
					</li>
					<li>
						<span class="breadTaxt">ประกาศเกี่ยวกับการคัดเลือกบุคลากรของกทม.</span>
					</li>
				</ul>
			</div>
		</div>
	</div>
	<div class="container mx-auto items-start flex flex-wrap px-4 pt-11 justify-center">
		<div class="card bg-white shadow-xl w-full p-8 max-w-4xl">
			<div class="text-2xl mb-3 font-medium">{data.title}</div>
			<div class="text-sm">
				<i class="fa-regular fa-calendar mr-4 text-blue-500" /><span class="text-blue-500"
					>วันประกาศ : {data.date}</span
				>
			</div>
			{#if data.announcementExam}
				<div class="text-md card-detail p-4 mt-5 space-y-2">
					{#if data.register_startDate}
						<div>
							<span class="pr-1 font-semibold">สมัคร :</span>
							{formatDate(data.register_startDate, data.register_endDate)}
						</div>
					{/if}
					{#if data.payment_startDate}
						<div>
							<span class="pr-1 font-semibold">ชำระเงิน :</span>
							{formatDate(data.payment_startDate, data.payment_endDate)}
						</div>
					{/if}
					<!-- {#if data.examDate}
						<div><span class="pr-1 font-semibold">สอบ :</span> {formatDate(data.examDate)}</div>
					{/if} -->
				</div>
			{/if}
			<hr class="border-blueGray-200 my-7" />
			<div class="">
				{@html data.detail}
			</div>
			{#if data.images}
				{#each data.images as i}
					<div><img src={i.url} alt={i.title} /></div>
				{/each}
			{/if}
			{#if data.announcementExam && data.positions}
				<div class="w-12/12 text-lg font-medium pt-6">
					{getRegistrationText()}
				</div>

				<hr class="border-blueGray-200 my-2" />
				<div class="grid grid-cols-2 justify-stretch ... gap-4">
					<div>
						{#if data.positionsTrue}
							<div class="w-12/12 text-lg font-medium pt-6">ประเภทวิชาการ</div>
							{#each data.positionsTrue as p}
								<div class="text-lg py-1">
									<div class="flex flex-wrap items-center">
										{#if 'register_endDate' in data && data.canRegister}
											<a
												class="btn btn-sm btn-outline btn-info cursor-pointe"
												href={positions_base_url + p.path}
												target="_blank"
											>
												<i class="fa-solid fa-pen-to-square text-sm pr-2" />
												ใบสมัคร
											</a>
										{:else}
											<a
												class="btn btn-sm btn-outline btn-info cursor-pointe"
												href={positions_base_url + p.path}
												target="_blank"
											>
												<i class="fa-solid fa-pen-to-square text-sm pr-2" />
												{isRegistrationOpen() || isRegistrationExpired() ? 'ใบสมัคร' : ''}
											</a>
										{/if}
										<div class="pl-2">
											<span>{p.title}</span>
										</div>
									</div>
								</div>
							{/each}
						{/if}
					</div>
					<div>
						{#if data.positionsFalse}
							<div class="w-12/12 text-lg font-medium pt-6">ประเภททั่วไป</div>
							{#each data.positionsFalse as a}
								<div class="text-lg py-1">
									<div class="flex flex-wrap items-center">
										<!-- {data.canRegister} -->
										{#if 'register_endDate' in data && data.canRegister}
											<a
												class="btn btn-sm btn-outline btn-info cursor-pointe"
												href={positions_base_url + a.path}
												target="_blank"
											>
												<i class="fa-solid fa-pen-to-square text-sm pr-2" />
												ใบสมัคร
											</a>
										{:else}
											<a
												class="btn btn-sm btn-outline btn-info cursor-pointe"
												href={positions_base_url + a.path}
												target="_blank"
											>
												<i class="fa-solid fa-pen-to-square text-sm pr-2" />
												{isRegistrationOpen() || isRegistrationExpired() ? 'ใบสมัคร' : ''}
											</a>
										{/if}
										<div class="pl-2">
											<span>{a.title}</span>
										</div>
									</div>
								</div>
							{/each}
						{/if}
					</div>
				</div>

				<div class="pb-7" />
			{/if}

			{#if data.files}
				<div class={data.files.length == 0 ? 'display-none' : 'w-12/12 text-lg font-medium'}>
					เอกสารประกอบ
				</div>
				{#each data.files as file}
					<hr class="border-blueGray-200 my-2" />

					<div class="text-lg py-1">
						<div class="flex flex-wrap items-center">
							<a
								class="btn btn-sm btn-outline btn-primary cursor-pointe"
								href={file.url}
								target="_blank"
							>
								<i class="fa-solid fa-eye text-sm pr-2" />
								อ่านเพิ่มเติม
							</a>
							<div class="pl-4">
								<!-- <i class="fa-solid fa-bookmark mr-3 text-xs text-primary"></i> -->
								<span>{file.title}</span>
							</div>
						</div>
					</div>
				{/each}
			{/if}
			<hr class="border-blueGray-200 my-7" />
			<div>
				<a href="/qualifying" class="btn btn-outline text-gray-500">
					<i class="fa-solid fa-arrow-left mr-4" />
					ย้อนกลับ
				</a>
			</div>
		</div>
	</div>
</section>
