@extends('layouts.app')
@section('title', 'Dashboard')

@section('content')
@php $bolehLaporan = auth()->user()->peran('admin', 'kasir'); @endphp
<div class="row g-3 mb-4">
    @foreach([
        ['Total Unit', $stats['total_unit'], 'bi-house', 'primary'],
        ['Unit Tersedia', $stats['tersedia'], 'bi-house-check', 'success'],
        ['Unit Dipesan', $stats['dipesan'], 'bi-hourglass-split', 'warning'],
        ['Unit Terjual', $stats['terjual'], 'bi-house-lock', 'secondary'],
    ] as [$label, $value, $icon, $color])
        <div class="col-6 col-xl-3">
            <div class="card h-100"><div class="card-body d-flex align-items-center">
                <div class="stat-icon bg-{{ $color }}-subtle text-{{ $color }} me-3"><i class="bi {{ $icon }}"></i></div>
                <div><div class="text-muted small">{{ $label }}</div><div class="fs-4 fw-semibold">{{ $value }}</div></div>
            </div></div>
        </div>
    @endforeach
</div>

<div class="row g-3 mb-4">
    @foreach([
        ['Nilai Penjualan', $stats['nilai_penjualan'], 'bi-graph-up-arrow', 'primary', null, null],
        ['Pemasukan Rumah', $stats['pemasukan'], 'bi-wallet2', 'success', null, null],
        ['Piutang (Sisa Tagihan)', $stats['piutang'], 'bi-receipt', 'danger', null, null],
        ['Pendapatan Denda', $stats['denda'], 'bi-exclamation-octagon', 'warning',
            'Bulan ini '.rupiah($stats['denda_bulan_ini']), $bolehLaporan ? route('laporan.index', ['jenis' => 'denda_deposit']) : null],
        ['Saldo Deposit Titipan', $stats['deposit_saldo'], 'bi-safe', 'info',
            $stats['deposit_pemilik'].' pembeli · wajib dikembalikan/dipakai', $bolehLaporan ? route('laporan.deposit') : null],
    ] as [$label, $value, $icon, $color, $catatan, $link])
        <div class="col-md-6 col-xl">
            <div class="card h-100 {{ $link ? 'position-relative' : '' }}"><div class="card-body d-flex align-items-center">
                <div class="stat-icon bg-{{ $color }}-subtle text-{{ $color }} me-3"><i class="bi {{ $icon }}"></i></div>
                <div>
                    <div class="text-muted small">{{ $label }}</div>
                    <div class="fs-5 fw-semibold">{{ rupiah($value) }}</div>
                    @if($catatan)<div class="small text-muted">{{ $catatan }}</div>@endif
                </div>
                @if($link)<a href="{{ $link }}" class="stretched-link" aria-label="{{ $label }}"></a>@endif
            </div></div>
        </div>
    @endforeach
</div>

@if($menunggak->isNotEmpty())
<div class="card mb-4 border-start border-danger border-4">
    <div class="card-header bg-white fw-semibold text-danger">
        <i class="bi bi-exclamation-triangle"></i> Angsuran Kredit Menunggak
        <span class="badge text-bg-danger">{{ $menunggak->count() }}</span>
        <span class="float-end">{{ rupiah($menunggak->sum('nominal')) }}
            @if(auth()->user()->peran('admin', 'kasir'))<a href="{{ route('jatuh-tempo.index') }}" class="ms-2 small fw-normal">Lihat semua &amp; jatuh tempo →</a>@endif</span>
    </div>
    <div class="table-responsive">
        <table class="table table-sm mb-0">
            <thead class="table-light"><tr><th class="ps-3">Pembeli</th><th>Unit</th><th>Telat Sejak</th><th class="text-center">Jumlah</th><th class="text-end pe-3">Tunggakan</th></tr></thead>
            <tbody>
            @foreach($menunggak as $m)
                <tr>
                    <td class="ps-3"><a href="{{ route('penjualan.show', $m->penjualan) }}">{{ $m->penjualan->pembeli->nama }}</a><br><small class="text-muted">{{ $m->penjualan->pembeli->telepon }}</small></td>
                    <td>{{ $m->penjualan->unit->perumahan->nama }}<br><small class="text-muted">{{ $m->penjualan->unit->label }}</small></td>
                    <td>{{ tgl($m->sejak) }}<br><small class="text-danger">{{ (int) $m->sejak->diffInDays(now()) }} hari</small></td>
                    <td class="text-center">{{ $m->jumlah }}× angsuran</td>
                    <td class="text-end pe-3 fw-semibold text-danger">{{ rupiah($m->nominal) }}</td>
                </tr>
            @endforeach
            </tbody>
        </table>
    </div>
</div>
@endif

<div class="row g-3">
    <div class="col-xl-7">
        <div class="card h-100">
            <div class="card-header bg-white fw-semibold">Pemasukan 12 Bulan Terakhir</div>
            <div class="card-body"><canvas id="chartPemasukan" height="130"></canvas></div>
        </div>
    </div>
    <div class="col-xl-5">
        <div class="card h-100">
            <div class="card-header bg-white fw-semibold d-flex justify-content-between">
                Transaksi Terbaru <a href="{{ route('laporan.penjualan') }}" class="small">Lihat semua</a>
            </div>
            <ul class="list-group list-group-flush">
                @forelse($terbaru as $p)
                    <a href="{{ route('penjualan.show', $p) }}" class="list-group-item list-group-item-action">
                        <div class="d-flex justify-content-between">
                            <strong>{{ $p->pembeli->nama }}</strong>
                            <span class="badge text-bg-{{ $p->badge }}">{{ \App\Models\Penjualan::STATUS[$p->status] }}</span>
                        </div>
                        <small class="text-muted">{{ $p->unit->perumahan->nama }} · {{ $p->unit->label }} · {{ rupiah($p->total) }}</small>
                    </a>
                @empty
                    <li class="list-group-item text-muted text-center py-4">Belum ada transaksi.</li>
                @endforelse
            </ul>
        </div>
    </div>
</div>
@endsection

@push('scripts')
<script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.1/dist/chart.umd.min.js"></script>
<script>
new Chart(document.getElementById('chartPemasukan'), {
    type: 'bar',
    data: {
        labels: @json($chart['labels']),
        datasets: [
            { label: 'Pembayaran Rumah', data: @json($chart['data']), backgroundColor: '#2f6fb3', borderRadius: 4, stack: 'p' },
            { label: 'Denda', data: @json($chart['denda']), backgroundColor: '#e8a33d', borderRadius: 4, stack: 'p' }
        ]
    },
    options: {
        plugins: { legend: { display: true, position: 'bottom' },
            tooltip: { callbacks: { label: c => c.dataset.label + ': Rp ' + c.raw.toLocaleString('id-ID') } } },
        scales: { x: { stacked: true }, y: { stacked: true, ticks: { callback: v => 'Rp ' + (v / 1e6).toLocaleString('id-ID') + ' jt' } } }
    }
});
</script>
@endpush