{% extends 'leprikon/form.html' %}
{% load i18n sekizai_tags static %}

{% block content %}
{{ block.super }}

{% include 'leprikon/static/bootstrap-datetimepicker.html' %}
{% include 'leprikon/static/bootstrap-multiselect.html' %}

{% addtoblock "js" %}
<script type="text/javascript">

$(document).ready(function() {
    $('#id_leaders').multiselect({
        includeSelectAllOption: true,
        includeSelectAllIfMoreThan: 3,
        selectAllText: '{% trans 'select all' %}',
        nonSelectedText: '',
        allSelectedText: '{% trans 'all' %}',
        numberDisplayed: 4,
        nSelectedText: '{% trans 'selected' %}',
    });

    $('#id_alternates').multiselect({
        enableFiltering: true,
        filterPlaceholder: '{% trans 'Search' %}',
        includeSelectAllIfMoreThan: 3,
        selectAllText: '{% trans 'select all' %}',
        nonSelectedText: '',
        allSelectedText: '{% trans 'all' %}',
        numberDisplayed: 4,
        nSelectedText: '{% trans 'selected' %}',
    });

    $('#id_participants').multiselect({
        enableFiltering: true,
        filterPlaceholder: '{% trans 'Search' %}',
        includeSelectAllOption: true,
        includeSelectAllIfMoreThan: 3,
        selectAllText: '{% trans 'select all' %}',
        nonSelectedText: '',
        allSelectedText: '{% trans 'all' %}',
        numberDisplayed: 4,
        nSelectedText: '{% trans 'selected' %}',
    });

    $('#id_participants_instructed').multiselect({
        enableFiltering: true,
        filterPlaceholder: '{% trans 'Search' %}',
        includeSelectAllOption: true,
        includeSelectAllIfMoreThan: 3,
        selectAllText: '{% trans 'select all' %}',
        nonSelectedText: '',
        allSelectedText: '{% trans 'all' %}',
        numberDisplayed: 4,
        nSelectedText: '{% trans 'selected' %}',
    });

    $('#id_date').on('dp.change', function(e) {
        d = e.date.toDate();
        date = `${d.getFullYear()}-${(d.getMonth()+101).toString().slice(1)}-${(d.getDate()+100).toString().slice(1)}`;
        $.getJSON(`{% url 'api:journal-participants' form.instance.journal.id %}?date=${date}`, function(result) {
            result = result.map(function (item) { return {value: item.id, label: item.label} });
            $('#id_participants').multiselect('dataprovider', result);
            $('#id_participants_instructed').multiselect('dataprovider', result);
        });
    });

});

</script>
{% endaddtoblock %}

{% endblock %}
