@extends('admin.layouts.master')

@section('page-title') عرض الطلبات في الطريق @endsection
@section('header-title') الطلبات في الطريق @endsection
@push('main-orders-active') m-menu__item--active @endpush

@section('content')
<div class="row">
	<div class="col-md-12">
		<!--begin::Portlet-->
		<div class="m-portlet m-portlet--tab">
			<div class="m-portlet__head">
				<div class="m-portlet__head-caption">
					<div class="m-portlet__head-title">
						<span class="m-portlet__head-icon">
							<i class="flaticon-notes"></i>
						</span>
						<h3 class="m-portlet__head-text">
							<span> الطلبات في الطريق </span>
						</h3>
					</div>
				</div>
			</div>
			<div class="m-portlet__body">
				@if (session('ERROR'))
				<div class="alert alert-danger alert-dismissible fade show" role="alert">
					<button type="button" class="close" data-dismiss="alert" aria-label="Close">
					</button>
					<strong>{{ session('ERROR') }}</strong>
				</div>
				@endif
				@if (session('Done'))
				<div class="alert alert-success alert-dismissible fade show" role="alert">
					<button type="button" class="close" data-dismiss="alert" aria-label="Close">
					</button>
					<strong>{{ session('Done') }}</strong>
				</div>
				@endif
				@include('admin.orders.banner')
				@include('admin.orders.search_bar')
				<table class="table table-striped- table-bordered table-hover table-checkable m-table m-table--head-bg-primary">
					<thead>
						<tr>
							<th class="text-center"> <b>#</b> </th>
							<th class="text-center"> <b>رقم الطلب</b> </th>
							<th class="text-center"> <b>اسم العميل</b> </th>
							<th class="text-center"> <b>رقم الجوال</b> </th>
							<th class="text-center"> <b>اسم المندوب</b> </th>
							<th class="text-center"> <b>الشركة</b> </th>
							<th class="text-center"> <b>طريقة الدفع</b> </th>
							<th class="text-center"> <b>اجمالي المبلغ</b> </th>
							<th class="text-center"><b><i class="flaticon-cogwheel-2"></i></b></th>
						</tr>
					</thead>
					<tbody>
						@foreach($orders as $order)
						<tr class="odd gradeX">
							<td class="text-center">
								{{ $loop->index +1 }}
							</td>

							<td class="text-center">
								{{ $order->id }}
							</td>

							<td class="text-center">
								{{ $order->user['name'] }}
							</td>

							<td class="text-center">
								{{ $order->user->getPhone() }}
							</td>

							<td class="text-center">
								{{ $order->driver['name']? $order->driver['name'] : '-' }}
							</td>

							<td class="text-center">
								{{ $order->company['name'] }}
							</td>

							<td class="text-center">
								{{ __('api.payment_methods.' . $order->payment_method) }}
							</td>

							<td class="text-center">
								{{ $order['total_price'] }} ر.س.
							</td>

							<td class="text-center">
								<a href="http://maps.google.com/?q={{ $order->user_address['latitude'] . ',' . $order->user_address['longitude'] }}" title="العنوان على الخريطة" class="m-portlet__nav-link btn m-btn m-btn--hover-metal m-btn--icon m-btn--icon-only m-btn--pill" target="__blank">
									<i class="fa fa-map-marker-alt"></i>
								</a>
								<a href="javascript:;" title="عرض التفاصيل" class="m-portlet__nav-link btn m-btn m-btn--hover-primary m-btn--icon m-btn--icon-only m-btn--pill view-details-btn" data-target="#view-details" data-id="{{ $order->id }}" data-toggle="modal">
									<i class="la la-eye"></i>
								</a>
								@if (!in_array($order->status, ['done', 'rated', 'cancelled_by_user', 'cancelled_by_driver', 'cancelled_by_admin']))
								<a href="javascript:;" title="تغيير المندوب" class="m-portlet__nav-link btn m-btn m-btn--hover-danger m-btn--icon m-btn--icon-only m-btn--pill change-driver-btn" data-target="#change-driver" data-id="{{ $order->id }}" data-toggle="modal">
									<i class="fa fa-users-cog"></i>
								</a>
								@endif
								<a href="{{ route('admin.orders.invoices', ['order' => $order->id]) }}" title="عرض الفاتورة" class="m-portlet__nav-link btn m-btn m-btn--hover-success m-btn--icon m-btn--icon-only m-btn--pill" target="__blank">
									<i class="flaticon-notes"></i>
								</a>
								<a href="javascript:;" title="تسليم الطلب" class="m-portlet__nav-link btn m-btn m-btn--hover-success m-btn--icon m-btn--icon-only m-btn--pill rate-order-btn" data-target="#rate-order" data-id="{{ $order->id }}" data-toggle="modal">
									<i class="la la-check"></i>
								</a>
								<a href="javascript:;" title="الغاء الطلب" class="m-portlet__nav-link btn m-btn m-btn--hover-danger m-btn--icon m-btn--icon-only m-btn--pill cancel-order-btn" data-target="#cancel-order" data-id="{{ $order->id }}" data-toggle="modal">
									<i class="flaticon-circle"></i>
								</a>
							</td>
						</tr>
						@endforeach
					</tbody>
				</table>
				{{ $orders->links() }}
				@include('admin.orders.details')
				<div class="modal fade" id="rate-order" tabindex="-1" role="dialog" aria-labelledby="Advanced" aria-hidden="true">
					<div class="modal-dialog modal-lg" role="document">
						<form action="javascript:;" class="form-horizontal" id="accept-form" method="POST">
						 @csrf
							<div class="modal-content">
								<div class="modal-header">
									<h5 class="modal-title">تسليم الطلب (تقييم العميل) #<span id="rated_order_id"></span></h5>
									<button type="button" class="close" data-dismiss="modal" aria-label="Close">
										<span aria-hidden="true">&times;</span>
									</button>
								</div>
								<div class="modal-body">
									<div class="m-portlet__body m-portlet__body--no-padding">
										<div class="form-group m-form__group row">
											<div class="col-lg-6 m-form__group-sub">
												<label for="order-rate" class="form-control-label">التقييم</label>
												<ul class="rate-area">
													<input type="radio" id="5-star" name="rating" value="5"/><label for="5-star" title="Amazing">5 stars</label>
													<input type="radio" id="4-star" name="rating" value="4"/><label for="4-star" title="Good">4 stars</label>
													<input type="radio" id="3-star" name="rating" value="3"/><label for="3-star" title="Average">3 stars</label>
													<input type="radio" id="2-star" name="rating" value="2"/><label for="2-star" title="Not Good">2 stars</label>
													<input type="radio" id="1-star" name="rating" value="1"/><label for="1-star" title="Bad">1 star</label>
												</ul>
												<span class="m-validation_error order_rate-error" id="order_rate-error"></span>
												<input type="hidden" id="order-rate-id">
											</div>
											<div class="col-lg-6 m-form__group-sub">
												<label for="order-feedback" class="form-control-label">التغذية الراجعة (اختياري)</label>
												<div class="input-group m-input-group">
													<div class="input-group-prepend">
														<span class="input-group-text">
															<i class="fa fa-comment-alt m--font-primary"></i>
														</span>
													</div>
													<input type="text" id="order-feedback" class="form-control m-input">
												</div>
												<span class="m-validation_error order_feedback-error" id="order_feedback-error"></span>
											</div>
										</div>
									</div>
								</div>
								<div class="modal-footer">
									<button type="submit" id="submit-rate-order" class="btn btn-success">
										<span>تأكيد التسليم</span>
									</button>
									<button type="button" class="btn btn-secondary" data-dismiss="modal">
										<span>اغلاق</span>
									</button>
								</div>
							</div>
						</form>
					</div>
				</div>
				@include('admin.orders.change_driver')
				@include('admin.orders.cancel_order_dialog')
			</div>
		</div>
	</div>
