@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>
					@php
						$user			=	Auth::guard('web')->user();
						$gift_value		=	0;//!!$user['gift_used']? 0 : 20;
						$user_balance	=	round(\App\Models\UserWallet::get_total_user_credit($user->id), 4);
					@endphp
					<div class="col-6 col-md-6">
						<div class="page-text">
							<h5 class="mt-0">محفظتي</h5>
							<p class="mb-0">
								 لديك
								<span class="balance">
									{{ $user_balance + $gift_value }} ريال سعودي
								</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">
								شحن المحفظة
							</a>
						</div>
					</div>
				</div>
			</div>
		</section>
		@include('website.includes.user_menu')

		<section class="points-usage title-margin">
			<div class="container-fluid">
				<div class="row">
					<div class="col-8">
						<div class="row" style="margin-bottom: 10px;">
							<div class="col-6">
								<h5>ملخص العمليات على المحفظة</h5>
							</div>
						</div>
					</div>
				</div>
				<div class="row">
					<div class="col-8">
						<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 ($user->user_wallets()->count('id'))
						@foreach ($user->user_wallets()->orderBy('created_at', 'desc')->get() as $point)
						@if (!$user['gift_used'] && !$loop->index)
						<div class="point-block text-center">
							<p class="point-item">
								0
							</p>
							<p class="point-item">
								{{ date('Y-02-22 H:i:s') }}
							</p>
							<p class="point-item" style="direction: ltr;">
								20
							</p>
							<p class="point-item">
								-
							</p>
							<p class="point-item">
								هدية يوم التأسيس (تنتهي في 03-03)
							</p>
						</div>
						@endif
						<div class="point-block text-center">
							<p class="point-item">
								{{ $loop->index+1 }}
							</p>
							<p class="point-item">
								{{ $point->created_at->format('Y-m-d') }}
							</p>
							<p class="point-item" style="direction: ltr;">
								{{ $point['amount'] }}
							</p>
							<p class="point-item">
								{{ $point['order_id']?? '-' }}
							</p>
							<p class="point-item">
								{{ $point['reason']?? '-' }}
							</p>
						</div>
						@endforeach
						@else
						<div class="point-block">
							<p class="text-center" style="width: 100%">
								لا يوجد لديك سجل في حركاتك المالية
							</p>
						</div>
						@endif
					</div>
				</div>
			</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="charge_wallet_form">
						@csrf
						<div class="modal-body">
							<div class="row">
								<div class="col-md-6">
									<div class="form-group">
										<label for="amount" class="d-block">المبلغ المراد شحنه</label>
										<input type="number" name="amount" id="amount" value="{{ old('amount') }}" autocomplete="off" placeholder="ادخل المبلغ" class="form-control">
										<span class="invalid-feedback" role="alert">
											<strong id="amount_error">
											</strong>
										</span>
									</div>
								</div>
							</div>
						</div>
						<div class="modal-footer">
							<button type="button" class="btn btn-primary charge_wallet_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">
		input[type=number]::-webkit-inner-spin-button, input[type=number]::-webkit-outer-spin-button { 
			-webkit-appearance: none;
			direction: ltr;
		}
		.point-block p {
			margin-left: 0px;
			width: 20%
		}
	</style>
@endpush

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

		$(document).on('click', '.create-modal', function(event) {
			event.preventDefault();
			$('#amount').val('');
			reset_errors();
		});
		$(document).on('click', '.charge_wallet_form', function(event) {
			event.preventDefault();
			reset_errors();
			// var form					=	document.getElementById('charge_wallet_form');
			// var formData				=	new FormData(form);
			var amount		=	"amount=" + $('#amount').val();

			$.ajax({
				url: "/check_charge_wallet",
				type: "get",
				cache:false,
				contentType: false,
				processData: false,
				data: amount,
				success: function (data) {
					if (data.status) {
						window.location.replace('/charge_wallet?amount=' + $('#amount').val());
					} else {
						swal('', data.message, 'error');
						$.each(data.errors, function(key, value) {
							$('#' + key + '_error').html(value[0]);
						});
					}
				}
			});
		});
	</script>
@endpush