{% extends "@Techno/layout.html.twig" %}

{% block title %}
    Ajax interroge API
{% endblock %}

{% block sidebar %}

    <h3>Créer</h3>

    <a href="javascript: void(0);" class="btn btn-create">
        <i class="fas fa-plus fa-fw"></i> Nouvel auteur
    </a><br>
    <a href="javascript: void(0);" class="btn btn-reload">
        <i class="fas fa-sync-alt fa-fw"></i> Rafraichir
    </a>

    <div class="hidden" style="margin-top: 1em;">
        {{ form_start(formOwner) }}
        {{ form_errors(formOwner) }}
        {{ form_rest(formOwner) }}
        {{ form_end(formOwner) }}
    </div>

    <h3>Liens</h3>
    <ul>
        <li>
            <a href="https://gist.github.com/EtienneR/2f3ab345df502bd3d13e" target="_blank">
            Ajax RESTful Mémo</a>
        </li>
    </ul>

{% endblock %}


{% block content %}
    {{ block('breadcrumb') }}

    <h1>{{ block('title') }}</h1>

    <p>
        <i>Remarque: Le tableau qui suit est un fragment AJAX, qui interroge APIBundle</i>
    </p>

    <table id="table-owners">
        <thead>
            <tr>
                <th>#</th>
                <th>Nom</th>
                <th>Prénom</th>
                <th>Date</th>
                <th>Actions</th>
            </tr>
        </thead>
        <tbody>
        </tbody>
    </table>
{% endblock %}

{% block customJS %}
<script type="text/javascript">

    let submitURL = null;

    // L'URL de l'API
    let ownersURL = Routing.generate('api_owner_read');

    // Le tableau
    let table = document.querySelector("table#table-owners");
    let tbody = table.querySelector("tbody");

    // La fonction AJAX qui reload la table
    function reloadTableOwner()
    {
        tbody.innerHTML = null;

        getAJAX(ownersURL, function()
        {
            if (this.readyState === 4
                && (this.status === 200 || this.status === 0)) {

                // Récupère le json et boucle pour créer le tableau
                let json = JSON.parse(this.responseText);
                for (let i = 0; i < json.length; i++)
                {

                    let tr = document.createElement('tr');

                    let td0 = document.createElement('td');
                    td0.textContent = json[i].id;
                    tr.appendChild(td0);

                    let td1 = document.createElement('td');
                    td1.textContent = json[i].lastname;
                    tr.appendChild(td1);

                    let td2 = document.createElement('td');
                    td2.textContent = json[i].firstname;
                    tr.appendChild(td2);

                    let td3 = document.createElement('td');
                    td3.textContent = formatStringDate(json[i].created_at);
                    tr.appendChild(td3);

                    let td4 = document.createElement('td');

                    // Boutons edit
                    let editBtn = document.createElement('button');
                    editBtn.dataset.ownerId = json[i].id;
                    editBtn.innerHTML = '<i class="fas fa-edit fa-fw"></i> Editer';
                    editBtn.classList.add('btn', 'btn-primary');
                    editBtn.addEventListener('click', function()
                    {
                        let ownerId = this.dataset.ownerId;
                        submitURL = Routing.generate('api_owner_update', {'id': ownerId});
                        getAJAX(submitURL, function()
                        {
                            if (this.readyState === 4)
                            {
                                if (this.status === 200 || this.status === 0)
                                {
                                    let json = JSON.parse(this.responseText);
                                    form.querySelector('#owner_firstname').value = json.firstname;
                                    form.querySelector('#owner_lastname').value = json.lastname;
                                    form.parentNode.classList.remove('hidden');
                                }
                                else if (this.status === 400) {
                                    handleErrors(this);
                                }
                            }
                        });
                    });
                    td4. appendChild(editBtn);

                    // Boutons delete
                    let deleteBtn = document.createElement('button');
                    deleteBtn.dataset.ownerId = json[i].id;
                    deleteBtn.innerHTML = '<i class="fas fa-trash fa-fw"></i> Supprimer';
                    deleteBtn.classList.add('btn', 'btn-danger');
                    deleteBtn.addEventListener('click', function()
                    {
                        let ownerId = this.dataset.ownerId;
                        let r = confirm('Are you sure ?');
                        if (r === true) {
                            submitURL = Routing.generate('api_owner_delete_one', {'id': ownerId});
                            deleteAJAX(submitURL, function()
                            {
                                if (this.readyState === 4) {
                                    if (this.status === 200 || this.status === 0)
                                    {
                                        reloadTableOwner();
                                    }
                                    else if (this.status === 400) {
                                        handleErrors(this);
                                    }
                                }
                            });
                        }
                    });
                    td4. appendChild(deleteBtn);

                    tr.appendChild(td4);
                    tbody.appendChild(tr);
                }

            }
        });
    }
    reloadTableOwner();

    let form = document.querySelector('form[name="owner"]');
        // form[name$="owner"] .. regex, qui finit par owner
        // form[name^="owner"] .. regex, qui commence par owner


    // Evénements sur les boutons
    let createBtns = document.querySelectorAll('.btn-create');
    createBtns.forEach(function(currentBtn){     // ou for (let currentBtn of createBtns)
        currentBtn.addEventListener('click', function(e) {  // 'e' veut dire 'event'
            form.querySelector('#owner_firstname').value = null;
            form.querySelector('#owner_lastname').value = null;
            form.parentNode.classList.remove('hidden');
            submitURL = Routing.generate('api_owner_create');
        });
    });

    let reloadBtns = document.querySelectorAll('.btn-reload');
    reloadBtns.forEach(function(reloadBtn) {
        reloadBtn.addEventListener('dblclick', function (e) {
            reloadTableOwner();
        });
    });

    // Soumission du formulaire
    form.addEventListener('submit', function(e)
    {
        let form = this;
        e.preventDefault(); // Annule l'événement, mais préserve la fonction callback
        postAJAX(submitURL, function()
        {
            if (this.readyState === 4)
            {
                if (this.status === 200 || this.status === 0)
                {
                    reloadTableOwner();
                    form.parentNode.classList.add('hidden');

                } else if (this.status === 400) {
                    handleErrors(this);

                } else if (this.status === 500) {
                    console.log(this.status + ' ' + this.statusText);
                }
            }

        }, form);

    });

</script>
{% endblock %}