@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">Result</li>
              <li class="breadcrumb-item active" aria-current="page"></li>
            </ol>
          </div>
          <!-- MAIN BODY CONTENT -->
                <h1>Result</h1>
                @if(Session::has('error'))
            <div class="alert alert-danger" style="background: none; border: none;">
              <p style="color: #f00">{{ Session::get('error') }}</p>
            </div>
          @endif
                <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 Attempts Made</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 class="maintotalSet">{{$tot_no_of_attempts_made}}</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">
                          Total No of Reattempts Made
                        </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>{{$tot_no_of_reattempts_made}}</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 class="col-xl-4 col-lg-6 col-md-12">
                    <div class="card">
                      <div class="card-body small-card">
                        <h5 class="font-medium">
                          Test Details
                        </h5>
                        <div class="counter list-group">
                          <p class="list-item">
                            Published On: <span> {{ $test_published_on }} </span>
                          </p>
                          <p class="list-item">
                            Last Attempt Made On: <span> {{ $test_last_attempted_on }} </span>
                          </p>
                        </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>
                <!-- Table -->
                <div class="card">
                  <div class="card-header pt-5 result-header">
                    <h2>{{ $test_details->test_name }}</h2>
                    <div class="filter-group">
                      <input type="hidden" name="test_id" id="test_id" value="{{ $test_id }}">
                      <select class="form-control search_filter" id="language_filter" name="language_filter">
                        <option value="">Language</option>
                        <option value="1"  @if(request()->post('language_filter') == 1){{'selected'}}@endif>English</option>
                        <option value="2" @if(request()->post('language_filter') == 2){{'selected'}}@endif>Hindi</option>
                      </select>
                      <div class="dropdown custom-date result-listdrop">
                        <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">
                          <div class="custom-date-content">
                            <h6>Filter by result date</h6>
                            <ul id="date_ul">
                              <li value="1" class="custom_date" style="cursor:pointer;">Today</li>
                              <li value="2" class="custom_date" style="cursor:pointer;">Last 7 Days</li>
                              <li value="3" class="custom_date" style="cursor:pointer;">This Month</li>
                              <li value="4" class="custom_date" style="cursor:pointer;">This Year: {{ date('Y') }} </li>
                              <li value="5" class="custom_date" style="cursor:pointer;">Last Year: {{ date('Y')-1 }}</li>
                              <li value="6" class="custom_date" style="cursor:pointer;">All Time</li>
                            </ul>
                            <h6>Filter by result 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 fc-datepicker input-sm" placeholder="YYYY-MM-DD"
                                  type="text" name="from_date" id="from_date">
                              </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 fc-datepicker input-sm" placeholder="YYYY-MM-DD"
                                  type="text" name="to_date" id="to_date">
                              </div>
                            </div>
                            <div class="btn-content">
                              <button class="btn btn-outline-primary btn-pill add-btn-sm btn-streach-md" id="date_cancel">
                                Cancel
                              </button>
                              <button class="btn btn-primary add-btn-sm btn-streach-md" id="date_apply">
                                Apply
                              </button>
                            </div>
                          </div>

                        </div>
                      </div>
                    </div>
                  </div>
                  <div class="card-body pt-0">
                    <p class="text-right font-bold total_test">Total No of Attempts: {{$tot_no_of_students}}</p>
                    <p class="text-right">* Data shows on first attempt</p>
                    <div class="">
                      <table id="quiz-manager" class="stripe row-border order-column">
                        <thead>
                          <tr>
                            <th width="25">Rank <span><i class="fa fa-angle-up"></i><i class="fa fa-angle-down"></i></span></th>
                            <th>Student Name <span><i class="fa fa-angle-up"></i><i class="fa fa-angle-down"></i></span></th>
                            <th>Score <span><i class="fa fa-angle-up"></i><i class="fa fa-angle-down"></i></span></th>
                            <th>Accuracy <span><i class="fa fa-angle-up"></i><i class="fa fa-angle-down"></i></span></th>
                            <th>Time Taken <span><i class="fa fa-angle-up"></i><i class="fa fa-angle-down"></i></span></th>
                            <th>Attempted On <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>
                <!-- //Table -->
                <!--// MAIN BODY CONTENT -->
        </div>
      </div>
@endsection
@section('scripts')
<script type="text/javascript" src="{{asset('js/coaching/result_view.js?v='.time())}}"></script>
@endsection