{% extends 'base_layout.html' %}

{% block content %}
{% load static %}
<style>
.notice {
    padding: 15px;
    background-color: #fafafa;
    border-left: 6px solid #7f7f84;
    margin-bottom: 10px;
    -webkit-box-shadow: 0 5px 8px -6px rgba(0,0,0,.2);
       -moz-box-shadow: 0 5px 8px -6px rgba(0,0,0,.2);
            box-shadow: 0 5px 8px -6px rgba(0,0,0,.2);
}
.notice-sm {
    padding: 10px;
    font-size: 80%;
}
.notice-lg {
    padding: 35px;
    font-size: large;
}
.notice-success {
    border-color: #80D651;
}
.notice-success>strong {
    color: #80D651;
}
.notice-info {
    border-color: #45ABCD;
}
.notice-info>strong {
    color: #45ABCD;
}
.notice-warning {
    border-color: #FEAF20;
}
.notice-warning>strong {
    color: #FEAF20;
}
.notice-danger {
    border-color: #d73814;
}
.notice-danger>strong {
    color: #d73814;
}
</style>
                <main>
                    <div class="container-fluid px-4">
                        <h1 class="mt-4">{{ currentGarden.name }}
                        <button type="button" class="btn btn-icon-split btn-outline-dark" onclick="location.href = '/gardens/blocks/{{ currentGarden.id }}';">
                            <span class="icon">
                                <i class="fa-regular fa-pen-to-square"></i>
                            </span>
                            <span class="text">
                                Kvartāli
                            </span> 
                        </button>
                        </h1>
                        <hr class="divider" />
                        <!-- card row-->
                        <div class="row">
                            <div class="col-xl-3 col-md-6">
                                <div class="card bg-light text-black mb-4">
                                    <div class="card-body">Izmērīta raža: 5 tonnas</div>
                                    <div class="card-footer d-flex align-items-center justify-content-between">
                                        <a class="small text-black stretched-link" style="text-decoration: none;" href="#">Prognozējamā raža: 7 tonnas</a>
                                        <div class="small text-black"><i class="fas fa-angle-right"></i></div>
                                    </div>
                                </div>
                            </div>
                            <div class="col-xl-3 col-md-6">
                                <div class="card bg-light text-black mb-4">
                                    <div class="card-body">Ābolu raža: 1 tonnas</div>
                                    <div class="card-footer d-flex align-items-center justify-content-between">
                                        <a class="small text-black stretched-link" style="text-decoration: none;" href="#">Prognozējamā raža: 1.5 tonnas</a>
                                        <div class="small text-black"><i class="fas fa-angle-right"></i></div>
                                    </div>
                                </div>
                            </div>
                            <div class="col-xl-3 col-md-6">
                                <div class="card bg-light text-black mb-4">
                                    <div class="card-body">Kiršu raža: 2 tonnas</div>
                                    <div class="card-footer d-flex align-items-center justify-content-between">
                                        <a class="small text-black stretched-link"  style="text-decoration: none;" href="#">Prognozējamā raža: 3 tonnas</a>
                                        <div class="small text-black"><i class="fas fa-angle-right"></i></div>
                                    </div>
                                </div>
                            </div>
                            <div class="col-xl-3 col-md-6">
                                <div class="card bg-light text-black mb-4">
                                    <div class="card-body">Bumbieru raža: 3 tonnas</div>
                                    <div class="card-footer d-flex align-items-center justify-content-between">
                                        <a class="small text-black stretched-link" style="text-decoration: none;" href="#">Prognozējamā raža: 2.5 tonnas</a>
                                                                                <div class="small text-black"><i class="fas fa-angle-right"></i></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>
                                                                            <script>
                                                                                document.addEventListener('DOMContentLoaded', function () {
                                                                                    var apexChartData = JSON.parse('{{ apexcharts_data|safe }}');

                                                                                    //if (apexChartData.length === 0) {
                                                                                    //    document.getElementById('chart').innerHTML = '<p>Nav pieejami dati par šo gadu.</p>';
                                                                                    //    return;
                                                                                    //}
                                                                            
                                                                                    var options = {
                                                                                        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"), options);
                                                                                    chart.render();
                                                                            
                                                                                    // Function to update the chart based on the selected yield stage
                                                                                    function updateChart(selectedStage) {
                                                                                        var filteredSeries = apexChartData.filter(function (serie) {
                                                                                            return serie.name.includes(selectedStage);  // Assuming serie.name is formatted like "Cultivar - Stage"
                                                                                        });
                                                                                        chart.updateSeries(filteredSeries.length > 0 ? filteredSeries : [{data: []}]);
                                                                                    }
                                                                            
                                                                                    // Event listener for the yield stage selection dropdown
                                                                                    document.getElementById('yieldStageSelect').addEventListener('change', function () {
                                                                                        var selectedStage = this.value;
                                                                                        updateChart(selectedStage);
                                                                                    });
                                                                            
                                                                                    // Initial update to load the data for the first selected option if necessary
                                                                                    var initialStage = document.getElementById('yieldStageSelect').value;
                                                                                    updateChart(initialStage);
                                                                                });
                                                                            </script>
                                                                        </div>
                                                                    </div>
                                                                    <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 id="recommendation-div" class="card-footer d-flex align-items-center justify-content-between">
                                                                            </div>
                                                                            </div>
                                                                        </div>
                                                                    </div>
                                                                </div>
                                                            </div>
                                                        </main>

                                                <style>
                                                    #map {
                                                        height: 50vh;
                                                        width: 100%;
                                                    }
                                                </style>
                                                <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.8.0/Chart.min.js" crossorigin="anonymous"></script>
                                                <script src="{% static 'assets/demo/chart-area-demo.js' %}"></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">
                                                // get recommendation from api
                                                // api/recommendation/garden/<int:garden_id>
                                                // {"res": ["Apple trees are flowering", "Apple trees have fruit", "Apple trees have fruit", "233 trees have scab"]} example
                                                garden_id = {{ currentGarden.id }};
                                                // Create a container for the alerts
                                                var alertContainer = document.createElement('div');
                                                alertContainer.style.position = 'fixed';
                                                alertContainer.style.top = '80px'; // Adjust the top position to avoid overlapping with the nav bar
                                                alertContainer.style.right = '20px';
                                                alertContainer.style.zIndex = '1000';
                                                document.body.appendChild(alertContainer);
                                                $.ajax({
                                                    url: '/api/recommendation/garden/' + garden_id,
                                                    type: 'GET',
                                                    success: function (data) {
                                                        $('#recommendation-title').text('Recommendations');
                                                        
                                                        // Create separate alerts for each recommendation
                                                        data.res.forEach(function (recommendation) {
                                                            color = recommendation['alert']
                                                            message = recommendation['message']
                                                            // Create a new alert
                                                            var alert = document.createElement('div');
                                                            alert.className = 'notice notice-' + color;
                                                            alert.innerHTML = message;
                                                            // Append the alert to the recommendation-div
                                                            $('#recommendation-div').append(alert);
                                                        });
                                                    }
                                                });
                                                
                                                </script>

                                                <script type="text/javascript">
                                                    var map = new ol.Map({
                                                        target: 'map',
                                                        layers: [
                                                            new ol.layer.Tile({
                                                                source: new ol.source.OSM()
                                                            })
                                                        ],
                                                        view: new ol.View({
                                                            center: ol.proj.fromLonLat([24.105186, 56.946285]),
                                                            zoom: 15,
                                                            maxZoom: 20,
                                                        })
                                                    });


                                                    var garden = jQuery.parseJSON('{{ currentGardenJSON | escapejs }}');
                                                    var GardenBorders = garden[0].fields.polygon.geometry.coordinates;
                                                    // GardenBorders is a list of latitude and longitude coordinates
                                                    // all of the combined make a polygon
                                                    // convert the coordinates from espg:4326 to espg:3857

                                                    var gardenBlocks = jQuery.parseJSON('{{ blockPolygons | escapejs }}');
                                                    // 


                                                    var coordinates = GardenBorders[0].map(function (coord) {
                                                        return ol.proj.fromLonLat(coord);
                                                    });

                                                    // create a polygon from the coordinates
                                                    var polygon = new ol.geom.Polygon([coordinates]);

                                                    // create a feature from the polygon
                                                    var feature = new ol.Feature(polygon);

                                                    // create a source from the feature
                                                    var vectorSource = new ol.source.Vector({
                                                        features: [feature]
                                                    });

                                                    // create a layer from the source
                                                    var vectorLayer = new ol.layer.Vector({
                                                        source: vectorSource
                                                    });

                                                    // add the layer to the map
                                                    map.addLayer(vectorLayer);

                                                    // center map to the polygon
                                                    map.getView().fit(polygon.getExtent(), map.getSize());

                                                    function newStyle(Block, BlockCounter) {
                                                            return new ol.style.Style({
                                                                stroke: new ol.style.Stroke({
                                                                    color: 'black',
                                                                    width: 2
                                                                }),
                                                                fill: new ol.style.Fill({
                                                                    color: colors[BlockCounter % colors.length]
                                                                }),
                                                                text: new ol.style.Text({
                                                                    text: Block.fields.name,
                                                                    fill: new ol.style.Fill({
                                                                        color: 'black'
                                                                    }),
                                                                    font: 'bold 20px sans-serif' // Adjust the font size here
                                                                })
                                                            });
                                                        };

                                                    var colors = [
                                                                'rgba(166, 206, 227, 0.6)',
                                                                'rgba(31, 120, 180, 0.6)',
                                                                'rgba(178, 223, 138, 0.6)',
                                                                'rgba(51, 160, 44, 0.6)',
                                                                'rgba(251, 154, 153, 0.6)',
                                                                'rgba(227, 26, 28, 0.6)',
                                                                'rgba(253, 191, 111, 0.6)',
                                                                'rgba(255, 127, 0, 0.6)',
                                                                'rgba(202, 178, 214, 0.6)',
                                                                'rgba(106, 61, 154, 0.6)',
                                                                'rgba(255, 255, 153, 0.6)',
                                                                'rgba(177, 89, 40, 0.6)'];

                                                    var vectorSourceBlocks = new ol.source.Vector({
                                                        features: gardenBlocks.map(function (block) {
                                                            var coordinates = block.fields.polygon.geometry.coordinates[0].map(function (coord) {
                                                                return ol.proj.fromLonLat(coord);
                                                            });
                                                            var polygon = new ol.geom.Polygon([coordinates]);
                                                            var feature = new ol.Feature(polygon);
                                                            // add to the feature a name 
                                                            feature.fields = block.fields;
                                                            // add style to the feature
                                                            feature.setStyle(newStyle(block, gardenBlocks.indexOf(block)));
                                                            return feature;
                                                        })
                                                    });

                                                    var vectorLayerBlocks = new ol.layer.Vector({
                                                        source: vectorSourceBlocks,
                                                    });

                                                    map.addLayer(vectorLayerBlocks);

                                                    var currentIndex = 0;

                                                    function goToNextBlock() {
                                                        currentIndex++;
                                                        if (currentIndex >= vectorSourceBlocks.getFeatures().length) {
                                                            currentIndex = 0;
                                                        }
                                                        var feature = vectorSourceBlocks.getFeatures()[currentIndex];
                                                        map.getView().fit(feature.getGeometry(), map.getSize());
                                                    }

                                                    function goToPreviousBlock() {
                                                        currentIndex--;
                                                        if (currentIndex < 0) {
                                                            currentIndex = vectorSourceBlocks.getFeatures().length - 1;
                                                        }
                                                        var feature = vectorSourceBlocks.getFeatures()[currentIndex];
                                                        map.getView().fit(feature.getGeometry(), map.getSize());
                                                    }
                                                    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';
                                                
                                                    var nextButton = document.createElement('button');
                                                    nextButton.innerHTML = '>';
                                                    nextButton.className = 'btn btn-outline-dark';
                                                    nextButton.style.position = 'absolute';
                                                    nextButton.style.top = '10px';
                                                    nextButton.style.right = '10px';
                                                    nextButton.addEventListener('click', goToNextBlock);
                                                    legend.appendChild(nextButton);

                                                    var previousButton = document.createElement('button');
                                                    previousButton.innerHTML = '<';
                                                    previousButton.className = 'btn btn-outline-dark';
                                                    previousButton.style.position = 'absolute';
                                                    previousButton.style.top = '10px';
                                                    previousButton.style.right = '60px';
                                                    previousButton.addEventListener('click', goToPreviousBlock);
                                                    legend.appendChild(previousButton);

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

                                                </script>
                                        {% endblock %}