{% extends "base.html" %}

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

{% block content %}
<div class="card mb-0">
    <div class="card-header">
        <h3 class="mb-0">{% if gymnast.id in request.session.available_gymnast %}<a href="{% url 'gymnast_details' gymnast.id %}">{% endif %}{{ gymnast }}</a></h3>
    </div>
    <div class="card-body">
        <form class="form-horizontal" id="form" name="form">
            <div class="form-group row">
                <label for="select_season_for_week" class="col-7 col-sm-4 col-md-5 col-lg-5 col-xl-5 col-form-label"><b>Week</b> report for</label>
                <div class="col-7 col-sm-4 col-md-2 col-lg-2 col-xl-2">
                    <select id="select_season_for_week" class="form-control selectpicker">
                    {% for season in season_list %}
                        <option value="{{ season }}" {% if actual_season|stringformat:"s" == season %}selected{% endif %}>{{ season }}</option>
                    {% endfor %}
                    </select>
                </div>
                <div class="col-4 col-sm-4 col-md-2 col-lg-2 col-xl-1">
                    <select id="select_week_number" class="form-control selectpicker">
                        <option value="">---</option>
                        {% for week_number in week_number_list %}
                            <option value="{{ week_number }}">{{ week_number }}</option>
                        {% endfor %}
                    </select>
                </div>
                <div class="col-5 col-sm-5 col-md-2 col-lg-2 col-xl-2">
                    <span id="span_week_button_generate">
                        <a href="" id="week_pdf_link">
                            <button type="button" class="btn btn-icon btn-warning mt-0">
                                <i class="far fa-download"></i>
                            </button>
                        </a>
                    </span>
                </div>
            </div>
            <div class="form-group row">
                <label for="select_season_for_week" class="col-7 col-sm-4 col-md-5 col-lg-5 col-xl-5 col-form-label"><b>Week comparison</b></label>
                <div class="col-7 col-sm-4 col-md-2 col-lg-2 col-xl-2">
                    <select id="select_season_for_week1" class="form-control selectpicker">
                    {% for season in season_list %}
                        <option value="{{ season }}" {% if actual_season|stringformat:"s" == season %}selected{% endif %}>{{ season }}</option>
                    {% endfor %}
                    </select>
                </div>
                <div class="col-4 col-sm-4 col-md-2 col-lg-2 col-xl-1">
                    <select id="select_week_number1" class="form-control selectpicker">
                        <option value="">---</option>
                        {% for week_number in week_number_list %}
                            <option value="{{ week_number }}">{{ week_number }}</option>
                        {% endfor %}
                    </select>
                </div>
                <label for="select_season_for_week" class="col-md-2 pt-3 text-center">and</label>
                <div class="col-7 col-sm-4 col-md-2 col-lg-2 col-xl-2">
                    <select id="select_season_for_week2" class="form-control selectpicker">
                    {% for season in season_list %}
                        <option value="{{ season }}" {% if actual_season|stringformat:"s" == season %}selected{% endif %}>{{ season }}</option>
                    {% endfor %}
                    </select>
                </div>
                <div class="col-4 col-sm-4 col-md-2 col-lg-2 col-xl-1">
                    <select id="select_week_number2" class="form-control selectpicker">
                        <option value="">---</option>
                        {% for week_number in week_number_list %}
                            <option value="{{ week_number }}">{{ week_number }}</option>
                        {% endfor %}
                    </select>
                </div>
                <div class="col-5 col-sm-5 col-md-2 col-lg-2 col-xl-2">
                    <span id="span_week_comparison_button_generate">
                        <a href="" id="week_comprison_pdf_link">
                            <button type="button" class="btn btn-icon btn-warning mt-0">
                                <i class="far fa-download"></i>
                            </button>
                        </a>
                    </span>
                </div>
            </div>
            <hr>
            <div class="form-group row">
                <label for="select_season_for_month" class="col-7 col-sm-4 col-md-5 col-lg-5 col-xl-5 col-form-label"><b>Month</b> report for</label>
                <div class="col-7 col-sm-4 col-md-2 col-lg-2 col-xl-2">
                    <select id="select_season_for_month" class="form-control selectpicker">
                    {% for season in season_list %}
                        <option value="{{ season }}" {% if actual_season|stringformat:"s" == season %}selected{% endif %}>{{ season }}</option>
                    {% endfor %}
                    </select>
                </div>
                <div class="col-4 col-sm-4 col-md-2 col-lg-2 col-xl-2">
                    <select id="select_month_number" class="form-control selectpicker">
                        <option value="">---</option>
                        <option value="9">Septembre</option>
                        <option value="10">Octobre</option>
                        <option value="11">Novembre</option>
                        <option value="12">Decembre</option>
                        <option value="1">Janvier</option>
                        <option value="2">Fevrier</option>
                        <option value="3">Mars</option>
                        <option value="4">Avril</option>
                        <option value="5">Mai</option>
                        <option value="6">Juin</option>
                        <option value="7">Juillet</option>
                        <option value="8">Aout</option>
                    </select>
                </div>
                <div class="col-5 col-sm-5 col-md-2 col-lg-2 col-xl-2">
                    <span id="span_month_button_generate">
                        <a href="" id="month_pdf_link">
                            <button type="button" class="btn btn-icon btn-warning mt-0">
                                <i class="far fa-download"></i>
                            </button>
                        </a>
                    </span>
                </div>
            </div>
            <div class="form-group row">
                <label for="select_season" class="col-7 col-sm-4 col-md-5 col-lg-5 col-xl-5 col-form-label"><b>Season</b> report for</label>
                <div class="col-7 col-sm-4 col-md-2 col-lg-2 col-xl-2">
                    <select id="select_season" class="form-control selectpicker">
                        <option value="">---</option>
                    {% for season in season_list %}
                        <option value="{{ season }}">{{ season }}</option>
                    {% endfor %}
                    </select>
                </div>
                <div class="col-5 col-sm-5 col-md-2 col-lg-2 col-xl-2">
                    <span id="span_season_button_generate">
                        <a href="" id="season_pdf_link">
                            <button type="button" class="btn btn-icon btn-warning mt-0">
                                <i class="far fa-download"></i>
                            </button>
                        </a>
                    </span>
                </div>
            </div>
            <div class="form-group row">
                <label for="" class="col-7 col-sm-4 col-md-5 col-lg-5 col-xl-5 col-form-label">Generate <b>timeline</b></label>
                <div class="col-5 col-sm-5 col-md-2 col-lg-2 col-xl-2">
                    <a href="{% url 'gymnast_timeline_export' gymnast.id %}">
                        <button type="button" class="btn btn-icon btn-warning mt-0">
                            <i class="far fa-download"></i>
                        </button>
                    </a>
                </div>
            </div>
        </form>
    </div>
