@php
    $roleLabels = ['admin' => 'Admin', 'bendahara_utama' => 'Bendahara Utama', 'bendahara_harian' => 'Bendahara Harian', 'kepsek' => 'Kepsek', 'walikelas' => 'Wali Kelas'];
    $kwCounts = $pembayaran->getCollection()->groupBy('no_kwitansi')->map->count();
    $isYayasan = $isYayasan ?? (Auth::user()?->role === 'yayasan');
@endphp

<x-app-layout>
    <x-slot name="title">{{ $isRiwayat ? 'Riwayat Pembayaran' : 'Pembayaran' }}</x-slot>

    <div class="space-y-5">
        <div class="flex flex-wrap items-center justify-between gap-3">
            <div>
                <h2 class="page-title">{{ $isRiwayat ? 'Riwayat Pembayaran' : 'Pembayaran' }}</h2>
                <p class="page-sub">
                    @if ($isRiwayat)
                        Seluruh riwayat transaksi pembayaran
                    @else
                        Transaksi pembayaran bulan <span class="font-medium text-slate-700">{{ \Carbon\Carbon::parse($mulai)->translatedFormat('F Y') }}</span>
                    @endif
                </p>
            </div>
            <div class="flex flex-wrap gap-2">
                @if (!$isRiwayat)
                    <a href="{{ route('pembayaran.pilih') }}" 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>
                        Tambah Pembayaran
                    </a>
                @endif
                @if ($isRiwayat && !$isYayasan)
                    <a href="{{ route('pembayaran.import') }}" class="btn-teal">Import Riwayat</a>
                @endif
            </div>
        </div>

        @if ($errors->any())
            <div class="alert alert-danger">
                @foreach ($errors->all() as $e)<div>{{ $e }}</div>@endforeach
            </div>
        @endif

        <form method="GET" action="{{ route($isRiwayat ? 'pembayaran.riwayat' : 'pembayaran.index') }}" class="card flex flex-wrap items-end gap-2 p-4">
            <div>
                <x-input-label value="Dari Tanggal" />
                <input type="date" name="tanggal_mulai" value="{{ request('tanggal_mulai', $mulai) }}" class="input mt-1.5 w-auto">
            </div>
            <div>
                <x-input-label value="Sampai Tanggal" />
                <input type="date" name="tanggal_selesai" value="{{ request('tanggal_selesai', $selesai) }}" class="input mt-1.5 w-auto">
            </div>
            <div>
                <x-input-label value="Petugas" />
                <select name="user_id" class="input mt-1.5 w-auto">
                    <option value="">Semua Petugas</option>
                    @foreach ($petugas as $u)
                        <option value="{{ $u->id }}" @selected(request('user_id') == $u->id)>
                            {{ $u->name }} ({{ $roleLabels[$u->role] ?? $u->role }})
                        </option>
                    @endforeach
                </select>
            </div>
            <div>
                <x-input-label value="Jenis Pembayaran" />
                <select name="jenis_pembayaran_id" class="input mt-1.5 w-auto">
                    <option value="">Semua Jenis</option>
                    @foreach ($jenisPembayarans as $j)
                        <option value="{{ $j->id }}" @selected(request('jenis_pembayaran_id') == $j->id)>
                            {{ $j->nama }}{{ $j->kategori === 'bulanan' ? ' (Bulanan)' : '' }}
                        </option>
                    @endforeach
                </select>
            </div>
            <div>
                <x-input-label value="Kelas" />
                <select name="kelas_id" id="filter_kelas" class="input mt-1.5 w-auto">
                    <option value="" @selected(!request('kelas_id'))>Semua Kelas</option>
                    @foreach ($kelas as $k)
                        <option value="{{ $k->id }}" @selected(request('kelas_id') == $k->id)>
                            {{ $k->tingkat?->nama ?? '' }} - {{ $k->nama }}
                        </option>
                    @endforeach
                </select>
            </div>
            <div>
                <x-input-label value="Siswa" />
                <select name="siswa_id" id="filter_siswa" class="input mt-1.5 w-auto">
                    <option value="">Semua Siswa</option>
                    @foreach ($siswa as $sw)
                        <option value="{{ $sw->id }}" @selected(request('siswa_id') == $sw->id)>
                            {{ $sw->nama }} ({{ $sw->nis }})
                        </option>
                    @endforeach
                </select>
            </div>
            <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="M21 21l-4.35-4.35M17 11a6 6 0 11-12 0 6 6 0 0112 0z"/></svg>
                Cari
            </button>
            @if ($isRiwayat)
                <button type="submit" formaction="{{ route('pembayaran.riwayat.pdf') }}" class="btn-danger">
                    <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 10v6m0 0l-3-3m3 3l3-3M4 4h16M4 4v6m0 8h16"/></svg>
                    Unduh PDF
                </button>
                <button type="submit" formaction="{{ route('pembayaran.riwayat.excel') }}" class="btn-teal">
                    <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 10v6m0 0l-3-3m3 3l3-3M4 4h16M4 4v6m0 8h16"/></svg>
                    Unduh Excel
                </button>
            @endif
            <a href="{{ route($isRiwayat ? 'pembayaran.riwayat' : 'pembayaran.index') }}" class="btn-secondary">Reset</a>
        </form>

        @if ($belumPilihKelas)
            <div class="card flex flex-col items-center gap-2 p-10 text-center">
                <div class="flex h-14 w-14 items-center justify-center rounded-2xl bg-brand-50 text-brand-600">
                    <svg class="h-7 w-7" fill="none" stroke="currentColor" stroke-width="1.8" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M3 21c2-3 5-4 8-4s6 1 8 4M12 11a4 4 0 100-8 4 4 0 000 8z"/></svg>
                </div>
                <p class="font-medium text-slate-700">Pilih kelas terlebih dahulu</p>
                <p class="text-sm text-slate-500">Pilih kelas pada dropdown di atas untuk menampilkan data pembayaran.</p>
            </div>
        @else
        <div class="tbl-card">
            <div class="tbl-wrap">
                <table class="tbl">
                    <thead class="thead">
                        <tr>
                            <th class="th">No. Kwitansi</th>
                            <th class="th">Tanggal</th>
                            <th class="th">Siswa</th>
                            <th class="th">Jenis</th>
                            <th class="th">Jumlah</th>
                            <th class="th">Metode</th>
                            <th class="th">Penerima</th>
                            @if (!$isYayasan)
                                <th class="th col-actions text-right">Aksi</th>
                            @endif
                        </tr>
                    </thead>
                    <tbody class="tbody">
                        @forelse ($pembayaran as $p)
                            <tr class="transition-colors hover:bg-slate-50">
                                <td class="td font-mono text-xs">{{ $p->no_kwitansi }}
                                    @if ($p->no_kwitansi && ($kwCounts[$p->no_kwitansi] ?? 0) > 1)
                                        <span class="ml-1 rounded bg-slate-100 px-1.5 py-0.5 text-[10px] font-semibold text-slate-500">+{{ ($kwCounts[$p->no_kwitansi] ?? 1) - 1 }} item</span>
                                    @endif
                                </td>
                                <td class="td">{{ $p->tanggal->format('d/m/Y') }}</td>
                                <td class="td">
                                    <div class="font-semibold text-slate-800">{{ $p->tagihan?->siswa?->nama }}</div>
                                    <div class="text-xs text-slate-400">{{ $p->tagihan?->siswa?->kelas?->nama }}</div>
                                </td>
                                <td class="td">
                                    <div class="font-semibold text-slate-800">{{ $p->tagihan?->jenisPembayaran?->nama }}</div>
                                    @if ($p->tagihan?->jenisPembayaran?->kategori === 'bulanan' && $p->tagihan?->periode_bulan)
                                        <div class="text-xs text-slate-400">
                                            {{ \Carbon\Carbon::create($p->tagihan->periode_tahun, $p->tagihan->periode_bulan)->translatedFormat('F Y') }}
                                        </div>
                                    @endif
                                </td>
                                <td class="td font-semibold text-emerald-700">Rp {{ number_format($p->jumlah) }}</td>
                                <td class="td">
                                    <span class="badge badge-gray">{{ ucfirst($p->metode) }}</span>
                                </td>
                                <td class="td">
                                    @if ($p->user)
                                        <div class="font-medium text-slate-700">{{ $p->user->name }}</div>
                                        <div class="text-xs text-slate-400">{{ $roleLabels[$p->user->role] ?? $p->user->role }}</div>
                                    @else
                                        <span class="text-slate-400">-</span>
                                    @endif
                                </td>
                                @if (!$isYayasan)
                                <td class="td col-actions">
                                    <div class="flex items-center justify-end gap-1.5">
                                        <a href="{{ route('pembayaran.edit', $p) }}" class="btn-secondary btn-sm">Edit</a>
                                        <a href="{{ route('pembayaran.kwitansi', $p) }}" class="btn-secondary btn-sm">Cetak</a>
                                        @if ((Auth::user()?->role ?? null) === 'admin')
                                            <form method="POST" action="{{ route('pembayaran.destroy', $p) }}" class="inline" onsubmit="return confirm('Hapus pembayaran {{ $p->no_kwitansi }}? Sisa tagihan siswa akan dikembalikan.')">
                                                @csrf
                                                @method('DELETE')
                                                <button type="submit" class="btn-danger-ghost btn-sm">Hapus</button>
                                            </form>
                                        @endif
                                    </div>
                                </td>
                            @endif
                        </tr>
                    @empty
                        <tr><td colspan="{{ $isYayasan ? 7 : 8 }}" class="td whitespace-normal py-10 text-center text-slate-400">Belum ada pembayaran</td></tr>
                        @endforelse
                    </tbody>
                </table>
            </div>
            <div class="border-t border-slate-100 px-5 py-4">{{ $pembayaran->links() }}</div>
        </div>
        @endif
    </div>
</x-app-layout>

<script>
    document.getElementById('filter_kelas')?.addEventListener('change', function () {
        const form = this.closest('form');
        if (form) form.submit();
    });
</script>