@extends('layouts.master')

@section('title', 'Agro Pro - Storage House')

@section('content')
    <div id="page">

        <div class="card cardi card-style" style="position: fixed !important; top: 50px; left: 0; right: 0; z-index: 50;margin: 0px 0px 0px 0px; border-radius: 0px;backdrop-filter: saturate(180%) blur(20px);">
            <div class="content" style="margin-top:5px;">
                <a data-menu="createStore" href="#" class="btn btn-full gradient-green font-13 btn-m font-600 mt-3 rounded-s">CREATE STORAGE HOUSE</a>
            </div>
        </div>
        <div class="header header-auto-sho header-fixed header-logo-center">
            <a href="#" class="header-title">Storage House</a>
            <a href="#" data-back-button class="header-icon header-icon-1"><i class="fas fa-chevron-left"></i></a>
            <a href="#" data-toggle-theme class="header-icon header-icon-3 show-on-theme-dark"><i class="fas fa-sun"></i></a>
            <a href="#" data-toggle-theme class="header-icon header-icon-3 show-on-theme-light"><i class="fas fa-moon"></i></a>
            <a href="#" data-menu="menu-main" class="header-icon header-icon-4"><i class="fas fa-bars"></i></a>
        </div>

        <div class="page-title-clear"></div>
        <div class="page-content">

            <div class="job-content">
                <div class="col-12">
                    <input type="hidden" value="{{$latitude}}" name="latitude" id="latitude" readonly/>
                    <input type="hidden" value="{{$longitude}}" name="longitude" id="longitude" readonly/>
                </div>
                <div class="card card-style rounded-s" style="@if($count == 0) display:none; @else margin-top: 60px;" @endif>
                    <div class="content">
                        <h5 class="font-14 opacity-0">ALL STORAGE HOUSE <span class="float-end badge font-10 bg-highlight">{{ $stores->count() }}</span></h5>
                        <div class="divider mb-3"></div>
                        <div class="list-group list-custom-small list-menu ms-0 me-1" id="stores">

                            @foreach($stores as $store)
                                <a href="#" data-menu="StoreActions" data-id="{{$store->id}}" data-name="{{$store->store_name}}" class="store_button">
                                    <i class="fa fa-map-marked-alt gradient-green color-white"></i>
                                    <span>{{$store->store_name}}</span>
                                    <strong class="badge gradient-green color-white">{{$store->store_address}}</strong>
                                    <i class="fa fa-angle-right"></i>
                                </a>
                            @endforeach

                        </div>
                    </div>
                </div>
            </div>

        </div>

        <div id="menu-main" class="menu menu-box-left rounded-0" data-menu-load="{{url('menu-main')}}" data-menu-width="280" data-menu-active="nav-pages"></div>

        <div id="menu-share" class="menu menu-box-bottom rounded-m" data-menu-load="{{url('menu-share')}}" data-menu-height="370"></div>

        <div id="menu-colors" class="menu menu-box-bottom rounded-m" data-menu-load="{{url('menu-colors')}}" data-menu-height="480"></div>

    </div>

    <div id="StoreActions" class="menu menu-box-bottom rounded-m bg-theme" style="min-width:95%; max-height:98%" !important ;>
        <div class="menu-title">
            <p class="color-highlight">Actions on</p>
            <h4 class="font-800" style="padding: 20px 0 0px 15px;"><span class="store_name_text"></span></h4>
            <a href="#" class="close-menu"><i class="fa fa-times-circle"></i></a>
        </div>
        <div class="content">
            <div class="divider mt-n2"></div>
            <a href="#" data-id="" data-menu="editStore"  style="width:-webkit-fill-available !important;" class="mb-3 btn btn-full gradient-green font-13 btn-m font-600 mt-1 rounded-sm view_edit_store">EDIT <span class="store_name_text"></span></a>
            <a href="#" data-id="" style="width:-webkit-fill-available !important;" class="mb-3 btn btn-full gradient-orange font-13 btn-m font-600 mt-1 rounded-sm view_store_timeline">VIEW <span class="store_name_text"></span> TIMELINE</a>
            <a href="#" data-id="" style="width:-webkit-fill-available !important;" class="mb-5 btn btn-full gradient-red font-13 btn-m font-600 mt-3 rounded-sm delete_store">DELETE <span class="store_name_text"></span></a>

        </div>
    </div>

    <form id="editStoreForm">
        @csrf
        <div id="editStore" class="menu menu-box-modal rounded-s bg-theme" style="min-width:95%; max-height:98%" !important ;>
            <div class="menu-title">
                <p class="color-highlight">Update</p>
                <h4 class="font-800" style="padding: 20px 0 0px 15px;"><span class="store_name_text"></span></h4>
                <a href="#" class="close-menu"><i class="fa fa-times-circle"></i></a>
            </div>
            <div class="content">
                <div class="divider mt-n2"></div>

                <div class="col-12">
                    <div class="input-style input-style-always-active has-borders mb-4">
                        <input type="text" style="text-transform: uppercase;" class="form-control validate-name" id="edit_store_name" name="store_name" value="" required autocomplete="store_name" autofocus placeholder="TYPE STORAGE HOUSE NAME">
                        <label for="store_name" class="color-highlight">Storage House Name</label>
                    </div>
                </div>

                <div class="col-12">
                    <input type="hidden" value="" name="store_coords" id="edit_store_coords" readonly/>
                    <input type="hidden" value="" name="store_latitude" id="edit_store_latitude" readonly/>
                    <input type="hidden" value="" name="store_longitude" id="edit_store_longitude" readonly/>
                    <input type="hidden" value="" name="store_size" id="edit_store_size" readonly/>
                </div>

                <a data-bs-toggle="collapse" href="#collapse-9" id="edit_use_map" class="mb-2 btn btn-l btn-full rounded-m gradient-grass font-600 shadow-xl font-13 collapsed" aria-expanded="false"><i class="fa fa-map"style="margin-right: 10px;"></i> DRAW STORAGE AREA (Optional)</a>

                <div class="collapse" id="collapse-9" style="">
                    <div class="">
                        <div class="card card-style rounded-s edit-pac-card" id="edit-pac-card" style="background: transparent; box-shadow: 0 4px 24px 0 rgb(0 0 0 / 0%); !important;">
                            <div class="content">

                                <a href="#" id="edit-coords-button" style="width:-webkit-fill-available !important;" class="locators mb-3 btn btn-full gradient-grass font-13 btn-s font-600 mt-2 rounded-s"><i class="fa font-13 fa-map-marked-alt" style="margin-right: 10px;"></i>SAVE STORAGE HOUSE</a>
                                <a href="#" id="edit-delete-button" style="width:-webkit-fill-available !important;" class="locators mb-3 btn btn-full gradient-red font-13 btn-s font-600 mt-2 rounded-s"><i class="fa font-13 fa-pencil-ruler" style="margin-right: 10px;"></i>REDRAW AREA</a>

                            </div>
                        </div>
                    </div>

                    <div class="responsive-iframe max-iframe" style="margin-bottom: 10px;">
                        <div id="edit-map"></div>
                        <div id="fullScreenTool" style="display: none">
                            <div class="controls fullscreen-control">
                                <button title="Toggle Fullscreen">
                                    <div
                                        class="fullscreen-control-icon fullscreen-control-top-left"
                                    ></div>
                                    <div
                                        class="fullscreen-control-icon fullscreen-control-top-right"
                                    ></div>
                                    <div
                                        class="fullscreen-control-icon fullscreen-control-bottom-left"
                                    ></div>
                                    <div
                                        class="fullscreen-control-icon fullscreen-control-bottom-right"
                                    ></div>
                                </button>
                            </div>
                        </div>
                    </div>

                </div>

                <button type="submit" style="width:-webkit-fill-available !important;" class="mb-5 btn btn-full gradient-green font-13 btn-m font-600 mt-3 rounded-s">UPDATE <span class="store_name_text"></span></button>

            </div>
        </div>
    </form>

    <form id="createStoreForm">
        @csrf
        <div id="createStore" class="menu menu-box-modal rounded-s bg-theme" style="min-width:95%; max-height:98%" !important ;>
            <div class="menu-title">
                <p class="color-highlight">Create</p>
                <h4 class="font-800" style="padding: 20px 0 0px 15px;">STORAGE HOUSE</h4>
                <a href="#" class="close-menu"><i class="fa fa-times-circle"></i></a>
            </div>
            <div class="content">
                <div class="divider mt-n2"></div>

                <div class="col-12">
                    <div class="input-style input-style-always-active has-borders mb-4">
                        <input type="text" style="text-transform: uppercase;" class="form-control validate-name" id="store_name" name="store_name" value="{{ old('store_name') }}" required autocomplete="store_name" autofocus placeholder="TYPE STORAGE HOUSE NAME">
                        <label for="store_name" class="color-highlight">Storage House Name</label>
                    </div>
                </div>

                <div class="col-12">
                    <input type="hidden" value="" name="store_coords" id="store_coords" readonly/>
                    <input type="hidden" value="" name="store_latitude" id="store_latitude" readonly/>
                    <input type="hidden" value="" name="store_longitude" id="store_longitude" readonly/>
                    <input type="hidden" value="" name="store_size" id="store_size" readonly/>
                </div>

                <a data-bs-toggle="collapse" href="#collapse-8" id="use_map" class="mb-2 btn btn-l btn-full rounded-m gradient-grass font-600 shadow-xl font-13 collapsed" aria-expanded="false"><i class="fa fa-map"style="margin-right: 10px;"></i> DRAW STORAGE AREA (Optional)</a>

                <div class="collapse" id="collapse-8" style="">
                    <div class="">
                        <div class="card card-style rounded-s" id="pac-card" style="background: transparent; box-shadow: 0 4px 24px 0 rgb(0 0 0 / 0%); !important;">
                            <div class="content">

                                <a href="#" id="coords-button" style="width:-webkit-fill-available !important;" class="locator mb-3 btn btn-full gradient-grass font-13 btn-s font-600 mt-2 rounded-s"><i class="fa font-13 fa-map-marked-alt" style="margin-right: 10px;"></i>SAVE STORAGE HOUSE</a>
                                <a href="#" id="delete-button" style="width:-webkit-fill-available !important;" class="locator mb-3 btn btn-full gradient-red font-13 btn-s font-600 mt-2 rounded-s"><i class="fa font-13 fa-pencil-ruler" style="margin-right: 10px;"></i>REDRAW AREA</a>

                            </div>
                        </div>
                        <div class="responsive-iframe max-iframe" style="margin-bottom: 10px;">
                            <div id="map"></div>
                            <div style="display: none">
                                <div class="controls fullscreen-control">
                                    <button title="Toggle Fullscreen">
                                        <div
                                            class="fullscreen-control-icon fullscreen-control-top-left"
                                        ></div>
                                        <div
                                            class="fullscreen-control-icon fullscreen-control-top-right"
                                        ></div>
                                        <div
                                            class="fullscreen-control-icon fullscreen-control-bottom-left"
                                        ></div>
                                        <div
                                            class="fullscreen-control-icon fullscreen-control-bottom-right"
                                        ></div>
                                    </button>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <button type="submit" style="width:-webkit-fill-available !important;" class="mb-5 btn btn-full gradient-green font-13 btn-m font-600 mt-3 rounded-s">CREATE STORAGE HOUSE</button>

            </div>
        </div>
    </form>

