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

{% block content %}
<div class="card mb-0">
    <div class="card-header">
        <h3 class="mb-0"><a href="{% url 'gymnast_details_tab' gymnast.id 'scores' %}">{{ gymnast }}</a></h3>
        Chrono for
        <select id="routine_type">
        {% for type in distinct_routine_type_list %}
            <option value="{{ type }}" {% if type == selected_routine_type %}selected{% endif %}>{{ type }}</option>
        {% endfor %}
        </select>
        from {{ current_season }}
        {% if date_begin %}
            <i>{{ date_begin | date:'j M Y' }}</i> to <i>{{ date_end | date:'j M Y' }}</i>
        {% else %}
            <select id="select_season">
                {% for season in distinct_season_list %}
                    <option value="{{ season }}" {% if selected_season|stringformat:"s" == season %}selected{% endif %}>{{ season }}</option>
                {% endfor %}
            </select>
            <span id="week_1_management"> week
                <select id="select_week_number">
                    {% for week_number in distinct_week_number_list %}
                        <option value="{{ week_number }}" {% if selected_week_number == week_number %}selected{% endif %}>{{ week_number }}</option>
                    {% endfor %}
                </select>
            </span>
        {% endif %}
        <br />
        {% if chrono_list %}
            <input type="checkbox" id="comparison" name="comparison" /> Compare with: chrono for
            <select id="routine_type_2">
            {% for type in distinct_routine_type_list %}
                <option value="{{ type }}" {% if type == selected_routine_type %}selected{% endif %}>{{ type }}</option>
            {% endfor %}
            </select>
            from {{ current_season }}
            {% if date_begin %}
                <i>{{ date_begin | date:'j M Y' }}</i> to <i>{{ date_end | date:'j M Y' }}</i>
            {% else %}
                <select id="select_season_2">
                    {% for season in distinct_season_list %}
                        <option value="{{ season }}" {% if selected_season|stringformat:"s" == season %}selected{% endif %}>{{ season }}</option>
                    {% endfor %}
                </select>
                <span id="week_2_management"> week
                    <select id="select_week_number_2">
                        {% for week_number in distinct_week_number_list %}
                            <option value="{{ week_number }}" {% if selected_week_number == week_number %}selected{% endif %}>{{ week_number }}</option>
                        {% endfor %}
                    </select>
                </span>
            {% endif %}
        {% endif %}
    </div>
    <div class="card-body pb-0 mb-0">
        <div class="row pb-0 mb-0">
            {% if chrono_list %}
            <div class="col-md-5">
                <table class="table table-condensed" id="chrono_values_table">
                    {% for chrono in chrono_list %}
                    {% if chrono.details.all %}
                    <tr>
                        {% for detail in chrono.details.all %}
                            {% with stat_value=stat_values|get_value_at_index:forloop.counter0 %}
                                <td class="{% if stat_value.max_score == detail.value %}cell-success{% endif %}{% if stat_value.min_score == detail.value %}cell-danger{% endif %}">{{ detail.value | floatformat:2 }}</td>
                            {% endwith %}
                        {% endfor %}
                        <td class="text-right"><b>{{ chrono.score | floatformat:2 }}</b></td>
                    </tr>
                    {% endif %}
                    {% endfor %}
                    <tr>
                        {% for value in stat_values %}
                            <td><b>{{ value.avg_score | floatformat:2 }}</b></td>
                        {% endfor %}
                        <td class="text-right"><b></b></td>
                    </tr>
                    <!-- <tr>
                        {% for value in stat_values %}
                            <td><b>{{ value.min_score | floatformat:2 }}</b></td>
                        {% endfor %}
                        <td class="text-right"><b></b></td>
                    </tr><tr>
                        {% for value in stat_values %}
                            <td><b>{{ value.max_score | floatformat:2 }}</b></td>
                        {% endfor %}
                        <td class="text-right"><b></b></td> -->
                    </tr>
                </table>
            </div>
            <div class="col-md-7 alert {% if request.session.template == 0 %}skill-info{% else %}alert-secondary{% endif %}">
                <canvas id="chartjs_chrono" class="chartjs"></canvas>
            </div>
            {% else %}
            <div class="col-md-12">
                No chrono details with the selected criteria (routine type, season and week).
                <br />
                <br />
            </div>
            {% endif %}
        </div>
    </div>
</div>

