@extends('layouts.admin')

@section('title', 'Data Iuran')

@section('admin_content')
<div class="mb-5 grid gap-4 md:grid-cols-3">
    <a href="{{ route('admin.dues.index', array_merge(request()->except('status','page'), ['status'=>'unpaid'])) }}" class="admin-card p-5 transition hover:-translate-y-1 hover:shadow-soft {{ request('status','unpaid')==='unpaid' ? 'ring-2 ring-amber-200' : '' }}">
        <p class="text-sm font-bold text-slate-400">Belum Bayar / Sebagian</p>
        <h3 class="mt-1 text-2xl font-black text-amber-700">{{ $unpaidCount }}</h3>
    </a>
    <a href="{{ route('admin.dues.index', array_merge(request()->except('status','page'), ['status'=>'waiting_verification'])) }}" class="admin-card p-5 transition hover:-translate-y-1 hover:shadow-soft {{ request('status')==='waiting_verification' ? 'ring-2 ring-blue-200' : '' }}">
        <p class="text-sm font-bold text-slate-400">Menunggu Verifikasi</p>
        <h3 class="mt-1 text-2xl font-black text-blue-700">{{ $waitingCount }}</h3>
    </a>
    <a href="{{ route('admin.dues.index', array_merge(request()->except('status','page'), ['status'=>'paid'])) }}" class="admin-card p-5 transition hover:-translate-y-1 hover:shadow-soft {{ request('status')==='paid' ? 'ring-2 ring-emerald-200' : '' }}">
        <p class="text-sm font-bold text-slate-400">Sudah Bayar</p>
        <h3 class="mt-1 text-2xl font-black text-emerald-700">{{ $paidCount }}</h3>
    </a>
</div>

<div class="mb-5 flex flex-col gap-3 xl:flex-row xl:items-center xl:justify-between">
    <form class="grid w-full gap-3 md:grid-cols-[1fr_220px_220px_auto]">
        <div class="relative">
            <i class="fa-solid fa-magnifying-glass absolute left-4 top-1/2 -translate-y-1/2 text-slate-400"></i>
            <input class="admin-input pl-11" name="q" value="{{ request('q') }}" placeholder="Cari warga/periode/status/kwitansi...">
        </div>
        <select class="admin-input" name="period">
            <option value="">Semua periode</option>
            @foreach($periods as $period)
                <option value="{{ $period }}" @selected(request('period')===$period)>{{ $period }}</option>
            @endforeach
        </select>
        <select class="admin-input" name="status">
            <option value="">Semua status</option>
            <option value="unpaid" @selected(request('status','unpaid')==='unpaid')>Belum Bayar/Sebagian</option>
            <option value="waiting_verification" @selected(request('status')==='waiting_verification')>Menunggu Verifikasi</option>
            <option value="paid" @selected(request('status')==='paid')>Sudah Bayar</option>
        </select>
        <button class="btn-admin-soft"><i class="fa-solid fa-filter"></i> Filter</button>
    </form>

    <a class="btn-admin-primary" href="{{ route('admin.dues.create') }}"><i class="fa-solid fa-plus"></i> Tambah Iuran</a>
</div>

<div class="mb-4 rounded-2xl border border-slate-200 bg-white p-4 text-sm font-semibold text-slate-600">
    <i class="fa-solid fa-circle-info mr-2 text-teal-600"></i>
    Data iuran sekarang dipisahkan memakai filter: belum bayar/sebagian, menunggu verifikasi, dan sudah bayar. Gunakan filter periode untuk rekap bulanan.
</div>

