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

{% block content %} 

<!-- Hero Section -->
<section class="relative py-8 sm:py-12 lg:py-16 overflow-hidden">
    {% if hero_image_url %}
    <div class="absolute inset-0 bg-cover bg-center bg-no-repeat" style="background-image: url('{{ hero_image_url }}');"></div>
    <div class="absolute inset-0 bg-gradient-to-br from-orange-600/80 to-amber-700/80"></div>
    {% else %}
    <div class="absolute inset-0 bg-gradient-to-br from-orange-600 to-amber-700"></div>
    {% endif %}
    
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 relative z-10">
        <div class="text-center text-white">
            <h1 class="text-3xl md:text-4xl font-bold mb-4">
                Karang Taruna Desa Pulosarok
            </h1>
            <p class="text-lg opacity-90 max-w-3xl mx-auto">
                Daftar anggota karang taruna dan kegiatan pemuda di Desa Pulosarok
            </p>
        </div>
    </div>
</section>

<!-- Stats Section -->
<section class="py-4 sm:py-6 md:py-8 bg-gradient-to-br from-orange-50 to-amber-100"> 
    <div class="container mx-auto px-3 sm:px-4 lg:px-6"> 
        
        <!-- Statistik Kartu -->
        <div class="grid grid-cols-2 md:grid-cols-4 gap-2 sm:gap-3 md:gap-4 mb-6"> 
            
            <!-- Total Anggota -->
            <div class="bg-gradient-to-br from-orange-50 to-white border-2 border-orange-200 rounded-xl p-3 md:p-4 text-center shadow-md"> 
                <div class="w-8 h-8 sm:w-10 sm:h-10 md:w-12 md:h-12 bg-gradient-to-br from-orange-500 to-orange-600 rounded-full flex items-center justify-center text-white mx-auto mb-2 md:mb-3 shadow-lg"> 
                    <i class="fas fa-users text-sm sm:text-base md:text-lg"></i> 
                </div> 
                <div class="text-lg sm:text-xl md:text-2xl font-extrabold text-gray-900 mb-1">{{ stats.total_anggota|default:0 }}</div> 
                <div class="text-[10px] sm:text-xs font-semibold text-gray-600 uppercase tracking-wide">Total Anggota</div> 
            </div> 
            
            <!-- Ketua -->
            <div class="bg-gradient-to-br from-blue-50 to-white border-2 border-blue-200 rounded-xl p-3 md:p-4 text-center shadow-md"> 
                <div class="w-8 h-8 sm:w-10 sm:h-10 md:w-12 md:h-12 bg-gradient-to-br from-blue-500 to-blue-600 rounded-full flex items-center justify-center text-white mx-auto mb-2 md:mb-3 shadow-lg"> 
                    <i class="fas fa-user-tie text-sm sm:text-base md:text-lg"></i> 
                </div> 
                <div class="text-lg sm:text-xl md:text-2xl font-extrabold text-gray-900 mb-1">{{ stats.ketua|default:0 }}</div> 
                <div class="text-[10px] sm:text-xs font-semibold text-gray-600 uppercase tracking-wide">Ketua</div> 
            </div> 
            
            <!-- Persentase Aktif -->
            <div class="bg-gradient-to-br from-green-50 to-white border-2 border-green-200 rounded-xl p-3 md:p-4 text-center shadow-md"> 
                <div class="w-8 h-8 sm:w-10 sm:h-10 md:w-12 md:h-12 bg-gradient-to-br from-green-500 to-green-600 rounded-full flex items-center justify-center text-white mx-auto mb-2 md:mb-3 shadow-lg"> 
                    <i class="fas fa-heart text-sm sm:text-base md:text-lg"></i> 
                </div> 
                <div class="text-lg sm:text-xl md:text-2xl font-extrabold text-gray-900 mb-1">{{ stats.persentase_aktif|default:0 }}%</div> 
                <div class="text-[10px] sm:text-xs font-semibold text-gray-600 uppercase tracking-wide">Aktif</div> 
            </div> 
            
            <!-- Tahun Aktif -->
            <div class="bg-gradient-to-br from-purple-50 to-white border-2 border-purple-200 rounded-xl p-3 md:p-4 text-center shadow-md"> 
                <div class="w-8 h-8 sm:w-10 sm:h-10 md:w-12 md:h-12 bg-gradient-to-br from-purple-500 to-purple-600 rounded-full flex items-center justify-center text-white mx-auto mb-2 md:mb-3 shadow-lg"> 
                    <i class="fas fa-star text-sm sm:text-base md:text-lg"></i> 
                </div> 
                <div class="text-lg sm:text-xl md:text-2xl font-extrabold text-gray-900 mb-1">{{ stats.tahun_aktif|default:0 }}</div> 
                <div class="text-[10px] sm:text-xs font-semibold text-gray-600 uppercase tracking-wide">Tahun Aktif</div> 
            </div> 
            
        </div> 
    </div> 
