@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 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.orders.admin_actions') }}" class="btn btn-success m-btn m-btn--icon">
								<span>
									<i class="fa flaticon-reply"></i>
									<span>عرض حركات المستخدمين في الطلبات</span>
								</span>
							</a>
						</li>
					</ul>
				</div>
			</div>
			<div class="m-portlet__body">
				@include('admin.includes.alerts')
				@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 table-responsive">
					<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>حالة الطلب</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">
								{{ $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->delivery_date }}
								<br>
								من {{ __('api.order_times.' . $order->delivery_time) }} إلى {{ __('api.order_times.' . ($order->delivery_time+2)) }}
							</td>

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

							<td class="text-center">
								{{ __('api.payment_methods.' . $order->payment_method) }}
								<br>
								<span class="m--font-{{ $order['is_printed']? 'success' : 'danger' }}">{{ $order['is_printed']? 'تم طباعة الفاتورة' : 'لم يتم طباعة الفاتورة' }}</span>
							</td>

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

							<td class="text-center">
								@if (($order->status == 'waiting_for_payment'))
								<div class="alert alert-danger" role="alert">
									<strong>{{ __('api.user_order_statuses.' . $order->status) }}</strong>
								</div>
								@elseif (($order->status == 'pending') || ($order->status == 'approved'))
								<div class="alert alert-warning" role="alert">
									<strong>{{ __('api.user_order_statuses.' . $order->status) }}</strong>
								</div>
								@elseif (($order->status == 'driver_accepted') || ($order->status == 'processing'))
								<div class="alert alert-primary" role="alert">
									<strong>{{ __('api.user_order_statuses.' . $order->status) }}</strong>
								</div>
								@elseif (($order->status == 'done') || ($order->status == 'rated'))
								<div class="alert alert-success" role="alert">
									<strong>{{ __('api.user_order_statuses.' . $order->status) }}</strong>
								</div>
								@elseif (($order->status == 'cancelled_by_user') || ($order->status == 'cancelled_by_driver') || ($order->status == 'cancelled_by_admin'))
								<div class="alert alert-metal" role="alert">
									<strong>{{ __('api.user_order_statuses.' . $order->status) }}</strong>
								</div>
								@else
								<div class="alert alert-primary" role="alert">
									<strong>{{ __('api.user_order_statuses.' . $order->status) }}</strong>
								</div>
								@endif
							</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>
								<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-danger m-btn--icon m-btn--icon-only m-btn--pill business_registration-btn" data-id="{{ $order->id }}">
									<i class="fa fa-address-card"></i>
								</a>
								@if (auth('admin')->user()->can('orders.discount'))
								<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 special-discount-btn" data-id="{{ $order->id }}" data-toggle="modal">
									<i class="fa fa-percent"></i>
								</a>
								@endif
								@if (auth('admin')->user()->can('orders.appologize'))
								<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 apologize-btn" data-id="{{ $order->id }}">
									<i class="fa fa-hands"></i>
								</a>
								@endif
								@if ((auth('admin')->user()->can('orders.hurry')) && (in_array($order->status, ['driver_accepted', 'processing'])))
								<a href="{{ route('admin.orders.hurry_up', ['order' => $order->id]) }}" title="استعجال المندوب" class="m-portlet__nav-link btn m-btn m-btn--hover-warning m-btn--icon m-btn--icon-only m-btn--pill" onclick="return confirm('تأكيد استعجال المندوب؟')">
									<i class="fa fa-user-clock"></i>
								</a>
								@endif
								@if (!in_array($order->status, ['done', 'rated', 'cancelled_by_user', 'cancelled_by_driver', 'cancelled_by_admin']))
								@if (auth('admin')->user()->can('orders.edit'))
								<a href="{{ route('admin.orders.edit', ['order' => $order->id]) }}" title="تعديل" class="m-portlet__nav-link btn m-btn m-btn--hover-warning m-btn--icon m-btn--icon-only m-btn--pill">
									<i class="la la-edit"></i>
								</a>
								@endif
								@if (auth('admin')->user()->can('orders.cancel'))
								<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>
								@endif
								@endif
								<a href="{{ route('admin.orders.print_invoice', ['order' => $order->id]) }}" target="__blank" title="طباعة الفاتورة" class="m-portlet__nav-link btn m-btn m-btn--hover-warning m-btn--icon m-btn--icon-only m-btn--pill" onclick="return confirm('تأكيد العملية؟')">
									<i class="fa fa-clipboard-check"></i>
								</a>
								@if (auth('admin')->user()->can('orders.attachments'))
								<a href="javascript:;" title="مستندات الطلب" data-id="{{ $order->id }}" class="btn btn-success m-btn m-btn--icon m-btn--icon-only m-btn--custom m-btn--pill m-btn--air view-attachments">
									<i class="fa fa-paperclip"></i>
								</a>
								@endif
							</td>
						</tr>
						@endforeach
					</tbody>
				</table>
				<div class="row">
					<div class="col-md-6">
						{{ $orders->links() }}
					</div>
					<div class="col-md-6 text-right">
						نتيجة البحث: {{ $orders_count }} طلب
					</div>
				</div>
				@include('admin.orders.details')
				<div class="modal fade" id="accept-driver" 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">اسناد الطلب لمندوب</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="accepted_driver_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-user m--font-primary"></i>
														</span>
													</div>
													<select class="form-control m-input" name="accepted_driver_id">
														@foreach($drivers as $driver)
														<option value="{{ $driver->id }}">{{ $driver->name }}</option>
														@endforeach
													</select>
												</div>
											</div>
											<div class="col-lg-6 m-form__group-sub">
												<label for="accepted_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="accepted_order_id" class="form-control m-input" disabled>
												</div>
											</div>
										</div>
									</div>
								</div>
								<div class="modal-footer">
									<button type="submit" id="submit-accept-driver" 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.cancel_order_dialog')
				@include('admin.orders.attachments')
				@include('admin.orders.special_discount')
				@include('admin.orders.business_registration')
			</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, #order_address_map {
			width: 500px;
			height: 500px;
		}
		@media only screen and (max-width: 479px) {
			#points, #order_address_map {
				width: 250px;
				height: 250px;
			}
		}
		@media only screen and (max-width: 989px) {
			#points, #order_address_map {
				width: 350px;
				height: 350px;
			}
		}
	</style>
	<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/fancyapps/fancybox@3.5.7/dist/jquery.fancybox.min.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/order_attachments.js') }}"></script>
	<script src="https://cdn.jsdelivr.net/gh/fancyapps/fancybox@3.5.7/dist/jquery.fancybox.min.js"></script>

	<script type="text/javascript">
		$(document).ready(function() {
			$('[data-fancybox]').fancybox();
		});

		function reset_special_discount_form() {
			$('#special-discount-form').find(".order_id").val('');
			$('#special-discount-form').find(".current-special-discount").val('');
			$('#special-discount-form').find(".special-discount").val(0);
			$('#special-discount-form').find(".order_total_price").val(0);
		}

		$(document).on('click', '.special-discount-btn', function () {
			reset_special_discount_form();

			var id = $(this).data('id');
			$('#special-discount-form').find('.order_id').val(id);
			$.ajax({
				url: admin_url + "/orders/show",
				type: "get",
				dataType: "JSON",
				data: {
					id: id
				},
				success: function(data){
					if(data['status']){
						$('#special-discount-form').find(".current-special-discount").val(data['data']['order']['total_discount']);
						$('#special-discount-form').find(".order_total_price").val(data['data']['order']['total_price']);
						$('#special-discount-form').find(".special-discount").val(0);
					} else {
						swal({title: data['message'], icon: "error"});
					}
				},
				complete: function (data) {
					if (data.responseJSON.status) {
						$('#special-discount').modal('show');
					}
				},
				error: function (jqXHR, textStatus, errorThrown) {
					swal({title: '{{ __('app.whoops') }}', icon: "error"});
				}
			});
		});

		$(document).on('submit', '#special-discount-form', function (e) {
			e.preventDefault();
			$('#special-discount-form').find('#loading').show();
			var formData = new FormData(this);

			$.ajax({
				url: admin_url + "/orders/add_discount",
				type: "POST",
				cache:false,
				contentType: false,
				processData: false,
				data: formData,
				success: function(data){
					$('#special-discount-form').find('#loading').hide();
					if (data['status']) {
						swal({title: data['message'], type: "success"}).then (function (result) {
							$('#special-discount').modal('hide');

							reset_special_discount_form();
						});
					} else {
						swal({title: data['message'], type: "error"});
					}
				},
				complete: function (data) {
				},
				error: function (jqXHR, textStatus, errorThrown) {
					$('#special-discount-form').find('#loading').hide();
					swal({title: '{{ __('app.whoops') }}', type: "error"});
				}
			});
		});
	</script>

	<script type="text/javascript">
		function reset_business_registration_form() {
			$('#business_registration-form').find(".order_id").val('');
			$('#business_registration-form').find(".business_registration").val('');
		}

		$(document).on('click', '.business_registration-btn', function () {
			reset_business_registration_form();

			var id = $(this).data('id');
			$('#business_registration-form').find('.order_id').val(id);
			$.ajax({
				url: admin_url + "/orders/show",
				type: "get",
				dataType: "JSON",
				data: {
					id: id
				},
				success: function(data){
					if(data['status']){
						$('#business_registration-form').find(".business_registration").val(data['data']['order']['business_registration']);
					} else {
						swal({title: data['message'], icon: "error"});
					}
				},
				complete: function (data) {
					if (!!data.responseJSON.status) {
						$('#business_registration_modal').modal('show');
					}
				},
				error: function (jqXHR, textStatus, errorThrown) {
					swal({title: '{{ __('app.whoops') }}', icon: "error"});
				}
			});
		});

		$(document).on('submit', '#business_registration-form', function (e) {
			e.preventDefault();
			$('#business_registration-form').find('#loading').show();
			var formData = new FormData(this);

			$.ajax({
				url: admin_url + "/orders/business_registration",
				type: "POST",
				cache: false,
				contentType: false,
				processData: false,
				data: formData,
				success: function(data){
					$('#business_registration-form').find('#loading').hide();
					if (!!data['status']) {
						swal({title: data['message'], type: "success"}).then (function (result) {
							$('#business_registration_modal').modal('hide');

							reset_business_registration_form();
						});
					} else {
						swal({title: data['message'], type: "error"});
					}
				},
				complete: function (data) {
				},
				error: function (jqXHR, textStatus, errorThrown) {
					$('#business_registration-form').find('#loading').hide();
					swal({title: '{{ __('app.whoops') }}', type: "error"});
				}
			});
		});
	</script>

	<script type="text/javascript">
		$(document).on('click', '.apologize-btn', function (e) {
			e.preventDefault();
			var order_id = $(this).data('id');

			swal({
				text: 'ادخل نص رسالة الاعتذار',
				content: {
					element: "input",
					attributes: {
						type: "text",
						placeholder: "ادخل هنا رسالة الاعتذار",
						// value: "نعتذر عزيزنا عن التأخير, تم استعجال المندوب.",
					}
				},
				button: {
					text: "ارسل",
					closeModal: true,
				},
			})
			.then(name => {
				if (!name) {
					swal("ادخل الرسالة", "يرجى ادخال نص رسالة الاعتذار!", "error");
					return null;
				}

				return fetch(admin_url + `/orders/apologize?message=${name}&order_id=${order_id}`);
			})
			.then(results => {
				return results.json();
			})
			.then(json => {
				const response = json;

				if (!response.status) {
					return swal('', response.message, 'error');
				}

				return swal('', response.message, 'success');
			})
			.catch(err => {
				if (err) {
					swal("معذرة!", "حدث خطأ أثناء الارسال", "error");
				} else {
					swal.stopLoading();
					swal.close();
				}
			});
		});
	</script>

	<script type="text/javascript">
		var selected_id;
		$('.accept-driver-btn').on('click', function() {
			selected_id = $(this).data('id');
			$("#accepted_order_id").val(selected_id);
			$("#accept-form").attr('action', admin_url + '/orders/accept_driver/' + selected_id);
		});

		// $('#submit-accept-driver').on('click', function(event) {
		// 	$("#accept-form").submit();
		// // 	event.preventDefault();
		// // 	// console.log(selected_point);
		// // 	// window.location = this.href;
		// });

		$('.theme-btn').on('click', function() {
			var email = $('#email');
			var dataString = "email=" + email;

			$.ajax({
				type: "POST",
				url: "/orders/reject/"+ $(this).data('id'),
				data: dataString,
				success: function(data){
					console.log(data);
					swal('', data.message, data.status);
				}
			});
		});
	</script>
	<script async defer src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCmgVVBWPoe_QmTLa_0UCnMUj0aZGlZnsg&libraries=drawing&callback=initMap"></script>
@endpush