@extends('layouts.app')

@section('title', 'Rincian Tagihan SPP')

@section('content')
<style>
    /* ═══════════════════════════════════════════════
     *  Standarisasi font & judul kartu — selaras dengan
     *  halaman Dashboard (.sd) dan Materi (.student-materials-page).
     *  Bootstrap menimpa font pada heading/tabel/tombol, jadi
     *  font 'Plus Jakarta Sans' dipaksa di seluruh halaman ini.
     * ═══════════════════════════════════════════════ */
    .student-tagihan-page,
    .student-tagihan-page h1, .student-tagihan-page h2, .student-tagihan-page h3, .student-tagihan-page h4,
    .student-tagihan-page p, .student-tagihan-page span, .student-tagihan-page a, .student-tagihan-page label,
    .student-tagihan-page button, .student-tagihan-page input, .student-tagihan-page select,
    .student-tagihan-page td, .student-tagihan-page th {
        font-family: 'Plus Jakarta Sans', ui-sans-serif, system-ui, sans-serif !important;
    }

    .student-tagihan-page a,
    .student-tagihan-page a:hover,
    .student-tagihan-page a:focus {
        text-decoration: none !important;
    }

    /* Judul kartu — samakan ukuran & bobot dengan kartu Materi/Dashboard */
    .student-tagihan-page .sp-card h2 {
        font-size: 13.5px !important;
        font-weight: 800 !important;
        color: #0f172a !important;
        letter-spacing: -0.01em !important;
        line-height: 1.25 !important;
    }
    .student-tagihan-page .sp-card h3 {
        font-size: 13.5px !important;
        font-weight: 700 !important;
        color: #0f172a !important;
        line-height: 1.3 !important;
    }

    /* Kepala tabel — uppercase halus seperti tabel di halaman lain */
    .student-tagihan-page thead th {
        font-size: 11px !important;
        font-weight: 700 !important;
        letter-spacing: 0.04em;
    }
