{% extends "base.html" %}

{% 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 m-b-md">
        <div class="card card-user">
            <div class="card-body">
                <p class="card-text">
                    <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>
                    </div>
                </p>
                <div class="card-description">
                    {{ gymnast.age }} years ({{ gymnast.birthdate | date:"d F Y" }})<span class="text-info"><b>{{ gymnast.get_orientation_display }}</b></span><br />
                    {{ gymnast.club.name }} - {{ gymnast.club.place.city }}<br />
                    {{ gymnast.trainings_by_week }} training/week for {{ gymnast.hours_by_week }} hours/week<br />
                    <br />
                    {% if best_routine or best_straightjump %}
                        <h5><u>Bests Scores</u></h5>
                        <ul>
                        {% if best_straightjump %}
                            <li><b>Straight</b> : {{ best_straightjump.0.date | date:"d-m-Y" }} - <b>{{ best_straightjump.0.tof }}</b></li>
                        {% endif %}
                        {% if best_routine %}
                            <li><b>Routine</b> : {{ best_routine.0.date | date:"d-m-Y" }} - <b>{{ best_routine.0.tof }}</b></li>
                        {% endif %}
                        </ul>
                    {% endif %}
                    
                </div>
                <div class="row">
                    <div class="col-3">
                        <a href="{% url 'chrono_create_for_gymnast' gymnast.id %}" class="nav-item dropdown-item">New <i class="far fa-stopwatch"></i></a>
                    </div>
                    <div class="col-3">
                        <a href="{% url 'score_create_for_gymnast' gymnast.id %}" class="nav-item dropdown-item">New <i class="fal fa-crosshairs"></i></a>
                    </div>
                    <div class="col-3">
                        <a href="{% url 'mindstate_create_for_gymnast' gymnast.id %}" class="nav-item dropdown-item">New <i class="fal fa-file-medical-alt"></i></a>
                    </div>
                    <div class="col-3">
                        <a href="{% url 'accident_create_for_gymnast' gymnast.id %}" class="nav-item dropdown-item">New <i class="fal fa-comment-alt-medical"></i></a>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="col-12 col-sm-4 col-md-4 col-lg-4">
        <canvas id="chartjs_completude" width="300" height="300" style="width: 275px; height: 225px"></canvas>
    </div>

    <div class="col-12 col-sm-4 col-md-4 card mb-3">
        <h4 class="d-flex align-items-end flex-column">
            Estimated level : {% if gymnast_nb_known_skills %}{{ evaluated_level }}{% else %}0{% endif %}
        </h4>
        <div class="progress-container progress-primary">
            <div class="progress" style="height: 10px;">
                <div class="progress-bar progress-bar-warning" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: {{ percentage_known_skill }}%;"></div>
            </div>
        </div>

        <!-- {{ nb_known_skill }} known skills on {{ nb_skill }} skills. -->
        {% if gymnast_nb_known_skills %}
            {% for level in percentages %}
                {% if level.2 > 0 %}
                <div class="progress-container progress-warning mt-2">
                    <div class="progress" style="height: 10px;">
                        <div class="progress-bar" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: {% widthratio level.2 level.1 100 %}%;">&nbsp;&nbsp;Level {{ level.0 }}</div>
                    </div>
                </div>
                {% endif %}
            {% endfor %}
        {% else %}
            No information.
        {% endif %}
    </div>

</div>

<div class="row">
    <div class="col-12 col-sm-2 col-md-2 col-lg-1">
        <!--
        color-classes: "nav-pills-primary", "nav-pills-info", "nav-pills-success", "nav-pills-warning","nav-pills-danger"
        -->
        <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="#statistics" data-ref="#statistics" data-url="statistics/" id="display_statistics">
                    <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 == 'mindstate' %}active{% endif %}" data-toggle="tab" href="#mindstate" data-ref="#mindstate" data-url="mindstate/" id="display_mindstate">
                    <i class="fal fa-file-medical-alt"></i> Mindstates
                </a>
            </li>
            <li class="nav-item">
                <a class="nav-link get-info {% if tab == 'scores' %}active{% endif %}" data-toggle="tab" href="#accident" data-ref="#accident" data-url="accident/" id="display_accident">
                    <i class="fal fa-comment-alt-medical"></i> Accidents
                </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-10 col-md-10 col-lg-11">
        <div class="tab-content">
            <div class="tab-pane {% if tab is None or tab == 'level' %}active{% endif %}" id="statistics"></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 == 'mindstate' %}active{% endif %}" id="mindstate"></div>

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

