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

<div class="row justify-content-center ml-3 pr-0">
    <div class="col-md-12 pr-0">
        <div class="card">
            <div class="card-header">
                <h4>Well being</h4>
            </div>
            <div class="card-body pt-0 pb-0">
                {% if wellbeing_list %}
                    <div><canvas id="chartjs_wellbeing" class="chartjs" width="400" height="200"></canvas></div>

                    <div class="row">
                        <div class="col-md-8 col-l-6 col-xl-4 offset-xl-4">
                            <table class="table tablesorter table-striped table-condensed" id="wellbeing_table">
                                <thead>
                                    <tr>
                                        <th style="width: 4%"></th>
                                        <th style="width: 48%" class="header text-center">Date</th>
                                        <th style="width: 12%" class="header text-center">Mindstate</th>
                                        <th style="width: 12%" class="header text-center">Sleep</th>
                                        <th style="width: 12%" class="header text-center">Stress</th>
                                        <th style="width: 12%" class="header text-center">Fatigue</th>
                                        <th style="width: 12%" class="header text-center">Muscle soreness</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    {% for wellbeing in wellbeing_list %}
                                    <tr class="routine_{{ score.routine_type }}">
                                        <td>
                                            <a href="{% url 'score_update' wellbeing.id %}">
                                                <button type="button" rel="tooltip" class="btn btn-link btn-sm btn-icon">
                                                    <span class="tim-icons icon-pencil text-warning"></span>
                                                </button>
                                            </a>
                                        </td>
                                        <td class="text-right">{{ wellbeing.date | date:"d-m-Y" }}</td>
                                        <td class="text-right">{{ wellbeing.mindstate }}&nbsp;</td>
                                        <td class="text-right">{{ wellbeing.sleep }}&nbsp;</td>
                                        <td class="text-right">{{ wellbeing.stress }}&nbsp;</td>
                                        <td class="text-right">{{ wellbeing.fatigue }}&nbsp;</td>
                                        <td class="text-right">{{ wellbeing.muscle_soreness }}&nbsp;</td>
                                    </tr>
                                    {% endfor %}
                                </tbody>
                            </table>
                        </div>
                    </div>
                    <script type="text/javascript">
                        $(document).ready(function () {
                            $('#wellbeing_table').tablesorter({
                                headers: {
                                    0: { sorter: false },
                                },
                                dateFormat: "uk",
                                sortList: [[1, 0],]
                            });

                        });
                    </script>
                {% else %}
                    <p class="text-muted">No well being recorded for this gymnast.</p>
                {% endif %}
            </div>
            <div class="card-footer text-right text-muted pt-0">
                {% if request.user|has_group:"trainer" or request.user|is_user_equal_to_gymnast:gymnastid %}
                <a href="{% url 'wellbeing_create_for_gymnast' gymnastid %}">
                    <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">
    new Chart(document.getElementById("chartjs_wellbeing"), {
        type: 'line',
        data: {
            datasets: [
                {% if wellbeing_list %}
                {
                    label: 'Mindstate',
                    backgroundColor: 'rgb(255, 99, 132, 0.25)',
                    borderColor: 'rgb(255, 99, 132)',
                    fill: true,
                    data: [
                        {% for wellbeing in wellbeing_list %}
                        {
                            x: '{{ wellbeing.date | date:"d-m-Y" }}',
                            y: '{{ wellbeing.mindstate }}'
                        },
                        {% endfor %}
                    ]
                },
                {% endif %}
            ],
        },
        options: {
        scales: {
            xAxes: [{
                type: "time",
                time: {
                    parser: 'DD-MM-YYYY',
                    round: 'day'
                },
                scaleLabel: {
                    display: true,
                }
            },],
            yAxes: [{
                scaleLabel: {
                    display: true,
                },
                ticks: {
                    beginAtZero: true,
                    max: 10
                }
            }]
        },
        legend: {
            display: false,
        }
    },
    });
</script>