@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>
						</div>
						<div class="page-text">
							<h5>
								تفاصيل الطلب - #{{ $order->id }}
							</h5>
							@if ($order->status == 'waiting_for_payment')
							<p class="mb-0">
								<a href="{{ route('website.orders.change_payment', ['slug' => $order->slug]) }}">
									تريد تغيير طريقة الدفع؟ اضغط هنا.
								</a>
							</p>
							@endif
						</div>
					</div>
					<div class="col-6 pl-0">
						<div class="page-text">
							<a href="{{ route('website.orders.index') }}" class="back-to-store">العودة لطلباتي</a>
						</div>
					</div>
				</div>
			</div>
		</section>
		<section class="cart-2 single-order-details">
			<div class="container-fluid">
				<div class="row">
					@if (($order->status == 'waiting_for_payment') && (in_array($order->payment_method, ['credit_cards', 'mada_online', 'apple_pay'])))
					<div class="col-lg-12">
						<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="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>
								@elseif ($order->payment_method == 'apple_pay')
								<div class="row">
									<form action="{{ route('website.orders.pay', ['order_id' => $order->id]) }}" class="paymentWidgets" data-brands="APPLEPAY"></form>
								</div>
								@else
								<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>
								@endif
							</div>
						</div>
					</div>
					@endif
					<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($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>{{ __('api.orders.products_price') }}</span>
									<p><span>{{ $order['price'] }}</span><span>ريال </span></p>
								</div>
								<div>
									<span>{{ __('api.orders.delivery_price') }}</span>
									<p><span>{{ $order['delivery_price'] }}</span> <span>ريال</span></p>
								</div>
								<div>
									<span>{{ __('api.orders.stair_cost') }})</span>
									<P><span>{{ $order['total_stair_cost'] }} </span><span>ريال</span></P>
								</div>
								<div>
									<span>{{ __('api.orders.total_discount') }}</span>
									<P><span>{{ $order['discount'] }} </span><span>ريال</span></P>
								</div>
								<div>
									<span>{{ __('api.orders.vat') }}</span>
									<P><span>{{ $order['vat'] }} </span><span>ريال</span></P>
								</div>
								<!-- Start total reciept -->
								<div class="total-receipt">
									<span>{{ __('api.orders.total_price') }}</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="order-info">
								<p>
									<span>طريقة الدفع: </span>
									<span>
										{{ __('api.payment_methods.' . $order['payment_method']) }}
									</span>
								</p>
								<p>
									<span>موعد التوصيل : </span>
									<span>
										{{ $order['delivery_date'] . ', ' . 'من  ' . $hour_types['ar'][$order->delivery_time] . ' إلى ' . $hour_types['ar'][$order->delivery_time+2] }}
									</span>
								</p>
								<p>
									<span>حالة الطلب : </span>
									<span>
										{{ __('api.user_order_statuses.' . $order['status']) }}
									</span>
								</p>
								<p>
									<span>عنوان التوصيل:</span>
									<span>{{ $order->user_address['name'] }}</span>
								</p>
								<div id="map-canvas"></div>
							</div>
							<div class="single-order-btns">
								@if ($order->status == 'done')
								<div class="rate-modal">
									<button type="button" class="btn btn-info" data-toggle="modal"
										data-target="#rateThreeModal">
										تقييم
									</button>
									<div class="modal fade" id="rateThreeModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
										<div class="modal-dialog" role="document">
											<div class="modal-content">
												<form action="{{ route('website.orders.rate', ['slug'	=>	$order['slug']]) }}" method="POST">
													@csrf
													<div class="modal-header">
														<h6 class="modal-title" id="exampleModalLabel">
															يمكنك تقييم الطلب اذا رغبت بتحسين الاداء
														</h6>
													</div>
													<div class="modal-body">
														<!-- start single rate serv -->
														<div class="single-rate-serv">
															<i class="fas fa-thumbs-up"></i>
															<p>تقييم الخدمة</p>
															<div class="product-rate">
																<i class="far fa-star"></i>
																<i class="far fa-star"></i>
																<i class="far fa-star"></i>
																<i class="far fa-star"></i>
																<i class="far fa-star"></i>
															</div>
															<input type="hidden" name="user_rate_service" id="user_rate_service" value="0">
														</div>
														<!-- End single rate serv -->
														<!-- start single rate serv -->
														<div class="single-rate-serv">
															<i class="fas fa-user"></i>
															<p>تقييم السائق</p>
															<div class="product-rate">
																<i class="far fa-star"></i>
																<i class="far fa-star"></i>
																<i class="far fa-star"></i>
																<i class="far fa-star"></i>
																<i class="far fa-star"></i>
															</div>
															<input type="hidden" name="user_rate_driver" id="user_rate_driver" value="0">
														</div>
														<!-- End single rate serv -->
														<!-- User opinion -->
														<div class="single-rate-serv user-opinion">
															<p>اكتب رايك</p>
															<textarea name="user_feedback" rows="4">
																{{ old('user_feedback') }}
															</textarea>
														</div>
														<div class="rate-modal-btn">
															<button type="submit" class="btn confirm-serv-rate">تقييم</button>
															<a href="javascript:;" class="btn cancel-serv-rate" data-dismiss="modal"> الغاء</a>
														</div>
													</div>
												</form>
											</div>
										</div>
									</div>
								</div>
								@endif
								@if (in_array($order->status, ['waiting_for_payment', 'pending', 'approved', 'driver_accepted']))
								<div class="rate-modal">
									<button type="button" class="btn btn-info" data-toggle="modal" data-target="#cancelModal">
										الغاء
									</button>
									<!-- Modal -->
									<div class="modal fade" id="cancelModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
										<form action="{{ route('website.orders.cancel', ['slug'	=>	$order['slug']]) }}" method="POST">
											@csrf
											<div class="modal-dialog" role="document">
												<div class="modal-content">
													<div class="modal-header">
														<h6 class="modal-title" id="exampleModalLabel">
														قم باختيار سبب الالغاء
														</h6>
													</div>
													<div class="modal-body">
														<!-- User opinion -->
														<div class="single-rate-serv user-opinion">
															<p>سبب الالغاء</p>
															<select name="cancel_reason_id">
																@foreach (App\Models\CancelReason::user()->get() as $cancel_reason)
																<option value="{{ $cancel_reason->id }}">{{ $cancel_reason['reason'] }}</option>
																@endforeach
															</select>
														</div>
														<div class="rate-modal-btn">
															<button class="btn "> تاكيد</button>
															<a href="javascript:;" class="btn cancel-serv-rate" data-dismiss="modal"> الغاء</a>
														</div>
													</div>
												</div>
											</div>
										</form>
									</div>
								</div>
								@endif
								<a href="{{ route('website.orders.invoice', ['order' => $order->slug]) }}" target="__blank" class="btn btn-info">طباعة الفاتورة</a>
							</div>
						</div>
					</div>
				</div>
			</div>
		</section>
