@extends('layouts.layout-admin')

@section('content')
<div id="user_reports" class="row box-body" ng-controller="userReportsCtrl">
    @include('admin.partials.alerts')

    <form method="post" name="userReports" id="userReports">

        <div class="col-md-4">
            <div class="input-group date">
                <div class="input-group-addon">
                <i class="fa fa-calendar"></i>
                </div>
                <input type="text" class="form-control pull-right" id="fromDatepicker" placeholder="From date" required>
            </div>
        </div>
        <div class="col-md-4">
            <div class="input-group date">
                <div class="input-group-addon">
                <i class="fa fa-calendar"></i>
                </div>
                <input type="text" class="form-control pull-right" id="toDatepicker" placeholder="To date" required>
            </div>
        </div>
        <a name="filterBtn" class="btn btn-primary" id="btnFilterRecords">Filter</a>
        <a name="filterResetBtn" class="btn btn-primary" id="btnResetFilter">Reset</a>
        <a ng-click="exportcsv()" class="btn btn-primary">Export CSV</a>

    </form>

    <div class="col-md-12" ng-if="filterStartDate.length > 0">
        <h3>Report: <% filterStartDate %> - <% filterEndDate %></h3>
    </div>

    <table class="table table-striped" id="user-report-table">
        <thead>
            <tr>
                <th>SCTI ID</th>
                <th>Display name</th>
                <th>Email</th>
                <th>Type</th>
                <th>Status</th>
                <th>Created on</th>
            </tr>
        </thead>
    </table>

</div>
@endsection

@push('scripts')
<script>
    $('#fromDatepicker').datepicker({
        autoclose: true,
        format: 'yyyy-mm-dd'
    });
    $('#toDatepicker').datepicker({
        autoclose: true,
        format: 'yyyy-mm-dd'
    });
    $(function() {

        var oTable = $('#user-report-table').DataTable({
            processing: true,
            serverSide: false,
            ajax: '{!! route('admin.users.datatable') !!}',
            columns: [
                { data: 'scti_id', name: 'scti_id' },
                { data: 'display_name', name: 'display_name' },
                { data: 'personal_email', name: 'personal_email' },
                { data: 'user_type', name: 'user_type' },
                { data: 'enabled', name: 'enabled'},
                { data: 'created_at', name: 'created_at'}
            ],
            order: [ [5, 'desc'] ],
        });

        $('#daterange4').daterangepicker({
            autoUpdateInput: false,
            format:'YYYY-MM-DD'
        });

        $('#daterange4').on('cancel.daterangepicker', function(ev, picker) {
            console.log('sdfs');
            oTable.search("").draw();
        });

        $('#btnResetFilter').click(function() {
            $('#user-report-table').DataTable().destroy();
            var oTable = $('#user-report-table').DataTable({
                processing: true,
                serverSide: false,
                ajax: '{!! route('admin.users.datatable') !!}',
                columns: [
                    { data: 'scti_id', name: 'scti_id' },
                    { data: 'display_name', name: 'display_name' },
                    { data: 'personal_email', name: 'personal_email' },
                    { data: 'user_type', name: 'user_type' },
                    { data: 'enabled', name: 'enabled'},
                    { data: 'created_at', name: 'created_at'}
                ]
            });
        });

        $('#btnFilterRecords').click(function() {
            $('#user-report-table').DataTable().destroy();
            var startDate = $('#fromDatepicker').val();
            var endDate = $('#toDatepicker').val();
            angular.element($('#user_reports')).scope().setDateRange(startDate, endDate);
            var fromDate = new Date(startDate).getTime() / 1000;
            var toDate = new Date(endDate).getTime() / 1000;

            var oTable = $('#user-report-table').DataTable({
                processing: true,
                serverSide: false,
                ajax: '/adminpanel/fetch/users/reports/' + fromDate + '/' + toDate,
                columns: [
                    { data: 'scti_id', name: 'scti_id' },
                    { data: 'display_name', name: 'display_name' },
                    { data: 'personal_email', name: 'personal_email' },
                    { data: 'user_type', name: 'user_type' },
                    { data: 'enabled', name: 'enabled'},
                    { data: 'created_at', name: 'created_at'}
                ]
            });
        });

        $('#daterange4').on('apply.daterangepicker', function(ev, picker) {
            var startDate = picker.startDate.format('YYYY-MM-DD');
            var endDate = picker.endDate.format('YYYY-MM-DD');
            console.log(startDate);
            angular.element($('#user_reports')).scope().setDateRange(startDate, endDate);
            $.fn.dataTableExt.afnFiltering.push(
                function( oSettings, aData, iDataIndex ) {
                    //var grab_daterange = $("#daterange4").val();
                    //var give_results_daterange = grab_daterange.split(" to ");
                    var filterstart = startDate;
                    var filterend = endDate;
                    var iStartDateCol = 5; //using column 2 in this instance
                    var iEndDateCol = 5;
                    var tabledatestart = aData[iStartDateCol];
                    var tabledateend= aData[iEndDateCol];
                
                    if ( !filterstart && !filterend )
                    {
                        return true;
                    }
                    else if ((moment(filterstart).isSame(tabledatestart) || moment(filterstart).isBefore(tabledatestart)) && filterend === "")
                    {
                        return true;
                    }
                    else if ((moment(filterstart).isSame(tabledatestart) || moment(filterstart).isAfter(tabledatestart)) && filterstart === "")
                    {
                        return true;
                    }
                    else if ((moment(filterstart).isSame(tabledatestart) || moment(filterstart).isBefore(tabledatestart)) && (moment(filterend).isSame(tabledateend) || moment(filterend).isAfter(tabledateend)))
                    {
                        return true;
                    }
                    return false;
                }
            );
            oTable.draw();
        });
    });
</script>
@endpush