@extends('admin.layouts.master')

@section('page-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="fa fa-plus"></i>
						</span>
						<h3 class="m-portlet__head-text">
							<span> اضافة طلب للمستخدم "{{ $user['name'] }}" </span>
						</h3>
					</div>
				</div>
			</div>
			<div class="m-portlet__body">
				<div class="col-xl-12">
					<form action="{{ route('admin.orders.store', ['user' => $user->id]) }}" class="m-form form-horizontal" method="POST" enctype="multipart/form-data">
					 @csrf

						@include('admin.includes.alerts')
						<input type="hidden" id="user_id" value="{{ $user->id }}">
						<div class="form-group m-form__group row">
							<div class="col-lg-6 m-form__group-sub">
								<label for="company_id" class="form-control-label">الشركة <strong> * </strong></label>
								<div class="input-group m-input-group">
									<div class="input-group-prepend">
										<span class="input-group-text">
											<i class="fa fa-leaf m--font-primary"></i>
										</span>
									</div>
									<select class="form-control" id="company_id" name="company_id">
										@if($companies->count())
										@foreach($companies as $company)
										<option value="{{ $company->id }}">{{ $company->name }} - الحد الادنى: {{ $company->min_amount }} - التوصيل: {{ $company->delivery_price }}</option>
										@endforeach
										@else
										<option value="0">لا يوجد شركات</option>
										@endif
									</select>
									<div class="input-group-append">
										<a href="javascript:;" id="next-button" class="btn btn-primary">
											<span> فرز منتجات الشركة </span>
										</a>
									</div>
								</div>
								@if ($errors->has('company_id'))
								<span class="m-validation_error">
									<strong>
										{{ $errors->first('company_id') }}
									</strong>
								</span>
								@endif
							</div>
							<div class="col-lg-6 m-form__group-sub">
								<label for="address_id" class="form-control-label">العنوان <strong> * </strong></label>
								<div class="input-group m-input-group">
									<div class="input-group-prepend">
										<span class="input-group-text">
											<i class="fa fa-map-marker-alt m--font-info"></i>
										</span>
									</div>
									<select class="form-control" id="address_id" name="address_id">
										@if($user->user_addresses()->count())
										@foreach($user->user_addresses()->get() as $address)
										<option value="{{ $address->id }}" {{ (old('address_id') == $address->id)? 'selected' : '' }} >{{ $address['name'] }}</option>
										@endforeach
										@else
										<option value="0">لا يوجد عناوين</option>
										@endif
									</select>
									<div class="input-group-append">
										<a href="javascript:;" class="btn btn-primary create-address-btn" data-target="#create-address" data-toggle="modal">
											<span>أو  اضافة عنوان جديد </span>
										</a>
									</div>
								</div>
								@if ($errors->has('address_id'))
								<span class="m-validation_error">
									<strong>
										{{ $errors->first('address_id') }}
									</strong>
								</span>
								@endif
							</div>
						</div>

						<div class="company-products"></div>

						<div class="form-group m-form__group row">
							<div class="col-lg-6 m-form__group-sub">
								<label for="payment_method" class="form-control-label">طريقة الدفع <strong> * </strong></label>
								<div class="input-group m-input-group">
									<div class="input-group-prepend">
										<span class="input-group-text">
											<i class="fa fa-money-check m--font-primary"></i>
										</span>
									</div>
									<select class="form-control" id="payment_method" name="payment_method">
										<option value="cash">{{ __('api.payment_methods.cash') }}</option>
										<option value="mada">{{ __('api.payment_methods.mada') }}</option>
										<option value="stc_pay">{{ __('api.payment_methods.stc_pay') }}</option>
										<option value="mada_online">{{ __('api.payment_methods.mada_online') }}</option>
										<option value="credit_cards">{{ __('api.payment_methods.credit_cards') }}</option>
										<option value="apple_pay">{{ __('api.payment_methods.apple_pay') }}</option>
										<option value="wallet">{{ __('api.payment_methods.wallet') }} - الرصيد: {{ $balance }}</option>
									</select>
								</div>
								@if ($errors->has('payment_method'))
								<span class="m-validation_error">
									<strong>
										{{ $errors->first('payment_method') }}
									</strong>
								</span>
								@endif
							</div>
							<div class="col-lg-6 m-form__group-sub">
								<label for="driver_id" class="form-control-label">المندوب <strong> * </strong></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>
									<select class="form-control" id="driver_id" name="driver_id">
										@if($drivers->count())
										@foreach($drivers as $driver)
										<option value="{{ $driver->id }}" {{ (old('driver_id') == $driver->id)? 'selected' : '' }} >{{ $driver->name }}</option>
										@endforeach
										@else
										<option value="0">لا يوجد مناديب</option>
										@endif
									</select>
								</div>
								@if ($errors->has('driver_id'))
								<span class="m-validation_error">
									<strong>
										{{ $errors->first('driver_id') }}
									</strong>
								</span>
								@endif
							</div>
						</div>

						<div class="form-group m-form__group row">
							<div class="col-lg-6 m-form__group-sub">
								<label for="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-alt m--font-primary"></i>
										</span>
									</div>
									<input type="date" id="delivery_date" name="delivery_date" value="{{ old('delivery_date')?: date('Y-m-d') }}" class="form-control m-input{{ $errors->has('delivery_date') ? ' is-invalid' : '' }}" autocomplete="off">
								</div>
								@if ($errors->has('delivery_date'))
								<span class="m-validation_error">
									<strong>
										{{ $errors->first('delivery_date') }}
									</strong>
								</span>
								@endif
							</div>
							<div class="col-lg-6 m-form__group-sub">
								<label for="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>
									<select class="form-control" id="delivery_time" name="delivery_time">
										@for($i = 0; $i < 22; $i+=2)
										<option value="{{ $i }}" {{ old('delivery_time')? ((old('delivery_time') == $i)? 'selected' : '') : ((16 == $i)? 'selected' : '') }} >من {{ $hour_types['ar'][$i] }} - {{ $hour_types['ar'][$i+2] }}</option>
										@endfor
										<option value="22" {{ old('delivery_time')? ((old('delivery_time') == 22)? 'selected' : '') : '' }} >من {{ $hour_types['ar'][22] }} - {{ $hour_types['ar'][0] }}</option>
									</select>
								</div>
								@if ($errors->has('delivery_time'))
								<span class="m-validation_error">
									<strong>
										{{ $errors->first('delivery_time') }}
									</strong>
								</span>
								@endif
							</div>
						</div>

						<div class="form-group m-form__group row">
							<div class="col-lg-6 m-form__group-sub">
								<label for="delivery_price" class="form-control-label">سعر التوصيل <strong> * </strong></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-success"></i>
										</span>
									</div>
									<input type="number" id="delivery_price" name="delivery_price" value="{{ old('delivery_price')?: $companies->first()['delivery_price'] }}" class="form-control m-input{{ $errors->has('delivery_price') ? ' is-invalid' : '' }}" min="0">
									<div class="input-group-append">
										<span class="input-group-text">
											ريال سعودي
										</span>
									</div>
								</div>
								@if ($errors->has('delivery_price'))
								<span class="m-validation_error">
									<strong>
										{{ $errors->first('delivery_price') }}
									</strong>
								</span>
								@endif
							</div>
							<div class="col-lg-6 m-form__group-sub">
								<label for="stair_no" class="form-control-label">الرفع للأدوار العليا <strong> * </strong></label>
								<div class="input-group m-input-group">
									<div class="input-group-prepend">
										<span class="input-group-text">
											رقم الدور
										</span>
									</div>
									<input type="number" value="0" id="stair_no" name="stair_no" value="{{ old('stair_no')?: $companies->first()['stair_no'] }}" class="form-control m-input{{ $errors->has('stair_no') ? ' is-invalid' : '' }}" min="0">
									<div class="input-group-append">
										<span class="input-group-text">
											<i class="fa fa-walking m--font-danger"></i>
										</span>
									</div>
								</div>
								@if ($errors->has('stair_no'))
								<span class="m-validation_error">
									<strong>
										{{ $errors->first('stair_no') }}
									</strong>
								</span>
								@endif
							</div>
						</div>
						<input type="hidden" id="vat_value" value="{{ $vat }}">

						<div class="form-group m-form__group row">
							<div class="col-lg-6 m-form__group-sub">
								<label for="price" class="form-control-label">سعر المنتجات <strong> * </strong></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-info"></i>
										</span>
									</div>
									<input type="text" id="price" name="price" value="0" class="form-control m-input{{ $errors->has('price') ? ' is-invalid' : '' }}" disabled>
									<div class="input-group-append">
										<span class="input-group-text">
											ريال سعودي
										</span>
									</div>
								</div>
								<span class="m-form__help">لا يمكن التعديل على سعر الطلب</span>
							</div>
							<div class="col-lg-6 m-form__group-sub">
								<label for="vat" class="form-control-label">القيمة المضافة <strong> * </strong></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="vat" name="vat" value="0" class="form-control m-input{{ $errors->has('vat') ? ' is-invalid' : '' }}" disabled>
									<div class="input-group-append">
										<span class="input-group-text">
											ريال سعودي
										</span>
									</div>
								</div>
								<span class="m-form__help">لا يمكن التعديل على القيمة المضافة</span>
							</div>
						</div>

						<div class="form-group m-form__group row">
							<div class="col-lg-6 m-form__group-sub">
								<label for="discount" class="form-control-label">مبلغ الخصم <strong> * </strong></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-success"></i>
										</span>
									</div>
									<input type="number" id="discount" name="discount" value="{{ old('discount')?: 0 }}" class="form-control m-input{{ $errors->has('discount') ? ' is-invalid' : '' }}" min="0">
									<div class="input-group-append">
										<span class="input-group-text">
											ريال سعودي
										</span>
									</div>
								</div>
								@if ($errors->has('discount'))
								<span class="m-validation_error">
									<strong>
										{{ $errors->first('discount') }}
									</strong>
								</span>
								@endif
							</div>
							<div class="col-lg-6 m-form__group-sub">
								<label for="total_price" class="form-control-label">اجمالي المبلغ <strong> * </strong></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-warning"></i>
										</span>
									</div>
									<input type="text" id="total_price" name="total_price" value="{{ old('delivery_price')?: $company['delivery_price'] }}" class="form-control m-input{{ $errors->has('total_price') ? ' is-invalid' : '' }}" disabled>
									<div class="input-group-append">
										<span class="input-group-text">
											ريال سعودي
										</span>
									</div>
								</div>
								<span class="m-form__help">لا يمكن التعديل على اجمالي المبلغ</span>
							</div>
						</div>

						<div class="form-group m-form__group row">
							<div class="col-lg-12 m-form__group-sub">
								<label for="admin_notes" 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-edit m--font-success"></i>
										</span>
									</div>
									<input type="text" id="admin_notes" name="admin_notes" value="{{ old('admin_notes') }}" class="form-control m-input{{ $errors->has('admin_notes') ? ' is-invalid' : '' }}" autocomplete="off">
								</div>
								@if ($errors->has('admin_notes'))
								<span class="m-validation_error">
									<strong>
										{{ $errors->first('admin_notes') }}
									</strong>
								</span>
								@endif
							</div>
						</div>

						<div class="m-portlet__foot m-portlet__foot--fit">
							<div class="m-form__actions">
								<button type="submit" class="btn btn-primary">
									<span> تأكيد الطلب </span>
								</button>
								<a href="{{ route('admin.orders.index') }}" class="btn btn-warning">
									<span> الغاء والعودة  </span>
								</a>
							</div>
						</div>
					</form>
					<div class="modal fade" id="create-address" 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="user_country_id" class="form-control-label">الدولة</label>
												<select class="form-control" id="user_country_id" name="user_country_id">
													@if($countries->count())
													@foreach($countries as $country)
													<option value="{{ $country->id }}">{{ $country->name }}</option>
													@endforeach
													@else
													<option value="0">لا يوجد دول</option>
													@endif
												</select>
												<span class="m-validation_error">
													<strong id="user_country_id_error">
													</strong>
												</span>
											</div>
											<div class="col-lg-6 m-form__group-sub">
												<label for="user_address_name" class="form-control-label">اسم العنوان</label>
												<input type="text" id="user_address_name" name="user_address_name" placeholder="مثلاً: المنزل" class="form-control m-input{{ $errors->has('user_address_name') ? ' is-invalid' : '' }}" autocomplete="off">
												<span class="m-validation_error">
													<strong id="user_address_name_error">
													</strong>
												</span>
											</div>
										</div>

										<div class="form-group m-form__group row">
											<label for="map-canvas" class="col-2 col-form-label">العنوان على الخريطة</label>
											<div class="col-9" id="map-canvas">
												<div></div>
											</div>
											<span class="m-validation_error">
												<strong id="all_points_error">
												</strong>
											</span>
											<input type="hidden" name="points" id="all_points" value="">
											<input type="hidden" name="lat" id="lat" value="">
											<input type="hidden" name="lng" id="lng" value="">
										</div>
									</div>
								</div>
								<div class="modal-footer">
									<button href="javascript:;" class="btn btn-primary" id="submit-address">
										<span> اضافة العنوان </span>
									</button>
									<button type="button" class="btn btn-secondary" data-dismiss="modal">
										<span>اغلاق</span>
									</button>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
</div>
@stop

@push('page_level_style')
	<style type="text/css">
		.m-form__help {
			font-weight: 300;
			font-size: .85rem;
			padding-top: 7px;
		}
		#map-canvas {
			width: 100%!important;
			height: 350px;
		}
		@media only screen and (max-width: 479px) {
			#map-canvas {
				width: 100%!important;
				height: 315px;
			}
		}
		@media only screen and (max-width: 989px) {
			#map-canvas {
				width: 100%!important;
				height: 315px;
			}
		}
		#user_address_name-error, #user_quarter_id-error, #user_country_id-error, #user_address_points-error {
			display: none;
		}
	</style>
