@extends('website.layouts.master')

@section('site_title')سلة التسوق@endsection

@section('left-nav')
								<a class="cart mr-0" href="{{ route('website.home') }}">
									<i class="fas fa-arrow-circle-left"></i>
								</a>
@endsection

@section('content')
		<section class="page-title cart-header">
			<div class="container">
				<div class="row ">
					<div class="col-6">
						<div class="title-icon">
							<i class="fas fa-shopping-basket"></i>
							<h5>سلة التسوق</h5>
						</div>
					</div>
					<div class="col-6 pl-0">
						<div class="page-text">
							<a href="{{ route('website.home') }}" class="back-to-store">العودة لأكمال التسوق</a>
						</div>
					</div>
				</div>
			</div>
		</section>
		<section class="cart-steps">
			<div class="container">
				<div class="steps">
					<p>
						<span class="check active">
							<i class="fas fa-check"></i>
						</span>
						<span>سلة الطلبات</span>
					</p>
					<p>
						<span class="check active">
							<i class="fas fa-check"></i>
						</span>
						<span>مراجعة الطلب</span>
					</p>
					<p>
						<span class="check">
							<i class="fas fa-check"></i>
						</span>
						<span>تنفيذ الطلب</span>
					</p>
				</div>
			</div>
			<div class="cart-2">
				<div class="container-fluid">
					<form action="javascript:;" method="POST" id="create-order-form">
						@csrf
						<div class="row">
							<div class="col-lg-4">
								<div class="orders-cart">
									<div class="cart-title">
										<h5>ملخص الطلب</h5>
									</div>
									<div class="calculate-price">
										<div>
											<span>سعر المنتجات</span>
											<p><span id="total"></span><span>ريال </span></p>
										</div>
										<div>
											<span>رسوم التوصيل</span>
											<p><span>11.95</span> <span>ريال</span></p>
										</div>
										<div>
											<span>خصم النقاط</span>
											<P><span>19.21 </span><span>ريال</span></P>
										</div>
										<div>
											<div class="form-group ">
												<div class="mail">
													<select class="form-control" id="stair_no" name="stair_no">
														<option value="0">الدور الأرضي (أو يوجد مصعد للرفع)</option>
														@foreach (\App\Models\StairCost::orderby('stair_no', 'asc')->get(['id', 'stair_no', 'cost']) as $stair_cost)
														<option value="{{ $stair_cost['cost'] }}"> {{ $stair_cost['stair_no'] }} </option>
														@endforeach
													</select>
												</div>
											</div>
										</div>
										<div>
											<div class="form-group ">
												<div class="mail">
													<input class="form-control" type="text" id="copoun_code" name="copoun_code" placeholder="ادخل كوبون الخصم" autocomplete="off">
												</div>
											</div>
											<a href="javascript:;" id="check_code">فحص</a>
										</div>
										<div class="total-receipt">
											<span>الاجمالي ( المستحق للدفع )</span>
											<P><span id="receipt"> 189.90 </span><span>ريال</span></P>
										</div>
									</div>
									<div class="delivery-details">
										<div class="cart-title">
											<h5>بيانات التوصيل</h5>
										</div>
										<div class="delivery-form">
											<div class="row">
												<div class="col-lg-12 col-xl-6">
													<label for="recipient_name">الأسم</label>
													<input type="text" name="recipient_name" value="{{ old('recipient_name')?: $user['name'] }}" placeholder="اسم المستلم">
													<span class="invalid-feedback" role="alert">
														<strong id="recipient_name-error">
														</strong>
													</span>
												</div>
												<div class="col-lg-12 col-xl-6">
													<label for="recipient_phone">الهاتف</label>
													<input type="number" name="recipient_phone" value="{{ old('recipient_phone')?: $user['phone'] }}" placeholder="0566123456">
													<span class="invalid-feedback" role="alert">
														<strong id="recipient_phone-error">
														</strong>
													</span>
												</div>
											</div>
											<div class="row">
												<div class="col-12">
													<label for="comment">ملاحظة أو تعليق</label>
													<textarea name="user_notes" placeholder="مثال لا تدق الجرس لأنه لا يعمل ">{{ old('user_notes') }}</textarea>
													<span class="invalid-feedback" role="alert">
														<strong id="user_notes-error">
														</strong>
													</span>
												</div>
											</div>
										</div>
									</div>
								</div>
							</div>
							<div class="col-lg-4">
								<div class="orders-cart order-location">
									<div class="cart-title">
										<h5>وقت التوصيل</h5>
									</div>
									<p style="color: red;" id="time_id-error"></p>
									<p style="color: red;" id="date-error"></p>

									<div class="delivery-time">
										<ul class="nav nav-pills mb-3 row " id="pills-tab" role="tablist">
											@foreach ($available_days as $available_day)
											@if (count($available_day['times']))
											<li class="nav-item col-md-3 col-6">
												<a class="nav-link {{ ($loop->index == 0)? 'active' : '' }}" id="pills-{{ $loop->index }}-tab" data-toggle="pill" href="#pills-{{ $loop->index }}" role="tab" aria-controls="pills-{{ $loop->index }}"
													aria-selected="{{ ($loop->index == 0)? 'true' : 'false' }}">
													<div class="single-day {{ ($loop->index == 0)? 'active' : '' }}">
														<h5>{{ $available_day['day'] }}</h5>
														<span class="date">
															{{ $available_day['date'] }}
														</span>
													</div>
												</a>
											</li>
											@endif
											@endforeach
										</ul>
										<div class="tab-content" id="pills-tabContent">
											@php $available_time_counter = 0 @endphp
											@foreach ($available_days as $available_day)
											@if (count($available_day['times']))
											<div class="tab-pane fade {{ ($loop->index == 0)? 'show active' : '' }}" id="pills-{{ $loop->index }}" role="tabpanel" aria-labelledby="pills-{{ $loop->index }}-tab">
												<div class="day-times">
													<p>اختر وقت التوصيل المناسب لك</p>
													@foreach ($available_day['times'] as $available_time)
													<div class="single-time">
														<label for="time-{{ ++$available_time_counter }}" class="">
															<input type="radio" class="single-time-radio" id="time-{{ $available_time_counter }}" name="time_id[{{ $available_day['date'] }}]" value="{{ $available_time['id'] }}">
															<div>
																<span class="start-time">{{ $available_time['time'] }}</span>
																<p>قد تتأثر بأوقات الصلاة</p>
															</div>
														</label>
													</div>
													@endforeach
												</div>
											</div>
											@endif
											@endforeach
										</div>
									</div>
								</div>
							</div>
							<div class="col-lg-4">
								<div class="orders-cart">
									<div class="cart-title">
										<h5>طريقة الدفع</h5>
										<span>
											<a href="{{ route('website.users.wallet') }}" style="color: #ffbf2a;font-size: 18px;font-weight: 600;">
												<span class="cart-num" id="shopCart" style="
																						position: absolute;
																						right: unset;
																						left: 20px;
																						top: 0px;
																						background: red;
																						color: #fff;
																						border-radius: 20%;
																						width: 45px;
																						height: 25px;
																						text-align: center;
																						line-height: 22px;
																						font-size: 22px;">جديد</span>
												شحن المحفظة
											</a>
										</span>
									</div>

									<p style="color: red;" id="payment_method-error"></p>
									<p style="color: red;" id="stc_pay_number-error"></p>
									<label for="wallet">
										<input type="radio" name="payment_method" class="payment_method" value="wallet" id="wallet">
										<div class="single-payment">
											<div class="payment-method">
												@php
													$gift_value	=	!!$user['gift_used']? 0 : 20;
												@endphp
												<h5><span></span>المحفظة (لديك "{{ round(intval(\App\Models\UserWallet::get_total_user_credit($user->id)) + $gift_value, 4) }} ر.س." في رصيدك)</h5>
												<p>يمكنك الاستفادة من رصيدك في المحفظة</p>
											</div>
											<div class="payment-logo">
												<img src="{{ URL::asset('/assets/website/images/wallet.png') }}" alt="payment-method">
											</div>
										</div>
									</label>
									<label for="viza">
										<input type="radio" name="payment_method" class="payment_method" value="credit_cards" id="viza">
										<div class="single-payment">
											<div class="payment-method">
												<h5><span></span>البطاقة الائتمانية</h5>
												<p>نقبل البطاقات الائتمانية فيزا و ماستر كارد ومدى</p>
											</div>
											<div class="payment-logo">
												<img src="{{ URL::asset('/assets/website/images/viza.png') }}" alt="payment-method">
											</div>
										</div>
									</label>
									<label for="apple_pay">
										<input type="radio" name="payment_method" class="payment_method" value="apple_pay" id="apple_pay">
										<div class="single-payment">
											<div class="payment-method">
												<h5><span></span>ابل باي (Apple Pay)</h5>
												<p>
													يجب استخدام متصفح Safari لاتمام عملية الدفع
												</p>
											</div>
											<div class="payment-logo">
												<img src="{{ URL::asset('/assets/website/images/apple_pay.png') }}" alt="payment-method">
											</div>
										</div>
									</label>
									<label for="mada_online">
										<input type="radio" name="payment_method" class="payment_method" value="mada_online" id="mada_online">
										<div class="single-payment">
											<div class="payment-method">
												<h5><span></span>مدى (الكتروني)</h5>
												<p>
													يمكنك الدفع عبر مدى Online
												</p>
											</div>
											<div class="payment-logo">
												<img src="{{ URL::asset('/assets/website/images/Mada_Logo.png') }}" alt="payment-method">
											</div>
										</div>
									</label>
									<label for="stcpay">
										<input type="radio" name="payment_method" class="stcpayment payment_method" value="stc_pay" id="stcpay">
										<div class="single-payment">
											<div class="payment-method">
												<h5><span></span>الدفع عن طريق STCPay</h5>
												<ul class="stcpayment-option">
													<li>
														<label for="stc_pay">
															<input type="number" name="stc_pay_number" class="form-control d-inline-block stc-pay-number" value="{{ old('stc_pay_number') ?:'0' . $user->phone }}">
														</label>
													</li>
												</ul>
												<p>بامكانك اضافة رقم المسجل في خدمة STCPay ليصلك اشعار الدفع من خلال تطبيق STCPay</p>
											</div>
											<div class="payment-logo">
												<img src="{{ URL::asset('/assets/website/images/stcpay.png') }}" alt="payment-method">
											</div>
										</div>
									</label>
									<label for="payCash">
										<input type="radio" name="payment_method" class="payment_method" value="cash" id="payCash">	
										<div class="single-payment">
											<div class="payment-method">
												<h5><span></span>الدفع عند الاستلام</h5>
												<ul class="cash-option">
													<li>
														<label for="cash">
															<input type="radio" name="payment_method" value="cash" id="cash" class="d-inline-block payment_method">
															كاش(نقدى)
														</label>
													</li>
													<li>
														<label for="mada">
															<input type="radio" name="payment_method" value="mada" id="mada" class="d-inline-block payment_method">
															 مدى (شبكة)
														</label>
													</li>
												</ul>
												<p>يمكنك الدفع عند استلام الطلب</p>
											</div>
											<div class="payment-logo">
												<img src="{{ URL::asset('/assets/website/images/Finance.png') }}" alt="payment-method">
											</div>
										</div>
									</label>
								</div>
								<a href="javascript:;" id="order-button">
									<div class="total-orders">
										اتمام الطلب

										<span>الأسعار شاملة قيمة الضريبة المضافة</span>
									</div>
								</a>
							</div>
						</div>
					</form>
				</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;
			direction: ltr;
		}
		.wpwl-apple-pay-button{-webkit-appearance: -apple-pay-button !important;}

		a.disabled {
			cursor: not-allowed;
		}
	</style>
