@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 active">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" onclick="javascript:window.location.href='{!! route('calendar') !!}'">Calendar</button>
                </li>
            </ul>
        </div>
        <form class="form events-classes-form d-block mt-4">
            <div class="row g-3">
                <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 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="show" onchange="javascript:$('.loader').show();this.form.submit()">
                        <option value="All" selected>All Recurring Events</option>
                        <option value="Upcoming" @if(request()->get('show') == "Upcoming") selected @endif>Upcoming Events</option>
                    </select>
                </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>
                        <option value="Online" @if(request()->get('type') == "Online") selected @endif>Online</option>
                        <option value="In Person" @if(request()->get('type') == "In Person") selected @endif>In Person</option>
                    </select>
                </div>
                <div class="col-xxl-3 col-xl-6 col-md-3 col-sm-6">
                    <select class="form-select" name="category_id" onchange="javascript:$('.loader').show();this.form.submit()">
                        <option selected value="">Category</option>
                        @if($categories->count())
                        @foreach($categories as $category)
                        <option value="{!! $category->id !!}" @if($category->id == request()->get('category_id')) selected @endif>{!! $category->name !!}</option>
                        @endforeach
                        @endif
                    </select>
                </div>
            </div>
        </form>
        <!-- End Title Row -->
        <!-- Start Events & Classes Sec -->
        <div class="tab-content">
            <div class="tab-pane fade events-pane show active">
                @if($events->total())
                <div class="row">
                    @foreach($events as $event)
                        {!! getEventBlock($event) !!}
                    @endforeach
                </div>
                <div class="pagination justify-content-center">
                    {!! $events->withQueryString()->links() !!}
                </div>
                @else
                <p class="" style="color:#fff">Oops! We can't find anything that matches your search. Please try again.</p>
                @endif
            </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