@endsection

@section('footer-links')
    <script src="https://maps.google.com/maps/api/js?key=AIzaSyCK-H47kJydE-8MRJDBYuBQ8juShWSLUyk&libraries=geometry&libraries=drawing"></script>

    <script>
        $(function () {

            var drawingManager;
            var drawingManaga;
            var selectedShape;
            var colors = ['#1E90FF', '#FF1493', '#32CD32', '#FF8C00', '#4B0082'];
            var selectedColor;
            var colorButtons = {};
            var latitude = document.getElementById('latitude').value;
            var longitude = document.getElementById('longitude').value;
            const mapDiv = document.getElementById("edit-map");

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

            function setSelection(shape) {
                clearSelection();
                selectedShape = shape;
                shape.setEditable(true);
                selectColor(shape.get('fillColor') || shape.get('strokeColor'));
            }

            function deleteSelectedShape() {
                if (selectedShape) {
                    selectedShape.setMap(null);
                    // To show:
                    drawingManager.setOptions({
                        drawingControl: true
                    });
                    document.getElementById('edit_store_coords').value = "";
                }
            }

            function deleteSelectedShapes() {
                if (selectedShape) {
                    selectedShape.setMap(null);
                    // To show:
                    drawingManaga.setOptions({
                        drawingControl: true
                    });
                    document.getElementById('store_coords').value = "";
                }
            }

            function selectColor(color) {
                selectedColor = color;
                for (var i = 0; i < colors.length; ++i) {
                    var currColor = colors[i];
                    //colorButtons[currColor].style.border = currColor == color ? '2px solid #789' : '2px solid #fff';
                }

                // Retrieves the current options from the drawing manager and replaces the
                // stroke or fill color as appropriate.
                var polylineOptions = drawingManager.get('polylineOptions');
                polylineOptions.strokeColor = color;
                drawingManager.set('polylineOptions', polylineOptions);

                var rectangleOptions = drawingManager.get('rectangleOptions');
                rectangleOptions.fillColor = color;
                drawingManager.set('rectangleOptions', rectangleOptions);

                var circleOptions = drawingManager.get('circleOptions');
                circleOptions.fillColor = color;
                drawingManager.set('circleOptions', circleOptions);

                var polygonOptions = drawingManager.get('polygonOptions');
                polygonOptions.fillColor = color;
                drawingManager.set('polygonOptions', polygonOptions);
            }

            function selectColors(color) {
                selectedColor = color;
                for (var i = 0; i < colors.length; ++i) {
                    var currColor = colors[i];
                    //colorButtons[currColor].style.border = currColor == color ? '2px solid #789' : '2px solid #fff';
                }

                // Retrieves the current options from the drawing manager and replaces the
                // stroke or fill color as appropriate.
                var polylineOptions = drawingManaga.get('polylineOptions');
                polylineOptions.strokeColor = color;
                drawingManaga.set('polylineOptions', polylineOptions);

                var rectangleOptions = drawingManaga.get('rectangleOptions');
                rectangleOptions.fillColor = color;
                drawingManaga.set('rectangleOptions', rectangleOptions);

                var circleOptions = drawingManaga.get('circleOptions');
                circleOptions.fillColor = color;
                drawingManaga.set('circleOptions', circleOptions);

                var polygonOptions = drawingManaga.get('polygonOptions');
                polygonOptions.fillColor = color;
                drawingManaga.set('polygonOptions', polygonOptions);
            }

            function setSelectedShapeColor(color) {
                if (selectedShape) {
                    if (selectedShape.type == google.maps.drawing.OverlayType.POLYLINE) {
                        selectedShape.set('strokeColor', color);
                    } else {
                        selectedShape.set('fillColor', color);
                    }
                }
            }

            function makeColorButton(color) {
                var button = document.createElement('span');
                button.className = 'color-button';
                button.style.backgroundColor = color;
                google.maps.event.addDomListener(button, 'click', function() {
                    selectColor(color);
                    setSelectedShapeColor(color);
                });

                return button;
            }

            function buildColorPalette() {
                var colorPalette = document.getElementById('color-palette');
                for (var i = 0; i < colors.length; ++i) {
                    var currColor = colors[i];
                    var colorButton = makeColorButton(currColor);
                    // colorPalette.appendChild(colorButton);
                    colorButtons[currColor] = colorButton;
                }
                selectColor(colors[0]);
            }

            function initFullscreenControl(map) {
                const elementToSendFullscreen = map.getDiv().firstChild;
                const fullscreenControl = document.querySelector(".fullscreen-control");
                map.controls[google.maps.ControlPosition.RIGHT_TOP].push(fullscreenControl);

                fullscreenControl.onclick = function () {
                    if (isFullscreen(elementToSendFullscreen)) {
                        exitFullscreen();
                    } else {
                        requestFullscreen(elementToSendFullscreen);
                    }
                };

                document.onwebkitfullscreenchange =
                    document.onmsfullscreenchange =
                        document.onmozfullscreenchange =
                            document.onfullscreenchange =
                                function () {
                                    if (isFullscreen(elementToSendFullscreen)) {
                                        fullscreenControl.classList.add("is-fullscreen");
                                    } else {
                                        fullscreenControl.classList.remove("is-fullscreen");
                                    }
                                };
            }

            function isFullscreen(element) {
                return (
                    (document.fullscreenElement ||
                        document.webkitFullscreenElement ||
                        document.mozFullScreenElement ||
                        document.msFullscreenElement) == element
                );
            }

            function requestFullscreen(element) {
                if (element.requestFullscreen) {
                    element.requestFullscreen();
                } else if (element.webkitRequestFullScreen) {
                    element.webkitRequestFullScreen();
                } else if (element.mozRequestFullScreen) {
                    element.mozRequestFullScreen();
                } else if (element.msRequestFullScreen) {
                    element.msRequestFullScreen();
                }
            }

            function exitFullscreen() {
                if (document.exitFullscreen) {
                    document.exitFullscreen();
                } else if (document.webkitExitFullscreen) {
                    document.webkitExitFullscreen();
                } else if (document.mozCancelFullScreen) {
                    document.mozCancelFullScreen();
                } else if (document.msExitFullscreen) {
                    document.msExitFullscreen();
                }
            }

            function initialize() {

                var map = new google.maps.Map(document.getElementById('map'), {
                    zoom: 20,
                    center: new google.maps.LatLng(latitude,longitude),
                    mapTypeId: google.maps.MapTypeId.HYBRID,
                    disableDefaultUI: true,
                    zoomControl: false,
                    scaleControl: false,
                    fullscreenControl: false,
                    fullscreenControlOptions: {position: google.maps.ControlPosition.TOP_RIGHT}

                });

                var polyOptions = {
                    strokeWeight: 0,
                    fillOpacity: 0.45,
                    editable: true
                };

                const card = document.getElementById("pac-card");
                map.controls[google.maps.ControlPosition.BOTTOM_CENTER].push(card);

                // Creates a drawing manager attached to the map that allows the user to draw
                // markers, lines, and shapes.
                drawingManaga = new google.maps.drawing.DrawingManager({
                    drawingMode: google.maps.drawing.OverlayType.POLYGON,
                    drawingControlOptions: {
                        drawingModes: [
                            google.maps.drawing.OverlayType.POLYGON
                        ]
                    },
                    markerOptions: {
                        draggable: true
                    },
                    polylineOptions: {
                        editable: true
                    },
                    rectangleOptions: polyOptions,
                    circleOptions: polyOptions,
                    polygonOptions: polyOptions,
                    map: map
                });

                google.maps.event.addListener(drawingManaga, 'overlaycomplete', function(polygon) {
                    if (polygon.type != google.maps.drawing.OverlayType.MARKER) {

                        // Switch back to non-drawing mode after drawing a shape.
                        drawingManaga.setDrawingMode(null);
                        // To hide:
                        drawingManaga.setOptions({
                            drawingControl: false
                        });

                        // Add an event listener that selects the newly-drawn shape when the user
                        // mouses down on it.
                        var createShape = polygon.overlay;
                        createShape.type = polygon.type;

                        google.maps.event.addDomListener(document.getElementById('delete-button'), 'click', function() {
                            createShape.setMap(null);
                            createShape = [];
                            document.getElementById('store_coords').value = "";
                        });

                        google.maps.event.addListener(createShape, 'click', function() {
                            setSelection(createShape);
                        });

                        createShape.addListener('click', function(event) {
                            if (event.path != null && event.vertex != null) {
                                var path = this.getPaths().getAt(event.path);
                                if (path.getLength() > 3) {
                                    path.removeAt(event.vertex);
                                }
                            }
                        });

                        google.maps.event.addDomListener(document.getElementById('coords-button'), 'click', function() {
                            var path = createShape.getPath();
                            var coordinates = [];
                            for (var i = 0; i < path.length; i++) {
                                var xy = path.getAt(i); //LatLang for a polyline
                                var item = { "lat" : xy.lat(), "lng":xy.lng()};
                                coordinates.push(item);
                            }

                            // Create the bounds object
                            var bounds = new google.maps.LatLngBounds();

                            // Get paths from polygon and set event listeners for each path separately
                            createShape.getPath().forEach(function (path, index) {
                                bounds.extend(path);
                            });

                            var area = google.maps.geometry.spherical.computeArea(createShape.getPath());

                            console.log(area);
                            console.log(bounds.getCenter().lat())
                            console.log(bounds.getCenter().lng())
                            document.getElementById('store_coords').value = JSON.stringify(coordinates);
                            document.getElementById('store_latitude').value = bounds.getCenter().lat();
                            document.getElementById('store_longitude').value = bounds.getCenter().lng();
                            document.getElementById('store_size').value = area;
                        });

                        setSelection(createShape);

                        google.maps.event.addListener(createShape.getPath(), "insert_at", function(){
                            var path = createShape.getPath();
                            var coordinates = [];
                            for (var i = 0; i < path.length; i++) {
                                var xy = path.getAt(i); //LatLang for a polyline
                                var item = { "lat" : xy.lat(), "lng":xy.lng()};
                                coordinates.push(item);
                            }

                            // Create the bounds object
                            var bounds = new google.maps.LatLngBounds();

                            // Get paths from polygon and set event listeners for each path separately
                            createShape.getPath().forEach(function (path, index) {
                                bounds.extend(path);
                            });

                            var area = google.maps.geometry.spherical.computeArea(createShape.getPath());

                            console.log(area);
                            console.log(bounds.getCenter().lat())
                            console.log(bounds.getCenter().lng())
                            document.getElementById('store_coords').value = JSON.stringify(coordinates);
                            document.getElementById('store_latitude').value = bounds.getCenter().lat();
                            document.getElementById('store_longitude').value = bounds.getCenter().lng();
                            document.getElementById('store_size').value = area;
                        });

                        google.maps.event.addListener(createShape.getPath(), "remove_at", function(){
                            var path = createShape.getPath();
                            var coordinates = [];
                            for (var i = 0; i < path.length; i++) {
                                var xy = path.getAt(i); //LatLang for a polyline
                                var item = { "lat" : xy.lat(), "lng":xy.lng()};
                                coordinates.push(item);
                            }

                            // Create the bounds object
                            var bounds = new google.maps.LatLngBounds();

                            // Get paths from polygon and set event listeners for each path separately
                            createShape.getPath().forEach(function (path, index) {
                                bounds.extend(path);
                            });

                            var area = google.maps.geometry.spherical.computeArea(createShape.getPath());

                            console.log(area);
                            console.log(coordinates);
                            console.log(bounds.getCenter().lat())
                            console.log(bounds.getCenter().lng())
                            document.getElementById('store_coords').value = JSON.stringify(coordinates);
                            document.getElementById('store_latitude').value = bounds.getCenter().lat();
                            document.getElementById('store_longitude').value = bounds.getCenter().lng();
                            document.getElementById('store_size').value = area;
                        });

                        google.maps.event.addListener(createShape.getPath(), "set_at", function(){
                            var path = createShape.getPath();
                            var coordinates = [];
                            for (var i = 0; i < path.length; i++) {
                                var xy = path.getAt(i); //LatLang for a polyline
                                var item = { "lat" : xy.lat(), "lng":xy.lng()};
                                coordinates.push(item);
                            }

                            // Create the bounds object
                            var bounds = new google.maps.LatLngBounds();

                            // Get paths from polygon and set event listeners for each path separately
                            createShape.getPath().forEach(function (path, index) {
                                bounds.extend(path);
                            });

                            var area = google.maps.geometry.spherical.computeArea(createShape.getPath());

                            console.log(area);
                            console.log(coordinates);
                            console.log(bounds.getCenter().lat())
                            console.log(bounds.getCenter().lng())
                            document.getElementById('store_coords').value = JSON.stringify(coordinates);
                            document.getElementById('store_latitude').value = bounds.getCenter().lat();
                            document.getElementById('store_longitude').value = bounds.getCenter().lng();
                            document.getElementById('store_size').value = area;
                        });

                        google.maps.event.addListener(createShape.getPath(), "dragend", function(){
                            var path = createShape.getPath();
                            var coordinates = [];
                            for (var i = 0; i < path.length; i++) {
                                var xy = path.getAt(i); //LatLang for a polyline
                                var item = { "lat" : xy.lat(), "lng":xy.lng()};
                                coordinates.push(item);
                            }

                            // Create the bounds object
                            var bounds = new google.maps.LatLngBounds();

                            // Get paths from polygon and set event listeners for each path separately
                            createShape.getPath().forEach(function (path, index) {
                                bounds.extend(path);
                            });

                            var area = google.maps.geometry.spherical.computeArea(createShape.getPath());

                            console.log(area);
                            console.log(coordinates);
                            console.log(bounds.getCenter().lat())
                            console.log(bounds.getCenter().lng())
                            document.getElementById('store_coords').value = JSON.stringify(coordinates);
                            document.getElementById('store_latitude').value = bounds.getCenter().lat();
                            document.getElementById('store_longitude').value = bounds.getCenter().lng();
                            document.getElementById('store_size').value = area;
                        });

                    }
                });

                function reCenterMap(){
                    map.setCenter(new google.maps.LatLng(latitude, longitude));
                }

                google.maps.event.addListener(drawingManaga, 'drawingmode_changed', clearSelection);
                google.maps.event.addListener(map, 'click', clearSelection);
                google.maps.event.addDomListener(document.getElementById('delete-button'), 'click', deleteSelectedShapes);

                $("#createStoreForm").submit(function(e){
                    e.preventDefault();
                    var error = false;

                    if(!error){
                        close_modal();
                        swal({
                                title: "Are you sure?",
                                text: "Storage House will be created!",
                                type: "warning",
                                showCancelButton: true,
                                closeOnConfirm: false,
                                showLoaderOnConfirm: true
                            },
                            function() {
                                $("#createStoreForm").ajaxSubmit({
                                    type: "POST",
                                    url: "create_store",
                                    dataType: "json",
                                    success: function (response) {
                                        if (response.status === "success") {
                                            swal("Done!", "Storage House Created", "success");
                                            deleteSelectedShapes();
                                            reCenterMap();
                                            $(".job-content").load(location.href+(' .job-content'));
                                            $('#store_coords').val('')
                                            $('#store_latitude').val('')
                                            $('#store_longitude').val('')
                                            $('#store_size').val('')
                                            $('#createStoreForm').resetForm();
                                            var element = document.getElementById("createStore");
                                            element.classList.remove("menu-active");
                                            var element = document.getElementById("logger");
                                            element.classList.remove("menu-active");

                                        } else{
                                            swal("Cancelled!", response.msg, "error")

                                        }
                                    }
                                });
                            });

                    }
                });
            }

            function loadEditMap(){

                const mapDiv = document.getElementById("edit-map");
                let map = new google.maps.Map(mapDiv, {
                    zoom: 20,
                    center: new google.maps.LatLng(latitude, longitude),
                    mapTypeId: google.maps.MapTypeId.HYBRID,
                    disableDefaultUI: true,
                    zoomControl: false,
                    scaleControl: false,
                    fullscreenControl: true,
                    fullscreenControlOptions: {position: google.maps.ControlPosition.TOP_RIGHT}

                });

            }

            function reInitialize() {

                if ($('#edit_store_latitude').val() == ''){

                    var edit_store_latitude = latitude;
                    var edit_store_longitude = longitude;
                    var edit_store_coords = document.getElementById('edit_store_coords').value;
                    var edit_store_size = document.getElementById('edit_store_size').value;
                    const card = document.getElementById('edit-pac-card');

                    const map = new google.maps.Map(mapDiv, {
                        zoom: 20,
                        mapTypeId: google.maps.MapTypeId.HYBRID,
                        disableDefaultUI: true,
                        zoomControl: false,
                        scaleControl: false,
                        fullscreenControl: true,
                        fullscreenControlOptions: {position: google.maps.ControlPosition.TOP_RIGHT}
                    });

                    map.setCenter(new google.maps.LatLng(edit_store_latitude, edit_store_longitude));
                    map.controls[google.maps.ControlPosition.BOTTOM_CENTER].push(card);

                    var polyOptions = {
                        strokeWeight: 0,
                        fillOpacity: 0.45,
                        editable: true
                    };

                    // Creates a drawing manager attached to the map that allows the user to draw
                    // markers, lines, and shapes.
                    drawingManager = new google.maps.drawing.DrawingManager({
                        drawingMode: google.maps.drawing.OverlayType.POLYGON,
                        drawingControlOptions: {
                            drawingModes: [
                                google.maps.drawing.OverlayType.POLYGON
                            ]
                        },
                        markerOptions: {
                            draggable: true
                        },
                        polylineOptions: {
                            editable: true
                        },
                        rectangleOptions: polyOptions,
                        circleOptions: polyOptions,
                        polygonOptions: polyOptions,
                        map: map
                    });

                    // To hide:
                    drawingManager.setOptions({
                        drawingControl: true
                    });

                    google.maps.event.addListener(drawingManager, 'overlaycomplete', function(editShape) {

                        if (editShape.type != google.maps.drawing.OverlayType.MARKER) {

                            // Switch back to non-drawing mode after drawing a shape.
                            drawingManager.setDrawingMode(null);
                            // To hide:
                            drawingManager.setOptions({
                                drawingControl: false
                            });

                            // Add an event listener that selects the newly-drawn shape when the user
                            // mouses down on it.
                            var newShape = editShape.overlay;
                            newShape.type = editShape.type;

                            setSelection(newShape);

                            $(document).on('click', '#edit-delete-button', function () {

                                deleteSelectedShape()
                                document.getElementById('edit_store_coords').value = "";

                                drawingManager.setOptions({
                                    drawingControl: true
                                });

                            });

                            google.maps.event.addListener(newShape, 'click', function() {
                                setSelection(newShape);
                            });

                            newShape.addListener('click', function(event) {
                                if (event.path != null && event.vertex != null) {
                                    var path = this.getPaths().getAt(event.path);
                                    if (path.getLength() > 3) {
                                        path.removeAt(event.vertex);
                                    }
                                }
                            });

                            $(document).on('click', '#edit-coords-button', function () {
                                var path = newShape.getPath();
                                var coordinates = [];
                                for (var i = 0; i < path.length; i++) {
                                    var xy = path.getAt(i); //LatLang for a polyline
                                    var item = { "lat" : xy.lat(), "lng":xy.lng()};
                                    coordinates.push(item);
                                }

                                var encodeString = google.maps.geometry.encoding.encodePath(path);
                                // console.log(encodeString);

                                // Create the bounds object
                                var bounds = new google.maps.LatLngBounds();

                                // Get paths from polygon and set event listeners for each path separately
                                newShape.getPath().forEach(function (path, index) {
                                    bounds.extend(path);
                                });

                                var area = google.maps.geometry.spherical.computeArea(newShape.getPath());

                                // console.log(area);
                                console.log(coordinates, JSON.stringify(coordinates));
                                // console.log(bounds.getCenter().lat())
                                // console.log(bounds.getCenter().lng())

                                $('#edit_store_coords').val(JSON.stringify(coordinates));
                                document.getElementById('edit_store_latitude').value = bounds.getCenter().lat();
                                document.getElementById('edit_store_longitude').value = bounds.getCenter().lng();
                                document.getElementById('edit_store_size').value = area;
                            });

                            setSelection(newShape);

                            google.maps.event.addListener(newShape.getPath(), "insert_at", function(){
                                var path = newShape.getPath();
                                var coordinates = [];
                                for (var i = 0; i < path.length; i++) {
                                    var xy = path.getAt(i); //LatLang for a polyline
                                    var item = { "lat" : xy.lat(), "lng":xy.lng()};
                                    coordinates.push(item);
                                }

                                var encodeString = google.maps.geometry.encoding.encodePath(path);
                                console.log(encodeString);

                                // Create the bounds object
                                var bounds = new google.maps.LatLngBounds();

                                // Get paths from polygon and set event listeners for each path separately
                                newShape.getPath().forEach(function (path, index) {
                                    bounds.extend(path);
                                });

                                var area = google.maps.geometry.spherical.computeArea(newShape.getPath());

                                console.log(area);
                                console.log(bounds.getCenter().lat())
                                console.log(bounds.getCenter().lng())
                                $('#edit_store_coords').val(JSON.stringify(coordinates));
                                document.getElementById('edit_store_latitude').value = bounds.getCenter().lat();
                                document.getElementById('edit_store_longitude').value = bounds.getCenter().lng();
                                document.getElementById('edit_store_size').value = area;
                            });

                            google.maps.event.addListener(newShape.getPath(), "remove_at", function(){
                                var path = newShape.getPath();
                                var coordinates = [];
                                for (var i = 0; i < path.length; i++) {
                                    var xy = path.getAt(i); //LatLang for a polyline
                                    var item = { "lat" : xy.lat(), "lng":xy.lng()};
                                    coordinates.push(item);
                                }

                                var encodeString = google.maps.geometry.encoding.encodePath(path);
                                console.log(encodeString);

                                // Create the bounds object
                                var bounds = new google.maps.LatLngBounds();

                                // Get paths from polygon and set event listeners for each path separately
                                newShape.getPath().forEach(function (path, index) {
                                    bounds.extend(path);
                                });

                                var area = google.maps.geometry.spherical.computeArea(newShape.getPath());

                                console.log(area);
                                console.log(bounds.getCenter().lat())
                                console.log(bounds.getCenter().lng())
                                $('#edit_store_coords').val(JSON.stringify(coordinates));
                                document.getElementById('edit_store_latitude').value = bounds.getCenter().lat();
                                document.getElementById('edit_store_longitude').value = bounds.getCenter().lng();
                                document.getElementById('edit_store_size').value = area;
                            });

                            google.maps.event.addListener(newShape.getPath(), "set_at", function(){
                                var path = newShape.getPath();
                                var coordinates = [];
                                for (var i = 0; i < path.length; i++) {
                                    var xy = path.getAt(i); //LatLang for a polyline
                                    var item = { "lat" : xy.lat(), "lng":xy.lng()};
                                    coordinates.push(item);
                                }

                                var encodeString = google.maps.geometry.encoding.encodePath(path);
                                console.log(encodeString);

                                // Create the bounds object
                                var bounds = new google.maps.LatLngBounds();

                                // Get paths from polygon and set event listeners for each path separately
                                newShape.getPath().forEach(function (path, index) {
                                    bounds.extend(path);
                                });

                                var area = google.maps.geometry.spherical.computeArea(newShape.getPath());

                                console.log(area);
                                console.log(bounds.getCenter().lat())
                                console.log(bounds.getCenter().lng())
                                $('#edit_store_coords').val(JSON.stringify(coordinates));
                                document.getElementById('edit_store_latitude').value = bounds.getCenter().lat();
                                document.getElementById('edit_store_longitude').value = bounds.getCenter().lng();
                                document.getElementById('edit_store_size').value = area;
                            });

                            google.maps.event.addListener(newShape.getPath(), "dragend", function(){
                                var path = newShape.getPath();
                                var coordinates = [];
                                for (var i = 0; i < path.length; i++) {
                                    var xy = path.getAt(i); //LatLang for a polyline
                                    var item = { "lat" : xy.lat(), "lng":xy.lng()};
                                    coordinates.push(item);
                                }

                                var encodeString = google.maps.geometry.encoding.encodePath(path);
                                console.log(encodeString);

                                // Create the bounds object
                                var bounds = new google.maps.LatLngBounds();

                                // Get paths from polygon and set event listeners for each path separately
                                newShape.getPath().forEach(function (path, index) {
                                    bounds.extend(path);
                                });

                                var area = google.maps.geometry.spherical.computeArea(newShape.getPath());

                                console.log(area);
                                console.log(bounds.getCenter().lat())
                                console.log(bounds.getCenter().lng())
                                $('#edit_store_coords').val(JSON.stringify(coordinates));
                                document.getElementById('edit_store_latitude').value = bounds.getCenter().lat();
                                document.getElementById('edit_store_longitude').value = bounds.getCenter().lng();
                                document.getElementById('edit_store_size').value = area;
                            });

                        }
                    });

                    google.maps.event.addListener(drawingManager, 'drawingmode_changed', clearSelection);
                    google.maps.event.addListener(map, 'click', clearSelection);
                    google.maps.event.addDomListener(document.getElementById('edit-delete-button'), 'click', deleteSelectedShape);

                    $("#editStoreForm").submit(function(e){
                        e.preventDefault();
                        var error = false;

                        if(!error){
                            swal({
                                    title: "Are you sure?",
                                    text: store_name+" will be updated!",
                                    type: "warning",
                                    showCancelButton: true,
                                    closeOnConfirm: false,
                                    showLoaderOnConfirm: true
                                },
                                function() {
                                    $("#editStoreForm").ajaxSubmit({
                                        type: "PUT",
                                        url: "edit_store",
                                        dataType: "json",
                                        data: {
                                            store_id: store_id
                                        },
                                        success: function (response) {
                                            if (response.status === "success") {
                                                swal("Done!", store_name+" Updated", "success");

                                                $(".job-content").load(location.href+(' .job-content'));
                                                $('#editStoreForm').resetForm();
                                                var element = document.getElementById("editStore");
                                                element.classList.remove("menu-active");
                                                var element = document.getElementById("logger");
                                                element.classList.remove("menu-active");

                                            } else{
                                                swal("Cancelled!", response.msg, "error")

                                            }
                                        }
                                    });
                                });

                        }
                    });

                }
                else{
                    var edit_store_latitude = document.getElementById('edit_store_latitude').value;
                    var edit_store_longitude = document.getElementById('edit_store_longitude').value;
                    var edit_store_coords = document.getElementById('edit_store_coords').value;
                    var edit_store_size = document.getElementById('edit_store_size').value;
                    const card = document.getElementById('edit-pac-card');

                    const map = new google.maps.Map(mapDiv, {
                        zoom: 20,
                        mapTypeId: google.maps.MapTypeId.HYBRID,
                        disableDefaultUI: true,
                        zoomControl: false,
                        scaleControl: false,
                        fullscreenControl: true,
                        fullscreenControlOptions: {position: google.maps.ControlPosition.TOP_RIGHT}
                    });

                    map.setCenter(new google.maps.LatLng(edit_store_latitude, edit_store_longitude));
                    map.controls[google.maps.ControlPosition.BOTTOM_CENTER].push(card);

                    var polyOptions = {
                        strokeWeight: 0,
                        fillOpacity: 0.45,
                        editable: true
                    };

                    // Creates a drawing manager attached to the map that allows the user to draw
                    // markers, lines, and shapes.
                    drawingManager = new google.maps.drawing.DrawingManager({
                        drawingMode: google.maps.drawing.OverlayType.POLYGON,
                        drawingControlOptions: {
                            drawingModes: [
                                google.maps.drawing.OverlayType.POLYGON
                            ]
                        },
                        markerOptions: {
                            draggable: true
                        },
                        polylineOptions: {
                            editable: true
                        },
                        rectangleOptions: polyOptions,
                        circleOptions: polyOptions,
                        polygonOptions: polyOptions,
                        map: map
                    });

                    drawingManager.setDrawingMode(null);
                    // To hide:
                    drawingManager.setOptions({
                        drawingControl: false
                    });

                    var editShape = new google.maps.Polygon({
                        paths: JSON.parse(edit_store_coords),
                        strokeColor: "#4B0082",
                        strokeOpacity: 0.8,
                        strokeWeight: 2,
                        fillColor: "#4B0082",
                        fillOpacity: 0.35,
                        editable: true,
                        clickable: true
                    });

                    editShape.setMap(map);

                    google.maps.event.addListener(editShape, 'click', function () {
                        setSelection(editShape);
                    });

                    setSelection(editShape);

                    $(document).on('click', '#edit-delete-button', function () {

                        deleteSelectedShape()
                        document.getElementById('edit_store_coords').value = "";

                        drawingManager.setOptions({
                            drawingControl: true
                        });

                    });

                    $(document).on('click', '#edit-coords-button', function () {
                        var path = editShape.getPath();
                        var coordinates = [];
                        for (var i = 0; i < path.length; i++) {
                            var xy = path.getAt(i); //LatLang for a polyline
                            var item = { "lat" : xy.lat(), "lng":xy.lng()};
                            coordinates.push(item);
                        }

                        // Create the bounds object
                        var bounds = new google.maps.LatLngBounds();

                        // Get paths from polygon and set event listeners for each path separately
                        editShape.getPath().forEach(function (path, index) {
                            bounds.extend(path);
                        });

                        var area = google.maps.geometry.spherical.computeArea(editShape.getPath());

                        console.log(area);
                        //console.log(coordinates);
                        $('#edit_store_coords').val(JSON.stringify(coordinates));
                        console.log(bounds.getCenter().lat())
                        console.log(bounds.getCenter().lng())
                        //document.getElementById('edit_store_coords').value = JSON.parse(coordinates);
                        document.getElementById('edit_store_latitude').value = bounds.getCenter().lat();
                        document.getElementById('edit_store_longitude').value = bounds.getCenter().lng();
                        document.getElementById('edit_store_size').value = area;

                    });

                    setSelection(editShape);

                    google.maps.event.addListener(editShape.getPath(), "insert_at", function(){
                        var path = editShape.getPath();
                        var coordinates = [];
                        for (var i = 0; i < path.length; i++) {
                            var xy = path.getAt(i); //LatLang for a polyline
                            var item = { "lat" : xy.lat(), "lng":xy.lng()};
                            coordinates.push(item);
                        }

                        // Create the bounds object
                        var bounds = new google.maps.LatLngBounds();

                        // Get paths from polygon and set event listeners for each path separately
                        editShape.getPath().forEach(function (path, index) {
                            bounds.extend(path);
                        });

                        var area = google.maps.geometry.spherical.computeArea(editShape.getPath());

                        console.log(area);
                        //console.log(coordinates);
                        console.log(bounds.getCenter().lat())
                        console.log(bounds.getCenter().lng())
                        $('#edit_store_coords').val(JSON.stringify(coordinates));
                        //document.getElementById('edit_store_coords').value = JSON.parse(coordinates);
                        document.getElementById('edit_store_latitude').value = bounds.getCenter().lat();
                        document.getElementById('edit_store_longitude').value = bounds.getCenter().lng();
                        document.getElementById('edit_store_size').value = area;
                    });

                    google.maps.event.addListener(editShape.getPath(), "remove_at", function(){
                        var path = editShape.getPath();
                        var coordinates = [];
                        for (var i = 0; i < path.length; i++) {
                            var xy = path.getAt(i); //LatLang for a polyline
                            var item = { "lat" : xy.lat(), "lng":xy.lng()};
                            coordinates.push(item);
                        }

                        // Create the bounds object
                        var bounds = new google.maps.LatLngBounds();

                        // Get paths from polygon and set event listeners for each path separately
                        editShape.getPath().forEach(function (path, index) {
                            bounds.extend(path);
                        });

                        var area = google.maps.geometry.spherical.computeArea(editShape.getPath());

                        console.log(area);
                        console.log(bounds.getCenter().lat())
                        console.log(bounds.getCenter().lng())
                        $('#edit_store_coords').val(JSON.stringify(coordinates));
                        document.getElementById('edit_store_latitude').value = bounds.getCenter().lat();
                        document.getElementById('edit_store_longitude').value = bounds.getCenter().lng();
                        document.getElementById('edit_store_size').value = area;
                    });

                    google.maps.event.addListener(editShape.getPath(), "set_at", function(){
                        var path = editShape.getPath();
                        var coordinates = [];
                        for (var i = 0; i < path.length; i++) {
                            var xy = path.getAt(i); //LatLang for a polyline
                            var item = { "lat" : xy.lat(), "lng":xy.lng()};
                            coordinates.push(item);
                        }

                        // Create the bounds object
                        var bounds = new google.maps.LatLngBounds();

                        // Get paths from polygon and set event listeners for each path separately
                        editShape.getPath().forEach(function (path, index) {
                            bounds.extend(path);
                        });

                        var area = google.maps.geometry.spherical.computeArea(editShape.getPath());

                        console.log(area);
                        console.log(bounds.getCenter().lat())
                        console.log(bounds.getCenter().lng())
                        $('#edit_store_coords').val(JSON.stringify(coordinates));
                        document.getElementById('edit_store_latitude').value = bounds.getCenter().lat();
                        document.getElementById('edit_store_longitude').value = bounds.getCenter().lng();
                        document.getElementById('edit_store_size').value = area;
                    });

                    google.maps.event.addListener(editShape.getPath(), "dragend", function(){
                        var path = editShape.getPath();
                        var coordinates = [];
                        for (var i = 0; i < path.length; i++) {
                            var xy = path.getAt(i); //LatLang for a polyline
                            var item = { "lat" : xy.lat(), "lng":xy.lng()};
                            coordinates.push(item);
                        }

                        // Create the bounds object
                        var bounds = new google.maps.LatLngBounds();

                        // Get paths from polygon and set event listeners for each path separately
                        editShape.getPath().forEach(function (path, index) {
                            bounds.extend(path);
                        });

                        var area = google.maps.geometry.spherical.computeArea(editShape.getPath());

                        console.log(area);
                        console.log(bounds.getCenter().lat())
                        console.log(bounds.getCenter().lng())
                        $('#edit_store_coords').val(JSON.stringify(coordinates));
                        document.getElementById('edit_store_latitude').value = bounds.getCenter().lat();
                        document.getElementById('edit_store_longitude').value = bounds.getCenter().lng();
                        document.getElementById('edit_store_size').value = area;
                    });

                    google.maps.event.addListener(drawingManager, 'overlaycomplete', function(editShape) {

                        if (editShape.type != google.maps.drawing.OverlayType.MARKER) {

                            // Switch back to non-drawing mode after drawing a shape.
                            drawingManager.setDrawingMode(null);
                            // To hide:
                            drawingManager.setOptions({
                                drawingControl: false
                            });

                            // Add an event listener that selects the newly-drawn shape when the user
                            // mouses down on it.
                            var newShape = editShape.overlay;
                            newShape.type = editShape.type;

                            setSelection(newShape);

                            $(document).on('click', '#edit-delete-button', function () {

                                deleteSelectedShape()
                                document.getElementById('edit_store_coords').value = "";

                                drawingManager.setOptions({
                                    drawingControl: true
                                });

                            });

                            google.maps.event.addListener(newShape, 'click', function() {
                                setSelection(newShape);
                            });

                            newShape.addListener('click', function(event) {
                                if (event.path != null && event.vertex != null) {
                                    var path = this.getPaths().getAt(event.path);
                                    if (path.getLength() > 3) {
                                        path.removeAt(event.vertex);
                                    }
                                }
                            });

                            $(document).on('click', '#edit-coords-button', function () {
                                var path = newShape.getPath();
                                var coordinates = [];
                                for (var i = 0; i < path.length; i++) {
                                    var xy = path.getAt(i); //LatLang for a polyline
                                    var item = { "lat" : xy.lat(), "lng":xy.lng()};
                                    coordinates.push(item);
                                }

                                var encodeString = google.maps.geometry.encoding.encodePath(path);
                                // console.log(encodeString);

                                // Create the bounds object
                                var bounds = new google.maps.LatLngBounds();

                                // Get paths from polygon and set event listeners for each path separately
                                newShape.getPath().forEach(function (path, index) {
                                    bounds.extend(path);
                                });

                                var area = google.maps.geometry.spherical.computeArea(newShape.getPath());

                                // console.log(area);
                                console.log(coordinates, JSON.stringify(coordinates));
                                // console.log(bounds.getCenter().lat())
                                // console.log(bounds.getCenter().lng())

                                $('#edit_store_coords').val(JSON.stringify(coordinates));
                                document.getElementById('edit_store_latitude').value = bounds.getCenter().lat();
                                document.getElementById('edit_store_longitude').value = bounds.getCenter().lng();
                                document.getElementById('edit_store_size').value = area;
                            });

                            setSelection(newShape);

                            google.maps.event.addListener(newShape.getPath(), "insert_at", function(){
                                var path = newShape.getPath();
                                var coordinates = [];
                                for (var i = 0; i < path.length; i++) {
                                    var xy = path.getAt(i); //LatLang for a polyline
                                    var item = { "lat" : xy.lat(), "lng":xy.lng()};
                                    coordinates.push(item);
                                }

                                var encodeString = google.maps.geometry.encoding.encodePath(path);
                                console.log(encodeString);

                                // Create the bounds object
                                var bounds = new google.maps.LatLngBounds();

                                // Get paths from polygon and set event listeners for each path separately
                                newShape.getPath().forEach(function (path, index) {
                                    bounds.extend(path);
                                });

                                var area = google.maps.geometry.spherical.computeArea(newShape.getPath());

                                console.log(area);
                                console.log(bounds.getCenter().lat())
                                console.log(bounds.getCenter().lng())
                                $('#edit_store_coords').val(JSON.stringify(coordinates));
                                document.getElementById('edit_store_latitude').value = bounds.getCenter().lat();
                                document.getElementById('edit_store_longitude').value = bounds.getCenter().lng();
                                document.getElementById('edit_store_size').value = area;
                            });

                            google.maps.event.addListener(newShape.getPath(), "remove_at", function(){
                                var path = newShape.getPath();
                                var coordinates = [];
                                for (var i = 0; i < path.length; i++) {
                                    var xy = path.getAt(i); //LatLang for a polyline
                                    var item = { "lat" : xy.lat(), "lng":xy.lng()};
                                    coordinates.push(item);
                                }

                                var encodeString = google.maps.geometry.encoding.encodePath(path);
                                console.log(encodeString);

                                // Create the bounds object
                                var bounds = new google.maps.LatLngBounds();

                                // Get paths from polygon and set event listeners for each path separately
                                newShape.getPath().forEach(function (path, index) {
                                    bounds.extend(path);
                                });

                                var area = google.maps.geometry.spherical.computeArea(newShape.getPath());

                                console.log(area);
                                console.log(bounds.getCenter().lat())
                                console.log(bounds.getCenter().lng())
                                $('#edit_store_coords').val(JSON.stringify(coordinates));
                                document.getElementById('edit_store_latitude').value = bounds.getCenter().lat();
                                document.getElementById('edit_store_longitude').value = bounds.getCenter().lng();
                                document.getElementById('edit_store_size').value = area;
                            });

                            google.maps.event.addListener(newShape.getPath(), "set_at", function(){
                                var path = newShape.getPath();
                                var coordinates = [];
                                for (var i = 0; i < path.length; i++) {
                                    var xy = path.getAt(i); //LatLang for a polyline
                                    var item = { "lat" : xy.lat(), "lng":xy.lng()};
                                    coordinates.push(item);
                                }

                                var encodeString = google.maps.geometry.encoding.encodePath(path);
                                console.log(encodeString);

                                // Create the bounds object
                                var bounds = new google.maps.LatLngBounds();

                                // Get paths from polygon and set event listeners for each path separately
                                newShape.getPath().forEach(function (path, index) {
                                    bounds.extend(path);
                                });

                                var area = google.maps.geometry.spherical.computeArea(newShape.getPath());

                                console.log(area);
                                console.log(bounds.getCenter().lat())
                                console.log(bounds.getCenter().lng())
                                $('#edit_store_coords').val(JSON.stringify(coordinates));
                                document.getElementById('edit_store_latitude').value = bounds.getCenter().lat();
                                document.getElementById('edit_store_longitude').value = bounds.getCenter().lng();
                                document.getElementById('edit_store_size').value = area;
                            });

                            google.maps.event.addListener(newShape.getPath(), "dragend", function(){
                                var path = newShape.getPath();
                                var coordinates = [];
                                for (var i = 0; i < path.length; i++) {
                                    var xy = path.getAt(i); //LatLang for a polyline
                                    var item = { "lat" : xy.lat(), "lng":xy.lng()};
                                    coordinates.push(item);
                                }

                                var encodeString = google.maps.geometry.encoding.encodePath(path);
                                console.log(encodeString);

                                // Create the bounds object
                                var bounds = new google.maps.LatLngBounds();

                                // Get paths from polygon and set event listeners for each path separately
                                newShape.getPath().forEach(function (path, index) {
                                    bounds.extend(path);
                                });

                                var area = google.maps.geometry.spherical.computeArea(newShape.getPath());

                                console.log(area);
                                console.log(bounds.getCenter().lat())
                                console.log(bounds.getCenter().lng())
                                $('#edit_store_coords').val(JSON.stringify(coordinates));
                                document.getElementById('edit_store_latitude').value = bounds.getCenter().lat();
                                document.getElementById('edit_store_longitude').value = bounds.getCenter().lng();
                                document.getElementById('edit_store_size').value = area;
                            });

                        }
                    });

                    google.maps.event.addListener(drawingManager, 'drawingmode_changed', clearSelection);
                    google.maps.event.addListener(map, 'click', clearSelection);
                    google.maps.event.addDomListener(document.getElementById('edit-delete-button'), 'click', deleteSelectedShape);

                    $("#editStoreForm").submit(function(e){
                        e.preventDefault();
                        var error = false;

                        if(!error){
                            swal({
                                    title: "Are you sure?",
                                    text: store_name+" will be updated!",
                                    type: "warning",
                                    showCancelButton: true,
                                    closeOnConfirm: false,
                                    showLoaderOnConfirm: true
                                },
                                function() {
                                    $("#editStoreForm").ajaxSubmit({
                                        type: "PUT",
                                        url: "edit_store",
                                        dataType: "json",
                                        data: {
                                            store_id: store_id
                                        },
                                        success: function (response) {
                                            if (response.status === "success") {
                                                swal("Done!", store_name+" Updated", "success");

                                                $(".job-content").load(location.href+(' .job-content'));
                                                $('#editStoreForm').resetForm();
                                                var element = document.getElementById("editStore");
                                                element.classList.remove("menu-active");
                                                var element = document.getElementById("logger");
                                                element.classList.remove("menu-active");

                                            } else{
                                                swal("Cancelled!", response.msg, "error")

                                            }
                                        }
                                    });
                                });

                        }
                    });

                }

            }

            $("#StoreActions").on("click", ".view_edit_store", function (e) {

                $.ajax({
                    type: "GET",
                    url: "view_edit_store",
                    dataType: "json",
                    data:{
                        store_id: store_id
                    },
                    success: function (response) {
                        if (response.status === "success") {
                            $("#edit_store_name").val(response.store_name);
                            $("#edit_store_latitude").val(response.store_latitude);
                            $("#edit_store_longitude").val(response.store_longitude);
                            $("#edit_store_size").val(response.store_size);
                            $("#edit_store_coords").val(response.store_coords);
                            $(".edit-pac-card").load(location.href+(' .edit-pac-card'));

                            reInitialize()
                        } else{

                        }
                    }
                });
            });

            function close_modal(){
                $(".modal").modal('hide');
                $('body').removeClass('modal-open');
                $('.modal-backdrop').remove();
            }

            $("#edit_use_map").click(function (e) {

                let is_collapsed = $(this).attr('aria-expanded');
                let collapse = $('#collapse-9').attr('class');
                console.log(collapse);
                console.log(is_collapsed);
                var tag = "<i class='fa font-13 fa-map' style='margin-right: 10px;'></i>";

                if(is_collapsed === "true"){
                    $("#edit_use_map").attr('class', 'mb-3 btn btn-m btn-full rounded-m gradient-grass font-600 shadow-xl font-13')
                    $("#edit_use_map").text('')
                    $("#edit_use_map").append(tag, ' CLOSE FARM MAP');
                }
                else{
                    $("#edit_use_map").attr('class', 'mb-3 btn btn-m btn-full rounded-m gradient-grass font-600 shadow-xl font-13 collapsed')
                    $("#collapse-9").removeClass('show')
                    $("#edit_use_map").attr('aria-expanded', 'false')
                    $("#edit_use_map").text('')
                    $("#edit_use_map").append(tag, ' DRAW STORAGE AREA (Optional)');
                }

            });

            $("#use_map").click(function (e) {

                let is_collapsed = $(this).attr('aria-expanded');
                let collapse = $('#collapse-8').attr('class');
                console.log(collapse);
                console.log(is_collapsed);
                var tag = "<i class='fa font-13 fa-map' style='margin-right: 10px;'></i>";

                if(is_collapsed === "true"){
                    $("#use_map").attr('class', 'mb-3 btn btn-m btn-full rounded-m gradient-grass font-600 shadow-xl font-13')
                    $("#use_map").text('')
                    $("#use_map").append(tag, ' CLOSE FARM MAP');
                }
                else{
                    $("#use_map").attr('class', 'mb-3 btn btn-m btn-full rounded-m gradient-grass font-600 shadow-xl font-13 collapsed')
                    $("#collapse-8").removeClass('show')
                    $("#use_map").attr('aria-expanded', 'false')
                    $("#use_map").text('')
                    $("#use_map").append(tag, ' DRAW STORAGE AREA (Optional)');
                }

            });

            let store_id, store_name;

            $(".page-content").on("click", ".store_button", function (e) {
                store_id = $(this).data("id");
                store_name = $(this).data("name");
                $(".store_name_text").text(store_name);
                var element = document.getElementById("StoreActions");
                element.classList.add("menu-active");
                var element = document.getElementById("logger");
                element.classList.add("menu-active");
            });

            $("#StoreActions").on("click", ".delete_store", function (e) {
                swal({
                        title: "Are you sure?",
                        text: store_name+" will be deleted!",
                        type: "warning",
                        showCancelButton: true,
                        closeOnConfirm: false,
                        showLoaderOnConfirm: true
                    },
                    function() {
                        $.ajax({
                            type: "DELETE",
                            url: "delete_store",
                            dataType: "json",
                            data:{
                                store_id: store_id
                            },
                            success: function (response) {
                                if (response.status === "success") {
                                    swal("Done!", store_name+" Deleted", "success");

                                    $(".job-content").load(location.href+(' .job-content'));
                                    $('#StoreActions').resetForm();
                                    var element = document.getElementById("StoreActions");
                                    element.classList.remove("menu-active");
                                    var element = document.getElementById("logger");
                                    element.classList.remove("menu-active");

                                } else{
                                    swal("Cancelled!", response.msg, "error")

                                }
                            }
                        });
                    });
            });

            $("#StoreActions").on("click", ".view_store_timeline", function (e) {

                $.ajax({
                    type: "GET",
                    url: "view_timeline",
                    dataType: "json",
                    data:{
                        asset_id: store_id,
                        asset_type: 'STORE'
                    },
                    success: function (response) {
                        window.location.href = response.url;
                    }
                });

            });

            google.maps.event.addDomListener(window, 'load', initialize());
            google.maps.event.addDomListener(window, 'load', loadEditMap());

        });

    </script>


    </body>
    </html>
@endsection