</section> 
<!-- Akhir Header dan Statistik -->

<!-- Bagian Form Pencarian dan Filter -->
<section class="py-4 sm:py-6 bg-white border-b border-gray-200"> 
    <div class="container mx-auto px-3 sm:px-4 lg:px-6"> 
        <form method="get" class="space-y-3 md:space-y-0 md:flex md:items-center md:space-x-4"> 
            
            <!-- Input Pencarian -->
            <div class="flex-1"> 
                <div class="relative"> 
                    <input 
                        type="text" 
                        name="search" 
                        value="{{ search_query }}" 
                        placeholder="Cari anggota karang taruna..." 
                        class="w-full px-4 py-2 pl-10 pr-4 text-sm border border-gray-300 rounded-lg bg-white text-gray-900 placeholder-gray-500 focus:ring-2 focus:ring-orange-500 focus:border-transparent"
                    > 
                    <div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none"> 
                        <i class="fas fa-search text-gray-400"></i> 
                    </div> 
                </div> 
            </div> 
            
            <!-- Filter Jabatan -->
            <div class="md:w-48"> 
                <select name="jabatan" 
                    class="w-full px-3 py-2 text-sm border border-gray-300 rounded-lg bg-white text-gray-900 focus:ring-2 focus:ring-orange-500 focus:border-transparent"> 
                    <option value="">Semua Jabatan</option> 
                    {% for value, label in jabatan_choices %} 
                    <option value="{{ value }}" {% if jabatan_filter == value %}selected{% endif %}>
                        {{ label }}
                    </option> 
                    {% endfor %} 
                </select> 
            </div> 
            
            <!-- Filter Status -->
            <div class="md:w-32"> 
                <select name="status" 
                    class="w-full px-3 py-2 text-sm border border-gray-300 rounded-lg bg-white text-gray-900 focus:ring-2 focus:ring-orange-500 focus:border-transparent"> 
                    <option value="aktif" {% if status_filter == 'aktif' %}selected{% endif %}>Aktif</option> 
                    <option value="non_aktif" {% if status_filter == 'non_aktif' %}selected{% endif %}>Non Aktif</option> 
                    <option value="alumni" {% if status_filter == 'alumni' %}selected{% endif %}>Alumni</option> 
                </select> 
            </div> 
            
            <!-- Tombol Cari -->
            <button type="submit" 
                class="w-full md:w-auto bg-orange-600 hover:bg-orange-700 text-white px-4 py-2 rounded-lg font-semibold text-sm transition-colors"> 
                <i class="fas fa-search mr-2"></i>Cari 
            </button> 
        </form> 
    </div> 
</section> 
<!-- Akhir Form Pencarian dan Filter -->

