{% extends "base.html" %}
{% import 'bootstrap/wtf.html' as wtf %}

{% block head %}
{{ super() }}
<link rel="stylesheet" href="{{ url_for('static', filename='assets/leaflet/leaflet.css') }}" />
<script src="{{ url_for('static', filename='assets/leaflet/leaflet.js') }}"></script>
{% endblock %}

{% block app_content %}

{% if not objective.hash %}
<h1>Add Objective</h1>
{% elif objective.name == '' %}
<h1>Objective</h1>
{% else %}
<h1>Objective: {{ objective.name }}</h1>
{% endif %}

<hr>
<div class="row">
    <div class="col-md-4 col-sm-6 col-xs-8">
        {% if owner %}
            <div class="row">
                <form action="" method="post" class="form" role="form">
                    {{ form.hidden_tag() }}
                    {{ wtf.form_field(form.objective_name, value=objective.name, class='form-control') }}
                    {{ wtf.form_field(form.latitude, class='form-control', type='number', value=objective.latitude, min='-90', max='90', step='0.00001') }}
                    {{ wtf.form_field(form.longitude, class='form-control', type='number', value=objective.longitude, min='-180', max='181', step='0.00001') }}
                    {% if objective.hash %}
                    <div class="form-group">
                        <label for="hash">Hash</label>
                        <p>{{ objective.hash }}</p>
                    </div>
                    {% endif %}
                    {{ wtf.form_field(form.submit, class='btn btn-primary') }}
                </form>
                {% if objective.hash %}
                <a href="{{ url_for('main.delete_objective', objective_hash = objective.hash) }}">
                    <button class="btn btn-danger">Delete</button></a>
                {% endif %}
            </div>
            {% if objective.hash %}
            <div class="row">
                <a href="{{ url_for('main.objective', objective_hash=objective.hash) }}">
                    <img src="{{ url_for('main.objective_qrcode', objective_hash=objective.hash) }}" alt="qr_code_failed", width="100%">
                </a>
            </div>
            {% endif %}
        {% else %}
            <h2>latitude: {{ objective.latitude }}</h2>
            <h2>longitude: {{ objective.longitude }}</h2>
        {% endif %}
    </div>
    <div id="map" style=" height: 600px; border-radius: 10px; " class="col-md-6 col-xs-12"></div>
</div>
<hr>

{% if owner and objective.objective_found_by %}

<div class="row">
    <h2>Found by:</h2>
    <div class="table-responsive">
        <table class="table">
            <thead>
                <tr>
                    <th scope="col">Player name</th>
                    <th scope="col">Time</th>
                </tr>
            </thead>
            <tbody>
                {% for ofbp in objective.objective_found_by %}
                <tr>
                    <td><a href="url_for('main.game_player', game_name = game.name, username = ofbp.game_player.user.name)">{{ ofbp.game_player.user.name }}</a></td>
                    <td>{{ moment(ofbp.timestamp).fromNow() }}</td>
                </tr>
                {% endfor %}
            </tbody>
        </table>
    </div>
</div>
{% endif %}


{% endblock %}

{% block scripts %}
{{ super() }}
<script src="{{ url_for('static', filename='assets/leaflet/utils.js') }}"></script>
<script type="text/javascript", crossorigin="anonymous">
    // Leaflet Map
    map = getMap()

    var otherObjectiveMarkers = []
    
    var otherObjectives = JSON.parse('{{ json.dumps(game.objectives, cls=objective_encoder)|safe }}')

    for (var i = 0; i < otherObjectives.length; i++){
        objective = otherObjectives[i]
        if(objective.hash == '{{ objective.hash }}'){continue;}
        
        otherObjectiveMarkers.push(addObjectiveMarker(map, objective, greenIcon))
    }

    if ('{{ owner }}' == 'True'){
        var objectiveMarker = L.marker([
        $("#latitude")[0].value,
        $("#longitude")[0].value
        ], {
        draggable: true
        })
    } else {
        var objectiveMarker = L.marker([
        '{{ objective.latitude }}',
        '{{ objective.longitude }}'
        ])
    }
    '{% if objective.hash %}'
    objectiveMarker.bindTooltip(`<b>{{ objective.name }}</b>`).openPopup();
    '{% else %}'
    objectiveMarker.bindTooltip('New Objective').openPopup();
    '{% endif %}'
    objectiveMarker.addTo(map);

    if (otherObjectiveMarkers.length + 1 > 0) {
        map.fitBounds(otherObjectiveMarkers.concat([objectiveMarker]).map(m => m.getLatLng()));
    } else{
        map.setView(objectiveMarker.getLatLng(), 10);
    }

    var round = function(value){
        return (Math.round(value * 100000) / 100000).toFixed(5);
    };

    objectiveMarker.on('dragend', function(e){
        var newPosition = e.target.getLatLng();
        $("#latitude")[0].value = round(newPosition.lat);
        $("#longitude")[0].value = round(newPosition.lng);
    })

    $("#latitude").change(function(e) {
        var newLatLng = new L.LatLng(e.target.value, objectiveMarker._latlng.lng);
        objectiveMarker.setLatLng(newLatLng);
    });

    $("#longitude").change(function(e) {
        var newLatLng = new L.LatLng(objectiveMarker._latlng.lat, e.target.value);
        objectiveMarker.setLatLng(newLatLng);
    });


</script>
{% endblock %}