@extends('admin.layouts.master')

@section('page-title') عرض الطلبات الخاصة العميل @endsection
@section('header-title') الطلبات الخاصة العميل @endsection
@push('main-users-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 class="m-portlet__head-tools">
					<ul class="nav nav-pills nav-pills--brand m-nav-pills--align-right m-nav-pills--btn-pill m-nav-pills--btn-sm" role="tablist">
						<li class="nav-item m-tabs__item">
							<a href="{{ route('admin.users.index') }}" class="btn btn-primary m-btn m-btn--icon">
								<span>
									<i class="flaticon-reply"></i>
									<span>العودة للعملاء</span>
								</span>
							</a>
						</li>
					</ul>
				</div>
			</div>
			<div class="m-portlet__body">
				<div class="m-portlet ">
					<div class="m-portlet__body  m-portlet__body--no-padding">
						<div class="row m-row--no-padding m-row--col-separator-xl">
							<div class="col-md-12 col-lg-6 col-xl-3">
								<!--begin::Total Profit-->
								<div class="m-widget24">
									<div class="m-widget24__item">
										<h4 class="m-widget24__title">
											اجمالي الطلبات
										</h4>
										<br>
										<span class="m-widget24__desc">
											اجمالي طلبات العميل
										</span>
										<span class="m-widget24__stats m--font-brand">
											{{ $total_orders->count() }}
										</span>
										<div class="m--space-10"></div>
									</div>
								</div>
								<!--end::Total Profit-->
							</div>
							<div class="col-md-12 col-lg-6 col-xl-3">
								<!--begin::New Feedbacks-->
								<div class="m-widget24">
									<div class="m-widget24__item">
										<h4 class="m-widget24__title">
											الطلبات الفعالة
										</h4>
										<br>
										<span class="m-widget24__desc">
											اجمالي الطلبات الفعالة
										</span>
										<span class="m-widget24__stats m--font-info">
											{{ $active_orders->count() }}
										</span>
										<div class="m--space-10"></div>
									</div>
								</div>
								<!--end::New Feedbacks-->
							</div>
							<div class="col-md-12 col-lg-6 col-xl-3">
								<!--begin::New Orders-->
								<div class="m-widget24">
									<div class="m-widget24__item">
										<h4 class="m-widget24__title">
											الطلبات المنتهية
										</h4>
										<br>
										<span class="m-widget24__desc">
											اجمالي الطلبات المنتهية
										</span>
										<span class="m-widget24__stats m--font-success">
											{{ $done_orders->count() }}
										</span>
										<div class="m--space-10"></div>
									</div>
								</div>
								<!--end::New Orders-->
							</div>
							<div class="col-md-12 col-lg-6 col-xl-3">
								<!--begin::New Users-->
								<div class="m-widget24">
									<div class="m-widget24__item">
										<h4 class="m-widget24__title">
											الطلبات الملغاة
										</h4>
										<br>
										<span class="m-widget24__desc">
											اجمالي الطلبات الملغاة
										</span>
										<span class="m-widget24__stats m--font-danger">
											{{ $cancelled_orders->count() }}
										</span>
										<div class="m--space-10"></div>
									</div>
								</div>
								<!--end::New Users-->
							</div>
						</div>
					</div>
				</div>
				<h3 class="m-portlet__head-text" style="text-align: center;">
					<span> اسم العميل: {{ $user->name }} </span>
				</h3>
				<table class="table table-striped- table-bordered table-hover table-checkable m-table m-table--head-bg-primary" id="m_table_1">
					<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><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->driver['name']? $order->driver['name'] : '-' }}
							</td>

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

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

							<td class="text-center">
								{{ __('api.user_order_statuses.' . $order['status']) }}
							</td>

							<td class="text-center">
								<a href="{{ route('admin.orders.show', ['order' => $order->id]) }}" 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>
							</td>
						</tr>
						@endforeach
					</tbody>
				</table>
				<div class="modal fade" id="view-details" tabindex="-1" role="dialog" aria-labelledby="Advanced" aria-hidden="true">
					<div class="modal-dialog modal-lg" role="document">
						<div class="modal-content">
							<div class="modal-header">
								<h5 class="modal-title">عرض تفاصيل الطلب</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_id" class="form-control-label">رقم الطلب </label>
											<div class="input-group m-input-group">
												<div class="input-group-prepend">
													<span class="input-group-text">
														<i class="la la-slack m--font-primary"></i>
													</span>
												</div>
												<input type="text" id="order_id" class="form-control m-input" disabled>
											</div>
										</div>
										<div class="col-lg-6 m-form__group-sub">
											<label for="order_status" 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-ellipsis-v m--font-primary"></i>
													</span>
												</div>
												<input type="text" id="order_status" class="form-control m-input" disabled>
											</div>
										</div>
									</div>
									<div class="form-group m-form__group row">
										<div class="col-lg-6 m-form__group-sub">
											<label for="order_driver_name" 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-user-tie m--font-primary"></i>
													</span>
												</div>
												<input type="text" id="order_driver_name" class="form-control m-input" disabled>
											</div>
										</div>
										<div class="col-lg-6 m-form__group-sub">
											<label for="order_driver_phone" 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-phone m--font-primary"></i>
													</span>
												</div>
												<input type="text" id="order_driver_phone" class="form-control m-input" disabled>
											</div>
										</div>
									</div>
									<div class="form-group m-form__group row">
										<div class="col-lg-6 m-form__group-sub">
											<label for="order_user" class="form-control-label">اسم المستخدم </label>
											<div class="input-group m-input-group">
												<div class="input-group-prepend">
													<span class="input-group-text">
														<i class="la la-user m--font-primary"></i>
													</span>
												</div>
												<input type="text" id="order_user" class="form-control m-input" disabled>
											</div>
										</div>
										<div class="col-lg-6 m-form__group-sub">
											<label for="order_phone" 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-phone m--font-primary"></i>
													</span>
												</div>
												<input type="text" id="order_phone" class="form-control m-input" disabled>
											</div>
										</div>
									</div>

									<div class="form-group m-form__group row">
										<div class="col-lg-6 m-form__group-sub">
											<label for="order_date" 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-calendar-alt m--font-primary"></i>
													</span>
												</div>
												<input type="text" id="order_date" class="form-control m-input" disabled>
											</div>
										</div>
										<div class="col-lg-6 m-form__group-sub">
											<label for="order_delivery_date" 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-calendar-check m--font-primary"></i>
													</span>
												</div>
												<input type="text" id="order_delivery_date" class="form-control m-input" disabled>
											</div>
										</div>
									</div>

									<div class="form-group m-form__group row">
										<div class="col-lg-6 m-form__group-sub">
											<label for="order_delivery_time" 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-clock m--font-primary"></i>
													</span>
												</div>
												<input type="text" id="order_delivery_time" class="form-control m-input" disabled>
											</div>
										</div>
										<div class="col-lg-6 m-form__group-sub">
											<label for="order_company_name" 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-align-right m--font-primary"></i>
													</span>
												</div>
												<input type="text" id="order_company_name" class="form-control m-input" disabled>
											</div>
										</div>
									</div>

									<!-- PRODUCTS BEGIN -->
									<h5 class="modal-title">عرض تفاصيل المنتجات</h5>
									<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>
											</tr>
										</thead>
										<tbody id="products-body">
										</tbody>
									</table>
									<!-- PRODUCTS END -->

									<div class="form-group m-form__group row">
										<div class="col-lg-6 m-form__group-sub">
											<label for="order_company_commission" 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-percent m--font-primary"></i>
													</span>
												</div>
												<input type="text" id="order_company_commission" class="form-control m-input" disabled>
												<div class="input-group-prepend">
													<span class="input-group-text">
														ريال سعودي
													</span>
												</div>
											</div>
										</div>
										<div class="col-lg-6 m-form__group-sub">
											<label for="order_delivery_price" 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-truck m--font-primary"></i>
													</span>
												</div>
												<input type="text" id="order_delivery_price" class="form-control m-input" disabled>
												<div class="input-group-prepend">
													<span class="input-group-text">
														ريال سعودي
													</span>
												</div>
											</div>
										</div>
									</div>

									<div class="form-group m-form__group row">
										<div class="col-lg-6 m-form__group-sub">
											<label for="order_vat" 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-money-bill-alt m--font-danger"></i>
													</span>
												</div>
												<input type="text" id="order_vat" name="order_vat" class="form-control m-input{{ $errors->has('order_vat') ? ' is-invalid' : '' }}" disabled>
												<div class="input-group-append">
													<span class="input-group-text">
														ريال سعودي
													</span>
												</div>
											</div>
										</div>
										<div class="col-lg-6 m-form__group-sub">
											<label for="order_total_price" 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-calculator m--font-primary"></i>
													</span>
												</div>
												<input type="text" id="order_total_price" class="form-control m-input" disabled>
												<div class="input-group-prepend">
													<span class="input-group-text">
														ريال سعودي
													</span>
												</div>
											</div>
										</div>
									</div>

									<div class="form-group m-form__group row">
										<label for="points" class="col-2 col-form-label">عنوان المستلم</label>
										<div class="col-9" id="points">
											<div></div>
										</div>
									</div>
								</div>
							</div>
							<div class="modal-footer">
								<button type="button" class="btn btn-secondary" data-dismiss="modal">
									<span>اغلاق</span>
								</button>
							</div>
						</div>
					</div>
				</div>
			</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;
			}
		}
	</style>
