@push('styles')
<style>
    .glass-card {
        background: rgba(30,41,59,.72);
        backdrop-filter: blur(10px);
    }

    .transaction-table {
        --bs-table-bg: transparent;
        --bs-table-border-color: rgba(148,163,184,.08);
    }

    .transaction-table thead.table-dark th {
        background: rgba(255,255,255,.03) !important;
        border-bottom: 1px solid rgba(148,163,184,.08);
        color: #94a3b8;
        font-size: .78rem;
        font-weight: 700;
        letter-spacing: .03em;
        text-transform: uppercase;
        padding: 1rem;
    }

    .transaction-table tbody td {
        padding: 1rem;
        border-color: rgba(148,163,184,.06);
        vertical-align: middle;
    }

    .transaction-table tbody tr {
        transition: all .2s ease;
    }

    .transaction-table tbody tr:hover {
        background: rgba(255,255,255,.025);
    }

    .trx-id {
        font-weight: 700;
        color: #fff;
    }

    .amount-text {
        font-weight: 600;
        color: #f59e0b;
    }

    .table-user small,
    .table-account small {
        color: #94a3b8;
        font-size: .72rem;
    }

    .pagination-wrapper {
        border-top: 1px solid rgba(148,163,184,.08);
    }
</style>
@endpush

<div class="card border-0 shadow-sm overflow-hidden glass-card">

    <div class="table-responsive">

        <table class="table table-hover align-middle mb-0 text-nowrap transaction-table">

            <thead class="table-dark">

                <tr>

                    <th>TRX ID</th>
                    <th>User</th>
                    <th>Tipe</th>
                    <th>Bank</th>
                    <th>Rekening</th>
                    <th>Amount</th>
                    <th>Status</th>
                    <th>Tanggal</th>

                    @if($showActions ?? false)

                        <th class="text-center">
                            Aksi
                        </th>

                    @endif

                </tr>

            </thead>

            <tbody>

                @forelse($transactions as $trx)

                    <tr>

                        {{-- TRX ID --}}
                        <td class="trx-id">
                            {{ $trx->trxid }}
                        </td>

                        {{-- USER --}}
                        <td class="table-user">

                            <div class="fw-semibold text-white">
                                {{ $trx->user?->username ?? '-' }}
                            </div>

                            <small>
                                ID: {{ $trx->user_id ?? '-' }}
                            </small>

                        </td>

                        {{-- TYPE --}}
                        <td>

                            @php
                                $type = strtolower($trx->payment_type ?? '-');
                            @endphp

                            @if($type === 'deposit')

                                <span class="badge bg-success">
                                    Deposit
                                </span>

                            @elseif($type === 'withdraw')

                                <span class="badge bg-danger">
                                    Withdraw
                                </span>

                            @else

                                <span class="badge bg-label-secondary">
                                    {{ ucfirst($trx->payment_type ?? '-') }}
                                </span>

                            @endif

                        </td>

                        {{-- BANK --}}
                        <td>
                            {{ $trx->bank ?? '-' }}
                        </td>

                        {{-- ACCOUNT --}}
                        <td class="table-account">

                            <div>
                                {{ $trx->account_name ?? '-' }}
                            </div>

                            <small>
                                {{ $trx->account_number ?? '-' }}
                            </small>

                        </td>

                        {{-- AMOUNT --}}
                        <td class="amount-text">
                            Rp {{ number_format((float) $trx->amount, 0, ',', '.') }}
                        </td>

                        {{-- STATUS --}}
                        <td>

                            @if($trx->status === 'pending')

                                <span class="badge bg-warning">
                                    Pending
                                </span>

                            @elseif($trx->status === 'success')

                                <span class="badge bg-success">
                                    Success
                                </span>

                            @elseif($trx->status === 'failed')

                                <span class="badge bg-danger">
                                    Failed
                                </span>

                            @elseif($trx->status === 'rejected')

                                <span class="badge bg-danger">
                                    Rejected
                                </span>

                            @else

                                <span class="badge bg-secondary">
                                    {{ $trx->status }}
                                </span>

                            @endif

                        </td>

                        {{-- DATE --}}
                        <td>
                            {{ optional($trx->created_at)->format('d-m-Y H:i') }}
                        </td>

                        {{-- ACTION --}}
                        @if($showActions ?? false)

                            <td>

                                <div class="d-flex justify-content-center gap-1">

                                    <form method="POST"
                                          action="{{ route('admin.transaction.approve', $trx->id) }}"
                                          class="m-0">

                                        @csrf

                                        <button class="btn btn-sm btn-success"
                                                onclick="return confirm('Approve deposit ini?')">

                                            Approve

                                        </button>

                                    </form>

                                    <form method="POST"
                                          action="{{ route('admin.transaction.reject', $trx->id) }}"
                                          class="m-0">

                                        @csrf

                                        <button class="btn btn-sm btn-danger"
                                                onclick="return confirm('Reject deposit ini?')">

                                            Reject

                                        </button>

                                    </form>

                                </div>

                            </td>

                        @endif

                    </tr>

                @empty

                    <tr>

                        <td colspan="{{ ($showActions ?? false) ? 9 : 8 }}"
                            class="text-center py-5 text-body-secondary">

                            Tidak ada data transaksi

                        </td>

                    </tr>

                @endforelse

            </tbody>

        </table>

    </div>

    {{-- PAGINATION --}}
    <div class="card-footer bg-transparent pagination-wrapper">

        <div class="d-flex justify-content-center overflow-auto">

            {{ $transactions->links() }}

        </div>

    </div>

</div>