@extends('layout.default')
@section('page_toolbar')
    <!-- <button type="button" class="btn btn-info px-2 font-weight-bold btn-sm video-export"  onclick="exportQuizTrackerReport()"> -->
    <!--  <a class="btn btn-info px-2 font-weight-bold btn-sm video-export" href="{{ url('teacher/video_tracker/export') }}"
       style="display:none">
        <i class="fas fa-download" aria-hidden="true"></i> Export Data</a>-->
    <!-- <i class="icon-1x fas fa-plus"></i> Export Data -->
    <!-- </button>&nbsp; -->
    &nbsp;<a class="btn btn-success px-2 font-weight-bold btn-sm" href="{{ URL::previous() }}">
        <i class="fas fa-angle-double-left" aria-hidden="true"></i> Back
    </a>
@endsection
@section('content')
<style>
    .header-fixed.subheader-fixed.subheader-enabled .wrapper {
      padding-top: 60px;
}
.custome_style{
    box-shadow: 0px 0px 00px 0px rgb(82 63 105 / 5%) !important; 
    border: 0;
}
</style>      <div class="row">
        @include('layout.top-ads')
        <div class="col-12 my-5">
            <div class="card card-custom card-transparent">
                <div class="card-body p-0">
                    <div class="example-preview">
                        <ul class="nav nav-tabs" id="myTab" role="tablist">
                            <li class="nav-item">
                                <a class="nav-link submenu-nav" href="{{ url('teacher/performance') }}">
                                    <span class="nav-icon"><i class="flaticon2-chat-1"></i></span>
                                    <span class="nav-text">Performance</span>
                                </a>
                            </li>
                            <li class="nav-item">
                                <a class="nav-link submenu-nav " href="{{ url('teacher/quiz_tracker') }}">
                                    <span class="nav-icon"><i class="flaticon2-layers-1"></i></span>
                                    <span class="nav-text">Quiz Tracker</span>
                                </a>
                            </li>
                            <li class="nav-item">
                                <a class="nav-link submenu-nav active" href="{{ url('teacher/video_tracker') }}"
                                   aria-controls="profile">
                                    <span class="nav-icon"><i class="flaticon2-layers-1"></i></span>
                                    <span class="nav-text">Video Tracker</span>
                                </a>
                            </li>
                        </ul>

                    </div>
                </div>
            </div>
            <!--begin::Nav Panel Widget 2-->
            <div class="card card-custom"  style="border-radius: 0rem;">
                <!--begin::Body-->
                <div class="card-body">
                    <div class="row year_div" style="    margin-top: -1%;">
                        <div class="d-flex align-items-center yearbtn overflow-auto">
                            @foreach($years_filter as $key=>$year)
                                <label class="checkyear btn-md mr-2">
                                    <input type="radio" name="year_id" value="{{ $year->id }}"
                                           class="btn btn-danger checkyear">
                                    <span>{{ $year->year }}</span>
                                </label>
                            @endforeach
                            <input type="hidden" id="year_fil" value=""/>
                        </div>
                    </div>
                    <div class="row overflow-auto" id="classes_div">

                    </div>

                    <div class="row" id="subject_div" style="display: none;">
                        <div class="d-flex align-items-center subjectbtn overflow-auto">
                            <!--   <label class="checksubject btn-md mr-2">
                                    <input type="checkbox" name="checkAllSubject" id="checkAllSubject" class="btn btn-danger"> <span class="checkAlltext text-center" style="width: 111px;">Select All</span>
                                </label> -->
                            @foreach($subjects_filter as $key=>$subject)
                                <label class="checksubject btn-md mr-2 checksubjectbtns">
                                    <input type="checkbox" name="subject_id[]" value="{{ $subject->id }}"
                                           onclick="tableLoad()"
                                           class="checksubject btn btn-danger">
                                    <span>{{ $subject->name }}</span>
                                </label>
                            @endforeach
                            <input type="hidden" name="subject_fil[]" id="subject_fil" value=""/>
                        </div>
                    </div>

                    <input type="hidden" name="searched_value" id="searched_value" value=""/>
                </div>
                <!--end::Body-->
            </div>
            <!--begin::Content-->
            <div class="card card-custom custome_style"  style="border-radius: 0rem;">
                <div class="card-body" style="overflow: auto;padding-top: 2px;">
                    <div class="no-data">
                        <h5 class="text-dark my-2 mr-5 text-center">
                            First select a year, then a class, and then you'll be able to view the video data (green =
                            100-70%, amber = 69-50%, red = 49-0%, grey = unwatched) </h5>
                    </div>
                    <div class="no-results" style='display:none;'>
                        <h5 class="text-dark my-2 mr-5 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 col-xl-12">
                                <div class="row align-items-start">
                                    <div class="col-md-4 my-2 my-md-0">
                                        <div class="input-icon">
                                            <input type="text" class="form-control search" placeholder="Search..."
                                                   id="search-box">
                                            <input type="hidden" value="name-asc" class="form-control" id="sort-box">
                                            <span class="inputspan"><button onclick="tableLoad()"
                                                                            class="btn btn-info btn-sm"><i
                                                        class="flaticon2-search-1"></i></button></span>
                                        </div>
                                    </div>
                                    <div class="col-md-6 align-items-right">
                                        <button
                                            class="btn btn-primary buttons-excel buttons-html5 btn-info px-2 mt-1 font-weight-bold btn-sm quiz-export"
                                            type="button" onclick="exportVideoTrackerReport()"><span><i
                                                    class="fas fa-download" aria-hidden="true"></i> Export</span>
                                        </button>
                                    </div>
                                    <div class="col-md-2 align-items-right">
                                    <button
                                            class="btn btn-primary px-2 mt-1 ml-15 font-weight-bold btn-sm prev-data" type="button" ><span> Show last year's data</span>
                                        </button>
                                        <button
                                            class="btn btn-primary px-2 mt-1 font-weight-bold btn-sm back-data" type="button" ><span> <i class="fas fa-angle-double-left" aria-hidden="true"></i> Show current year's data</span>
                                        </button>
                                    </div>
                                </div>
                            </div>

                        </div>
                    </div>
                    <div class="video_track" style="display: none">
                    </div>
                </div>
            </div>
        </div>
        @include('layout.bottom-ads')
    </div>
@endsection


@section('styles')
    <link href="{{ url('plugins/custom/datatables/datatables.bundle.css?v=7.0.6')}}" rel="stylesheet" type="text/css"/>
    <link rel="stylesheet"
          href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-multiselect/0.9.13/css/bootstrap-multiselect.css"/>
@endsection

@section('scripts')
    <script src="{{ url('plugins/custom/datatables/datatables.bundle.js?v=7.0.6')}}"></script>
    <script
        src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-multiselect/0.9.13/js/bootstrap-multiselect.js"></script>
    <!-- <script src="https://code.jquery.com/jquery-3.5.1.js"></script>
    <script src="https://cdn.datatables.net/1.10.23/js/jquery.dataTables.min.js"></script> -->

    <script>
        $(function () {