</style>
<div class="student-tagihan-page mx-auto max-w-6xl space-y-6">
    <header class="pkbm-dashboard__heading">
        <div class="flex flex-col gap-2 sm:flex-row sm:items-center sm:justify-between">
            <div>
                <p class="pkbm-dashboard__breadcrumb">
                    <a href="{{ route('student.dashboard') }}" class="hover:text-blue-700 no-underline">Ruang Belajar</a>
                    <i class="bi bi-chevron-right" aria-hidden="true"></i>
                    Rincian Tagihan
                </p>
                <h1 class="pkbm-dashboard__title">Kewajiban Pembayaran (SPP)</h1>
                <p class="pkbm-dashboard__subtitle">
                    Informasi lengkap seluruh kewajiban biaya pendidikan dan riwayat setoran
                </p>
            </div>
            <div class="flex items-center gap-2 rounded-xl bg-white/90 px-3.5 py-2 shadow-sm backdrop-blur">
                <div class="flex h-8 w-8 items-center justify-center rounded-lg bg-blue-100 text-blue-700">
                    <i class="bi bi-person-badge"></i>
                </div>
                <div class="text-xs">
                    <span class="block text-[10px] uppercase font-bold text-slate-400">Siswa</span>
                    <span class="font-bold text-slate-800">{{ $student['nama'] }}</span>
                </div>
            </div>
        </div>
    </header>

    {{-- Ringkasan Keuangan Card --}}
    <div class="grid grid-cols-1 gap-4 sm:grid-cols-3">
        <div class="relative overflow-hidden rounded-2xl bg-gradient-to-br from-rose-600 to-rose-800 p-5 text-white shadow-lg">
            <div class="pointer-events-none absolute -right-6 -top-6 h-24 w-24 rounded-full bg-white/10"></div>
            <div class="flex items-center justify-between">
                <span class="text-[11px] font-bold uppercase tracking-wider text-rose-100">Sisa Tunggakan</span>
                <i class="bi bi-exclamation-circle text-lg text-rose-200"></i>
            </div>
            <div class="mt-2 text-[22px] font-extrabold leading-none tracking-tight">
                Rp {{ number_format($totalSisa, 0, ',', '.') }}
            </div>
            <p class="mt-2 text-[11px] font-medium text-rose-100">Total yang harus diselesaikan</p>
        </div>

        <div class="relative overflow-hidden rounded-2xl bg-gradient-to-br from-blue-600 to-blue-800 p-5 text-white shadow-lg">
            <div class="pointer-events-none absolute -right-6 -top-6 h-24 w-24 rounded-full bg-white/10"></div>
            <div class="flex items-center justify-between">
                <span class="text-[11px] font-bold uppercase tracking-wider text-blue-100">Total Beban Kewajiban</span>
                <i class="bi bi-cash-stack text-lg text-blue-200"></i>
            </div>
            <div class="mt-2 text-[22px] font-extrabold leading-none tracking-tight">
                Rp {{ number_format($grTagihan, 0, ',', '.') }}
            </div>
            <p class="mt-2 text-[11px] font-medium text-blue-100">Akumulasi s/d bulan berjalan</p>
        </div>

        <div class="relative overflow-hidden rounded-2xl bg-gradient-to-br from-emerald-600 to-emerald-800 p-5 text-white shadow-lg">
            <div class="pointer-events-none absolute -right-6 -top-6 h-24 w-24 rounded-full bg-white/10"></div>
            <div class="flex items-center justify-between">
                <span class="text-[11px] font-bold uppercase tracking-wider text-emerald-100">Sudah Terbayar</span>
                <i class="bi bi-check2-circle text-lg text-emerald-200"></i>
            </div>
            <div class="mt-2 text-[22px] font-extrabold leading-none tracking-tight">
                Rp {{ number_format($grBayar, 0, ',', '.') }}
            </div>
            <p class="mt-2 text-[11px] font-medium text-emerald-100">Total setoran yang terverifikasi</p>
        </div>
    </div>

    @if(empty($items))
        <div class="sp-card p-10 text-center text-slate-400">
            <i class="bi bi-wallet2 text-5xl text-slate-300"></i>
            <h3 class="mt-3 text-base font-bold text-slate-700">Belum Ada Catatan Tagihan</h3>
            <p class="mt-1 text-sm text-slate-500">Anda belum memiliki catatan beban biaya atau telah dibebaskan dari pembiayaan.</p>
        </div>
    @else
        @foreach($items as $tp => $tpData)
            <div class="sp-card overflow-hidden">
                <div class="flex flex-col sm:flex-row sm:items-center sm:justify-between border-b border-slate-100 bg-slate-50/50 p-4">
                    <div class="flex items-center gap-3">
                        <span class="flex h-8 w-8 items-center justify-center rounded-lg bg-blue-600 text-white font-bold text-xs">
                            TP
                        </span>
                        <div>
                            <h2 class="text-sm font-bold text-slate-900">Tahun Pelajaran {{ $tp }}</h2>
                            <p class="text-xs text-slate-500">Kelas: {{ $tpData['nama_kelas'] }}</p>
                        </div>
                    </div>
                </div>

                {{-- Tampilan Desktop (Tabel) --}}
                <div class="hidden sm:block overflow-x-auto">
                    <table class="w-full text-left text-sm text-slate-700">
                        <thead class="bg-slate-50 text-xs font-semibold uppercase text-slate-500 border-b border-slate-200">
                            <tr>
                                <th class="px-4 py-3 text-center w-12">No</th>
                                <th class="px-4 py-3">Nama Pembayaran</th>
                                <th class="px-4 py-3">Tipe</th>
                                <th class="px-4 py-3 text-right">Tarif Dasar</th>
                                <th class="px-4 py-3 text-right">Total Kewajiban</th>
                                <th class="px-4 py-3 text-right">Sudah Dibayar</th>
                                <th class="px-4 py-3 text-right">Sisa Tagihan</th>
                                <th class="px-4 py-3 text-center">Status</th>
                            </tr>
                        </thead>
                        <tbody class="divide-y divide-slate-100">
                            @foreach($tpData['rows'] as $idx => $r)
                                <tr class="hover:bg-slate-50/60 transition">
                                    <td class="px-4 py-3 text-center text-slate-400 text-xs">{{ $idx + 1 }}</td>
                                    <td class="px-4 py-3 font-semibold text-slate-900">{{ $r['nama_pembayaran'] }}</td>
                                    <td class="px-4 py-3">
                                        <span class="inline-flex rounded-full bg-slate-100 px-2.5 py-0.5 text-xs text-slate-600">
                                            {{ ucfirst($r['tipe']) }}
                                        </span>
                                    </td>
                                    <td class="px-4 py-3 text-right text-slate-600">Rp {{ number_format($r['nominal_dasar'], 0, ',', '.') }}</td>
                                    <td class="px-4 py-3 text-right font-semibold text-slate-900">Rp {{ number_format($r['total_tagihan'], 0, ',', '.') }}</td>
                                    <td class="px-4 py-3 text-right text-emerald-600 font-semibold">Rp {{ number_format($r['sudah_bayar'], 0, ',', '.') }}</td>
                                    <td class="px-4 py-3 text-right font-bold {{ $r['sisa'] > 0 ? 'text-rose-600' : 'text-slate-400' }}">
                                        Rp {{ number_format($r['sisa'], 0, ',', '.') }}
                                    </td>
                                    <td class="px-4 py-3 text-center">
                                        @if($r['sisa'] <= 0)
                                            <span class="inline-flex items-center gap-1 rounded-full bg-emerald-50 px-2.5 py-1 text-xs font-semibold text-emerald-700">
                                                <i class="bi bi-check-circle-fill text-[10px]"></i> Lunas
                                            </span>
                                        @else
                                            <span class="inline-flex items-center gap-1 rounded-full bg-rose-50 px-2.5 py-1 text-xs font-semibold text-rose-700">
                                                <i class="bi bi-clock-fill text-[10px]"></i> Belum Lunas
                                            </span>
                                        @endif
                                    </td>
                                </tr>
                            @endforeach
                        </tbody>
                    </table>
                </div>

                {{-- Tampilan Mobile (List Card) --}}
                <div class="block sm:hidden divide-y divide-slate-100 p-3 space-y-3">
                    @foreach($tpData['rows'] as $r)
                        <div class="pt-3 first:pt-0">
                            <div class="flex items-start justify-between">
                                <div>
                                    <h3 class="text-sm font-bold text-slate-900">{{ $r['nama_pembayaran'] }}</h3>
                                    <span class="inline-block mt-0.5 text-[11px] text-slate-500">Tipe: {{ ucfirst($r['tipe']) }}</span>
                                </div>
                                @if($r['sisa'] <= 0)
                                    <span class="rounded-full bg-emerald-50 px-2 py-0.5 text-[11px] font-bold text-emerald-700">Lunas</span>
                                @else
                                    <span class="rounded-full bg-rose-50 px-2 py-0.5 text-[11px] font-bold text-rose-700">Belum Lunas</span>
                                @endif
                            </div>

                            <div class="mt-3 grid grid-cols-3 gap-2 rounded-xl bg-slate-50 p-2.5 text-center text-xs">
                                <div>
                                    <span class="block text-[10px] text-slate-400">Total Beban</span>
                                    <span class="font-bold text-slate-800">Rp {{ number_format($r['total_tagihan'], 0, ',', '.') }}</span>
                                </div>
                                <div>
                                    <span class="block text-[10px] text-emerald-600">Dibayar</span>
                                    <span class="font-bold text-emerald-700">Rp {{ number_format($r['sudah_bayar'], 0, ',', '.') }}</span>
                                </div>
                                <div>
                                    <span class="block text-[10px] text-rose-500">Sisa</span>
                                    <span class="font-bold {{ $r['sisa'] > 0 ? 'text-rose-600' : 'text-slate-400' }}">
                                        Rp {{ number_format($r['sisa'], 0, ',', '.') }}
                                    </span>
                                </div>
                            </div>
                        </div>
                    @endforeach
                </div>
            </div>
        @endforeach
    @endif
</div>
@endsection