@extends('layouts.admin')

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

@section('admin_content')
<div class="admin-card p-6">
    <form method="post" action="{{ route('admin.dues.update', $due) }}" class="grid gap-5">
        @csrf
        @method('put')

        <div class="grid gap-5 md:grid-cols-2">
            <div>
                <label class="admin-label">Warga</label>
                <select class="admin-input" name="resident_id">
                    @foreach($residents as $r)
                        <option value="{{ $r->id }}" @selected($due->resident_id == $r->id)>
                            {{ $r->name }} - {{ $r->address }}
                        </option>
                    @endforeach
                </select>
            </div>

            <div>
                <label class="admin-label">Periode</label>
                <input class="admin-input" name="period" value="{{ $due->period }}" required>
            </div>
        </div>

        <div class="grid gap-5 md:grid-cols-4">
            <div>
                <label class="admin-label">Iuran</label>
                <input class="admin-input" type="number" name="amount" value="{{ $due->amount }}">
            </div>

            <div>
                <label class="admin-label">Denda Ronda</label>
                <input class="admin-input" type="number" name="ronda_fine" value="{{ $due->ronda_fine }}">
            </div>

            <div>
                <label class="admin-label">Jimpitan</label>
                <input class="admin-input" type="number" name="jimpitan_amount" value="{{ $due->jimpitan_amount }}">
            </div>

            <div>
                <label class="admin-label">Dibayar</label>
                <input class="admin-input" type="number" name="paid_amount" value="{{ $due->paid_amount }}">
            </div>
        </div>

        <div class="grid gap-5 md:grid-cols-4">
            <div>
                <label class="admin-label">Tanggal Bayar</label>
                <input class="admin-input" type="date" name="paid_at" value="{{ optional($due->paid_at)->format('Y-m-d') }}">
            </div>

            <div>
                <label class="admin-label">Metode Pembayaran</label>
                <select class="admin-input" name="payment_method">
                    <option value="" @selected(!$due->payment_method)>Belum bayar</option>
                    <option value="qris" @selected($due->payment_method === 'qris')>QRIS</option>
                    <option value="transfer" @selected($due->payment_method === 'transfer')>Transfer</option>
                    <option value="tunai" @selected($due->payment_method === 'tunai')>Tunai</option>
                </select>
            </div>

            <div>
                <label class="admin-label">Status Manual</label>
                <select class="admin-input" name="status" required>
                    <option value="unpaid" @selected($due->status === 'unpaid')>Belum Bayar</option>
                    <option value="partial" @selected($due->status === 'partial')>Bayar Sebagian</option>
                    <option value="paid" @selected($due->status === 'paid')>Lunas</option>
                </select>
                <p class="mt-2 text-xs font-semibold text-slate-400">
                    Status ini bisa diubah manual meskipun sistem juga menghitung otomatis.
                </p>
            </div>

            <label class="flex items-center gap-3 rounded-2xl bg-teal-50 p-4 font-bold text-teal-700">
                <input type="checkbox" name="notify" value="1">
                Kirim notifikasi WA
            </label>
        </div>

        <div class="rounded-3xl border border-slate-200 bg-slate-50 p-5">
            <div class="flex flex-col gap-4 lg:flex-row lg:items-start lg:justify-between">
                <div>
                    <h3 class="text-lg font-black text-slate-950">Bukti Transfer Warga</h3>
                    <p class="mt-1 text-sm font-semibold text-slate-500">Gunakan bagian ini untuk memeriksa bukti transfer sebelum mengubah status menjadi lunas.</p>

                    @if($due->payment_proof_path)
                        <a href="{{ $due->paymentProofUrl() }}" target="_blank" class="mt-4 inline-flex items-center gap-2 rounded-2xl bg-emerald-50 px-4 py-3 text-sm font-black text-emerald-700 ring-1 ring-emerald-100">
                            <i class="fa-solid fa-eye"></i>
                            Lihat Bukti Transfer
                        </a>
                        <p class="mt-2 text-xs font-semibold text-slate-400">
                            File: {{ $due->payment_proof_original_name ?: '-' }}<br>
                            Dikirim: {{ optional($due->payment_proof_uploaded_at)->format('d/m/Y H:i') ?: '-' }}
                        </p>
                    @else
                        <p class="mt-4 rounded-2xl bg-white p-4 text-sm font-bold text-slate-500 ring-1 ring-slate-100">Belum ada bukti transfer dari warga.</p>
                    @endif
                </div>

                <div class="grid w-full gap-4 lg:max-w-sm">
                    <div>
                        <label class="admin-label">Status Verifikasi Bukti</label>
                        <select class="admin-input" name="payment_verification_status">
                            <option value="none" @selected(($due->payment_verification_status ?: 'none') === 'none')>Belum ada bukti</option>
                            <option value="waiting_verification" @selected($due->payment_verification_status === 'waiting_verification')>Menunggu Verifikasi</option>
                            <option value="verified" @selected($due->payment_verification_status === 'verified')>Terverifikasi</option>
                            <option value="rejected" @selected($due->payment_verification_status === 'rejected')>Ditolak</option>
                        </select>
                    </div>

                    <div>
                        <label class="admin-label">Catatan Penolakan / Verifikasi</label>
                        <textarea class="admin-input" name="payment_rejection_note" rows="3">{{ $due->payment_rejection_note }}</textarea>
                    </div>
                </div>
            </div>
        </div>

        <div>
            <label class="admin-label">Catatan</label>
            <textarea class="admin-input" name="note" rows="3">{{ $due->note }}</textarea>
        </div>

        <div class="flex flex-col gap-3 sm:flex-row">
            <button class="btn-admin-primary flex-1">
                <i class="fa-solid fa-save"></i>
                Update Iuran
            </button>

            <a href="{{ route('admin.dues.index') }}" class="btn-admin-soft">
                <i class="fa-solid fa-arrow-left"></i>
                Kembali
            </a>
        </div>
    </form>
</div>

<script>
    function setDueStatus(status) {
        const statusInput = document.querySelector('select[name="status"]');
        const paidInput = document.querySelector('input[name="paid_amount"]');
        const paidAtInput = document.querySelector('input[name="paid_at"]');
        const amountInput = document.querySelector('input[name="amount"]');
        const fineInput = document.querySelector('input[name="ronda_fine"]');
        const jimpitanInput = document.querySelector('input[name="jimpitan_amount"]');

        statusInput.value = status;

        const amount = Number(amountInput.value || 0);
        const fine = Number(fineInput.value || 0);
        const jimpitan = Number(jimpitanInput.value || 0);
        const total = amount + fine + jimpitan;

        if (status === 'paid') {
            paidInput.value = total;

            if (!paidAtInput.value) {
                const today = new Date().toISOString().slice(0, 10);
                paidAtInput.value = today;
            }
        }

        if (status === 'unpaid') {
            paidInput.value = 0;
            paidAtInput.value = '';
        }

        if (status === 'partial') {
            if (Number(paidInput.value || 0) <= 0) {
                paidInput.value = 0;
            }
        }
    }
</script>
@endsection