{{ 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-Attendance</h2>
                        <div class="breadcrumb-wrapper">
                            <ol class="breadcrumb">
                                @if ($pType == 'hr')
                                    <li class="breadcrumb-item">HR
                                    </li>
                                    <li class="breadcrumb-item active"><a href="#">Duty Roster</a>
                                    </li>
                                @elseif($pType == 'emp')
                                    <li class="breadcrumb-item">Employee
                                    </li>
                                    <li class="breadcrumb-item active"><a href="#">Duty Roster</a>
                                    </li>
                                @elseif($pType == 'approval')
                                    <li class="breadcrumb-item">Approval
                                    </li>
                                    <li class="breadcrumb-item active"><a href="#">Dashboard</a>
                                    </li>
                                @endif
                            </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
                                                    <input type="hidden" name="pType" value="{{ $pType }}">
                                                    <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 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>
                                                        &nbsp;
                                                        <select onchange="ajaxsearch()" class="form-control"
                                                            id="select-schedule" name="schedule"
                                                            style="border-width: 0 1px 0 0px; border-radius:0px;">
                                                            <option value="">Schedule</option>
                                                            @foreach ($schedules as $schedule)
                                                                <option value="{{ $schedule->id }}">
                                                                    {{ $schedule->name }}</option>
                                                            @endforeach
                                                        </select>
                                                        &nbsp;
                                                        <select onchange="ajaxsearch()" class="form-control"
                                                            id="select-type" name="type"
                                                            style="border-width: 0 1px 0 0px; border-radius:0px;">
                                                            <option value="">Select Type</option>
                                                            <option value="rest">Rest Day</option>
                                                            <option value="ot">OT Request</option>
                                                            <option value="duty">Duty Roster</option>
                                                        </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() {
        console.log(null);
        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();
        console.log($("#all-filter").serialize());
        $.ajax({
            type: 'POST',
            url: '{{ route('approvalFilter') }}',
            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>