<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 Delivery</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['name']; ?>"><?php echo $upcoming['name'].' ['.$upcoming['shortName'].'] - '.$upcoming['task']; ?></p>
									</div>
									<div class="col text-right">
										<p><?php echo date('d-m-Y',strtotime($upcoming['date'])); ?></p>
									</div>
								</div>
							<?php endforeach;endif; ?>
						</div>
					</div>
				</div>
			</div>
    </div>
</div>
<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">Daily Delivery Report Form</h4>
							<!-- <div class="float-right">
								<?php if($_SESSION['all_modules_access'][0]['access_lvl'] == 'admin' || $_SESSION['user']['division_id'] == 4){ ?>
									<button type="button" id="updateCarList" class="btn btn-sm btn-warning" onclick="open_modal()" data-trigger="hover" data-tooltip="tooltip" title="" data-original-title="Update Car"><i class="far fa-edit"></i> Update Task Fee</button>
								<?php } ?>
							</div> -->
						</div>
						<form action="<?php echo (!empty($ID))?base_url('hr/serviceform/edit_delivery_form'):base_url('hr/serviceform/save_delivery_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="delivery_id" value="<?php echo ($ID)?$ID:''; ?>" hidden>
							<div class="card-body">
								<div class="card no-shadow">
									<div class="card-body">
										<form id="deliveryForm" 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)?$delivery_detail[0]['created_name']:$_SESSION['user']['name']; ?>" readonly>
														<input type="text" class="form-control" name="reqNameID" id="reqNameID" value="<?php echo ($ID)?$delivery_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)?$delivery_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)?$delivery_detail[0]['created_dept_name'].' ['.$delivery_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)?$delivery_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($delivery_detail[0]['created_ts'])):date("d-m-Y"); ?>" readonly>
													</div>
												</div>

												<div class="col-12 col-sm-6">
													<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($delivery_detail[0]['date'])):''; ?>" required>
													</div>
												</div>
											</div>

											<div class="form-row">
												<div class="col-12">
													<div class="form-group">
														<label>Please select task: </label>								
														<div class="container">
															<div class="row">
																<div class="col-12 col-md-6">
																	<input type="radio" id="radio_1" name="payment" onclick="collapse('#collapseOne'); open_next_form(this);" <?php echo ($ID && $delivery_detail[0]['task'] == 'payment')?'checked':''; ?> <?php echo ($ID)?'':'required'; ?>> Payment 
																</div>

																<div class="col-12 col-md-6">
																	<input onclick="collapse('#collapseTwo'); open_next_form(this);" <?php echo ($ID && $delivery_detail[0]['task'] == 'banking')?'checked':''; ?> type="radio" id="radio_2" data-toggle="collapse" data-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo" name="banking" <?php echo ($ID)?'':'required'; ?>> Banking 

																	<div id="collapseTwo" class="panel-collapse collapse">
																		<div class="panel-body">
																			<p>PBB<br><input type="text" class="form-control" name="bank_pbb" id="pbb" onkeyup="disabled_input('#pbb')" value="<?php echo ($ID && $delivery_detail[0]['task'] == 'banking' && $delivery_detail[0]['detail_name'] == 'pbb')?$delivery_detail[0]['detail_remark']:''; ?>"></p>
																			<p>AmIslamic<br><input type="text" class="form-control" name="bank_amislam" id="ambank" onkeyup="disabled_input('#ambank')" value="<?php echo ($ID && $delivery_detail[0]['task'] == 'banking' && $delivery_detail[0]['detail_name'] == 'ambank')?$delivery_detail[0]['detail_remark']:''; ?>"></p>
																			<p>BMBB<br><input type="text" class="form-control" name="bank_bmbb" id="bmbb" onkeyup="disabled_input('#bmbb')" value="<?php echo ($ID && $delivery_detail[0]['task'] == 'banking' && $delivery_detail[0]['detail_name'] == 'bmbb')?$delivery_detail[0]['detail_remark']:''; ?>"></p>
																			<p>MBB<br><input type="text" class="form-control" name="bank_mbb" id="mbb" onkeyup="disabled_input('#mbb')" value="<?php echo ($ID && $delivery_detail[0]['task'] == 'banking' && $delivery_detail[0]['detail_name'] == 'mbb')?$delivery_detail[0]['detail_remark']:''; ?>"></p>
																			<p>BIMB<br><input type="text" class="form-control" name="bank_bimb" id="bimb" onkeyup="disabled_input('#bimb')" value="<?php echo ($ID && $delivery_detail[0]['task'] == 'banking' && $delivery_detail[0]['detail_name'] == 'bimb')?$delivery_detail[0]['detail_remark']:''; ?>"></p>
																		</div>
																	</div>
																</div>
															</div>
														</div>
													</div>
												</div>
											</div>

											<div class="form-row">
												<div class="col-12">
													<div class="form-group">
														<div class="container">
															<div class="row">
																<div class="col-12 col-md-6">
																	<input onclick="collapse('#collapseThree'); open_next_form(this);" <?php echo ($ID && $delivery_detail[0]['task'] == 'delivery')?'checked':''; ?> type="radio" id="radio_3" data-toggle="collapse" data-target="#collapseThree" aria-expanded="false" aria-control requireds="collapseThree" name="delivery" <?php echo ($ID)?'':'required'; ?>> Delivery
																	
																	<div id="collapseThree" class="panel-collapse collapse">
																		<div class="panel-body">
																			<p>Delivery Name<br><input type="text" class="form-control" name="delivery_name" id="delivery_name" value="<?php echo ($ID && $delivery_detail[0]['task'] == 'delivery')?$delivery_detail[0]['detail_name']:''; ?>"></p>
																			<p>Address<br><input type="text" class="form-control" name="delivery_address" id="delivery_address" value="<?php echo ($ID && $delivery_detail[0]['task'] == 'delivery')?$delivery_detail[0]['detail_address']:''; ?>"></p>
																			<p>Items<br><input type="text" class="form-control" name="delivery_item" id="delivery_item" value="<?php echo ($ID && $delivery_detail[0]['task'] == 'delivery')?$delivery_detail[0]['detail_item']:''; ?>"></p>
																			<p>Remarks<br><input type="text" class="form-control" name="delivery_remarks" id="delivery_remarks" value="<?php echo ($ID && $delivery_detail[0]['task'] == 'delivery')?$delivery_detail[0]['detail_remark']:''; ?>"></p>
																		</div>
																	</div>
																</div>

																<div class="col-12 col-md-6">
																	<input onclick="collapse('#collapseFour'); open_next_form(this);" <?php echo ($ID && $delivery_detail[0]['task'] == 'collection')?'checked':''; ?> type="radio" id="radio_4" data-toggle="collapse" data-target="#collapseFour" aria-expanded="false" aria-control requireds="collapseFour" name="collection" <?php echo ($ID)?'':'required'; ?>> Collection
																	
																	<div id="collapseFour" class="panel-collapse collapse">
																		<div class="panel-body">
																			<p>Collection Name<br><input type="text" class="form-control" name="collection_name" id="collection_name" value="<?php echo ($ID && $delivery_detail[0]['task'] == 'collection')?$delivery_detail[0]['detail_name']:''; ?>"></p>
																			<p>Address<br><input type="text" class="form-control" name="collection_address" id="collection_address" value="<?php echo ($ID && $delivery_detail[0]['task'] == 'collection')?$delivery_detail[0]['detail_address']:''; ?>"></p>
																			<p>Items<br><input type="text" class="form-control" name="collection_item" id="collection_item" value="<?php echo ($ID && $delivery_detail[0]['task'] == 'collection')?$delivery_detail[0]['detail_item']:''; ?>"></p>
																			<p>Remarks<br><input type="text" class="form-control" name="collection_remarks" id="collection_remarks" value="<?php echo ($ID && $delivery_detail[0]['task'] == 'collection')?$delivery_detail[0]['detail_remark']:''; ?>"></p>
																		</div>
																	</div>
																</div>
															</div>
														</div>
													</div>
												</div>
											</div>

											<div class="form-row">
												<div class="col-12">
													<div class="form-group">
														<div class="container">
															<div class="row">
																<div class="col-12 col-md-6">
																	<input onclick="collapse('#collapseFive'); open_next_form(this);" <?php echo ($ID && $delivery_detail[0]['task'] == 'return')?'checked':''; ?> type="radio" id="radio_5" data-toggle="collapse" data-target="#collapseFive" aria-expanded="false" aria-control requireds="collapseFive" name="return" <?php echo ($ID)?'':'required'; ?>> Return

																	<div id="collapseFive" class="panel-collapse collapse">
																		<div class="panel-body">
																			<p>Return Name<br><input type="text" class="form-control" name="return_name" id="return_name" value="<?php echo ($ID && $delivery_detail[0]['task'] == 'return')?$delivery_detail[0]['detail_name']:''; ?>"></p>
																			<p>Address<br><input type="text" class="form-control" name="return_address" id="return_address" value="<?php echo ($ID && $delivery_detail[0]['task'] == 'return')?$delivery_detail[0]['detail_address']:''; ?>"></p>
																			<p>Items<br><input type="text" class="form-control" name="return_item" id="return_item" value="<?php echo ($ID && $delivery_detail[0]['task'] == 'return')?$delivery_detail[0]['detail_item']:''; ?>"></p>
																			<p>Remarks<br><input type="text" class="form-control" name="return_remarks" id="return_remarks" value="<?php echo ($ID && $delivery_detail[0]['task'] == 'return')?$delivery_detail[0]['detail_remark']:''; ?>"></p>
																		</div>
																	</div>
																</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> -->
														<label for="other_person_details">Other 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 //} ?> -->

															<?php if($department) foreach($department as $key => $dept){ ?>
																<?php if(($_SESSION['user']['department_id']) != $dept['id']){ ?>
																	<option value="<?php echo $dept['id']; ?>"><?php echo $dept['name'].' ['.$dept['branch_name'].']'; ?></option>
																<?php } ?>
															<?php } ?>
														</select>
													</div>
												</div>

												<?php if(!empty($ID) && !empty($delivery_detail)) foreach($delivery_detail as $row){ ?>
													<?php if($row['department_id'] != $row['created_department_id']){ ?>
														<div class="col-12 col-sm-6">
															<div class="form-group">
																<label for="other_person_details_input">Other Department</label>
																<input type="text" class="form-control" name="other_person_name_input" id="other_person_details_input" value="<?php echo $row['requester_dept'].' ['.$row['requester_branch'].']' ?>" readonly>
																<input type="text" class="form-control" name="other_person_details_input" id="other_person_details_input" value="<?php echo $row['department_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/delivery_list/'); ?>">Cancel</a>
												<button type="submit" 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>
<script>
	$(document).ready(function() {
		if('<?php echo $ID; ?>' != '' && '<?php echo $ID; ?>' > 0) 
		{
			if('<?php echo $delivery_detail[0]['task']; ?>' == 'payment') collapse('#collapseOne');
			else if('<?php echo $delivery_detail[0]['task']; ?>' == 'banking') 
			{
				collapse('#collapseTwo');
				if('<?php echo $delivery_detail[0]['detail_name']; ?>' == 'pbb') disabled_input('#pbb');
				else if('<?php echo $delivery_detail[0]['detail_name']; ?>' == 'ambank') disabled_input('#ambank');
				else if('<?php echo $delivery_detail[0]['detail_name']; ?>' == 'bmbb') disabled_input('#bmbb');
				else if('<?php echo $delivery_detail[0]['detail_name']; ?>' == 'mbb') disabled_input('#mbb');
				else disabled_input('#bimb');
			}
			else if('<?php echo $delivery_detail[0]['task']; ?>' == 'delivery') collapse('#collapseThree');
			else if('<?php echo $delivery_detail[0]['task']; ?>' == 'collection') collapse('#collapseFour');
			else collapse('#collapseOne');
		}

		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');

                var task_name = hover_item.task;
                var task = (task_name.charAt(0).toUpperCase()) + (task_name.slice(1));
                if(hover_item.detail_name != '') var detail_name = hover_item.detail_name; else var detail_name = 'N/A'; 
                if(hover_item.detail_address != '') var detail_address = hover_item.detail_address; else var detail_address = 'N/A'; 
                if(hover_item.detail_item != '') var detail_item = hover_item.detail_item; else var detail_item = 'N/A'; 
                if(hover_item.detail_remark != '') var detail_remark = hover_item.detail_remark; else var detail_remark = 'N/A'; 

                if(task_name == 'payment')
                {
                    var delivery_detail = '';
                }else{
                    if(task_name == 'banking')
                    {
                        var delivery_detail = 'Bank Name : '+detail_name.toUpperCase()+'<br>Remark : '+detail_remark;
                    }else{
                        var delivery_detail = task+' Name : '+detail_name+'<br>Address : '+detail_address+'<br>Item : '+detail_item+'<br>Remarks : '+detail_remark;
                    }
                }

                if(hover_item.requester_department_id > 0)
                {
                    var department = hover_item.requester_dept+' ['+hover_item.requester_branch+']';
                }else{
                    var department = 'N/A';
                }

                tooltip = '<div class="tooltipevent"> Staff name : '+department+'<br>Task : '+task+' <br> Date : '+date+'<br>'+delivery_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();

	});

	function collapse(id_collapse) 
	{
		if(id_collapse == '#collapseOne')
		{
			$('#radio_1').attr('required','required');

			$('#radio_2').removeAttr('required');
			$('#radio_3').removeAttr('required');
			$('#radio_4').removeAttr('required');
			$('#radio_5').removeAttr('required');
		}else if(id_collapse == '#collapseTwo')
		{
			$('#radio_2').attr('required','required');

			$('#radio_1').removeAttr('required');
			$('#radio_3').removeAttr('required');
			$('#radio_4').removeAttr('required');
			$('#radio_5').removeAttr('required');
		}else if(id_collapse == '#collapseThree')
		{
			$('#radio_3').attr('required','required');

			$('#radio_1').removeAttr('required');
			$('#radio_2').removeAttr('required');
			$('#radio_4').removeAttr('required');
			$('#radio_5').removeAttr('required');
		}else if(id_collapse == '#collapseFour')
		{
			$('#radio_5').attr('required','required');

			$('#radio_1').removeAttr('required');
			$('#radio_2').removeAttr('required');
			$('#radio_3').removeAttr('required');
			$('#radio_5').removeAttr('required');
		}else //#collapseFive
		{
			$('#radio_5').attr('required','required');

			$('#radio_1').removeAttr('required');
			$('#radio_2').removeAttr('required');
			$('#radio_3').removeAttr('required');
			$('#radio_4').removeAttr('required');
		}

		$('#collapseTwo').collapse('hide');
		$('#collapseThree').collapse('hide');
		$('#collapseFour').collapse('hide');
		$('#collapseFive').collapse('hide');
		
		$(id_collapse).collapse('show');
	}

	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 disabled_input(id_input)
	{
		if(id_input == '#pbb' && $(id_input).val() != '')
		{
			$('#pbb').removeAttr('disabled');

			$('#ambank').attr('disabled','disabled');
			$('#bmbb').attr('disabled','disabled');
			$('#mbb').attr('disabled','disabled');
			$('#bimb').attr('disabled','disabled');
		}else if(id_input == '#ambank' && $(id_input).val() != '')
		{
			$('#ambank').removeAttr('disabled');

			$('#pbb').attr('disabled','disabled');
			$('#bmbb').attr('disabled','disabled');
			$('#mbb').attr('disabled','disabled');
			$('#bimb').attr('disabled','disabled');
		}else if(id_input == '#bmbb' && $(id_input).val() != '')
		{
			$('#bmbb').removeAttr('disabled');

			$('#pbb').attr('disabled','disabled');
			$('#ambank').attr('disabled','disabled');
			$('#mbb').attr('disabled','disabled');
			$('#bimb').attr('disabled','disabled');
		}else if(id_input == '#mbb' && $(id_input).val() != '')
		{
			$('#mbb').removeAttr('disabled');

			$('#pbb').attr('disabled','disabled');
			$('#ambank').attr('disabled','disabled');
			$('#bmbb').attr('disabled','disabled');
			$('#bimb').attr('disabled','disabled');
		}else if(id_input == '#bimb' && $(id_input).val() != '')
		{
			$('#bimb').removeAttr('disabled');

			$('#pbb').attr('disabled','disabled');
			$('#ambank').attr('disabled','disabled');
			$('#bmbb').attr('disabled','disabled');
			$('#mbb').attr('disabled','disabled');
		}else{
			$('#pbb').removeAttr('disabled');
			$('#ambank').removeAttr('disabled');
			$('#bmbb').removeAttr('disabled');
			$('#mbb').removeAttr('disabled');
			$('#bimb').removeAttr('disabled');
		}
	}
</script>