{% extends "index.html" %}
{% block title %}Panel prowadzącego{% endblock %}

{% block content %}
<div class="container header__container">
    <div class="row">
        <div class="col s12">
            <div class="card color--primary white-text">
                <span class="card-title">Panel prowadzącego</span>
            </div>
        </div>
    </div>
</div>
<div class="container body__container">
    <div class="row">
        <div class="col s12">
            <div class="card color--primary white-text">
                <div class="card-content">
                    <span class="card-title card-title__body">Pytania studentów</span>
                    <ul class="collapsible">
                        {% for question in questions %}
                        <li>
                            <div class="collapsible-header" style="pointer-events:none !important;">
                                <span class="col s7" style="display:flex; align-items:center; text-align: left;">
                                    {{question[3]}}
                                </span>
                                <span class="counter col s2">
                                    <i class="btn-thumb-up material-icons">thumb_up</i><span>{{question[4]}}</span>
                                </span>
                                <a class="col s3 btn--answer waves-effect waves-light btn-large red" style="pointer-events: auto;">ODPOWIEDZ</a>
                            </div>
                            <div class="collapsible-body" id="clpsbl">
                                <h4>Odpowiedz na pytanie</h4>
                                <form class="col s12">
                                    <div class="row">
                                        <div class="input-field col s12">
                                        <textarea id="{{question[0]}}" style="color:#fff" class="materialize-textarea" name ="questionText"> {{question[6]}}</textarea>
                                        <label for="textarea1">Tutaj wpisz opdowiedź</label>
                                        </div>
                                    </div>
                                </form>
                                <div class="modal-footer">
                                    <a href="#!" id="btn-cancel" class="modal-close waves-effect red btn" >Anuluj</a>
                                    <a href="#!" id="{{question[0]}}" name="btn-answer" class="modal-close waves-effect waves-primary btn btn-send-answer" >Wyślij</a>
                                </div>
                            </div>
                        </li>
                        {% endfor %}
                    </ul>
                </div>
             </div>
        </div>
    </div>
</div>
<div class="container footer__container">
    <div class="row">
        <div class="col s12">
            <div class="card color--primary white-text">
                <div class="card-content footer__container--content footer__container__lecturer--content">
                    <div class="col s4 question--mark">Oznacz, jako szczególnie ważne pytanie</div>
                    <!-- <div class="col s3 question--respond">Odpowiedz na pytanie</div> -->

                    <!-- TUTAJ MOZNA ZAKOMENTOWAĆ UKRYTĄ OPCJĘ NIEMIECKĄ -->
                    <div class="col s4 question--add">Odpowiedz i dodaj do wykładu</div>
                    <!-- KONIEC KOMENTOWANIA UKRYTEJ OPCJI NIEMIECKIEJ -->
                    
                    <div class="col s4 question--remove">Usuń pytanie</div>
                </div>
            </div>
        </div>
    </div>
</div>
<!--
<div id="modalAsk" class="modal">
    <div class="modal-content">
        <h4>Odpowiedz na pytanie</h4>
        <form class="col s12">
            <div class="row">
                <div class="input-field col s12">
                <textarea id="textarea1" class="materialize-textarea white-text" name ="questionText"></textarea>
                <label for="textarea1">Tutaj wpisz opdowiedź</label>
                </div>
            </div>
        </form>
    </div>
    <div class="modal-footer">
        <a href="" id="btn-cancel" class="modal-close waves-effect red btn">Anuluj</a>
        <a href="" id="btn-send" class="modal-close waves-effect waves-primary btn">Wyślij</a>
    </div>
</div>
-->
{% endblock %}

{%block script%}
<script>
    $(document).ready(() => {
        $('.modal').modal();
    });

    $(document).ready(function(){
    $('.collapsible').collapsible();
    });
        
    $('#btn-cancel').on('click', () => {
        var instance = M.Collapsible.getInstance($('.collapsible')); 
        instance.close();
    });

    $('.btn-send-answer').on('click', () => {
        //alert(event.target.id);
        //var question = $('#textarea1').val();
        var url = 'answer/' + event.target.id;
        var answerSelector = 'textarea[id=' + event.target.id + ']'
        var answer = $(answerSelector).val()
        $.ajax({
        url: url,
        type: 'POST',
        data: answer,
        succes: function(response) {
           // location.reload();
            }
        });
        //location.reload();
        alertify.notify('Pomyślnie wysłano odpowiedź', 'success', 3);
    });

    $('.question--mark').on('click', () => {
        alertify.notify('Pytanie oznaczone, jako szczególnie ważne.', 'success', 3);
    });
    $('.question--respond').on('click', () => {
        alertify.notify('Odpowiedź została udzielona.', 'success', 3);
    });
    $('.question--add').on('click', () => {
        alertify.notify('Odpowiedź została udzielona. Pytanie zostało dodane do wykładu.', 'success', 3);
    });
    $('.question--remove').on('click', () => {
        alertify.notify('Pytanie zostało usunięte', 'error', 3);
    });
</script>
{%endblock%}