@extends('website.layouts.master')

@section('site_title')الدفع للطلب -@endsection
@section('content')
		<section class="page-title ">
			<div class="container">
				<div class="row">
					<div class="col-6">
						<div class="title-icon">
							<i class="fas fa-clipboard-list"></i>
							<h5>الدفع للطلب - #{{ $order->id }}</h5>
						</div>
					</div>
					<div class="col-6 pl-0">
						<div class="page-text">
							<a href="{{ route('website.orders.show_details', ['slug' => $order['slug']]) }}" class="back-to-store">عرض تفاصيل الطلب</a>
						</div>
					</div>
				</div>
			</div>
		</section>
		<section class="cart-2 single-order-details">
			<div class="container-fluid">
				<div class="row">
					<div class="col-lg-6">
						<div class="orders-cart">
							<div class="cart-title">
								<h5>ملخص الطلب</h5>
							</div>
							@foreach($order->order_products()->get() as $product)
							<div class="single-order">
								<div class="row">
									<div class="col-8 col-md-9 col-lg-9 col-xl-9">
										<div class="order-content">
											<div class="order-img">
												<div style="background-image:url('{{ URL::asset('/img/product_thumbnail/' . $product['image']) }}')"></div>
											</div>
											<div class="order-details">
												<p class="order-name">
													{{ $product['name'] }}
												</p>
												<div>
													<p>
														<span class="order-price">
															{{ $product->pivot['quantity'] }}
														</span>
														<i class="fas fa-times"></i>
														<span class="order-price">
															{{ $product->pivot['price'] }}
														</span>
													</p>
												</div>
											</div>
										</div>
									</div>
									<div class="col-4 col-md-3 col-lg-3 col-xl-3">
										<div class="total-price">
											<p><span class="total">{{ $product->pivot['quantity'] * $product->pivot['price'] }}</span> ريال</p>
										</div>
									</div>
								</div>
							</div>
							@endforeach
							<div class="calculate-price">
								<div>
									<span>سعر المنتجات</span>
									<p><span id="total"></span><span>ريال </span></p>
								</div>
								<div>
									<span>رسوم التوصيل</span>
									<p><span>{{ $order['delivery_price'] }}</span> <span>ريال</span></p>
								</div>
								<div>
									<span>القيمة المضافة</span>
									<P><span>{{ $order['vat'] }} </span><span>ريال</span></P>
								</div>
								<div>
									<span>اجمالي الخصم</span>
									<P><span>{{ $order['discount'] }} </span><span>ريال</span></P>
								</div>
								<!-- Start total reciept -->
								<div class="total-receipt">
									<span>الاجمالي ( المستحق للدفع )</span>
									<P><span id="receipt"> {{ $order['total_price'] }} </span><span>ريال</span></P>
								</div>
								<!-- End total reciept -->
							</div>
						</div>
					</div>
					<div class="col-lg-6">
						<div class="orders-cart">
							<div class="cart-title">
								<h5>الدفع للطلب</h5>
							</div>
							@if (in_array($order->payment_method, ['credit_cards', 'mada_online']))
							<div class="single-order card-form">
								<h4 style="color: #E10000;">
									يرجى عدم اغلاق الصفحة قبل اتمام عملية الدفع
								</h4>
								<div class="col-lg-6">
									<div class="card">
										<div class="card-front card-part" id="card-front">
											<img alt="" class="card-front-square card-square" src="{{ URL::asset('/assets/card/icons/sim-card-chip.png') }}">
											<img alt="" class="card-front-square card-square" src="{{ URL::asset('/assets/card/icons/contactless-payment-white.png') }}"/>
											<img alt="" class="card-front-logo card-logo" src="{{ URL::asset('/assets/card/logos/22.svg') }}">
											<p class="card-number" id="card-number">**** **** **** ****</p>
											<div class="card-space-75">
												<span class="card-label">Card holder</span>
												<p class="card-info" id="card-holder">Your name here</p>
											</div>
											<div class="card-space-25">
												<span class="card-label">Expires</span>
												<p class="card-info" id="card-expires-date">MM/YY</p>
											</div>
										</div>

										<div class="card-back card-part" id="card-back">
											<div class="card-black-line"></div>
											<div class="card-back-content">
												<div class="card-secret">
													<p class="card-secret--last" id="card-secret-cvc">***</p>
												</div>
												<img alt="" class="card-back-logo card-logo" src="{{ URL::asset('/assets/card/logos/22.svg') }}">
											</div>
										</div>
									</div>
									<div>
										<form role="form" method="POST" action="javascript:;" id="payment-form">
											@csrf
											<div class="row">
												<label>Card holder:</label>
												<input name="holder_name" id="card-holder-input" placeholder="Card holder name" type="text" autocomplete="off">
											</div>
											<div class="row">
												<label>Card number:</label>
												<input name="card_number" id="card-number-input" maxlength="19" minlength="19" placeholder="Card number" type="text" autocomplete="off">
											</div>
											<div class="row">
												<div class="col-50">
													<label>Expires:</label>
													<input name="expiry_month" id="card-expires-date-input" max="1299" maxlength="5" minlength="5" placeholder="MM/YY" type="text" autocomplete="off">
												</div>
												<div class="col-50">
													<label>CVC:</label>
													<input name="cvv" id="card-secret-cvc-input" max="999" maxlength="4" min="100" minlength="4" placeholder="CVC" type="text" autocomplete="off">
												</div>
												<input type="hidden" name="order_id" value="{{ $order->id }}">
											</div>
											<div class="row">
												<button class="btn btn-primary btn-block" type="submit"> Pay Now </button>
											</div>
										</form>
									</div>
								</div>
							</div>
							@elseif ($order->payment_method == 'apple_pay')
							<div class="single-order">
								<h4 style="color: #E10000;">
									يرجى عدم اغلاق الصفحة قبل اتمام عملية الدفع
								</h4>
								<div class="row">
									<form action="{{ route('website.orders.pay', ['order_id' => $order->id]) }}" class="paymentWidgets" data-brands="APPLEPAY"></form>
								</div>
							</div>
							@endif
						</div>
					</div>
				</div>
			</div>
		</section>
		<div id="load">
			<img id="loading-image" src="/assets/admin/ajax-loader.gif" alt="Loading..."/>
		</div>
