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

@section('page_toolbar')

    <button type="button" class="btn btn-primary px-2 font-weight-bold btn-sm"  onclick="addStudent(null)">
        <i class="fas fa-plus-circle" aria-hidden="true"></i> Add Student
    </button>
  &nbsp;<a class="btn btn-danger px-2 font-weight-bold btn-sm" onclick="softDelete(null)" href="javascript:">
        <i class="fas fa-trash" aria-hidden="true"></i> Delete Students
</a>
{{--&nbsp;<a class="btn btn-info px-2 font-weight-bold btn-sm" onclick="exportStudent()" href="javascript:">--}}
{{--        <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

<!--begin::Content-->
<div class="card card-custom">
    <div class="card-body">
      <!-- filter Start -->
      <div class="row">
            <div class="form-group  col-md-3 col-xs-12">
                <label class="col-form-label font-weight-bolder">Subscription mode </label>
                <select class="form-control new-drop-section selectpicker" id="subscription_mode" name="subscription_mode" tabindex="-1" aria-hidden="true">
                    <option selected="selected" value="" data-select2-id="">All</option>
                    <option value="Paid">Paid</option>
                    <option value="Free">Free</option>
                </select>
                
            </div>
            <div class="form-group  col-md-3 col-xs-12">
                <label class="col-form-label font-weight-bolder">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 font-weight-bolder">Year</label>
                {!! Form::select('year', $years , '', ['class' => 'form-control ', 'id' => 'year', 'style' => 'width:100%','placeholder'=>'All']) !!}
            </div>
             <div class="form-group  col-md-3 col-xs-12" >
                <label class="col-form-label font-weight-bolder">Students Type</label>
                {!! Form::select('student_type', array('Teacher' => 'Under Teacher', 'Tutor' => 'Under Tutor','Individual'=>'Private') ,$stud_type, ['class' => 'form-control new-drop-section selectpicker searchm', 'id' =>'student_type', 'placeholder' => 'All']) !!}
             </div>

            <div class="form-group  col-md-6 col-xs-12">
                <label class="col-form-label font-weight-bolder">Institution</label>
                <div id="curriculum_blck_filter">
                {!! Form::select('school', $schools ,'', ['class' => 'form-control new-drop-section  new-drop-section select2', 'placeholder' => 'All','id' => 'school']) !!}
                </div>
            </div>


        <div class="col-md-6 col-xs-12">
            <div class="form-group row">
                <label class="col-form-label font-weight-bolder">&nbsp;</label>
                <div class="col-sm-12 text-right" >
                    <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>
                    <input type="hidden" name="searched_value" id="searched_value" value=""/>

                </div>
            </div>
          </div>
        </div>
        <br>
        <div class="row" style="margin-bottom:10px;">
                    
                        
                    <div class="col-sm-6">
                        &nbsp;
                         </div>
                    <div class="col-sm-6">
                        <div class='input-group' id='kt_daterangepicker1'>
                            <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>
               
                    <input id="from" type='hidden' value="" />
<input id="to" type='hidden' value="" /> 
<input id="first_date" type='hidden' value="{{$first_date}}" />     
    </div>
         <!-- filter end -->
          <table class="table table-hover order-column" id="dataTables" style="width:100%">
                <thead>
                    <tr>
                        <th  class="no-export"><input type="checkbox" name="selectall" id="selectall"/></th>
                        <th class="no-export">No</th>
                        <th>Student name</th>
                        <th>User name</th>
                        <th width="115px !important;">Email</th>
                        <th>Type of student </th>
                        <th>Subscription Plan</th>
                        <th>Sign up date</th>
                        <th>Expiry date</th>
                        <th>Curriculum</th>
                        <th>Year</th>
                        <th>Last login</th>
                        <th>Weekly points</th>
                        <th>Total minutes watched</th>
                        <th>Average percentage of each video watched</th>
                        <th>Total videos watched</th>
                        <th>Total questions answered</th>
                        <th>% of questions correct</th>
                        <th>Total points</th>
                        <th>wau<br>/dau/<br>mau</th>
                        <th width="115px !important;" class="no-export"> Action</th>
                    </tr>
                </thead>
                <tbody>
                </tbody>
            </table>
                     
    </div>

<div class="card card-custom gutter-b">
    <div class="card-body">
        <h4>Deleted Students</h4>
        <table class="table table-hover order-column" id="deldataTables"  style="width:100%">
            <thead>
                <tr>
                        <th>No</th>
                        <th>Student name</th>
                        <th>User name</th>
                        <th>Email</th>
                        <th>Type of student</th>
                        <th>Subscription plan</th>
                        <th>Year</th>
                        <th>Deleted on</th>
                        <th width="115px !important;" class="no-export"> Action</th>
                </tr>
            </thead>
            <tbody>
            </tbody>
        </table>
    </div>
</div>
</div>
<!--end::Content-->
@include('admin.students.student_modal')
@endsection
@section('styles')
<link href="{{ url('plugins/custom/datatables/datatables.bundle.css?v=7.0.6')}}" rel="stylesheet" type="text/css"/>
<style type="text/css">
    .dataTables_wrapper .dataTable th, .dataTables_wrapper .dataTable td{
        max-width: 140px !important;
    }
    .lds-dual-ring {
  display: inline-block;
  width: 28px;
  height: 15px;
}
.lds-dual-ring:after {
  content: " ";
  display: block;
  width: 20px;
  height: 20px;
  margin: 0px;
  border-radius: 50%;
  border: 4px solid #fff;
  border-color: #fff transparent #fff transparent;
  animation: lds-dual-ring 1.2s linear infinite;
}
@keyframes lds-dual-ring {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

.dataTables_scrollBody > div{
    overflow: visible;
}

</style>
@endsection
@section('scripts')
<script src="{{ url('plugins/custom/datatables/datatables.bundle.js?v=7.0.6')}}"></script>
<script src="https://cdn.datatables.net/fixedcolumns/4.0.0/js/dataTables.fixedColumns.min.js"></script>

<script>
    function search(value) {
        
        console.log($("#curriculum").val());
            //value.search_name =  $('input[type=search]').val();//$('input[name=name]').val();
            //value.country = $("#country").val();
            value.curriculum = $("#curriculum").val();
            value.from = $("#from").val();
            value.to = $("#to").val();
            value.student_type = $("#student_type").val();
            value.school = $("#school").val();
            value.year = $("#year").val();
            // value.is_individual = $("#is_individual").val();
            value.subscription_mode = $("#subscription_mode").val();

       }
    var table;
            //ajaxListing();
            
    function ajaxListing(fromDt, toDt)
    {
       
            $('#country').select2({
                placeholder: "All",
                width: '100%',
                allowClear: true
            });
            $('#year').select2({
                placeholder: "All",
                width: '100%',
                allowClear: true
            });
            $('#school').select2({
                placeholder: "All",
                width: '100%',
                allowClear: true
            });
            $('#subject').select2({
                placeholder: "All",
                width: '100%',
                allowClear: true
            });
            $('#curriculum').select2({
                placeholder: "Select Curriculum",
                width: '100%',
                allowClear: true
            });
            //  $('#student_type').select2({
            //     placeholder: "Select School",
            //     width: '100%',
            //     allowClear: true
            // });

            



            //Generate List
            table = $('#dataTables').DataTable({
            bSearchable: true,
            pagination: true,
           "scrollY": "50Vh",
           //scrollY: 500,
           scrollX:true,
           /*scroller: {displayBuffer: 100},*/
           deferRender:    true,
        
        //scrollCollapse: true,
           autoWidth: false,
            "bScrollCollapse": false,
            searchDelay: 500,
            processing: true,
            serverSide: true,
            bDestroy: true,
            ordering: true,
            autoWidth: false,
            statesave:true,
            // fixedColumns:   {
            //     left: 1,
                
            // },
            order: [[ 0, "desc" ]],
             initComplete: function (settings, json) {  
                    //$("#dataTables").wrap("<div style='width:100%;position:relative;'></div>");            
                },
            "aLengthMenu": [[50, 100, 500, -1], [50, 100, 500, "All"]],
            "pageLength": 50,
                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: '<div class="lds-dual-ring" id="lds-ring" style="display:none"></div><i class="fas fa-download" id="downicon" aria-hidden="true"></i> Export',
                        title: 'Students',
                        className: 'btn btn-info px-2 font-weight-bold btn-sm quiz-export',
                        exportOptions: {
                            columns: ':not(.no-export)'
                        },
                        action: newexportactionstudent
                    }],
                ajax: {
                    url: '{{ url('admin/students/lists') }}',
                    data: search
                },
                columns: [
                    {data: 'checkrows', name: 'checkrows', searchable: !1},
                    {data: 'id', name: 'id'},
                    {data: 'stud_name', name: 'users.fname'},
                    {data: 'username', name: 'users.username'},
                    {data: 'email', name: 'users.email'},
                    {data: 'stud_type', name: 'type'},
                    {data: 'subscription_plan', name: 'subscription_plan'},
                    {data: 'signup_date', name: 'created_at'},
                    {data: 'expiry_date', name: 'student_subscriptions.expiry_date'},
                    {data: 'curriculum', name: 'curriculum.name'},
                    {data: 'year', name: 'year', orderable: !1, searchable: !1},
                    {data: 'last_logged_in', name: 'last_logged_in'},
                    {data: 'weekly_points', name: 'weekly_points'},
                    {data: 'min_video_watched', name: 'min_video_watched'},
                    {data: 'percentage_video_watched', name: 'percentage_video_watched'},
                    {data: 'video_watched_count', name: 'video_watched_count'},
                    {data: 'noOfAnswered', name: 'noOfAnswered'},
                    {data: 'noOfCorrectAnswered', name: 'noOfCorrectAnswered'},
                    {data: 'totalPoints', name: 'totalPoints'},
                    {data: 'active_users', name: 'active_users'},
                    {data: 'action', name: 'action', orderable: !1, searchable: !1} 

                ],
                // drawCallback: function( settings ) {
                //     //alert( 'DataTables has redrawn the table' );
                //     $('#lds-ring').hide();
                //     $('#downicon').show();
                    
                // }
            });



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

        function newexportactionstudent(e, dt, button, config) {
        var self = this;
        var oldStart = dt.settings()[0]._iDisplayStart;
        dt.one('preXhr', function (e, s, data) {
            // Just this once, load all data from the server...
            data.start = 0;
            data.length = 2147483647;
            dt.one('preDraw', function (e, settings) {
                // Call the original action function
                if (button[0].className.indexOf('buttons-excel') >= 0) {
                    $.fn.dataTable.ext.buttons.excelHtml5.available(dt, config) ?
                        $.fn.dataTable.ext.buttons.excelHtml5.action.call(self, e, dt, button, config) :
                        $.fn.dataTable.ext.buttons.excelFlash.action.call(self, e, dt, button, config);
                }
                dt.one('preXhr', function (e, s, data) {
                    settings._iDisplayStart = oldStart;
                    data.start = oldStart;
                });
                setTimeout(dt.ajax.reload, 0);
                return false;
            });
        });
        $('#downicon').hide();
        $('#lds-ring').show();
        dt.ajax.reload();
        console.log('end');
    }
      

      //Generate List
            deltable = $('#deldataTables').DataTable({
            bSearchable: true,
            pagination: true,
           // "scrollY": "50Vh",
           // scrollX:true,
            "bScrollCollapse": false,
            searchDelay: 500,
            processing: true,
            serverSide: true,
            bDestroy: true,
            ordering: true,
            autoWidth: false,
            order: [[ 0, "desc" ]],
             initComplete: function (settings, json) {  
                    $("#deldataTables").wrap("<div style='overflow:auto; width:100%;position:relative;'></div>");            
                },
            "aLengthMenu": [[50, 100, 500, -1], [50, 100, 500, "All"]],
            "pageLength": 50,
               
                ajax: {
                    url: "{{ url('admin/students/deletedlists') }}",
                    data: search
                },
                columns: [
                    {data: 'id', name: 'id'},
                    {data: 'sname', name: 'fname',width:"20%"},
                    {data: 'username', name: 'username',width:"20%"},
                    {data: 'email', name: 'email'},
                    {data: 'type', name: 'type'},
                    {data: 'subscription', name: 'subscription'},
                    {data: 'year', name: 'year', orderable: !1, searchable: !1},
                    {data: 'deleted_date', name: 'deleted_date', orderable: !1, searchable: !1},
                    {data: 'action', name: 'action', orderable: !1, searchable: !1}

                ],
               
            });

            

    }

    jQuery(document).ready(function () {

        var first_date = $('#first_date').val();
        var start = moment(first_date);
        //var start = moment().subtract(30, 'days');
        var end = moment();

$('#kt_daterangepicker1').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')]
        , 'Show All': [moment(first_date),moment()]
    }
}, function (start, end, label) {
    $('#kt_daterangepicker1 .form-control').val(start.format('MMMM D, YYYY') + ' / ' + end.format('MMMM D, YYYY'));
});
$('#kt_daterangepicker1 .form-control').val(start.format('MMMM D, YYYY') + ' / ' + end.format('MMMM D, YYYY'));
$('#kt_daterangepicker1').on('apply.daterangepicker', function (ev, picker) {
    var from = picker.startDate.format('YYYY-MM-DD');
    var to = picker.endDate.format('YYYY-MM-DD');
    // $.LoadingOverlay("show");
    //showSalesChart(from, to);
    //console.log(from+' : '+to);
    $("#from").val(from);
    $("#to").val(to);
    ajaxListing(from, to)
    
});
var from = $('#kt_daterangepicker1').data('daterangepicker').startDate.format('YYYY-MM-DD');
var to = $('#kt_daterangepicker1').data('daterangepicker').endDate.format('YYYY-MM-DD');
$("#from").val(from);
    $("#to").val(to);
