{% extends 'base_layout.html' %}

{% block content%}
                <main>
                        <div class="container-fluid px-4 mt-4 ">
                        <h1 class="mt-4">
                        <a type="button"class="btn btn-outline-dark"  href="/blocks/{{currentGarden.id}}/{{currentBlock.id}}/missions" >
                                <i class="fa-solid fa-arrow-left"></i>
                        </a>
                         Misija: {{ currentMission.name }} 
                         </h1>
                        <div class="google-maps">
                            <div id="map"></div>
                        </div>
                        </div>
                    <div class="container-fluid px-4 mt-4">
                        <div class="row">
                            <table class="table table-light table-bordered">
                                <thead class="thead-light">
                                    <tr>
                                      <th scope="col">Nosaukums</th>
                                      <th scope="col">Status</th>
                                      <th scope="col">Laiks</th>
                                    </tr>
                                </thead>
                                    <tr>
                                    {% for plan in flightPlans %}
                                    <th scope="row">Plāns {{ plan.sequence_num }} </th>
                                    <td>{{ plan.status }} </td>
                                    <td> {{ plan.date }} </td>

                                    </tr>
                                    {% endfor %}
                            </table>
                        </div>
                    </div>
                </main>
    <style>
        #map {
            height: 80vh;
            width: 100%;
            }
    </style>
                {% load static %}
            <!-- 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: 17
                })
            });

            const flightplans = jQuery.parseJSON('{{ flightPlans_JSON|escapejs }}');
            const dronestation = jQuery.parseJSON('{{ droneStation|escapejs }}');
            const treeRows = jQuery.parseJSON('{{ blockTreeRows|escapejs }}');
            const currentNoFlightZones = jQuery.parseJSON('{{ noFlightZones|escapejs }}');

            // 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: "{% static 'icons/leaflet-icon-drone-on-map.png' %}",
                    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 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 DroneStationSource = new ol.source.Vector();
            var DroneStationLayer = new ol.layer.Vector({
                source: DroneStationSource,
                style: droneStationStyle
            });

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

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

            map.addLayer(DroneStationLayer);
            AddDroneStation();
            // center on drone station
            map.getView().setCenter(ol.proj.fromLonLat([dronestation[0].fields.longitude, dronestation[0].fields.latitude]));

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

            function AddTreeRows(){
                for (var i = 0; i < treeRows.length; i++) {
                    var coordinates = treeRows[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: treeRows[i].pk,
                        feature_type: 'TreeRow'
                    });
                    TreeRowSource.addFeature(treeRowFeature);
                }
            }

            map.addLayer(TreeRowLayer);
            AddTreeRows();

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

            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);
                }
            }

            map.addLayer(NoFlightZoneLayer);
            AddNoFlightZones();

            var FlightPlanSource = new ol.source.Vector();
            var FlightPlanLayer = new ol.layer.Vector({
                source: FlightPlanSource,
            });
                
            function AddFlightPlans(){
                for (var i = 0; i < flightplans.length; i++) {
                    var coordinates = flightplans[i].fields.flight_plan.geometry.coordinates[0].map(function (coord) {
                        // leave only the first two coordinates
                        return ol.proj.fromLonLat(coord);
                    });  
                    var flightPlanFeature = new ol.Feature({
                        geometry: new ol.geom.LineString(coordinates),
                        feature_id: flightplans[i].pk,
                        feature_type: 'FlightPlan'
                    });
                    flightPlanFeature.setStyle(new ol.style.Style({
                        stroke: new ol.style.Stroke({
                            color: colors[i],
                            width: 5,
                        }),
                    }));
                    FlightPlanSource.addFeature(flightPlanFeature);
                }
            }

            map.addLayer(FlightPlanLayer);
            AddFlightPlans();


            // Create a button container
            const buttonContainer = document.createElement('div');
            buttonContainer.id = 'buttonContainer';
            buttonContainer.classList.add('position-absolute', 'p-3', 'top-0', 'end-0');
            document.body.appendChild(buttonContainer);

            for (let i = 0; i < FlightPlanSource.getFeatures().length; i++) {
                const plan = FlightPlanSource.getFeatures()[i];
                const buttonRow = document.createElement('div');
                buttonRow.classList.add('row', 'mb-2');
                buttonContainer.appendChild(buttonRow);

                const buttonCol = document.createElement('div');
                buttonCol.classList.add('col');
                buttonRow.appendChild(buttonCol);

                const button = document.createElement('button');
                button.innerHTML = 'Plāns ' + (i + 1);
                button.classList.add('btn', 'btn-outline-dark');
                button.style.backgroundColor = colors[i % colors.length];
                button.style.width = '150px'; // Set the width of the button
                button.style.height = '50px'; // Set the height of the button
                button.style.fontSize = '20px'; // Set the font size of the button
                button.addEventListener('click', function() {
                    // Zoom into the plan when the button is clicked
                    const extent = plan.getGeometry().getExtent();
                    map.getView().fit(extent, {duration: 1000});
                });
                buttonCol.appendChild(button);
            }

            // Create a tooltip element
            var tooltip = document.createElement('div');
            tooltip.id = 'tooltip';
            tooltip.style.position = 'absolute';
            tooltip.style.backgroundColor = 'white';
            tooltip.style.border = '1px solid black';
            tooltip.style.padding = '5px';
            document.body.appendChild(tooltip);

            // add buttons to the map right corner
            map.addControl(new ol.control.Control({element: buttonContainer}));

            // dronestation above all
            DroneStationLayer.setZIndex(100);

            // add legend
            

            




        </script>
{% endblock %}