{% extends "base.html" %}

{% load format %}
{% load statistics %}

{% block page_title %}{{ gymnast.user.first_name }} {{ gymnast.user.last_name }}{% endblock %}

{% block content %}
<div class="row">
    <div class="col-12 col-sm-4 col-md-4 col-lg-4 m-b-md">
        <div class="card card-user">
            <div class="card-body">
                <p class="card-text">
                    <div class="author">
                        <div class="block block-one"></div>
                        <div class="block block-two"></div>
                        <div class="block block-three"></div>
                        <div class="block block-four"></div>
                        <a href="javascript:void(0)">
                            {% if gymnast.picture %}
                                <img src="{{ gymnast.picture.url }}" alt="{{ gymnast }}" class="avatar">
                            {% endif %}
                            <h4 class="title">{{ gymnast.firstname }} {{ gymnast.lastname }}</h4>
                        </a>
                        <!-- <p class="description">
                            Ceo/Co-Founder
                        </p> -->
                    </div>
                </p>
                <div class="card-description">
                    {{ gymnast.birthdate | date:"d F Y" }} ({{ gymnast.age }} year - {{ gymnast.actual_year_of_pratice }}) - <span class="text-info"><b>{{ gymnast.get_orientation_display }}</b></span><br/>
                    <br \>
                    {% if gymnast.address %}
                        {{ gymnast.address }} - {{ gymnast.postal }} {{ gymnast.city }}<br \>
                    {% endif %}

                    {% if gymnast.gsm %}
                        {{ gymnast.gsm|format_number }}{% if gymnast.email %}&nbsp;&nbsp;&nbsp;<a href="mailto:{{ gymnast.email }}"><span class="tim-icons icon-email-85 text-warning"></span></a>{% endif %}<br \>
                        <br \>
                    {% endif %}

                    {% if gymnast.gsm_mother or gymnast.email_mother %}
                        Mother : {{ gymnast.gsm_mother|format_number }}{% if gymnast.email_mother %}&nbsp;&nbsp;&nbsp;<a href="mailto:{{ gymnast.email_mother }}"><span class="tim-icons icon-email-85 text-warning"></span></a>{% endif %}
                    {% endif %}<br \>
                    {% if gymnast.gsm_father or gymnast.email_father %}
                        Father&nbsp;&nbsp;:&nbsp;{{ gymnast.gsm_father|format_number }}{% if gymnast.email_father %}&nbsp;&nbsp;&nbsp;<a href="mailto:{{ gymnast.email_father }}"><span class="tim-icons icon-email-85 text-warning"></span></a>{% endif %}
                    {% endif %}
                </div>
            </div>
        </div>
    </div>

    <div class="col-12 col-sm-4 col-md-4 col-lg-4">
        <canvas id="chartjs_completude" width="300" height="300" style="width: 300px; height: 300px"></canvas>
        <!-- <div class="text-muted"><strong>Completude</strong> ({{ totalSkill }})</div> -->
    </div>

    <div class="col-12 col-sm-4 col-md-4 card">
        {% display_level gymnast %}
    </div>

    <div class="row">
        <div class="col-12 col-sm-2 col-md-2 col-lg-1">
            <!--
            color-classes: "nav-pills-primary", "nav-pills-info", "nav-pills-success", "nav-pills-warning","nav-pills-danger"
            -->
            <ul class="nav nav-pills nav-pills-primary nav-pills-icons flex-column">
                <li class="nav-item">
                    <a class="nav-link get-info {% if tab == 'program' %}active{% endif %}" data-toggle="tab" href="#program" data-ref="#program" data-url="program/" id="display_program">
                        <i class="tim-icons icon-calendar-60"></i> Program
                    </a>
                </li>
                <li class="nav-item">
                    <a class="nav-link get-info {% if tab is None or tab == 'level' %}active{% endif %}" data-toggle="tab" href="#statistics" data-ref="#statistics" data-url="statistics/" id="display_statistics">
                        <i class="tim-icons icon-sound-wave"></i> Level
                    </a>
                </li>
                <li class="nav-item">
                    <a class="nav-link get-info {% if tab == 'routine' %}active{% endif %}" data-toggle="tab" href="#routine" data-ref="#routine" data-url="routine/" id="display_routines">
                        <i class="tim-icons icon-components"></i> Routines
                    </a>
                </li>
                <li class="nav-item">
                    <a class="nav-link get-info {% if tab == 'scores' %}active{% endif %}" data-toggle="tab" href="#scores" data-ref="#scores" data-url="scores_chrono/" id="display_scores_chrono">
                        <i class="tim-icons icon-settings"></i> Scores
                    </a>
                </li>
                <li class="nav-item">
                    <a class="nav-link get-info {% if tab == 'event' %}active{% endif %}" data-toggle="tab" href="#event" data-ref="#event" data-url="event_accident/" id="display_event">
                        <i class="tim-icons icon-calendar-60"></i> Events
                    </a>
                </li>
            </ul>
        </div>
        <div class="col-12 col-sm-10 col-md-10 col-lg-11">
            <div class="tab-content">
                <div class="tab-pane {% if tab == 'program' %}active{% endif %}" id="program"></div>

                <div class="tab-pane {% if tab is None or tab == 'level' %}active{% endif %}" id="statistics"></div>
                
                <div class="tab-pane {% if tab == 'routine' %}active{% endif %}" id="routine"></div>

                <div class="tab-pane {% if tab == 'scores' %}active{% endif %}" id="scores"></div>
                
                <div class="tab-pane {% if tab == 'event' %}active{% endif %}" id="event"></div>
            </div>
        </div>
    </div>
