@extends('layout.default')
@section('page_toolbar')

<!-- <a class="btn btn-info px-2 font-weight-bold btn-sm quiz-export" href="{{ url('admin/most_attempt_quiz/export') }}" >
    <i class="fas fa-download" aria-hidden="true"></i> Export Data
</a> -->
&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')
<!--begin::Content-->
<div class="card card-custom">
   
    <div class="card-body">
       <!-- filter Start -->
       <div class="row">
           <div class="col-sm-6">
              <p class="text-dark mt-3 font-weight-bold font-size-lg">Attempted Quizzes </p>
           </div>
           <div class="col-sm-6">
            <div class='input-group' id='daterangepicker'>
                <input id="item_range" type='text' class="form-control" readonly placeholder="Select date range" />
                <div class="input-group-append"> <span class="input-group-text"><i class="la la-calendar-check-o"></i></span> </div>
            </div>
       </div>
       </div>
       <div class="row" >
            <div class="form-group  col-md-3 col-xs-12">
                    <label class="col-form-label ">Curriculum </label>
                    <div id="curriculum_blck_filter">
                    {!! Form::select('curriculum', $curriculum ,'', ['class' => 'form-control new-drop-section select2', 'placeholder' => 'Select curriculum','id' => 'curriculum']) !!}
                    </div>
                </div>  
                <div class="form-group  col-md-3 col-xs-12">
                    <label class="col-form-label ">Subject</label>
                    {!! Form::select('subject', $subjects , '', ['class' => 'form-control new-drop-section select2 ', 'id' => 'subject', 'style' => 'width:100%','placeholder'=>'Select Subject']) !!}
                </div>
                <div class="form-group  col-md-3 col-xs-12">
                    <label class="col-form-label ">Topic</label>
                    <div id="topic_blck_filter">
                        {!! Form::select('topic', $topics , '', ['class' => 'form-control  new-drop-section select2', 'id' => 'topic', 'style' => 'width:100%','placeholder'=>'Select Topics']) !!}
                    </div>
                </div>    
                <div class="form-group  col-md-3 col-xs-12">
                    <label class="col-form-label ">Chapter</label>
                    <div id="chapter_blck_filter">
                        {!! Form::select('chapter', $chapters , '', ['class' => 'form-control  new-drop-section select2', 'id' => 'chapter', 'style' => 'width:100%','placeholder'=>'Select Chapters']) !!}
                    </div>
                </div>
          </div>
           <div class="row d-flex flex-row-reverse">
            
               <div class="col-md-2 col-xs-12">
                <div class="form-group row">
                    <label class="col-form-label">&nbsp;</label>
                    <div class="col-sm-12 text-left" >
                        <button type="button" class="btn btn-light-primary font-weight-bold filterSubmit" >Filter</button>
                        <button type="button" class="btn btn-light-success font-weight-bold" id="filterClear">Clear</button>
                    </div>
                </div>
             </div>

           </div>
        <br>
        <!-- filter end -->
        <table class="table table-hover display" id="quizdataTables"  style="width:100%">
            <thead>
                
                <tr>
                    <th width="5%">Rank</th>
                    <th>Video number</th>
                    <th>Video name</th>
                    <th>Curriculum</th>
                    <th>Subject</th>
                    <th>Topic</th>
                    <th>Chapter</th>
                    <th width="20%">Number of times QUIZ has been attempted</th>
                    <th width="20%">Average percentage answered correctly</th>
                </tr>
                
            </thead>
            <tbody>
               
            </tbody>
        </table>
    </div>
</div>
<!--end::Content-->


