@extends('company.layouts.profile')

@section('page-title') ملف المندوب @endsection
@push('main-drivers-active') m-menu__item--active @endpush

@section('profile-picture'){{ URL::asset('/' . $driver->image) }}@endsection

@section('user-name')
{{ $driver['name'] }}
@endsection

@section('user-email')
{{ $driver['phone'] }}
@endsection

@section('profile-item')
<li class="m-nav__separator m-nav__separator--fit"></li>
<li class="m-nav__section">
	<span class="m-nav__section-text">الملف الشخصي</span>
</li>
<li class="m-nav__item m-nav__item--active">
	<a href="javascript:;" class="m-nav__link">
		<i class="m-nav__link-icon flaticon-analytics"></i>
		<span class="m-nav__link-title">
			<span class="m-nav__link-wrap">
				<span class="m-nav__link-text "> عرض بيانات المندوب</span>
			</span>
		</span>
	</a>
</li>
@endsection

@section('profile-title')
	عرض الملف الشخصي
@endsection

@section('profile-content')
<div class="m-portlet__head">
	<div class="m-portlet__head-tools">
		<ul class="nav nav-tabs m-tabs m-tabs-line m-tabs-line--left m-tabs-line--primary" role="tablist">
			<li class="nav-item m-tabs__item">
				<a class="nav-link m-tabs__link active" data-toggle="tab" href="#m_user_profile_tab_1" role="tab">
					<i class="flaticon-profile"></i>
					البيانات الأساسية
				</a>
			</li>
			<li class="nav-item m-tabs__item">
				<a class="nav-link m-tabs__link" data-toggle="tab" href="#m_user_profile_tab_2" role="tab">
					<i class="la la-key"></i>
					تغيير كلمة المرور
				</a>
			</li>
			<li class="nav-item m-tabs__item">
				<a class="nav-link m-tabs__link" data-toggle="tab" href="#m_user_profile_tab_3" role="tab">
					<i class="la la-clock-o"></i>
					مواعيد العمل
				</a>
			</li>
		</ul>
	</div>
