<script lang="ts">
	import type { PageData } from './$types';
	export let data: PageData;
	const qualify_exams = data.qualify_exams;
    const competitive_exams = data.competitive_exams;
    const detail = data.detail;
	const patternVue = "/images/pattern.png";
	const sel1 = "/images/sel1.png";
	const sel2 = "/images/sel2.png";
	const sel3 = "/images/sel3.png";
	const com1 = "/images/com1.jpg";
	const com2 = "/images/com2.jpg";
	const com3 = "/images/com3.jpg";

</script>
<section class="header relative items-start mt-12 flex max-h-860-px">
    <div class="container mx-auto items-start flex flex-wrap">
        <div class="w-full md:w-6/12 lg:w-6/12 xl:w-6/12 px-6">
            <div class="pt-16 sm:pt-18">
                <h2 class="font-semibold text-3xl text-blueGray-600">
                    กองสรรหาบุคคล
                </h2>
                <h2 class="pt-1 text-2xl text-red-400">
                    Recruitment Division
                </h2>
                <p class="mt-4 text-lg leading-relaxed text-blueGray-500">
                    การสรรหาและเลือกสรรบุคคลเข้ารับราชการเป็นข้าราชการกรุงเทพมหานครสามัญ และข้าราชการครูกรุงเทพมหานครเฉพาะสังกัดสำนักพัฒนา
                    ชุมชน
                </p>
                <div class="mt-12">
                    <a
                      href="/qualifying"
                      target="_blank"
                      class=" text-white font-bold px-6 py-4 rounded outline-none focus:outline-none mr-1 mb-1 bg-red-400 active:bg-red-500 uppercase text-sm shadow hover:shadow-lg ease-linear transition-all duration-150"
                    >
                      การสอบคัดเลือก
                    </a>
                    <a
                      href="/competitive"
                      class=" ml-1 text-white font-bold px-6 py-4 rounded outline-none focus:outline-none mr-1 mb-1 bg-blueGray-700 active:bg-blueGray-600 uppercase text-sm shadow hover:shadow-lg ease-linear transition-all duration-150"
                      target="_blank"
                    >
                        การสอบแข่งขัน
                    </a>
                  </div>
            </div>
        </div>
    </div>
    <img
		class="absolute top-0 b-auto right-0 sm:w-5/12 -mt-48 sm:mt-0 w-9/12  hidden md:flex"
		src="{patternVue}"
		alt="..."
    />
