@extends('backoffice.layouts.app')

@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 td {
        vertical-align: middle;
        padding: 1rem;
        border-color: rgba(148,163,184,.06);
    }

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

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

    .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;
    }

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

    .text-small {
        font-size: 12px;
    }

    .amount-text {
        font-weight: 600;
        color: #22c55e;
    }
</style>
@endpush

@section('content')
<div class="container-xxl container-p-y">

    {{-- HEADER --}}
    <div class="card border-0 shadow-sm overflow-hidden position-relative mb-4 glass-card">

        <div class="position-absolute top-0 end-0"
             style="
                width:220px;
                height:220px;
                background:
                radial-gradient(circle,
                rgba(234,179,8,.14) 0%,
                transparent 72%);
                pointer-events:none;">
        </div>

        <div class="card-body position-relative z-1 d-flex justify-content-between align-items-center flex-wrap gap-2">

            <div>

                <h5 class="mb-1 text-white fw-semibold">
                    Deposit Pending
                </h5>

                <small class="text-body-secondary">
                    Manage pending deposit transactions
                </small>

            </div>

            <a href="{{ route('admin.transaction.deposit.pending') }}"
               class="btn btn-label-secondary">

                <i class="ti tabler-refresh me-1"></i>
                Refresh

            </a>

        </div>

    </div>

    {{-- ALERT --}}
    @include('backoffice.pages.transaction.partials.alert')

    {{-- SEARCH --}}
    <div class="card border-0 shadow-sm mb-4 glass-card">

        <div class="card-body">

            <form method="GET"
                  action="{{ route('admin.transaction.deposit.pending') }}"
                  class="d-flex flex-column flex-md-row gap-2">

                <div class="input-group flex-grow-1">

                    <span class="input-group-text border-0 bg-transparent">
                        <i class="ti tabler-search"></i>
                    </span>

                    <input
                        type="text"
                        name="search"
                        class="form-control border-0"
                        placeholder="Search trx id / username / bank / account..."
                        value="{{ $search }}">

                </div>

                <div class="d-grid d-md-flex gap-2">

                    <button type="submit"
                            class="btn btn-primary text-nowrap">

                        Search

                    </button>

                    @if(!empty($search))

                        <a href="{{ route('admin.transaction.deposit.pending') }}"
                           class="btn btn-label-secondary text-nowrap">

                            Reset

                        </a>

                    @endif

                </div>

            </form>

        </div>

    </div>

    {{-- TABLE --}}
    <div class="card border-0 shadow-sm overflow-hidden">

        <div class="card-header border-0 bg-transparent d-flex justify-content-between align-items-center flex-wrap gap-2">

            <div>

                <h6 class="mb-1 fw-semibold text-white">
                    Pending Transactions
                </h6>

                <small class="text-body-secondary">
                    Semua transaksi deposit pending
                </small>

            </div>

            <span class="badge rounded-pill bg-label-warning px-3 py-2">
                {{ $transactions->count() }} Pending
            </span>

        </div>

        <div class="card-body p-0">

            <div class="table-responsive">

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

                    <thead class="table-dark">

                        <tr>

                            <th>ID</th>
                            <th>TRX ID</th>
                            <th>User</th>
                            <th>Bank</th>
                            <th>Account</th>
                            <th>Amount</th>
                            <th>Unique</th>
                            <th>Status</th>
                            <th>Date</th>
                            <th class="text-center">
                                Action
                            </th>

                        </tr>

                    </thead>

                    <tbody>

                        @forelse($transactions as $trx)

                            <tr>

                                <td class="fw-semibold text-body-secondary">
                                    #{{ $trx->id }}
                                </td>

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

                                <td>

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

                                    <small class="text-body-secondary text-small">
                                        ID: {{ $trx->user_id ?? '-' }}
                                    </small>

                                </td>

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

                                <td>

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

                                    <small class="text-body-secondary text-small">
                                        {{ $trx->account_number ?? '-' }}
                                    </small>

                                </td>

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

                                <td>
                                    Rp {{ number_format((float) ($trx->unique_code ?? 0), 0, ',', '.') }}
                                </td>

                                <td>

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

                                </td>

                                <td>

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

                                </td>

                                <td>

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

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

                                            @csrf

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

                                                <i class="ti tabler-check me-1"></i>
                                                Approve

                                            </button>

                                        </form>

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

                                            @csrf

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

                                                <i class="ti tabler-x me-1"></i>
                                                Reject

                                            </button>

                                        </form>

                                    </div>

                                </td>

                            </tr>

                        @empty

                            <tr>

                                <td colspan="10"
                                    class="text-center py-5 text-body-secondary">

                                    Tidak ada data deposit pending

                                </td>

                            </tr>

                        @endforelse

                    </tbody>

                </table>

            </div>

        </div>

        {{-- PAGINATION --}}
        @include('backoffice.pages.transaction.partials.pagination')

    </div>

</div>
@endsection