{% extends 'base_layout.html' %}

{% block content %}
{% load static %}
<style>
.row-striped:nth-of-type(odd){
  background-color: #efefef;
  border-left: 4px #000000 solid;
}

.row-striped:nth-of-type(even){
  background-color: #ffffff;
  border-left: 4px #efefef solid;
}

.row-striped {
    padding: 15px 0;
}
</style>
               <main>
                    <div class="container-fluid px-4">
                        <div class="row">
                            <div class="col-9"> <h1 class="mt-4"> </h1></div>
                        </div>
                        <div class="row">
                            <div id="data_from_api" class="col-7">
                                <div class="row">
                                    <div id="appleCard" class="col mb-4" hidden>
                                        <div class="card border-left-primary shadow h-100 py-2">
                                            <div class="card-body">
                                                <div class="row no-gutters align-items-center">
                                                    <div class="col-auto">
                                                        <image src="{% static 'icons/leaflet-icon-apple-on-map.png' %}" style="width: 40px; height: 40px;">
                                                    </div>
                                                    <div class="col mr-2">
                                                        <div class="text-xs font-weight-bold text-uppercase mb-1">
                                                            Ābolu Raža</div>
                                                        <div class="h6 mb-0 font-weight-bold text-gray-800 Apple-Yield">500kg </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <div id="pearCard" class="col mb-4" hidden>
                                        <div  class="card border-left-primary shadow h-100 py-2">
                                            <div class="card-body">
                                                <div class="row no-gutters align-items-center">
                                                    <div class="col-auto">
                                                        <image src="{% static 'icons/leaflet-icon-pear-on-map.png' %}" style="width: 50px; height: 50px;">
                                                    </div>
                                                    <div class="col mr-2">
                                                        <div class="text-s font-weight-bold text-uppercase mb-1">
                                                            Bumbieru Raža</div>
                                                        <div class="h5 mb-0 font-weight-bold text-gray-800 Pear-Yield">500kg </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <div id="cherryCard" class="col mb-4" hidden>
                                        <div class="card border-left-primary shadow h-100 py-2">
                                            <div class="card-body">
                                                <div class="row no-gutters align-items-center">
                                                    <div class="col-auto">
                                                        <image src="{% static 'icons/leaflet-icon-cherry-on-map.png' %}" style="width: 50px; height: 50px;">
                                                    </div>
                                                    <div class="col mr-2">
                                                        <div class="text-xs font-weight-bold text-uppercase mb-1">
                                                            Kiršu Raža</div>
                                                        <div class="h5 mb-0 font-weight-bold text-gray-800 Cherry-Yield">500kg </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                    <div class="col-xl-12 col-lg-12">
                                        <div class="card shadow mb-4">
                                            <div class="card-header py-3">
                                                <h6 class="m-0 font-weight-bold">Ražas grafiks</h6>
                                            </div>
                                            <div class="card-body">
                                                    <div id="chart"></div>
                                            </div>
                                        </div>
                                    </div>
                                    <script>
                                        document.addEventListener('DOMContentLoaded', function () {
                                                                                    var apexChartData = JSON.parse('{{ apexcharts_data|safe }}');
                                                                            
                                                                                    var options = {
                                                                                        series: apexChartData,
                                                                                        chart: {
                                                                                            type: 'area',
                                                                                            height: 300,
                                                                                        },
                                                                                        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();
                                    });
                                    </script>
                                    <div class="col-xl-12 col-lg-12 mb-3">
                                        <div id="map"></div>
                                    </div>
                                    <style>
                                        #map {
                                            height: 50vh;
                                            width: 100%;
                                        }
                                    </style>
                                    <!-- 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 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,
                                                        })
                                                    });


                                                    // there will be a garden objects that will be passed from the backend
                                                    // the garden object will have a unique color and will show the gardens name on the map
                                                    // on double click of a garden object the user will see the gardens blocks
                                                    // clicking on the block once will show information about the block productivity
                                                    // clicking on the garden once will show information about the garden productivity
                                                    // blocks will have unique colors aswell
                                                    // once the user attempts to unzoom the map the garden objects will be shown again and the blocks of the garden will be hidden
                                                    // the user available space to zoom will be limited to the area all gardens are shown on the map
                                                    // the user will be able to zoom in to the garden and see the blocks of the garden


                                                    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)'];
                                                </script>
                            </div>
                            <div class="col-5 mb-2">
                                <div class="row row-striped">
                                    <div class="col-12 d-flex justify-content-between align-items-center">
                                        <h4> Lidojumu planotājs</h4>
                                        <div class="d-flex">
                                            <div class="me-3">
                                                <label for="blockFilter" class="form-label me-2">Kvartāls:</label>
                                                <select class="form-select" id="blockFilter" name="block">
                                                    <option value="">Visi</option>
                                                    {% for block in blocks %}
                                                        <option value="{{ block.id }}">{{ block.name }}</option>
                                                    {% endfor %}
                                                </select>
                                            </div>
                                            <div>
                                                <label for="cultivarFilter" class="form-label me-2">Kultivārs:</label>
                                                <select class="form-select" id="cultivarFilter" name="cultivar">
                                                    <option value="">Visi</option>
                                                    {% for cultivar in cultivares %}
                                                        <option value="{{ cultivar.id }}">{{ cultivar.title }}</option>
                                                    {% endfor %}
                                                </select>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div id="flights_list"> </div>
                                <div id="pagination"> </div>
                            </div>
                        </div>
                    </div>
                </main>
                <script>
                    flights = {{ flightsJSON | safe }};
                    console.log(flights);
                    var flights_list = document.getElementById('flights_list');
                    flights_list.innerHTML = '';
                    // Pagination variables
                    var currentPage = 1;
                    var flightsPerPage = 4;

                    function displayFlights(page, filteredFlights) {
                        flights_list.innerHTML = '';
                        var start = (page - 1) * flightsPerPage;
                        var end = start + flightsPerPage;
                        var paginatedFlights = filteredFlights.slice(start, end);

                        for (var i = 0; i < paginatedFlights.length; i++) {
                            var flight = paginatedFlights[i];
                            var row = document.createElement('div');
                            row.className = 'row row-striped';
                            row.innerHTML = `
                                <div class="col-2 text-right">
                                    <h4>${flight.day}</h4>
                                    <h5>${flight.month}</h5>
                                </div>
                                <div class="col-10">
                                    <h5>Misijas ${flight.mission} - lidojums 
                                    ${flight.is_autonomous ? 'ar autonomo lidaparātu' : 'ar pilotējamu lidaparātu'}
                                    </h5>
                                    <ul class="list-inline">
                                        <li class="list-inline-item"><i class="fa-solid fa-calendar"></i> ${flight.weekday}</li>
                                        <li class="list-inline-item"><i class="fa-solid fa-clock"></i> ${flight.start_date_stfr} - ${flight.end_date_stfr} </li>
                                        <li class="list-inline-item"><i class="fa fa-location-arrow"></i> Dārza ${flight.garden}  - Kvartāls ${flight.block}</li>
                                        <li class="list-inline-item"><i class="fa-solid fa-person"></i> Darbinieks x </li>
                                    </ul>
                                    <div class="d-flex justify-content-between"> 
                                        <button type="button" class="btn btn-sm btn-outline-dark" data-bs-toggle="modal" data-bs-target="#changetime${flight.id}" >
                                            Mainīt laiku
                                        </button>
                                    </div>
                                    <div class="modal fade" id="changetime${flight.id}" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1" aria-labelledby="staticBackdropLabel" aria-hidden="true">
                                        <div class="modal-dialog">
                                            <div class="modal-content">
                                                <div class="modal-header">
                                                    <h4 class="modal-title" id="staticBackdropLabel">Dārzs</h4>
                                                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                                                </div>
                                                    <form method="POST" enctype="multipart/form-data">
                                                <div class="modal-body">
                                                        {% csrf_token %}
                                                            <div class="form-group">
                                                                <input hidden id="changeTime" name="changeTime" type="text" class="form-control" value="">
                                                                <input hidden id="flightID" name="flightID" type="text" class="form-control" value="${flight.id}">
                                                                <label for="appt">Mainīt laiku:</label>
                                                                <input type="datetime-local" name="start_date" value="${flight.start_date.slice(0, 16)}" class="form-control" required>
                                                            </div>
                                                </div>
                                                <div class="modal-footer">
                                                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Atcelt</button>
                                                    <button type="submit" class="btn btn-secondary">Saglabāt</button>
                                                </div>
                                                    </form>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            `;
                            flights_list.appendChild(row);
                        }
                    }
                    function setupPagination(filteredFlights) {
                        var pagination = document.createElement('nav');
                        pagination.setAttribute('aria-label', 'Page navigation');
                        var paginationList = document.createElement('ul');
                        paginationList.className = 'pagination justify-content-center';
                        var totalPages = Math.ceil(filteredFlights.length / flightsPerPage);

                        for (var i = 1; i <= totalPages; i++) {
                            var pageItem = document.createElement('li');
                            pageItem.className = 'page-item';
                            if (i === currentPage) {
                                pageItem.classList.add('active');
                            }
                            var pageLink = document.createElement('button');
                            pageLink.className = 'page-link';
                            pageLink.innerText = i;
                            pageLink.style = 'font-weight: bold; color: #000000;';
                            pageLink.onclick = (function(page) {
                                return function() {
                                    currentPage = page;
                                    displayFlights(page, filteredFlights);
                                    setupPagination(filteredFlights);
                                };
                            })(i);
                            pageItem.appendChild(pageLink);
                            paginationList.appendChild(pageItem);
                        }

                        pagination.appendChild(paginationList);
                        var paginationDiv = document.getElementById('pagination');
                        paginationDiv.innerHTML = '';
                        paginationDiv.appendChild(pagination);
                    }

                    function filterFlights() {
                        var blockFilter = document.getElementById('blockFilter').value;
                        var cultivarFilter = document.getElementById('cultivarFilter').value;
                        var filteredFlights = flights.filter(function(flight) {
                            var blockMatch = blockFilter === '' || flight.block_id == blockFilter;
                            var cultivarMatch = cultivarFilter === '' || flight.cultivar_id == cultivarFilter;
                            return blockMatch && cultivarMatch;
                        });
                        currentPage = 1;
                        displayFlights(currentPage, filteredFlights);
                        setupPagination(filteredFlights);
                    }

                    document.getElementById('cultivarFilter').addEventListener('change', filterFlights);
                    document.getElementById('blockFilter').addEventListener('change', filterFlights);

                    displayFlights(currentPage, flights);
                    setupPagination(flights);

                    // get yield data from API
                    var URL = '/api/monitoring_page/yields/{{ enterprise.id }}';
                    fetch(URL)
                        .then(response => response.json())
                    .then(data => {
                        // put the data in the div
                        // data data_by_cultivar contains the data for each cultivar
                        // data data_by_garden contains the data for each garden 
                        var data_by_cultivar = data.data_by_cultivar;
                        //cultivar: 1
                        //stage: 1
                        //yields: 0
                        var data_by_garden = data.data_by_garden;
                        console.log(data_by_garden);
                        // each cultivar should be a card that contains the data for that cultivar
                        // cultivar data contains for each cultivar by specific stages and the total yield of that cultivar in that stage
                        // so stages of the same cultivar should be in the same card
                        // the card should contain the cultivar name and the total yield of that cultivar which you get by summing the yields of all stages
                        // the card should contain the stages of the cultivar and the yield of that stage
                        var apple_sum = 0;
                        var pear_sum = 0;
                        var cherry_sum = 0;
                        var apple_sum_stages = [];
                        var pear_sum_stages = [];
                        var cherry_sum_stages = [];
                        for (var cultivar_stage in data_by_cultivar) {
                            // check if card for that cultivar already exists if so add the data to that card
                            cultivar_id = data_by_cultivar[cultivar_stage].cultivar;
                            cultivar_name = data_by_cultivar[cultivar_stage].cultivar_title;
                            stage = data_by_cultivar[cultivar_stage].stage;

                            if (cultivar_id == 1) {
                                apple_sum += data_by_cultivar[cultivar_stage].yields;
                                apple_sum_stages.push(data_by_cultivar[cultivar_stage]);
                            } else if (cultivar_id == 2) {
                                pear_sum += data_by_cultivar[cultivar_stage].yields;
                                pear_sum_stages.push(data_by_cultivar[cultivar_stage]);
                            } else if (cultivar_id == 3) {
                                cherry_sum += data_by_cultivar[cultivar_stage].yields;
                                cherry_sum_stages.push(data_by_cultivar[cultivar_stage]);                                
                            }
                        }
                        if (apple_sum > 0) {
                            document.querySelector('.Apple-Yield').innerText = apple_sum_stages.map(stage => stage.stage_title + ': ' + stage.yields).join(', ');
                            document.getElementById('appleCard').hidden = false;
                        }
                        if (pear_sum > 0) {
                            document.querySelector('.Pear-Yield').innerText = pear_sum_stages.map(stage => stage.stage_title + ': ' + stage.yields).join(', ');
                            document.getElementById('pearCard').hidden = false;
                        }
                        if (cherry_sum > 0) {
                            document.querySelector('.Cherry-Yield').innerText = cherry_sum_stages.map(stage => stage.stage_title + ': ' + stage.yields).join(', ');
                            document.getElementById('cherryCard').hidden = false;
                        }

                        // each garden should be a card that contains the data for that garden
                        // 
                    })
                    .catch((error) => {
                        console.error('Error:', error);
                    });

                </script>
{% endblock %}