@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') }},
            modifiers:{{ ($editingAnItem ? json_encode($edit_menuItem['modifiers']) : '{}') }},
            reward:{{ ($reward ? '1' : '0') }},
            location_id:{{ $locationId }},
         }"
         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-6 text-left menu-item--title"@if($stickyTitleOnMenuItems) x-init="stickyMenuTitle()" @endif>
                {{ $menuItem['name'] }}
            </div>
            <div class="col-6 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">
                {!! nl2br($menuItem['description']) !!}
            </div>
        </div>

        <!-- Item Variables / Options -->
        <div class="row m-0 p-0 menu-item--variations">
            @foreach($menuItem['variations'] as $variation)
                <livewire:MenuItemVariants
                    :data="$variation"
                    :editingAnItem="$editingAnItem"
                    :selectedModifiers="$edit_menuItemModifiers"
                />
            @endforeach
        </div>

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


        @if(!$disableOrdering)

        <!-- Item Quantity -->
        @if(!$reward)
        <div class="row m-0 p-0 mt-5">
            <div class="col-12 text-center">
                <h2>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<{{ $menuItem['purchase_limit'] }} ? quantity+1 : {{ $menuItem['purchase_limit'] }}">
                        <i class="fa-light fa-circle-plus"></i>
                    </div>
                </div>
            </div>
        </div>
        @endif


        @if($isLocationOpen && $isLocationActive)
        <!-- 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>
        @else
            <div class="my-4" style="text-align: center;padding-bottom:45px;">
                <h3> Oh-No! We are closed :(</h3>
            </div>
        @endif

        @endif

    </div>

@endsection



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