{% extends 'base_layout.html' %}

{% block content%}
{% load static %}
<link rel="stylesheet" href="{% static 'leaflet/leaflet.css' %}">
<script src="{% static 'leaflet/leaflet.js' %}"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/leaflet.draw/0.4.2/leaflet.draw.css"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet.draw/1.0.4/leaflet.draw.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/leaflet-dialog@1.0.3/Leaflet.Dialog.css"/>
<script src="https://cdn.jsdelivr.net/npm/leaflet-dialog@1.0.3/Leaflet.Dialog.js"> </script>

<script src="
https://cdn.jsdelivr.net/npm/leaflet.heat@0.2.0/dist/leaflet-heat.min.js
"></script>

                <main>
                    <div class="container-fluid px-4">
                    
                        <h2 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>
                        {{currentGarden.name}}: {{currentBlock.name}}
                        </h2>
                        <!-- card row-->
                        <div class="row">
                            <div class="col-xl-12 col-md-12">
                                <div class="card bg-light text-black mb-4">
                                    <div class="row card-body">
                                        <div class="col-xl-4">Meteostacija:
                                        <form method="POST">
                                        {% csrf_token %}
                                        <select id="meteostation_change" name="meteostation_change" class="form-select" aria-label="Default select example" onchange="this.form.submit()">
                                        {% for meteostation in meteostations%}
                                        {% if currentBlock.private_meteostation.id != meteostation.id %}
                                            <option value="{{meteostation.id}}">{{meteostation.name}}</option>
                                        {% else%}
                                            <option value="{{meteostation.id}}" selected >{{meteostation.name}}</option>
                                        {% endif %}
                                        {% endfor %}
                                        {% if currentBlock.private_meteostation.id == Null %}
                                            <option value="0" selected> Nav norādīta </option>
                                        {% else %}
                                            <option value="0"> Nenorādīt </option>
                                        {% endif %}
                                        </select>
                                        </form>
                                        
                                        </div>
                                        <div class="col-xl-4">Koks:
                                            <select id="cultivare_select" class="form-select" aria-label="Default select example" onchange="cultivareChange(this.value)">
                                            {% for cultivare in cultivares%}
                                            <option value="{{cultivare.id}}">{{cultivare.title}}</option>
                                            {% endfor %}
                                            </select>
                                        </div>
                                        <div class="col-xl-4">Augstums:
                                        <input id="height" type="text" class="form-control" placeholder="Augstums metros">
                                        </div>
                                    </div>
                                    <div class="row card-body">
                                        <div class="col-xl-4">Drons:
                                        <form method="POST">
                                        {% csrf_token %}
                                        <select id="drone_change" name="drone_change" class="form-select" aria-label="Default select example" onchange="this.form.submit()">
                                            <option value="0" selected> Nav norādīta </option>
                                            {% for drone in drones%}
                                                {% if currentBlock.id != drone.block.id %}
                                                    <option value="{{drone.id}}">{{drone.name}}</option>
                                                {% else %}
                                                    <option value="{{drone.id}}" selected>{{drone.name}}</option>
                                                {% endif %}
                                            {% endfor %}
                                        </select>
                                        </form>
                                        </div>
                                        <div class="col-xl-4">Škirne:
                                            <select id="breed_select" class="form-select" aria-label="Default select example" onchange="treeBreedChange()">
                                                {% for breed in breeds%}
                                                <option value={{breed.id}} data-option="{{breed.cultivate_id}}" data-width="{{breed.width}}" data-height="{{breed.height}}">{{breed.title}}</option>
                                                {% endfor %}
                                            </select>
                                        </div>
                                        <div class="col-xl-4">Platums:
                                        <input id="width" type="text" class="form-control" placeholder="Platums metros">
                                        </div>
                                    </div>
                                            <p  id="layer-data"></p>

                                        <div class="row card-body">
                                        <div class="col-xl-5"> Koka rindas Škirne:
                                            <select id="enterprise_breed_select" class="form-select" aria-label="Default select example" onchange="treeBreedChange()">
                                                    {% for breed in enterpriseBreeds %}
                                                    <option value={{breed.id}}> {{breed.title}} - {{breed.planting_distance}}m Stādīšanas distance - {{breed.injection}} Pote</option>
                                                    {% endfor %}
                                                    <option value="0"> Nav norādīta </option>
                                            </select>
                                        </div>
                                        </div>

                                        <div id="outer">
                                            <div class="inner">
                                                <button type="button" id="button_add_block_borders" class="btn btn-outline-dark ms-2" style="font-size: 20px;" onClick="return false;">Robežas
                                                </button>
                                            </div>
                                            <div class="inner">
                                                <button type="button" id="button_add_protected_region" class="btn btn-outline-dark ms-2" style="font-size: 20px;" onClick="return false;">Aizliegts
                                                </button>
                                            </div>
                                            <div class="inner">
                                                <button type="button" id="button_add_dronestation" class="btn btn-outline-dark ms-2" style="font-size: 20px;" onClick="return false;">Dronbāze
                                                </button>
                                            </div>
                                            <div class="inner">
                                                <button type="button" id="button_add_tree" class="btn btn-outline-dark ms-2" style="font-size: 20px;" onClick="return false;">Koks
                                                </button>
                                            </div>
                                            <div class="inner">
                                                <button type="button" id="button_add_tree_row" class="btn btn-outline-dark ms-2" style="font-size: 20px;" onClick="return false;">Koku rinda
                                                </button>
                                            </div>
                                            <div class="inner">
                                                <button type="button" id="button_edit"class="btn btn-outline-dark ms-2" style="font-size: 20px;"onClick="return false;">Rediģēt
                                                </button>
                                            </div>
                                            <div class="inner">
                                                <button type="button" id="button_delete" class="btn btn-outline-dark ms-2" style="font-size: 20px;" onClick="return false;">Dzēst
                                                </button>
                                            </div>
                                        </div>
                                </div>
                            </div>
                        </div>
                        <!-- graph and map row-->
                        <div class="row">
                            <div class="col-xl-12">
                                <div class="card mb-4">
                                <div class="google-maps">
                                    <div id="map" style="position: absolute; top: 10; left: 0; width: 100%; height: 100%;">
                                    </div>
                                </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </main>

                <form id="editForm" method = "POST" style= "display: none;">
                {% csrf_token %}
                <div class="form-group row">
                        <input id="editChanges" name="editChanges" value="">
                </div>
                </form>
                <form id="deleteForm" method = "POST" style= "display: none;">
                {% csrf_token %}
                <div class="form-group row">
                        <input id="deleteChanges" name="deleteChanges" value="">
                </div>
                </form>

                <form id="newProtectedRegion" method = "POST" style= "display: none;">
                {% csrf_token %}
                <div class="form-group row">
                        <input id="protectedRegion" name="protectedRegion" value="">
                </div>
                </form>
                <form id="newDroneStation" method = "POST" style= "display: none;">
                {% csrf_token %}
                <div class="form-group row">
                        <input id="droneStation" name="droneStation" value="">
                        <input id="droneLatitude" name="droneLatitude" value="">
                        <input id="droneLongitude" name="droneLongitude" value="">
                </div>
                </form>
                <form id="newTreeRowForm" method = "POST" style= "display: none;">
                {% csrf_token %}
                <div class="form-group row">
                        <input id="newTreeRow" name="newTreeRow" value="">
                        <input id="enterpriseBreedID" name="enterpriseBreedID" value="">
                </div>
                </form>
        <script type="text/javascript">
        // database data 
        var gardenProtectedRegions = 0;
        var blocksTrees = 0;
        var blocksBorder = 0;
        var droneStation = 0;
        function JQueryUpdate(){
            try{
                blocksBorder = jQuery.parseJSON(JSON.parse(JSON.stringify('{{ blockPolygon|escapejs }}')).replaceAll("\'", "\""));
            }
            catch(err){
                console.log(err);
            }
            try{
                blocksTrees = jQuery.parseJSON('{{ blockTrees|escapejs }}');
            }
            catch(err){
                console.log(err);
            }
            try{
                droneStation = jQuery.parseJSON('{{ droneStation|escapejs }}');
            }
            catch(err){
                console.log(err);
            }
            try{
                blockTreeRows = jQuery.parseJSON('{{ blockTreeRows|escapejs }}');
            }
            catch(err){
                console.log(err);
            }
            try{
                blockTreesWithRows = jQuery.parseJSON('{{ blockTreesRows|escapejs }}');
            }
            catch(err){
                console.log(err);
            }
            try{
                blockMissions = jQuery.parseJSON('{{ blockMissions|escapejs }}');
            }
            catch(err){
                console.log(err);
            }
            try{
                blockMissionTreeStates = jQuery.parseJSON('{{ blockMissionTreeStates|escapejs }}');
            }
            catch(err){
                console.log(err);
            }
            gardenProtectedRegions = jQuery.parseJSON('{{ protectedRegions|escapejs }}');
        }
        const mapCoordinates = jQuery.parseJSON('{{ mapCenter|escapejs }}')

        const blockCultivar = '{{ currentBlock.cultivar_id }}';


        $( window ).ready(JQueryUpdate());
        console.log(blockMissions);
        console.log(blockMissionTreeStates);
        // validators
        var blockBorders = false;
        var droneStations = false;

        // Form Fields
        var cultivare = document.querySelector('#cultivare_select');
        var breedsSelect = document.querySelector('#breed_select');
        var breedOptions = breedsSelect.querySelectorAll('option');
        var height = document.querySelectorAll('#height');
        var width = document.querySelectorAll('#width');

        var enterpriseBreeds = document.querySelector('#enterprise_breed_select');

        // Form Change functions
        function cultivareChange(selValue){
            breedsSelect.innerHTML = '';
            for(var i = 0; i < breedOptions.length; i++) {
                if(breedOptions[i].dataset.option === selValue) {
                breedsSelect.appendChild(breedOptions[i]);
                }
            }
            treeBreedChange();
        }

        function treeBreedChange(){
            for(var i = 0; i < breedOptions.length; i++) {
                if(breedOptions[i].value === breedsSelect.value) {
                document.getElementById("width").value = breedOptions[i].dataset.width;
                document.getElementById("height").value = breedOptions[i].dataset.height;
                var width = breedOptions[i].dataset.width;
                var height = breedOptions[i].dataset.height;
                }
            }
        }
        
        // default value of the field
        cultivareChange(cultivare.value);

        // Buttons
        document.getElementById("button_add_block_borders").addEventListener("click", buttonAddBlockBorders);
        document.getElementById("button_add_protected_region").addEventListener("click", buttonAddProtectedRegions);
        document.getElementById("button_add_dronestation").addEventListener("click", buttonAddDronestation);
        document.getElementById("button_add_tree").addEventListener("click", buttonAddTree);
        document.getElementById("button_add_tree_row").addEventListener("click", buttonAddTreeRow);
        document.getElementById("button_edit").addEventListener("click", buttonToolbarEdit);
        document.getElementById("button_delete").addEventListener("click", buttonToolbarDelete);

        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' %}",
            ];

        BlockRegions = {
            showArea: false,
            shapeOptions: {
                stroke: true,
                color: '#6e83f0',
                weight: 4,
                opacity: 0.5,
                fill: true,
                fillColor: null, //same as color by default
                fillOpacity: 0.2,
                clickable: true
            }
        }
        protectedRegions = {
            showArea: false,
            shapeOptions: {
                stroke: true,
                color: '#FF0000',
                weight: 4,
                opacity: 0.5,
                fill: true,
                fillColor: null, //same as color by default
                fillOpacity: 0.2,
                clickable: true
            }
        }
        treeRowsStyle = {
            shapeOptions:{
                stroke: true,
                color: '#FA0019',
                weight: 10,
                opacity: 0.2,
                clickable: true
            }
        }
        
        // buttons functions
        // Edit button
        function buttonToolbarEdit(){
            // disable buttons until change 
            document.getElementById("button_add_block_borders").disabled = true;
            document.getElementById("button_add_protected_region").disabled = true;
            document.getElementById("button_add_dronestation").disabled = true;
            document.getElementById("button_add_tree").disabled = true;
            document.getElementById("button_add_tree_row").disabled = true;
            document.getElementById("button_edit").disabled = true;
            document.getElementById("button_delete").disabled = true;

            var editTool = new L.EditToolbar.Edit(map, {
                featureGroup: editableLayers
            })  
            editTool.enable();
            const saveButton = L.Control.extend({
            // button position
            options: {
                position: "topleft",
            },

            // save button
            onAdd: function (map) {
                // create button
                const btn = L.DomUtil.create("button");
                btn.textContent = "Saglabāt";
                btn.className = "saveButton";
                btn.id = "saveButton";
                btn.setAttribute(
                "style",
                "background-color: white; border: 2px solid black; display: flex; cursor: pointer; justify-content: center; font-size: 1rem; border-radius: 10px;"
                );

                // actions on mouseover
                btn.onmouseover = function () {
                this.style.transform = "scale(1.3)";
                };

                // actions on mouseout
                btn.onmouseout = function () {
                this.style.transform = "scale(1)";
                };

                // action when clik on button
                btn.onclick = function () {
                    editTool.save();
                    editTool.disable();
                };

                return btn;
            },
            });
            const cancelButton = L.Control.extend({
            // button position
            options: {
                position: "topleft",
            },

            // save button
            onAdd: function (map) {
                // create button
                const btn = L.DomUtil.create("button");
                btn.textContent = "Atcelt";
                btn.className = "cancelButton";
                btn.id = "cancelButton";
                btn.setAttribute(
                "style",
                "background-color: white; border: 2px solid black; display: flex; cursor: pointer; justify-content: center; font-size: 1rem; border-radius: 10px;"
                );

                // actions on mouseover
                btn.onmouseover = function () {
                this.style.transform = "scale(1.3)";
                };

                // actions on mouseout
                btn.onmouseout = function () {
                this.style.transform = "scale(1)";
                };

                // action when click on button
                btn.onclick = function () {
                    editTool.revertLayers();
                    editTool.disable();
                };

                return btn;
            },
            });


            // adding new button to map controll
            map.addControl(new saveButton());
            map.addControl(new cancelButton());

            const saveButtonID = document.getElementById('saveButton');
            const cancelButtonID = document.getElementById('cancelButton');
            saveButtonID.addEventListener('click', () => {
                // removes buttons
                saveButtonID.parentNode.removeChild(saveButtonID);
                cancelButtonID.parentNode.removeChild(cancelButtonID);
            });
            cancelButtonID.addEventListener('click', () => {
                // removes buttons
                saveButtonID.parentNode.removeChild(saveButtonID);
                cancelButtonID.parentNode.removeChild(cancelButtonID);
            });

        }
        function buttonToolbarDelete(){
            // disable buttons until change 
            document.getElementById("button_add_block_borders").disabled = true;
            document.getElementById("button_add_protected_region").disabled = true;
            document.getElementById("button_add_dronestation").disabled = true;
            document.getElementById("button_add_tree").disabled = true;
            document.getElementById("button_add_tree_row").disabled = true;
            document.getElementById("button_edit").disabled = true;
            document.getElementById("button_delete").disabled = true;

            var editTool = new L.EditToolbar.Delete(map, {
                featureGroup: editableLayers
            })  
            editTool.enable();
            const saveButton = L.Control.extend({
            // button position
            options: {
                position: "topleft",
            },

            // save button
            onAdd: function (map) {
                // create button
                const btn = L.DomUtil.create("button");
                btn.textContent = "Saglabāt";
                btn.className = "saveButton";
                btn.id = "saveButton";
                btn.setAttribute(
                "style",
                "background-color: white; border: 2px solid black; display: flex; cursor: pointer; justify-content: center; font-size: 1rem; border-radius: 10px;"
                );

                // actions on mouseover
                btn.onmouseover = function () {
                this.style.transform = "scale(1.3)";
                };

                // actions on mouseout
                btn.onmouseout = function () {
                this.style.transform = "scale(1)";
                };

                // action when clik on button
                btn.onclick = function () {
                    editTool.save();
                    editTool.disable();
                };

                return btn;
            },
            });
            const cancelButton = L.Control.extend({
            // button position
            options: {
                position: "topleft",
            },

            // save button
            onAdd: function (map) {
                // create button
                const btn = L.DomUtil.create("button");
                btn.textContent = "Atcelt";
                btn.className = "cancelButton";
                btn.id = "cancelButton";
                btn.setAttribute(
                "style",
                "background-color: white; border: 2px solid black; display: flex; cursor: pointer; justify-content: center; font-size: 1rem; border-radius: 10px;"
                );

                // actions on mouseover
                btn.onmouseover = function () {
                this.style.transform = "scale(1.3)";
                };

                // actions on mouseout
                btn.onmouseout = function () {
                this.style.transform = "scale(1)";
                };

                // action when click on button
                btn.onclick = function () {
                    editTool.revertLayers();
                    editTool.disable();
                };

                return btn;
            },
            });

            // adding new button to map controll
            map.addControl(new saveButton());
            map.addControl(new cancelButton());

            const saveButtonID = document.getElementById('saveButton');
            const cancelButtonID = document.getElementById('cancelButton');
            saveButtonID.addEventListener('click', () => {
                // removes buttons
                saveButtonID.parentNode.removeChild(saveButtonID);
                cancelButtonID.parentNode.removeChild(cancelButtonID);
            });
            cancelButtonID.addEventListener('click', () => {
                // removes buttons
                saveButtonID.parentNode.removeChild(saveButtonID);
                cancelButtonID.parentNode.removeChild(cancelButtonID);
            });

        }
        var TreeRowDrawer;
        function buttonAddTreeRow() {
            if (document.getElementById("enterprise_breed_select").value == 0){
                alert("Nav norādīta koka rindas šķirne");
                return;
            }
            document.getElementById("button_add_block_borders").disabled = true;
            document.getElementById("button_add_protected_region").disabled = true;
            document.getElementById("button_add_dronestation").disabled = true;
            document.getElementById("button_add_tree").disabled = true;
            document.getElementById("button_add_tree_row").disabled = true;
            document.getElementById("button_edit").disabled = true;
            document.getElementById("button_delete").disabled = true;


            TreeRowDrawer = new L.Draw.Polyline(map);  
            TreeRowDrawer.enable();
        }

        // Adds Block Borders
        function buttonAddBlockBorders() {
            // disable buttons until change 
            document.getElementById("button_add_block_borders").disabled = true;
            document.getElementById("button_add_protected_region").disabled = true;
            document.getElementById("button_add_dronestation").disabled = true;
            document.getElementById("button_add_tree").disabled = true;
            document.getElementById("button_add_tree_row").disabled = true;
            document.getElementById("button_edit").disabled = true;
            document.getElementById("button_delete").disabled = true;



            var polygonDrawer = new L.Draw.Polygon(map, BlockRegions);     
            polygonDrawer.enable();
        }
        // Adds Protected regions 
        function buttonAddProtectedRegions() {
             // disable buttons until change 
            document.getElementById("button_add_block_borders").disabled = true;
            document.getElementById("button_add_protected_region").disabled = true;
            document.getElementById("button_add_dronestation").disabled = true;
            document.getElementById("button_add_tree").disabled = true;
            document.getElementById("button_add_tree_row").disabled = true;
            document.getElementById("button_edit").disabled = true;
            document.getElementById("button_delete").disabled = true;

            var polygonDrawer = new L.Draw.Polygon(map, protectedRegions);     
            polygonDrawer.enable();
        }
        // Adds Dronestation
        function buttonAddDronestation() {
            // disable buttons until change 
            document.getElementById("button_add_block_borders").disabled = true;
            document.getElementById("button_add_protected_region").disabled = true;
            document.getElementById("button_add_dronestation").disabled = true;
            document.getElementById("button_add_tree").disabled = true;
            document.getElementById("button_add_tree_row").disabled = true;
            document.getElementById("button_edit").disabled = true;
            document.getElementById("button_delete").disabled = true;
    
            var icon = L.icon({
                iconUrl: iconUrl[6],
                iconSize: [2, 2],
                iconAnchor: [19, 37],
                tooltipAnchor: [19, -19]
                });
                icon.myType = 'Dronbāze';
                var marker = new L.Draw.Marker(map, {icon: icon});

                marker.enable();
            
        }
        // User newly added trees
        function buttonAddTree(){
             // disable buttons until change 
            document.getElementById("button_add_block_borders").disabled = true;
            document.getElementById("button_add_protected_region").disabled = true;
            document.getElementById("button_add_dronestation").disabled = true;
            document.getElementById("button_add_tree").disabled = true;
            document.getElementById("button_add_tree_row").disabled = true;
            document.getElementById("button_edit").disabled = true;
            document.getElementById("button_delete").disabled = true;

            var icon = L.icon({
                iconUrl: iconUrl[cultivare.value-1],
                iconSize: [38, 38],
                iconAnchor: [19, 37],
                tooltipAnchor: [19, -19]
                });
                if (cultivare.value==='1'){
                    icon.myType = 'Ābola koks';
                }
                else if (cultivare.value==='2'){
                    icon.myType = 'Bumbiera koks';
                }
                else
                {
                    icon.myType = 'Ķiršu koks';
                }
                var marker = new L.Draw.Marker(map, {icon: icon});
                marker.enable();
        }

        // dialog screen for newly added trees
        function dialogScreenNewTree(lat,long){
            var TreeForm = ['<form action = "" id="newTreeForm" method = "POST"> ',
                            '{% csrf_token %}',
                            '<div class="form-group row">',
                                '<label for="cultivare" class="col-4 col-form-label">Koks:</label> ',
                                '<div class="col-8">',
                                '<input id="cultivare" name="cultivare" type="text" class="form-control" value="',cultivare.options[cultivare.value-1].text,'"readonly>',
                                '</div>',
                            '</div>',
                            '<div class="form-group row">',
                                '<label for="treeBreed" class="col-4 col-form-label">Šķirne:</label> ',
                                '<div class="col-8">',
                                '<input id="treeBreed" name="treeBreed" type="text"  class="form-control" value="',breedOptions[breedsSelect.value-1].text,'">',
                                '</div>',
                            '</div>',
                            '<div class="form-group row">',
                                '<label for="latitude" class="col-4 col-form-label">Lat:</label> ',
                                '<div class="col-8">',
                                '<input id="latitude" name="latitude" type="text" class="form-control" value="',lat,'">',
                                '</div>',
                            '</div>',
                            '<div class="form-group row">',
                                '<label for="longitude" class="col-4 col-form-label">Lon:</label> ',
                                '<div class="col-8">',
                                '<input id="longitude" name="longitude" type="text" class="form-control" value="',long,'">',
                                '</div>',
                            '</div>',
                            '<div class="form-group row">',
                                '<label for="height" class="col-4 col-form-label">Augstums:</label> ',
                                '<div class="col-8">',
                                '<input id="height" name="height" type="text" class="form-control" value="',width[0].value,'">',
                                '</div>',
                            '</div>',
                            '<div class="form-group row">',
                                '<label for="width" class="col-4 col-form-label">Platums:</label>',
                                '<div class="col-8">',
                                '<input id="width" name="width" type="text" class="form-control" value="',height[0].value,'">',
                                '</div>',
                            '</div>',
                            '<div class="form-group row">',
                                '<div class="offset-4 col-8">',
                                '<button  type="sumbit" name="newTree" class="btn btn-outline-dark" >Saglabāt</button>',
                                '</form>',
                                '<button type="button" onclick="dialog.close()" class="btn btn-outline-dark" >Atcelt</button>',
                                '</div>',
                            '</div>'].join(' ');
            dialog.setContent(TreeForm);
            dialog.setLocation([10,520]);
            dialog.setSize([350,320]);
            dialog.open();
        }
        // reading the values from the database for dialog screen
        var previousMarker; 

        function dialogScreenTree(e){
            var treeType, treeBreed, treeLength, treeWidth ,treeTypeID;
            for (let i = 0; i < blocksTrees.length; i++) 
            {
                if (e.target.options.icon.primaryKey === blocksTrees[i]['pk']){
                    if (blocksTrees[i]['fields']['cultivares']===1){
                        treeType = 'Ābols';
                    }
                    else if (blocksTrees[i]['fields']['cultivares']===2){
                        treeType = 'Bumbiers';
                    }
                    else
                    {
                       treeType = 'Ķirsis';
                    }
                        treeBreed = blocksTrees[i]['fields']['breed'];
                        treeLength = blocksTrees[i]['fields']['length'];
                        treeWidth = blocksTrees[i]['fields']['width'];
                        treeTypeID = blocksTrees[i]['fields']['cultivares'];
                        treePrimaryKey = e.target.options.icon.primaryKey;
                    }
            }
            if (previousMarker !== treePrimaryKey){
                var clickedIcon = L.icon({
                    iconUrl: iconUrl[treeTypeID+2],
                    iconSize: [38, 38],
                    iconAnchor: [19, 37],
                    tooltipAnchor: [19, -19]
                    });
                clickedIcon.primaryKey = treePrimaryKey;
                clickedIcon.treeType = treeTypeID;
                e.target.setIcon(clickedIcon);

                editableLayers.eachLayer(function (layer) 
                {
                    try{
                    if (previousMarker === layer.options.icon.primaryKey){
                        var defaultIcon = L.icon({
                            iconUrl: iconUrl[layer.options.icon.treeType-1],
                            iconSize: [38, 38],
                            iconAnchor: [19, 37],
                            tooltipAnchor: [19, -19]
                            });
                        defaultIcon.primaryKey = previousMarker;

                        layer.setIcon(defaultIcon);
                    }
                    }
                    catch(err){
                    }
                });
                previousMarker = treePrimaryKey;
            }
            var TreeForm = ['<form action = "" id="treeForm" method = "POST"> ',
                            '{% csrf_token %}',
                            '<div class="form-group row">',
                                '<label for="cultivare" class="col-4 col-form-label">Koks:</label> ',
                                '<div class="col-8">',
                                '<input id="cultivare" name="cultivare" type="text" class="form-control" value="',treeType,'"readonly>',
                                '</div>',
                            '</div>',
                            '<div class="form-group row">',
                                '<label for="treeBreed" class="col-4 col-form-label">Šķirne:</label> ',
                                '<div class="col-8">',
                                '<input id="treeBreed" name="treeBreed" type="text"  class="form-control" value="',treeBreed,'">',
                                '</div>',
                            '</div>',
                            '<div class="form-group row">',
                                '<label for="latitude" class="col-4 col-form-label">Lat:</label> ',
                                '<div class="col-8">',
                                '<input id="latitude" name="latitude" type="text" class="form-control" value="',e.latlng.lat,'">',
                                '</div>',
                            '</div>',
                            '<div class="form-group row">',
                                '<label for="longitude" class="col-4 col-form-label">Lon:</label> ',
                                '<div class="col-8">',
                                '<input id="longitude" name="longitude" type="text" class="form-control" value="',e.latlng.lng,'">',
                                '</div>',
                            '</div>',
                            '<div class="form-group row">',
                                '<label for="height" class="col-4 col-form-label">Augstums:</label> ',
                                '<div class="col-8">',
                                '<input id="height" name="height" type="text" class="form-control" value="',treeLength,'">',
                                '</div>',
                            '</div>',
                            '<div class="form-group row">',
                                '<label for="width" class="col-4 col-form-label">Platums:</label>',
                                '<div class="col-8">',
                                '<input id="width" name="width" type="text" class="form-control" value="',treeWidth,'">',
                                '</div>',
                            '</div>',
                            '<div class="form-group row">',
                                '<div class="offset-4 col-8">',
                                '<button type="sumbit" name="editTree" value="', e.target.options.icon.primaryKey ,'"class="btn btn-outline-dark" >Saglabāt</button>',
                                '</form>',
                                '<button type="button" onclick="dialog.close()" class="btn btn-outline-dark" >Atcelt</button>',
                                '</div>',
                            '</div>'].join(' ');
            dialog.setContent(TreeForm);
            dialog.setLocation([50,50]);
            dialog.setSize([350,320]);
            dialog.open();      
        }

        // specify popup options
        const customOptions = {
        minWidth: "220", // set max-width
        keepInView: true, // Set it to true if you want to prevent users from panning the popup off of the screen while it is open.
        };

        function AddTreeRows(){
            for (let i = 0; i < blockTreeRows.length; i++) 
                {
                console.log(blockTreeRows[i]['fields']);
                let customPopup = 
                    [ "<div>   <div><div> </div> <div>Koku skaits:",blockTreeRows[i]['fields']['treeCount']," </div> <div>Novērotais augu skaits:", blockTreeRows[i]['fields']['yields'] ," </div></div></div> "].join(' ');

                L.geoJson(blockTreeRows[i]['fields']['coordinates'], {
                onEachFeature: onEachFeature,
                style: treeRowsStyle.shapeOptions,
                primaryKey: blockTreeRows[i]['pk'],
                });
                // get trees for row from blockTreesWithRows;
                var rowTrees = [];
                for (let j = 0; j < blockTreesWithRows.length; j++) 
                {
                    if (blockTreesWithRows[j]['fields']['row'] === blockTreeRows[i]['pk']){
                        rowTrees.push([blockTreesWithRows[j]['fields']['latitude'],blockTreesWithRows[j]['fields']['longitude'], 1]);
                    }
                }
                var heatmap = L.heatLayer(rowTrees, {radius: 12});
                editableLayers.addLayer(heatmap);
                // Take advantage of the onEachFeature callback to initialize editableLayers so it could be edited
                function onEachFeature(feature, layer) {
                editableLayers.addLayer(layer.bindPopup(customPopup, customOptions))
                };
                }
        }
    
        // Adds trees from database
        function AddTrees(){
            for (let i = 0; i < blocksTrees.length; i++) 
            {
                var icon = L.icon({
                iconUrl: iconUrl[blocksTrees[i]['fields']['cultivares']-1],
                iconSize: [38, 38],
                iconAnchor: [19, 37],
                tooltipAnchor: [19, -19]
                });
                icon.primaryKey = blocksTrees[i]['pk'];
                if (blocksTrees[i]['fields']['cultivares']===1){
                    icon.myType = 'Ābola koks';
                }
                else if (blocksTrees[i]['fields']['cultivares']===2){
                    icon.myType = 'Bumbiera koks';
                }
                else
                {
                    icon.myType = 'Ķiršu koks';
                }
                var marker = new L.marker([blocksTrees[i]['fields']['latitude'],blocksTrees[i]['fields']['longitude']], {icon: icon});
                marker.addTo(map).bindTooltip(icon.myType).on('click', dialogScreenTree);
                editableLayers.addLayer(marker);
            }
        }
        // Adds blockPolygon from database
        function AddPolygon(){
            try {
                if (blocksBorder!==0 && blocksBorder!==null){
                    L.geoJson(blocksBorder, {
                onEachFeature: onEachFeature,
                style: BlockRegions.shapeOptions,
                });

                // Take advantage of the onEachFeature callback to initialize editableLayers so it could be edited
                function onEachFeature(feature, layer) {
                editableLayers.addLayer(layer);
                };
                blockBorders = true;
                }
            }
            catch(err) {
            }
        }
        // Adds protected regions from database
        function AddProtectedRegions(){
            for (let i = 0; i < gardenProtectedRegions.length; i++) {
                if (gardenProtectedRegions[i]!==0 && gardenProtectedRegions[i]!==null){
                    L.geoJson(gardenProtectedRegions[i]['fields']['polygon'], {
                onEachFeature: onEachFeature,
                style: protectedRegions.shapeOptions,
                primaryKey: gardenProtectedRegions[i]['pk']
                });

                    // Take advantage of the onEachFeature callback to initialize editableLayers so it could be edited
                function onEachFeature(feature, layer) {
                editableLayers.addLayer(layer);
                };
                }
                }
        }
        // Adds DroneStation from database{
        function AddDronestation(){
            try {
                if (droneStation!==0 && droneStation!==null){
                var icon = L.icon({
                iconUrl: iconUrl[6],
                iconSize: [38, 38],
                iconAnchor: [19, 37],
                tooltipAnchor: [19, -19]
                });

                icon.myType = 'Dronbāze';
                var marker = new L.marker([droneStation[0]['fields']['latitude'],droneStation[0]['fields']['longitude']], {icon: icon});
                marker.addTo(map).bindTooltip(icon.myType);

                // if the dronestation is clicked it shows a radius of 100m
                marker.on('click', function(e){
                    droneRadius = L.circle([e.latlng.lat, e.latlng.lng], {
                            color: 'blue',
                            fillColor: 'blue',
                            fillOpacity: 0.2,
                            radius: 300
                        })
                    mapelements = map._layers;
                    console.log(mapelements);
                    var hasRadius = false;
                    var droneID = 0;
                    for (var key in mapelements) {
                        if (mapelements[key].options.radius === droneRadius.options.radius){
                            hasRadius = true;
                            droneID = mapelements[key]._leaflet_id;
                        }
                    }
                    if (hasRadius === false){
                        droneRadius.addTo(map);
                    }
                    else{
                        map.removeLayer(mapelements[droneID]);
                    }
                });

                editableLayers.addLayer(marker);


                droneStations = true;
                }
            }
            catch(err) {
                console.log(err);
            }
        }

            const lat = mapCoordinates[0];
            const lng = mapCoordinates[1];
            // center of the map
            var center = [lat, lng];
            
            var map = L.map('map').setView(center, 17);
            
            // Set up the OSM layer

            L.tileLayer( 'https://server.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}', {
                attribution: 'Tiles &copy; Esri &mdash; Source: Esri, i-cubed, USDA, USGS, AEX, GeoEye, Getmapping, Aerogrid, IGN, IGP, UPR-EGP, and the GIS User Community',
                maxZoom: 19
                }).addTo(map);

            // Initialise the FeatureGroup to store editable layers
            var editableLayers = new L.FeatureGroup();
            map.addLayer(editableLayers);
            
            var drawPluginOptions = {
                position: 'topleft',
                draw: {
                polyline: false,
                polygon: false,
                circle: false, // Turns off this drawing tools
                rectangle: false,
                circlemarker: false,
                marker: false
                },
                edit: {
                        featureGroup: editableLayers, //REQUIRED!!
                        edit: false,
                        remove: false
                    }
            };
            
            var drawControl = new L.Control.Draw(drawPluginOptions);
            map.addControl(drawControl);

            var legend = L.control({ position: "topright" });

            legend.onAdd = function(map) {
            var div = L.DomUtil.create("div", "legend");
            console.log(blockCultivar);
            if (blockCultivar == 1){
                div.innerHTML += "<img src='{% static 'icons/leaflet-icon-apple-on-map.png' %}' width='100' height='100'>";    
            }
            else if (blockCultivar == 2){
                div.innerHTML += "<img src='{% static 'icons/leaflet-icon-pear-on-map.png' %}' width='100' height='100'>";
            }
            else{
                div.innerHTML += "<img src='{% static 'icons/leaflet-icon-cherry-on-map.png' %}' width='100' height='100'>";
            }

            return div;
            };

            legend.addTo(map);


            // adds data from database
            AddTrees();
            AddPolygon();
            AddProtectedRegions();
            AddDronestation();
            AddTreeRows();

            var dialog = L.control.dialog().setContent("").addTo(map);
            dialog.close();

            // Use L.Draw.Event.EVENTNAME constants to ensure events are correct.
            map.on(L.Draw.Event.CREATED, function (e) {
                var type = e.layerType,
                    layer = e.layer;
                if (type === 'marker'){
                    layer.bindTooltip(layer.options.icon.myType);
                    // if the marker is a apple tree(would be different for each of the cultivares)
                    if (layer.options.icon.myType === 'Ābola koks' ||  layer.options.icon.myType === 'Bumbiera koks' || layer.options.icon.myType === 'Ķiršu koks'){
                        editableLayers.addLayer(layer);
                        dialogScreenNewTree(layer._latlng.lat,layer._latlng.lng)
                    }
                    // if the marker is a Drone station
                    else{
                        if(droneStations === false){
                        editableLayers.addLayer(layer);
                        document.getElementById("droneLatitude").value = layer._latlng.lat;
                        document.getElementById("droneLongitude").value = layer._latlng.lng;
                        document.getElementById("newDroneStation").submit();
                        }
                        else{
                            alert("Dronbāze jau ir pievienota.");
                        }
                    }
                }
                // if item is a block region or a protected region
                else if (type === 'polygon')
                {
                    layerJSON = layer.toGeoJSON();
                    if (layer.options.color === "#6e83f0"){
                        if (blockBorders === false){
                        editableLayers.addLayer(layer);
                        layerJSON.polygonType = "BlockBorder";
                        document.getElementById("editChanges").value = JSON.stringify(layerJSON);
                        document.getElementById("editForm").submit();
                        }
                        else
                        {
                        alert("Robežas jau ir pievienotas! Ja robežas gribat noņemt spiediet pogu dzēst.");
                        }
                    }
                    else
                    {
                        editableLayers.addLayer(layer);
                        document.getElementById("protectedRegion").value = JSON.stringify(layerJSON);
                        document.getElementById("newProtectedRegion").submit();
                    }
                }
                else {
                    layerJSON = layer.toGeoJSON();
                    editableLayers.addLayer(layer);
                    console.log(layerJSON);
                    console.log(type);
                    document.getElementById("newTreeRow").value = JSON.stringify(layerJSON);
                    document.getElementById("enterpriseBreedID").value = enterpriseBreeds.value;
                    document.getElementById("newTreeRowForm").submit();
                }
                document.getElementById("button_add_block_borders").disabled = false;
                document.getElementById("button_add_protected_region").disabled = false;
                document.getElementById("button_add_dronestation").disabled = false;
                document.getElementById("button_add_tree").disabled = false;
                document.getElementById("button_add_tree_row").disabled = false;
                document.getElementById("button_edit").disabled = false;
                document.getElementById("button_delete").disabled = false;
            });
            var typeOnstart = null;
            var numberOfPoints = 0;
            map.on('draw:drawstart', function (e) {
                var layers = e.layer,
                    type = e.layerType;
                typeOnstart = type;
            })

            map.on('draw:drawvertex', function (e) {
                var layer = e.layers;
                if (typeOnstart === 'polyline'){
                    numberOfPoints++;
                    if (numberOfPoints === 2){
                        TreeRowDrawer.completeShape()
                        numberOfPoints = 0;
                    }
                    console.log('this is a polyline');
                }
            })



             map.on('draw:edited', function (e) {
                var layers = e.layers;
                var layersJSON = new Array();
                layers.eachLayer(function (layer) {
                    var layerJSON = layer.toGeoJSON();
                    // if its a marker
                    if (layerJSON.geometry.type === "Point") {
                        // tree
                        if (layer.options.icon.myType === 'Ābola koks' ||  layer.options.icon.myType === 'Bumbiera koks' || layer.options.icon.myType === 'Ķiršu koks'){
                            layerJSON.geometry.coordinates[1] = layer._latlng.lat;
                            layerJSON.geometry.coordinates[0] = layer._latlng.lng;
                            layerJSON.primaryKey = layer.options.icon.primaryKey;
                            layersJSON.push(JSON.stringify(layerJSON));
                        }
                        else // dronestation
                        {
                            layersJSON.droneStation ='true';
                            layersJSON.push(JSON.stringify(layerJSON));
                        }
                    }
                    else if (layerJSON.geometry.type === "LineString")
                    {
                        layerJSON.TreeRowID = layer.options.primaryKey;
                        layersJSON.push(JSON.stringify(layerJSON));
                    }
                    // if its a polygon
                    else{ 
                        if (layer.options.color === "#6e83f0") // block border
                        {
                            layerJSON.polygonType = "BlockBorder";
                            layersJSON.push(JSON.stringify(layerJSON));
                            
                        }
                        else // protected regions
                        {
                            layerJSON.polygonType = layer.options.primaryKey;
                            layersJSON.push(JSON.stringify(layerJSON));
                        }
                        };
                });
                document.getElementById("editChanges").value = layersJSON;
                document.getElementById("editForm").submit();

            });
            map.on('dialog:closed', function(e){ 
            editableLayers.eachLayer(function (layer) 
                {
                    try{
                    if (previousMarker === layer.options.icon.primaryKey){
                        var defaultIcon = L.icon({
                            iconUrl: iconUrl[layer.options.icon.treeType-1],
                            iconSize: [38, 38],
                            iconAnchor: [19, 37],
                            tooltipAnchor: [19, -19]
                            });
                        defaultIcon.primaryKey = previousMarker;

                        layer.setIcon(defaultIcon);
                    }
                    }
                    catch(err){
                    } 
                }
            )});
            
            map.on(L.Draw.Event.DELETED, function (e) {
                var layers = e.layers;
                var layersJSON = new Array();
                layers.eachLayer(function (layer) {
                    var layerJSON = layer.toGeoJSON();
                    // if its a marker
                    if (layerJSON.geometry.type === "Point") {
                        if (layer._tooltip._content === 'Ābola koks' ||  layer._tooltip._content === 'Bumbiera koks' || layer._tooltip._content === 'Ķiršu koks'){
                            layersJSON.push(layer.options.icon.primaryKey);
                        }
                        else
                        {
                            layersJSON.push("DroneStation");
                        }
                    }
                    else if (layerJSON.geometry.type === "LineString")
                    {
                        layersJSON.push("TreeRow - " + layer.options.primaryKey);
                    }
                    // if its a polygon
                    else{ 
                        if (layer.options.color === "#6e83f0")
                        {
                            layersJSON.push("Border");
                        }
                        else 
                        {
                            layersJSON.push("ProtectedRegion - " + layer.options.primaryKey);
                        }
                        };
                });
                try{
                    document.getElementById("deleteChanges").value = layersJSON;
                    document.getElementById("deleteForm").submit();
                    }
                catch(err){
                    console.log(err);
                }
            });
            // To enable buttons after editing is complete
            map.on(L.Draw.Event.EDITSTOP, function (e) {
                var type = e.layerType,
                    layer = e.layer;
                document.getElementById("button_add_block_borders").disabled = false;
                document.getElementById("button_add_protected_region").disabled = false;
                document.getElementById("button_add_dronestation").disabled = false;
                document.getElementById("button_add_tree").disabled = false;
                document.getElementById("button_add_tree_row").disabled = false;
                document.getElementById("button_edit").disabled = false;
                document.getElementById("button_delete").disabled = false;
            });
             // To enable buttons after deleting is complete
            map.on(L.Draw.Event.DELETESTOP, function (e) {
                var type = e.layerType,
                    layer = e.layer;
                document.getElementById("button_add_block_borders").disabled = false;
                document.getElementById("button_add_protected_region").disabled = false;
                document.getElementById("button_add_dronestation").disabled = false;
                document.getElementById("button_add_tree").disabled = false;
                document.getElementById("button_add_tree_row").disabled = false;
                document.getElementById("button_edit").disabled = false;
                document.getElementById("button_delete").disabled = false;
            });

            try{
                map.setView([blocksTrees[0]['fields']['latitude'],blocksTrees[0]['fields']['longitude']], 17);
            }
            catch(err){
                console.log(err);
            }

            
            
            var overlayMaps = 
            {                   
                'Dārza Elementi': editableLayers,
            };

            const gradiantForYields = {0.0: 'blue', 0.5: 'lime', 1: 'red'};
            
            for (var i = 0; i < blockMissions.length; i++){
                console.log(blockMissions[i]['pk']);
                var selected = blockMissionTreeStates.filter(function (el) {
                    return el.fields.mission === blockMissions[i]['pk'];
                });
                var states = [];
                for (tree in selected){
                    // get treelocation from blockTreesWithRows
                    var treeLocation = blockTreesWithRows.filter(function (el) {
                        return el.pk === selected[tree].fields.tree;
                    });
                    if (selected[tree].fields.yields > 100){
                        var yieldIntensity = 1;
                    }
                    else{
                    var yieldIntensity = selected[tree].fields.yields/100;
                    };
                    states.push([treeLocation[0]['fields']['latitude'],treeLocation[0]['fields']['longitude'],yieldIntensity]);       
                }
                console.log(states);
                var missionHeatMap = L.heatLayer(states,{radius: 20, gradiantForYields});
                editableLayers.addLayer(missionHeatMap);
                var name = blockMissions[i]['fields']['name'];
                overlayMaps += {name: missionHeatMap};
            }

            L.Control.CustomButtons = L.Control.Layers.extend({
                onAdd: function () {
                    this._initLayout();
                    this._update();
                    return this._container;
                },
                createButton: function (type, className) {
                    const elements = this._container.getElementsByClassName(
                    "leaflet-control-layers-list"
                    );
                    const button = L.DomUtil.create(
                    "button",
                    `btn-markers ${className}`,
                    elements[0]
                    );
                    button.textContent = className;

                    L.DomEvent.on(button, "click", function (e) {
                    const checkbox = document.querySelectorAll(
                        ".leaflet-control-layers-overlays input[type=checkbox]"
                    );

                    // Remove/add all layer from map when click on button
                    [].slice.call(checkbox).map((el) => {
                        el.checked = type === "add" ? false : true;
                        el.click();
                    });
                    });
                },
                });

            // new L.Control.CustomButtons(null, overlayMaps, { collapsed: false }).addTo(map);


        </script>
{% endblock %}