{{View::make('layout.header')}}
    <style>
.fc-right .fc-state-active {
    
    z-index: 1 !important;
}
.fc-month-button, .fc-agendaWeek-button{
border-top-right-radius: 0 !important;
    border-bottom-right-radius: 0 !important;
    }
    .fc-agendaWeek-button, .fc-agendaDay-button{
        border-top-left-radius: 0 !important;
    border-bottom-left-radius: 0 !important;

    }
.fc-icon-left-single-arrow:after, .fc-icon-right-single-arrow:after {
    top:-30% !important;
}
.fc-icon-left-single-arrow:after{
    font-size: 135% !important;
    font-weight: inherit !important;
    content: "\e900" !important;
}
.fc-icon-right-single-arrow:after {
    font-size: 135% !important;
    font-weight: inherit !important;
    content: "\e901" !important;
}
.fc-state-default {
    box-shadow: none !important;
}
.fc-content .fc-title{
    color:#fff;
    font-size:11px;
       white-space: break-spaces !important;
}
.fc-right .fc-button{
    padding: 0.438rem 0.5rem !important;
    
    height: 100%;
}
.fc-right .fc-button-group{
    width: 60% !important;
    float: right !important;
}
/*.fc-list-item{*/
/*    opacity: 0.5 !important;*/
/*    color:#fff;*/
/*}*/
/*.fc-list-item:hover{*/
/*    opacity: 1.0 !important;*/
/*}*/
@media only screen and (min-width: 768px) {
.fc-left, .fc-right{
    width:50% !important;
}
.app-calendar .fc-popover { left:50% !important;  top : 30% !important;}
}
@media only screen and (max-width: 768px) {
.fc-left, .fc-right{
    width:100% !important;
}
.app-calendar .fc-popover { left:20% !important;  top : 40% !important;}
}

</style>
    <!-- BEGIN: Content-->
    <div class="app-content content ">
        <div class="content-overlay"></div>
        <div class="header-navbar-shadow"></div>
        <div class="content-wrapper">
            <div class="content-header row">
                <div class="content-header-left col-md-9 col-12 mb-2">
                    <div class="row breadcrumbs-top">
                        <div class="col-12">
                            <h2 class="content-header-title float-left mb-0">E-Leave</h2>
                            <div class="breadcrumb-wrapper">
                                <ol class="breadcrumb">
                                    <li class="breadcrumb-item">Employee
                                    </li>
                                    <li class="breadcrumb-item active"><a href="#">Duty Roster</a>
                                    </li>
                                </ol>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="content-body">
                <!-- Full calendar start -->
                <!-- Full calendar start -->
                <section>
                    <div class="app-calendar overflow-hidden border">
                        <div class="row no-gutters">
                            <div class="col position-relative">
                                <div class="card shadow-none border-0 mb-0 rounded-0">
                                <div class="row no-gutters">
                             

                            <div class="col position-relative">
                                <div class="card shadow-none border-0 mb-0 rounded-0">
                                <div class="d-sm-flex justify-content-between align-items-center">
                                        <form id="all-filter">
                                            @csrf
                                            <div class="d-flex align-items-center"  style="padding-left: 20px;padding-top: 10px;">
                                            <input type="hidden" name="year" id="year" class="form-control"  value="{{ date('Y') }}" placeholder="">
                                               
                                                <input type="text" name="name" id="name" class="form-control"  style="border-width: 0 1px 0 0px; border-radius:0px; padding-left: 10px;" value="" placeholder="Employee">
                                                &nbsp;
                                                <select name="type" class=" form-control" style="padding-left: 10px; border-width: 0 1px 0 0px; border-radius:0px;" id="type-selection" onchange="ajaxsearch()">
                                                    <option value="">All Leave Types</option>
                                                    @foreach($leaveTypes as $type)
                                                        <option value="{{ $type->type }}" {{request()->get('type') && request()->get('type') == $type->type ? 'selected' : '' }}>{{ $type->name }}</option>
                                                    @endforeach    
                                                </select>
                                                &nbsp;
                                                <select class="form-control" id="select-branch" name="branch" style="border-width: 0 1px 0 0px; border-radius:0px;" onchange="ajaxsearch()">
                                                    <option value="">Branch</option>
                                                    @foreach($branches as $branch)
                                                        <option value="{{ $branch->id }}">{{ $branch->name }}</option>
                                                    @endforeach
                                                </select>
                                                &nbsp;
                                                <select class="form-control" id="select-department" name="department" style="border-width: 0 1px 0 0px; border-radius:0px;" onchange="ajaxsearch()">
                                                    <option value="">Department</option>
                                                    @foreach($departments as $department)
                                                        <option value="{{ $department->id }}">{{ $department->name }}</option>
                                                    @endforeach
                                                </select>
                                                &nbsp;&nbsp;
                                                <select class="form-control" id="select-category" name="category" style="border-width: 0 1px 0 0px; border-radius:0px;" onchange="ajaxsearch()">
                                                    <option value="">Category</option>
                                                    @foreach($categories as $category)
                                                        <option value="{{ $category->id }}">{{ $category->name }}</option>
                                                    @endforeach
                                                </select>
                                            </div>
                                        </form>
                                    </div>
                                    <div class="card-body pb-0">
                                    @include('E-Leave.inc.calender-filter')
                                    </div>
                                </div>
                            </div>
                                    <!--<div class="card-body pb-0 calender-filter" >
                                   
                                    </div>-->
