@include('includes.header')
<meta name="viewport" content="width=1200, initial-scale=1.0, maximum-scale=1.0">
<div class="container-fluid mt-3">
    <div class="row">
        <div class="col-md-8 col-sm-6 col-xs-12">
            <ul class="pull-right d-inline-flex" style="list-style: none;">
                <li class="btn-sm">
                    <a href="{{ route('all-account') }}" class="btn btn-primary rounded-pill"
                        style="width: 110px; text-align: center;"> All Account</a>
                </li>
                <li class="btn-sm">
                    <a href="{{ route('pending') }}" class="btn btn-warning rounded-pill"
                        style="width: 110px; text-align: center; color: white;"> Pending</a>
                </li>
                <li class="btn-sm">
                    <a href="{{ route('all-history') }}" class="btn btn-success rounded-pill"
                        style="width: 110px; text-align: center;"> All History</a>
                </li>
            </ul><br>
            <b style="color: #009688;">Payment History</b>
        </div>
    </div>
    <hr />
    
    <section>
        <table class="table table-striped account-table">
            <form method="GET" action="{{ route('filter_transactions') }}"> 
                <div class="row py-3">
                    <div class="col-lg-1 col-md-1 col-sm-12">
                        <div class="form-group">
                            <select name="limit" class="form-control" style="width: 80px; height: 33px; border-radius: 25px; padding: 1px;">
                                <option value="25">25</option>
                                <option value="50">50</option>
                            </select>
                        </div>
                    </div>
                    <div class="col-lg-2 col-md-2 col-sm-12">
                        <div class="form-group">
                            <input type="text" name="username" class="form-control" placeholder="Username" style="height: 33px; border-radius: 25px;" value="{{ request('username') }}">
                        </div>
                    </div>
                    <div class="col-lg-2 col-md-2 col-sm-12">
                        <div class="form-group">
                            <select name="type" class="form-control" style="height: 33px; border-radius: 25px; padding: 1px;">
                                <option value="All">All</option>
                                <option value="Credit" {{ request('type') == 'Credit' ? 'selected' : '' }}>Credit</option>
                                <option value="Debit" {{ request('type') == 'Debit' ? 'selected' : '' }}>Debit</option>
                            </select>
                        </div>
                    </div>
                    <div class="col-lg-2 col-md-2 col-sm-12">
                        <div class="form-group">
                            <input type="date" name="start_date" class="form-control" style="height: 33px; border-radius: 25px;" value="{{ request('start_date') }}">
                        </div>
                    </div>
                    <div class="col-lg-2 col-md-2 col-sm-12">
                        <div class="form-group">
                            <input type="date" name="end_date" class="form-control" style="height: 33px; border-radius: 25px;" value="{{ request('end_date') }}">
                        </div>
                    </div>
                    <div class="col-lg-1 col-md-1 col-sm-12">
                        <button type="submit" class="btn-sm btn btn-success rounded-pill" style="width: 113px; color: white;">
                            <i class="fa fa-search"></i> Search
                        </button>
                    </div>
                </div>
            </form>
            <tr>
                <th>TID</th>
                <th>Username</th>
                <th>Amount</th>
                <th>type</th>
                <th>Balance_type</th>
                <th>Description</th>
                <th>Before_balance</th>
                <th>After_balance</th>
                <th>Date</th>

            </tr>
            @foreach ($transactions as $transaction)
                <tr>
                    <td>{{ $transaction->id }}</td>
                    <td>{{ $transaction->username }}</td>
                    <td style="{{ $transaction->type == 'Debit' ? 'color: red;' : 'color: green;' }}">
                        {{ $transaction->amount }}
                    </td>
                    <td style="{{ $transaction->type == 'Debit' ? 'color: red;' : 'color: green;' }}">
                        {{ ucfirst($transaction->type) }}
                    </td>
                    <td>{{ $transaction->balance_type }}</td>
                    <td>{{ $transaction->description }} |
                        <span style="color: red;"> By {{ $transaction->by_name ?? 'Unknown Admin' }}</span>
                    </td>
                    <td style="color: #009688;">{{ $transaction->before_balance }}</td>
                    <td style="color: #009688;">{{ $transaction->after_balance }}</td>
                    <td>{{ $transaction->created_at }}</td>
                </tr>
            @endforeach
        </table>
        <!--Ends-->
        </td>
        </tr>
        </tbody>
        </table>
    </section>
</div>
</div>

<script>
    function showDialogRefund() {
        document.getElementById('dialogCardfund').style.display = 'block';
    }

    function closeDialogfund() {
        document.getElementById('dialogCardfund').style.display = 'none';
    }
</script>

@include('includes.footer')