@extends('layouts.master')

@section('title', 'Agro Pro - Planting Area')

@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="createField" href="#" class="btn btn-full gradient-green font-13 btn-m font-600 mt-3 rounded-s">CREATE PLANTING AREA</a>
        </div>
    </div>
    <div class="header header-auto-sho header-fixed header-logo-center">
        <a href="#" class="header-title">Planting Areas</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 PLANTING AREA <span class="float-end badge font-10 bg-highlight">{{ $fields->count() }}</span></h5>
                    <div class="divider mb-3"></div>
                    <div class="list-group list-custom-small list-menu ms-0 me-1" id="fields">

                        @foreach($fields as $field)
                            <a href="#" data-menu="FieldActions" data-id="{{$field->id}}" data-name="{{$field->field_name}}" class="field_button">
                                <i class="fa fa-map-marked-alt gradient-green color-white"></i>
                                <span>{{$field->field_name}}</span>
                                <strong class="badge gradient-green color-white">{{$field->field_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="FieldActions" 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="field_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="editField"  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_field">EDIT <span class="field_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_field_timeline">VIEW <span class="field_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_field">DELETE <span class="field_name_text"></span></a>

    </div>
</div>

<form id="editFieldForm">
    @csrf
    <div id="editField" 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="field_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_field_name" name="field_name" value="" required autocomplete="field_name" autofocus placeholder="TYPE PLANTING AREA NAME">
                    <label for="field_name" class="color-highlight">Planting Area Name</label>
                </div>
            </div>

            <div class="col-12">
                <input type="hidden" value="" name="field_coords" id="edit_field_coords" readonly/>
                <input type="hidden" value="" name="field_latitude" id="edit_field_latitude" readonly/>
                <input type="hidden" value="" name="field_longitude" id="edit_field_longitude" readonly/>
                <input type="hidden" value="" name="field_size" id="edit_field_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 PLANTING 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 PLANTING AREA</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="field_name_text"></span></button>

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

<form id="createFieldForm">
    @csrf
    <div id="createField" 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;">PLANTING AREA</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="field_name" name="field_name" value="{{ old('field_name') }}" required autocomplete="field_name" autofocus placeholder="TYPE PLANTING AREA NAME">
                    <label for="field_name" class="color-highlight">Planting Area Name</label>
                </div>
            </div>

            <div class="col-12">
                <input type="hidden" value="" name="field_coords" id="field_coords" readonly/>
                <input type="hidden" value="" name="field_latitude" id="field_latitude" readonly/>
                <input type="hidden" value="" name="field_longitude" id="field_longitude" readonly/>
                <input type="hidden" value="" name="field_size" id="field_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 PLANTING 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 PLANTING AREA</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 PLANTING AREA</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_field_coords').value = "";
            }
        }

        function deleteSelectedShapes() {
                if (selectedShape) {
                    selectedShape.setMap(null);
                    // To show:
                    drawingManaga.setOptions({
                        drawingControl: true
                    });
                    document.getElementById('field_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('field_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('field_coords').value = JSON.stringify(coordinates);
                        document.getElementById('field_latitude').value = bounds.getCenter().lat();
                        document.getElementById('field_longitude').value = bounds.getCenter().lng();
                        document.getElementById('field_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('field_coords').value = JSON.stringify(coordinates);
                        document.getElementById('field_latitude').value = bounds.getCenter().lat();
                        document.getElementById('field_longitude').value = bounds.getCenter().lng();
                        document.getElementById('field_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('field_coords').value = JSON.stringify(coordinates);
                        document.getElementById('field_latitude').value = bounds.getCenter().lat();
                        document.getElementById('field_longitude').value = bounds.getCenter().lng();
                        document.getElementById('field_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('field_coords').value = JSON.stringify(coordinates);
                        document.getElementById('field_latitude').value = bounds.getCenter().lat();
                        document.getElementById('field_longitude').value = bounds.getCenter().lng();
                        document.getElementById('field_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('field_coords').value = JSON.stringify(coordinates);
                        document.getElementById('field_latitude').value = bounds.getCenter().lat();
                        document.getElementById('field_longitude').value = bounds.getCenter().lng();
                        document.getElementById('field_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);

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

                if(!error){
                    close_modal();
                    swal({
                            title: "Are you sure?",
                            text: "Planting Area will be created!",
                            type: "warning",
                            showCancelButton: true,
                            closeOnConfirm: false,
                            showLoaderOnConfirm: true
                        },
                        function() {
                            $("#createFieldForm").ajaxSubmit({
                                type: "POST",
                                url: "create_field",
                                dataType: "json",
                                success: function (response) {
                                    if (response.status === "success") {
                                        swal("Done!", "Planting Area Created", "success");
                                        deleteSelectedShapes();
                                        reCenterMap();
                                        $(".job-content").load(location.href+(' .job-content'));
                                        $('#field_coords').val('')
                                        $('#field_latitude').val('')
                                        $('#field_longitude').val('')
                                        $('#field_size').val('')
                                        $('#createFieldForm').resetForm();
                                        var element = document.getElementById("createField");
                                        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_field_latitude').val() == ''){

                var edit_field_latitude = latitude;
                var edit_field_longitude = longitude;
                var edit_field_coords = document.getElementById('edit_field_coords').value;
                var edit_field_size = document.getElementById('edit_field_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_field_latitude, edit_field_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_field_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_field_coords').val(JSON.stringify(coordinates));
                            document.getElementById('edit_field_latitude').value = bounds.getCenter().lat();
                            document.getElementById('edit_field_longitude').value = bounds.getCenter().lng();
                            document.getElementById('edit_field_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_field_coords').val(JSON.stringify(coordinates));
                            document.getElementById('edit_field_latitude').value = bounds.getCenter().lat();
                            document.getElementById('edit_field_longitude').value = bounds.getCenter().lng();
                            document.getElementById('edit_field_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_field_coords').val(JSON.stringify(coordinates));
                            document.getElementById('edit_field_latitude').value = bounds.getCenter().lat();
                            document.getElementById('edit_field_longitude').value = bounds.getCenter().lng();
                            document.getElementById('edit_field_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_field_coords').val(JSON.stringify(coordinates));
                            document.getElementById('edit_field_latitude').value = bounds.getCenter().lat();
                            document.getElementById('edit_field_longitude').value = bounds.getCenter().lng();
                            document.getElementById('edit_field_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_field_coords').val(JSON.stringify(coordinates));
                            document.getElementById('edit_field_latitude').value = bounds.getCenter().lat();
                            document.getElementById('edit_field_longitude').value = bounds.getCenter().lng();
                            document.getElementById('edit_field_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);

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

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

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

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

                                        }
                                    }
                                });
                            });

                    }
                });

            }
            else{
                var edit_field_latitude = document.getElementById('edit_field_latitude').value;
                var edit_field_longitude = document.getElementById('edit_field_longitude').value;
                var edit_field_coords = document.getElementById('edit_field_coords').value;
                var edit_field_size = document.getElementById('edit_field_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_field_latitude, edit_field_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_field_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_field_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_field_coords').val(JSON.stringify(coordinates));
                    console.log(bounds.getCenter().lat())
                    console.log(bounds.getCenter().lng())
                    //document.getElementById('edit_field_coords').value = JSON.parse(coordinates);
                    document.getElementById('edit_field_latitude').value = bounds.getCenter().lat();
                    document.getElementById('edit_field_longitude').value = bounds.getCenter().lng();
                    document.getElementById('edit_field_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_field_coords').val(JSON.stringify(coordinates));
                    //document.getElementById('edit_field_coords').value = JSON.parse(coordinates);
                    document.getElementById('edit_field_latitude').value = bounds.getCenter().lat();
                    document.getElementById('edit_field_longitude').value = bounds.getCenter().lng();
                    document.getElementById('edit_field_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_field_coords').val(JSON.stringify(coordinates));
                    document.getElementById('edit_field_latitude').value = bounds.getCenter().lat();
                    document.getElementById('edit_field_longitude').value = bounds.getCenter().lng();
                    document.getElementById('edit_field_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_field_coords').val(JSON.stringify(coordinates));
                    document.getElementById('edit_field_latitude').value = bounds.getCenter().lat();
                    document.getElementById('edit_field_longitude').value = bounds.getCenter().lng();
                    document.getElementById('edit_field_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_field_coords').val(JSON.stringify(coordinates));
                    document.getElementById('edit_field_latitude').value = bounds.getCenter().lat();
                    document.getElementById('edit_field_longitude').value = bounds.getCenter().lng();
                    document.getElementById('edit_field_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_field_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_field_coords').val(JSON.stringify(coordinates));
                            document.getElementById('edit_field_latitude').value = bounds.getCenter().lat();
                            document.getElementById('edit_field_longitude').value = bounds.getCenter().lng();
                            document.getElementById('edit_field_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_field_coords').val(JSON.stringify(coordinates));
                            document.getElementById('edit_field_latitude').value = bounds.getCenter().lat();
                            document.getElementById('edit_field_longitude').value = bounds.getCenter().lng();
                            document.getElementById('edit_field_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_field_coords').val(JSON.stringify(coordinates));
                            document.getElementById('edit_field_latitude').value = bounds.getCenter().lat();
                            document.getElementById('edit_field_longitude').value = bounds.getCenter().lng();
                            document.getElementById('edit_field_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_field_coords').val(JSON.stringify(coordinates));
                            document.getElementById('edit_field_latitude').value = bounds.getCenter().lat();
                            document.getElementById('edit_field_longitude').value = bounds.getCenter().lng();
                            document.getElementById('edit_field_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_field_coords').val(JSON.stringify(coordinates));
                            document.getElementById('edit_field_latitude').value = bounds.getCenter().lat();
                            document.getElementById('edit_field_longitude').value = bounds.getCenter().lng();
                            document.getElementById('edit_field_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);

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

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

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

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

                                        }
                                    }
                                });
                            });

                    }
                });

            }

        }

        $("#FieldActions").on("click", ".view_edit_field", function (e) {

                $.ajax({
                    type: "GET",
                    url: "view_edit_field",
                    dataType: "json",
                    data:{
                        field_id: field_id
                    },
                    success: function (response) {
                        if (response.status === "success") {
                            $("#edit_field_name").val(response.field_name);
                            $("#edit_field_latitude").val(response.field_latitude);
                            $("#edit_field_longitude").val(response.field_longitude);
                            $("#edit_field_size").val(response.field_size);
                            $("#edit_field_coords").val(response.field_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 PLANTING 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 PLANTING AREA (Optional)');
            }

        });

        let field_id, field_name;

        $(".page-content").on("click", ".field_button", function (e) {
            field_id = $(this).data("id");
            field_name = $(this).data("name");
            $(".field_name_text").text(field_name);
            var element = document.getElementById("FieldActions");
            element.classList.add("menu-active");
            var element = document.getElementById("logger");
            element.classList.add("menu-active");
        });

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

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

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

                            }
                        }
                    });
                });
        });

        $("#FieldActions").on("click", ".view_field_timeline", function (e) {

            $.ajax({
                type: "GET",
                url: "view_timeline",
                dataType: "json",
                data:{
                    asset_id: field_id,
                    asset_type: 'FIELD'
                },
                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