<?php
// ==================== PROSES HAPUS SEMINAR ====================
if (isset($_GET['delete'])) {
    $id = (int)$_GET['delete'];
    if ($id > 0) {
        mysql_query("DELETE FROM seminar WHERE id = '$id'");
        $_SESSION['success_message'] = "Seminar berhasil dihapus!";
        header("Location: seminars-manage");
    }
}

// ==================== QUERY DATA ====================
$query = mysql_query("SELECT * FROM seminar ORDER BY waktu_mulai DESC");
$all_seminars = [];
while ($row = mysql_fetch_assoc($query)) {
    $all_seminars[] = $row;
}
$total_data = count($all_seminars);
?>
<!-- ==================== CSS DATATABLES ==================== -->
<link href="https://cdn.datatables.net/1.13.4/css/dataTables.bootstrap5.min.css" rel="stylesheet">
<link href="https://cdn.datatables.net/responsive/2.4.1/css/responsive.bootstrap5.min.css" rel="stylesheet">
<link href="https://cdn.datatables.net/buttons/2.3.6/css/buttons.bootstrap5.min.css" rel="stylesheet">

<style>
    .seminar-card {
        transition: all 0.3s ease;
        border: 1px solid var(--gray-200);
    }
    
    .seminar-card:hover {
        transform: translateY(-2px);
        box-shadow: 0 5px 15px rgba(0,0,0,0.1);
    }
    
    .status-badge {
        padding: 4px 12px;
        border-radius: 20px;
        font-size: 0.65rem;
        font-weight: 500;
    }
    
    .badge-active {
        background-color: #d1fae5;
        color: #065f46;
        border: 1px solid #a7f3d0;
    }
    
    .badge-inactive {
        background-color: #fee2e2;
        color: #991b1b;
        border: 1px solid #fecaca;
    }
    
    .badge-online {
        background-color: #dbeafe;
        color: #1e40af;
        border: 1px solid #bfdbfe;
    }
    
    .badge-offline {
        background-color: #f0fdf4;
        color: #166534;
        border: 1px solid #bbf7d0;
    }
    
    .badge-hybrid {
        background-color: #fef3c7;
        color: #92400e;
        border: 1px solid #fde68a;
    }
    
    /* Status waktu */
    .badge-berlangsung {
        background-color: #10b981;
        color: white;
        border: none;
    }
    
    .badge-selesai {
        background-color: #6b7280;
        color: white;
        border: none;
    }
    
    .badge-mendatang {
        background-color: #3b82f6;
        color: white;
        border: none;
    }
    
    .table-seminar {
        font-size: 0.95rem;
    }
    
    .table-seminar th {
        background-color: #f8fafc;
        font-weight: 600;
        color: #334155;
        border-bottom: 2px solid #e2e8f0;
    }
    
    .table-seminar td {
        vertical-align: middle;
        color: #475569;
    }
    
    .action-buttons-vertical {
        display: flex;
        flex-direction: column;
        gap: 4px;
        align-items: center;
    }
    
    .action-buttons-vertical .btn {
        width: 100%;
        max-width: 100px;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 4px;
        padding: 4px 8px;
        font-size: 0.85rem;
    }
    
    .pagination-custom .page-item.active .page-link {
        background-color: #4361ee;
        border-color: #4361ee;
        color:white;
    }
    
    .pagination-custom .page-link {
        color: #4361ee;
        border: 1px solid #e2e8f0;
        margin: 0 3px;
        border-radius: 6px;
        padding: 6px 12px;
    }
    
    .pagination-custom .page-link:hover {
        background-color: #f1f5f9;
    }
    
    .filter-card {
        background: white;
        border: 1px solid var(--gray-200);
        border-radius: var(--border-radius);
        padding: 1.25rem;
        margin-bottom: 1.5rem;
    }
    
    .time-info {
        display: flex;
        flex-direction: column;
        gap: 4px;
    }
    
    .time-main {
        font-weight: 500;
        color: #1e293b;
    }
    
    .time-range {
        color: #64748b;
        font-size: 0.85rem;
    }
    
    .time-status {
        margin-top: 2px;
    }
    
    /* Styling untuk kolom judul dan kode yang disatukan */
    .seminar-title-container {
        display: flex;
        flex-direction: column;
        gap: 4px;
    }
    
    .seminar-code {
        display: inline-block;
        color: #000000;
        font-size: 0.7rem;
        font-weight: 600;
        padding: 6px 0px;
        border-radius: 25px;
        width: fit-content;
        letter-spacing: 0.5px;
    }
        
    .seminar-title {
        font-weight: 600;
        color: #1e293b;
        line-height: 1.3;
        font-size: 0.95rem;
    }
    
    .seminar-speaker {
        color: #64748b;
        font-size: 0.85rem;
        display: flex;
        align-items: center;
        gap: 4px;
        margin-top: 2px;
    }
    
    .seminar-speaker i {
        width: 14px;
        height: 14px;
    }
    
    /* Biaya styling */
    .seminar-price {
        display: flex;
        flex-direction: column;
        gap: 2px;
    }
    
    .price-regular {
        font-weight: 600;
        color: #059669;
        font-size: 0.9rem;
    }
    
    .price-member {
        color: #6b7280;
        font-size: 0.8rem;
    }
    
    /* Mobile Responsive */
    @media (max-width: 768px) {
        .table-responsive {
            border: 0;
        }
        
        .table-seminar thead {
            display: none;
        }
        
        .table-seminar tbody tr {
            display: block;
            margin-bottom: 1rem;
            border: 1px solid #dee2e6;
            border-radius: 8px;
        }
        
        .table-seminar tbody td {
            display: block;
            text-align: left !important;
            border: none;
            padding: 0.75rem;
            position: relative;
            padding-left: 45%;
        }
        
        .table-seminar tbody td:before {
            content: attr(data-label);
            position: absolute;
            left: 1rem;
            width: 40%;
            font-weight: 600;
            font-size: 0.85rem;
            color: #6c757d;
        }
        
        .table-seminar tbody td:first-child {
            padding-top: 1rem;
            background-color: rgba(0,0,0,0.02);
            border-bottom: 1px solid #dee2e6;
        }
        
        .table-seminar tbody td:last-child {
            padding-bottom: 1rem;
        }
        
        .action-buttons-vertical {
            align-items: flex-start;
        }
        
        .action-buttons-vertical .btn {
            max-width: 100%;
        }
        
        .seminar-title-container {
            padding-right: 0;
        }
        
        .seminar-code {
            font-size: 0.7rem;
            padding: 2px 6px;
        }
        
        .seminar-title {
            font-size: 0.9rem;
        }
        
        .seminar-speaker {
            font-size: 0.8rem;
        }
    }
    
    /* Hover efek untuk baris tabel */
    .table-seminar tbody tr {
        transition: all 0.2s ease;
    }
    
    .table-seminar tbody tr:hover {
        background-color: #f8fafc;
        transform: translateX(2px);
    }
