@extends('layouts.app')

@section('title', 'Rekap Pembayaran')

@section('content')
<div class="pkbm-master-page pkbm-spp-report mx-auto max-w-7xl space-y-5">
    <header class="pkbm-dashboard__heading">
        <div>
            <p class="pkbm-dashboard__breadcrumb">Manajemen SPP <i class="bi bi-chevron-right" aria-hidden="true"></i>Rekap Bayar</p>
            <h1 class="pkbm-dashboard__title">Rekap Pembayaran Siswa</h1>
            <p class="pkbm-dashboard__subtitle">Lihat tagihan, pembayaran, dan tunggakan siswa dari seluruh tahun ajaran.</p>
        </div>
    </header>

    @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">Data siswa tidak dapat dimuat.</p><ul class="mt-1 list-inside list-disc">@foreach ($errors->all() as $error)<li>{{ $error }}</li>@endforeach</ul></div></div>@endif

    <section class="sp-card">
        <div class="sp-card-header"><h2 class="sp-section-title">Cari siswa</h2><p class="mt-1 text-xs text-slate-500">Masukkan nama, NIS, atau NISN. Rekap mencakup riwayat tagihan dan pembayaran lintas tahun ajaran.</p></div>
        <form method="GET" action="{{ route('pkbm.spp.reports') }}" class="flex flex-col gap-3 p-5 sm:flex-row">
            <input name="q" value="{{ $filters['q'] ?? '' }}" class="sp-form-control min-w-0 flex-1 px-3" placeholder="Ketik nama, NIS, atau NISN" autocomplete="off">
            <button type="submit" class="sp-btn-primary"><i class="bi bi-search" aria-hidden="true"></i>Cari siswa</button>
            @if (!empty($filters['q']))<a href="{{ route('pkbm.spp.reports') }}" class="sp-btn-secondary">Reset</a>@endif
        </form>
        @if (!empty($filters['q']))
            <div class="border-t border-slate-100">
                @forelse ($students as $result)
                    <a href="{{ route('pkbm.spp.reports', ['q' => $filters['q'], 'id_siswa' => $result->id]) }}" @class(['spp-report__student-link flex items-center justify-between gap-3 px-5 py-3 text-sm transition hover:bg-blue-50', 'bg-blue-50' => $student && (int) $student->id === (int) $result->id])>
                        <span><span class="font-semibold text-slate-800">{{ $result->nama_siswa }}</span><span class="ml-2 text-xs text-slate-500">{{ $result->nis ?: $result->nisn ?: 'Nomor induk belum diisi' }}</span></span>
                        <span class="text-xs font-semibold text-blue-700">Lihat rekap <i class="bi bi-arrow-right" aria-hidden="true"></i></span>
                    </a>
                @empty
                    <p class="px-5 py-4 text-sm text-slate-500">Siswa tidak ditemukan pada PKBM ini.</p>
                @endforelse
            </div>
        @endif
    </section>

    @if ($student)
        <section class="space-y-3">
            <article class="sp-card flex flex-col gap-4 overflow-hidden bg-gradient-to-r from-blue-700 to-blue-600 p-4 text-white sm:flex-row sm:items-center sm:justify-between sm:p-5">
                <div class="min-w-0">
                    <p class="text-xs font-semibold uppercase tracking-wide text-blue-100">Peserta didik</p>
                    <h2 class="spp-report__student-name mt-1 font-bold">{{ $student->nama_siswa }}</h2>
                    <div class="mt-2 flex flex-wrap gap-x-4 gap-y-1 text-xs text-blue-100 sm:text-sm">
                        <span>NIS {{ $student->nis ?: '—' }}</span>
                        <span>NISN {{ $student->nisn ?: '—' }}</span>
                        @if ($report['kelas'] !== [])<span>Kelas {{ implode(', ', $report['kelas']) }}</span>@endif
                    </div>
                </div>
                </article>
                <a href="{{ route('pkbm.spp.reports.print', $student->id) }}" target="_blank" rel="noopener" class="spp-report__print-link inline-flex shrink-0 items-center justify-center gap-2 self-start rounded-lg bg-white px-3 py-2 text-xs font-bold text-blue-700 hover:bg-blue-50 sm:self-center"><i class="bi bi-printer" aria-hidden="true"></i>Cetak rekap</a>
            </article>
            <div class="grid gap-3 sm:grid-cols-3">
            @foreach ([['Total tagihan', $report['total_tagihan'], 'text-slate-900', 'bi-receipt', 'bg-blue-50 text-blue-700'], ['Sudah dibayar', $report['total_dibayar'], 'text-emerald-700', 'bi-check2-circle', 'bg-emerald-50 text-emerald-700'], ['Sisa tunggakan', $report['total_sisa'], 'text-rose-700', 'bi-exclamation-circle', 'bg-rose-50 text-rose-700']] as [$label, $amount, $color, $icon, $iconStyle])
                <article class="sp-card flex min-h-28 items-center justify-between gap-3 p-4 sm:p-5">
                    <div class="min-w-0">
                        <p class="text-xs font-semibold uppercase tracking-wide text-slate-500">{{ $label }}</p>
                        <p class="mt-2 break-words text-lg font-bold leading-tight {{ $color }}">Rp {{ number_format($amount, 0, ',', '.') }}</p>
                    </div>
                    <span class="grid size-10 shrink-0 place-items-center rounded-xl {{ $iconStyle }}"><i class="bi {{ $icon }}" aria-hidden="true"></i></span>
                </article>
            @endforeach
            </div>
        </section>

        <section class="sp-card overflow-hidden">
            <div class="sp-card-header"><h2 class="sp-section-title">Riwayat berdasarkan tahun ajaran</h2><p class="mt-1 text-xs text-slate-500">Pembayaran rutin dihitung sesuai bulan yang benar-benar ditagihkan; pembayaran sebagian tetap tercatat sebagai cicilan.</p></div>
            <div class="overflow-x-auto">
                <table class="sp-table min-w-full">
                    <thead><tr><th>Tahun ajaran</th><th>Item pembayaran</th><th>Tipe</th><th class="text-right">Tagihan</th><th class="text-right">Dibayar</th><th class="text-right">Sisa</th><th>Bulan belum lunas</th><th>Status</th></tr></thead>
                    <tbody>
                        @forelse ($report['rows'] as $row)
                            <tr>
                                <td class="whitespace-nowrap font-semibold text-slate-700">{{ $row['tahun_pelajaran'] }}</td>
                                <td class="font-semibold text-slate-800">{{ $row['nama_pembayaran'] }}</td>
                                <td>{{ $row['tipe'] }}</td>
                                <td class="whitespace-nowrap text-right">Rp {{ number_format($row['tagihan'], 0, ',', '.') }}</td>
                                <td class="whitespace-nowrap text-right font-semibold text-emerald-700">Rp {{ number_format($row['dibayar'], 0, ',', '.') }}</td>
                                <td class="whitespace-nowrap text-right font-semibold {{ $row['sisa'] > 0 ? 'text-rose-700' : 'text-slate-500' }}">Rp {{ number_format($row['sisa'], 0, ',', '.') }}</td>
                                <td class="min-w-36">
                                    @if ($row['bulan_belum_lunas'] === [])<span class="text-emerald-700"><i class="bi bi-check-circle-fill mr-1" aria-hidden="true"></i>Lunas</span>
                                    @else<div class="flex flex-wrap gap-1">@foreach ($row['bulan_belum_lunas'] as $month)<span class="rounded-full bg-rose-50 px-2 py-1 text-xs font-semibold text-rose-700">{{ $month }}</span>@endforeach</div>@endif
                                </td>
                                <td>@if ($row['sisa'] <= 0)<span class="rounded-full bg-emerald-50 px-2.5 py-1 text-xs font-semibold text-emerald-700">Lunas</span>@elseif ($row['dibayar'] > 0)<span class="rounded-full bg-amber-50 px-2.5 py-1 text-xs font-semibold text-amber-700">Cicilan</span>@else<span class="rounded-full bg-rose-50 px-2.5 py-1 text-xs font-semibold text-rose-700">Belum bayar</span>@endif</td>
                            </tr>
                        @empty
                            <tr><td colspan="8" class="px-4 py-10 text-center"><i class="bi bi-inbox text-2xl text-slate-300" aria-hidden="true"></i><p class="mt-2 font-semibold text-slate-700">Belum ada data tagihan atau pembayaran</p><p class="text-sm text-slate-500">Data akan muncul setelah tagihan dibuat atau pembayaran dicatat.</p></td></tr>
                        @endforelse
                    </tbody>
                </table>
            </div>
        </section>
    @endif
</div>
@endsection