@endsection
@section('styles')
<link href="{{ url('plugins/custom/datatables/datatables.bundle.css?v=7.0.6')}}" rel="stylesheet" type="text/css"/>
@endsection
@section('scripts')
    <script src="{{ url('plugins/custom/datatables/datatables.bundle.js?v=7.0.6')}}"></script>

    <script>
     $('#curriculum').select2({
        placeholder: "All",
        width: '100%',
        allowClear: true
    }); 
    $('#subject').select2({
        placeholder: "All",
        width: '100%',
        allowClear: true
    }); 
    $('#topic').select2({
        placeholder: "All",
        width: '100%',
        allowClear: true
    }); 
    $('#chapter').select2({
        placeholder: "All",
        width: '100%',
        allowClear: true
    }); 
 function getAttemptedQuiz(fromDt, toDt) {
  var table;  
    $(document).on('click', '.filterSubmit', function () {
        table.ajax.reload();
    });

    if ( $.fn.DataTable.isDataTable('#quizdataTables') )
    {
       $('#quizdataTables').DataTable().destroy();
        $('#quizdataTables tbody').empty(); 
        
    }

    table = $('#quizdataTables').DataTable({
        searching: false,
        info: false,
        bSearchable: false,
        pagination: true,
        pageLength: 5,
        searchDelay: 500,
        processing: true,
        "aLengthMenu": [[50, 100, 500, -1], [50, 100, 500, "All"]],
         "pageLength": 50,
        serverSide: true,
        dom: '<\'row\'<\'col-sm-4\'l><\'col-sm-5 text-right\'f><\'col-sm-3 text-right\'B>>+\n' +
                '<\'row\'<\'col-sm-12\'tr>> +\n' +
                '<\'row\'<\'col-sm-5\'i><\'col-sm-7\'p>>',
        buttons: [
        {
            extend: 'excel',
            text: '<i class="fas fa-download" aria-hidden="true"></i> Export',
            title: 'QUIZ DATA',
            className: 'btn btn-info px-2 font-weight-bold btn-sm quiz-export',
            exportOptions: {
                columns: ':not(.no-export)'
            },
            action: newexportaction
        }],
        initComplete: function (settings, json) {  
         $("#quizdataTables").wrap("<div style='overflow:auto; width:100%;position:relative;'></div>");},
        ajax: {
            url: "{{ url('admin/most_attempt_quiz/lists') }}",
            data: search
        },
        columns: [
            {data: 'DT_RowIndex', name: 'DT_RowIndex', orderable: false, searchable: false},
            {data: 'unit_code', name: 'unit_code'},
            {data: 'name', name: 'name'},
            {data: 'curriculum', name: 'curriculum'},
            {data: 'subject', name: 'subject'},
            {data: 'topic', name: 'topic'},
            {data: 'chapter', name: 'chapter'},
            {data: 'attempt_count', name: 'attempt_count', searchable: false},
            {data: 'ans_percentage', name: 'ans_percentage', searchable: false},
           
        ]
    });

}
        $(".searchs").keyup(function () {
            table.draw();
        });

        function search(value) {
            var from = $('#daterangepicker').data('daterangepicker').startDate.format('YYYY-MM-DD');
            var to = $('#daterangepicker').data('daterangepicker').endDate.format('YYYY-MM-DD');
            value.from = from;
            value.to  = to;
            value.curriculum = $("#curriculum").val();
            value.subject = $("#subject").val();
            value.topic = $("#topic").val();
            value.chapter = $("#chapter").val();
            console.log("here"+curriculum);
            value.search_name = $('input[name=name]').val();
        }

        jQuery(document).ready(function () {
      
        var start = moment().subtract(29, 'days');
        var end = moment();
             $('#daterangepicker').daterangepicker({
            buttonClasses: ' btn'
            , applyClass: 'btn-primary'
            , cancelClass: 'btn-secondary'
            , startDate: start
            , endDate: end
            , ranges: {
                'Today': [moment(), moment()]
                , 'Yesterday': [moment().subtract(1, 'days'), moment().subtract(1, 'days')]
                , 'Last 7 Days': [moment().subtract(6, 'days'), moment()]
                , 'Last 30 Days': [moment().subtract(29, 'days'), moment()]
                , 'This Month': [moment().startOf('month'), moment().endOf('month')]
                , 'Last Month': [moment().subtract(1, 'month').startOf('month'), moment().subtract(1, 'month').endOf('month')]
            }
        }, function (start, end, label) {
            $('#daterangepicker .form-control').val(start.format('MMMM D, YYYY') + ' / ' + end.format('MMMM D, YYYY'));
        });

        $('#daterangepicker .form-control').val(start.format('MMMM D, YYYY') + ' / ' + end.format('MMMM D, YYYY'));
        $('#daterangepicker').on('apply.daterangepicker', function (ev, picker) {
            var from = picker.startDate.format('YYYY-MM-DD');
            var to = picker.endDate.format('YYYY-MM-DD');
            // $.LoadingOverlay("show");
            getAttemptedQuiz(from, to);
        });
        var from = $('#daterangepicker').data('daterangepicker').startDate.format('YYYY-MM-DD');
        var to = $('#daterangepicker').data('daterangepicker').endDate.format('YYYY-MM-DD');
        getAttemptedQuiz(from, to);

    });
   
    </script>
@endsection