{% extends 'admin/admin.html.twig' %}
{% block contenu %}

<!-- Modal -->
<div class="modal fade" id="exampleModalCenter" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="exampleModalLongTitle"></h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div id="model_body" class="modal-body">

            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                <button type="button" class="btn btn-primary">Save changes</button>
            </div>
        </div>
    </div>
</div>
    <div class="row">
    <div class="col-md-12">
        <h1>Nombre des feedbacks non lu {{ count }}</h1>
        <table class="table table-bordered">
            <thead class="thead-dark table-sm">
                <th>From</th>
                <th>For Child</th>
                <th>Rapport</th>
                <th>Message Parent</th>
                <th>Actions</th>
            </thead>
            <tbody>
            {% for feed in feeds %}
                {% if feed.isOpen == true %}
                    <tr class="bg-success">
                        <td>
                            {{ feed.parent.nom }}
                        </td>
                        <td>
                            {{ feed.rapport.enfant.nom }}
                        </td>
                        <td>
                            <!-- Button trigger modal -->
                            Rapport id {{ feed.rapport.id }}
                            <button type="button" onclick="displayRapport({{ feed.rapport.id }})" class="btn btn-outline-light" data-toggle="modal" data-target="#exampleModalCenter">
                                visualiser le rapport
                            </button>


                        </td>
                        <td>
                            {{ feed.message }}
                        </td>
                        <td>
                            <button type="button" onclick="displayDiscussions({{ feed.rapport.parent.id }},{{ feed.rapport.enfant.id }})" class="btn btn-outline-light" data-toggle="modal" data-target="#exampleModalCenter">
                                visualiser discussions
                            </button>
                        </td>
                    </tr>

                {% else %}
                    <tr class="bg-dark">
                        <td>
                            {{ feed.parent.nom }}
                        </td>
                        <td>
                            {{ feed.rapport.enfant.nom }}
                        </td>
                        <td>
                            <!-- Button trigger modal -->
                            Rapport id {{ feed.rapport.id }}
                            <button type="button" onclick="displayRapport({{ feed.rapport.id }})" class="btn btn-outline-light" data-toggle="modal" data-target="#exampleModalCenter">
                                visualiser le rapport
                            </button>


                        </td>
                        <td>
                            {{ feed.message }}
                        </td>
                        <td>
                            {{ feed.parent.id }}
                            {{ feed.rapport.enfant.id }}

                            <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal" data-whatever="@getbootstrap">send response</button>

                            <div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
                                <div class="modal-dialog" role="document">
                                    <div class="modal-content">
                                        <div class="modal-header">
                                            <h5 class="modal-title" id="exampleModalLabel">New message</h5>
                                            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                                                <span aria-hidden="true">&times;</span>
                                            </button>
                                        </div>
                                        <div class="modal-body">
                                                <div class="form-group">
                                                    <input type="text" value="{{ feed.parent.id }}" id="parent">
                                                    <input type="text" value="{{ feed.rapport.enfant.id }}" id="enfant">
                                                    <label for="message-text" class="col-form-label">Message:</label>
                                                    <textarea class="form-control" id="message" ></textarea>
                                                </div>
                                                <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                                                <button type="button" class="btn btn-primary" onclick="sendNewRapport({{ feed.parent.id }},{{ feed.rapport.enfant.id  }})">Send message</button>

                                        </div>

                                    </div>
                                </div>
                            </div>
                        </td>
                    </tr>
                {% endif %}
            {% endfor %}
                
            </tbody>
        </table>
    </div>

