{{-- resources/views/admin/siswa/keuangan.blade.php --}}

<div class="d-flex justify-content-between align-items-center flex-wrap gap-3 mb-4">
    <div>
        <h5 class="mb-1 fw-bold text-success"><i class="bi bi-wallet2 me-2"></i>Rekam Jejak Keuangan</h5>
        <p class="text-muted mb-0" style="font-size: 13px;">Riwayat tagihan dan pembayaran (Mode Read-Only).</p>
    </div>
    
    <div class="d-flex align-items-center gap-2">
        <form action="{{ url()->current() }}" method="GET" class="d-flex align-items-center gap-2 mb-0 bg-white p-2 rounded shadow-sm border border-secondary-subtle">
            <label class="form-label mb-0 fw-medium text-nowrap text-muted" style="font-size: 13px;">
                <i class="bi bi-funnel me-1"></i>Filter TA:
            </label>
            <select name="keuangan_ta_id" class="form-select form-select-sm shadow-none border-secondary-subtle" onchange="this.form.submit()" style="min-width: 160px; font-size: 13px;">
                <option value="">-- Semua Tahun Ajaran --</option>
                @foreach($tahunAjarans as $ta)
                    <option value="{{ $ta->id }}" {{ $selectedTaId == $ta->id ? 'selected' : '' }}>
                        {{ $ta->tahun_ajaran }} {{ $ta->status_akademik == 'aktif' ? '(Aktif)' : '' }}
                    </option>
                @endforeach
            </select>
        </form>

        <a href="{{ route('admin.keuangan.siswa.transaksi', $siswa->id) }}" class="btn btn-outline-primary btn-sm fw-bold shadow-sm d-flex align-items-center gap-2" style="height: 38px;">
            Modul Keuangan <i class="bi bi-box-arrow-up-right"></i>
        </a>
    </div>
</div>

<div class="row g-3 mb-4">
    <div class="col-md-4">
        {{-- Perbaikan: border-4 diganti menjadi style inline border-left-width --}}
        <div class="card shadow-sm border-0 border-start border-secondary h-100" style="border-left-width: 4px !important;">
            <div class="card-body p-3">
                <div class="text-muted fw-bold mb-1" style="font-size: 12px;">TOTAL TAGIHAN</div>
                <h4 class="mb-0 fw-bold text-dark">Rp {{ number_format($totalTagihan, 0, ',', '.') }}</h4>
            </div>
        </div>
    </div>
    <div class="col-md-4">
        <div class="card shadow-sm border-0 border-start border-success h-100" style="border-left-width: 4px !important;">
            <div class="card-body p-3">
                <div class="text-success fw-bold mb-1" style="font-size: 12px;">TELAH DIBAYAR</div>
                <h4 class="mb-0 fw-bold text-success">Rp {{ number_format($totalDibayar, 0, ',', '.') }}</h4>
            </div>
        </div>
    </div>
    <div class="col-md-4">
        <div class="card shadow-sm border-0 border-start border-danger h-100 bg-danger bg-opacity-10" style="border-left-width: 4px !important;">
            <div class="card-body p-3">
                <div class="text-danger fw-bold mb-1" style="font-size: 12px;">SISA TAGIHAN</div>
                <h4 class="mb-0 fw-bold text-danger">Rp {{ number_format($sisaTagihan, 0, ',', '.') }}</h4>
            </div>
        </div>
    </div>
</div>

