{% 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>
                <main>
                    <div class="container-fluid px-4">
                        <h2 class="mt-4">{{currentGarden.name}}: {{currentBlock.name}}
                            <a type="button"class="btn btn-outline-dark"  href="/blocks/{{currentGarden.id}}/{{currentBlock.id}}" >
                                <i class="fa-solid fa-arrow-left"></i>
                            </a>
                        </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 id="outer">
                                        Misija:
                                            <div class="inner">
                                                <button type="button" id="button_generate_mission" class="btn btn-outline-dark ms-2" style="font-size: 20px;" onClick="return false;">Ģenerēt
                                                </button>
                                            </div>
                                    </div>
                                    <div id="outer">
                                        Lidojuma plāns:
                                            {% for plan in blockPlans%}
                                            <div class="inner">
                                                <a type="button" 
                                                        id="plan"
                                                        class="btn btn-outline-dark ms-2" 
                                                        href="/blocks/{{currentGarden.id}}/{{currentBlock.id}}/flightPlan/{{plan.id}}" 
                                                        style="font-size: 20px;" >
                                                        Plāns {{plan.sequence_num}}
                                                </a>
                                            </div>
                                            {% endfor %}
                                            <div class="inner">
                                                <button type="button" id="button_add_plan" class="btn btn-outline-dark ms-2" style="font-size: 20px;" onClick="newPathFormSubmit()">Jauns
                                                </button>
                                            </div>
                                            <div class="inner">
                                                <button type="button" id="button_archive_plans" class="btn btn-outline-dark ms-2" style="font-size: 20px;" onClick="archivePathsSubmit()" >Arhivēt
                                                </button>
                                            </div>
                                    </div>
                                    <div id="outer">
                                        Lidojuma punkti:
                                            <div class="inner">
                                                <button type="button" id="button_add_path" class="btn btn-outline-dark ms-2" style="font-size: 20px;">Pievienot
                                                </button>
                                            </div>
                                            <div class="inner">
                                                <button type="button" id="button_edit" class="btn btn-outline-dark ms-2" style="font-size: 20px;">Rediģēt
                                                </button>
                                            </div>
                                            <div class="inner">
                                                <button type="button" id="button_delete" class="btn btn-outline-dark ms-2" style="font-size: 20px;" >Dzēst
                                                </button>
                                            </div>
                                    </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>
                
                {% include 'footer.html' %}

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

                <form id="archivePathForm" method = "POST" style= "display: none;">
                {% csrf_token %}
                <div class="form-group row">
                        <input id="archivePath" name="archivePath" value="">
                </div>
                </form>
                
                <form id="addPathForm" method = "POST" style= "display: none;">
                    {% csrf_token %}
                    <div class="form-group row">
                            <input id="addPath" name="addPath" value="">
                    </div>
                </form>

                <form id="editPath" method = "POST" style= "display: none;">
                {% csrf_token %}
                <div class="form-group row">
                        <input id="editedPaths" name="editedPaths" value="">
                </div>
                </form>
                <form id="deletedPath" method = "POST" style= "display: none;">
                    {% csrf_token %}
                    <div class="form-group row">
                            <input id="deletedPaths" name="deletedPaths" value="">
                    </div>
                </form>
            </div>
        </div>
        <script type="text/javascript">
        function newPathFormSubmit() {
        document.getElementById("newPathForm").submit();
        }

        function archivePathsSubmit() {
        document.getElementById("archivePathForm").submit();
        }
        const mapCoordinates = jQuery.parseJSON('{{ mapCenter|escapejs }}')

        document.getElementById("button_edit").disabled = true;
        document.getElementById("button_delete").disabled = true;
        document.getElementById("button_add_path").disabled = true;


        // database data
        var gardenProtectedRegions = jQuery.parseJSON('{{ protectedRegions|escapejs }}');
        var blocksTrees = 0;
        var blocksBorder = 0;
        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);
        }
        var droneStation = 0;
        try{
            droneStation = jQuery.parseJSON('{{ droneStation|escapejs }}');
            console.log(droneStation);
        }
        catch(err){
            console.log(err);
        }


        // validators
        var blockBorders = false;
        var droneStations = false;

        // Buttons
        document.getElementById("button_edit").addEventListener("click", buttonToolbarEdit);
        document.getElementById("button_delete").addEventListener("click", buttonToolbarDelete);
        document.getElementById("button_add_path").addEventListener("click", buttonAddFlightPlan);

        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
            }
        }
        flightPlan = {
            showArea: false,
            shapeOptions: {
                stroke: true,
                color: '#000000',
                weight: 4,
                opacity: 0.6,
                fill: false,
                fillColor: null, //same as color by default
                fillOpacity: 0.2,
                clickable: true
            }
        }
        
        // buttons functions
        // Edit button
        function buttonToolbarEdit(){
            // disable buttons until change 
            document.getElementById("button_edit").disabled = true;
            document.getElementById("button_delete").disabled = true;
            document.getElementById("button_add_path").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_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);
            });

        }
        // flight plan button
        function buttonAddFlightPlan(){
            document.getElementById("button_edit").disabled = true;
            document.getElementById("button_delete").disabled = true;

            var polygonDrawer = new L.Draw.Polygon(map, flightPlan);     
            polygonDrawer.enable();
        }
        // 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 = 'Kiršu koks';
                }
                var marker = new L.marker([blocksTrees[i]['fields']['latitude'],blocksTrees[i]['fields']['longitude']], {icon: icon});
                marker.addTo(map).bindTooltip(icon.myType);
            }
        }
        // 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) {
                layer.addTo(map)
                };
                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) {
                    layer.addTo(map)
                };
                }
                }
        }
        // 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);
                droneStations = true;
                }
            }
            catch(err) {
                console.log(err);
            }
        }

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

            L.tileLayer(
                'https://server.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}', {
                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);

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

            // 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 (layer.options.color === "#000000"){
                    editableLayers.addLayer(layer);
                    layerJSON = layer.toGeoJSON();
                    document.getElementById("addPath").value = JSON.stringify(layerJSON);
                    document.getElementById("addPathForm").submit();
                }
                document.getElementById("button_edit").disabled = false;
                document.getElementById("button_delete").disabled = false;
                document.getElementById("button_add_path").disabled = false;
            });

            // To enable buttons after editing is complete
            map.on(L.Draw.Event.EDITSTOP, function (e) {
                var type = e.layerType,
                    layer = e.layer;
                console.log("cancel pressed");
                document.getElementById("button_edit").disabled = false;
                document.getElementById("button_delete").disabled = false;
                document.getElementById("button_add_path").disabled = false;
            });
             // To enable buttons after deleting is complete
            map.on(L.Draw.Event.DELETESTOP, function (e) {
                var type = e.layerType,
                    layer = e.layer;
                console.log("cancel pressed");
                document.getElementById("button_edit").disabled = false;
                document.getElementById("button_delete").disabled = false;
                document.getElementById("button_add_path").disabled = false;
            });

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

        </script>
{% endblock %}