@extends('layouts.app')
@section('content')

<link rel="stylesheet" href="https://cdn.datatables.net/1.13.1/css/dataTables.bootstrap5.min.css">
<link rel="stylesheet" href="https://cdn.datatables.net/responsive/2.3.0/css/responsive.bootstrap.min.css">

<div class="m-2">
    <h1 style="text-align: center;">Transaction Tracking</h1>
    <div class="d-flex align-items-start">
        <div class="nav flex-column nav-pills me-3" id="v-pills-tab" role="tablist" aria-orientation="vertical">
            {{-- tab buttons --}}
          
            <button class="nav-link active" id="v-pills-Document-tab" data-bs-toggle="pill"
                data-bs-target="#v-pills-Document" type="button" role="tab" aria-controls="v-pills-Document"
                aria-selected="true">
                Documents
            </button>
            
            <button class="nav-link" id="v-pills-credit-tab" data-bs-toggle="pill"
                data-bs-target="#v-pills-credit" type="button" role="tab" aria-controls="v-pills-credit"
                aria-selected="true">
                Credit
            </button>
            
        </div>
        {{-- tab content --}}
        <div class="tab-content" id="v-pills-tabContent" style="width: 100%;">
          
            <div class="tab-pane fade show active" id="v-pills-Document" role="tabpanel"
                aria-labelledby="v-pills-Document-tab">
                <h2>Document Transactions</h2>
                <hr>
                <div class="row">
                    <div class="col-md-12 table-responsive mt-3" id="doc_transactionsData">
                        <table class="table table-striped dt-responsive table-hover"
                            style="width: 100% !important;" id="doc_transactions">
                            <thead >
                                <tr>
                                    <th>
                                        Id
                                    </th>
                                    <th>
                                        Username
                                    </th>
                                    <th>
                                        Pay Method
                                    </th>
                                    <th>
                                        No. of Documents
                                    </th>
                                    <th>
                                        Transaction Amount
                                    </th>
                                    <th>
                                        Status
                                    </th>
                                    <th>
                                        Message
                                    </th>
                                    <th>
                                        Date
                                    </th>
                                    <th>
                                        Document IDs
                                    </th>
                                                                  
                                </tr>
                            </thead>
                            <tbody>
                            </tbody>
                        </table>
                    </div>
                   
                </div>
            
            </div>
            <div class="tab-pane fade" id="v-pills-credit" role="tabpanel"
                aria-labelledby="v-pills-credit-tab">
                <h2>Credit Transactions</h2>
                <hr>
                <div class="row">
                    <div class="col-md-12 table-responsive mt-3" id="cred_transactionsData">
                        <table class="table table-striped dt-responsive table-hover"
                            style="width: 100% !important;" id="cred_transactions">
                            <thead >
                                <tr>
                                    <th>
                                        ID
                                    </th>
                                    <th>
                                        Username
                                    </th>
                                    <th>
                                        Pay Method
                                    </th>
                                    <th>
                                        Transaction Amount
                                    </th>
                                    <th>
                                        Status
                                    </th>
                                 
                                    <th>
                                        Message
                                    </th>
                                    <th>
                                        Date
                                    </th>
                                  
                                </tr>
                            </thead>
                            <tbody>
                            </tbody>
                        </table>
                    </div>
                 
                </div>
            
            </div>
            
        </div>


    </div>

</div>
@endsection
@push('footer_js')
    <script src="https://cdn.datatables.net/1.13.1/js/jquery.dataTables.min.js"></script>
    <script src="https://cdn.datatables.net/1.13.1/js/dataTables.bootstrap5.min.js"></script>
    <script src="https://cdn.datatables.net/responsive/2.3.0/js/dataTables.responsive.min.js"></script>
    <script src="https://cdn.datatables.net/responsive/2.3.0/js/responsive.bootstrap.min.js"></script>

{{--  doc_transactions table  --}}
    <script type="text/javascript">
       
        let doc_transactions = $('#doc_transactions').DataTable({
            processing: true,
            serverSide: true,
            responsive: true,
            aaSorting: [
                [0, "desc"]
            ],
            ajax: {
                url: '{!! route('ajax.get.doctracking') !!}',
                data: function(d) {
                    // d.range = $('.range-picker').val();
                }
            },
            columns: [{
                        data: 'id',
                        name: 'id'
                    },
                    {
                        
                        name: 'users.username',
                        data: 'username',
                    },
                    {
                        data: 'payment_method',
                        name: 'payment_method'
                    },
                    {
                        data: 'no_of_docs',
                        name: 'no_of_docs'
                    },
                    {
                        data: 'trans_amount',
                        name: 'trans_amount'
                    },
                    {
                        data: 'status',
                        name: 'status'
                    },
                    {
                        data: 'bank_message',
                        name: 'bank_message'
                    },
                    {
                        data: 'updated_at',
                        name: 'updated_at'
                    },
                    {
                        data: 'trans_ids',
                        name: 'trans_ids'
                    },
                ]
        });

        $('form[name="search"]').on('submit', function(e) {
            doc_transactions.draw();
            e.preventDefault();
        });

    </script>
{{--  cred_transactions table  --}}
    <script type="text/javascript">
      
        let cred_transactions = $('#cred_transactions').DataTable({
            processing: true,
            serverSide: true,
            responsive: true,
            aaSorting: [
                [1, "asc"]
            ],
            ajax: {
                url: '{!! route('ajax.reports.cred_transactions') !!}',
                data: function(d) {
                    // d.range = $('.range-picker').val();
                }
            },
            columns: [{
                        data: 'id',
                        name: 'id'
                    },
                    {
                        data: 'username',
                        name: 'users.username',
                    },
                    {
                        data: 'payment_method',
                        name: 'payment_method'
                    },
                    {
                        data: 'trans_amount',
                        name: 'trans_amount'
                    },
                    {
                        data: 'status',
                        name: 'status'
                    },
                    {
                        data: 'bank_message',
                        name: 'bank_message'
                    },
                    {
                        data: 'updated_at',
                        name: 'updated_at',
                    },
                ]
        });

        $('form[name="search"]').on('submit', function(e) {
            cred_transactions.draw();
            e.preventDefault();
        });

    </script>
@endpush