@extends('layouts.seller')

@section('content')
<style type="text/css">
    .dsbld-lyr{
        display:none;
        position: absolute;
        background: rgba(0,0,0,0.7);
        width: 100%;
        height: 100%;
        z-index: 999;
    }
    .dsbld-lyr p{
        color: #ffffff87;
        margin: 0;
        text-align: center;
        font-size: 22px;
        font-weight: bold;
        top: 50%;
        position: relative;
        transform: translateY(-50%);
    }

    #map{
        height: 89vh;
        width: 750px;
        border: 1px solid #999;
        margin-right: 10px;
    }
    .right_col{
        padding: 0 0 0 10px !important;
    }
    .map-popup{
        display:none;
        position: absolute;
        left: 50%;
        top:50%;
        transform: translate(-50%,-50%);
        background: #fff;
        border-radius: 2px;
        box-shadow: 0 5px 7px -4px #333;
        width: 450px;
        /*height: 350px;*/
        z-index: 2;
        padding: 15px;
    }
    .map-popup p{
        font-size: 16px;
        font-weight: bold;
    }
    .btn-rect{
        margin:15px auto;
    }
    .select-mapbox{
        background: #fff;
        padding: 15px;
        margin-bottom: 20px;
        box-shadow: 0 2px 2px 0px #999;
    }
    .select-mapbox select{
        margin-bottom: 20px;
        width: 100%;
        height: 26px;
        border: 1px solid #999;
    }
    .select-mapbox label{
        font-size: 16px;
        font-weight: 400;
    }
    #selected_zone_div{
        margin-left: 14px;
    }
</style>
<div class="page-header text-uppercase">
    <ul class="list-unstyled space-list m-0">
        <li>
            <p>{!! __('delivery_area.title') !!}</p>
        </li>
        <li>
            <nav aria-label="breadcrumb">
                <ol class="breadcrumb">
                    <li class="breadcrumb-item"><a href="#">{!! __('delivery_area.title') !!}</a></li>
                </ol>
            </nav>
        </li>
    </ul>
</div>
<div class="admin-area-col">

    <div class="row">
        <div class="col-12">
            <div class="error-msg font-14 mt-2"></div>
            <div class="round-white-bg box-shadow">
                <div class="row">
                    <div class="col-12">
                        <div class="row">
                            <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
                                <div class="row">
                                    <div class="col-md-12">
                                        <div class="custom-input-group colored-field-group">
                                            {!! Form::label('area_type', __('delivery_area.area_type'), ['class' => 'control-label mb-2']) !!}

                                            {!! Form::select('area_type', deliveryAreaType(), $result->delivery_area, ['id'=>'type','class'=>'form-control']) !!}

                                        </div>
                                    </div>

                                    <div class="col-md-12">
                                        <div class="form-group row" id="map_area">
                                            <div class="col-md-12">
                                                <div class="form-group">
                                                    <!-- <input type="text" class="form-control"> -->
                                                    <input type="button" id="create_zone" class="btn btn-primary btn-sm" value="{{ __('delivery_area.create_zone') }}" onclick="drawing_zone_type_fun()">
                                                </div>
                                            </div>

                                            <div class="map-popup" id="map_popup">
                                                <p>{{ __('delivery_area.save_msg') }}</p>
                                                <div class="btn-react">
                                                    <input type="button" class="btn btn-primary btn-sm" name="" id="save_zone" value="{!! __('common.save') !!}">
                                                    <input type="button" class="btn btn-danger btn-sm" name="" id="cancel_zone" value="{!! __('common.cancel') !!}">
                                                </div>
                                            </div>
                                            <div class="col-md-3">
                                                <div class="map-right-side">
                                                    <form>
                                                        <div class="form-group">
                                                        <div id="selected_zone_div" style="display:none;">

                                                            <div class="select-mapbox">
                                                                <label>{{ __('delivery_area.details') }} </label>
                                                                <input type="hidden" name="hdn_zone_id" id="hdn_zone_id">
                                                                <input type="hidden" name="zone_data" id="hdn_zone_data">

                                                                <div id="selected_area"></div>
                                                                <input type="button" class="btn btn-primary btn-sm" value="{!! __('common.update') !!}" onclick="update_zone();">
                                                                <input type="button" class="btn btn-primary btn-sm" value="{!! __('common.delete') !!}" onclick="delete_zone();">

                                                            </div>
                                                        </div>
                                                    </div>
                                                    </form>
                                                    <input type="hidden" id="sellerId" value="{{ $result->id }}">

                                                </div>
                                            </div>
                                            <div class=" col-md-9">
                                                <div id="map"></div>
                                            </div>


                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection
