@extends('layouts.app')

@section('title', 'Input '.$definition['label'])

@section('content')
<div class="pkbm-master-page mx-auto max-w-7xl space-y-5">
    <header class="pkbm-dashboard__heading">
        <div>
            <p class="pkbm-dashboard__breadcrumb"><span>Standar Pembiayaan</span><i class="bi bi-chevron-right" aria-hidden="true"></i>Manajemen Kas</p>
            <h1 class="pkbm-dashboard__title">Input {{ $definition['label'] }}</h1>
            <p class="pkbm-dashboard__subtitle">Catat, tinjau, dan kelola transaksi {{ strtolower($definition['label']) }} lembaga.</p>
        </div>
    </header>

    @if (session('status'))
        <div role="status" class="settings-notice settings-notice--success"><i class="bi bi-check-circle-fill" aria-hidden="true"></i><span>{{ session('status') }}</span></div>
    @endif
    @if ($errors->any())
        <div role="alert" class="settings-notice settings-notice--error"><i class="bi bi-exclamation-circle-fill" aria-hidden="true"></i><div><p class="font-semibold">Permintaan belum dapat diproses.</p><ul class="mt-1 list-inside list-disc">@foreach ($errors->all() as $error)<li>{{ $error }}</li>@endforeach</ul></div></div>
    @endif

    <nav class="sp-card flex flex-wrap gap-2 p-2" aria-label="Menu manajemen kas">
        @if (in_array('input_pemasukan', $financeMenus, true))
            <a href="{{ route('pkbm.keuangan.income') }}" @class(['sp-btn-secondary', 'border-blue-200 bg-blue-50 text-blue-700 hover:bg-blue-50 hover:text-blue-800' => $kind === 'income']) @if ($kind === 'income') aria-current="page" @endif><i class="bi bi-arrow-down-left-circle" aria-hidden="true"></i>Input pemasukan</a>
        @endif
        @if (in_array('input_pengeluaran', $financeMenus, true))
            <a href="{{ route('pkbm.keuangan.expenses') }}" @class(['sp-btn-secondary', 'border-blue-200 bg-blue-50 text-blue-700 hover:bg-blue-50 hover:text-blue-800' => $kind === 'expense']) @if ($kind === 'expense') aria-current="page" @endif><i class="bi bi-arrow-up-right-circle" aria-hidden="true"></i>Input pengeluaran</a>
        @endif
        @if (in_array('rekap_kas', $financeMenus, true))
            <a href="{{ route('pkbm.keuangan.report') }}" class="sp-btn-secondary"><i class="bi bi-journal-check" aria-hidden="true"></i>Rekap kas</a>
        @endif
        <span @class(['sp-btn-secondary cursor-default gap-2.5 whitespace-nowrap' => true, 'cash-total-badge--income' => $kind === 'income', 'cash-total-badge--expense' => $kind === 'expense']) title="Total {{ strtolower($definition['label']) }} sesuai filter periode">
            <span class="text-xs font-semibold">Total {{ strtolower($definition['label']) }}</span>
            <span class="font-extrabold">Rp {{ number_format($total, 0, ',', '.') }}</span>
        </span>
    </nav>

    <section class="sp-card p-5 sm:p-6">
        <div>
            <h2 class="sp-section-title">Tambah transaksi {{ strtolower($definition['label']) }}</h2>
            <p class="mt-1 text-xs text-slate-500">Transaksi disimpan terpisah untuk lembaga ini dan dapat dikoreksi melalui riwayat.</p>
        </div>
        <form id="cash-transaction-form" method="POST" action="{{ route($kind === 'income' ? 'pkbm.keuangan.income.store' : 'pkbm.keuangan.expenses.store') }}">
            @csrf
        </form>
        <div class="mt-5 grid gap-4 sm:grid-cols-2 lg:grid-cols-[minmax(9rem,.8fr)_minmax(10rem,1fr)_minmax(12rem,1.1fr)_minmax(14rem,1.6fr)_auto] lg:items-end">
            <div>
                <label for="cash-date" class="sp-form-label">Tanggal</label>
                <input id="cash-date" form="cash-transaction-form" type="date" name="tanggal" value="{{ old('tanggal', now()->toDateString()) }}" required class="sp-form-control w-full px-3 py-2.5 text-sm">
            </div>
            <div>
                <label for="cash-amount" class="sp-form-label">Nominal (Rp)</label>
                <input id="cash-amount" form="cash-transaction-form" type="text" name="nominal" value="{{ old('nominal') }}" inputmode="decimal" data-money-input placeholder="Contoh: 150.000" required class="sp-form-control w-full px-3 py-2.5 text-sm">
            </div>
            <div>
                <label for="cash-category" class="sp-form-label">Kategori {{ strtolower($definition['label']) }}</label>
                <div class="relative">
                    <select id="cash-category" form="cash-transaction-form" name="kategori" required class="sp-form-control w-full appearance-none px-3 py-2.5 pr-20 text-sm">
                        <option value="" disabled @selected(old('kategori') === null)>Pilih kategori</option>
                        @foreach ($categoryOptions as $categoryOption)
                            <option value="{{ $categoryOption }}" @selected(old('kategori') === $categoryOption)>{{ $categoryOption }}</option>
                        @endforeach
                    </select>
                    <i class="bi bi-chevron-down pointer-events-none absolute right-11 top-1/2 z-10 -translate-y-1/2 text-xs text-slate-500" aria-hidden="true"></i>
                    <span class="absolute right-1 top-1/2 z-10 -translate-y-1/2">
                        @include('pkbm.keuangan.partials.category-manager', ['categories' => $categories, 'kind' => $kind])
                    </span>
                </div>
            </div>
            <div>
                <label for="cash-description" class="sp-form-label">Keterangan</label>
                <input id="cash-description" form="cash-transaction-form" type="text" name="keterangan" value="{{ old('keterangan') }}" maxlength="255" placeholder="{{ $kind === 'income' ? 'Contoh: Dana hibah operasional' : 'Contoh: Pembayaran listrik' }}" class="sp-form-control w-full px-3 py-2.5 text-sm">
            </div>
            <button type="submit" form="cash-transaction-form" class="sp-btn-primary justify-center"><i class="bi bi-plus-circle" aria-hidden="true"></i>Simpan {{ strtolower($definition['label']) }}</button>
        </div>
    </section>

    <section class="sp-card overflow-hidden">
        <div class="sp-card-header flex flex-col gap-3 lg:flex-row lg:items-end lg:justify-between">
            <div>
                <h2 class="sp-section-title">Riwayat {{ $definition['label'] }}</h2>
                <p class="mt-1 text-xs text-slate-500">@if ($transactions->total()) Menampilkan {{ $transactions->firstItem() }}–{{ $transactions->lastItem() }} dari {{ $transactions->total() }} transaksi @else Belum ada transaksi @endif</p>
            </div>
            <form method="GET" action="{{ route($kind === 'income' ? 'pkbm.keuangan.income' : 'pkbm.keuangan.expenses') }}" class="grid gap-2 sm:grid-cols-[minmax(8rem,1fr)_minmax(7rem,.8fr)_minmax(10rem,1fr)_auto_auto]">
                <label for="cash-month" class="sr-only">Filter bulan</label>
                <select id="cash-month" name="bulan" class="sp-form-control px-3 py-2 text-sm">
                    @foreach (['00' => 'Semua bulan', '01' => 'Januari', '02' => 'Februari', '03' => 'Maret', '04' => 'April', '05' => 'Mei', '06' => 'Juni', '07' => 'Juli', '08' => 'Agustus', '09' => 'September', '10' => 'Oktober', '11' => 'November', '12' => 'Desember'] as $value => $label)
                        <option value="{{ $value }}" @selected($filters['bulan'] === $value)>{{ $label }}</option>
                    @endforeach
                </select>
                <label for="cash-year" class="sr-only">Filter tahun</label>
                <select id="cash-year" name="tahun" class="sp-form-control px-3 py-2 text-sm">
                    <option value="0" @selected($filters['tahun'] === 0)>Semua tahun</option>
                    @foreach ($years as $year)
                        <option value="{{ $year }}" @selected($filters['tahun'] === $year)>{{ $year }}</option>
                    @endforeach
                </select>
                <label for="cash-category-filter" class="sr-only">Filter kategori {{ strtolower($definition['label']) }}</label>
                <select id="cash-category-filter" name="kategori" class="sp-form-control px-3 py-2 text-sm">
                    <option value="">Semua kategori</option>
                    @foreach ($categoryOptions as $categoryOption)
                        <option value="{{ $categoryOption }}" @selected($filters['kategori'] === $categoryOption)>{{ $categoryOption }}</option>
                    @endforeach
                    <option value="{{ $uncategorizedFilter }}" @selected($filters['kategori'] === $uncategorizedFilter)>Belum dikategorikan</option>
                </select>
                <button type="submit" class="sp-btn-secondary justify-center"><i class="bi bi-funnel" aria-hidden="true"></i>Filter</button>
                <a href="{{ route($kind === 'income' ? 'pkbm.keuangan.income' : 'pkbm.keuangan.expenses') }}" class="sp-btn-secondary justify-center" aria-label="Hapus filter"><i class="bi bi-arrow-counterclockwise" aria-hidden="true"></i></a>
            </form>
        </div>
        <div class="overflow-x-auto">
            <table class="sp-table min-w-[52rem]">
                <thead><tr><th scope="col" class="w-14 text-center">No.</th><th scope="col">Tanggal</th><th scope="col">Kategori</th><th scope="col">Keterangan</th><th scope="col" class="text-right">Nominal</th><th scope="col" class="text-right">Aksi</th></tr></thead>
                <tbody>
                    @forelse ($transactions as $transaction)
                        <tr>
                            <td class="text-center text-sm text-slate-500">{{ $transactions->firstItem() + $loop->index }}</td>
                            <td class="whitespace-nowrap text-sm text-slate-600">{{ \Carbon\CarbonImmutable::parse($transaction->tanggal)->locale('id')->translatedFormat('d M Y') }}</td>
                            <td class="text-sm text-slate-700">{{ $transaction->kategori ?: 'Belum dikategorikan' }}</td>
                            <td class="text-sm text-slate-700">{{ $transaction->keterangan }}</td>
                            <td class="whitespace-nowrap text-right text-sm font-bold {{ $kind === 'income' ? 'text-emerald-700' : 'text-rose-700' }}">Rp {{ number_format((float) $transaction->nominal, 0, ',', '.') }}</td>
                            <td class="text-right">
                                <div class="inline-flex items-center justify-end gap-2">
                                    <details class="relative">
                                        <summary class="sp-btn-secondary cursor-pointer list-none"><i class="bi bi-pencil-square" aria-hidden="true"></i>Edit</summary>
                                        <form method="POST" action="{{ route($kind === 'income' ? 'pkbm.keuangan.income.update' : 'pkbm.keuangan.expenses.update', $transaction->id) }}" class="absolute right-0 z-10 mt-2 grid w-72 gap-3 rounded-xl border border-slate-200 bg-white p-4 text-left shadow-xl">
                                            @csrf
                                            @method('PUT')
                                            <label class="text-xs font-semibold text-slate-600">Tanggal<input type="date" name="tanggal" value="{{ $transaction->tanggal }}" required class="sp-form-control mt-1 w-full px-3 py-2 text-sm"></label>
                                            <label class="text-xs font-semibold text-slate-600">Nominal (Rp)<input type="text" name="nominal" value="{{ number_format((float) $transaction->nominal, 2, ',', '.') }}" inputmode="decimal" data-money-input required class="sp-form-control mt-1 w-full px-3 py-2 text-sm"></label>
                                            <label class="text-xs font-semibold text-slate-600">Kategori {{ strtolower($definition['label']) }}
                                                <select name="kategori" required class="sp-form-control mt-1 w-full px-3 py-2 text-sm">
                                                    <option value="" disabled @selected($transaction->kategori === null)>Pilih kategori</option>
                                                    @foreach ($categoryOptions as $categoryOption)
                                                        <option value="{{ $categoryOption }}" @selected($transaction->kategori === $categoryOption)>{{ $categoryOption }}</option>
                                                    @endforeach
                                                </select>
                                            </label>
                                            <label class="text-xs font-semibold text-slate-600">Keterangan<input type="text" name="keterangan" value="{{ $transaction->keterangan }}" maxlength="255" class="sp-form-control mt-1 w-full px-3 py-2 text-sm"></label>
                                            <button type="submit" class="sp-btn-primary justify-center">Simpan perubahan</button>
                                        </form>
                                    </details>
                                    <form method="POST" action="{{ route($kind === 'income' ? 'pkbm.keuangan.income.destroy' : 'pkbm.keuangan.expenses.destroy', $transaction->id) }}" onsubmit="return confirm('Hapus transaksi {{ strtolower($definition['label']) }} ini?')">
                                        @csrf
                                        @method('DELETE')
                                        <button type="submit" class="sp-btn-secondary text-rose-700"><i class="bi bi-trash3" aria-hidden="true"></i>Hapus</button>
                                    </form>
                                </div>
                            </td>
                        </tr>
                    @empty
                        <tr><td colspan="6" class="px-4 py-12 text-center"><i class="bi bi-wallet2 text-3xl text-slate-300" aria-hidden="true"></i><p class="mt-3 text-sm font-semibold text-slate-700">Belum ada transaksi {{ strtolower($definition['label']) }}</p><p class="mt-1 text-xs text-slate-500">Transaksi yang dicatat akan tampil di sini.</p></td></tr>
                    @endforelse
                </tbody>
            </table>
        </div>
        @if ($transactions->hasPages())
            <div class="flex flex-col gap-3 border-t border-slate-100 px-4 py-3 sm:flex-row sm:items-center sm:justify-between"><p class="text-xs text-slate-500">Gunakan navigasi untuk melihat transaksi lainnya.</p>{{ $transactions->links() }}</div>
        @endif
    </section>
</div>
@endsection