<link href="<?php echo SITE_LINK; ?>vendors/bower_components/animate.css/animate.min.css" rel="stylesheet">
<link href="<?php echo SITE_LINK; ?>vendors/bower_components/bootstrap-sweetalert/lib/sweet-alert.css" rel="stylesheet">
<link href="<?php echo SITE_LINK; ?>vendors/bower_components/material-design-iconic-font/dist/css/material-design-iconic-font.min.css" rel="stylesheet">
<link href="<?php echo SITE_LINK; ?>vendors/bower_components/fullcalendar/dist/fullcalendar.min.css" rel="stylesheet">
<link href="<?php echo SITE_LINK; ?>vendors/bower_components/malihu-custom-scrollbar-plugin/jquery.mCustomScrollbar.min.css" rel="stylesheet">
<script src="<?php echo SITE_LINK; ?>vendors/bower_components/malihu-custom-scrollbar-plugin/jquery.mCustomScrollbar.concat.min.js"></script>
<script src="<?php echo SITE_LINK; ?>vendors/bower_components/Waves/dist/waves.min.js"></script>
<script src="<?php echo SITE_LINK; ?>vendors/bootstrap-growl/bootstrap-growl.min.js"></script>
<script src="<?php echo SITE_LINK; ?>vendors/bower_components/bootstrap-sweetalert/lib/sweet-alert.min.js"></script>
<script src="<?php echo SITE_LINK; ?>vendors/bower_components/moment/min/moment.min.js"></script>
<script src="<?php echo SITE_LINK; ?>vendors/bower_components/fullcalendar/dist/fullcalendar.js"></script>
<style>

    .fc-view,
    .fc-view > table {
        border: 0;
        overflow-x: scroll;
    }
</style>
<div class="container-fluid container-fixed-lg bg-white">
    <div class="panel panel-transparent">
        <div class="panel-body">
        <div class="row">
            <div id="calendar1"></div>
        </div>
        </div>
    </div>
</div>
<script>
    var product_resources = <?php echo json_encode($product_resources);?>,scroll_value = 0;
    $(function(){
        build_calendar($('#calendar1'));
        $("#calendar1").on("click", ".fc-button-prev,.fc-button-next", function () {
            scroll_value = $(".fc-view").scrollLeft()
            $(".fc-view").scrollLeft(0)
        })
    });
    function build_calendar(calendar_id){
        calendar_id.fullCalendar({
            events: "InventoryAjax/getProductReservationDuration",
            displayEventTime: false,
            header: {
                left: 'prev,next today',
                center: 'title',
                right: 'month,basicWeek,resourceDay,agendaDay,basicDay'
            },
            buttonText: {
                resourceDay: 'By Product',
                agendaDay: 'agendaDay',
                basicDay: 'day'
            },
            defaultView: 'agenda',
            visibleRange: function (currentDate) {
                return {
                    start: currentDate.clone().subtract(1, 'days'),
                    end: currentDate.clone().add(3, 'days') // exclusive end, so 3
                };
            },
            minTime: "08:00:00",
            maxTime: "22:59:59",
            eventAfterRender: function (event, element, view) {
                var today = moment().format("YYYY-MM-DD HH:mm:ss");
                element.css('background-color', 'green');
            },
            eventRender: function(eventObj, $el) {
                //                $el.popover({
                //                    title: eventObj.title,
                //                    content: eventObj.description,
                //                    trigger: 'hover',
                //                    placement: 'top',
                //                    container: 'body'
                //                });
            },
            schedulerLicenseKey: 'CC-Attribution-NonCommercial-NoDerivatives',
            navLinks: true, // can click day/week names to navigate views
            editable: false,
            eventLimit: true, // allow "more" link when too many events
            droppable: false, // this allows things to be dropped onto the calendar
            eventLimit: true, // allow "more" link when too many events
            selectable: true,
            selectHelper: true,
            timeFormat: 'H:mm',
            'allDaySlot': false,
            eventTextColor: "#fff",
            defaultView: "resourceDay",
            resources: product_resources,
            eventClick: function (event, delta, revertFunc, jsEvent, ui, view) {
                //                $("a.add[data-id=" + event.id + "]").trigger('click');
                //                clickedEventOnCalendar = event.id;
            },
            eventResize: function (event, delta, revertFunc, jsEvent, ui, view) {
                //                updateCalendarDetails(event.id, event.start.format("YYYY-MM-DD HH:mm:ss"), event.end.format("YYYY-MM-DD HH:mm:ss"));
            },
            eventDrop: function (event, delta, revertFunc, jsEvent, ui, view) {
                //                updateCalendarDetails(event.id, event.start.format("YYYY-MM-DD HH:mm:ss"), event.end.format("YYYY-MM-DD HH:mm:ss"));
            },
            eventAfterAllRender: function (view) {
                $(".fc-view").scrollLeft(scroll_value)
                scroll_value = 0
            },
        });
        $(".fc-view").scrollLeft(scroll_value)
    }
</script>