{% extends "base.html" %}

{% load crispy_forms_tags crispy_forms_filters %}
{% load i18n %}

{% block content %}
    <div class="alert alert-info">
        <p>
            {% blocktrans trimmed %}
            On this page, you can manage the juries of the pool. You can add a new jury by entering the email address
            of the jury. If the jury is not registered, the account will be created automatically. If the jury already
            exists, its account will be autocompleted and directly linked to the pool.
            {% endblocktrans %}
        </p>
    
        <p>
            {% blocktrans trimmed %}
            On this page, you can also define the president of the jury, who will have the right to see all solutions
            and if necessary define the notes of other jury members.
            {% endblocktrans %}
        </p>
    </div>

    <hr>

    {% for jury in pool.juries.all %}
        <div class="row my-3 px-0">
            <div class="col-md-5 px-1">
                <input type="email" class="form-control" value="{{ jury.user.email }}" disabled>
            </div>
            <div class="col-md-3 px-1">
                <input type="text" class="form-control" value="{{ jury.user.first_name }}" disabled>
            </div>
            <div class="col-md-3 px-1">
                <input type="text" class="form-control" value="{{ jury.user.last_name }}" disabled>
            </div>
            <div class="col-md-1 px-1">
                <div class="btn-group-vertical btn-group-sm">
                    {% if jury == pool.jury_president %}
                        <button class="btn btn-success">
                            <i class="fas fa-crown"></i> {% trans "PoJ" %}
                        </button>
                    {% else %}
                        <a href="{% url 'participation:pool_preside' pk=pool.pk jury_id=jury.id %}"
                                class="btn btn-warning">
                            <i class="fas fa-crown"></i> {% trans "Preside" %}
                        </a>
                    {% endif %}
                    <a href="{% url 'participation:pool_remove_jury' pk=pool.pk jury_id=jury.id %}"
                            class="btn btn-danger">
                        <i class="fas fa-trash"></i> {% trans "Remove" %}
                    </a>
                </div>
            </div>
        </div>
    {% endfor %}

    {{ form|as_crispy_errors }}
    {% crispy form %}

    <datalist id="juries-email">
    </datalist>

    <datalist id="juries-first-name">
    </datalist>

    <datalist id="juries-last-name">
    </datalist>

    <hr>

    <div class="row text-center">
        <a href="{% url 'participation:pool_detail' pk=pool.pk %}" class="btn btn-secondary">
            <i class="fas fa-arrow-left"></i> {% trans "Back to pool detail" %}
        </a>
    </div>
{% endblock %}

{% block extrajavascript %}
    <script>
        const emailField = document.getElementById('id_email')
        const firstNameField = document.getElementById('id_first_name')
        const lastNameField = document.getElementById('id_last_name')

        const juriesEmailList = document.getElementById('juries-email')
        const juriesFirstNameList = document.getElementById('juries-first-name')
        const juriesLastNameList = document.getElementById('juries-last-name')

        function updateJuries(filter) {
            fetch(`/api/registration/volunteers/?search=${filter}`)
                .then(response => response.json())
                .then(response => response.results)
                .then(data => {
                    juriesEmailList.innerHTML = ''
                    juriesFirstNameList.innerHTML = ''
                    juriesLastNameList.innerHTML = ''

                    data.forEach(jury => {
                        const optionEmail = document.createElement('option')
                        optionEmail.value = jury.email
                        optionEmail.setAttribute('data-id', jury.id)
                        optionEmail.text = `${jury.first_name} ${jury.last_name} (${jury.email})`
                        juriesEmailList.appendChild(optionEmail)

                        const optionFirstName = document.createElement('option')
                        optionFirstName.value = jury.first_name
                        optionFirstName.setAttribute('data-id', jury.id)
                        optionFirstName.text = `${jury.first_name} ${jury.last_name} (${jury.email})`
                        juriesFirstNameList.appendChild(optionFirstName)

                        const optionLastName = document.createElement('option')
                        optionLastName.value = jury.last_name
                        optionLastName.setAttribute('data-id', jury.id)
                        optionLastName.text = `${jury.first_name} ${jury.last_name} (${jury.email})`
                        juriesLastNameList.appendChild(optionLastName)
                    })
                })
        }

        emailField.addEventListener('input', event => {
            let emailOption = document.querySelector(`datalist[id="juries-email"] > option[value="${event.target.value}"]`)
            if (emailOption) {
                let id = emailOption.getAttribute('data-id')
                let firstNameOption = document.querySelector(`datalist[id="juries-first-name"] > option[data-id="${id}"]`)
                let lastNameOption = document.querySelector(`datalist[id="juries-last-name"] > option[data-id="${id}"]`)
                if (firstNameOption && lastNameOption) {
                    firstNameField.value = firstNameOption.value
                    lastNameField.value = lastNameOption.value
                }
            }
            updateJuries(event.target.value)
        })
        firstNameField.addEventListener('input', event => {
            updateJuries(event.target.value)
        })
        lastNameField.addEventListener('input', event => {
            updateJuries(event.target.value)
        })
    </script>
{% endblock %}