@extends('layouts.app')

@section('title', $kelompok->nama_kelompok . ' - Arisan Qurban')
@section('header_title', 'Detail Kelompok')

@section('header_left')
<a href="{{ route('arisan.kelompok.index') }}" class="p-2 -ml-2 rounded-full text-slate-500 hover:text-slate-700 transition flex items-center justify-center">
    <i class="fa-solid fa-chevron-left text-lg"></i>
</a>
@endsection

@section('content')
<!-- Group Summary Card -->
<div class="bg-white rounded-3xl p-5 shadow-sm border border-slate-100 mb-6">
    <div class="flex justify-between items-start mb-3">
        <div>
            <h2 class="text-lg font-extrabold text-slate-800">{{ $kelompok->nama_kelompok }}</h2>
            <p class="text-xs text-slate-400 font-medium">Jenis Hewan: {{ $kelompok->jenis_hewan }}</p>
        </div>
        <span class="inline-flex items-center gap-1 px-3 py-1 rounded-full text-xs font-bold bg-slate-100 text-slate-700">
            @if($kelompok->jenis_hewan === 'Sapi')
                <i class="fa-solid fa-cow text-amber-600"></i>
            @else
                <i class="fa-solid fa-paw text-orange-500"></i>
            @endif
            {{ $kelompok->jenis_hewan }}
        </span>
    </div>

    <!-- Progress Tracker -->
    <div class="mb-4">
        <div class="flex justify-between items-center text-xs font-bold text-slate-500 mb-1">
            <span>Uang Terkumpul</span>
            <span class="text-brand-600">{{ $persentase }}%</span>
        </div>
        <div class="text-base font-extrabold text-slate-800 mb-2">
            Rp {{ number_format($totalSetoran, 0, ',', '.') }}
            <span class="text-xs font-normal text-slate-400">/ Rp {{ number_format($targetKelompok, 0, ',', '.') }}</span>
        </div>
        <div class="w-full bg-slate-100 rounded-full h-2">
            <div class="bg-gradient-to-r from-brand-500 to-emerald-500 h-2 rounded-full" style="width: {{ $persentase }}%"></div>
        </div>
    </div>

    <!-- Extra Group Details -->
    <div class="grid grid-cols-2 gap-4 border-t border-slate-50 pt-4 mt-2 text-xs">
        <div>
            <span class="block text-[10px] text-slate-400 uppercase font-bold tracking-wider">Jumlah Anggota</span>
            <span class="font-extrabold text-slate-800 text-sm">{{ $kelompok->anggota->count() }} Orang</span>
        </div>
        <div>
            <span class="block text-[10px] text-slate-400 uppercase font-bold tracking-wider">Beban per Anggota</span>
            <span class="font-extrabold text-slate-800 text-sm">Rp {{ number_format($targetPerAnggota, 0, ',', '.') }}</span>
        </div>
    </div>
</div>

