<?php
session_start();

include "../../config/setting.php";


// Cek session login
if (!isset($_SESSION['login']) || $_SESSION['login'] !== true) {
    header("Location: " . $http . "login");
    exit();
}

// Data pengguna dari session
$quser = mysql_query("SELECT * FROM user WHERE id='$_SESSION[id_user]'");
$duser = mysql_fetch_assoc($quser);

$quser2 = mysql_query("SELECT * FROM anggota WHERE id_user='$_SESSION[id_user]'");
$angg = mysql_fetch_assoc($quser2);

$user_id = $duser['id'];
$user_name = $duser['nama'];
$user_email = $duser['email'];
$user_role = $duser['role'];
$user_institution = $duser['institusi'];
$user_phone = $duser['telpon'];
$user_photo = $angg['foto']!="" ? $angg['foto'] : '../assets/images/user_blank.png';

$is_member = false; // SUDAH MENJADI ANGGOTA AKTIF
$member_id = $duser['id'];
$member_expiry = $angg['tgl_expired'];
$join_date = $angg['tgl_daftar'];
$user_address = $angg['alamat'];
$status_angg = $angg['aktif']=="Y" ? "Anggota Aktif" : "Non Member";

// Data kartu anggota
$member_card_data = array(
    'id' => $member_id,
    'name' => $user_name,
    'affiliation' => $user_institution,
    'address' => $user_address,
    'photo' => $user_photo,
    'status' => $status_angg,
    'expiry' => $member_expiry,
    'qrData' => $member_id
);

// Statistik
$seminar_count = (int) mysql_num_rows(mysql_query("SELECT id FROM peserta_seminar WHERE id_user='$member_id'"));
$certificate_count = (int) mysql_num_rows(mysql_query("SELECT id FROM peserta_seminar WHERE id_user='$member_id' AND lulus='Y'"));
?>
<!DOCTYPE html>
<html lang="id">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Dashboard Anggota - PAPENTARA</title>
    
    <!-- Bootstrap 5 CSS -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet">
    
    <!-- Lucide Icons -->
    <script src="https://unpkg.com/lucide@latest"></script>
    
    <!-- Font Awesome -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    
    <!-- Google Fonts -->
    <link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600;700;800&display=swap" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">

    <style>
        :root {
            --card-width: 85.6mm;
            --card-height: 53.98mm;
            --primary-blue: #003366;
            --secondary-blue: #00509E;
            --accent-gold: #FFD700;
        }

        /* STYLE KARTU ANGGOTA (SAMA PERSIS DENGAN CONTOH) */
        #cardCapture {
            padding: 15px; 
            background: transparent;
            display: inline-block;
            width: 100%;
        }

        .id-card-wrapper {
            width: var(--card-width);
            height: var(--card-height);
            position: relative;
            background: linear-gradient(135deg, var(--primary-blue) 0%, var(--secondary-blue) 100%);
            border-radius: 3.5mm;
            overflow: hidden;
            box-shadow: 0 8px 20px rgba(0,0,0,0.2);
            color: white;
            display: flex;
            flex-direction: column;
            font-family: 'Montserrat', sans-serif;
            -webkit-print-color-adjust: exact;
            print-color-adjust: exact;
            margin: 0 auto;
            max-width: 324px;
            max-height: 204px;
        }

        .card-bg-pattern {
            position: absolute;
            top: 0; left: 0; right: 0; bottom: 0;
            opacity: 0.1;
            background-image: radial-gradient(circle at 2px 2px, white 1px, transparent 0);
            background-size: 15px 15px;
            z-index: 1;
        }
        
        .card-wave {
            position: absolute;
            bottom: 0; left: 0; right: 0;
            height: 30%;
            background: rgba(255, 255, 255, 0.08);
            clip-path: polygon(0 50%, 100% 0, 100% 100%, 0% 100%);
            z-index: 1;
        }

        .card-header-area {
            position: relative;
            z-index: 10;
            padding: 2.5mm 4mm;
            display: flex;
            align-items: center;
            justify-content: space-between;
            border-bottom: 0.5px solid rgba(255,255,255,0.2);
            height: 15.5mm; 
        }

        .header-left {
            display: flex;
            align-items: center;
        }

        .org-logo {
            width: 9.5mm; 
            height: 9.5mm;
            background: white;
            border-radius: 50%;
            display: flex; 
            align-items: center; 
            justify-content: center;
            margin-right: 3mm;
            color: var(--primary-blue);
            font-size: 14px;
            border: 1.2px solid var(--accent-gold);
        }

        .org-title { 
            font-size: 10.5pt; 
            font-weight: 800; 
            letter-spacing: 0.6px; 
            text-transform: uppercase; 
            line-height: 1; 
        }

        .org-subtitle { 
            font-size: 4.8pt; 
            opacity: 1; 
            margin-top: 1.5px; 
            line-height: 1; 
            font-weight: 600;
            letter-spacing: 0.1px;
        }

        .header-right {
            display: flex;
            align-items: center;
        }

        .qr-header-box {
            width: 11.5mm; 
            height: 11.5mm;
            background: white;
            padding: 0.8mm;
            border-radius: 1mm;
            box-shadow: 0 1px 4px rgba(0,0,0,0.3);
        }
        
        .qr-header-box img { 
            width: 100%; 
            height: 100%; 
            display: block; 
        }

        .card-body-area {
            position: relative;
            z-index: 10;
            display: flex;
            padding: 3mm 4mm;
            flex: 1;
        }

        .left-col {
            width: 18mm;
            margin-right: 4.5mm;
            display: flex;
            flex-direction: column;
            align-items: center;
            flex-shrink: 0;
        }

        .photo-area {
            width: 18mm;
            height: 22.5mm;
            background-color: #eee;
            border: 1.5px solid white;
            border-radius: 1.5mm;
            overflow: hidden;
            box-shadow: 0 2px 5px rgba(0,0,0,0.3);
            margin-bottom: 1.5mm;
        }
        
        .photo-area img { 
            width: 100%; 
            height: 100%; 
            object-fit: cover; 
        }

        .status-badge {
            background: var(--accent-gold);
            color: var(--primary-blue);
            font-size: 4.5pt;
            font-weight: 800;
            padding: 1.2mm 0;
            width: 100%;
            text-align: center;
            border-radius: 0.8mm;
            text-transform: uppercase;
            line-height: 1;
        }

        .expiry-text {
            font-size: 3.5pt;
            font-weight: 600;
            margin-top: 0.8mm;
            text-transform: uppercase;
            letter-spacing: 0.2px;
            opacity: 0.9;
        }

        .right-col {
            flex: 1;
            display: flex;
            flex-direction: column;
            position: relative;
            min-width: 0;
        }

        .data-item { 
            margin-bottom: 1.2mm; 
        }

        .label-text { 
            font-size: 4pt; 
            text-transform: uppercase; 
            opacity: 0.8; 
            font-weight: 700; 
            margin-bottom: 0.3mm; 
        }
        
        .value-text { 
            font-size: 7.2pt; 
            font-weight: 700; 
            line-height: 1.1; 
        }

        .value-name {
            font-size: 8pt;
            font-weight: 800;
            color: var(--accent-gold);
            line-height: 1.1;
            display: block;
            word-wrap: break-word;
            max-width: 100%;
            margin-top: 0.3mm;
        }

        .value-address {
            font-size: 5.2pt;
            font-weight: 500;
            white-space: normal;
            line-height: 1.2;
            display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
            overflow: hidden;
            margin-top: 0.3mm;
            text-align: justify;
        }

        /* Responsive adjustments untuk dashboard */
        @media (max-width: 768px) {
            .id-card-wrapper {
                transform: scale(0.85);
                transform-origin: center;
            }
        }
        
        @media (max-width: 576px) {
            .id-card-wrapper {
                transform: scale(0.75);
                transform-origin: center;
            }
        }

        /* Style untuk kartu print (ukuran asli) */
        .id-card-print {
            width: 85.6mm;
            height: 53.98mm;
            position: relative;
            background: linear-gradient(135deg, var(--primary-blue) 0%, var(--secondary-blue) 100%);
            border-radius: 3.5mm;
            overflow: hidden;
            color: white;
            display: flex;
            flex-direction: column;
            font-family: 'Montserrat', sans-serif;
            -webkit-print-color-adjust: exact;
            print-color-adjust: exact;
        }
        
        .print-bg-pattern {
            position: absolute;
            top: 0; left: 0; right: 0; bottom: 0;
            opacity: 0.1;
            background-image: radial-gradient(circle at 2px 2px, white 1px, transparent 0);
            background-size: 15px 15px;
            z-index: 1;
        }
        
        .print-wave {
            position: absolute;
            bottom: 0; left: 0; right: 0;
            height: 30%;
            background: rgba(255, 255, 255, 0.08);
            clip-path: polygon(0 50%, 100% 0, 100% 100%, 0% 100%);
            z-index: 1;
        }
    

