{% extends 'base_layout.html' %}
{% load static %}
{% block content %}
                <main>
                    <div class="container-fluid px-4">
                        <h1 class="mt-4">
                        <a type="button"class="btn btn-outline-dark"  href="/gardens/{{currentGarden.id}}" >
                                <i class="fa-solid fa-arrow-left"></i>
                        </a>
                        {{ currentGarden }} kvartāli
                        </h1>
                        <div class="row">
                            <div class="col-7 mb-4">
                                <div id="map"></div>
                                <div id="custom-buttons" class="mt-2" style="margin-left: 50px">
                                    <button id="DrawNewBlock" class="btn btn-primary" onclick="addNewBlock()">Uzzīmēt Jaunu kvartālu</button>
                                    <button id="EditOldBlocks" class="btn btn-primary" onclick="editBlock()">Rediģēt kvartālu robežas</button>
                                </div>
                            </div>
                            <div class="col-5">
                                <div class="card mb-4">
                                    <div class="card-header">
                                        Kvartālu saraksts
                                    </div>
                                    <div class="card-body">
                                    <div class="list-group">
                                        {% for block in blocks %}
                                            {% if currentGarden.id == block.garden.id %}
                                            <div class="list-group-item d-flex justify-content-between align-items-center">
                                                <div class="d-flex w-100 justify-content-between">
                                                    <img src="{% static 'icons/leaflet-icon-' %}{% if block.cultivar.id == 1 %}apple{% elif block.cultivar.id == 2 %}pear{% elif block.cultivar.id == 3 %}cherry{% endif %}-on-map.png" alt="{{ block.cultivar.name }}" style="width: 40px; height: 40px; margin-right: 10px;">
                                                    <h5 class="mb-1" style="display: inline-block; vertical-align: middle;">{{ block.name }}</h5>
                                                </div>
                                                <div id="buttons" class="d-flex justify-content-evenly">
                                                    <div class="p-2">
                                                        <a href="{{block.get_absolute_url}}" class="btn btn-primary">Skatīt</a>
                                                    </div>
                                                    <div class="p-2">
                                                        <button type="button" class="btn btn-secondary" data-bs-toggle="modal" data-bs-target="#editBlockModal{{ block.id }}">
                                                            Rediģēt
                                                        </button>
                                                        <div id="editBlockModal{{ block.id }}" class="modal fade" tabindex="-1" aria-labelledby="editBlockModal{{ block.id }}" aria-hidden="true">
                                                            <div class="modal-dialog">
                                                                <div class="modal-content">
                                                                    <div class="modal-header">
                                                                        <h5 class="modal-title">Rediģēt kvartālu</h5>
                                                                        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                                                                    </div>
                                                                    <div class="modal-body" id="editBlockModalBody{{ block.id }}">
                                                                        <form method="post">
                                                                            {% csrf_token %}
                                                                            <input type="hidden" name="block_id" value="{{ block.id }}">
                                                                            <div class="mb-3">
                                                                                <label for="blockName" class="form-label">Kvartāla nosaukums:</label>
                                                                                <input type="text" class="form-control" id="blockName" name="blockName" value="{{ block.name }}" required>
                                                                                <label for="blockCultivar" class="form-label">Kultivārs:</label>
                                                                                <select class="form-control" id="blockCultivar" name="blockCultivar" required>
                                                                                    <option value="1" {% if block.cultivar.id == 1 %} selected {% endif %}>Ābols</option>
                                                                                    <option value="2" {% if block.cultivar.id == 2 %} selected {% endif %}>Bumbiers</option>
                                                                                    <option value="3" {% if block.cultivar.id == 3 %} selected {% endif %}>Ķirsis</option>
                                                                                </select>
                                                                            </div>
                                                                            <div class="modal-footer">
                                                                                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Atcelt</button>
                                                                                <button type="submit" name="editBlock" class="btn btn-success">Saglabāt</button>
                                                                            </div>
                                                                        </form>
                                                                    </div>
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </div>
                                                    <div class="p-2">
                                                        <button type="button" class="btn btn-danger" data-bs-toggle="modal" data-bs-target="#deleteBlockModal{{ block.id }}">
                                                            Dzēst
                                                        </button>
                                                        <div id="deleteBlockModal{{ block.id }}" class="modal fade" tabindex="-1" aria-labelledby="deleteBlockModal{{ block.id }}" aria-hidden="true">
                                                            <div class="modal-dialog">
                                                                <div class="modal-content">
                                                                    <div class="modal-header">
                                                                        <h5 class="modal-title">Dzēst kvartālu</h5>
                                                                        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                                                                    </div>
                                                                    <div class="modal-body">
                                                                        Vai tiešām vēlaties dzēst kvartālu "{{ block.name }}"?
                                                                    </div>
                                                                    <div class="modal-footer">
                                                                        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Atcelt</button>
                                                                        <button type="submit" name="deleteBlock" form="delete{{block.id}}" class="btn btn-danger">Dzēst</button>
                                                                    </div>
                                                                </div>
                                                            </div>
                                                        </div>

                                                    </div>
                                                </div>
                                            </div>
                                            <form method="post" id="delete{{block.id}}">
                                                {% csrf_token %}
                                                <input type="hidden" name="block_id" value="{{ block.id }}">
                                            </form>
                                            {% endif %}
                                        {% endfor %}
                                    </div>
                                </div>
                                </div>
                                <div class="card mb-4" id="newBlockInputForm" hidden>
                                    <div class="card-header">
                                        Jauna kvartāla pievienošana
                                    </div>
                                    <div class="card-body">
                                        <form method="post">
                                            {% csrf_token %}
                                            <input type="hidden" name="garden_id" value="{{ currentGarden.id }}">
                                            <div class="mb-3">
                                                <label for="blockName" class="form-label">Kvartāla nosaukums:</label>
                                                <input type="text" class="form-control" id="blockName" name="blockName" required>
                                                <label for="blockCultivar" class="form-label">Kultivārs:</label>
                                                <select class="form-control" id="blockCultivar" name="blockCultivar" required>
                                                    <option value="1">Ābols</option>
                                                    <option value="2">Bumbiers</option>
                                                    <option value="3">Ķirsis</option>
                                                </select>
                                                <input type="hidden" name="blockCoordinates" id="blockCoordinates">
                                            </div>
                                            <button type="submit" name="addBlock" class="btn btn-primary">Pievienot</button>
                                        </form>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </main>
                <style>
                    #map {
                        height: 80vh;
                        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: [
            // 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([27.342739, 56.512716]),
                zoom: 15,
                maxZoom: 20
            })
        });

        var buttonsElement = document.getElementById('custom-buttons');

        var buttonsControl = new ol.control.Control({
        element: buttonsElement
        });

        map.addControl(buttonsControl);

        var GardenBorderStyle = new ol.style.Style({
            stroke: new ol.style.Stroke({
                color: 'blue',
                width: 5,
            }),
            fill: new ol.style.Fill({
                color: 'rgba(199, 166, 29, 0.2)'
            })
        });
        
        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' %}",
        ];
        

        function newStyle(Block, BlockCounter) {
                return new ol.style.Style({
                    stroke: new ol.style.Stroke({
                        color: 'blue',
                        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 25px sans-serif', // Adjust the font size here
                        offsetY: -25 // Adjust the offset as needed
                    }),
                });
            };

        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)'
                ];

        // add existing items from database
        currentGarden = jQuery.parseJSON('{{ currentGardenJSON|safe }}');
        var GardenBorders = currentGarden[0].fields.polygon.geometry.coordinates;

        var gardenBlocks = jQuery.parseJSON('{{ currentGardenBlocksJSON|safe }}');

        var coordinates = GardenBorders[0].map(function (coord) {
            return ol.proj.fromLonLat(coord);
        });
        var polygon = new ol.geom.Polygon([coordinates]);
        var feature = new ol.Feature(polygon);

        var vectorSource = new ol.source.Vector({
            features: [feature]
        });

        var vectorLayer = new ol.layer.Vector({
            source: vectorSource,
            style: GardenBorderStyle
        });

        map.addLayer(vectorLayer);

        map.getView().fit(polygon.getExtent(), map.getSize());

        var vectorSourceBlocks = new ol.source.Vector(
            {
                features: gardenBlocks.map(function (block, index) {
                    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);
                    feature.fields = block.fields;
                    feature.setStyle(newStyle(block, index));
                    return feature;
                })
            });

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

        map.addLayer(vectorLayerBlocks);

        var draw;
        var feature;
        var snap;

        function addNewBlock(){
            document.getElementById('DrawNewBlock').disabled = true;
            document.getElementById('EditOldBlocks').disabled = true;

            draw = new ol.interaction.Draw({
                source: vectorSourceBlocks,
                type: 'Polygon'
            });
            map.addInteraction(draw);

            snap = new ol.interaction.Snap({source: vectorSourceBlocks});
            map.addInteraction(snap);



            draw.on('drawend', function(e){
                feature = e.feature;
                var coordinates = feature.getGeometry().getCoordinates()[0].map(function (coord) {
                    return ol.proj.toLonLat(coord);
                });
                var polygon = new ol.geom.Polygon([coordinates]);
                var feature = new ol.Feature(polygon);
                feature.setStyle(newStyle({fields: {name: 'New Block'}}, gardenBlocks.length));
                vectorSourceBlocks.addFeature(feature);
                map.removeInteraction(draw);

                // geojson format
                var blockGeoJSON = new ol.format.GeoJSON().writeFeature(feature);
                // fix the coordinates of the block border
                var blockGeoJSON = JSON.parse(blockGeoJSON);
                var blockCoordinates = blockGeoJSON.geometry.coordinates[0];
                blockGeoJSON.geometry.coordinates[0] = blockCoordinates;

                document.getElementById('blockCoordinates').value = JSON.stringify(blockGeoJSON);

                // put the newBlockInputForm on the map
                var newBlockInputForm = document.getElementById('newBlockInputForm');
                newBlockInputForm.style.position = 'absolute';
                newBlockInputForm.style.top = '50%';
                newBlockInputForm.style.left = '50%';
                newBlockInputForm.style.transform = 'translate(-50%, -50%)';
                map.getViewport().appendChild(newBlockInputForm);
                newBlockInputForm.hidden = false;



            });
        }


        </script>
{% endblock %}