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

{% block title %}Manajemen Anggota & Iuran - HMI Website{% endblock %}
{% block page_title %}Manajemen Anggota & Iuran{% endblock %}

{% block content %}
<!-- Search and Filter -->
<div class="bg-white shadow rounded-lg p-4 lg:p-6 mb-6">
    <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
        <div>
            <label for="search" class="block text-sm font-medium text-gray-700 mb-2">Cari Anggota</label>
            <input type="text" id="search" placeholder="Nama, NIM, atau email..." 
                   class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-green-500">
        </div>
        <div>
            <label for="status-filter" class="block text-sm font-medium text-gray-700 mb-2">Status</label>
            <select id="status-filter" class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-green-500">
                <option value="">Semua Status</option>
                <option value="aktif">Aktif</option>
                <option value="nonaktif">Nonaktif</option>
                <option value="alumni">Alumni</option>
            </select>
        </div>
        <div>
            <label for="role-filter" class="block text-sm font-medium text-gray-700 mb-2">Role</label>
            <select id="role-filter" class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-green-500">
                <option value="">Semua Role</option>
                <option value="anggota">Anggota</option>
                <option value="ketua">Ketua</option>
                <option value="sekretaris">Sekretaris</option>
                <option value="bendahara">Bendahara</option>
            </select>
        </div>
    </div>
</div>

<!-- Add Iuran Button -->
<div class="mb-6">
    <button id="add-iuran-btn" class="bg-green-600 hover:bg-green-700 text-white px-4 py-2 rounded-md flex items-center">
        <i class="fas fa-plus mr-2"></i>
        Tambah Iuran
    </button>
</div>

<!-- Anggota Table -->
<div class="bg-white shadow rounded-lg overflow-hidden">
    <div class="px-4 lg:px-6 py-4 border-b border-gray-200">
        <h3 class="text-lg font-medium text-gray-900">Daftar Anggota</h3>
    </div>
    
    <div class="overflow-x-auto">
        <table class="min-w-full divide-y divide-gray-200">
            <thead class="bg-gray-50">
                <tr>
                    <th class="px-4 lg:px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Anggota</th>
                    <th class="px-4 lg:px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">NIM</th>
                    <th class="px-4 lg:px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Role</th>
                    <th class="px-4 lg:px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Status</th>
                    <th class="px-4 lg:px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Bergabung</th>
                    <th class="px-4 lg:px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Aksi</th>
                </tr>
            </thead>
            <tbody id="anggota-table-body" class="bg-white divide-y divide-gray-200">
                <!-- Data akan dimuat via AJAX -->
            </tbody>
        </table>
    </div>
    
    <div id="loading" class="text-center py-8 hidden">
        <i class="fas fa-spinner fa-spin text-2xl text-gray-400"></i>
        <p class="text-gray-500 mt-2">Memuat data...</p>
    </div>
    
    <div id="no-data" class="text-center py-8 hidden">
        <i class="fas fa-users text-3xl text-gray-400 mb-2"></i>
        <p class="text-gray-500">Tidak ada data anggota</p>
    </div>
</div>

