@extends('layouts.admin')
@section('title','Rekap Keuangan')
@section('admin_content')
<div class="grid gap-4 md:grid-cols-2 xl:grid-cols-4">
    <a href="{{ route('admin.finance.index') }}" class="admin-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 text-emerald-700 bg-emerald-50 text-xl"><i class="fa-solid fa-wallet"></i></div>
            <div><p class="text-sm font-bold text-slate-400">Saldo Kas</p><h3 class="text-2xl font-black text-slate-950">Rp {{ number_format($cashBalance,0,',','.') }}</h3></div>
        </div>
    </a>
    <a href="{{ route('admin.finance.index', ['type'=>'income']) }}" class="admin-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 text-teal-700 bg-teal-50 text-xl"><i class="fa-solid fa-arrow-trend-up"></i></div>
            <div><p class="text-sm font-bold text-slate-400">Pemasukan</p><h3 class="text-2xl font-black text-slate-950">Rp {{ number_format($incomeTotal,0,',','.') }}</h3></div>
        </div>
    </a>
    <a href="{{ route('admin.finance.index', ['type'=>'expense']) }}" class="admin-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 text-rose-700 bg-rose-50 text-xl"><i class="fa-solid fa-arrow-trend-down"></i></div>
            <div><p class="text-sm font-bold text-slate-400">Pengeluaran</p><h3 class="text-2xl font-black text-slate-950">Rp {{ number_format($expenseTotal,0,',','.') }}</h3></div>
        </div>
    </a>
    <a href="{{ route('admin.dues.index', ['status'=>'unpaid']) }}" class="admin-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 text-amber-700 bg-amber-50 text-xl"><i class="fa-solid fa-triangle-exclamation"></i></div>
            <div><p class="text-sm font-bold text-slate-400">Tunggakan</p><h3 class="text-2xl font-black text-slate-950">Rp {{ number_format($arrearsTotal,0,',','.') }}</h3></div>
        </div>
    </a>
</div>

<div class="mt-5 grid gap-4 md:grid-cols-4">
    @foreach([['Iuran',$iuranIncome],['Denda Ronda',$dendaIncome],['Jimpitan',$jimpitanIncome],['Program dari Kas',$programExpense]] as $r)
        <div class="admin-card p-4"><p class="text-sm font-bold text-slate-400">{{ $r[0] }}</p><p class="mt-1 text-xl font-black">Rp {{ number_format($r[1],0,',','.') }}</p></div>
    @endforeach
</div>

<div class="mt-6 grid gap-6 xl:grid-cols-[1fr_.75fr]">
    <div class="admin-card p-5">
        <h3 class="text-xl font-black text-slate-950"><i class="fa-solid fa-building-columns mr-2 text-teal-600"></i>Rekening Transfer Warga</h3>
        <p class="mt-1 text-sm text-slate-500">Bendahara dapat mengganti nomor rekening, nama bank, dan nama pemilik rekening untuk pembayaran iuran.</p>
        <form class="mt-4 grid gap-4 md:grid-cols-3" method="post" action="{{ route('admin.finance.bank.update') }}">
            @csrf @method('put')
            <div><label class="admin-label">Bank</label><input class="admin-input" name="payment_bank_name" value="{{ old('payment_bank_name', $bankName) }}" required></div>
            <div><label class="admin-label">Nomor Rekening</label><input class="admin-input" name="payment_bank_account" value="{{ old('payment_bank_account', $bankAccount) }}" required></div>
            <div><label class="admin-label">Atas Nama</label><input class="admin-input" name="payment_bank_holder" value="{{ old('payment_bank_holder', $bankHolder) }}" required></div>
            <div class="md:col-span-3"><button class="btn-admin-primary"><i class="fa-solid fa-save"></i> Simpan Rekening</button></div>
        </form>
    </div>
    <div class="admin-card p-5">
        <h3 class="text-xl font-black text-slate-950"><i class="fa-solid fa-circle-info mr-2 text-blue-600"></i>Link Bukti Transfer</h3>
        <p class="mt-2 text-sm text-slate-500">URL bukti pembayaran otomatis memakai <b>PUBLIC_STORAGE_URL</b>. Untuk ganti IP/domain, ubah di file <code>.env</code> lalu jalankan <code>php82 artisan config:clear</code>.</p>
        <p class="mt-3 rounded-2xl bg-slate-50 p-3 text-xs font-bold text-slate-600">Contoh: PUBLIC_STORAGE_URL=http://192.168.1.20:2026/storage</p>
    </div>
</div>