/* KARTU SIMULASI - CLASS TERPISAH */
.id-card-wrapper.simulation-card {
    opacity: 0.9;
    position: relative;
    background: linear-gradient(135deg, #6c757d 0%, #495057 100%) !important;
}

/* BACKGROUND PATTERN UNTUK SIMULASI */
.id-card-wrapper.simulation-card .card-bg-pattern {
    opacity: 0.08;
    background-image: radial-gradient(circle at 2px 2px, white 1px, transparent 0);
}

.id-card-wrapper.simulation-card .card-wave {
    background: rgba(255, 255, 255, 0.05);
}

/* WATERMARK HANYA UNTUK KARTU SIMULASI */
.id-card-wrapper.simulation-card .card-watermark {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) rotate(-45deg);
    font-size: 20pt;
    font-weight: 800;
    color: rgba(255, 255, 255, 0.1);
    z-index: 5;
    pointer-events: none;
    white-space: nowrap;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    text-shadow: 0 2px 4px rgba(0,0,0,0.3);
    font-family: 'Montserrat', sans-serif;
}

.id-card-wrapper.simulation-card .card-watermark i {
    margin-right: 8px;
    font-size: 18pt;
}

.card-bg-pattern {
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    opacity: 0.1;
    background-image: radial-gradient(circle at 2px 2px, white 1px, transparent 0);
    background-size: 15px 15px;
    z-index: 1;
}

.card-wave {
    position: absolute;
    bottom: 0; left: 0; right: 0;
    height: 30%;
    background: rgba(255, 255, 255, 0.08);
    clip-path: polygon(0 50%, 100% 0, 100% 100%, 0% 100%);
    z-index: 1;
}

.card-header-area {
    position: relative;
    z-index: 10;
    padding: 2.5mm 4mm;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 0.5px solid rgba(255,255,255,0.2);
    height: 15.5mm; 
}

/* HEADER BORDER UNTUK SIMULASI */
.id-card-wrapper.simulation-card .card-header-area {
    border-bottom: 0.5px solid rgba(255,255,255,0.15);
}

.header-left {
    display: flex;
    align-items: center;
}

.org-logo {
    width: 9.5mm; 
    height: 9.5mm;
    background: white;
    border-radius: 50%;
    display: flex; 
    align-items: center; 
    justify-content: center;
    margin-right: 3mm;
    color: var(--primary-blue);
    font-size: 14px;
    border: 1.2px solid var(--accent-gold);
}

/* LOGO UNTUK SIMULASI */
.id-card-wrapper.simulation-card .org-logo {
    background: #f8f9fa;
    color: #6c757d;
    border: 1.2px solid #adb5bd;
}

.org-title { 
    font-size: 10.5pt; 
    font-weight: 800; 
    letter-spacing: 0.6px; 
    text-transform: uppercase; 
    line-height: 1; 
}

.org-subtitle { 
    font-size: 4.8pt; 
    opacity: 1; 
    margin-top: 1.5px; 
    line-height: 1; 
    font-weight: 600;
    letter-spacing: 0.1px;
}

.header-right {
    display: flex;
    align-items: center;
}

.qr-header-box {
    width: 11.5mm; 
    height: 11.5mm;
    background: white;
    padding: 0.8mm;
    border-radius: 1mm;
    box-shadow: 0 1px 4px rgba(0,0,0,0.3);
}

.qr-header-box img { 
    width: 100%; 
    height: 100%; 
    display: block; 
}

/* QR SIMULASI HANYA UNTUK KARTU SIMULASI */
.id-card-wrapper.simulation-card .qr-header-box {
    background: #f8f9fa;
    box-shadow: 0 1px 4px rgba(0,0,0,0.2);
}