<div class="card shadow-sm border-0 border-top border-primary mb-4" style="border-top-width: 4px !important;">
    <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 (TA: {{ $activeTa->tahun_ajaran ?? 'Semua Tahun' }})</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="text-secondary ps-4" style="font-size: 12px; width: 40%">JENIS PEMBAYARAN</th>
                        <th class="text-end text-secondary" style="font-size: 12px; width: 20%">NOMINAL TARIF</th>
                        <th class="text-end text-secondary" style="font-size: 12px; width: 20%">TERBAYAR</th>
                        <th class="text-center text-secondary pe-4" style="font-size: 12px; width: 20%">STATUS</th>
                    </tr>
                </thead>
                <tbody>
                    @forelse($tarifs as $tarif)
                        @php 
                            $terbayar = $tarif->terbayar ?? 0;
                            $sisa = $tarif->sisa ?? $tarif->nominal;

                            if($sisa <= 0) {
                                $statusItem = 'Lunas';
                                $badgeClass = 'bg-success';
                            } elseif($terbayar > 0) {
                                $statusItem = 'Cicilan';
                                $badgeClass = 'bg-warning text-dark';
                            } else {
                                $statusItem = 'Belum Bayar';
                                $badgeClass = 'bg-danger';
                            }
                        @endphp
                        <tr>
                            <td class="ps-4">
                                <span class="fw-bold d-block text-dark" style="font-size: 14px;">{{ $tarif->kategori->nama ?? '-' }}</span>
                                <span class="text-muted" style="font-size: 11px;">
                                    <i class="bi bi-arrow-return-right me-1"></i> TA: {{ $tarif->tahunAjaran->tahun_ajaran ?? '-' }} | {{ $tarif->semester ? $tarif->semester->nama : 'Berlaku 1 Tahun' }}
                                </span>
                            </td>
                            <td class="text-end fw-bold text-dark" style="font-size: 13px;">Rp {{ number_format($tarif->nominal, 0, ',', '.') }}</td>
                            <td class="text-end fw-bold text-success" style="font-size: 13px;">Rp {{ number_format($terbayar, 0, ',', '.') }}</td>
                            <td class="text-center pe-4">
                                <span class="badge {{ $badgeClass }} rounded-pill px-3 py-1" style="font-size: 11px;">{{ $statusItem }}</span>
                            </td>
                        </tr>
                    @empty
                        <tr>
                            <td colspan="4" class="text-center py-5 text-muted">
                                <i class="bi bi-check-circle fs-2 d-block mb-2 text-success opacity-50"></i>
                                Tidak ada tagihan yang ditetapkan untuk siswa ini pada <strong>{{ $activeTa ? 'TA ' . $activeTa->tahun_ajaran : 'semua Tahun Ajaran' }}</strong>.
                            </td>
                        </tr>
                    @endforelse
                </tbody>
            </table>
        </div>
    </div>
</div>

<div class="card shadow-sm border-0 border-top border-success mb-4" style="border-top-width: 4px !important;">
    <div class="card-header bg-white border-bottom py-3 d-flex justify-content-between align-items-center">
        <h6 class="mb-0 fw-bold text-success"><i class="bi bi-clock-history me-2"></i>Histori Transaksi</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="text-center text-secondary" style="font-size: 12px; width: 5%">NO</th>
                        <th class="text-secondary" style="font-size: 12px; width: 15%">TANGGAL BAYAR</th>
                        <th class="text-secondary" style="font-size: 12px; width: 30%">ITEM TAGIHAN</th>
                        <th class="text-secondary" style="font-size: 12px; width: 30%">KETERANGAN</th>
                        <th class="text-end text-secondary pe-4" style="font-size: 12px; width: 20%">NOMINAL SETORAN</th>
                    </tr>
                </thead>
                <tbody>
                    @if(isset($historiPembayaran) && $historiPembayaran->count() > 0)
                        @foreach($historiPembayaran as $index => $bayar)
                            <tr>
                                <td class="text-center text-muted">
                                    {{ (method_exists($historiPembayaran, 'currentPage') ? ($historiPembayaran->currentPage() - 1) * $historiPembayaran->perPage() : 0) + $loop->iteration }}
                                </td>
                                <td>
                                    <span class="fw-medium text-dark" style="font-size: 13px;">{{ \Carbon\Carbon::parse($bayar->tanggal_bayar)->format('d M Y') }}</span>
                                </td>
                                <td>
                                    <span class="fw-bold text-primary d-block" style="font-size: 13px;">{{ $bayar->tarif->kategori->nama ?? 'Tagihan Dihapus' }}</span>
                                    <small class="text-muted" style="font-size: 11px;">TA: {{ $bayar->tarif->tahunAjaran->tahun_ajaran ?? '-' }}</small>
                                </td>
                                <td>
                                    <span class="text-muted" style="font-size: 12px;">{{ $bayar->keterangan ?? '-' }}</span>
                                </td>
                                <td class="text-end fw-bold text-success pe-4" style="font-size: 14px;">
                                    + Rp {{ number_format($bayar->nominal_bayar, 0, ',', '.') }}
                                </td>
                            </tr>
                        @endforeach
                    @else
                        <tr>
                            <td colspan="5" class="text-center py-5 text-muted">
                                <i class="bi bi-inbox fs-2 d-block mb-2 text-black-50"></i>
                                Belum ada histori pembayaran yang dilakukan oleh siswa ini.
                            </td>
                        </tr>
                    @endif
                </tbody>
            </table>
        </div>
    </div>
    
    @if(isset($historiPembayaran) && method_exists($historiPembayaran, 'hasPages') && $historiPembayaran->hasPages())
        <div class="card-footer bg-white border-top py-3 d-flex justify-content-between align-items-center">
            <div class="small text-muted">
                Menampilkan log {{ $historiPembayaran->firstItem() }}-{{ $historiPembayaran->lastItem() }} dari {{ $historiPembayaran->total() }} riwayat transaksi.
            </div>
            <div class="pagination-sm">
                {{ $historiPembayaran->appends(['keuangan_ta_id' => $selectedTaId])->links('pagination::bootstrap-5') }}
            </div>
        </div>
    @endif
</div>