<div 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; height: 64.49rem;">
                <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>
                                <?php //debug($type) ?>
                            </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">Hotel Request Summary</h5>
                </div>
                <div class="card-body">
                    <div class="row">
                        <div class="col-12">
                            <a class="btn btn-block btn-dark add-shadow" href="<?php echo base_url('hr/serviceform/hotel_form'); ?>" style="padding-top: 1rem; padding-bottom: 1rem;">New Request</a>
                        </div>
                    </div>
                    <br>
                    <div class="card bg-white no-shadow">
                        <div class="card-body">
                            <h6>Total Hotel Request (<?php echo date('Y') ?>)</h6>
                            <br>
                            <div class="row">
                                <table id="table_hotel" class="table table-bordered table-striped table-hover mx-1">
                                    <thead>
                                        <th class="text-center">Department</th>
                                        <th class="text-center">Total Request</th>
                                    </thead>
                                    <tbody>
                                        <?php if(!empty($count_request)) foreach($count_request as $key => $count){ ?>
                                            <tr>
                                                <td><?php echo $count['dept_name'].'/'.$count['branchName']; ?></td>
                                                <td class="text-center"><?php echo $count['total_request']; ?></td>
                                            </tr>
                                        <?php } ?>
                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

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

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

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

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

        <div class="collapse" id="collapseFilter">
            <div class="card-header">
               <div class="row">
                    <div class="col">
                        <div class="card no-shadow">
                            <div class="card-body">
                               <input type="hidden" name="user_id" id="user_id" value="<?php echo $_SESSION['user']['id']; ?>">
                               <?php if($_SESSION['module_data']['role'] == 'admin'){ ?>  
                                <div class="form-group row">
                                    <label for="sv_hotel_filter_dept" class="col-lg-3">
                                        Department
                                    </label>                           
                                    <div class="col-lg-4">
                                        <select class="custom-select" name="sv_hotel_filter_dept" id="sv_hotel_filter_dept">
                                         <option value="-1">[All]</option>
                                         <?php if($department) foreach($department as $row){ ?>
                                            <option value="<?php echo $row['id']; ?>"><?php echo $row['name'].' ['.$row['branch_name'].']'; ?></option> 
                                        <?php } ?>
                                        </select>
                                    </div>
                                </div>
                                <?php } ?>
                                <div class="form-group row">
                                    <label for="sv_hotel_filter_status" class="col-lg-3">
                                        Status
                                    </label>                           
                                    <div class="col-lg-4" >
                                        <select class="custom-select" id="sv_hotel_filter_status" name="sv_hotel_filter_status">
                                            <option value="-1">[All]</option>
                                            <option value="Pending">Pending</option>
                                            <option value="Verified">Verified</option>
                                            <option value="Approved">Approved</option>
                                            <option value="Rejected">Rejected</option>
                                            <option value="Cancel">Cancel</option>
                                        </select>
                                    </div>
                                </div>
                                <div class="form-group row">
                                    <label for="sv_hotel_filter_year" class="col-lg-3">
                                        Year
                                    </label>                           
                                    <div class="col-lg-4" >
                                      <input type="text" name="sv_hotel_filter_year" id="sv_hotel_filter_year" class="form-control datepicker-yyyy">
                                    </div>
                                </div>
                                <div class="form-group row">
                                    <label for="sv_hotel_filter_month" class="col-lg-3">
                                      Month
                                    </label>                           
                                    <div class="col-lg-4" >
                                        <input type="text" name="sv_hotel_filter_month" id="sv_hotel_filter_month" class="form-control datepicker-mm">
                                    </div>
                                </div>
                                <div class="form-group row">
                                    <label for="sv_hotel_filter_check_in" class="col-lg-3">
                                        Check In Date
                                    </label>                           
                                    <div class="col-lg-4" >
                                        <input type="text" name="sv_hotel_filter_check_in" id="sv_hotel_filter_check_in" class="form-control datepicker">
                                    </div>
                                </div>
                                <div class="form-group row">
                                    <label for="sv_hotel_filter_check_out" class="col-lg-3">
                                        Check Out Date
                                    </label>                           
                                    <div class="col-lg-4" >
                                        <input type="text" name="sv_hotel_filter_check_out" id="sv_hotel_filter_check_out" class="form-control datepicker">
                                    </div>
                                </div>
                                <div class="row">
                                    <div class="col d-print-none">
                                        <button class="btn btn-info" id="searchBtn">Search</button>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div> 

        <div class="tab-content">
            <div class="tab-pane fade active show" id="tableView" role="tabpanel" aria-labelledby="nav-table-tab">
                <div class="card-body">
                    <div class="card no-shadow">
                        <div class="card-body">
                            <div class="table-responsive">
                                <table id="filter_table_hotel" class="table table-bordered p-0 m-0" width="100%">
                                    <thead> 
                                        <th class="sorting text-center" tabindex="0" rowspan="1" colspan="1" aria-label="#: activate to sort column ascending" style="width: 0px;">
                                            #
                                        </th>
                                        <th class="sorting text-center" tabindex="0" rowspan="1" colspan="1" style="width: 0px;">
                                            Requestor
                                        </th>
                                        <th class="sorting text-center" tabindex="0" rowspan="1" colspan="1" style="width: 0px;">
                                            Hotel Name
                                        </th>
                                        <th class="sorting text-center" tabindex="0" rowspan="1" colspan="1" style="width: 0px;">
                                            Location 
                                        </th>
                                        <th class="sorting text-center" tabindex="0" rowspan="1" colspan="1" style="width: 0px;">
                                            Type of room
                                        </th>
                                        <th class="sorting text-center" tabindex="0" rowspan="1" colspan="1" style="width: 0px;">
                                            Phone Number
                                        </th>
                                        <th class="sorting text-center" tabindex="0" rowspan="1" colspan="1" style="width: 0px;">
                                            Check In Date and Time
                                        </th>
                                        <th class="sorting text-center" tabindex="0" rowspan="1" colspan="1" style="width: 0px;">
                                            Check Out Date and Time
                                        </th>
                                        <th class="sorting text-center" tabindex="0" rowspan="1" colspan="1" style="width: 0px;">
                                            No. of Room
                                        </th>
                                        <th class="sorting text-center" tabindex="0" rowspan="1" colspan="1" style="width: 0px;">
                                            No. of Pax
                                        </th>
                                        <th class="sorting text-center" tabindex="0" rowspan="1" colspan="1" style="width: 0px;">
                                            Status
                                        </th>
                                        <th class="sorting text-center" tabindex="0" rowspan="" colspan="1" style="width: 0px;">
                                            Action
                                        </th>           
                                    </thead>
                                    <tbody>
                                        <?php if(!empty($rsHotelList)) { ?> 
                                            <?php foreach($rsHotelList as $key => $row) {
                                                ?>
                                                <tr>
                                                    <td class="text-center"><?php echo $key+1; ?></td>
                                                    <td><?php echo $row['requestor'].' ['.$row['requestor_email'].']' ?></td>
                                                    <td><?php echo $row['hotel_name']; ?></td>
                                                    <td><?php echo $row['location']; ?></td>
                                                    <td><?php echo $row['room_type']; ?></td>
                                                    <td><?php echo $row['phoneNo']; ?></td>
                                                    <td class="text-center"><?php echo date ('d-m-Y', strtotime($row['checkin_date'])) . ' / ' . $row['checkin_time']; ?></td>
                                                    <td class="text-center"><?php echo date ('d-m-Y', strtotime($row['checkout_date'])) . ' / ' . $row['checkout_time']; ?></td>
                                                    <td class="text-center"><?php echo $row['room_no']; ?></td>
                                                    <td class="text-center"><?php echo $row['no_pax']; ?></td>
                                                    <td class="text-center"><?php echo ($row['status_app']==null || $row['status_app']=='Pending' )?'Pending <i class="fa fa-exclamation-circle" style="color: #FFC107;"></i>':$row['status_app']; ?> </td>
                                                    <td class="text-center"> 
                                                        <div class="btn-group btn-group-sm" role="group">
                                                            <button type="button" class="btn btn-outline-dark" data-toggle="modal" data-target="#viewDetails" data-trigger="hover" data-tooltip="tooltip" 
                                                            title="View Detail" 
                                                            data-name="<?php echo $row['requestor']; ?>" 
                                                            data-dept="<?php echo $row['dept_name'].'/'.$row['branchName']; ?>" 
                                                            data-datereq="<?php echo date('d-m-Y',strtotime($row['createdTS'])); ?>" 
                                                            data-phone="<?php echo $row['phoneNo']; ?>" 
                                                            data-ic="<?php echo $row['ic']; ?>" 
                                                            data-hotel_name="<?php echo $row['hotel_name']; ?>" 
                                                            data-location="<?php echo $row['location']; ?>" 
                                                            data-type_room="<?php echo $row['room_type']; ?>" 
                                                            data-no_room="<?php echo $row['room_no']; ?>" 
                                                            data-pax="<?php echo $row['no_pax']; ?>" 
                                                            data-checkin_date="<?php echo date('d-m-Y',strtotime($row['checkin_date'])); ?>" 
                                                            data-checkin_time="<?php echo $row['checkin_time']; ?>" 
                                                            data-checkout_date="<?php echo date('d-m-Y',strtotime($row['checkout_date'])); ?>" 
                                                            data-checkout_time="<?php echo $row['checkout_time']; ?>" 
                                                            onclick="open_view_modal(this)">
                                                            <i class="far fa-eye"></i></button>
                                                            <button type="button" class="btn btn-outline-dark" onclick="" data-trigger="hover" data-tooltip="tooltip" title="Edit" data-row="<?php echo $row['ID']; ?>"><a href="<?php echo base_url('hr/serviceform/hotel_form/'.$row['ID']); ?>" class="btn-outline-dark"><i class="far fa-edit"></i></button></a>

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

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

<!-- modal view detail -->

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

            <div class="modal-body">
                <div class="row">
                    <div class="col-4">
                        <label>Name</label>
                        <input type="text" class="form-control" name="modal_view_name" id="modal_view_name" disabled>
                    </div>
                    <div class="col-4">
                        <label>Department</label>
                        <input type="text" class="form-control" name="modal_view_dept" id="modal_view_dept" disabled>
                    </div>
                    <div class="col-4">
                        <label>Date Request</label>
                        <input type="text" class="form-control" name="modal_view_date_req" id="modal_view_date_req" disabled>
                    </div>
                </div>
                <div class="row">
                    <div class="col-6">
                        <label>Phone No.</label>
                        <input type="text" class="form-control" name="modal_view_phone" id="modal_view_phone" disabled>
                    </div>
                    <div class="col-6">
                        <label>IC/ Passport No.</label>
                        <input type="text" class="form-control" name="modal_view_ic" id="modal_view_ic" disabled>
                    </div>

                </div>

                <div class="row">
                    <div class="col-6">
                        <label>Hotel Name</label>
                        <input type="text" class="form-control" name="modal_view_hotelname" id="modal_view_hotelname" disabled>
                    </div>
                    <div class="col-6">
                        <label>Location</label>
                        <input type="text" class="form-control" name="modal_view_location" id="modal_view_location" disabled>
                    </div>
                </div>
                <div class="row">
                    <div class="col-4">
                        <label>Type of Room</label>
                        <input type="text" class="form-control" name="modal_view_typeroom" id="modal_view_typeroom" disabled>
                    </div>
                    <div class="col-4">
                        <label>No. of Room</label>
                        <input type="text" class="form-control" name="modal_view_noroom" id="modal_view_noroom" disabled>
                    </div>
                    <div class="col-4">
                        <label>No. of Pax</label>
                        <input type="text" class="form-control" name="modal_view_pax" id="modal_view_pax" disabled>
                    </div>
                </div>
                <div class="row">
                    <div class="col-6">
                        <label>Check In Date</label>
                        <input type="text" class="form-control" name="modal_view_checkindate" id="modal_view_checkindate" disabled>
                    </div>
                    <div class="col-6">
                        <label>Check In Time</label>
                        <input type="text" class="form-control" name="modal_view_checkintime" id="modal_view_checkintime" disabled>
                    </div>
                </div>

                <div class="row">
                    <div class="col-6">
                        <label>Check Out Date</label>
                        <input type="text" class="form-control" name="modal_view_checkoutdate" id="modal_view_checkoutdate" disabled>
                    </div>
                    <div class="col-6">
                        <label>Check Out Time</label>
                        <input type="text" class="form-control" name="modal_view_checkouttime" id="modal_view_checkouttime" disabled>
                    </div>
                </div>
                <br>
                <div class="float-right"></div>
            </div>
        </div>
    </div>
</div>

<!-- modal view detail -->

<style type="text/css">
    .tooltipevent
    {
        width:auto;
        height:auto;
        background:rgba(0,0,0,0.75);
        position:absolute;
        color: #fff;
        z-index:10001;
        padding:10px 10px 10px 10px ;  
        line-height: 200%;
    }
</style>

<script>
    function deleteHotel(ID) {
        validateForm("#deleteButtonHotel", "Delete this list?", function() {
            $.ajax({
                url:'<?php echo base_url('hr/serviceform/deleteHotelList') ?>',
                data: {
                    hotelID : ID,
                },
                type: 'post',
                dataType: 'json',
                success: (data) => {
                    if(data.status == "Success") {

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

                        location.reload();

                    // redirect(base_url('hr/serviceform/hotel_list'));
                }
            }
        });
        });
    }

    function open_view_modal(elem) 
    {
        let name            = $(elem).data('name');
        let dept            = $(elem).data('dept');
        let datereq         = $(elem).data('datereq');
        let phone           = $(elem).data('phone');
        let ic              = $(elem).data('ic');
        let hotel_name      = $(elem).data('hotel_name');
        let location        = $(elem).data('location');
        let type_room       = $(elem).data('type_room');
        let no_room         = $(elem).data('no_room');
        let pax             = $(elem).data('pax');
        let checkin_date    = $(elem).data('checkin_date');
        let checkin_time    = $(elem).data('checkin_time');
        let checkout_date   = $(elem).data('checkout_date');
        let checkout_time   = $(elem).data('checkout_time');
        // console.log(dept);
        
        /* view modal */
        $('#modal_view_name').val(name);
        $('#modal_view_dept').val(dept);
        $('#modal_view_date_req').val(datereq);
        $('#modal_view_phone').val(phone);
        $('#modal_view_ic').val(ic);
        $('#modal_view_hotelname').val(hotel_name);
        $('#modal_view_location').val(location);
        $('#modal_view_typeroom').val(type_room);
        $('#modal_view_noroom').val(no_room);
        $('#modal_view_pax').val(pax);
        $('#modal_view_checkindate').val(checkin_date);
        $('#modal_view_checkintime').val(checkin_time);
        $('#modal_view_checkoutdate').val(checkout_date);
        $('#modal_view_checkouttime').val(checkout_time);
    }

    $(document).ready(function(){

        //getData();

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

    });

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

        frmData.append('sv_hotel_filter_dept',$('#sv_hotel_filter_dept').val());
        frmData.append('sv_hotel_filter_status',$('#sv_hotel_filter_status').val());
        frmData.append('sv_hotel_filter_year',$('#sv_hotel_filter_year').val());
        // frmData.append('sv_hotel_filter_month',$('#sv_hotel_filter_month').val());
        frmData.append('sv_hotel_filter_check_in',$('#sv_hotel_filter_check_in').val());
        frmData.append('sv_hotel_filter_check_out',$('#sv_hotel_filter_check_out').val());
        frmData.append('user_id',$('#user_id').val());

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

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

                let hotel = data.table;

                if(hotel != null){
                    $.each(hotel,function(key,content)
                    {
                        var i = key + 1;
                        if(content.checkin_date != '0000-00-00'){
                            var checkin_date = moment(content.checkin_date).format('DD-MM-YYYY');;
                        }
                        if(content.checkout_date != '0000-00-00'){
                            var checkout_date = moment(content.checkout_date).format('DD-MM-YYYY');;
                        }                                                                    

                        var btn_view = '<button type="button" class="btn btn-outline-dark" data-toggle="modal" data-target="#viewDetails" data-trigger="hover" data-tooltip="tooltip" title="View Detail" data-name="'+content.requestor+'" data-dept="'+content.dept_name+'/'+content.branchName+'" data-datereq="'+moment(content.createdTS).format('DD-MM-YYYY')+'" data-phone="'+content.phoneNo+'" data-ic="'+content.ic+'" data-hotel_name="'+content.hotel_name+'" data-location="'+content.location+'" data-type_room="'+content.room_type+'" data-no_room="'+content.room_no+'" data-pax="'+content.no_pax+'" data-checkin_date="'+checkin_date+'" data-checkin_time="'+content.checkin_time+'" data-checkout_date="'+checkout_date+'" data-checkout_time="'+content.checkout_time+'" onclick="open_view_modal(this)"> <i class="far fa-eye"></i> </button>';

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

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

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

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

                     table.row.add({
                        0   : i,
                        1   : content.requestor+' ['+content.requestor_email+']',
                        2   : content.hotel_name,
                        3   : content.location,
                        4   : content.room_type,
                        5	: content.phoneNo,
                        6   : '<div class="text-center">'+checkin_date+' / '+content.checkin_time+'</div>',
                        7   : '<div class="text-center">'+checkout_date+' / '+content.checkout_time+'</div>',
                        8   : '<div class="text-center">'+content.room_no+'</div>',
                        9   : '<div class="text-center">'+content.no_pax+'</div>',
                        10  : '<div class="text-center">'+status+'</div>',
                        11	: '<div class="btn-group btn-group-sm" role="group">'+btn_view+btn_edit+btn_print+btn_delete+'</div>',
                    }).draw();
                     console.log(data);

                 });                        
                }

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

$(document).ready(function(){

    $('#table_hotel').DataTable().destroy();

    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 checkin = moment(hover_item.checkin_date).format('DD-MM-YYYY');
            var checkout = moment(hover_item.checkout_date).format('DD-MM-YYYY');


            tooltip = '<div class="tooltipevent"> Requester : '+hover_item.requestor+' ['+hover_item.staff_id+']'+'<br/> Hotel name : '+hover_item.hotel_name+'<br/> Location : '+hover_item.location+'<br/> Check-in Date : '+checkin+'<br/> Check-out Date : '+checkout+'<br/>Department : '+hover_item.dept_name+'/'+hover_item.branchName+'</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>