{% include "header.html" %}
{% load custom_filters %}
{% load static %}
<style>
    .options{
        background-color: #f4f4f4 !important;
    }
    .quesbutton, .cquesbutton {
  border: 1px solid #d4d4d4;
  color: black;
  color: #5d5151 !important;
    
}

.fetch, .cfetch {
  background: #cc3a01;
  border: 1px solid #d4d4d4;
     
}

.saverev, .csaverev {
    background-color:#77549c;
  border: 5px solid #77549c;
  
    
}

.saverev {
    padding-top: 10px;
}
.save, .csave {

  background: #63b718;
  border: 1px solid #63b718;
    
}
.save, .saverev, .fetch, .rev,.quesbutton {
    
    height: 50px;
  width: 50px;
  margin-left: 8px;
    margin-top: 14px;
    font-size: 10px;
  cursor: pointer;
    color:white;
  margin-left: 8px;
    margin-top: 14px;
    font-size: 14px;
    border-radius: 50%;
}
.csave, .csaverev, .cfetch, .crev,.cquesbutton {
    
    height: 40px;
  width: 40px;
  margin-left: 8px;
    margin-top: 14px;
    font-size: 10px;
  cursor: pointer;
    color:white;
  margin-left: 8px;
    margin-top: 14px;
    font-size: 14px;
    border-radius: 50%;
}
.rev, .crev {
  border: 1px solid #d4d4d4;
  background: #77539c;
}

#notattempt {
      height: 40px;
  width: 40px;
  cursor: pointer;
  border: 1px solid #d4d4d4;
  
  margin-left: 8px;
    margin-top: 14px;
    font-size: 10px;
    
}

#attempt{
  background: #ff6600;
     height: 40px;
  width: 40px;
  cursor: pointer;
  border: 1px solid #d4d4d4;
  
  margin-left: 8px;
    margin-top: 14px;
    font-size: 10px;
    color:white; 
     
}

