<section class="container-fluid">
	<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-2">
                                    <?php foreach ($flight as $type) { ?>
                                        <br><div data-trigger="hover" data-tooltip="tooltip" title="<?php echo $type['flight_name']; ?>" class="text-center mt-2 text-white" style="background-color: <?php echo $type['color_code']; ?>;-webkit-border-radius:8px; -moz-border-radius:8px; border-radius:8px; border:1px solid #ccc; height:28px;"><?php echo $type['short_name']; ?></div>
                                    <?php } ?> 
                                </div>
                                <div class="col-10">
                                    <div id="calendar"></div>
                                </div>
                                <?php //debug($type) ?>
                            </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">Upcoming Flight Booking</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 data-trigger="hover" data-tooltip="tooltip" title="<?php echo $upcoming['dept_name'].'['.$upcoming['branchName'].']'; ?>"><?php echo $upcoming['dept_name'].'/'.$upcoming['branchName']; ?></p>
									</div>
									<div class="col text-right">
										<p><?php echo date('d-m-Y',strtotime($upcoming['departure_date'])); ?></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-sm-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 '; ?>Flight Booking Form</h4>
						</div>
						<div class="card-body">
							<div class="card no-shadow">
								<div class="card-body">
									<?php if(!empty($ID)){ ?>
										<form id="flightForm" class="form" action="<?php echo base_url('hr/Serviceform/edit_flight_form') ?>" method="POST">
										<?php } else { ?>
											<form id="flightForm" class="form" action="<?php echo base_url('hr/Serviceform/save_flight_form') ?>" method="POST">
											<?php } ?>

											<input type="text" class="form-control" name="flightID" id="flightID" value="<?php echo $ID; ?>" hidden>

											<div class="form-row">
												<div class="col-12 col-sm-6">
													<div class="form-group">
														<label>Name</label>
														<?php if(!empty($ID)) { ?>
															<?php if(!empty($getListFlightBookingByID)) { 
																foreach($getListFlightBookingByID as $row){  ?>
																	<input type="text" class="form-control" name="name" id="name" value="<?php echo $row['requestor']; ?>" readonly/>	
																	<input type="text" class="form-control" name="name_id" id="name_id" value="<?php echo $row['requester_id']; ?>" hidden>
																<?php } 
															} } else { ?>
																<input type="text" class="form-control" name="name" id="name" value="<?php echo $_SESSION['user']['name']; ?>" readonly>

																<input type="text" class="form-control" name="name_id" id="name_id" value="<?php echo $_SESSION['user']['id']; ?>" hidden>
														<?php } ?>
													</div>
												</div>

												<div class="col-12 col-sm-3">
													<div class="form-group">
														<label for="department">Department</label>
														<?php if(!empty($ID)) { ?>
															<?php if(!empty($getListFlightBookingByID)) { 
																foreach($getListFlightBookingByID as $row){  ?>
																	<input type="text" class="form-control" name="department" id="department" value="<?php echo $row['dept_name']; ?>" readonly/>

																	<input type="text" class="form-control" name="department_id" id="department_id" value="<?php echo $row['department_id']; ?>" hidden>
																<?php } 
															} } else { ?>
																<input type="text" class="form-control" name="department" id="department" value="<?php echo $_SESSION['user']['department_name']; ?>" readonly/>

																<input type="text" class="form-control" name="department_id" id="department_id" value="<?php echo $_SESSION['user']['department_id']; ?>" hidden>
														<?php } ?>
													</div>
												</div>

												<div class="col-12 col-sm-3">
													<div class="form-group">
														<label for="datereq">Date Request</label>
														<?php if(!empty($ID)){ ?>
															<?php if(!empty($getListFlightBookingByID)): foreach($getListFlightBookingByID as $row): ?>
																<input type="" class="form-control" name="datereq" id="datereq" value="<?php echo (!empty($ID))?date('d-m-Y',strtotime($row['createdTS'])):''; ?>" readonly/>
															<?php endforeach;endif; } else { ?>
																<input type="" class="form-control" name="datereq" id="datereq" value="<?php echo date('d-m-Y'); ?>" readonly/>
														<?php } ?>
													</div>
												</div>
											</div>

		                                    <div class="form-row">
		                                    	<div class="col-12 col-sm-3">
													<div class="form-group">
														<label for="gname">Guest Name</label>
														<?php if(!empty($ID))
															{
																if($getListFlightBookingByID[0]['requester_id'] == $_SESSION['user']['id'])
																{
																	$readonly = '';
																}else{
																	$readonly = 'readonly';
																}
															}else{
																$readonly = '';
															}
														?>
														<select required data-parsley-error-message="Guest name is required." class="form-control" name="gname" id="gname" <?php echo $readonly; ?>>
															<option value="-1" selected disabled>-- Please Select --</option>
															<?php if(!empty($ID)){ ?>
																<option value="<?php echo $getListFlightBookingByID[0]['guest_name']; ?>" selected <?php echo $readonly; ?>><?php echo (!empty($ID))?$getListFlightBookingByID[0]['guestName']:'' ?></option>
															<?php } ?>
															<?php if(!empty($listName)){ foreach($listName as $row){ ?>
																<option value="<?php echo (!empty($row['id']))?$row['id']:''; ?>">
																	<?php echo (!empty($row['name']))?$row['name']:''; ?>
																</option>
															<?php } } ?>
														</select>
													</div>
												</div>

												<div class="col-12 col-sm-3">
		                                       		<div class="form-group">
		                                       			<label for="gic">Guest IC No.</label>
		                                       			<input type="number" class="form-control" name="gic" id="gic" value="<?php echo (!empty($ID))?$getListFlightBookingByID[0]['ic_no']:''; ?>" minlength="12" maxlength="12" required>
		                                       		</div>
		                                       	</div>
		                                       	<div class="col-12 col-sm-3">
		                                       		<div class="form-group">
		                                       			<label for="passport">Guest Passport No.</label>
		                                       			<input type="text" class="form-control" name="passport" id="passport" value="<?php echo (!empty($ID))?$getListFlightBookingByID[0]['passport']:''; ?>" <?php echo ($getListFlightBookingByID[0]['departure_type'] == 1)?'readonly':'required'; ?>>
		                                       		</div>
		                                       	</div>
		                                       	<div class="col-12 col-sm-3">
		                                       		<div class="form-group">
		                                       			<label for="gphone">Guest Phone No.</label>
		                                       			<input type="number" class="form-control" name="gphone" id="gphone" value="<?php echo (!empty($ID))?$getListFlightBookingByID[0]['phone_no']:''; ?>" minlength="10" maxlength="11" required>
		                                       		</div>
		                                       	</div>
		                                    </div>

		                                    <div class="form-row">
		                                    	<div class="col-12 col-sm-6">
		                                    		<div class="form-group">
		                                    			<label for="departure"></label>
		                                    			<div class="row">
		                                    				<div class="col-sm-6">
		                                    					<input type="radio" name="departure_type" value="1" <?php echo ($getListFlightBookingByID[0]['departure_type'] == 1)?'checked':''; ?> onclick="open_close_passport_column(this)"> Domestic Departure
		                                    				</div>
		                                    				<div class="col-sm-6">
		                                    					<input type="radio" name="departure_type" value="0" <?php echo ($getListFlightBookingByID[0]['departure_type'] == 0)?'checked':''; ?> onclick="open_close_passport_column(this)"> International Departure
		                                    				</div>
		                                    			</div>
		                                    		</div>
		                                    	</div>

		                                    	<div class="col-12 col-sm-6">
		                                    		<div class="form-group">
		                                    			<label for="origin">Origin</label>
		                                    			<input type="text" class="form-control" name="origin" id="origin" value="<?php echo (!empty($ID))?$getListFlightBookingByID[0]['origin']:''; ?>" required>
		                                    		</div>
		                                    	</div>
		                                    </div>

		                                    <div class="form-row">
		                                    	<div class="col-12 col-sm-6">
		                                    		<div class="form-group">
		                                    			<label for="ticket"></label>
		                                    			<div class="row">
		                                    				<div class="col-sm-6">
		                                    					<input type="radio" name="ticket_type" value="1" <?php echo ($getListFlightBookingByID[0]['ticket_type'] == 1)?'checked':''; ?> onclick="open_close_return_column(this)"> One Way Ticket
		                                    				</div>
		                                    				<div class="col-sm-6">
		                                    					<input type="radio" name="ticket_type" value="0" <?php echo ($getListFlightBookingByID[0]['ticket_type'] == 0)?'checked':''; ?> onclick="open_close_return_column(this)"> Two Way Ticket 
		                                    				</div>
		                                    			</div>
		                                    		</div>
		                                    	</div>

		                                    	<div class="col-12 col-sm-6">
		                                    		<div class="form-group">
		                                    			<label for="dest">Destination</label>
		                                    			<input type="text" class="form-control" name="destination" id="destination" value="<?php echo (!empty($ID))?$getListFlightBookingByID[0]['destination']:''; ?>" required>
		                                    		</div>
		                                    	</div>
		                                    </div>

		                                    <div class="form-row">
		                                    	<div class="col-12 col-sm-3">
		                                    		<div class="form-group">
		                                    			<label for="datestart">Departure Date</label>
		                                    			<input type="text" class="form-control datepicker" name="depart_date" id="depart_date" value="<?php echo (!empty($ID))?date('d-m-Y',strtotime($getListFlightBookingByID[0]['departure_date'])):''; ?>" required>
		                                    		</div>
		                                    	</div>

		                                    	<div class="col-12 col-sm-3">
		                                    		<div class="form-group">
		                                    			<label for="time"> Departure Time</label>
		                                    			<input type="time" class="form-control" name="depart_time" id="depart_time" value="<?php echo (!empty($ID))?$getListFlightBookingByID[0]['departure_time']:''; ?>" required>
		                                    		</div>
		                                    	</div>

		                                    	<div class="col-12 col-sm-3">
		                                    		<div class="form-group">
		                                    			<label for="date">Return Date </label>
		                                    			<input type="text" class="form-control datepicker" name="return_date" id="return_date" value="<?php echo (!empty($ID))?date('d-m-Y',strtotime($getListFlightBookingByID[0]['return_date'])):''; ?>" <?php echo ($getListFlightBookingByID[0]['ticket_type'] == 1)?'readonly':'required'; ?>>
		                                    		</div>
		                                    	</div>

		                                    	<div class="col-12 col-sm-3">
		                                    		<div class="form-group">
		                                    			<label for="time">Return Time</label>
		                                    			<input type="time" class="form-control" name="return_time" id="return_time" value="<?php echo (!empty($ID))?$getListFlightBookingByID[0]['return_time']:''; ?>" <?php echo ($getListFlightBookingByID[0]['ticket_type'] == 1)?'readonly':'required'; ?>>
		                                    		</div>
		                                    	</div>
		                                    </div>

		                                    <div class="form-row">
		                                    	<div class="col-12 col-sm-3">
		                                    		<div class="form-group">
		                                    			<label for="passenger">No. of Passengers</label>
		                                    			<input type="number" class="form-control" name="passenger" id="passenger" value="<?php echo (!empty($ID))?$getListFlightBookingByID[0]['no_of_passengers']:''; ?>" >
		                                    		</div>
		                                    	</div>

		                                    	<div class="col-12 col-sm-3">
		                                    		<div class="form-group">
		                                    			<label for="class">Class of Flight</label>
		                                    			<select class="form-control" name="flightClass" id="flightClass" required>
		                                    				<option value="" disabled selected>-- Please Select --</option>
															<option value="First class" <?php echo (!empty($ID) && ($getListFlightBookingByID[0]['flight_class']) == 'First class')?'selected':''; ?>>First class</option>
															<option value="Business class" <?php echo (!empty($ID) && ($getListFlightBookingByID[0]['flight_class']) == 'Business class')?'selected':''; ?>>Business class</option>
															<option value="Economy class" <?php echo (!empty($ID) && ($getListFlightBookingByID[0]['flight_class']) == 'Economy class')?'selected':''; ?>>Economy class</option>		
		                                    			</select>
		                                    		</div>
		                                    	</div>

		                                    	<div class="col-12 col-sm-6">
		                                    		<div class="form-group">
		                                    			<label>Meal</label>
		                                    			<div class="row">
		                                    				<div class="col-sm-3">
		                                    					<input type="radio" name="meal" value="1" <?php echo ($getListFlightBookingByID[0]['meal'] == 1)?'checked':''; ?>> Yes
		                                    				</div>
		                                    				<div class="col-sm-3">
		                                    					<input type="radio" name="meal" value="0" <?php echo ($getListFlightBookingByID[0]['meal'] == 0)?'checked':''; ?>> No 
		                                    				</div>
		                                    			</div>
		                                    		</div>
		                                    	</div>											
		                                    </div>

		                                    <div class="form-row">
		                                    	<div class="col-12 col-md-6">
		                                    		<label>Baggage</label>
		                                    		<select name="baggage1" id="baggage2" class="form-control form-control" required>
		                                    			<!-- <option value="0" disabled selected>--please select--</option> -->
		                                    			<option value="" disabled selected>-- Please Select --</option>
														<option value="15kg - RM26.50" <?php echo (!empty($ID) && ($getListFlightBookingByID[0]['baggage']) == '15kg - RM26.50')?'selected':''; ?>>15kg - RM26.50</option>
														<option value="20kg - RM31.80" <?php echo (!empty($ID) && ($getListFlightBookingByID[0]['baggage']) == '20kg - RM31.80')?'selected':''; ?>>20kg - RM31.80</option>
														<option value="25kg - Rm42.40" <?php echo (!empty($ID) && ($getListFlightBookingByID[0]['baggage']) == '25kg - Rm42.40')?'selected':''; ?>>25kg - Rm42.40</option>
		                                    			<option value="amount">Other Baggage</option>
		                                    		</select>
		                                    	</div>
		                                    	<div class="col-12 col-md-6 mx-auto text-left mb-3">
		                                    		<label><p></p></label>
		                                    		<input type="text" id="baggage3" name="baggege4" value="<?php echo (!empty($ID))?$getListFlightBookingByID[0]['baggage']:'-- Please Select --'; ?>" class="form-control form-control-md" disabled onkeyup="changeBaggage(this)" required> 
		                                    		<input type="text" name="baggage3" value="<?php echo (!empty($ID))?$getListFlightBookingByID[0]['baggage']:'-- Please Select --'; ?>" id="other_baggage_write" class="form-control form-control" hidden required>
		                                    	</div>
		                                    </div>

		                                    <br>

		                                    <div class="form-row">
		                                    	<div class="col-12 ">
		                                    		<div class="form-group">
		                                    			<p>Select Flight :</p>
		                                    			<div class="row">
		                                    				<div class="col-12 col-sm-3">
		                                    					<img src="<?php echo base_url('assets/images/airasialogo.png'); ?>" width="150" height="90"><br>

		                                    					<input type="radio" name="flightName" id="flightName" value="airasia" <?php echo ($getListFlightBookingByID[0]['flight_name'] == 'airasia')?'checked':''; ?>> AIR ASIA<br>
		                                    				</div>

		                                    				<div class="col-12 col-sm-3">
		                                    					<img src="https://lh4.googleusercontent.com/2ybl_uxiKADauK57kuLe5GQbY6t8Z2ywj7zwNI5dxIJ8bCV2WHGGvqazSjqNi73ElsQXEiVD5FSLvakRFwO_fgCq5SORJovkoZ2JYGFimzd6TV_h-O92MBL06MXu=w260" class="freebirdMaterialImageoptionImage" width="150" height="90">
		                                    					<br>	

		                                    					<input type="radio" name="flightName" id="flightName" value="firefly" <?php echo ($getListFlightBookingByID[0]['flight_name'] == 'firefly')?'checked':''; ?>> FIREFLY<br>
		                                    				</div>

		                                    				<div class="col-12 col-sm-3">
		                                    					<div class="freebirdSolidBorder freebirdMaterialImageoptionImageWrapper freebirdMaterialImageoptionIsSelected" jsname="QAVlHc"><img src="https://lh5.googleusercontent.com/d10YwuqwDhqsaHSz2wL10TmD5lmpjJw33_cC6NlbbFQ-t3SiCmw8WVRa6M_e-O21L0FtagosoCHfFk-5xImZJw2-WHQhKi-hR9uXNmd-ITFiyYwpcmkxtbqcJVEK=w260" class="freebirdMaterialImageoptionImage" width="200" height="90"></div>

		                                    					<input type="radio" name="flightName" id="flightName" value="malindo" <?php echo ($getListFlightBookingByID[0]['flight_name'] == 'malindo')?'checked':''; ?>> MALINDO<br>
		                                    				</div>

		                                    				<div class="col-12 col-sm-3">
		                                    					<img src="https://lh6.googleusercontent.com/AVGFmpTZtehdnCwQ9b2PF5BWGkdQswNMIM_eLoOh1bHAOdpzKXY138RSemWKoGaD1BVcN9MtqcDY0oMtcHOMVWpwRLFfYvqTuvCVw62iRjpFS-UgtNn-QxZHBu28=w260" class="freebirdMaterialImageoptionImage" width="200" height="90"><br>

		                                    					<input type="radio" name="flightName" id="flightName" value="mas" <?php echo ($getListFlightBookingByID[0]['flight_name'] == 'mas')?'checked':''; ?>> MAS
		                                    				</div>

		                                    				<div class="col-12 col-sm-6">
		                                    					<div class="form-group">
		                                    						<input type="checkbox" name="other_flight" id="other_flight" data-otherflight="other_flight" value="1" onchange="open_hidden_other_flightName(this);">
		                                    						<label for="other_flight_name">Other :</label>
		                                    						<input type="text" class="form-control" name="other_flight_name" id="other_flight_name" hidden>
		                                    					</div>
		                                    				</div>
		                                    			</div>
		                                    		</div>
		                                    	</div>
		                                    </div>

		                                    <div class="form-row">
		                                    	<div class="col-12">
		                                    		<div class="float-right" style="padding-top: 2rem;">
		                                    			<a class="btn btn-light" href="<?php echo base_url('hr/serviceform/flight_list/'); ?>">Cancel</a>
		                                    			<button type="submit" class="btn btn-primary" onclick="confirmation()">Submit</button>
		                                    		</div> 
		                                    	</div>
		                                    </div> 
		                               </form>
		                        </div>
		                    </div>
		                </div>
		           </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>

	$('#baggage2').change(function(){

		let baggage2 = $('#baggage2').val();

		if(baggage2 != 'amount')
		{
                /**
                    check value for the backup frequency
                    if the value for the backup frequency is one time automatically the value for the amounttext is the value for 
                    sizedb * 10 number format 2
                */
                $('#baggage3').val(baggage2);
                $('#other_baggage_write').val(baggage2);

                $( "#baggage3" ).prop( "disabled", true );
            }else{
            	$('#baggage3').val();
            	$('#other_baggage_write').val();

            	$( "#baggage3" ).prop( "disabled", false );
            }
        });

	function changeBaggage(elem) 
	{
		$('#other_baggage_write').val($(elem).val());    
	}

	function open_hidden_other_flightName(elem) 
	{
		let checked 		= $(elem).val();
		let input_name_id	= $(elem).data('otherflight');

		if(document.getElementById(input_name_id).checked)
		// if(checked == 1)
		{
			$('#other_flight_name').removeAttr('hidden');
		}else {
			$('#other_flight_name').attr('hidden','hidden');
		}
	}

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

	function confirmation() {
		confirm('Do you really want to submit the form?');
	}

	$(document).ready(function(){

        $('#table_flight').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));
                var hover_item = js_res[data.id];
                var title = JSON.stringify(data.title);
                var depart_date = moment(hover_item.departure_date).format('DD-MM-YYYY');
                var return_date = moment(hover_item.return_date).format('DD-MM-YYYY');
                // var depart_time = moment(hover_item.departure_time).format('00-00-00');
                // var return_time = moment(hover_item.return_time).format('00-00-00');

                tooltip = '<div class="tooltipevent"> Flight name : '+hover_item.flight_name+' <br/> Origin : '+hover_item.origin+'<br/> Destination : '+hover_item.destination+'<br/> Departure Date : '+depart_date+'<br/> Return Date : '+return_date+'<br/>Departure Time : '+hover_item.departure_time+' <br/> Return Time : '+hover_item.return_time+' </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 open_close_passport_column(elem)
    {
    	let departure_type = $(elem).val();

    	if(departure_type == 1)
    	{
    		$('#passport').attr('readonly','readonly');
    		$('#passport').removeAttr('required');
    	}else{
    		$('#passport').removeAttr('readonly');
    		$('#passport').attr('required','required');
    	}
    }

	function open_close_return_column(elem)
	{
		let ticket_type = $(elem).val();
    	
    	if(ticket_type == 1)
    	{
    		$('#return_date').attr('readonly','readonly');
    		$('#return_time').attr('readonly','readonly');
    	}else{
    		$('#return_date').removeAttr('readonly');
			$('#return_time').removeAttr('readonly');
    	}
	}


</script>