</div>
<div class="tab-content">
	<div class="tab-pane active" id="m_user_profile_tab_1">
		<br>
		@if (session('Done'))
		<div class="alert alert-success alert-dismissible fade show" role="alert">
			<button type="button" class="close" data-dismiss="alert" aria-label="Close">
			</button>
			<strong>{{ session('Done') }}</strong>
		</div>
		@endif

		@if (session('ERROR'))
		<div class="alert alert-danger alert-dismissible fade show" role="alert">
			<button type="button" class="close" data-dismiss="alert" aria-label="Close">
			</button>
			<strong>{{ session('ERROR') }}</strong>
		</div>
		@endif

		@if ($errors->any())
		<div class="alert alert-danger alert-dismissible fade show" role="alert">
			<button type="button" class="close" data-dismiss="alert" aria-label="Close">
			</button>
			<strong>الرجاء تعديل الأخطاء</strong>
		</div>
		@endif
		<form action="{{ route('company.drivers.update', ['driver' => $driver->id]) }}" method="POST" class="m-form m-form--label-align-left- m-form--state-" id="m_form" enctype="multipart/form-data">
			@csrf {{ method_field('PUT') }}
			<div class="m-portlet__body">
				<div class="form-group m-form__group row">
					<div class="col-lg-6 m-form__group-sub">
						<label for="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="la la-user m--font-info"></i>
								</span>
							</div>
							<input type="text" id="name" name="name" value="{{ old('name')?: $driver->name }}" class="form-control m-input{{ $errors->has('name') ? ' is-invalid' : '' }}" autocomplete="off">
						</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="phone" class="form-control-label">رقم الجوال  *</label>
						<div class="input-group">
							<div class="input-group-prepend">
								<span class="input-group-text">
									<i class="la la-phone m--font-primary"></i>
								</span>
							</div>
							<input type="number" id="phone" name="phone" value="{{ old('phone')?: $driver->phone }}" class="form-control m-input{{ $errors->has('phone') ? ' is-invalid' : '' }}" autocomplete="off" 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="email" 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-at m--font-secondary"></i>
								</span>
							</div>
							<input type="email" id="email" name="email" value="{{ old('email')?: $driver->email }}" class="form-control m-input{{ $errors->has('email') ? ' is-invalid' : '' }}" autocomplete="off">
						</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 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">
					<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" value="{{ $driver->covered_area }}">
						<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-warning"><b> تعديل </b></button>
					</div>
				</div>
			</div>
		</form>
	</div>
	<div class="tab-pane" id="m_user_profile_tab_2">
		<br>
		@if (session('Done'))
		<div class="alert alert-success alert-dismissible fade show" role="alert">
			<button type="button" class="close" data-dismiss="alert" aria-label="Close">
			</button>
			<strong>{{ session('Done') }}</strong>
		</div>
		@endif

		@if (session('ERROR'))
		<div class="alert alert-danger alert-dismissible fade show" role="alert">
			<button type="button" class="close" data-dismiss="alert" aria-label="Close">
			</button>
			<strong>{{ session('ERROR') }}</strong>
		</div>
		@endif

		@if ($errors->any())
		<div class="alert alert-danger alert-dismissible fade show" role="alert">
			<button type="button" class="close" data-dismiss="alert" aria-label="Close">
			</button>
			<strong>الرجاء تعديل الأخطاء</strong>
		</div>
		@endif
		<form action="{{ route('company.drivers.update', ['driver' => $driver->id]) }}" method="POST" class="m-form m-form--label-align-left- m-form--state-" id="m_form" enctype="multipart/form-data">
			@csrf {{ method_field('PUT') }}
			<div class="m-portlet__body">

				<div class="form-group m-form__group row">
					<div class="col-10 ml-auto">
						<h3 class="m-form__section">تعديل كلمة المرور</h3>
						<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="password" 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-warning"></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">تأكيد كلمة المرور الجديدة </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-warning"></i>
								</span>
							</div>
							<input type="password" id="password-confirm" name="password_confirmation" class="form-control m-input">
						</div>
					</div>
				</div>
				<div class="m-portlet__foot m-portlet__foot--fit">
					<div class="m-form__actions">
						<button type="submit" class="btn btn-warning"><b> تعديل </b></button>
					</div>
				</div>
			</div>
		</form>
	</div>
	<div class="tab-pane" id="m_user_profile_tab_3">
		<form action="{{ route('company.drivers.update', ['driver' => $driver->id]) }}" method="POST" class="m-form m-form--label-align-left- m-form--state-" id="m_form" enctype="multipart/form-data">
			@csrf {{ method_field('PUT') }}
			<div class="m-portlet__body">
				<div class="form-group m-form__group row">
					<label for="work_hours" class="col-2 col-form-label">مواعيد العمل  <strong> * </strong></label>
					<div class="col-9">
						<div class="m-checkbox-inline">
							@for($i = 0; $i < 23; $i+=2)
							<label class="m-checkbox">
								<input type="checkbox" name="work_hours[]" value="{{ $i }}" {{ $driver->driver_work_hours()->where('work_hour', $i)->whereIsActive(1)->count()? 'checked' : '' }} > {{ $hour_types['ar'][$i] }} - {{ $hour_types['ar'][$i+2] }}
								<span></span>
							</label>
							<br>
							@endfor
						</div>
						@if ($errors->has('work_hours'))
						<span class="m-validation_error">
							<strong>
								{{ $errors->first('work_hours') }}
							</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-warning"><b> تعديل </b></button>
					</div>
				</div>
			</div>
		</form>
	</div>
</div>
@endsection

@push('page_level_style')
	<style type="text/css">
		#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: 315px;
			}
		}
		@media only screen and (min-width: 1900px) {
			#map-canvas {
				width: 100%;
				height: 400px;
			}
		}
		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
			});
		}

		function draw() {
			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.setDrawingMode(null);
				
				drawingManager.setOptions({
					drawingControl: false
				});
				
				coordinates.forEach(function (item) {
					points.push({lat: item.lat(), lng: item.lng()});
				});
				$('#all_points').val(JSON.stringify(points));
			});
		}

		function show_previous() {
			initMap();
			var covered = $('#all_points').val();

			points = JSON.parse(covered);

			var regionPath = new google.maps.Polygon({
				path: JSON.parse(covered),
				geodesic: true,
				strokeColor: '#FF0000',
				strokeOpacity: 1.0,
				strokeWeight: 2,
				fillColor: '#FF0000',
				fillOpacity: 0.35
			});

			regionPath.setMap(map);
		}

		$("#refresh-map").on('click', function(event){
			event.preventDefault();
			initMap();
			draw();
			$('#all_points').val(null);
		});

		$(document).ready(function () {
			show_previous();
		});
	</script>
	<script async defer src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCmgVVBWPoe_QmTLa_0UCnMUj0aZGlZnsg&libraries=drawing&callback=initMap"></script>
@endpush