{% 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>Actives 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 'routine_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">{{ ghr.routine.difficulty }}</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="tim-icons icon-simple-add"></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_done_list %}
                    <div class="pr-1 pl-1">
                        <table class="table tablesorter table-striped table-condensed" data-sort="table" id="stats_table">
                            <thead>
                                <tr>
                                    <th style="width: 15%" class="header text-center">Date</th>
                                    <th style="width: 30%" class="header text-left">Routine</th>
                                    <th style="width: 8%" class="header text-center">Type</th>
                                    <th style="width: 10%" class="header text-center"># Try</th>
                                    <th style="width: 12%" class="header text-center"># Success</th>
                                </tr>
                            </thead>
                            <tbody>
                                {% for routinedone in routine_done_list %}
                                <tr>
                                    <td class="text-center">{{ routinedone.date |  date:"d-m-Y"}}</td>
                                    <td class="text-left">
                                        {% if routinedone.routine %}
                                            <a href="{% url 'routine_details' routinedone.routine.id %}">{{ routinedone.routine.long_label }}</a>
                                        {% else %}
                                            -
                                        {% endif %}
                                    </td>
                                    <td class="text-center">{{ routinedone.get_routine_type_display }}</td>
                                    <td class="text-center">{{ routinedone.number_of_try }}</td>
                                    <td class="text-center">{{ routinedone.number_of_successes }}</td>
                                </tr>
                                {% endfor %}
                            </tbody>
                        </table>
                    </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 text-right text-muted pt-0">
                    {% if routine_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="fal 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="tim-icons icon-simple-add"></i>
                            </button>
                        </a>
                    {% endif %}
                </div>
            </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);
                //     }
                // });
            });
        });
    });
</script>