<div class="admin-card overflow-hidden">
    <div class="overflow-x-auto">
        <table class="w-full min-w-[1380px] text-sm">
            <thead class="bg-slate-50 text-left text-xs uppercase tracking-wider text-slate-500">
                <tr>
                    <th class="p-4">Warga</th><th class="p-4">Periode</th><th class="p-4">Iuran</th><th class="p-4">Denda</th><th class="p-4">Jimpitan</th><th class="p-4">Bayar</th><th class="p-4">Sisa</th><th class="p-4">Status</th><th class="p-4">Bukti Transfer</th><th class="p-4">Kwitansi</th><th class="p-4">Aksi</th>
                </tr>
            </thead>
            <tbody class="divide-y divide-slate-100">
                @forelse($dues as $d)
                    @php
                        $remaining = $d->remaining();
                        $totalBill = $d->amount + $d->ronda_fine + $d->jimpitan_amount;
                    @endphp
                    <tr class="transition hover:bg-teal-50/40">
                        <td class="p-4 font-black text-slate-950"><div class="flex items-center gap-3"><span class="flex h-10 w-10 items-center justify-center rounded-2xl bg-slate-950 text-white"><i class="fa-solid fa-user"></i></span><div><p>{{ $d->resident->name ?? '-' }}</p><p class="text-xs font-semibold text-slate-400">{{ $d->resident->address ?? '-' }}</p></div></div></td>
                        <td class="p-4 font-bold text-slate-700">{{ $d->period }}</td>
                        <td class="p-4">Rp {{ number_format($d->amount, 0, ',', '.') }}</td>
                        <td class="p-4">Rp {{ number_format($d->ronda_fine, 0, ',', '.') }}</td>
                        <td class="p-4">Rp {{ number_format($d->jimpitan_amount, 0, ',', '.') }}</td>
                        <td class="p-4">Rp {{ number_format($d->paid_amount, 0, ',', '.') }}</td>
                        <td class="p-4 font-black {{ $remaining > 0 ? 'text-amber-600' : 'text-emerald-600' }}">Rp {{ number_format($remaining, 0, ',', '.') }}</td>
                        <td class="p-4">
                            <div class="grid gap-3">
                                <div>
                                    @if($d->status === 'paid' || $d->status === 'lunas')
                                        <span class="badge inline-flex items-center gap-2"><i class="fa-solid fa-circle-check"></i> Sudah Bayar</span>
                                    @elseif($d->status === 'partial' || $d->status === 'sebagian')
                                        <span class="inline-flex items-center gap-2 rounded-full bg-blue-100 px-3 py-2 text-xs font-black text-blue-700"><i class="fa-solid fa-clock"></i> Sebagian</span>
                                    @else
                                        <span class="badge-amber inline-flex items-center gap-2"><i class="fa-solid fa-triangle-exclamation"></i> Belum Bayar</span>
                                    @endif
                                </div>
                                <form method="post" action="{{ route('admin.dues.update', $d) }}" class="flex min-w-[260px] gap-2">
                                    @csrf @method('PUT')
                                    <input type="hidden" name="resident_id" value="{{ $d->resident_id }}"><input type="hidden" name="period" value="{{ $d->period }}"><input type="hidden" name="amount" value="{{ $d->amount }}"><input type="hidden" name="ronda_fine" value="{{ $d->ronda_fine }}"><input type="hidden" name="jimpitan_amount" value="{{ $d->jimpitan_amount }}"><input type="hidden" name="note" value="{{ $d->note }}"><input type="hidden" name="payment_method" value="{{ $d->payment_method ?: 'transfer' }}"><input type="hidden" name="notify" value="1">
                                    <select name="status" class="w-full rounded-2xl border border-slate-200 bg-white px-3 py-2 text-xs font-black text-slate-700 outline-none transition focus:border-teal-400 focus:ring-4 focus:ring-teal-100" onchange="syncDueQuickStatus(this)">
                                        <option value="unpaid" data-paid="0" data-paid-at="" @selected($d->status === 'unpaid' || $d->status === 'belum')>Belum Bayar</option>
                                        <option value="partial" data-paid="{{ $d->paid_amount > 0 ? $d->paid_amount : 0 }}" data-paid-at="{{ optional($d->paid_at)->format('Y-m-d') }}" @selected($d->status === 'partial' || $d->status === 'sebagian')>Sebagian</option>
                                        <option value="paid" data-paid="{{ $totalBill }}" data-paid-at="{{ now()->format('Y-m-d') }}" @selected($d->status === 'paid' || $d->status === 'lunas')>Lunas</option>
                                    </select>
                                    <input type="hidden" name="paid_amount" value="{{ $d->paid_amount }}" data-paid-input><input type="hidden" name="paid_at" value="{{ optional($d->paid_at)->format('Y-m-d') }}" data-paid-at-input>
                                    <button class="rounded-2xl bg-slate-950 px-3 py-2 text-xs font-black text-white transition hover:bg-teal-700" onclick="return confirm('Update status iuran ini dan kirim notifikasi ke warga?')">Update</button>
                                </form>
                            </div>
                        </td>
                        <td class="p-4"><div class="grid min-w-[170px] gap-2">
                            @if($d->payment_proof_path)<a href="{{ $d->paymentProofUrl() }}" target="_blank" class="inline-flex items-center justify-center gap-2 rounded-2xl bg-emerald-50 px-3 py-2 text-xs font-black text-emerald-700 ring-1 ring-emerald-100"><i class="fa-solid fa-eye"></i> Lihat Bukti</a><span class="text-xs font-semibold text-slate-400">{{ optional($d->payment_proof_uploaded_at)->format('d/m/Y H:i') }}</span>@else<span class="text-xs font-bold text-slate-400">Belum ada bukti</span>@endif
                            @if($d->payment_verification_status && $d->payment_verification_status !== 'none')<span class="inline-flex items-center justify-center rounded-full bg-blue-50 px-3 py-1 text-xs font-black text-blue-700">{{ str_replace('_', ' ', $d->payment_verification_status) }}</span>@endif
                        </div></td>
                        <td class="p-4">@if($d->paid_amount > 0)<a class="btn-admin-soft" href="{{ route('payments.receipt.download', $d) }}"><i class="fa-solid fa-file-pdf"></i> PDF</a>@else<span class="text-xs font-bold text-slate-400">Belum tersedia</span>@endif</td>
                        <td class="p-4"><div class="flex gap-2"><a class="btn-soft" href="{{ route('admin.dues.edit', $d) }}" title="Edit"><i class="fa-solid fa-pen"></i></a><form method="post" action="{{ route('admin.dues.destroy', $d) }}" onsubmit="return confirm('Yakin ingin menghapus iuran ini?')">@csrf @method('DELETE')<button class="btn-danger" title="Hapus"><i class="fa-solid fa-trash"></i></button></form></div></td>
                    </tr>
                @empty
                    <tr><td colspan="11" class="p-10 text-center text-slate-500">Belum ada data iuran sesuai filter.</td></tr>
                @endforelse
            </tbody>
        </table>
    </div>
    <div class="p-4">{{ $dues->links() }}</div>
</div>

<script>
    function syncDueQuickStatus(selectEl) {
        const form = selectEl.closest('form');
        const selected = selectEl.options[selectEl.selectedIndex];
        const paidInput = form.querySelector('[data-paid-input]');
        const paidAtInput = form.querySelector('[data-paid-at-input]');
        const status = selectEl.value;
        if (status === 'paid') { paidInput.value = selected.dataset.paid || 0; paidAtInput.value = selected.dataset.paidAt || new Date().toISOString().slice(0, 10); }
        if (status === 'unpaid') { paidInput.value = 0; paidAtInput.value = ''; }
        if (status === 'partial') { paidInput.value = selected.dataset.paid || paidInput.value || 0; paidAtInput.value = selected.dataset.paidAt || paidAtInput.value || new Date().toISOString().slice(0, 10); }
    }
</script>
@endsection