@extends('layouts.customer')



@section('content')



	<div class="middle__content">



	    <div class="card rounded-0 border-0">

	        <div class="card-header bg-transparent">

                <h4 class="mb-0">My Points</h4>

            </div>

            <div class="card-body">

		       	<div class="content-wrapper-header">

				    <div class="content-wrapper-context text-white">

				      	<h3 class="img-content text-white mb-2">{{ $activePlanDetails['plan_name'] }} <span>You have {{ auth()->user()->getUserWalletPoints() }} Caring Points</span></h3>

				      	<div class="pointer-bar-main">
				      	    <div class="pointbar">
                                <span style="width: {{ $activePlanDetails['percent'] }}%;"></span>
    				      	</div>
                            <div class="pointer-bar-img">
                            	@php
                            		$imageName = '';
                            		if($activePlanDetails['plan_id']==1){
                            			$imageName = asset('front/image/silver.png');
                            		}elseif($activePlanDetails['plan_id']==2){
                            			$imageName = asset('front/image/gold.png');
                            		}elseif($activePlanDetails['plan_id']==3){
                            			$imageName = asset('front/image/platinum.png');
                            		}

                            		$planDesc = '';
                            		$maxPlanId =  getMaxVipFeature();
                            		$nextPlanData =  getNextVipFeature($activePlanDetails['plan_id']);
                            		
                            		if($maxPlanId==$activePlanDetails['plan_id']){
                            			$planDesc = 'You have reached at highest club now';
                            		}else{
                            			$planDesc = 'Earn '.($activePlanDetails['remaining_points']+1).' more points to reach '.$nextPlanData->name.' club';
                            		}
                            	@endphp
                            	@if($imageName!='')
                                	<img src="{{ $imageName }}" class="img-content" />
                                @endif
                            </div>
				      	</div>
				      	<!--<div class="content-text">Get {{ $activePlanDetails['remaining_points'] }} more point by {{ $activePlanDetails['expired_at'] }} to maintain {{ $activePlanDetails['plan_name'] }}</div>-->

                        <div class="content-text">{{ $planDesc }}</div>
				    </div>

				    <div class="content-wrapper-img d-none d-md-block">

				    	<img class="img-fluid" src="{{ asset('front/image/glass.png') }}" alt="" />

				    </div>

				</div>

				<div class="row">

					{{-- <div class="col-12 col-md-6 col-lg-12 col-xl-6">

						<div class="points-block text-center">

							<p class="text-uppercase mb-0">You have</p>

							<h1 class="mb-0 total-point">

								{{ auth()->user()->getUserWalletPoints() }}

							</h1>

							<p class="mb-0">Caring point</p>

						</div>

					</div> --}}

					<div class="col-12 col-md-12 col-lg-12 col-xl-12">

						<div class="expire-block text-center">

							<h5 class="mb-2">{{ auth()->user()->getUserWalletPoints() }} points will expire on {{ $activePlanDetails['expired_at'] }}</h5>

							<p class="mb-0">Make just 1 transaction by the expire date to extend your points validity</p>

							{{--<a href="#">Learn more</a>--}}

						</div>

					</div>

				</div>

				<div class="row mt-4">

					<div class="col-12 col-md-6 col-lg-12 col-xl-6">

						<div class="link-btn" style="background: #1a223e !important;">

							<a href="{{ route('customer.my-points.earnMorePointsInfo') }}">Tier Benefits<i class="lnr lnr-chevron-right"></i></a>

						</div>

					</div>

					<div class="col-12 col-md-6 col-lg-12 col-xl-6">

						<div class="link-btn">

							<a href="{{ route('customer.my-points.viewHistory') }}">View my point history <i class="lnr lnr-chevron-right"></i></a>

						</div>

					</div>

				</div>

			</div>

	    </div>

	</div>











@endsection







@section('scripts')



    <script type="text/javascript">





    </script>



@endsection