</style>

<div class="d-flex justify-content-between align-items-center mb-4">
    <div>
        <h4 class="fw-bold mb-1">Manajemen Seminar</h4>
        <p class="text-muted mb-0">Kelola seminar dan workshop PAPENTARA</p>
    </div>
    <div>
        <a href="seminars-add" class="btn btn-primary">
            <i data-lucide="plus-circle" width="16"></i>
            Tambah Seminar
        </a>
    </div>
</div>

<!-- ==================== NOTIFIKASI ==================== -->
<?php if (isset($_SESSION['success_message'])): ?>
<div class="alert alert-success alert-dismissible fade show" role="alert">
    <i data-lucide="check-circle" class="me-2"></i>
    <?php echo $_SESSION['success_message']; unset($_SESSION['success_message']); ?>
    <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
</div>
<?php endif; ?>

<!-- ==================== FILTER REAL-TIME ==================== -->
<div class="filter-card">
    <h6 class="fw-bold mb-3">Filter Seminar</h6>
    <div class="row g-3">
        <div class="col-md-4">
            <label class="form-label fw-medium">Status</label>
            <select class="form-select" id="filterStatus">
                <option value="">Semua Status</option>
                <option value="Y">Aktif</option>
                <option value="T">Non-Aktif</option>
            </select>
        </div>
        <div class="col-md-4">
            <label class="form-label fw-medium">Metode</label>
            <select class="form-select" id="filterMethod">
                <option value="">Semua Metode</option>
                <option value="online">Online</option>
                <option value="offline">Offline</option>
                <option value="hybrid">Hybrid</option>
            </select>
        </div>
        <div class="col-md-4">
            <label class="form-label fw-medium">Cari</label>
            <div class="input-group">
                <input type="text" class="form-control" id="searchInput" placeholder="Judul, Kode, atau Pemateri...">
                <button class="btn btn-outline-secondary" type="button" id="resetFilters">
                    <i data-lucide="x" width="16"></i>
                </button>
            </div>
        </div>
        <div class="col-12">
            <div class="d-flex justify-content-between align-items-center">
                <div class="text-muted small" id="filterInfo">
                    Menampilkan semua <?php echo $total_data; ?> seminar
                </div>
            </div>
        </div>
    </div>
