<section class="container-fluid" style="padding-bottom: 2rem;">
	<div class="row">
        <div class="col-md-6">
            <div class="card bg-light-transparent" style="margin-bottom: 2rem;">
                <div class="card-header bg-white">
                    <div class="float-left">
                        <h5 class="card-title">Calendar</h5>
                    </div>
                </div>
                <div class="card-body">
                    <div class="card bg-white no-shadow" style="height: 58rem;">
                        <div class="card-body">
                            <div class="row">
                                <div class="col-12">
                                    <div id="calendar"></div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-md-6">
			<div class="card bg-light-transparent" style="margin-bottom: 2rem;">
				<div class="card-header bg-white">
					<h5 class="card-title">Upcoming QR Code CPD</h5>
				</div>
				<div class="card-body">
					<div class="card bg-white no-shadow">
						<div class="card-body">
							<?php if(!empty($upcoming_request)): foreach($upcoming_request as $upcoming): ?>
								<div class="row">
									<div class="col-auto">
										<p class="text-uppercase" data-trigger="hover" data-tooltip="tooltip" title="<?php echo $upcoming['dept_name'].'/'.$upcoming['branchName']; ?>"><?php echo $upcoming['shortName']; ?></p>
									</div>
									<div class="col text-right">
										<p><?php echo date('d-m-Y',strtotime($upcoming['date'])).' ['.date('h:ia',strtotime($upcoming['start_time'])).']'; ?></p>
									</div>
								</div>
							<?php endforeach;endif; ?>
						</div>
					</div>
				</div>
			</div>
	    </div>
	</div>
