@extends('layouts.portal')
@section('title', $pj->unit->perumahan->nama.' — '.$pj->unit->label)

@section('content')
<a href="{{ route('portal.dashboard') }}" class="btn btn-sm btn-light border mb-3"><i class="bi bi-arrow-left"></i> Kembali</a>

@php $persen = $pj->total > 0 ? min(100, round($pj->terbayar / $pj->total * 100)) : 0; @endphp
<div class="card mb-3 border-0 shadow-sm">
    <div class="card-body">
        <div class="d-flex justify-content-between small mb-1"><span class="text-muted">Terbayar {{ rupiah($pj->terbayar) }}</span><strong>{{ $persen }}%</strong></div>
        <div class="progress" style="height: 10px"><div class="progress-bar bg-success" style="width: {{ $persen }}%"></div></div>
        <div class="d-flex justify-content-between small mt-2">
            <span><span class="text-muted">Sisa</span> <strong class="text-danger">{{ rupiah(max(0, $pj->sisa)) }}</strong></span>
            <span><span class="text-muted">Deposit</span> <strong class="text-info-emphasis">{{ rupiah($pj->saldo_deposit) }}</strong></span>
        </div>
    </div>
</div>

<div class="row g-3 mb-3">
    <div class="col-md-6">
        <div class="card h-100 border-0 shadow-sm">
            <div class="card-header bg-white fw-semibold d-flex justify-content-between">
                <span><i class="bi bi-house-door"></i> Data Aset</span>
                <span class="badge text-bg-{{ $pj->badge }}">{{ \App\Models\Penjualan::STATUS[$pj->status] }}</span>
            </div>
            <table class="table table-sm mb-0 small">
                <tr><th class="ps-3 text-muted fw-normal" style="width: 38%">Perumahan</th><td>{{ $pj->unit->perumahan->nama }}</td></tr>
                <tr><th class="ps-3 text-muted fw-normal">Alamat</th><td>{{ $pj->unit->perumahan->alamat }}, {{ $pj->unit->perumahan->kota }}</td></tr>
                <tr><th class="ps-3 text-muted fw-normal">Unit</th><td>{{ $pj->unit->label }} · {{ $pj->unit->tipe }}</td></tr>
                <tr><th class="ps-3 text-muted fw-normal">Luas</th><td>Tanah {{ $pj->unit->luas_tanah }} m² · Bangunan {{ $pj->unit->luas_bangunan }} m²</td></tr>
                <tr><th class="ps-3 text-muted fw-normal">Kamar</th><td>{{ $pj->unit->kamar_tidur }} KT · {{ $pj->unit->kamar_mandi }} KM</td></tr>
                <tr><th class="ps-3 text-muted fw-normal">No. Transaksi</th><td>{{ $pj->kode }} · {{ tgl($pj->tanggal) }}</td></tr>
                <tr><th class="ps-3 text-muted fw-normal">Kode Verifikasi SPR</th><td><a href="{{ $pj->url_verifikasi }}" class="font-monospace">{{ $pj->kode_verifikasi_format }}</a></td></tr>
            </table>
        </div>
    </div>
    <div class="col-md-6">
        <div class="card h-100 border-0 shadow-sm">
            <div class="card-header bg-white fw-semibold"><i class="bi bi-wallet2"></i> Pembayaran</div>
            <table class="table table-sm mb-0 small">
                <tr><th class="ps-3 text-muted fw-normal" style="width: 38%">Metode</th><td>{{ \App\Models\Penjualan::METODE[$pj->metode] }}@if($pj->bank_kpr) — {{ $pj->bank_kpr }}@endif</td></tr>
                <tr><th class="ps-3 text-muted fw-normal">Harga</th><td class="fw-semibold">{{ rupiah($pj->total) }}</td></tr>
                @if($pj->isKredit())
                    <tr><th class="ps-3 text-muted fw-normal">DP</th><td>{{ rupiah($pj->uang_muka) }}</td></tr>
                    <tr><th class="ps-3 text-muted fw-normal">Angsuran</th><td>{{ rupiah($pj->angsuran_bulanan) }} × {{ $pj->tenor_bulan }} bulan</td></tr>
                @endif
                <tr><th class="ps-3 text-muted fw-normal">Terbayar</th><td class="text-success fw-semibold">{{ rupiah($pj->terbayar) }}</td></tr>
                <tr><th class="ps-3 text-muted fw-normal">Sisa Tagihan</th><td class="text-danger fw-semibold">{{ rupiah(max(0, $pj->sisa)) }}</td></tr>
                <tr><th class="ps-3 text-muted fw-normal">Denda Dibayar</th><td>{{ rupiah($pj->total_denda) }}</td></tr>
                <tr><th class="ps-3 text-muted fw-normal">Saldo Deposit</th><td class="text-info-emphasis fw-semibold">{{ rupiah($pj->saldo_deposit) }}</td></tr>
            </table>
        </div>
    </div>
</div>

