@extends('layouts.master_layout')
@section('include_css')
    <link href="{{ asset('assets-theme/css/payment.css') }}" rel="stylesheet">
    <link href="{{ asset('assets-theme/css/sb-admin-2.min.css') }}" rel="stylesheet">
@endsection
@section('content')
    <style>
        .payment-section {
            background: rgba(0, 0, 0, 0.5);
            color: #ffffff;
            padding: 30px;
            border-radius: 12px;
            max-width: 800px;
            margin: auto;
            display: flex;
            align-items: center;
            justify-content: space-between;
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
            backdrop-filter: blur(6px);
        }

        .payment-section .info {
            flex: 1;
            margin-left: 20px;
        }

        .payment-section h3 {
            color: #ffcc00;
            font-weight: bold;
            margin-bottom: 15px;
        }

        .payment-section .info p {
            margin: 6px 0;
            font-size: 15px;
        }

        .payment-section .info p span {
            font-weight: bold;
            color: #5ce65c;
        }

        .payment-section .note {
            font-style: italic;
            color: #ccc;
            font-size: 13px;
        }

        .payment-section .admin {
            margin-top: 10px;
            color: #00aaff;
        }
    </style>
    <main style="height: 500px;align-items: center;display: flex;">
        <div class="container">
            <div class="container-fluid">
                <!-- Content Row -->
                <div class="content-container">
                    <div class="payment-section">
                        {{-- <img src="/path/to/your/qr-image.png" alt="QR Code" width="180" height="180"
                            style="border-radius: 8px;"> --}}
                        <img src="{{ $qr }}" alt="QR Code" width="180" height="180"
                            style="border-radius: 8px;" />
                        <div class="info">
                            <h3>Chuyển Khoản Ngân Hàng - Duyệt tự động</h3>
                            <p><strong>Ngân Hàng:</strong> <span style="color:#00ff99;">MB-BANK</span></p>
                            <p><strong>Số tiền:</strong> <span style="color:#00ff99;">{{ number_format($transaction->amount, 0, ',', '.') . ' VNĐ' }}</span></p>
                            <p><strong>Chủ Tài Khoản:</strong> PHAM XUAN QUY</p>
                            <p><strong>Số Tài Khoản:</strong> <span style="color:#5ce65c;">9999928071998</span></p>
                            <p><strong>Nội dung chuyển khoản:</strong> <span style="color:#5ce65c;">{{ $transaction->description }}</span>
                            </p>
                            <p class="note">Nếu không điền, hệ thống sẽ không biết bạn đang nạp tiền cho ai</p>
                            {{-- <p class="admin">Gặp lỗi báo ADMIN <a href="https://m.me/toollienminh.com"
                                    target="_blank">https://m.me/toollienminh.com</a></p> --}}
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </main>

    <script>
        $(document).ready(function() {
            let bookingID = "{{ $transaction->id }}"; // Lấy ID từ Laravel Blade
            let checkUrlbk = "{{ route('result.status.transaction', $transaction->id) }}";

            function checkTransactionStatus() {
                $.ajax({
                    url: checkUrlbk,
                    type: "GET",
                    headers: {
                        "x-client-id": "ab4d6014-0203-4673-9c7f-e6b8c087da7c",
                        "x-api-key": "8699e3d6-d6d1-40a3-8d1a-16f9bcca065f",
                    },
                    success: function(response) {
                        // console.log(response); // Kiểm tra log trong console

                        if (response == "1") {
                            window.location.href = "{{ route('checkout.success.webm', $transaction->id) }}";
                        }
                    },
                    error: function(xhr, status, error) {
                        console.error("Lỗi khi gọi API:", error);
                    }
                });
            }

            // Gọi lần đầu tiên và sau đó cứ 5 giây gọi lại
            checkTransactionStatus();
            setInterval(checkTransactionStatus, 5000);
        });
    </script>
@endsection