@extends('layouts.app')
@section('title', 'Laporan Infografis')

@section('content')
@php
    $periode = $rentang ? tgl($dari).' – '.tgl($sampai) : 'Tahun '.$tahun;
    $jt = fn ($n) => $n >= 1e9 ? str_replace('.', ',', round($n / 1e9, 2)).' M' : ($n >= 1e6 ? str_replace('.', ',', round($n / 1e6, 1)).' jt' : number_format($n, 0, ',', '.'));
@endphp

{{-- Filter (tidak ikut dicetak) --}}
<form class="card card-body py-2 mb-3 d-print-none" id="filterInfografis">
    <div class="row g-2 align-items-end">
        <div class="col-6 col-md-2">
            <label class="form-label small mb-1">Tahun</label>
            <select name="tahun" class="form-select" onchange="this.form.dari.value=''; this.form.sampai.value=''; this.form.submit()">
                @foreach($daftarTahun as $t)<option value="{{ $t }}" @selected(! $rentang && $tahun === $t)>{{ $t }}</option>@endforeach
            </select>
        </div>
        <div class="col-6 col-md-2">
            <label class="form-label small mb-1">atau dari</label>
            <input type="date" name="dari" value="{{ $rentang ? $dari->toDateString() : '' }}" class="form-control">
        </div>
        <div class="col-6 col-md-2">
            <label class="form-label small mb-1">sampai</label>
            <input type="date" name="sampai" value="{{ $rentang ? $sampai->toDateString() : '' }}" class="form-control">
        </div>
        <div class="col-6 col-md-3">
            <label class="form-label small mb-1">Perumahan</label>
            <select name="perumahan_id" class="form-select" onchange="this.form.submit()">
                <option value="">Semua perumahan</option>
                @foreach($daftarPerumahan as $id => $nama)<option value="{{ $id }}" @selected($perumahanId == $id)>{{ $nama }}</option>@endforeach
            </select>
        </div>
        <div class="col-md-3 d-flex gap-2">
            <button class="btn btn-outline-secondary flex-grow-1"><i class="bi bi-funnel"></i> Terapkan</button>
            <button type="button" class="btn btn-primary flex-grow-1" onclick="window.print()"><i class="bi bi-printer"></i> Cetak</button>
        </div>
    </div>
    <div class="form-text">Tips: pada dialog cetak pilih ukuran kertas A4 dan aktifkan <em>Background graphics</em> agar warna grafik ikut tercetak, atau pilih <em>Save as PDF</em>.</div>
</form>

