@extends('layouts.admin')
@section('title','Tambah Iuran')
@section('admin_content')
<div class="admin-card p-6">
    <form method="post" action="{{ route('admin.dues.store') }}" class="grid gap-5">@csrf
        <div class="grid gap-5 md:grid-cols-2">
            <div><label class="admin-label">Mode</label><select class="admin-input" name="mode" id="mode">
                    <option value="single">Satu Warga</option>
                    <option value="bulk">Semua Warga Aktif</option>
                </select></div>
            <div><label class="admin-label">Periode</label><input class="admin-input" name="period" placeholder="2026-05" required></div>
        </div>
        <div id="singleBox"><label class="admin-label">Warga</label><select class="admin-input" name="resident_id">
                <option value="">Pilih warga...</option>@foreach($residents as $r)<option value="{{ $r->id }}">{{ $r->name }} - {{ $r->address }}</option>@endforeach
            </select></div>
        <div id="bulkBox" class="hidden"><label class="admin-label">Kecualikan Warga Opsional</label><select class="admin-input" name="except_resident_ids[]" multiple size="6">@foreach($residents as $r)<option value="{{ $r->id }}">{{ $r->name }} - {{ $r->address }}</option>@endforeach</select>
            <p class="mt-2 text-sm text-slate-500">Tekan Ctrl untuk memilih lebih dari satu.</p>
        </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="0"></div>
            <div><label class="admin-label">Denda Ronda</label><input class="admin-input" type="number" name="ronda_fine" value="0"></div>
            <div><label class="admin-label">Jimpitan</label><input class="admin-input" type="number" name="jimpitan_amount" value="0"></div>
            <div><label class="admin-label">Dibayar</label><input class="admin-input" type="number" name="paid_amount" value="0"></div>
        </div>
        <div class="grid gap-5 md:grid-cols-3">
            <div><label class="admin-label">Tanggal Bayar</label><input class="admin-input" type="date" name="paid_at"></div>
            <div><label class="admin-label">Metode Pembayaran</label><select class="admin-input" name="payment_method">
                    <option value="">Belum bayar</option>
                    <option value="qris">QRIS</option>
                    <option value="transfer">Transfer</option>
                    <option value="tunai">Tunai</option>
                </select></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 ke warga</label>
        </div>
        <div><label class="admin-label">Catatan</label><textarea class="admin-input" name="note" rows="3"></textarea></div>
        <button class="btn-admin-primary"><i class="fa-solid fa-save"></i> Simpan Iuran</button>
    </form>
</div>
<script>
    document.getElementById('mode').addEventListener('change', e => {
        document.getElementById('singleBox').classList.toggle('hidden', e.target.value === 'bulk');
        document.getElementById('bulkBox').classList.toggle('hidden', e.target.value !== 'bulk');
    });
</script>
@endsection