@extends('layouts.app')

@section('title', 'Daftar Anggota - Arisan Qurban')
@section('header_title', 'Anggota Arisan')

@section('header_right')
<button onclick="toggleAnggotaModal(true)" class="bg-brand-50 text-brand-600 hover:bg-brand-100 p-2 rounded-xl transition text-xs font-bold flex items-center gap-1 cursor-pointer">
    <i class="fa-solid fa-user-plus text-sm"></i> Baru
</button>
@endsection

@section('content')
<!-- Group Filter Pills -->
<div class="flex items-center gap-2 overflow-x-auto no-scrollbar pb-3 mb-2 print:hidden -mx-4 px-4">
    <button onclick="applyGroupFilter('all', this)" class="group-filter-pill px-4 py-2 rounded-full text-xs font-bold whitespace-nowrap transition cursor-pointer bg-brand-600 text-white shadow-sm shadow-brand-500/10">
        Semua
    </button>
    <button onclick="applyGroupFilter('none', this)" class="group-filter-pill px-4 py-2 rounded-full text-xs font-bold whitespace-nowrap transition cursor-pointer bg-white text-slate-600 border border-slate-200/80 hover:bg-slate-50">
        Belum Berkelompok
    </button>
    @foreach($allKelompok as $kel)
        <button onclick="applyGroupFilter('{{ $kel->id }}', this)" class="group-filter-pill px-4 py-2 rounded-full text-xs font-bold whitespace-nowrap transition cursor-pointer bg-white text-slate-600 border border-slate-200/80 hover:bg-slate-50">
            {{ $kel->nama_kelompok }}
        </button>
    @endforeach
</div>

<!-- Anggota Cards Container -->
<div class="space-y-3">
    @forelse($anggota as $ang)
        <div class="anggota-card bg-white rounded-2xl p-4 shadow-sm border border-slate-100 flex items-center justify-between gap-3" data-kelompok-ids="{{ $ang->kelompok->pluck('id')->toJson() }}">
            <!-- Left: Icon & Details -->
            <div class="flex items-center gap-3 min-w-0">
                <!-- Initials Avatar -->
                <div class="w-10 h-10 rounded-full bg-brand-50 text-brand-700 flex items-center justify-center font-bold text-sm shrink-0">
                    {{ strtoupper(substr($ang->nama, 0, 2)) }}
                </div>
                
                <div class="min-w-0">
                    <h3 class="font-bold text-slate-800 text-sm truncate">{{ $ang->nama }}</h3>
                    <!-- WhatsApp link & number -->
                    <a href="https://wa.me/{{ preg_replace('/[^0-9]/', '', $ang->no_hp) }}" target="_blank" class="text-[10px] text-brand-600 hover:underline flex items-center gap-1 font-semibold">
                        <i class="fa-brands fa-whatsapp"></i> {{ $ang->no_hp }}
                    </a>
                    
                    <!-- Groups Count & Total Paid -->
                    <div class="flex items-center gap-2 mt-1.5 text-[10px] text-slate-400 font-semibold">
                        <span>{{ $ang->kelompok_count }} Kelompok</span>
                        <span>&bull;</span>
                        <span class="text-slate-600">Total Setor: Rp {{ number_format($ang->setoran_sum_jumlah ?? 0, 0, ',', '.') }}</span>
                    </div>
                </div>
            </div>

            <!-- Right: Action Call/WhatsApp Button -->
            <div class="flex gap-2">
                <button onclick="openEditMemberModal({{ $ang->id }}, '{{ addslashes($ang->nama) }}', '{{ $ang->no_hp }}', {{ $ang->kelompok->pluck('id')->toJson() }})" class="w-8 h-8 rounded-xl bg-slate-50 text-slate-500 hover:bg-brand-50 hover:text-brand-600 flex items-center justify-center transition cursor-pointer" title="Edit Anggota">
                    <i class="fa-solid fa-pen text-xs"></i>
                </button>
                <a href="tel:{{ $ang->no_hp }}" class="w-8 h-8 rounded-xl bg-slate-50 text-slate-500 flex items-center justify-center hover:bg-slate-100 transition">
                    <i class="fa-solid fa-phone text-xs"></i>
                </a>
            </div>
        </div>
    @empty
        <div class="bg-white p-12 rounded-3xl text-center border border-dashed border-slate-200 text-slate-400">
            <i class="fa-solid fa-user-slash text-3xl mb-3 text-slate-300"></i>
            <p class="text-sm font-semibold">Belum ada anggota</p>
            <p class="text-xs text-slate-400 mt-1">Ketuk tombol "+" atau "Baru" untuk menambah anggota baru.</p>
        </div>
    @endforelse
</div>

<!-- Empty State when filter yields no results -->
<div id="noMatchPlaceholder" class="bg-white p-12 rounded-3xl text-center border border-dashed border-slate-200 text-slate-400 hidden mt-4">
    <i class="fa-solid fa-user-slash text-3xl mb-3 text-slate-300"></i>
    <p class="text-sm font-semibold">Tidak ada anggota cocok</p>
    <p class="text-xs text-slate-400 mt-1">Tidak ada anggota yang tergabung dalam kelompok ini.</p>
