{{-- resources/views/siswa/keuangan.blade.php --}}
<div class="row">
    <div class="col-lg-4 mb-4">
        <div class="card shadow-sm border-0 h-100">
            <div class="card-body text-center p-4">
                <img src="{{ $siswa->foto ? asset('storage/siswa/' . $siswa->foto) : 'https://ui-avatars.com/api/?name='.urlencode($siswa->nama_lengkap).'&background=random&size=150' }}" 
                     class="rounded-circle object-fit-cover shadow-sm mb-3 border border-white" 
                     style="width: 100px; height: 100px; aspect-ratio: 1/1; border-width: 3px !important;" alt="Foto Profil">
                <h5 class="fw-bold text-primary mb-1">{{ $siswa->nama_lengkap }}</h5>
                <p class="text-muted mb-3" style="font-size: 13px;">NIS: {{ $siswa->nis ?? '-' }} | Kelas: {{ $siswa->kelas->nama_kelas ?? '-' }}</p>
                
                <ul class="list-group list-group-flush text-start mt-4 rounded-3">
                    <li class="list-group-item bg-light text-secondary fw-bold" style="font-size: 12px;">RINGKASAN KEUANGAN ({{ $taAktif->tahun_ajaran ?? '-' }})</li>
                    <li class="list-group-item d-flex justify-content-between align-items-center" style="font-size: 14px;"><span>Total Tagihan:</span><strong class="text-dark">Rp {{ number_format($totalTagihan, 0, ',', '.') }}</strong></li>
                    <li class="list-group-item d-flex justify-content-between align-items-center" style="font-size: 14px;"><span>Telah Dibayar:</span><strong class="text-success">Rp {{ number_format($totalDibayar, 0, ',', '.') }}</strong></li>
                    <li class="list-group-item d-flex justify-content-between align-items-center bg-danger bg-opacity-10 border-danger border-opacity-25" style="font-size: 15px;"><span class="fw-bold text-danger">SISA TAGIHAN:</span><strong class="text-danger">Rp {{ number_format($sisaTagihan, 0, ',', '.') }}</strong></li>
                </ul>
            </div>
        </div>
    </div>

    <div class="col-lg-8 mb-4">
        <div class="card shadow-sm border-0 mb-4">
            <div class="card-header bg-white border-bottom py-3"><h6 class="mb-0 fw-bold text-primary"><i class="bi bi-list-check me-2"></i>Rincian Tagihan</h6></div>
            <div class="card-body p-0">
                <div class="table-responsive">
                    <table class="table table-hover align-middle mb-0">
                        <thead class="table-light"><tr><th class="ps-4 text-secondary">JENIS PEMBAYARAN</th><th class="text-end text-secondary">NOMINAL TARIF</th><th class="text-end text-secondary">TERBAYAR</th><th class="text-center text-secondary pe-4">STATUS</th></tr></thead>
                        <tbody>
                            @forelse($tarifs as $tarif)
                                <tr>
                                    <td class="ps-4"><span class="fw-bold d-block text-dark">{{ $tarif->kategori->nama ?? '-' }}</span><span class="text-muted" style="font-size: 11px;"><i class="bi bi-arrow-return-right me-1"></i> {{ $tarif->semester ? $tarif->semester->nama : 'Berlaku 1 Tahun' }}</span></td>
                                    <td class="text-end fw-bold text-dark">Rp {{ number_format($tarif->nominal, 0, ',', '.') }}</td>
                                    <td class="text-end fw-bold text-success">Rp {{ number_format($tarif->terbayar, 0, ',', '.') }}</td>
                                    <td class="text-center pe-4"><span class="badge {{ $tarif->sisa <= 0 ? 'bg-success' : ($tarif->terbayar > 0 ? 'bg-warning text-dark' : 'bg-danger') }} rounded-pill px-2">{{ $tarif->sisa <= 0 ? 'Lunas' : ($tarif->terbayar > 0 ? 'Cicilan' : 'Belum Bayar') }}</span></td>
                                </tr>
                            @empty
                                <tr><td colspan="4" class="text-center py-5 text-muted">Tidak ada tagihan.</td></tr>
                            @endforelse
                        </tbody>
                    </table>
                </div>
            </div>
        </div>

        <div class="card shadow-sm border-0">
            <div class="card-header bg-white border-bottom py-3"><h6 class="mb-0 fw-bold text-success"><i class="bi bi-clock-history me-2"></i>Histori Pembayaran Siswa</h6></div>
            <div class="card-body p-0">
                <div class="table-responsive">
                    <table class="table table-hover align-middle mb-0">
                        <thead class="table-light"><tr><th class="ps-4 text-secondary">TANGGAL BAYAR</th><th class="text-secondary">ITEM TAGIHAN DIBAYAR</th><th class="text-secondary">KETERANGAN</th><th class="text-end text-secondary pe-4">NOMINAL SETORAN</th></tr></thead>
                        <tbody>
                            @forelse($historiPembayaran as $bayar)
                                <tr>
                                    <td class="ps-4"><span class="fw-medium text-dark d-block">{{ \Carbon\Carbon::parse($bayar->tanggal_bayar)->format('d M Y') }} M</span><small class="text-muted">{{ $bayar->tanggal_bayar_hijriyah }}</small></td>
                                    <td><span class="fw-bold text-primary d-block">{{ $bayar->tarif->kategori->nama ?? 'Tagihan Dihapus' }}</span><small class="text-muted">TA: {{ $bayar->tarif->tahunAjaran->tahun_ajaran ?? '-' }}</small></td>
                                    <td><span class="text-muted">{{ $bayar->keterangan ?? '-' }}</span></td>
                                    <td class="text-end fw-bold text-success pe-4">+ Rp {{ number_format($bayar->nominal_bayar, 0, ',', '.') }}</td>
                                </tr>
                            @empty
                                <tr><td colspan="4" class="text-center py-4 text-muted">Belum ada histori pembayaran.</td></tr>
                            @endforelse
                        </tbody>
                    </table>
                </div>
            </div>
            @if($historiPembayaran->hasPages()) <div class="card-footer bg-white border-top py-3">{{ $historiPembayaran->links('pagination::bootstrap-5') }}</div> @endif
        </div>
    </div>
</div>