<div class="container-fluid" style="padding-bottom: 2rem;">
	<div class="row">
		<div class="col-md-8">
			<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">
						<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-4">
			<div class="card bg-light-transparent" style="margin-bottom: 2rem;">
				<div class="card-header bg-white">
					<h5 class="card-title">Training Request Summary</h5>
				</div>
				<div class="card-body">
					<div class="row">
						<div class="col-12">
							<a class="btn btn-block btn-dark add-shadow" href="<?php echo base_url('hr/serviceform/request_form'); ?>" style="padding-top: 1rem; padding-bottom: 1rem;">New Request</a>
						</div>
					</div>
					<br>
					<div class="card bg-white no-shadow">
						<div class="card-body">
							<h6>Total Training Request (<?php echo date('Y') ?>)</h6>
							<br>
							<div class="row">
								<table id="table_training_request" class="table table-bordered table-striped table-hover mx-1">
									<thead>
										<th class="text-center" width="35%">Business Entity</th>
										<th class="text-center" width="45%">Total Request</th>
									</thead>
									<tbody>
										<?php if(!empty($total_request)) foreach($total_request as $key => $count){ ?>
											<tr>
												<td><?php echo $count['business_entity']; ?></td>
												<td class="text-center"><?php echo $count['total_request']; ?></td>
											</tr>
										<?php } ?>
									</tbody>
								</table>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
</div>

