@extends('layouts.app')

@section('page-title', 'Laporan Tunggakan')
@section('page-subtitle', 'Laporan')

@section('content')
    <x-page-header eyebrow="Laporan" title="Laporan Tunggakan" subtitle="Pelanggan dengan tagihan yang telah melewati jatuh tempo.">
        <x-slot:actions>
            <button type="button" class="btn btn--ghost" onclick="window.print()">
                <i data-lucide="printer"></i>
                <span>Cetak Laporan</span>
            </button>
        </x-slot:actions>
    </x-page-header>

    <div class="stat-grid">
        <x-stat-card label="Pelanggan Menunggak" value="{{ number_format($summary['jumlah_pelanggan_menunggak'], 0, ',', '.') }}" accent="danger" />
        <x-stat-card label="Tagihan Menunggak" value="{{ number_format($summary['jumlah_tagihan_menunggak'], 0, ',', '.') }}" accent="accent" />
        <x-stat-card label="Total Denda Berjalan" value="{{ \App\Helpers\NumberHelper::formatRupiah($summary['total_denda']) }}" accent="danger" />
        <x-stat-card label="Total Nilai Tunggakan" value="{{ \App\Helpers\NumberHelper::formatRupiah($summary['total_tunggakan']) }}" accent="danger" />
    </div>

    <div class="panel">
        <div class="panel__head">
            <div>
                <h3>Daftar Pelanggan Menunggak</h3>
                <p class="panel__head-sub">Diurutkan berdasarkan jumlah tagihan tertunggak per pelanggan.</p>
            </div>
        </div>
        <div class="table-wrap">
            <table class="data-table">
                <thead>
                    <tr>
                        <th>No. Pelanggan</th>
                        <th>Nama</th>
                        <th>Wilayah</th>
                        <th>Jenis</th>
                        <th class="col-number">Jumlah Tagihan</th>
                        <th class="col-number">Hari Terlambat</th>
                        <th class="col-number">Denda Berjalan</th>
                        <th class="col-number">Total Tunggakan</th>
                    </tr>
                </thead>
                <tbody>
                    @forelse ($laporan as $item)
                        <tr>
                            <td class="mono">{{ $item->nomor_pelanggan }}</td>
                            <td class="cell-title">{{ $item->nama }}</td>
                            <td>{{ $item->kelurahan->nama ?? '-' }}, {{ $item->kecamatan->nama ?? '-' }}</td>
                            <td>{{ $item->jenisPelanggan->nama ?? '-' }}</td>
                            <td class="col-number mono">{{ $item->jumlah_tagihan }}</td>
                            <td class="col-number mono">{{ $item->jumlah_hari_terlambat }} hari</td>
                            <td class="col-number money">{{ \App\Helpers\NumberHelper::formatRupiah($item->denda_berjalan) }}</td>
                            <td class="col-number money" style="color: var(--color-danger); font-weight:700;">{{ \App\Helpers\NumberHelper::formatRupiah($item->total_tunggakan) }}</td>
                        </tr>
                    @empty
                        <tr><td colspan="8" class="table-empty">Tidak ada pelanggan yang menunggak saat ini.</td></tr>
                    @endforelse
                </tbody>
            </table>
        </div>
        <x-pagination :paginator="$laporan" />
    </div>
@endsection