@extends('layouts.app')

@section('title', 'myIDENTITY')
@section('my-identity', 'm-menu__item--active')

@section('css')
@endsection

@section('content')
{{-- <div class="row">
    <div class="col-lg-10">
        <div class="m-portlet">
            <div class="m-portlet__head">
                <div class="m-portlet__head-caption">
                    <div class="m-portlet__head-title">
                        <span class="m-portlet__head-icon m--hide">
                            <i class="la la-gear"></i>
                        </span>
                        <h3 class="m-portlet__head-text">Log Transaksi</h3>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div> --}}
<div class="row">
    <div class="col-lg-12">
        <div class="m-portlet m-portlet--mobile">
            <div class="m-portlet__body">
                <div class="m-portlet__head-caption">
                    <div class="m-portlet__head-title">
                        <h3 class="m-portlet__head-text">Log Transaksi</h3>
                    </div>
                </div>
                <div class="datatable">
                    <div class="col-md-12">
                        <form class="pull-right" id="search_form" style="margin-top: 15px;">
                            <div class="input-group">
                                <div class="" style="margin-right:5px">
                                    <a href="#" id="export_file" class="btn btn-info m-btn m-btn--custom m-btn--icon m-btn--air m-btn--pill" style="padding-top:unset" onclick="exportFile(); return false;">
                                        <i class="la la-excel-o"></i>
                                        <span>Jana XLSX</span>
                                    </a>
                                </div>
                                <div id="transaction_range" style="background: #fff; cursor: pointer; padding: 10px 10px; border: 1px solid #ebedf2;">
                                    <i class="fa fa-calendar"></i>&nbsp;<span></span> <i class="fa fa-caret-down"></i>
                                </div>
                                <input type="hidden" id="status" value="{{$status}}" />
                                <input type="hidden" id="from_date" value="" />
                                <input type="hidden" id="to_date" value="" />
                                <select class="form-control" id="filter_type" style="height:unset;padding:5px 5px;min-width:80px;">
                                    <option value="type">Type</option>
                                    <option value="datetime">Datetime</option>
                                    <option value="indicator">Indicator</option>
                                    <option value="agency_code">Agency Code</option>
                                    <option value="branch_code">Branch Code</option>
                                    <option value="transaction_code">Transaction Code</option>
                                    <option value="userId">UserId</option>
                                    <option value="ic">IC No.</option>
                                    <option value="semua" selected="selected">Semua</option>
                                </select>
                                <input type="text" class="form-control" id="q" placeholder="Carian..." style="height:unset;padding:5px 5px;min-width:90px;">
                                <button type="button" class="btn btn-default" id="filter"><span class="fa fa-search"></span></button>
                            </div>
                        </form>
                    </div> 
                    <br>
                    <br>
                    <br>
                    <div class="table-responsive">
                        <table class="table table-striped" id="transaction_log_table" style="overflow-x: auto !important;width: 100% !important;">
                            <thead>
                                <tr>
                                    {{-- <th>No.</th> --}}
                                    <th>Type</th>
                                    <th>Datetime</th>
                                    <th>Indicator</th>
                                    <th>Agency Code</th>
                                    <th>Branch Code</th>
                                    <th>Transaction Code</th>
                                    <th>UserId</th>
                                    <th>IC No.</th>
                                </tr>
                            </thead>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection

@section('js')
@role(['super_admin', 'principal_admin'])
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.24.0/moment.min.js"></script>

<script src="https://cdn.datatables.net/1.10.20/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/1.10.20/js/dataTables.bootstrap4.min.js"></script>