</div>

<!-- ==================== STATS ==================== -->
<div class="row g-3 mb-4">
    <div class="col-md-3">
        <div class="stat-card p-4">
            <div class="d-flex align-items-center justify-content-between">
                <div>
                    <h4 class="fw-bold mb-0" id="totalCount"><?php echo $total_data; ?></h4>
                    <small class="text-muted">Total Seminar</small>
                </div>
                <div class="stat-icon bg-primary bg-opacity-10 text-primary">
                    <i data-lucide="calendar" width="20"></i>
                </div>
            </div>
        </div>
    </div>
    <div class="col-md-3">
        <div class="stat-card p-4">
            <div class="d-flex align-items-center justify-content-between">
                <div>
                    <?php
                    $active_count = 0;
                    foreach ($all_seminars as $seminar) {
                        if ($seminar['aktif'] == 'Y') $active_count++;
                    }
                    ?>
                    <h4 class="fw-bold mb-0" id="activeCount"><?php echo $active_count; ?></h4>
                    <small class="text-muted">Seminar Aktif</small>
                </div>
                <div class="stat-icon bg-success bg-opacity-10 text-success">
                    <i data-lucide="activity" width="20"></i>
                </div>
            </div>
        </div>
    </div>
    <div class="col-md-3">
        <div class="stat-card p-4">
            <div class="d-flex align-items-center justify-content-between">
                <div>
                    <?php
                    $online_count = 0;
                    foreach ($all_seminars as $seminar) {
                        if ($seminar['metode'] == 'online') $online_count++;
                    }
                    ?>
                    <h4 class="fw-bold mb-0" id="onlineCount"><?php echo $online_count; ?></h4>
                    <small class="text-muted">Seminar Online</small>
                </div>
                <div class="stat-icon bg-info bg-opacity-10 text-info">
                    <i data-lucide="video" width="20"></i>
                </div>
            </div>
        </div>
    </div>
    <div class="col-md-3">
        <div class="stat-card p-4">
            <div class="d-flex align-items-center justify-content-between">
                <div>
                    <?php
                    $today = date('Y-m-d');
                    $today_count = 0;
                    foreach ($all_seminars as $seminar) {
                        if (date('Y-m-d', strtotime($seminar['waktu_mulai'])) == $today) $today_count++;
                    }
                    ?>
                    <h4 class="fw-bold mb-0" id="todayCount"><?php echo $today_count; ?></h4>
                    <small class="text-muted">Seminar Hari Ini</small>
                </div>
                <div class="stat-icon bg-warning bg-opacity-10 text-warning">
                    <i data-lucide="clock" width="20"></i>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- ==================== TABEL SEMINAR ==================== -->