@if($pj->isKredit() && $jadwal->isNotEmpty())
    <div class="card mb-3 border-0 shadow-sm">
        <div class="card-header bg-white fw-semibold"><i class="bi bi-calendar2-week"></i> Jadwal Angsuran</div>
        <ul class="list-group list-group-flush daftar-mobile d-md-none overflow-auto" style="max-height: 420px">
            @foreach($jadwal as $j)
                @php [$label, $warna] = \App\Models\JadwalAngsuran::STATUS[$j->status]; @endphp
                <li class="list-group-item d-flex justify-content-between align-items-center gap-2 {{ $j->status === 'terlambat' ? 'bg-danger-subtle' : '' }}">
                    <div>
                        <div class="fw-semibold">Angsuran ke-{{ $j->angsuran_ke }}</div>
                        <div class="small text-muted">Jatuh tempo {{ tgl($j->jatuh_tempo) }}</div>
                    </div>
                    <div class="text-end">
                        <div class="fw-semibold text-nowrap">{{ rupiah($j->jumlah) }}</div>
                        <span class="badge text-bg-{{ $warna }}">{{ $label }}</span>
                        @if($j->terbayar > 0 && $j->terbayar < $j->jumlah)<div class="small text-muted text-nowrap">dibayar {{ rupiah($j->terbayar) }}</div>@endif
                    </div>
                </li>
            @endforeach
        </ul>
        <div class="table-responsive d-none d-md-block" style="max-height: 360px">
            <table class="table table-sm mb-0 small">
                <thead class="table-light"><tr><th class="ps-3">Ke</th><th>Jatuh Tempo</th><th class="text-end">Angsuran</th><th class="text-end">Terbayar</th><th>Status</th></tr></thead>
                <tbody>
                @foreach($jadwal as $j)
                    @php [$label, $warna] = \App\Models\JadwalAngsuran::STATUS[$j->status]; @endphp
                    <tr>
                        <td class="ps-3">{{ $j->angsuran_ke }}</td>
                        <td>{{ tgl($j->jatuh_tempo) }}</td>
                        <td class="text-end">{{ rupiah($j->jumlah) }}</td>
                        <td class="text-end">{{ rupiah($j->terbayar) }}</td>
                        <td><span class="badge text-bg-{{ $warna }}">{{ $label }}</span></td>
                    </tr>
                @endforeach
                </tbody>
            </table>
        </div>
    </div>
@endif

<div class="card border-0 shadow-sm">
    <div class="card-header bg-white fw-semibold"><i class="bi bi-receipt"></i> Riwayat Transaksi</div>
    @php
        $riwayat = $pj->pembayaran->map(fn ($b) => (object) ['tanggal' => $b->tanggal, 'jenis' => \App\Models\Pembayaran::JENIS[$b->jenis], 'warna' => 'success',
            'ket' => $b->keterangan, 'jumlah' => $b->jumlah, 'keluar' => false, 'm' => $b])
            ->concat($pj->transaksiLain->map(fn ($t) => (object) ['tanggal' => $t->tanggal, 'jenis' => \App\Models\TransaksiLain::JENIS[$t->jenis], 'warna' => $t->badge,
            'ket' => $t->keterangan, 'jumlah' => $t->jumlah, 'keluar' => $t->isKeluar(), 'm' => $t]))
            ->concat($pj->biayaUnit->map(fn ($k) => (object) ['tanggal' => $k->tanggal, 'jenis' => $k->uraian_biaya, 'warna' => 'secondary',
            'ket' => $k->keterangan, 'jumlah' => $k->jumlah, 'keluar' => false, 'm' => $k]))
            ->sortByDesc(fn ($r) => $r->tanggal->format('Y-m-d').$r->m->created_at);
    @endphp
    <ul class="list-group list-group-flush daftar-mobile d-md-none">
        @forelse($riwayat as $r)
            <li class="list-group-item">
                <div class="d-flex justify-content-between align-items-start gap-2">
                    <div class="min-w-0">
                        <span class="badge text-bg-{{ $r->warna }}">{{ $r->jenis }}</span>
                        <div class="small text-muted mt-1">{{ tgl($r->tanggal) }}</div>
                    </div>
                    <div class="fw-semibold text-nowrap {{ $r->keluar ? 'text-danger' : '' }}">{{ $r->keluar ? '−' : '' }}{{ rupiah($r->jumlah) }}</div>
                </div>
                @if($r->ket)<div class="small mt-1">{{ $r->ket }}</div>@endif
                <a href="{{ $r->m->url_verifikasi }}" class="small font-monospace"><i class="bi bi-patch-check"></i> {{ $r->m->kode_verifikasi_format }}</a>
            </li>
        @empty
            <li class="list-group-item text-center text-muted py-3">Belum ada transaksi.</li>
        @endforelse
    </ul>
    <div class="table-responsive d-none d-md-block">
        <table class="table table-sm mb-0 small align-middle">
            <thead class="table-light"><tr><th class="ps-3">Tanggal</th><th>Jenis</th><th>Keterangan</th><th class="text-end">Jumlah</th><th>Kode Verifikasi</th></tr></thead>
            <tbody>
            @forelse($riwayat as $r)
                <tr>
                    <td class="ps-3 text-nowrap">{{ tgl($r->tanggal) }}</td>
                    <td><span class="badge text-bg-{{ $r->warna }}">{{ $r->jenis }}</span></td>
                    <td>{{ $r->ket }}</td>
                    <td class="text-end text-nowrap">{{ $r->keluar ? '−' : '' }}{{ rupiah($r->jumlah) }}</td>
                    <td><a href="{{ $r->m->url_verifikasi }}" class="font-monospace text-nowrap" title="Cek keaslian bukti">{{ $r->m->kode_verifikasi_format }}</a></td>
                </tr>
            @empty
                <tr><td colspan="5" class="text-center text-muted py-3">Belum ada transaksi.</td></tr>
            @endforelse
            </tbody>
        </table>
    </div>
    <div class="card-footer bg-white small text-muted"><i class="bi bi-patch-check"></i> Ketuk / klik kode verifikasi untuk mencocokkan dengan bukti yang Anda pegang.</div>
</div>
@endsection