</style>
<div class="mdk-header-layout__content">

    <div class="mdk-drawer-layout js-mdk-drawer-layout" data-push data-responsive-width="992px">
        <div class="mdk-drawer-layout__content page">

            <div class="container page__heading-container">
                <div class="page__heading">
                    <nav aria-label="breadcrumb">
                        <ol class="breadcrumb mb-0">
                            <li class="breadcrumb-item"><a href="#"><i
                                        class="material-icons icon-20pt">home</i></a></li>
                            <li class="breadcrumb-item">Sections</li>
                            <li class="breadcrumb-item">Sub Sections/</li>
                            <li class="breadcrumb-item">Topic/</li>
                            <li class="breadcrumb-item active" aria-current="page">Question Bank</li>
                        </ol>
                    </nav>
                </div>
            </div>
            <div class="container-fluid">
            <div class="row mb-3">
                <div class="col-md-6">
                    <h1 class="heading">View Solution</h1>
                </div>
                <div class="col-md-12">
                    <div class="card card-body">
                        <div class="row">
                            <div class="col-md-9">
                                <a href=""><h5>{{student.0.first_name}} {{student.0.last_name}}</h5></a>
                                <p><i class="fa fa-phone-alt"></i> {{student.0.mobile}}&nbsp;&nbsp; <i class="fa fa-envelope"></i> {{student.0.email}} &nbsp;&nbsp;<i class="fa fa-calendar"></i> Attempted Date:  {{exam_wise_stats.0.attempted_at}}</p>
                            
                            </div>
                            <div class="col-md-3">
                                <a href="{{SITE_URL}}/admin/mock-analysis?exam_id={{test_id}}&student_id={{student.0.id}}&section_id=" class="btn btn-warning">View Analysis</a>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-md-8">
                    <a href="{{SITE_URL}}/admin/view-solution?exam_id={{test_id}}&student_id={{student_id}}&section_id=" class="btn {% if section_id %} btn-outline-warning {% else %} btn-warning {% endif %}">All</a>
                    {% for section in sections %}
                    <a href="{{SITE_URL}}/admin/view-solution?exam_id={{test_id}}&student_id={{student_id}}&section_id={{section.id}}" class="btn {% if section.id == section_id %} btn-warning {% else %} btn-outline-warning {% endif %}">{{section.section_name}}</a>
                    {% endfor %}
                    <br> <br>
                    {% for question in question_answers %}
                    <div class="card card-body">
                        <p>{{forloop.counter}}.)</p>
                        {% if question.question__paragraph %}
                        <p>
                            {{question.question__paragraph|safe}}</p>
                           <p>  {{question.question__question|safe}}</p>
                        {% else %}
                        <p>  {{question.question__question|safe}}</p>
                        {% endif %}
                        {% with question.question__options|json_decode as option %}
                                   {% for opt in option %}
                                   {% if question.answer_id %}
                                       {% if forloop.counter|stringformat:"s" == question.answer_id|stringformat:"s" %}
                                           {% if question.answer_id|stringformat:"s" == question.question__correct_answer|stringformat:"s" %}
                                               <div class="card card-body p-2 options bg-success" style="width: 400px;">{{ opt|safe }} </div>
                                           {% else %}
                                               {% if forloop.counter|stringformat:"s" == question.question__correct_answer|stringformat:"s" %}
                                                   <div class="card card-body p-2 options bg-success" style="width: 400px;">{{ opt|safe }} </div>
                                               {% else %}
                                                   <div class="card card-body p-2 options bg-danger" style="width: 400px;">{{ opt|safe }} </div>
                                               {% endif %}
                                           {% endif %}
                                       {% else %}
                                       {% if forloop.counter|stringformat:"s" == question.question__correct_answer|stringformat:"s" %}
                                       <div class="card card-body p-2 options bg-success" style="width: 400px;">{{ opt|safe }} </div>
                                   {% else %}
                                       <div class="card card-body p-2 options" style="width: 400px;">{{ opt|safe }} </div>
                                   {% endif %}
                                       {% endif %}
                                   {% else %}
                                       <div class="card card-body p-2 options" style="width: 400px;">{{ opt|safe }} </div>
                                   {% endif %}
                               {% endfor %}
                 
                {% endwith %}
                    </div>
                    {% endfor %}
                </div>
                <div class="col-md-4">
                    <div class="card card-body">
                        <div class="row" >
                            {% if section_id %}
                            <div class="col-6">
                            <a href="{{SITE_URL}}/admin/view-solution?exam_id={{test_id}}&student_id={{student_id}}&section_id={{section_id}}&type=correct"><button class="fetchques csave" id="save">{{section_result.0.right_answered}}</button> <span class="c_label">Correct</span></a>
                            <br><br></div>
                            <div class="col-6">       
                                <a href="{{SITE_URL}}/admin/view-solution?exam_id={{test_id}}&student_id={{student_id}}&section_id={{section_id}}&type=incorrect"><button class="fetchques cfetch" id="fetch">{{section_result.0.wrong_answered}}</button> <span class="c_label">Incorrect</span></a>
                            <br> <br></div>
                            <div class="col-6">      
                                <a href="{{SITE_URL}}/admin/view-solution?exam_id={{test_id}}&student_id={{student_id}}&section_id={{section_id}}&type=bookmarked"><button class="fetchques crev" id="rev">{{section_result.0.bookmarked}}</button> <span class="c_label">Marked for Review</span></a>
                            </div>
                            <div class="col-6">       
                                <a href="{{SITE_URL}}/admin/view-solution?exam_id={{test_id}}&student_id={{student_id}}&section_id={{section_id}}&type=notviewed"><button class="active cquesbutton"  id="quesbutton">{{section_result.0.not_attempted}}</button> <span class="c_label">Not Attempted</span></a>
                            </div>
                            {% else %}

                            <div class="col-6">
                                <a href="{{SITE_URL}}/admin/view-solution?exam_id={{test_id}}&student_id={{student_id}}&section_id=&type=correct"><button class="fetchques csave" id="save">{{result.0.right_answered}}</button> <span class="c_label">Correct</span></a>
                                <br><br></div>
                                <div class="col-6">       
                                    <a href="{{SITE_URL}}/admin/view-solution?exam_id={{test_id}}&student_id={{student_id}}&section_id=&type=incorrect"><button class="fetchques cfetch" id="fetch">{{result.0.wrong_answered}}</button> <span class="c_label">Incorrect</span></a>
                                <br> <br></div>
                                <div class="col-6">      
                                    <a href="{{SITE_URL}}/admin/view-solution?exam_id={{test_id}}&student_id={{student_id}}&section_id=&type=bookmarked"><button class="fetchques crev" id="rev">{{result.0.bookmarked}}</button> <span class="c_label">Marked for Review</span></a>
                                </div>
                                <div class="col-6">       
                                    <a href="{{SITE_URL}}/admin/view-solution?exam_id={{test_id}}&student_id={{student_id}}&section_id=&type=notviewed"><button class="active cquesbutton"  id="quesbutton">{{result.0.not_attempted}}</button> <span class="c_label">Not Attempted</span></a>
                                </div>
                            {% endif %}
                            </div>
                    </div>
                </div>
            </div>
             </div></div>
         <!-- // END drawer-layout__content -->

                <!-- drawer -->
                {% include "sidebar.html"%}
                <!-- // END drawer -->
            </div>
            <!-- // END drawer-layout -->

        </div>
        <!-- // END header-layout__content -->

    </div>
    <!-- // END header-layout -->

{% include "footer.html" %}