@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 Coins</h4>

            </div>

            <div class="card-body">

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

				    <div class="content-wrapper-context text-white">
				        @php
				            $coinsPercent = $activePlanDetails['percent'];
                    		$nextPlanData =  getNextVipFeature($activePlanDetails['plan_id']);
                    		$maxPlanId =  getMaxVipFeature();
                    		$imageName = '';
                    		if($activePlanDetails['plan_id']==$maxPlanId){
                    			$imageName = asset('front/image/platinum.png');
                    		}else if($nextPlanData){
                    			if(isset($nextPlanData->id) && $nextPlanData->id == 1){
                    				$imageName = asset('front/image/silver.png');
                    			}else if(isset($nextPlanData->id) && $nextPlanData->id == 2){
                    				$imageName = asset('front/image/gold.png');
                    			}else if(isset($nextPlanData->id) && $nextPlanData->id >= 3){
                    				$imageName = asset('front/image/platinum.png');
                    			}
                    		}else{
                    			$imageName = asset('front/image/silver.png');                      		
                    		}
                    		$planDesc = '';                            		
                    		if($maxPlanId==$activePlanDetails['plan_id']){
                    			$planDesc = 'You have reached at highest membership now';
                    			$coinsPercent = '100';
                    		}else if($nextPlanData){
                    			$planDesc = 'Earn '.(((int)$activePlanDetails['remaining_points'])+1).' more coins to reach '.$nextPlanData->name.'';
                    		}
                    	@endphp

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

				      	<div class="pointer-bar-main">
				      	    <div class="pointbar">
                                <span style="width: {{ $coinsPercent }}%;"></span>
    				      	</div>
                            <div class="pointer-bar-img">
                            	@if($imageName!='')
                                	<img src="{{ $imageName }}" class="img-content" />
                                @endif
                            </div>
				      	</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">{{ config('constants.points_name') }}</p>

						</div>

					</div> --}}

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

						<div class="expire-block text-center">
							@php
								$points = auth()->user()->getUserWalletPoints();
								if($points > 0 && auth()->user()->coin_expired_at){
								    $titleText = $points." ".config('constants.points_name')." will expire on ". date('d M Y', strtotime(auth()->user()->coin_expired_at)) ?? '';
									$subTitleText = "Make just 1 transaction by the expire date to extend your coins validity";
								}else{
									$titleText = "You have ".$points." coins.";
									$subTitleText = "Make a purchase to start earning Clover Coins.";
								}
							@endphp
							<h5 class="mb-2">{{ $titleText }}
							</h5>
							<p class="mb-0">{{ $subTitleText }}</p>

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

						</div>

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

						<ul class="d-flex flex-wrap list-unstyled list-change mt-4">
							<li>
								<div class="link-btn" style="background: #1a223e !important;">

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

								</div>
							</li>
							<li>
								<div class="link-btn">

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

								</div>
							</li>
						</ul>
						

						

					</div>

				</div>

			</div>

	    </div>

	</div>











@endsection







@section('scripts')



    <script type="text/javascript">





    </script>



@endsection