@extends('dashboard.layouts.default')
@section('content')
<section class="top-section">
  <div class="container-fluid">
    <div class="row g-3">
      <div class="col-lg-12">
        <div class="manage-sec">
          <a class="btn btn-manage" href="{{ url('teacher/performance') }}"><i class="bx bxs-star me-1"></i>Performance</a>
        <!--  <a class="btn btn-manage" href="{{ url('teacher/performances') }}"><i class="bx bxs-star me-1"></i>Performance New</a> -->
          <a class="btn btn-manage active" href="{{ url('teacher/quiz_tracker') }}"><i class="bx bxs-message-rounded-dots me-1"></i>Quiz Tracker</a>
          <a class="btn btn-manage d-none" href="{{ url('teacher/quiz_tracker') }}"><i class="bx bx-video-recording me-1"></i>Video Tracker</a>
          @if(isset($tuition_status) && $tuition_status != '')
          <a class="btn btn-manage" href="{{ url('teacher/tuition_attendance') }}"><i class="bx bx-badge-check me-1"></i>Tuition Attendance</a>
          @endif
        </div>
        <div class="card border-rad-left-0">
          <div class="card-body">
            <div class="d-flex align-items-center yearbtn overflow-auto">
              @foreach($years_filter as $key=>$year)
              <input type="radio" class="btn-check checkyear" name="year_id" value="{{ $year->id }}" id="year_id-{{ $year->id }}" autocomplete="off">
              <label class="btn btn-year me-1 mb-1 checkyear" for="year_id-{{ $year->id }}">{{ $year->year }}</label>
              @endforeach
              <input type="hidden" id="year_fil" value=""/>
            </div>
            <div class="d-flex align-items-center overflow-auto" id="classes_div">
            </div>
            <input type="hidden" name="class_fil[]" id="class_fil" value=""/>
            <div id="subject_div" style="display: none;">
              <div class="d-flex align-items-center overflow-auto">
                @foreach($subjects_filter as $key=>$subject)
                <input type="checkbox" class="btn-check checksubject" name="subject_id[]" value="{{ $subject->id }}" id="subject_id-{{ $subject->id }}" onclick="tableLoad()" autocomplete="off">
                <label class="btn btn-subject me-1 mb-1 checksubject checksubjectbtns " for="subject_id-{{ $subject->id }}">{{ $subject->name }}</label>
                @endforeach
                <input type="hidden" name="subject_fil[]" id="subject_fil" value="1"/>
              </div>
            </div>
            <input type="hidden" name="searched_value" id="searched_value" value=""/>
						<!-- <span data-bs-toggle="tooltip" data-bs-title="<i><b>Some tooltip text!</b></i>" data-bs-html="true" data-bs-placement="left" data-bs-custom-class="custom-tooltip">Tooltip test!</span> -->
            <div id="tb-report">
              <!-- <div class="no-data">
                <h5 class="text-dark my-2 text-center">
                  Select the year, then class, and then you'll be able to view the quiz data (green = 100-75%,
                  amber = 74-50%, red = 49-0%) 
                </h5>
              </div> -->
              <div class="no-results" style='display:none;'>
                <h5 class="text-dark my-2 text-center">
                  No results to display 
                </h5>
              </div>
              <div class="search-div" style="display: none;">
                <div class="row align-items-center">
                  <div class="col-lg-12">
                    <div class="row g-1 mt-1 mb-2 align-items-center">
                      <div class="col-md-3">
												<div class="dataTables_filter">
													<label class="d-flex align-items-center">
														<p class="mb-0 me-2"><small>Search</small></p>
														<div class="input-group">
															<input type="text" class="form-control form-control-sm search" placeholder="" id="search-box">
															<input type="hidden" value="name-asc" class="form-control" id="sort-box">
															<button class="btn btn-primary btn-sm" onclick="tableLoad()"><i class='bx bx-search' ></i></button>
														</div>
													</label>
												</div>
                      </div>
                      <div class="col-auto">
                        <button class="btn btn-primary btn-sm w-100 quiz-export" type="button" onclick="exportQuizTrackerReport()">
                        <i class="bx bx-export fs-6"></i> Export</span>
                        </button>
                      </div>
                      <div class="col">
                        <div class="row g-2 d-flex justify-content-end">
                          <div class="col-auto">
                            <button class="btn btn-primary btn-sm prev-data" type="button">Show last year's data</button>
                            <button class="btn btn-primary btn-sm back-data ms-1" type="button">
															<div class="d-flex align-items-center"><i class="bx bxs-chevrons-left fs-5"></i>Show current year's data</div>
														</button>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
              <div class="video_track" style="display: none">
              </div>
            </div>
          </div>
        </div>
        <div class="card mt-2 no-data">
          <div class="card-body">
            <div class="info-content"><div class="title">Select the year, then class, and then you'll be able to view the quiz data (green = 100-75%, amber = 74-50%, red = 49-0%)</div></div>
          </div>
        </div>
      </div>
      @include('layout.bottom-ads')
    </div>
  </div>
</section>
@endsection
@section('scripts')
<script>
  var table;
  var class_ids = [];
  var subject_ids = [1];
  var sort = 'name-asc';
  var batch = 0;
  var prev_data = 0;
  
  $(function () {