@extends('website.layouts.master')

@section('site_title')نقاطي - @endsection
@section('content')
		<section class="page-title">
			<div class="container">
				<div class="row">
					<div class="col-2 col-md-1">
						<div class="title-icon">
							<i class="fas fa-tools"></i>
						</div>
					</div>
					<div class="col-6 col-md-6">
						<div class="page-text">
							<h5 class="mt-0">نقاطي</h5>
                            <p class="mb-0">
                            	 لديك
                            	<span class="balance">
                            		{{ Auth::guard('web')->user()->user_points()->sum('amount') }} نقطة
                            	</span>
                            	في رصيدك
                            </p>
						</div>
					</div>
					<div class="col-4 col-md-5">
						<div class="page-text">
							<a href="javascript:;" class="back-to-store create-modal" data-toggle="modal" data-target="#details_modal" style="">استبدال النقاط</a>
						</div>
					</div>
				</div>
			</div>

		</section>
		@include('website.includes.user_menu')
		<section class="points-usage title-margin">
				<div class="container-fluid points-container">
					<div class="row" style="margin-bottom: 10px;">
						<div class="col-6">
							<h5>النقاط المحصلة و المستخدمة خلال اخر 12 شهر</h5>
						</div>
						<div class="col-6">
							<a href="javascript:;" class="back-to-store create-modal" style="float: left;" data-toggle="modal" data-target="#details_modal" style="">استبدال النقاط</a>
						</div>
					</div>
					<div class="point-block text-center">
						<p class="point-item">
							#
						</p>
						<p class="point-item">
							تاريخ العملية
						</p>
						<p class="point-item">
							عدد النقاط
						</p>
						<p class="point-item">
							السبب
						</p>
						<p class="point-item">
							تاريخ الانتهاء
						</p>
					</div>
					@if (Auth::guard('web')->user()->user_points()->count())
					@foreach (Auth::guard('web')->user()->user_points()->orderBy('created_at', 'desc')->get() as $point)
					<div class="point-block text-center">
						<p class="point-item">
							{{ $loop->index+1 }}
						</p>
						<p class="point-date">
							{{ $point->created_at->format('Y-m-d') }}
						</p>
						<p class="point-count">
							{{ $point['amount'] }}
						</p>
						<p class="point-price">
							{{ $point['reason'] }}
						</p>
						<p class="point-price">
							{{ \Carbon\Carbon::parse($point->created_at)->addYear()->format('Y-m-d') }}
						</p>
					</div>
					@endforeach
					@else
					<div class="point-block text-center">
						<p class="text-center" style="width: 100%">
							لا يوجد لديك نقاط في رصيدك حالياً, اطلب الآن للحصول على نقاط أكثر
						</p>
					</div>
					@endif
				</div>
		</section>

		<div class="modal fade" id="details_modal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
			<div class="modal-dialog">
				<div class="modal-content">
					<div class="modal-header">
						<h5 class="modal-title" id="exampleModalLabel">استبدال النقاط</h5>
						<button type="button" class="close" data-dismiss="modal" aria-label="Close">
						<span aria-hidden="true">&times;</span>
						</button>
					</div>
					<form action="javascript:;" id="exchange_points_form">
						@csrf
						<div class="modal-body">
							<div class="row">
								<div class="col-md-12">
									<div class="form-group">
										<label class="d-block">لديك في رصيدك الآن <b> {{ Auth::guard('web')->user()->user_points()->sum('amount') }} </b> نقطة, ويمكنك الاستفادة منها من خلال استبدالها بالباقات المتوفرة</label>
									</div>
								</div>
							</div>
							<div class="row">
								<div class="col-md-8">
									<div class="form-group">
										<label for="amount" class="d-block">الباقات المتوفرة</label>
										<select name="amount" id="amount" class="form-control amount">
											<option value="">اختر الباقة</option>
											@foreach ($point_packages as $point_package)
											<option value="{{ $point_package->id }}" data-amount="{{ $point_package['points_amount'] }}" data-money="{{ $point_package['money_amount'] }}">
												{{ $point_package['name'] }}
											</option>
											@endforeach
										</select>
										<span class="invalid-feedback" role="alert">
											<strong id="amount_error">
											</strong>
										</span>
									</div>
								</div>
							</div>
							<div class="row">
								<div class="col-md-6">
									<div class="form-group">
										<label for="points_amount" class="d-block">النقاط المستخدمة</label>
										<input type="text" name="points_amount" id="points_amount" class="form-control" disabled>
									</div>
								</div>
								<div class="col-md-6">
									<div class="form-group">
										<label for="money_amount" class="d-block">سيتم ايداع رصيد بقيمة</label>
										<input type="text" name="money_amount" id="money_amount" class="form-control" disabled>
									</div>
								</div>
							</div>
						</div>
						<div class="modal-footer">
							<button type="button" class="btn btn-primary exchange_points_form">استبدل الآن</button>
							<button type="button" class="btn btn-secondary" data-dismiss="modal">الغاء</button>
						</div>
					</form>
				</div>
			</div>
		</div>
@endsection

@push ('page_level_style')
	<style type="text/css">
		.points-container {
			width: 60%
		}
		.point-block p {
			margin-left: 0px;
			width: 25%
		}
		a.back-to-store {
			background: #006a8a;
		}
	</style>
@endpush

@push ('page_level_script')
	<script type="text/javascript">
		function reset_errors() {
			$('#amount_error').html('');
		}

		$(document).on('change', '.amount', function(event) {
			event.preventDefault();
			$('#points_amount').val($(this).find('option:selected').data('amount') + ' نقطة');
			$('#money_amount').val($(this).find('option:selected').data('money') + ' ر.س.');
		});

		$(document).on('click', '.create-modal', function(event) {
			event.preventDefault();
			$('#amount').val('');
			$('#points_amount').val('');
			$('#money_amount').val('');
			reset_errors();
		});

		$(document).on('click', '.exchange_points_form', function(event) {
			event.preventDefault();
			reset_errors();
			// var form					=	document.getElementById('exchange_points_form');
			// var formData				=	new FormData(form);
			var amount		=	"amount=" + $('#amount').val();
			if (confirm('تأكيد العملية؟')) {
				$.ajax({
					url: "/exchange_points",
					type: "post",
					data: amount,
					success: function (data) {
						if (data.status) {
							swal('', data.message, 'success');
							$('#details_modal').modal('hide');
							window.location.replace('/points');
						} else {
							swal('', data.message, 'error');
							$.each(data.errors, function(key, value) {
								$('#' + key + '_error').html(value[0]);
							});
						}
					}
				});
			}
		});
	</script>
@endpush