@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('myevents') !!}" 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="{!! $event->image_url !!}" class="img-fluid w-100 ed-img" alt="{!! $event->title !!}">
                    <div class="ed-detail-content py-xl-5 py-3">
                        @foreach($event->typearr as $type)
                        <div class="event-type-badge">{!! $type !!}</div>
                        @endforeach
                        <h2>{!! $event->name !!}</h2>
                        <p>{!! $event->description !!}</p>

                        @if($event->is_recurring == "1" && !$event->parent_id)
                        <h3 class="mt-5">My Notes</h3>

                        @foreach($event->recurringevents as $recurringevents)
                        @if(isset(auth('web')->user()->eventNote($recurringevents->id)->notes))
                        <div style="margin-botton:10px">
                            <span>{!! convertUtcToLocal(auth('web')->user()->eventNote($recurringevents->id)->created_at,config('constants.DISPLAY_DATE_TIME_ZONE_FORMAT')) !!}</span>
                            <br>
                            {!! auth('web')->user()->eventNote($recurringevents->id)->notes !!}
                        </div>
                        @endif

                        @endforeach

                        @else
                            @if(isset(auth('web')->user()->eventNote($event->id)->notes))
                            <h3 class="mt-5">My Notes</h3>
                            {!! auth('web')->user()->eventNote($event->id)->notes !!}
                            @endif
                        @endif
                    </div>
                </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 bg-white">
                            @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($event->start_date_time && $event->slug != "the-compassion-journey")
                            <div class="ed-list-item">
                                <strong>Date & Time</strong>
                                <p>{!! displayStartEndDateTime($event) !!}</p>
                            </div>
                            @endif

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

                            @if($event->categories_name)
                            <div class="ed-list-item">
                                <strong>Categories</strong>
                                <p>{!! $event->categories_name !!}</p>
                            </div>
                            @endif
                        </div>
                    </div>
                    <div class="col-md-12 mt-4">
                        @if($event->eventbrite_id)
                        <button class="btn btn-theme-blue w-100 mb-3" id="eventbrite-widget-modal-trigger-{!! $event->eventbrite_id !!}" type="button" style="@if($event->eventbrite_btn_bgcolor) background-color: {!! $event->eventbrite_btn_bgcolor.';' !!} @endif @if($event->eventbrite_btn_color) color: {!! $event->eventbrite_btn_color.';' !!} @endif">
                            {!! $event->eventbrite_btn_caption ?? "Book Your Tickets" !!}
                        </button>
                        @endif
                        <button type="button" class="btn btn-theme-blue w-100 btnDownloadICS">Add to calendar</button>
                    </div>
                </div>
            </div>
        </div>
    </section>
    @if($event->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($event->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($event->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: '{!! $event->name !!}',
        description: '{!! ($event->name) !!}',
        location: '{!! in_array("Online",$event->typearr) ? "Online" : $event->location !!}',
        start: '{!! $event->start_date_time->format("Ymd\THis\Z") !!}',
        end: '{!! $event->end_date_time->format("Ymd\THis\Z") !!}',
        timezone: 'UTC'
    };
    generateICS(eventDetails);
})
</script>

@if($event->eventbrite_id)
<script src="https://www.eventbrite.com/static/widgets/eb_widgets.js"></script>

<script type="text/javascript">
    var exampleCallback = function() {
        console.log('Order complete!');
    };

    window.EBWidgets.createWidget({
        widgetType: 'checkout',
        eventId: '{!! $event->eventbrite_id !!}',
        modal: true,
        modalTriggerElementId: 'eventbrite-widget-modal-trigger-{!! $event->eventbrite_id !!}',
        onOrderComplete: exampleCallback
    });


    // window.EBWidgets.createWidget({
    //     // Required
    //     widgetType: 'checkout',
    //     eventId: '{!! $event->eventbrite_id !!}',
    //     iframeContainerId: 'eventbrite-widget-container-{!! $event->eventbrite_id !!}',
    //
    //     // Optional
    //     iframeContainerHeight: 425,  // Widget height in pixels. Defaults to a minimum of 425px if not provided
    //     onOrderComplete: exampleCallback  // Method called when an order has successfully completed
    // });
</script>
@endif
@endsection