@extends('layout.app')

@section('content')
    <div class="card">
        <div class="card-header">
            <h3 class="card-title"><i class="fa fa-money-bill-wave"></i> Online Send Money Report</h3>
        </div>
        <div class="card-body">
            <div class="row mb-3">
                <div class="col-md-2">
                    <label class="small mb-1">From Date</label>
                    <input type="date" id="from_date" class="form-control">
                </div>
                <div class="col-md-2">
                    <label class="small mb-1">To Date</label>
                    <input type="date" id="to_date" class="form-control">
                </div>
                <div class="col-md-2">
                    <label class="small mb-1">Provider</label>
                    <select id="provider" class="form-control">
                        <option value="">All Providers</option>
                        <option value="bkash">bKash</option>
                        <option value="nagad">Nagad</option>
                        <option value="rocket">Rocket</option>
                    </select>
                </div>
                <div class="col-md-2">
                    <label class="small mb-1">Txn Type</label>
                    <select id="txn_type" class="form-control">
                        <option value="">All Types</option>
                        @foreach ($txnTypes as $type)
                            <option value="{{ $type }}">{{ $type }}</option>
                        @endforeach
                    </select>
                </div>
                <div class="col-md-4 d-flex align-items-end">
                    <button id="filter" class="btn btn-primary mr-2">Search</button>
                    <button id="reset" class="btn btn-secondary">Reset</button>
                </div>
            </div>

            <div class="table-responsive">
                <table id="dataTable" class="table table-bordered table-striped" style="width: 100% !important;">
                    <thead class="bg-dark text-white">
                        <tr>
                            <th>#</th>
                            <th>Provider</th>
                            <th>TrxID</th>
                            <th>Amount</th>
                            <th>Sender</th>
                            <th>Reference</th>
                            <th>Txn Type</th>
                            <th>Txn Time</th>
                            <th>Received At</th>
                        </tr>
                    </thead>
                </table>
            </div>
        </div>
    </div>
@endsection

@section('ajax')
    <script>
        $(document).ready(function() {

            if ($.fn.DataTable.isDataTable('#dataTable')) {
                $('#dataTable').DataTable().clear().destroy();
            }

            let table = $('#dataTable').DataTable({
                processing: true,
                serverSide: true,
                destroy: true,
                pageLength: 100,
                lengthMenu: [
                    [10, 25, 50, 100, 200, 500],
                    [10, 25, 50, 100, 200, 500]
                ],
                ajax: {
                    url: '{{ route('online-send-money-report.datatable') }}',
                    data: function(d) {
                        d.from_date = $('#from_date').val();
                        d.to_date = $('#to_date').val();
                        d.provider = $('#provider').val();
                        d.txn_type = $('#txn_type').val();
                    }
                },
                columns: [
                    { data: 'id', name: 'id' },
                    { data: 'provider_label', name: 'provider_label' },
                    { data: 'trx_id', name: 'trx_id' },
                    { data: 'amount', name: 'amount' },
                    { data: 'sender', name: 'sender' },
                    { data: 'reference', name: 'reference' },
                    { data: 'txn_type', name: 'txn_type' },
                    { data: 'txn_time', name: 'txn_time' },
                    { data: 'created_at', name: 'created_at' },
                ],
                order: [
                    [0, 'desc']
                ]
            });

            $('#filter').on('click', function() {
                table.draw();
            });

            $('#reset').on('click', function() {
                $('#from_date').val('');
                $('#to_date').val('');
                $('#provider').val('');
                $('#txn_type').val('');
                table.draw();
            });

        });
    </script>
@endsection