<?php
include '../includes/auth.php';
include '../config/db.php';

$user_id = $_SESSION['user_id'];
$user = $conn->query("SELECT * FROM users WHERE id=$user_id")->fetch_assoc();

// Get organization signatures from database
$president = $conn->query("SELECT * FROM org_signatures WHERE position = 'president'")->fetch_assoc();
$secretary = $conn->query("SELECT * FROM org_signatures WHERE position = 'secretary'")->fetch_assoc();
$treasurer = $conn->query("SELECT * FROM org_signatures WHERE position = 'treasurer'")->fetch_assoc();

// Calculate member since date
$member_since = date('F Y', strtotime($user['created_at']));

// Generate a unique member ID
$member_id = "BM" . str_pad($user['id'], 6, "0", STR_PAD_LEFT);

// Get total donation amount
$total_donation = $conn->query("SELECT SUM(amount) as total FROM donations WHERE user_id=$user_id AND status='verified'")->fetch_assoc()['total'];
$total_donation = $total_donation ?: 0;

// Get donation count
$donation_count = $conn->query("SELECT COUNT(*) as count FROM donations WHERE user_id=$user_id AND status='verified'")->fetch_assoc()['count'];

// Function to get signature image path
function getSignaturePath($signature) {
    if (!empty($signature['signature_image']) && file_exists("../" . $signature['signature_image'])) {
        return "../" . $signature['signature_image'];
    }
    return null;
}
?>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Membership Certificate - BMYA-FUND</title>
    <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700;800&family=Cinzel:wght@400;600;700;900&family=Dancing+Script:wght@400;500;600;700&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            font-family: 'Poppins', sans-serif;
            background: linear-gradient(135deg, #1a1a2e 0%, #16213e 25%, #0f3460 50%, #533483 75%, #e94560 100%);
            min-height: 100vh;
            padding: 2rem;
            position: relative;
        }

        /* Animated Gradient Background */
        body::before {
            content: '';
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: radial-gradient(circle at 20% 50%, rgba(255,215,0,0.08) 0%, transparent 50%),
                        radial-gradient(circle at 80% 80%, rgba(233,69,96,0.08) 0%, transparent 50%);
            pointer-events: none;
            animation: pulse 8s ease-in-out infinite;
        }

        @keyframes pulse {
            0%, 100% { opacity: 0.5; }
            50% { opacity: 1; }
        }

        /* Floating Particles Effect */
        body::after {
            content: '';
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 200"><circle cx="30" cy="30" r="2" fill="rgba(255,215,0,0.3)"/><circle cx="70" cy="80" r="1.5" fill="rgba(255,215,0,0.2)"/><circle cx="120" cy="40" r="2.5" fill="rgba(255,215,0,0.25)"/><circle cx="160" cy="100" r="1.8" fill="rgba(255,215,0,0.3)"/><circle cx="50" cy="150" r="2" fill="rgba(255,215,0,0.2)"/><circle cx="140" cy="170" r="1.5" fill="rgba(255,215,0,0.25)"/></svg>');
            background-repeat: repeat;
            opacity: 0.5;
            pointer-events: none;
            animation: float 15s linear infinite;
        }

        @keyframes float {
            0% { transform: translateY(0px); }
            100% { transform: translateY(-50px); }
        }

        .container {
            max-width: 800px;
            margin: 0 auto;
            position: relative;
            z-index: 2;
        }

        /* Back Button - Glass Morphism */
        .back-btn {
            display: inline-flex;
            align-items: center;
            gap: 10px;
            background: rgba(255,255,255,0.95);
            padding: 12px 24px;
            border-radius: 50px;
            text-decoration: none;
            color: #8B0000;
            font-weight: 600;
            margin-bottom: 2rem;
            transition: all 0.3s;
            box-shadow: 0 4px 20px rgba(0,0,0,0.2);
            backdrop-filter: blur(10px);
            border: 1px solid rgba(255,255,255,0.3);
        }

        .back-btn:hover {
            transform: translateX(-8px);
            background: white;
            box-shadow: 0 8px 30px rgba(0,0,0,0.3);
            border-color: rgba(255,215,0,0.5);
        }

        /* Certificate Wrapper */
        .certificate-wrapper {
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            min-height: 80vh;
        }

        /* Certificate Style - Premium Look */
        .certificate {
            background: linear-gradient(135deg, #fffef7 0%, #fff9e8 50%, #fffef7 100%);
            width: 560px;
            max-width: 100%;
            border-radius: 20px;
            box-shadow: 0 30px 60px rgba(0,0,0,0.4), 0 0 0 1px rgba(212,175,55,0.3);
            position: relative;
            transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
            cursor: pointer;
            margin: 0 auto;
        }

        .certificate:hover {
            transform: translateY(-10px) scale(1.02);
            box-shadow: 0 40px 80px rgba(0,0,0,0.5);
        }

        /* Premium Gold Border */
        .certificate-border {
            position: absolute;
            top: 15px;
            left: 15px;
            right: 15px;
            bottom: 15px;
            border: 2px solid rgba(212, 175, 55, 0.6);
            border-radius: 12px;
            pointer-events: none;
            box-shadow: inset 0 0 10px rgba(212,175,55,0.2);
        }

        /* Corner Decorations - Enhanced */
        .corner-decoration {
            position: absolute;
            width: 70px;
            height: 70px;
            border-style: solid;
            border-color: #d4af37;
            pointer-events: none;
            filter: drop-shadow(0 2px 4px rgba(0,0,0,0.1));
        }

        .corner-tl {
            top: 10px;
            left: 10px;
            border-width: 4px 0 0 4px;
            border-radius: 12px 0 0 0;
        }

        .corner-tr {
            top: 10px;
            right: 10px;
            border-width: 4px 4px 0 0;
            border-radius: 0 12px 0 0;
        }

        .corner-bl {
            bottom: 10px;
            left: 10px;
            border-width: 0 0 4px 4px;
            border-radius: 0 0 0 12px;
        }

        .corner-br {
            bottom: 10px;
            right: 10px;
            border-width: 0 4px 4px 0;
            border-radius: 0 0 12px 0;
        }

        /* Certificate Inner Content */
        .certificate-inner {
            padding: 2rem 2rem;
            position: relative;
            z-index: 2;
        }

        /* Watermark Pattern */
        .certificate-inner::before {
            content: '✨';
            position: absolute;
            bottom: 30px;
            right: 30px;
            font-size: 100px;
            opacity: 0.04;
            font-family: sans-serif;
            pointer-events: none;
        }

        .certificate-inner::after {
            content: '🌟';
            position: absolute;
            top: 30px;
            left: 30px;
            font-size: 80px;
            opacity: 0.03;
            pointer-events: none;
        }

        /* Header Section */
        .certificate-header {
            text-align: center;
            margin-bottom: 1rem;
        }

        /* Custom Logo Styling */
        .custom-logo {
            width: 60px;
            height: 60px;
            margin: 0 auto 10px;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .custom-logo img {
            width: 100%;
            height: 100%;
            object-fit: contain;
            filter: drop-shadow(0 2px 4px rgba(212,175,55,0.3));
        }

        .org-name-hindi {
            font-family: 'Cinzel', serif;
            font-size: 0.75rem;
            letter-spacing: 2px;
            color: #8B0000;
            text-transform: uppercase;
            font-weight: 600;
        }

        .org-name-english {
            font-family: 'Cinzel', serif;
            font-size: 1.1rem;
            letter-spacing: 1px;
            color: #8B0000;
            font-weight: 700;
            margin-top: 2px;
        }

        .certificate-title {
            font-family: 'Cinzel', serif;
            font-size: 1.4rem;
            font-weight: 800;
            text-transform: uppercase;
            letter-spacing: 4px;
            margin-top: 0.5rem;
            background: linear-gradient(135deg, #bf953f, #fcf6ba, #b38728, #fbf5b7);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
        }

        .certificate-subtitle {
            font-size: 0.65rem;
            color: #999;
            letter-spacing: 2px;
            margin-top: 2px;
        }

        /* Divider */
        .divider {
            height: 2px;
            background: linear-gradient(90deg, transparent, #d4af37, #ffd700, #d4af37, transparent);
            margin: 1rem 0;
        }

        /* Honor Text */
        .honor-text {
            text-align: center;
            font-size: 0.8rem;
            color: #666;
            font-style: italic;
            margin-bottom: 0.8rem;
        }

        /* Member Name - Premium Styling */
        .member-name {
            font-family: 'Dancing Script', cursive;
            font-size: 2.2rem;
            font-weight: 700;
            background: linear-gradient(135deg, #8B0000, #A52A2A, #CD5C5C);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
            text-align: center;
            margin: 0.5rem 0;
            padding: 0.5rem;
            border-top: 1px solid #d4af37;
            border-bottom: 1px solid #d4af37;
            display: inline-block;
            width: auto;
            letter-spacing: 1px;
        }

        .name-wrapper {
            text-align: center;
        }

        /* Achievement Text */
        .achievement-text {
            text-align: center;
            font-size: 0.75rem;
            color: #555;
            margin: 0.8rem 0;
            line-height: 1.5;
        }

        .achievement-text strong {
            color: #8B0000;
            font-weight: 700;
        }

        /* Gold Seal */
        .gold-seal {
            text-align: center;
            margin: 0.5rem 0;
        }

        .gold-seal i {
            font-size: 2.2rem;
            color: #d4af37;
            opacity: 0.9;
            filter: drop-shadow(0 2px 4px rgba(212,175,55,0.4));
        }

        /* Member Details */
        .member-details {
            background: linear-gradient(135deg, rgba(212,175,55,0.08), rgba(212,175,55,0.03));
            border-radius: 12px;
            padding: 0.8rem 1rem;
            margin: 0.8rem 0;
            border: 1px solid rgba(212,175,55,0.2);
        }

        .detail-row {
            display: flex;
            justify-content: space-between;
            padding: 0.5rem 0;
            font-size: 0.7rem;
            border-bottom: 1px dashed rgba(212,175,55,0.3);
        }

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

        .detail-label {
            font-weight: 600;
            color: #8B0000;
            display: flex;
            align-items: center;
            gap: 6px;
        }

        .detail-label i {
            width: 16px;
            font-size: 0.7rem;
            color: #d4af37;
        }

        .detail-value {
            color: #333;
            font-weight: 500;
            font-size: 0.7rem;
        }

        /* Contribution Box - Premium */
        .contribution-box {
            background: linear-gradient(135deg, #d4af37, #ffd700, #f0c14b);
            padding: 0.7rem;
            border-radius: 12px;
            text-align: center;
            margin: 0.8rem 0;
            box-shadow: 0 4px 15px rgba(212,175,55,0.3);
        }

        .contribution-box .label {
            font-size: 0.6rem;
            color: #8B0000;
            font-weight: 600;
            text-transform: uppercase;
            letter-spacing: 1px;
        }

        .contribution-box .amount {
            font-size: 1.3rem;
            font-weight: 800;
            color: #8B0000;
            font-family: 'Cinzel', serif;
        }

        /* Signature Area - Dynamic with Images */
        .signature-area {
            display: flex;
            justify-content: space-between;
            margin: 1rem 0 0.5rem;
            padding-top: 0.5rem;
            border-top: 1px dashed #d4af37;
        }

        .signature {
            text-align: center;
            flex: 1;
        }

        .signature-image {
            margin-bottom: 0.5rem;
        }

        .signature-image img {
            max-width: 100px;
            max-height: 50px;
            object-fit: contain;
        }

        .signature-line {
            width: 80px;
            height: 2px;
            background: linear-gradient(90deg, #333, #666, #333);
            margin: 0.3rem auto;
            border-radius: 2px;
        }

        .signature-name {
            font-size: 0.7rem;
            color: #333;
            font-weight: 600;
            margin-top: 0.3rem;
        }

        .signature-designation {
            font-size: 0.55rem;
            color: #666;
            margin-top: 0.2rem;
        }

        /* QR Code Section */
        .qr-section {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 0.8rem;
            margin-top: 0.8rem;
            padding: 0.5rem 0.8rem;
            background: linear-gradient(135deg, rgba(212,175,55,0.08), rgba(212,175,55,0.03));
            border-radius: 10px;
            border: 1px solid rgba(212,175,55,0.2);
        }

        .qr-placeholder {
            width: 50px;
            height: 50px;
            background: white;
            display: flex;
            align-items: center;
            justify-content: center;
            border-radius: 10px;
            border: 1px solid #d4af37;
            box-shadow: 0 2px 8px rgba(0,0,0,0.1);
        }

        .qr-placeholder i {
            font-size: 2rem;
            color: #333;
        }

        .qr-text {
            flex: 1;
        }

        .qr-text strong {
            font-size: 0.7rem;
            color: #8B0000;
            display: block;
        }

        .qr-text small {
            font-size: 0.55rem;
            color: #666;
        }

        /* Footer */
        .certificate-footer {
            text-align: center;
            margin-top: 1rem;
            padding-top: 0.5rem;
            border-top: 1px solid rgba(212,175,55,0.3);
        }

        .badges {
            display: flex;
            justify-content: center;
            gap: 0.6rem;
            flex-wrap: wrap;
            margin-bottom: 0.3rem;
        }

        .badge-small {
            display: inline-flex;
            align-items: center;
            gap: 5px;
            padding: 0.2rem 0.6rem;
            background: linear-gradient(135deg, #f5f0e0, #fff8e7);
            border-radius: 20px;
            font-size: 0.55rem;
            color: #8B0000;
            font-weight: 500;
            border: 1px solid rgba(212,175,55,0.3);
        }

        .badge-small i {
            font-size: 0.55rem;
            color: #d4af37;
        }

        .footer-text {
            font-size: 0.55rem;
            color: #999;
        }

        /* Action Buttons */
        .action-buttons {
            display: flex;
            gap: 1rem;
            margin-top: 2rem;
            justify-content: center;
            flex-wrap: wrap;
        }

        .btn {
            padding: 12px 28px;
            border: none;
            border-radius: 50px;
            font-weight: 600;
            cursor: pointer;
            transition: all 0.3s;
            text-decoration: none;
            display: inline-flex;
            align-items: center;
            gap: 10px;
            font-size: 0.9rem;
        }

        .btn-primary {
            background: linear-gradient(135deg, #8B0000, #A52A2A);
            color: white;
            box-shadow: 0 4px 15px rgba(139,0,0,0.3);
        }

        .btn-primary:hover {
            transform: translateY(-3px);
            box-shadow: 0 8px 25px rgba(139,0,0,0.4);
        }

        .btn-secondary {
            background: white;
            color: #8B0000;
            border: 2px solid #8B0000;
        }

        .btn-secondary:hover {
            background: #8B0000;
            color: white;
            transform: translateY(-3px);
        }

        .btn-gold {
            background: linear-gradient(135deg, #d4af37, #ffd700);
            color: #8B0000;
            box-shadow: 0 4px 15px rgba(212,175,55,0.3);
        }

        .btn-gold:hover {
            background: linear-gradient(135deg, #ffd700, #ffe066);
            transform: translateY(-3px);
            box-shadow: 0 8px 25px rgba(212,175,55,0.4);
        }

        /* Status Message */
        .status-message {
            text-align: center;
            padding: 2rem;
            background: rgba(255,255,255,0.95);
            border-radius: 20px;
            max-width: 400px;
            margin: 0 auto;
            box-shadow: 0 20px 40px rgba(0,0,0,0.2);
            backdrop-filter: blur(10px);
            border: 1px solid rgba(255,255,255,0.3);
        }

        .status-icon {
            font-size: 3.5rem;
            margin-bottom: 1rem;
        }

        .status-title {
            font-size: 1.3rem;
            font-weight: 600;
            margin-bottom: 0.5rem;
            color: #333;
        }

        .status-text {
            color: #666;
            font-size: 0.85rem;
            margin-bottom: 1rem;
        }

        /* Animations */
        @keyframes slideUp {
            from {
                opacity: 0;
                transform: translateY(50px);
            }
            to {
                opacity: 1;
                transform: translateY(0);
            }
        }

        .certificate {
            animation: slideUp 0.8s cubic-bezier(0.175, 0.885, 0.32, 1.275);
        }

        /* Responsive */
        @media (max-width: 600px) {
            body {
                padding: 1rem;
            }

            .certificate {
                width: 100%;
            }

            .certificate-inner {
                padding: 1.2rem;
            }

            .member-name {
                font-size: 1.5rem;
            }

            .signature-image img {
                max-width: 60px;
            }

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

            .btn {
                justify-content: center;
            }
        }

        @media print {
            body {
                background: white;
                padding: 0;
            }
            
            body::before, body::after {
                display: none;
            }
            
            .back-btn,
            .action-buttons {
                display: none;
            }
            
            .certificate {
                box-shadow: none;
                width: 100%;
                margin: 0;
            }
        }
    </style>
</head>
<body>
    <div class="container">
        <a href="dashboard.php" class="back-btn">
            <i class="fas fa-arrow-left"></i> Back to Dashboard
        </a>

        <div class="certificate-wrapper">
            <?php if ($user['kyc_status'] == 'approved' && $user['membership_active']): ?>
                <!-- Premium Stylish Certificate -->
                <div class="certificate" id="certificate">
                    <div class="corner-decoration corner-tl"></div>
                    <div class="corner-decoration corner-tr"></div>
                    <div class="corner-decoration corner-bl"></div>
                    <div class="corner-decoration corner-br"></div>
                    <div class="certificate-border"></div>
                    
                    <div class="certificate-inner">
                        <!-- Header with Custom Logo -->
                        <div class="certificate-header">
                            <div class="custom-logo">
                                <img src="https://bmyouth.org/bmya/uploads/logo.png" alt="BMYA-SHELDANG Logo" 
                                     onerror="this.src='data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 100 100%27%3E%3Ccircle cx=%2750%27 cy=%2750%27 r=%2745%27 fill=%27%23d4af37%27/%3E%3Ctext x=%2750%27 y=%2770%27 text-anchor=%27middle%27 fill=%27%238B0000%27 font-size=%2740%27 font-weight=%27bold%27%3EB%3C/text%3E%3C/svg%3E'">
                            </div>
                            <div class="org-name-hindi">बिष्णुप्रिया मणिपुरी शेल्डांग</div>
                            <div class="org-name-english">BMYA-FUND</div>
                            <div class="certificate-title">MEMBERSHIP</div>
                            <div class="certificate-subtitle">CERTIFICATE OF EXCELLENCE</div>
                        </div>

                        <div class="divider"></div>

                        <!-- Honor Line -->
                        <div class="honor-text">
                            <i class="fas fa-star-of-life" style="font-size: 0.5rem; color: #d4af37;"></i> This is to certify that <i class="fas fa-star-of-life" style="font-size: 0.5rem; color: #d4af37;"></i>
                        </div>

                        <!-- Member Name -->
                        <div class="name-wrapper">
                            <div class="member-name">
                                <?= htmlspecialchars($user['name']) ?>
                            </div>
                        </div>

                        <!-- Achievement Text -->
                        <div class="achievement-text">
                            is a <strong>Registered Lifetime Member</strong> of BISHNUPRIYA MANIPURI YOUTH ASSOCIATION,<br>
                            passionately contributing to <strong>Community Development & Cultural Preservation</strong>.
                        </div>

                        <!-- Gold Seal -->
                        <div class="gold-seal">
                            <i class="fas fa-certificate"></i>
                        </div>

                        <!-- Member Details -->
                        <div class="member-details">
                            <div class="detail-row">
                                <span class="detail-label"><i class="fas fa-id-card"></i> Member ID</span>
                                <span class="detail-value"><?= $member_id ?></span>
                            </div>
                            <div class="detail-row">
                                <span class="detail-label"><i class="fas fa-calendar-alt"></i> Member Since</span>
                                <span class="detail-value"><?= $member_since ?></span>
                            </div>
                            <div class="detail-row">
                                <span class="detail-label"><i class="fas fa-gift"></i> Total Donations</span>
                                <span class="detail-value"><?= $donation_count ?> Contributions</span>
                            </div>
                        </div>

                        <!-- Contribution -->
                        <div class="contribution-box">
                            <div class="label">Total Contribution to Community Development</div>
                            <div class="amount">₹ <?= number_format($total_donation, 2) ?></div>
                        </div>

                        <!-- Dynamic Signatures Area - Fetched from Database -->
                        <div class="signature-area">
                            <div class="signature">
                                <?php if(getSignaturePath($president)): ?>
                                    <div class="signature-image">
                                        <img src="<?= getSignaturePath($president) ?>" alt="President Signature">
                                    </div>
                                <?php else: ?>
                                    <div class="signature-line"></div>
                                <?php endif; ?>
                                <div class="signature-name"><?= htmlspecialchars($president['signatory_name'] ?? 'President') ?></div>
                                <div class="signature-designation"><?= htmlspecialchars($president['designation'] ?? 'President') ?></div>
                            </div>
                            <div class="signature">
                                <?php if(getSignaturePath($secretary)): ?>
                                    <div class="signature-image">
                                        <img src="<?= getSignaturePath($secretary) ?>" alt="Secretary Signature">
                                    </div>
                                <?php else: ?>
                                    <div class="signature-line"></div>
                                <?php endif; ?>
                                <div class="signature-name"><?= htmlspecialchars($secretary['signatory_name'] ?? 'Secretary') ?></div>
                                <div class="signature-designation"><?= htmlspecialchars($secretary['designation'] ?? 'Secretary') ?></div>
                            </div>
                            <div class="signature">
                                <?php if(getSignaturePath($treasurer)): ?>
                                    <div class="signature-image">
                                        <img src="<?= getSignaturePath($treasurer) ?>" alt="Treasurer Signature">
                                    </div>
                                <?php else: ?>
                                    <div class="signature-line"></div>
                                <?php endif; ?>
                                <div class="signature-name"><?= htmlspecialchars($treasurer['signatory_name'] ?? 'Treasurer') ?></div>
                                <div class="signature-designation"><?= htmlspecialchars($treasurer['designation'] ?? 'Treasurer') ?></div>
                            </div>
                        </div>

                        <!-- QR Section -->
                        <div class="qr-section">
                            <div class="qr-placeholder">
                                <i class="fas fa-qrcode"></i>
                            </div>
                            <div class="qr-text">
                                <strong>Verify Membership</strong>
                                <small>Scan QR code to validate authenticity</small>
                            </div>
                            <div style="font-size: 0.6rem; color: #d4af37;">
                                <i class="fas fa-fingerprint"></i>
                            </div>
                        </div>

                        <!-- Footer -->
                        <div class="certificate-footer">
                            <div class="badges">
                                <span class="badge-small"><i class="fas fa-check-circle"></i> KYC Verified</span>
                                <span class="badge-small"><i class="fas fa-infinity"></i> Lifetime Validity</span>
                                <span class="badge-small"><i class="fas fa-shield-alt"></i> Govt. Registered</span>
                                <span class="badge-small"><i class="fas fa-globe"></i> Community Trust</span>
                            </div>
                            <div class="footer-text">
                                www.bmyouth.org | +91 80993 91473 | info@bmyouth.org
                            </div>
                        </div>
                    </div>
                </div>

                <!-- Action Buttons -->
                <div class="action-buttons">
                    <button onclick="window.print()" class="btn btn-primary">
                        <i class="fas fa-print"></i> Print Certificate
                    </button>
                    <button onclick="downloadCertificate()" class="btn btn-gold">
                        <i class="fas fa-download"></i> Download Image
                    </button>
                    <button onclick="shareCertificate()" class="btn btn-secondary">
                        <i class="fas fa-share-alt"></i> Share
                    </button>
                </div>

            <?php else: ?>
                <!-- Status Message -->
                <div class="status-message">
                    <?php if($user['kyc_status'] != 'approved'): ?>
                        <div class="status-icon">
                            <i class="fas fa-id-card" style="color: #ffc107;"></i>
                        </div>
                        <div class="status-title">KYC Verification Required</div>
                        <div class="status-text">
                            Your KYC status is <strong><?= ucfirst($user['kyc_status']) ?></strong>.<br>
                            Complete KYC verification to receive your Membership Certificate.
                        </div>
                        <a href="submit_kyc.php" class="btn btn-primary">
                            <i class="fas fa-upload"></i> Submit KYC Now
                        </a>
                    <?php elseif(!$user['membership_active']): ?>
                        <div class="status-icon">
                            <i class="fas fa-ban" style="color: #dc3545;"></i>
                        </div>
                        <div class="status-title">Membership Inactive</div>
                        <div class="status-text">
                            Your membership is currently inactive.<br>
                            Please contact admin for reactivation.
                        </div>
                        <a href="../contact.php" class="btn btn-primary">
                            <i class="fas fa-headset"></i> Contact Support
                        </a>
                    <?php endif; ?>
                </div>
            <?php endif; ?>
        </div>
    </div>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/1.4.1/html2canvas.min.js"></script>
    <script>
        // Download certificate as image
        function downloadCertificate() {
            const certificate = document.getElementById('certificate');
            const btn = event.currentTarget;
            const originalText = btn.innerHTML;
            btn.innerHTML = '<i class="fas fa-spinner fa-spin"></i> Generating...';
            btn.disabled = true;
            
            html2canvas(certificate, {
                scale: 2.5,
                backgroundColor: '#fffef7',
                logging: false,
                useCORS: true
            }).then(canvas => {
                const link = document.createElement('a');
                link.download = 'bmsheldang-membership-certificate.png';
                link.href = canvas.toDataURL();
                link.click();
                btn.innerHTML = originalText;
                btn.disabled = false;
            }).catch(error => {
                console.error('Error:', error);
                btn.innerHTML = originalText;
                btn.disabled = false;
                alert('Error generating certificate. Please try again.');
            });
        }

        // Share certificate
        function shareCertificate() {
            const certificate = document.getElementById('certificate');
            
            html2canvas(certificate, {
                scale: 2,
                backgroundColor: '#fffef7'
            }).then(canvas => {
                canvas.toBlob(blob => {
                    const file = new File([blob], 'membership-certificate.png', { type: 'image/png' });
                    
                    if (navigator.share && navigator.canShare && navigator.canShare({ files: [file] })) {
                        navigator.share({
                            title: 'My Membership Certificate',
                            text: 'BMYA-SHELDANG - Lifetime Membership Certificate',
                            files: [file]
                        }).catch(err => {
                            const link = document.createElement('a');
                            link.download = 'membership-certificate.png';
                            link.href = canvas.toDataURL();
                            link.click();
                        });
                    } else {
                        const link = document.createElement('a');
                        link.download = 'membership-certificate.png';
                        link.href = canvas.toDataURL();
                        link.click();
                        alert('Certificate downloaded!');
                    }
                });
            });
        }

        // Add entrance animation
        document.addEventListener('DOMContentLoaded', function() {
            const certificate = document.querySelector('.certificate');
            if(certificate) {
                certificate.style.opacity = '0';
                setTimeout(() => {
                    certificate.style.transition = 'all 0.8s ease-out';
                    certificate.style.opacity = '1';
                }, 100);
            }
        });
    </script>
</body>
</html>