<div class="lembar viz-root">
    {{-- Kop --}}
    <div class="d-flex align-items-center gap-3 pb-2 mb-3 kop">
        @if(logo_url())<img src="{{ logo_url() }}" alt="" style="height: 44px">@endif
        <div class="flex-grow-1">
            <div class="fw-bold fs-5 lh-sm">{{ perusahaan() }}</div>
            <div class="teks-2 small">Laporan Infografis · {{ $periode }}{{ $namaPerumahan ? ' · '.$namaPerumahan : ' · Semua perumahan' }}</div>
        </div>
        <div class="text-end small teks-3">Dicetak {{ now()->translatedFormat('d M Y H:i') }}<br>oleh {{ auth()->user()->name }}</div>
    </div>

    {{-- KPI --}}
    <div class="row g-2 mb-3 kpi">
        @foreach([
            ['Unit Terjual', $kpi->unit_terjual.' unit', $kpi->batal ? $kpi->batal.' batal dalam periode' : 'dalam periode', 'bi-house-check'],
            ['Nilai Penjualan', 'Rp '.$jt($kpi->nilai_penjualan), 'harga setelah diskon', 'bi-graph-up-arrow'],
            ['Pendapatan Diterima', 'Rp '.$jt($kpi->pendapatan), 'kas masuk kelompok pendapatan', 'bi-cash-stack'],
            ['Piutang Berjalan', 'Rp '.$jt($kpi->piutang), 'sisa tagihan per hari ini', 'bi-hourglass-split'],
            ['Tunggakan Kredit', 'Rp '.$jt($kpi->tunggakan), $kpi->rumah_menunggak.' rumah menunggak', 'bi-exclamation-triangle'],
            ['Stok Tersedia', $kpi->tersedia.' / '.$kpi->total_unit, 'unit siap dijual', 'bi-houses'],
        ] as [$label, $nilai, $ket, $ikon])
            <div class="col-6 col-md-4 col-xl-2 kpi-col">
                <div class="tile h-100">
                    <div class="teks-2 small"><i class="bi {{ $ikon }} me-1"></i>{{ $label }}</div>
                    <div class="fs-5 fw-bold lh-sm my-1">{{ $nilai }}</div>
                    <div class="teks-3" style="font-size: .72rem">{{ $ket }}</div>
                </div>
            </div>
        @endforeach
    </div>

    {{-- Sorotan --}}
    <div class="tile mb-3">
        <div class="fw-semibold small mb-1"><i class="bi bi-lightbulb me-1"></i>Sorotan Periode</div>
        <ul class="small mb-0 ps-3 sorotan">@foreach($sorotan as $s)<li>{{ $s }}</li>@endforeach</ul>
    </div>

    <div class="row g-3 mb-3">
        <div class="col-md-5 blok">
            <div class="tile h-100">
                <div class="judul">Unit Terjual per Bulan</div>
                <div class="grafik" style="height: 190px"><canvas id="gJual" role="img" aria-label="Grafik batang unit terjual per bulan"></canvas></div>
            </div>
        </div>
        <div class="col-md-7 blok">
            <div class="tile h-100">
                <div class="judul">Pendapatan Diterima per Bulan</div>
                <div class="grafik" style="height: 190px"><canvas id="gPendapatan" role="img" aria-label="Grafik batang bertumpuk pendapatan per bulan menurut sumber"></canvas></div>
            </div>
        </div>
    </div>

    <div class="row g-3 mb-3">
        <div class="col-md-6 blok">
            <div class="tile h-100">
                <div class="judul">Status Unit per Perumahan <span class="teks-3 fw-normal">(per hari ini)</span></div>
                <div class="grafik" style="height: {{ max(120, 40 + $statusUnit->count() * 34) }}px"><canvas id="gStatus" role="img" aria-label="Grafik status unit per perumahan"></canvas></div>
            </div>
        </div>
        <div class="col-md-6 blok">
            <div class="row g-3 h-100">
                <div class="col-12">
                    <div class="tile h-100">
                        <div class="judul">Metode Pembayaran <span class="teks-3 fw-normal">(unit terjual dalam periode)</span></div>
                        <table class="table table-sm mb-0 small tabel-batang">
                            @foreach($metode as $m)
                                @php $pct = $kpi->unit_terjual ? $m->unit / $kpi->unit_terjual * 100 : 0; @endphp
                                <tr>
                                    <td style="width: 28%">{{ $m->label }}</td>
                                    <td><div class="batang"><span style="width: {{ $pct }}%"></span></div></td>
                                    <td class="text-end text-nowrap angka" style="width: 30%"><strong>{{ $m->unit }}</strong> unit · {{ round($pct) }}%<div class="teks-3">Rp {{ $jt($m->nilai) }}</div></td>
                                </tr>
                            @endforeach
                        </table>
                    </div>
                </div>
                <div class="col-12">
                    <div class="tile h-100">
                        <div class="judul">Umur Tunggakan Kredit <span class="teks-3 fw-normal">(per hari ini)</span></div>
                        <div class="grafik" style="height: 120px"><canvas id="gUmur" role="img" aria-label="Grafik tunggakan menurut lama keterlambatan"></canvas></div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    {{-- Tabel data (juga sebagai tampilan tabel untuk grafik) --}}
    <div class="row g-3 blok">
        <div class="col-md-7">
            <div class="tile">
                <div class="judul">Ringkasan per Perumahan</div>
                <table class="table table-sm mb-0 small angka">
                    <thead><tr><th>Perumahan</th><th class="text-end">Unit</th><th class="text-end">Tersedia</th><th class="text-end">Terjual*</th><th class="text-end">Nilai Penjualan*</th><th class="text-end">Pendapatan*</th></tr></thead>
                    <tbody>
                    @forelse($perPerumahan as $p)
                        <tr><td>{{ $p->nama }}</td><td class="text-end">{{ $p->total }}</td><td class="text-end">{{ $p->tersedia }}</td><td class="text-end">{{ $p->terjual_periode }}</td>
                            <td class="text-end" title="{{ rupiah($p->nilai_periode) }}">{{ $p->nilai_periode ? 'Rp '.$jt($p->nilai_periode) : '-' }}</td><td class="text-end" title="{{ rupiah($p->pendapatan_periode) }}">{{ $p->pendapatan_periode ? 'Rp '.$jt($p->pendapatan_periode) : '-' }}</td></tr>
                    @empty
                        <tr><td colspan="6" class="text-center teks-3">Belum ada data.</td></tr>
                    @endforelse
                    </tbody>
                    @if($perPerumahan->count() > 1)
                    <tfoot><tr class="fw-semibold"><td>Total</td><td class="text-end">{{ $perPerumahan->sum('total') }}</td><td class="text-end">{{ $perPerumahan->sum('tersedia') }}</td><td class="text-end">{{ $perPerumahan->sum('terjual_periode') }}</td>
                        <td class="text-end">Rp {{ $jt($perPerumahan->sum('nilai_periode')) }}</td><td class="text-end">Rp {{ $jt($perPerumahan->sum('pendapatan_periode')) }}</td></tr></tfoot>
                    @endif
                </table>
                <div class="teks-3 mt-1" style="font-size: .7rem">* dalam periode {{ $periode }}. Pendapatan lain di luar unit tidak dibagi per perumahan.</div>
            </div>
        </div>
        <div class="col-md-5">
            <div class="tile">
                <div class="judul">Pendapatan per Bulan</div>
                <table class="table table-sm mb-0 small angka">
                    <thead><tr><th>Bulan</th>@foreach($kategori as $label)<th class="text-end">{{ $label }}</th>@endforeach</tr></thead>
                    <tbody>
                    @foreach($bulan as $i => $b)
                        @continue($totalPendBulan[$i] == 0 && $jualBulanan[$i] == 0)
                        <tr><td>{{ $b }}</td>@foreach($kategori as $k => $label)<td class="text-end">{{ $pendBulanan[$k][$i] ? $jt($pendBulanan[$k][$i]) : '-' }}</td>@endforeach</tr>
                    @endforeach
                    </tbody>
                    <tfoot><tr class="fw-semibold"><td>Total</td>@foreach($kategori as $k => $label)<td class="text-end">{{ $pendBulanan[$k]->sum() ? $jt($pendBulanan[$k]->sum()) : '-' }}</td>@endforeach</tr></tfoot>
                </table>
            </div>
        </div>
    </div>

    <div class="teks-3 text-center mt-3" style="font-size: .7rem">
        {{ perusahaan() }} · Laporan Infografis {{ $periode }} · Pendapatan basis kas (pembayaran rumah, denda, biaya unit, pendapatan lain); deposit titipan tidak termasuk pendapatan.
    </div>