{% endblock %}

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

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

        {% if tab is None or tab == 'level' %}
            tab_url = default_url + 'statistics/';
            var tab_div = '#statistics';
        {% 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);
                }
            });
        });
    });

    $(function(){
        $('#skilltable').tablesorter({
            dateFormat: "uk",
        })

        $('#chronotable').tablesorter({
            dateFormat: "uk",
        })
    });

    new Chart(document.getElementById("chartjs_completude"),{
        // responsive: true,
        // width: 300,
        // height: 300,
        type: "doughnut",
        // aspectRatio:1,
        data: {
            datasets:[
                {
                    borderWidth: 1,
                    data:[
                        {{ nb_skill_chained }},
                        {{ nb_skill_not_chained }},
                        {{ nb_skill_whith_help }},
                        {{ nb_unknown_skill }}
                    ],
                    backgroundColor:[
                        "#1bc98e", /*"#1ca8dd",*/
                        "#FEFB01",
                        "#FF9300",
                        "#FF2F92",   /*"#1bc98e"*/
                        "#1ca8dd",
                        "#1bc98e"
                    ]
                }
            ],
            labels: ['Chained skills ', 'Unchained Skills ', ' Helped Skills', 'Unknown Skills'],
        },
        options: {
            legend: {
                display: false,
            },
            cutoutPercentage: 55,
            maintainAspectRatio: false,
        },
    });

    new Chart(document.getElementById("chartjs_chrono"),{
        type: 'line',
        data:{
            datasets:[
                {% if straightjump_score %}
                {
                    label: 'Straightjump',
                    backgroundColor: 'rgb(255, 99, 132, 0.25)',
                    borderColor: 'rgb(255, 99, 132)',
                    fill: true,
                    data: [
                        {% for chrono in straightjump_score %}
                            {
                                x: '{{ chrono.date | date:"d-m-Y" }}',
                                y: '{{ chrono.tof }}'
                            },
                        {% endfor %}
                    ]
                },
                {% endif %}
                {% if routine_score %}
                {
                    label: 'Routine',
                    backgroundColor: 'rgb(255, 159, 64, 0.25)',
                    borderColor: 'rgb(255, 159, 64)',
                    fill: true,
                    data: [
                        {% for chrono in routine_score %}
                            {
                                x: '{{ chrono.date | date:"d-m-Y" }}',
                                y: '{{ chrono.tof }}'
                            },
                        {% endfor %}
                    ]
                },
                {% endif %}
            ],
        },
        options: {
            scales: {
                xAxes: [{
                    type: "time",
                    time: {
                        unit: 'day',
                        format: 'DD-MM-YYYY'
                    },
                    scaleLabel: {
                        display: true,
                    }
                }, ],
                yAxes: [{
                    scaleLabel: {
                        display: true,
                    }
                }]
            },
            legend: {
                display: true,
                position: 'bottom',
            }
        },
    });

    new Chart(document.getElementById("chartjs_routine"),{
        type: 'line',
        data:{
            datasets:[

                {% if points_list %}
                {
                    label: 'Execution',
                    backgroundColor: 'rgb(255, 99, 132, 0.25)',
                    borderColor: 'rgb(255, 99, 132)',
                    fill: true,
                    data: [
                        {% for point in points_list %}
                            {
                                x: '{{ point.event.datebegin | date:"d-m-Y" }}',
                                y: '{{ point.point_execution }}'
                            },
                        {% endfor %}
                    ]
                },
                {% endif %}

                {% if points_list %}
                {
                    label: 'Difficulty',
                    backgroundColor: 'rgb(255, 159, 64, 0.25)',
                    borderColor: 'rgb(255, 159, 64)',
                    fill: true,
                    data: [
                        {% for point in points_list %}
                            {
                                x: '{{ point.event.datebegin | date:"d-m-Y" }}',
                                y: '{{ point.point_difficulty }}'
                            },
                        {% endfor %}
                    ]
                },
                {% endif %}

                {% if points_list %}
                {
                    label: 'ToF',
                    backgroundColor: 'rgb(0, 250, 147, 0.25)',
                    borderColor: 'rgb(0, 250, 147)',
                    fill: true,
                    data: [
                        {% for point in points_list %}
                            {
                                x: '{{ point.event.datebegin | date:"d-m-Y" }}',
                                y: '{{ point.point_time_of_flight }}'
                            },
                        {% endfor %}
                    ]
                },
                {% endif %}
                
                {% if points_list %}
                {
                    label: 'HD',
                    backgroundColor: 'rgb(0, 151, 255, 0.25)',
                    borderColor: 'rgb(0, 151, 255)',
                    fill: true,
                    data: [
                        {% for point in points_list %}
                            {
                                x: '{{ point.event.datebegin | date:"d-m-Y" }}',
                                y: '{{ point.point_horizontal_displacement }}'
                            },
                        {% endfor %}
                    ]
                },
                {% endif %}
            ],
        },
        options: {
            scales: {
                xAxes: [{
                    type: "time",
                    time: {
                        unit: 'day',
                        format: 'DD-MM-YYYY'
                    },
                    scaleLabel: {
                        display: true,
                    }
                }, ],
                yAxes: [{
                    scaleLabel: {
                        display: true,
                    }
                }]
            },
            legend: {
                display: true,
                position: 'bottom',
            }
        },
    });
</script>

{% endblock %}