<!-- Tabs / Member List Section -->
<div class="mb-6">
    <div class="flex items-center justify-between mb-4">
        <div>
            <h3 class="text-sm font-bold text-slate-800">Daftar Anggota & Status</h3>
            <span class="text-[10px] font-semibold text-slate-400">Bulan Ini: {{ \Carbon\Carbon::now()->translatedFormat('F') }}</span>
        </div>
        <button onclick="toggleAddMemberModal(true)" class="bg-brand-50 text-brand-600 hover:bg-brand-100 px-3 py-1.5 rounded-xl text-xs font-bold flex items-center gap-1.5 transition active:scale-95 cursor-pointer">
            <i class="fa-solid fa-user-plus text-xs"></i> Tambah
        </button>
    </div>

    <!-- Member Cards (No Tables!) -->
    <div class="space-y-3">
        @forelse($anggotaList as $member)
            <div class="bg-white rounded-2xl p-4 shadow-sm border border-slate-100 relative overflow-hidden">
                <!-- Status Badge -->
                <div class="absolute right-4 top-4">
                    @if($member->total_bayar >= $member->target)
                        <span class="inline-flex items-center gap-1 px-2.5 py-0.5 rounded-full text-[10px] font-bold bg-emerald-100 text-emerald-800">
                            <i class="fa-solid fa-circle-check"></i> Lunas
                        </span>
                    @elseif($member->lunas_bulan_ini)
                        <span class="inline-flex items-center gap-1 px-2.5 py-0.5 rounded-full text-[10px] font-bold bg-green-500 text-white shadow-sm shadow-green-500/20">
                            <i class="fa-solid fa-check"></i> Bulan Ini Lunas
                        </span>
                    @else
                        <span class="inline-flex items-center gap-1 px-2.5 py-0.5 rounded-full text-[10px] font-bold bg-rose-500 text-white shadow-sm shadow-rose-500/20">
                            <i class="fa-solid fa-clock"></i> Belum Bayar
                        </span>
                    @endif
                </div>

                <!-- Member Info & Actions -->
                <div class="mb-3 flex justify-between items-start pr-24">
                    <div>
                        <h4 class="font-bold text-slate-800 text-sm mb-0.5">{{ $member->nama }}</h4>
                        <p class="text-[10px] text-slate-400 font-semibold">{{ $member->no_hp }}</p>
                    </div>
                    <div class="flex items-center gap-1 shrink-0 -mt-1">
                        <!-- Edit Button -->
                        <button onclick="openEditMemberModal({{ $member->id }}, '{{ addslashes($member->nama) }}', '{{ $member->no_hp }}', {{ $member->kelompok->pluck('id')->toJson() }})" class="w-7 h-7 rounded-full 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-[10px]"></i>
                        </button>
                        <!-- Remove Button -->
                        <form action="{{ route('arisan.kelompok.remove_member', [$kelompok->id, $member->id]) }}" method="POST" onsubmit="return confirm('Apakah Anda yakin ingin mengeluarkan {{ addslashes($member->nama) }} dari kelompok ini?')" class="inline">
                            @csrf
                            @method('DELETE')
                            <button type="submit" class="w-7 h-7 rounded-full bg-slate-50 text-slate-500 hover:bg-rose-50 hover:text-rose-600 flex items-center justify-center transition cursor-pointer" title="Keluarkan dari Kelompok">
                                <i class="fa-solid fa-user-minus text-[10px]"></i>
                            </button>
                        </form>
                    </div>
                </div>

                <!-- Progress Details -->
                <div class="space-y-1">
                    <div class="flex justify-between items-center text-[10px] font-semibold text-slate-500">
                        <span>Pembayaran</span>
                        <span class="font-bold text-slate-800">
                            Rp {{ number_format($member->total_bayar, 0, ',', '.') }} / {{ number_format($member->target/1000, 0, ',', '.') }}K
                        </span>
                    </div>
                    <div class="w-full bg-slate-50 border border-slate-100 rounded-full h-1.5">
                        <div class="bg-brand-500 h-1.5 rounded-full" style="width: {{ $member->persentase }}%"></div>
                    </div>
                </div>
            </div>
        @empty
            <div class="bg-white p-8 rounded-2xl text-center border border-dashed border-slate-200 text-slate-400">
                <i class="fa-solid fa-user-slash text-2xl mb-2 text-slate-300"></i>
                <p class="text-xs">Belum ada anggota yang bergabung di kelompok ini.</p>
            </div>
        @endforelse
    </div>
</div>

<!-- Group Payment History -->
<div>
    <h3 class="text-sm font-bold text-slate-800 mb-3">Riwayat Setoran Kelompok</h3>
    
    <div class="bg-white rounded-2xl shadow-sm border border-slate-100 overflow-hidden divide-y divide-slate-100">
        @forelse($riwayatSetoran as $setor)
            <div class="p-3 flex items-center gap-3 justify-between hover:bg-slate-50 transition">
                <div class="flex items-center gap-3">
                    <div class="w-8 h-8 rounded-full bg-slate-100 flex items-center justify-center font-bold text-xs text-slate-700">
                        {{ strtoupper(substr($setor->anggota->nama, 0, 2)) }}
                    </div>
                    <div>
                        <h4 class="text-xs font-bold text-slate-800">{{ $setor->anggota->nama }}</h4>
                        <span class="text-[9px] text-slate-400">{{ $setor->tanggal->translatedFormat('d F Y') }}</span>
                    </div>
                </div>
                <div class="flex items-center gap-3 shrink-0">
                    <span class="text-xs font-extrabold text-emerald-600">+Rp {{ number_format($setor->jumlah, 0, ',', '.') }}</span>
                    <!-- Edit Button -->
                    <button onclick="openEditSetoranModal({{ $setor->id }}, {{ $setor->kelompok_id }}, {{ $setor->anggota_id }}, {{ (int)$setor->jumlah }}, '{{ $setor->tanggal->format('Y-m-d') }}')" class="w-7 h-7 rounded-full bg-slate-50 text-slate-500 hover:bg-brand-50 hover:text-brand-600 flex items-center justify-center transition cursor-pointer" title="Edit Setoran">
                        <i class="fa-solid fa-pen text-[10px]"></i>
                    </button>
                    <!-- Delete Button -->
                    <form action="{{ route('arisan.setoran.destroy', $setor->id) }}" method="POST" onsubmit="return confirm('Apakah Anda yakin ingin menghapus setoran ini?')" class="inline">
                        @csrf
                        @method('DELETE')
                        <button type="submit" class="w-7 h-7 rounded-full bg-slate-50 text-slate-500 hover:bg-rose-50 hover:text-rose-600 flex items-center justify-center transition cursor-pointer" title="Hapus Setoran">
                            <i class="fa-solid fa-trash text-[10px]"></i>
                        </button>
                    </form>
                </div>
            </div>
        @empty
            <div class="p-6 text-center text-slate-400 text-xs font-semibold">
                Belum ada riwayat setoran
            </div>
        @endforelse
    </div>