@endpush

@push('page_level_script')
	<script type="text/javascript">
		function reset_errors() {
			$('#recipient_name-error').html('');
			$('#recipient_phone-error').html('');
			$('#user_notes-error').html('');
			$('#time_id-error').html('');
			$('#date-error').html('');
			$('#payment_method-error').html('');
			$('#stc_pay_number-error').html('');
		}

		$(document).on('change', '.single-time-radio', function(){
			$('.single-time-radio').not($(this)).each(function () {
				$(this).prop('checked', false);
			});
		});

		$(document).on('change', '.payment_method', function(){
			if ($(this).val() == 'stc_pay') {
				get_total_price (false);
			} else {
				get_total_price ();
			}
		});

		$(document).on('click', '#order-button', function(event) {
			event.preventDefault();
			if (!this.classList.contains('disabled')) {
				reset_errors();
				var formData	=	new FormData($("#create-order-form")[0]);
				order_btn		=	$(this);
				order_btn.addClass('disabled');

				$.ajax({
					url: "{{ route('website.orders.store', ['address' => \Request::get('address_id')]) }}",
					type: "post",
					cache: false,
					contentType: false,
					processData: false,
					data: formData,
					success: function (data) {
						if(data['status'] == true){
							swal({title: data.message, className: "order_succeed", icon: 'success'}).then((result) => {
								if (data.redirect) {
									window.location.href = data.redirect
								}
							});
						} else {
							swal({
								title: "",
								text: data.message,
								icon: "warning",
								buttons: true,
								dangerMode: true,

								type: "error",
								showCancelButton: false,
								confirmButtonText: "حسناً",
								closeOnConfirm: true
							}).then(function () {
								$.each(data.errors, function(key, value) {
									$('#' + key + '-error').html(value[0]);
								});
								order_btn.removeClass('disabled');
							});
						}
					},
					error: function (jqXHR, textStatus, errorThrown) {
						order_btn.removeClass('disabled');
						swal({
							title: 'عذرا',
							text: "يرجى اعادة المحاولة",
							type: "error",
							icon: "warning",
							showCancelButton: false,
							confirmButtonText: "حسناً",
							closeOnConfirm: true,
						});
					}
				});
			}
		});

		$(document).on('click', '#check_code', function() {
			var dataString = "copoun_code=" + $('#copoun_code').val() + "&company_id={{ $user->user_carts()->first()->company_id }}";
			$.ajax({
				type: "POST",
				url: "/copouns/check",
				data: dataString,
				success: function(data){
					var data_status = data.status? 'success' : 'error';
					swal('', data.message, data_status).then (function () {
						get_total_price ();
					});
				},
				error: function (jqXHR, textStatus, errorThrown) {
					swal({
						title: 'عذرا',
						text: "يرجى اعادة المحاولة",
						type: "error",
						icon: "warning",
						showCancelButton: false,
						confirmButtonText: "حسناً",
						closeOnConfirm: true,
					});
				}
			});
		});

		$(document).on('change', '#stair_no', function() {
			get_total_price ();
		});

		$(document).ready(function() {
			get_total_price ();
		});

		function get_total_price (include_free_delivery = true) {
			var dataString		=	"copoun_code=" + $('#copoun_code').val() + "&stair_no=" + $('#stair_no').val();

			if (!!include_free_delivery) {
				dataString		+= "&include_free_delivery=1";
			}

			$.ajax({
				type: "POST",
				url: "/orders/get_total_price",
				data: dataString,
				success: function(data){
					$('.calculate-price').html(data.total_prices);
				},
				error: function (jqXHR, textStatus, errorThrown) {
					swal({
						title: 'عذرا',
						text: "يرجى اعادة المحاولة",
						type: "error",
						icon: "warning",
						showCancelButton: false,
						confirmButtonText: "حسناً",
						closeOnConfirm: true,
					});
				}
			});
		}
	</script>
@endpush