@extends('layouts.app')
@section('title', 'Nạp Tiền')
@section('content')
<div class="w-full space-y-6">
<div class="mb-6">
        <div class="rounded-xl border-2 border-dashed border-yellow-200 bg-yellow-50 p-4">
            <div class="flex items-center gap-2 mb-3">
                <i class="ri-information-line text-yellow-500 text-lg"></i>
                <p class="font-semibold text-yellow-500">Lưu Ý Khi Nạp Tiền</p>
            </div>
            <ul class="list-disc ml-5 space-y-2 text-sm text-muted">
                <li>Vui lòng nạp tối thiểu <span class="font-bold text-red-600">10,000đ</span>, không hoàn tiền nếu nạp dưới mức này.</li>
                <li>Ghi đúng <span class="font-bold text-heybank">"Nội Dung Nạp"</span> để được cộng tự động sau 15-30s (hãy tải lại trang nếu tiền chưa vào).</li>
                <li>Nếu quá <span class="font-bold text-heybank">5 Phút</span> chưa vào tiền, vui lòng liên hệ admin và gửi kèm bill.</li>
                <li>Hãy kiểm tra xem bạn đã chuyển khoản và kèm theo nội dung nạp chưa, nếu chưa buộc bạn phải liên hệ cho admin và gửi bill kèm nội dung nạp, chúng tôi sẽ trừ 20% phí phạt</li>
            </ul>
        </div>
    </div>
    <div class="grid grid-cols-1 gap-6">
        <div class="space-y-6">
            <div class="rounded-2xl border border-neutral-200 bg-white shadow-soft p-6">
                <div class="flex items-center gap-3 mb-6">
                    <div
                        class="w-10 h-10 rounded-xl bg-gradient-to-br from-slate-700 to-slate-800 flex items-center justify-center">
                        <i class="ri-bank-line text-white text-lg"></i>
                    </div>
                    <div class="flex-1">
                        <div class="text-lg font-semibold text-neutral-800">Nạp Tiền Vào Tài Khoản</div>
                        <div class="text-xs text-neutral-500">Chuyển khoản theo thông tin bên dưới để nạp tiền</div>
                    </div>
                </div>
                <div class="space-y-4">
                    <div class="flex flex-col lg:flex-row gap-6">
                        <div class="flex-1 bg-neutral-50 rounded-xl p-6">
                            <div class="heybank-payment-info">
                                <div class="flex items-center justify-between py-2 border-b border-neutral-200">
                                    <div class="flex-1 text-center md:text-left" style="margin-top:-22px;">
                                        <img src="{{ getPaymentMethods()['logo'] ?? 'Chưa Đăng Nhập' }}" alt="Bank Logo"
                                            class="h-[60px] md:-ml-5 mx-auto md:mx-0">
                                            <div class="text-xs mb-1 text-heybank block lg:hidden">
                                            {{ getPaymentMethods()['nganhang'] ?? 'Chưa Đăng Nhập' }}</div>
                                    </div>
                                </div>
                                <div class="flex items-center justify-between py-4 border-b border-neutral-200">
                                    <div class="flex-1" data-stk="{{ getPaymentMethods()['sotaikhoan'] ?? 'Chưa Đăng Nhập' }}">
                                        <div class="text-xs text-neutral-500 mb-1 italic">Số Tài Khoản</div>
                                        <div class="text-base font-semibold text-neutral-800">
                                            {{ getPaymentMethods()['sotaikhoan'] ?? 'Chưa Đăng Nhập' }}</div>
                                    </div>
                                    <button type="button"
                                        class="ml-4 p-2 rounded-lg bg-white border border-neutral-200 hover:bg-neutral-100 transition-colors"
                                        data-heybank-copy="{{ getPaymentMethods()['sotaikhoan'] ?? 'Chưa Đăng Nhập' }}">
                                        <i class="ri-file-copy-line text-neutral-600"></i>
                                    </button>
                                </div>

                                <div class="flex items-center justify-between py-4 border-b border-neutral-200">
                                    <div class="flex-1" data-ctk="{{ getPaymentMethods()['chutaikhoan'] ?? 'Chưa Đăng Nhập' }}">
                                        <div class="text-xs text-neutral-500 mb-1 italic">Chủ Tài Khoản</div>
                                        <div class="text-base font-semibold text-neutral-800">
                                            {{ getPaymentMethods()['chutaikhoan'] ?? 'Chưa Đăng Nhập' }}</div>
                                    </div>
                                    <button type="button"
                                        class="ml-4 p-2 rounded-lg bg-white border border-neutral-200 hover:bg-neutral-100 transition-colors"
                                        data-heybank-copy="{{ getPaymentMethods()['chutaikhoan'] }}">
                                        <i class="ri-file-copy-line text-neutral-600"></i>
                                    </button>
                                </div>
                                <div class="flex items-center justify-between mt-4">
                                    <div class="flex-1" data-nd="{{ getUserById()['uid'] ?? 'Chưa Đăng Nhập' }}">
                                        <div class="text-xs text-neutral-500 mb-1 italic">Nội Dung Chuyển Khoản</div>
                                        <div class="text-base font-semibold text-neutral-800 break-words">
                                            {{ getUserById()['uid'] ?? 'Chưa Đăng Nhập' }}</div>
                                    </div>
                                    <button type="button"
                                        class="ml-4 p-2 rounded-lg bg-white border border-neutral-200 hover:bg-neutral-100 transition-colors"
                                        data-heybank-copy="{{ getUserById()['uid'] ?? 'Chưa Đăng Nhập' }}">
                                        <i class="ri-file-copy-line text-neutral-600"></i>
                                    </button>
                                </div>
                            </div>
                        </div>
                        <div class="hidden lg:flex lg:flex-shrink-0">
                            @include('checkout.qr-code')
                        </div>
                    </div>
                    <div class="space-y-1 hidden">
                        <label class="block text-sm font-semibold text-neutral-800 mb-2">💰 Số Tiền Nạp (>=<b>10,000₫</b>)</label>
                        <div class="flex items-center gap-3">
                            <input type="text" id="deposit-amount" placeholder="Nhập số tiền cần nạp..." data-max-text="11"
                                class="flex-1 rounded-lg border border-neutral-300 bg-white px-4 py-2.5 text-sm text-neutral-800 focus:border-heybank focus:ring-0"
                                data-format-number=",">
                            <button type="button" id="confirm-deposit" disabled
                                class="whitespace-nowrap px-6 py-2.5 rounded-lg bg-neutral-300 text-neutral-500 text-sm font-medium cursor-not-allowed">
                                Xác Nhận
                            </button>
                        </div>
                    </div>
                    <div class="flex lg:hidden justify-center">
                        @include('checkout.qr-code')
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
</div>
@endsection