@extends('layouts.app')

@section('content')
@php
    $currentUser = auth()->user();
    $canUploadPaymentProof = $currentUser && $currentUser->hasRole('user') && (int) $currentUser->resident_id === (int) $resident->id;
    $bankName = \App\Models\SiteSetting::getValue('payment_bank_name', config('services.payment.bank_name', 'BCA'));
    $bankAccount = \App\Models\SiteSetting::getValue('payment_bank_account', config('services.payment.bank_account', '0000000000'));
    $bankHolder = \App\Models\SiteSetting::getValue('payment_bank_holder', config('services.payment.bank_holder', 'Cluster Permata'));
@endphp

<section class="relative mb-6 overflow-hidden rounded-[2rem] border border-white/70 bg-slate-950 p-8 text-white shadow-soft">
    <div class="absolute inset-0 bg-[radial-gradient(circle_at_top_left,rgba(20,184,166,.55),transparent_35%),radial-gradient(circle_at_bottom_right,rgba(34,197,94,.35),transparent_30%)]"></div>
    <div class="absolute inset-0 opacity-20 bg-grid"></div>

    <div class="relative grid gap-6 lg:grid-cols-[1fr_auto] lg:items-end">
        <div>
            <span class="inline-flex items-center gap-2 rounded-full border border-white/15 bg-white/10 px-4 py-2 text-sm font-bold text-teal-100 backdrop-blur">
                <i class="fa-solid fa-receipt text-emerald-300"></i>
                Detail Iuran Warga
            </span>

            <h2 class="mt-5 text-4xl font-black tracking-tight text-white">{{ $resident->name }}</h2>

            <p class="mt-3 flex flex-wrap items-center gap-3 text-slate-300">
                <span class="inline-flex items-center gap-2"><i class="fa-solid fa-location-dot text-emerald-300"></i>{{ $resident->address }}</span>
                @if($resident->phone)
                    <span class="hidden text-slate-500 sm:inline">|</span>
                    <span class="inline-flex items-center gap-2"><i class="fa-brands fa-whatsapp text-emerald-300"></i>{{ $resident->phone }}</span>
                @endif
            </p>
        </div>

        @auth
            @if(auth()->user()->hasRole('administrator', 'admin', 'bendahara'))
                <div class="flex flex-col gap-3 sm:flex-row lg:flex-col">
                    <form method="post" action="{{ route('payments.receipt', $resident) }}">
                        @csrf
                        <button class="inline-flex w-full items-center justify-center gap-2 rounded-2xl bg-teal-600 px-5 py-3 font-black text-white transition hover:bg-teal-500">
                            <i class="fa-solid fa-envelope-circle-check"></i>
                            Kirim Kwitansi WA & Email
                        </button>
                    </form>

                    <form method="post" action="{{ route('payments.arrears', $resident) }}">
                        @csrf
                        <button class="inline-flex w-full items-center justify-center gap-2 rounded-2xl border border-white/15 bg-white/10 px-5 py-3 font-black text-white backdrop-blur transition hover:bg-white/20">
                            <i class="fa-solid fa-triangle-exclamation"></i>
                            Kirim Tunggakan WA
                        </button>
                    </form>
                </div>
            @endif
        @endauth
    </div>
</section>

@php
    $totalAmount = $resident->dues->sum('amount');
    $totalFine = $resident->dues->sum('ronda_fine');
    $totalJimpitan = $resident->dues->sum('jimpitan_amount');
    $totalPaid = $resident->dues->sum('paid_amount');
    $totalRemaining = $resident->dues->sum(fn($d) => $d->remaining());
@endphp

<section class="mb-5 grid gap-4 md:grid-cols-2 xl:grid-cols-5">
    @foreach([
        ['Total Iuran', $totalAmount, 'fa-money-bill-wave', 'bg-teal-50 text-teal-700'],
        ['Denda Ronda', $totalFine, 'fa-shield-halved', 'bg-amber-50 text-amber-700'],
        ['Jimpitan', $totalJimpitan, 'fa-hand-holding-heart', 'bg-emerald-50 text-emerald-700'],
        ['Dibayar', $totalPaid, 'fa-circle-check', 'bg-blue-50 text-blue-700'],
        ['Sisa', $totalRemaining, 'fa-wallet', $totalRemaining > 0 ? 'bg-rose-50 text-rose-700' : 'bg-emerald-50 text-emerald-700'],
    ] as $s)
        <div class="card p-5 transition hover:-translate-y-1 hover:shadow-soft">
            <div class="flex items-center gap-4">
                <div class="flex h-12 w-12 items-center justify-center rounded-2xl {{ $s[3] }} text-xl"><i class="fa-solid {{ $s[2] }}"></i></div>
                <div>
                    <p class="text-sm font-bold text-slate-400">{{ $s[0] }}</p>
                    <h3 class="text-xl font-black text-slate-950">Rp {{ number_format($s[1], 0, ',', '.') }}</h3>
                </div>
            </div>
        </div>
    @endforeach
