@extends('layouts.master')
    
@section('title', 'Calendar')
    
@section('style')
	<link href="https://cdn.jsdelivr.net/npm/fullcalendar@6.1.10/index.global.min.css" rel="stylesheet">
	<style>
		
	</style>
@endsection
    
@section('script')
	<script src="https://cdn.jsdelivr.net/npm/fullcalendar@6.1.10/index.global.min.js"></script>
	<script>
		document.addEventListener('DOMContentLoaded', function () {
			const calendarEl = document.getElementById('calendar');
			
			const eventColors = {
				0: '#e74c3c', // holiday = แดง
				1: '#8e44ad', // Sick Leave = ม่วง
				2: '#f39c12', // Business Leave = ส้ม
				3: '#27ae60', // Annual Leave = เขียว
				4: '#2980b9', // Others = น้ำเงิน
			};
			
			const calendar = new FullCalendar.Calendar(calendarEl, {
				initialView: 'dayGridMonth',
				firstDay: 0, // เริ่มที่วันอาทิตย์ (0 = Sunday)
				locale: 'en', // ภาษาไทย
				timeZone: 'local',
				headerToolbar: {
					left: 'prev,next today',
					center: 'title',
					right: ''
				},
				height: 'auto',
				//events: '/api/holidays', // ดึงข้อมูลวันหยุดจาก backend
				events: 'http://143.198.213.150/onlineleavenew/public/api/holidays',
				eventDisplay: 'block',
				eventColor: '#999', // default color
				eventDidMount: function(info) {
					if (info.event.extendedProps.request_type) {
						const color = eventColors[info.event.extendedProps.request_type] || '#999';
						info.el.style.backgroundColor = color;
						info.el.style.borderColor = color;
						info.el.style.color = '#fff'; // ตัวหนังสือสีขาว ถ้าพื้นเข้ม
					}
				}
			});

			calendar.render();
		});
	</script>
@endsection
    
@section('content')
    
	@include('layouts.header')
	@include('layouts.header-sub')

	<section class="wrapper bg-light">
		<div class="container-fluid py-14 py-md-16">
			<div class="row gx-lg-8 gx-xl-12">

				<div class="col-md-12">
					<h5 class="display-1 mb-3" style="font-size: 30px">@yield('title')</h5>
					<p class="lead fs-lg pe-lg-15 pe-xxl-12"></p>
				</div>

				<div class="col-lg-12">
					<div class="blog single">
						<div class="card">
							<div class="card-body">

								<div id="calendar"></div>
								
								<div style="display: flex; gap: 20px; margin-top: 15px; font-family: sans-serif; font-size: 14px; color: #333;">
									<div style="display: flex; align-items: center; gap: 6px;">
										<span style="width: 14px; height: 14px; background: #e74c3c; border-radius: 3px; display: inline-block;"></span>
										Official Holiday
								  	</div>
								</div>

							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
	</section>


	@include('layouts.footer')
    
@endsection