{% load has_group %}
{% load is_user_equal_to_gymnast %}

<div class="row justify-content-center ml-1">
    <div class="col-md-6">
        <div class="card">
            <div class="card-header">
                <h4>Scores</h4>
            </div>
            <div class="card-body pt-0 pb-0 pr-0 pl-0">
                {% if score_list %}
                    <div><canvas id="chart_score_competition" class="chartjs" width="400" height="200"></canvas></div>
                {% else %}
                    <p class="pl-3 text-muted">No score recorded for this gymnast.</p>
                {% endif %}
            </div>

            <div class="card-footer text-right text-muted pt-0">
                {% if score_list %}
                <a href="{% url 'score_list_for_gymnast' gymnast_id %}">
                    <button type="submit" value="add" class="btn btn-icon btn-warning mr-2">
                        <i class="fal fa-crosshairs"></i>
                    </button>
                </a>
                {% endif %}

                {% if request.user|has_group:"trainer" or request.user|is_user_equal_to_gymnast:gymnast_id %}
                <a href="{% url 'score_create_for_gymnast' gymnast_id %}">
                    <button type="submit" value="add" class="btn btn-icon btn-warning ">
                        <i class="fas fa-plus"></i>
                    </button>
                </a>
                {% endif %}
            </div>
        </div>
    </div>

    <div class="col-md-6 pl-1">
        <div class="card">
            <div class="card-header">
                <h4>Chronos</h4>
            </div>
            <div class="card-body pt-0 pb-0 pr-0 pl-0">
                {% if chrono_list %}
                    <div><canvas id="chart_chrono" class="chartjs" width="400" height="200"></canvas></div>
                {% else %}
                    <p class="pl-3 text-muted">No chrono recorded yet for this gymnast.</p>
                {% endif %}
            </div>
            <div class="card-footer pt-0 row">
                <div class="col-md-6 text-muted pt-0">
                    <a href="{% url 'average_jump_chrono_details_for_gymnast' gymnast_id %}">
                        <button type="submit" value="add" class="btn btn-icon btn-warning mr-2">
                            <i class="fad fa-analytics"></i>
                        </button>
                    </a>
                </div>
                <div class="col-md-6 text-right text-muted pt-0">
                    {% if chrono_list %}
                    <a href="{% url 'chrono_list_for_gymnast' gymnast_id %}">
                        <button type="submit" value="add" class="btn btn-icon btn-warning mr-2">
                            <i class="fal fa-stopwatch"></i>
                        </button>
                    </a>
                    {% endif %}

                    {% if request.user|has_group:"trainer" or request.user|is_user_equal_to_gymnast:gymnast_id %}
                    <a href="{% url 'chrono_create_for_gymnast' gymnast_id %}">
                        <button type="submit" value="add" class="btn btn-icon btn-warning ">
                            <i class="fas fa-plus"></i>
                        </button>
                    </a>
                    {% endif %}
                </div>
            </div>
        </div>
    </div>
</div>

