@extends('admin.main')
@section('title', 'Transactions')
@section('breadcrumb')
    {{-- <li class="breadcrumb-item"><a href="#">Home</a></li> --}}
    <li class="breadcrumb-item active">Transactions</li>
@endsection
@section('content')
    <div class="col-12">
        <div class="card">
            <div class="card-header">
                <h3 class="card-title">Data Transaction</h3>
            </div>
            <!-- /.card-header -->
            <div class="card-body">
                <table id="data-user-role" class="table table-bordered table-hover">
                    <thead>
                        <tr>
                            <th>NO</th>
                            <th>Nama</th>
                            <th>Subscription</th>
                            <th>Amount</th>
                            <th>Payment Status</th>
                            <th>Method</th>
                            <th>Created at</th>
                            <th>Action</th>
                        </tr>
                    </thead> 
                </table>
            </div>
            <!-- /.card-body -->
        </div>
        <!-- /.card -->
    </div>
    <!-- /.col -->

    <script>
        $(document).ready(function () {

            $('#data-user-role').DataTable({
                serverSide: true,
                processing: true,
                ajax: '/admin/transaction-subscriptions/get-data',
                columns: [
                    { data: 'no' },
                    { data: 'user.name' },
                    { data: 'subscription.name' },
                    { data: 'amount' },
                    { data: 'payment_status' },
                    { data: 'payment_method' },
                    { data: 'created_at_format' },
                ],
                columnDefs: [
                    {
                        targets: 7,
                        render: function(data, type, row) {
                            var button = '<a href="" id="btnDetail" data-id="' + row.id +
                                '" data-toggle="modal" data-target="#modalDetail" class="btn btn-info btn-sm"><i class="fas fa-info-circle"></i>&nbsp;Detail</a>';
                            return button;
                        }
                    },

                
                ]
            });

        })
      
    </script>
@endsection