<div class="card">
    <div class="p-4">
        <div class="d-flex justify-content-between align-items-center mb-4">
            <h5 class="fw-bold mb-0">Daftar Seminar</h5>
            <div class="text-muted small" id="showingInfo">
                Menampilkan 0 dari <?php echo $total_data; ?> seminar
            </div>
        </div>
        
        <div class="table-responsive">
            <table class="table table-seminar" id="seminarTable">
                <thead>
                    <tr>
                        <th>Seminar</th>
                        <th width="180">Waktu</th>
                        <th width="100">Metode</th>
                        <th width="120">Biaya</th>
                        <th width="100">Status</th>
                        <th width="140" class="text-center">Aksi</th>
                    </tr>
                </thead>
                <tbody id="seminarTableBody">
                    <!-- Data akan diisi oleh JavaScript -->
                </tbody>
            </table>
        </div>
        
        <!-- ==================== PAGINATION CLIENT-SIDE ==================== -->
        <nav class="mt-4" id="paginationContainer" style="display: none;">
            <ul class="pagination pagination-custom justify-content-center" id="pagination">
                <!-- Pagination akan di-generate oleh JavaScript -->
            </ul>
        </nav>
        
        <!-- Empty State -->
        <div class="text-center py-5" id="emptyState" style="display: none;">
            <div class="text-muted">
                <i data-lucide="calendar-x" width="48" class="mb-2"></i>
                <p>Tidak ada seminar ditemukan</p>
                <button class="btn btn-sm btn-outline-primary mt-2" onclick="resetFilters()">
                    Reset Filter
                </button>
            </div>
        </div>
    </div>
</div>

<script>
// Data seminar dari PHP
const allSeminars = <?php echo json_encode($all_seminars); ?>;
let currentPage = 1;
const itemsPerPage = 4;
let filteredSeminars = [...allSeminars];

// Elemen DOM
const searchInput = document.getElementById('searchInput');
const filterStatus = document.getElementById('filterStatus');
const filterMethod = document.getElementById('filterMethod');
const resetFiltersBtn = document.getElementById('resetFilters');
const seminarTableBody = document.getElementById('seminarTableBody');
const filterInfo = document.getElementById('filterInfo');
const showingInfo = document.getElementById('showingInfo');
const totalCount = document.getElementById('totalCount');
const activeCount = document.getElementById('activeCount');
const onlineCount = document.getElementById('onlineCount');
const todayCount = document.getElementById('todayCount');
const paginationContainer = document.getElementById('paginationContainer');
const pagination = document.getElementById('pagination');
const emptyState = document.getElementById('emptyState');

// Fungsi untuk menentukan status waktu
function getTimeStatus(waktu_mulai, waktu_akhir) {
    const now = new Date();
    const start = new Date(waktu_mulai);
    const end = new Date(waktu_akhir);
    
    if (now < start) {
        return { label: 'Mendatang', class: 'badge-mendatang' };
    } else if (now >= start && now <= end) {
        return { label: 'Berlangsung', class: 'badge-berlangsung' };
    } else {
        return { label: 'Selesai', class: 'badge-selesai' };
    }
}

// Initialize
document.addEventListener('DOMContentLoaded', function() {
    // Event listeners untuk filter real-time
    searchInput.addEventListener('input', filterSeminars);
    filterStatus.addEventListener('change', filterSeminars);
    filterMethod.addEventListener('change', filterSeminars);
    resetFiltersBtn.addEventListener('click', resetFilters);
    
    // Setup mobile responsive labels
    setupMobileLabels();
    
    // Initial render
    renderTable();
    updateStats();
    
    // Update icons setelah render
    setTimeout(() => {
        if (typeof lucide !== 'undefined') {
            lucide.createIcons();
        }
    }, 100);
});

