@extends('admin.layouts.master')

@section('page-title') اضافة مندوب جديد @endsection
@push('main-drivers-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.drivers.store') }}" class="form-horizontal" method="POST" enctype="multipart/form-data">
				 @csrf

					<div class="form-group m-form__group row">
						<label for="type" class="col-2 col-form-label">نوع المندوب <strong> * </strong></label>
						<div class="col-10">
							<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="type" name="type">
									<option value="app">مندوب سقياكم</option>
									<option value="company">مندوب شركة</option>
									<option value="freelancer">مندوب حر (Freelancer)</option>
								</select>
							</div>
							@if ($errors->has('type'))
							<span class="m-validation_error">
								<strong>
									{{ $errors->first('type') }}
								</strong>
							</span>
							@endif
						</div>
					</div>

					<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 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-image m--font-success"></i>
									</span>
								</div>
								<div class="custom-file">
									<input type="file" id="image" name="image" value="{{ old('image') }}" class="custom-file-input" accept="image/*">
									<label class="custom-file-label" for="image">اختيار الصورة</label>
								</div>
							</div>
							@if ($errors->has('image'))
							<span class="m-validation_error">
								<strong>
									{{ $errors->first('image') }}
								</strong>
							</span>
							@endif
						</div>
					</div>

					<div class="form-group m-form__group row">
						<div class="col-lg-6 m-form__group-sub">
							<label for="email" 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-envelope m--font-warning"></i>
									</span>
								</div>
								<input type="email" id="email" name="email" value="{{ old('email') }}" class="form-control m-input{{ $errors->has('email') ? ' is-invalid' : '' }}">
							</div>
							@if ($errors->has('email'))
							<span class="m-validation_error">
								<strong>
									{{ $errors->first('email') }}
								</strong>
							</span>
							@endif
						</div>
						<div class="col-lg-6 m-form__group-sub">
							<label for="phone" 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-phone m--font-success"></i>
									</span>
								</div>
								<input type="number" id="phone" name="phone" value="{{ old('phone') }}" class="form-control m-input{{ $errors->has('phone') ? ' is-invalid' : '' }}" placeholder="مثال: 0566123456">
								<div class="input-group-append">
									<span class="input-group-text">
										00966
									</span>
								</div>
							</div>
							@if ($errors->has('phone'))
							<span class="m-validation_error">
								<strong>
									{{ $errors->first('phone') }}
								</strong>
							</span>
							@endif
						</div>
					</div>

					<div class="form-group m-form__group row">
						<div class="col-lg-6 m-form__group-sub">
							<label for="password" 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-key m--font-danger"></i>
									</span>
								</div>
								<input type="password" id="password" name="password" class="form-control m-input{{ $errors->has('password') ? ' is-invalid' : '' }}">
							</div>
							@if ($errors->has('password'))
							<span class="m-validation_error">
								<strong>
									{{ $errors->first('password') }}
								</strong>
							</span>
							@endif
						</div>
						<div class="col-lg-6 m-form__group-sub">
							<label for="password-confirm" 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-key m--font-danger"></i>
									</span>
								</div>
								<input type="password" id="password-confirm" name="password_confirmation" class="form-control m-input">
							</div>
						</div>
					</div>

					<div class="form-group m-form__group row">
						<div class="col-lg-6 m-form__group-sub">
							<label for="companies" class="form-control-label">الشركات  <strong> * </strong></label>
							@if($companies->count())
							<div class="m-checkbox-inline">
								@foreach($companies as $company)
								<label class="m-checkbox">
									<input type="checkbox" name="companies[]" value="{{ $company->id }}"> {{ $company->name }}
									<span></span>
								</label>
								@endforeach
							</div>
							@else
							<br>لا يوجد شركات حالياً <br>
							@endif
							@if ($errors->has('companies'))
							<span class="m-validation_error">
								<strong>
									{{ $errors->first('companies') }}
								</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="all_points">
							<br>
							<a href="javascript:;" class="btn btn-secondary active" id="refresh-map">
								<span>اعادة تعيين المنطقة</span>
							</a>
							@if ($errors->has('points'))
							<span class="m-validation_error">
								<strong>
									{{ $errors->first('points') }}
								</strong>
							</span>
							@endif
						</div>
					</div>
					<br>
					<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.drivers.index') }}" class="btn btn-warning">
								<span> الغاء والعودة  </span>
							</a>
						</div>
					</div>
				</form>
			</div>
		</div>
	</div>
</div>
@stop

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

@endpush

@push('page_level_script')
	<script>
		var points = [];
		var map;
		function initMap() {
			map = new google.maps.Map(document.getElementById('map-canvas'), {
				center: {
					lat: 24.774265,
					lng: 46.738586
					
				},
				zoom: 8
			});

			var drawingManager = new google.maps.drawing.DrawingManager({
				drawingMode: google.maps.drawing.OverlayType.POLYGON,
				drawingControl: true,
				drawingControlOptions: {
					position: google.maps.ControlPosition.TOP_CENTER,
					drawingModes: ['polygon']
				}
			});
			drawingManager.setMap(map);
		

		
			google.maps.event.addListener(drawingManager, 'polygoncomplete', function (polygon) {
				var coordinates = (polygon.getPath().getArray());
				

				// drawingManager.setOptions({
				// 	drawingControl: true
				// });
				drawingManager.setDrawingMode(null);
				
				drawingManager.setOptions({
					drawingControl: false
				});
				
				coordinates.forEach(function (item) {
					points.push({lat: item.lat(), lng: item.lng()});
				});
				$('#all_points').val(JSON.stringify(points));
				for (i in points)
					console.log(points[i]);
			});
		}

		$("#refresh-map").on('click', function(event){
			event.preventDefault();
			initMap();
			$('#all_points').val(null);
		});
	</script>
	<script async defer src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCmgVVBWPoe_QmTLa_0UCnMUj0aZGlZnsg&libraries=drawing&callback=initMap"></script>
@endpush