@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 pb-5"
         x-data=""
         x-init="resizeForScrollableContent(true),resizeForScrollableContentOnChange(true)">

        <div class="row m-0">
            <div class="col-12 text-center font-weight-bold mt-4 mb-2 view-heading">
                {!! $icon !!}{{ $heading }}
            </div>
            <div class="col-12 text-center font-weight-bold mt-2 mb-0 view-subheading">
                {{ $subheading }}
            </div>
        </div>

        <div class="row m-0">
            <div class="col-12 text-center">
                <h2>You currently have <u>{!! $customersCurrentPoints !!}</u> points</h2>
            </div>
        </div>

        <!-- Has the customer earned the maximum allowed points? -->
        @if((int)$customersCurrentPoints>=(int)$loyaltyPointsSettings['point_limit'])
            <div class="row m-0 my-3">
                <div class="col-12 text-center">
                    <div class="alert alert-warning">
                        You've reached the maximum points allowed, time to cash in!
                    </div>
                </div>
            </div>
        @endif

        <hr class="hr-short w-50 my-4">

        <!-- Available Rewards -->
        <div class="row m-0">
            <div class="col-12 text-center">
                <h4>- <i class="fas fa-gifts mr-2"></i>Available Rewards -</h4>
            </div>
        </div>

        @if(count($redeemable_items)>=1)
            <div class="row m-0">
                <div class="col-12 text-center">
                    @foreach($redeemable_items as $redeemableItem)
                        @if((int)$redeemableItem['is_active']===1)
                            <livewire:RedeemableRewardItem
                                :rewardItem="$redeemableItem"
                                :customersCurrentPoints="$customersCurrentPoints"
                            />
                        @endif
                    @endforeach
                </div>
            </div>
        @else
            <div class="row m-0">
                <div class="col-12 text-center">
                    There are currently no redeemable rewards
                </div>
            </div>
        @endif

        <hr class="hr-short w-50 my-4">

        <div class="row m-0">
            <div class="col-12 text-center">
                <h4>- How are points earned? -</h4>
            </div>
        </div>

        @if($pointsAreEarnedFor)
            <div class="row m-0">
                <div class="col-12 text-center">
                    <h5 style="font-size:16px;">{!! $pointsAreEarnedFor !!}</h5>
                </div>
            </div>
        @endif

        @if($pointsAreEarnedForItems)
            <div class="row m-0">
                @foreach($menuItemNames as $menuItemName)
                    @php
                        $plurality = ((int)$pointsAreEarnedForItems[$menuItemName['id']]>=2 ? '\'s are' : ' is');
                    @endphp
                    <div class="col-12 text-center">
                        {!! $pointsAreEarnedForItems[$menuItemName['id']] !!} point{!! $plurality !!} earned for {!! $menuItemName['name'] !!}
                    </div>
                @endforeach
            </div>
        @endif

</div>
@endsection