<section class="container-fluid" style="padding-bottom: 1rem;">
	<div class="row">
		<div class="col-6">
            <div class="card bg-light-transparent" style="margin-bottom: 2rem; height: 54.75rem;">
                <div class="card-header bg-white">
                    <div class="float-left">
                        <h4 class="card-title">Calendar</h4>
                    </div>
                </div>
                <div class="card-body">
                    <div class="card bg-white no-shadow">
                        <div class="card-body">
                            <div class="container">
                                <div class="row">
                                    <?php foreach ($booking_name as $booking) { ?>
                                        <div class="col mb-1">
                                            <br><div data-trigger="hover" data-tooltip="tooltip" title="<?php echo $booking['title']; ?>" class="text-center mt-2 text-white" style="background-color: <?php echo '#'.$booking['color_code']; ?>;-webkit-border-radius:8px; -moz-border-radius:8px; border-radius:8px; border:1px solid #ccc; height:28px;"><?php echo $booking['short_name']; ?></div>
                                        </div>
                                    <?php } ?>
                                </div>
                            </div>
                            <br>
                            <div class="col-12">
                                <div id="calendar"></div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
		</div>
        <div class="col-6">
            <div class="tab-content" id="tabContent">
                <div class="tab-pane fade show active" id="forms" role="tabpanel" aria-labelledby="forms-tab">
                    <div class="card bg-light-transparent" style="margin-bottom: 2rem;">
                        <div class="card-header bg-light">
                            <div class="float-left">
                               <h4>Service Form</h4>
                            </div>
                        </div>
                        <div class="tab-content">
                            <div class="tab-pane fade show active" id="formTableView" 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="table_forms" class="table table-bordered table-hover">
                                                    <thead>
                                                        <th class="text-center">Code</th>
                                                        <th>Title</th>
                                                        <th>Description</th>
                                                        <th>Category</th>
                                                        <th>Action</th>
                                                    </thead>
                                                    <tbody>
                                                    <?php if(isset($forms)): ?>
                                                        <?php foreach($forms as $form): //debug($forms);?>
                                                            <tr>
                                                                <td class="text-center"><?php echo $form['short_name']; ?></td>
                                                                <td>
                                                                <?php if ($form['id']==25){
                                                                ?>
                                                                <a href="#" data-target="#modal_detail_new" data-toggle="modal"><?php echo $form['title']; ?></a></td>
                                                                <?php } else {?>
                                                                <a target="_blank" href="<?php echo base_url('hr/serviceform/onlineForm/').$form['file_listing']; ?>"><?php echo $form['title']; ?></a>
                                                                <?php } ?>
                                                                </td>
                                                                
                                                                <td class="text-center">
                                                                    <?php echo ($form['total']>0)?'<span class="badge badge-pill badge-warning" style="font-size: 90%; display: inline;">'.$form['total'].'</span>':''; ?>        
                                                                </td>
                                                                <td><?php echo $form['category']; ?></td>
                                                                <td class="text-center">
                                                                    <div class="btn-group btn-group-sm" role="group">
                                                                        <!-- <a download href="<?php //echo base_url($form['file_location'].$form['file_name']); ?>" class="btn btn-outline-dark" data-trigger="hover" data-tooltip="tooltip" title="Download Form"><i class="far fa-arrow-alt-circle-down"></i></a> -->
                                                                        <!-- <?php //if($this->logged_module['role'] == 'admin'): ?>
                                                                            <button type="button" class="btn btn-outline-dark" onclick="openFormModal(<?php //echo $form['id']; ?>)" data-trigger="hover" data-tooltip="tooltip" title="Edit Form"><i class="far fa-edit"></i></button>
                                                                            <button type="button" class="btn btn-outline-dark" onclick="deleteForm(<?php //echo $form['id']; ?>);" data-trigger="hover" data-tooltip="tooltip" title="Delete Form"><i class="far fa-trash-alt"></i></button>
                                                                        <?php //endif; ?> -->
                                    
                                                                    <!-- <?php //if($form['is_calendar'] == 1) { ?>
                                                                        <div class="btn-group btn-group-sm" role="group">
                                                                            <a target="_blank" href="<?php //echo base_url('hr/serviceform/'.$form['file_name']).'_calendar'; ?>" class="btn btn-outline-dark" data-trigger="hover" data-tooltip="tooltip" title="Calendar"><i class="far fa-calendar-alt"></i></a>
                                                                        </div>
                                                                    <?php //} ?> -->
                                                                        <div class="btn-group btn-group-sm" role="group">
                                                                            <a href="<?php echo base_url('hr/serviceform/onlineForm/').$form['file_listing']; ?>" class="btn btn-outline-dark" data-trigger="hover" data-tooltip="tooltip" title="Listing" target="_blank"><i class="fas fa-align-justify"></i></a>
                                                                        </div>

                                                                        
                                                                        <div class="btn-group btn-group-sm" role="group">
                                                                        <?php if ($form['id']==25) { //crm
                                                                            ?>  
                                                                            <!-- <a href="#" data-target="#modal_detail_new" data-toggle="modal"><?php //echo $form['title']; ?></a></td> -->
                                                                            <a href="#" data-target="#modal_detail_new" class="btn btn-outline-dark" data-toggle="modal"><i class="far fa-file"></i></a>
                                                                        <?php } else {?>
                                                                            <a href="<?php echo base_url('hr/serviceform/').$form['file_name'].'_form'; ?>" class="btn btn-outline-dark" data-trigger="hover" data-tooltip="tooltip" title="New Form" target="_blank"><i class="far fa-file"></i></a>
                                                                        </div>
                                                                        <?php }?>

                                                                        <!-- <div class="btn-group btn-group-sm" role="group">
                                                                            <a href="<?php //echo base_url('hr/serviceform/').$form['file_name'].'_form'; ?>" class="btn btn-outline-dark" data-trigger="hover" data-tooltip="tooltip" title="New Form" target="_blank"><i class="far fa-file"></i></a>
                                                                        </div> -->
                                                                    </div>
                                                                </td>
                                                            </tr>
                                                        <?php endforeach; ?>
                                                    <?php endif; ?>
                                                    </tbody>
                                                </table>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
	</div>
