<?php
require_once '../includes/config.php';
require_once 'header.php';

$memberId = $_GET['id'] ?? 0;

if (!$memberId) {
    header('Location: members.php');
    exit;
}

$stmt = $pdo->prepare("SELECT m.*, mt.type as membership_type 
                      FROM members m 
                      LEFT JOIN membership_types mt ON m.membership_type_id = mt.id 
                      WHERE m.id = ?");
$stmt->execute([$memberId]);
$member = $stmt->fetch();

if (!$member) {
    header('Location: members.php');
    exit;
}

$status = getMembershipStatus($member['expiry_date']);
?>

<div class="d-flex justify-content-between flex-wrap flex-md-nowrap align-items-center pt-3 pb-2 mb-3 border-bottom">
    <h1 class="h2"><i class="fas fa-id-card me-2"></i>Member ID Card: <?php echo htmlspecialchars($member['fullname']); ?></h1>
    <div>
        <a href="member_view.php?id=<?php echo $memberId; ?>" class="btn btn-info">
            <i class="fas fa-user me-2"></i>View Profile
        </a>
        <a href="members.php" class="btn btn-secondary">
            <i class="fas fa-arrow-left me-2"></i>Back
        </a>
    </div>
</div>

<div class="row justify-content-center">
    <div class="col-md-8">
        <div class="card">
            <div class="card-body text-center">
                <div class="id-card" id="idCard" style="background: linear-gradient(135deg, #2c3e50, #3498db); color: white; border-radius: 15px; padding: 30px; max-width: 550px; margin: 0 auto;">
                    <div class="text-center mb-4">
                        <img src="<?php echo UPLOAD_URL . getSystemSetting($pdo, 'logo'); ?>" alt="Logo" style="height: 70px;" onerror="this.src='assets/images/logo.png'">
                        <h3 class="mt-2"><?php echo SITE_NAME; ?></h3>
                        <p class="mb-0">OFFICIAL MEMBERSHIP CARD</p>
                    </div>
                    
                    <div class="row">
                        <div class="col-4 text-center">
                            <img src="<?php echo UPLOAD_URL . $member['profile_photo']; ?>" 
                                 style="width: 120px; height: 120px; object-fit: cover; border: 3px solid white; border-radius: 10px;" 
                                 onerror="this.src='assets/images/default-avatar.png'">
                        </div>
                        <div class="col-8">
                            <p><strong>Membership No:</strong><br><?php echo $member['membership_number']; ?></p>
                            <p><strong>Name:</strong><br><?php echo htmlspecialchars($member['fullname']); ?></p>
                            <p><strong>Type:</strong><br><?php echo $member['membership_type']; ?></p>
                            <p><strong>Status:</strong><br><span class="badge bg-<?php echo $status['class']; ?>"><?php echo $status['status']; ?></span></p>
                        </div>
                    </div>
                    
                    <div class="row mt-3">
                        <div class="col-6">
                            <p><strong>Valid From:</strong><br><?php echo formatDate($member['join_date']); ?></p>
                        </div>
                        <div class="col-6">
                            <p><strong>Valid Until:</strong><br><?php echo formatDate($member['expiry_date']); ?></p>
                        </div>
                    </div>
                    
                    <div class="text-center mt-3 pt-3 border-top border-white">
                        <p class="mb-0"><?php echo getSystemSetting($pdo, 'system_address'); ?></p>
                        <p class="mb-0"><?php echo getSystemSetting($pdo, 'system_phone'); ?></p>
                    </div>
                </div>
                
                <div class="mt-4">
                    <button onclick="downloadIDCard()" class="btn btn-primary">
                        <i class="fas fa-download"></i> Download as PNG
                    </button>
                    <button onclick="printIDCard()" class="btn btn-secondary">
                        <i class="fas fa-print"></i> Print
                    </button>
                </div>
            </div>
        </div>
    </div>
</div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/1.4.1/html2canvas.min.js"></script>
<script>
function downloadIDCard() {
    const element = document.getElementById('idCard');
    html2canvas(element, {
        scale: 3,
        backgroundColor: null,
        useCORS: true
    }).then(canvas => {
        const link = document.createElement('a');
        link.download = 'membership_id_card_<?php echo $member['membership_number']; ?>.png';
        link.href = canvas.toDataURL('image/png');
        link.click();
    });
}

function printIDCard() {
    const printContent = document.getElementById('idCard').innerHTML;
    const printWindow = window.open('', '_blank');
    printWindow.document.write(`
        <!DOCTYPE html>
        <html>
        <head>
            <title>Print ID Card - <?php echo htmlspecialchars($member['fullname']); ?></title>
            <style>
                body { margin: 0; padding: 20px; font-family: Arial, sans-serif; }
                @media print {
                    body { margin: 0; padding: 0; }
                }
            </style>
        </head>
        <body>
            ${printContent}
            <script>
                window.onload = function() { window.print(); window.close(); };
            <\/script>
        </body>
        </html>
    `);
    printWindow.document.close();
}
</script>

<?php require_once 'footer.php'; ?>