{% extends "admin_base.html" %}

{% block title %}Manajemen Anggota{% endblock %}
{% block page_title %}Manajemen Anggota{% endblock %}

{% block content %}
<div class="space-y-8">
    <!-- Header & Action -->
    <div class="flex flex-col lg:flex-row justify-between lg:items-center bg-gray-900/40 p-8 rounded-[2rem] border border-[#1f4068] gap-6">
        <div>
            <h2 class="text-xl font-black text-white uppercase tracking-tight">Database Anggota</h2>
            <p class="text-[10px] text-gray-500 font-bold uppercase tracking-widest mt-1">Total Personil: {{ anggota|length }} Anggota Terdaftar</p>
        </div>
        <div class="flex flex-col sm:flex-row gap-3">
            <form action="/admin/anggota" method="GET" class="relative group">
                <input type="text" name="search" value="{{ search }}" placeholder="Cari Nama Anggota..." class="w-full sm:w-56 bg-[#0a192f] border border-[#1f4068] rounded-xl px-4 py-3.5 text-xs text-white focus:ring-1 focus:ring-cyan-500 outline-none transition-all group-hover:border-cyan-500 font-bold pr-10">
                <button type="submit" class="absolute right-3 top-1/2 -translate-y-1/2 text-gray-400 hover:text-cyan-400 transition-colors">
                    <i class="fa-solid fa-magnifying-glass"></i>
                </button>
            </form>
            <button onclick="document.getElementById('modalImportCSV').classList.remove('hidden')" class="bg-indigo-600 text-white px-6 py-3.5 rounded-xl font-black text-xs hover:bg-indigo-500 transition-all shadow-lg shadow-indigo-600/20 flex items-center justify-center gap-2">
                <i class="fa-solid fa-file-csv text-lg"></i>
                IMPORT DARI EXCEL
            </button>
            <button onclick="document.getElementById('modalTambah').classList.remove('hidden')" class="bg-cyan-500 text-gray-900 px-6 py-3.5 rounded-xl font-black text-xs hover:bg-cyan-400 transition-all shadow-lg shadow-cyan-500/20 flex items-center justify-center gap-2">
                <i class="fa-solid fa-plus text-lg"></i>
                TAMBAH ANGGOTA
            </button>
        </div>
    </div>

    <!-- Table -->
    <div class="bg-[#0a192f]/80 rounded-[2.5rem] border border-[#1f4068] shadow-2xl overflow-hidden">
        <div class="overflow-x-auto min-h-[400px]">
            <table class="w-full text-left">
                <thead class="bg-gray-900/70 text-gray-500 text-[10px] uppercase font-black tracking-widest">
                    <tr>
                        <th class="px-8 py-5">Identitas</th>
                        <th class="px-8 py-5">Pangkat / NRP</th>
                        <th class="px-8 py-5">Jabatan & Kontak</th>
                        <th class="px-8 py-5 text-center">Aksi</th>
                    </tr>
                </thead>
                <tbody class="divide-y divide-gray-800 text-sm">
                    {% for p in anggota %}
                    <tr class="hover:bg-cyan-500/[0.02] transition-colors group">
                        <td class="px-8 py-6">
                            <div class="font-black text-white text-base">{{ p.nama }}</div>
                            <div class="text-[10px] font-mono text-cyan-600 uppercase tracking-tighter">ID: {{ p.id_anggota }}</div>
                        </td>
                        <td class="px-8 py-6">
                            <div class="text-white font-bold">{{ p.pangkat or '-' }}</div>
                            <div class="text-[10px] text-gray-500 font-black">NRP. {{ p.NRP or '-' }}</div>
                        </td>
                        <td class="px-8 py-6">
                            <div class="text-white text-xs font-bold">{{ p.jabatan or '-' }}</div>
                            <div class="text-[10px] text-gray-500 italic">{{ p.email }}</div>
                            <div class="text-[10px] font-mono text-emerald-400 mt-1">{{ p.no_wa or 'No WA Tidak Ada' }}</div>
                        </td>
                        <td class="px-8 py-6">
                            <div class="flex justify-center gap-2">
                                <a href="/admin/anggota/edit/{{ p.id_anggota }}" class="h-9 w-9 bg-amber-500/10 text-amber-500 rounded-lg flex items-center justify-center hover:bg-amber-500 hover:text-white transition-all" title="Edit Data">
                                    <i class="fa-solid fa-pen-to-square text-xs"></i>
                                </a>
                                <form action="/admin/anggota/hapus" method="POST" data-confirm="Hapus data anggota ini?">
                                    <input type="hidden" name="id_anggota" value="{{ p.id_anggota }}">
                                    <button type="submit" class="h-9 w-9 bg-red-500/10 text-red-500 rounded-lg flex items-center justify-center hover:bg-red-500 hover:text-white transition-all" title="Hapus Permanen">
                                        <i class="fa-solid fa-user-xmark text-xs"></i>
                                    </button>
                                </form>
                            </div>
                        </td>
                    </tr>
                    {% else %}
                    <tr>
                        <td colspan="4" class="px-8 py-20 text-center">
                            <div class="flex flex-col items-center gap-4 text-gray-600">
                                <i class="fa-solid fa-users-slash text-4xl"></i>
                                <p class="text-xs font-bold uppercase tracking-widest">Belum ada data anggota</p>
                            </div>
                        </td>
                    </tr>
                    {% endfor %}
                </tbody>
            </table>
        </div>
    </div>
