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


    <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

                    @foreach($eventItem['event_dates'] 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>



    <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