</div>
                                </div>
                            </div>
                            <!-- /Calendar -->
                            <div class="body-content-overlay"></div>
                        </div>
                    </div>
                </section>
                <!-- Full calendar end -->
            </div>
        </div>
    </div>
    

    {{View::make('layout.footer')}}
    <style>
    /* .fc .fc-button-group{
        display:none;
    } */
    </style>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.9.0/fullcalendar.css" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.24.0/moment.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.9.0/fullcalendar.js"></script>
    
    <script>
       var calender ;
      $(document).ready(function() {
            calender = $('#calendar').fullCalendar({
                initialView: 'dayGridMonth',
                initialView: 'listMonth',
                dragScroll: true,
                left:   'title',
            dayMaxEvents: 2,
            eventResizableFromStart: true,
            customButtons: {
            sidebarToggle: {
                text: 'Sidebar'
            }
            },
            header: {
            left: 'prev,next, title',
            right: 'month,agendaWeek,agendaDay,listMonth'
        },
            initialDate: new Date(),
            navLinks: true,
            eventClassNames: function ({ event: calendarEvent }) {
     
    },
    dateClick: function (info) {
      var date = moment(info.date).format('YYYY-MM-DD');
      resetValues();
      sidebar.modal('show');
      addEventBtn.removeClass('d-none');
      updateEventBtn.addClass('d-none');
      btnDeleteEvent.addClass('d-none');
      startDate.val(date);
      endDate.val(date);
    },
    eventClick: function (info) {
      eventClick(info);
    },
    datesSet: function () {
      modifyToggler();
    },
    viewDidMount: function () {
      modifyToggler();
    },
  
                eventLimit: true,
                events: null,
           
                eventRender: function (event, element) {
                    element.css("background", event.color);
                    element.css("color", event.text_color);
                    element.css("font-size", '12PX');

                },
            });
      
        });

    $(document).on('keyup blur', '#name', function(){
        ajaxsearch();
    });

  

    function ajaxsearch(){
        $("#overlay").show();
        $.ajax({
            type:'get',
            url:'{{ route('calender.filter14')}}',
            data:$("#all-filter").serialize(),
            success:function(data) {
                
                  $('#calendar').fullCalendar('removeEvents');
                  $('#calendar').fullCalendar('addEventSource',data);
            
                data.map(function(item) {
                    $('#calendar').fullCalendar('addEventSource',item);
	
                });
            }
        });
    }

  
$('body').on('click', 'button.fc-prev-button', function() {
    var moment = $('#calendar').fullCalendar('getDate');
   // alert(moment._d.getFullYear());
    $("#year").val(moment._d.getFullYear());
    ajaxsearch();
   
});
$('body').on('click', 'button.fc-next-button', function() {
    var moment = $('#calendar').fullCalendar('getDate');
   // alert(moment._d.getFullYear());
    $("#year").val(moment._d.getFullYear());
    ajaxsearch();
   
});
    </script>
     <script src="{{asset('app-assets/js/scripts/pages/app-calendar.js')}}"></script>