@extends('layouts.app')

@section('title', 'Dashboard - Arisan Qurban')
@section('header_title', 'Arisan Qurban')

@section('content')
<!-- Ringkasan Keuangan (Big Numbers Card) -->
<div class="bg-gradient-to-tr from-brand-600 to-emerald-500 rounded-3xl p-6 text-white shadow-xl shadow-emerald-500/20 mb-6 relative overflow-hidden">
    <!-- Decorative background elements -->
    <div class="absolute right-0 top-0 w-32 h-32 bg-white/10 rounded-full blur-xl translate-x-10 -translate-y-10"></div>
    <div class="absolute left-0 bottom-0 w-24 h-24 bg-brand-900/20 rounded-full blur-lg -translate-x-5 translate-y-5"></div>

    <span class="text-xs font-semibold text-emerald-100 uppercase tracking-wider block mb-1">Saldo Kas Tersedia</span>
    <h2 class="text-3xl font-extrabold tracking-tight mb-4">
        Rp {{ number_format($saldoTersedia, 0, ',', '.') }}
    </h2>

    <div class="flex justify-between items-center mb-4 text-xs">
        <div>
            <span class="block text-[10px] text-emerald-200">Total Pemasukan</span>
            <span class="font-bold text-white">Rp {{ number_format($totalSetoran, 0, ',', '.') }}</span>
        </div>
        <div class="text-right">
            <span class="block text-[10px] text-rose-200">Total Pengeluaran</span>
            <span class="font-bold text-rose-100">- Rp {{ number_format($totalPengeluaran, 0, ',', '.') }}</span>
        </div>
    </div>

    <!-- Progress Indicator -->
    <div class="mb-4">
        <div class="flex justify-between items-center text-xs font-semibold text-emerald-100 mb-1.5">
            <span>Progres Target Global</span>
            <span>{{ $progresPersen }}%</span>
        </div>
        <div class="w-full bg-black/20 rounded-full h-3">
            <div class="bg-white h-3 rounded-full shadow-inner transition-all duration-1000" style="width: {{ $progresPersen }}%"></div>
        </div>
    </div>

    <div class="flex justify-between items-center border-t border-white/20 pt-3 text-xs text-emerald-50">
        <div>
            <span class="block text-[10px] text-emerald-200">Total Target</span>
            <span class="font-bold">Rp {{ number_format($totalTarget, 0, ',', '.') }}</span>
        </div>
        <div class="text-right">
            <span class="block text-[10px] text-emerald-200">Kekurangan</span>
            <span class="font-bold">Rp {{ number_format(max($totalTarget - $totalSetoran, 0), 0, ',', '.') }}</span>
        </div>
    </div>
</div>

<!-- Quick Statistics Grid -->
<div class="grid grid-cols-2 gap-4 mb-6">
    <div class="bg-white p-4 rounded-2xl shadow-sm border border-slate-100 flex items-center gap-3">
        <div class="w-10 h-10 rounded-xl bg-brand-50 flex items-center justify-center text-brand-600 text-lg">
            <i class="fa-solid fa-users"></i>
        </div>
        <div>
            <span class="block text-[10px] text-slate-400 uppercase font-bold tracking-wider">Anggota</span>
            <span class="text-base font-extrabold text-slate-800">{{ $totalAnggota }} Orang</span>
        </div>
    </div>
    
    <div class="bg-white p-4 rounded-2xl shadow-sm border border-slate-100 flex items-center gap-3">
        <div class="w-10 h-10 rounded-xl bg-emerald-50 flex items-center justify-center text-emerald-600 text-lg">
            <i class="fa-solid fa-folder-open"></i>
        </div>
        <div>
            <span class="block text-[10px] text-slate-400 uppercase font-bold tracking-wider">Kelompok</span>
            <span class="text-base font-extrabold text-slate-800">{{ $totalKelompok }} Grup</span>
        </div>
    </div>
</div>

<!-- Chart Progres Setoran (Monthly Trend SVG Sparkline) -->
<div class="bg-white rounded-2xl p-5 shadow-sm border border-slate-100 mb-6">
    <h3 class="text-sm font-bold text-slate-800 mb-3 flex items-center justify-between">
        <span>Tren Setoran 4 Bulan Terakhir</span>
        <span class="text-[10px] bg-slate-100 text-slate-500 px-2 py-0.5 rounded-full">Statistik</span>
    </h3>
    
    <!-- Custom SVG Chart -->
    <div class="h-28 w-full mt-4 flex items-end justify-between relative px-2">
        @php
            $maxTotal = max($monthlyChartData->pluck('total')->max(), 1);
        @endphp
        
        <!-- Y Axis Guidelines -->
        <div class="absolute inset-0 flex flex-col justify-between pointer-events-none opacity-20 border-b border-dashed border-slate-300">
            <div class="w-full border-t border-dashed border-slate-300"></div>
            <div class="w-full border-t border-dashed border-slate-300"></div>
        </div>

        @foreach($monthlyChartData as $data)
            @php
                $heightPercent = ($data['total'] / $maxTotal) * 100;
            @endphp
            <div class="flex flex-col items-center flex-1 z-10">
                <!-- Bar Tooltip showing amount -->
                <span class="text-[9px] font-bold text-brand-600 mb-1">
                    {{ $data['total'] > 0 ? number_format($data['total']/1000000, 1) . 'M' : '0' }}
                </span>
                <!-- Bar -->
                <div class="w-8 bg-gradient-to-t from-brand-600 to-emerald-400 rounded-t-lg transition-all duration-500 hover:opacity-90" style="height: {{ max($heightPercent * 0.7, 8) }}px"></div>
                <!-- Label -->
                <span class="text-[9px] font-semibold text-slate-400 mt-2 truncate w-full text-center">
                    {{ substr($data['label'], 0, 3) }}
                </span>
            </div>
        @endforeach
    </div>