</div>

<!-- Add Member Bottom Sheet Modal -->
<div id="addMemberModal" 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 ke Kelompok</h3>
            <button onclick="toggleAddMemberModal(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.kelompok.add_member', $kelompok->id) }}" method="POST">
            @csrf
            
            <!-- Source Selector (Tab-like design) -->
            <div class="mb-5 bg-slate-100 p-1 rounded-xl grid grid-cols-2 text-center text-xs font-bold">
                <label class="cursor-pointer py-2 rounded-lg transition" id="tabExisting">
                    <input type="radio" name="anggota_source" value="existing" checked class="sr-only" onchange="switchAddSource('existing')">
                    Pilih Terdaftar
                </label>
                <label class="cursor-pointer py-2 rounded-lg transition text-slate-400" id="tabNew">
                    <input type="radio" name="anggota_source" value="new" class="sr-only" onchange="switchAddSource('new')">
                    Daftar Baru
                </label>
            </div>

            <!-- Option 1: Existing Members -->
            <div id="existingSourceSection" class="mb-6">
                <label class="block text-xs font-bold text-slate-600 uppercase tracking-wider mb-2">Pilih Anggota</label>
                @if($anggotaTersedia->count() > 0)
                    <select name="anggota_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="" disabled selected>-- Pilih Anggota --</option>
                        @foreach($anggotaTersedia as $tersedia)
                            <option value="{{ $tersedia->id }}">{{ $tersedia->nama }} ({{ $tersedia->no_hp }})</option>
                        @endforeach
                    </select>
                @else
                    <div class="p-4 bg-amber-50 rounded-xl border border-amber-200 text-xs text-amber-700 font-semibold">
                        Semua anggota terdaftar sudah masuk ke kelompok ini. Silakan gunakan opsi "Daftar Baru" jika ingin menambah anggota baru.
                    </div>
                @endif
            </div>

            <!-- Option 2: New Member Form -->
            <div id="newSourceSection" class="mb-6 hidden">
                <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" placeholder="Nama lengkap anggota" 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>
                <div>
                    <label class="block text-xs font-bold text-slate-600 uppercase tracking-wider mb-2">Nomor HP</label>
                    <input type="text" name="no_hp" placeholder="Contoh: 0812345678" 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>
            </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">
                Tambah ke Kelompok
            </button>
        </form>
    </div>
</div>

<!-- Edit Member 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</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 toggleAddMemberModal(show) {
        const modal = document.getElementById('addMemberModal');
        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 switchAddSource(source) {
        const tabExisting = document.getElementById('tabExisting');
        const tabNew = document.getElementById('tabNew');
        const sectionExisting = document.getElementById('existingSourceSection');
        const sectionNew = document.getElementById('newSourceSection');

        if (source === 'existing') {
            tabExisting.classList.remove('text-slate-400');
            tabExisting.classList.add('bg-white', 'shadow-sm', 'text-slate-800');
            tabNew.classList.remove('bg-white', 'shadow-sm', 'text-slate-800');
            tabNew.classList.add('text-slate-400');

            sectionExisting.classList.remove('hidden');
            sectionNew.classList.add('hidden');

            const selectEl = sectionExisting.querySelector('select');
            if (selectEl) selectEl.required = true;
            sectionNew.querySelectorAll('input').forEach(input => input.required = false);
        } else {
            tabNew.classList.remove('text-slate-400');
            tabNew.classList.add('bg-white', 'shadow-sm', 'text-slate-800');
            tabExisting.classList.remove('bg-white', 'shadow-sm', 'text-slate-800');
            tabExisting.classList.add('text-slate-400');

            sectionNew.classList.remove('hidden');
            sectionExisting.classList.add('hidden');

            const selectEl = sectionExisting.querySelector('select');
            if (selectEl) selectEl.required = false;
            sectionNew.querySelectorAll('input').forEach(input => input.required = true);
        }
    }

    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 modals on background click
    document.addEventListener('DOMContentLoaded', () => {
        switchAddSource('existing');
        
        const addModal = document.getElementById('addMemberModal');
        if (addModal) {
            addModal.addEventListener('click', function(e) {
                if (e.target === this) toggleAddMemberModal(false);
            });
        }
        
        const editModal = document.getElementById('editMemberModal');
        if (editModal) {
            editModal.addEventListener('click', function(e) {
                if (e.target === this) toggleEditMemberModal(false);
            });
        }
    });
</script>
@endsection