@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;
    }
</style>
@endsection
@section('content')

<main>
    <div class="invoice-wrapper flex">
        <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">
            <div class="box">
                <div class="section-title">Thông tin chuyển khoản</div>
                <div class="qr-and-bank">
                    <div class="qr-code">
                        <img loading="eager" src="{{ $qr }}" alt="QR Code">
                    </div>
                    <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 }}</span></p>
                        </div>
                    </div>
                </div>
            </div>

            <div style="display: flex; flex-direction: column; justify-content: space-between; align-items: center; margin-left: 20px;">
                <div class="box" style="padding-left: 10px; padding-right: 10px;">
                    <div class="section-title">Thông tin gói đăng ký</div>
                    <div class="info-row">
                        <div class="label">Tên gói:</div>
                        <div class="value">{{ $subcription_plan->name }}</div>
                    </div>
                    <div class="info-row">
                        <div class="label">Giá gốc:</div>
                        <div>
                            <div>
                                <span class="discount-highlight">-{{ $subcription_plan->percentage_discount }}%</span>
                                <span style="text-decoration: line-through;">{{ number_format($subcription_plan->price_sale, 0, ',', '.') }}</span>
                                <span class="value">{{ number_format($subcription_plan->price, 0, ',', '.') }} VNĐ</span>
                            </div>
                            @if($subcription_plan->ref == "yearly")
                            <div style="text-align: right">
                                <small>(~ 49.000đ/tháng)</small>
                            </div>
                            @endif
                        </div>
                    </div>


                    @if(isset($voucher) && $voucher)
                    <div class="info-row">
                        <div class="label">Mã ưu đãi:</div>
                        <div class="value">{{ $voucher->code }}
                            ( {{ number_format($voucher->discount_value, 0, ',', '.') }}
                            @if($voucher->discount_type == 'percentage')% @else VND @endif)
                        </div>
                    </div>
                    @if(!empty($discount_price))
                    <div class="info-row">
                        <div class="label">Giảm giá:</div>
                        <div class="value">
                            - {{ number_format($discount_price, 0, ',', '.') }} VNĐ
                        </div>
                    </div>
                    @endif
                    @endif

                    <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