{% extends "base.html" %}

{% block content %}

<div class="row justify-content-center">
    <div class="col-12 col-sm-8 col-md-6">
        <div class="card">
            <div class="card-header">
                <h4 class="card-title mb-0">
                    <a href="{% url 'gymnast_details_tab' wellbeing.gymnast.id 'physiological' %}">{{ wellbeing.gymnast }}</a>'s well being on {{ wellbeing.date | date:"j F Y" }}
                </h4>
            </div>
            <div class="card-body text-center pb-0">
                <canvas id="chart_radar_wellbeing" class="chartjs" width="400" height="400"></canvas>
                <p class="text-muted">
                    Mindstate : {% if wellbeing.mindstate < 5%}<b><span class="text-danger">{% endif %}{{ wellbeing.mindstate }}{% if wellbeing.mindstate < 5%}</span></b>{% endif %}
                    &nbsp;&nbsp;|&nbsp;&nbsp;
                    Sleep : {% if wellbeing.sleep < 5%}<b><span class="text-danger">{% endif %}{{ wellbeing.sleep }}{% if wellbeing.sleep < 5%}</span></b>{% endif %}
                    &nbsp;&nbsp;|&nbsp;&nbsp;
                    Stress : {% if wellbeing.stress > 5%}<b><span class="text-danger">{% endif %}{{ wellbeing.stress }}{% if wellbeing.stress > 5%}</span></b>{% endif %}
                    &nbsp;&nbsp;|&nbsp;&nbsp;
                    Fatigue : {% if wellbeing.fatigue > 5%}<b><span class="text-danger">{% endif %}{{ wellbeing.fatigue }}{% if wellbeing.fatigue > 5%}</span></b>{% endif %}
                    &nbsp;&nbsp;|&nbsp;&nbsp;
                    Muscle soreness : {% if wellbeing.muscle_soreness > 5%}<b><span class="text-danger">{% endif %}{{ wellbeing.muscle_soreness }}{% if wellbeing.muscle_soreness > 5%}</span></b>{% endif %}
                </p>
                {% if wellbeing.to_markdown %}
                    {{ wellbeing.to_markdown | safe }}
                {% endif %}
            </div>
            <div class="card-footer row">
                <div class="col-6">
                    <a href="{% url 'wellbeing_list' %}">
                        <button type="submit" value="back" class="btn btn-icon btn-warning">
                            <i class="tim-icons icon-double-left"></i>
                        </button>
                    </a>
                </div>
                <div class="col-6 col-1 ml-auto text-right">
                    <a href="{% url 'wellbeing_update' wellbeing.id %}">
                        <button type="submit" value="update" class="btn btn-icon btn-warning">
                            <i class="tim-icons icon-pencil"></i>
                        </button>
                    </a>
                </div>
            </div>
        </div>
    </div>
</div>
{% endblock %}

{% block footerscript %}
<script type="text/javascript">
    var ctx = document.getElementById("chart_radar_wellbeing").getContext("2d");

    const data = {
        labels: [
            'Mind State',
            'Sleep',
            'Zen',
            'Rest',
            'Muscle',
        ],
        datasets: [{
            data: [{{ wellbeing.mindstate }}, {{ wellbeing.sleep }}, {{ wellbeing.get_inversed_stress }}, {{ wellbeing.get_inversed_fatigue }}, {{ wellbeing.get_inversed_muscle_soreness }}],
            fill: true,
            backgroundColor: 'rgba(255, 99, 132, 0.2)',
            borderColor: 'rgb(255, 99, 132)',
            pointBackgroundColor: 'rgb(255, 99, 132)',
            pointBorderColor: '#fff',
            pointHoverBackgroundColor: '#fff',
            pointHoverBorderColor: 'rgb(255, 99, 132)'
        }]
    };

    new Chart(ctx, {
        responsive: true,
        type: 'radar',
        data: data,
        options: {
            elements: {
                line: {
                    borderWidth: 3
                }
            },
            scales: {
                r: {
                    // angleLines: {
                    //     display: false
                    // },
                    suggestedMin: 0,
                    suggestedMax: 10,
                }
            },
            plugins: {
                legend: {
                    display: false,
                }
            }
        },
    });
</script>
{% endblock %}