@extends('layouts.user')

{{-- Web site Title --}}

<style>
    button {
        display: block;
        border: solid white;
        border-width: 0 10px;
        border-radius: 0;
        background: green;
        color: white;
        font-size: 18px;
        margin: -60px auto 15px;
        padding: 15px;
    }

    .dropdown {
        position: absolute;
        display: inline-block;
    }

    .dropdown-content {
        display: none;
        position: absolute;
        background-color: #f1f1f1;
        min-width: 160px;
        z-index: 1;
    }

    .dropdown-content a {
        color: black;
        padding: 12px 16px;
        text-decoration: none;
        display: block;
    }

    .dropdown-content a:hover {
        background-color: #ddd
    }

    .dropdown:hover .dropdown-content {
        display: block;
    }

    .btn:hover,
    .dropdown:hover .btn {
        background-color: #0b7dda;
    }
</style>
{{-- Content --}}
@section('content')
<div class="panel panel-default">
    <div class="panel-heading">
        <h4 class="panel-title">
            <i class="material-icons">format_list_numbered_rtl</i>
            {{ 'All Transactions ' }}
        </h4>
        <span class="pull-right"><i class="fa fa-fw fa-chevron-up clickable"></i></span>
    </div>
    <div class="panel-body">
        <div class="table-responsive">
            <table id="data_data" class="table table-bordered table-hover">
                <thead>
                    <tr>
                        <th>#. </th>
                        <th>ID</th>
                        <th>Title</th>
                        <th>Ref #</th>
                        <th>Account Beneficiary</th>
                        <th>Amount</th>
                        <th>Action</th>
                    </tr>
                </thead>
                <tbody>
                </tbody>
            </table>
        </div>
    </div>
    @stop
    @section('scripts')




    <script type="text/javascript" language="javascript">
        $(document).ready(function() {

            $(function() {
                $('#data_data').DataTable({
                    processing: true,
                    serverSide: true,
                    ajax: {
                        url: "index/data",
                        type: "GET"
                    },
                    columns: [

                        {
                            render: (data, type, row, meta) => meta.row + 1,
                        },
                        {
                            data: 'reference_id',
                        },
                        {
                            data: 'title',
                        },
                        {
                            data: 'transaction_ref_no',
                        },
                        {
                            data: 'account_b',
                        },

                        {
                            data: 'amount',
                        },
                        {
                            data: 'action',
                        },



                    ],
                    "order": [[ 1, "desc" ]]
                });
            });

        });
    </script>

    @stop