</div>
@stop

@push('page_level_style')
	<style type="text/css">
		.m-widget24 .m-widget24__item .m-widget24__title {
			margin-top: 1.21rem;
		}
		#points {
			width: 500px;
			height: 500px;
		}
		@media only screen and (max-width: 479px) {
			#points {
				width: 250px;
				height: 250px;
			}
		}
		@media only screen and (max-width: 989px) {
			#points {
				width: 350px;
				height: 350px;
			}
		}
		#order_rate-error {
			margin-top: 50px;
		}
	</style>
	<link href="{{ URL::asset('/assets/admin/5star.css') }}" rel="stylesheet" type="text/css" />
@endpush

@push('page_level_script')
	<script src="{{ URL::asset('/assets/admin/datatables.js') }}"></script>
	<script src="{{ URL::asset('/assets/admin/delivery_times.js') }}"></script>
	<script src="{{ URL::asset('/assets/admin/demo/demo11/custom/crud/forms/widgets/select2.js') }}"></script>
	<script src="https://unpkg.com/sweetalert/dist/sweetalert.min.js"></script>
	<script src="{{ URL::asset('/assets/admin/cancel_order_dialog.js') }}"></script>
	<script src="{{ URL::asset('/assets/admin/order/variables.js') }}"></script>
	<script src="{{ URL::asset('/assets/admin/order/view_details.js') }}"></script>
	<script src="{{ URL::asset('/assets/admin/order/change_driver.js') }}"></script>

	<script type="text/javascript">
		$(".rate-order-btn").click (function () {
			$("#order-rate-id").val($(this).data("id"));
			$("#rated_order_id").html($(this).data("id"));
		});

		$('#submit-rate-order').click (function ()
		{
			var dataString = "rate=" + $('input[name=rating]:checked').val() + "&feedback=" + $("#order-feedback").val();

			$.ajax({
				type: "POST",
				url: admin_url + "/orders/finish/" + $("#order-rate-id").val(),
				data: dataString,
				success: function(data){
					if (!data.status) {
						if (data.message.feedback) {
							$("#order_feedback-error").html(data.message.feedback[0]);
							$("#order_feedback-error").css('display', 'block');
						} else {
							$("#order_feedback-error").html();
							$("#order_feedback-error").css('display', 'none');
						}
						
						if (data.message.rate) {
							$("#order_rate-error").html(data.message.rate[0]);
							$("#order_rate-error").css('display', 'block');
						} else {
							$("#order_rate-error").html();
							$("#order_rate-error").css('display', 'none');
						}

					} else {
						$("#order_feedback-error").html();
						$("#order_feedback-error").css('display', 'none');
						$("#order_rate-error").html();
						$("#order_rate-error").css('display', 'none');
						location.reload();
					}
				},
				error: function(data) {
					console.log(data);
				}
			});
		});
	</script>
	<script async defer src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCmgVVBWPoe_QmTLa_0UCnMUj0aZGlZnsg&libraries=drawing&callback=initMap"></script>
@endpush