<div class="container-fluid" style="padding-bottom: 2rem;">
	<div class="card bg-light-transparent">  
		<div class="card-header bg-white">
			<div class="float-left">
				<h4>Training Request Details List</h4>

				<a href="<?php echo base_url('hr/serviceform/request_form'); ?>" class="btn btn-outline-dark btn-sm" title="Add New Request"><i class="fa fa-plus"></i> Add New Request</a>

				<a href="<?php echo base_url('hr/Serviceform_report/request_print')?>" target="_blank" class="btn btn-outline-dark btn-sm" title="Print"><i class="fa fa-print"></i>Print</a>

				<a id="btnShowFilters" type="button" class="btn btn-outline-dark btn-sm collapsed" data-trigger="hover" title="Show Filters Box" data-toggle="collapse" data-target="#collapseFilter" aria-expanded="false"><i class="fas fa-filter"></i>Show Filters</a> 
			</div>
		</div>

		<div class="collapse" id="collapseFilter">
			<div class="card-header">
				<div class="row">
					<div class="col">
						<div class="card no-shadow">
							<div class="card-body">
								<input type="hidden" name="user_id" id="user_id" value="<?php echo $_SESSION['user']['id']; ?>">

								<div class="form-group row">
									<label for="sv_request_dept" class="col-lg-3">
										Department
									</label>                           
									<div class="col-lg-4" >
										<select class="custom-select" name="sv_request_dept" id="sv_request_dept">
											<option value="-1">[All]</option>
											<?php if($department) foreach($department as $row){ ?>
												<option value="<?php echo $row['id']; ?>"><?php echo $row['name'].' ['.$row['branch_name'].']'; ?></option> 
											<?php } ?>
										</select>
									</div>
								</div>

								<div class="form-group row">
									<label for="filterEntity" class="col-lg-3">
										Business Entity
									</label>
									<div class="col-lg-4">    
										<select class='custom-select' id="sv_request_business" name="sv_request_business">
											<option value="-1">[All]</option>
											<?php if($business_entity) foreach($business_entity as $type){ ?>
												<option value="<?php echo $type['business_entity_id'];?>"><?php echo $type['business_entity'];?></option>
											<?php } ?>
										</select>
									</div>                                         
								</div>

								<div class="form-group row">
									<label for="sv_request_year" class="col-lg-3">
										Year
									</label>                           
									<div class="col-lg-4" >
										<input type="text" name="sv_request_year" id="sv_request_year" class="form-control datepicker-yyyy">
									</div>
								</div>
								<div class="form-group row">
									<label for="sv_request_month" class="col-lg-3">
										Requested Month
									</label>                           
									<div class="col-lg-4" >
										<input type="text" name="sv_request_month" id="sv_request_month" class="form-control datepicker-mm">
									</div>
								</div>
								<div class="row">
									<div class="col d-print-none">
										<button class="btn btn-info" id="searchBtn">Search</button>
									</div>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>

		<div class="tab-content">
			<div class="tab-pane fade active show" id="tableView" role="tabpanel" aria-labelledby="nav-table-tab">
				<div class="card-body">
					<div class="card no-shadow">
						<div class="card-body ">
							<div class="table-responsive">
								<table id="filter_table_request" class="table table-bordered p-0 m-0" width="100%">
									<thead>
										<tr>
											<th class="text-center" width="5%">
												#
											</th>
											<th class="text-center" width="20%">
												Business entity
											</th>
											<th class="text-center" width="30%">
												Proposed sharing session
											</th>
											<th class="text-center" width="30%">
												Event
											</th>
											<th class="text-center" width="5%">
												Attachment
											</th>
											<th class="text-center" width= "5%">
												Status
											</th>
											<th class="text-center" width="5%">
												Action
											</th>
										</tr>
									</thead>
									<tbody>
										<?php if(!empty($listTrainingRequest)) { foreach ($listTrainingRequest as $key => $row) {  ?>
											<tr>
												<td class="text-center"><?php echo $key+1 ?></td>
												<td><?php echo $row['business_entity'] ?></td>
												<td>
													<b>Date</b> : <?php echo date ('d-m-Y', strtotime($row['proposed_date'])); ?><br>
													<b>Time</b> : <?php echo $row['time']; ?><br>
													<b>Venue</b> : <?php echo $row['venue']; ?><br>
													<b>Cost</b> : <?php echo 'RM'.$row['cost']; ?>
												</td>
												<td> 
													<b>Topic</b> : <?php echo $row['topic']; ?><br>
													<b>Organizer</b> : <?php echo $row['organizer']; ?><br>
													<b>Participant</b> : <?php echo $row['participant']; ?>
												</td>
												<td>
													<a download href="<?php echo base_url($row['file_location'].$row['photo_title']); ?>" ><?php echo $row['photo_title']; ?></a>
												</td>
												<td><?php echo ($row['status']==null || $row['status']=='Pending' )?'Pending <i class="fa fa-exclamation-circle" style="color: #FFC107;"></i>':$row['status']; ?>
												</td>
												<td class="text-center"> 
													<div class="btn-group btn-group-sm" role="group">
														<button type="button" class="btn btn-outline-dark" data-toggle="modal" data-target="#viewDetails" data-trigger="hover" data-tooltip="tooltip" 
														title="View Detail" 
														data-name="<?php echo $row['requestor']; ?>" 
														data-dept="<?php echo $row['dept_name'].'/'.$row['branchName']; ?>" 
														data-datereq="<?php echo date('d-m-Y',strtotime($row['createdTS'])); ?>" 
														data-business="<?php echo $row['business_entity']; ?>" 
														data-title="<?php echo $row['topic']; ?>" 
														data-venue="<?php echo $row['venue']; ?>" 
														data-organizer="<?php echo $row['organizer']; ?>"  
														data-time="<?php echo $row['time']; ?>" 
														data-cost="<?php echo $row['cost']; ?>" 
														data-participant="<?php echo $row['participant']; ?>"  
														data-proposed="<?php echo date('d-m-Y',strtotime($row['proposed_date'])); ?>" 
														data-file="<?php echo $row['photo_title']; ?>" 
														onclick="open_view_modal(this)"><i class="far fa-eye"></i></button>

															<a href="<?php echo base_url('hr/serviceform/request_form/'.$row['ID']); ?>" class="btn btn-outline-dark btn-sm" data-tooltip="tooltip" data-trigger="hover" title="Edit Training Request"  data-original-title="Go To My Department's Applications" target="_blank">
																<i class="far fa-edit"></i>
															</a>

															<a type="button" class="btn btn-outline-dark" href="<?php echo base_url('hr/serviceform_report/request_print/').$row['ID']; ?>" target="_blank" data-trigger="hover" data-tooltip="tooltip" title="Print Detail"><i class="fa fa-print"></i></a>

														<button id="deleteButton" type="button" class="btn btn-outline-dark" onclick="deleteData(<?php echo $row['ID']; ?>);" data-trigger="hover" data-tooltip="tooltip" title="Delete"><i class="far fa-trash-alt"></i></button>
													</div>
												</td>
											</tr>  
										<?php } } ?> 
									</tbody>
								</table>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>      
	</div>
</div>

<!-- modal view detail -->