// Filter seminar secara real-time
function filterSeminars() {
    const searchTerm = searchInput.value.toLowerCase();
    const statusValue = filterStatus.value;
    const methodValue = filterMethod.value;
    
    filteredSeminars = allSeminars.filter(seminar => {
        // Filter berdasarkan pencarian
        const matchesSearch = !searchTerm || 
            seminar.judul.toLowerCase().includes(searchTerm) ||
            seminar.kode_seminar.toLowerCase().includes(searchTerm) ||
            seminar.pemateri.toLowerCase().includes(searchTerm);
        
        // Filter berdasarkan status
        const matchesStatus = !statusValue || seminar.aktif === statusValue;
        
        // Filter berdasarkan metode
        const matchesMethod = !methodValue || seminar.metode === methodValue;
        
        return matchesSearch && matchesStatus && matchesMethod;
    });
    
    currentPage = 1; // Reset ke halaman pertama
    renderTable();
    updateStats();
    updateFilterInfo();
}

// Render tabel dengan pagination
function renderTable() {
    if (filteredSeminars.length === 0) {
        seminarTableBody.innerHTML = '';
        paginationContainer.style.display = 'none';
        emptyState.style.display = 'block';
        showingInfo.textContent = `Menampilkan 0 dari ${filteredSeminars.length} seminar`;
        return;
    }
    
    emptyState.style.display = 'none';
    paginationContainer.style.display = 'block';
    
    // Hitung pagination
    const totalPages = Math.ceil(filteredSeminars.length / itemsPerPage);
    const startIndex = (currentPage - 1) * itemsPerPage;
    const endIndex = Math.min(startIndex + itemsPerPage, filteredSeminars.length);
    const currentSeminars = filteredSeminars.slice(startIndex, endIndex);
    
    // Render rows
    let html = '';
    currentSeminars.forEach(seminar => {
        const waktuMulai = new Date(seminar.waktu_mulai);
        const waktuAkhir = new Date(seminar.waktu_akhir);
        const timeStatus = getTimeStatus(seminar.waktu_mulai, seminar.waktu_akhir);
        
        html += `
        <tr class="seminar-row" 
            data-status="${seminar.aktif}" 
            data-method="${seminar.metode}"
            data-title="${seminar.judul.toLowerCase()}"
            data-code="${seminar.kode_seminar.toLowerCase()}"
            data-speaker="${seminar.pemateri.toLowerCase()}">
            <td data-label="Seminar">
                <div class="seminar-title-container">
                    <div class="seminar-title">
                        ${escapeHtml(seminar.judul)}
                    </div>
                    <span class="seminar-code">
                        ${escapeHtml(seminar.kode_seminar)}
                    </span>
                    <div class="seminar-speaker">
                        <i data-lucide="user" width="14"></i>
                        ${escapeHtml(seminar.pemateri)}
                    </div>
                </div>
            </td>
            <td data-label="Waktu">
                <div class="time-info">
                    <div class="time-main">
                        ${formatDate(waktuMulai)}
                    </div>
                    <div class="time-range">
                        ${formatTime(waktuMulai)} - ${formatTime(waktuAkhir)}
                    </div>
                    <div class="time-status">
                        <span class="status-badge ${timeStatus.class}">
                            ${timeStatus.label}
                        </span>
                    </div>
                </div>
            </td>
            <td data-label="Metode">
                ${getMethodBadge(seminar.metode)}
            </td>
            <td data-label="Biaya">
                <div class="seminar-price">
                    <div class="price-regular">
                        Rp ${formatNumber(seminar.biaya_umum)}
                    </div>
                    <div class="price-member">
                        Anggota: Rp ${formatNumber(seminar.biaya_anggota)}
                    </div>
                </div>
            </td>
            <td data-label="Status">
                ${getStatusBadge(seminar.aktif)}
            </td>
            <td class="text-center" data-label="Aksi">
                <div class="action-buttons-vertical">
                    <a href="seminars-edit?id=${seminar.id}" class="btn btn-sm btn-outline-primary" title="Edit">
                        <i data-lucide="edit-2" width="14"></i>
                        <span class="d-none d-md-inline">Edit</span>
                    </a>
                    <a href="seminars-edit?id=${seminar.id}&copy=1" class="btn btn-sm btn-outline-info" title="Duplicate">
                        <i data-lucide="copy" width="14"></i>
                        <span class="d-none d-md-inline">Duplikat</span>
                    </a>
                    <a href="seminars-manage?delete=${seminar.id}" class="btn btn-sm btn-outline-danger" 
                       onclick="return confirm('Hapus seminar ini?')" title="Hapus">
                        <i data-lucide="trash-2" width="14"></i>
                        <span class="d-none d-md-inline">Hapus</span>
                    </a>
                </div>
            </td>
        </tr>`;
    });
    
    seminarTableBody.innerHTML = html;
    
    // Update showing info
    showingInfo.textContent = `Menampilkan ${startIndex + 1}-${endIndex} dari ${filteredSeminars.length} seminar`;
    
    // Render pagination
    renderPagination(totalPages);
    
    // Update icons
    setTimeout(() => {
        if (typeof lucide !== 'undefined') {
            lucide.createIcons();
        }
    }, 100);
    
    // Setup mobile labels setelah render
    setupMobileLabels();
}