</section>
<section class="mt-48 md:mt-40 pb-40 relative bg-blueGray-100">
    <div
      class="-mt-20 top-0 bottom-auto left-0 right-0 w-full absolute h-20"
      style="transform: translateZ(0);"
    >
      <svg
        class="absolute bottom-0 overflow-hidden"
        xmlns="http://www.w3.org/2000/svg"
        preserveAspectRatio="none"
        version="1.1"
        viewBox="0 0 2560 100"
        x="0"
        y="0"
      >
        <polygon
          class="text-blueGray-100 fill-current"
          points="2560 0 2560 100 0 100"
        ></polygon>
      </svg>
    </div>

	<!-- ประกาศเกี่ยวกับการคัดเลือกบุคลากรกทม. -->
    <div class="container mx-auto">
			<div class="flex flex-wrap px-6">
				<div
					class="w-full pt-24 mb-10 flex flex-wrap justify-between">
					<h6 class="text-2xl font-semibold ">
						ประกาศเกี่ยวกับ<span class="text-red-400">การคัดเลือกบุคลากรกทม.</span>
					</h6>
					<a
						href="/"
						target="_blank"
						class="font-semibold text-gray-500 hover:text-gray-400 ease-linear transition-all duration-150"
					>
						ประกาศทั้งหมด
						<i class="fa fa-angle-double-right ml-1 leading-relaxed"></i>
					</a>
				</div>
				
				<div
					class="w-full lg:w-6/12 cardxl"
				>
					<div class="card  bg-white shadow-xl w-full ">
						<figure style="height: 250px;" class="img-hover-zoom--brightness">
							<img src="{sel1}" alt="1" />
						</figure>
						<div class="card-body">
							<div class="text-sm font-medium text-gray-500">
								ข่าววันที่ : 24  มี.ค. 2566  
								<div class="badge badge-secondary text-white ml-4">NEW</div>
							</div>
							<div class="card-title font-medium">
								ด่วน !! ประกาศวัน เวลา สถานที่ และระเบียบการคัดเลือกลูกจ้างกทม.
							</div>
							<div class="mt-4 text-sm row-auto no-wrap">
								<i class="fab fa-twitter text-blue-500"></i>
								<span class="pl-2 pr-4 text-gray-400">0</span>

								<i class="fab fa-facebook-f text-blue-700"></i>
								<span class="pl-2 pr-4 text-gray-400">0</span>
							
								<i class="fab fa-line text-green-500"></i>
								<span class="pl-2 pr-4 text-gray-400">0</span>
							</div>						
						</div>
					</div>
				</div>
				<div class="w-full lg:w-6/12">
					<div class="flex flex-wrap space-y-8">
						<div class="flex flex-col w-full">
							<div class="card card-side bg-white shadow-xl w-full">
								<figure class="w-full lg:w-5/12 imgCard img-hover-zoom--brightness">
									<img src="{sel2}" alt="1" class="h-full" />
								</figure>
								<div class="card-body w-full lg:w-7/12">
									<h2 class="text-sm font-medium text-gray-500">
										ข่าววันที่ :  3  มี.ค. 2566
									</h2>
									<div class="card-title font-medium">
										ประกาศรายชื่อผู้มีสิทธิเข้ารับการคัดเลือกบุคลากรกทม.เป็นข้าราชการฯ ครั้งที่ 1/2565
									</div>
									<div class="mt-4 text-sm row-auto no-wrap">
										<i class="fab fa-twitter text-blue-500"></i>
										<span class="pl-2 pr-4 text-gray-400">0</span>
		
										<i class="fab fa-facebook-f text-blue-700"></i>
										<span class="pl-2 pr-4 text-gray-400">0</span>
									
										<i class="fab fa-line text-green-500"></i>
										<span class="pl-2 pr-4 text-gray-400">0</span>
									</div>							
								</div>
							</div>
						</div>
						<div class=" flex flex-col w-full">
							<div class="card card-side bg-white shadow-xl w-full">
								<figure class="w-full lg:w-5/12 imgCard img-hover-zoom--brightness">
									<img src="{sel3}" alt="1"  class="h-full"/>
								</figure>
								<div class="card-body w-full lg:w-7/12">
									<div class="text-sm font-medium text-gray-500">
										ข่าววันที่ : 20  ธันวาคม 2566  
									</div>
									<div class="card-title font-medium">
										ประกาศรับสมัครคัดเลือกบุคลากรกทม. !!
									</div>
									<div class="mt-4 text-sm row-auto no-wrap">
										<i class="fab fa-twitter text-blue-500"></i>
										<span class="pl-2 pr-4 text-gray-400">0</span>
		
										<i class="fab fa-facebook-f text-blue-700"></i>
										<span class="pl-2 pr-4 text-gray-400">0</span>
									
										<i class="fab fa-line text-green-500"></i>
										<span class="pl-2 pr-4 text-gray-400">0</span>
									</div>						
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>

		<!-- ประกาศเกี่ยวกับการสอบแข่งขัน -->
    	<div class="container mx-auto mt-4">
			<div class="flex flex-wrap px-6">
				<div
					class="w-full pt-24 mb-10 flex flex-wrap justify-between">
					<h6 class="text-2xl font-semibold ">
						ประกาศเกี่ยวกับ<span class="text-red-400">การสอบแข่งขัน</span>
					</h6>
					<a
						href="/"
						target="_blank"
						class="font-semibold text-gray-500 hover:text-gray-400 ease-linear transition-all duration-150"
					>
						ประกาศทั้งหมด
						<i class="fa fa-angle-double-right ml-1 leading-relaxed"></i>
					</a>
				</div>
				
				<div
					class="w-full lg:w-6/12 cardxl"
				>
					<div class="card  bg-white shadow-xl w-full ">
						<figure style="height: 250px;" class="img-hover-zoom--brightness">
							<img src="{com1}" alt="1" />
						</figure>
						<div class="card-body">
							<div class="text-sm font-medium text-gray-500">
								ข่าววันที่ : 24  มี.ค. 2566
								<div class="badge badge-secondary text-white ml-4">NEW</div>
							</div>
							<div class="card-title font-medium">
								ประกาศรายชื่อผู้ผ่านภาค ข. และมีสิทธิสอบภาค ค. ในการคัดเลือกคนพิการ ครั้งที่ 1/2565
							</div>
							<div class="mt-4 text-sm row-auto no-wrap">
								<i class="fab fa-twitter text-blue-500"></i>
								<span class="pl-2 pr-4 text-gray-400">0</span>

								<i class="fab fa-facebook-f text-blue-700"></i>
								<span class="pl-2 pr-4 text-gray-400">0</span>
							
								<i class="fab fa-line text-green-500"></i>
								<span class="pl-2 pr-4 text-gray-400">0</span>
							</div>						
						</div>
					</div>
				</div>
				<div class="w-full lg:w-6/12">
					<div class="flex flex-wrap space-y-8">
						<div class="flex flex-col w-full">
							<div class="card card-side bg-white shadow-xl w-full">
								<figure class="w-full lg:w-5/12 imgCard img-hover-zoom--brightness">
									<img src="{com2}" alt="1" class="h-full" />
								</figure>
								<div class="card-body w-full lg:w-7/12">
									<h2 class="text-sm font-medium text-gray-500">
										ข่าววันที่ : 13  มี.ค. 2566
									</h2>
									<div class="card-title font-medium">
										ใครลืมส่งเอกสาร !! สำหรับการคัดเลือกคนพิการฯ ครั้งที่ 1/2565 ส่งเอกสารเพิ่มได้
									</div>
									<div class="mt-4 text-sm row-auto no-wrap">
										<i class="fab fa-twitter text-blue-500"></i>
										<span class="pl-2 pr-4 text-gray-400">0</span>
		
										<i class="fab fa-facebook-f text-blue-700"></i>
										<span class="pl-2 pr-4 text-gray-400">0</span>
									
										<i class="fab fa-line text-green-500"></i>
										<span class="pl-2 pr-4 text-gray-400">0</span>
									</div>							
								</div>
							</div>
						</div>
						<div class=" flex flex-col w-full">
							<div class="card card-side bg-white shadow-xl w-full">
								<figure class="w-full lg:w-5/12 imgCard img-hover-zoom--brightness">
									<img src="{com3}" alt="1"  class="h-full"/>
								</figure>
								<div class="card-body w-full lg:w-7/12">
									<div class="text-sm font-medium text-gray-500">
										ข่าววันที่ : 9  มี.ค. 2566
									</div>
									<div class="card-title font-medium">
										แผนที่การเดินทางมาสนามสอบคนพิการฯ ครั้งที่ 1/2565
									</div>
									<div class="mt-4 text-sm row-auto no-wrap">
										<i class="fab fa-twitter text-blue-500"></i>
										<span class="pl-2 pr-4 text-gray-400">0</span>
		
										<i class="fab fa-facebook-f text-blue-700"></i>
										<span class="pl-2 pr-4 text-gray-400">0</span>
									
										<i class="fab fa-line text-green-500"></i>
										<span class="pl-2 pr-4 text-gray-400">0</span>
									</div>						
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
</section>
<!-- <h1 class="p-5 text-center text-orange-800">กองสรรหาบุคคล</h1>

