@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 = {
            menuitem_id:{{ $cateringPackageDetails['id'] }},
            menuitem_name:'{{ addslashes($cateringPackageDetails['title']) }}',
            base_price:{{ $cateringPackageDetails['deposit'] }},
            quantity:1,
            modifiers:{},
            reward:0,
            cateringPackage:true,
            location_id:{{ $locationId }},
         }"
         x-init="resizeForScrollableContent(true),resizeForScrollableContentOnChange(true)">

        <meta name="csrf-token" content="{{ csrf_token() }}">
        <input type="hidden" id="directory" value="{{ $directory }}">

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

        <!-- Item Title / Price -->
        <div class="row m-0 p-0 py-3">
            <div class="col-12 text-left menu-item--title">
                {{ $cateringPackageDetails['title'] }}
            </div>
        </div>

        <!-- Item Description -->
        <div class="row m-0 p-0 mb-4 menu-item--description">
            <div class="col-12">
                {!! nl2br($cateringPackageDetails['description']) !!}
            </div>
        </div>

        <!-- Price per guest -->
        <div class="row m-0 p-0 mb-2 menu-item--description">
            <div class="col-12" style="font-size: 19px;">
                <strong>
                    <i class="fas fa-users mr-2"></i>
                    Price per guest:
                </strong>
                {{ $currencySymbol }} <span class="menu-item--price-span" data-baseprice="{{ $cateringPackageDetails['price_per_guest'] }}">{{ number_format($cateringPackageDetails['price_per_guest']/100,2) }}</span>
            </div>
        </div>

        <!-- Minimum total price -->
        <div class="row m-0 p-0 mb-2 menu-item--description">
            <div class="col-12" style="font-size: 19px;">
                <strong><i class="fad fa-money-bill-wave-alt mr-2"></i> Minimum: </strong>{{ $currencySymbol }}{{ number_format($cateringPackageDetails['minimum_total_price']/100,2) }}
            </div>
        </div>

        <!-- Deposit -->
        <div class="row m-0 p-0 mb-4 menu-item--description">
            <div class="col-12" style="font-size: 19px;">
                <strong><i class="fad fa-coins mr-2"></i> Deposit: </strong>{{ $currencySymbol }}{{ number_format($cateringPackageDetails['deposit']/100,2) }}
            </div>
        </div>

@php //dd($cateringPackageDetails); @endphp
        @if(is_array($cateringPackageDetails['variations']) || is_array($cateringPackageDetails['options']))

            <!-- Deposit -->
            <div class="row m-0 p-0 my-3">
                <div class="col-12" style="text-align: center;">
                    - Choose package options below -
                </div>
            </div>

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

            @if(is_array($cateringPackageDetails['options']))
                <div class="row m-0 p-0 menu-item--options">
                    @foreach($cateringPackageDetails['options'] as $option)
                        <livewire:MenuItemOptions
                            :data="$option"
                        />
                    @endforeach
                </div>
            @endif

        @endif

        <!-- Item Buy/Save Button -->
        <div class="px-4 my-5">
            @if((int)$cateringPackageDetails['deposit']>=1)
                <livewire:Button
                    type="button"
                    class="view-button btn-primary"
                    text="Choose This Package"
                    icon="<i class='fad fa-cart-plus'></i>"
                    wire="addToCart(menuItemObj,'checkout'),pageLoader=true"
                />
            @else
                <livewire:Button
                    type="button"
                    class="view-button btn-primary"
                    text="Choose This Package"
                    icon="<i class='fad fa-cart-plus'></i>"
                    xon="submitCateringRequest(menuItemObj)"
                />
            @endif
        </div>

    </div>
@endsection

<script>


    function submitCateringRequest(menuItemObj){
        $(".pageLoader-wrapper").show();
        var directory = $("#directory").val();
        //console.log(menuItemObj); return false;
        $.ajax({
            url: '{{url("ajax/submitCateringRequestNoDeposit")}}',
            type: "POST",
            headers: {'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')},
            data: {
                menuItemObj : menuItemObj
            },
            error: function(data) {
                console.log(data);
                //$(this).children('svg').hide();
                //$(this).prop('disabled',false);
                $('.pageLoader-wrapper').hide();
            },
            success: function(results) {
                console.log(results);
                $('.pageLoader-wrapper').hide();
                if(results.status){
                    swal({
                        text: results.message,
                        icon: 'success',
                        buttons: "Okay",
                    }).then(function(isConfirm) {
                        // Redirect to home
                        $(".pageLoader-wrapper").show();
                        if(directory && directory!=='' && directory!=='NULL'){
                            window.location.href = '/?directory='+directory;
                        }
                    })
                }else{
                    swal({
                        text: results.message,
                        icon: 'error',
                        buttons: ["Return to Catering Form", "Okay"],
                    }).then(function(isConfirm){
                        if(!isConfirm){
                            $(".pageLoader-wrapper").show();
                            window.location.href = '/catering?directory='+directory;
                        }
                    })
                }
            },
        });
    }
</script>