{% extends "index.html" %}
{% block title %}Panel studenta{% endblock %}

{% block content %}
<div class="container header__container">
    <a href="/logout" id="btn--logout" class="btn-floating color--primary btn-small waves-effect waves-light" title="Wyloguj się"><i class="material-icons">power_settings_new</i></a>
    <div class="row" style="margin-top: 80px;">
        <div class="col s12">
            <div class="card color--primary white-text">
                <span class="card-title">Panel studenta</span>
            </div>
        </div>
    </div>
</div>
<div class="container body__container">
    <div class="row">
        <div class="col s12">
            <div class="card white-text">
                <div class="card-content" style="padding-bottom: 0px">
                    <span class="card-title  color--primary  card-title__body">Pytania studentów</span>
                    <ul  class="collapsible">
                        {% for question in questions %}
                        <li >
                            <div {% if question[5] == 1 %} class="collapsible-header color--answered" {% else %}  class="collapsible-header color--primary"  {% endif %}> <!--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" id="{{ question[0] }}">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>
                            {% if question[5] == 1 %}
                            <div class="collapsible-body color--answered" id="clpsbl">
                                <p  style="color:#fff">{{question[6]}}</p>
                            </div>
                            {% endif %}
                        </li>
                        {% endfor %}
                    </ul>
                </div>
                <ul  class="collapsible">
                    <li>
                        <div class="ask__container--content collapsible-header">
                            <div class="col s12 modal-trigger red" id="ask-question" href="#modalAsk" style="pointer-events: auto;">Zadaj pytanie</div>
                        </div>
                        <div id="modalAsk" class="collapsible-body">
                            <div class="modal-content">
                                <h4>Zadaj pytanie</h4>
                                <form class="col s12">
                                    <div class="row">
                                        <div class="input-field col s12">
                                        <textarea id="textarea1" class="materialize-textarea" name ="questionText"></textarea>
                                        <label for="textarea1">Tutaj wpisz swoje pytanie</label>
                                        </div>
                                    </div>
                                </form>
                            </div>
                            <div class="modal-footer">
                                <a href="#!" id="btn-cancel-ask" 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>
                    </li>
                </div>
            </ul>
        </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">
                    <div class="col s6">Powrót</div>
                    <!--<div class="col s4 modal-trigger" href="#modalAsk">Zadaj pytanie</div>-->
                    <div class="col s6">Informacje</div>
                </div>
            </div>
        </div>
    </div>
</div>
<!--
<div id="modalAsk" class="modal">
    <div class="modal-content">
        <h4>Zadaj pytanie</h4>
        <form class="col s12">
            <div class="row">
                <div class="input-field col s12">
                <textarea id="textarea1" class="materialize-textarea" name ="questionText"></textarea>
                <label for="textarea1">Tutaj wpisz swoje pytanie</label>
                </div>
            </div>
        </form>
    </div>
    <div class="modal-footer">
        <a href="#!" 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-ask').on('click', () => {
        $('#ask-question').click();
    });


    $('#btn-send').on('click', () => {
        var question = $('#textarea1').val();
        $.ajax({
        url: '/ask',
        type: 'POST',
        data: question,
        succes: function(response) {
            location.reload();
            }
        });
        location.reload();
        alertify.notify('Pomyślnie wysłano pytanie', 'success', 3);


    });
    $('.btn-thumb-up').on('click', () => {
        //alert(event.target.id)
        var link = '/upvote/' + event.target.id;
        $.ajax({
        url: link,
        type: 'POST',
        succes: function(response) {
            location.reload();
            //alert(response)
            }
        });
        alertify.notify('Pomyślnie oceniono pytanie', 'success', 3);
        location.reload();
    });


</script>
{%endblock%}