<!-- Bagian Daftar Hasil -->
<section class="py-4 sm:py-6 md:py-8 bg-white"> 
    <div class="container mx-auto px-3 sm:px-4 lg:px-6"> 
        
        {% if page_obj %} 
        
        <!-- Hasil Asli -->
        <div class="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-3 md:gap-4" id="original-results"> 
            {% for anggota in page_obj %} 
            <div class="bg-white rounded-xl shadow-md hover:shadow-lg transition-shadow border border-gray-200 overflow-hidden"> 
                <div class="p-4"> 
                    
                    <div class="text-center mb-3"> 
                        <div class="w-16 h-16 bg-gradient-to-br from-orange-500 to-orange-600 rounded-full flex items-center justify-center text-white mx-auto mb-3 shadow-lg"> 
                            <i class="fas fa-user text-lg"></i> 
                        </div> 
                        <h3 class="font-semibold text-gray-900 text-sm mb-1">{{ anggota.penduduk.name }}</h3> 
                        <p class="text-xs text-orange-600 font-medium">{{ anggota.get_jabatan_display }}</p> 
                    </div> 
                    
                    <div class="space-y-2 text-xs"> 
                        <div class="flex justify-between"> 
                            <span class="text-gray-500">No. Anggota:</span> 
                            <span class="text-gray-900 font-medium">{{ anggota.nomor_anggota }}</span> 
                        </div> 
                        
                        {% if anggota.bidang_keahlian %} 
                        <div class="flex justify-between"> 
                            <span class="text-gray-500">Keahlian:</span> 
                            <span class="text-gray-900 font-medium">{{ anggota.bidang_keahlian }}</span> 
                        </div> 
                        {% endif %} 
                        
                        <div class="flex justify-between"> 
                            <span class="text-gray-500">Status:</span> 
                            <span class="px-2 py-1 text-xs rounded-full 
                                {% if anggota.status == 'aktif' %}bg-green-100 text-green-800 
                                {% elif anggota.status == 'non_aktif' %}bg-red-100 text-red-800 
                                {% else %}bg-gray-100 text-gray-800 
                                {% endif %}"> 
                                {{ anggota.get_status_display }} 
                            </span> 
                        </div> 
                        
                        {% if anggota.penduduk.dusun %} 
                        <div class="flex justify-between"> 
                            <span class="text-gray-500">Dusun:</span> 
                            <span class="text-gray-900 font-medium">{{ anggota.penduduk.dusun.name }}</span> 
                        </div> 
                        {% endif %} 
                    </div> 
                    
                    <div class="mt-4 pt-3 border-t border-gray-200"> 
                        <a href="{% url 'organization:karang_taruna_detail' anggota.pk %}" 
                            class="block w-full text-center bg-orange-600 hover:bg-orange-700 text-white py-2 px-3 rounded-lg text-xs font-semibold transition-colors"> 
                            <i class="fas fa-eye mr-1"></i>Lihat Detail 
                        </a> 
                    </div> 
                </div> 
            </div> 
            {% endfor %} 
        </div> 
        
        <!-- Paginasi -->
        {% if page_obj.has_other_pages %} 
        <div class="mt-6 flex justify-center"> 
            <nav class="flex items-center space-x-1"> 
                
                {% if page_obj.has_previous %} 
                <a href="?page={{ page_obj.previous_page_number }}{% if search_query %}&search={{ search_query }}{% endif %}{% if jabatan_filter %}&jabatan={{ jabatan_filter }}{% endif %}{% if status_filter %}&status={{ status_filter }}{% endif %}" 
                    class="px-3 py-2 text-sm text-gray-500 hover:text-gray-700"> 
                    <i class="fas fa-chevron-left"></i> 
                </a> 
                {% endif %} 
                
                {% for num in page_obj.paginator.page_range %} 
                    {% if page_obj.number == num %} 
                        <span class="px-3 py-2 text-sm bg-orange-600 text-white rounded-lg">{{ num }}</span> 
                    {% elif num > page_obj.number|add:'-3' and num < page_obj.number|add:'3' %} 
                        <a href="?page={{ num }}{% if search_query %}&search={{ search_query }}{% endif %}{% if jabatan_filter %}&jabatan={{ jabatan_filter }}{% endif %}{% if status_filter %}&status={{ status_filter }}{% endif %}" 
                            class="px-3 py-2 text-sm text-gray-500 hover:text-gray-700"> 
                            {{ num }} 
                        </a> 
                    {% endif %} 
                {% endfor %} 
                
                {% if page_obj.has_next %} 
                <a href="?page={{ page_obj.next_page_number }}{% if search_query %}&search={{ search_query }}{% endif %}{% if jabatan_filter %}&jabatan={{ jabatan_filter }}{% endif %}{% if status_filter %}&status={{ status_filter }}{% endif %}" 
                    class="px-3 py-2 text-sm text-gray-500 hover:text-gray-700"> 
                    <i class="fas fa-chevron-right"></i> 
                </a> 
                {% endif %} 
                
            </nav> 
        </div> 
        {% endif %} 
        
        {% else %} 
        
        <!-- Pesan Tidak Ada Data -->
        <div class="text-center py-8"> 
            <div class="w-16 h-16 bg-gray-200 rounded-full flex items-center justify-center mx-auto mb-4"> 
                <i class="fas fa-users text-gray-400 text-xl"></i> 
            </div> 
            <h3 class="text-lg font-semibold text-gray-900 mb-2">Tidak ada anggota karang taruna</h3> 
            <p class="text-sm text-gray-600 mb-4"> 
                {% if search_query %} 
                    Tidak ditemukan anggota karang taruna dengan kata kunci "{{ search_query }}" 
                {% else %} 
                    Belum ada data anggota karang taruna yang tersedia 
                {% endif %} 
            </p> 
            
            {% if search_query %} 
            <a href="{% url 'organization:karang_taruna_list' %}" 
                class="inline-flex items-center gap-2 bg-orange-600 hover:bg-orange-700 text-white px-4 py-2 rounded-lg font-semibold text-sm transition-colors"> 
                <i class="fas fa-refresh"></i> Reset Pencarian 
            </a> 
            {% endif %} 
        </div> 
        
        {% endif %} 
        
    </div> 
