{% extends 'base.html.twig' %}

{% block maximizescript %}
    <script>
        function maximize() {
            window.moveTo(0, 0);
            window.resizeTo(screen.width, screen.height);
        }
        setInterval(function () {
            maximize();
        }, 1000);

    </script>
{% endblock %}
{% block usercss %}
    {{ parent() }}
    <link href="{{ asset('bundles/app/timer/timeTo.css')}}" rel="stylesheet">
    <style>
        .timerContainer{
            min-height: 75px;
            text-align: center;
        }
        .message{
            font-weight: bold;
            font-size: 25px;
            color:blue;
        }
        .navigation{
            margin: 1%;
        }
    </style>
{% endblock %}
{% block body %}

    <div class="row">
        <div class="col-lg-8">
            <h3> 
                <strong> 
                    {{ candidate_exam.examid.examname }}  
                    {#                    {{ candidate_exam.questionset.questionset  }} #}
                </strong> 
            </h3>
        </div>
        <div class="col-lg-4">
            <div class="timerContainer">
                <div id="countdown"></div>
            </div>
        </div>
    </div>
    {% if candidate_exam.currentquestion == totalQuestion %}
        {% set next_question = totalQuestion  %}
    {% else  %}
        {% set next_question = candidate_exam.currentquestion + 1   %}
    {% endif %}
    {% if candidate_exam.currentquestion == 1 %}
        {% set prev_question = 1  %}
    {% else  %}
        {% set prev_question = candidate_exam.currentquestion - 1   %}
    {% endif %}
    <div class="row">
        <div class="col-lg-9">
            <div class="panel panel-default">
                <div class="panel-heading">
                    <div> {{ candidate_exam.currentquestion }} of  {{ totalQuestion }} </div> 
                </div>
                <div class="panel-body">
                    <div class="row">
                        <div class="col-lg-12 text-right" style="padding: 2%;">
                            <a data-toggle="confirmation" class="btn btn-danger finish_exam confirmation btn-lg" data-href="{{ path('candidate_exam_finish') }}">Finish Exam</a>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-lg-12" id="form_container">
                            <div class="alert alert-info alert-dismissable">
                                <h5> <i class="fa fa-info-circle"></i> Click save button to save your answer, before navigate to next question.</h5>
                            </div>
                            {% include 'AppBundle:Candidate:question.html.twig' with {'form': form} %}
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-lg-12" style="margin-top:1%;padding-top:1%;">								
                            <div class="form-group">
                                <a  class="btn btn-primary btn-sm" href="{{ path("candidate_exam_set_answering",{'id' : candidate_exam.questionset.guid ,'questionno': prev_question }) }}">
                                    <<
                                </a>
                                <a class="btn btn-warning btn-sm" href="{{ path('candidate_exam_set_dolater',{'questionno': candidate_exam.currentquestion }) }}">Do Later</a>
                                {% if show_clear_answer %}
                                    <button id="unselect" class="btn btn-info btn-sm"> Unselect </button>
                                {% endif %}
                                <a class="btn btn-primary btn-sm" href="{{ path("candidate_exam_set_answering",{'id' : candidate_exam.questionset.guid ,'questionno': next_question }) }}" >
                                    >>
                                </a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-lg-3">
            <div class="panel panel-default">
                <div class="panel-heading"> Questions </div>


                <div class="panel-body">

                    <p><h4>Question Status</h4></p>
                    <p>
                        <button class="btn btn-success navigation btn-sm" type="button">Answered</button>
                        <button class="btn btn-info navigation btn-sm" type="button">Un-Answered</button>
                        <button class="btn btn-default navigation btn-sm" type="button">Current Question</button>
                        <button class="btn btn-warning navigation btn-sm" type="button">Do Later</button>
                    </p>

                    {% for subjectName, eachQuestion in allQuestion %}
                        <p> <h4>{{ subjectName }}</h4> </p>

                        {#                        {% for topicName, partQuestions in eachQuestion  %}                   #}
                        {% for questionAll in eachQuestion  %}
                            {% set current_question_flag = "" %}
                            {% if questionAll['question_no'] ==  candidate_exam.currentquestion %}
                                {% set current_question_flag = "btn-outline" %}
                            {% endif %}
                            {% if questionAll['question_type'] == 1 and questionAll['answer'] == null %}
                                {% set btn_class = "btn-info" %}
                            {% endif %}
                            {% if questionAll['question_type'] == 1 and questionAll['answer'] != null %}
                                {% set btn_class = "btn-success" %}
                            {% endif %}

                            {% if questionAll['question_type'] == 2 and questionAll['answer_descriptive'] == "" %}
                                {% set btn_class = "btn-info" %}
                            {% endif %}

                            {% if questionAll['question_type'] == 2 and questionAll['answer_descriptive'] != "" %}
                                {% set btn_class = "btn-success" %}
                            {% endif %}

                            {% if questionAll['do_later'] %}
                                {% set btn_class = "btn-warning" %}
                            {% endif %}

                            <a type="button" {#data_question="{{ questionAll['question']|raw }} "#} href="{{ path("candidate_exam_set_answering",{'id' : candidate_exam.questionset.guid ,'questionno': questionAll['question_no'] }) }}" class="btn {{ btn_class|raw }} navigation {{ current_question_flag|raw }}" data-qno="{{ questionAll['question_no'] }}"> {{ questionAll['question_no'] }} </a>

                        {% endfor %}

                        {#                        {% endfor %}#}
                    {% endfor %}
                </div>
            </div>
        </div>
    </div>
    <iframe id="form_target" name="form_target" style="display:none"></iframe>
    <form id="my_form" action="{{ path('text_editor_image_upload') }}" target="form_target" method="post" enctype="multipart/form-data" style="width:0px;height:0;overflow:hidden">
        <input name="image" type="file" onchange="$('#my_form').ajaxSubmit({success: function (d) {
                        eval(d);
                    }});
                this.value = '';">
    </form>
{% endblock %}
{% block userscripts %}

    <script type="text/javascript" src="{{ asset('bundles/app/tinymce/js/tinymce/tinymce.min.js') }}"></script>
    <script type="text/javascript" src="{{ asset('bundles/app/js/jquery.form.js') }}"></script>

    <script type="text/javascript" >
        tinymce.init({
            selector: 'textarea',
            plugins: ["image"],{#            relative_urls: true,#}{#            remove_script_host: false,#}
            convert_urls: false,
            remove_script_host: true,
            file_browser_callback: function (field_name, url, type, win) {
                if (type == 'image')
                    $('#my_form input').click();
            },
            setup: function (ed) {
                ed.on('change paste mouseup', function (e) {
        {% if form.answer_descriptive is defined %}
                        var form = $("form[name={{ form.vars.id }}]");
                        var html = ed.getContent();
                        $("#{{ form.answer_descriptive.vars.id }}").html(html);
                        form.ajaxSubmit({success: function (d) {
                                eval(d);
                            }});
        {%endif%}
                    });
                }
            });
    </script>

    <script type="text/javascript" src="{{ asset('bundles/app/js/bootstrap-tooltip.js') }}"></script>
    <script type="text/javascript" src="{{ asset('bundles/app/js/bootstrap-confirmation.js') }}"></script>

    <script src="{{ asset('bundles/app/timer/jquery.timeTo.min.js')}}"></script>
    <script type="text/javascript">
            var timeto ={{ remainingSeconds }}
                    $('#countdown').timeTo({
                seconds: timeto,{#            timeTo: new Date(new Date('Thu Oct 29 2015 09:00:00 GMT+0530 (IST)')),#}{#            displayDays: 2,#}
                theme: "black",
                displayCaptions: true,
                fontSize: 20,
                captionSize: 8,
                callback: function () {
                    candidate_home();
                }
            });
            $(document).ready(function () {

                function form_submit() {
                    alert("hai");
                }

                $('.confirmation').confirmation();
                $('body').bind("cut copy paste", function (e) {
                    e.preventDefault();
                });

                $('#unselect').on("click", function (event) {
                    $("input:radio").prop('checked', false);
        {# $('radio').prop('checked', false);
         $(this).prop('checked', true);#}
                 });
             });
    </script>

    <script type="text/javascript" >
        function candidate_home() {
            window.location.href = "{{ path('candidate_exam_finish') }}";
        }
    </script>

{% endblock %}