<div class="modal fade d-print-none" id="viewDetails" role="dialog" aria-hidden="true">
	<div class="modal-dialog modal-lg">
		<div class="modal-content">
			<div class="modal-header">
				<h5 class="modal-title" id="exampleModalLongTitle">Training Request Detail</h5>&emsp;
				<!-- <a href="javascript:window.print()" class="btn btn-outline-dark btn-sm" title="Print"><i class="fa fa-print"></i>Print</a> -->
				<button type="button" class="close" data-dismiss="modal" aria-label="Close">
					<span aria-hidden="true">&times;</span>
				</button>
			</div>

			<div class="modal-body">
				<div class="row">
					<div class="col-4">
						<label>Name</label>
						<input type="text" class="form-control" name="modal_view_name" id="modal_view_name" disabled>
					</div>
					<div class="col-4">
						<label>Department</label>
						<input type="text" class="form-control" name="modal_view_dept" id="modal_view_dept" disabled>
					</div>
					<div class="col-4">
						<label>Date Request</label>
						<input type="text" class="form-control" name="modal_view_date_req" id="modal_view_date_req" disabled>
					</div>
				</div>
				<div class="row">
					<div class="col-6">
						<label>Business Entity</label>
						<input type="text" class="form-control" name="modal_view_business" id="modal_view_business" disabled>
					</div>
					<div class="col-6">
						<label>Training Title/Topic</label>
						<input type="text" class="form-control" name="modal_view_title" id="modal_view_title" disabled>
					</div>
				</div>

				<div class="row">
					<div class="col-6">
						<label>Venue</label>
						<input type="text" class="form-control" name="modal_view_venue" id="modal_view_venue" disabled>
					</div>
					<div class="col-6">
						<label>Organizer</label>
						<input type="text" class="form-control" name="modal_view_organizer" id="modal_view_organizer" disabled>
					</div>
				</div>

				<div class="row">
					<div class="col-4">
						<label>Time</label>
						<input type="text" class="form-control" name="modal_view_time" id="modal_view_time" disabled>
					</div>
					<div class="col-4">
						<label>Cost</label>
						<input type="text" class="form-control" name="modal_view_cost" id="modal_view_cost" disabled>
					</div>
					<div class="col-4">
						<label>Participant</label>
						<input type="text" class="form-control" name="modal_view_participant" id="modal_view_participant" disabled>
					</div>
				</div>

				<div class="row">
					<div class="col-6">
						<label>Proposed Sharing Session</label>
						<input type="text" class="form-control" name="modal_view_proposed" id="modal_view_proposed" disabled>
					</div>
					<div class="col-6">
						<label>File</label>
						<input type="text" class="form-control" name="modal_view_file" id="modal_view_file" disabled>
					</div>
				</div>
				<br>
				<div class="float-right">
				</div>
			</div>
		</div>
	</div>
</div>

<!-- modal view detail -->

<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>

