<link href='<?php echo THEME_PATH; ?>plugins/fullcalendar-4.2.0/packages/core/main.css' rel='stylesheet' />
<link href='<?php echo THEME_PATH; ?>plugins/fullcalendar-4.2.0/packages/daygrid/main.css' rel='stylesheet' />
<link href='<?php echo THEME_PATH; ?>plugins/fullcalendar-4.2.0/packages/timegrid/main.css' rel='stylesheet' />
<link href='<?php echo THEME_PATH; ?>plugins/fullcalendar-4.2.0/packages/list/main.css' rel='stylesheet' />
<script src='<?php echo THEME_PATH; ?>plugins/fullcalendar-4.2.0/packages/core/main.js'></script>
<script src='<?php echo THEME_PATH; ?>plugins/fullcalendar-4.2.0/packages/interaction/main.js'></script>
<script src='<?php echo THEME_PATH; ?>plugins/fullcalendar-4.2.0/packages/daygrid/main.js'></script>
<script src='<?php echo THEME_PATH; ?>plugins/fullcalendar-4.2.0/packages/timegrid/main.js'></script>
<script src='<?php echo THEME_PATH; ?>plugins/fullcalendar-4.2.0/packages/list/main.js'></script>
<style>
    .fc-view,
    .fc-view > table {
        border: 0;
        overflow-x: scroll;
        width:100% !important;
    }
    .label{
        color:white;
    }
</style>
<div class="container-fluid container-fixed-lg bg-white">
    <div class="panel panel-transparent">
        <div class="panel-body">
            <form  target="_blank" action="crm/print_treatment_calendar" method="post" >
                <input type="hidden" id="current_calendar_type" name="current_calendar_type" value="<?php  echo $current_calendar_type;?>" />
                <div class="row form-group ">
                    <div class="col-md-2">
                        <label><?php echo CommonLanguage::getMessage('customer');?></label>
                        <input type="hidden" name="customer_id" id="customer_id"  class="full-width">
                    </div> 
                    <div class="col-md-2">
                        <label><?php echo CommonLanguage::getMessage('employee');?></label>
                        <input type="hidden" name="employee_id" id="employee_id"  class="full-width">
                    </div>
                    <div class="col-md-8 m-t-20">
                        <label class="label " style="background-color:#555555;color:white;"><?php  echo CommonLanguage::getMessage('pending');?></label>
                        <label class="label " style="background-color:#ed9421;color:white;"><?php  echo CommonLanguage::getMessage('under_process');?></label>
                        <label class="label " style="background-color:#8F00DC;color:white;"><?php  echo CommonLanguage::getMessage('finished');?></label>
                    </div>
                </div>
                <div class="row form-group">
                    
                </div>
            </form>
            <div class="row m-t-5">
                <div id="calendar1"></div>
            </div>
        </div>
        <?php echo Forms::ModalLoader('ticketing_calendar_loader'); ?>
    </div>
</div>
<script>
    var calendar = document.getElementById('calendar1');
    $(function(){
        build_select2($("#customer_id,#current_customer_id"), "xhr/customerSearch");
        build_select2($("#employee_id"), "xhr/searchEmployeeUsers");
        calendar = new FullCalendar.Calendar(calendar, {
            plugins: [ 'interaction', 'dayGrid', 'timeGrid', 'list' ],
            header: {
                left: 'prev,next today',
                center: 'title',
                right: 'dayGridMonth,timeGridWeek,timeGridDay,listMonth'
            },
            formatDate:'YYYY-mm-dd',
            selectHelper: true,
            editable:false,
            minTime: "06:00:00",
            maxTime: "24:00:00",
            droppable:false, 
            navLinks: true, // can click day/week names to navigate views
            businessHours: true, // display business hours
            eventLimit: false, // allow "more" link when too many events
            events: "TicketingAjax/get_ticketing_calendar?customer_id="+$("#customer_id").val()+'&assigned_user_id='+$('#employee_id').val(),
            eventResize: function (info) {
            },
            eventDrop: function (info) {
            },
            eventClick: function(info) {
            },
            viewRender: (function () {
                var lastViewName;
                return function (view) {
                    var view = $('#calendar1').fullCalendar('getView');
                    alert('The new title of the view is ' + view.title);
                }
            })()
        });
        calendar.render();
        $('#customer_id,#employee_id').on('change',function(){
            renderCalendarEvent();
        });
    });
    function renderCalendarEvent(){
        var eventSources = calendar.getEventSources(); 
        var len = eventSources.length;
        for (var i = 0; i < len; i++) { 
            eventSources[i].remove(); 
        } 
        calendar.addEventSource("TicketingAjax/get_ticketing_calendar?customer_id="+$("#customer_id").val()+'&assigned_user_id='+$('#employee_id').val());
    }
</script>