{% extends "base.html" %}

{% load static %}

{% block head %}
    <link rel="stylesheet" href="{% static 'css/leaflet.css' %}"/>
    <script src="{% static 'js/leaflet.js' %}"></script>
{% endblock %}

{% block title %}
    Добавить поле
{% endblock %}

{% block content %}
    <div class="row">
        <div class="col"></div>
        <div class="col form-group">
            <label for="fieldName">Название поля</label>
            <input id="fieldName" class="form-control">
        </div>
        <div class="col">
            <button id="saveField" class="btn btn-primary" style="margin-top: 32px;">Сохранить поле</button>
        </div>
        <div class="col"></div>
    </div>
    <div id="map" style="height: 80vh;"></div>
{% endblock %}

{% block foot %}
    <script>
        var mode = "field"; // Or "road"
        var currentField = [];
        var currentRoad = [];

        var map = L.map('map').setView([43.22, 76.85], 13);
        L.tileLayer('https://api.mapbox.com/styles/v1/kindyak/{id}/tiles/{z}/{x}/{y}?access_token={accessToken}', {
            attribution: 'Map data &copy; <a href="https://www.openstreetmap.org/">OpenStreetMap</a> contributors, <a href="https://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, Imagery © <a href="https://www.mapbox.com/">Mapbox</a>',
            maxZoom: 18,
            id: 'ckzh2v0mz00dv14tafevvqzgs',
            tileSize: 512,
            zoomOffset: -1,
            accessToken: 'pk.eyJ1Ijoia2luZHlhayIsImEiOiJja2F0cml2eTcwNDZhMnJvOXI4N2Y4MjRjIn0.f7FSJnib2jKKvtJe4ql-Bg'
        }).addTo(map);
        map.on('click', function (e) {
            var popLocation = e.latlng;
            if(mode === "field") {
                var marker = L.marker(popLocation).addTo(map);
                currentField.push([popLocation.lat, popLocation.lng]);
            } else if(mode === "road"){
                var circle = L.circle(popLocation, {
                    color: '#5e4b7f',
                    fillOpacity: 0.9,
                    radius: 200
                }).addTo(map);
                currentRoad.push([popLocation.lat, popLocation.lng]);
            }
        });

        $('#saveField').click(function () {
            if(mode === "field"){
                mode = "road";
                $('#saveField').html("Сохранить дорогу");
                alert("Теперь выберите дорогу");
                return
            }
            $.ajax(
                {
                    url: '/api/field/',
                    method: 'POST',
                    data: {
                        "name": $('#fieldName').val(),
                        "points_serialized": JSON.stringify(currentField),
                        "road_serialized": JSON.stringify(currentRoad),
                    },
                    beforeSend: function (request) {
                        request.setRequestHeader("X-CSRFToken", '{{ csrf_token }}');
                    },
                    success: function (result) {
                        if (result.status !== 200) {
                            alert("Что-то пошло не так :( Истекла сессия? Попробуйте обновить страницу: " + result.error);
                            return;
                        }
                        alert("Поле успешно создано");
                        location.reload();
                    },
                    error: function (result) {
                        alert("Возможно отсутствует соединение с интернетом. Если проблема повторяется, обратитесь к администратору системы");
                    }
                }
            );
        });
    </script>
{% endblock %}