</div>

<!-- Kelompok Unggulan / Populer -->
<div class="mb-6">
    <div class="flex justify-between items-center mb-3">
        <h3 class="text-sm font-bold text-slate-800">Progres Kelompok</h3>
        <a href="{{ route('arisan.kelompok.index') }}" class="text-xs font-bold text-brand-600 hover:text-brand-700">Lihat Semua</a>
    </div>

    <!-- Kelompok Cards -->
    <div class="space-y-3">
        @forelse($topKelompok as $kel)
            <a href="{{ route('arisan.kelompok.show', $kel->id) }}" class="block bg-white p-4 rounded-2xl shadow-sm border border-slate-100 hover:border-brand-200 transition active:scale-[0.99]">
                <div class="flex justify-between items-start mb-2">
                    <div>
                        <h4 class="font-bold text-slate-800 text-sm mb-0.5">{{ $kel->nama_kelompok }}</h4>
                        <span class="inline-flex items-center gap-1.5 text-[10px] font-bold px-2 py-0.5 rounded-full bg-slate-100 text-slate-600">
                            @if($kel->jenis_hewan === 'Sapi')
                                <i class="fa-solid fa-cow text-amber-600"></i>
                            @else
                                <i class="fa-solid fa-shrimp text-orange-500"></i> <!-- Kambing icon fallback -->
                            @endif
                            {{ $kel->jenis_hewan }}
                        </span>
                    </div>
                    
                    <span class="text-[10px] font-extrabold px-2 py-1 rounded-lg {{ $kel->persentase >= 100 ? 'bg-emerald-50 text-emerald-600' : 'bg-brand-50 text-brand-600' }}">
                        {{ $kel->persentase }}%
                    </span>
                </div>

                <!-- Progress Bar -->
                <div class="w-full bg-slate-100 rounded-full h-1.5 my-2.5">
                    <div class="bg-gradient-to-r from-brand-500 to-emerald-500 h-1.5 rounded-full" style="width: {{ $kel->persentase }}%"></div>
                </div>

                <div class="flex justify-between items-center text-[10px] text-slate-400">
                    <span>{{ $kel->anggota_count }} Anggota</span>
                    <span class="font-semibold text-slate-600">
                        Rp {{ number_format($kel->setoran_sum_jumlah ?? 0, 0, ',', '.') }} / {{ number_format(($kel->target ?? 0) / 1000000, 1) }}jt
                    </span>
                </div>
            </a>
        @empty
            <div class="bg-white p-6 rounded-2xl text-center border border-dashed border-slate-200 text-slate-400">
                <i class="fa-solid fa-users-slash text-2xl mb-2 text-slate-300"></i>
                <p class="text-xs">Belum ada kelompok yang terdaftar.</p>
            </div>
        @endforelse
    </div>
</div>

<!-- Riwayat Setoran Terbaru -->
<div class="mb-4">
    <div class="flex justify-between items-center mb-3">
        <h3 class="text-sm font-bold text-slate-800">Setoran Terakhir</h3>
        <a href="{{ route('arisan.laporan') }}" class="text-xs font-bold text-brand-600 hover:text-brand-700">Lihat Laporan</a>
    </div>

    <!-- Deposit list -->
    <div class="bg-white rounded-2xl shadow-sm border border-slate-100 overflow-hidden divide-y divide-slate-100">
        @forelse($recentSetoran as $setor)
            <div class="p-3.5 flex items-center gap-3 hover:bg-slate-50 transition">
                <!-- Avatar Initials -->
                <div class="w-9 h-9 rounded-full bg-slate-100 text-slate-700 flex items-center justify-center font-bold text-xs shrink-0">
                    {{ strtoupper(substr($setor->anggota->nama, 0, 2)) }}
                </div>
                
                <!-- Details -->
                <div class="flex-1 min-w-0">
                    <h4 class="text-xs font-bold text-slate-800 truncate">{{ $setor->anggota->nama }}</h4>
                    <p class="text-[10px] text-slate-400 truncate">
                        {{ $setor->kelompok->nama_kelompok }} &bull; {{ $setor->tanggal->translatedFormat('d M Y') }}
                    </p>
                </div>
                
                <!-- Amount -->
                <div class="flex items-center gap-2 shrink-0">
                    <div class="text-right">
                        <span class="block text-xs font-extrabold text-emerald-600">+Rp {{ number_format($setor->jumlah, 0, ',', '.') }}</span>
                        <span class="text-[9px] font-medium text-slate-400">Berhasil</span>
                    </div>
                    <div class="flex items-center gap-1">
                        <!-- 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-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 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-xl 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>
            </div>
        @empty
            <div class="p-6 text-center text-slate-400">
                <i class="fa-solid fa-receipt text-xl mb-2 text-slate-300"></i>
                <p class="text-xs">Belum ada transaksi setoran masuk.</p>
            </div>
        @endforelse
    </div>
</div>
@endsection