@extends("frontend.layouts.master")

@section("content")
    <div class="max-w-4xl mx-auto backdrop-blur-md rounded-2xl shadow-xl p-8 mt-6">
        <div class="grid grid-cols-1 md:grid-cols-2 gap-8">
            <div class="space-y-6">
                <h5 class="text-lg font-semibold text-gray-800">Thông tin thanh toán</h5>
                <div class="bg-gray-100 p-4 rounded-md space-y-2">
                    <p>- {{__('bankName')}}: <strong>{{ $payment->name }}</strong></p>
                    <p>- {{__('accountName')}}: <strong>{{ $payment->bankName }}</strong></p>
                    <p>- {{__('accountNumber')}}: <strong>{{ $payment->accountNo }}</strong></p>
                </div>

                <h5 class="text-lg font-semibold text-gray-800 mt-6">Chi tiết thanh toán</h5>
                <div class="bg-gray-100 p-4 rounded-md space-y-2">
                    <p>- Số tiền thanh toán: <strong>{{ number_format($amount,0,',','.') }} đ</strong></p>
                    <p>- Nội dung thanh toán: <strong>{{ $memo }}</strong></p>
                </div>

                <div class="flex p-4 mb-4 text-sm text-red-800 rounded-lg bg-red-50 dark:bg-gray-800 dark:text-red-400"
                     role="alert">
                    <svg class="shrink-0 inline w-4 h-4 me-3 mt-[2px]" aria-hidden="true"
                         xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 20 20">
                        <path
                            d="M10 .5a9.5 9.5 0 1 0 9.5 9.5A9.51 9.51 0 0 0 10 .5ZM9.5 4a1.5 1.5 0 1 1 0 3 1.5 1.5 0 0 1 0-3ZM12 15H8a1 1 0 0 1 0-2h1v-3H8a1 1 0 0 1 0-2h2a1 1 0 0 1 1 1v4h1a1 1 0 0 1 0 2Z"/>
                    </svg>
                    <span class="sr-only">Danger</span>
                    <div>
                        <span class="font-medium">Lưu ý:</span>
                        <ul class="mt-1.5 list-disc list-inside">
                            <li>Quý khách vui lòng ghi đúng nội dung thanh toán khi thực hiện chuyển khoản.</li>
                            <li>Hệ thống sẽ tự động cập nhật số dư tài khoản trong vòng 3 đến 5 phút.</li>
                            <li>Xin cảm ơn quý khách!</li>
                        </ul>
                    </div>
                </div>
            </div>

            <div class="flex flex-col items-center justify-center border-l md:border-l-2 border-primary pl-6">
                <h5 class="text-center text-lg font-semibold mb-6">Hoặc quét mã QR bên dưới để tự động điền nội dung
                    chuyển khoản</h5>
                <div class="text-center">
                    <img class="mx-auto max-w-xs" src="{{ $qr }}" alt="QR Thanh Toán">
                </div>
            </div>
        </div>

        <div class="text-end mt-8">
            <hr class="my-4 border-t-2 border-primary">
            <button type="submit"
                    class="inline-flex items-center gap-2 px-6 py-2 bg-primary text-white font-semibold rounded-md shadow hover:bg-primary-dark transition">
                <i class="fas fa-save"></i> Đã thanh toán
            </button>
        </div>
    </div>
@endsection