@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">Bank</li>
              <li class="breadcrumb-item" aria-current="page">Question Bank</li>
            </ol>
          </div>
          <!-- MAIN BODY CONTENT -->
            <h1>Question Bank</h1>

            <div class="row">
              <div class="col-xl-4 col-lg-4 col-md-4 col-sm-6">
                <div class="card">
                  <div class="card-body small-card">
                    <h5 class="font-medium">Total No of Question</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(-168 -2458)">
                          <rect
                            width="24"
                            height="24"
                            transform="translate(168 2458)"
                            fill="rgba(0,0,0,0)"
                          />
                          <path
                            d="M189,2479h-6a1,1,0,0,1,0-2h5a1,1,0,0,0,1-1v-12a1,1,0,0,0-1-1H172a1,1,0,0,0-1,1v1a1,1,0,0,1-2,0v-2a2,2,0,0,1,2-2h18a2,2,0,0,1,2,2v14A2,2,0,0,1,189,2479Zm-14.09,0a1,1,0,0,1-.98-.85,5.016,5.016,0,0,0-4.08-4.081,1,1,0,0,1-.85-.98,1.012,1.012,0,0,1,.983-1.013.962.962,0,0,1,.156.013,7,7,0,0,1,5.771,5.77.982.982,0,0,1-.23.787A1.017,1.017,0,0,1,174.91,2479Zm-2.91,0h-3v-3a3,3,0,0,1,3,3Zm6.95-.01a.98.98,0,0,1-.99-.87,8.992,8.992,0,0,0-8.079-8.079.984.984,0,0,1-.88-.99,1.01,1.01,0,0,1,1.013-1c.029,0,.058,0,.087,0a11.021,11.021,0,0,1,9.85,9.831,1.01,1.01,0,0,1-.255.779A.992.992,0,0,1,178.95,2478.99Zm3.55-6.13a1.025,1.025,0,0,1-.48-.12l-2.5-1.36a1,1,0,0,1-.52-.879v-1.41l3.02,1.65a1.02,1.02,0,0,0,.96,0l3.02-1.65v1.41a1.014,1.014,0,0,1-.52.879l-2.5,1.36A1.021,1.021,0,0,1,182.5,2472.859Zm0-3a1.025,1.025,0,0,1-.48-.12l-4.219-2.3a.5.5,0,0,1,0-.88l4.219-2.3a1.02,1.02,0,0,1,.96,0l4.22,2.3a.507.507,0,0,1,0,.88l-4.22,2.3A1.021,1.021,0,0,1,182.5,2469.86Z"
                            fill=""
                          />
                        </g>
                      </svg>
                      <span>{{$totalQuestions}}</span>
                    </div>
                    <svg
                      id="small-card-bg-icon"
                      class="red"
                      xmlns="http://www.w3.org/2000/svg"
                      viewBox="0 0 24 24"
                    >
                      <g transform="translate(-168 -2458)">
                        <rect
                          width="24"
                          height="24"
                          transform="translate(168 2458)"
                          fill="rgba(0,0,0,0)"
                        />
                        <path
                          d="M189,2479h-6a1,1,0,0,1,0-2h5a1,1,0,0,0,1-1v-12a1,1,0,0,0-1-1H172a1,1,0,0,0-1,1v1a1,1,0,0,1-2,0v-2a2,2,0,0,1,2-2h18a2,2,0,0,1,2,2v14A2,2,0,0,1,189,2479Zm-14.09,0a1,1,0,0,1-.98-.85,5.016,5.016,0,0,0-4.08-4.081,1,1,0,0,1-.85-.98,1.012,1.012,0,0,1,.983-1.013.962.962,0,0,1,.156.013,7,7,0,0,1,5.771,5.77.982.982,0,0,1-.23.787A1.017,1.017,0,0,1,174.91,2479Zm-2.91,0h-3v-3a3,3,0,0,1,3,3Zm6.95-.01a.98.98,0,0,1-.99-.87,8.992,8.992,0,0,0-8.079-8.079.984.984,0,0,1-.88-.99,1.01,1.01,0,0,1,1.013-1c.029,0,.058,0,.087,0a11.021,11.021,0,0,1,9.85,9.831,1.01,1.01,0,0,1-.255.779A.992.992,0,0,1,178.95,2478.99Zm3.55-6.13a1.025,1.025,0,0,1-.48-.12l-2.5-1.36a1,1,0,0,1-.52-.879v-1.41l3.02,1.65a1.02,1.02,0,0,0,.96,0l3.02-1.65v1.41a1.014,1.014,0,0,1-.52.879l-2.5,1.36A1.021,1.021,0,0,1,182.5,2472.859Zm0-3a1.025,1.025,0,0,1-.48-.12l-4.219-2.3a.5.5,0,0,1,0-.88l4.219-2.3a1.02,1.02,0,0,1,.96,0l4.22,2.3a.507.507,0,0,1,0,.88l-4.22,2.3A1.021,1.021,0,0,1,182.5,2469.86Z"
                          fill=""
                        />
                      </g>
                    </svg>
                  </div>
                </div>
              </div>

              <div class="col-xl-4 col-lg-4 col-md-4 col-sm-6">
                <div class="card">
                  <div class="card-body small-card">
                    <h5 class="font-medium">
                      Total No of Question
                    </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(-168 -2458)">
                          <rect
                            width="24"
                            height="24"
                            transform="translate(168 2458)"
                            fill="rgba(0,0,0,0)"
                          />
                          <path
                            d="M189,2479h-6a1,1,0,0,1,0-2h5a1,1,0,0,0,1-1v-12a1,1,0,0,0-1-1H172a1,1,0,0,0-1,1v1a1,1,0,0,1-2,0v-2a2,2,0,0,1,2-2h18a2,2,0,0,1,2,2v14A2,2,0,0,1,189,2479Zm-14.09,0a1,1,0,0,1-.98-.85,5.016,5.016,0,0,0-4.08-4.081,1,1,0,0,1-.85-.98,1.012,1.012,0,0,1,.983-1.013.962.962,0,0,1,.156.013,7,7,0,0,1,5.771,5.77.982.982,0,0,1-.23.787A1.017,1.017,0,0,1,174.91,2479Zm-2.91,0h-3v-3a3,3,0,0,1,3,3Zm6.95-.01a.98.98,0,0,1-.99-.87,8.992,8.992,0,0,0-8.079-8.079.984.984,0,0,1-.88-.99,1.01,1.01,0,0,1,1.013-1c.029,0,.058,0,.087,0a11.021,11.021,0,0,1,9.85,9.831,1.01,1.01,0,0,1-.255.779A.992.992,0,0,1,178.95,2478.99Zm3.55-6.13a1.025,1.025,0,0,1-.48-.12l-2.5-1.36a1,1,0,0,1-.52-.879v-1.41l3.02,1.65a1.02,1.02,0,0,0,.96,0l3.02-1.65v1.41a1.014,1.014,0,0,1-.52.879l-2.5,1.36A1.021,1.021,0,0,1,182.5,2472.859Zm0-3a1.025,1.025,0,0,1-.48-.12l-4.219-2.3a.5.5,0,0,1,0-.88l4.219-2.3a1.02,1.02,0,0,1,.96,0l4.22,2.3a.507.507,0,0,1,0,.88l-4.22,2.3A1.021,1.021,0,0,1,182.5,2469.86Z"
                            fill=""
                          />
                        </g>
                      </svg>
                      <ul class="list">
                        @if($questionTypes)
                          @foreach($questionTypes as $key=>$res)
                            @if($key < 2)
                                                        <li>
                              <span class="list-label">{{$question_type}}</span>
                              <span class="list-count">{{$res->count}}</span>
                            </li>
                            @endif
                          @endforeach
                        @endif
                        
                      </ul>
                    </div>
                    <svg
                      id="small-card-bg-icon"
                      class="orange"
                      xmlns="http://www.w3.org/2000/svg"
                      viewBox="0 0 24 24"
                    >
                      <g transform="translate(-168 -2458)">
                        <rect
                          width="24"
                          height="24"
                          transform="translate(168 2458)"
                          fill="rgba(0,0,0,0)"
                        />
                        <path
                          d="M189,2479h-6a1,1,0,0,1,0-2h5a1,1,0,0,0,1-1v-12a1,1,0,0,0-1-1H172a1,1,0,0,0-1,1v1a1,1,0,0,1-2,0v-2a2,2,0,0,1,2-2h18a2,2,0,0,1,2,2v14A2,2,0,0,1,189,2479Zm-14.09,0a1,1,0,0,1-.98-.85,5.016,5.016,0,0,0-4.08-4.081,1,1,0,0,1-.85-.98,1.012,1.012,0,0,1,.983-1.013.962.962,0,0,1,.156.013,7,7,0,0,1,5.771,5.77.982.982,0,0,1-.23.787A1.017,1.017,0,0,1,174.91,2479Zm-2.91,0h-3v-3a3,3,0,0,1,3,3Zm6.95-.01a.98.98,0,0,1-.99-.87,8.992,8.992,0,0,0-8.079-8.079.984.984,0,0,1-.88-.99,1.01,1.01,0,0,1,1.013-1c.029,0,.058,0,.087,0a11.021,11.021,0,0,1,9.85,9.831,1.01,1.01,0,0,1-.255.779A.992.992,0,0,1,178.95,2478.99Zm3.55-6.13a1.025,1.025,0,0,1-.48-.12l-2.5-1.36a1,1,0,0,1-.52-.879v-1.41l3.02,1.65a1.02,1.02,0,0,0,.96,0l3.02-1.65v1.41a1.014,1.014,0,0,1-.52.879l-2.5,1.36A1.021,1.021,0,0,1,182.5,2472.859Zm0-3a1.025,1.025,0,0,1-.48-.12l-4.219-2.3a.5.5,0,0,1,0-.88l4.219-2.3a1.02,1.02,0,0,1,.96,0l4.22,2.3a.507.507,0,0,1,0,.88l-4.22,2.3A1.021,1.021,0,0,1,182.5,2469.86Z"
                          fill=""
                        />
                      </g>
                    </svg>
                  </div>
                </div>
              </div>

              <div class="col-xl-4 col-lg-4 col-md-4 col-sm-12">
                <div class="card">
                  <div class="card-body small-card">
                    <h5 class="font-medium">Total No of Question Added</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(-168 -2458)">
                          <rect
                            width="24"
                            height="24"
                            transform="translate(168 2458)"
                            fill="rgba(0,0,0,0)"
                          />
                          <path
                            d="M189,2479h-6a1,1,0,0,1,0-2h5a1,1,0,0,0,1-1v-12a1,1,0,0,0-1-1H172a1,1,0,0,0-1,1v1a1,1,0,0,1-2,0v-2a2,2,0,0,1,2-2h18a2,2,0,0,1,2,2v14A2,2,0,0,1,189,2479Zm-14.09,0a1,1,0,0,1-.98-.85,5.016,5.016,0,0,0-4.08-4.081,1,1,0,0,1-.85-.98,1.012,1.012,0,0,1,.983-1.013.962.962,0,0,1,.156.013,7,7,0,0,1,5.771,5.77.982.982,0,0,1-.23.787A1.017,1.017,0,0,1,174.91,2479Zm-2.91,0h-3v-3a3,3,0,0,1,3,3Zm6.95-.01a.98.98,0,0,1-.99-.87,8.992,8.992,0,0,0-8.079-8.079.984.984,0,0,1-.88-.99,1.01,1.01,0,0,1,1.013-1c.029,0,.058,0,.087,0a11.021,11.021,0,0,1,9.85,9.831,1.01,1.01,0,0,1-.255.779A.992.992,0,0,1,178.95,2478.99Zm3.55-6.13a1.025,1.025,0,0,1-.48-.12l-2.5-1.36a1,1,0,0,1-.52-.879v-1.41l3.02,1.65a1.02,1.02,0,0,0,.96,0l3.02-1.65v1.41a1.014,1.014,0,0,1-.52.879l-2.5,1.36A1.021,1.021,0,0,1,182.5,2472.859Zm0-3a1.025,1.025,0,0,1-.48-.12l-4.219-2.3a.5.5,0,0,1,0-.88l4.219-2.3a1.02,1.02,0,0,1,.96,0l4.22,2.3a.507.507,0,0,1,0,.88l-4.22,2.3A1.021,1.021,0,0,1,182.5,2469.86Z"
                            fill=""
                          />
                        </g>
                      </svg>
                      <ul class="list">
                        <li>
                          <span class="list-label">Last Days</span>
                          <span class="list-count">{{$questionAddedLastDay}}</span>
                        </li>
                        <li>
                          <span class="list-label">Last 7 Days</span>
                          <span class="list-count">{{$questionAddedSevenDay}}</span>
                        </li>
                      </ul>
                    </div>
                    <svg
                      id="small-card-bg-icon"
                      class="blue"
                      xmlns="http://www.w3.org/2000/svg"
                      viewBox="0 0 24 24"
                    >
                      <g transform="translate(-168 -2458)">
                        <rect
                          width="24"
                          height="24"
                          transform="translate(168 2458)"
                          fill="rgba(0,0,0,0)"
                        />
                        <path
                          d="M189,2479h-6a1,1,0,0,1,0-2h5a1,1,0,0,0,1-1v-12a1,1,0,0,0-1-1H172a1,1,0,0,0-1,1v1a1,1,0,0,1-2,0v-2a2,2,0,0,1,2-2h18a2,2,0,0,1,2,2v14A2,2,0,0,1,189,2479Zm-14.09,0a1,1,0,0,1-.98-.85,5.016,5.016,0,0,0-4.08-4.081,1,1,0,0,1-.85-.98,1.012,1.012,0,0,1,.983-1.013.962.962,0,0,1,.156.013,7,7,0,0,1,5.771,5.77.982.982,0,0,1-.23.787A1.017,1.017,0,0,1,174.91,2479Zm-2.91,0h-3v-3a3,3,0,0,1,3,3Zm6.95-.01a.98.98,0,0,1-.99-.87,8.992,8.992,0,0,0-8.079-8.079.984.984,0,0,1-.88-.99,1.01,1.01,0,0,1,1.013-1c.029,0,.058,0,.087,0a11.021,11.021,0,0,1,9.85,9.831,1.01,1.01,0,0,1-.255.779A.992.992,0,0,1,178.95,2478.99Zm3.55-6.13a1.025,1.025,0,0,1-.48-.12l-2.5-1.36a1,1,0,0,1-.52-.879v-1.41l3.02,1.65a1.02,1.02,0,0,0,.96,0l3.02-1.65v1.41a1.014,1.014,0,0,1-.52.879l-2.5,1.36A1.021,1.021,0,0,1,182.5,2472.859Zm0-3a1.025,1.025,0,0,1-.48-.12l-4.219-2.3a.5.5,0,0,1,0-.88l4.219-2.3a1.02,1.02,0,0,1,.96,0l4.22,2.3a.507.507,0,0,1,0,.88l-4.22,2.3A1.021,1.021,0,0,1,182.5,2469.86Z"
                          fill=""
                        />
                      </g>
                    </svg>
                  </div>
                </div>
              </div>
            </div>

            <!-- Filter box -->
            <div class="card min-h-80">
              <div class="card-body">
                <div class="form-row filter-row">
                    
                    <div class="form-group col-md-9 mb-sm-0">
                      <div class="input-group search-filter">                        
                        <input type="text"  class="form-control input-sm id_search_filter" placeholder="Id search for..." id="id_filter" name="id_filter"/>
                        <span class="input-group-append">
                          <button type="button" class="btn main_filter">
                            <i class="fa fa-search fs-13 text-warning"></i>
                          </button>
                        </span>
                      </div>
                    </div>
                    <div class="form-group col-md-3 mb-sm-0">
                      <select  id="language_filter" name="language_filter" class="form-control input-sm search_filter">
                        <option value="" selected>Select Language</option>
                        <option value="3" >Both</option>
                        <option value="1" >English</option>
                        <option value="2" >Hindi</option>
                      </select>
                    </div>
                  </div>
              </div>
            </div>

            <!-- Filter box -->
            <div class="card">
              <div class="card-body">
                <div class="form-row filter-row">
                    <div class="form-group col-md-3">
                      <select  id="examtype_filter" name="examtype_filter" data-id="exam_type" class="form-control input-sm search_filter filters">
                        <option value="" selected>Exam Type</option>
                        @if($examTypes)
                          @foreach($examTypes as $exams)
                            <option value="{{$exams->id}}">{{$exams->exam_type}}</option>
                          @endforeach
                        @endif
                      </select>
                    </div>
                    <div class="form-group col-md-3">
                      <select  id="subject_filter" name="subject_filter"  data-id="subject" class="form-control input-sm search_filter filters">
                        <option value="" selected>Select Subject</option>
                      </select>
                    </div>
                    <div class="form-group col-md-3">
                      <select  id="chapter_filter" name="chapter_filter"  data-id="chapter" class="form-control input-sm search_filter filters">
                        <option value="" selected>Select Chapter</option>
                      </select>
                    </div>
                    <div class="form-group col-md-3">
                      <select  id="topic_filter" name="topic_filter" class="form-control input-sm search_filter">
                        <option value="" selected>Select Topic</option>
                      </select>
                    </div>
                    <div class="form-group col-md-3">
                      <select  id="difficulty_level_filter" name="difficulty_level_filter" class="form-control input-sm search_filter">
                        <option value="" selected>Select Difficulty Level</option>
                        <option value="1" >Easy</option>
                        <option value="2" >Medium</option>
                        <option value="3" >Hard</option>
                      </select>
                    </div>
                    <div class="form-group col-md-3">
                      <select  id="question_type_filter" name="question_type_filter" class="form-control input-sm search_filter">
                        <option value="" selected>Select 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 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="form-group col-md-3">
                      <select  id="faculty_filter" name="faculty_filter" class="form-control input-sm search_filter">
                        <option value="" selected>Select Faculty</option>
                      </select>
                    </div>
                    <div class="form-group col-md-3">
                      <select  id="typist_filter" name="typist_filter" class="form-control input-sm search_filter">
                        <option value="" selected>Select Typist</option>
                        <option value="{{Auth::guard('admin')->user()->username}}" >{{Auth::guard('admin')->user()->username}}</option>
                      </select>
                    </div>
                  </div>
              </div>
            </div>

            <!-- //Filter box -->
            <div class="card">
              <div class="card-header admin-header center-header pt-5">
                <h2>Question Bank</h2>
                <div class="filter-group">
                  <a href="{{ route('admin.bank.question.add') }}"><button type="button" class="btn btn-primary add-btn add-btn-sm" >
                        <i class="fa fa-plus-circle"></i>Add Question
                      </button></a>
                  <button type="button" class="form-control bank_import" style="width: 154px"><i class="fa fa-upload"></i> Import in Excel</button>
                  
                  <div class="dropdown custom-date">
                      <button class="btn btn-custom-toggle dropdown-toggle btn-block" type="button" id="dropdownMenuButton"
                        data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                        Custom Date
                      </button>
                      <div class="dropdown-menu custom-dropdown-menu right-move" aria-labelledby="dropdownMenuButton"
                        x-placement="bottom-start"
                        style="position: absolute; will-change: transform; top: 0px; left: 0px; transform: translate3d(0px, 44px, 0px);">
                        <div class="custom-date-content">
                          <h6>Filter by create date</h6>
                          <ul>
                            <li data-id="1" style="cursor: pointer;" class="date_selector">Today</li>
                            <li data-id="2" style="cursor: pointer;" class="date_selector">Last 7 Days</li>
                            <li data-id="3" style="cursor: pointer;" class="date_selector">This Month</li>
                            <li data-id="4" style="cursor: pointer;" class="date_selector">This Year: {{date('Y')}}</li>
                            <li data-id="5" style="cursor: pointer;" class="date_selector">Last Year: {{date('Y')-1}}</li>
                            <li data-id="6" style="cursor: pointer;" class="date_selector">All Time</li>
                          </ul>
                          <h6>Filter by create date range</h6>
                          <div class="date-group">
                            <div class="input-group">
                              <div class="input-group-prepend">
                                <div class="input-group-text">
                                  <i class="fa fa-calendar tx-16 lh-0 op-6"></i>
                                </div>
                              </div>
                              <input class="form-control input-sm all_from_date" name="all_from_date" placeholder="MM/DD/YYYY" type="text" id="dp1588836251070">
                            </div>
                            <span>To</span>
                            <div class="input-group">
                              <div class="input-group-prepend">
                                <div class="input-group-text">
                                  <i class="fa fa-calendar tx-16 lh-0 op-6"></i>
                                </div>
                              </div>
                              <input class="form-control input-sm all_to_date" name="all_to_date" placeholder="MM/DD/YYYY" type="text" id="dp1588836251072">
                            </div>
                          </div>
                          <input type="hidden" name="date_type" id="date_type">
                          <div class="btn-content">
                            <button type="button" class="btn btn-outline-primary btn-pill add-btn-sm btn-streach-md cancel_date">Cancel</button>
                            <button type="button" class="btn btn-primary add-btn-sm btn-streach-md apply">Apply</button>
                          </div>
                        </div>

                      </div>
                    </div>

                    <button type="button" class="form-control all_delete"><i class="fa fa-trash"></i> Delete</button>
                </div>
              </div>
              <div class="card-body">
                <p class="text-right font-bold mb-2 total_question">Total No of Question: 0</p>
                <div class="table-responsive">
                  <table id="bank-question" class="stripe row-border order-column dataTable no-footer">
                    <thead>
                      <tr>
                        <th></th>
                        <th>Serial No <span><i class="fa fa-angle-up"></i><i class="fa fa-angle-down"></i></span></th>
                        <th>Q. ID <span><i class="fa fa-angle-up"></i><i class="fa fa-angle-down"></i></span></th>
                        <th>Question Details <span><i class="fa fa-angle-up"></i><i class="fa fa-angle-down"></i></span></th>
                        <th>Subject <span><i class="fa fa-angle-up"></i><i class="fa fa-angle-down"></i></span></th>
                        <th>Chapter <span><i class="fa fa-angle-up"></i><i class="fa fa-angle-down"></i></span></th>
                        <th>Question Type <span><i class="fa fa-angle-up"></i><i class="fa fa-angle-down"></i></span></th>
                        <th>Level <span><i class="fa fa-angle-up"></i><i class="fa fa-angle-down"></i></span></th>
                        <th>Created Date <span><i class="fa fa-angle-up"></i><i class="fa fa-angle-down"></i></span></th>
                        <th>Status <span><i class="fa fa-angle-up"></i><i class="fa fa-angle-down"></i></span></th>
                        <th>Action</th>
                      </tr>
                    </thead>
                    
                  </table>
                </div>
              </div>
            </div>
            <!--// MAIN BODY CONTENT -->
        </div>
      </div>
@endsection
@section('scripts')
<script type="text/javascript">
  @if(Session::has('success'))
    Swal.fire('{{ Session::get('success') }}');
  @endif
</script>
<script type="text/javascript" src="{{asset('js/question_bank.js?v='.time())}}"></script>
<link href="{{asset('admin/plugins/drag-drop-upload/drag-drop-upload.css?v='.time())}}" rel="stylesheet" />
@endsection