{% extends "base.html" %}

{% load skill_doughnut %}
{% load level_chart_bar %}

{% block page_title %}{{ gymnast.first_name }} {{ gymnast.last_name }}{% endblock %}

{% block content %}
<div class="row">
    <div class="col-12 col-sm-4 col-md-4 col-lg-4">
        <div class="card card-user mb-4">
            <div class="card-body">
                    <div class="author">
                        <div class="block block-one"></div>
                        <div class="block block-two"></div>
                        <div class="block block-three"></div>
                        <div class="block block-four"></div>
                        <a href="javascript:void(0)">
                            {% if gymnast.picture %}
                                <img src="{{ gymnast.picture.url }}" alt="{{ gymnast }}" class="avatar">
                            {% endif %}
                            <h4 class="title">{{ gymnast.first_name }} {{ gymnast.last_name }}</h4>
                        </a>
                        <p class="description">
                            {{ gymnast.club.name }}
                        </p>
                    </div>
                <div class="card-description">
                    <b>{{ gymnast.age }} years</b> ({{ gymnast.birthdate | date:"d F Y" }})<span class="text-info"><b>{{ gymnast.get_orientation_display }}</b></span><br />
                    {% if height_weight %}
                    <b>{{ height_weight.0.height }}cm - {{ height_weight.0.weight }}kg</b> ({{ height_weight.0.date | date:"d-m-Y" }})<br />
                    {% endif %}
                    <b>{{ gymnast.trainings_by_week }} training/week</b> for <b>{{ gymnast.hours_by_week }} hours/week</b><br />
                    <br />
                    
                    <li><b>Straight jump</b> : <b>{{ best_straightjump.0.tof }}</b> ({{ best_straightjump.0.date | date:"d-m-Y" }})</li>
                
                    <li><b>Routine</b> : {% if best_routine %}<b>{{ best_routine.0.tof }}</b> ({{ best_routine.0.date | date:"d-m-Y" }}){% else %} (no information){% endif %}</li>

                </div>
            </div>
        </div>
    </div>

    <div class="col-12 col-sm-4 col-md-4 col-lg-4">
        {% if gymnast_nb_known_skills %}
            {% generate_skill_doughnut gymnast.id %}
        {% else %}
            <p class="text-muted mt-3">No learned skill statistics.</p>
        {% endif %}
    </div>

    <div class="col-12 col-sm-4 col-md-4 card mb-4">
        {% if gymnast_nb_known_skills %}
            {% generate_level_chart_bar gymnast.id %}
        {% else %}
            <p class="text-muted mt-3">No level/rank information.</p>
        {% endif %}
    </div>

</div>

<div class="row">
    <div class="col-3 col-sm-1 col-md-1 col-lg-1 col-xl-1">
        <ul class="nav nav-pills nav-pills-primary nav-pills-icons flex-column">

            <li class="nav-item">
                <a class="nav-link get-info{% if tab is None or tab == 'level' %} active{% endif %}" data-toggle="tab" href="#skill" data-ref="#skill" data-url="skill/" id="display_skill">
                    <i class="tim-icons icon-sound-wave"></i> <!-- Level -->
                </a>
            </li>
            
            <li class="nav-item">
                <a class="nav-link get-info{% if tab == 'routine' %} active{% endif %}" data-toggle="tab" href="#routine" data-ref="#routine" data-url="routine/" id="display_routines">
                    <i class="tim-icons icon-components"></i> <!-- Routines -->
                </a>
            </li>

            <li class="nav-item">
                <a class="nav-link get-info{% if tab == 'scores' %} active{% endif %}" data-toggle="tab" href="#scores" data-ref="#scores" data-url="scores_chrono/" id="display_scores_chrono">
                    <i class="fal fa-crosshairs"></i> <!-- Scores -->
                </a>
            </li>
            <li class="nav-item">
                <a class="nav-link get-info{% if tab == 'physiological' %} active{% endif %}" data-toggle="tab" href="#physiological" data-ref="#physiological" data-url="physiological/" id="display_physiological">
                    <i class="fal fa-stethoscope"></i> <!-- Physical -->
                </a>
            </li>
            <li class="nav-item">
                <a class="nav-link get-info{% if tab == 'event' %} active{% endif %}" data-toggle="tab" href="#event" data-ref="#event" data-url="event/" id="display_event">
                    <i class="fal fa-calendar-day"></i> <!-- Events -->
                </a>
            </li>
        </ul>
    </div>
    <div class="col-12 col-sm-11 col-md-11 col-lg-11 pr-0">
        <div class="tab-content">
            <div class="tab-pane{% if tab is None or tab == 'skill' %} active{% endif %}" id="skill"></div>
            
            <div class="tab-pane{% if tab == 'routine' %} active{% endif %}" id="routine"></div>

            <div class="tab-pane{% if tab == 'scores' %} active{% endif %}" id="scores"></div>

            <div class="tab-pane{% if tab == 'physiological' %} active{% endif %}" id="physiological"></div>
            
            <div class="tab-pane{% if tab == 'event' %} active{% endif %}" id="event"></div>

            <!-- TODO : message d'erreur si TAB non géré. -->
        </div>
    </div>
</div>

{% endblock %}

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

    $(document).ready(function() {
        var default_url = '/gymnast/details/' + {{ gymnast.id }} + '/';

        {% if tab is None or tab == 'skill' %}
            tab_url = default_url + 'skill/';
            var tab_div = '#skill';
        {% elif tab == 'routine' %}
            tab_url = default_url + 'routine/';
            var tab_div = '#routine';
        {% elif tab == 'scores' %}
            tab_url = default_url + 'scores_chrono/';
            var tab_div = '#scores';
        {% elif tab == 'event' %}
            tab_url = default_url + 'event/';
            var tab_div = '#event';
        {% endif %}

        $.ajax({
            url: tab_url,
            dataType: "html",
            success: function(data) {
                $(tab_div).replaceWith($(tab_div).html(data));
            },
            error: function (exception) {
                console.log(exception);
            }
        });

        $('.get-info').click(function(){
            $.ajax({
                url: default_url + $(this).data("url"),
                dataType: "html",
                context: $(this),
                success: function(data) {
                    $($(this).data("ref")).replaceWith($($(this).data("ref")).html(data));
                },
                error: function (exception) {
                    console.log(exception);
                }
            });
        });
    });

</script>

{% endblock %}