{% extends "listing.html" %}

{% block page_title %}.: Program :.{% endblock %}

{% block title %}Program{% endblock %}

{% block searchurl %}program{% endblock %}
{% block addurl %}program{% endblock %}
{% block search %}program{% endblock %}

{% block upper %}
<select id="select_gymnast" class="form-control col-sm-3">
    {% if not gymnastid %}
        <option value="" selected disabled>Choose your gym…</option>
    {% endif %}

    {% for gymnast in gymnast_list %}
        <option value="{{ gymnast.id }}">{{ gymnast }}</option>
    {% endfor %}
</select>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
<select id="select_date" class="form-control col-sm-3">
    <option value="" selected disabled>Choose the date…</option>

    {% for date in date_list %}
        <option value="{{ date }}">{{ date | date:"d-m-Y" }}</option>
    {% endfor %}
</select>
<br />
<br />
{% if next_date or previous_date %}
<div class="flextable table-actions">
    <div class="flextable-item flextable-primary">
        {% if previous_date %}
        <a href="{% url 'program_listing_for_gymnast_and_date' gymnastid previous_date %}"><button type="button" class="btn btn-primary-outline"><span class="icon icon-chevron-left"></span></button></a>
        {% endif %}
    </div>
    <div class="flextable-item">
        {% if next_date %}
        <a href="{% url 'program_listing_for_gymnast_and_date' gymnastid next_date %}"><button type="button" class="btn btn-primary-outline"><span class="icon icon-chevron-right"></span></button></a>
        {% endif %}
    </div>
</div>
{% endif %}
{% endblock %}

{% block datacontent %}

{% if line_list %}
    <thead>
        <tr>
            <th></th>
            <th>Date</th>
            <th>Gymnast</th>
            <th>Order</th>
            <th>Todo</th>
        </tr>
    </thead>
    <tbody>
        {% for line in line_list %}
            <tr>
                <td>
                    <a href="{% url 'program_update' line.id %}">
                        <span class="icon icon-pencil"></span>
                    </a>
                </td>
                <td>{{ line.date | date:"d-m-Y" }}</td>
                <td><a href="{% url 'gymnast_details' line.gymnast.id %}">{{ line.gymnast }}</a></td>
                <td>{{ line.order }}</td>
                <td>{{ line.todo }}</td>
            </tr>
        {% endfor %}
    </tbody>
{% endif %}

{% endblock %}

{% block footerscript %}
<script type="text/javascript">
    $(document).ready(function(){
        $('#select_gymnast').change(function(){
            // alert('getting date\'s list !');
            $.ajax({
                method: "GET",
                url: "/program/getdates/gymnast/" + $('#select_gymnast').val(),
                cache: false,
                dataType: 'json',
                success: function (data) { 
                    $.each(data, function(index, element) {
                        $('#select_date').append('<option value="' + element.date + '">' + element.date + '</option>');
                    });
                }
            })
        });

        $('#select_date').change(function(){
            // alert('Retrieving Program\'s element !');
            window.location = '/program/gymnast/' + $('#select_gymnast').val() + '/date/' + $(this).val();
            return false;
        });

        $('[data-sort="table"]').tablesorter({
            headers: {
              0: { sorter: false },      // disable first column
            },
            dateFormat: "uk",
            sortList: [[1,0], [2,0], [3,0]]
        })
    });
</script>
{% endblock %}