{% load has_group %}

<div class="row justify-content-center">
    <div class="col-12 pl-0">
        <div class="card mb-2">
            <div class="card-header">
                <h4>Documents</h4>
            </div>
            <div class="card-body">
                <form class="form-horizontal" id="formulaire" name="formulaire">
                    <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">
                            {% 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">
                                <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">
                            {% 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">
                                <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">
                            {% 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">
                                <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">
                            {% 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">
                                <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">
                                <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>
    </div>
</div>

<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();

    function check_comparison_fields(){
        alert("check comparison fields")
        if($('#select_week_number1').val() == '')
            return false;

        if($('#select_week_number2').val() == '')
            return false;

        if ($('#select_week_number2').val() == $('#select_week_number2').val())
            return false;

        return true;
    }

    function show_comparison_button(){
        var tmp_url = "{% url 'gymnast_generate_report_week_comparison' gymnast.id '_season_source_' 9999 '_season_target_' 8888 %}";

        season_source = $('#select_season_for_week1').val()
        week_source = $('#select_week_number1').val()
        season_target = $('#select_season_for_week2').val()
        week_target = $('#select_week_number2').val()

        target_url = tmp_url.replace('_season_source_', season_source).replace('9999', week_source).replace('_season_target_', season_target).replace('8888', week_target);

        $('#week_comprison_pdf_link').attr('href', target_url);
        $('#span_week_comparison_button_generate').show()
    }

    $('#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(function(){
        var test = check_comparison_fields();
        if(test)
            show_comparison_button();
        else
            $('#span_week_comparison_button_generate').hide();
    });

    $('#select_week_number1').change(function(){
        var test = check_comparison_fields();
        if(test)
            show_comparison_button();
        else
            $('#span_week_comparison_button_generate').hide();
    });

    $('#select_season_for_week2').change(function(){
        var test = check_comparison_fields();
        if(test)
            show_comparison_button();
        else
            $('#span_week_comparison_button_generate').hide();
    });

    $('#select_week_number2').change(function(){
        var test = check_comparison_fields();
        if(test)
            show_comparison_button();
        else
            $('#span_week_comparison_button_generate').hide();
    });


    $('#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>