@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; 
			margin: 0; 
		}
		@media (min-width: 992px){
			.page-title .title-icon i {
				margin-left: 20px;
			}
		}
		@media (max-width: 768px){
			.address-col {
				margin-top: 20px;
			}
		}
		#map-canvas {
			width: 100%;
			min-height: 300px;
			height: 100%;
		}
		@media only screen and (max-width: 479px) {
			#map-canvas {
				width: 250px;
				height: 250px;
			}
		}
	</style>
	@if (!in_array($order->payment_method, ['apple_pay']))
	<style type="text/css">
		.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>
	@endif
	<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')
	@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
	@if (($order->status == 'waiting_for_payment') && (in_array($order->payment_method, ['credit_cards', 'mada_online', 'apple_pay'])))
	<script type="text/javascript">
		var wpwlOptions = {
			locale: "en"
		}
	</script>
		@if (in_array($order->payment_method, ['apple_pay']))
		<script type="text/javascript">
			applePay: {
				locale: "en",
				displayName: "Suqiakum",
				total: {
					label: "شركة أصول للاتصالات"
				}
			}
		</script>
		@endif
	<script src="https://oppwa.com/v1/paymentWidgets.js?checkoutId={{ $order->checkout_id }}"></script>
	@endif
	<script type="text/javascript">
		var map;
		function initMap() {
			map = new google.maps.Map(document.getElementById('map-canvas'), {
				center: {
					lat: {{ $order->address['latitude'] }},
					lng: {{ $order->address['longitude'] }}
					
				},
				zoom: 10
			});

			var myLatLng = {lat: {{ $order->address['latitude'] }}, lng: {{ $order->address['longitude'] }}};
			var marker = new google.maps.Marker({
				position: myLatLng,
				map: map,
				title: 'العنوان'
			});
		}
	</script>
	<script async defer src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCmgVVBWPoe_QmTLa_0UCnMUj0aZGlZnsg&libraries=drawing&callback=initMap"></script>
@endpush