{% extends 'admin_panel/base.html' %}
{% load static %}

{% block title %}Karang Taruna{% endblock %}

{% block extra_css %}
<link rel="stylesheet" href="{% static 'css/admin/organization/organization-list.css' %}">
<style>
    /* HILANGKAN horizontal scrollbar yang bikin kedip-kedip */
    .table-responsive {
        overflow-x: hidden !important;
        overflow-y: visible;
    }
    
    .table {
        width: 100%;
        table-layout: fixed;
    }
    
    .table-responsive::-webkit-scrollbar-horizontal {
        display: none !important;
        height: 0 !important;
    }
    
    .table-responsive {
        -ms-overflow-style: none;
        scrollbar-width: none;
    }
    
    body {
        overflow-x: hidden !important;
    }
    
    .container-fluid {
        overflow-x: hidden !important;
        max-width: 100%;
    }
    
    .table-container {
        overflow: visible;
        max-width: 100%;
    }
    
    .table td, .table th {
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    
    .table td:nth-child(3) {
        white-space: normal;
        word-break: break-word;
    }
    
    /* Mobile Card Layout */
    .mobile-cards {
        display: none;
    }
    
    @media (max-width: 768px) {
        .table-responsive {
            display: none !important;
        }
        
        .mobile-cards {
            display: block !important;
        }
        
        .mobile-card {
            background: white;
            border-radius: 12px;
            padding: 16px;
            margin-bottom: 12px;
            box-shadow: 0 2px 8px rgba(0,0,0,0.1);
            border-left: 4px solid #4e73df;
        }
        
        .mobile-card-header {
            display: flex;
            align-items: center;
            margin-bottom: 12px;
            padding-bottom: 12px;
            border-bottom: 1px solid #e3e6f0;
        }
        
        .mobile-card-avatar {
            width: 60px;
            height: 60px;
            border-radius: 50%;
            margin-right: 12px;
            flex-shrink: 0;
        }
        
        .mobile-card-title {
            flex: 1;
        }
        
        .mobile-card-title h6 {
            margin: 0 0 4px 0;
            font-size: 16px;
            font-weight: 600;
            color: #2c3e50;
        }
        
        .mobile-card-title small {
            color: #6c757d;
            font-size: 12px;
        }
        
        .mobile-card-body {
            margin-bottom: 12px;
        }
        
        .mobile-card-item {
            display: flex;
            justify-content: space-between;
            padding: 8px 0;
            border-bottom: 1px solid #f8f9fc;
        }
        
        .mobile-card-item:last-child {
            border-bottom: none;
        }
        
        .mobile-card-label {
            font-weight: 600;
            color: #5a6c7d;
            font-size: 13px;
        }
        
        .mobile-card-value {
            color: #2c3e50;
            font-size: 13px;
            text-align: right;
        }
        
        .mobile-card-actions {
            display: flex;
            gap: 8px;
            margin-top: 12px;
        }
        
        .mobile-card-actions .btn {
            flex: 1;
            font-size: 13px;
            padding: 8px;
        }
    }
</style>
{% endblock %}

{% block content %}
<div class="container-fluid">

    <div class="d-flex justify-content-between align-items-center mb-4">
        <div>
            <h1 class="h3 mb-0 text-gray-800">Karang Taruna</h1>
            <p class="text-muted mb-0">Kelola data anggota Karang Taruna</p>
        </div>
        <div class="d-flex gap-2">
            <button class="btn btn-outline-primary btn-sm" onclick="refreshData()">
                <i class="fas fa-sync-alt"></i> Refresh
            </button>
            <a href="{% url 'admin_panel:organization:admin_karang_taruna_create' %}" class="btn btn-primary btn-sm">
                <i class="fas fa-plus"></i> Tambah Anggota
            </a>
        </div>
    </div>

    <div class="filter-section">
        <div class="filter-compact">
            <div class="form-group">
                <label for="search" class="form-label">Cari</label>
                <input type="text" id="search" class="form-control search-input" placeholder="Nama, NIK, atau nomor anggota...">
            </div>
            <div class="form-group">
                <label for="jabatan" class="form-label">Jabatan</label>
                <select id="jabatan" class="form-select">
                    <option value="">Semua Jabatan</option>
                    <option value="ketua_umum">Ketua Umum</option>
                    <option value="wakil_ketua">Wakil Ketua</option>
                    <option value="sekretaris_umum">Sekretaris Umum</option>
                    <option value="bendahara_umum">Bendahara Umum</option>
                    <option value="koordinator_bidang_1">Koordinator Bidang Pendidikan</option>
                    <option value="koordinator_bidang_2">Koordinator Bidang Olahraga</option>
                    <option value="koordinator_bidang_3">Koordinator Bidang Kewirausahaan</option>
                    <option value="koordinator_bidang_4">Koordinator Bidang Lingkungan</option>
                    <option value="koordinator_bidang_5">Koordinator Bidang Keagamaan</option>
                    <option value="anggota_aktif">Anggota Aktif</option>
                    <option value="anggota_biasa">Anggota Biasa</option>
                </select>
            </div>
            <div class="form-group">
                <label for="status" class="form-label">Status</label>
                <select id="status" class="form-select">
                    <option value="aktif">Aktif</option>
                    <option value="non_aktif">Non Aktif</option>
                    <option value="alumni">Alumni</option>
                    <option value="calon_anggota">Calon Anggota</option>
                </select>
            </div>
            <div class="form-group">
                <label for="pengurus_inti" class="form-label">Pengurus Inti</label>
                <select id="pengurus_inti" class="form-select">
                    <option value="">Semua</option>
                    <option value="true">Ya</option>
                    <option value="false">Tidak</option>
                </select>
            </div>
        </div>
    </div>

    <div class="table-container">
        <div class="table-header karang-taruna">
            <div class="header-content">
                <h5 class="mb-0">Data Anggota Karang Taruna</h5>
                <div class="header-actions">
                    <button class="btn btn-light btn-sm" onclick="exportData()">
                        <i class="fas fa-download"></i> Export
                    </button>
                    <button class="btn btn-light btn-sm" onclick="printData()">
                        <i class="fas fa-print"></i> Print
                    </button>
                </div>
            </div>
        </div>
        <div class="table-responsive">
            <table class="table">
                <thead>
                    <tr>
                        <th width="5%">No</th>
                        <th width="10%">Foto</th>
                        <th width="25%">Nama</th>
                        <th width="15%">Jabatan</th>
                        <th width="10%">No. Anggota</th>
                        <th width="10%">Bergabung</th>
                        <th width="10%">Status</th>
                        <th width="15%">Aksi</th>
                    </tr>
                </thead>
                <tbody id="karangTarunaTableBody">
                    <tr>
                        <td colspan="8" class="loading-state">
                            <i class="fas fa-spinner fa-spin"></i>
                            <div>Memuat data...</div>
                        </td>
                    </tr>
                </tbody>
            </table>
        </div>
        
        <!-- Mobile Cards (Hidden on Desktop) -->
        <div class="mobile-cards" id="mobileCardsContainer">
            <!-- Mobile cards will be inserted here by JavaScript -->
        </div>
        
        <!-- Pagination -->
        <div class="d-flex justify-content-between align-items-center mt-3">
            <div class="text-muted" id="paginationInfo">
                Menampilkan <span id="showingFrom">0</span> - <span id="showingTo">0</span> dari <span id="totalItems">0</span> data
            </div>
            <nav>
                <ul class="pagination pagination-sm mb-0" id="paginationControls">
                    <!-- Pagination buttons will be inserted here -->
                </ul>
            </nav>
        </div>
    </div>
</div>

<div class="modal fade" id="deleteModal" tabindex="-1" aria-labelledby="deleteModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="deleteModalLabel">Konfirmasi Hapus</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <p>Apakah Anda yakin ingin menghapus data anggota Karang Taruna <strong id="karangTarunaToDelete"></strong>?</p>
                <p class="text-muted small">Tindakan ini tidak dapat dibatalkan.</p>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Batal</button>
                <button type="button" class="btn btn-danger" id="confirmDeleteBtn">Hapus</button>
            </div>
        </div>
    </div>
</div>
{% endblock %}

{% block extra_js %}
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="{% static 'js/organization.js' %}"></script>
<script>
// Karang Taruna Handler
class KarangTarunaHandler {
    constructor() {
        this.apiUrl = '/admin-panel/organization/api/karang-taruna/';
        this.currentPage = 1;
        this.perPage = 10;
        this.totalItems = 0;
        this.totalPages = 0;
        this.isLoading = false;
        this.lastSearchTerm = '';
        this.lastJabatan = '';
        this.lastStatus = '';
        this.lastPengurusInti = '';
    }

    // Get jabatan label
    getJabatanLabel(jabatan) {
        const labels = {
            'ketua_umum': 'Ketua Umum',
            'wakil_ketua': 'Wakil Ketua',
            'sekretaris_umum': 'Sekretaris Umum',
            'bendahara_umum': 'Bendahara Umum',
            'koordinator_bidang_1': 'Koordinator Bidang Pendidikan',
            'koordinator_bidang_2': 'Koordinator Bidang Olahraga',
            'koordinator_bidang_3': 'Koordinator Bidang Kewirausahaan',
            'koordinator_bidang_4': 'Koordinator Bidang Lingkungan',
            'koordinator_bidang_5': 'Koordinator Bidang Keagamaan',
            'anggota_aktif': 'Anggota Aktif',
            'anggota_biasa': 'Anggota Biasa'
        };
        return labels[jabatan] || jabatan;
    }

    // Load Karang Taruna data
    async loadKarangTaruna(page = 1) {
        if (this.isLoading) {
            console.log('[KT] ⏸️ Already loading, skipping...');
            return;
        }
        
        this.isLoading = true;
        this.currentPage = page;
        
        const search = $('#search').val();
        const jabatan = $('#jabatan').val();
        const status = $('#status').val();
        const pengurusInti = $('#pengurus_inti').val();

        const params = new URLSearchParams();
        if (search) params.append('search', search);
        if (jabatan) params.append('jabatan', jabatan);
        if (status) params.append('status', status);
        if (pengurusInti) params.append('pengurus_inti', pengurusInti);
        params.append('page', page);
        params.append('per_page', this.perPage);

        if ($('#karangTarunaTableBody tr').length === 1) {
            $('#karangTarunaTableBody').html(
                '<tr>' +
                    '<td colspan="8" class="loading-state">' +
                        '<i class="fas fa-spinner fa-spin"></i>' +
                        '<div>Memuat data...</div>' +
                    '</td>' +
                '</tr>'
            );
        }

        try {
            console.log('[KT] Loading from API:', this.apiUrl + '?' + params.toString());
            
            const response = await $.ajax({
                url: this.apiUrl + '?' + params.toString(),
                method: 'GET',
                dataType: 'json',
                timeout: 10000
            });

            console.log('[KT] API Response:', response);

            if (response.success) {
                this.totalItems = response.total || response.data.length;
                this.totalPages = Math.ceil(this.totalItems / this.perPage);
                this.renderKarangTaruna(response.data || []);
                this.renderPagination();
            } else {
                this.showError(response.message || 'Gagal memuat data');
            }
        } catch (error) {
            console.error('[KT] Load Error:', error);
            
            let errorMsg = 'Gagal memuat data Karang Taruna';
            if (error.status === 404) {
                errorMsg = 'Endpoint API tidak ditemukan (404)';
            } else if (error.status === 401 || error.status === 403) {
                errorMsg = 'Anda tidak memiliki akses ('+error.status+')';
            } else if (error.status === 500) {
                errorMsg = 'Server error (500): ' + (error.responseJSON?.message || error.statusText);
            } else if (error.statusText === 'timeout') {
                errorMsg = 'Request timeout - server terlalu lama merespon';
            } else if (error.status === 0) {
                errorMsg = 'Tidak dapat terhubung ke server';
            }
            
            this.showError(errorMsg + '<br><small class="text-muted">Debug: Check console (F12) for details</small>');
        } finally {
            this.isLoading = false;
        }
    }

    // Render Karang Taruna table
    renderKarangTaruna(data) {
        const tbody = $('#karangTarunaTableBody');
        
        if (!data || data.length === 0) {
            tbody.html(
                '<tr>' +
                    '<td colspan="8" class="empty-state">' +
                        '<i class="fas fa-info-circle"></i>' +
                        '<h5>Belum ada data</h5>' +
                        '<p>Data Karang Taruna akan muncul di sini</p>' +
                    '</td>' +
                '</tr>'
            );
            return;
        }

        console.log('[KT] Rendering', data.length, 'items');

        const rows = data.map((kt, index) => {
            const rowNumber = ((this.currentPage - 1) * this.perPage) + index + 1;
            const statusBadge = kt.status === 'aktif' 
                ? '<span class="badge badge-success">Aktif</span>'
                : '<span class="badge badge-secondary">' + (kt.status_display || kt.status) + '</span>';
            
            // Photo with FontAwesome default
            let photoHtml = '';
            if (kt.foto_profil) {
                photoHtml = '<img src="' + kt.foto_profil + '" alt="' + kt.nama + '" class="official-photo" ' +
                           'style="width: 50px; height: 50px; object-fit: cover; border-radius: 50%; border: 2px solid #e3e6f0;" ' +
                           'onerror="this.onerror=null; this.style.display=' + "'none'" + '; this.nextElementSibling.style.display=' + "'flex'" + ';">' +
                           '<div class="avatar-placeholder" style="display: none; width: 50px; height: 50px; background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); border-radius: 50%; align-items: center; justify-content: center; color: white; font-size: 20px; font-weight: bold; border: 2px solid #e3e6f0;">' +
                               '<i class="fas fa-user"></i>' +
                           '</div>';
            } else {
                photoHtml = '<div class="avatar-placeholder" style="width: 50px; height: 50px; background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); border-radius: 50%; display: flex; align-items: center; justify-content: center; color: white; font-size: 20px; font-weight: bold; border: 2px solid #e3e6f0;">' +
                               '<i class="fas fa-user"></i>' +
                           '</div>';
            }
            
            return '<tr>' +
                '<td>' + rowNumber + '</td>' +
                '<td>' + photoHtml + '</td>' +
                '<td>' +
                    '<strong>' + kt.nama + '</strong><br>' +
                    '<small class="text-muted">NIK: ' + (kt.nik || '-') + '</small>' +
                '</td>' +
                '<td>' + this.getJabatanLabel(kt.jabatan) + '</td>' +
                '<td>' + (kt.nomor_anggota || '-') + '</td>' +
                '<td>' + (kt.tanggal_bergabung || '-') + '</td>' +
                '<td>' + statusBadge + '</td>' +
                '<td>' +
                    '<div class="btn-group btn-group-sm">' +
                        '<a href="/admin-panel/organization/karang-taruna/' + kt.id + '/detail/" ' +
                           'class="btn btn-info btn-sm" title="Detail">' +
                            '<i class="fas fa-eye"></i>' +
                        '</a>' +
                        '<a href="/admin-panel/organization/karang-taruna/' + kt.id + '/edit/" ' +
                           'class="btn btn-warning btn-sm" title="Edit">' +
                            '<i class="fas fa-edit"></i>' +
                        '</a>' +
                        '<button onclick="confirmDelete(' + kt.id + ', ' + "'" + kt.nama.replace(/'/g, "\\'") + "'" + ')" ' +
                                'class="btn btn-danger btn-sm" title="Hapus">' +
                            '<i class="fas fa-trash"></i>' +
                        '</button>' +
                    '</div>' +
                '</td>' +
            '</tr>';
        }).join('');

        tbody.html(rows);
        
        // Render mobile cards
        this.renderMobileCards(data);
        
        console.log('[KT] ✅ Render complete');
    }
    
    // Render mobile cards
    renderMobileCards(data) {
        const container = $('#mobileCardsContainer');
        
        if (!data || data.length === 0) {
            container.html(
                '<div class="text-center py-5">' +
                    '<i class="fas fa-info-circle fa-3x text-muted mb-3"></i>' +
                    '<h5 class="text-muted">Belum ada data</h5>' +
                    '<p class="text-muted">Data Karang Taruna akan muncul di sini</p>' +
                '</div>'
            );
            return;
        }
        
        const cards = data.map((kt, index) => {
            const rowNumber = ((this.currentPage - 1) * this.perPage) + index + 1;
            const statusBadge = kt.status === 'aktif' 
                ? '<span class="badge badge-success">Aktif</span>'
                : '<span class="badge badge-secondary">' + (kt.status_display || kt.status) + '</span>';
            
            let photoHtml = '';
            if (kt.foto_profil) {
                photoHtml = '<img src="' + kt.foto_profil + '" alt="' + kt.nama + '" class="mobile-card-avatar" ' +
                           'onerror="this.onerror=null; this.style.display=' + "'none'" + '; this.nextElementSibling.style.display=' + "'flex'" + ';">' +
                           '<div class="avatar-placeholder mobile-card-avatar" style="display: none; background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); align-items: center; justify-content: center; color: white; font-size: 24px; font-weight: bold;">' +
                               '<i class="fas fa-user"></i>' +
                           '</div>';
            } else {
                photoHtml = '<div class="avatar-placeholder mobile-card-avatar" style="background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); display: flex; align-items: center; justify-content: center; color: white; font-size: 24px; font-weight: bold;">' +
                               '<i class="fas fa-user"></i>' +
                           '</div>';
            }
            
            return '<div class="mobile-card">' +
                '<div class="mobile-card-header">' +
                    photoHtml +
                    '<div class="mobile-card-title">' +
                        '<h6>' + kt.nama + '</h6>' +
                        '<small>NIK: ' + (kt.nik || '-') + '</small>' +
                    '</div>' +
                '</div>' +
                '<div class="mobile-card-body">' +
                    '<div class="mobile-card-item">' +
                        '<span class="mobile-card-label">No.</span>' +
                        '<span class="mobile-card-value">' + rowNumber + '</span>' +
                    '</div>' +
                    '<div class="mobile-card-item">' +
                        '<span class="mobile-card-label">Jabatan</span>' +
                        '<span class="mobile-card-value">' + this.getJabatanLabel(kt.jabatan) + '</span>' +
                    '</div>' +
                    '<div class="mobile-card-item">' +
                        '<span class="mobile-card-label">No. Anggota</span>' +
                        '<span class="mobile-card-value">' + (kt.nomor_anggota || '-') + '</span>' +
                    '</div>' +
                    '<div class="mobile-card-item">' +
                        '<span class="mobile-card-label">Bergabung</span>' +
                        '<span class="mobile-card-value">' + (kt.tanggal_bergabung || '-') + '</span>' +
                    '</div>' +
                    '<div class="mobile-card-item">' +
                        '<span class="mobile-card-label">Status</span>' +
                        '<span class="mobile-card-value">' + statusBadge + '</span>' +
                    '</div>' +
                '</div>' +
                '<div class="mobile-card-actions">' +
                    '<a href="/admin-panel/organization/karang-taruna/' + kt.id + '/detail/" class="btn btn-info btn-sm">' +
                        '<i class="fas fa-eye"></i> Detail' +
                    '</a>' +
                    '<a href="/admin-panel/organization/karang-taruna/' + kt.id + '/edit/" class="btn btn-warning btn-sm">' +
                        '<i class="fas fa-edit"></i> Edit' +
                    '</a>' +
                    '<button onclick="confirmDelete(' + kt.id + ', ' + "'" + kt.nama.replace(/'/g, "\\'") + "'" + ')" class="btn btn-danger btn-sm">' +
                        '<i class="fas fa-trash"></i> Hapus' +
                    '</button>' +
                '</div>' +
            '</div>';
        }).join('');
        
        container.html(cards);
    }

    // Render pagination (sama seperti PKK)
    renderPagination() {
        const showingFrom = ((this.currentPage - 1) * this.perPage) + 1;
        const showingTo = Math.min(this.currentPage * this.perPage, this.totalItems);
        
        $('#showingFrom').text(showingFrom);
        $('#showingTo').text(showingTo);
        $('#totalItems').text(this.totalItems);
        
        let paginationHtml = '';
        
        if (this.currentPage > 1) {
            paginationHtml += '<li class="page-item">' +
                '<a class="page-link" href="#" onclick="handler.loadKarangTaruna(' + (this.currentPage - 1) + '); return false;">' +
                    '<i class="fas fa-chevron-left"></i>' +
                '</a>' +
            '</li>';
        } else {
            paginationHtml += '<li class="page-item disabled">' +
                '<span class="page-link"><i class="fas fa-chevron-left"></i></span>' +
            '</li>';
        }
        
        const maxButtons = 5;
        let startPage = Math.max(1, this.currentPage - Math.floor(maxButtons / 2));
        let endPage = Math.min(this.totalPages, startPage + maxButtons - 1);
        
        if (endPage - startPage < maxButtons - 1) {
            startPage = Math.max(1, endPage - maxButtons + 1);
        }
        
        if (startPage > 1) {
            paginationHtml += '<li class="page-item">' +
                '<a class="page-link" href="#" onclick="handler.loadKarangTaruna(1); return false;">1</a>' +
            '</li>';
            if (startPage > 2) {
                paginationHtml += '<li class="page-item disabled"><span class="page-link">...</span></li>';
            }
        }
        
        for (let i = startPage; i <= endPage; i++) {
            if (i === this.currentPage) {
                paginationHtml += '<li class="page-item active">' +
                    '<span class="page-link">' + i + '</span>' +
                '</li>';
            } else {
                paginationHtml += '<li class="page-item">' +
                    '<a class="page-link" href="#" onclick="handler.loadKarangTaruna(' + i + '); return false;">' + i + '</a>' +
                '</li>';
            }
        }
        
        if (endPage < this.totalPages) {
            if (endPage < this.totalPages - 1) {
                paginationHtml += '<li class="page-item disabled"><span class="page-link">...</span></li>';
            }
            paginationHtml += '<li class="page-item">' +
                '<a class="page-link" href="#" onclick="handler.loadKarangTaruna(' + this.totalPages + '); return false;">' + this.totalPages + '</a>' +
            '</li>';
        }
        
        if (this.currentPage < this.totalPages) {
            paginationHtml += '<li class="page-item">' +
                '<a class="page-link" href="#" onclick="handler.loadKarangTaruna(' + (this.currentPage + 1) + '); return false;">' +
                    '<i class="fas fa-chevron-right"></i>' +
                '</a>' +
            '</li>';
        } else {
            paginationHtml += '<li class="page-item disabled">' +
                '<span class="page-link"><i class="fas fa-chevron-right"></i></span>' +
            '</li>';
        }
        
        $('#paginationControls').html(paginationHtml);
    }

    // Show error
    showError(message) {
        console.error('[KT] ❌ Error:', message);
        $('#karangTarunaTableBody').html(
            '<tr>' +
                '<td colspan="8" class="error-state">' +
                    '<i class="fas fa-exclamation-triangle"></i>' +
                    '<div class="text-danger">' +
                        '<strong>ERROR:</strong><br>' +
                        message +
                    '</div>' +
                    '<button class="btn btn-primary btn-sm mt-3" onclick="handler.loadKarangTaruna()">' +
                        '<i class="fas fa-sync-alt"></i> Coba Lagi' +
                    '</button>' +
                '</td>' +
            '</tr>'
        );
    }
}

// Initialize handler
const handler = new KarangTarunaHandler();

// Global functions
function refreshData() {
    handler.loadKarangTaruna();
}

function exportData() {
    alert('Fitur export dalam pengembangan');
}

function printData() {
    window.print();
}

let karangTarunaToDelete = null;
function confirmDelete(id, name) {
    karangTarunaToDelete = id;
    $('#karangTarunaToDelete').text(name);
    const modal = new bootstrap.Modal(document.getElementById('deleteModal'));
    modal.show();
}

// Document ready
$(document).ready(function() {
    console.log('[KT] 🚀 Page Initializing...');
    
    handler.loadKarangTaruna(1);
    
    let searchTimeout = null;
    let lastSearchValue = '';
    
    $('#search').on('input', function() {
        const currentValue = $(this).val();
        if (currentValue === lastSearchValue) return;
        lastSearchValue = currentValue;
        
        if (searchTimeout) clearTimeout(searchTimeout);
        
        searchTimeout = setTimeout(() => {
            console.log('[KT] 🔍 Search triggered:', currentValue);
            handler.currentPage = 1;
            handler.loadKarangTaruna(1);
            searchTimeout = null;
        }, 800);
    });
    
    let filterTimeout = null;
    $('#jabatan, #status, #pengurus_inti').on('change', function() {
        if (filterTimeout) clearTimeout(filterTimeout);
        
        filterTimeout = setTimeout(() => {
            console.log('[KT] 🎯 Filter changed');
            handler.currentPage = 1;
            handler.loadKarangTaruna(1);
            filterTimeout = null;
        }, 300);
    });
    
    $('#confirmDeleteBtn').on('click', function() {
        if (karangTarunaToDelete) {
            alert('Fitur hapus dalam pengembangan');
            const modal = bootstrap.Modal.getInstance(document.getElementById('deleteModal'));
            modal.hide();
            karangTarunaToDelete = null;
        }
    });
    
    console.log('[KT] ✅ Page Initialized!');
});
</script>
{% endblock %}