@extends('layouts.layout-admin')

@section('content')
<div id="pay_reports" class="row box-body" ng-controller="paymentReportsCtrl">
    @include('admin.partials.alerts')
        <form method="post" name="paymentReports" id="paymentReports">
            <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>
<br />
    <!--<form method="post" name="paymentReports" id="paymentReports">
    <div class="col-md-8">
        <div class="input-group ">
            <div class="input-group-addon">
            <i class="fa fa-calendar"></i>
            </div>
            <input id="daterange4" name="daterange4" class="form-control" type="text" clearable="true" />
        </div>
    </div>
    </form>-->

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

    <table class="table table-striped" id="payments-table">
        <thead>
            <tr>
                <th>Transaction Code</th>
                <th>Username</th>
                <th>Course Codes</th>
                <th>Course names</th>
                <th>Location</th>
                <th>Booked Date</th>
                <th>Payment Type</th>
                <th>Grand Total</th>
                <th>Payment Status</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 = $('#payments-table').DataTable({
            processing: true,
            serverSide: false,
            ajax: '{!! route('admin.pay_reports.datatable') !!}',
            columns: [
                { data: 'transaction_code', name: 'transaction_code' },
                { data: 'scti_id', name: 'scti_id' },
                { data: 'course_code', name: 'course_code', orderable: false, searchable: false },
                { data: 'course_name', name: 'course_name', orderable: false, searchable: false },
                { data: 'course_location', name: 'course_location', orderable: false, searchable: false },
                { data: 'booked_date', name: 'booked_date' },
                { data: 'transaction_type', name: 'transaction_type', orderable: false, searchable: false },
                { data: 'grand_total', name: 'grand_total'},
                { data: 'payment_status', name: 'payment_status'}
            ],
            order: [ [0, 'desc'] ],
        });

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

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

        $('#btnResetFilter').click(function() {
            $('#payments-table').DataTable().destroy();
            var oTable = $('#payments-table').DataTable({
                processing: true,
                serverSide: false,
                ajax: '{!! route('admin.pay_reports.datatable') !!}',
                columns: [
                    { data: 'transaction_code', name: 'transaction_code' },
                    { data: 'scti_id', name: 'scti_id' },
                    { data: 'course_code', name: 'course_code', orderable: false, searchable: false },
                    { data: 'course_name', name: 'course_name', orderable: false, searchable: false },
                    { data: 'course_location', name: 'course_location', orderable: false, searchable: false },
                    { data: 'booked_date', name: 'booked_date' },
                    { data: 'transaction_type', name: 'transaction_type', orderable: false, searchable: false },
                    { data: 'grand_total', name: 'grand_total'},
                    { data: 'payment_status', name: 'payment_status'}
                ]
            });
        });

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

            var oTable = $('#payments-table').DataTable({
                processing: true,
                serverSide: false,
                ajax: '/adminpanel/fetch/payment/reports/' + fromDate + '/' + toDate,
                columns: [
                    { data: 'transaction_code', name: 'transaction_code' },
                    { data: 'scti_id', name: 'scti_id' },
                    { data: 'course_code', name: 'course_code', orderable: false, searchable: false },
                    { data: 'course_name', name: 'course_name', orderable: false, searchable: false },
                    { data: 'course_location', name: 'course_location', orderable: false, searchable: false },
                    { data: 'booked_date', name: 'booked_date' },
                    { data: 'transaction_type', name: 'transaction_type', orderable: false, searchable: false },
                    { data: 'grand_total', name: 'grand_total'},
                    { data: 'payment_status', name: 'payment_status'}
                ]
            });
        });

        /*$('#daterange4').on('apply.daterangepicker', function(ev, picker) {
            var startDate = picker.startDate.format('YYYY-MM-DD');
            var endDate = picker.endDate.format('YYYY-MM-DD');
            angular.element($('#pay_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 = 3; //using column 2 in this instance
                    var iEndDateCol = 3;
                    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