<script lang="ts">
    import type { PageData } from './$types'
    export let data: PageData;
	import dayjs from 'dayjs'
	function formatDate(start:string,end:string|undefined=undefined){
		if(!end)
			return dayjs(start).format("DD MMM BBBB")
		return dayjs(start).format("DD MMM BBBB")+" - "+dayjs(end).format("DD MMM BBBB")
	}
</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"></i><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.regi}
				<div class="{data.regi.length == 0 ? 'display-none': 'w-12/12 text-lg font-medium pt-6'}">สมัครสอบ</div>
				{#each data.regi as regi}
				<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-info cursor-pointe" href={regi.url}   target="_blank">
							<i class="fa-solid fa-pen-to-square text-sm pr-2"></i>
							สมัครสอบ
						</a>
						<div class="pl-4">
							<span>{regi.title}</span>
						</div>
					</div>
				</div>
				{/each}
				<div class="pb-7"></div>
			{/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"></i>
							อ่านเพิ่มเติม
						</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="/competitive" class="btn btn-outline text-gray-500">
					<i class="fa-solid fa-arrow-left mr-4"></i>
					ย้อนกลับ
				</a>
			</div>
        </div>
    </div>
</section>