{% extends 'base_layout.html' %}

{% block content %}
    {% load static %}
                <main>
                    <div class="container-fluid px-4">
                        <div class="row">
                            <div class="col-10">
                                <h2 class="mt-4">{{currentGarden.name}}: {{currentBlock.name}}
                                    <a type="button"class="btn btn-outline-dark"  href="/blocks/{{currentGarden.id}}/{{currentBlock.id}}/settings_new" >
                                        <i class="fa-solid fa-pencil"></i> Rediģēt
                                    </a>
                                    <a type="button"class="btn btn-outline-dark"  href="/blocks/{{currentGarden.id}}/{{currentBlock.id}}/tree_analysis" >
                                        Koku Analīze
                                    </a>
                                    <a type="button"class="btn btn-outline-dark"  href="/blocks/{{currentGarden.id}}/{{currentBlock.id}}/missions" >
                                        Lidojumu Žurnāls
                                    </a>
                                </h2>
                            </div>
                            <hr class="divider" />
                            {% if weatherData != 0 %}
                            <div class="col-2 pt-2">
                                <div class="container ms-auto mb-3">
                                    <div class="row d-flex justify-content-end">
                                        <div class="card">
                                            <h2 class="mr-4 mt-3 ">{{ weatherData.location }}</h2>
                                            <h1 class="mr-4 large-font">{{ weatherData.temperature }} &#176;C</h1>
                                            <p class="ml-4">{{ weatherData.time|date:'Y-m-d H:i' }}</p>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            {% endif %}
                            
                        </div>                     
                        <!-- card row-->
                        <div class="row">
                            <div class="col-xl-6 col-md-6 h-100"> 
                                <div id="information_panel" class="card bg-light text-black mb-4">
                                    {% if last_mission != None %}
                                    <div class="card-body">
                                    <p class="fs-4"> Tagadējās misijas nosaukums: <span class="fw-bold"> {{ last_mission.name }} </span> </p>
                                    {% if last_mission.lastFlight != None %}
                                        <p class="fs-4"> Pēdējais lidojums: <span class="fw-bold"> {{ last_mission.lastFlight.end_date|date:"d.m.Y" }} </span> </p>
                                    {% endif %}
                                    <p class="fs-4"> Misijas izpildījums:<span class="fw-bold">  {{ last_mission.completionPercentage }}% </span></p> 
                                    <p class="fs-4"> Kraupis(koki): <span class="fw-bold"> {{ last_mission.scabPercentage }}%  </span> </p>
                                    </div>
                                    {% if last_mission.nextFlight != None %}
                                    <div class="card-footer d-flex align-items-center justify-content-between">
                                        <a class="small text-black stretched-link" style="text-decoration: none;" href="{{ last_mission.get_absolute_url }}"> Nākamais lidojums: <span class="fw-bold"> {{ last_mission.nextFlight.start_date|date:"d.m.Y" }} </span> </a>
                                        <div class="small text-black"><i class="fas fa-angle-right"></i></div>
                                    </div>
                                    {% endif %}
                                    {% else %}
                                    <div class="card-body" style="display: flex; flex-direction: column; justify-content: center; align-items: center; height: 100%; ">
                                        <p class="fs-3"> Nav aktīvu misiju </p>
                                    </div>
                                    {% endif %}
                                </div>
                            </div>
                            <div class="col-xl-6 col-md-6 ">
                                <div id="calendar-card" class="card bg-light text-black mb-4">
                                    <div class="card-body">
                                        <div id='calendar'></div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <!-- graph and map row-->
                        <div class="row">
                            <div class="col-xl-6">
                                <div class="card mb-4">
                                    <div class="card-header">
                                        <span>
                                                                                    <i class="fas fa-chart-area"></i>
                                                                                    Raža
                                                                                </span>
                                                                                <span class="float-end">
                                                                                    <select id="yieldStageSelect" class="form-select form-select-sm">
                                                                                        {% for stage in yield_stages %}
                                                                                            <option value="{{ stage.title }}">Stadija: {{ stage.title }}</option>
                                                                                        {% endfor %}
                                                                                    </select>
                                                                                </span>
                                    </div>
                                    <div class="card-body">
                                        <div id="chart">

                                        </div>
                                    </div>
                                </div>
                            </div>
                            <script>
                                var apexChartData = JSON.parse('{{ apexcharts_data|safe }}');
                                var chartOptions = {
                                    series: apexChartData,
                                    chart: {
                                        type: 'area',
                                    },
                                    xaxis: {
                                         type: 'datetime', 
                                        //  categories: {{ dates|safe }}
                                     },
                                   tooltip: {
                                         shared: true,
                                         intersect: false
                                    },
                                    dataLabels: {
                                        enabled: false
                                    },
                                     fill: {
                                         type: 'gradient',
                                         gradient: {
                                             shadeIntensity: 1,
                                             opacityFrom: 0.7,
                                             opacityTo: 0.9,
                                             stops: [0, 100]
                                         }
                                     }
                                };
                                var chart = new ApexCharts(document.querySelector("#chart"), chartOptions);
                                chart.render();

                                function updateChart(selectedStage) {
                                    var filteredSeries = apexChartData.filter(function(serie) {
                                        return serie.name === selectedStage;
                                    });

                                    chart.updateSeries(filteredSeries);
                                }
                                document.getElementById('yieldStageSelect').addEventListener('change', function () {
                                    var selectedStage = this.value;
                                    updateChart(selectedStage);
                                });

                                updateChart(document.getElementById('yieldStageSelect').value);
                            </script>
                            <div class="col-xl-6">
                                <div class="card mb-4">
                                    <div class="card-header">
                                        <i class="fa-solid fa-map"></i>
                                        Kvartāli
                                    </div>
                                    <div class="card-body">
                                            <div id="map"></div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </main>

    <style>
        #map {
            height: 50vh;
            width: 100%;
        }
        .fc-list-day-text{
            text-decoration: none;
            color: #212529;
        }
        .fc-list-day-side-text{
            text-decoration: none;
            color: #212529;
        }
        .fc-list-day-text:hover{
            color: #212529;
        }
        .fc-list-day-side-text:hover{
            color: #212529;
        }
    </style>
    </style>
        <script src='https://cdn.jsdelivr.net/npm/fullcalendar@6.1.8/index.global.min.js'></script>
        <script type="text/javascript">
                
                window.addEventListener('load', function() {
                var calendarEl = document.getElementById('calendar');
                var calendar = new FullCalendar.Calendar(calendarEl, {
                    locale: 'lv',
                    height: 300,
                    selectable: true,
                    initialView: 'listWeek',
                    buttonText: {
                        today: 'Šodien' // Change the button name to 'šodien'
                    },
                    noEventsContent: 'Nav plānotu lidojumu šajā laika periodā',
                    firstDay: 1 // Set Monday as the first day of the week
                });
                var flights = jQuery.parseJSON('{{ flights|escapejs }}');
                for (let i = 0; i < flights.length; i++) {
                    console.log(flights[i].fields);
                    calendar.addEvent({
                        title: flights[i].fields.title,
                        start: flights[i].fields.start_date,
                        end: flights[i].fields.end_date,
                        allDay: false,
                        url: flights[i].fields.url,
                    });
                }
                calendar.render();
                var calendarcard = document.getElementById('calendar-card');
                var panel = document.getElementById('information_panel');
                panel.style.height = calendarcard.offsetHeight + 'px';
            });
        </script>

        <!-- Include the ol node module -->
        <script src="https://cdn.jsdelivr.net/npm/ol@latest/dist/ol.js"></script>
        <link href="
        https://cdn.jsdelivr.net/npm/ol@8.2/ol.min.css
        " rel="stylesheet">

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

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

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

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

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

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

                })
            });

            map.addLayer(currentBlockBorderLayer);

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

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

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

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

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

            map.addLayer(NoFlightZoneLayer);

                    
            currentTreeRows = jQuery.parseJSON('{{ currentBlockTreeRowsJSON|escapejs }}');
            currentDroneStations = jQuery.parseJSON('{{ currentBlockDroneStationJSON|escapejs }}');
            currentNoFlightZones = jQuery.parseJSON('{{ currentBlockProtectedRegionsJSON|escapejs }}');


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

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

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

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

            try {
                AddTreeRows();
            } catch (error) {
                console.error("Nav koku");
            }
            try {
                AddDroneStation();
            } catch (error) {
                console.error("Nav drona stacijas");
            }
            try {
                AddNoFlightZones();
            } catch (error) {
                console.error("Nav aizsargājamo zonu");
            }

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

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

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

                        // filter out the trees with yieldStageSelected
                        var yieldStageSelected = document.getElementById('yieldStageSelect').value;
                        yieldtrees = yieldtrees.filter(function (tree) {
                            return tree.yield_stage === yieldStageSelected;
                        });

                        // scale the weight so that the heatmap is more vibrant
                        var max = 0;
                        for (var i = 0; i < yieldtrees.length; i++) {
                            if (yieldtrees[i].yields > max) {
                                max = yieldtrees[i].yields;
                            }
                        }
                        var min = 0;
                        var scale = 1 / (max - min);

                        //viridis colormap
                        var colors = ['#440154', '#482878', '#3e4989', '#31688e', '#26828e', '#1f9e89', '#35b779', '#6ece58', '#b5de2b', '#fde725'];
                        // magma colormap
                        //var colors = ['#000004', '#1b0c41', '#4a0c6b', '#781c6d', '#a52c60', '#cf4446', '#f66e40', '#fe9f6d', '#fecf92', '#fcfdbf'];
                        // mako colormap
                        //var colors = ['#2c003e', '#5a184f', '#8a2e4b', '#bb3b3a', '#ed4d2e', '#ff6e54', '#ff955b', '#ffb07b', '#ffcb9d', '#ffedcc'];
                        // cividis colormap
                        //var colors = ['#002051', '#0a4361', '#1a5774', '#336680', '#4d7a86', '#678e8b', '#7fa293', '#96b89c', '#aecda7', '#c7e3b2'];


                        // create a legend showing the colors of the colormap
                        var legendColors = document.createElement('div');
                        legendColors.id = 'legendColors';
                        legendColors.style.display = 'flex';
                        legendColors.style.flexDirection = 'row';
                        legendColors.style.justifyContent = 'space-between';
                        legendColors.style.width = '100%';
                        legendColors.style.height = '20px';
                        legendColors.style.background = 'linear-gradient(to right, ' + colors.join(', ') + ')';
                        legendColors.style.class="mt-2";
                        // add min and max to the legend
                        var minLabel = document.createElement('span');
                        minLabel.style.color = 'white';
                        minLabel.style.textShadow = '1px 1px 1px black';
                        minLabel.innerHTML = min;
                        var maxLabel = document.createElement('span');
                        maxLabel.style.color = 'white';
                        
                        maxLabel.innerHTML = max;
                        legendColors.appendChild(minLabel);
                        legendColors.appendChild(maxLabel);
                        legend.appendChild(legendColors);
                        
                        for (var i = 0; i < yieldtrees.length; i++) {
                            latitude = yieldtrees[i].latitude
                            longitude = yieldtrees[i].longitude
                            yields = yieldtrees[i].yields
                            weight = (yields - min) * scale;
                            // if the yield is above 0 but lower than 0.1, set it to 0.1 so that the heatmap is more vibrant
                            if (weight <= 0.1 && weight > 0) {
                                weight = 0.1;
                            }
                            yieldtreeFeatures.push(new ol.Feature({
                                geometry: new ol.geom.Point(ol.proj.fromLonLat([longitude, latitude])),
                                weight: weight
                            }));
                        }
                        var yieldSource = new ol.source.Vector({
                            features: yieldtreeFeatures
                        });
                        var yieldLayer = new ol.layer.Heatmap({
                            source: yieldSource,
                            blur: 10,
                            radius: 8,
                            gradient: colors,
                            title: 'Yield',
                            zIndex: 99 // Ensure the layer is on top
                        });
                        map.addLayer(yieldLayer);
                    });

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

                        }
                    }
                }
            };
            legend.appendChild(heatmapToggleYield);

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

                    });

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

            document.body.appendChild(legend);


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

            var chartDoc = document.getElementById('chart');
            var mapDoc = document.getElementById('map');
            // make the map addapt to the new size of the chart
            mapDoc.style.height = chart.offsetHeight + 'px';

            function debounce(func, delay) {
                let timer;
                return function () {
                    clearTimeout(timer);
                    timer = setTimeout(func, delay);
                };
            }
            
            // Resize the chart and the map
            function resizeChartAndMap() {
                var chartDoc = document.getElementById('chart');
                var mapDoc = document.getElementById('map');
                // Make the map adapt to the new size of the chart
                mapDoc.style.height = chart.offsetHeight + 'px';
            }
            
            // Add the debounced resize event listener
            window.addEventListener('resize', debounce(resizeChartAndMap, 300));
            
        </script>
{% endblock %}