</section>

<!-- modal -->

<div class="modal fade" id="modal_detail_new" 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">Company</h5>
				<button type="button" class="close" data-dismiss="modal" aria-label="Close">
					<span aria-hidden="true">&times;</span>
				</button>
			</div>

			<div class="modal-body">
				<form class="form" id="crmcompany" method="post" action="<?php echo base_url('hr/serviceform/crm_submit') ?>">
					
					<div class="row p-3">
						<div class="col-12">
							<label>Company</label>
							<select class="form-control" id="compname" name="compname" required>
								<option value="-1"><?php echo "-- Select Company --"; ?></option>
                                <?php if(!empty($customer)): foreach($customer as $row): //debug($row); ?>
                                    <option value="<?php echo $row->customer_id; ?>"><?php echo $row->name; ?></option>
								<?php endforeach; endif;?>
							</select>
						</div>
					</div>

					<div class="float-right">
						<button type="button" class="btn btn-light" data-dismiss="modal">Cancel</button>
						<button type="submit" class="btn btn-primary" onclick="">Go</button>
					</div> 
				</form>
			</div>
		</div>
	</div>
</div>

<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 type="text/javascript">
	$(document).ready(function(){
        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);

                if(hover_item.start_date != '0000-00-00' && hover_item.start_date != null && hover_item.start_date != undefined)
                {
                	if(hover_item.short_name == 'FBF'){
                		var start_date = '<br> Departure Date : '+moment(hover_item.start_date).format('DD-MM-YYYY');
                	}else{
                		var start_date = '<br> Start Date : '+moment(hover_item.start_date).format('DD-MM-YYYY');
                	}
                }else{
                	var start_date = '';
                }


                if(hover_item.end_date != '0000-00-00' && hover_item.end_date != null && hover_item.end_date != undefined)
                {
                	if(hover_item.short_name == 'FBF'){
                		var end_date = '<br> Return Date : '+moment(hover_item.end_date).format('DD-MM-YYYY');
                	}else{
                		var end_date = '<br> End Date : '+moment(hover_item.end_date).format('DD-MM-YYYY');
                	}
                }else{
                	if(hover_item.short_name == 'MRF'){
                		var end_date = '<br>End Date : No Fixed Date';
                	}else{
                		var end_date = '';
                	}
                }


                if(hover_item.start_time != '0000-00-00' && hover_item.start_time != null && hover_item.start_time != undefined)
                {
                	var start_time = ' ['+hover_item.start_time+']';
                }else{
                	var start_time = '';
                }
                if(hover_item.end_time != '0000-00-00' && hover_item.end_time != null && hover_item.end_time != undefined)
                {
                	var end_time = ' ['+hover_item.end_time+']';
                }else{
                	var end_time = '';
                }

                tooltip = '<div class="tooltipevent"> Name : '+hover_item.name+'<br/>Department : '+hover_item.department_name+'<br/> Services : '+hover_item.title+'<br/> Detail : '+hover_item.event_title+start_date+start_time+end_date+end_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();
    })
</script>