@section('script')
<script src="https://maps.googleapis.com/maps/api/js?key={{ config('constants.GOOGLE_MAP_KEY') }}&libraries=drawing&callback=initMap" async defer></script>

<script>
                    document.getElementById("map_area").style.display = "flex";
                // This example requires the Drawing library. Include the libraries=drawing
            // parameter when you first load the API. For example:
            // <script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&libraries=drawing">
            var map_popup = document.getElementById("map_popup");
            var all_objs = [];
            var drawingControl_val = false;
            var zone_data, drawing_zone_type, drawingManager, editable_map, sellerId, type = false;
            var drawing_manager_type = "none";
            var drawingMode_val;
            var all_overlays = [];
            var selectedShape;
            var drawing_color = '#337ab7';
            var zone_id;
            var selected_zone_type;
            var colors = ['#1E90FF', '#FF1493', '#32CD32', '#FF8C00', '#4B0082'];
            var selectedColor, polygon, polygon_tmp, map, selected_zone_data;
            var colorButtons = {};
            var zoom_val = 11;
            var zone_id = 0;
            var allZones = [];
             var map_center_lat = ;
            var map_center_lng =  ;
            //var map_center_lat = 23.689805;
            // var map_center_lng = 78.841934;

            function test_fun() {

                var len = polygon_tmp.getPath().getLength();
                var htmlStr = [];
                for (var i = 0; i < len; i++) {
                    var edges = polygon_tmp.getPath().getAt(i).toUrlValue(5);

                    htmlStr.push(edges);
                    // edges = edges.replace(',', ', ');
                    // htmlStr.push('(' + edges + ')');
                }


                zone_data = htmlStr.join();



            }

            function clearSelection() {
                if (selectedShape) {
                    selectedShape.setEditable(false);
                    selectedShape = null;
                }
            }

            function setSelection(shape) {
                clearSelection();
                selectedShape = shape;
                shape.setEditable(true);

            }

            function deleteSelectedShape() {
                if (selectedShape) {
                    selectedShape.setMap(null);
                }
            }

            function deleteAllShape() {
                for (var i = 0; i < all_overlays.length; i++) {
                    all_overlays[i].overlay.setMap(null);
                }
                all_overlays = [];
            }

            function getPolygonCoordsnew(polygon) {

                var len = polygon.getPath().getLength();
                var htmlStr = [];
                for (var i = 0; i < len; i++) {
                    var edges = polygon.getPath().getAt(i).toUrlValue(5);

                    htmlStr.push(edges);

                    // edges = edges.replace(',', ', ');
                    // htmlStr.push('(' + edges + ')');
                }


                zone_data = htmlStr.join();

                //var map_popup=document.getElementById("map_popup");
                map_popup.style.display = "block";

            }


            function initMap() {
                map = new google.maps.Map(document.getElementById('map'), {
                    //center: {lat: -34.397, lng: 150.644},
                    center: {lat: map_center_lat, lng: map_center_lng},
                    zoom: zoom_val
                });
               /* let myLatLng = { lat: 59.316667, lng: 18.133333 };
                var marker = new google.maps.Marker({
                    position: myLatLng,
                    title:"Hello World!"
                });

                // To add the marker to the map, call setMap();
                marker.setMap(map);*/
    

    

                if (drawing_manager_type == "none") {
                    drawingMode_val = google.maps.drawing.OverlayType.none;
                }
                else {
                    drawingMode_val = google.maps.drawing.OverlayType.POLYGON;
                }

                drawingManager = new google.maps.drawing.DrawingManager({
                    //drawingMode: google.maps.drawing.OverlayType.MARKER,
                    drawingMode: drawingMode_val,
                    drawingControl: drawingControl_val,
                    drawingControlOptions: {
                        position: google.maps.ControlPosition.TOP_CENTER,
                        //drawingModes: ['marker', 'circle', 'polygon', 'polyline', 'rectangle']
                        drawingModes: ['polygon']
                    },
                    markerOptions: {icon: 'https://developers.google.com/maps/documentation/javascript/examples/full/images/beachflag.png'},
                    circleOptions: {
                        fillColor: '#ffff00',
                        fillOpacity: 1,
                        strokeWeight: 5,
                        clickable: false,
                        editable: true,
                        zIndex: 1
                    },
                    polygonOptions: {
                        editable: true,
                        draggable: true,
                        fillColor: drawing_color,
                        strokeColor: drawing_color
                    }
                });





                drawingManager.setMap(map);

                google.maps.event.addListener(drawingManager, 'overlaycomplete', function (e) {
                    deleteAllShape();
                    all_overlays.push(e);
                    if (e.type != google.maps.drawing.OverlayType.MARKER) {
                        // Switch back to non-drawing mode after drawing a shape.
                        drawingManager.setDrawingMode(null);
                        // Add an event listener that selects the newly-drawn shape when the user
                        // mouses down on it.
                        var newShape = e.overlay;
                        newShape.type = e.type;
                        google.maps.event.addListener(newShape, 'click', function () {
                            setSelection(newShape);
                        });
                        setSelection(newShape);
                    }

                    if (e.type != google.maps.drawing.OverlayType.POLYGON) {
                        alert("google");
                    }

                });


                google.maps.event.addListener(drawingManager, 'polygoncomplete', function (polygon) {
                    getPolygonCoordsnew(polygon);


                    google.maps.event.addListener(polygon.getPath(), 'set_at', function () {

                        getPolygonCoordsnew(polygon);
                    });

                    google.maps.event.addListener(polygon.getPath(), 'insert_at', function () {
                        getPolygonCoordsnew(polygon);
                    });

                    google.maps.event.addListener(polygon.getPath(), 'remove_at', function () {
                        getPolygonCoordsnew(polygon);
                    });

                    google.maps.event.addListener(polygon, 'dragend', function () {
                        getPolygonCoordsnew(polygon);
                    });
                });




                google.maps.event.addListener(drawingManager, 'drawingmode_changed', clearSelection);

                google.maps.event.addDomListener(document.getElementById('cancel_zone'), 'click', deleteAllShape);

            }


            function drawing_zone_type_fun() {
                $("#dsbld_lyr").css("display", "none");
                // drawing_zone_type = document.getElementById("drawing_zone_type").value;
                sellerId = document.getElementById("sellerId").value;
                type = document.getElementById("type").value;

        /// change
                $("#selected_zone_div").css("display", "none");
                //  $("#drawing_zone_type_div").css("display", "block");
                //  $("#dsbld_lyr").css("display", "block");
                drawingControl_val = true;
                drawing_manager_type = "POLYGON";
        /// change

                initMap();
                alert("Draw your points on map");
            }




            $('#save_zone').on("click", function (e) {
                create_zone(zone_data, sellerId, type);
                map_popup.style.display = "none";
            });


            $('#edit_zone').on("click", function (e) {
                // create_zone(zone_data,1);
                // map_popup.style.display="none";
            });




            $('#cancel_zone').on("click", function (e) {
                var map_popup = document.getElementById("map_popup");
                map_popup.style.display = "none";

                return false;



            });


            function selected_zone_details(name, type) {

                zoom_val = map.getZoom();
                var map_center_str = map.getCenter() + "";

                map_center_str = map_center_str.replace("(", "");
                map_center_str = map_center_str.replace(")", "");
                map_center_str = map_center_str.replace(" ", "");
                //map_center_str= map_center_str.replace("(", "");


                var res = map_center_str.split(",");

                map_center_lat = parseFloat(res[0]);
                map_center_lng = parseFloat(res[1]);

                var selected_zone_div = document.getElementById("selected_zone_div");
                selected_zone_data = allZones[name];
                document.getElementById("hdn_zone_data").value = selected_zone_data;
                document.getElementById("selected_area").innerHTML = "<h4>Zone Id :- " + name + "</h2>";
                selected_zone_div.style.display = "block";
                var hdn_zone_id = document.getElementById("hdn_zone_id");
                //hdn_zone_data
                // zone_type = document.getElementById("zone_type");
                zone_id = hdn_zone_id.value = name;
                // selected_zone_type = zone_type.value = type;
                initMap();
            }



            function create_zone(lat_long, sellerId, type) {
                $.ajax({
                    url: "{{ route('delivery-area.create') }}",
                    type: "GET",
                    datatype: "text",
                    data: {lat_long: lat_long,
                         type: type,
                         _token:token
                        },
                    success: function (data) {
                        data=jQuery.parseJSON(data);
                        if (data.status == 200) {
                            alert(data.message);
                            location.reload(true);
                        }
                        else {
                            alert(data.message);
                        }
                    },
                    error: function () {
                        alert("Something went wrong");
                    }
                });
            }


            function update_zone() {
                let url= "{{ route('delivery-area.update','') }}";
              //  console.log(url);
                $.ajax({
                    url: url+'/'+zone_id, //root + "zone/update_zone",
                    type: "PUT",
                    data: {
                        zone_id: zone_id,
                         zone_type: type,
                         zone_data: zone_data,
                         _token:token
                        },
                    success: function (data) {
                        data=jQuery.parseJSON(data);
                        if (data.status == 200) {
                            alert(data.message);
                            location.reload(true);
                        }
                        else {
                            alert(data.message);
                        }
                    },
                    error: function () {
                        alert("Something went wrong");
                    }
                });
            }



            function delete_zone() {
                var selected_zone_div = document.getElementById("selected_zone_div");
                let url= "{{ route('delivery-area.destroy','') }}";
                $.ajax({
                    url: url+'/'+zone_id,
                    type: "DELETE",
                    data: {_token: token},
                    success: function (data) {
                        data=jQuery.parseJSON(data);
                        if (data.status == 200) {
                            alert(data.message);
                            selected_zone_div.style.display = "none";
                            location.reload(true);

                        }
                        else {
                            alert(data.message);
                        }
                    },
                    error: function () {
                        alert("Something went wrong");
                    }
                });
            }


            function edit_zone() {
                initMap();
            }
            $(document).on("change","#type",function() {

            let storeId=$("#sellerId").val();
            let type=$(this).val();
          //  alert(storeId+type);
            if (type == '0')
                {
                    document.getElementById("map_area").style.display = "flex";
                }
                if (type == '1')
                {
                    document.getElementById("map_area").style.display = "none";
                }
                $.ajax({
                    url: "{{ route('seller.delivery-area.update-type') }}",
                    type: "POST",
                    data: {
                        storeId: storeId,
                        type: type,
                        _token:token
                        },
                    success: function (data) {

                        data=jQuery.parseJSON(data);
                        if (data.status == 200) {
                            alert(data.message);
                            selected_zone_div.style.display = "none";
                            //location.reload(true);

                        }
                        else {
                            alert(data.message);
                        }
                    },
                    error: function () {
                        alert("Something went wrong");
                    }
                });
            });


        </script>
@endsection