</div>
{% endblock %}


{% block footerscript %}
<script type="text/javascript">

    $('#span_week_button_generate').hide();
    $('#span_week_comparison_button_generate').hide();
    $('#span_month_button_generate').hide();
    $('#span_season_button_generate').hide();

    $('#select_season_for_week').change(function(){
        var tmp_url = "{% url 'get_distinct_week_number_for_season_and_gymnast' gymnast.id '_season_label_' %}";
        var season_label = $(this).children("option:selected").val();
        target_url = tmp_url.replace('_season_label_', season_label);

        $.getJSON(target_url, function(data) {
            if (!$.trim(data))
                $('#week_management').hide();
            else
                $('#week_management').show();

            $("#select_week_number option").remove();   // Remove all <option> child tags.
            $.each(data, function(key, value) {         // Iterates through a collection
                $("#select_week_number").append(        // Append an object to the inside of the select box
                    $("<option></option>").text(value).val(value)
                );
            });
        });
    });

    $('#select_season_for_week1').change();
    $('#select_week_number1').change();
    $('#select_season_for_week2').change();
    $('#select_week_number2').change();

    $('#select_week_number').change(function(){
        if ($('#select_week_number').val() != "") {
            var tmp_url = "{% url 'gymnast_report_export_for_week_number' gymnast.id '_season_label_' 9999 %}";
            var season_label = $('#select_season_for_week').children("option:selected").val();
            var week_number = $('#select_week_number').children("option:selected").val();
            target_url = tmp_url.replace('_season_label_', season_label).replace('9999', week_number);
            $('#week_pdf_link').attr('href', target_url);
            $('#span_week_button_generate').show();
        } else
            $('#span_week_button_generate').hide();
    });

    $('#select_month_number').change(function(){
        if ($('#select_month_number').val() != "") {
            var tmp_url = "{% url 'gymnast_report_export_for_month_number' gymnast.id '_season_label_' 9999 %}";
            var season_label = $('#select_season_for_month').children("option:selected").val();
            var month_number = $('#select_month_number').children("option:selected").val();
            target_url = tmp_url.replace('_season_label_', season_label).replace('9999', month_number);
            $('#month_pdf_link').attr('href', target_url);
            $('#span_month_button_generate').show();
        } else
            $('#span_month_button_generate').hide();
    });

    $('#select_season').change(function(){
        if ($('#select_season').val() != "") {
            var tmp_url = "{% url 'gymnast_report_export_for_season' gymnast.id '_season_label_' %}";
            var season_label = $('#select_season').children("option:selected").val();
            target_url = tmp_url.replace('_season_label_', season_label);
            $('#season_pdf_link').attr('href', target_url);
            $('#span_season_button_generate').show();
        } else
            $('#span_season_button_generate').hide();
    });

</script>
{% endblock %}