@endsection

@push('page_level_style')
	<style type="text/css">
		@media (min-width: 992px){
			.page-title .title-icon i {
				margin-left: 20px;
			}
		}
		.wpwl-group {
			direction: ltr;
		}
		.wpwl-form {
			background-color: #006a8a;
		}
		.wpwl-label {
			color: #fff;
		}
		.wpwl-button-pay {
			color: #4cae4c;
			background-color: #fff;
			border-color: #fff;
		}
		input {
			direction: ltr;
			text-align: left;
		}
		.card, #payment-form {
			direction: ltr;
			text-align: left;
		}
	</style>
	<style type="text/css">
		#loading{
			width: 100%;
			height: 100%;
			top: 0;
			left: 0;
			position: fixed;
			display: none;
			opacity: 0.8;
			z-index: 100000;
			background-color: #fff;
			z-index: 199;
			text-align: center;
		}

		#load{
			width: 100%;
			height: 100%;
			top: 0;
			left: 0;
			position: fixed;
			display: block;
			opacity: 0.8;
			z-index: 100000;
			background-color: #fff;
			z-index: 199;
			text-align: center;
		}

		#loading-image {
			position: absolute;
			top: 50%;
			z-index: 200;
			right: 50%;
			z-index: 200;
		}
	</style>
	<link href="/assets/card/css/bank-card.css" rel="stylesheet">
@endpush

@push('page_level_script')
	<script type="text/javascript">
		$("#load").hide();
		$('#loading').hide();
	</script>
	@if ($order->payment_method == 'apple_pay')
	<script type="text/javascript">
		var wpwlOptions = {
			locale: "en"
		}
	</script>
	<script src="https://oppwa.com/v1/paymentWidgets.js?checkoutId={{ $order->checkout_id }}"></script>
	@endif

	@if (in_array($order->payment_method, ['credit_cards', 'mada_online']))
	<script src="https://unpkg.com/emodal@1.2.69/dist/eModal.min.js" /></script>
	<script src="{{ URL::asset('/assets/card/bank-card.js') }}" /></script>

	<script type="text/javascript">
		$(document).on("hide.bs.modal", ".modal", function() {
			location.reload();
		});
		$(document).on('submit', '#payment-form', function (event) {
			event.preventDefault();
			$("#load").show();
			
			var formData = new FormData(this);

			$.ajax({
				url: "/orders/create_checkout",
				type: "POST",
				cache: false,
				contentType: false,
				processData: false,
				data: formData,
				success: function(data){
					$("#load").hide();
					var result = data;//[0];
					if (!!result['status']) {
						url = result.data;//.result.split(':');
						eModal.iframe(url, 'استكمال عملية الدفع');
					} else {
						swal({
							title: "",
							text: data.message,
							icon: "error",
							showCancelButton: false,
							confirmButtonColor: "#DD6B55",
							confirmButtonText: "{{ __('app.ok') }}",
							cancelButtonText: "{{ __('app.cancel') }}",
							closeOnConfirm: true,
							closeOnCancel: true
						});
					}
				},
				complete: function (data) {
				},
				error: function (jqXHR, textStatus, errorThrown) {
					$("#load").hide();
					swal({
						title: "",
						text: 'المعذرة',
						icon: "error",
						showCancelButton: false,
						confirmButtonColor: "#DD6B55",
						confirmButtonText: "{{ __('app.ok') }}",
						cancelButtonText: "{{ __('app.cancel') }}",
						closeOnConfirm: true,
						closeOnCancel: true
					});
				}
			});
		});
	</script>
	@endif
@endpush