<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Payment Successful - Thank You!</title>
    
    <!-- Bootstrap 5 CSS -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet">
    
    <!-- Bootstrap Icons -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.1/font/bootstrap-icons.css">
    
    <style>
        :root {
            --payfast-red: #e32e2e;
            --payfast-dark: #1a1a1a;
            --success-green: #28a745;
        }

        body {
            background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
            min-height: 100vh;
            padding: 40px 0;
            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
        }

        .success-container {
            max-width: 700px;
            margin: 0 auto;
        }

        .success-card {
            background: white;
            border-radius: 20px;
            box-shadow: 0 10px 40px rgba(0, 0, 0, 0.1);
            overflow: hidden;
            animation: slideUp 0.5s ease-out;
        }

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

        .success-header {
            background: linear-gradient(135deg, var(--success-green) 0%, #218838 100%);
            color: white;
            padding: 3rem 2.5rem;
            text-align: center;
            position: relative;
        }

        .success-header::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: 
                radial-gradient(circle at 20% 50%, rgba(255,255,255,0.1) 0%, transparent 50%);
        }

        .success-icon {
            width: 100px;
            height: 100px;
            background: rgba(255, 255, 255, 0.2);
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            margin: 0 auto 1.5rem;
            backdrop-filter: blur(10px);
            animation: checkmark 0.8s ease-out;
        }

        @keyframes checkmark {
            0% {
                transform: scale(0) rotate(-45deg);
            }
            50% {
                transform: scale(1.2) rotate(5deg);
            }
            100% {
                transform: scale(1) rotate(0);
            }
        }

        .success-icon i {
            font-size: 3.5rem;
        }

        .success-header h1 {
            font-weight: 800;
            margin: 0 0 1rem;
            font-size: 2.5rem;
            position: relative;
        }

        .success-header p {
            font-size: 1.2rem;
            margin: 0;
            opacity: 0.95;
        }

        .success-body {
            padding: 3rem 2.5rem;
        }

        .info-box {
            background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
            border-radius: 15px;
            padding: 2rem;
            margin-bottom: 2rem;
            border-left: 4px solid var(--success-green);
        }

        .info-row {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 1rem 0;
            border-bottom: 1px solid #dee2e6;
        }

        .info-row:last-child {
            border-bottom: none;
        }

        .info-label {
            font-weight: 600;
            color: #6c757d;
            display: flex;
            align-items: center;
            gap: 0.5rem;
        }

        .info-label i {
            color: var(--success-green);
        }

        .info-value {
            font-weight: 700;
            color: var(--payfast-dark);
            text-align: right;
        }

        .next-steps {
            background: white;
            border: 2px solid #e9ecef;
            border-radius: 15px;
            padding: 2rem;
            margin-bottom: 2rem;
        }

        .next-steps h3 {
            color: var(--payfast-dark);
            margin-bottom: 1.5rem;
            font-weight: 700;
            display: flex;
            align-items: center;
            gap: 0.5rem;
        }

        .next-steps h3 i {
            color: var(--success-green);
        }

        .next-steps ul {
            list-style: none;
            padding: 0;
            margin: 0;
        }

        .next-steps li {
            padding: 1rem 0;
            display: flex;
            align-items: flex-start;
            gap: 1rem;
            border-bottom: 1px solid #f0f0f0;
        }

        .next-steps li:last-child {
            border-bottom: none;
        }

        .step-icon {
            width: 35px;
            height: 35px;
            background: linear-gradient(135deg, var(--success-green) 0%, #218838 100%);
            color: white;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            flex-shrink: 0;
            font-weight: 700;
            box-shadow: 0 2px 8px rgba(40, 167, 69, 0.3);
        }

        .step-text {
            flex: 1;
            padding-top: 0.3rem;
        }

        .action-buttons {
            display: flex;
            gap: 1rem;
            margin-top: 2rem;
            flex-wrap: wrap;
        }

        .btn {
            padding: 1rem 2rem;
            border-radius: 12px;
            font-weight: 700;
            text-decoration: none;
            display: inline-flex;
            align-items: center;
            gap: 0.5rem;
            transition: all 0.3s;
            border: none;
            cursor: pointer;
            flex: 1;
            justify-content: center;
            min-width: 200px;
        }

        .btn-primary {
            background: linear-gradient(135deg, var(--payfast-red) 0%, #c02525 100%);
            color: white;
            box-shadow: 0 4px 15px rgba(227, 46, 46, 0.3);
        }

        .btn-primary:hover {
            transform: translateY(-2px);
            box-shadow: 0 6px 25px rgba(227, 46, 46, 0.4);
            color: white;
        }

        .btn-secondary {
            background: white;
            color: var(--payfast-dark);
            border: 2px solid #dee2e6;
        }

        .btn-secondary:hover {
            background: #f8f9fa;
            border-color: var(--payfast-dark);
            transform: translateY(-2px);
            color: var(--payfast-dark);
        }

        .email-notice {
            background: #fff3cd;
            border-left: 4px solid #ffc107;
            border-radius: 10px;
            padding: 1.5rem;
            margin-top: 2rem;
            display: flex;
            align-items: center;
            gap: 1rem;
        }

        .email-notice i {
            font-size: 2rem;
            color: #ffc107;
        }

        .email-notice-content h4 {
            margin: 0 0 0.5rem;
            font-size: 1.1rem;
            color: var(--payfast-dark);
        }

        .email-notice-content p {
            margin: 0;
            color: #6c757d;
            font-size: 0.95rem;
        }

        .powered-by {
            text-align: center;
            padding-top: 2rem;
            border-top: 1px solid #dee2e6;
            color: #6c757d;
        }

        .payfast-logo {
            color: var(--payfast-red);
            font-weight: 800;
            font-size: 1.1rem;
            margin-top: 0.5rem;
        }

        .confetti {
            position: fixed;
            width: 10px;
            height: 10px;
            background: var(--success-green);
            position: absolute;
            animation: confetti-fall 3s linear;
        }

        @keyframes confetti-fall {
            to {
                transform: translateY(100vh) rotate(360deg);
                opacity: 0;
            }
        }

        /* Responsive */
        @media (max-width: 768px) {
            .success-container {
                padding: 0 15px;
            }

            .success-body {
                padding: 2rem 1.5rem;
            }

            .success-header h1 {
                font-size: 2rem;
            }

            .action-buttons {
                flex-direction: column;
            }

            .btn {
                width: 100%;
            }

            .info-row {
                flex-direction: column;
                align-items: flex-start;
                gap: 0.5rem;
            }

            .info-value {
                text-align: left;
            }
        }

        /* Print Styles */
        @media print {
            body {
                background: white;
            }

            .action-buttons,
            .powered-by {
                display: none;
            }
        }
    </style>
</head>
<body>
    <div class="success-container">
        <div class="success-card">
            <!-- Success Header -->
            <div class="success-header">
                <div class="success-icon">
                    <i class="bi bi-check-circle-fill"></i>
                </div>
                <h1>Payment Successful!</h1>
                <p>Thank you for your purchase. Your transaction has been completed.</p>
            </div>

            <!-- Success Body -->
            <div class="success-body">
                <!-- Payment Information -->
                <div class="info-box">
                    <div class="info-row">
                        <div class="info-label">
                            <i class="bi bi-receipt"></i>
                            <span>Transaction ID</span>
                        </div>
                        <div class="info-value" id="transaction-id">
                            Loading...
                        </div>
                    </div>
                    
                    <div class="info-row">
                        <div class="info-label">
                            <i class="bi bi-calendar-check"></i>
                            <span>Date</span>
                        </div>
                        <div class="info-value" id="transaction-date">
                            <script>
                                document.getElementById('transaction-date').textContent = 
                                    new Date().toLocaleDateString('en-ZA', { 
                                        year: 'numeric', 
                                        month: 'long', 
                                        day: 'numeric',
                                        hour: '2-digit',
                                        minute: '2-digit'
                                    });
                            </script>
                        </div>
                    </div>
                    
                    <div class="info-row">
                        <div class="info-label">
                            <i class="bi bi-cash-coin"></i>
                            <span>Amount Paid</span>
                        </div>
                        <div class="info-value" id="amount-paid">
                            R 99.99
                        </div>
                    </div>
                    
                    <div class="info-row">
                        <div class="info-label">
                            <i class="bi bi-credit-card"></i>
                            <span>Payment Method</span>
                        </div>
                        <div class="info-value">
                            PayFast
                        </div>
                    </div>
                    
                    <div class="info-row">
                        <div class="info-label">
                            <i class="bi bi-check-circle"></i>
                            <span>Status</span>
                        </div>
                        <div class="info-value" style="color: var(--success-green);">
                            <i class="bi bi-check-circle-fill"></i> Completed
                        </div>
                    </div>
                </div>

                <!-- Next Steps -->
                <div class="next-steps">
                    <h3>
                        <i class="bi bi-list-check"></i>
                        What's Next?
                    </h3>
                    <ul>
                        <li>
                            <div class="step-icon">1</div>
                            <div class="step-text">
                                <strong>Confirmation Email</strong>
                                <p class="mb-0 text-muted">You'll receive a confirmation email with your receipt shortly.</p>
                            </div>
                        </li>
                        <li>
                            <div class="step-icon">2</div>
                            <div class="step-text">
                                <strong>Access Your Purchase</strong>
                                <p class="mb-0 text-muted">Your premium features have been activated and are ready to use.</p>
                            </div>
                        </li>
                        <li>
                            <div class="step-icon">3</div>
                            <div class="step-text">
                                <strong>Support Available</strong>
                                <p class="mb-0 text-muted">If you have any questions, our support team is here to help.</p>
                            </div>
                        </li>
                    </ul>
                </div>

                <!-- Email Notice -->
                <div class="email-notice">
                    <i class="bi bi-envelope-check-fill"></i>
                    <div class="email-notice-content">
                        <h4>Check Your Email</h4>
                        <p>A detailed receipt and purchase confirmation has been sent to your email address.</p>
                    </div>
                </div>

                <!-- Action Buttons -->
                <div class="action-buttons">
                    <a href="/" class="btn btn-primary">
                        <i class="bi bi-house-fill"></i>
                        <span>Go to Dashboard</span>
                    </a>
                    <a href="javascript:window.print()" class="btn btn-secondary">
                        <i class="bi bi-printer-fill"></i>
                        <span>Print Receipt</span>
                    </a>
                </div>

                <!-- Need Help Section -->
                <div class="card mt-4 border-0" style="background: #f8f9fa;">
                    <div class="card-body">
                        <h5 class="card-title">
                            <i class="bi bi-question-circle-fill text-primary me-2"></i>
                            Need Help?
                        </h5>
                        <p class="card-text mb-3">
                            If you have any questions about your purchase or need assistance, please don't hesitate to contact us.
                        </p>
                        <a href="/contact" class="btn btn-outline-primary">
                            <i class="bi bi-headset"></i> Contact Support
                        </a>
                    </div>
                </div>

                <!-- Powered By -->
                <div class="powered-by">
                    <small>Secured by</small>
                    <div class="payfast-logo">
                        <i class="bi bi-shield-check"></i> PayFast
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Bootstrap JS -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"></script>
    
    <script>
        // Get payment info from URL parameters
        const urlParams = new URLSearchParams(window.location.search);
        const paymentId = urlParams.get('payment_id') || 'PF' + Math.random().toString(36).substr(2, 9).toUpperCase();
        const amount = urlParams.get('amount') || '99.99';
        
        // Update transaction ID
        document.getElementById('transaction-id').textContent = paymentId;
        
        // Update amount
        document.getElementById('amount-paid').textContent = 'R ' + parseFloat(amount).toFixed(2);
        
        // Confetti effect
        function createConfetti() {
            const colors = ['#28a745', '#ffc107', '#e32e2e', '#17a2b8', '#6c757d'];
            for (let i = 0; i < 50; i++) {
                setTimeout(() => {
                    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() * 0.3 + 's';
                    document.body.appendChild(confetti);
                    
                    setTimeout(() => confetti.remove(), 3000);
                }, i * 30);
            }
        }
        
        // Trigger confetti on load
        window.addEventListener('load', () => {
            setTimeout(createConfetti, 500);
        });
        
        // Auto-hide URL parameters for cleaner look
        if (window.history.replaceState) {
            const cleanUrl = window.location.pathname;
            window.history.replaceState(null, null, cleanUrl);
        }
    </script>
</body>
</html>