@extends('layouts.master_layout')

@section('include_css')
<link href="{{ asset('assets-theme/css/payment.css') }}" rel="stylesheet">
<link href="{{ asset('assets-theme/css/payment-new.css') }}" rel="stylesheet">
<link href="{{ asset('assets-theme/css/sb-admin-2.min.css') }}" rel="stylesheet">
<link rel="preload" as="image" href="{{ $qr }}">
<style>
    .discount-highlight {
        display: inline-block;
        background: linear-gradient(90deg, #ffb347, #ee7f4b);
        color: #fff;
        font-weight: bold;
        font-size: 12px;
        border-radius: 16px;
        padding: 2px 8px;
        margin: 0 8px;
        box-shadow: 0 2px 8px rgba(238, 127, 75, 0.12);
        letter-spacing: 1px;
        vertical-align: middle;
    }
    /* TRONG THẺ <style> CỦA BẠN */
/* ... (các style khác giữ nguyên) ... */

/* Thêm định nghĩa độ rộng và căn lề cho khối chứa nội dung */
.qr-and-bank {
    display: flex; /* Dùng flex để dễ dàng điều chỉnh căn giữa theo chiều ngang */
    flex-direction: column;
    align-items: center; /* Căn giữa QR và khối bank-details theo trục ngang */
    width: 100%; /* Giữ nguyên chiều rộng 100% của cột */
}

/* Định nghĩa khối chứa QR và khối chứa Bank Details */
.qr-code img, .bank-details {
    width: 250px; /* Đặt chiều rộng cố định để đồng nhất với ảnh QR */
    max-width: 100%;
}

.bank-details p {
    color: #ccc;
    font-size: 14px;
    margin: 8px 0;
    display: flex;
    justify-content: space-between; /* Giúp 2 phần của dòng thẳng hàng */
    padding: 0; /* Bỏ padding nếu có */
    text-align: left; /* Đảm bảo text align left, nhưng justify-content: space-between sẽ chi phối */
}
/* ... (các style khác giữ nguyên) ... */
</style>
@endsection
@section('content')

<main>
    <div class="invoice-wrapper flex">
        {{-- TIÊU ĐỀ CHUNG --}}
        <div class="section-title-head">QUÉT MÃ THANH TOÁN XONG GÓI SẼ TỰ ĐỘNG KÍCH HOẠT SAU VÀI GIÂY</div>
        
        <div class="display-flex">
            {{-- Cột 1: THÔNG TIN CHUYỂN KHOẢN --}}
            {{-- Cột 1: THÔNG TIN CHUYỂN KHOẢN (Đã sửa lỗi căn chỉnh) --}}
            <div class="box">
                <div class="section-title">Thông tin chuyển khoản</div>
                
                {{-- KHỐI CHÍNH: qr-and-bank --}}
                <div class="qr-and-bank">
                    
                    {{-- 1. Mã QR (sẽ được căn giữa bởi .qr-and-bank) --}}
                    <div class="qr-code">
                        {{-- Chiều rộng 250px đã được định nghĩa trong CSS tùy chỉnh --}}
                        <img loading="eager" src="{{ $qr }}" alt="QR Code">
                    </div>

                    {{-- 2. Thông tin ngân hàng (sẽ được căn giữa và có chiều rộng 250px) --}}
                    <div class="bank-block"> 
                        <div class="bank-details">
                            <p>Ngân hàng: <span>MB-BANK</span></p>
                            <p>Chủ tài khoản: <span>PHAM XUAN QUY</span></p>
                            <p>Số tài khoản: <span>9999928071998</span></p>
                            <p>Nội dung chuyển khoản: <span class="highlight" id="copy-text">{{ $transaction->description ?? 'id2606' }}</span></p>
                        </div>
                    </div>
                </div>
            </div>

            {{-- Cột 2: THÔNG TIN GÓI ĐĂNG KÝ --}}
            <div style="display: flex; flex-direction: column; justify-content: flex-start; flex: 1;">
                <div class="box" style="padding: 0; width: 100%;">
                    <div class="section-title">Thông tin gói đăng ký</div>
                    
                    {{-- Tên Gói --}}
                    <div class="info-row">
                        <div class="label">Tên gói:</div>
                        <div class="value">{{ $subcription_plan->name ?? '1 tháng' }}</div>
                    </div>

                    {{-- Giá Gốc --}}
                    <div class="info-row">
                        <div class="label">Giá gốc:</div>
                        {{-- Áp dụng style để gạch ngang như trong ảnh --}}
                        <div class="value" style="text-decoration: line-through; color: #888;">{{ number_format($data_price ?? 99000, 0, ',', '.') }} VNĐ</div>
                    </div>
                    
                    {{-- Khuyến mãi --}}
                    <div class="info-row">
                        <div class="label">Khuyến mãi:</div>
                        {{-- Dùng class/style để làm nổi bật màu cam --}}
                        <div class="value"><span style="color:#EE7F4B;">THÁNG 12</span> -<span style="color:#EE7F4B;">30%</span></div>
                    </div>

                    <div class="info-row total">
                        <div class="label">Tổng tiền:</div>
                        <div class="value">{{ number_format($transaction->amount, 0, ',', '.') }} VNĐ</div>
                    </div>
                </div>
                <div style="margin-top:10px;text-align:center;">
                    <img src="/assets/images/SCAN-QR.gif" alt="Hướng dẫn quét QR" style="max-width:220px;border-radius:8px;">
                </div>
            </div>
        </div>

        <div class="note">
            Nếu sau 5 phút bạn chưa nhận được thông báo đăng ký thành công, vui lòng liên hệ qua
            <a href="https://zalo.me/0973330800" target="_blank" style="text-decoration:none;display:inline-flex;align-items:center;gap:4px;vertical-align:bottom;">
                <img src="/assets/images/zalo.png" style="height:18px;display:inline-block;vertical-align:middle;margin-bottom:-2px;"> <span style="color:#0984e3;font-weight:600;display:inline-block;vertical-align:middle;font-size:16px">0973330800</span>
            </a>
            để được hỗ trợ.
        </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