<script>
	function open_view_modal(elem) 
	{
		let name        = $(elem).data('name');
		let dept        = $(elem).data('dept');
		let datereq     = $(elem).data('datereq');
		// console.log(dept);
		let business    = $(elem).data('business');
		let title    	= $(elem).data('title');
		let venue       = $(elem).data('venue');
		let organizer   = $(elem).data('organizer');
		let time     	= $(elem).data('time');
		let cost    	= $(elem).data('cost');
		let participant = $(elem).data('participant');
		let proposed    = $(elem).data('proposed');
		let file    	= $(elem).data('file');

		/* view modal */
		$('#modal_view_name').val(name);
		$('#modal_view_dept').val(dept);
		$('#modal_view_date_req').val(datereq);
		$('#modal_view_business').val(business);
		$('#modal_view_title').val(title);
		$('#modal_view_venue').val(venue);
		$('#modal_view_organizer').val(organizer);
		$('#modal_view_time').val(time);
		$('#modal_view_cost').val(cost);
		$('#modal_view_participant').val(participant);
		$('#modal_view_proposed').val(proposed);
		$('#modal_view_file').val(file);
	}

	function deleteData(ID) {
		validateForm("#deleteButton", "Delete this training request list?", function() {
			$.ajax({
				url:'<?php echo base_url('hr/serviceform/deleteTrainingRequestList') ?>',
				data: {
					trainingRequestID : ID,
				},
				type: 'post',
				dataType: 'json',
				success: (data) => {
					if(data.status == "Success") {

						localStorage.setItem("status", data.status);
						localStorage.setItem("msg", data.msg);

						location.reload();
					// redirect(base_url('hr/serviceform/hotel_list'));
					}
				}
			});
		});
	}

	$(document).ready(function(){

        //getData();

        $('#searchBtn').click(function(){
        	getData();
        });

    });

	function getData() {
		var table = $('#filter_table_request').DataTable();
		table.clear().draw();
		var frmData = new FormData();

		frmData.append('sv_request_dept',$('#sv_request_dept').val());
		frmData.append('sv_request_business',$('#sv_request_business').val());
		frmData.append('sv_request_year',$('#sv_request_year').val());
		frmData.append('sv_request_month',$('#sv_request_month').val());
		frmData.append('user_id',$('#user_id').val());

		$.ajax({
			url:"<?php echo base_url('/hr/api/serviceform/get_training_request_filter'); ?>",
			type:'post',
			dataType:'json',
			data:frmData,
			processData: false,
			contentType: false,
			success:function(data){

				iziToast.success({
					position: 'bottomRight',
					message: 'filtering data',
				});

				let request = data.table;

				if(request != null){
					$.each(request,function(key,content)
					{
						console.log(content);

						if(content.proposed_date != '0000-00-00' && content.proposed_date != undefined){
							var proposed_date = moment(content.proposed_date).format('DD-MM-YYYY');;
						}
                        // if(content.end_date != '0000-00-00' && content.end_date != undefined){
                        //     var end_date = moment(content.end_date).format('DD-MM-YYYY');;
                        // }																

                        var btn_view = '<button type="button" class="btn btn-outline-dark" data-toggle="modal" data-target="#viewDetails" data-trigger="hover" data-tooltip="tooltip" title="View Detail" data-name="'+content.requestor+'" data-dept="'+content.dept_name+'/'+content.branchName+'" data-datereq="'+moment(content.createdTS).format('DD-MM-YYYY')+'" data-business="'+content.business_entity+'" data-title="'+content.topic+'" data-venue="'+content.venue+'" data-organizer="'+content.organizer+'" data-time="'+content.time+'" data-cost="'+content.cost+'" data-participant="'+content.participant+'" data-proposed="'+proposed_date+'" data-file="'+content.photo_title+'" onclick="open_view_meeting_modal(this)"> <i class="far fa-eye"></i> </button>';

                        var btn_print = '<a type="button" class="btn btn-outline-dark" href="<?php echo base_url();?>hr/serviceform_report/request_print/'+content.ID+'" target="_blank" data-trigger="hover" data-tooltip="tooltip" title="Print Detail"><i class="fa fa-print"></i></a>';

                        var btn_edit = '<a type="button" class="btn btn-outline-dark" href="<?php echo base_url();?>hr/serviceform/request_form/'+content.ID+'" data-trigger="hover" data-tooltip="tooltip" title="Edit"><i class="far fa-edit"></i></a>';

                        var btn_delete = '<button type="button" class="btn btn-outline-dark" onclick="deleteButton('+content.ID+')" data-trigger="hover" data-tooltip="tooltip" title="Delete"><i class="far fa-trash-alt"></i></button>';

                        var download = '<a download href="<?php echo base_url(); ?>'+content.file_location+content.photo_title+'">'+content.photo_title+'</a>';

                        if(content.status == null || content.status == 'Pending')
                        {
                        	var status = 'Pending <i class="fa fa-exclamation-circle" style="color: #FFC107;"></i>';
                        }else{
                        	var status = content.status;
                        }

                        table.row.add({
                        	0   : key+1,
                        	1   : content.business_entity,
                        	2   : "<b>Date</b> : "+proposed_date+"<br><b>Time</b> : "+content.time+"<br><b>Venue</b> : "+content.venue+"<br><b>Cost</b> : "+content.cost,
                        	3   : "<b>Topic</b> : "+content.topic+"<br><b>Organizer</b> : "+content.organizer+"<br><b>Participant</b> : "+content.participant,
                        	4   : download,
                        	5   : status,
                        	6  	: '<div class="btn-group btn-group-sm" role="group">'+btn_view+btn_edit+btn_print+btn_delete+'</div>',
                        }).draw();
                        console.log(data);
                    });                        
				}

			},
			error:function(){
				iziToast.warning({
					position: 'bottomRight',
					message: '500 Internal Server Error.'
				});
			}
		});
	}

	$(document).ready(function(){
		$('#table_training_request').DataTable().destroy();
		var fc_event= '';
		var resource = <?php echo $resource;?>;

		var fullcalendar = $('#calendar').fullCalendar({ 
			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));
                // console.log(js_res);
                var hover_item = js_res[data.id];
                var title = JSON.stringify(data.title);
                var start = moment(hover_item.proposed_date).format('DD-MM-YYYY');

                console.log(hover_item);

                tooltip = '<div class="tooltipevent"> Requester : '+hover_item.requestor+'['+hover_item.staff_id+']'+'<br/> Email : '+hover_item.email+'<br/> Department : '+hover_item.dept_name+'/'+hover_item.branchName+'<br/> Date : '+start+'<br/> Time : '+hover_item.time+'<br/> Business Entity : '+hover_item.business_entity+'</div>';

                // console.log(tooltip);
                $("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();
	});
</script>