ajaxListing(from, to)
//console.log(from+' - '+to);

});

    $(document).on('click', '.filterSubmit', function () {
        console.log("here");
        table.ajax.reload();

    });

//    function search(value) {
//             //value.search_name =  $('input[type=search]').val();//$('input[name=name]').val();
//             value.country = $("#country").val();
//             value.curriculum = $("#curriculum").val();
//             value.student_type = $("#student_type").val();
//             value.school = $("#school").val();
//             value.year = $("#year").val();
//             value.is_individual = $("#is_individual").val();
//             value.subscription_mode = $("#subscription_mode").val();

//        }

    function softDelete(b) {
        var student_ids = [];
        var errorStatus = true;
        if(b == null){
            $('input:checkbox.slectedrows').each(function () {
                if (this.checked) {
                    student_ids.push(this.value);

                }
            });
            if(student_ids.length > 0 ){
                b = student_ids;
                errorStatus = false;
            }
        } else {
            errorStatus = false;
        }
        if(errorStatus){
            showAlert("Please select students to delete", "error");
        } else {
            Swal.fire({
                title: "Are you sure?",
                text: "You are about to permanently delete student data. Please export and save student data before deleting.",
                icon: "warning",
                showCancelButton: true,
                confirmButtonText: "Yes. Delete it!",
                confirmButtonColor: '#e85f5d',
            }).then(function(result) {
                if (result.value) {
                    Swal.fire({
                        title: "Are you sure?",
                        text: "You will permanently lose all data - are you 100% sure?",
                        icon: "warning",
                        showCancelButton: true,
                        confirmButtonText: "Yes. Delete it!",
                        confirmButtonColor: '#e85f5d',
                    }).then(function(result) {
                        if (result.value) {
                            $.ajax({url: "{{ url('admin/students') }}/" + b, type: "DELETE", dataType: "html"})
                            .done(function (a) {
                                    var data = JSON.parse(a);
                                    if(data.flagError){
                                        showAlert(data.message, "error");
                                    }else{
                                        showAlert(data.message, "success");
                                        setTimeout(function () {
                                            table.ajax.reload(null, false);
                                        }, 2000);

                                    }
                            }).fail(function () {
                                        showAlert("Somthing went wrong!", "error");
                            });

                        }else if (result.dismiss === "cancel") {
                            Swal.fire(
                                "Cancelled",
                                "",
                                "error"
                            )
                        }
                    });
                } else if (result.dismiss === "cancel") {
                            Swal.fire(
                                "Cancelled",
                                "",
                                "error"
                            )
                        }
            });
        }
    }

    $(document).on('click', '#filterClear', function () {

        $("#country").val(null).trigger('change');
        $('#curriculum').val(null).trigger('change');
        $("#subject").val(null).trigger('change');
        $("#student_type").val(null).trigger('change');
        $("#school").val(null).trigger('change');
        table.draw();

    });
    $(document).on("keyup", 'input[type="search"]', function () {
            $("#searched_value").val($('input[type=search]').val());
    });
    $('#selectall').click(function (event) {
            if (this.checked) {
                $('.slectedrows').each(function () { //loop through each checkbox
                    $(this).prop('checked', true); //check
                });
            } else {
                $('.slectedrows').each(function () { //loop through each checkbox
                    $(this).prop('checked', false); //uncheck
                });
            }
        });
    function exportStudent() {
        var search_name = $("#searched_value").val();
        var country = $("#country").val();
        var curriculum = $("#curriculum").val();
        var year = $("#year").val();
        var student_type = $("#student_type").val();
        var school = $("#school").val();
        var student_ids = [];

        $('input:checkbox.slectedrows').each(function () {
            if (this.checked) {
                student_ids.push(this.value);
            }
        });
        $.ajax({
            xhrFields: {
                    responseType: 'blob',
            },
            url: "{{ url('admin/students/export') }}",
            data:  {"country": country, "curriculum":curriculum, "year":year, "student_type":student_type, "school":school,  "student_ids": student_ids,"search_name":search_name},
            type: "POST",
            success: function(result, status, xhr) {
                        var disposition = xhr.getResponseHeader('content-disposition');
                        var matches = /"([^"]*)"/.exec(disposition);
                        var filename = (matches != null && matches[1] ? matches[1] : 'StudentsFile.xlsx');

                        var blob = new Blob([result], {
                            type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet'
                        });
                        var link = document.createElement('a');
                        link.href = window.URL.createObjectURL(blob);
                        link.download = filename;

                        document.body.appendChild(link);

                        link.click();
                        document.body.removeChild(link);
                    }
        });
    }

     function permanentDelete(b) {
            Swal.fire({
                title: "Are you sure?",
                text: "Student will be deleted from the database.You won't be able to change this!",
                icon: "warning",
                showCancelButton: true,
                confirmButtonText: "Yes. Delete it!",
                confirmButtonColor: '#e85f5d',
            }).then(function(result) {
                if (result.value) {
                    Swal.fire({
                            title: "Are you sure?",
                            text: "You will permanently lose the data - are you 100% sure?",
                            icon: "warning",
                            showCancelButton: true,
                            confirmButtonText: "Yes. Delete it!",
                            confirmButtonColor: '#e85f5d',
                    }).then(function(result) {
                        if (result.value) {
                            $.ajax({
                                url: "{{ url('admin/students/deleteper') }}/" + b, type: "DELETE", dataType: "html"
                            }).done(function (a) {
                                    var data = JSON.parse(a);
                                    if(data.flagError){
                                        showAlert(data.message, "error");
                                    }else{
                                        showAlert(data.message, "success");
                                        setTimeout(function () {
                                            table.ajax.reload(null, false);
                                            deltable.ajax.reload(null,false);
                                        }, 2000);
                                    }   
                            }).fail(function () {
                                    showAlert("Somthing went wrong!", "error");
                            });
                        } else if (result.dismiss === "cancel") {
                            Swal.fire(
                                "Cancelled",
                                "",
                                "error"
                            )
                        }
                    });
                } else if (result.dismiss === "cancel") {
                    Swal.fire(
                        "Cancelled",
                        "",
                        "error"
                    )
                }
            });
         }
    </script>

 @endsection