{% extends "meeting-base.html" %}

{% block headtitle %}{{ poster }} | Posters{% endblock %}

{% load staticfiles %}

{% block content %}
    <div class="body">
        <div class="main-header programme-day-header search-reactive">
            <div class="return">
                <div class="container-fluid pad-30">
                    <div class="row mar-30">
                        <div class="col-xs-2 col-sm-1 pad-30 text-left">
                            <a href="{% url 'meeting_poster' meeting_information.slug poster.id %}">
                                <img src="{% static 'images/microsite/navigation/arrow-left.png' %}" />
                            </a>
                        </div>
                        <div class="col-xs-8 col-sm-10 pad-30 text-center">
                            <div class="title">{{ poster }} - Scoring</div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="main-body search-reactive">
            <div class="container-fluid pad-30">
                <div class="row mar-30">
                    <div class="col-xs-12 pad-30">
                        <div id="evaluation">
                            <form id="evaluation_form" action="{% url 'meeting_poster_scoring' meeting_information.slug poster.id %}" method="POST" class="form">
                                {% csrf_token %}
                                <p class="item"></p>
                                {% for question in questions %}
                                    <div class="question" id="question_{{ question.id }}">
                                        <label for="id_question_{{ question.id }}">{{ question }}</label>
                                        {% if question.type == 'scale' %}
                                            <div class="scale">
                                                <div class="lower pull-left">{{ question.lower_scale|default:'Poor' }}</div>
                                                <div class="upper pull-right">{{ question.upper_scale|default:'Excellent' }}</div>
                                                <div class="clearfix"></div>
                                            </div>
                                            <div class="options">
                                                <div class="outer">
                                                    <div class="option" data-value="1">1</div>
                                                </div>
                                                <div class="outer">
                                                    <div class="option" data-value="2">2</div>
                                                </div>
                                                <div class="outer">
                                                    <div class="option" data-value="3">3</div>
                                                </div>
                                                <div class="outer">
                                                    <div class="option" data-value="4">4</div>
                                                </div>
                                                <div class="outer">
                                                    <div class="option" data-value="5">5</div>
                                                </div>
                                                <div class="clearfix"></div>
                                            </div>
                                            <input id="id_question_{{ question.id }}" class="answer_val" type="hidden" value="" name="question_{{ question.id }}" />
                                        {% elif question.type == 'yes-no' %}
                                            <div class="options">
                                                <div class="outer">
                                                    <div class="option" data-value="yes">Yes</div>
                                                </div>
                                                <div class="outer">
                                                    <div class="option" data-value="no">No</div>
                                                </div>
                                                <div class="clearfix"></div>
                                            </div>
                                            <input id="id_question_{{ question.id }}" class="answer_val" type="hidden" value="" name="question_{{ question.id }}" />
                                        {% elif question.type == 'text' %}
                                            <div class="text_question">
                                                <textarea id="id_question_{{ question.id }}" name="question_{{ question.id }}" class="form-control"></textarea>
                                            </div>
                                        {% endif %}
                                    </div>
                                {% endfor %}
                                <div class="submit">
                                    <button type="submit" title="Submit Evaluation" class="btn btn-primary btn-lg col-xs-12 col-sm-8 col-sm-offset-2 col-md-6 col-md-offset-3">Submit Evaluation</button>
                                </div>
                                <div class="clearfix"></div>
                            </form>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
{% endblock %}

{% block footer_script %}
    <script>
        $('#evaluation .option').click(function(){
            var question = $(this).closest('.question');
            question.find('.option').removeClass('selected');
            $(this).addClass('selected');
            var val = $(this).attr('data-value');
            question.find('.answer_val').val(val);
        });

        $(document).ready(function(){

            $('#evaluation_form').submit(function(e){
                e.preventDefault();
                var url = $(this).attr('action');
                var data = $(this).serialize();
                $.post(url,data,function(response){
                    if (response.status == 'success'){
                        window.location = "{% url 'meeting_poster_scoring_complete' meeting_information.slug poster.id %}";
                    } else {
                        notification(response.message);
                    }
                });
            });
        });

    </script>
{% endblock %}