{% extends "base.html.twig" %}
{% block body %}
    <div class="container">
        <div class="row">
            <div class="col-md-4">
                <div class="card mt-4">
                    <div class="card-header bg-dark text-white text-center">
                        Liste des enfants
                    </div>

                    <div class="alert alert-success bg-success text-white mt-4">
                        Nombre des messages non lus {{ nombre }}
                    </div>
                    <div class="card-body">
                        <ul class="list-group">
                            {% for enfant in enfants  %}
                                <li class="list-group-item" id="{{ enfant.id }}" onclick="displayDiscussions({{ enfant.parent.id }},{{ enfant.id }})">
                                        <img class="img-thumbnail" height="50px" width="50px" src="/enfants/images/{{ enfant.photo }}" />&nbsp;&nbsp;{{ enfant.nom }} </li>
                            {% endfor %}
                        </ul>
                    </div>
                </div>
            </div>
            <div class="col-md-8" id="discussions">

            </div>
        </div>
    </div>


{% endblock %}
{% block javascripts %}
    <script>
        const discussions = document.getElementById('discussions');
        function displayDiscussions(parent,enfant){
            console.log(enfant);
            const li = document.getElementById(enfant);
            console.log(discussions);
            const divCard = document.createElement('div');
            divCard.className = 'card mt-4';
            const divCardHeader = document.createElement('div');
            divCardHeader.className = 'card-header bg-dark text-white text-center';
            divCardHeader.innerText = 'Discussions';
            divCard.appendChild(divCardHeader);
            discussions.appendChild(divCard);
            li.onclick = function(){return false}
            console.log(li);
            const base_api = 'http://192.168.1.20:8000/discussions/'+parent+'/'+enfant;
            console.log(base_api);
            const xhr = new XMLHttpRequest();
            xhr.open('GET',base_api,true);
            xhr.onload = function () {
                let data = JSON.parse(this.responseText);
                console.table(data);
                for (let discussion of data){
                    console.log(discussion);
                    const cardRapport = document.createElement('div');
                    cardRapport.className = 'card mt-2';
                    const cardHeader = document.createElement('div');
                    cardHeader.className = 'card-header bg-primary text-white text-center';
                    cardHeader.innerText = 'Rapport';
                    const titre = document.createElement('h3');
                    titre.appendChild(document.createTextNode(discussion.admin.titre));
                    const contenu = document.createElement('p');
                    contenu.appendChild(document.createTextNode(discussion.admin.contenu));
                    const remarques = document.createElement('p');
                    remarques.appendChild(document.createTextNode(discussion.admin.remarques));
                    const rating = document.createElement('p');
                    rating.appendChild(document.createTextNode(discussion.admin.rating));
                    const image = document.createElement('img');
                    image.src = discussion.admin.image;
                    image.height = 100;
                    image.width = 100;
                    cardRapport.appendChild(cardHeader);
                    cardRapport.appendChild(titre);
                    cardRapport.appendChild(contenu);
                    cardRapport.appendChild(remarques);
                    cardRapport.appendChild(rating);
                    cardRapport.appendChild(image);
                    divCard.appendChild(cardRapport);
                    console.log('Discussion : ');
                    console.log(discussion.parent.feedbacks);
                    let feeds = discussion.parent.feedbacks;
                    console.table(feeds);
                    console.log('TYPE : '+ typeof feeds);
                    const h3 = document.createElement('h3');
                    h3.className = 'card-header';
                    h3.innerText = 'feedback parent';
                    divCard.appendChild(h3);
                    feeds.forEach(function (item){
                        const p = document.createElement('p');
                        p.innerText = item;
                        divCard.appendChild(p);
                        //console.log(item);
                    })
                    const form = document.createElement('form');
                    const input = document.createElement('input');
                    input.type = 'text';
                    input.name = 'message';
                    const submit = document.createElement('input');
                    submit.type = 'submit';
                    submit.value = 'repondre';
                    form.appendChild(input);
                    form.appendChild(submit);
                    divCard.appendChild(form);
                    /*const p = document.createElement('p');
                    divCard.appendChild(p);*/
                }
            }
            xhr.send(null);

        }
    </script>
{% endblock %}