</section>

@if($canUploadPaymentProof && $totalRemaining > 0)
    <section class="mb-6 rounded-[2rem] border border-blue-100 bg-blue-50 p-5 text-blue-900 shadow-soft">
        <div class="flex flex-col gap-4 lg:flex-row lg:items-center lg:justify-between">
            <div>
                <h3 class="text-xl font-black"><i class="fa-solid fa-building-columns mr-2"></i>Pembayaran via Transfer Bank {{ $bankName }}</h3>
                <p class="mt-2 text-sm font-semibold text-blue-700">Transfer sesuai nominal tagihan, lalu unggah bukti transfer pada periode iuran yang ingin dibayar.</p>
            </div>
            <div class="rounded-2xl bg-white p-4 text-sm shadow-sm ring-1 ring-blue-100">
                <p class="font-black text-slate-950">Bank {{ $bankName }}</p>
                <p class="mt-1 text-2xl font-black tracking-wide text-blue-700">{{ $bankAccount }}</p>
                <p class="text-slate-500">a.n. {{ $bankHolder }}</p>
            </div>
        </div>
    </section>
@endif

<div class="card overflow-hidden">
    <div class="flex flex-col gap-4 border-b border-slate-100 p-5 sm:flex-row sm:items-center sm:justify-between">
        <div>
            <h3 class="text-xl font-black text-slate-950">Riwayat Iuran</h3>
            <p class="mt-1 text-sm text-slate-500">Rincian periode iuran, denda ronda, jimpitan, pembayaran, sisa tagihan, status, dan bukti pembayaran.</p>
        </div>

        <div class="relative w-full sm:w-80">
            <i class="fa-solid fa-magnifying-glass absolute left-4 top-1/2 -translate-y-1/2 text-slate-400"></i>
            <input id="searchDue" type="text" placeholder="Cari periode atau status..." class="w-full rounded-2xl border border-slate-200 bg-slate-50 py-3 pl-11 pr-4 text-sm font-semibold outline-none transition focus:border-teal-400 focus:bg-white focus:ring-4 focus:ring-teal-100">
        </div>
    </div>

    <div class="overflow-x-auto">
        <table class="w-full min-w-[1180px] text-left text-sm">
            <thead class="bg-slate-50 text-xs uppercase tracking-wider text-slate-500">
                <tr>
                    <th class="px-5 py-4"><span class="inline-flex items-center gap-2"><i class="fa-solid fa-calendar-days text-teal-600"></i>Periode</span></th>
                    <th class="px-5 py-4"><span class="inline-flex items-center gap-2"><i class="fa-solid fa-money-bill-wave text-teal-600"></i>Iuran</span></th>
                    <th class="px-5 py-4"><span class="inline-flex items-center gap-2"><i class="fa-solid fa-shield-halved text-teal-600"></i>Denda</span></th>
                    <th class="px-5 py-4"><span class="inline-flex items-center gap-2"><i class="fa-solid fa-hand-holding-heart text-teal-600"></i>Jimpitan</span></th>
                    <th class="px-5 py-4"><span class="inline-flex items-center gap-2"><i class="fa-solid fa-circle-check text-teal-600"></i>Dibayar</span></th>
                    <th class="px-5 py-4"><span class="inline-flex items-center gap-2"><i class="fa-solid fa-wallet text-teal-600"></i>Sisa</span></th>
                    <th class="px-5 py-4"><span class="inline-flex items-center gap-2"><i class="fa-solid fa-signal text-teal-600"></i>Status</span></th>
                    <th class="px-5 py-4"><span class="inline-flex items-center gap-2"><i class="fa-solid fa-file-invoice text-teal-600"></i>Bukti / Bayar</span></th>
                </tr>
            </thead>

            <tbody id="dueTable" class="divide-y divide-slate-100">
                @forelse($resident->dues as $d)
                    @php($remaining = $d->remaining())
                    <tr class="transition hover:bg-teal-50/50">
                        <td class="px-5 py-4 font-bold text-slate-900"><span class="inline-flex items-center gap-2"><i class="fa-solid fa-calendar text-emerald-600"></i>{{ $d->period }}</span></td>
                        <td class="px-5 py-4 text-slate-600">Rp {{ number_format($d->amount, 0, ',', '.') }}</td>
                        <td class="px-5 py-4 text-slate-600">Rp {{ number_format($d->ronda_fine, 0, ',', '.') }}</td>
                        <td class="px-5 py-4 text-slate-600">Rp {{ number_format($d->jimpitan_amount, 0, ',', '.') }}</td>
                        <td class="px-5 py-4 text-slate-600">Rp {{ number_format($d->paid_amount, 0, ',', '.') }}</td>
                        <td class="px-5 py-4 font-black">
                            <span class="{{ $remaining > 0 ? 'text-amber-600' : 'text-emerald-600' }} inline-flex items-center gap-2">
                                <i class="fa-solid {{ $remaining > 0 ? 'fa-triangle-exclamation' : 'fa-circle-check' }}"></i>
                                Rp {{ number_format($remaining, 0, ',', '.') }}
                            </span>
                        </td>
                        <td class="px-5 py-4">
                            <span class="badge inline-flex items-center gap-2">
                                @if($d->status === 'paid' || $d->status === 'lunas')
                                    <i class="fa-solid fa-circle-check"></i>
                                @elseif($d->status === 'partial' || $d->status === 'sebagian')
                                    <i class="fa-solid fa-clock"></i>
                                @else
                                    <i class="fa-solid fa-triangle-exclamation"></i>
                                @endif
                                {{ $d->status }}
                            </span>
                            @if($d->payment_verification_status && $d->payment_verification_status !== 'none')
                                <p class="mt-2 text-xs font-bold text-slate-500">Verifikasi: {{ str_replace('_', ' ', $d->payment_verification_status) }}</p>
                            @endif
                        </td>
                        <td class="px-5 py-4">
                            <div class="grid min-w-[260px] gap-3">
                                @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>
                                    @if($d->payment_proof_uploaded_at)
                                        <p class="text-xs font-semibold text-slate-400">Dikirim {{ $d->payment_proof_uploaded_at->format('d/m/Y H:i') }}</p>
                                    @endif
                                @else
                                    <span class="text-xs font-bold text-slate-400">Belum ada bukti.</span>
                                @endif

                                @if($d->paid_amount > 0)
                                    <a href="{{ route('payments.receipt.download', $d) }}" class="inline-flex items-center justify-center gap-2 rounded-2xl bg-blue-50 px-3 py-2 text-xs font-black text-blue-700 ring-1 ring-blue-100">
                                        <i class="fa-solid fa-file-pdf"></i> Download Kwitansi PDF
                                    </a>
                                @endif

                                @if($canUploadPaymentProof && $remaining > 0)
                                    <form method="post" action="{{ route('payments.proof.upload', $d) }}" enctype="multipart/form-data" class="grid gap-2 rounded-2xl bg-slate-50 p-3 ring-1 ring-slate-100">
                                        @csrf
                                        <input type="file" name="payment_proof" accept=".jpg,.jpeg,.png,.webp,.pdf" class="text-xs font-semibold text-slate-600" required>
                                        <textarea name="transfer_note" rows="2" placeholder="Catatan transfer opsional" class="rounded-xl border border-slate-200 bg-white p-2 text-xs outline-none focus:border-teal-400"></textarea>
                                        <button class="rounded-xl bg-slate-950 px-3 py-2 text-xs font-black text-white transition hover:bg-teal-700" onclick="return confirm('Kirim bukti transfer untuk periode {{ $d->period }}?')">
                                            <i class="fa-solid fa-paper-plane mr-1"></i>Kirim Bukti Transfer
                                        </button>
                                    </form>
                                @endif
                            </div>
                        </td>
                    </tr>
                @empty
                    <tr>
                        <td colspan="8" class="px-6 py-12 text-center text-slate-500">
                            <div class="mx-auto flex h-16 w-16 items-center justify-center rounded-2xl bg-slate-100 text-2xl text-slate-500"><i class="fa-solid fa-folder-open"></i></div>
                            <h3 class="mt-4 text-xl font-black text-slate-950">Belum ada data iuran</h3>
                            <p class="mt-2 text-slate-500">Riwayat iuran warga ini belum tersedia.</p>
                        </td>
                    </tr>
                @endforelse
            </tbody>
        </table>
    </div>
