@extends('front.layouts.app')
@section('content')
<div class="my-account-body">
    <section class="title-header">
        <div class="container">
            <div class="row align-items-center">
                <div class="col-sm-6">
                    <a href="{!! route('myclasses') !!}" class="btn btn-theme-blue btn-go-back">Go Back</a>
                </div>
            </div>
        </div>
    </section>
    <section class="my-ed-details-sec">
        <div class="container h-100">
            <div class="row">
                <div class="col-lg-8 col-md-7">
                    <img src="{!! $class->image_url !!}" class="img-fluid w-100 ed-img" alt="{!! $class->title !!}">
                </div>
                <div class="col-xl-4 ms-auto col-lg-4 col-md-5">
                    <div class="card ed-detail-card">
                        <div class="card-header">
                            Details
                        </div>
                        <div class="card-body">

                            @if(isset($data['recurring_at']))
                            <div class="ed-list-item">
                                <strong>Recurring At</strong>
                                <p>{!! $data['recurring_at']  !!}</p>
                            </div>
                            @endif

                            @if(isset($data['recurrence_at']) && @count(@$data['recurrence_at']) > 0)
                            <div class="ed-list-item">
                                <strong>Recurrence At</strong>
                                <p>
                                @foreach($data['recurrence_at'] as $recurrence_at)
                                <span class="mb-1 d-block">{!! $recurrence_at !!}</span>
                                @endforeach
                                </p>
                            </div>
                            @endif

                            @if($class->start_date_time)
                            <div class="ed-list-item">
                                <strong>Date & Time</strong>
                                <p>
                                    {!! convertUtcToLocal($class->start_date_time,config('constants.DISPLAY_DATE_FORMAT')) !!}
                                    {!! displayStartEndTime($class) !!}
                                </p>
                            </div>
                            @endif

                            @if(in_array("Online",$class->typearr) && in_array("In Person",$class->typearr))
                            <div class="ed-list-item">
                                <strong>Location</strong>
                                <p>Online or {!! $class->location ?? config('app.name') !!}</p>
                            </div>
                            @elseif(in_array("Online",$class->typearr))
                            <div class="ed-list-item">
                                <strong>Location</strong>
                                <p>Online</p>
                            </div>
                            @elseif($class->location)
                            <div class="ed-list-item">
                                <strong>Location</strong>
                                <p>{!! $class->location !!}</p>
                            </div>
                            @endif

                            @if($class->categories_name)
                            <div class="ed-list-item">
                                <strong>Categories</strong>
                                <p>{!! $class->categories_name !!}</p>
                            </div>
                            @endif
                        </div>
                    </div>
                    <button type="button" class="btn btn-theme-blue w-100 mt-4 btnDownloadICS">Add to calendar</button>
                </div>
            </div>
        </div>
        <div class="ed-detail-sec sec-py">
            <div class="container">
                <div class="row">
                    <div class="col-lg-8 col-md-7">
                        <div class="ed-detail-content">
                            <div class="event-type-badge">{!! $class->type !!}</div>
                            <h2>{!! $class->name !!}</h2>
                            <p>{!! $class->description !!}</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    @if($class->products()->count() > 0)
    <!-- START MECK PRODUCTS SECTION -->
    <section class="meck-products-sec sec-py pt-0">
        <div class="container">
            <div class="row">
                <div class="col-xl-8 mx-auto text-center">
                    <div class="sec-title">
                        <strong>{!! @$page->metaArr()['product_subtitle'] !!}</strong>
                        <h2>{!! @$page->metaArr()['product_title'] !!}</h2>
                    </div>
                    <p class="sec-title-para">
                        {!! @$page->metaArr()['product_description'] !!}
                    </p>
                </div>
            </div>
            <div class="row mt-5 gx-xl-5 products-row">
                @foreach($class->products as $products)
                <div class="col-md-3 col-sm-6 Col">
                    <div class="product-card">
                        <div class="img-view">
                            <img src="{!! $products->image !!}" class="img-fluid" alt="product-image" />
                        </div>
                        <div class="content">
                            <h4 class="text-truncate">{!! $products->name !!}</h4>
                            <h5 class="text-truncate">{!! $products->price !!}</h5>
                            <a href="{!! $products->link !!}" class="arrow-btn" target="_blank">
                                <img src="{!! asset('assets/frontend/images/arrow-right-blue.png') !!}" class="img-fluid class-arrow-icon" alt="arrow-right-blue" />
                            </a>
                        </div>
                    </div>
                </div>
                @endforeach
                @if($class->products()->count() > 4)
                <div class="col-md-12 text-center mt-4">
                    <button type="button" class="btn btn-theme-blue" id="loadMore">Load More</button>
                </div>
                @endif
            </div>
        </div>
    </section>
    <!-- END MECK PRODUCTS SECTION -->
    @endif
</div>
@endsection
@section('js')
<script type="text/javascript">
loadMoreProducts();
$(document).on('click', ".btnDownloadICS", function () {
    const eventDetails = {
        summary: '{!! $class->name !!}',
        description: '{!! ($class->name) !!}',
        location: '{!! in_array("Online",$class->typearr) ? "Online" : $class->location !!}',
        start: '{!! $class->start_date_time ? $class->start_date_time->format("Ymd\THis\Z") : "" !!}',
        end: '{!! $class->end_date_time ? $class->end_date_time->format("Ymd\THis\Z") : "" !!}',
        timezone: 'UTC'
    };
    generateICS(eventDetails);
})
</script>
@endsection