@php use Carbon\Carbon; @endphp
@extends('components.view')


@section('themeStylesheet')
    <style>
        {{ $themeStylesheet }}
    </style>
@endsection


@section('brandThemeOverrideSettings')
    <style>
        {{ $brandThemeOverrideSettings }}
    </style>
@endsection


@section('brandBackground')
    @if($brandBackground!=='' && !empty($brandBackground))
        style="background-image:url('{{ $brandBackground }}');"
    @endif
@endsection



@section('header')
    @php echo \App\Http\Controllers\Header::index($themeDirectory,$brandLogoSmall) @endphp
    @php echo \App\Http\Controllers\Navigation::index($themeDirectory) @endphp
@endsection


@section('content')

    <style>
        .event-dates-outer-wrapper {
            position: relative;
        }
        .event-dates-wrapper {
            max-height: 80px;
            overflow-y: hidden;
            transition: all ease-in-out 280ms;
        }
        .event-dates-wrapper.open {
            max-height: 1000px;
        }
        .event-dates-view-more {
            text-align: center;
            padding: 8px 0;
            position: absolute;
            bottom: -40px;
            width: 100%;
        }
    </style>


    @if($itemExists)
        <div class="scrollable-content"
             x-data="eventItemObj = {
                eventItem_id:{{ $eventItem['id'] }},
                location_id:{{ $locationId }},
             }"
             x-init="resizeForScrollableContent(true),resizeForScrollableContentOnChange(true)">


            <input type="hidden" id="menuItemId" value="{{ $eventItem['id'] }}">

            <!-- Item Image -->
            @if(array_key_exists('image_location',$eventItem))
                @if(!empty($eventItem['image_location']))
                    <div class="menu-item--image" style="background-image: url({{ $eventItem['image_location'] }})"></div>
                @endif
            @endif

            <!-- Item Title / Price -->
            <div class="row m-0 p-0 py-3{{ $stickyTitleOnMenuItems }}">
                <div class="col-12 text-left menu-item--title"@if($stickyTitleOnMenuItems) x-init="stickyMenuTitle()" @endif>
                    {{ $eventItem['name'] }}
                </div>
            </div>

            <!-- Item Description -->
            <div class="row m-0 p-0 mb-2">
                <div class="col-12">
                    {{ $eventItem['description'] }}
                </div>
            </div>

            <!-- Date / Time -->
            <div class="event-dates-outer-wrapper mb-4">
                <div class="row m-0 p-0 mb-4 mt-4 event-dates-wrapper">
                    <div class="col-12" style="font-weight:bold;">
                        <i class="far fa-calendar-alt mr-2"></i>Event Date(s)
                    </div>
                    @if($eventDaysCnt>=2)
                        <!--<div class="col-12" style="font-style: italic;">
                        This is a <u> //$eventDaysCnt  day</u> event
                    </div>-->
                    @endif

                    @if($repeatedEventDate)

                        <div class="col-12" style="font-size:13px;">
                            {{ date('D, M jS',strtotime($repeatedEventDate)) }} ({{ date('g:i a',strtotime($eventItem['event_dates'][0]['starts_at'])) }} - {{ date('g:i a',strtotime($eventItem['event_dates'][0]['ends_at'])) }})
                        </div>

                    @else

                        @php
                            $filteredEventDates = array_filter($eventItem['event_dates'], function ($eventDate) {
                                return Carbon::parse($eventDate['starts_at'])->isToday() || Carbon::parse($eventDate['starts_at'])->isAfter(Carbon::today());
                            });
                        @endphp

                        @foreach($filteredEventDates as $eventDate)
                            <div class="col-12" style="font-size:13px;">
                                {{ date('D, M jS',strtotime($eventDate['starts_at'])) }} ({{ date('g:i a',strtotime($eventDate['starts_at'])) }} - {{ date('g:i a',strtotime($eventDate['ends_at'])) }})
                            </div>
                        @endforeach

                    @endif
                </div>
            </div>


            @if(!empty($eventItem['url']))
                <!-- URL -->
                <div class="row m-0 p-0 mb-2">
                    <div class="col-12">
                        Event Link: <a href="{{ $eventItem['url'] }}" target="_blank">{{ $eventItem['url'] }}</a>
                    </div>
                </div>
            @endif


            @if(!$disableOrdering)
                <!-- Pre-Order Button -->
                @if($eventItem['allow_pre_orders'])
                    <div class="px-4 my-5">
                        <livewire:Button
                            type="button"
                            class="view-button btn-primary"
                            text="Pre-Order"
                            icon="<i class='fad fa-cart-plus'></i>"
                            wire="eventPreOrder(eventItemObj),pageLoader=true"
                        />
                    </div>
                @endif
            @endif
        </div>
    @else
        <div class="text-center" style="padding: 24px 16px;">
            <div class="alert alert-danger">
                <i class="fa-solid fa-triangle-exclamation mr-2"></i> Hmmm . . . Looks like the event you're looking for is no longer available
            </div>
            <div class="text-center" style="margin-top: 24px;font-size: 20px;" x-data x-on:click="pageLoader=true,history.back()">
                <i class="fa-solid fa-arrow-left-to-bracket mr-2"></i> Go Back
            </div>
        </div>
    @endif



    <script>
        $(document).ready(function(){
            var eventDatesOuterWrapper = $(".event-dates-outer-wrapper");
            var eventDatesWrapper = $(".event-dates-wrapper");
            var eventsWrapperHeight = eventDatesWrapper.height();
            console.log(eventsWrapperHeight);
            if(eventsWrapperHeight>=80){
                eventDatesOuterWrapper.append('<div class="event-dates-view-more">- View More Dates -</div>');
                var viewMoreDatesLink = $(".event-dates-view-more");
                viewMoreDatesLink.click(function(){
                    eventDatesWrapper.toggleClass('open');
                    if(eventDatesWrapper.hasClass('open')){
                        viewMoreDatesLink.text('- View Less Dates -');
                    }else{
                        viewMoreDatesLink.text('- View More Dates -');
                    }
                })
            }
        })
    </script>


@endsection