{% extends 'data_entry.html.twig' %}

{% block title %}Vocab - Functional context | ArCOA{% endblock %}

{% block rightpanel %}
<div class="container" style="max-width: 50vw">
    <h1 class="is-size-1 mt-0 has-text-centered">Edit vocabulary</h1>
    <h2 class="is-size-3 mt-4 has-text-centered">Functional context</h2>

    <div class="container mt-6">
        <!-- For AJAX calls... TODO: not working from controller? -->
        <div class="notification is-success is-hidden" id="ajax-success">
            <button class="delete"></button>
          </div>
        {% for message in app.flashes('notice') %}
            <div class="notification is-success" id="server-success">
                <button class="delete"></button>
                {{ message }}
            </div>
        {% endfor %}
        <form method="post" action="{{ path('app_vocab_func_context_add') }}">
            <label class="label">Add new term</label>
            <div class="field has-addons">
                <div class="control">
                    <input class="input" name="_term" type="text" placeholder="Add new term">
                </div>
                <div class="control">
                    <button type="submit" class="button is-link">
                        Add
                        <span class="icon ml-3">
                            <i class="fa fa-plus"></i>
                        </span>
                    </button>
                </div>
            </div>
        </form>

        <h3 class="mt-6 mb-5 is-size-5"><strong>Terms in vocabulary</strong></h3>
        <table class="table is-fullwidth" id="terms">
            <tr><th>Term</th><th>Actions</th></tr>
        {% for term in terms %}
            <tr data-row-id="{{ term.id }}">
                <td>
                    <input class="input" type="text" value="{{ term.term }}" disabled data-term-id="{{ term.id }}" />
                </td>
                <td>
                    <div class="buttons">
                        <button class="button is-link" data-id-edit="{{ term.id }}">
                            Edit
                            <span class="icon ml-2">
                                <i class="fa fa-pencil"></i>
                            </span>
                        </button>
                        <button class="button is-danger" data-id-delete="{{ term.id }}">
                            Delete
                            <span class="icon ml-2">
                                <i class="fa fa-trash"></i>
                            </span>
                        </button>
                    </div>
                </td>
            </tr>
        {% endfor %}
        </table>

    </div>
</div>
<script type="text/javascript" defer>
    const terms = document.querySelector('#terms');
    const serverNotice = document.querySelector('#server-success');

    if (serverNotice) {
        serverNotice.querySelector('.delete').addEventListener('click', () => {
            serverNotice.remove();
        });
    }

    terms.addEventListener('click', async (event) => {
        const clicked = event.target;

        if (clicked.classList.contains('is-danger')) {
            const termId = clicked.getAttribute('data-id-delete');

            const data = new FormData;
            data.append("_id", termId);

            const res = await fetch("{{ path('app_vocab_func_context_del') }}", {
                method: "POST",
                body: data,
            });

            const notice = document.querySelector('#ajax-success');

            if (res.status === 200) {
                notice.innerHTML += 'Term deleted successfully';
                notice.classList.remove('is-hidden');
                notice.querySelector('.delete').addEventListener('click', () => {
                    notice.classList.add('is-hidden');
                });
                const row = document.querySelector(`tr[data-row-id="${termId}"]`);
                row.remove();
            }
        }
    });
</script>
{% endblock %}