{% extends 'base_layout.html' %}

{% block content %}
    <main>
        <div class="container-fluid px-4">

            <h1 class="mt-4">
            <a type="button"class="btn btn-outline-dark"  href="/garden/edit" >
                                <i class="fa-solid fa-arrow-left"></i>
            </a>
            Pievienot dārzu</h1>
            <hr class="divider" />
                <div class="row">
                    <div class="form-group col-4">
                        <label for="garden_name">Nosaukums:</label>
                        <input type="text" class="form-control" id="garden_name" name="garden_name" required>
                    </div>
                    <div class="form-group col-4">
                        <label for="garden_address">Adrese:</label>
                        <input type="text" class="form-control" id="garden_address" name="garden_address" required>
                    </div>
                    <div class="mt-2">
                        <label for="garden_address">Robežas:</label>
                        <div id="border" class="border border-dark rounded ">
                            <div id="custom-button-div">
                                <div id="custom-buttons" class="mt-1 p-2">
                                    <button id="DrawGardenBorder" type="button" onclick="addInteraction()" class="btn btn-outline-dark">Pievienot dārza robežu</button>
                                    <button id="EditGardenBorder" type="button" onclick="editFeature()" class="btn btn-outline-dark">Rediģēt dārza robežu</button>
                                    <button id="DeleteGardenBorder" type="button" onclick="deleteFeature()" class="btn btn-outline-dark">Dzēst dārza robežu</button>
                                    <button id="AddGardenBlockBorder" type="button" onclick="AddBlockInteraction()" class="btn btn-outline-dark">Pievienot dārza kvartālu</button>
                                    <button id="EditGardenBlockBorders" type="button" onclick="editBlockFeature()" class="btn btn-outline-dark">Rediģēt dārza kvartālu</button>
                                    <button id="DeleteGardenBlockBorders" type="button" onclick="deleteBlockFeature()" class="btn btn-outline-dark">Dzēst dārza kvartālu</button>
                                </div>
                            </div>
                            <div id="map"></div>
                        </div>
                    </div>
                </div>
                <div class="mt-4">
                    <!-- Blank space for dead air -->
                </div>

                <button type="button" class="btn btn-lg btn-success mt-4 mb-3" id="save_button" style="position: fixed; bottom: 70px; right: 40px;">Saglabāt</button>
        </div>
    </main>
    <style>
        #map {
            height: 75vh;
            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}'
                }),
            }),
            // layer for the names of towns
            new ol.layer.Tile({
                source: new ol.source.XYZ({
                    url: 'https://server.arcgisonline.com/ArcGIS/rest/services/Reference/World_Boundaries_and_Places/MapServer/tile/{z}/{y}/{x}'
                }),
            }),
            ],
            view: new ol.View({
                center: ol.proj.fromLonLat([27.342739, 56.512716]),
                zoom: 15,
                maxZoom: 20
            })
        });

        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)'
            })
        });
        
        function newStyle(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: BlockCounter.toString(),
                        fill: new ol.style.Fill({
                            color: 'black'
                        }),
                        font: 'bold 40px 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 BlockSource = new ol.source.Vector();
        var BlockVector = new ol.layer.Vector({
            source: BlockSource});

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

        map.addLayer(GardenVector);
        map.addLayer(BlockVector);

        var draw;
        var feature;

        function addInteraction() {
            // check if the garden border is already drawn 
            if (GardenSource.getFeatures().length > 0) {
                alert("Dārza robeža jau ir pievienota!");
                return;
            }
            // disable the buttons ui buttons
            document.getElementById('DrawGardenBorder').disabled = true;
            document.getElementById('EditGardenBorder').disabled = true;
            document.getElementById('DeleteGardenBorder').disabled = true;
            document.getElementById('AddGardenBlockBorder').disabled = true;
            document.getElementById('EditGardenBlockBorders').disabled = true;
            document.getElementById('DeleteGardenBlockBorders').disabled = true;



            draw = new ol.interaction.Draw({
                source: GardenSource,
                type: 'Polygon',
            });
            map.addInteraction(draw);
            
            // show the cancel button
            document.getElementById('cancel_button').style.display = 'block';

            draw.on('drawstart', function (event) {
                GardenSource.clear();
                feature = event.feature;
            });

            draw.on('drawend', function () {
                map.removeInteraction(draw);

                // enable the buttons ui buttons
                document.getElementById('DrawGardenBorder').disabled = false;
                document.getElementById('EditGardenBorder').disabled = false;
                document.getElementById('DeleteGardenBorder').disabled = false;
                document.getElementById('AddGardenBlockBorder').disabled = false;
                document.getElementById('EditGardenBlockBorders').disabled = false;
                document.getElementById('DeleteGardenBlockBorders').disabled = false;

                // hide the cancel button
                document.getElementById('cancel_button').style.display = 'none';
            });
        }

        function editFeature() {
            if (GardenSource.getFeatures().length == 0) {
                alert("Dārza robeža vēl nav pievienota!");
                return;
            }
            // disable the buttons ui buttons
            document.getElementById('DrawGardenBorder').disabled = true;
            document.getElementById('EditGardenBorder').disabled = true;
            document.getElementById('DeleteGardenBorder').disabled = true;
            document.getElementById('AddGardenBlockBorder').disabled = true;
            document.getElementById('EditGardenBlockBorders').disabled = true;
            document.getElementById('DeleteGardenBlockBorders').disabled = true;


            var modify = new ol.interaction.Modify({
                source: GardenSource
            });
            map.addInteraction(modify);

            // show the cancel button
            document.getElementById('cancel_button').style.display = 'block';


            modify.on('modifyend', function () {
                map.removeInteraction(modify);

                // enable the buttons ui buttons
                document.getElementById('DrawGardenBorder').disabled = false;
                document.getElementById('EditGardenBorder').disabled = false;
                document.getElementById('DeleteGardenBorder').disabled = false;
                document.getElementById('AddGardenBlockBorder').disabled = false;
                document.getElementById('EditGardenBlockBorders').disabled = false;
                document.getElementById('DeleteGardenBlockBorders').disabled = false;

                // hide the cancel button
                document.getElementById('cancel_button').style.display = 'none';
            });
        }

        function deleteFeature() {
            GardenSource.clear();
            BlockSource.clear();
        }
        function removeBlockLegend() {
            if (BlockSource.getFeatures().length === 0) {
                element = document.getElementById('sidebar');
                element.style.display = 'none';
            }
            else {
                element = document.getElementById('sidebar');
                element.style.display = 'block';
            }
        }

        var drawBlock;
        let snap;
        let snapBlock;
        function AddBlockInteraction() {
            
            if (GardenSource.getFeatures().length === 0) {
                alert("Dārza robeža nav vēl pievienota!");
                return;
            }

            // disable the buttons ui buttons
            document.getElementById('DrawGardenBorder').disabled = true;
            document.getElementById('EditGardenBorder').disabled = true;
            document.getElementById('DeleteGardenBorder').disabled = true;
            document.getElementById('AddGardenBlockBorder').disabled = true;
            document.getElementById('EditGardenBlockBorders').disabled = true;
            document.getElementById('DeleteGardenBlockBorders').disabled = true;


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


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

            snapBlock = new ol.interaction.Snap({ source: BlockSource });
            map.addInteraction(snapBlock);

            // show the cancel button
            document.getElementById('cancel_button').style.display = 'block';

            drawBlock.on('drawend', function (event) {
                // check if the block is inside the garden
                var gardenFeatures = GardenSource.getFeatures();
                var gardenFeature = gardenFeatures[0];
                var gardenGeometry = gardenFeature.getGeometry();
                var gardenCoordinates = gardenGeometry.getCoordinates();
                var blockCoordinates = event.feature.getGeometry().getCoordinates();
                var blockInsideGarden = true;
                blockCoordinates[0].forEach(function (coordinate) {
                    if (!ol.extent.containsCoordinate(gardenGeometry.getExtent(), coordinate)) {
                        blockInsideGarden = false;
                    }
                });
                if (!blockInsideGarden) {
                    alert("Dārza kvartāls nevar būt ārpus dārza robežām!");
                    setTimeout(function() {
                        BlockSource.removeFeature(event.feature);
                    }, 20);
                }

                map.removeInteraction(drawBlock);
                map.removeInteraction(snap);

                // enable the buttons ui buttons
                document.getElementById('DrawGardenBorder').disabled = false;
                document.getElementById('EditGardenBorder').disabled = false;
                document.getElementById('DeleteGardenBorder').disabled = false;
                document.getElementById('AddGardenBlockBorder').disabled = false;
                document.getElementById('EditGardenBlockBorders').disabled = false;
                document.getElementById('DeleteGardenBlockBorders').disabled = false;

                // hide the cancel button
                document.getElementById('cancel_button').style.display = 'none';

            });
        }
        var modify;

        function editBlockFeature() {
            if (BlockSource.getFeatures().length === 0) {
                alert("Dārza kvartāli nav vēl pievienoti!");
                return;
            }

            var modify = new ol.interaction.Modify({
                source: BlockSource
            });
            map.addInteraction(modify);

            // disable the buttons ui buttons
            document.getElementById('DrawGardenBorder').disabled = true;
            document.getElementById('EditGardenBorder').disabled = true;
            document.getElementById('DeleteGardenBorder').disabled = true;
            document.getElementById('AddGardenBlockBorder').disabled = true;
            document.getElementById('EditGardenBlockBorders').disabled = true;
            document.getElementById('DeleteGardenBlockBorders').disabled = true;

            // show the cancel button
            document.getElementById('cancel_button').style.display = 'block';


            modify.on('modifyend', function () {
                map.removeInteraction(modify);
                // enable the buttons ui buttons
                document.getElementById('DrawGardenBorder').disabled = false;
                document.getElementById('EditGardenBorder').disabled = false;
                document.getElementById('DeleteGardenBorder').disabled = false;
                document.getElementById('AddGardenBlockBorder').disabled = false;
                document.getElementById('EditGardenBlockBorders').disabled = false;
                document.getElementById('DeleteGardenBlockBorders').disabled = false;

                // hide the cancel button
                document.getElementById('cancel_button').style.display = 'none';
            });


        }

        var select;
        function deleteBlockFeature() {
            if (BlockSource.getFeatures().length === 0) {
                alert("Dārza kvartāli nav vēl pievienoti!");
                return;
            }

            // disable the buttons ui buttons
            document.getElementById('DrawGardenBorder').disabled = true;
            document.getElementById('EditGardenBorder').disabled = true;
            document.getElementById('DeleteGardenBorder').disabled = true;
            document.getElementById('AddGardenBlockBorder').disabled = true;
            document.getElementById('EditGardenBlockBorders').disabled = true;
            document.getElementById('DeleteGardenBlockBorders').disabled = true;
            // delete the block feature that is clicked on
            var select = new ol.interaction.Select({
                source: BlockSource
            });
            map.addInteraction(select);

            // show the cancel button
            document.getElementById('cancel_button').style.display = 'block';

            select.on('select', function (event) {
                if (Array.isArray(event.selected) && event.selected.length > 0) {
                    BlockSource.removeFeature(event.selected[0]);
                }
            
                // enable the buttons ui buttons
                document.getElementById('DrawGardenBorder').disabled = false;
                document.getElementById('EditGardenBorder').disabled = false;
                document.getElementById('DeleteGardenBorder').disabled = false;
                document.getElementById('AddGardenBlockBorder').disabled = false;
                document.getElementById('EditGardenBlockBorders').disabled = false;
                document.getElementById('DeleteGardenBlockBorders').disabled = false;
            
                // hide the cancel button
                document.getElementById('cancel_button').style.display = 'none';

                map.removeInteraction(select);
            });


        }
        var cultivares = jQuery.parseJSON('{{ cultivares|escapejs }}');

        // the sidebar is bootstrap background white rounded corners header - Kvartāli, top right corner of the map
        var sidebar = document.createElement('div');
        sidebar.id = 'sidebar';
        sidebar.className = 'bg-white border border-dark rounded p-3 overflow-auto';
        sidebar.style.position = 'absolute';
        sidebar.style.top = '10px';
        sidebar.style.right = '10px';
        sidebar.style.maxHeight = 'calc(65vh - 20px)';

        sidebar.innerHTML = '<h4>Kvartāli</h4>';
        sidebar.innerHTML += '<hr>';
        // sidebar hidden by default
        sidebar.style.display = 'none';
        map.addControl(new ol.control.Control({
            element: sidebar
        }));

        // make a form for each block that is drawn in the map sidebar
        function addBlockForm(block) {
            blockCounter = BlockSource.getFeatures().length;
            var form = document.createElement('form');
            form.id = 'block_form_' + blockCounter;
            form.className = 'mt-3 border border-dark rounded p-3';
            // number of the block in the map
            form.innerHTML = '<h5>Kvartāls ' + blockCounter + '</h5>';
            form.innerHTML += '<hr>';
            form.innerHTML += '<div class="form-group">' +
                '<label class="p-1" for="block_name_'+ blockCounter + '">Nosaukums:</label>' +
                '<input type="text" class="form-control" id="block_name_' + blockCounter + '" name="block_name_'+ blockCounter +'" " required style="display: inline-block; width: auto;">' +
                '</div>';
            form.innerHTML += '<div class="form-group">' +
                '<label for="cultivar_block_'+ blockCounter +'">Kultivārs:</label>';
            for (var i = 0; i < cultivares.length; i++) {
                form.innerHTML += `<div class="form-check form-check-inline"> 
                    <input class="form-check-input" type="radio" name="cultivar_${blockCounter}" value="${cultivares[i].pk}">
                    <label class="form-check-label">${cultivares[i].fields.title}</label>
                </div>`;
            }
            form.innerHTML += '</div>';
            sidebar.appendChild(form);
            blockCounter++;
        }

        // when a block is drawn in the map, add a form for the block in the sidebar
        BlockSource.on('addfeature', function(event) {
            event.feature.setStyle(newStyle(BlockSource.getFeatures().length));
            addBlockForm(event.feature);
            removeBlockLegend();
        });
        BlockSource.on('removefeature', function(event) {
            var features = BlockSource.getFeatures();
            if (features.length === 0) {
                // remove the forms from the sidebar
                var forms = document.getElementById('sidebar').getElementsByTagName('form');
                for (var i = 0; i < forms.length; i++) {
                    forms[i].remove();
                }
            }
            for (var i = 0; i < features.length; i++) {
                features[i].setStyle(newStyle(i + 1));
            }
            var form = document.getElementById('block_form_' + features.length);
            form.remove();
            // get all the forms and update them with the correct number
            var forms = document.getElementById('sidebar').getElementsByTagName('form');
            for (var i = 0; i < forms.length; i++) {
                forms[i].getElementsByTagName('h5')[0].innerHTML = 'Kvartāls ' + (i + 1);
                forms[i].id = 'block_form_' + (i + 1);
                forms[i].getElementsByClassName('form-control')[0].id = 'block_name_' + (i + 1);
                forms[i].getElementsByClassName('form-control')[0].name = 'block_name_' + (i + 1);
                forms[i].getElementsByClassName('form-check-input')[0].id = 'cultivar_block_' + (i + 1);
                forms[i].getElementsByClassName('form-check-input')[0].name = 'cultivar_' + (i + 1);
                forms[i].getElementsByClassName('form-check-label')[0].htmlFor = 'cultivar_block_' + (i + 1);
            }
            removeBlockLegend();
        });

        // make a form with all the data given by the user on the press of the save button
        button = document.getElementById('save_button');
        button.onclick = function() {
            gardenName = document.getElementById('garden_name').value;
            gardenAddress = document.getElementById('garden_address').value;
            if (GardenSource.getFeatures().length === 0) {
                alert("Dārza robeža nav vēl uzzīmēta!");
                return;
            }
            if (BlockSource.getFeatures().length === 0) {
                alert("Dārza kvartāli nav vēl uzzīmēti!");
                return;
            }
            if (gardenName === '' || gardenAddress === '') {
                alert("Dārza nosaukums un adrese nav pievienotas!");
                return;
            }
            gardensSource = GardenSource.getFeatures();
            gardenBorder = gardensSource[0];
            gardenBorderGeoJSON = new ol.format.GeoJSON().writeFeature(gardenBorder);
            // fix the coordinates of the garden border
            var gardenBorderGeoJSON = JSON.parse(gardenBorderGeoJSON);
            var gardenBorderCoordinates = gardenBorderGeoJSON.geometry.coordinates[0];
            for (var i = 0; i < gardenBorderCoordinates.length; i++) {
                var coordinate = gardenBorderCoordinates[i];
                gardenBorderCoordinates[i] = ol.proj.transform(coordinate, 'EPSG:3857', 'EPSG:4326');
            }
            gardenBorderGeoJSON.geometry.coordinates[0] = gardenBorderCoordinates;
            gardenBorderGeoJSON = JSON.stringify(gardenBorderGeoJSON);

            blocksSource = BlockSource.getFeatures();

            var blocks = [];
            for (var i = 0; i < blocksSource.length; i++) {
                var block = blocksSource[i];
                var blockGeoJSON = new ol.format.GeoJSON().writeFeature(block);
                // fix the coordinates of the block border
                var blockGeoJSON = JSON.parse(blockGeoJSON);
                var blockCoordinates = blockGeoJSON.geometry.coordinates[0];
                for (var j = 0; j < blockCoordinates.length; j++) {
                    var coordinate = blockCoordinates[j];
                    blockCoordinates[j] = ol.proj.transform(coordinate, 'EPSG:3857', 'EPSG:4326');
                }
                blockGeoJSON.geometry.coordinates[0] = blockCoordinates;
                blockGeoJSON = JSON.stringify(blockGeoJSON);
                
                var blockName = document.getElementsByName('block_name_' + (i + 1))[0].value;

                var cultivar = document.querySelector('input[name="cultivar_' + (i + 1) + '"]:checked');

                if (blockName === '') {
                    alert("Kvartāla - "+ (i+1) + " nosaukums nav pievienots!");
                    return;
                }
                if (cultivar === null) {
                    alert("Kvartāla - "+ (i+1) + " kultivārs nav pievienots!");
                    return;
                }
                blocks.push({
                    'blockGeoJSON': blockGeoJSON,
                    'block_name': blockName,
                    'cultivar': cultivar.value
                });
            }
            form = document.createElement('form');
            form.method = 'POST';
            form.action = "{% url 'create_garden' %}";

            input = document.createElement('input');
            input.type = 'hidden';
            input.name = 'garden_name';
            input.value = gardenName;
            form.appendChild(input);

            input = document.createElement('input');
            input.type = 'hidden';
            input.name = 'garden_address';
            input.value = gardenAddress;
            form.appendChild(input);

            input = document.createElement('input');
            input.type = 'hidden';
            input.name = 'garden_border';
            input.value = gardenBorderGeoJSON;
            form.appendChild(input);

            input = document.createElement('input');
            input.type = 'hidden';
            input.name = 'blocks';
            input.value = JSON.stringify(blocks);
            form.appendChild(input);

            // Add CSRF token
            var csrfToken = document.createElement('input');
            csrfToken.type = 'hidden';
            csrfToken.name = 'csrfmiddlewaretoken';
            csrfToken.value = '{{ csrf_token }}';
            form.appendChild(csrfToken);

            document.body.appendChild(form);
            form.submit();

            
        }

        // cancel button to cancel an interaction
        var cancelButton = document.createElement('button');
        cancelButton.id = 'cancel_button';
        cancelButton.className = 'btn btn-danger mt-3';
        cancelButton.innerHTML = 'Atcelt';
        cancelButton.onclick = function() {
            if (draw !== undefined) {
                map.removeInteraction(draw);
            }
            if (modify !== undefined) {
                map.removeInteraction(modify);
            }
            if (drawBlock !== undefined) {
                map.removeInteraction(drawBlock);
            }
            if (snap !== undefined) {
                map.removeInteraction(snap);
            }
            if (snapBlock !== undefined) {
                map.removeInteraction(snapBlock);
            }
            if (select !== undefined) {
                map.removeInteraction(select);
            }
            // enable the buttons ui buttons
            document.getElementById('DrawGardenBorder').disabled = false;
            document.getElementById('EditGardenBorder').disabled = false;
            document.getElementById('DeleteGardenBorder').disabled = false;
            document.getElementById('AddGardenBlockBorder').disabled = false;
            document.getElementById('EditGardenBlockBorders').disabled = false;
            document.getElementById('DeleteGardenBlockBorders').disabled = false;

            // hide the cancel button
            document.getElementById('cancel_button').style.display = 'none';
        };
        // the button should show on the left corner of the map
        cancelButton.style.position = 'absolute';
        cancelButton.style.top = '0px';
        cancelButton.style.left = '40px';
        // it only appears if the user is drawing or editing a feature
        cancelButton.style.display = 'none';
        map.addControl(new ol.control.Control({
            element: cancelButton
        }));


    </script>

{% endblock %}