@extends('layouts.app')
@section('title', 'Lịch Sử Nạp Tiền')
@section('content')
<div class="w-full space-y-6">
    <div class="rounded-2xlx border border-neutral-200 bg-white shadow-soft">
        <div class="px-6 py-4 flex flex-col gap-4 sm:flex-row sm:items-center sm:justify-between border-b border-neutral-100">
            <div class="flex items-center gap-3">
                <div class="w-10 h-10 rounded-lg bg-gradient-to-br from-slate-700 to-slate-900 flex items-center justify-center">
                    <i class="ri-wallet-line text-white text-lg"></i>
                </div>
                <div>
                    <div class="text-lg font-semibold text-neutral-800">Lịch Sử Nạp Tiền</div>
                    <div class="text-xs text-neutral-500">Xem và quản lý tất cả giao dịch nạp tiền trong hệ thống</div>
                </div>
            </div>
            <div class="flex items-center gap-2">
                <div class="relative w-full sm:w-64">
                    <i class="ri-search-line absolute left-3 top-1/2 -translate-y-1/2 text-neutral-400 text-base"></i>
                    <input id="admin-deposits-search" type="text" placeholder="Có không giữ mất thì tìm..." class="w-full rounded-lg border border-neutral-200 bg-neutral-50 pl-10 pr-3 py-2 text-sm text-neutral-700 focus:border-heybank focus:bg-white focus:outline-none focus:ring-0" />
                </div>
                <button id="admin-deposits-refresh" class="whitespace-nowrap px-4 h-9 inline-flex items-center justify-center text-xs spin rounded-lg border border-neutral-200 bg-white text-neutral-700 hover:bg-neutral-50 transition-colors">
                    <i class="ri-refresh-line text-xs mr-1"></i>
                    Làm Mới
                </button>
            </div>
        </div>
        <div class="p-4 sm:p-6">
            <div class="overflow-y-auto rounded-xl border border-neutral-200">
                <table id="admin-deposits-table" class="min-w-full">
                    <thead class="bg-gradient-to-r from-neutral-50 to-neutral-100">
                        <tr class="whitespace-nowrap text-left text-xs font-semibold uppercase tracking-wider text-neutral-600">
                            <th class="px-4 py-3">STT</th>
                            <th class="px-4 py-3">Tài Khoản</th>
                            <th class="px-4 py-3">Mã Giao Dịch</th>
                            <th class="px-4 py-3 text-right">Số Tiền</th>
                            <th class="px-4 py-3">Nội Dung</th>
                            <th class="px-4 py-3">Trạng Thái</th>
                            <th class="px-4 py-3">Thời Gian</th>
                        </tr>
                    </thead>
                    <tbody id="admin-deposits-table-body" class="bg-white divide-y divide-neutral-200"></tbody>
                </table>
            </div>
            <div id="admin-deposits-pagination" class="flex flex-col items-center gap-3 mt-6 sm:flex-row sm:items-center sm:justify-between hidden">
                <div id="admin-deposits-pagination-text" class="text-sm text-neutral-500"></div>
                <div id="admin-deposits-pagination-buttons" class="flex items-center gap-2"></div>
            </div>
        </div>
    </div>
</div>
@endsection