@php
    $canWrite = in_array(Auth::user()->role, ['admin', 'bendahara_utama', 'bendahara_harian'], true);
@endphp

<x-app-layout>
    <x-slot name="title">Dana Operasional</x-slot>

    <div class="space-y-5">
        <div class="flex flex-wrap items-center justify-between gap-3">
            <div>
                <h2 class="page-title">Dana Operasional</h2>
                <p class="page-sub">Anggaran operasional per bulan — saldo tidak otomatis terbawa, bendahara bebas memilih dana bulan mana yang dipakai</p>
            </div>
            <a href="{{ route('pengeluaran-dana.index') }}" class="btn-secondary">
                <svg class="h-4 w-4" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M10 19l-7-7m0 0l7-7m-7 7h18"/></svg>
                Kembali ke Pengeluaran Dana
            </a>
        </div>

        @if (session('success'))
            <div class="alert alert-success">{{ session('success') }}</div>
        @endif
        @if ($errors->any())
            <div class="alert alert-danger">
                <ul class="list-disc space-y-1 pl-4">
                    @foreach ($errors->all() as $err)
                        <li>{{ $err }}</li>
                    @endforeach
                </ul>
            </div>
        @endif

        @if ($canWrite)
            <form method="POST" action="{{ route('pengeluaran-dana.operasional.store') }}" class="card space-y-4 p-5">
                @csrf
                <div>
                    <h3 class="text-sm font-bold text-slate-700">Input Anggaran Baru</h3>
                    <p class="text-xs text-slate-400">Satu bulan boleh diinput beberapa kali (penambahan dana). Tiap entri terekam tanggal inputnya.</p>
                </div>
                <div class="grid grid-cols-1 gap-4 sm:grid-cols-4">
                    <div>
                        <x-input-label for="periode_bulan" value="Bulan" />
                        <select name="periode_bulan" id="periode_bulan" class="input mt-1.5" required>
                            @for ($m = 1; $m <= 12; $m++)
                                <option value="{{ $m }}" @selected(old('periode_bulan', (int) now()->month) == $m)>
                                    {{ \Carbon\Carbon::create(null, $m, 1)->translatedFormat('F') }}
                                </option>
                            @endfor
                        </select>
                    </div>
                    <div>
                        <x-input-label for="periode_tahun" value="Tahun" />
                        <select name="periode_tahun" id="periode_tahun" class="input mt-1.5" required>
                            @foreach ([now()->year, now()->year + 1] as $y)
                                <option value="{{ $y }}" @selected(old('periode_tahun', (int) now()->year) == $y)>{{ $y }}</option>
                            @endforeach
                        </select>
                    </div>
                    <div>
                        <x-input-label for="tanggal" value="Tanggal Input" />
                        <input type="date" name="tanggal" id="tanggal" class="input mt-1.5" value="{{ old('tanggal', now()->toDateString()) }}" required>
                    </div>
                    <div>
                        <x-input-label for="nominal" value="Nominal Anggaran (Rp)" />
                        <input type="number" name="nominal" id="nominal" class="input mt-1.5" min="1" step="1" placeholder="Contoh: 3000000" value="{{ old('nominal') }}" required>
                    </div>
                </div>
                <div class="flex items-center gap-2">
                    <button class="btn-primary">
                        <svg class="h-4 w-4" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M12 8v8M16 12H8"/></svg>
                        Simpan Anggaran
                    </button>
                </div>
            </form>
        @endif

        <div class="grid grid-cols-1 gap-4 sm:grid-cols-3">
            <div class="card p-5">
                <div class="text-xs font-medium uppercase tracking-wide text-slate-400">Anggaran Tahun {{ $tahun }}</div>
                <div class="text-2xl font-extrabold text-slate-800">Rp {{ number_format($totalAnggaran) }}</div>
            </div>
            <div class="card p-5">
                <div class="text-xs font-medium uppercase tracking-wide text-slate-400">Terpakai Tahun {{ $tahun }}</div>
                <div class="text-2xl font-extrabold text-red-600">Rp {{ number_format($totalTerpakai) }}</div>
            </div>
            <div class="card p-5">
                <div class="text-xs font-medium uppercase tracking-wide text-slate-400">Sisa Tahun {{ $tahun }}</div>
                <div class="text-2xl font-extrabold text-emerald-600">Rp {{ number_format($totalSisa) }}</div>
            </div>
        </div>

        <form method="GET" action="{{ route('pengeluaran-dana.operasional.index') }}" class="card flex flex-wrap items-end gap-2 p-4">
            <div>
                <x-input-label value="Tahun" />
                <select name="tahun" class="input mt-1.5 w-auto">
                    @foreach ($tahunList as $y)
                        <option value="{{ $y }}" @selected($tahun == $y)>{{ $y }}</option>
                    @endforeach
                    @if ($tahunList->doesntContain($tahun))
                        <option value="{{ $tahun }}" selected>{{ $tahun }}</option>
                    @endif
                </select>
            </div>
            <button class="btn-primary">Tampilkan</button>
        </form>

        <div class="tbl-card">
            <div class="tbl-wrap">
                <table class="tbl">
                    <thead class="thead">
                        <tr>
                            <th class="th">No</th>
                            <th class="th">Periode</th>
                            <th class="th">Tanggal Input</th>
                            <th class="th text-right">Anggaran</th>
                            <th class="th text-right">Dipakai</th>
                            <th class="th text-right">Sisa</th>
                            @if ($canWrite)
                                <th class="th col-actions text-right">Aksi</th>
                            @endif
                        </tr>
                    </thead>
                    <tbody class="tbody">
                        @forelse ($rows as $index => $a)
                            @php
                                $terpakai = (float) ($a->terpakai ?? 0);
                                $sisa = ((float) $a->nominal) - $terpakai;
                            @endphp
                            <tr class="transition-colors hover:bg-slate-50">
                                <td class="td">{{ $index + 1 }}</td>
                                <td class="td font-semibold text-slate-800">{{ $a->periode_label }}</td>
                                <td class="td text-slate-600">{{ $a->tanggal_label }}</td>
                                <td class="td text-right">Rp {{ number_format($a->nominal) }}</td>
                                <td class="td text-right {{ $terpakai > 0 ? 'font-medium text-red-600' : 'text-slate-400' }}">Rp {{ number_format($terpakai) }}</td>
                                <td class="td text-right font-semibold {{ $sisa > 0 ? 'text-emerald-600' : 'text-slate-400' }}">Rp {{ number_format($sisa) }}</td>
                                @if ($canWrite)
                                    <td class="td col-actions">
                                        <div class="flex items-center justify-end gap-1.5">
                                            <a href="{{ route('pengeluaran-dana.operasional.edit', $a) }}" class="btn-secondary btn-sm">Edit</a>
                                            <form method="POST" action="{{ route('pengeluaran-dana.operasional.destroy', $a) }}" class="inline" onsubmit="return confirm('Hapus anggaran {{ $a->periode_label }}?')">
                                                @csrf
                                                @method('DELETE')
                                                <button type="submit" class="btn-danger-ghost btn-sm">Hapus</button>
                                            </form>
                                        </div>
                                    </td>
                                @endif
                            </tr>
                        @empty
                            <tr><td colspan="{{ $canWrite ? 7 : 6 }}" class="td whitespace-normal py-10 text-center text-slate-400">Belum ada anggaran untuk tahun {{ $tahun }}.</td></tr>
                        @endforelse
                    </tbody>
                </table>
            </div>
        </div>
    </div>
</x-app-layout>