@extends('back.layouts.main')
@section('title' , 'المناطق')
@section('content')


<div class="card">
    <div class="card-content collapse show">
        <div class="card-body card-dashboard">
            <h2>
                اضغط على منتصف المنطقة على الخريطة لربطها بمناطق جوجل
                <br>
                <b style="text-decoration: underline;" >أو</b>
                ارسم حدود المنطقة من على الخريطة بالضغط على
                <img src='{{url('icons2/polygon.png')}}'>
            </h2>
            <form method='post' action="regions/update/{{$id}}" @if(!isset($geolocations)) style='display:none' @endif class='form'>
                @csrf
                <div class="result">
                    @isset($geolocations)
                    <p>اختر منطقة</p>
                    <ul style="list-style: none;">
                        @foreach ($geolocations as $geolocation)
                            <li><input class='geolocation' name='Region[google_name]' {{checked($geolocation ,$region->google_name)}} type='radio' value="{{ $geolocation }}">{{ $geolocation }}</li>
                        @endforeach
                    </ul>
                    @endif
                </div>
                <input type="submit" name='save' value='تعديل' class='btn btn-success'>
            </form>

            <a href='javascript:void(0)' class='redraw float-right btn btn-warning'>اعادة تحديد منطقة</a>
            <input style='width:100%' id="pac-input">
            <div id="map" style='with:100%;height:400px;margin-top:20px'></div>


        </div>
    </div>
</div>
@stop
@push('footer')

<script>
     var center = {lat: 24.4539, lng: 54.3773};
        var zoom = 7 ;
		var marker,map,polygon ;

    function initMap() {
        map = new google.maps.Map(document.getElementById('map'), {
            zoom: zoom,
            center: center
		});

		var input = document.getElementById('pac-input');
		var searchBox = new google.maps.places.SearchBox(input);

        // Bias the SearchBox results towards current map's viewport.
        map.addListener('bounds_changed', function() {
          searchBox.setBounds(map.getBounds());
        });

		searchBox.addListener('places_changed', function() {
          var places = searchBox.getPlaces();
          if (places.length == 0) {
            return;
          }

        // For each place, get the icon, name and location.
        var bounds = new google.maps.LatLngBounds();
        places.forEach(function(place) {
            if (!place.geometry) {
              console.log("Returned place contains no geometry");
              return;
            }

            if (place.geometry.viewport) {
              // Only geocodes have viewport.
              bounds.union(place.geometry.viewport);
            } else {
              bounds.extend(place.geometry.location);
            }
          });
          map.fitBounds(bounds);
          fetchGeoLocation(map.getCenter());
        });
        drawingPolygon( @json($region->getpolygon() ));
        drawingManager();

        map.addListener('click', function(e) {
            fetchGeoLocation(e.latLng);
        });

    }

    function fetchGeoLocation(latLng){
        var point = {};
        point.lat = latLng.lat(),
        point.lng = latLng.lng(),
        $.ajax({
            url:'{{url('backend/regions/geolocation')}}',
            data:point,
            dataType: "json",
        }).done(function(response){
            console.log(response);
            var html = '' ;
            html += '<p>اختر منطفة</p>' ;
            html += '<ul style="list-style: none;">' ;
            response.forEach(function(item){
                html += "<li><input class='geolocation' name='Region[google_name]' type='radio' value='"+item+"'>"+item+"</li>" ;
            })
            html += '</ul>' ;
            html +='<input type="hidden" name="Region[lat]" value="'+point.lat+'">';
            html +='<input type="hidden" name="Region[lng]" value="'+point.lng+'">';
            $('.form').show();
            $('.result').html(html);
        })
    }

    function drawingPolygon(regionPolygon){
        if(!regionPolygon)return ;
        if(typeof polygon !='undefined')
            polygon.setMap(null);

        // Construct the polygon.
        polygon = new google.maps.Polygon({
            paths: regionPolygon,
            strokeColor: "#FF0000",
            strokeOpacity: 0.8,
            strokeWeight: 2,
            fillColor: "#FF0000",
            fillOpacity: 0.35,
        });
        polygon.setMap(map);

        var bounds = new google.maps.LatLngBounds();
        regionPolygon.forEach(function(place) {
            bounds.extend(place);
        });
        map.fitBounds(bounds);
    }
    function drawingManager(){
        var drawingManager = new google.maps.drawing.DrawingManager({
            drawingMode: google.maps.drawing.OverlayType.POLYGON,
            drawingControl: true,
            drawingControlOptions: {
            position: google.maps.ControlPosition.TOP_CENTER,
                drawingModes: ['polygon' ]
            },
            polygonOptions: {
                editable: true
            }

        });
        drawingManager.setMap(map);
        drawingManager.setDrawingMode(null);

        google.maps.event.addListener(drawingManager, 'polygoncomplete', function(polygon) {
            var polygonBounds = polygon.getPath();
            var bounds = [];
            var html ='';
            for (var i = 0; i < polygonBounds.length; i++) {
                html +='<input type="hidden" name="Region[polygon]['+i+'][lat]" value="'+polygonBounds.getAt(i).lat()+'">';
                html +='<input type="hidden" name="Region[polygon]['+i+'][lng]" value="'+polygonBounds.getAt(i).lng()+'">';
            }
            html+= '<p>اضغط على تعديل لحفظ حدود المنطقة</p>';
            $('.result').html(html);

        });
        var _myPolygon ;
        google.maps.event.addListener(drawingManager, 'overlaycomplete', function(e) {
           e.overlay.set('editable', false);
           drawingManager.setMap(null);
            _myPolygon = e.overlay;
        });
        $('.redraw').click(function(){
            if(typeof _myPolygon != 'undefined'){
                _myPolygon.setMap(null);
            }
            drawingManager.setMap(map);
            polygon.setMap(null);
        })
    }

	$('#pac-input').change(function(){
        console.log($(this).val());
		var link = $(this).val().search("google");
		if(link!=-1){
			var regex = new RegExp('@(.*),(.*),');
            var lng_lat_match = $(this).val().match(regex);
            var lat = lng_lat_match[1];
            var lng = lng_lat_match[2];
            console.log(lng );
			//alert(1);
            $('#maplat').val(lat);
			$('#maplng').val(lng);
			initMap();
		}

	})
    @if(request()->has('check-region'))
        $(document).on('change','.geolocation',function(){
            var data = {};
            data['name'] = $(this).val();

            $.ajax({
                url:'{{url('backend/regions/geolocation/search')}}',
                data:data,
                dataType: "json",
            }).done(function(response){
            drawingPolygon(response)
            })
        })
    @endif
	$(document).keypress(function (e) {
	 if(e.which == 13)  // the enter key code
		return false;
	});
</script>
<script async defer
src="https://maps.googleapis.com/maps/api/js?libraries=places,drawing,geometry&key={{env('GOOGLE_MAP_KEY','AIzaSyCncBNNbERieJpjTUvo7VtQWGXMmXUiUu0')}}&callback=initMap">
</script>


@endpush

@section('breadcrumbs')
    <li class="breadcrumb-item" ><a href="{{url('backend/regions')}}">المناطق</a></li>
    <li class="breadcrumb-item active">{{ $region->name }}</li>
@stop