{% extends "base.html" %}
{% load has_group %}

{% block content %}
<div class="row">
    <div class="col-md-5">
        <div class="card">
            <div class="card-header">
                <h4 class="mb-0">{{ event.name }}</h4>
                <h5 class="card-category mb-0">{{ event.event_type.name }}</h5>
            </div>
            <div class="card-body">
                <div class="row mb-4">
                    <div class="col-6">
                        {% if event.date_begin.date == event.date_end.date %}
                            <p>The <a href="#">{{ event.date_begin | date:"d-m-Y" }}</a> from <a href="#">{{ event.date_begin | date:"G:i" }}</a> to <a href="#">{{ event.date_end | date:"G:i" }}</a>
                        {% else %}
                            <p>From <a href="#">{{ event.date_begin | date:"d-m-Y, G:i" }}</a><br />
                                To <a href="#">{{ event.date_end | date:"d-m-Y, G:i" }}</a>
                        {% endif %}

                        {% if event.number_of_week_from_today > 0 %}
                            <br />In <span class="text-{% if event.number_of_week_from_today > 12 %}success{% elif event.number_of_week_from_today > 9 %}info{% elif event.number_of_week_from_today > 6 %}warning{% else %}danger{% endif %}"><b>{{event.number_of_week_from_today}} week(s)</b></span>
                        {% endif %}
                    </div>
                    <div class="col-6 text-right">
                        <p>
                            {{ event.place.address }}<br \>
                            {{ event.place.postal }} {{ event.place.city }}<br \>
                            {{ event.place.country }}
                        </p>
                        {% if event.place.nbkm %}
                            <p>{{ event.place.nbkm }}km ({{ event.place.timing }}min)</p>
                        {% endif %}
                    </div>
                </div>


                <h5 class="title mb-1">Participants </h5>
                {% if request.user|has_group:"trainer" %}
                    <input type="text" name="gymnast" placeholder="Add gymnast…" class="form-control mb-2" id="gymnast">
                {% endif %}
                <table class="table tablesorte table-condensed table-striped" id="gymmanst_participant">
                    {% for gymnast in gymnast_list %}
                        <tr>
                            {% if request.user|has_group:"trainer" %}
                                <td class="text-left">
                                    <span class="tim-icons icon-simple-remove text-warning minusButton" data-gymnastid="{{ gymnast.0.id }}"></span>
                                </td>
                            {% endif %}
                            <td class="text-left col-9">
                                <a href="{% url 'gymnast_details_tab' gymnast.0.id 'event' %}">{{ gymnast.0 }}</a>
                            </td>
                        </tr>
                    {% endfor %}
                </table>
                {% if not gymnast_list %}
                    <p id="no_participant">No partifcipant for now.</p>
                {% endif %}
            </div>
        </div>
    </div>
    <div class="col-md-7">
        <div class="card">
            <div class="card-body">
                <div id='map' style='width: 705px; height: 350px;'></div>
            </div>
        </div>
        <div class="card">
            <div class="card-body">
                {% if event.informations %}
                    {{ event.to_markdown | safe }}
                {% else %}
                    No informations for this event.
                {% endif %}
                {% if request.user|has_group:"trainer" %}
                    <p>
                        <a href="{% url 'event_update' event.id %}">
                            <button type="submit" value="add" class="btn btn-icon btn-warning ">
                                <i class="tim-icons icon-pencil"></i>
                            </button>
                        </a>
                    </p>
                {% endif %}
            </div>
        </div>
    </div>
</div>
{% endblock %}

{% block footerscript %}
<script type="text/javascript">

    const csrf_token = "{{ csrf_token|escapejs }}";
    const gymnast_lookup = "{% url 'gymnast_lookup' %}";

    L.mapbox.accessToken = 'pk.eyJ1IjoiZ3RydWxsZW0iLCJhIjoiY2p2Mm5wa3YzMDE1eTQ0cDJlOGdsZno4ZCJ9.zrOWNO0F4VTd9_h-LSSkzw';

    var geocoder = L.mapbox.geocoder('mapbox.places');
    geocoder.query('{{ event.place.address }} {{ event.place.postal }} {{ event.place.city }}', showMap);
    var map = L.mapbox.map('map').addLayer(L.mapbox.styleLayer('mapbox://styles/mapbox/streets-v11'));

    function showMap(err, data) {
        if (data.lbounds) {
            map.fitBounds(data.lbounds);
        } else if (data.latlng) {
            map.setView([data.latlng[0], data.latlng[1]], 10);
            L.marker([data.latlng[0], data.latlng[1]]).addTo(map);
        }
    }

    $(function(){
        $('[data-sort="table"]').tablesorter({
            headers: {
                0: { sorter: false },
            },
            sortList: [[1,0]]
        })

        function insert_selected_gymnast(gymnast_id, gymnast_name)
        {
            $('#no_participant').hide();
            $('#gymmanst_participant').append('<tr><td class="text-left"><span class="tim-icons icon-simple-remove text-warning minusButton" data-gymnastid="{{ gymnast.0.id }}"></span></td><td class="text-left"><a href="/gymnast/details/' + gymnast_id + '/tab/event">' + gymnast_name + '</a></td></tr>');

            $('#gymnast').val('');
            $('#gymnast').focus();
        }

        $('body').on('click', '.minusButton', function(event){
            $.ajax({
                url: "{% url 'unlink_gymnast_from_event' %}",
                method: "POST",
                data: {
                    event_id: {{ event.id }},
                    gymnast_id: $(this).data('gymnastid'),
                    csrfmiddlewaretoken: '{{ csrf_token }}',
                },
                context: $(this),
            }).done(function(){
                $(this).closest('tr').fadeTo(1000, 0, function(){
                    $(this).remove();
                });
            }).fail(function(){
                alert('Not done !');
            });
            return false;
        });

        $('#gymnast').autocomplete({
            source: function(request, response){
                $.ajax({
                    url: gymnast_lookup,
                    method: "POST",
                    data: {
                        pattern: $('#gymnast').val(),
                        csrfmiddlewaretoken: csrf_token
                    },
                    dataType: "json",
                    success: function(data){
                        if(data.length != 0){
                            response($.map(data, function(item){
                                return {
                                    label: item.Name,
                                    value: item.Name,
                                    gymnastid: item.ID,
                                }
                            }))
                        } else {
                            response([{ label: 'No result found.', value: '' }]);
                        };
                    },

                    error: function(exception){
                        console.log(exception);
                    }
                });
            },
            minLength: 3,
            select: function (event, ui) {
                $.ajax({
                    url: "{% url 'link_gymnast_to_event' %}",
                    method: "POST",
                    data: {
                        event_id: {{ event.id }},
                        gymnast_id: ui.item.gymnastid,
                        csrfmiddlewaretoken: '{{ csrf_token }}',
                    },
                }).done(function() {
                    insert_selected_gymnast(ui.item.gymnastid, ui.item.label);
                });
            },
            {% if request.session.template == 0 %}
            classes: {
                "ui-widget-content": "custom_autocomplete_ul",
                "ui-autocomplete": "custom_autocomplete_ul",
                "ui-menu-item-wrapper": "custom_autocomplete_li",
                "ui-menu-item": "custom_autocomplete_li",
            },
            {% endif %}
        });
    });
</script>

{% endblock %}