@extends('layouts.portal')
@section('title', 'Aset & Saldo Deposit Saya')

@section('content')
@php $asetAktif = $aset->where('status', '!=', 'batal'); @endphp
<div class="card mb-3 border-0 shadow-sm text-white" style="background: linear-gradient(135deg, #14532d, #2f8f5b)">
    <div class="card-body">
        <div class="d-flex justify-content-between align-items-start gap-2">
            <div class="min-w-0">
                <div class="small text-white-50">Pemilik</div>
                <div class="fw-semibold fs-5 text-truncate">{{ $pembeli->nama }}</div>
                <div class="small text-white-50">NIK {{ $pembeli->nik }}</div>
            </div>
            <div class="text-center rounded bg-white bg-opacity-10 px-3 py-1 flex-shrink-0">
                <div class="ringkas-angka">{{ $asetAktif->count() }}</div>
                <div class="small text-white-50">unit</div>
            </div>
        </div>
        <div class="row g-2 mt-2 text-center">
            <div class="col-6">
                <div class="rounded bg-white bg-opacity-10 py-2 px-1 h-100">
                    <div class="ringkas-angka text-nowrap">{{ rupiah($asetAktif->sum(fn ($p) => max(0, $p->sisa))) }}</div>
                    <div class="small text-white-50">sisa tagihan</div>
                </div>
            </div>
            <div class="col-6">
                <div class="rounded bg-white bg-opacity-10 py-2 px-1 h-100">
                    <div class="ringkas-angka text-nowrap">{{ rupiah($saldoDeposit) }}</div>
                    <div class="small text-white-50">saldo deposit</div>
                </div>
            </div>
        </div>
        <div class="small text-white-50 mt-2"><i class="bi bi-info-circle"></i> Saldo deposit (uang titipan) dapat diambil atau dipakai membayar angsuran.</div>
    </div>
</div>

<h2 class="h6 text-muted text-uppercase mb-2">Aset Saya</h2>
@forelse($aset as $p)
    @php
        $persen = $p->total > 0 ? min(100, round($p->terbayar / $p->total * 100)) : 0;
        $telat = $p->jadwal->where('status', 'terlambat')->count();
        $berikut = $p->jadwal->first(fn ($j) => in_array($j->status, ['belum', 'sebagian', 'terlambat']));
    @endphp
    <div class="card mb-3 shadow-sm border-0 {{ $p->status === 'batal' ? 'opacity-75' : '' }}">
        <div class="card-body">
            <div class="d-flex justify-content-between align-items-start gap-2">
                <div class="min-w-0">
                    <div class="fw-semibold fs-6">{{ $p->unit->perumahan->nama }}</div>
                    <div class="fw-semibold">{{ $p->unit->label }}</div>
                </div>
                <div class="text-end flex-shrink-0">
                    <span class="badge text-bg-{{ $p->badge }}">{{ \App\Models\Penjualan::STATUS[$p->status] }}</span>
                    @if($telat)<br><span class="badge text-bg-danger mt-1">{{ $telat }} terlambat</span>@endif
                </div>
            </div>
            <div class="small text-muted mt-1">{{ $p->unit->tipe }} · LT {{ $p->unit->luas_tanah }} m² / LB {{ $p->unit->luas_bangunan }} m² · {{ $p->unit->perumahan->kota }}</div>
            <div class="small text-muted">No. {{ $p->kode }} · {{ \App\Models\Penjualan::METODE[$p->metode] }} · {{ tgl($p->tanggal) }}</div>
            @if($p->status !== 'batal')
                <div class="d-flex justify-content-between small mt-3 mb-1"><span class="text-muted">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="row small mt-2 g-2">
                    <div class="col-6 col-md-3"><span class="text-muted">Harga</span><br><strong>{{ rupiah($p->total) }}</strong></div>
                    <div class="col-6 col-md-3"><span class="text-muted">Terbayar</span><br><strong class="text-success">{{ rupiah($p->terbayar) }}</strong></div>
                    <div class="col-6 col-md-3"><span class="text-muted">Sisa</span><br><strong class="text-danger">{{ rupiah(max(0, $p->sisa)) }}</strong></div>
                    <div class="col-6 col-md-3"><span class="text-muted">Saldo Deposit</span><br><strong class="text-info-emphasis">{{ rupiah($p->saldo_deposit) }}</strong></div>
                </div>
                @if($berikut)
                    <div class="small mt-3 p-2 rounded {{ $berikut->status === 'terlambat' ? 'bg-danger-subtle text-danger-emphasis' : 'bg-light text-muted' }}">
                        <i class="bi bi-calendar-event"></i> Angsuran ke-{{ $berikut->angsuran_ke }}: <strong>{{ rupiah($berikut->sisa) }}</strong>
                        <span class="text-nowrap">· jatuh tempo {{ tgl($berikut->jatuh_tempo) }}</span>
                    </div>
                @endif
            @else
                <div class="small text-muted mt-2">Transaksi dibatalkan · masih ada saldo deposit {{ rupiah($p->saldo_deposit) }}</div>
            @endif
        </div>
        <div class="card-footer bg-white border-0 pt-0 pb-3">
            <a href="{{ route('portal.aset', $p) }}" class="btn btn-outline-success w-100 w-md-auto"><i class="bi bi-eye"></i> Detail &amp; Riwayat Pembayaran</a>
        </div>
    </div>