<!-- Add Iuran Modal -->
<div id="iuran-modal" class="fixed inset-0 bg-gray-600 bg-opacity-50 hidden z-50">
    <div class="flex items-center justify-center min-h-screen p-4">
        <div class="bg-white rounded-lg shadow-xl max-w-md w-full max-h-screen overflow-y-auto">
            <div class="px-4 lg:px-6 py-4 border-b border-gray-200">
                <h3 class="text-lg font-medium text-gray-900">Tambah Iuran Anggota</h3>
            </div>
            
            <form id="iuran-form" class="p-4 lg:p-6">
                <div class="mb-4">
                    <label for="anggota-select" class="block text-sm font-medium text-gray-700 mb-2">Pilih Anggota</label>
                    <select id="anggota-select" required class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-green-500">
                        <option value="">Pilih anggota...</option>
                    </select>
                </div>
                
                <div class="mb-4">
                    <label for="jumlah" class="block text-sm font-medium text-gray-700 mb-2">Jumlah Iuran</label>
                    <div class="relative">
                        <input type="number" id="jumlah" required min="0" step="1000" 
                               class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-green-500"
                               placeholder="Masukkan jumlah iuran">
                        <button type="button" onclick="openCalculator()" 
                                class="absolute right-2 top-1/2 transform -translate-y-1/2 text-gray-400 hover:text-gray-600">
                            <i class="fas fa-calculator"></i>
                        </button>
                    </div>
                </div>
                
                <div class="grid grid-cols-2 gap-4 mb-4">
                    <div>
                        <label for="bulan" class="block text-sm font-medium text-gray-700 mb-2">Bulan</label>
                        <select id="bulan" required class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-green-500">
                            <option value="">Pilih bulan...</option>
                            <option value="1">Januari</option>
                            <option value="2">Februari</option>
                            <option value="3">Maret</option>
                            <option value="4">April</option>
                            <option value="5">Mei</option>
                            <option value="6">Juni</option>
                            <option value="7">Juli</option>
                            <option value="8">Agustus</option>
                            <option value="9">September</option>
                            <option value="10">Oktober</option>
                            <option value="11">November</option>
                            <option value="12">Desember</option>
                        </select>
                    </div>
                    
                    <div>
                        <label for="tahun" class="block text-sm font-medium text-gray-700 mb-2">Tahun</label>
                        <input type="number" id="tahun" required min="2020" max="2030" 
                               class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-green-500"
                               value="2024">
                    </div>
                </div>
                
                <div class="mb-4">
                    <label for="keterangan" class="block text-sm font-medium text-gray-700 mb-2">Keterangan (Opsional)</label>
                    <textarea id="keterangan" rows="3" 
                              class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-green-500"
                              placeholder="Keterangan tambahan..."></textarea>
                </div>
                
                <div class="flex flex-col sm:flex-row justify-end space-y-3 sm:space-y-0 sm:space-x-3">
                    <button type="button" id="cancel-iuran" 
                            class="w-full sm:w-auto px-4 py-2 text-sm font-medium text-gray-700 bg-gray-100 hover:bg-gray-200 rounded-md">
                        Batal
                    </button>
                    <button type="submit" 
                            class="w-full sm:w-auto px-4 py-2 text-sm font-medium text-white bg-green-600 hover:bg-green-700 rounded-md">
                        Simpan Iuran
                    </button>
                </div>
            </form>
        </div>
    </div>
</div>
{% endblock %}

