@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">Membership Benefits</h4>

            </div>
	       	<div class="card-body">
	       		<div class="earn-reward">
	       			<div class="earn-reward-topbar text-center">
		       			<div class="reward-icon mb-4">
		       				<img src="{{ asset('front/image/reward-icon.png') }}" class="img-fluid" />
		       			</div>
		       			<div class="earn-reward-topbar-heading">
		       				<h4 class="mb-2">How do I Earn {{ config('constants.points_name') }}?</h4>
		       				<p>For every <span style="color: green;">$1 spent</span> {{ config('app.name') }}, you'll earn {{ config('constants.points_name') }} according to your tier.</p>
		       			</div>
		       		</div>
		       		<div class="earn-reward-inner">
		       			<div class="member-tab my-4">
		                	<ul class="nav nav-fill" id="myTab" role="tablist">
		                		@if($vipFeatures->count()>0)
		                			@foreach($vipFeatures as $record)
				                		<li class="nav-item">
										    <a class="nav-link" data-toggle="tab" href="#{{ strtolower($record->name) }}" onclick="viewFeatureDetail({{ $record->id }})">{{ $record->name }}
										    </a>
										</li>
		                			@endforeach
		                		@endif

								{{--<li class="nav-item">
								    <a class="nav-link active" data-toggle="tab" href="#service" onclick="purchasefilter('receive')">Services</a>
								</li>
								<li class="nav-item">
								    <a class="nav-link" data-toggle="tab" href="#cash" onclick="purchasefilter('used')">Cash</a>
								</li>
								<li class="nav-item">
								    <a class="nav-link" data-toggle="tab" href="#gold" onclick="purchasefilter('used')">Gold</a>
								</li>
								<li class="nav-item">
								    <a class="nav-link" data-toggle="tab" href="#platinum" onclick="purchasefilter('used')">Platinum</a>
								</li>--}}
							</ul>
							<div class="tab-content vipFeatureContent" id="myTabContent">
								{{--<div class="tab-pane fade show active" id="service">
									<table class="table text-center">
									  	<tbody>
										    <tr>
										      	<td width="240">All Services</td>									    
										      	<td width="190">0</td>									    
										      	<td width="220">4</td>									    
										      	<td>4</td>									    
										  	</tr>
									  	</tbody>
									</table>
				          		</div>
				          		<div class="tab-pane fade" id="cash">
				          			<table class="table text-center">
									  	<tbody>
										    <tr>
										      	<td width="240">All Services</td>									    
										      	<td width="190">0</td>									    
										      	<td width="220">4</td>									    
										      	<td>4</td>									    
										  	</tr>
									  	</tbody>
									</table>
								</div>
								<div class="tab-pane fade" id="gold">
				          			<table class="table text-center">
									  	<tbody>
										    <tr>
										      	<td width="240">All Services</td>									    
										      	<td width="190">0</td>									    
										      	<td width="220">4</td>									    
										      	<td>4</td>									    
										  	</tr>
									  	</tbody>
									</table>
								</div>
								<div class="tab-pane fade" id="platinum">
				          			<table class="table text-center">
									  	<tbody>
										    <tr>
										      	<td width="240">All Services</td>									    
										      	<td width="190">0</td>									    
										      	<td width="220">4</td>									    
										      	<td>4</td>									    
										  	</tr>
									  	</tbody>
									</table>
								</div>--}}
			          		</div>
	          			</div>
		          		<div class="earn-reward-bottom">
		          			<p>Please refer here for the latest updates. {{ config('app.name') }} reserves the right to modify the Reward programme at any time to ensure it continues to deliver the best value to our loyal customers.</p>
		          			{{--<a href="javascript:void(0);" class="btn btndark btn-sm">Learn More <span class="lnr lnr-arrow-right pl-1"></span></a>--}}
		          		</div>
		       		</div>
	       		</div>
	       	</div>
	    </div>
	</div>





@endsection



@section('scripts')

    <script type="text/javascript">
    	$(function() {
		    $('a.nav-link')[0].click();
		});
    	function viewFeatureDetail(id){
    		$(this).addClass('active');
    		$('#pageloader').css('display','flex');
    		$.ajax({
				url: "{{ url('customer/my-points/feature-detail') }}/"+id,
                type: "get",
                headers: {
                 'Cache-Control': 'no-cache, no-store, must-revalidate', 
                 'Pragma': 'no-cache', 
                 'Expires': '0'
                },
                success: function (response) {
                	$('#pageloader').css('display','none');
                    $('.vipFeatureContent').html(response);
                },
			});
    	}

    </script>

@endsection