@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 type="text/javascript">
		var points = [];
		var map;
		function initMap() {
			map = new google.maps.Map(document.getElementById('points'), {
				center: {
					lat: 24.774265,
					lng: 46.738586
					
				},
				zoom: 8
			});
		}

		var statuses = {'pending': 'طلب جديد',
						'approved': 'تمت الموافقة (بانتظار المندوب)',
						'driver_accepted': 'استلمها المندوب',
						'processing': 'في الطريق',
						'done': 'منتهي',
						'rated': 'تم التقييم',
						'cancelled_by_user': 'ملغي',
						'cancelled_by_driver': 'ملغي'
						};

		var units = {'milli': 'مل',
						'litre': 'لتر',
						'gallon': 'جالون'
						};

		$(".view-details-btn").click (function () {
			initMap();
			$("#order_user").val();
			$("#order_phone").val();
			$("#order_id").val();
			$("#order_status").val();
			$("#order_date").val();
			$("#order_total_price").val();
			$("#product_price").val();
			$("#order_delivery_price").val();
			$("#points").val();
			$("#product_quantity").val();
			$("#order_company_commission").val();
			$("#order_company_name").val();
			$("#order_delivery_date").val();
			$("#order_delivery_time").val();
			$("#order_product_name").val();
			$("#order_driver_name").val();
			$("#order_driver_phone").val();
			$("#order_product_size").val();
			$("#order_vat").val();
			$("#unit_type").html();
			$("#products-body").empty();


			$.ajax({
				type: "GET",
				url: admin_url + "/orders/" + $(this).data('id'),
				success: function(data){
					var order = data;
					$("#order_user").val(order.user.name);
					$("#order_phone").val(order.user.phone);
					$("#order_id").val(order.id);
					$("#order_status").val(statuses[order.status]);
					$("#order_date").val(order.created_at);
					$("#order_total_price").val(order.total_price);
					$("#product_price").val(order.price);
					$("#order_delivery_price").val(order.delivery_price);
					$("#product_quantity").val(order.quantity);
					$("#order_company_commission").val(order.company_commission);
					$("#order_company_name").val(order.company.name);
					$("#order_delivery_date").val(order.delivery_date);
					$("#order_vat").val(order.vat);
					$("#order_delivery_time").val(hour_types[order.delivery_time] + ' - ' + hour_types[parseInt(order.delivery_time) + 1]);

					$.each(order.order_products, function(key, product){
						$("#products-body").append('<tr class="odd gradeX">'
													+'<td class="text-center">' + product.pivot.name + '</td>'
													+'<td class="text-center">' + product.pivot.size + '</td>'
													+'<td class="text-center">' + product.pivot.price + '</td>'
													+'<td class="text-center">' + product.pivot.quantity + ' ' + units[product.unit] + '</td>'
												+'</tr>');
					});
					
					$("#order_driver_name").val(!!(order.driver)? order.driver.name : '-');
					$("#order_driver_phone").val(!!(order.driver)? order.driver.phone : '-');

					var myLatLng = {lat: parseFloat(order.address.lat), lng: parseFloat(order.address.lng)};
					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