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

{% block headtitle %}{{ session }} | Programme{% 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 'programme_session' meeting_information.slug session.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">{{ session }} - 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 'programme_session_evaluation' meeting_information.slug session.id %}" method="POST" class="form">
                                {% csrf_token %}
                                <p class="item"></p>
                                {% for question in before_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 == 'text' %}
                                            <div class="text_question">
                                                <textarea id="id_question_{{ question.id }}" name="question_{{ question.id }}" class="form-control"></textarea>
                                            </div>
                                        {% endif %}
                                    </div>
                                {% endfor %}

                                <hr/>

                                {% if presentations and presentation_questions %}
                                    <h2>Please rate the individual presentations:</h2>
                                    {% for presentation in presentations %}
                                        <h3>{{ presentation }}</h3>
                                        {% for question in presentation_questions %}
                                            <div class="question" id="presentation_{{ presentation_id }}_q_{{ question.id }}">
                                                <label for="id_presentation_{{ presentation.id }}_q_{{ 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_presentation_{{ presentation.id }}_q_{{ question.id }}" class="answer_val" type="hidden" value="" name="presentation_{{ presentation.id }}_q_{{ 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_presentation_{{ presentation.id }}_q_{{ question.id }}" class="answer_val" type="hidden" value="" name="presentation_{{ presentation.id }}_q_{{ question.id }}" />
                                                {% elif question.type == 'text' %}
                                                    <div class="text_question">
                                                        <textarea id="id_presentation_{{ presentation.id }}_q_{{ question.id }}" name="presentation_{{ presentation.id }}_q_{{ question.id }}" class="form-control"></textarea>
                                                    </div>
                                                {% endif %}
                                            </div>
                                        {% endfor %}
                                    {% endfor %}
                                {% endif %}

                                <hr/>

                                {% for question in after_questions %}
                                    <div class="question" id="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 == '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 'programme_session_evaluation_complete' meeting_information.slug session.id %}";
                    } else {
                        notification(response.message);
                    }
                });
            });
        });

    </script>
{% endblock %}