@extends('admin.layout.master')

@section('content')

<div class="app-content  my-3 my-md-5">
				<div class="side-app">
					<div class="page-header">
						<ol class="breadcrumb">
							<li class="breadcrumb-item" aria-current="page"><a href="javascript:void(0)">Package Management</a></li>
							<li class="breadcrumb-item" aria-current="page"><a href="{{route('admin.test_series_manager.test.list', base64_encode($testDetails->test_package_id))}}">Test</a></li>
							<li class="breadcrumb-item active" aria-current="page"><a href="javascript:void(0)">Question</a></li>
						</ol>
					</div>
					<!-- MAIN BODY CONTENT -->
            <h1>Question</h1>

            <!-- Table -->
            <div class="card">
              <div class="steps-wrap">
                <ul class="steps-item">
                  
                  <li  class=" @if($testDetails->completed_step >= 1){{'grey-color'}}@endif">
                    <a href="{{route('admin.test_series_manager.test.edit', base64_encode($testDetails->id))}}">
                    <div class="step-content">
                      <p class="step">Step 1</p>
                      <p class="step-desc">Create a New Test</p>
                    </div>
                    <svg
                      class="step-img"
                      xmlns="http://www.w3.org/2000/svg"
                      width="24"
                      height="24"
                      viewBox="0 0 24 24"
                    >
                      <g transform="translate(21017.088 -1472.473)">
                        <rect
                          width="24"
                          height="24"
                          transform="translate(-21017.088 1472.473)"
                          fill="none"
                        />
                        <g transform="translate(-21013.088 1474.973)">
                          <g transform="translate(0 6.846)">
                            <path
                              d="M8,12.154a1.51,1.51,0,0,1-.683-.165A7.716,7.716,0,0,0,4,11.317a9,9,0,0,0-2.2.263,1.45,1.45,0,0,1-.358.045A1.434,1.434,0,0,1,.432,11.2,1.455,1.455,0,0,1,0,10.163V1.927A1.494,1.494,0,0,1,.888.577,7.915,7.915,0,0,1,4,0,6.685,6.685,0,0,1,8,1.095a6.69,6.69,0,0,1,4-1.095,7.853,7.853,0,0,1,3.106.577A1.494,1.494,0,0,1,16,1.927v8.236a1.437,1.437,0,0,1-1.8,1.417,9,9,0,0,0-2.2-.263,7.643,7.643,0,0,0-3.317.672A1.476,1.476,0,0,1,8,12.154Zm4-10.693a8.806,8.806,0,0,0-4,1.1v8.4a8.815,8.815,0,0,1,4-1.095,9.163,9.163,0,0,1,1.673.146.768.768,0,0,0,.134.012.734.734,0,0,0,.739-.728V2.38a.739.739,0,0,0-.581-.716A9.2,9.2,0,0,0,12.006,1.46Z"
                              transform="translate(0 0)"
                              fill=""
                            />
                          </g>
                          <ellipse
                            cx="3.296"
                            cy="3.267"
                            rx="3.296"
                            ry="3.267"
                            transform="translate(4.894)"
                            fill=""
                          />
                        </g>
                      </g>
                    </svg>
                    </a>
                  </li>
                
                
                  <li class="active">
                    <a href="{{route('admin.test_series_manager.test.question.list', base64_encode($testDetails->id))}}">
                    <div class="step-content">
                      <p class="step">Step 2</p>
                      <p class="step-desc">Add Question</p>
                    </div>
                    <svg
                      class="step-img"
                      xmlns="http://www.w3.org/2000/svg"
                      width="35"
                      height="29.002"
                      viewBox="0 0 35 29.002"
                    >
                      <path
                        d="M3.807,24.191A13,13,0,0,1,13,2a12.91,12.91,0,0,1,5.4,1.168A9,9,0,0,0,25.849,17,13.012,13.012,0,0,1,13,28,12.909,12.909,0,0,1,3.807,24.191Zm8.244-4.721a1.5,1.5,0,0,0-.5.324,1.616,1.616,0,0,0-.336.487,1.542,1.542,0,0,0,.336,1.7,1.533,1.533,0,0,0,.5.325,1.647,1.647,0,0,0,.631.112,1.594,1.594,0,0,0,.619-.112,1.685,1.685,0,0,0,.5-.325,1.538,1.538,0,0,0,.341-.492,1.573,1.573,0,0,0,0-1.212,1.7,1.7,0,0,0-.341-.487,1.6,1.6,0,0,0-.5-.324,1.47,1.47,0,0,0-.619-.121A1.535,1.535,0,0,0,12.051,19.471Zm1.771-7.939a1.1,1.1,0,0,1,.355.859,1.534,1.534,0,0,1-.193.779,2.478,2.478,0,0,1-.474.59,5.351,5.351,0,0,1-.623.5,7.107,7.107,0,0,0-.619.474,2.281,2.281,0,0,0-.475.547,1.249,1.249,0,0,0-.191.7.787.787,0,0,0,.005.107.514.514,0,0,0,.008.08s0,.008,0,.012a.046.046,0,0,0,0,.012l.2,1.454h1.911l.252-1.262a.936.936,0,0,1,.283-.5,4.829,4.829,0,0,1,.539-.457c.05-.039.1-.076.153-.115l.08-.06.005-.006c.138-.1.278-.21.424-.322a3.683,3.683,0,0,0,.635-.631,3.262,3.262,0,0,0,.481-.865,3.351,3.351,0,0,0,.187-1.188,3.312,3.312,0,0,0-.251-1.31A2.915,2.915,0,0,0,15.78,9.91a3.394,3.394,0,0,0-1.158-.643A4.835,4.835,0,0,0,13.1,9.04a5.657,5.657,0,0,0-1.123.107,4.92,4.92,0,0,0-.967.289,5.5,5.5,0,0,0-.84.426,6.069,6.069,0,0,0-.727.524l.739,1.135a.626.626,0,0,0,.576.329.683.683,0,0,0,.342-.1l.119-.063.045-.024c.066-.037.136-.074.21-.113l.029-.015a2.972,2.972,0,0,1,.546-.223,2.818,2.818,0,0,1,.8-.1A1.4,1.4,0,0,1,13.822,11.532ZM18,8a8,8,0,1,1,8,8A8.01,8.01,0,0,1,18,8Zm3.534,1.2H25.09v3.847h2.435V9.2H31.1V7.052H27.526V3.226H25.09V7.052H21.534Z"
                        transform="translate(0.5 0.5)"
                        fill=""
                        stroke="rgba(0,0,0,0)"
                        stroke-width="1"
                      />
                    </svg>
                  </a>
                  </li>
                  
                  <li class="@if($testDetails->completed_step >= 3){{'grey-color'}}@endif">
                    <a href="javascript:void(0)" class="next_class" data-total="{{$questiontotalRecord}}" data-lang="">
                    <div class="step-content">
                      <p class="step">Step 3</p>
                      <p class="step-desc">Test Setting</p>
                    </div>
                    <svg
                      class="step-img"
                      xmlns="http://www.w3.org/2000/svg"
                      width="24"
                      height="24"
                      viewBox="0 0 24 24"
                    >
                      <g transform="translate(-542 -154)">
                        <rect
                          width="24"
                          height="24"
                          transform="translate(542 154)"
                          fill="rgba(0,0,0,0)"
                        />
                        <path
                          d="M561,175H547a2,2,0,0,1-2-2V159a2,2,0,0,1,2-2h4.18a2.988,2.988,0,0,1,5.64,0H561a2,2,0,0,1,2,2v14A2,2,0,0,1,561,175Zm-11-6a1,1,0,1,0,0,2h5a1,1,0,0,0,0-2Zm0-4a1,1,0,1,0,0,2h8a1,1,0,1,0,0-2Zm0-4a1,1,0,1,0,0,2h8a1,1,0,1,0,0-2Zm4-4a1,1,0,1,0,1,1A1,1,0,0,0,554,157Z"
                          fill=""
                        />
                      </g>
                    </svg>
                    </a>
                  </li>
                  
                  <li class="@if($testDetails->completed_step >= 4){{'grey-color'}}@endif">
                    <a href="javascript:void(0)">
                    <div class="step-content">
                      <p class="step">Step 4</p>
                      <p class="step-desc">Finish Test</p>
                    </div>
                    <svg
                      class="step-img"
                      xmlns="http://www.w3.org/2000/svg"
                      width="24"
                      height="24"
                      viewBox="0 0 24 24"
                    >
                      <g transform="translate(-542 -154)">
                        <rect
                          width="24"
                          height="24"
                          transform="translate(542 154)"
                          fill="rgba(0,0,0,0)"
                        />
                        <path
                          d="M561,175H547a2,2,0,0,1-2-2V159a2,2,0,0,1,2-2h4.18a2.988,2.988,0,0,1,5.64,0H561a2,2,0,0,1,2,2v14A2,2,0,0,1,561,175Zm-11-6a1,1,0,1,0,0,2h5a1,1,0,0,0,0-2Zm0-4a1,1,0,1,0,0,2h8a1,1,0,1,0,0-2Zm0-4a1,1,0,1,0,0,2h8a1,1,0,1,0,0-2Zm4-4a1,1,0,1,0,1,1A1,1,0,0,0,554,157Z"
                          fill=""
                        />
                      </g>
                    </svg>
                  </a>
                  </li>
                </ul>
                <div class="card-body">
                  <h2>Add Question</h2>
                  <!-- TOP 3 BOX -->
                  <div class="row d-flex">
                    <div class="col-lg-4">
                      <div class="details-box box-q red text-center">
                        <svg
                          class="box-q-icon"
                          xmlns="http://www.w3.org/2000/svg"
                          width="47"
                          height="40"
                          viewBox="0 0 47 40"
                        >
                          <circle cx="20" cy="20" r="20" fill="" />
                          <rect
                            width="4.016"
                            height="4.017"
                            transform="translate(18.074 30.124)"
                            fill="#fff"
                          />
                          <path
                            d="M838.066,299.033a8.033,8.033,0,1,0-16.066,0h4.017a4.016,4.016,0,1,1,8.033,0,3.925,3.925,0,0,1-1.185,2.831l-2.49,2.531a8.084,8.084,0,0,0-2.35,5.683v1h4.017a6.835,6.835,0,0,1,2.35-5.683l1.807-1.848A6.389,6.389,0,0,0,838.066,299.033Z"
                            transform="translate(-809.951 -284.976)"
                            fill="#fff"
                          />
                          <circle
                            cx="11.5"
                            cy="11.5"
                            r="11.5"
                            transform="translate(24 17)"
                            fill="#fff"
                          />
                          <path
                            d="M945.432,961.414a1.68,1.68,0,0,0-2.4.017l-8.137,8.154-3.915-3.915a1.7,1.7,0,0,0-2.4,0l-.153.153a1.7,1.7,0,0,0,0,2.4l5.26,5.261a1.7,1.7,0,0,0,2.4,0l9.5-9.516a1.7,1.7,0,0,0,0-2.4l-.153-.153Z"
                            transform="translate(-899.989 -939.964)"
                            fill=""
                          />
                        </svg>
                        <p class="box-q-desc">
                          Directly add questions from the question bank. The
                          selected set of questions will be associated to the
                          test
                        </p>
                        <a href="{{route('admin.test_series_manager.test.question.vault.list', base64_encode($testDetails->id))}}"><button
                          class="btn btn-primary btn-streach font-book fs-16"
                        >
                          Select Question
                        </button></a>
                      </div>
                    </div>
                    <div class="col-lg-4">
                      <div class="details-box box-q orange text-center">
                        <svg
                          class="box-q-icon"
                          xmlns="http://www.w3.org/2000/svg"
                          width="47"
                          height="40"
                          viewBox="0 0 47 40"
                        >
                          <circle cx="20" cy="20" r="20" fill="" />
                          <rect
                            width="4.016"
                            height="4.017"
                            transform="translate(18.074 30.124)"
                            fill="#fff"
                          />
                          <path
                            d="M838.066,299.033a8.033,8.033,0,1,0-16.066,0h4.017a4.016,4.016,0,1,1,8.033,0,3.925,3.925,0,0,1-1.185,2.831l-2.49,2.531a8.084,8.084,0,0,0-2.35,5.683v1h4.017a6.835,6.835,0,0,1,2.35-5.683l1.807-1.848A6.389,6.389,0,0,0,838.066,299.033Z"
                            transform="translate(-809.951 -284.976)"
                            fill="#fff"
                          />
                          <circle
                            cx="11.5"
                            cy="11.5"
                            r="11.5"
                            transform="translate(24 17)"
                            fill="#fff"
                          />
                          <path
                            d="M945.432,961.414a1.68,1.68,0,0,0-2.4.017l-8.137,8.154-3.915-3.915a1.7,1.7,0,0,0-2.4,0l-.153.153a1.7,1.7,0,0,0,0,2.4l5.26,5.261a1.7,1.7,0,0,0,2.4,0l9.5-9.516a1.7,1.7,0,0,0,0-2.4l-.153-.153Z"
                            transform="translate(-899.989 -939.964)"
                            fill=""
                          />
                        </svg>
                        <p class="box-q-desc">
                          Add questions by importing an excel sheet.The sheet
                          will provide a streamlined access to import numerous
                          questions in a single go.
                        </p>
                        <a href="{{route('admin.test_series_manager.test.question.import', base64_encode($testDetails->id))}}"><button
                          class="btn btn-primary btn-streach font-book fs-16"
                        >
                          Import From XLS
                        </button></a>
                      </div>
                    </div>
                    <div class="col-lg-4">
                      <div class="details-box box-q blue text-center">
                        <svg
                          class="box-q-icon"
                          xmlns="http://www.w3.org/2000/svg"
                          width="44.252"
                          height="40"
                          viewBox="0 0 44.252 40"
                        >
                          <g transform="translate(-0.163 -0.191)">
                            <g transform="translate(0 0)">
                              <path
                                d="M20,40A20,20,0,0,1,5.858,5.858,20,20,0,0,1,34.142,34.142,19.869,19.869,0,0,1,20,40Zm-.316-15.428a2.4,2.4,0,0,0-1.695.675,2.3,2.3,0,0,0-.5.729,2.251,2.251,0,0,0-.182.9,2.3,2.3,0,0,0,.182.912,2.276,2.276,0,0,0,.5.735,2.3,2.3,0,0,0,.75.486,2.5,2.5,0,0,0,.945.175,2.463,2.463,0,0,0,.932-.175,2.381,2.381,0,0,0,.756-.486,2.225,2.225,0,0,0,.506-.735,2.3,2.3,0,0,0,.183-.912,2.238,2.238,0,0,0-.689-1.634,2.478,2.478,0,0,0-.756-.492A2.383,2.383,0,0,0,19.684,24.572Zm.243-12.2a2.12,2.12,0,0,1,1.464.48,1.654,1.654,0,0,1,.534,1.289,2.24,2.24,0,0,1-.318,1.209,4.309,4.309,0,0,1-.776.918,9.348,9.348,0,0,1-.986.769,7.85,7.85,0,0,0-.952.756,3.1,3.1,0,0,0-.668.891,1.882,1.882,0,0,0-.135,1.154l.3,2.174H21.25l.378-1.89a1.525,1.525,0,0,1,.438-.756,7.7,7.7,0,0,1,.81-.681c.3-.223.633-.475.986-.75a5.512,5.512,0,0,0,.952-.958,4.967,4.967,0,0,0,.715-1.3,5.039,5.039,0,0,0,.284-1.776,4.893,4.893,0,0,0-.385-1.964,4.25,4.25,0,0,0-1.1-1.512,4.98,4.98,0,0,0-1.735-.966A7.289,7.289,0,0,0,20.3,9.114a8.613,8.613,0,0,0-1.681.156,7.936,7.936,0,0,0-1.451.432,8.553,8.553,0,0,0-1.263.641,9.481,9.481,0,0,0-1.086.783l1.107,1.7a.933.933,0,0,0,.864.5,1.021,1.021,0,0,0,.513-.148c.17-.1.366-.206.6-.33a4.834,4.834,0,0,1,.823-.331A4.116,4.116,0,0,1,19.927,12.368Z"
                                transform="translate(0.163 0.192)"
                                fill=""
                              />
                            </g>
                            <path
                              d="M2071.109,1739.858v5.036h5.4v5.814h5.481V1739l-5.481-2.949v3.811Z"
                              transform="translate(-2042.096 -1732.697)"
                              fill="#f5f5f5"
                              stroke="#f5f5f5"
                              stroke-width="1.2"
                            />
                            <path
                              d="M9.7-8.842v5.79h5.41V.194H9.7v5.82H6.011V.194H.63V-3.052H6.011v-5.79Z"
                              transform="translate(29.31 11.101)"
                              fill=""
                            />
                          </g>
                        </svg>
                        <p class="box-q-desc">
                          This is to associate new questions in the created
                          test.You can create questions of type; multiple
                          choice, multiple options, true false, fill in the
                          blanks, match following and match matrix.
                        </p>
                        <a href="{{route('admin.test_series_manager.test.question.add', base64_encode($testDetails->id))}}"><button class="btn btn-primary btn-streach font-book fs-16">Add Question</button></a>
                      </div>
                    </div>
                  </div>
                  <!-- TOP 3 BOX END -->
                  <div class="details-box mt-8">
                    <div class="card-header-scroll mb-4">
                      <div class="row">
                        <div class="col-lg-3"><h2>Questions</h2></div>
                        <div class="col-lg-9">
                          <div class="filter-group-scroll">
                            <div class="owl-carousel owl-theme filter">
                              <div class="item">
                                <select name="subject_filter" id="subject_filter" class="form-control filters search_filter" data-id="subject">
                                  <option value="" selected>Subject</option>
                                  @if($subjects)
                                    @foreach($subjects as $subject)
                                        <option value="{{$subject->subject_id}}">@if(isset($subject->subjectByTestSubject)){{$subject->subjectByTestSubject->subject}}@endif</option>
                                    @endforeach
                                  @endif
                                </select>
                              </div>
                              <div class="item">
                                <select name="chapter_filter" id="chapter_filter" class="form-control filters search_filter" data-id="chapter">
                                  <option value="" selected>Chapter</option>
                                </select>
                              </div>
                              <div class="item">
                                <select name="topic_filter" id="topic_filter" class="form-control filters search_filter" data-id="topic">
                                  <option value="" selected>Topic</option>
                                </select>
                              </div>
                              <div class="item">
                                <select name="question_type_filter" id="question_type_filter" class="form-control search_filter">
                                  <option value="" selected>Question Type</option>
                                  <option value="1">Multiple Choice</option>
                                  <option value="2">Multiple Response</option>
                                  <option value="3">True/False</option>
                                  <option value="4">Fill In The blanks</option>
                                  <option value="5">Match The Following</option>
                                  <option value="6">Match Matrix</option>
                                  <option value="7">Essay</option>
                                  <option value="8">Single Digit</option>
                                  <option value="9">Subjective</option>
                                </select>
                              </div>
                              <div class="item">
                                <select name="difficulty_level_filter" id="difficulty_level_filter" class="form-control search_filter">
                                  <option value="" selected>Difficulty Level</option>
                                  <option value="1">Easy</option>
                                  <option value="2">Medium</option>
                                  <option value="3">Hard</option>
                                </select>
                              </div>
                            </div>
                          </div>
                        </div>
                      </div>
                    </div>
                    <!-- Table -->
                    <p class="text-right font-bold mb-2 total_question">
                      Total No of Questions: {{$questiontotalRecord}}
                    </p>
                    <div class="table-responsive">
                      <table class="stripe row-border order-column dataTable no-footer" id="test-question">
                        <thead>
                          <tr>
                            <th width="40">
                              <label class="custom-control custom-checkbox">
                                <input type="checkbox" class="custom-control-input all_chk" name="example-checkbox1" value="1"/>
                                <span class="custom-control-label"></span>
                              </label>
                            </th>
                            <th width="60">S.No</th>
                            <th>Question Details</th>
                            <th width="130">
                              <div class="dropdown">
                                <button class="btn btn-custom-toggle dropdown-toggle btn-block input-sm" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Positive</button>
                                <div  class="dropdown-menu custom-dropdown-menu" aria-labelledby="dropdownMenuButton" >
                                  <p class="dropdown-item">
                                    <input type="text" class="form-control" />
                                  </p>
                                  <a href="javascript:void(0)" class="dropdown-item text-center font-book fs-14 text-danger positiveApply" data-type="positive">Apply Now</a>
                                </div>
                              </div>
                            </th>
                            <th width="130">
                              <div class="dropdown">
                                <button class="btn btn-custom-toggle dropdown-toggle btn-block input-sm" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Negative</button>
                                <div  class="dropdown-menu custom-dropdown-menu" aria-labelledby="dropdownMenuButton" >
                                  <p class="dropdown-item">
                                    <input type="text" class="form-control" />
                                  </p>
                                  <a href="javascript:void(0)" class="dropdown-item text-center font-book fs-14 text-danger negativeApply" data-type="negative">Apply Now</a>
                                </div>
                              </div>
                            </th>
                            <th width="40">
                              <a href="javascript:void(0)" class="action-btn reverse all_delete">
                                <img src="{{asset('admin/images/bin.svg')}}" alt="" />
                              </a>
                            </th>
                          </tr>
                        </thead>
                        
                      </table>
                    </div>
                    <!-- Table end -->
                  </div>
                  <span id="testDetails-id" data-id="{{base64_encode($testDetails->id)}}" style="display: none;"></span>
                  <div class="test-footer">
                    <a href="{{route('admin.test_series_manager.test.edit', base64_encode($testDetails->id))}}"><button class="btn btn-outline-primary btn-pill btn-streach font-book mt-6 fs-14">Back </button></a>
                    <a href="javascript:void(0)" class="btn btn-primary btn-streach font-book mt-6 fs-14  ml-3 question_list_next" data-total="{{$questiontotalRecord}}" data-lang="">Next</a>
                  </div>
                </div>
              </div>
            </div>
            <!-- //Table -->
            <!--// MAIN BODY CONTENT -->
				</div>
			</div>
@endsection
@section('scripts')
<script type="text/javascript">
	var test_question_data = "{{route('admin.test_series_manager.test.question.list', base64_encode($testDetails->id))}}"; 
  var next_page = "{{route('admin.test_series_manager.test.setting.add', base64_encode($testDetails->id))}}";
  @if(Session::has('success'))
            Swal.fire('{{ Session::get('success') }}');
  @endif
</script>
<script type="text/javascript" src="{{asset('js/test_question.js?v='.time())}}"></script>
@endsection