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

{% block body -%}
    {% if entities %}
        <div class="row">
            <div class="col-lg-3 col-md-6">
                <div class="panel panel-primary">
                    <div class="panel-heading">
                        <div class="row">
                            <div class="col-xs-3 text-right">
                                <div> <i class="fa fa-columns fa-fw fa-2x">  </i></div>
                            </div>
                            <div class="col-xs-9 text-right">
                                <div>{{ exam.examname }}</div>
                            </div>
                        </div>
                    </div>
                    <a href="#" data-exam="{{ exam.examname }}" class="view_exam_details" data-toggle="modal" data-target="#myModal" >
                        <div class="panel-footer">
                            <span class="pull-left">View Details</span>
                            <span class="pull-right"><i class="fa fa-arrow-circle-right"></i></span>
                            <div class="clearfix"></div>
                        </div>
                    </a>
                </div>
            </div>
        </div>
        <div class="row">

            <div class="col-lg-12">
                <div class="panel panel-default">
                    <div class="panel-heading">
                        <h4>Questions List</h4>
                    </div>
                    <div class="panel-body">     
                        <div class="button_container">
                            <a class="btn btn-primary"  title="Add New Exam" href="{{ path('questions_new',{'examguid':exam.guid}) }}">
                                Add New Question
                            </a>
                        </div>
                        <div class="data_container"> 
                            <table class="table table-bordered table-responsive">
                                <thead>
                                    <tr>
                                        <th>#</th>
                                        <th>Question</th>
                                        <th>Option1</th>
                                        <th>Option2</th>
                                        <th>Option3</th>
                                        <th>Option4</th>
                                        <th>Choicetype</th>
                                        <th>Answer</th>
                                        <th>Actions</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    {% set slno = 1 %}
                                    {% for entity in entities %}
                                        <tr>
                                            <td> {{ slno }} </td>
                                            <td>{{ entity.question|raw }}</td>
                                            <td>{{ entity.option1|raw }}</td>
                                            <td>{{ entity.option2|raw }}</td>
                                            <td>{{ entity.option3|raw }}</td>
                                            <td>{{ entity.option4|raw }}</td>
                                            <td>{{ entity.choiceType }}</td>
                                            <td>
                                                {% for answers in  entity.answer%}
                                                    {{ answers }}
                                                    <br />
                                                {% endfor %}
                                            </td>
                                            <td>
                                                <ul>
                                                    <li>
                                                        <a href="{{ path('questions_show', { 'id': entity.guid,'examguid':exam.guid }) }}">show</a>
                                                    </li>
                                                    <li>
                                                        <a href="{{ path('questions_edit', { 'id': entity.guid,'examguid':exam.guid }) }}">edit</a>
                                                    </li>
                                                </ul>
                                            </td>
                                        </tr>
                                        {% set slno = slno + 1 %}
                                    {% endfor %}
                                </tbody>
                            </table>
                            {{ knp_pagination_render(entities, 'AppBundle:Default:slidingAjax.html.twig') }}
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!-- Modal -->
        <div aria-hidden="true" aria-labelledby="myModalLabel" role="dialog" tabindex="-1" id="myModal" class="modal fade" style="display: none;">
            <div class="modal-dialog"  style="width: 85%;">
                <div class="modal-content">
                    <div class="modal-header">
                        <button aria-hidden="true" data-dismiss="modal" class="close" type="button">×</button>
                        <h4 id="myModalLabel" class="modal-title"><span id="modal_title"> </span></h4>
                    </div>
                    <div class="modal-body">
                        <div class="modal_data_container">
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button data-dismiss="modal" class="btn btn-default" type="button">Close</button>
                    </div>
                </div>
                <!-- /.modal-content -->
            </div>
            <!-- /.modal-dialog -->
        </div>
        <!-- /.modal -->

        <div id="exam_details" style="display:none;">
            <div class="table-responsive">
                <table class="table">
                    <tbody>
                        <tr>
                            <td>Exam Name</td>
                            <td>{{ exam.examname }}</td>
                        </tr>
                        <tr>
                            <td>Duration[in minutes]</td>
                            <td>{{ exam.duration }}</td>
                        </tr>
                        <tr>
                            <td>Exam Type</td>
                            <td>{{ exam.examtype }}</td>
                        </tr>
                        <tr>
                            <td>Maximun Questions</td>
                            <td>{{ exam.maxQuestions }}</td>
                        </tr>
                        <tr>
                            <td>Description</td>
                            <td>{{ exam.description|raw }}</td>
                        </tr>
                    </tbody>
                </table>
            </div>
        </div>

    {% else %}
        <div class="row">
            <div class="col-lg-12">
                <div class="panel panel-default">
                    <div class="panel-heading">
                        <h6>Select Exam</h6>
                    </div>
                    <div class="panel-body">
                        {{ form(search_form) }}
                    </div>
                </div>
            </div>
        </div>
    {% endif %}

{% endblock %}
{% block userscripts %}
    <script type="text/javascript">
        $(document).ready(function () {
            $(".view_exam_details").click(function () {

                $("#modal_title").html("Exam Details");
                $(".modal_data_container").html($("#exam_details").html());
            });
        });
        function __loadPage(path) {
            $.ajax({
                type: "POST",
                url: path,
                beforeSend: function () {
        {#                    $(".box").append('<div class="overlay"></div><div class="loading-img"></div>');#}
                    },
                    success: function (html) {
                        var data_table = $(html).find(".data_container");
                        $(".data_container").html(data_table);
                    },
                    complete: function () {
                        $(".box").find(".overlay, .loading-img").remove();
                    }

                });
            }
    </script>
{% endblock %}