{% extends "listing.html" %}
{% load get_item %}

{% block datacontent %}
<div class="row justify-content-center">
    <div class="col-6 col-sm-6 col-md-6 col-lg-6 col-xl-5">
        <div class="card mb-0">
            <div class="card-header">
                <div class="row">
                    <div class="col-4">
                        <h4 class="">Notifications</h4>
                    </div>
                </div>
            </div>
            <div class="card-body pt-0">
                <div class="table-responsive">
                    {% for gymnast in gymnast_list %}
                    <div class="row">
                        <div class="col-12">
                            <b>{{ gymnast }}</b>
                        </div>
                    </div>
                    <div class="row">
                        {% for functionality in functionality_list %}
                        <div class="col-md-8 ml-3">
                            {{ functionality }}
                        </div>
                        <div class="col-md-3">
                            <input type="checkbox" name="checkbox" class="update_notification" data-gymnast="{{ gymnast.id }}" data-functionality="{{ functionality.id }}" {% if functionality.id in notification_dict|get_item:gymnast.id %}checked{% endif %} />
                          </div>
                        {% endfor %}
                    </div>
                    <hr />
                    {% endfor %}
                </div>
            </div>
        </div>
    </div>
</div>
{% endblock %}

{% block footerscript %}
<script type="text/javascript">
    $(document).ready(function() {

        $('.update_notification').change(function() {
            if(this.checked) {
                $.ajax({
                    url: "{% url 'notification_add' %}",
                    method: "POST",
                    data: {
                        gymnast_id: $(this).data("gymnast"),
                        functionality_id: $(this).data("functionality"),
                        csrfmiddlewaretoken: '{{ csrf_token }}'
                    },
                    success: function(data) {
                        alert("Demande de notification ajoutée.");
                    }
                });

            } else {
                $.ajax({
                    url: "{% url 'notification_remove' %}",
                    method: "POST",
                    data: {
                        gymnast_id: $(this).data("gymnast"),
                        functionality_id: $(this).data("functionality"),
                        csrfmiddlewaretoken: '{{ csrf_token }}'
                    },
                    success: function(data) {
                        alert("Demande de notification supprimée.");
                    }
                });
            }
            // $('#textbox1').val(this.checked);
        });

    });
</script>
{% endblock %}