<script src="https://cdn.datatables.net/buttons/1.6.1/js/dataTables.buttons.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.1.3/jszip.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.53/pdfmake.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.53/vfs_fonts.js"></script>
<script src="https://cdn.datatables.net/buttons/1.6.1/js/buttons.print.min.js"></script>
<script src="https://cdn.datatables.net/buttons/1.6.1/js/buttons.html5.min.js"></script>
<script>
    var start = moment("2019-01-01");
    var end = moment();

    $(document).ready(function(){
        var from_date = start.format('YYYY-MM-DD');
        var to_date = end.format('YYYY-MM-DD');

        $('#transaction_log_table').dataTable({
            scrollX: true,
            processing: true,
            paging: true,
            pageLength: 15,
            lengthMenu: [[15,30,50,100], [15,30,50,100]],
            serverSide:true,
            ajax: {
                url: '{{ url('super-admin/my-identity/transactionLog/list?status=') }}{{ $status }}',
                data:{from_date:from_date, to_date:to_date}
            },
            searching:false,
            language:{emptyTable: "Tiada data"},
            columns: [
                // {data: 'id', name: 'id'},
                {data: 'type', name: 'type'},
                {data: 'datetime', name: 'datetime'},
                {data: 'indicator', name: 'indicator'},
                {data: 'agency_code', name: 'agency_code'},
                {data: 'branch_code', name: 'branch_code'},
                {data: 'transaction_code', name: 'transaction_code'},
                {data: 'userId', name: 'userId'},
                {data: 'ic_no', name: 'ic_no'},
            ],
        });
    });

    $('#search_form').submit(function (event) {
        event.preventDefault();
        $("#filter").trigger("click");
    });

    $('#filter').click(function(){
        var status = $('#status').val();
        var from_date = $('#from_date').val();
        var to_date = $('#to_date').val();
        var q = $('#q').val();
        var filter_type = $("#filter_type").val();

        $('#transaction_log_table').dataTable().fnDestroy();
        $('#transaction_log_table').dataTable({});
        $('#transaction_log_table').dataTable().fnDestroy();
        $('#transaction_log_table').dataTable({
            scrollX: true,
            processing: true,
            paging: true,
            pageLength: 15,
            lengthMenu: [[15, 30, 50, 100], [15, 30, 50, 100]],
            serverSide: true,
            ajax: {
                url:'{{ url('super-admin/my-identity/transactionLog/list?status=') }}',
                data:{status:status, from_date:from_date, to_date:to_date, q:q, filter_type:filter_type}
            },
            searching: false,
            language: {
                emptyTable: "Tiada Data"
            },
            columns: [
                // {data: 'id', name: 'id'},
                {data: 'type', name: 'type'},
                {data: 'datetime', name: 'datetime'},
                {data: 'indicator', name: 'indicator'},
                {data: 'agency_code', name: 'agency_code'},
                {data: 'branch_code', name: 'branch_code'},
                {data: 'transaction_code', name: 'transaction_code'},
                {data: 'userId', name: 'userId'},
                {data: 'ic_no', name: 'ic_no'},
            ],
        });
    });

    $(function() {
        function cb(start, end) {
            $('#transaction_range span').html(start.format('D MMMM YYYY') + ' - ' + end.format('D MMMM YYYY'));
            $('#from_date').val(start.format('YYYY-MM-DD'));
            $('#to_date').val(end.format('YYYY-MM-DD'));
        }

        $('#transaction_range').daterangepicker({
            showDropdowns: true,
            minYear: 2008,
            maxYear: 2020,
            startDate: start,
            endDate: end,
            ranges: {
                'Semua': [start, end],
                'Hari Ini': [moment(), moment()],
                '7 Hari Terakhir': [moment().subtract(6, 'days'), moment()],
                'Bulan Ini': [moment().startOf('month'), moment().endOf('month')],
                'Tahun Ini': [moment().startOf('years'), moment().endOf('years')]
            },
            locale: {
                format: 'DD/MM/YYYY'
            },
            autoApply: true,
            opens: 'left'
        }, cb); 

        cb(start, end);
    });

    function exportFile(){
        var status = $('#status').val();
        var from_date = $('#from_date').val();
        var to_date = $('#to_date').val();
        var q = $('#q').val();
        var filter_type = $('#filter_type').val();

        window.open('{{ url('super-admin/my-identity/transactionLog/export?_token=') }}{{ csrf_token() }}&from_date='+from_date+'&to_date='+to_date+'&q='+q+'+&filter_type='+filter_type, '_blank ');
    }
</script>
@endrole
@endsection