<style>
    .fc-event
    {
        background-color:#fff;
        border:1px solid #fff;
    }

</style>
<section class="" style="padding-bottom: 1rem;">
    <div class="card bg-light-transparent mx-2">
        <div class="card-header bg-light">
            <h5 class="card-title">Meeting Room Booking calendar</h5>           
            <a href="<?php echo base_url('hr/serviceform/onlineForm/meeting_form') ?>" target="_blank" data-tooltip="tooltip" title="Add New" class="btn btn-outline-dark btn-sm" title="List"><i class="fa fa-plus"></i> Add New Booking</a>
            <a href="<?php echo base_url('hr/serviceform/onlineForm/meeting_list') ?>" target="_blank" data-tooltip="tooltip" title="Listing" class="btn btn-outline-dark btn-sm" title="List"><i class="fa fa-list"></i> Meeting Room Booking List</a>
        </div>
        <div class="card-body">
            <div class="card no-shadow"> 
                <div class="card-body">
                    <h3>Colour Info</h3>
                    <div class="container">
                        <div class="row">
                            <?php foreach ($room_type as $key => $row): ?>
                                <div class="col mb-1">
                                    <div class="col text-center text-white">
                                        <div style="background-color:<?php echo '#'.$row['color_code']; ?>;min-width:10px;min-height:10px;border-radius:25px;font-weight:600;">
                                            <?php echo $row['room'];?>
                                        </div>
                                    </div>
                                </div>
                            <?php endforeach; ?>
                        </div>
                    </div><hr>
                    <div class="card">
                        <div class="card-body">
                            <div class="row">
                                <div class="col-12">
                                    <div class="fc-overflow">
                                        <div id="calendar"></div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>

<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));
                // console.log(js_res);
                var hover_item = js_res[data.id];
                var title = JSON.stringify(data.title);
                var start = moment(hover_item.start_date).format('DD-MM-YYYY');
                var end = moment(hover_item.end_date).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.name+'['+hover_item.staff_id+']'+'<br/> Email : '+hover_item.email+'<br/> Room : '+room+'<br/> Start Date : '+start+'<br/> End Date : '+end+'<br/>Start Time : '+hover_item.start_time+'<br/>End Time : '+hover_item.end_time+'<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>