{% extends 'base_layout.html' %}

{% load static %}

{% block content %}
    <main>
        <div class="container-fluid px-4">
            <h1 class="mt-4">
            <a type="button"class="btn btn-outline-dark"  href="/blocks/{{currentGarden.id}}/{{currentBlock.id}}" >
                                <i class="fa-solid fa-arrow-left"></i>
            </a>
            Rediģēt kvartālu</h1>
            <hr class="divider" />
                <div class="row">
                    <div class="mt-2">
                        <div id="map"></div>
                    </div>
                </div>

                <div id="custom-buttons" class="mt-2 row" style="margin-left: 50px">
                    <div id="icon" class="col-auto">
                    </div>
                    <div class="col-2">
                    <div class="input-group">
                    <select class="form-select" aria-label="Default select example">
                    {% for breed in enterpriseBreeds %}
                        <option value="{{ breed.id }}">{{ breed.title }} - {{ breed.planting_distance }}m Stādīšanas distance - {% if breed.injection %}{{ breed.injection }} pote{% else %}Nav potes{% endif %}</option>
                    {% endfor %}
                    </select>
                    <button type="button"  class="btn btn-secondary input-group-text" id="plusSignAddBreed" onclick="location.href = '/enterprise/tree_breeds';">
                        <i class="fas fa-plus"></i>
                    </button>
                    </div>
                    </div>
                    <div id="buttons-clickable" class="col-9">
                    <button id="DrawTreeRow" type="button" onclick="addTreeRowInteraction()" class="btn btn-primary">Pievienot Koka rindu</button>
                    <button id="DrawDroneStation" type="button" onclick="addDroneStationInteraction()" class="btn btn-primary">Pievienot Drona staciju</button>
                    <button id="DrawNoFlightZone" type="button" onclick="addNoFlightZoneInteraction()" class="btn btn-primary">Pievienot Aizliegto zonu</button>
                    <button id="EditFeatures" type="button" onclick="editFeatures()" class="btn btn-secondary">Rediģēt</button>
                    <button id="DeleteFeatures" type="button" onclick="deleteFeatures()" class="btn btn-danger">Dzēst</button>
                    </div>
                </div>
            </form>
        </div>
    </main>
    <style>
        #map {
            height: 80vh;
            width: 100%;
        }
    </style>
    <!-- Include the ol node module -->
    <script src="https://cdn.jsdelivr.net/npm/ol@latest/dist/ol.js"></script>
    <link href="
    https://cdn.jsdelivr.net/npm/ol@8.2/ol.min.css
    " rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/@turf/turf@6/turf.min.js"></script>


    <script type="text/javascript">
        var currentBlock = jQuery.parseJSON('{{ currentBlockJSON|escapejs }}');
        var currentBlockBorder = currentBlock[0].fields.polygon;

        // icons
        var iconUrl = [
                "{% static 'icons/leaflet-icon-apple-on-map.png' %}",
                "{% static 'icons/leaflet-icon-pear-on-map.png' %}", 
                "{% static 'icons/leaflet-icon-cherry-on-map.png' %}",
                "{% static 'icons/leaflet-icon-apple-on-map-clicked.png' %}",
                "{% static 'icons/leaflet-icon-pear-on-map-clicked.png' %}",
                "{% static 'icons/leaflet-icon-cherry-on-map-clicked.png' %}",
                "{% static 'icons/leaflet-icon-drone-on-map.png' %}",
        ];

        var currentCultivar = currentBlock[0].fields.cultivar;
        console.log(currentCultivar);
        var iconElement = document.getElementById('icon');
        var iconImage = document.createElement('img');
        iconImage.src = iconUrl[currentCultivar-1];
        iconImage.style.width = '50px';
        iconImage.style.height = '50px';
        iconElement.appendChild(iconImage);

        var map = new ol.Map({
            target: 'map',
            layers: [
            // esri world imagery
            new ol.layer.Tile({
                source: new ol.source.XYZ({
                    url: 'https://server.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}'
                }),
            }),
            ],
            view: new ol.View({
                center: ol.proj.fromLonLat([24.105186, 56.946285]),
                zoom: 10
            })
        });

        var buttonsElement = document.getElementById('custom-buttons');


        var buttonsControl = new ol.control.Control({
        element: buttonsElement
        });

        map.addControl(buttonsControl);

        // styles and icons
        
        // tree row style
        var treeRowStyle = new ol.style.Style({
            stroke: new ol.style.Stroke({
                color: 'rgba(18, 187, 4, 0.8)',
                width: 5
            }),
        });
        // drone station style
        var droneStationStyle = new ol.style.Style({
            image: new ol.style.Icon({
                src: iconUrl[6],
                scale: 0.2
            })
        });

        // No flight zone style
        var noFlightZoneStyle = new ol.style.Style({
            fill: new ol.style.Fill({
                color: 'rgba(255, 3, 0, 0.5)',
            }),
            stroke: new ol.style.Stroke({
                color: 'rgba(176, 2, 0, 0.8)',
                width: 5
            })
        });

        var currentBlockBorderSource = new ol.source.Vector();
        var currentBlockBorderLayer = new ol.layer.Vector({
            source: currentBlockBorderSource,
            style: new ol.style.Style({
                stroke: new ol.style.Stroke({
                    color: 'blue',
                    width: 3
                }),
                fill: new ol.style.Fill({
                    color: 'rgba(0, 0, 255, 0.1)'
                }),

            })
        });

        map.addLayer(currentBlockBorderLayer);

        // add data from the database
        currentBlockBorder = currentBlockBorder.geometry.coordinates[0].map(function (coord) {
            return ol.proj.fromLonLat(coord);
        });
        var currentBlockBorderFeature = new ol.Feature({
            geometry: new ol.geom.Polygon([currentBlockBorder])
        });
        currentBlockBorderSource.addFeature(currentBlockBorderFeature);

        // map zoom to border
        var extent = currentBlockBorderSource.getExtent();
        if (extent !== undefined && extent !== null) {
            map.getView().fit(extent, map.getSize());
        }
        

        var TreeRowSource = new ol.source.Vector();
        var TreeRowLayer = new ol.layer.Vector({
            source: TreeRowSource,
            style: treeRowStyle
        });
        map.addLayer(TreeRowLayer);

        var DroneStationSource = new ol.source.Vector();
        var DroneStationLayer = new ol.layer.Vector({
            source: DroneStationSource,
            style: droneStationStyle
        });
        map.addLayer(DroneStationLayer);

        var NoFlightZoneSource = new ol.source.Vector();
        var NoFlightZoneLayer = new ol.layer.Vector({
            source: NoFlightZoneSource,
            style: noFlightZoneStyle
        });

        map.addLayer(NoFlightZoneLayer);

        
        currentTreeRows = jQuery.parseJSON('{{ currentBlockTreeRows|escapejs }}');
        currentDroneStations = jQuery.parseJSON('{{ currentBlockDroneStations|escapejs }}');
        currentNoFlightZones = jQuery.parseJSON('{{ currentBlockProtectedRegions|escapejs }}');


        function AddTreeRows(){
            for (var i = 0; i < currentTreeRows.length; i++) {
                var coordinates = currentTreeRows[i].fields.coordinates.geometry.coordinates.map(function (coord) {
                    return ol.proj.fromLonLat(coord);
                });
                var treeRowFeature = new ol.Feature({
                    geometry: new ol.geom.LineString(coordinates),
                    feature_id: currentTreeRows[i].pk,
                    feature_type: 'TreeRow'
                });
                TreeRowSource.addFeature(treeRowFeature);
            }
        }

        function AddDroneStation(){
            var coordinates = [currentDroneStations[0].fields.longitude, currentDroneStations[0].fields.latitude];
            coordinates = ol.proj.fromLonLat(coordinates);

            var droneStationFeature = new ol.Feature({
                geometry: new ol.geom.Point(coordinates),
                feature_id: currentDroneStations[0].pk,
                feature_type: 'DroneStation'
            });
            DroneStationSource.addFeature(droneStationFeature);
        }

        function AddNoFlightZones(){
            for (var i = 0; i < currentNoFlightZones.length; i++) {
                var coordinates = currentNoFlightZones[i].fields.polygon.geometry.coordinates[0].map(function (coord) {
                    return ol.proj.fromLonLat(coord);
                });
                var noFlightZoneFeature = new ol.Feature({
                    geometry: new ol.geom.Polygon([coordinates]),
                    feature_id: currentNoFlightZones[i].pk,
                    feature_type: 'ProtectedRegion'
                });
                NoFlightZoneSource.addFeature(noFlightZoneFeature);
            }
        }

        AddTreeRows();
        AddDroneStation();
        AddNoFlightZones();


        var drawTreeRow;
        var drawDroneStation;
        var drawNoFlightZone;
        var modify;
        var select;

        function addTreeRowInteraction() {
            // disable all the other buttons
            buttons = document.getElementById('buttons-clickable').children;
            for (var i = 0; i < buttons.length; i++) {
                buttons[i].disabled = true;
            }

            drawTreeRow = new ol.interaction.Draw({
                source: TreeRowSource,
                type: 'LineString',
                maxPoints: 2
            });
            
            // get currently selected breed id
            var select = document.querySelector('select');
            if (select.options.length == 0) {
                alert("Nav pievienota neviena koku šķirne.");
                return;
            }
            var selectedBreedId = select.options[select.selectedIndex].value;
            // get the coordinates of the tree row
            map.addInteraction(drawTreeRow);
            drawTreeRow.on('drawend', function (e) {
                var formCanBeSubmitted = true;

                var treeRowCoordinates = e.feature.getGeometry().getCoordinates();
                // check if tree row is inside the block
                var isInside = true;
                treeRowCoordinates.forEach(function (coord) {
                    if (!ol.extent.containsCoordinate(currentBlockBorderSource.getExtent(), coord)) {
                        isInside = false;
                    }
                });
                if (isInside == false) {
                    TreeRowSource.removeFeature(e.feature);
                    alert("Koka rinda neatrodas kvartālā.");
                    return;
                }
                // check if the tree row is not intersecting with other tree rows
                var treeRow = e.feature;
                for (var i = 0; i < TreeRowSource.getFeatures().length; i++) {
                    var treeRowFeature = TreeRowSource.getFeatures()[i];
                    if (treeRowFeature === treeRow) {
                        continue;
                    }
                    var treeRowCoordinates2 = treeRowFeature.getGeometry().getCoordinates();
                    var treeRowLine = turf.lineString(treeRowCoordinates2);
                    var treeRowLineBuffer = turf.buffer(treeRowLine, 0.5, {units: 'meters'});

                    var addedTreeRowCoordinates = treeRow.getGeometry().getCoordinates();
                    var addedTreeRowLine = turf.lineString(addedTreeRowCoordinates);
                    var addedTreeRowLineBuffer = turf.buffer(addedTreeRowLine, 0.5, {units: 'meters'});
                    var intersect = turf.booleanIntersects(treeRowLineBuffer, addedTreeRowLineBuffer);
                    //if (intersect) {
                    //    alert("Koka rinda nav atļauta šajā vietā, jo tā šķērso citu koka rindu.");
                    //    formCanBeSubmitted = false;
                    //    // remove the recently added tree row
                    //    TreeRowSource.removeFeature(e.feature);
                    //    return;
                    //}
                }

                var treeRowCoordinates = treeRowCoordinates.map(function (coord) {
                    return ol.proj.toLonLat(coord);
                });

                form = document.createElement('form');

                form.method = 'POST';
                // current url
                form.action = window.location.href;
                
                // Add CSRF token
                var csrfToken = document.createElement('input');
                csrfToken.type = 'hidden';
                csrfToken.name = 'csrfmiddlewaretoken';
                csrfToken.value = '{{ csrf_token }}';
                form.appendChild(csrfToken);

                // Add the coordinates of the tree row GeoJSON espg:3857
                var treeRowCoordinatesInput = document.createElement('input');
                treeRowCoordinatesInput.type = 'hidden';
                treeRowCoordinatesInput.name = 'tree_row_add';
                // geojson format
                treeRowCoordinatesInput.value = JSON.stringify({
                    "type": "Feature",
                    "geometry": {
                        "type": "LineString",
                        "coordinates": treeRowCoordinates
                    },
                    "properties": {}
                });
                form.appendChild(treeRowCoordinatesInput);
                // Add the breed id
                var breedIdInput = document.createElement('input');
                breedIdInput.type = 'hidden';
                breedIdInput.name = 'breed_id';
                breedIdInput.value = selectedBreedId;
                form.appendChild(breedIdInput);
                // submit the form
                document.body.appendChild(form);
                if (formCanBeSubmitted == true){
                    form.submit();
                }
            });

        }

        function addDroneStationInteraction() {
            // allow only one drone station to be added
            if (DroneStationSource.getFeatures().length > 0) {
                alert("Drona stacija jau ir pievienota.");
                return;
            }

            // disable all the other buttons
            buttons = document.getElementById('buttons-clickable').children;
            for (var i = 0; i < buttons.length; i++) {
                buttons[i].disabled = true;
            }

            drawDroneStation = new ol.interaction.Draw({
                source: DroneStationSource,
                type: 'Point'
            });
            map.addInteraction(drawDroneStation);

            drawDroneStation.on('drawend', function (e) {
                drawDroneStation.finishDrawing();
                // remove the draw interaction
                map.removeInteraction(drawDroneStation);

                // add the drone station to the database
                form = document.createElement('form');
                // get the coordinates of the drone station
                var droneStationCoordinates = e.feature.getGeometry().getCoordinates()
                droneStationCoordinates = ol.proj.toLonLat(droneStationCoordinates);
                
                form.method = 'POST';
                // current url
                form.action = window.location.href;
                // Add CSRF token
                var csrfToken = document.createElement('input');
                csrfToken.type = 'hidden';
                csrfToken.name = 'csrfmiddlewaretoken';
                csrfToken.value = '{{ csrf_token }}';
                form.appendChild(csrfToken);

                droneStation_lat = document.createElement('input');
                droneStation_lat.type = 'hidden';
                droneStation_lat.name = 'drone_station_lat';
                droneStation_lat.value = droneStationCoordinates[1];
                form.appendChild(droneStation_lat);

                droneStation_lon = document.createElement('input');
                droneStation_lon.type = 'hidden';
                droneStation_lon.name = 'drone_station_lon';
                droneStation_lon.value = droneStationCoordinates[0];
                form.appendChild(droneStation_lon);

                // submit the form
                document.body.appendChild(form);
                form.submit();


            });
        }

        function addNoFlightZoneInteraction() {
            // disable all the other buttons
            buttons = document.getElementById('buttons-clickable').children;
            for (var i = 0; i < buttons.length; i++) {
                buttons[i].disabled = true;
            }


            drawNoFlightZone = new ol.interaction.Draw({
                source: NoFlightZoneSource,
                type: 'Polygon'
            });
            map.addInteraction(drawNoFlightZone);

            drawNoFlightZone.on('drawend', function (e) {
                drawNoFlightZone.finishDrawing();
                // remove the draw interaction
                map.removeInteraction(drawNoFlightZone);

                // add the no flight zone to the database
                form = document.createElement('form');
                // get the coordinates of the no flight zone
                var noFlightZoneCoordinates = e.feature.getGeometry().getCoordinates()[0];
                noFlightZoneCoordinates = noFlightZoneCoordinates.map(function (coord) {
                    return ol.proj.toLonLat(coord);
                });

                form.method = 'POST';
                // current url
                form.action = window.location.href;
                // Add CSRF token
                var csrfToken = document.createElement('input');
                csrfToken.type = 'hidden';
                csrfToken.name = 'csrfmiddlewaretoken';
                csrfToken.value = '{{ csrf_token }}';
                form.appendChild(csrfToken);

                // Add the coordinates of the no flight zone GeoJSON espg:3857
                var noFlightZoneCoordinatesInput = document.createElement('input');
                noFlightZoneCoordinatesInput.type = 'hidden';
                noFlightZoneCoordinatesInput.name = 'no_flight_zone_add';
                // geojson format
                noFlightZoneCoordinatesInput.value = JSON.stringify({
                    "type": "Feature",
                    "geometry": {
                        "type": "Polygon",
                        "coordinates": [noFlightZoneCoordinates]
                    },
                    "properties": {}
                });
                form.appendChild(noFlightZoneCoordinatesInput);
                // submit the form
                document.body.appendChild(form);
                form.submit();
            });
        }

        var modifyTreeRow;
        var modifyDroneStation;
        var modifyNoFlightZone;

        function editFeatures() {
            // disable all the other buttons
            buttons = document.getElementById('buttons-clickable').children;
            for (var i = 0; i < buttons.length; i++) {
                buttons[i].disabled = true;
            }


            modifyTreeRow = new ol.interaction.Modify({
                source: TreeRowSource
            });
            modifyDroneStation = new ol.interaction.Modify({
                source: DroneStationSource
            });
            modifyNoFlightZone = new ol.interaction.Modify({
                source: NoFlightZoneSource
            });

            // make a copy of each source
            var treeRowSourceCopy = TreeRowSource.getFeatures().map(function (feature) {
                return feature.clone();
            });
            var droneStationSourceCopy = DroneStationSource.getFeatures().map(function (feature) {
                return feature.clone();
            });
            var noFlightZoneSourceCopy = NoFlightZoneSource.getFeatures().map(function (feature) {
                return feature.clone();
            });


            map.addInteraction(modifyDroneStation);
            map.addInteraction(modifyNoFlightZone);
            map.addInteraction(modifyTreeRow);

            var EditArray = [];
            // get all the modified features
            modifyTreeRow.on('modifyend', function (event) {
                event.features.forEach(function (feature) {
                    var featureId = feature.get('feature_id');
                    var featureType = feature.get('feature_type');
                    for (var i = 0; i < EditArray.length; i++) {
                        if (EditArray[i].get('feature_id') === featureId && EditArray[i].get('feature_type') === featureType){
                            EditArray.splice(i, 1);
                            console.log('Feature removed');
                        }
                    }
                    EditArray.push(feature);
                });
            });
            modifyDroneStation.on('modifyend', function (event) {
                event.features.forEach(function (feature) {
                    var featureId = feature.get('feature_id');
                    var featureType = feature.get('feature_type');
                    for (var i = 0; i < EditArray.length; i++) {
                        if (EditArray[i].get('feature_id') === featureId && EditArray[i].get('feature_type') === featureType){
                            EditArray.splice(i, 1);
                            console.log('Feature removed');
                        }
                    }
                    EditArray.push(feature);

                });
            });
            modifyNoFlightZone.on('modifyend', function (event) {
                event.features.forEach(function (feature) {
                    var featureId = feature.get('feature_id');
                    var featureType = feature.get('feature_type');
                    for (var i = 0; i < EditArray.length; i++) {
                        if (EditArray[i].get('feature_id') === featureId && EditArray[i].get('feature_type') === featureType){
                            EditArray.splice(i, 1);
                            console.log('Feature removed');
                        }
                    }
                    EditArray.push(feature);
                });
            });

            // add save changes button
            var saveButton = document.createElement('button');
            saveButton.id = 'saveButton';
            saveButton.innerHTML = 'Saglabāt izmaiņas';
            saveButton.className = 'btn btn-primary';
            saveButton.onclick = function (event) {
                var CleanArray = [];
                for (var i = 0; i < EditArray.length; i++) {
                    feature = EditArray[i];
                    if (feature.get('feature_type') === 'TreeRow') {
                        var coordinates = feature.getGeometry().getCoordinates();
                        coordinates = coordinates.map(function (coord) {
                            return ol.proj.toLonLat(coord);
                        });
                        treeRowCoordinates = JSON.stringify({
                            "type": "Feature",
                            "geometry": {
                                "type": "LineString",
                                "coordinates": coordinates
                            },
                            "properties": {}
                        });
                        CleanArray.push([feature.get('feature_id'), feature.get('feature_type'), treeRowCoordinates]);
                    } else if (feature.get('feature_type') === 'DroneStation') {
                        var coordinates = feature.getGeometry().getCoordinates();
                        coordinates = ol.proj.toLonLat(coordinates);
                        CleanArray.push([feature.get('feature_id'), feature.get('feature_type'), coordinates]);
                    } else if (feature.get('feature_type') === 'ProtectedRegion') {
                        var coordinates = feature.getGeometry().getCoordinates()[0];
                        coordinates = coordinates.map(function (coord) {
                            return ol.proj.toLonLat(coord);
                        });
                        noFlightZoneCoordinates = JSON.stringify({
                            "type": "Feature",
                            "geometry": {
                                "type": "Polygon",
                                "coordinates": [coordinates]
                            },
                            "properties": {}
                        });
                        CleanArray.push([feature.get('feature_id'), feature.get('feature_type'), noFlightZoneCoordinates]);
                    }
                    else {
                        console.log('Feature type not recognized');
                    }
                }
                form = document.createElement('form');
                form.method = 'POST';
                // current url
                form.action = window.location.href;
                // Add CSRF token
                var csrfToken = document.createElement('input');
                csrfToken.type = 'hidden';
                csrfToken.name = 'csrfmiddlewaretoken';
                csrfToken.value = '{{ csrf_token }}';
                form.appendChild(csrfToken);

                // Add the features to be edited
                var featuresToEdit = document.createElement('input');
                featuresToEdit.type = 'hidden';
                featuresToEdit.name = 'features_to_edit';
                featuresToEdit.value = JSON.stringify(CleanArray);
                form.appendChild(featuresToEdit);
                // submit the form
                document.body.appendChild(form);
                form.submit();
            };
            var saveButtonContainer = document.createElement('div');
            saveButtonContainer.appendChild(saveButton);
            document.body.appendChild(saveButtonContainer);

            // cancel button 
            var cancelButton = document.createElement('button');
            cancelButton.id = 'cancelButton';
            cancelButton.innerHTML = 'Atcelt';
            cancelButton.className = 'btn btn-secondary';
            var cancelButtonContainer = document.createElement('div');
            cancelButtonContainer.appendChild(cancelButton);
            document.body.appendChild(cancelButtonContainer);
            cancelButton.onclick = function (event) {
                // disable all the other buttons
                buttons = document.getElementById('buttons-clickable').children;
                for (var i = 0; i < buttons.length; i++) {
                    buttons[i].disabled = false;
                }
                map.removeInteraction(modifyTreeRow);
                map.removeInteraction(modifyDroneStation);
                map.removeInteraction(modifyNoFlightZone);
                // change the features back to the original
                TreeRowSource.clear();
                DroneStationSource.clear();
                NoFlightZoneSource.clear();
                for (var i = 0; i < treeRowSourceCopy.length; i++) {
                    TreeRowSource.addFeature(treeRowSourceCopy[i]);
                }
                for (var i = 0; i < droneStationSourceCopy.length; i++) {
                    DroneStationSource.addFeature(droneStationSourceCopy[i]);
                }
                for (var i = 0; i < noFlightZoneSourceCopy.length; i++) {
                    NoFlightZoneSource.addFeature(noFlightZoneSourceCopy[i]);
                }
            };

            var divCancelEdit = document.createElement('div');
                divCancelEdit.id = 'CancelEditContainerEdit';
                divCancelEdit.appendChild(saveButtonContainer);
                divCancelEdit.appendChild(cancelButtonContainer);
                document.body.appendChild(divCancelEdit);

            // add the buttons to the map
            // check if they are already added to the map
            controls = map.getControls().getArray();
            for (var i = 0; i < controls.length; i++) {
                if (controls[i].element.id === 'CancelEditContainerEdit') {
                    return;
                }
                if (controls[i].element.id === 'CancelEditContainerDelete') {
                        // remove all previous interactions
                        map.removeInteraction(select);
                        map.removeControl(controls[i]);
                    }                    
            };
            map.addControl(new ol.control.Control({
                element: divCancelEdit
            }));
        }

            function deleteFeatures() {
                // disable all the other buttons
                buttons = document.getElementById('buttons-clickable').children;
                for (var i = 0; i < buttons.length; i++) {
                    buttons[i].disabled = true;
                }
                
                select = new ol.interaction.Select({
                    layers: [TreeRowLayer, DroneStationLayer, NoFlightZoneLayer]
                });
                var selectedFeatures = [];
                map.addInteraction(select);
                select.on('select', function (e) {
                    if (e.selected.length > 0) {
                        selectedFeatures.push(e.selected[0]);
                        console.log(selectedFeatures);
                        for (var i = 0; i < selectedFeatures.length; i++) {
                            if (selectedFeatures[i].get('feature_type') === 'TreeRow') {
                                TreeRowSource.removeFeature(selectedFeatures[i]);
                            } else if (selectedFeatures[i].get('feature_type') === 'DroneStation') {
                                DroneStationSource.removeFeature(selectedFeatures[i]);
                            } else if (selectedFeatures[i].get('feature_type') === 'ProtectedRegion') {
                                NoFlightZoneSource.removeFeature(selectedFeatures[i]);
                            }
                        }
                    }
                });

                // Add cancel button
                var cancelButton = document.createElement('button');
                cancelButton.id = 'cancelButton';
                cancelButton.innerHTML = 'Atcelt';
                cancelButton.className = 'btn btn-secondary';
                var cancelButtonContainer = document.createElement('div');
                cancelButtonContainer.appendChild(cancelButton);
                document.body.appendChild(cancelButtonContainer);
                cancelButton.onclick = function (event) {
                    buttons = document.getElementById('buttons-clickable').children;
                    for (var i = 0; i < buttons.length; i++) {
                        buttons[i].disabled = false;
                    } 
                    map.removeInteraction(select);
                    // add the features back to the map
                    for (var i = 0; i < selectedFeatures.length; i++) {
                        if (selectedFeatures[i].get('feature_type') === 'TreeRow') {
                            TreeRowSource.addFeature(selectedFeatures[i]);
                        } else if (selectedFeatures[i].get('feature_type') === 'DroneStation') {
                            DroneStationSource.addFeature(selectedFeatures[i]);
                        } else if (selectedFeatures[i].get('feature_type') === 'ProtectedRegion') {
                            NoFlightZoneSource.addFeature(selectedFeatures[i]);
                        }
                    };
                    selectedFeatures = [];
                    // remove the buttons

                    var controls = map.getControls().getArray();
                    for (var i = 0; i < controls.length; i++) {
                        if (controls[i].element.id === 'CancelEditContainerDelete') {
                            map.removeControl(controls[i]);
                        }
                    }
                };

                // Add save changes button
                var saveButton = document.createElement('button');
                saveButton.id = 'saveButton';
                saveButton.innerHTML = 'Saglabāt izmaiņas';
                saveButton.className = 'btn btn-primary';
                saveButton.onclick = function (event) {    
                    // Perform save changes logic here
                    map.removeInteraction(select);
                    var CleanArray = [];
                    for (var i = 0; i < selectedFeatures.length; i++) {
                        CleanArray.push([selectedFeatures[i].get('feature_id'), selectedFeatures[i].get('feature_type')]);
                    }
                    
                    form = document.createElement('form');
                    form.method = 'POST';
                    // current url
                    form.action = window.location.href;
                    // Add CSRF token
                    var csrfToken = document.createElement('input');
                    csrfToken.type = 'hidden';
                    csrfToken.name = 'csrfmiddlewaretoken';
                    csrfToken.value = '{{ csrf_token }}';
                    form.appendChild(csrfToken);
                    
                    // Add the features to be deleted
                    var featuresToDelete = document.createElement('input');
                    featuresToDelete.type = 'hidden';
                    featuresToDelete.name = 'features_to_delete';
                    featuresToDelete.value = JSON.stringify(CleanArray);
                    form.appendChild(featuresToDelete);
                    // submit the form
                    document.body.appendChild(form);
                    form.submit();
                };
                var saveButtonContainer = document.createElement('div');
                saveButtonContainer.appendChild(saveButton);
                document.body.appendChild(saveButtonContainer);

                // combine the buttons
                var divCancelEdit = document.createElement('div');
                divCancelEdit.id = 'CancelEditContainerDelete';
                divCancelEdit.appendChild(saveButtonContainer);
                divCancelEdit.appendChild(cancelButtonContainer);
                document.body.appendChild(divCancelEdit);



                // add the buttons to the map
                // check if they are already added to the map
                controls = map.getControls().getArray();
                for (var i = 0; i < controls.length; i++) {
                    if (controls[i].element.id === 'CancelEditContainerDelete') {
                        return;
                    }                    
                    if (controls[i].element.id === 'CancelEditContainerEdit') {
                        map.removeControl(controls[i]);
                    }
                }
                map.addControl(new ol.control.Control({
                    element: divCancelEdit
                }))

            }
            // add a legend to the map on the right corner of the map
            var legend = document.createElement('div');
            legend.id = 'legend';
            legend.style.position = 'absolute';
            legend.style.right = '10px';
            legend.style.top = '10px';
            legend.style.backgroundColor = 'white';
            legend.style.padding = '10px';
            legend.style.borderRadius = '10px';

            // the legend will have two switches for two heatmaps - one for the yield of the trees the other for scab detection

            var heatmapToggleYield = document.createElement('div');
            heatmapToggleYield.className = 'form-check form-switch';
            heatmapToggleYield.innerHTML = `
                <input class="form-check-input" type="checkbox" id="heatmapToggleYield">
                <label class="form-check-label" for="heatmapToggleYield">Koku raža</label>
            `;
            heatmapToggleYield.onchange = function (event) {
                if (event.target.checked) {
                    // get data from the api
                    block_id = currentBlock[0].pk;
                    json_data = $.getJSON('/api/blocks/' + block_id + '/yield', function (data) {
                        var yieldData = data;
                        // convert the yield data to a format that can be used by the heatmap
                        console.log(yieldData);
                        var yieldtrees = yieldData['yield_trees'];
                        var yieldtreeFeatures = [];

                        // scale the weight so that the heatmap is more vibrant
                        var max = 0;
                        for (var i = 0; i < yieldtrees.length; i++) {
                            if (yieldtrees[i].yields > max) {
                                max = yieldtrees[i].yields;
                            }
                        }
                        var min = 0;
                        var scale = 1 / (max - min);
                        
                        for (var i = 0; i < yieldtrees.length; i++) {
                            latitude = yieldtrees[i].latitude
                            longitude = yieldtrees[i].longitude
                            yields = yieldtrees[i].yields
                            yieldtreeFeatures.push(new ol.Feature({
                                geometry: new ol.geom.Point(ol.proj.fromLonLat([longitude, latitude])),
                                weight: (yields - min) * scale
                            }));
                        }
                        var yieldSource = new ol.source.Vector({
                            features: yieldtreeFeatures
                        });
                        var yieldLayer = new ol.layer.Heatmap({
                            source: yieldSource,
                            blur: 10,
                            radius: 12,
                            title: 'Yield'
                        });
                        map.addLayer(yieldLayer);
                    });

                } else {
                    // remove the yield layer
                    var layers = map.getLayers().getArray();
                    for (var i = 0; i < layers.length; i++) {
                        if (layers[i].get('title') === 'Yield') {
                            map.removeLayer(layers[i]);
                        }
                    }
                }
            };
            legend.appendChild(heatmapToggleYield);

            var heatmapToggleScab = document.createElement('div');
            heatmapToggleScab.className = 'form-check form-switch';
            heatmapToggleScab.innerHTML = `
                <input class="form-check-input" type="checkbox" id="heatmapToggleScab">
                <label class="form-check-label" for="heatmapToggleScab">Kraupis</label>
            `;
            heatmapToggleScab.onchange = function (event) {
                if (event.target.checked) {
                    // get data from the api
                    block_id = currentBlock[0].pk;
                    json_data = $.getJSON('/api/blocks/' + block_id + '/scab', function (data) {
                        var scabData = data;
                        // convert the scab data to a format that can be used by the heatmap
                        console.log(scabData);
                        var scabtrees = scabData['scab_trees'];
                        var scabtreeFeatures = [];
                        for (var i = 0; i < scabtrees.length; i++) {
                            latitude = scabtrees[i].latitude
                            longitude = scabtrees[i].longitude
                            scabtreeFeatures.push(new ol.Feature({
                                geometry: new ol.geom.Point(ol.proj.fromLonLat([longitude, latitude])),
                                weight: 1
                            }));
                        }
                        var scabSource = new ol.source.Vector({
                            features: scabtreeFeatures
                        });
                        var scabLayer = new ol.layer.Heatmap({
                            source: scabSource,
                            blur: 10,
                            radius: 10,
                            title: 'Scab'
                        });
                        map.addLayer(scabLayer);

                    });

                } else {
                    // remove the scab layer
                    var layers = map.getLayers().getArray();
                    for (var i = 0; i < layers.length; i++) {
                        if (layers[i].get('title') === 'Scab') {
                            map.removeLayer(layers[i]);
                        }
                    }
                }
            };
            legend.appendChild(heatmapToggleScab);
            legend.appendChild(heatmapToggleScab);

            document.body.appendChild(legend);


            var legendControl = new ol.control.Control({
                element: legend
            });
            map.addControl(legendControl);


        </script>

{% endblock %}