</div>

<!-- Add Anggota Bottom Sheet Modal -->
<div id="anggotaModal" class="fixed inset-0 bg-black/50 z-50 flex items-end justify-center hidden opacity-0 transition-opacity duration-300">
    <div class="bg-white w-full max-w-md rounded-t-3xl shadow-2xl p-6 transform translate-y-full transition-transform duration-300">
        <!-- Modal Header -->
        <div class="flex items-center justify-between mb-6">
            <h3 class="text-lg font-bold text-slate-800">Tambah Anggota Baru</h3>
            <button onclick="toggleAnggotaModal(false)" class="bg-slate-100 text-slate-500 hover:bg-slate-200 w-8 h-8 rounded-full flex items-center justify-center transition cursor-pointer">
                <i class="fa-solid fa-xmark"></i>
            </button>
        </div>

        <!-- Modal Form -->
        <form action="{{ route('arisan.anggota.store') }}" method="POST">
            @csrf
            <!-- Nama -->
            <div class="mb-4">
                <label class="block text-xs font-bold text-slate-600 uppercase tracking-wider mb-2">Nama Lengkap</label>
                <input type="text" name="nama" required placeholder="Contoh: Haji Slamet" class="w-full bg-slate-50 border border-slate-200 rounded-xl px-4 py-3 text-sm focus:outline-none focus:border-brand-500 focus:bg-white transition">
            </div>

            <!-- No HP -->
            <div class="mb-4">
                <label class="block text-xs font-bold text-slate-600 uppercase tracking-wider mb-2">Nomor HP / WhatsApp</label>
                <input type="tel" name="no_hp" required placeholder="Contoh: 08123456789" class="w-full bg-slate-50 border border-slate-200 rounded-xl px-4 py-3 text-sm focus:outline-none focus:border-brand-500 focus:bg-white transition">
            </div>

            <!-- Gabung Kelompok -->
            <div class="mb-6">
                <label class="block text-xs font-bold text-slate-600 uppercase tracking-wider mb-2">Hubungkan ke Kelompok (Opsional)</label>
                <select name="kelompok_id" class="w-full bg-slate-50 border border-slate-200 rounded-xl px-4 py-3 text-sm focus:outline-none focus:border-brand-500 focus:bg-white transition">
                    <option value="">-- Pilih Kelompok --</option>
                    @foreach($allKelompok as $kel)
                        <option value="{{ $kel->id }}">{{ $kel->nama_kelompok }} ({{ $kel->jenis_hewan }})</option>
                    @endforeach
                </select>
            </div>

            <!-- Submit Button -->
            <button type="submit" class="w-full bg-gradient-to-tr from-brand-600 to-emerald-500 hover:from-brand-700 hover:to-emerald-600 text-white font-bold py-3.5 px-4 rounded-xl shadow-lg shadow-brand-500/20 active:scale-[0.98] transition cursor-pointer">
                Daftarkan Anggota
            </button>
        </form>
    </div>
</div>

<!-- Edit Anggota Bottom Sheet Modal -->
<div id="editMemberModal" class="fixed inset-0 bg-black/50 z-50 flex items-end justify-center hidden opacity-0 transition-opacity duration-300">
    <div class="bg-white w-full max-w-md rounded-t-3xl shadow-2xl p-6 transform translate-y-full transition-transform duration-300">
        <!-- Modal Header -->
        <div class="flex items-center justify-between mb-6">
            <h3 class="text-lg font-bold text-slate-800">Edit Data Anggota</h3>
            <button onclick="toggleEditMemberModal(false)" class="bg-slate-100 text-slate-500 hover:bg-slate-200 w-8 h-8 rounded-full flex items-center justify-center transition cursor-pointer">
                <i class="fa-solid fa-xmark"></i>
            </button>
        </div>

        <!-- Modal Form -->
        <form id="editMemberForm" method="POST">
            @csrf
            <!-- Nama Anggota -->
            <div class="mb-4">
                <label class="block text-xs font-bold text-slate-600 uppercase tracking-wider mb-2">Nama Anggota</label>
                <input type="text" name="nama" id="editMemberNama" required class="w-full bg-slate-50 border border-slate-200 rounded-xl px-4 py-3 text-sm focus:outline-none focus:border-brand-500 focus:bg-white transition">
            </div>

            <!-- Nomor HP -->
            <div class="mb-4">
                <label class="block text-xs font-bold text-slate-600 uppercase tracking-wider mb-2">Nomor HP / WhatsApp</label>
                <input type="text" name="no_hp" id="editMemberNoHp" required class="w-full bg-slate-50 border border-slate-200 rounded-xl px-4 py-3 text-sm focus:outline-none focus:border-brand-500 focus:bg-white transition">
            </div>

            <!-- Kelompok checkboxes to move/transfer groups -->
            <div class="mb-6">
                <label class="block text-xs font-bold text-slate-600 uppercase tracking-wider mb-2">Kelompok</label>
                <div class="space-y-2 max-h-40 overflow-y-auto border border-slate-200 rounded-xl p-3 bg-slate-50">
                    @foreach($allKelompok as $kel)
                        <label class="flex items-center gap-2 text-sm font-semibold text-slate-700 cursor-pointer">
                            <input type="checkbox" name="kelompok_ids[]" value="{{ $kel->id }}" class="edit-member-kelompok-checkbox rounded text-brand-600 focus:ring-brand-500">
                            <span>{{ $kel->nama_kelompok }} ({{ $kel->jenis_hewan }})</span>
                        </label>
                    @endforeach
                </div>
            </div>

            <!-- Submit Button -->
            <button type="submit" class="w-full bg-gradient-to-tr from-brand-600 to-emerald-500 hover:from-brand-700 hover:to-emerald-600 text-white font-bold py-3.5 px-4 rounded-xl shadow-lg shadow-brand-500/20 active:scale-[0.98] transition cursor-pointer">
                Simpan Perubahan
            </button>
        </form>
    </div>
