@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 active">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 Classes</option>
                        <option value="Upcoming" @if(request()->get('show') == "Upcoming") selected @endif>Upcoming Classes</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>
                        @foreach(classTypes() as $classType)
                        <option value="{!! $classType !!}" @if(request()->get('type') == $classType) selected @endif>{!! $classType !!}</option>
                        @endforeach
                    </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 classes-pane show active">
                @if($classes->total())
                <div class="row">
                    @foreach($classes as $class)
                    {!! getClassBlock($class) !!}
                    @endforeach
                </div>
                <div class="pagination justify-content-center">
                    {!! $classes->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>
        <!-- End Events & Classes Sec -->
    </div>
    <!--// END LEFT VIEW //-->

    <!--// START RIGHT VIEW //-->
    <div class="campus-view-right">
        @if($nextClass)
        <div class="timer-container">
            <div class="title-col">
                <h5>Next Class In</h5>
            </div>
            <div class="countdown countdown-row" id="timer" data-start_date_time="{!! $nextClass->start_date_time !!}">
                <div class="countdown-col" id="days"></div>
                <div class="countdown-col" id="hours"></div>
                <div class="countdown-col" id="minutes"></div>
                <div class="countdown-col" id="seconds"></div>
            </div>
        </div>
        <div class="nxt-event-classes-details">
            <div class="event-info">
                <i class="bi bi-calendar4-week"></i>
                {!! convertUtcToLocal($nextClass->start_date_time, config('constants.DISPLAY_DATE_FORMAT')) !!}
            </div>
            <div class="event-info">
                <i class="bi bi-clock"></i>
                {!! convertUtcToLocal($nextClass->start_date_time,config('constants.DISPLAY_TIME_ZONE_FORMAT')) !!}
                @if(!$nextClass->is_hide_end_date_time)
                 - {!! convertUtcToLocal($nextClass->end_date_time,config('constants.DISPLAY_TIME_ZONE_FORMAT')) !!}
                @endif
            </div>
            <a href="{!! $nextClass->page_url !!}" target="_blank"><h5>{!! $nextClass->name !!}</h5></a>
            @if($nextClass->location)
            <div class="event-info">
                <i class="bi bi-map"></i>{!! $nextClass->location !!}
            </div>
            @endif
            <a href="{!! $nextClass->page_url !!}" class="event-img" target="_blank">
                <img src="{!! $nextClass->image_url !!}" class="" alt="{!! $nextClass->name !!}">
            </a>
            <div class="mt-3 description">
                {!! $nextClass->description !!}
            </div>
        </div>
        @endif
    </div>
</div>
@endsection