@extends('layouts.backend')
@section('content-header')
    <h1>
        {{ trans('backend.zones') }}
    </h1>
@stop

@section('content')
<div class="row">
	<div class="col-xs-12">
		@include('common.errors')
		<div class="box">
			<div class="box-header with-border">
	            <h1 class="box-title">{{ trans('backend.zone_create_form') }}</h1>
	        </div>
			<!-- /.box-header -->
			<div class="box-body">
				<form class="form-inputs" id="zone-form" action="{{ route('zones.store') }}" data-parsley-validate="true" method="post">
					@include('backend.zones._form')
				</form>
			</div>
			<!-- form -->
		</div>
		<!-- forms div -->
	</div>
</div>
@stop

@section('scripts')

<script>
        ImageNotRequired = true;
  function initMap() {

        lat = 26.8206;
        lng = 30.8025;
        $("#latitude").val(lat);
        $("#longitude").val(lng);
        var latlng = new google.maps.LatLng(lat, lng);
        var map = new google.maps.Map(document.getElementById('map'), {
            center: latlng,
            zoom: 4,
            mapTypeId: google.maps.MapTypeId.ROADMAP
        });
        var marker = new google.maps.Marker({
            position: latlng,
            map: map,
            title: 'Set lat/lon values for this project',
            draggable: true
        });
        var latitude, longitude;
        google.maps.event.addListener(marker, 'dragend', function (a) {
            latitude = a.latLng.lat().toFixed(7);
            longitude = a.latLng.lng().toFixed(7);
            $("#latitude").val(latitude);
            $("#longitude").val(longitude);
        });
  }
</script>
<script async defer
src="https://maps.googleapis.com/maps/api/js?key={{ config('custom-setting.googleMapKey') }}&callback=initMap">
</script>

@endsection