@extends('layouts.master')

@section('title', $agencyName . ' Transaction History')

@section('content')
    <div class="container-fluid">
        <div class="card">
            <div class="card-header">
                <h3 class="card-title">{{ $agencyName }} Transaction History</h3>
            </div>

            <div class="card-body">
                <div class="row mb-3">
                    <div class="col-md-3">
                        <select id="filter-type" class="form-control">
                            <option value="">All Txn Types</option>
                            <option value="Deposit">Deposit</option>
                            <option value="Spend">Spend</option>
                            <option value="Transfer In">Transfer In</option>
                            <option value="Transfer Out">Transfer Out</option>
                            <option value="Rejected">Rejected</option>
                            <option value="Refund">Refund</option>
                        </select>
                    </div>

                    <div class="col-md-3">
                        <select id="filter-currency" class="form-control">
                            <option value="">All Currencies</option>
                            <option value="BDT">BDT</option>
                            <option value="SAR">SAR</option>
                        </select>
                    </div>

                    <div class="col-md-3">
                        <input type="date" id="from-date" class="form-control">
                    </div>

                    <div class="col-md-3">
                        <input type="date" id="to-date" class="form-control">
                    </div>
                </div>

                <table id="transaction-table" class="table table-bordered table-striped">
                    <thead>
                        <tr>
                            <th>SL</th>
                            <th>Txn Type</th>
                            <th>Currency</th>
                            <th>Amount</th>
                            <th>Old Balance</th>
                            <th>New Balance</th>
                            <th>Timestamp</th>
                            <th>Action</th>
                        </tr>
                    </thead>
                    <tbody></tbody>
                </table>
            </div>
        </div>
    </div>
@endsection

@section('scripts')
    <meta name="csrf-token" content="{{ csrf_token() }}">

    <link rel="stylesheet" href="https://cdn.datatables.net/1.13.6/css/jquery.dataTables.min.css">
    <link rel="stylesheet" href="https://cdn.datatables.net/buttons/2.4.2/css/buttons.dataTables.min.css">

    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script src="https://cdn.datatables.net/1.13.6/js/jquery.dataTables.min.js"></script>
    <script src="https://cdn.datatables.net/buttons/2.4.2/js/dataTables.buttons.min.js"></script>
    <script src="https://cdn.datatables.net/buttons/2.4.2/js/buttons.html5.min.js"></script>
    <script src="https://cdn.datatables.net/buttons/2.4.2/js/buttons.print.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.10.1/jszip.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.2.7/pdfmake.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.2.7/vfs_fonts.js"></script>

    <script>
        $(document).ready(function() {
            $.ajaxSetup({
                headers: {
                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                }
            });

            let table = $('#transaction-table').DataTable({
                processing: true,
                serverSide: true,
                ajax: {
                    url: '{{ route('transaction.list') }}',
                    data: function(d) {
                        d.tnx_type = $('#filter-type').val();
                        d.currency = $('#filter-currency').val();
                        d.from_date = $('#from-date').val();
                        d.to_date = $('#to-date').val();
                    }
                },
                columns: [
                    { data: 'DT_RowIndex', name: 'DT_RowIndex', orderable: false, searchable: false },
                    { data: 'tnx_type', name: 'tnx_type' },
                    { data: 'currency', name: 'currency' },
                    { data: 'amount', name: 'amount' },
                    { data: 'old_balance', name: 'old_balance' },
                    { data: 'new_balance', name: 'new_balance' },
                    { 
                        data: 'created_at',
                        name: 'created_at',
                        render: function(data) {
                            if (data) {
                                return new Date(data).toLocaleDateString('en-GB', {
                                    day: '2-digit',
                                    month: 'short',
                                    year: 'numeric'
                                });
                            }
                            return 'N/A';
                        }
                    },
                    { data: 'action', name: 'action', orderable: false, searchable: false }
                ],
                dom: 'Bfrtip',
                buttons: ['copy', 'csv', 'excel', 'pdf', 'print']
            });

            $('#filter-type, #filter-currency, #from-date, #to-date').on('change keyup', function() {
                table.draw();
            });
        });
    </script>
@endsection