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

@if($event->password && !in_array($event->id,session("password_allow_events")))

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

@else
<div class="light-header-sec">
    <div class="container h-100">
        <div class="row">
            <div class="col-lg-8">
                <img src="{!! $event->image_url !!}" class="img-fluid w-100 ed-img" alt="{!! $event->title !!}">
                <section class="ed-detail-sec sec-py">
                    <div class="ed-detail-content">
                        @foreach($event->typearr as $type)
                        <div class="event-type-badge">{!! $type !!}</div>
                        @endforeach
                        <h2>{!! $event->name !!}</h2>
                        {!! $event->description !!}
                    </div>
                </section>
            </div>
            <div class="col-xl-4 ms-auto col-lg-4 mb-4 mb-lg-0">
                <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>{!! $data['recurrence_at_title'] !!}</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 @if(!$event->is_hide_time)& Time @endif</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 ed-detail-card-btns">
                    @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.';' !!} border-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
                    <!-- onclick="javascript:cal.download('{!! $event->name !!}')" -->
                    <button type="button" class="btn btn-theme-blue w-100 btnDownloadICS">Add to calendar</button>
                    <a class="btn btn-theme-blue w-100 mt-3" href="{!! config('constants.CALENDAR_PUBLIC_URL') !!}" target="_blank">Subscribe to Meck's Events Calendar</a>
                </div>
            </div>
        </div>
    </div>
</div>
<!-- END INNER BANNER 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-10 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-lg-3 col-md-4 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

@if($event->elexio_form_embed_code && $event->elexio_group_id && $event->start_date_time)
@php
    $elexio_embed = $event->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: '{!! $event->name !!}',
        description: '{!! ($event->name) !!}',
        location: '{!! in_array("Online",$event->typearr) ? "Online" : $event->location !!}',
        start: '{!! ($event->start_date_time) ? $event->start_date_time->format("Ymd\THis\Z") : "" !!}',
        end: '{!! ($event->end_date_time) ? $event->end_date_time->format("Ymd\THis\Z") : "" !!}',
        timezone: 'UTC'
    };
    generateICS(eventDetails);
})
</script>

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

@endif

@endsection