</div>

<!-- Modal Tambah -->
<div id="modalTambah" class="fixed inset-0 bg-black/80 backdrop-blur-sm z-[100] hidden flex items-center justify-center p-6">
    <div class="bg-[#0a192f] border border-[#1f4068] w-full max-w-2xl rounded-[2.5rem] p-10 shadow-3xl overflow-y-auto max-h-[90vh]">
        <div class="flex justify-between items-center mb-8">
            <h3 class="text-2xl font-black text-white tracking-tighter uppercase">Tambah Anggota Baru</h3>
            <button onclick="document.getElementById('modalTambah').classList.add('hidden')" class="text-gray-500 hover:text-white transition-colors">
                <i class="fa-solid fa-xmark text-xl"></i>
            </button>
        </div>
        
        <form action="/admin/anggota/tambah" method="POST" class="grid grid-cols-1 md:grid-cols-2 gap-6">
            <div class="space-y-2">
                <label class="text-[10px] font-black text-cyan-500/60 uppercase tracking-widest ml-1">Nama Lengkap</label>
                <input type="text" name="nama" required class="w-full bg-gray-900 border border-[#1f4068] rounded-xl py-4 px-5 text-white focus:ring-1 focus:ring-cyan-500 outline-none transition-all font-bold text-sm">
            </div>
            <div class="space-y-2">
                <label class="text-[10px] font-black text-cyan-500/60 uppercase tracking-widest ml-1">Email</label>
                <input type="email" name="email" required class="w-full bg-gray-900 border border-[#1f4068] rounded-xl py-4 px-5 text-white focus:ring-1 focus:ring-cyan-500 outline-none transition-all font-bold text-sm">
            </div>
            <div class="space-y-2">
                <label class="text-[10px] font-black text-cyan-500/60 uppercase tracking-widest ml-1">Password</label>
                <input type="password" name="password" required class="w-full bg-gray-900 border border-[#1f4068] rounded-xl py-4 px-5 text-white focus:ring-1 focus:ring-cyan-500 outline-none transition-all font-bold text-sm">
            </div>
            <div class="space-y-2">
                <label class="text-[10px] font-black text-cyan-500/60 uppercase tracking-widest ml-1">Pangkat</label>
                <select name="pangkat" class="w-full bg-gray-900 border border-[#1f4068] rounded-xl py-4 px-5 text-white focus:ring-1 focus:ring-cyan-500 outline-none transition-all font-bold text-sm appearance-none cursor-pointer">
                    <option value="">-- Pilih Pangkat --</option>
                    {% for p in pangkats %}
                    <option value="{{ p.nama }}">{{ p.nama }}</option>
                    {% endfor %}
                </select>
            </div>
            <div class="space-y-2">
                <label class="text-[10px] font-black text-cyan-500/60 uppercase tracking-widest ml-1">Jabatan</label>
                <select name="jabatan" class="w-full bg-gray-900 border border-[#1f4068] rounded-xl py-4 px-5 text-white focus:ring-1 focus:ring-cyan-500 outline-none transition-all font-bold text-sm appearance-none cursor-pointer">
                    <option value="">-- Pilih Jabatan --</option>
                    {% for j in jabatans %}
                    <option value="{{ j.nama }}">{{ j.nama }}</option>
                    {% endfor %}
                </select>
            </div>
            <div class="space-y-2">
                <label class="text-[10px] font-black text-cyan-500/60 uppercase tracking-widest ml-1">NRP</label>
                <input type="number" name="NRP" class="w-full bg-gray-900 border border-[#1f4068] rounded-xl py-4 px-5 text-white focus:ring-1 focus:ring-cyan-500 outline-none transition-all font-bold text-sm font-mono text-cyan-500">
            </div>
            <div class="space-y-2">
                <label class="text-[10px] font-black text-cyan-500/60 uppercase tracking-widest ml-1">No WhatsApp</label>
                <input type="text" name="no_wa" placeholder="08xxxxxxxxxx" class="w-full bg-gray-900 border border-[#1f4068] rounded-xl py-4 px-5 text-white focus:ring-1 focus:ring-cyan-500 outline-none transition-all font-bold text-sm font-mono text-cyan-500">
            </div>
            
            <div class="md:col-span-2 pt-6">
                <button type="submit" class="w-full py-5 bg-cyan-600 text-white font-black text-xs rounded-2xl hover:bg-cyan-500 transition-all shadow-xl shadow-cyan-600/20 uppercase tracking-[0.2em]">
                    SIMPAN DATA KE DATABASE
                </button>
            </div>
        </form>
    </div>
