<?php 
require('includes/header.php');  
?>	

<!--begin::Content-->
<div class="content d-flex flex-column flex-column-fluid" id="kt_content">
	<!--begin::Subheader-->
	<div class="subheader py-2 py-lg-4 subheader-solid" id="kt_subheader">
		<div class="container-fluid d-flex align-items-center justify-content-between flex-wrap flex-sm-nowrap">
			<!--begin::Info-->
			<div class="d-flex align-items-center flex-wrap mr-2">
				<!--begin::Page Title-->
				<h5 class="text-dark font-weight-bold mt-2 mb-2 mr-5">Senarai Temu Janji Klinik</h5>
				<!--end::Page Title-->
				<!--begin::Actions-->
				<div class="subheader-separator subheader-separator-ver mt-2 mb-2 mr-4 bg-gray-200"></div>
			</div>
			<!--end::Info-->
		</div>
	</div>
	<!--end::Subheader-->
	<!--begin::Entry-->
	<div class="d-flex flex-column-fluid">
		<!--begin::Container-->
		<div class="container">
			<div class="accordion accordion-solid accordion-panel accordion-svg-toggle" id="accordionExample8">
				<div class="card">
					<div class="card-header" id="headingThree8">
						<div class="card-title collapsed" data-toggle="collapse" data-target="#collapseThree8">
							<div class="card-label">													
								<span class="svg-icon svg-icon-primary menu-icon">
									<?=$Tapisanhome_svg?>
								</span>Tapisan Klinik</div>
							<span class="svg-icon">
								<?=$Tapisan_svg?>
							</span>
						</div>
					</div>
					<div id="collapseThree8" class="collapse" data-parent="#accordionExample8">
						<div class="card-body" style="padding-top:20px">
							<?php
							$klinik = 1;
								createDropDown($PDO, 'Klinik Vaterinar', 'i_vatklinik', 'klinik_vat', $klinik, 'Pilih Klinik Vaterinar', 7, 3, 12, $readonly, 'nama_');
							?>
						</div>
					</div>
				</div>
			</div>
			<!--begin::Row-->
					<div class="card card-custom">
						<div class="card-header">
							<div class="card-title">
								<h3 class="card-label" id="title_calender">Calendar Temu Janji Klinik</h3>
							</div>
							<div class="card-toolbar">
								<!-- <a href="#" class="btn btn-light-primary font-weight-bold">
								<i class="ki ki-plus icon-md mr-2"></i>Add Event</a> -->
							</div>
						</div>
						<div class="card-body">
							<div id="temujanji_calendar"></div>
						</div>
					</div>
			<!--end::Row-->
		</div>
		<!--end::Container-->
	</div>
	<!--end::Entry-->
</div>
<!--end::Content-->
					
<?php 
require('includes/footer.php');
?>


<script>

var ajaxUrl = $('#script_base_name').val() + "-ajax.php";

var todayDate = moment().startOf('day');
var YM = todayDate.format('YYYY-MM');
var TODAY = todayDate.format('YYYY-MM-DD');
var MINDATE = todayDate.clone().subtract(60, 'day').format('YYYY-MM-DD');
var MAXDATE = todayDate.clone().add(60, 'day').format('YYYY-MM-DD');

var calendarEl = document.getElementById('temujanji_calendar');
var calendar = new FullCalendar.Calendar(calendarEl, {
	plugins: [ 'bootstrap', 'interaction', 'dayGrid', 'timeGrid', 'list' ],
	themeSystem: 'bootstrap',

	isRTL: KTUtil.isRTL(),
	
	header: {
		left: 'prev,next today',
		center: 'title',
		right: 'dayGridMonth,timeGridWeek,timeGridDay'
	},

	height: 800,
	contentHeight: 780,
	aspectRatio: 3,  // see: https://fullcalendar.io/docs/aspectRatio

	nowIndicator: true,
	now: TODAY + 'T09:25:00', // just for demo

	views: {
		dayGridMonth: { buttonText: 'month' },
		timeGridWeek: { buttonText: 'week' },
		timeGridDay: { buttonText: 'day' }
	},
	
	validRange: {
		start: MINDATE,
		end: MAXDATE
	},

	defaultView: 'dayGridMonth',
	defaultDate: TODAY,
	events: {
		//Get events based on criteria with wildcards
		method: "POST",
		url: 'pht_temujanji-gettimeslot.php',
		extraParams: function() { // a function that returns an object
		  return {
			min: MINDATE,
		    max: MAXDATE,
		    klinik: $('#klinik_vat').val()
		  };
		}
	},
	
	eventRender: function(info) {
		var element = $(info.el);

		if (info.event.extendedProps && info.event.extendedProps.description) {
			if (element.hasClass('fc-day-grid-event')) {
				element.data('content', info.event.extendedProps.description);
				element.data('placement', 'top');
				KTApp.initPopover(element);
			} else if (element.hasClass('fc-time-grid-event')) {
				element.find('.fc-title').append('<div class="fc-description">' + info.event.extendedProps.description + '</div>');
			} else if (element.find('.fc-list-item-title').lenght !== 0) {
				element.find('.fc-list-item-title').append('<div class="fc-description">' + info.event.extendedProps.description + '</div>');
			}
		}
	}
});

function reloadCalender()
{
	reinitTable($('#table_name').val(), this.ajaxUrl, this.getData(), 1, 0);
}

$(document).ready(function(){  

	
	/*
	var calendar = new FullCalendar.Calendar(calendarEl, {
	  initialView: 'dayGridMonth'
	});
	*/
	$('#title_calender').html('Calendar Temu Janji ' + $( "#klinik_vat option:selected" ).text());
	calendar.render();

	$('#ajax-modal').on('shown.bs.modal', function () {  // this is to clear modal cache each time modal load
	 $(this).removeData('bs.modal');
	}); 
	
	//print function
	$('#printPdf').click(function() {
		printFunc($('#table_name').val(), $(this).attr("value"), "normalPrint-landscape.php", $('#script_base_name').val(), $('#table_title').val(), $('#table_header').val());
	});
	
	$('#printExcel').click(function() {
		printFunc($('#table_name').val(), $(this).attr("value"), "sen_penternak-excel.php", $('#script_base_name').val(), $('#table_title').val(), $('#table_header').val());
	});
	
	$('#klinik_vat').change(function(){
		$('#title_calender').html('Calendar Temu Janji ' + $( "#klinik_vat option:selected" ).text());
		calendar.refetchEvents();
	});
});
</script>