@extends('layouts.app')

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

@section('header_right')
<button onclick="toggleGroupModal(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-folder-plus text-sm"></i> Baru
</button>
@endsection

@section('content')
<!-- Kelompok Cards Container -->
<div class="space-y-4">
    @forelse($kelompok as $kel)
        <a href="{{ route('arisan.kelompok.show', $kel->id) }}" class="block bg-white rounded-3xl p-5 shadow-sm border border-slate-100 hover:border-brand-200 transition active:scale-[0.99] relative overflow-hidden">
            <!-- Animal badge on top right -->
            <div class="absolute right-4 top-4">
                <span class="inline-flex items-center gap-1 px-3 py-1 rounded-full text-xs font-bold {{ $kel->jenis_hewan === 'Sapi' ? 'bg-amber-50 text-amber-700' : 'bg-orange-50 text-orange-700' }}">
                    @if($kel->jenis_hewan === 'Sapi')
                        <i class="fa-solid fa-cow"></i>
                    @else
                        <i class="fa-solid fa-paw"></i> <!-- Sheep/Goat fallback -->
                    @endif
                    {{ $kel->jenis_hewan }}
                </span>
            </div>

            <!-- Group Title -->
            <div class="mb-4">
                <h3 class="font-extrabold text-slate-800 text-base leading-tight pr-20">{{ $kel->nama_kelompok }}</h3>
                <span class="text-xs text-slate-400 font-semibold">{{ $kel->anggota_count }} Anggota Terdaftar</span>
            </div>

            <!-- Financial Recap -->
            <div class="grid grid-cols-2 gap-2 mb-4 border-y border-slate-50 py-3 text-xs">
                <div>
                    <span class="block text-[10px] text-slate-400 font-bold uppercase tracking-wider">Terkumpul</span>
                    <span class="text-sm font-extrabold text-slate-800">Rp {{ number_format($kel->total_setoran, 0, ',', '.') }}</span>
                </div>
                <div>
                    <span class="block text-[10px] text-slate-400 font-bold uppercase tracking-wider text-right">Target Dana</span>
                <span class="text-sm font-extrabold text-brand-600 block text-right">Rp {{ number_format($kel->target, 0, ',', '.') }}</span>
                </div>
            </div>

            <!-- Progress Bar -->
            <div>
                <div class="flex justify-between items-center text-xs font-semibold text-slate-500 mb-1.5">
                    <span class="inline-flex items-center gap-1.5">
                        <span class="w-2 h-2 rounded-full {{ $kel->persentase >= 100 ? 'bg-emerald-500' : 'bg-amber-400' }}"></span>
                        {{ $kel->status }}
                    </span>
                    <span class="font-bold text-slate-800">{{ $kel->persentase }}%</span>
                </div>
                <div class="w-full bg-slate-100 rounded-full h-2">
                    <div class="bg-gradient-to-r {{ $kel->persentase >= 100 ? 'from-emerald-500 to-teal-400' : 'from-brand-500 to-emerald-400' }} h-2 rounded-full" style="width: {{ $kel->persentase }}%"></div>
                </div>
            </div>
        </a>
    @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-layer-group text-3xl mb-3 text-slate-300"></i>
            <p class="text-sm font-semibold">Belum ada kelompok</p>
            <p class="text-xs text-slate-400 mt-1">Ketuk tombol "+" atau "Baru" untuk membuat kelompok baru.</p>
        </div>
    @endforelse
</div>

<!-- Add Group Bottom Sheet Modal -->
<div id="groupModal" 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">Bentuk Kelompok Baru</h3>
            <button onclick="toggleGroupModal(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.store') }}" method="POST">
            @csrf
            <!-- Nama Kelompok -->
            <div class="mb-4">
                <label class="block text-xs font-bold text-slate-600 uppercase tracking-wider mb-2">Nama Kelompok</label>
                <input type="text" name="nama_kelompok" required placeholder="Contoh: Sapi Al-Muhajirin" 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>

            <!-- Jenis Hewan -->
            <div class="mb-4">
                <label class="block text-xs font-bold text-slate-600 uppercase tracking-wider mb-2">Jenis Hewan Qurban</label>
                <div class="grid grid-cols-2 gap-3">
                    <label class="border border-slate-200 rounded-xl p-3 flex items-center justify-center gap-2 cursor-pointer hover:border-brand-500 hover:bg-brand-50/20 transition">
                        <input type="radio" name="jenis_hewan" value="Sapi" required checked class="text-brand-600 focus:ring-brand-500">
                        <span class="text-sm font-bold text-slate-700 flex items-center gap-1.5"><i class="fa-solid fa-cow text-amber-600"></i> Sapi</span>
                    </label>
                    <label class="border border-slate-200 rounded-xl p-3 flex items-center justify-center gap-2 cursor-pointer hover:border-brand-500 hover:bg-brand-50/20 transition">
                        <input type="radio" name="jenis_hewan" value="Kambing" class="text-brand-600 focus:ring-brand-500">
                        <span class="text-sm font-bold text-slate-700 flex items-center gap-1.5"><i class="fa-solid fa-paw text-orange-500"></i> Kambing</span>
                    </label>
                </div>
            </div>

            <!-- Target Dana -->
            <div class="mb-6">
                <label class="block text-xs font-bold text-slate-600 uppercase tracking-wider mb-2">Target Dana Kelompok (Rp)</label>
                <div class="relative">
                    <span class="absolute left-4 top-1/2 -translate-y-1/2 text-slate-400 text-sm font-bold">Rp</span>
                    <input type="text" id="targetDisplay" placeholder="0" inputmode="numeric" autocomplete="off" required
                        class="w-full bg-slate-50 border border-slate-200 rounded-xl pl-10 pr-4 py-3 text-sm font-semibold focus:outline-none focus:border-brand-500 focus:bg-white transition">
                    <input type="hidden" name="target_dana" id="targetInput">
                </div>
                <!-- Helper Quick Target -->
                <div class="grid grid-cols-3 gap-2 mt-2">
                    <button type="button" onclick="setTargetAmount(3500000)" class="bg-slate-50 border border-slate-200 text-slate-600 text-xs font-semibold py-1.5 rounded-lg transition cursor-pointer">3.5M (Kambing)</button>
                    <button type="button" onclick="setTargetAmount(21000000)" class="bg-slate-50 border border-slate-200 text-slate-600 text-xs font-semibold py-1.5 rounded-lg transition cursor-pointer">21M (Sapi Standard)</button>
                    <button type="button" onclick="setTargetAmount(28000000)" class="bg-slate-50 border border-slate-200 text-slate-600 text-xs font-semibold py-1.5 rounded-lg transition cursor-pointer">28M (Sapi Premium)</button>
                </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">
                Bentuk Kelompok
            </button>
        </form>
    </div>
</div>
@endsection

@section('scripts')
<script>
    function toggleGroupModal(show) {
        const modal = document.getElementById('groupModal');
        const panel = modal.querySelector('div');
        if (show) {
            // Reset form
            document.getElementById('targetDisplay').value = '';
            document.getElementById('targetInput').value = '';

            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 setTargetAmount(amount) {
        document.getElementById('targetDisplay').value = formatRibuan(amount);
        document.getElementById('targetInput').value = amount;
    }

    // Close modal on background click
    document.getElementById('groupModal').addEventListener('click', function(e) {
        if (e.target === this) {
            toggleGroupModal(false);
        }
    });

    // Init rupiah input on DOM ready
    document.addEventListener('DOMContentLoaded', function() {
        initRupiahInput('targetDisplay', 'targetInput');
    });
</script>
@endsection