{{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{
    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="#">All Leaves</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"  style="" value="{{ date('Y') }}" placeholder="">
                                           <input type="hidden" name="month" id="month" class="form-control"  style="" value="{{ date('m') }}" placeholder="">
                                           @php $hmonth1=date("n-Y", strtotime("-1 months"));
                                            $hmonth2=date('n-Y');
                                            $hmonth3=date("n-Y", strtotime("+1 months"));
                                            $hmonth =$hmonth2;
                                            @endphp
                                           <input type="hidden" name="hmonth" id="hmonth" class="form-control"  style="" value="{{ $hmonth }}" placeholder="">
                                           
                                            <input type="hidden" name="calenderview" id="calenderview" class="form-control"  style="" value="current" 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('isfilter')">
                                                    <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('isfilter')">
                                                    <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('isfilter')">
                                                    <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('isfilter')">
                                                    <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 calendar;

function refreshMonthData(monthOffset) {
    $("#overlay").show();
    var moment = $('#calendar').fullCalendar('getDate');
    var currentMonth = moment.month() + 1;
    var currentYear = moment.year();
    
    var targetMonth = currentMonth + monthOffset;
    var targetYear = currentYear;

    if (targetMonth > 12) {
        targetMonth = targetMonth % 12;
        targetYear++;
    } else if (targetMonth < 1) {
        targetMonth = 12 + targetMonth;
        targetYear--;
    }

    var targetMonths = [targetMonth];

    if ($("#calenderview").val() === 'next') {
        targetMonths.push(targetMonth + 1);
    }

    $("#calenderview").val('range');
    $("#month").val(targetMonths.join(','));
    $("#year").val(targetYear);

    $.ajax({
        type: 'POST',
        url: '{{ route('calender.filter')}}',
        data: $("#all-filter").serialize() + '&page=emp',
        success: function(data) {
            $('#calendar').fullCalendar('removeEvents');
            $('#calendar').fullCalendar('addEventSource', data);
            $("#overlay").hide();
        }
    });
}

function refreshPreviousMonthData() {
    refreshMonthData(-1);
}

function refreshCurrentMonthData() {
    refreshMonthData(0);
}

function refreshNextMonthData() {
    refreshMonthData(1);
}

$(document).ready(function() {
    console.log(null);
    calendar = $('#calendar').fullCalendar({
        initialView: 'dayGridMonth',
        dragScroll: true,
        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: [],
        eventRender: function(event, element) {
            element.css("background", event.color);
            element.css("color", event.text_color);
            element.css("font-size", '11px');
        },
    });

    // Initial data load
    refreshCurrentMonthData();
});

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

function ajaxsearch(filter) {
    $("#overlay").show();
    var moment = $('#calendar').fullCalendar('getDate');
    var currentMonth = moment.month() + 1; // Get current month (January is 0, so add 1)
    var currentYear = moment.year(); // Get current year
    var sname = $("#name").val().replace(" ", "%20");

    if (filter === 'isfilter') {
        $("#calenderview").val('current');
        $("#hmonth").val(currentMonth + '-' + currentYear);
    }
    var calenderview = $("#calenderview").val();
    // Serialize the form data
    let dataaa = $("#all-filter").serialize();

    // Split the serialized data to modify the month and year values
    let dataParts = dataaa.split('&');
    for (let i = 0; i < dataParts.length; i++) {
        if (dataParts[i].startsWith('month=')) {
            // Replace the month value
            dataParts[i] = 'month=' + currentMonth;
        } else if (dataParts[i].startsWith('year=')) {
            // Replace the year value
            dataParts[i] = 'year=' + currentYear;
        }
    }
    // Join the modified data parts back together
    let adjustedData = dataParts.join('&');

    $.ajax({
        type: 'POST',
        url: '{{ route('calender.filter')}}',
        data: adjustedData + '&page=emp',
        success: function (data) {
            console.log("Data received from server:", data); // Log the data received from the server
            // Remove existing events before adding new ones
            $('#calendar').fullCalendar('removeEvents');
            var dt = $("#all-filter").serialize();
            var dt1 = dt.split("&");
            var dt2 = dt1[5].split("=");
            if (sname === dt2[1]) {
                $('#calendar').fullCalendar('addEventSource', data);
            }
            $("#overlay").hide();
        },
        error: function(xhr, status, error) {
            console.error("Error occurred:", error); // Log any errors that occur during the AJAX request
        }
    });
}




// Event handler for "Previous" button
$('body').on('click', 'button.fc-prev-button', function() {
    var moment = $('#calendar').fullCalendar('getDate');
    var prevMonth = moment.clone().subtract(1, 'month');
    var prevMonthYear = prevMonth.year();
    var prevMonthNumber = prevMonth.month() + 1;
    var hmonth = $("#hmonth").val();
    var val = hmonth.split(",");
    $("#month").val(prevMonthNumber);
    $("#year").val(prevMonthYear);
    $("#calenderview").val('previous');
    var mn = (val.indexOf(prevMonthNumber + '-' + prevMonthYear) !== -1) ? hmonth : hmonth + ',' + prevMonthNumber + '-' + prevMonthYear;
    $("#hmonth").val(mn);
    ajaxsearch();
});

// Event handler for "Next" button
$('body').on('click', 'button.fc-next-button', function() {
    var moment = $('#calendar').fullCalendar('getDate');
    var nextMonth = moment.clone().add(1, 'month');
    var nextMonthYear = nextMonth.year();
    var nextMonthNumber = nextMonth.month() + 1;
    var hmonth = $("#hmonth").val();
    var val = hmonth.split(",");
    $("#month").val(nextMonthNumber);
    $("#year").val(nextMonthYear);
    $("#calenderview").val('next');
    var mn = (val.indexOf(nextMonthNumber + '-' + nextMonthYear) !== -1) ? hmonth : hmonth + ',' + nextMonthNumber + '-' + nextMonthYear;
    $("#hmonth").val(mn);
    ajaxsearch();
});

    </script>
     <script src="{{asset('app-assets/js/scripts/pages/app-calendar.js')}}"></script>