{% block extra_js %}
<script>
    let anggotaData = [];
    
    // Load anggota data
    function loadAnggota() {
        const loading = document.getElementById('loading');
        const noData = document.getElementById('no-data');
        const tableBody = document.getElementById('anggota-table-body');
        
        loading.classList.remove('hidden');
        noData.classList.add('hidden');
        
        const search = document.getElementById('search').value;
        const status = document.getElementById('status-filter').value;
        const role = document.getElementById('role-filter').value;
        
        const params = new URLSearchParams();
        if (search) params.append('search', search);
        if (status) params.append('status', status);
        if (role) params.append('role', role);
        
        fetch(`{% url 'keuangan:api_anggota_list' %}?${params}`)
            .then(response => response.json())
            .then(data => {
                loading.classList.add('hidden');
                anggotaData = data.data;
                
                if (data.success && data.data.length > 0) {
                    renderAnggotaTable(data.data);
                } else {
                    noData.classList.remove('hidden');
                }
            })
            .catch(error => {
                loading.classList.add('hidden');
                console.error('Error:', error);
                alert('Terjadi kesalahan saat memuat data');
            });
    }
    
    // Render anggota table
    function renderAnggotaTable(data) {
        const tableBody = document.getElementById('anggota-table-body');
        tableBody.innerHTML = '';
        
        data.forEach(anggota => {
            const row = document.createElement('tr');
            row.innerHTML = `
                <td class="px-4 lg:px-6 py-4 whitespace-nowrap">
                    <div class="flex items-center">
                        <div class="flex-shrink-0 h-8 w-8 lg:h-10 lg:w-10">
                            <div class="h-8 w-8 lg:h-10 lg:w-10 rounded-full bg-green-100 flex items-center justify-center">
                                <i class="fas fa-user text-green-600 text-sm lg:text-base"></i>
                            </div>
                        </div>
                        <div class="ml-3 lg:ml-4">
                            <div class="text-sm font-medium text-gray-900">${anggota.nama_lengkap}</div>
                            <div class="text-sm text-gray-500">${anggota.email}</div>
                        </div>
                    </div>
                </td>
                <td class="px-4 lg:px-6 py-4 whitespace-nowrap text-sm text-gray-900">${anggota.nim}</td>
                <td class="px-4 lg:px-6 py-4 whitespace-nowrap">
                    <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-blue-100 text-blue-800">
                        ${anggota.role}
                    </span>
                </td>
                <td class="px-4 lg:px-6 py-4 whitespace-nowrap">
                    <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium 
                        ${anggota.status === 'Aktif' ? 'bg-green-100 text-green-800' : 'bg-gray-100 text-gray-800'}">
                        ${anggota.status}
                    </span>
                </td>
                <td class="px-4 lg:px-6 py-4 whitespace-nowrap text-sm text-gray-500">${anggota.tanggal_bergabung}</td>
                <td class="px-4 lg:px-6 py-4 whitespace-nowrap text-sm font-medium">
                    <button onclick="addIuranForAnggota(${anggota.id})" 
                            class="text-green-600 hover:text-green-900">
                        <i class="fas fa-plus mr-1"></i>
                        Iuran
                    </button>
                </td>
            `;
            tableBody.appendChild(row);
        });
    }
    
    // Add iuran for specific anggota
    function addIuranForAnggota(anggotaId) {
        const anggota = anggotaData.find(a => a.id === anggotaId);
        if (anggota) {
            document.getElementById('anggota-select').value = anggotaId;
            document.getElementById('iuran-modal').classList.remove('hidden');
        }
    }
    
    // Event listeners
    document.getElementById('search').addEventListener('input', loadAnggota);
    document.getElementById('status-filter').addEventListener('change', loadAnggota);
    document.getElementById('role-filter').addEventListener('change', loadAnggota);
    
    document.getElementById('add-iuran-btn').addEventListener('click', function() {
        document.getElementById('iuran-modal').classList.remove('hidden');
    });
    
    document.getElementById('cancel-iuran').addEventListener('click', function() {
        document.getElementById('iuran-modal').classList.add('hidden');
        document.getElementById('iuran-form').reset();
    });
    
    // Populate anggota select
    function populateAnggotaSelect() {
        const select = document.getElementById('anggota-select');
        select.innerHTML = '<option value="">Pilih anggota...</option>';
        
        anggotaData.forEach(anggota => {
            const option = document.createElement('option');
            option.value = anggota.id;
            option.textContent = `${anggota.nama_lengkap} (${anggota.nim})`;
            select.appendChild(option);
        });
    }
    
    // Submit iuran form
    document.getElementById('iuran-form').addEventListener('submit', function(e) {
        e.preventDefault();
        
        const formData = {
            anggota_id: document.getElementById('anggota-select').value,
            jumlah: document.getElementById('jumlah').value,
            bulan: document.getElementById('bulan').value,
            tahun: document.getElementById('tahun').value,
            keterangan: document.getElementById('keterangan').value
        };
        
        fetch('{% url "keuangan:api_create_iuran" %}', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json',
                'X-CSRFToken': document.querySelector('[name=csrfmiddlewaretoken]').value
            },
            body: JSON.stringify(formData)
        })
        .then(response => response.json())
        .then(data => {
            if (data.success) {
                alert(data.message);
                document.getElementById('iuran-modal').classList.add('hidden');
                document.getElementById('iuran-form').reset();
                loadAnggota(); // Reload data
            } else {
                alert('Error: ' + data.error);
            }
        })
        .catch(error => {
            console.error('Error:', error);
            alert('Terjadi kesalahan saat menyimpan iuran');
        });
    });
    
    // Load data on page load
    document.addEventListener('DOMContentLoaded', function() {
        loadAnggota();
    });
</script>
{% endblock %}