@extends('back.layouts.main')
@section('title', __('back.shops'))
@section('content')
    <div id="thirty_min_zone" class="content" @if (request()->has('tab') && request('tab') == '30_min_zone') active @endif>
        <form method='post' class='' action="{{ route('shops.update_thirty_min_zone') }}">
            @csrf
            <input type="hidden" name="shop_id" value='{{ $model->id }}'>
            <div class="result"></div>
        </form>
        <button class='btn btn-info redraw float-right' >اعادة الرسم</button>
        <div class="clearfix"></div>
        <div id="map" style='with:100%;height:85vh;'></div>
    </div>
@stop

@push('footer')
    <script>
        var map, bounds;
        var _myPolygon;
        function initMap() {
            @if($model->shopAddress && $model->shopAddress->lat!='')
            var center = {
                lat: {{(float) $model->shopAddress->lat}},
                lng: {{(float) $model->shopAddress->lng}},
            };
            var zoom = 12;
            @else
            var center = {
                lat: 23.4241,
                lng: 53.8478
            };
            var zoom = 8;
            @endif
            bounds = new google.maps.LatLngBounds();
            map = new google.maps.Map(document.getElementById('map'), {
                zoom: zoom,
                center: center
            });
            drawingManager();
            drawingPolygon( @json($model->getThirtyMinZone() ));

        }


        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 html ='';
                for (var i = 0; i < polygonBounds.length; i++) {
                    html +='<input type="hidden" name="polygon['+i+'][lat]" value="'+polygonBounds.getAt(i).lat()+'">';
                    html +='<input type="hidden" name="polygon['+i+'][lng]" value="'+polygonBounds.getAt(i).lng()+'">';
                }
                html+= '<p>اضغط على تعديل لحفظ حدود المنطقة</p> \
                <button type="submit" class="btn btn-info" >تعديل </button> \
                ';
                $('.result').html(html);
                _myPolygon = polygon;
            });
            
           
            $('.redraw').click(function() {
                if (typeof _myPolygon != 'undefined') {
                    _myPolygon.setMap(null);
                }
                drawingManager.setMap(map);
            })
        }

        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);
            _myPolygon = polygon ; 
            var bounds = new google.maps.LatLngBounds();
            regionPolygon.forEach(function(place) {
                bounds.extend(place);            
            });
            map.fitBounds(bounds);
        }
    </script>
    <script async defer
        src="https://maps.googleapis.com/maps/api/js?libraries=drawing,geometry&key={{ env('GOOGLE_MAP_KEY', 'AIzaSyCncBNNbERieJpjTUvo7VtQWGXMmXUiUu0') }}&callback=initMap">
    </script>
@endpush


@section('breadcrumbs')
    <li class="breadcrumb-item"><a href="{{ url('backend/shops/' . $model->id) }}">{{ $model->name }}</a></li>
    <li class="breadcrumb-item active">30 Min Zone</li>
@stop