@extends('layouts.app')

@section('title', 'Thanh toán - ' . $plan['name'])

@section('content')
    <style>
        @keyframes successCardIn {
            from { opacity: 0; transform: scale(0.9) translateY(20px); }
            to { opacity: 1; transform: scale(1) translateY(0); }
        }
        @keyframes checkPop {
            0% { transform: scale(0); }
            50% { transform: scale(1.15); }
            100% { transform: scale(1); }
        }

        .pay-card {
            background: white;
            border-radius: 20px;
            box-shadow: 0 8px 30px rgba(0,0,0,0.06);
            overflow: hidden;
        }

        .pay-header {
            background: linear-gradient(135deg, #f5c518 0%, #d4a00a 100%);
            padding: 24px 28px;
            text-align: center;
            color: #1a1a2e;
        }

        .pay-header h2 {
            font-size: 18px;
            font-weight: 700;
            margin-bottom: 4px;
        }

        .pay-header p {
            font-size: 12px;
            opacity: 0.7;
        }

        .pay-body {
            padding: 28px;
        }

        .qr-section {
            text-align: center;
            margin-bottom: 24px;
        }

        .qr-section img {
            width: 240px;
            height: 240px;
            border-radius: 16px;
            border: 2px solid #f3f4f6;
            box-shadow: 0 4px 16px rgba(0,0,0,0.06);
        }

        .info-table {
            width: 100%;
            border-collapse: collapse;
        }

        .info-table tr { border-bottom: 1px solid #f3f4f6; }
        .info-table tr:last-child { border-bottom: none; }

        .info-table td {
            padding: 12px 0;
            font-size: 13px;
        }

        .info-table td:first-child {
            color: #9ca3af;
            font-weight: 500;
            width: 120px;
        }

        .info-table td:last-child {
            color: #1a1a2e;
            font-weight: 600;
            text-align: right;
        }

        .copy-btn {
            display: inline-flex;
            align-items: center;
            gap: 4px;
            background: #f3f4f6;
            border: none;
            padding: 4px 10px;
            border-radius: 8px;
            font-size: 11px;
            font-weight: 600;
            color: #6b7280;
            cursor: pointer;
            transition: all 0.2s;
            margin-left: 8px;
        }
        .copy-btn:hover { background: #e5e7eb; color: #1a1a2e; }
        .copy-btn.copied { background: #dcfce7; color: #16a34a; }

        .amount-highlight {
            color: #dc2626;
            font-size: 18px;
            font-weight: 800;
        }

        .transfer-content {
            background: #fffbeb;
            border: 1.5px dashed #f5c518;
            border-radius: 10px;
            padding: 10px 14px;
            font-family: 'Courier New', monospace;
            font-weight: 700;
            font-size: 14px;
            color: #92400e;
            letter-spacing: 1px;
        }

        .status-section {
            margin-top: 24px;
            text-align: center;
        }

        .status-checking {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 10px;
            padding: 14px;
            background: #eff6ff;
            border-radius: 12px;
            font-size: 13px;
            font-weight: 600;
            color: #1e40af;
        }

        .status-success {
            display: none;
            padding: 14px;
            background: #f0fdf4;
            border: 1px solid #bbf7d0;
            border-radius: 12px;
            font-size: 13px;
            font-weight: 600;
            color: #166534;
        }

        .pay-spinner {
            width: 16px; height: 16px;
            border: 2px solid #bfdbfe;
            border-top-color: #3b82f6;
            border-radius: 50%;
            animation: spin 0.8s linear infinite;
        }

        @keyframes spin { to { transform: rotate(360deg); } }

        .warn-box {
            margin-top: 16px;
            padding: 12px;
            background: #fffbeb;
            border-radius: 10px;
            font-size: 11px;
            color: #92400e;
            line-height: 1.6;
        }

        .back-link {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 6px;
            margin-top: 20px;
            color: #9ca3af;
            text-decoration: none;
            font-size: 13px;
            font-weight: 500;
            transition: color 0.2s;
        }
        .back-link:hover { color: #1a1a2e; }

        /* Success Overlay */
        .success-overlay {
            display: none;
            position: fixed;
            inset: 0;
            z-index: 9999;
            background: rgba(0,0,0,0.6);
            backdrop-filter: blur(8px);
            align-items: center;
            justify-content: center;
            padding: 16px;
        }
        .success-overlay.active { display: flex; }

        .success-card {
            background: white;
            border-radius: 28px;
            max-width: 420px;
            width: 100%;
            overflow: hidden;
            box-shadow: 0 25px 60px rgba(0,0,0,0.2);
            animation: successIn 0.5s cubic-bezier(0.16, 1, 0.3, 1);
            position: relative;
        }

        @keyframes successIn {
            from { opacity: 0; transform: scale(0.85) translateY(30px); }
            to { opacity: 1; transform: scale(1) translateY(0); }
        }

        .success-top {
            background: linear-gradient(135deg, #f5c518 0%, #ff9500 100%);
            padding: 32px 24px 20px;
            text-align: center;
            position: relative;
            overflow: hidden;
        }

        .success-top::before {
            content: '';
            position: absolute;
            top: -50%;
            left: -50%;
            width: 200%;
            height: 200%;
            background: radial-gradient(circle, rgba(255,255,255,0.2) 0%, transparent 60%);
            animation: shimmer 3s ease-in-out infinite;
        }

        @keyframes shimmer {
            0%, 100% { transform: translateX(-30%) translateY(-30%); }
            50% { transform: translateX(30%) translateY(30%); }
        }

        .success-gif {
            width: 120px;
            height: 120px;
            margin: 0 auto 12px;
            position: relative;
            z-index: 1;
        }

        .success-body {
            padding: 28px 24px 32px;
            text-align: center;
        }

        .success-badge {
            display: inline-flex;
            align-items: center;
            gap: 6px;
            padding: 6px 16px;
            border-radius: 50px;
            font-size: 12px;
            font-weight: 700;
            background: #dcfce7;
            color: #166534;
            margin-bottom: 16px;
        }

        .success-plan {
            display: inline-block;
            padding: 8px 20px;
            background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%);
            border-radius: 12px;
            font-size: 14px;
            font-weight: 800;
            color: #92400e;
            margin-bottom: 20px;
            border: 1.5px solid #fcd34d;
        }

        .success-info {
            display: flex;
            justify-content: center;
            gap: 24px;
            margin-bottom: 24px;
        }

        .success-info-item {
            text-align: center;
        }

        .success-info-label {
            font-size: 11px;
            color: #9ca3af;
            margin-bottom: 2px;
        }

        .success-info-value {
            font-size: 14px;
            font-weight: 700;
            color: #1a1a2e;
        }

        .success-btn {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: 8px;
            width: 100%;
            padding: 14px 24px;
            background: linear-gradient(135deg, #f5c518 0%, #d4a00a 100%);
            color: #1a1a2e;
            font-size: 14px;
            font-weight: 700;
            border-radius: 14px;
            border: none;
            cursor: pointer;
            text-decoration: none;
            transition: all 0.3s;
            box-shadow: 0 4px 16px rgba(245, 197, 24, 0.3);
        }
        .success-btn:hover { transform: translateY(-2px); box-shadow: 0 6px 24px rgba(245, 197, 24, 0.4); }

        .success-countdown {
            font-size: 11px;
            color: #9ca3af;
            margin-top: 12px;
        }

        /* Confetti */
        .confetti-container {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            pointer-events: none;
            overflow: hidden;
        }
        .confetti {
            position: absolute;
            width: 8px;
            height: 8px;
            border-radius: 2px;
            top: -10px;
            animation: confettiFall 3s ease-in-out forwards;
        }
        @keyframes confettiFall {
            0% { transform: translateY(0) rotate(0deg); opacity: 1; }
            100% { transform: translateY(600px) rotate(720deg); opacity: 0; }
        }
    </style>

    <div class="max-w-md mx-auto py-8 px-4">
        <div class="pay-card">
            <div class="pay-header">
                <div style="display:flex;align-items:center;justify-content:center;gap:8px;margin-bottom:6px;">
                    <img src="/logo-locket.png" alt="Locket Gold" style="width:24px;height:24px;object-fit:contain;">
                    <span style="font-size:13px;font-weight:700;opacity:0.8;">Locket Gold</span>
                </div>
                <h2>{{ $plan['name'] }}</h2>
                <p>{{ $plan['duration'] }}</p>
            </div>

            <div class="pay-body">
                {{-- QR Code --}}
                <div class="qr-section">
                    <p class="text-xs text-gray-400 mb-3 font-medium">Quét mã QR để thanh toán</p>
                    <img src="{{ $qrUrl }}" alt="QR Thanh toán">
                </div>

                {{-- Payment Info --}}
                <table class="info-table">
                    <tr>
                        <td>Ngân hàng</td>
                        <td>{{ $bankId }}
                            <button class="copy-btn" onclick="copyText('{{ $bankId }}', this)">📋</button>
                        </td>
                    </tr>
                    <tr>
                        <td>Số tài khoản</td>
                        <td>{{ $accountNo }}
                            <button class="copy-btn" onclick="copyText('{{ $accountNo }}', this)">📋</button>
                        </td>
                    </tr>
                    <tr>
                        <td>Chủ tài khoản</td>
                        <td>{{ $accountName }}</td>
                    </tr>
                    <tr>
                        <td>Số tiền</td>
                        <td>
                            <span class="amount-highlight">{{ number_format($amount) }}đ</span>
                        </td>
                    </tr>
                    <tr>
                        <td>Nội dung CK</td>
                        <td>
                            <div class="transfer-content">
                                {{ $transferContent }}
                                <button class="copy-btn" onclick="copyText('{{ $transferContent }}', this)">📋</button>
                            </div>
                        </td>
                    </tr>
                </table>

                {{-- Status --}}
                <div class="status-section">
                    <div class="status-checking" id="statusChecking">
                        <div class="pay-spinner"></div>
                        Đang chờ thanh toán...
                    </div>
                </div>

                <div class="warn-box">
                    ⚠️ <strong>Lưu ý:</strong> Vui lòng chuyển <strong>đúng số tiền</strong> và <strong>đúng nội dung chuyển khoản</strong> để hệ thống tự động xác nhận. Sau khi chuyển khoản thành công, hệ thống sẽ tự động nâng cấp tài khoản của bạn.
                </div>

                <a href="{{ url('/pricing') }}" class="back-link">
                    <svg width="14" height="14" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M15 19l-7-7 7-7"/></svg>
                    Quay lại bảng giá
                </a>
            </div>
        </div>
    </div>

    {{-- Success Overlay --}}
    <div class="success-overlay" id="successOverlay">
        <div style="background:white;border-radius:24px;max-width:380px;width:100%;box-shadow:0 20px 50px rgba(0,0,0,0.15);animation:successCardIn 0.4s cubic-bezier(0.16,1,0.3,1);">
            {{-- Header --}}
            <div style="padding:14px 20px;display:flex;align-items:center;gap:10px;border-bottom:1px solid #f3f4f6;">
                <img src="/logo-locket.png" alt="Locket Gold" style="width:28px;height:28px;object-fit:contain;">
                <span style="font-size:14px;font-weight:700;color:#1a1a2e;">Locket Gold</span>
            </div>
            {{-- Body --}}
            <div style="padding:32px 28px 28px;text-align:center;">
                <img src="/success.gif" alt="Success" style="width:100px;height:100px;margin:0 auto 16px;display:block;">
                <h2 style="font-size:20px;font-weight:800;color:#1a1a2e;margin:0 0 10px;">Thanh toán thành công</h2>
                <p style="font-size:13px;color:#6b7280;line-height:1.6;margin:0 0 24px;">
                    Bạn đã thanh toán thành công gói<br>
                    <strong style="color:#1a1a2e;">{{ $plan['name'] }}</strong>
                </p>
                <div style="display:flex;justify-content:center;gap:24px;padding:20px 0;border-top:1px solid #f3f4f6;">
                    <div style="text-align:center;">
                        <div style="font-size:11px;color:#9ca3af;margin-bottom:4px;">Tổng thanh toán</div>
                        <div style="font-size:16px;font-weight:800;color:#1a1a2e;">{{ number_format($amount) }}đ</div>
                    </div>
                    <div style="width:1px;background:#f3f4f6;"></div>
                    <div style="text-align:center;">
                        <div style="font-size:11px;color:#9ca3af;margin-bottom:4px;">Thời hạn</div>
                        <div style="font-size:16px;font-weight:800;color:#1a1a2e;">{{ $plan['duration'] }}</div>
                    </div>
                    <div style="width:1px;background:#f3f4f6;"></div>
                    <div style="text-align:center;">
                        <div style="font-size:11px;color:#9ca3af;margin-bottom:4px;">Mã đơn</div>
                        <div style="font-size:14px;font-weight:700;color:#1a1a2e;">#{{ $orderCode }}</div>
                    </div>
                </div>
                <a href="{{ url('/activate') }}" style="display:block;width:100%;margin-top:20px;padding:13px;background:linear-gradient(135deg,#f5c518,#d4a00a);color:#1a1a2e;font-size:14px;font-weight:700;border-radius:14px;text-decoration:none;text-align:center;box-shadow:0 4px 14px rgba(245,197,24,0.3);">
                    🚀 Trải nghiệm ngay
                </a>
                <p style="font-size:11px;color:#9ca3af;margin-top:10px;">Tự động chuyển hướng sau <span id="countdown">5</span>s</p>
            </div>
        </div>
    </div>

    <script>
        function copyText(text, btn) {
            navigator.clipboard.writeText(text).then(() => {
                btn.innerHTML = '✅';
                btn.classList.add('copied');
                setTimeout(() => {
                    btn.innerHTML = '📋';
                    btn.classList.remove('copied');
                }, 2000);
            });
        }

        function createConfetti() {
            const container = document.getElementById('confettiContainer');
            const colors = ['#f5c518', '#ff6b6b', '#4ecdc4', '#45b7d1', '#96e6a1', '#dda0dd', '#f0e68c', '#ff9500'];
            for (let i = 0; i < 50; i++) {
                const confetti = document.createElement('div');
                confetti.className = 'confetti';
                confetti.style.left = Math.random() * 100 + '%';
                confetti.style.background = colors[Math.floor(Math.random() * colors.length)];
                confetti.style.animationDelay = Math.random() * 2 + 's';
                confetti.style.animationDuration = (2 + Math.random() * 2) + 's';
                confetti.style.width = (5 + Math.random() * 8) + 'px';
                confetti.style.height = (5 + Math.random() * 8) + 'px';
                container.appendChild(confetti);
            }
        }

        function showSuccess() {
            document.getElementById('statusChecking').style.display = 'none';
            document.getElementById('successOverlay').classList.add('active');
            createConfetti();

            let sec = 5;
            const countdownEl = document.getElementById('countdown');
            const timer = setInterval(() => {
                sec--;
                countdownEl.textContent = sec;
                if (sec <= 0) {
                    clearInterval(timer);
                    window.location.href = '{{ url("/activate") }}';
                }
            }, 1000);
        }

        // Poll payment status every 5 seconds
        const orderCode = '{{ $orderCode }}';
        let pollInterval = setInterval(async () => {
            try {
                const res = await fetch('{{ url("/api/payment/check") }}', {
                    method: 'POST',
                    headers: { 'Content-Type': 'application/json' },
                    body: JSON.stringify({ order_code: orderCode })
                });
                const data = await res.json();

                if (data.status === 'completed') {
                    clearInterval(pollInterval);
                    showSuccess();
                }
            } catch (e) {
                console.log('Poll error:', e);
            }
        }, 5000);
    </script>
@endsection