{% extends 'base_layout.html' %}

{% block content %}
                <main>
                    <div class="container-fluid px-4">
                        <h1 class="mt-4">{{ mission.name }}: Plāns {{plan.sequence_num}} </h1>
                    </div>
                            <div>
                                <div class="card mb-4">
                                    <div class="card-header">
                                        <img src="https://cdn-icons-png.flaticon.com/512/447/447031.png" style="margin-bottom: 4px;" height="17">
                                        Kvartāli
                                    </div>
                                    <div class="card-body">
                                        <div class="google-maps">
                                            <div id="map" style="position: absolute; top: 10; left: 0; width: 100%; height: 100%;"></div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                </main>
        {% load static %}
        <link rel="stylesheet" href="{% static 'leaflet/leaflet.css' %}">
        <script src="{% static 'leaflet/leaflet.js' %}"></script>
        <script type="text/javascript">
        // database data
        var gardenProtectedRegions = 0;
        var BlockTrees = 0;
        var blocksBorder = 0;
        var droneStation = 0;

        const mapCoordinates = [56.512716, 27.342739]

        function JQueryUpdate(){
            try{
                blocksBorder = jQuery.parseJSON(JSON.parse(JSON.stringify('{{ blockPolygon|escapejs }}')).replaceAll("\'", "\""));
            }
            catch(err){
                console.log(err);
            }
            try{
                BlockTrees = jQuery.parseJSON('{{ blockTrees|escapejs }}');
            }
            catch(err){
                console.log(err);
            }
            try{
                droneStation = jQuery.parseJSON('{{ droneStation|escapejs }}');
            }
            catch(err){
                console.log(err);
            }
            try{
            plan = jQuery.parseJSON(JSON.parse(JSON.stringify('{{ plan|escapejs }}')).replaceAll("\'", "\""));
            }
            catch(err){
                console.log(err);
            }
        }
        $( window ).ready(JQueryUpdate());

        // validators
        var blockBorders = false;
        var PlanValidator = false;

        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,
                weight: 4,
                opacity: 0.6,
                fill: false,
                fillColor: null, //same as color by default
                fillOpacity: 0.2,
                clickable: true
            }
        }
        

        // Adds trees from database
        function AddTrees(){
            for (let i = 0; i < BlockTrees.length; i++) 
            {
                var icon = L.icon({
                iconUrl: iconUrl[BlockTrees[i]['fields']['cultivares']-1],
                iconSize: [38, 38],
                iconAnchor: [19, 37],
                tooltipAnchor: [19, -19]
                });
                icon.primaryKey = BlockTrees[i]['pk'];
                if (BlockTrees[i]['fields']['cultivares']===1){
                    icon.myType = 'Ābola koks';
                }
                else if (BlockTrees[i]['fields']['cultivares']===2){
                    icon.myType = 'Bumbiera koks';
                }
                else
                {
                    icon.myType = 'Kiršu koks';
                }
                var marker = new L.marker([BlockTrees[i]['fields']['latitude'],BlockTrees[i]['fields']['longitude']], {icon: icon});
                marker.addTo(map).bindTooltip(icon.myType);
                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,
                });

                    // Take advantage of the onEachFeature callback to initialize editableLayers so it could be edited
                function onEachFeature(feature, layer) {
                editableLayers.addLayer(layer);
                };
                }
                }
        }
        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);
                editableLayers.addLayer(marker);
                droneStations = true;
                }
            }
            catch(err) {
                console.log(err);
            }
        }
        function AddPlan(){
            try {
                if (plan!==0 && plan!==null){
                    L.geoJson(plan, {
                onEachFeature: onEachFeature,
                style: flightPlan.shapeOptions,
                color: "#ff7800",
                });

                // Take advantage of the onEachFeature callback to initialize editableLayers so it could be edited
                function onEachFeature(feature, layer) {
                layer.addTo(map);
                editableLayers.addLayer(layer);
                };
                PlanValidator = true;
                }
            }
            catch(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}', {
                maxZoom: 19
                }).addTo(map);
            

            // Initialise the FeatureGroup to store editable layers
            var editableLayers = new L.FeatureGroup();
            map.addLayer(editableLayers);

            // adds data from database
            AddTrees();
            AddPolygon();
            AddProtectedRegions();
            AddDronestation();
            AddPlan();
            
            try{
                map.setView([BlockTrees[0]['fields']['latitude'],BlockTrees[0]['fields']['longitude']], 17);
            }
            catch(err){
                console.log(err);
            }
        </script>
{% endblock %}