.id-card-wrapper.simulation-card .qr-simulation {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #e9ecef;
    border-radius: 0.5mm;
    color: #adb5bd;
}

.id-card-wrapper.simulation-card .qr-simulation i {
    font-size: 18px;
    opacity: 0.6;
}

.card-body-area {
    position: relative;
    z-index: 10;
    display: flex;
    padding: 3mm 4mm;
    flex: 1;
}

.left-col {
    width: 18mm;
    margin-right: 4.5mm;
    display: flex;
    flex-direction: column;
    align-items: center;
    flex-shrink: 0;
}

.photo-area {
    width: 18mm;
    height: 22.5mm;
    background-color: #eee;
    border: 1.5px solid white;
    border-radius: 1.5mm;
    overflow: hidden;
    box-shadow: 0 2px 5px rgba(0,0,0,0.3);
    margin-bottom: 1.5mm;
}

.photo-area img { 
    width: 100%; 
    height: 100%; 
    object-fit: cover; 
}

/* FOTO SIMULASI HANYA UNTUK KARTU SIMULASI */
.id-card-wrapper.simulation-card .photo-area.simulation-photo {
    background-color: #e9ecef;
    border: 1.5px solid rgba(255, 255, 255, 0.5);
    box-shadow: 0 2px 5px rgba(0,0,0,0.2);
}

.id-card-wrapper.simulation-card .photo-placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    color: #6c757d;
}

.id-card-wrapper.simulation-card .photo-placeholder i {
    font-size: 32px;
    opacity: 0.6;
}

.status-badge {
    background: var(--accent-gold);
    color: var(--primary-blue);
    font-size: 4.5pt;
    font-weight: 800;
    padding: 1.2mm 0;
    width: 100%;
    text-align: center;
    border-radius: 0.8mm;
    text-transform: uppercase;
    line-height: 1;
}

/* STATUS NON-AKTIF HANYA UNTUK KARTU SIMULASI */
.id-card-wrapper.simulation-card .status-inactive {
    background: #495057 !important;
    color: #e9ecef !important;
    font-size: 4.5pt;
    font-weight: 800;
    padding: 1.2mm 0;
    width: 100%;
    text-align: center;
    border-radius: 0.8mm;
    text-transform: uppercase;
    line-height: 1;
    border: 1px solid rgba(255, 255, 255, 0.2);
}

.expiry-text {
    font-size: 3.5pt;
    font-weight: 600;
    margin-top: 0.8mm;
    text-transform: uppercase;
    letter-spacing: 0.2px;
    opacity: 0.9;
}

/* EXPIRY TEXT UNTUK SIMULASI */
.id-card-wrapper.simulation-card .expiry-text {
    color: rgba(255, 255, 255, 0.7);
}

.right-col {
    flex: 1;
    display: flex;
    flex-direction: column;
    position: relative;
    min-width: 0;
}

.data-item { 
    margin-bottom: 1.2mm; 
}

.label-text { 
    font-size: 4pt; 
    text-transform: uppercase; 
    opacity: 0.8; 
    font-weight: 700; 
    margin-bottom: 0.3mm; 
}

/* LABEL TEXT UNTUK SIMULASI */
.id-card-wrapper.simulation-card .label-text {
    opacity: 0.7;
    color: rgba(255, 255, 255, 0.8);
}

.value-text { 
    font-size: 7.2pt; 
    font-weight: 700; 
    line-height: 1.1; 
}

/* TEKS SIMULASI HANYA UNTUK KARTU SIMULASI */
.id-card-wrapper.simulation-card .text-muted {
    color: rgba(255, 255, 255, 0.6) !important;
    opacity: 0.8;
}

.value-name {
    font-size: 8pt;
    font-weight: 800;
    color: var(--accent-gold);
    line-height: 1.1;
    display: block;
    word-wrap: break-word;
    max-width: 100%;
    margin-top: 0.3mm;
}

.id-card-wrapper.simulation-card .value-name.text-muted {
    color: rgba(255, 255, 255, 0.7) !important;
    text-shadow: 0 1px 2px rgba(0,0,0,0.2);
}

.value-address {
    font-size: 5.2pt;
    font-weight: 500;
    white-space: normal;
    line-height: 1.2;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    margin-top: 0.3mm;
    text-align: justify;
}

.id-card-wrapper.simulation-card .value-address.text-muted {
    opacity: 0.7;
    color: rgba(255, 255, 255, 0.65);
}

/* STYLE UMUM UNTUK TOMBOL DAN ALERT */
.btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    pointer-events: none;
}

.alert {
    
    padding: 8px 12px;
    border-radius: 4px;
    font-size: 12px;
    margin-bottom: 12px;
    
}
    
}
.alert-warning {
    background-color: rgba(255, 193, 7, 0.1);
    border-color: rgba(255, 193, 7, 0.3);
    color: #ffc107;
}

.alert-warning i {
    font-size: 14px;
}

/* Responsive adjustments untuk dashboard */
@media (max-width: 768px) {
    .id-card-wrapper {
        transform: scale(0.85);
        transform-origin: center;
    }
    
    .id-card-wrapper.simulation-card {
        transform: scale(0.85);
        transform-origin: center;
    }
    
    .id-card-wrapper.simulation-card .card-watermark {
        font-size: 16pt;
    }
}