</div>

<!-- Modal Import CSV -->
<div id="modalImportCSV" class="fixed inset-0 bg-black/80 backdrop-blur-sm z-[100] hidden flex items-center justify-center p-6">
    <div class="bg-[#0a192f] border border-[#1f4068] w-full max-w-lg rounded-[2.5rem] p-10 shadow-3xl text-center">
        <div class="flex justify-between items-center mb-6">
            <h3 class="text-xl font-black text-white uppercase tracking-tighter">Import Data Massal</h3>
            <button onclick="document.getElementById('modalImportCSV').classList.add('hidden')" class="text-gray-500 hover:text-white transition-colors">
                <i class="fa-solid fa-xmark text-xl"></i>
            </button>
        </div>
        
        <p class="text-[11px] text-gray-400 mb-6 leading-relaxed">
            Format yang didukung adalah <strong>.CSV</strong> dan <strong>.XLSX (Excel)</strong>. Pastikan urutan nama kolom pada tabel Anda mengikuti standar sistem kami agar tidak merusak database.
        </p>

        <a href="/admin/anggota/download-template" class="inline-flex items-center gap-2 bg-gray-800 hover:bg-gray-700 text-cyan-400 border border-gray-600 px-5 py-2.5 rounded-xl text-[10px] font-black uppercase tracking-widest mb-8 transition-colors">
            <i class="fa-solid fa-download"></i> Unduh Format Kosong (Template.csv)
        </a>

        <form action="/admin/anggota/import" method="POST" enctype="multipart/form-data" class="space-y-6">
            <div class="border-2 border-dashed border-[#1f4068] bg-gray-900/50 p-6 rounded-2xl flex flex-col items-center gap-3">
                <i class="fa-solid fa-file-excel text-4xl text-gray-500 mb-2"></i>
                <input type="file" name="file" accept=".csv, .xlsx" required class="text-xs text-gray-400 file:bg-gray-800 file:border-0 file:px-4 file:py-2 file:rounded-lg file:text-cyan-400 file:font-black file:cursor-pointer hover:file:bg-gray-700">
            </div>
            
            <button type="submit" class="w-full py-4 bg-indigo-600 text-white font-black text-xs rounded-2xl hover:bg-indigo-500 transition-all shadow-xl shadow-indigo-600/20 uppercase tracking-[0.2em] mt-2">
                <i class="fa-solid fa-bolt text-yellow-400 mr-2"></i> MULAI PROSES IMPORT
            </button>
        </form>
    </div>
</div>

{% endblock %}