@extends('coaching.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)">Practice Set Management</a></li>
							<li class="breadcrumb-item" aria-current="page"><a href="{{route('coaching.practice_set.chapter.list', base64_encode($setChapterDetails->practice_set_id))}}">Practice Set Chapter</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">
                
                <div class="card-body">
                  <h2>Add Question</h2>
                  <!-- TOP 3 BOX -->
                  <div class="row ">
                  <div class="col-xl-4 col-lg-6 col-md-12">
                    <div class="card">
                      <div class="card-body small-card">
                        <h5 class="font-medium">
                          Total No of Questions
                        </h5>
                        <div class="counter">
                          <svg
                            id="small-card-icon"
                            class="blue"
                            xmlns="http://www.w3.org/2000/svg"
                            width="24"
                            height="24"
                            viewBox="0 0 24 24"
                          >
                            <g transform="translate(21090 -1397)">
                              <rect
                                width="24"
                                height="24"
                                transform="translate(-21090 1397)"
                                fill="none"
                              />
                              <path
                                d="M14.222,18H1.778A1.791,1.791,0,0,1,0,16.2V3.6A1.792,1.792,0,0,1,1.778,1.8H5.494a2.646,2.646,0,0,1,5.014,0h3.715A1.791,1.791,0,0,1,16,3.6V16.2A1.791,1.791,0,0,1,14.222,18ZM4.445,12.6a.9.9,0,0,0,0,1.8H8.89a.9.9,0,0,0,0-1.8Zm0-3.6a.9.9,0,0,0,0,1.8h7.111a.9.9,0,0,0,0-1.8Zm0-3.6a.9.9,0,0,0,0,1.8h7.111a.9.9,0,0,0,0-1.8ZM8,1.8a.9.9,0,1,0,.889.9A.9.9,0,0,0,8,1.8Z"
                                transform="translate(-21086 1400)"
                                fill=""
                              />
                            </g>
                          </svg>
                          <span>{{$questiontotalRecord}}</span>
                        </div>
                        <svg
                          id="small-card-bg-icon"
                          class="blue"
                          xmlns="http://www.w3.org/2000/svg"
                          width="24"
                          height="24"
                          viewBox="0 0 24 24"
                        >
                          <g transform="translate(21090 -1397)">
                            <rect
                              width="24"
                              height="24"
                              transform="translate(-21090 1397)"
                              fill="none"
                            />
                            <path
                              d="M14.222,18H1.778A1.791,1.791,0,0,1,0,16.2V3.6A1.792,1.792,0,0,1,1.778,1.8H5.494a2.646,2.646,0,0,1,5.014,0h3.715A1.791,1.791,0,0,1,16,3.6V16.2A1.791,1.791,0,0,1,14.222,18ZM4.445,12.6a.9.9,0,0,0,0,1.8H8.89a.9.9,0,0,0,0-1.8Zm0-3.6a.9.9,0,0,0,0,1.8h7.111a.9.9,0,0,0,0-1.8Zm0-3.6a.9.9,0,0,0,0,1.8h7.111a.9.9,0,0,0,0-1.8ZM8,1.8a.9.9,0,1,0,.889.9A.9.9,0,0,0,8,1.8Z"
                              transform="translate(-21086 1400)"
                              fill=""
                            />
                          </g>
                        </svg>
                      </div>
                    </div>
                  </div>


                  <div class="col-xl-4 col-lg-6 col-md-12">
                    <div class="card">
                      <div class="card-body small-card">
                        <h5 class="font-medium">Difficulty Wise Questions</h5>
                        <div class="counter">
                          <svg
                            id="small-card-icon"
                            class="red"
                            xmlns="http://www.w3.org/2000/svg"
                            width="24"
                            height="24"
                            viewBox="0 0 24 24"
                          >
                            <g transform="translate(21090 -1397)">
                              <rect
                                width="24"
                                height="24"
                                transform="translate(-21090 1397)"
                                fill="none"
                              />
                              <path
                                d="M14.222,18H1.778A1.791,1.791,0,0,1,0,16.2V3.6A1.792,1.792,0,0,1,1.778,1.8H5.494a2.646,2.646,0,0,1,5.014,0h3.715A1.791,1.791,0,0,1,16,3.6V16.2A1.791,1.791,0,0,1,14.222,18ZM4.445,12.6a.9.9,0,0,0,0,1.8H8.89a.9.9,0,0,0,0-1.8Zm0-3.6a.9.9,0,0,0,0,1.8h7.111a.9.9,0,0,0,0-1.8Zm0-3.6a.9.9,0,0,0,0,1.8h7.111a.9.9,0,0,0,0-1.8ZM8,1.8a.9.9,0,1,0,.889.9A.9.9,0,0,0,8,1.8Z"
                                transform="translate(-21086 1400)"
                                fill=""
                              />
                            </g>
                          </svg>
                          <span>Easy {{$easyQuestiontotalRecord}}, Medium {{$mediumQuestiontotalRecord}}, Hard {{$hardQuestiontotalRecord}}</span>
                        </div>
                        <svg
                          id="small-card-bg-icon"
                          class="red"
                          xmlns="http://www.w3.org/2000/svg"
                          width="24"
                          height="24"
                          viewBox="0 0 24 24"
                        >
                          <g transform="translate(21090 -1397)">
                            <rect
                              width="24"
                              height="24"
                              transform="translate(-21090 1397)"
                              fill="none"
                            />
                            <path
                              d="M14.222,18H1.778A1.791,1.791,0,0,1,0,16.2V3.6A1.792,1.792,0,0,1,1.778,1.8H5.494a2.646,2.646,0,0,1,5.014,0h3.715A1.791,1.791,0,0,1,16,3.6V16.2A1.791,1.791,0,0,1,14.222,18ZM4.445,12.6a.9.9,0,0,0,0,1.8H8.89a.9.9,0,0,0,0-1.8Zm0-3.6a.9.9,0,0,0,0,1.8h7.111a.9.9,0,0,0,0-1.8Zm0-3.6a.9.9,0,0,0,0,1.8h7.111a.9.9,0,0,0,0-1.8ZM8,1.8a.9.9,0,1,0,.889.9A.9.9,0,0,0,8,1.8Z"
                              transform="translate(-21086 1400)"
                              fill=""
                            />
                          </g>
                        </svg>
                      </div>
                    </div>
                  </div>

                  <div class="col-xl-4 col-lg-6 col-md-12">
                    <div class="card">
                      <div class="card-body small-card">
                        <h5 class="font-medium">
                          Language Wise Questions
                        </h5>
                        <div class="counter">
                          <svg
                            id="small-card-icon"
                            class="orange"
                            xmlns="http://www.w3.org/2000/svg"
                            width="24"
                            height="24"
                            viewBox="0 0 24 24"
                          >
                            <g transform="translate(21090 -1397)">
                              <rect
                                width="24"
                                height="24"
                                transform="translate(-21090 1397)"
                                fill="none"
                              />
                              <path
                                d="M14.222,18H1.778A1.791,1.791,0,0,1,0,16.2V3.6A1.792,1.792,0,0,1,1.778,1.8H5.494a2.646,2.646,0,0,1,5.014,0h3.715A1.791,1.791,0,0,1,16,3.6V16.2A1.791,1.791,0,0,1,14.222,18ZM4.445,12.6a.9.9,0,0,0,0,1.8H8.89a.9.9,0,0,0,0-1.8Zm0-3.6a.9.9,0,0,0,0,1.8h7.111a.9.9,0,0,0,0-1.8Zm0-3.6a.9.9,0,0,0,0,1.8h7.111a.9.9,0,0,0,0-1.8ZM8,1.8a.9.9,0,1,0,.889.9A.9.9,0,0,0,8,1.8Z"
                                transform="translate(-21086 1400)"
                                fill=""
                              />
                            </g>
                          </svg>
                          <span class="">English {{$engQuestiontotalRecord}}, Hindi {{$hindiQuestiontotalRecord}}</span>
                        </div>
                        <svg
                          id="small-card-bg-icon"
                          class="orange"
                          xmlns="http://www.w3.org/2000/svg"
                          width="24"
                          height="24"
                          viewBox="0 0 24 24"
                        >
                          <g transform="translate(21090 -1397)">
                            <rect
                              width="24"
                              height="24"
                              transform="translate(-21090 1397)"
                              fill="none"
                            />
                            <path
                              d="M14.222,18H1.778A1.791,1.791,0,0,1,0,16.2V3.6A1.792,1.792,0,0,1,1.778,1.8H5.494a2.646,2.646,0,0,1,5.014,0h3.715A1.791,1.791,0,0,1,16,3.6V16.2A1.791,1.791,0,0,1,14.222,18ZM4.445,12.6a.9.9,0,0,0,0,1.8H8.89a.9.9,0,0,0,0-1.8Zm0-3.6a.9.9,0,0,0,0,1.8h7.111a.9.9,0,0,0,0-1.8Zm0-3.6a.9.9,0,0,0,0,1.8h7.111a.9.9,0,0,0,0-1.8ZM8,1.8a.9.9,0,1,0,.889.9A.9.9,0,0,0,8,1.8Z"
                              transform="translate(-21086 1400)"
                              fill=""
                            />
                          </g>
                        </svg>
                      </div>
                    </div>
                  </div>

                  
                </div>
                  <!-- TOP 3 BOX END -->
                  <div class="">
                    <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(isset($setChapterDetails->subjectByPracticeSetChapter))
                                    @foreach($setChapterDetails->subjectByPracticeSetChapter as $subject)
                                        <option value="{{$subject->id}}">{{$subject->subject}}</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 choise</option>
                                  <option value="2">Multiple response</option>
                                  <option value="3">True/False</option>
                                  <option value="4">Fill up the blanks</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="table card-table table-vcenter text-nowrap" id="practice-set-chapter-question-main">
                        <thead>
                          <tr>
                            <th width="60">S.No</th>
                            <th>Question Details</th>
                            <th width="130">
                              <div class="dropdown">Positive</th>
                            <th width="130">Negative</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($setChapterDetails->id)}}" style="display: none;"></span>
                  <div class="test-footer">
                    <a href="{{route('coaching.practice_set.chapter.list', base64_encode($setChapterDetails->practice_set_id))}}"><button class="btn btn-outline-primary btn-pill btn-streach font-book mt-6 fs-14">Back </button></a>
                    <a href="{{route('coaching.practice_set.chapter.question.list', base64_encode($setChapterDetails->id))}}">
                    <butto class="btn btn-primary btn-streach font-book mt-6 fs-14  ml-3 finish_chapter">Edit</button>
                    </a>
                  </div>
                </div>
              </div>
            </div>
            <!-- //Table -->
            <!--// MAIN BODY CONTENT -->
				</div>
			</div>
@endsection
@section('scripts')
<script type="text/javascript">
	var ps_chapter_question_data = "{{route('coaching.practice_set.chapter.question.main', base64_encode($setChapterDetails->id))}}"; 
</script>
<script type="text/javascript" src="{{asset('js/practice_set_chapter_question_main.js?v='.time())}}"></script>
@endsection