@extends('layouts.default1400-profile', ['title' => 'دنت کلاب'])

@section('meta')
@stop

@section('content')
<div x-data="{ currentTab: 'tabone' }">
	<div class="md:flex justify-between border-gray-100 border-b-2 text-sm items-center truncate overflow-hidden">
		<div class="md:flex justify-start">
			<button
				x-bind:class="{ 'border-blue-500': currentTab == 'tabone', 'border-gray-100': currentTab != 'tabone'  }"
				x-on:click="currentTab='tabone'"
				class="flex px-4 py-2 mx-1 justify-start hover:bg-blue-100 border-b-4 border-blue-500">
				جوایز( امتیاز شما : <b>{{ EnNum2FaNum($currentPoint) }}</b>)
			</button>
			<button
				x-bind:class="{ 'border-blue-500': currentTab == 'tabtwo', 'border-gray-100': currentTab != 'tabtwo'  }"
				x-on:click="currentTab='tabtwo'"
				class="flex px-4 py-2 mx-1 justify-start hover:bg-blue-100 border-b-4 border-blue-500">
				تاریخچه امتیازات
			</button>
		</div>
	</div>

	<div class="tabone" x-show="currentTab == 'tabone'">

		<div class="text-sm m-4 grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-3">

			@foreach ($customersClubSettingSpend as $spend_item)
			<div class="hidden" id="dvDescription{{ $spend_item->id }}">
				{{ $spend_item->getValue('description') }}
			</div>

			<div
				class="flex flex-col items-center text-center bg-white filter drop-shadow-xl rounded-lg border border-solid border-1 border-gray-200">

				<img src="/img-new1400/gift-ribben.png" class="rounded-lg w-full z-10">

				<div class="absolute top-7 text-2xl text-amber-400 z-20"> {{ EnNum2FaNum($spend_item->point) }} امتیاز
				</div>

				<p class=" p-4">
					{{ $spend_item->getValue('summery') }}
				</p>
				<p class="text-gray-400 my-4">{!! $spend_item->user_preview_expire !!}</p>

				@if($spend_item->point > $currentPoint)
				<span class="text-red-500">
					{{ EnNum2FaNum($spend_item->point - $currentPoint) }} امتیاز کم
					دارید!</span>
				@endif

				<button type="button"
					data-link="{{ $spend_item->point > $currentPoint ? '' : route('user.customers-club.buy', ['id' => $spend_item->id ]) }}"
					data-id="{{ $spend_item->id }}" data-toggle="modal" data-target="#descriptionModal"
					class="border mb-8 px-5 py-2">
					اطلاعات بیشتر و دریافت جایزه
				</button>

			</div>
			@endforeach

		</div>

	</div>

	<div class="tabtwo p-8" x-show="currentTab == 'tabtwo'">

		<div class="overflow-x-auto">
			<table class="table w-full table-zebra text-sm">
				<tr>
					<th>#</th>
					<th>تاریخ</th>
					<th>عنوان</th>
					<th>امتیاز</th>
					<th>تاریخ انقضاء</th>
				</tr>
				@foreach ($data as $item)
				<tr>
					<td>{{ $loop->iteration }}</td>
					<td>{{ GetShamsiDateWithoutTime($item->created_at) }}</td>
					<td>{{ $item->customersClubSetting->title }}</td>
					<td style="  color:{{ $item->transaction_type =='earn' ? 'green' : 'red' }};">
						{{ $item->point_with_sign }}
					</td>
					<td>{{ GetShamsiDateWithoutTime($item->expired_at) }}</td>
				</tr>
				@endforeach
			</table>

		</div>

	</div>


</div>

@stop

@section('scripts')
<script>
	$('button[data-toggle="modal"]').click(function(){
        var id = $(this).data('id');
        var link = $(this).data('link');
        var description = $('#dvDescription' + id).html();
 
		if(link== ''){
			alertify.alert('جزئیات جایزه', description).set('label', 'بستن');
		}else{ 
			alertify.confirm('جزئیات جایزه', description, 
				function(){ window.location.href = link; }
				, function(){  })
				.set('labels', {ok:`<lable class="flex">
                            <img class="h-4 pl-2" src="/svgs-new1400/gifts-white.svg">  دریافت جایزه
                        </lable>`, cancel:'بستن'});
		}

    });
 
</script>
@endsection