<div class="container-fluid d-print-none">
    <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">Upcoming av/it equipment request</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['check_out'])).' - '.$upcoming['check_in']; ?></p>
                               </div>
                           </div>
                            <?php endforeach;endif; ?>
                        </div>
                   </div>
               </div>
           </div>
       </div>
    </div>
</div>

<section class="container d-print-none" 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 '; ?>AV/IT Equipment Request Form</h4>
							<h6 class="card-title float-left"><i>Instruction: This form was designed for SALIHIN staff that may require camera equipment, a laptop, projector and/or any AV/IT equipment for internal use or outside the office.Please reserve equipment three (3) business days in advance by completing and submitting this form. All specified equipment is the property of SALIHIN and is setup with the standard software for use. If you should require technical assistance with the equipment, please refer to technical personnel.</i></h6>
						</div>
						<div class="card-body">
							<div class="card no-shadow">
								<div class="card-body">
									<?php if(!empty($ID)){ ?>
										<form action="<?php echo base_url('hr/serviceform/it_equipment_form_edit'); ?>"  method="post" id="itEquipmentForm" class="form" enctype="multipart/form-data" onsubmit="return confirm('Do you really want to submit the form?')" >
                                       <?php } else { ?>
                                          <form action="<?php echo base_url('hr/serviceform/it_equipment_form_save'); ?>"  method="post" id="itEquipmentForm" class="form" enctype="multipart/form-data" onsubmit="return confirm('Do you really want to submit the form?')" >
                                          <?php } ?>
                                          <input type="hidden" name="equipmentID" id="equipmentID" value="<?php echo $ID ?>">
                                          <div class="form-row">
                                            <div class="col-12">
                                                <div class="form-group">
                                                    <div class="row">
                                                        <div class="col-sm-6">
                                                            <label for="borrower">Borrower Name<br></label>
                                                            <?php if(!empty($ID)){ ?>
                                                                <input type="text" class="form-control" name="borrower_name" value="<?php echo $equipment_detail[0]['borrower_name'] ?>" readonly>
                                                                <input type="hidden" class="form-control" name="borrower_id" value="<?php echo $equipment_detail[0]['borrower_id'] ?>">
                                                            <?php } else { ?>
                                                                <input type="text" class="form-control" name="borrower_name" id="borrower_name" value="<?php echo $_SESSION['user']['name']; ?>" readonly>
                                                                <input type="text" class="form-control" name="borrower_id" id="borrower_id" value="<?php echo $_SESSION['user']['id']; ?>" hidden>
                                                            <?php } ?>
                                                        </div>

                                                        <div class="col-sm-6">
                                                            <label for="borrower">Email<br></label>
                                                            <?php if(!empty($ID)){ ?>
                                                                <input type="text" class="form-control" name="email" value="<?php echo $equipment_detail[0]['email'] ?>" readonly>
                                                            <?php } else { ?>
                                                                <input type="text" class="form-control" name="email" id="email" value="<?php echo $_SESSION['user']['email']; ?>" readonly>
                                                            <?php } ?>
                                                        </div>

                                                        <div class="col-sm-6">
                                                            <label for="dept">Department</label>
                                                            <?php if(!empty($ID)){ ?>
                                                                <input type="text" class="form-control" name="department_name" id="department_name" value="<?php echo $equipment_detail[0]['dept_name']; ?>" readonly>
                                                                <input type="text"  name="department_id" id="department_id" value="<?php echo $equipment_detail[0]['department_id']; ?>" hidden>
                                                            <?php } else { ?>
                                                                <input type="text" class="form-control" name="department_name" id="department_name" value="<?php echo $_SESSION['user']['department_name']; ?>" readonly>
                                                                <input type="text"  name="department_id" id="department_id" value="<?php echo $_SESSION['user']['department_id']; ?>" hidden>
                                                            <?php } ?>
                                                        </div>

                                                        <div class="col-sm-6">
                                                            <label>Date Request</label>
                                                            <?php if(!empty($ID)){ ?>
                                                                <input type="" class="form-control" name="date_request" id="date_request" value="<?php echo date('d-m-Y',strtotime($equipment_detail[0]['createdTS'])); ?>" readonly>
                                                            <?php } else { ?>
                                                                <input type="" class="form-control" name="date_request" id="date_request" value="<?php echo date('d-m-Y'); ?>" readonly>
                                                            <?php } ?>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>

                                        <div class="form-row">
                                            <div class="col-12 col-sm-6">
                                                <div class="form-group">
                                                    <label for="hardware">Hardware <small><b>*Please specify equipment name and quantity e.g Laptop - 2 unit</b></small></label>
                                                    <?php if(!empty($ID)){ ?>
                                                        <?php if($_SESSION['user']['id'] == $equipment_detail[0]['borrower_id']){ ?>
                                                            <input type="text" class="form-control" name="hardware" id="hardware" value="<?php echo $equipment_detail[0]['hardware']; ?>">
                                                        <?php } else { ?>
                                                            <input type="text" class="form-control" name="hardware" id="hardware" value="<?php echo $equipment_detail[0]['hardware']; ?>" disabled>
                                                        <?php } ?>
                                                    <?php } else { ?>
                                                        <input type="text" class="form-control" name="hardware" id="hardware" value="">
                                                    <?php } ?>
                                                </div>
                                            </div>

                                            <div class="col-12 col-sm-6">
                                                <div class="form-group">
                                                    <label for="hw_reason">Reason</label>
                                                    <?php if(!empty($ID)){ ?>
                                                        <?php if($_SESSION['user']['id'] == $equipment_detail[0]['borrower_id']){ ?>
                                                            <input type="text" class="form-control" name="hw_reason" id="hw_reason" value="<?php echo $equipment_detail[0]['hw_reason']; ?>">
                                                        <?php } else { ?>
                                                            <input type="text" class="form-control" name="hw_reason" id="hw_reason" value="<?php echo $equipment_detail[0]['hw_reason']; ?>" disabled>
                                                        <?php } ?>
                                                    <?php } else { ?>
                                                        <input type="text" class="form-control" name="hw_reason" id="hw_reason" value="">
                                                    <?php } ?>
                                                </div>
                                            </div>
                                        </div>

                                        <div class="form-row">
                                            <div class="col-12 col-sm-6">
                                                <div class="form-group">
                                                    <label for="software">Software <small><b>*Please specify software name and quantity e.g Microsoft Office - 2 unit</b></small></label>
                                                    <?php if(!empty($ID)){ ?>
                                                        <?php if($_SESSION['user']['id'] == $equipment_detail[0]['borrower_id']){ ?>
                                                            <input type="text" class="form-control" name="software" id="software" value="<?php echo $equipment_detail[0]['software']; ?>">
                                                        <?php } else { ?>
                                                            <input type="text" class="form-control" name="software" id="software" value="<?php echo $equipment_detail[0]['software']; ?>" disabled>
                                                        <?php } ?>
                                                    <?php } else { ?>
                                                        <input type="text" class="form-control" name="software" id="software" value="">
                                                    <?php } ?>
                                                </div>
                                            </div>

                                            <div class="col-12 col-sm-6">
                                                <div class="form-group">
                                                    <label for="sw_reason">Reason</label>
                                                    <?php if(!empty($ID)){ ?>
                                                        <?php if($_SESSION['user']['id'] == $equipment_detail[0]['borrower_id']){ ?>
                                                            <input type="text" class="form-control" name="sw_reason" id="sw_reason" value="<?php echo $equipment_detail[0]['sw_reason']; ?>">
                                                        <?php } else { ?>
                                                            <input type="text" class="form-control" name="sw_reason" id="sw_reason" value="<?php echo $equipment_detail[0]['sw_reason']; ?>" disabled>
                                                        <?php } ?>
                                                    <?php } else { ?>
                                                        <input type="text" class="form-control" name="sw_reason" id="sw_reason" value="">
                                                    <?php } ?>
                                                </div>
                                            </div>
                                        </div>

                                        <div class="form-row">

                                             <div class="col-12 col-sm-6">
                                                <div class="form-group">
                                                    <label for="check_in">Check in date</label>
                                                    <?php if(!empty($ID)){ ?>
                                                        <?php if($_SESSION['user']['id'] == $equipment_detail[0]['borrower_id']){ ?>
                                                            <input type="text"  class="form-control datepicker" name="check_in" id="check_in" value="<?php echo date('d-m-Y',strtotime($equipment_detail[0]['check_in'])); ?>">
                                                        <?php } else { ?>
                                                            <input type="text"  class="form-control datepicker" name="check_in" id="check_in" value="<?php echo date('d-m-Y',strtotime($equipment_detail[0]['check_in'])); ?>" disabled>
                                                        <?php } ?>
                                                    <?php } else { ?>
                                                        <input type="text" class="form-control datepicker" name="check_in" id="check_in">
                                                    <?php } ?>
                                                </div>
                                            </div>
                                            
                                            <div class="col-12 col-sm-6">
                                                <div class="form-group">
                                                    <label for="check_out">Check out date</label>
                                                    <?php if(!empty($ID)){ ?>
                                                        <?php if($_SESSION['user']['id'] == $equipment_detail[0]['borrower_id']){ ?>
                                                            <input type="text" class="form-control  datepicker" name="check_out" id="check_out" value="<?php echo date('d-m-Y',strtotime($equipment_detail[0]['check_out'])); ?>">
                                                        <?php } else { ?>
                                                            <input type="text" class="form-control  datepicker" name="check_out" id="check_out" value="<?php echo date('d-m-Y',strtotime($equipment_detail[0]['check_out'])); ?>" disabled>
                                                        <?php } ?>
                                                    <?php } else { ?>
                                                        <input type="text" class="form-control datepicker" name="check_out" id="check_out" value="">
                                                    <?php } ?>
                                                </div>
                                            </div>
                                        </div>

                                        <?php if($_SESSION['user']['id'] == $equipment_detail[0]['borrower_id']){ ?>
                                            <div class="form-row">
                                                <div class="col-12 col-sm-8">
                                                    <input type="checkbox" name="agree" id="agree" value="1" onchange="open_submit_button(this)"><i> I hereby request authorization to use equipment as specified above. I agree that the equipment is my full responsibility until returned, and that I will provide reasonable care and security.</i>
                                                    <!-- <?php if(!empty($ID)){ ?>
                                                        <?php if($_SESSION['user']['id'] == $equipment_detail[0]['borrower_id']){ ?>
                                                            <input type="checkbox" name="agree" id="agree" value="1" onchange="open_submit_button(this)"><i> I hereby request authorization to use equipment as specified above. I agree that the equipment is my full responsibility until returned, and that I will provide reasonable care and security.</i>
                                                        <?php } else { ?>
                                                            <input type="checkbox" name="agree" id="agree" value="1" checked><i> I hereby request authorization to use equipment as specified above. I agree that the equipment is my full responsibility until returned, and that I will provide reasonable care and security.</i>
                                                        <?php } ?>
                                                    <?php } else { ?>
                                                        <input type="checkbox" name="agree" id="agree" value="1" onchange="open_submit_button(this)"><i> I hereby request authorization to use equipment as specified above. I agree that the equipment is my full responsibility until returned, and that I will provide reasonable care and security.</i>
                                                    <?php } ?> -->
                                                </div>
                                            </div>

                                            <div class="form-row">
                                                <div class="col-12" style="padding-top: 2rem;">
                                                    <div class="float-left <?php echo ($ID)?'d-none':''; ?>">
                                                        <table>
                                                            <tbody>
                                                                <tr>
                                                                    <td class="text-center">
                                                                        <label class="switch" data-trigger="hover" data-tooltip="tooltip" title="" data-original-title="Send me a copy of this form">
                                                                            <input type="checkbox" name="send_email_checkbox">
                                                                            <span class="slider round"></span>
                                                                        </label>
                                                                    </td>
                                                                    <td class="p-3 py-1"><b><h6 style="">Send me a copy of this form</h6></b></td>
                                                                </tr>
                                                            </tbody>
                                                        </table>
                                                    </div>
                                                    <div class="float-right">
                                                        <a class="btn btn-light" href="<?php echo base_url('hr/serviceform/it_equipment_list/'); ?>">Cancel</a>
                                                        <button id="sbmtbtn" type="Submit" class="btn btn-primary text-right" disabled>Submit</button>
                                                    </div>
                                                </div>
                                            </div>
                                        <?php } ?>
                                    </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 type="text/javascript">
	function open_submit_button(elem) 
	{
		let checked = $(elem).val();
        if(document.getElementById("agree").checked)
		{
			$('#sbmtbtn').removeAttr('disabled');
			$('#sbmtbtn').removeAttr('style');
		}else {
            $('#sbmtbtn').attr('disabled','disabled');
            $('#sbmtbtn').css("cursor","not-allowed");
		}
	}

    $(document).ready(function(){
    	$('#table_equipment').DataTable().destroy();
    	$('#table_equipment_print').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];
                console.log(hover_item);
                var title = JSON.stringify(data.title);
                var checkin = moment(hover_item.check_in).format('DD-MM-YYYY');
                var checkout = moment(hover_item.check_out).format('DD-MM-YYYY');

                // if(hover_item.room_id == 7)
                // {
                //     var room = hover_item.other_room;
                // }else {
                //     var room = hover_item.room;
                // }

                // console.log(hover_item.room_id);

                tooltip = '<div class="tooltipevent"> Requester : '+hover_item.borrower_name+'['+hover_item.staff_id+']'+'<br/> Email : '+hover_item.email+'<br/> hardware : '+hover_item.hardware+'<br/> Software : '+hover_item.software+'<br/> Check-in Date : '+checkin+'<br/> Check-out Date : '+checkout+'<br/>Department : '+hover_item.dept_name+'/'+hover_item.branchName+'</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>