</section> 
<!-- Akhir Bagian Daftar Hasil -->

<!-- Tempat penampungan hasil AJAX (tersembunyi) -->
<div id="ajax-results" class="hidden"> </div> 

{% endblock content %} 

<!-- Script JS untuk Filter AJAX -->
{% block extra_js %} 
<script> 
    document.addEventListener('DOMContentLoaded', function() { 
        const filterForm = document.querySelector('form[method="get"]'); 
        const resultsContainer = document.querySelector('#ajax-results'); 
        const originalResults = document.querySelector('#original-results'); 

        if (filterForm) { 
            // Ambil elemen form
            const searchInput = filterForm.querySelector('input[name="search"]'); 
            const jabatanSelect = filterForm.querySelector('select[name="jabatan"]'); 
            const statusSelect = filterForm.querySelector('select[name="status"]'); 
            // Perhatian: Tidak ada select[name="pengurus"] di HTML, tapi ada di JS. Saya akan hapus variabel pengurusSelect dari sini.
            // const pengurusSelect = filterForm.querySelector('select[name="pengurus"]'); 

            let debounceTimer; 

            // Fungsi untuk melakukan filter via AJAX
            function performAjaxFilter() { 
                const formData = new FormData(filterForm); 
                const params = new URLSearchParams(); 
                
                // Kumpulkan parameter yang tidak kosong
                for (let [key, value] of formData.entries()) { 
                    if (value.trim() !== '') { 
                        params.append(key, value); 
                    } 
                } 

                // Tampilkan loading state
                if (originalResults) { 
                    originalResults.style.opacity = '0.5'; 
                } 

                fetch(`{% url 'organization:ajax_karang_taruna_filter' %}?${params.toString()}`, { 
                    method: 'GET', 
                    headers: { 
                        'X-Requested-With': 'XMLHttpRequest', 
                    } 
                }) 
                .then(response => response.json()) 
                .then(data => { 
                    if (data.html) { 
                        // Sembunyikan hasil asli
                        if (originalResults) { 
                            originalResults.style.display = 'none'; 
                        } 
                        // Tampilkan hasil AJAX
                        resultsContainer.innerHTML = data.html; 
                        resultsContainer.classList.remove('hidden'); 
                        
                        // Perbarui paginasi jika diperlukan (fungsi updatePagination)
                        updatePagination(data); 
                    } 
                }) 
                .catch(error => { 
                    console.error('Error:', error); 
                    // Tampilkan kembali hasil asli jika terjadi error
                    if (originalResults) { 
                        originalResults.style.display = 'grid'; // Menggunakan grid sesuai CSS aslinya
                    } 
                    resultsContainer.classList.add('hidden'); 
                }) 
                .finally(() => { 
                    if (originalResults) { 
                        originalResults.style.opacity = '1'; 
                    } 
                }); 
            } 

            // Debounced search pada input
            if (searchInput) { 
                searchInput.addEventListener('input', function() { 
                    clearTimeout(debounceTimer); 
                    debounceTimer = setTimeout(performAjaxFilter, 500); 
                }); 
            } 

            // Filter langsung saat pilihan select berubah
            if (jabatanSelect) { 
                jabatanSelect.addEventListener('change', performAjaxFilter); 
            } 
            if (statusSelect) { 
                statusSelect.addEventListener('change', performAjaxFilter); 
            } 
            // Perhatian: pengurusSelect dihapus karena tidak ada di HTML.
            // if (pengurusSelect) { 
            //     pengurusSelect.addEventListener('change', performAjaxFilter); 
            // } 

            // Tangani submit form (mencegah submit penuh)
            filterForm.addEventListener('submit', function(e) { 
                e.preventDefault(); 
                performAjaxFilter(); 
            }); 
        } 
        
        // Fungsi placeholder untuk memperbarui paginasi (perlu implementasi lebih lanjut)
        function updatePagination(data) { 
            // Fungsi ini harus diimplementasikan untuk mengganti paginasi Django dengan paginasi AJAX.
            // Saat ini hanya sekadar placeholder.
            const paginationContainer = document.querySelector('.flex.items-center.space-x-1'); 
            if (paginationContainer && data.has_next !== undefined) { 
                // Logika pembaruan paginasi di sini
                // console.log("Perlu update paginasi dengan data:", data);
            } 
        } 
    }); 
</script> 
{% endblock extra_js %}