</div>
@endsection

@push('styles')
@include('laporan._infografis-gaya')
@endpush

@push('scripts')
<script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.1/dist/chart.umd.min.js"></script>
<script>
(() => {
    if (typeof Chart === 'undefined') return;
    const css = n => getComputedStyle(document.querySelector('.viz-root')).getPropertyValue(n).trim();
    const c = { s1: css('--series-1'), s2: css('--series-2'), s3: css('--series-3'), surface: css('--surface-1'),
                grid: css('--grid'), axis: css('--axis'), muted: css('--text-muted'), ink: css('--text-primary'), ink2: css('--text-secondary') };
    const ord = ['--ord-1', '--ord-2', '--ord-3', '--ord-4'].map(css);
    const rp = v => 'Rp ' + Math.round(v).toLocaleString('id-ID');
    const singkat = v => v >= 1e9 ? (v / 1e9).toLocaleString('id-ID', { maximumFractionDigits: 1 }) + ' M'
        : v >= 1e6 ? (v / 1e6).toLocaleString('id-ID', { maximumFractionDigits: 1 }) + ' jt' : v.toLocaleString('id-ID');

    Chart.defaults.font.family = 'system-ui, -apple-system, "Segoe UI", sans-serif';
    Chart.defaults.font.size = 12;
    Chart.defaults.color = c.muted;
    Chart.defaults.animation = false;
    Chart.defaults.devicePixelRatio = Math.max(2, window.devicePixelRatio || 1);   // tajam saat dicetak
    Chart.defaults.plugins.tooltip.backgroundColor = c.ink;
    Chart.defaults.plugins.legend.labels.usePointStyle = true;
    Chart.defaults.plugins.legend.labels.pointStyle = 'rectRounded';
    Chart.defaults.plugins.legend.labels.color = c.ink2;
    Chart.defaults.plugins.legend.labels.boxHeight = 8;

    const batang = { borderRadius: 4, borderSkipped: 'start', maxBarThickness: 22, borderColor: c.surface, borderWidth: 0 };
    const sumbu = (fmt, stacked = false) => ({
        x: { stacked, grid: { display: false }, border: { color: c.axis } },
        y: { stacked, beginAtZero: true, grid: { color: c.grid }, border: { display: false }, ticks: { callback: fmt, maxTicksLimit: 5 } },
    });
    const grafik = [];

    // Unit terjual per bulan (satu seri: tanpa legenda)
    grafik.push(new Chart(document.getElementById('gJual'), {
        type: 'bar',
        data: { labels: @json($bulan), datasets: [{ label: 'Unit terjual', data: @json($jualBulanan), backgroundColor: c.s1, ...batang }] },
        options: { maintainAspectRatio: false, plugins: { legend: { display: false },
            tooltip: { callbacks: { label: x => ' ' + x.raw + ' unit' } } },
            scales: sumbu(v => Number.isInteger(v) ? v : null) },
    }));

    // Pendapatan per bulan, bertumpuk per sumber (celah 2px antarsegmen)
    const kategori = @json(array_values($kategori));
    const pend = @json($pendBulanan->values());
    grafik.push(new Chart(document.getElementById('gPendapatan'), {
        type: 'bar',
        data: { labels: @json($bulan), datasets: pend.map((d, i) => ({ label: kategori[i], data: d, backgroundColor: [c.s1, c.s2, c.s3][i], ...batang,
            borderRadius: i === pend.length - 1 ? 4 : 0, borderWidth: { top: 2 } })) },   // hanya ujung tumpukan yang membulat
        options: { maintainAspectRatio: false, interaction: { mode: 'index', intersect: false },
            plugins: { legend: { position: 'bottom', align: 'start' },
                tooltip: { callbacks: { label: x => ' ' + x.dataset.label + ': ' + rp(x.raw),
                    footer: xs => 'Total: ' + rp(xs.reduce((a, x) => a + x.raw, 0)) } } },
            scales: sumbu(v => singkat(v), true) },
    }));

    // Status unit per perumahan: batang horizontal bertumpuk
    const status = @json($statusUnit);
    grafik.push(new Chart(document.getElementById('gStatus'), {
        type: 'bar',
        data: { labels: status.map(s => s.nama), datasets: [
            ['Terjual', 'terjual', c.s1], ['Dipesan', 'dipesan', c.s2], ['Tersedia', 'tersedia', c.s3],
        ].map(([label, k, warna], i) => ({ label, data: status.map(s => s[k]), backgroundColor: warna, ...batang,
            borderRadius: i === 2 ? 4 : 0, borderWidth: { right: 2 } })) },
        options: { indexAxis: 'y', maintainAspectRatio: false, interaction: { mode: 'index', intersect: false },
            plugins: { legend: { position: 'bottom', align: 'start' },
                tooltip: { callbacks: { label: x => ' ' + x.dataset.label + ': ' + x.raw + ' unit' } } },
            scales: { x: { stacked: true, beginAtZero: true, grid: { color: c.grid }, border: { display: false }, ticks: { precision: 0 } },
                      y: { stacked: true, grid: { display: false }, border: { color: c.axis }, ticks: { color: c.ink2 } } } },
    }));

    // Umur tunggakan: ramp berurutan satu warna (makin gelap makin lama)
    const umur = @json($umur);
    grafik.push(new Chart(document.getElementById('gUmur'), {
        type: 'bar',
        data: { labels: umur.map(u => u.label), datasets: [{ label: 'Tunggakan', data: umur.map(u => u.tunggakan), backgroundColor: ord, ...batang }] },
        options: { maintainAspectRatio: false, layout: { padding: { top: 16 } }, plugins: { legend: { display: false },
            tooltip: { callbacks: { label: x => ' ' + rp(x.raw) + ' · ' + umur[x.dataIndex].rumah + ' rumah' } } },
            scales: sumbu(v => singkat(v)) },
        plugins: [{ id: 'labelRumah', afterDatasetsDraw(ch) {   // label langsung jumlah rumah di atas batang
            const { ctx } = ch; ctx.save(); ctx.fillStyle = c.ink2; ctx.font = '11px system-ui'; ctx.textAlign = 'center';
            ch.getDatasetMeta(0).data.forEach((b, i) => { if (umur[i].rumah) ctx.fillText(umur[i].rumah + ' rumah', b.x, b.y - 4); });
            ctx.restore();
        } }],
    }));

    // Ukuran grafik mengikuti tata letak cetak
    const ulang = () => grafik.forEach(g => g.resize());
    window.addEventListener('beforeprint', ulang);
    window.addEventListener('afterprint', ulang);
})();
</script>
@endpush