{% extends 'player_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>
{% endblock %}

{% block player_app_content %}
<div class="row">
    <div class="col-xs-0 col-md-1"></div>

    <div class="col-xs-12 col-md-7">
        <h2>Bunnies</h2>
        <div class="table">
            <table class="table">
                <thead>
                    <tr>
                        <th scope="col">Player Name</th>
                        <th scope="col">Times Caught</th>
                        <th scope="col">Last location</th>
                        <th scope="col"></th>
                    </tr>
                </thead>
                <tbody>
                    {% set player = current_user.player_in(game) %}
                    {% for bunny in game.bunnies() %}
                    <tr>
                        <td>{{ bunny.user.name }}</td>
                        <td><span
                                style="color:green;">{{ bunny.player_caught_by_players | selectattr('catching_player', '==', player) | selectattr('review.name', '==', 'accepted') |list|length}}</span>
                            /
                            <span
                                style="color:red;">{{ bunny.player_caught_by_players | selectattr('catching_player', '==', player) | selectattr('review.name', '==', 'denied') |list|length}}</span>
                            /
                            <span
                                style="color:gray;">{{ bunny.player_caught_by_players | selectattr('catching_player', '==', player) | selectattr('review.name', '==', 'none') |list|length}}</span>
                        </td>
                        <td>
                            <p id='last_location_{{ bunny.user.name }}'>
                                {% with location = bunny.last_location(offset=hunter_delay) %}
                                {% if location %}{{ moment(location.timestamp).fromNow()}}
                                {% else %}
                                {{ location }}
                                {% endif %}
                                {% endwith %}
                            </p>
                        </td>
                        <td>
                            <a
                                href="{{ url_for('main.catch_bunny', game_name=game.name, bunny_name=bunny.user.name) }}">
                                <button class="btn btn-success btn-sm">Catch</button>
                            </a>
                        </td>
                    </tr>
                    {% endfor %}
                </tbody>
            </table>
            <span style="font-size: smaller;">
                (<span style="color:green;">Accepted</span>/<span style="color:red;">Denied</span>/<span
                    style="color:gray;">Not
                    reviewed</span>)
            </span>
        </div>
    </div>
    <div class="col-xs-12 col-md-3">
        {% include '_game_player_info.html' %}
    </div>
</div>

<div class="row">
    <div class="col-xs-1 col-md-1"></div>
    <div id="map" style=" height: 500px; border-radius: 10px; " class="col-xs-10 col-md-10"></div>
    <div class="col-xs-1 col-md-1"></div>
</div>

{% 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 bunnieMarkers = []
    var bunnies = JSON.parse(
        '{{ json.dumps(game.last_locations(game.bunnies(), offset=hunter_delay), cls=location_encoder)|safe }}')
    updateBunnieMarkers()
    
    if (bunnieMarkers.length > 1) {
        map.fitBounds(bunnieMarkers.map(m => m.getLatLng()));
    } else if (bunnieMarkers.length == 1){
        map.setView(bunnieMarkers[0].getLatLng(), 10);
    }

    function updateBunnieMarkers(){
        if(bunnieMarkers != undefined){
            bunnieMarkers.forEach(function(marker){
                marker.remove()
            });
        }
        bunnieMarkers = []
        for (var i = 0; i < bunnies.length; i++) {
            bunnieMarkers.push(addPlayerMarker(map, bunnies[i], greenPlayerIcon))
            // Update table lastlocation column
            $('#last_location_' + bunnies[i].username)[0].innerHTML = toMomentLocal(bunnies[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',
            bunnies,
            handleResponse
            )
        getPosition(updateMyLocation)
    }, 30 * 1000);

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