@extends('admin.layouts.master')

@section('page-title') تعديل بيانات المدينة @endsection
@push('main-main_countries-active') m-menu__item--submenu m-menu__item--open m-menu__item--expanded @endpush
@push('main-cities-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-map-marker-alt"></i>
						</span>
						<h3 class="m-portlet__head-text">
							<span> تعديل بيانات المدينة </span>
						</h3>
					</div>
				</div>
			</div>
			<div class="m-portlet__body">
				@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 ($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('admin.cities.update', ['city' => $city->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 m-portlet__body--no-padding">
						<div class="m-form__heading">
							<h3 class="m-form__heading-title">تعديل بيانات مدينة</h3>
						</div>

						<div class="form-group m-form__group row">
							<div class="col-lg-6 m-form__group-sub">
								<label for="region_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-tag m--font-info"></i>
										</span>
									</div>
									<select class="form-control" id="region_id" name="region_id">
										@if($regions->count())
										@foreach($regions as $region)
										<option value="{{ $region->id }}" {{ ($city->region_id == $region->id)? 'selected' : '' }} >{{ $region->name }}</option>
										@endforeach
										@else
										<option value="0">لا يوجد مناطق</option>
										@endif
									</select>
								</div>
								@if ($errors->has('region_id'))
								<span class="m-validation_error">
									<strong>
										{{ $errors->first('region_id') }}
									</strong>
								</span>
								@endif
							</div>
							<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-align-right m--font-primary"></i>
										</span>
									</div>
									<input type="text" id="name" name="name" value="{{ old('name')?: $city['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>

						<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="{{ $city->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>
					</div>
					<br>
					<div class="m-portlet__foot m-portlet__foot--fit">
						<div class="m-form__actions">
							<button type="submit" class="btn btn-warning">
								<span> تعديل </span>
							</button>
						</div>
					</div>
				</form>

				<div class="m-separator m-separator--dashed m-separator--lg"></div>
				<div class="m-form__heading">
					<h3 class="m-form__heading-title">عرض جميع المدن</h3>
				</div>

				<table class="table table-striped- table-bordered table-hover table-checkable m-table m-table--head-bg-primary table-sm" id="m_table_1">
					<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><i class="flaticon-cogwheel-2"></i></b></th>
						</tr>
					</thead>
					<tbody>
						@foreach($cities as $single_city)
						<tr class="odd gradeX">
							<td class="text-center">
								{{ $loop->index + 1 }}
							</td>

							<td class="text-center">
								{{ $single_city->name }}
							</td>

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

							<td class="text-center">
								<a href="{{ route('admin.cities.edit', ['city' => $single_city->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>
								<a href="{{ route('admin.cities.delete', ['city' => $single_city->id]) }}" title="حذف" class="m-portlet__nav-link btn m-btn m-btn--hover-danger m-btn--icon m-btn--icon-only m-btn--pill" onclick="return confirm('تأكيد الحذف')">
									<i class="la la-ban"></i>
								</a>
							</td>
						</tr>
						@endforeach
					</tbody>
				</table>
			</div>
		</div>
	</div>
</div>
@stop

@push('page_level_style')
	<style type="text/css">
		#body_en {
			text-align: left;
		}
		#title_en {
			text-align: left;
		}
	</style>
	<style type="text/css">
		#map-canvas {
			width: 500px;
			height: 500px;
		}
		@media only screen and (min-width: 479px) {
			#map-canvas {
				width: 250px;
				height: 250px;
			}
		}
		@media only screen and (min-width: 989px) {
			#map-canvas {
				width: 315px;
				height: 315px;
			}
		}
		@media only screen and (min-width: 1200px) {
			#map-canvas {
				width: 600px;
				height: 400px;
			}
		}
		@media only screen and (min-width: 1500px) {
			#map-canvas {
				width: 900px;
				height: 500px;
			}
		}
		@media only screen and (min-width: 1700px) {
			#map-canvas {
				width: 1200px;
				height: 600px;
			}
		}
	</style>
@endpush

@push('page_level_script')
	<script src="{{ URL::asset('/assets/admin/datatables.js') }}"></script>
	<script src="https://unpkg.com/sweetalert/dist/sweetalert.min.js"></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();
			points = [];
			$('#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