</div>
@endsection

@section('scripts')
<script>
    function applyGroupFilter(val, element) {
        // Toggle active styles on pills
        const pills = document.querySelectorAll('.group-filter-pill');
        pills.forEach(pill => {
            pill.classList.remove('bg-brand-600', 'text-white', 'shadow-sm', 'shadow-brand-500/10');
            pill.classList.add('bg-white', 'text-slate-600', 'border', 'border-slate-200/80', 'hover:bg-slate-50');
        });
        
        if (element) {
            element.classList.remove('bg-white', 'text-slate-600', 'border', 'border-slate-200/80', 'hover:bg-slate-50');
            element.classList.add('bg-brand-600', 'text-white', 'shadow-sm', 'shadow-brand-500/10');
        }

        // Apply filtering logic
        const cards = document.querySelectorAll('.anggota-card');
        let visibleCount = 0;

        cards.forEach(card => {
            const kelompokIds = JSON.parse(card.getAttribute('data-kelompok-ids') || '[]');
            let show = false;

            if (val === 'all') {
                show = true;
            } else if (val === 'none') {
                show = (kelompokIds.length === 0);
            } else {
                show = kelompokIds.includes(parseInt(val, 10));
            }

            if (show) {
                card.style.display = 'flex';
                visibleCount++;
            } else {
                card.style.display = 'none';
            }
        });

        // Show/hide empty state placeholder
        const noMatchPlaceholder = document.getElementById('noMatchPlaceholder');
        if (cards.length === 0) {
            if (noMatchPlaceholder) noMatchPlaceholder.classList.add('hidden');
            return;
        }

        if (visibleCount === 0) {
            if (noMatchPlaceholder) {
                noMatchPlaceholder.classList.remove('hidden');
            }
        } else {
            if (noMatchPlaceholder) {
                noMatchPlaceholder.classList.add('hidden');
            }
        }
    }

    function toggleAnggotaModal(show) {
        const modal = document.getElementById('anggotaModal');
        const panel = modal.querySelector('div');
        if (show) {
            modal.classList.remove('hidden');
            setTimeout(() => {
                modal.classList.remove('opacity-0');
                panel.classList.remove('translate-y-full');
            }, 10);
        } else {
            modal.classList.add('opacity-0');
            panel.classList.add('translate-y-full');
            setTimeout(() => {
                modal.classList.add('hidden');
            }, 300);
        }
    }

    function toggleEditMemberModal(show) {
        const modal = document.getElementById('editMemberModal');
        const panel = modal.querySelector('div');
        if (show) {
            modal.classList.remove('hidden');
            setTimeout(() => {
                modal.classList.remove('opacity-0');
                panel.classList.remove('translate-y-full');
            }, 10);
        } else {
            modal.classList.add('opacity-0');
            panel.classList.add('translate-y-full');
            setTimeout(() => {
                modal.classList.add('hidden');
            }, 300);
        }
    }

    function openEditMemberModal(id, nama, noHp, kelompokIds = []) {
        const form = document.getElementById('editMemberForm');
        form.action = `/arisan/anggota/${id}/update`;
        document.getElementById('editMemberNama').value = nama;
        document.getElementById('editMemberNoHp').value = noHp;
        
        // Reset checkboxes
        const checkboxes = document.querySelectorAll('.edit-member-kelompok-checkbox');
        checkboxes.forEach(cb => {
            cb.checked = kelompokIds.includes(parseInt(cb.value));
        });

        toggleEditMemberModal(true);
    }

    // Close modal on background click
    document.addEventListener('DOMContentLoaded', () => {
        const addModal = document.getElementById('anggotaModal');
        if (addModal) {
            addModal.addEventListener('click', function(e) {
                if (e.target === this) {
                    toggleAnggotaModal(false);
                }
            });
        }

        const editModal = document.getElementById('editMemberModal');
        if (editModal) {
            editModal.addEventListener('click', function(e) {
                if (e.target === this) {
                    toggleEditMemberModal(false);
                }
            });
        }
    });
</script>
@endsection