</div>
{% endblock %}

{% block footerscript %}
<script type="text/javascript">
    // Chart.pluginService.register({
    //     beforeDraw: function (chart) {
    //         if (chart.config.options.elements.center) {
    //             // Get ctx from string
    //             var ctx = chart.chart.ctx;
                
    //             // Get options from the center object in options
    //             var centerConfig = chart.config.options.elements.center;
    //             var fontStyle = centerConfig.fontStyle || 'Arial';
    //             var txt = centerConfig.text;
    //             var color = centerConfig.color || '#000';
    //             var sidePadding = centerConfig.sidePadding || 20;
    //             var sidePaddingCalculated = (sidePadding/100) * (chart.innerRadius * 2)
                
    //             // Start with a base font of 30px
    //             ctx.font = "30px " + fontStyle;
                
    //             // Get the width of the string and also the width of the element minus 10 to give it 5px side padding
    //             var stringWidth = ctx.measureText(txt).width;
    //             var elementWidth = (chart.innerRadius * 2) - sidePaddingCalculated;

    //             // Find out how much the font can grow in width.
    //             var widthRatio = elementWidth / stringWidth;
    //             var newFontSize = Math.floor(30 * widthRatio);
    //             var elementHeight = (chart.innerRadius * 2);

    //             // Pick a new font size so it will not be larger than the height of label.
    //             var fontSizeToUse = Math.min(newFontSize, elementHeight);

    //             // Set font settings to draw it correctly.
    //             ctx.textAlign = 'center';
    //             ctx.textBaseline = 'middle';
    //             var centerX = ((chart.chartArea.left + chart.chartArea.right) / 2);
    //             var centerY = ((chart.chartArea.top + chart.chartArea.bottom) / 2);
    //             ctx.font = fontSizeToUse+"px " + fontStyle;
    //             ctx.fillStyle = color;
                
    //             // Draw text in center
    //             ctx.fillText(txt, centerX, centerY);
    //             // ctx.fillText('Blah !', centerX, centerY);
    //         }
    //     }
    // });
    
    // canvas.style.width = '300px';
    // canvas.style.height = '300px';

    new Chart(document.getElementById("chartjs_completude"),{
        // responsive: true,
        // width: 300,
        // height: 300,
        type: "doughnut",
        // aspectRatio:1,
        data: {
            datasets:[
                {
                    borderWidth: 1,
                    data:[
                        {{ totalKnownSkill }},
                        {{ totalUnknownSkill }}
                    ],
                    backgroundColor:[
                        "#1bc98e", /*"#1ca8dd",*/
                        "#FF2F92"   /*"#1bc98e"*/
                    ]
                }
            ],
            labels: ['Known Skill ', 'Unknown Skill '],
        },
        options: {
            legend: {
                display: false,
            },
            cutoutPercentage: 55,
            maintainAspectRatio: false,
        },
    });
    // chart.resize(300, 300);
    // chart.resize();

    // Ceci fonctionne MAIS cela applique l'affichage a TOUS les graphiques présents.
    // TODO : Corriger pour que cela n'affiche QUE sur le graphique voulu.
    // Références :
    //  https://stackoverflow.com/questions/37300466/extension-for-chart-js-2-x
    //  https://stackoverflow.com/questions/38243032/event-handler-on-center-of-doughnut-chart-using-chart-js
    //
    // Chart.pluginService.register({
    //     beforeDraw: function(chart) {
    //         var width = chart.chart.width;
    //         var height = chart.chart.height;
    //         var ctx = chart.chart.ctx;

    //         ctx.restore();
    //         var fontSize = (height / 114).toFixed(2);
    //         ctx.font = fontSize + "em sans-serif";
    //         ctx.textBaseline = "middle";
    //         ctx.fillStyle = "#999999";

    //         var text = '75%'; /* valeur à calculer */
    //         var textX = Math.round((width - ctx.measureText(text).width) / 2);
    //         var textY = height / 2;

    //         ctx.fillText(text, textX, textY);
    //         ctx.save();
    //     }
    // });

    $(document).ready(function() {
        var default_url = '/gymnast/' + {{ gymnast.id }} + '/';

        {% if tab is None or tab == 'level' %}
            tab_url = default_url + 'statistics/';
            var tab_div = '#statistics';
        {% elif tab == 'program' %}
            tab_url = default_url + 'program/';
            var tab_div = '#program';
        {% elif tab == 'routine' %}
            tab_url = default_url + 'routine/';
            var tab_div = '#routine';
        {% elif tab == 'scores' %}
            tab_url = default_url + 'scores_chrono/';
            var tab_div = '#scores';
        {% elif tab == 'event' %}
            tab_url = default_url + 'event_accident/';
            var tab_div = '#event';
        {% endif %}

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

        $('.get-info').click(function(){
            $.ajax({
                url: default_url + $(this).data("url"),
                dataType: "html",
                context: $(this),
                success: function(data) {
                    $($(this).data("ref")).replaceWith($($(this).data("ref")).html(data));
                },
                error: function (exception) {
                    console.log(exception);
                }
            });
        });
    });
</script>
{% endblock%}