<script type="text/javascript">
    var timeFormat = 'DD-MM-YYYY';

    {% if score_list %}
    var ctx = document.getElementById('chart_score_competition').getContext('2d');
    var gradient_stroke_1 = ctx.createLinearGradient(0, 230, 0, 50);
    var gradient_stroke_2 = ctx.createLinearGradient(0, 230, 0, 50);
    var gradient_stroke_3 = 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)');

    gradient_stroke_3.addColorStop(1, 'rgba(54, 162, 235, 0.4)');
    gradient_stroke_3.addColorStop(0.75, 'rgba(54, 162, 235, 0.3)');
    gradient_stroke_3.addColorStop(0.5, 'rgba(54, 162, 235, 0.2)');
    gradient_stroke_3.addColorStop(0.25, 'rgba(54, 162, 235, 0)');

    var compulsory_routine_scrore = [
        {% for score in score_routine1_list %}
        {
            x: '{{ score.event.date_begin | date:"d-m-Y" }}',
            y: '{{ score.total }}'
        },
        {% endfor %}
    ];

    var voluntary_routine_scrore = [
        {% for score in score_routine2_list %}
        {
            x: '{{ score.event.date_begin | date:"d-m-Y" }}',
            y: '{{ score.total }}'
        },
        {% endfor %}
    ];

    var final_routine_scrore = [
        {% for score in score_routine3_list %}
        {
            x: '{{ score.event.date_begin | date:"d-m-Y" }}',
            y: '{{ score.total }}'
        },
        {% endfor %}
    ];

    var score_values = {
        datasets: [
            {% if score_routine1_list %}
            {
                label: 'Q1R1',
                cubicInterpolationMode: 'monotone',
                backgroundColor: gradient_stroke_1,
                borderColor: 'rgb(255, 99, 132)',
                pointBackgroundColor: 'rgb(255, 99, 132)',
                fill: true,
                data: compulsory_routine_scrore
            },
            {% endif %}

            {% if score_routine2_list %}
            {
                label: 'Q1R2',
                cubicInterpolationMode: 'monotone',
                backgroundColor: gradient_stroke_2,
                borderColor: 'rgb(255, 159, 64)',
                pointBackgroundColor: 'rgb(255, 159, 64)',
                fill: true,
                data: voluntary_routine_scrore
            },
            {% endif %}

            {% if score_routine3_list %}
            {
                label: 'Q2R1',
                cubicInterpolationMode: 'monotone',
                backgroundColor: gradient_stroke_3,
                borderColor: 'rgb(54, 162, 235)',
                pointBackgroundColor: 'rgb(54, 162, 235)',
                fill: true,
                data: final_routine_scrore
            },
            {% endif %}
        ],
    }

    new Chart(ctx, {
        type: 'line',
        data: score_values,
        options: {
            scales: {
                x: {
                    type: 'time',
                    display: true,
                    scaleLabel: {
                        display: true,
                        labelString: 'Date',
                        ticks: {
                            autoSkip: true,
                            source: 'data',
                        },
                    },
                    time: {
                        parser: timeFormat,
                        tooltipFormat: 'LL',
                        round: 'day',
                    },
                },
            },
            plugins: {
                legend: {
                    display: true,
                    position: 'bottom',
                }
            }
        },
    });
    {% endif %}
    /*
        red: 'rgb(255, 99, 132)',
        orange: 'rgb(255, 159, 64)',
        yellow: 'rgb(255, 205, 86)',
        green: 'rgb(75, 192, 192)',
        blue: 'rgb(54, 162, 235)',
        purple: 'rgb(153, 102, 255)',
        grey: 'rgb(201, 203, 207)'
        http://www.chartjs.org/samples/latest/scales/time/line-point-data.html
    */

    {% if chrono_list %}
    var ctx = document.getElementById('chart_chrono').getContext('2d');
    var gradient_stroke_1 = ctx.createLinearGradient(0, 230, 0, 50);
    var gradient_stroke_2 = ctx.createLinearGradient(0, 230, 0, 50);
    var gradient_stroke_3 = ctx.createLinearGradient(0, 230, 0, 50);
    var gradient_stroke_4 = ctx.createLinearGradient(0, 230, 0, 50);

    gradient_stroke_1.addColorStop(0.75, 'rgba(75, 192, 192, 0.3)');
    gradient_stroke_1.addColorStop(0.5, 'rgba(75, 192, 192, 0.2)');
    gradient_stroke_1.addColorStop(0.25, 'rgba(75, 192, 192, 0)');

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

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

    gradient_stroke_4.addColorStop(1, 'rgba(54, 162, 235, 0.4)');
    gradient_stroke_4.addColorStop(0.75, 'rgba(54, 162, 235, 0.3)');
    gradient_stroke_4.addColorStop(0.5, 'rgba(54, 162, 235, 0.2)');
    gradient_stroke_4.addColorStop(0.25, 'rgba(54, 162, 235, 0)');

    var straightjump_values = [
        {% for chrono in chrono_10c %}
        {
            x: '{{ chrono.date | date:"d-m-Y" }}',
            y: '{{ chrono.score_avg | floatformat:3 }}'
        },
        {% endfor %}
    ];

    var compulsory_routine_values = [
        {% for chrono in chrono_r1 %}
        {
            x: '{{ chrono.date | date:"d-m-Y" }}',
            y: '{{ chrono.score_avg | floatformat:3 }}'
        },
        {% endfor %}
    ];

    var volontary_routine_values = [
        {% for chrono in chrono_r2 %}
        {
            x: '{{ chrono.date | date:"d-m-Y" }}',
            y: '{{ chrono.score_avg | floatformat:3 }}'
        },
        {% endfor %}
    ];

    var final_routine_values = [
        {% for chrono in chrono_rf %}
        {
            x: '{{ chrono.date | date:"d-m-Y" }}',
            y: '{{ chrono.score_avg | floatformat:3 }}'
        },
        {% endfor %}
    ];

    var chrono_values = {
        datasets: [
            {% if chrono_10c %}
            {
                label: '10 |',
                cubicInterpolationMode: 'monotone',
                backgroundColor: gradient_stroke_1,
                borderColor: 'rgb(75, 192, 192)',
                pointBackgroundColor: 'rgb(75, 192, 192)',
                fill: true,
                data: straightjump_values,
            },
            {% endif %}
            {% if chrono_r1 %}
            {
                label: 'Q1R1',
                cubicInterpolationMode: 'monotone',
                backgroundColor: gradient_stroke_2,
                borderColor: 'rgb(255, 99, 132)',
                pointBackgroundColor: 'rgb(255, 99, 132)',
                fill: true,
                data: compulsory_routine_values,
            },
            {% endif %}
            {% if chrono_r2 %}
            {
                label: 'Q1R2',
                cubicInterpolationMode: 'monotone',
                backgroundColor: gradient_stroke_3,
                borderColor: 'rgb(255, 159, 64)',
                pointBackgroundColor: 'rgb(255, 159, 64)',
                fill: true,
                data: volontary_routine_values,
            },
            {% endif %}
            {% if chrono_rf %}
            {
                label: 'Q2R1',
                cubicInterpolationMode: 'monotone',
                backgroundColor: gradient_stroke_4,
                borderColor: 'rgb(255, 205, 86)',
                pointBackgroundColor: 'rgb(255, 205, 86)',
                fill: true,
                data: final_routine_values,
            },
            {% endif %}
        ]
    }

    new Chart(ctx, {
        type: 'line',
        data: chrono_values,
        options: {
            scales: {
                x: {
                    type: 'time',
                    display: true,
                    scaleLabel: {
                        display: true,
                        labelString: 'Date',
                        ticks: {
                            autoSkip: true,
                            source: 'data',
                        },
                    },
                    time: {
                        parser: timeFormat,
                        tooltipFormat: 'LL',
                        round: 'day',
                    },
                },
            },
            plugins: {
                legend: {
                    display: true,
                    position: 'bottom',
                }
            }
        },
    });
    {% endif %}
</script>