@extends('front.layouts.app')
@section('content')

@if($class->password && !in_array($class->id,session("password_allow_classes")))

@php
$password_heading = $class->name;
$password_id = $class->id;
$password_page = "class";
@endphp
@includeIf('front.includes.password')

@else

<div class="light-header-sec">
    <div class="container h-100">
        <div class="row">
            <div class="col-lg-8 col-md-8">
                <img src="{!! $class->image_url !!}" class="img-fluid w-100 ed-img" alt="{!! $class->title !!}">
                <section class="ed-detail-sec sec-py">
                    <div class="ed-detail-content">
                        @foreach($class->typearr as $type)
                        <div class="event-type-badge">{!! $type !!}</div>
                        @endforeach
                        <h2>{!! $class->name !!}</h2>
                        <p>{!! $class->description !!}</p>
                    </div>
                </section>
            </div>
            <div class="col-xl-4 ms-auto col-lg-4 col-md-4">
                <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" onclick="javascript:cal.download('{!! $class->name !!}')">Add class to calendar</button> -->
                <button type="button" class="btn btn-theme-blue w-100 mt-4 btnDownloadICS">Add to calendar</button>
            </div>
        </div>
    </div>
</div>
<!-- END INNER BANNER 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

@if($class->elexio_form_embed_code && $class->elexio_group_id && $class->start_date_time)
@php
    $elexio_embed = $class->elexio_form_embed_code;
    if (strpos($elexio_embed, 'style-url') === false) {
        $customStyleUrl = urlencode(asset('assets/frontend/css/elexio-custom.css'));
        $elexio_embed = str_replace('custom-templates=', 'custom-templates=&style-url=' . $customStyleUrl, $elexio_embed);
    }
@endphp
<section class="register-form-sec sec-py">{!! $elexio_embed !!}</section>
<script>
(function() {
    var elexioBaseHeights = {};
    window.addEventListener("message", function(e) {
        if (e.origin !== "https://forms.ministryforms.net") return;
        try {
            var d = (typeof e.data === "string") ? JSON.parse(e.data) : e.data;
            if (!d || d.type !== "resize" || !d.h) return;
            var uid = d.uid;
            var reportedH = parseInt(d.h);
            var iframe = document.querySelector("iframe#mb-formbuilder-container[data-uniqueid='" + uid + "']");
            if (!iframe) return;
            var base = elexioBaseHeights[uid];
            if (!base || reportedH < base) {
                elexioBaseHeights[uid] = reportedH;
                base = reportedH;
            }
            var buffer = (reportedH > base + 80) ? 400 : 0;
            iframe.style.setProperty("height", (reportedH + buffer) + "px", "important");
        } catch(err) {}
    }, false);
})();
</script>
@endif

@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>
@stop

@endif
@endsection