// Helper untuk format date
function formatDate(date) {
    const months = ['Jan', 'Feb', 'Mar', 'Apr', 'Mei', 'Jun', 'Jul', 'Agu', 'Sep', 'Okt', 'Nov', 'Des'];
    return `${date.getDate()} ${months[date.getMonth()]} ${date.getFullYear()}`;
}

// Helper untuk format time
function formatTime(date) {
    return date.toLocaleTimeString('id-ID', { hour: '2-digit', minute: '2-digit' });
}

// Helper untuk escape HTML
function escapeHtml(text) {
    const div = document.createElement('div');
    div.textContent = text;
    return div.innerHTML;
}

// Render pagination
function renderPagination(totalPages) {
    let html = '';
    
    // Previous button
    html += `
    <li class="page-item ${currentPage === 1 ? 'disabled' : ''}">
        <a class="page-link" href="#" onclick="changePage(${currentPage - 1}); return false;">
            <i data-lucide="chevron-left" width="14"></i>
        </a>
    </li>`;
    
    // Page numbers
    const maxPagesToShow = 5;
    let startPage = Math.max(1, currentPage - Math.floor(maxPagesToShow / 2));
    let endPage = Math.min(totalPages, startPage + maxPagesToShow - 1);
    
    if (endPage - startPage + 1 < maxPagesToShow) {
        startPage = Math.max(1, endPage - maxPagesToShow + 1);
    }
    
    // First page
    if (startPage > 1) {
        html += `
        <li class="page-item">
            <a class="page-link" href="#" onclick="changePage(1); return false;">1</a>
        </li>`;
        if (startPage > 2) {
            html += `<li class="page-item disabled"><span class="page-link">...</span></li>`;
        }
    }
    
    // Page numbers
    for (let i = startPage; i <= endPage; i++) {
        html += `
        <li class="page-item ${i === currentPage ? 'active' : ''}">
            <a class="page-link" href="#" onclick="changePage(${i}); return false;">${i}</a>
        </li>`;
    }
    
    // Last page
    if (endPage < totalPages) {
        if (endPage < totalPages - 1) {
            html += `<li class="page-item disabled"><span class="page-link">...</span></li>`;
        }
        html += `
        <li class="page-item">
            <a class="page-link" href="#" onclick="changePage(${totalPages}); return false;">${totalPages}</a>
        </li>`;
    }
    
    // Next button
    html += `
    <li class="page-item ${currentPage === totalPages ? 'disabled' : ''}">
        <a class="page-link" href="#" onclick="changePage(${currentPage + 1}); return false;">
            <i data-lucide="chevron-right" width="14"></i>
        </a>
    </li>`;
    
    pagination.innerHTML = html;
    
    // Tampilkan pagination hanya jika lebih dari 1 halaman
    if (totalPages > 1) {
        paginationContainer.style.display = 'block';
    } else {
        paginationContainer.style.display = 'none';
    }
}