</section>
<section class="container" style="padding-bottom: 2rem;">
	<div class="row">
		<div class="col-md-12">
			<div class="tab-content" id="tabContent">
				<div class="tab-pane fade show active" id="profile" role="tabpanel" aria-labelledby="profile-tab">
					<div class="card bg-light-transparent">
						<div class="card-header bg-light">
							<h4 class="card-title float-left"><?php echo (empty($ID))?'New ':'Edit '; ?>QR Code CPD Request Form</h4>
						</div>
						<form action="<?php echo (!empty($ID))?base_url('hr/serviceform/edit_qr_code_form'):base_url('hr/serviceform/save_qr_code_form'); ?>" id="flightForm" class="form" method="POST" onsubmit="return confirm('Confirm to <?php echo (!empty($ID))?'update':'submit'; ?> this form?')">
							<input type="text" class="form-control" name="qr_code_id" value="<?php echo ($ID)?$ID:''; ?>" hidden>
							<div class="card-body">
								<div class="card no-shadow">
									<div class="card-body">
										<form id="qr_codeForm" class="form">
											<div class="row">
												<div class="col-12 col-sm-6">
													<div class="form-group">
														<label>Name</label>
														<input type="text" class="form-control" name="reqName" id="reqName" value="<?php echo ($ID)?$qr_code_detail[0]['created_name']:$_SESSION['user']['name']; ?>" readonly>
														<input type="text" class="form-control" name="reqNameID" id="reqNameID" value="<?php echo ($ID)?$qr_code_detail[0]['created_by']:$_SESSION['user']['id']; ?>" readonly hidden>
													</div>
												</div>
												<div class="col-12 col-sm-6">
													<div class="form-group">
														<label>Email Address</label>
														<input type="text" class="form-control" name="email" id="email" value="<?php echo ($ID)?$qr_code_detail[0]['created_email']:$_SESSION['user']['email']; ?>" readonly>
													</div>
												</div>
												<div class="col-12 col-sm-6">
													<div class="form-group">
														<label for="department">Department</label>
														<input type="text" class="form-control" name="department" id="department" value="<?php echo ($ID)?$qr_code_detail[0]['created_dept_name'].' ['.$qr_code_detail[0]['created_branchName'].']':$_SESSION['user']['department_name'].' ['.$_SESSION['user']['branch_name'].']'; ?>" readonly>
														<input type="text" class="form-control" name="department_id" id="department_id" value="<?php echo ($ID)?$qr_code_detail[0]['created_department_id']:$_SESSION['user']['department_id']; ?>" readonly hidden>
													</div>
												</div>
												<div class="col-12 col-sm-6">
													<div class="form-group">
														<label for="datereq">Date Requested</label>
														<input type="text" class="form-control" name="datereq" id="datereq" value="<?php echo ($ID)?date('d-m-Y',strtotime($qr_code_detail[0]['created_ts'])):date("d-m-Y"); ?>" readonly>
													</div>
												</div>
											</div>

											<div class="form-row">
												<div class="col-12">
													<div class="form-group">
														<div class="row">
															<div class="col-12 col-md-4">
																<div class="form-group">
																	<label for="date">Date</label>
																	<input type="text" class="form-control datepicker" name="date" id="date" value="<?php echo ($ID)?date('d-m-Y',strtotime($qr_code_detail[0]['date'])):''; ?>" required onchange="calculate_request_hour()">
																</div>	
															</div>
															<div class="col-12 col-md-4">
																<div class="form-group">
																	<label for="start_time">Start Time</label>
																	<input type="text" class="form-control timepicker" name="start_time" id="start_time" value="<?php echo ($ID)?$qr_code_detail[0]['start_time']:''; ?>" onchange="calculate_cpd_hour(); calculate_request_hour()" required>
																</div>	
															</div>
															<div class="col-12 col-md-4">
																<div class="form-group">
																	<label for="end_time">End Time</label>
																	<input type="text" class="form-control timepicker" name="end_time" id="end_time" value="<?php echo ($ID)?$qr_code_detail[0]['end_time']:''; ?>" onchange="calculate_cpd_hour()" required>
																</div>	
															</div>
														</div>
													</div>
												</div>
											</div>

											<div class="form-row">
												<div class="col-12 col-md-4">
													<div class="form-group">
														<label>Internal / External</label>
														<div class="container">
				                                            <div class="row mx-3">                                            
				                                                <input type="checkbox" class="js-switch" name="internal" id="internal" value="0" <?php echo ($ID)?((substr($qr_code_detail[0]['cpd_type_id'], 0,1) == 0)?'checked':''):'checked'; ?>><span> Internal</span>     
				                                            </div>
				                                            <div class="row pt-1 mx-3">                                           
				                                                <input type="checkbox" class="js-switch" name="external" id="external" value="1" <?php echo ($ID)?((substr($qr_code_detail[0]['cpd_type_id'], 0,1) == 1)?'checked':''):''; ?>><span> External</span>                  
				                                            </div>
														</div>
													</div>
												</div>
												<div class="col-12 col-md-4">
													<div class="form-group">
														<label>Structured / Unstructured</label>
														<div class="container">
				                                            <div class="row mx-3">                                            
				                                                <input type="checkbox" class="js-switch" name="structured" id="structured" value="0" <?php echo ($ID)?((substr($qr_code_detail[0]['cpd_type_id'], 1,1) == 0)?'checked':''):'checked'; ?>><span> Structured</span>     
				                                            </div>
				                                            <div class="row pt-1 mx-3">                                           
				                                                <input type="checkbox" class="js-switch" name="unstructured" id="unstructured" value="1" <?php echo ($ID)?((substr($qr_code_detail[0]['cpd_type_id'], 1,1) == 1)?'checked':''):''; ?>><span> Unstructured</span>                  
				                                            </div>
														</div>
													</div>
												</div>
												<div class="col-12 col-md-4">
													<div class="form-group">
														<label>Technical / Non-technical</label>
														<div class="container">
				                                            <div class="row mx-3">                                            
				                                                <input type="checkbox" class="js-switch" name="technical" id="technical" value="0" <?php echo ($ID)?((substr($qr_code_detail[0]['cpd_type_id'], 2,1) == 0)?'checked':''):'checked'; ?>><span> Technical</span>     
				                                            </div>
				                                            <div class="row pt-1 mx-3">                                           
				                                                <input type="checkbox" class="js-switch" name="nontechnical" id="nontechnical" value="1" <?php echo ($ID)?((substr($qr_code_detail[0]['cpd_type_id'], 2,1) == 1)?'checked':''):''; ?>><span> Non-technical</span>                  
				                                            </div>
														</div>
													</div>
												</div>
											</div>

											<div class="form-row">
												<div class="col-12">
													<div class="form-group">
														<div class="row">
															<div class="col-12 col-md-6">
																<div class="form-group">
																	<label for="title">Event Title</label>
																	<input type="text" class="form-control" name="title" id="title" value="<?php echo ($ID)?$qr_code_detail[0]['title']:''; ?>" required>
																</div>	
															</div>
															<div class="col-12 col-md-6">
																<div class="form-group">
																	<label for="category">Category/Areas</label>
																	<select class="form-control selectric" name="category[]" id="category" multiple required>
																		<option value="-1">-- Please Select --</option>
																		<?php if($category) foreach($category as $key => $row){ ?>
																			<option value="<?php echo $row->id ?>"><?php echo $row->name; ?></option>
																		<?php } ?>
																	</select>
																</div>	
															</div>
														</div>
													</div>
												</div>
											</div>

											<div class="form-row">
												<div class="col-12">
													<div class="form-group">
														<div class="row">
															<div class="col-12 col-md-6">
																<div class="form-group">
																	<label for="topic">Event Topic</label>
																	<input type="text" class="form-control" name="topic" id="topic" value="<?php echo ($ID)?$qr_code_detail[0]['topic']:''; ?>" required>
																</div>	
															</div>

															<div class="col-12 col-md-6">
																<div class="form-group">
																	<label for="organizer">Organisers</label>
																	<select class="form-control select" name="organizer" id="organizer" required>
																		<option value="-1">-- Please Select --</option>
																		<?php if($organizer) foreach($organizer as $key => $row){ ?>
																			<option value="<?php echo $row->id; ?>" <?php echo ($ID && ($qr_code_detail[0]['organizer_id'] == $row->id))?'selected':''; ?>><?php echo $row->organizer; ?></option>
																		<?php } ?>
																	</select>
																</div>	
															</div>
														</div>
													</div>
												</div>
											</div>

											<div class="form-row">
												<div class="col-12">
													<div class="form-group">
														<div class="row">
															<div class="col-12 col-md-4">
																<div class="form-group">
																	<label for="hour">CPD Hour</label>
																	<input type="text" class="form-control" name="hour" id="hour" value="<?php echo ($ID)?$qr_code_detail[0]['cpd_hour']:''; ?>" required>
																</div>	
															</div>
															<div class="col-12 col-md-4">
																<div class="form-group">
																	<label for="pax">No. of Participant</label>
																	<input type="text" class="form-control" name="pax" id="pax" value="<?php echo ($ID)?$qr_code_detail[0]['pax']:''; ?>" required>
																</div>	
															</div>
															<div class="col-12 col-md-4">
																<div class="form-group">
																	<label for="cost">Event Cost</label>
																	<input type="text" class="form-control" name="cost" id="cost" value="<?php echo ($ID)?$qr_code_detail[0]['cost']:''; ?>">
																</div>	
															</div>
														</div>
													</div>
												</div>
											</div>

											<!-- <div class="form-row" <?php //echo (isset($mode) && ($mode == 'view'))?'style="display: none;"':''; ?>>
												<div class="col-12">
													<h5><input type="checkbox" id="booking_checker" style="height: 1rem; width: 1rem;" onclick="checkbox(this)"> Please tick if you are booking for someone else.</h5>
												</div>
											</div> -->

											<div class="form-row">
												<div class="col-12 col-sm-6 d-none" id="other_person_details_form">
													<div class="form-group">
														<label for="other_person_details">Guest Name [Department]</label>
														<select class="form-control select" name="other_person_details" id="other_person_details">
															<option value="-1" selected disabled>-- Please Select --</option>
															<?php if($listName) foreach($listName as $key => $gID){ 
																$dept_sName =  ($gID['department_name'])?' ['.$gID['department_short_name'].'] ':' [N/A]';
																?>
																<?php if(($_SESSION['user']['name']) != $gID['name']){ ?>
																	<option value="<?php echo $gID['id']; ?>" data-did="$gID['department_id']"><?php echo $gID['name'].$dept_sName; ?></option>
																<?php } ?>
															<?php } ?>
														</select>
													</div>
												</div>

												<?php if(!empty($ID) && !empty($qr_code_detail)) foreach($qr_code_detail as $row){ ?>
													<?php if($row['requester_id'] != $row['created_by']){ ?>
														<div class="col-12 col-sm-6">
															<div class="form-group">
																<label for="other_person_details_input">Guest Name [Department]</label>
																<input type="text" class="form-control" name="other_person_name_input" id="other_person_details_input" value="<?php echo $row['requestor'].' ['.$row['department_short_name'].']' ?>" readonly>
																<input type="text" class="form-control" name="other_person_details_input" id="other_person_details_input" value="<?php echo $row['requester_id']; ?>" hidden>
															</div>
														</div>
													<?php } ?>
												<?php } ?>
											</div>

											<div class=" form-row float-right" <?php echo (isset($mode) && ($mode == 'view'))?'style="display: none;"':''; ?>>
												<a class="btn btn-light" href="<?php echo base_url('hr/serviceform/qr_code_list/'); ?>">Cancel</a>
												<button type="submit" id="submitBtn" class="btn btn-primary text-right">Submit</button>
											</div>
										</form>
									</div>
								</div>
							</div>
						</form>
					</div>
				</div>
			</div>
		</div>
	</div>