<div class="mt-6 admin-card p-5">
    <div class="flex flex-col gap-3 md:flex-row md:items-center md:justify-between">
        <div>
            <h3 class="text-xl font-black text-slate-950">Riwayat Transaksi</h3>
            <p class="mt-1 text-sm text-slate-500">Gunakan filter untuk melihat pemasukan, pengeluaran, periode bulan/tahun, dan unduh rekap CSV/PDF.</p>
        </div>
        <div class="flex flex-wrap gap-2">
            <button onclick="document.getElementById('modalTransaksi').classList.remove('hidden')" class="btn-admin-primary"><i class="fa-solid fa-plus"></i> Tambah Transaksi</button>
            <a class="btn-admin-soft" href="{{ route('admin.finance.export.excel', request()->query()) }}">CSV/Excel</a>
            <a class="btn-admin-soft" href="{{ route('admin.finance.export.pdf', request()->query()) }}">PDF</a>
        </div>
    </div>
    <form class="mt-4 grid gap-3 md:grid-cols-5">
        <input class="admin-input" name="q" value="{{ request('q') }}" placeholder="Cari transaksi...">
        <select class="admin-input" name="type">
            <option value="">Semua jenis</option>
            <option value="income" @selected(request('type')==='income')>Pemasukan</option>
            <option value="expense" @selected(request('type')==='expense')>Pengeluaran</option>
        </select>
        <select class="admin-input" name="month"><option value="">Semua bulan</option>@for($m=1;$m<=12;$m++)<option value="{{ $m }}" @selected(request('month')==$m)>{{ $m }}</option>@endfor</select>
        <input class="admin-input" name="year" value="{{ request('year') }}" placeholder="Tahun">
        <button class="btn-admin-soft">Filter</button>
    </form>
    <div class="mt-5 overflow-x-auto">
        <table class="w-full min-w-[1100px] text-left text-sm">
            <thead class="bg-slate-50">
                <tr>
                    <th class="p-4">Tanggal</th><th class="p-4">Jenis</th><th class="p-4">Kategori</th><th class="p-4">Warga</th><th class="p-4">Metode</th><th class="p-4">Kwitansi</th><th class="p-4">PDF</th><th class="p-4">Bukti Pembayaran</th><th class="p-4">Keterangan</th><th class="p-4">Jumlah</th>
                </tr>
            </thead>
            <tbody class="divide-y">
                @foreach($transactions as $t)
                    @php($proofUrl = $t->paymentProofUrl())
                    <tr>
                        <td class="p-4">{{ optional($t->transaction_date)->format('d/m/Y') }}</td>
                        <td class="p-4"><span class="{{ $t->type=='income'?'badge':'badge-rose' }}">{{ $t->type=='income' ? 'Pemasukan' : 'Pengeluaran' }}</span></td>
                        <td class="p-4">{{ $t->category }}</td>
                        <td class="p-4">{{ $t->resident->name ?? '-' }}</td>
                        <td class="p-4">{{ strtoupper($t->payment_method ?: '-') }}</td>
                        <td class="p-4 font-bold text-teal-700">{{ $t->receipt_number ?: '-' }}</td>
                        <td class="p-4">@if($t->receipt_number || $t->type === 'income')<a class="font-black text-blue-700 hover:underline" href="{{ route('admin.finance.transactions.receipt', $t) }}">Download</a>@else - @endif</td>
                        <td class="p-4">@if($proofUrl)<a class="font-black text-teal-700 hover:underline" href="{{ $proofUrl }}" target="_blank">Lihat bukti</a>@else - @endif</td>
                        <td class="p-4">{{ $t->description }}</td>
                        <td class="p-4 font-black">Rp {{ number_format($t->amount,0,',','.') }}</td>
                    </tr>
                @endforeach
            </tbody>
        </table>
    </div>
    <div class="mt-5">{{ $transactions->links() }}</div>
</div>

<div class="mt-6 admin-card p-5">
    <h3 class="text-xl font-black text-slate-950">Rekap Bulanan</h3>
    <div class="mt-4 grid gap-3 md:grid-cols-2 xl:grid-cols-3">
        @foreach($monthly as $m)
            <div class="rounded-2xl bg-slate-50 p-4"><p class="font-black">{{ $m->month }}/{{ $m->year }}</p><p class="text-sm text-emerald-700">Masuk: Rp {{ number_format($m->income,0,',','.') }}</p><p class="text-sm text-rose-700">Keluar: Rp {{ number_format($m->expense,0,',','.') }}</p></div>
        @endforeach
    </div>
</div>

<div id="modalTransaksi" class="fixed inset-0 z-50 hidden bg-slate-950/50 p-4">
    <div class="mx-auto mt-10 max-w-xl admin-card p-6">
        <div class="flex items-center justify-between"><h3 class="text-xl font-black">Tambah Transaksi Kas</h3><button onclick="document.getElementById('modalTransaksi').classList.add('hidden')"><i class="fa-solid fa-xmark"></i></button></div>
        <form method="post" action="{{ route('admin.finance.transactions.store') }}" class="mt-5 grid gap-4">@csrf
            <div class="grid gap-4 md:grid-cols-2"><select class="admin-input" name="type"><option value="income">Pemasukan</option><option value="expense">Pengeluaran</option></select><input class="admin-input" name="category" placeholder="Kategori" required></div>
            <select class="admin-input" name="resident_id"><option value="">Tanpa warga</option>@foreach($residents as $r)<option value="{{ $r->id }}">{{ $r->name }}</option>@endforeach</select>
            <input class="admin-input" name="source" placeholder="Sumber dana">
            <select class="admin-input" name="payment_method"><option value="">Metode pembayaran</option><option value="qris">QRIS</option><option value="transfer">Transfer</option><option value="tunai">Tunai</option></select>
            <input class="admin-input" type="date" name="transaction_date" value="{{ date('Y-m-d') }}">
            <input class="admin-input" type="number" name="amount" placeholder="Jumlah" required>
            <textarea class="admin-input" name="description" rows="3" placeholder="Keterangan"></textarea>
            <button class="btn-admin-primary">Simpan Transaksi</button>
        </form>
    </div>
</div>
@endsection