{% extends 'base.html' %}

{% 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>
<script src="{{ url_for('static', filename='assets/geolocation_utils.js') }}"></script>
{% endblock %}

{% block app_content %}
<meta name="csrf-token" content="{{ csrf_token() }}">
<h1>{{ game.name }} Dashboard</h1>
<a href="{{ url_for('game.change_game_settings', game_name=game.name) }}">
    <button class="btn btn-primary">Change Game Settings</button>
</a>
{% if game.unreviewed_bunny_photos() %}
<a href="{{ url_for('main.review_caught_bunny_photos', game_name=game.name) }}">
    <button class="btn btn-primary">Review Bunny Photos</button>
</a>
{% endif %}
<br><br>
<p><b>Start Time: </b>{% if game.start_time %}{{ moment(game.start_time).format('DD-MM-YYYY, HH:mm') }}{% else %}None{% endif %}</p>
<p><b>End Time: </b>{% if game.end_time %}{{ moment(game.end_time).format('DD-MM-YYYY, HH:mm') }}{% else %}None{% endif %}</p>
<p><b>State: </b>{{ game.get_state().name.title() }}</p>
<h2>Players:</h2>
<p><a href="{{ url_for('main.add_player', game_name = game.name) }}">Add player</a></p>
<div class="table-responsive">
    <table class="table">
        <thead>
            <tr>
                <th scope="col">Player Name</th>
                <th scope="col">Role</th>
                <th scope="col">Objectives found</th>
                <th scope="col">Bunnies Caught</th>
                <th scope="col">Been Caught</th>
                <th scope="col">Last location</th>
                <th scope="col"></th>
            </tr>
        </thead>
        <tbody>
            {% for player in game.players %}
            <tr>
                <td><a href="{{ url_for('main.game_player', game_name = game.name, username = player.user.name) }}">{{ player.user.name }}</a></td>
                <td>{{ player.role.name }}</td>
                <td>{{ player.found_objectives | list | length }}</td>
                <td>{{ player.accepted_caught_players() | list | length }}</td>
                <td>{{ player.accepted_caught_by_players() | list | length }}</td>
                <td>
                    <p id='last_location_{{ player.user.name }}'>
                        {% with location = player.last_location() %}
                        {% if location %}{{ moment(location.timestamp).fromNow()}}
                        {% else %}
                        {{ location }}
                        {% endif %}
                        {% endwith %}
                    </p>
                </td>
                <td><a href="{{ url_for('main.remove_player', game_name=game.name, username=player.user.name) }}">
                    <button class="btn btn-danger">Delete</button></a>
                </td>
            </tr>
            {% endfor %}
        </tbody>
    </table>
</div>
<h2>Objectives:</h2>
<p><a href="{{ url_for('main.add_objective', game_name = game.name) }}">Add new objective</a></p>
{% if game.objectives %}
<div class="table-responsive">
    <table class="table">
        <thead>
            <tr>
                <th scope="col">Objective Name</th>
                <th scope="col">Latitude</th>
                <th scope="col">Longitude</th>
                <th scope="col">Times found</th>
                <th scope="col">Hash</th>
                <th scope="col"></th>
            </tr>
        </thead>
        <tbody>
            {% for objective in game.objectives %}
            <tr>
                <td>{{ objective.name }}</td>
                <td>{{ objective.latitude }}</td>
                <td>{{ objective.longitude }}</td>
                <td>{{ objective.found_by|length }}</td>
                <td><a href="{{ url_for('main.objective', objective_hash = objective.hash) }}">{{ objective.hash }}</a></td>
                <td><a href="{{ url_for('main.delete_objective', objective_hash = objective.hash) }}">
                    <button class="btn btn-danger">Delete</button></a>
                </td>
            </tr>
            {% endfor %}
        </tbody>
    </table>
</div>
<div id="map" style=" height: 500px; border-radius: 10px; " class="col-md-6 col-xs-12"></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
    var map = getMap()
    var objectiveMarkers = []
    var playerMarkers = []
    
    var objectives = JSON.parse('{{ json.dumps(game.objectives, cls=objective_encoder)|safe }}')

    for (var i = 0; i < objectives.length; i++){
        marker = addObjectiveMarker(map, objectives[i])
        marker.on("click", function (e) {
            var caller = e.target || e.srcElement;
            window.location = "{{ url_for('main.objective', objective_hash = 'ObjectiveHash') }}".replace('ObjectiveHash', caller.hash);
        });
        objectiveMarkers.push(marker)
    }

    var players = JSON.parse('{{ json.dumps(game.last_player_locations(), cls=location_encoder)|safe }}')
    updatePlayerMarkers()

    if (objectiveMarkers.length + playerMarkers.length > 1) {
        map.fitBounds(objectiveMarkers.concat(playerMarkers).map(m => m.getLatLng()));
    }

    getPosition(updateMyLocation);

    function updatePlayerMarkers(){
        if(playerMarkers != undefined){
            playerMarkers.forEach(function(marker){
                marker.remove()
            });
        }
        playerMarkers = []
        for (var i = 0; i < players.length; i++) {
            marker = addPlayerMarker(map, players[i], goldPlayerIcon)
            marker.on("click", function (e) {
                var caller = e.target || e.srcElement;
                window.location = "{{ url_for('main.game_player', game_name = game.name, username = 'Username') }}".replace('Username', caller.username);
            });
            playerMarkers.push(marker);
            // Update table lastlocation column
            $('#last_location_' + players[i].username)[0].innerHTML = toMomentLocal(players[i].timestamp_utc).fromNow();
        }
    }

    // Poll Locations
    usernames = JSON.parse('{{ json.dumps(game.usernames())|safe }}').filter(name => name != '{{ current_user.name }}')
    setInterval(function() {
        pollLocations(
            "{{ url_for('main.poll_locations', game_name=game.name) }}",
            usernames,
            'accumulative',
            players,
            handleResponse
            )
        getPosition(updateMyLocation)
    }, 30 * 1000);

    function handleResponse(data){
        data.forEach(function (location) {
            player = players.filter(function (player) {
                return player.username == location.username;
            })[0];
            if (new Date(location.timestamp_utc) > new Date(player.timestamp_utc)){
                //lastLocation = player[player.length-1] Not necesary because there is just one of each player
                if (player.latitude == location.latitude && player.longitude == location.longitude){
                    player.timestamp_utc = location.timestamp_utc
                } else{
                    players = players.filter(p => p !== player)
                    players.push(location)
                }
            }
        });
        updatePlayerMarkers()
    }

</script>
{% endblock %}