{% endblock %}
        {% block javascripts %}
            <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
            <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
            <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
            <script
                    src="https://code.jquery.com/jquery-3.4.1.js"
                    integrity="sha256-WpOohJOqMqqyKL9FccASB9O0KwACQJpFTUBLTYOVvVU="
                    crossorigin="anonymous"></script>
            <script>
                function displayRapport(rapport) {
                    const xhr = new XMLHttpRequest();
                    const url = 'http://192.168.1.46:8000/rapport/getrapport/'+rapport;
                    xhr.onreadystatechange = function () {
                        if(this.readyState == 4 && this.status == 200){
                            var arr = JSON.parse(this.responseText);
                            console.log(arr);
                            console.log('send at' + arr.sendAt);
                            const exampleModalLongTitle = document.getElementById('exampleModalLongTitle');
                            const model_body = document.getElementById('model_body');
                            exampleModalLongTitle.innerText = 'Rapport envoyé en ' + arr.sendAt;

                            const info = new String(window.location);
                            var res = info.split("/");
                            var image = "http://"+res[2]+"/uploads/images/"+arr['image'];
                            console.log('URL IMAGE : ' + image);
                            model_body.innerHTML = `
                                <h3>Rapport pour l'enfant : ${arr.enfant}</h3>
                                <h3>Titre Rapport : ${arr['titre']}</h3>
                                <label>Contenu</label>
                                <p>${arr['contenu']}</p>
                                <label>Remarques</label>
                                <p>${arr['remarques']}</p>

                                <p><img height="300px" width="300px" src="${image}" /></p>
                            `;
                        }
                    }
                    xhr.open('GET',url,true);
                    xhr.send();

                }
                function displayDiscussions(parent,enfant) {
                    ///discussions/{id_parent}/{id_enfant}
                    alert('ID PARENT : ' + parent + 'ID ENFANT ' + enfant);
                    const  exampleModalLongTitle = document.getElementById('exampleModalLongTitle');
                    const  model_body = document.getElementById('model_body');
                    const xhr = new XMLHttpRequest();
                    const url = 'http://192.168.1.46:8000/discussions/'+parent+'/'+enfant;
                    xhr.onreadystatechange = function () {
                        if(this.readyState == 4 && this.status == 200){
                            var arr = JSON.parse(this.responseText);
                            for (let item of arr){
                                titre = item.admin.titre;
                                contenu = item.admin.contenu;
                                remarques = item.admin.remarques;
                                rating = item.admin.rating;
                                image = item.admin.image;
                                card = rapport(titre,contenu,remarques,image,rating);
                                model_body.appendChild(card);
                                feeds = item.parent.feedbacks;
                                if(feeds != undefined){
                                    feeds.forEach(function(item){
                                        console.log('message : ' + item);
                                        model_body.appendChild(feedback(item));

                                    });
                                }
                                //console.log(card);
                            }

                        }
                    }
                    xhr.open('GET',url,true);
                    xhr.send();
                }
                
                function rapport(titre,contenu,remarques,image,rating) {

                    const card = document.createElement('div');
                    const title = document.createElement('div');
                    title.className = 'card-header';
                    title.innerText = titre;
                    card.appendChild(title);
                    const card_body = document.createElement('div');
                    card_body.className = 'card-body';
                    const content = document.createElement('p');
                    content.className = 'card-text';
                    content.innerText = contenu;
                    card_body.appendChild(content);
                    const remarks = document.createElement('p');
                    remarks.className = 'card-text';
                    remarks.innerText = remarques;
                    card_body.appendChild(remarks)
                    const picture = document.createElement('img');
                    picture.src = image;
                    picture.height = '100';
                    picture.width = '100';
                    card_body.appendChild(picture);
                    card.appendChild(card_body);
                    return card;
                }

                function feedback(message){
                    const card = document.createElement('div');
                    card.className = 'card text-center';
                    const card_header = document.createElement('div');
                    card_header.className = 'card-header';
                    card_header.innerText = 'feedback parent';
                    card.appendChild(card_header);
                    const card_body = document.createElement('div');
                    card_body.className = 'card-body';
                    card_body.innerText = message;
                    card.appendChild(card_body);
                    return card;
                }

                function sendNewRapport(parent,enfant){
                    //console.log(this);
                    const message = document.getElementById('message');
                    alert(parent+enfant);
                    //console.log('Message '  + message.value);
                    //console.log('a envoye pour ' + parent + ' enfant ' + enfant);
                    const rapport = {
                        "message":message.value,
                        "parent" : parent,
                        "enfant" : enfant
                    };
                    /*$.ajax({
                        url: 'http://192.168.1.46:8000/adminrapport',
                        dataType: 'json',
                        type: 'post',
                        contentType: 'application/json',
                        data: JSON.stringify( { "message": $('#message').val(), "parent": parent,"enfant": enfant } )
                    });*/
                    /*$.ajax({
                        url: 'http://192.168.1.46:8000/adminrapport',
                        method: "POST",
                        data: { 'message':message,'parent': parent, 'enfant': enfant},
                    }).done(function(response) {
                        console.log(response)
                    }).fail(function( jqXHR, textStatus ) {
                        console.log('error')
                    });*/
                    /*var xmlhttp = new XMLHttpRequest();   // new HttpRequest instance
                    var theUrl = "http://192.168.1.46:8000/rapport/adminrapport";
                    xmlhttp.open("POST", theUrl);
                    xmlhttp.setRequestHeader("Content-Type", "application/json;charset=UTF-8");
                    xmlhttp.send(rapport);*/
                    xhr = new XMLHttpRequest();
                    var url = "http://192.168.1.46:8000/rapport/adminrapport";
                    xhr.open("POST", url, true);
                    xhr.setRequestHeader("Content-type", "application/json");
                    xhr.onreadystatechange = function () {
                        if (xhr.readyState == 4 && xhr.status == 200) {
                            var json = JSON.parse(xhr.responseText);
                            console.log(json.email + ", " + json.name)
                        }
                    }
                    var data = JSON.stringify({"message":message.value,"parent": parent, "enfant": enfant});
                    xhr.send(data);
                    /*const base_api = 'http://192.168.1.46:8000/adminrapport';
                    const xhr = new XMLHttpRequest();
                    xhr.open('POST',base_api);
                    xhr.setRequestHeader('Content-type','application/json');
                    console.log(rapport);
                    xhr.send(rapport);*/


                }


                </script>
        {% endblock %}