@empty
    <div class="alert alert-light border">Belum ada aset yang tercatat atas nama Anda.</div>
@endforelse

<h2 class="h6 text-muted text-uppercase mb-2 mt-4">Riwayat Deposit Terakhir</h2>
<div class="card shadow-sm border-0">
    {{-- Ponsel: daftar ringkas --}}
    <ul class="list-group list-group-flush daftar-mobile d-md-none">
        @forelse($deposit as $t)
            <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-{{ $t->badge }}">{{ \App\Models\TransaksiLain::JENIS[$t->jenis] }}</span>
                        <div class="small text-muted mt-1">{{ tgl($t->tanggal) }} · {{ $t->penjualan->unit->perumahan->nama }} {{ $t->penjualan->unit->label }}</div>
                    </div>
                    <div class="fw-semibold text-nowrap {{ $t->isKeluar() ? 'text-danger' : 'text-primary' }}">{{ $t->isKeluar() ? '−' : '+' }}{{ rupiah($t->jumlah) }}</div>
                </div>
                @if($t->keterangan)<div class="small mt-1">{{ $t->keterangan }}</div>@endif
                <a href="{{ $t->url_verifikasi }}" class="small font-monospace"><i class="bi bi-patch-check"></i> {{ $t->kode_verifikasi_format }}</a>
            </li>
        @empty
            <li class="list-group-item text-center text-muted py-3">Belum ada transaksi deposit.</li>
        @endforelse
    </ul>
    {{-- Tablet / desktop: tabel --}}
    <div class="table-responsive d-none d-md-block">
        <table class="table table-sm mb-0 align-middle small">
            <thead class="table-light"><tr><th class="ps-3">Tanggal</th><th>Jenis</th><th>Unit</th><th>Keterangan</th><th class="text-end">Jumlah</th><th>Kode Verifikasi</th></tr></thead>
            <tbody>
            @forelse($deposit as $t)
                <tr>
                    <td class="ps-3 text-nowrap">{{ tgl($t->tanggal) }}</td>
                    <td><span class="badge text-bg-{{ $t->badge }}">{{ \App\Models\TransaksiLain::JENIS[$t->jenis] }}</span></td>
                    <td>{{ $t->penjualan->unit->perumahan->nama }} {{ $t->penjualan->unit->label }}</td>
                    <td>{{ $t->keterangan }}</td>
                    <td class="text-end text-nowrap {{ $t->isKeluar() ? 'text-danger' : 'text-primary' }}">{{ $t->isKeluar() ? '−' : '+' }}{{ rupiah($t->jumlah) }}</td>
                    <td><a href="{{ $t->url_verifikasi }}" class="font-monospace text-nowrap">{{ $t->kode_verifikasi_format }}</a></td>
                </tr>
            @empty
                <tr><td colspan="6" class="text-center text-muted py-3">Belum ada transaksi deposit.</td></tr>
            @endforelse
            </tbody>
        </table>
    </div>
</div>
@endsection