// Change page
function changePage(page) {
    if (page < 1 || page > Math.ceil(filteredSeminars.length / itemsPerPage)) return;
    currentPage = page;
    renderTable();
    // Scroll ke atas tabel
    document.querySelector('.card').scrollIntoView({ behavior: 'smooth' });
}

// Update statistik berdasarkan filter
function updateStats() {
    const now = new Date();
    const todayStr = now.toISOString().split('T')[0];
    
    let totalActive = 0;
    let totalOnline = 0;
    let totalToday = 0;
    
    filteredSeminars.forEach(seminar => {
        if (seminar.aktif === 'Y') totalActive++;
        if (seminar.metode === 'online') totalOnline++;
        
        const seminarDate = new Date(seminar.waktu_mulai).toISOString().split('T')[0];
        if (seminarDate === todayStr) totalToday++;
    });
    
    totalCount.textContent = filteredSeminars.length;
    activeCount.textContent = totalActive;
    onlineCount.textContent = totalOnline;
    todayCount.textContent = totalToday;
}

// Update filter info
function updateFilterInfo() {
    const statusText = filterStatus.value ? (filterStatus.value === 'Y' ? 'Aktif' : 'Non-Aktif') : null;
    const methodText = filterMethod.value ? 
        (filterMethod.value === 'online' ? 'Online' : 
         filterMethod.value === 'offline' ? 'Offline' : 'Hybrid') : null;
    const searchText = searchInput.value ? `"${searchInput.value}"` : null;
    
    const filters = [];
    if (statusText) filters.push(`Status: ${statusText}`);
    if (methodText) filters.push(`Metode: ${methodText}`);
    if (searchText) filters.push(`Pencarian: ${searchText}`);
    
    if (filters.length > 0) {
        filterInfo.textContent = `Filter aktif: ${filters.join(', ')}`;
    } else {
        filterInfo.textContent = `Menampilkan semua ${filteredSeminars.length} seminar`;
    }
} 
  
// Reset semua filter
function resetFilters() {
    searchInput.value = '';
    filterStatus.value = '';
    filterMethod.value = '';
    filterSeminars();
}

// Helper functions
function getMethodBadge(method) {
    switch(method) {
        case 'online': return '<span class="badge-online status-badge">Online</span>';
        case 'offline': return '<span class="badge-offline status-badge">Offline</span>';
        case 'hybrid': return '<span class="badge-hybrid status-badge">Hybrid</span>';
        default: return '<span class="badge-online status-badge">Online</span>';
    }
}

function getStatusBadge(status) {
    return status === 'Y' 
        ? '<span class="badge-active status-badge">Aktif</span>'
        : '<span class="badge-inactive status-badge">Non-Aktif</span>';
}

function formatNumber(num) {
    return new Intl.NumberFormat('id-ID').format(num);
}

// Setup mobile responsive labels
function setupMobileLabels() {
    if (window.innerWidth <= 768) {
        const labels = ['Seminar', 'Waktu', 'Metode', 'Biaya', 'Status', 'Aksi'];
        document.querySelectorAll('#seminarTableBody td').forEach((td, index) => {
            const labelIndex = index % 6; // 6 kolom
            td.setAttribute('data-label', labels[labelIndex]);
        });
    }
}

// Responsive untuk window resize
window.addEventListener('resize', setupMobileLabels);

// Initial call untuk menampilkan data
document.addEventListener('DOMContentLoaded', function() {
    // Jika ada data, render tabel
    if (allSeminars.length > 0) {
        renderTable();
    } else {
        seminarTableBody.innerHTML = '';
        emptyState.style.display = 'block';
        paginationContainer.style.display = 'none';
    }
});
</script>