{% 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>Intensity statistics</h4>
            </div>
            <div class="card-body pt-0 pb-0 pr-0 pl-0">
                {% if intensity_list %}
                    <div><canvas id="chart_intensity" class="chartjs" width="400" height="200"></canvas></div>
                {% else %}
                    <p class="pl-3 text-muted">No intensity recorded for this gymnast.</p>
                {% endif %}
            </div>
            <div class="card-footer text-right text-muted pt-0">
                {% if intensity_list %}
                <a href="{% url 'intensity_list_for_gymnast' gymnast_id %}">
                    <button type="submit" value="list" class="btn btn-icon btn-warning mr-2">
                        <i class="fal fa-analytics"></i> <!-- Routines -->
                    </button>
                </a>
                {% endif %}

                {% if request.user|has_group:"trainer" or request.user|is_user_equal_to_gymnast:gymnast_id %}
                <a href="{% url 'intensity_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">
        <div class="card">
            <div class="card-header">
                <h4>Routine's statistics</h4>
            </div>
            <div class="card-body pt-0 pb-0 pr-0 pl-0">
                {% if routine_one_done_list or routine_two_done_list %}
                    <div><canvas id="chart_routine_done" class="chartjs" width="400" height="200"></canvas></div>
                {% else %}
                    <p class="pl-3 text-muted">There are no routine's statistics associated to this gymnast.</p>
                {% endif %}
            </div>
            <div class="card-footer pt-0 row">
                {% if ghr_list %}
                <div class="col-md-6 text-muted pt-0">
                    {% if has_routine_1 %}
                    <a href="#">
                        <button type="submit" value="list" class="btn btn-icon btn-success mr-2 action-button"
                            data-routine_type="1" data-success="1">
                            +R1
                        </button>
                    </a>
                    {% endif %}
                    {% if has_routine_2 %}
                    <a href="#">
                        <button type="submit" value="list" class="btn btn-icon btn-success mr-4 action-button"
                            data-routine_type="2" data-success="1">
                            +R2
                        </button>
                    </a>
                    {% endif %}
                    &nbsp;&nbsp;
                    {% if has_routine_1 %}
                    <a href="#">
                        <button type="submit" value="list" class="btn btn-icon btn-danger mr-2 action-button"
                            data-routine_type="1" data-success="0">
                            +R1
                        </button>
                    </a>
                    {% endif %}
                    {% if has_routine_2 %}
                    <a href="#">
                        <button type="submit" value="list" class="btn btn-icon btn-danger action-button"
                            data-routine_type="2" data-success="0">
                            +R2
                        </button>
                    </a>
                    {% endif %}
                </div>
                {% endif %}
                <div class="col-md-6 {% if not ghr_list %}offset-md-6{% endif %} text-right text-muted pt-0">
                    {% if routine_one_done_list or routine_two_done_list %}
                    <a href="{% url 'routinedone_list_for_gymnast' gymnast_id %}">
                        <button type="submit" value="list" class="btn btn-icon btn-warning mr-2">
                            <i class="far fa-chart-bar"></i>
                        </button>
                    </a>
                    {% endif %}

                    {% if request.user|has_group:"trainer" or request.user|is_user_equal_to_gymnast:gymnast_id %}
                    <a href="{% url 'routinedone_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 class="col-md-12">
        <div class="card">
            <div class="card-header">
                <h4>Active routines</h4>
            </div>
            <div class="card-body pt-0 pb-0 pr-0 pl-0">
                {% if ghr_list %}
                <div class="pr-1 pl-1">
                    <table class="table tablesorter table-striped table-condensed" data-sort="table" id="routine_table">
                        <thead>
                            <tr>
                                <th style="width: 8%" class="header text-left">Type</th>
                                <th style="width: 30%" class="header text-left">Label</th>
                                <th style="width: 15%" class="header text-left">From</th>
                                <th style="width: 10%" class="header text-center">Diff.</th>
                                <th style="width: 10%" class="header text-center">Level</th>
                                <th style="width: 10%" class="header text-center">Rank</th>
                            </tr>
                        </thead>
                        <tbody>
                            {% for ghr in ghr_list %}
                            <tr>
                                <td class="text-center">{{ ghr.get_routine_type_display }}</td>
                                <td class="text-left"><a href="{% url 'combination_details' ghr.routine.id %}">{{ ghr.routine.short_label }}</a></td>
                                <td class="text-center">{{ ghr.date_begin | date:"d-m-Y"}}</td>
                                <!-- <td class="text-center">{% if ghr.date_end %}{{ ghr.date_end | date:"d F Y" }}{% else %}… to now.{% endif %}</td> -->
                                <td class="text-center"><b>{{ ghr.routine.difficulty }}</b></td>
                                <td class="text-center">{{ ghr.routine.level }}</td>
                                <td class="text-center">{{ ghr.routine.rank }}</td>
                            </tr>
                            {% endfor %}
                        </tbody>
                    </table>
                </div>
                {% else %}
                    <p class="pl-3 text-muted">There are no routines associated to this gymnast.</p>
                {% endif %}
            </div>
            <div class="card-footer text-right text-muted pt-0">
                {% if ghr_list %}
                <a href="{% url 'routine_list_for_gymnast' gymnast_id %}">
                    <button type="submit" value="list" class="btn btn-icon btn-warning mr-2">
                        <i class="tim-icons icon-components"></i> <!-- Routines -->
                    </button>
                </a>
                {% endif %}

                {% if request.user|has_group:"trainer" or request.user|is_user_equal_to_gymnast:gymnast_id %}
                <a href="{% url 'link_routine_to_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>

<script type="text/javascript">
    $(document).ready(function () {
        $('#routine_table').tablesorter({
            // headers: {
            //   0: { sorter: false },      // disable first column
            // },
            dateFormat: "uk",
            sortList: [[0, 0],]
        })

        $('#stats_table').tablesorter({
            // headers: {
            //   0: { sorter: false },      // disable first column
            // },
            dateFormat: "uk",
            sortList: [[0, 1],]
        })

        $('.action-button').click(function () {
            $.ajax({
                url: "{% url 'increment_routinedone' %}",
                method: "POST",
                data: {
                    gymnast_id: {{ gymnast_id }},
                    success: $(this).data("success"),
                    routine_type: $(this).data("routine_type"),
                    csrfmiddlewaretoken: '{{ csrf_token }}'
                },
            }).done(function () {
                //
                //  RELOAD DE L'ONGLET
                //
                //
                location.reload();  // recharge TOUTE la page... Overkill !
                // tab_url = {% url 'gymnast_details_tab'  gymnast_id 'routine' %};
                // tab_div = '#routine';

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

    var timeFormat = 'DD-MM-YYYY';

    {% if intensity_list %}
    var ctx = document.getElementById('chart_intensity').getContext('2d');

    var mean_difficulty_by_passe = [
        {% for score in intensity_list %}
            {
                x: '{{ score.date | date:"d-m-Y" }}',
                y: '{{ score.mean_difficulty_by_passe }}'
            },
        {% endfor %}
    ];

    var mean_quantity_of_skill = [
        {% for score in intensity_list %}
            {
                x: '{{ score.date | date:"d-m-Y" }}',
                y: '{{ score.mean_quantity_of_skill }}'
            },
        {% endfor %}
    ];

    var quantity_of_skill_by_passe = [
        {% for score in intensity_list %}
            {
                x: '{{ score.date | date:"d-m-Y" }}',
                y: '{{ score.quantity_of_skill_by_passe }}'
            },
        {% endfor %}
    ];

    var mean_difficulty_by_skill = [
        {% for score in intensity_list %}
            {
                x: '{{ score.date | date:"d-m-Y" }}',
                y: '{{ score.mean_difficulty_by_skill }}'
            },
        {% endfor %}
    ];

    var score_values = {
        datasets: [
            {
                label: 'diff/pass',
                cubicInterpolationMode: 'monotone',
                borderColor: 'rgb(75, 192, 192)',
                pointBackgroundColor: 'rgb(75, 192, 192)',
                data: mean_difficulty_by_passe
            },
            {
                label: '# skills',
                cubicInterpolationMode: 'monotone',
                borderColor: 'rgb(255, 99, 132)',
                pointBackgroundColor: 'rgb(255, 99, 132)',
                data: mean_quantity_of_skill
            },
            {
                label: '# skill/pass',
                cubicInterpolationMode: 'monotone',
                borderColor: 'rgb(255, 159, 64)',
                pointBackgroundColor: 'rgb(255, 159, 64)',
                data: quantity_of_skill_by_passe
            },
            {
                label: 'diff/skill',
                cubicInterpolationMode: 'monotone',
                borderColor: 'rgb(54, 162, 235)',
                pointBackgroundColor: 'rgb(54, 162, 235)',
                data: mean_difficulty_by_skill
            },
        ],
    }

    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 %}

    {% if routine_one_done_list or routine_two_done_list %}
    var ctx = document.getElementById('chart_routine_done').getContext('2d');

    {% if routine_one_done_list %}
    var routine_one_try = [
        {% for routine_done in routine_one_done_list %}
            {
                x: '{{ routine_done.date | date:"d-m-Y" }}',
                y: '{{ routine_done.number_of_try }}'
            },
        {% endfor %}
    ];

    var routine_one_success = [
        {% for routine_done in routine_one_done_list %}
            {
                x: '{{ routine_done.date | date:"d-m-Y" }}',
                y: '{{ routine_done.number_of_successes }}'
            },
        {% endfor %}
    ];
    {% endif %}

    {% if routine_two_done_list %}
    var routine_two_done = [
        {% for routine_done in routine_two_done_list %}
            {
                x: '{{ routine_done.date | date:"d-m-Y" }}',
                y: '{{ routine_done.number_of_try }}'
            },
        {% endfor %}
    ];

    var routine_two_success = [
        {% for routine_done in routine_two_done_list %}
            {
                x: '{{ routine_done.date | date:"d-m-Y" }}',
                y: '{{ routine_done.number_of_successes }}'
            },
        {% endfor %}
    ];
    {% endif %}

    var score_values = {
        datasets: [
            {% if routine_one_done_list %}
            {
                label: 'Q1R1 Try',
                cubicInterpolationMode: 'monotone',
                borderColor: 'rgb(75, 192, 192)',
                pointBackgroundColor: 'rgb(75, 192, 192)',
                data: routine_one_try,
            },
            {
                label: 'Q1R1 success',
                cubicInterpolationMode: 'monotone',
                borderColor: 'rgb(255, 159, 64)',
                pointBackgroundColor: 'rgb(255, 159, 64)',
                data: routine_one_success,
            },
            {% endif %}
            {% if routine_two_done_list %}
            {
                label: 'Q1R2 Try',
                cubicInterpolationMode: 'monotone',
                borderColor: 'rgb(255, 99, 132)',
                pointBackgroundColor: 'rgb(255, 99, 132)',
                data: routine_two_done,
            },
            {
                label: 'Q1R2 Success',
                cubicInterpolationMode: 'monotone',
                borderColor: 'rgb(54, 162, 235)',
                pointBackgroundColor: 'rgb(54, 162, 235)',
                data: routine_two_success,
            },
            {% 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 %}
</script>