@endpush

@push('page_level_script')
	<script src="https://unpkg.com/sweetalert/dist/sweetalert.min.js"></script>
	<script src="{{ URL::asset('/assets/admin/demo/demo11/custom/crud/forms/widgets/select2.js') }}"></script>
	<script type="text/javascript">
		$("#delivery_time, #product_id, #company_id, #driver_id, #address_id").select2({
			language: "ar"
		});
	</script>

	<script type="text/javascript">
		$("#next-button").on('click', function(event) {
			event.preventDefault();
			var dataString = "company_id=" + $("#company_id").val();

			$.ajax({
				type: "GET",
				url: admin_url + '/products/get_company_products',
				data: dataString,
				success: function(data){
					$('#delivery_price').val(data.company.delivery_price);
					// console.table(data);
					$('.company-products').html(data.products);
					change_quantity(0);
				},
				error: function(data) {
				},
				complete: function(data) {
				}
			});
		});

		function reset_address_form_errors() {
			$('#user_country_id_error').html('');
			$('#user_address_name_error').html('');
			$('#all_points_error').html('');
		}

		function reset_address_form() {
			reset_address_form_errors();

			$("#user_address_name").val('');
			$("#points").val('');
			$("#lat").val('');
			$("#lng").val('');
		}

		$('#submit-address').click (function ()
		{
			var dataString = "user_country_id=" + $("#user_country_id").val() + "&user_quarter_id=" + $("#user_quarter_id").val() + "&user_address_name=" + $("#user_address_name").val() + "&all_points=" + $("#all_points").val() + "&user_id=" + $("#user_id").val() + "&lat=" + $("#lat").val() + "&lng=" + $("#lng").val();

			reset_address_form_errors();

			$.ajax({
				type: "POST",
				url: admin_url + "/user_addresses",
				data: dataString,
				success: function(data){
					if (data.status == 'error') {
						swal('', data.message, data.status);
						$.each(data.errors, function(key, value) {
							$('#' + key + '_error').html(value[0]);
						});
					} else {
						swal('', data.message, data.status).then((value) => {
							$('#address_id').append(`<option value="${data.data.id}"> 
													${data.data.name} 
												</option>`); 
							$('#create-address').modal('hide');
							reset_address_form();
						});
					}
				},
				error: function(data) {
					console.log(data);
				}
			});
		});
	</script>

	<script type="text/javascript">
		var product_price			=	0;
		var vat_value				=	(Number((Number($("#vat_value").val())/100).toFixed(2)));
		var discount_value			=	$("#delivery_price").val();
		var total_price_value		=	Number($("#total_price").val());
		var price_value				=	Number($("#price").val());
		var delivery_price_value	=	Number($("#delivery_price").val());
		var delivery_price_value	=	Number($("#delivery_price").val());
		var after_vat				=	0;
		var quantity_value			=	0;

		$(document).on('input', '.company-product, .product-price, #discount, #delivery_price, #stair_no', function(event) {
			var tot_price = 0;
			quantity_value = 0;
			$('.company-product').each(function(i, obj) {
				product_quantity = Number($(obj).val());
				quantity_value += product_quantity;
				tot_price += product_quantity * Number($(obj).parent().parent().next().children(0).find('.product-price').val());
			});
			change_quantity(parseFloat(tot_price));
		});

		function change_quantity(product_price) {
			$("#price").val(product_price);

			var vat					=	product_price * vat_value;

			var delivery_vat		=	Number($("#delivery_price").val()) * vat_value;

			var s_cost = 0;
			if (Number($("#stair_no").val()) >= 1) {
				s_cost				=	0.5;
				if (Number($("#stair_no").val()) >= 2) {
					s_cost			=	0.75;
					if (Number($("#stair_no").val()) >= 3) {
						s_cost		=	1.00;
					}
				}
			}
			var total_stair_cost	=	quantity_value * s_cost;
			var stairs_vat			=	(total_stair_cost * vat_value);

			var discount_vat		=	Number($("#discount").val()) * vat_value;
			vat						+=	delivery_vat	+	stairs_vat	-	discount_vat;

			after_vat = Number(vat).toFixed(2);
			$("#vat").val(after_vat);
			total_price_vat_included = Number(Number(after_vat) + Number(product_price) + Number(total_stair_cost) + Number($("#delivery_price").val()) - Number($("#discount").val())).toFixed(2);
			$("#total_price").val(total_price_vat_included);
		}
	</script>

	<!-- Map Script -->
	<script type="text/javascript">
		var points = [];
		var map;
		var selected_point = {lat: '', lng: ''};//{lat: 24.774265, lng: 46.738586};

		function initMap() {
			map = new google.maps.Map(document.getElementById('map-canvas'), {
				center: {
					lat: 24.774265,
					lng: 46.738586
					
				},
				zoom: 8
			});
			
			marker = new google.maps.Marker({
				map: map,
				draggable: true,
				animation: google.maps.Animation.DROP,
				position: {lat: 24.774265, lng: 46.738586}
			});
			marker.addListener('click', toggleBounce);

			google.maps.event.addListener(marker,'dragend',function(event) {
				$("#all_points").val({lat: this.position.lat(), lng: this.position.lng()});
				$("#lat").val(this.position.lat());
				$("#lng").val(this.position.lng());
				selected_point = {lat: this.position.lat(), lng: this.position.lng()};
			});
		}
		function toggleBounce() {
			if (marker.getAnimation() !== null) {
				marker.setAnimation(null);
			} else {
				marker.setAnimation(google.maps.Animation.BOUNCE);
			}
		}
	</script>
	<script async defer src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCmgVVBWPoe_QmTLa_0UCnMUj0aZGlZnsg&location=24.774265,46.738586&callback=initMap"></script>
@endpush