@media (max-width: 576px) {
    .id-card-wrapper {
        transform: scale(0.75);
        transform-origin: center;
    }
    
    .id-card-wrapper.simulation-card {
        transform: scale(0.75);
        transform-origin: center;
    }
    
    .id-card-wrapper.simulation-card .card-watermark {
        font-size: 14pt;
    }
    
    .alert-warning {
        font-size: 11px;
        padding: 6px 10px;
    }
}
</style>
</head>
<body class="d-flex flex-column min-vh-100">

    <?= inc('navbar') ?>

    <!-- MAIN CONTENT -->
    <main class="flex-grow-1">
        <div class="container-xl py-5">
            <!-- Dashboard Content -->
            <div id="dashboard-content">
                <div class="row g-4">
                    <!-- Sidebar -->
                    <div class="col-md-3">
                        <div class="card border-0 shadow-sm rounded-4 mb-4 text-center p-4">
                            <div class="bg-primary bg-opacity-10 text-primary rounded-circle mx-auto d-flex align-items-center justify-content-center fw-bold display-4 mb-3" style="width: 80px; height: 80px;" id="dashboard-avatar">
                                <?php echo strtoupper(substr($user_name, 0, 1)); ?>
                            </div>
                            <h5 class="fw-bold m-0" id="dashboard-name"><?php echo htmlspecialchars($user_name); ?></h5>
                            <p class="text-muted small mb-3" id="dashboard-inst"><?php echo htmlspecialchars($user_institution); ?></p>
                            <div>
                                <span id="dashboard-status-badge" class="badge bg-<?php echo $angg['aktif']=="Y" ? "success" : "warning" ?> rounded-pill">
                                    <?php echo $angg['aktif']=="Y" ? "Anggota Aktif" : "Non Member" ?>
                                </span>
                            </div>
                        </div>

                        <div class="list-group shadow-sm rounded-4 border-0 overflow-hidden">
                            <button onclick="switchDashboardTab('overview')" class="list-group-item list-group-item-action border-0 py-3 px-4 d-flex align-items-center gap-3 active" id="tab-btn-overview">
                                <i data-lucide="user" width="18"></i> Profil & Keanggotaan
                            </button>
                            <button onclick="switchDashboardTab('seminars')" class="list-group-item list-group-item-action border-0 py-3 px-4 d-flex align-items-center gap-3" id="tab-btn-seminars">
                                <i data-lucide="book-open" width="18"></i> Seminar Saya
                            </button>
                            <button onclick="switchDashboardTab('certificate')" class="list-group-item list-group-item-action border-0 py-3 px-4 d-flex align-items-center gap-3" id="tab-btn-certificate">
                                <i data-lucide="award" width="18"></i> Sertifikat
                            </button>
                            <button onclick="window.location.href='?logout=1'" class="list-group-item list-group-item-action border-0 py-3 px-4 d-flex align-items-center gap-3 text-danger">
                                <i data-lucide="log-out" width="18"></i> Logout
                            </button>
                        </div>
                    </div>

                    <!-- Content -->
                    <div class="col-md-9">
                        
                        <!-- TAB: OVERVIEW -->
                        <div id="tab-overview" class="dashboard-tab d-block">
                            <!-- Stats Cards -->
                            <div class="row g-3 mb-4">
                                <div class="col-md-4">
                                    <div class="card border-0 shadow-sm rounded-4 h-100">
                                        <div class="card-body p-3">
                                            <div class="d-flex align-items-center justify-content-between">
                                                <div>
                                                    <small class="text-muted d-block">Seminar Diikuti</small>
                                                    <h4 class="fw-bold m-0" id="stat-seminars"><?php echo $seminar_count; ?></h4>
                                                </div>
                                                <div class="bg-primary bg-opacity-10 p-2 rounded-circle text-primary">
                                                    <i data-lucide="book-open" width="24"></i>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-md-4">
                                    <div class="card border-0 shadow-sm rounded-4 h-100">
                                        <div class="card-body p-3">
                                            <div class="d-flex align-items-center justify-content-between">
                                                <div>
                                                    <small class="text-muted d-block">Sertifikat</small>
                                                    <h4 class="fw-bold m-0" id="stat-certificates"><?php echo $certificate_count; ?></h4>
                                                </div>
                                                <div class="bg-success bg-opacity-10 p-2 rounded-circle text-success">
                                                    <i data-lucide="award" width="24"></i>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-md-4">
                                    <div class="card border-0 shadow-sm rounded-4 h-100">
                                        <div class="card-body p-3">
                                            <div class="d-flex align-items-center justify-content-between">
                                                <div>
                                                    <small class="text-muted d-block">Status Anggota</small>
                                                    <h4 class="fw-bold m-0" id="stat-membership"><?php echo $angg['aktif']=="Y" ? "Anggota Aktif" : "Non Member" ?></h4>
                                                </div>
                                                <div class="bg-warning bg-opacity-10 p-2 rounded-circle text-warning">
                                                    <i data-lucide="users" width="24"></i>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            
                            <!-- Kartu Anggota & Profile -->
                            <div class="row g-4">
                               
                                <div class="col-md-7">
                                    <div class="card border-0 shadow-sm rounded-4 h-100">
                                        <div class="card-header bg-white border-0 pt-4 px-4">
                                            <h5 class="fw-bold m-0">Kartu Anggota Digital</h5>
                                        </div>
                                        <div class="card-body p-4">
                                            
                                            <?php if($angg['aktif']=="Y"){ ?>
                                            <!-- Kartu Anggota Digital (SAMA PERSIS DENGAN CONTOH) -->
                                            <div id="digital-member-card">
                                                <div id="cardCapture">
                                                    <div class="id-card-wrapper">
                                                        <div class="card-bg-pattern"></div>
                                                        <div class="card-wave"></div>

                                                        <!-- Header -->
                                                        <div class="card-header-area">
                                                            <div class="header-left">
                                                                <div class="org-logo"><i class="fas fa-book-open"></i></div>
                                                                <div>
                                                                    <div class="org-title">PAPENTARA</div>
                                                                    <div class="org-subtitle">Perkumpulan Afirmasi Pengajar Nusantara</div>
                                                                </div>
                                                            </div>
                                                            <div class="header-right">
                                                                <div class="qr-header-box">
                                                                    <img id="qrImage" src="https://api.qrserver.com/v1/create-qr-code/?size=150x150&data=<?php echo urlencode($member_card_data['qrData']); ?>" alt="QR">
                                                                </div>
                                                            </div>
                                                        </div>

                                                        <!-- Body -->
                                                        <div class="card-body-area">
                                                            <div class="left-col">
                                                                <div class="photo-area">
                                                                    <img id="displayPhoto" src="<?php echo htmlspecialchars($member_card_data['photo']); ?>" alt="User">
                                                                </div>
                                                                <div class="status-badge" id="displayStatus"><?php echo $member_card_data['status']; ?></div>
                                                                <div class="expiry-text" id="displayExp">Exp. <?php echo $member_card_data['expiry']; ?></div>
                                                            </div>

                                                            <div class="right-col">
                                                                <div class="data-item">
                                                                    <div class="label-text">No. Anggota</div>
                                                                    <div class="value-text" id="displayID"><?php echo htmlspecialchars($member_card_data['id']); ?></div>
                                                                </div>

                                                                <div class="data-item">
                                                                    <div class="label-text">Nama Lengkap</div>
                                                                    <div class="value-name" id="displayName"><?php echo htmlspecialchars($member_card_data['name']); ?></div>
                                                                </div>

                                                                <div class="data-item">
                                                                    <div class="label-text">Afiliasi</div>
                                                                    <div class="value-text" id="displayAff"><?php echo htmlspecialchars($member_card_data['affiliation']); ?></div>
                                                                </div>

                                                                <div class="data-item">
                                                                    <div class="label-text">Alamat</div>
                                                                    <div class="value-address" id="displayAddr">
                                                                        <?php echo htmlspecialchars($member_card_data['address']); ?>
                                                                    </div>
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                                
                                                <div class="text-center mt-4">
                                                    <button onclick="downloadCardImage()" class="btn btn-outline-primary btn-sm me-2">
                                                        <i data-lucide="download" width="14" class="inline me-1"></i> Download Kartu
                                                    </button>
                                                </div>
                                            </div>
                                            <?php } else { ?>
                                            <!-- SIMULASI KARTU (NON-AKTIF) -->
    <div id="simulation-member-card">
        <div class="id-card-wrapper simulation-card">
            <div class="card-bg-pattern"></div>
            <div class="card-wave"></div>

            <!-- Header -->
            <div class="card-header-area">
                <div class="header-left">
                    <div class="org-logo"><i class="fas fa-book-open"></i></div>
                    <div>
                        <div class="org-title">PAPENTARA</div>
                        <div class="org-subtitle">Perkumpulan Afirmasi Pengajar Nusantara</div>
                    </div>
                </div>
                <div class="header-right">
                    <div class="qr-header-box"> 
                                                                    <img id="qrImage" src="https://api.qrserver.com/v1/create-qr-code/?size=150x150&data=<?php echo urlencode('simulasi'); ?>" alt="QR">
                                                                 
                    </div>
                </div>
            </div>

            <!-- Body -->
            <div class="card-body-area">
                <div class="left-col">
                    <div class="photo-area simulation-photo">
                        <img id="displayPhoto" src="<?php echo htmlspecialchars($member_card_data['photo']); ?>" alt="User">
                    </div>
                    <div class="status-badge status-inactive">NON-AKTIF</div>
                    <div class="expiry-text text-muted">Exp. --/--/----</div>
                </div>

                <div class="right-col">
                    <div class="data-item">
                        <div class="label-text">No. Anggota</div>
                        <div class="value-text text-muted">-----</div>
                    </div>

                    <div class="data-item">
                        <div class="label-text">Nama Lengkap</div>
                        <div class="value-name text-muted"><?php echo htmlspecialchars($member_card_data['name']); ?></div>
                    </div>

                    <div class="data-item">
                        <div class="label-text">Afiliasi</div>
                        <div class="value-text text-muted"><?php echo htmlspecialchars($member_card_data['affiliation']); ?></div>
                    </div>

                    <div class="data-item">
                        <div class="label-text">Alamat</div>
                        <div class="value-address text-muted">
                            <?php echo htmlspecialchars($member_card_data['address']); ?>
                        </div>
                    </div>
                </div>
            </div>
            
            <!-- Watermark -->
            <div class="card-watermark">
                <i class="fas fa-lock"></i> SIMULASI KARTU
            </div>
        </div>
        
        <div class="text-center mt-4">
            <div class="alert alert-warning mb-3">
                <i class="fas fa-info-circle me-2"></i>
                Kartu anggota akan aktif setelah proses registrasi keanggotaan
            </div>
            
            <button class="btn btn-outline-secondary btn-sm me-2 mb-1" disabled>
                <i data-lucide="download" width="14" class="inline me-1"></i> Download Kartu (Tidak Tersedia)
            </button>
            <a href="../keanggotaan" class="btn btn-primary btn-sm mb-1">
                <i class="fas fa-user-plus me-1"></i> Aktifkan Keanggotaan
            </a>
            
            
            <div class="alert alert-info mb-3 mt-3">
                <i class="fas fa-info-circle me-2"></i>
                Tanpa keanggotaan anda tetap bisa mengikuti seminar, <a href="../seminars">Lihat Seminar Disini</a>
            </div>
        </div>
    </div>
    
                                             
                                            <?php } ?>
                                        </div>
                                    </div>
                                    
                                    
                                </div>
                                
                                <div class="col-md-5">
                                    <div class="card border-0 shadow-sm rounded-4 h-100">
                                        <div class="card-header bg-white border-0 pt-4 px-4">
                                            <h5 class="fw-bold m-0">Informasi Profil</h5>
                                        </div>
                                        <div class="card-body p-4">
                                            <ul class="list-unstyled d-flex flex-column gap-3">
                                                <li>
                                                    <small class="text-muted d-block">Nama Lengkap</small>
                                                    <span class="fw-medium" id="profile-name"><?php echo htmlspecialchars($user_name); ?></span>
                                                </li>
                                                <li>
                                                    <small class="text-muted d-block">Email</small>
                                                    <span class="fw-medium" id="profile-email"><?php echo htmlspecialchars($user_email); ?></span>
                                                </li>
                                                <li>
                                                    <small class="text-muted d-block">Nomor WhatsApp</small>
                                                    <span class="fw-medium" id="profile-phone"><?php echo htmlspecialchars($user_phone); ?></span>
                                                </li>
                                                <li>
                                                    <small class="text-muted d-block">Institusi</small>
                                                    <span class="fw-medium" id="profile-institution"><?php echo htmlspecialchars($user_institution); ?></span>
                                                </li>
                                                <li>
                                                    <small class="text-muted d-block">Tanggal Register Akun</small>
                                                    <span class="fw-medium" id="profile-join-date"><?php echo date('d/m/Y', strtotime($join_date)); ?></span>
                                                </li>
                                                <li>
                                                    <small class="text-muted d-block">No. Anggota</small>
                                                    <span class="fw-medium" id="profile-member-id"><?php if($angg['aktif']=="Y"){ echo htmlspecialchars($member_id); } else { echo "Non Member, <a href='./keadnggotaan'>Daftar</a>"; } ?></span>
                                                </li>
                                        <?php if($angg['aktif']=="Y"){ ?>
                                                <li>
                                                    <small class="text-muted d-block">Masa Berlaku</small>
                                                    <span class="fw-medium" id="profile-expiry"><?php echo $member_expiry; ?></span>
                                                </li>
                                        <?php } ?>        
                                            </ul>
                                            
                                            <hr class="my-4">
                                            
                                            <div class="d-grid">
                                                <button class="btn btn-outline-primary" onclick="showToast('Fitur edit profil akan segera tersedia', 'info')">
                                                    <i data-lucide="edit" width="14" class="inline me-1"></i> Edit Profil
                                                </button>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <!-- TAB: SEMINARS -->
                        <div id="tab-seminars" class="dashboard-tab d-none">
                            <div class="d-flex justify-content-between align-items-center mb-4">
                                <h5 class="fw-bold m-0">Seminar Diikuti</h5>
                                <a href="seminars.php" class="btn btn-outline-primary btn-sm">
                                    <i data-lucide="plus" width="14" class="inline me-1"></i> Daftar Seminar Baru
                                </a>
                            </div>
                            
                            <div class="mb-4">
                                <div class="btn-group" role="group">
                                    <button type="button" class="btn btn-outline-primary active" onclick="filterSeminars('all')">Semua</button>
                                    <button type="button" class="btn btn-outline-primary" onclick="filterSeminars('upcoming')">Akan Datang</button>
                                    <button type="button" class="btn btn-outline-primary" onclick="filterSeminars('completed')">Selesai</button>
                                </div>
                            </div>
                            
                            <div id="dashboard-seminar-list" class="d-flex flex-column gap-3">
                                <!-- Seminar list akan diisi oleh JavaScript -->
                            </div>
                            
                            <div id="seminar-empty-state" class="text-center py-5 <?php echo $seminar_count > 0 ? 'd-none' : ''; ?>">
                                <div class="bg-light rounded-circle d-inline-flex p-3 mb-3">
                                    <i data-lucide="calendar-x" class="text-muted" width="48" height="48"></i>
                                </div>
                                <h5 class="fw-bold text-muted">Belum ada seminar yang diikuti</h5>
                                <p class="text-muted mb-4">Daftar sekarang untuk mengikuti seminar dan pelatihan</p>
                                <a href="seminars.php" class="btn btn-primary">Lihat Seminar</a>
                            </div>
                        </div>

                        <!-- TAB: CERTIFICATES -->
                        <div id="tab-certificate" class="dashboard-tab d-none">
                            <div class="d-flex justify-content-between align-items-center mb-4">
                                <h5 class="fw-bold m-0">Arsip Sertifikat</h5>
                                <div class="text-muted small">
                                    <i data-lucide="info" width="14" class="inline me-1"></i> Klik download untuk mengunduh sertifikat
                                </div>
                            </div>
                            
                            <div id="dashboard-cert-list">
                                <!-- Certificate list akan diisi oleh JavaScript -->
                            </div>
                            
                            <div id="certificate-empty-state" class="text-center py-5 <?php echo $certificate_count > 0 ? 'd-none' : ''; ?>">
                                <div class="bg-light rounded-circle d-inline-flex p-3 mb-3">
                                    <i data-lucide="file-text" class="text-muted" width="48" height="48"></i>
                                </div>
                                <h5 class="fw-bold text-muted">Belum ada sertifikat</h5>
                                <p class="text-muted mb-4">Sertifikat akan tersedia setelah Anda menyelesaikan seminar</p>
                            </div>
                        </div>

                    </div>
                </div>
            </div>
        </div>
    </main>

    <?= inc('footer') ?>

    <!-- Bootstrap Bundle JS -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"></script>
    
    <!-- HTML2Canvas untuk download kartu -->
    <script src="https://html2canvas.hertzen.com/dist/html2canvas.min.js"></script>

    <script>
        // Data dari PHP ke JavaScript
        const memberCardData = <?php echo json_encode($member_card_data); ?>;
        const currentUser = {
            name: "<?php echo addslashes($user_name); ?>",
            email: "<?php echo addslashes($user_email); ?>",
            phone: "<?php echo addslashes($user_phone); ?>",
            institution: "<?php echo addslashes($user_institution); ?>",
            memberSince: "<?php echo $join_date; ?>",
            isMember: true,
            joinedSeminars: [1, 2, 3, 4, 5]
        };

        // Data dummy seminar untuk demo
        const MOCK_SEMINARS = [
            {
                id: 1,
                title: "Strategi Pembelajaran Abad 21",
                date: "15 Januari 2024",
                time: "09:00 - 12:00 WIB",
                status: "Selesai",
                type: "Webinar",
                image: "https://placehold.co/150x150"
            },
            {
                id: 2,
                title: "Penggunaan Teknologi dalam Pendidikan",
                date: "20 Februari 2024",
                time: "13:00 - 16:00 WIB",
                status: "Open",
                type: "Workshop",
                image: "https://placehold.co/150x150"
            },
            {
                id: 3,
                title: "Kurikulum Merdeka Belajar",
                date: "5 Maret 2024",
                time: "10:00 - 15:00 WIB",
                status: "Selesai",
                type: "Seminar",
                image: "https://placehold.co/150x150"
            }
        ];

        document.addEventListener('DOMContentLoaded', function() {
            lucide.createIcons();
            renderDashboardData();
        });
        
        function createPrintCardElement() {
            // Buat elemen kartu untuk print/download dengan ukuran asli
            const printCard = document.createElement('div');
            printCard.className = 'id-card-print';
            printCard.innerHTML = `
                <div class="print-bg-pattern"></div>
                <div class="print-wave"></div>
                
                <div class="card-header-area" style="padding: 2.5mm 4mm; height: 15.5mm;">
                    <div class="header-left">
                        <div class="org-logo" style="width: 9.5mm; height: 9.5mm; font-size: 14px;">
                            <i class="fas fa-book-open"></i>
                        </div>
                        <div>
                            <div class="org-title" style="font-size: 10.5pt;">PAPENTARA</div>
                            <div class="org-subtitle" style="font-size: 4.8pt;">Perkumpulan Afirmasi Pengajar Nusantara</div>
                        </div>
                    </div>
                    <div class="header-right">
                        <div class="qr-header-box" style="width: 11.5mm; height: 11.5mm;">
                            <img src="${document.getElementById('qrImage').src}" alt="QR">
                        </div>
                    </div>
                </div>
                
                <div class="card-body-area" style="padding: 3mm 4mm;">
                    <div class="left-col" style="width: 18mm; margin-right: 4.5mm;">
                        <div class="photo-area" style="width: 18mm; height: 22.5mm;">
                            <img src="${document.getElementById('displayPhoto').src}" alt="User">
                        </div>
                        <div class="status-badge" style="font-size: 4.5pt; padding: 1.2mm 0;">${document.getElementById('displayStatus').textContent}</div>
                        <div class="expiry-text" style="font-size: 3.5pt;">${document.getElementById('displayExp').textContent}</div>
                    </div>
                    
                    <div class="right-col">
                        <div class="data-item">
                            <div class="label-text" style="font-size: 4pt;">No. Anggota</div>
                            <div class="value-text" style="font-size: 7.2pt;">${document.getElementById('displayID').textContent}</div>
                        </div>
                        
                        <div class="data-item">
                            <div class="label-text" style="font-size: 4pt;">Nama Lengkap</div>
                            <div class="value-name" style="font-size: 8pt; color: #FFD700;">${document.getElementById('displayName').textContent}</div>
                        </div>
                        
                        <div class="data-item">
                            <div class="label-text" style="font-size: 4pt;">Afiliasi</div>
                            <div class="value-text" style="font-size: 7.2pt;">${document.getElementById('displayAff').textContent}</div>
                        </div>
                        
                        <div class="data-item">
                            <div class="label-text" style="font-size: 4pt;">Alamat</div>
                            <div class="value-address" style="font-size: 5.2pt;">${document.getElementById('displayAddr').textContent}</div>
                        </div>
                    </div>
                </div>
            `;
            
            return printCard;
        }
        
        function downloadCardImage() {
            // Buat elemen kartu untuk print
            const printCard = createPrintCardElement();
            
            // Tambahkan ke body secara tersembunyi
            printCard.style.position = 'fixed';
            printCard.style.left = '-1000px';
            printCard.style.top = '-1000px';
            document.body.appendChild(printCard);
            
            // Tunggu sebentar untuk memastikan elemen sudah dirender
            setTimeout(() => {
                html2canvas(printCard, {
                    scale: 4,
                    useCORS: true,
                    backgroundColor: null,
                    logging: false,
                    width: printCard.offsetWidth,
                    height: printCard.offsetHeight
                }).then(canvas => {
                    const link = document.createElement('a');
                    const fileName = `Kartu_Anggota_PAPENTARA_${memberCardData.name.substring(0, 15).replace(/\s+/g, '_')}.png`;
                    link.download = fileName;
                    link.href = canvas.toDataURL('image/png');
                    link.click();
                    
                    // Hapus elemen print dari DOM
                    document.body.removeChild(printCard);
                    
                    // Show success message
                    showToast('Kartu anggota berhasil diunduh!', 'success');
                }).catch(error => {
                    console.error('Error generating card image:', error);
                    showToast('Gagal mengunduh kartu', 'error');
                    document.body.removeChild(printCard);
                });
            }, 100);
        }
        
        function shareCard() {
            if (navigator.share) {
                navigator.share({
                    title: 'Kartu Anggota PAPENTARA',
                    text: `Kartu anggota digital ${memberCardData.name}`,
                    url: window.location.href
                }).then(() => {
                    showToast('Berhasil membagikan kartu!', 'success');
                }).catch(err => {
                    console.log('Error sharing:', err);
                    showToast('Gagal membagikan kartu', 'error');
                });
            } else {
                // Fallback: copy to clipboard
                const cardData = `Kartu Anggota PAPENTARA\nNama: ${memberCardData.name}\nNo. Anggota: ${memberCardData.id}\nStatus: ${memberCardData.status}`;
                navigator.clipboard.writeText(cardData).then(() => {
                    showToast('Data kartu disalin ke clipboard!', 'success');
                });
            }
        }
        
        function printCard() {
            // Buat elemen kartu untuk print
            const printCard = createPrintCardElement();
            
            // Buat window untuk print
            const printWindow = window.open('', '_blank');
            printWindow.document.write(`
                <!DOCTYPE html>
                <html>
                <head>
                    <title>Cetak Kartu Anggota PAPENTARA</title>
                    <style>
                        @import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600;700;800&display=swap');
                        body { 
                            margin: 0; 
                            padding: 20px; 
                            display: flex; 
                            justify-content: center; 
                            align-items: center; 
                            min-height: 100vh;
                            background: #f5f5f5;
                        }
                        @media print {
                            body { 
                                padding: 0; 
                                background: white;
                            }
                        }
                    </style>
                    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
                </head>
                <body>
                    ${printCard.outerHTML}
                    <script>
                        window.onload = function() {
                            setTimeout(() => {
                                window.print();
                                setTimeout(() => {
                                    window.close();
                                }, 500);
                            }, 500);
                        }
                    <\/script>
                </body>
                </html>
            `);
            printWindow.document.close();
        }
        
        function showToast(message, type = 'info') {
            const toastEl = document.getElementById('liveToast');
            const toastMessage = document.getElementById('toast-message');
            
            toastMessage.textContent = message;
            
            // Set color based on type
            if (type === 'success') {
                toastEl.style.backgroundColor = '#198754';
            } else if (type === 'error') {
                toastEl.style.backgroundColor = '#dc3545';
            } else {
                toastEl.style.backgroundColor = '#0d6efd';
            }
            
            const toast = new bootstrap.Toast(toastEl);
            toast.show();
        }
        
        function renderDashboardData() {
            // Render user's seminars
            renderUserSeminars();
            
            // Render certificates
            renderUserCertificates();
        }
        
        function renderUserSeminars() {
            const container = document.getElementById('dashboard-seminar-list');
            const emptyState = document.getElementById('seminar-empty-state');
            
            // Untuk demo, tampilkan semua seminar
            if (MOCK_SEMINARS.length === 0) {
                container.innerHTML = '';
                container.classList.add('d-none');
                emptyState.classList.remove('d-none');
                return;
            }
            
            container.classList.remove('d-none');
            emptyState.classList.add('d-none');
            
            container.innerHTML = MOCK_SEMINARS.map(s => `
                <div class="card border-0 shadow-sm rounded-3 overflow-hidden">
                    <div class="card-body p-3 d-flex flex-column flex-md-row gap-3 align-items-center">
                        <img src="${s.image}" class="rounded object-fit-cover" width="80" height="80">
                        <div class="flex-grow-1 text-center text-md-start">
                            <h6 class="fw-bold mb-1">${s.title}</h6>
                            <small class="text-muted">${s.date} | ${s.time}</small>
                            <div class="mt-1">
                                <span class="badge ${s.status === 'Open' ? 'bg-success' : 'bg-secondary'}">${s.status}</span>
                                <span class="badge bg-primary">${s.type}</span>
                            </div>
                        </div>
                        <div class="d-flex flex-column gap-2">
                            ${s.status === 'Open' 
                                ? '<button class="btn btn-outline-primary btn-sm rounded-pill px-3" onclick="showToast(\'Link Zoom akan dikirim via email 1 jam sebelum seminar\', \'info\')">Link Zoom</button>'
                                : '<button class="btn btn-outline-success btn-sm rounded-pill px-3" onclick="showToast(\'Sertifikat tersedia di tab Sertifikat\', \'info\')">Lihat Sertifikat</button>'
                            }
                            <button class="btn btn-outline-secondary btn-sm rounded-pill px-3" onclick="showToast(\'Detail seminar\', \'info\')">Detail</button>
                        </div>
                    </div>
                </div>
            `).join('');
            
            lucide.createIcons();
        }
        
        function renderUserCertificates() {
            const container = document.getElementById('dashboard-cert-list');
            const emptyState = document.getElementById('certificate-empty-state');
            
            // Filter hanya seminar yang selesai
            const completedSeminars = MOCK_SEMINARS.filter(s => s.status === 'Selesai');
            
            if (completedSeminars.length === 0) {
                container.innerHTML = '';
                emptyState.classList.remove('d-none');
                return;
            }
            
            emptyState.classList.add('d-none');
            
            container.innerHTML = completedSeminars.map(s => `
                <div class="card border-0 shadow-sm rounded-3 p-3 mb-3">
                    <div class="d-flex align-items-center justify-content-between">
                        <div class="d-flex align-items-center gap-3">
                            <div class="bg-success bg-opacity-10 p-2 rounded-circle text-success">
                                <i data-lucide="award" width="24"></i>
                            </div>
                            <div>
                                <h6 class="fw-bold mb-1">${s.title}</h6>
                                <small class="text-muted">Diterbitkan: ${s.date}</small>
                                <div class="mt-1">
                                    <span class="badge bg-light text-dark small">No: CERT-${s.id.toString().padStart(5, '0')}</span>
                                </div>
                            </div>
                        </div>
                        <div class="d-flex gap-2">
                            <button class="btn btn-outline-secondary btn-sm" onclick="showToast('Preview sertifikat', 'info')">
                                <i data-lucide="eye" width="14" class="inline me-1"></i> Preview
                            </button>
                            <button class="btn btn-primary btn-sm" onclick="showToast('Sertifikat berhasil diunduh', 'success')">
                                <i data-lucide="download" width="14" class="inline me-1"></i> PDF
                            </button>
                        </div>
                    </div>
                </div>
            `).join('');
            
            lucide.createIcons();
        }
        
        function filterSeminars(filterType) {
            // Update active button
            document.querySelectorAll('#tab-seminars .btn-group .btn').forEach(btn => {
                btn.classList.remove('active');
            });
            event.target.classList.add('active');
            
            // Filter seminar berdasarkan tipe
            let filteredSeminars = MOCK_SEMINARS;
            if (filterType === 'upcoming') {
                filteredSeminars = MOCK_SEMINARS.filter(s => s.status === 'Open');
            } else if (filterType === 'completed') {
                filteredSeminars = MOCK_SEMINARS.filter(s => s.status === 'Selesai');
            }
            
            const container = document.getElementById('dashboard-seminar-list');
            const emptyState = document.getElementById('seminar-empty-state');
            
            if (filteredSeminars.length === 0) {
                container.innerHTML = '';
                container.classList.add('d-none');
                emptyState.classList.remove('d-none');
                return;
            }
            
            container.classList.remove('d-none');
            emptyState.classList.add('d-none');
            
            container.innerHTML = filteredSeminars.map(s => `
                <div class="card border-0 shadow-sm rounded-3 overflow-hidden">
                    <div class="card-body p-3 d-flex flex-column flex-md-row gap-3 align-items-center">
                        <img src="${s.image}" class="rounded object-fit-cover" width="80" height="80">
                        <div class="flex-grow-1 text-center text-md-start">
                            <h6 class="fw-bold mb-1">${s.title}</h6>
                            <small class="text-muted">${s.date} | ${s.time}</small>
                            <div class="mt-1">
                                <span class="badge ${s.status === 'Open' ? 'bg-success' : 'bg-secondary'}">${s.status}</span>
                                <span class="badge bg-primary">${s.type}</span>
                            </div>
                        </div>
                        <div class="d-flex flex-column gap-2">
                            ${s.status === 'Open' 
                                ? '<button class="btn btn-outline-primary btn-sm rounded-pill px-3" onclick="showToast(\'Link Zoom akan dikirim via email 1 jam sebelum seminar\', \'info\')">Link Zoom</button>'
                                : '<button class="btn btn-outline-success btn-sm rounded-pill px-3" onclick="showToast(\'Sertifikat tersedia di tab Sertifikat\', \'info\')">Lihat Sertifikat</button>'
                            }
                            <button class="btn btn-outline-secondary btn-sm rounded-pill px-3" onclick="showToast(\'Detail seminar\', \'info\')">Detail</button>
                        </div>
                    </div>
                </div>
            `).join('');
            
            lucide.createIcons();
        }
        
        function switchDashboardTab(tabId) {
            // Hide all tabs
            document.querySelectorAll('.dashboard-tab').forEach(el => {
                el.classList.remove('d-block');
                el.classList.add('d-none');
            });
            
            // Remove active class from all tab buttons
            document.querySelectorAll('.list-group-item').forEach(el => {
                el.classList.remove('active');
            });
            
            // Show selected tab
            document.getElementById(`tab-${tabId}`).classList.remove('d-none');
            document.getElementById(`tab-${tabId}`).classList.add('d-block');
            
            // Activate selected tab button
            document.getElementById(`tab-btn-${tabId}`).classList.add('active');
            
            // Refresh data if needed
            if (tabId === 'seminars') {
                renderUserSeminars();
            } else if (tabId === 'certificate') {
                renderUserCertificates();
            }
            
            lucide.createIcons();
        }
    </script>
</body>
</html>