{% extends "base.html" %}

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

{% block title %}Attendance{% endblock %}

{% block content %}

<hr class="m-t">

{% if club %}
<h4>{{ club.name }} - Groupe {{ group.name }}</h4>
<table class="table table-striped">
    <tr>
        <td>
            {{ monthName|title }} {{ selectedYear }} ({% for day in courseDays %}{% if forloop.last %}{{ day }}{% else %}{{ day }}, {% endif %}{% endfor %})
        </td>
        <td align="right">
            {% for trainer in trainers %}{% if forloop.last %}{{ trainer }}{% else %}{{ trainer }}, {% endif %}{% endfor %}
        </td>
    </tr>
</table>
<br />
<div class="row">
    <div class="col-md-12 m-b-md">
        <div class="scrollable">
            <table class="table">
                <thead>
                    <tr>
                        <th>&nbsp;</th>
                        {% for day in dayList %}<th class="centered">{{ day.0 }}</th>{% endfor %}
                    </tr>
                </thead>
                <tbody>
                    {% for gymnast, box in attendances.items %}
                    <tr>
                        <td><a href="/gymnast/{{ gymnast.id }}">{{ gymnast }}</a></td>
                        {% for res in box %}
                        <td class="centered"><div class="checkbox-inline custom-control custom-checkbox"><label><input type="checkbox" name="test" data-gym="{{ gymnast.id }}" data-groupid="{{ selectedGroupid }}" data-course="{{ res.2 }}" data-day="{{ res.0 }}" data-month="{{ selectedMonth }}" data-date="{{ selectedYear }}-{{ selectedMonth }}-{{ res.0 }}" class="attendance cb{{ res.0 }}{{ selectedMonth }}" {% if res.1 %} checked {% endif %} /><span class="custom-control-indicator"></span></label></div></td>
                        {% endfor %}
                    </tr>
                    {% endfor %}
                    <tr>
                        <th>&nbsp;</th>
                        {% for day in dayList %}
                        <td class="centered">
                            {% if day.0 <= today and day.0 >= ToYesterday and selectedMonth == tomonth %}
                            <div class="checkbox-inline custom-control custom-checkbox"><label><input type="checkbox" class="checkAll" data-day="{{ day.0 }}" data-month="{{ selectedMonth }}"><span class="custom-control-indicator"></span></label></div>
                            {% endif %}
                        </td>
                        {% endfor %}
                    </tr>
                </tbody>
            </table>
        </div>
    </div>
</div>
{% endif %}

<div class="row">
    <div class="col-md-12 m-b-md text-md-right">
        <form name="form" method="GET" action="/attendance/" class="form-inline pos-r w-full">
            <select name="groupid" class="custom-select custom-select-sm">
                {% for group in grouplist %}
                <option value="{{ group.id }}" {% if group.id == selectedGroupid %} selected {% endif %}>{{ group }}</option>
                {% endfor %}
            </select>
            <select name="year" class="custom-select custom-select-sm">
                {% for year in yearslist %}
                <option value="{{ year }}" {% if year == selectedYear %} selected {% endif %}>{{ year }}</option>
                {% endfor %}
            </select>
            <select name="month" class="custom-select custom-select-sm">
                {% for month in monthlist.items %}
                <option value="{{ month.0 }}" {% if month.0 == selectedMonth %} selected {% endif %}>{{ month.1 }}</option>
                {% endfor %}
            </select>
            <input type="submit" value="Afficher" class="btn btn-sm btn-primary-outline" />
        </form>
    </div>
</div>

<script type="text/javascript">
    $(function(){
        update_checkbox = function(checkbox) {
            // JSON.stringify(obj, null, 4);
            // console.log(checkbox);
            $.ajax({
                url: '/attendance/insert',
                data: {
                    gymnastid: $(checkbox).attr('data-gym'),
                    courseid: $(checkbox).attr('data-course'),
                    date: $(checkbox).attr('data-date'),
                    // year: $(checkbox).attr('data-year'),
                    // month: $(checkbox).attr('data-month'),
                    // day: $(checkbox).attr('data-day')
                },
                type: 'POST',
                success: function (response) {
                    console.log('yiiiiiiiiiiah');
                },
                error: function (jqXHR, textStatus, errorThrown) {
                    console.log(textStatus, errorThrown);
                },
                failure: function (jqXHR, textStatus, errorThrown) {
                    console.log(textStatus, errorThrown);
                }
            })
        };

        $('.attendance').change(function() { 
            update_checkbox($(this));
        });


        $('.checkAll').click(function(){
            var month = $(this).attr('data-month');
            var day = $(this).attr('data-day');

            if($(this).prop('checked')) {
                $('.cb' + day + month).each(function(){
                    $(this).prop('checked', true);
                    update_checkbox($(this));
                });
            } else { /* checkbox unchecked */
                $('.cb' + day + month).each(function(){
                    $(this).prop('checked', false);
                });
                /* Pour chaque check box WHERE data-day = day AND data-month = month */
                /* uncheck la check-box */
            }
        });
    });
</script>

{% endblock %}