@extends('front.layouts.app')
@section('content')
<div class="campus-view event-classes-sec">
    <!--// START LEFT VIEW //-->
    <div class="campus-view-left">
        <div class="event-header">
            <ul class="nav nav-pills" id="pills-tab">
                <li class="nav-item" role="presentation">
                    <button type="button" class="nav-link" onclick="javascript:window.location.href='{!! route('events') !!}'">Events</button>
                </li>
                <li class="nav-item" role="presentation">
                    <button type="button" class="nav-link" onclick="javascript:window.location.href='{!! route('classes') !!}'">Classes</button>
                </li>
                <li class="nav-item" role="presentation">
                    <button type="button" class="nav-link active">Calendar</button>
                </li>
            </ul>
        </div>
        <form class="form events-classes-form d-block mt-4">
            <div class="row g-3 justify-content-center">
                <div class="col-xxl-3 col-xl-6 col-md-3 col-sm-6">
                <div class="search-icon-input">
                    <input type="search" class="form-control" name="kwd" value="{!! request()->get('kwd') !!}" placeholder="Type event or class title here" onsearch="javascript:$('.loader').show();this.form.submit()">
                </div>
                </div>
                <div class="col-xxl-3 col-xl-6 col-md-3 col-sm-6">
                    <select class="form-select" name="type" onchange="javascript:$('.loader').show();this.form.submit()">
                        <option selected value="">Type</option>
                        @foreach(classTypes() as $classType)
                        <option value="{!! $classType !!}" @if(request()->get('type') == $classType) selected @endif>{!! $classType !!}</option>
                        @endforeach
                    </select>
                </div>
            </div>
        </form>
        <!-- End Title Row -->
        <!-- Start Events & Classes Sec -->
        <div class="tab-content">
            <div class="tab-pane fade events-pane show active">
                <div id='calendar' class="event-calendar"></div>
            </div>
        </div>
    </div>
    <!--// END LEFT VIEW //-->


    <!--// START RIGHT VIEW //-->
    <div class="campus-view-right">
        @includeIf('front.includes.next-event')
    </div>
    <!--// END RIGHT VIEW //-->
</div>
@endsection

@section('js')
<link rel="stylesheet" href="{!! asset('assets/frontend/css/fullcalendar.css') !!}" />
<script src="{!! asset('assets/frontend/js/fullcalendar.js') !!}"></script>

<script>
$(document).ready(function () {

    $.ajaxSetup({
        headers: {
            'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
        }
    });
    var d = new Date(),
    m = d.getMonth(),
    y = d.getFullYear();
    var calendar = $('#calendar').fullCalendar({
        // header: { center: 'month,agendaWeek,agendaDay,basicDay,list' }, // buttons for switching between views
        height: 'auto',
        // defaultView: 'month',
        defaultView: $(window).width() < 765 ? 'listMonth':'month',
        // defaultView: $(window).width() < 765 ? 'basicDay':'month',
        showNonCurrentDates: false,
        views: {
            month: {
                eventLimit: 4
            }
        },
        timeFormat: 'h:mm a',
        eventLimit: true, // If you set a number it will hide the itens
        eventLimitText: "View All", // Default is `more` (or "more" in the lang you pick in the option)
        validRange: function() {
            return {
                start: moment().startOf('month').format('YYYY-MM-DD')
            };
        },
        events: function(start, end, timezone, callback) {
            $.ajax({
                headers: {
                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                },
                url : baseUrl + "calendar",
                type: 'POST',
                dataType: 'json',
                data: {
                    // our hypothetical feed requires UNIX timestamps
                    type : "{!! request()->get('type') !!}",
                    kwd : "{!! request()->get('kwd') !!}",
                    // start: start.unix(),
                    // end: end.unix()
                },
                success: function(response) {
                    var events = [];
                    if(response.length > 0) {
                        $.map( response, function( r ) {
                            // console.log(r);
                            events.push({
                                id: r.id,
                                title: r.title,
                                start: r.start,
                                end: r.end,
                                url: r.url,
                            });
                        });
                    }
                    callback(events);
                }
            });
        },
        eventRender: function(event, element) {
            // console.log(element);
            // console.log(event);
            let text = element.find('.fc-time').text();
            // Replace "am"/"pm" with "a.m." / "p.m."
            text = text.replace('am', 'a.m.').replace('pm', 'p.m.');
            element.find('.fc-time').text(text);
            element.attr('href',event.url);
            element.attr('target',"_target");
            // console.log(element);
            // element.find('.fc-title').append("<br/>" + event.description);
            // element.find('.fc-title').append("<br/>" + event.description);
            $(".fc-day-grid .fc-row").each(function() {
                if($(this).find('.fc-disabled-day').length == 7) {
                    $(this).remove();
                }
            });
            $(".fc-day-grid-container").css('height','auto');
        }
    });
});

setInterval(function () {
    $(".fc-day-grid-container").css('height','auto');
}, 1000);

</script>
@endsection