@php
    use App\Helpers\NumberHelper;

    $summary = $data['summary'];
    $grafik = $data['grafik'];
@endphp

<p class="text-faint" style="margin-bottom: 18px; font-size: 13.5px;">
    Selamat datang, <strong style="color: var(--color-ink);">{{ auth()->user()->name }}</strong>. Berikut gambaran umum retribusi sampah.
</p>

<div class="stat-grid">
    <x-stat-card label="Tagihan Bulan Ini" value="{{ number_format($summary['tagihan_bulan_ini'], 0, ',', '.') }}" accent="primary" foot="tagihan diterbitkan" />
    <x-stat-card label="Tagihan Lunas" value="{{ number_format($summary['tagihan_lunas'], 0, ',', '.') }}" accent="success" foot="dari {{ number_format($summary['tagihan_belum_bayar'] + $summary['tagihan_lunas'], 0, ',', '.') }} tagihan aktif" />
    <x-stat-card label="Pendapatan Bulan Ini" value="{{ NumberHelper::formatRupiah($summary['pendapatan_bulan_ini']) }}" accent="info" foot="{{ NumberHelper::formatRupiah($summary['pendapatan_tahun_ini']) }} sepanjang tahun ini" />
    <x-stat-card label="Total Tunggakan" value="{{ NumberHelper::formatRupiah($summary['total_tunggakan']) }}" accent="danger" foot="{{ number_format($summary['pelanggan_menunggak'], 0, ',', '.') }} pelanggan menunggak" foot-trend="down" />
</div>

<div class="panel-grid panel-grid--2">
    <div class="panel">
        <div class="panel__head">
            <div>
                <h3>Grafik Pendapatan</h3>
                <p class="panel__head-sub">Total pembayaran berhasil per bulan, tahun {{ now()->year }}</p>
            </div>
            <a href="{{ route('laporan.pembayaran') }}" class="btn btn--ghost btn--sm">Lihat laporan</a>
        </div>
        <div class="panel__body">
            <x-revenue-chart :data="$grafik['pendapatan']" />
        </div>
    </div>

    <div>
        <div class="panel">
            <div class="panel__head">
                <div>
                    <h3>Sebaran per Kecamatan</h3>
                </div>
                <a href="{{ route('laporan.rekap-wilayah') }}" class="btn btn--ghost btn--sm">Rekap</a>
            </div>
            <div class="panel__body">
                <x-bar-list :items="$grafik['wilayah']['kecamatan']" />
            </div>
        </div>
    </div>
</div>

<div class="panel-grid panel-grid--2">
    <div class="panel">
        <div class="panel__head">
            <div>
                <h3>Sebaran Jenis Pelanggan</h3>
            </div>
            <a href="{{ route('laporan.rekap-jenis-pelanggan') }}" class="btn btn--ghost btn--sm">Rekap</a>
        </div>
        <div class="panel__body">
            <x-bar-list :items="$grafik['pelanggan']" />
        </div>
    </div>

    <div class="panel">
        <div class="panel__head">
            <div>
                <h3>Sebaran per Kelurahan</h3>
            </div>
        </div>
        <div class="panel__body">
            <x-bar-list :items="$grafik['wilayah']['kelurahan']" />
        </div>
    </div>
</div>

<div class="panel-grid">
    <div class="panel">
        <div class="panel__head">
            <div>
                <h3>Ringkasan Tunggakan</h3>
                <p class="panel__head-sub">Kondisi tagihan yang telah melewati jatuh tempo</p>
            </div>
            <a href="{{ route('laporan.tunggakan') }}" class="btn btn--ghost btn--sm">Lihat detail</a>
        </div>
        <div class="panel__body">
            <div class="stat-grid" style="margin-bottom: 0;">
                <x-stat-card label="Tagihan Menunggak" value="{{ number_format($summary['tagihan_menunggak'], 0, ',', '.') }}" accent="danger" />
                <x-stat-card label="Pelanggan Menunggak" value="{{ number_format($summary['pelanggan_menunggak'], 0, ',', '.') }}" accent="accent" />
                <x-stat-card label="Total Nilai Tunggakan" value="{{ NumberHelper::formatRupiah($summary['total_tunggakan']) }}" accent="danger" />
            </div>
        </div>
    </div>
</div>