@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')
    <div class="scrollable-content"
         x-data="menuItemObj = {
            {{ ($editingAnItem ? 'cartArrayKey:'.$cartArrayKey.',' : '') }}
            menuitem_id:'{{ $menuItem['id'] }}',
            menuitem_name:'{{ addslashes($menuItem['name']).($reward ? ' - *Free Reward' : '') }}',
            base_price:{{ ($reward ? '0' : $menuItem['price_in_cents']) }},
            quantity:{{ ($editingAnItem ? $edit_menuItem['quantity'] : '1') }},
            maxQuantity:{{ $menuItem['purchase_limit'] }},
            quantityLoading: false,
            inStock: {{ $inStock }},
            modifiers:{{ ($editingAnItem ? json_encode($edit_menuItem['modifiers']) : '{}') }},
            reward:{{ ($reward ? '1' : '0') }},
            location_id:{{ $locationId }},
            image_location:{{ (array_key_exists('image_location',$menuItem) ? "'".$menuItem['image_location']."'" : '') }},
            synced:{{ ($syncedWithPaymentProcessor ? '1' : '0') }},
            showLowQuantityWarning: false
         }"
         x-init="resizeForScrollableContent(),resizeForScrollableContentOnChange()">


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

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

        <!-- Item Title / Price -->
        <div class="row m-0 p-0 py-3{{ $stickyTitleOnMenuItems }}">
            <div class="col-8 text-left menu-item--title text-truncate"@if($stickyTitleOnMenuItems) x-init="stickyMenuTitle()" @endif>
                {{ \App\Http\Controllers\Translate::translate($menuItem['name']) }}
            </div>
            <div class="col-4 text-right menu-item--price">
                {{ $currencySymbol }} <span class="menu-item--price-span" data-baseprice="{{ $menuItem['price_in_cents'] }}">{{ $menuItem['price'] }}</span>
            </div>
        </div>

        <!-- Item Description -->
        <div class="row m-0 p-0 mb-4 menu-item--description">
            <div class="col-12">
                {!! \App\Http\Controllers\Translate::translate(nl2br($menuItem['description'])) !!}
            </div>
        </div>




        {{--
            Add a Lazy-Load option for synced menu items
            We'll pull Variations/Options/Modifiers from the processor when the page loads


        @if(array_key_exists('modifiers', $menuItem))
            <div class="row m-0 p-0 menu-item--variations">
                @foreach($menuItem['modifiers'] as $k=>$modifier)
                    @if(!$modifier['enabled'] || $modifier['hidden_from_customer'])
                        @continue
                    @endif

                        @php dump($modifier); @endphp
                    <livewire:LazyLoadMenuModifier
                        keyId="{{ $modifier['id'] ?? 'fallback-'.$k }}"
                        modifierType="option"
                        :data="collect($modifier)->toArray()"
                        :editingAnItem="$editingAnItem"
                        :selectedModifiers="$edit_menuItemModifiers"
                        :synced="$syncedWithPaymentProcessor"
                        :locationId="$locationId"
                        wire:key="modifier-{{ $modifier['id'] ?? 'fallback-'.$k }}"
                    />
                @endforeach
            </div>
        @endif
--}}

        @if($syncedWithPaymentProcessor)


            @if(array_key_exists('variations',$menuItem))
                <div class="row m-0 p-0 menu-item--options">
                    @foreach($menuItem['variations'] as $k=>$option)
                        @continue(!empty($option['hidden_from_customer']))

                        <livewire:LazyLoadMenuModifier
                            keyId="{{ $option['id'] ?? 'fallback-'.$k }}"
                            modifierType="variation"
                            :data="collect($option)->toArray()"
                            :editingAnItem="$editingAnItem"
                            :selectedModifiers="$edit_menuItemModifiers"
                            :synced="$syncedWithPaymentProcessor"
                            :locationId="$locationId"
                            :purchaseLimit="$menuItem['purchase_limit']"
                            wire:key="modifier-{{ $option['id'] ?? 'fallback-'.$k }}"
                        />
                    @endforeach
                </div>
            @endif

            @if(array_key_exists('options',$menuItem))
                <div class="row m-0 p-0 menu-item--options">
                    @foreach($menuItem['options'] as $k=>$option)
                        @continue(!empty($option['hidden_from_customer']))

                        <livewire:LazyLoadMenuModifier
                            keyId="{{ $option['id'] ?? 'fallback-'.$k }}"
                            modifierType="option"
                            :data="collect($option)->toArray()"
                            :editingAnItem="$editingAnItem"
                            :selectedModifiers="$edit_menuItemModifiers"
                            :synced="$syncedWithPaymentProcessor"
                            :locationId="$locationId"
                            :purchaseLimit="$menuItem['purchase_limit']"
                            wire:key="modifier-{{ $option['id'] ?? 'fallback-'.$k }}"
                        />
                    @endforeach
                </div>
            @endif


            @else
    {{--
            <!-- Item Variables / Options -->
            @if(array_key_exists('modifiers',$menuItem))
                <div class="row m-0 p-0 menu-item--variations">
                    @foreach($menuItem['modifiers'] as $modifier)
                        <livewire:MenuItemVariants
                            :data="$modifier"
                            :editingAnItem="$editingAnItem"
                            :selectedModifiers="$edit_menuItemModifiers"
                            :synced="$syncedWithPaymentProcessor"
                        />
                    @endforeach
                </div>
            @endif
    --}}
            @if(array_key_exists('variations',$menuItem))
                <div class="row m-0 p-0 menu-item--variations">
                    @foreach($menuItem['variations'] as $variation)
                        <livewire:MenuItemVariants
                            :data="$variation"
                            :editingAnItem="$editingAnItem"
                            :selectedModifiers="$edit_menuItemModifiers"
                            :locationId="$locationId"
                            :purchaseLimit="$menuItem['purchase_limit']"
                        />
                    @endforeach
                </div>
            @endif

            @if(array_key_exists('options',$menuItem))
                <div class="row m-0 p-0 menu-item--options">
                    @foreach($menuItem['options'] as $option)
                        <livewire:MenuItemOptions
                            :data="$option"
                            :editingAnItem="$editingAnItem"
                            :selectedModifiers="$edit_menuItemModifiers"
                            :locationId="$locationId"
                            :purchaseLimit="$menuItem['purchase_limit']"
                        />
                    @endforeach
                </div>
            @endif


        @endif






        @if(!$disableOrdering)

        <!-- Item Quantity -->
        @if(!$reward)
            <div class="row m-0 p-0" x-show="!quantityLoading && inStock">
                <div class="row m-0 p-0 mt-5">
                    <div class="col-12 text-center">
                        <h2>{{ \App\Http\Controllers\Translate::translate('Quantity') }}</h2>
                    </div>
                    <div class="col-12">
                        <div class="menu-item--quantity-wrapper text-center">
                            <div class="menu-item--quantity-less" x-on:click="quantity = quantity>=2 ? quantity-1 : 1">
                                <i class="fa-light fa-circle-minus"></i>
                            </div>
                            <div class="menu-item--quantity-amount mx-2" x-text="quantity"></div>
                            <div class="menu-item--quantity-more" x-on:click="quantity = quantity<maxQuantity ? quantity+1 : maxQuantity">
                                <i class="fa-light fa-circle-plus"></i>
                            </div>
                        </div>
                    </div>
                    <div class="col-12 text-center pt-1" style="font-size:12px;" x-show="showLowQuantityWarning">
                        Only 2 available!
                    </div>
                </div>
            </div>

            <div class="row m-0 p-0" x-show="quantityLoading">
                {{-- Loading Spinner --}}
                <div class="text-center w-100 mt-5">
                    <i class="fad fa-spinner fa-spin text-primary" style="font-size: 50px;"></i>
                    <div class="mt-2" style="font-size:12px;">
                        Checking Inventory . . .
                    </div>
                </div>
            </div>
        @endif


        @if($isLocationOpen && $isLocationActive)
            <div class="row m-0 p-0" x-show="inStock">
                <!-- Item Buy/Save Button -->
                <div class="px-4 my-5">
                    @if($editingAnItem)
                        <livewire:Button
                            type="button"
                            class="view-button btn-primary"
                            text="Save"
                            icon="<i class='fad fa-cart-plus'></i>"
                            wire="saveCartItem(menuItemObj),pageLoader=true"
                        />
                    @else
                        <livewire:Button
                            type="button"
                            class="view-button btn-primary"
                            text="Add To Cart"
                            icon="<i class='fad fa-cart-plus'></i>"
                            wire="addToCart(menuItemObj),pageLoader=true"
                        />
                    @endif
                </div>
            </div>

            <div class="row m-0 p-0 my-5" x-show="!inStock">
                <div class="col-12 text-center">
                    <h3 class="text-danger">
                        {{ \App\Http\Controllers\Translate::translate('Out of Stock') }}
                    </h3>
                    <p style="font-size: 13px;">{{ \App\Http\Controllers\Translate::translate('Please check back later, or choose a different option.') }}</p>
                </div>
            </div>
        @else

            <!-- if we have events with pre-ordering available, we should show a 'To place an order, please choose an event' -->
            @if($offersPreOrdering)
                    <div class="px-4 my-4" style="text-align: center;padding-bottom:45px;">
                        <h4> {{ \App\Http\Controllers\Translate::translate('We are currently closed. But you can pre-order for an upcoming event.') }}</h4>
                        <livewire:Button
                            text="View Events"
                            class="footer-home--button btn-primary"
                            icon="<i class='fad fa-cart-plus'></i>"
                            targetUrl="events"
                        />
                    </div>
            @else
                <!-- Else, show default 'Closed' text -->
                <div class="my-4" style="text-align: center;padding-bottom:45px;">
                    <h3> {{ \App\Http\Controllers\Translate::translate('Oh-No! We are closed') }} :(</h3>
                </div>
            @endif
        @endif

        @endif

    </div>

@endsection



@section('footer')
@php echo \App\Http\Controllers\Footer::index($themeDirectory) @endphp
@endsection