</div>

@if(isset($transactions))
<details class="card mt-6 overflow-hidden">
    <summary class="cursor-pointer list-none border-b border-slate-100 p-5">
        <span class="inline-flex items-center gap-2 rounded-2xl bg-teal-600 px-5 py-3 font-black text-white"><i class="fa-solid fa-clock-rotate-left"></i> Buka Riwayat Transaksi Warga</span>
        <p class="mt-3 text-sm text-slate-500">Transaksi pemasukan yang tercatat untuk warga ini, termasuk metode pembayaran, nomor kwitansi, dan bukti pembayaran.</p>
    </summary>
<div>
    <div class="border-b border-slate-100 p-5">
        <h3 class="text-xl font-black text-slate-950">Detail Riwayat Iuran dan Transaksi</h3>
        <p class="mt-1 text-sm text-slate-500">Transaksi pemasukan yang tercatat untuk warga ini, termasuk metode pembayaran, nomor kwitansi, dan bukti pembayaran.</p>
    </div>
    <div class="overflow-x-auto">
        <table class="w-full min-w-[960px] text-left text-sm">
            <thead class="bg-slate-50 text-xs uppercase tracking-wider text-slate-500">
                <tr>
                    <th class="px-5 py-4">Tanggal</th>
                    <th class="px-5 py-4">Kategori</th>
                    <th class="px-5 py-4">Metode</th>
                    <th class="px-5 py-4">Kwitansi</th>
                    <th class="px-5 py-4">Download</th>
                    <th class="px-5 py-4">Bukti</th>
                    <th class="px-5 py-4">Keterangan</th>
                    <th class="px-5 py-4">Jumlah</th>
                </tr>
            </thead>
            <tbody class="divide-y divide-slate-100">
                @forelse($transactions as $t)
                    @php($proofPath = is_array($t->meta) ? ($t->meta['payment_proof_path'] ?? null) : null)
                    <tr>
                        <td class="px-5 py-4">{{ optional($t->transaction_date)->format('d/m/Y') }}</td>
                        <td class="px-5 py-4 font-bold">{{ $t->category }}</td>
                        <td class="px-5 py-4">{{ strtoupper($t->payment_method ?: '-') }}</td>
                        <td class="px-5 py-4 font-bold text-teal-700">{{ $t->receipt_number ?: '-' }}</td>
                        <td class="px-5 py-4">@if($t->receipt_number)<a href="{{ route('payments.transaction.receipt', $t) }}" class="font-black text-blue-700 hover:underline">PDF</a>@else - @endif</td>
                        <td class="px-5 py-4">
                            @if($proofPath)
                                <a href="{{ $t->paymentProofUrl() }}" target="_blank" class="font-black text-teal-700 hover:underline">Lihat bukti</a>
                            @else
                                -
                            @endif
                        </td>
                        <td class="px-5 py-4">{{ $t->description }}</td>
                        <td class="px-5 py-4 font-black">Rp {{ number_format($t->amount, 0, ',', '.') }}</td>
                    </tr>
                @empty
                    <tr><td colspan="8" class="px-5 py-8 text-center text-slate-500">Belum ada transaksi.</td></tr>
                @endforelse
            </tbody>
        </table>
    </div>
</div>
</details>
@endif

<div class="mt-6 flex flex-col gap-3 sm:flex-row">
    <a href="{{ route('payments.index') }}" class="btn-soft inline-flex items-center justify-center gap-2"><i class="fa-solid fa-arrow-left"></i>Kembali ke Laporan Keuangan dan Iuran Warga</a>
</div>

<script>
    document.getElementById('searchDue')?.addEventListener('input', function () {
        const keyword = this.value.toLowerCase();
        const rows = document.querySelectorAll('#dueTable tr');

        rows.forEach(row => {
            const text = row.innerText.toLowerCase();
            row.style.display = text.includes(keyword) ? '' : 'none';
        });
    });
</script>
@endsection