<div class="w-full flex flex-col space-y-4 md:flex-row md:space-x-4 md:space-y-0" >
	<div class="md:w-2/5 lg:w-2/5 px-3">
		<FullCalendar bind:this={calendarRef} {options} />
	</div>
	<di class="md:w-3/5 lg:w-3/5 px-3">
		{@html detail}
	</di>
</div>
<div class="p-5">
	<h2 class="text-2xl">ประกาศเกี่ยวกับการคัดเลือก</h2>
	<table class="table table-compact w-full">
		<thead>
			<tr>
				<th>วันที่</th>
				<th>การสอบ</th>
				<th>หน่วยงาน</th>
			</tr>
		</thead>
		<tbody>
			{#each qualify_exams as exam}
				<tr>
					<th><a href={'/qualify_exams/' + exam.id}>{exam.date}</a></th>
					<td>{exam.detail}</td>
					<td>{exam.institute}</td>
				</tr>{/each}
		</tbody>
	</table>
</div>
<div class="p-5">
	<h2 class="text-2xl">ประกาศเกี่ยวกับการสอบแข่งขัน</h2>
	<table class="table table-compact w-full">
		<thead>
			<tr>
				<th>วันที่</th>
				<th>การสอบ</th>
			</tr>
		</thead>
		<tbody>
			{#each competitive_exams as exam}
				<tr>
					<th><a href={'/competitive_exams/' + exam.id}>{exam.date}</a></th>
					<td>{exam.detail}</td>
				</tr>{/each}
		</tbody>
	</table>
</div>

้
<div class="px-5">
	<h2>Full Size Calendar</h2>
	<FullCalendar bind:this={calendarRef} {options} />
</div> -->

<style>
@media only screen and (max-width: 1024px) {
	.card-side{
		flex-direction: column !important;
	}
	.cardxl{
		padding-right: 0rem !important;
		padding-bottom: 2rem;
	}
	.imgCard{
		height: 250px;
	}
}
.card-side{
	flex-direction: row;
}
.cardxl{
	padding-right: 2rem;
}
.card-title{
	height: 80px;
	align-items: start;
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
	text-overflow: ellipsis;

}
.imgCard{
	max-height: 220px;
}
.img-hover-zoom--brightness img {
  transition: transform 2s, filter 1.5s ease-in-out;
  transform-origin: center center;
  filter: brightness(97%);
}

/* The Transformation */
.img-hover-zoom--brightness:hover img {
  filter: brightness(100%);
  transform: scale(1.3);
}
</style>