@extends('admin.layouts.master')

@section('page-title') اضافة مخزن جديد @endsection
@push('main-warehouses-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> اضافة مخزن جديد </span>
						</h3>
					</div>
				</div>
			</div>
			<div class="m-portlet__body">
				<form action="{{ route('admin.warehouses.store') }}" class="m-form form-horizontal" method="POST" enctype="multipart/form-data">
				 @csrf

					<div class="form-group m-form__group row">
						<div class="col-lg-6 m-form__group-sub">
							<label for="name" 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="la la-user m--font-primary"></i>
									</span>
								</div>
								<input type="text" id="name" name="name" value="{{ old('name') }}" class="form-control m-input{{ $errors->has('name') ? ' is-invalid' : '' }}" autocomplete="off" autofocus="on">
							</div>
							@if ($errors->has('name'))
							<span class="m-validation_error">
								<strong>
									{{ $errors->first('name') }}
								</strong>
							</span>
							@endif
						</div>
						<div class="col-lg-6 m-form__group-sub">
							<label for="warehouse_manager_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="warehouse_manager_id" name="warehouse_manager_id">
									@if($warehouse_managers->count())
									@foreach($warehouse_managers as $warehouse_manager)
									<option value="{{ $warehouse_manager->id }}">{{ $warehouse_manager->name }}</option>
									@endforeach
									@else
									<option value="0">لا يوجد مدن</option>
									@endif
								</select>
							</div>
							@if ($errors->has('warehouse_manager_id'))
							<span class="m-validation_error">
								<strong>
									{{ $errors->first('warehouse_manager_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="city_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="la la-map-marker m--font-primary"></i>
									</span>
								</div>
								<select class="form-control" id="city_id" name="city_id">
									@if($cities->count())
									@foreach($cities as $city)
									<option value="{{ $city->id }}">{{ $city->name }}</option>
									@endforeach
									@else
									<option value="0">لا يوجد مدن</option>
									@endif
								</select>
							</div>
							@if ($errors->has('city_id'))
							<span class="m-validation_error">
								<strong>
									{{ $errors->first('city_id') }}
								</strong>
							</span>
							@endif
						</div>
					</div>

					<div class="form-group m-form__group row">
						<label for="points" class="col-2 col-form-label">العنوان على الخريطة  <strong> * </strong></label>
						<div class="col-9">
							<div id="map-canvas"></div>
							<input type="hidden" name="points" id="points">
							<input type="hidden" name="lat" id="lat">
							<input type="hidden" name="lng" id="lng">
							@if ($errors->has('points'))
							<span class="m-validation_error">
								<strong>
									{{ $errors->first('points') }}
								</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.warehouses.index') }}" class="btn btn-warning">
								<span> الغاء والعودة  </span>
							</a>
						</div>
					</div>
				</form>
			</div>
		</div>
	</div>
</div>
@stop

@push('page_level_style')
<style type="text/css">
		#email, #phone {
			direction: ltr;
			text-align: left;
		}
		input[type=number]::-webkit-inner-spin-button, input[type=number]::-webkit-outer-spin-button { 
			-webkit-appearance: none;
			direction: ltr;
		}
		#map-canvas {
			width: 100%;
			height: 500px;
		}
		@media only screen and (min-width: 479px) {
			#map-canvas {
				width: 100%;
				height: 250px;
			}
		}
		@media only screen and (min-width: 989px) {
			#map-canvas {
				width: 100%;
				height: 350px;
			}
		}
	</style>
@endpush

@push('page_level_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) {
				$("#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()};

				console.log($("#lat").val());
				console.log($("#lng").val());
				// console.log('lat: '+this.position.lat());
				// console.log('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&libraries=drawing&callback=initMap"></script>
@endpush