@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>
							<div class="single-order">
								<h4 style="color: #E10000;">
									يرجى عدم اغلاق الصفحة قبل اتمام عملية الدفع
								</h4>
								@if ($order->payment_method == 'mada_online')
								<div class="row">
									<form action="{{ route('website.orders.pay', ['order_id' => $order->id]) }}" class="paymentWidgets" data-brands="MADA"></form>
								</div>
								@else
								<div class="row">
									<form action="{{ route('website.orders.pay', ['order_id' => $order->id]) }}" class="paymentWidgets" data-brands="VISA MASTER"></form>
								</div>
								@endif
							</div>
						</div>
					</div>
				</div>
			</div>
		</section>
@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;
		}
	</style>
@endpush

@push('page_level_script')
	<script type="text/javascript">
		var wpwlOptions = {
			locale: "en"
		}
	</script>
	<script src="https://oppwa.com/v1/paymentWidgets.js?checkoutId={{ $order->checkout_id }}"></script>
@endpush