{% endblock %}

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

    var ctx = document.getElementById("chartjs_chrono").getContext("2d");
    var gradient_stroke_1 = ctx.createLinearGradient(0, 450, 0, 0);
    var gradient_stroke_2 = ctx.createLinearGradient(0, 230, 0, 50);

    gradient_stroke_1.addColorStop(1, 'rgba(255, 99, 132, 0.4)');
    gradient_stroke_1.addColorStop(0.75, 'rgba(255, 99, 132, 0.3)');
    gradient_stroke_1.addColorStop(0.5, 'rgba(255, 99, 132, 0.2)');
    gradient_stroke_1.addColorStop(0.25, 'rgba(255, 99, 132, 0)');

    gradient_stroke_2.addColorStop(1, 'rgba(255, 159, 64, 0.4)');
    gradient_stroke_2.addColorStop(0.75, 'rgba(255, 159, 64, 0.3)');
    gradient_stroke_2.addColorStop(0.5, 'rgba(255, 159, 64, 0.2)');
    gradient_stroke_2.addColorStop(0.25, 'rgba(255, 159, 64, 0)');

    var chrono_chart = new Chart(document.getElementById("chartjs_chrono"), {
        type: 'line',
        data: {
            labels: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10],
            datasets: [{
                data: [
                    {% for value in stat_values %}{{ value.avg_score | floatformat:3 }}, {% endfor %}
                ],
                pointBackgroundColor: 'rgb(255, 99, 132)',
                borderColor: 'rgb(255, 99, 132)',
                backgroundColor: gradient_stroke_1,
                cubicInterpolationMode: 'monotone',
                fill: true,
            }]
        },
        options: {
            // min/max value ?
            plugins: {
                legend: {
                    display: false,
                }
            }
        },
    });

    $('#select_season').change(function(){
        var tmp_url = "{% url 'get_chrono_detail_distinct_weeknumber_for_season' gymnast.id '_season_label_' %}";
        var season_label = $(this).children("option:selected").val();
        target_url = tmp_url.replace('_season_label_', season_label);

        $.getJSON(target_url, function(data) {
            if (!$.trim(data))
                $('#week_1_management').hide();
            else
                $('#week_1_management').show();

            $("#select_week_number option").remove();   // Remove all <option> child tags.
            $.each(data, function(key, value) {         // Iterates through a collection
                $("#select_week_number").append(        // Append an object to the inside of the select box
                    $("<option></option>").text(value).val(value)
                );
            });
        });
    });

    $('#select_week_number').change(function(){
        var tmp_url = "{% url 'average_jump_chrono_details_for_gymnast_routinetype_season_and_week' gymnast.id '8888' '_season_label_' '9999' %}";
        var routine_type = $('#routine_type').children("option:selected").val();
        var season_label = $('#select_season').children("option:selected").val();
        var week_number = $(this).children("option:selected").val();

        target_url = tmp_url.replace('8888', routine_type).replace('_season_label_', season_label).replace('9999', week_number);

        $(location).attr('href', target_url);
    });

    $('#select_season_2').change(function(){
        var tmp_url = "{% url 'get_chrono_detail_distinct_weeknumber_for_season' gymnast.id '_season_label_' %}";
        var season_label = $(this).children("option:selected").val();
        target_url = tmp_url.replace('_season_label_', season_label);

        $.getJSON(target_url, function(data) {
            if (!$.trim(data))
                $('#week_2_management').hide();
            else
                $('#week_2_management').show();

            $("#select_week_number_2 option").remove();
            $.each(data, function(key, value) {
                $("#select_week_number_2").append($("<option></option>").text(value).val(value));
            });
        });
    });

    function remove_comparison_data() {
        if ((Object.keys(chrono_chart.data.datasets).length) > 1) {
            chrono_chart.data.datasets.pop();
            chrono_chart.update();
        }
    }

    function load_comparison_data() {
        var tmp_url = "{% url 'get_average_jump_chrono_details_for_season_and_week' gymnast.id '8888' '_season_label_' '9999' %}";
        var routine_type = $('#routine_type_2').children("option:selected").val();
        var season_label = $('#select_season_2').children("option:selected").val();
        var week_number = $('#select_week_number_2').children("option:selected").val();

        target_url = tmp_url.replace('8888', routine_type).replace('_season_label_', season_label).replace('9999', week_number);

        $.getJSON(target_url, function(data) {
            if (!$.trim(data))
                // $('#week_2_management').hide();
                alert('No data for comparison.');
            else {
                var new_values = []
                $.each(data, function(key, value) {
                    item = JSON.stringify(value);
                    new_values.push(parseFloat(value['avg_score']).toFixed(3));
                });
                var new_dataset = {
                    pointBackgroundColor: 'rgb(255, 159, 64)',
                    borderColor: 'rgb(255, 159, 64)',
                    backgroundColor: gradient_stroke_2,
                    cubicInterpolationMode: 'monotone',
                    fill: true,
                    data: new_values,
                }
                chrono_chart.data.datasets.push(new_dataset);
                chrono_chart.update();
            }
        });
    }

    $('#select_week_number_2').change(function(){
        if ($('#comparison').is(':checked')) {
            remove_comparison_data();
            load_comparison_data();
        }
    });

    $('#comparison').change(function(){
        if (this.checked) {
            if (($('#select_week_number_2').val() != $('#select_week_number').val()) || ($('#select_season_2').val() != $('#select_season').val()))
                load_comparison_data();
        } else {
            remove_comparison_data();
        }
    });
</script>
{% endblock %}