</section>

<?php echo (!empty($approval))?$approval:''; ?>

<style type="text/css">
    .tooltipevent
    {
        width:auto;
        height:auto;
        background:rgba(0,0,0,0.75);
        position:absolute;
        color: #fff;
        z-index:10001;
        padding:10px 10px 10px 10px ;  
        line-height: 200%;
    }
</style>

<?php $this->load->view('Training/partials/switchery.php');?>

<script>
	$(document).ready(function(){
		var fc_event= '';
	    var resource = <?php echo $resource;?>;

	    var fullcalendar = $('#calendar').fullCalendar({ 
	        height: 860,
	        themeSystem: 'bootstrap4',
	        header: 
	        {
	            left: 'prev,next today',
	            center: 'title',
	            right: 'month,listMonth'
	        },
	        buttonText: {
	            today: 'Today',
	            month: 'Calendar',
	            listMonth: 'List'
	        },

	        navLinks: true, // can click day/week names to navigate views
	        editable: true,
	        eventLimit: true, // allow "more" link when too many events
	        events: <?php echo $fc_event; ?>,

	        eventMouseover: function (data, event, param, resource = <?php echo $resource;?>) {
	            var js_res = JSON.parse(JSON.stringify(resource));
	            var hover_item = js_res[data.id];
	            var title = JSON.stringify(data.title);
	            var date = moment(hover_item.date).format('DD-MM-YYYY');

	            if(hover_item.cpd_type_id == '000' || hover_item.cpd_type_id == '100') var cpd_type = 'Structured Technical';
	            if(hover_item.cpd_type_id == '010' || hover_item.cpd_type_id == '110') var cpd_type = 'Unstructured Technical';
	            if(hover_item.cpd_type_id == '001' || hover_item.cpd_type_id == '101') var cpd_type = 'Structured Non-Technical';
	            if(hover_item.cpd_type_id == '011' || hover_item.cpd_type_id == '111') var cpd_type = 'Unstructured Non-Technical';

	            var qr_code_detail = 'CPD Type : '+cpd_type+'<br>Title : '+hover_item.title+'<br>CPD Hour : '+hover_item.cpd_hour;

	            tooltip = '<div class="tooltipevent"> Staff name : '+hover_item.requestor+'<br> Date : '+date+'<br>'+qr_code_detail+'</div>';

	            $("body").append(tooltip);
	            $(this).mouseover(function (e) {
	                $(this).css('z-index', 10000);
	                $('.tooltipevent').fadeIn('500');
	                $('.tooltipevent').fadeTo('10', 1.9);
	            }).mousemove(function (e) {
	                $('.tooltipevent').css('top', e.pageY + 10);
	                $('.tooltipevent').css('left', e.pageX + 20);
	            });
	        },

	        eventMouseout: function(data, event) {
	            $(this).css('z-index', 8);
	            $('.tooltipevent').remove();
	        },
	    });

	    fullcalendar.fullCalendar();

	    if('<?php echo $ID; ?>' > 0) selected_category('<?php echo $qr_code_detail[0]['cpd_category_id']; ?>');
	});

	function open_next_form(elem) 
	{
		$('input:radio').not(this).prop('checked', false);
		$(elem).prop('checked',true);
	}

	function checkbox(elem)
	{
		if($('#booking_checker').is(':checked'))
		{
			$('#other_person_details_form').removeClass('d-none');
			$('#other_person_details').attr('required','required');
		}else{
			$('#other_person_details_form').addClass('d-none');
			$('#other_person_details').removeAttr('required');
			$('#other_person_details').prop('selectedIndex',0);
		}
	}

	function calculate_cpd_hour()
	{
		var start_time = moment($('#start_time').val(), 'hh:mma').format('HH:mm');
		var end_time = moment($('#end_time').val(), 'hh:mma').format('HH:mm');

		var time1 = start_time.split(':');
		var time2 = end_time.split(':');
		var hours1 = parseInt(time1[0], 10), 
		hours2 = parseInt(time2[0], 10),
		mins1 = parseInt(time1[1], 10),
		mins2 = parseInt(time2[1], 10);
		var hours = hours2 - hours1, mins = 0;
		if(hours < 0) hours = 24 + hours;
		if(mins2 >= mins1) {
			mins = mins2 - mins1;
		}
		else {
			mins = (mins2 + 60) - mins1;
			hours--;
		}
		mins = mins / 60; // take percentage in 60
        hours += mins;
        hours = hours.toFixed(1);

        if(hours != '' && hours != null && hours != 'NaN' && hours != undefined) $("#hour").val(hours);
	}

	function selected_category(category_id)
	{
		var category_id = category_id.split(',');

		$('#category').val(category_id).selectric('refresh');
	}

	function calculate_request_hour()
	{
		var date 			= $('#date').val();
		var start_time 		= $('#start_time').val();
		var server_date		= '<?php echo date("Y-m-d H:i"); ?>';

		if(date != '' && date != null)
		{
			$.ajax({
				url:'<?php echo base_url('hr/serviceform/change_date_format') ?>',
				data: {
					checkin_date : date,
					checkin_time : start_time
				},
				type: 'post',
				dataType: 'json',
				success: (data) => {
					if(data.status == "success") {

						var date_request 	= moment(data.date_time); 
						var date_server 	= moment(server_date); 
						var date_diff		= Math.floor((date_request-date_server)/36e5);

						if(date_diff < 48)
						{
							iziToast.error({
								title: 'Error',
								message: "Training date less than 48 hours. Please update to new date. Thank you.",
							});

							$('#submitBtn').attr('disabled','disabled');
							$('#submitBtn').css("cursor","not-allowed");
						}else{
							iziToast.success({
								title: 'Success',
								message: "Success",
							});

							$('#submitBtn').removeAttr('disabled');
							$('#submitBtn').css("cursor","pointer");
						}
	                }
	          	}
	       	});
		}
	}
</script>