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

@section('content')
@php
    $jt = fn ($n) => (($n < 0) ? '−' : '').(abs($n) >= 1e9 ? str_replace('.', ',', round(abs($n) / 1e9, 2)).' M'
        : (abs($n) >= 1e6 ? str_replace('.', ',', round(abs($n) / 1e6, 1)).' jt' : number_format(abs($n), 0, ',', '.')));
    // Perubahan vs periode lalu; $naikBaik=false untuk beban (naik = buruk)
    $delta = function ($ini, $lalu, bool $naikBaik = true) {
        if ($lalu == 0) {
            return $ini == 0 ? ['netral', 'sama dengan periode lalu'] : ['netral', 'periode lalu nihil'];
        }
        $p = ($ini - $lalu) / abs($lalu) * 100;
        if (abs($p) < 0.5) {
            return ['netral', '≈ periode lalu'];
        }
        $baik = ($p > 0) === $naikBaik;

        return [$baik ? 'naik' : 'turun', ($p > 0 ? '▲ ' : '▼ ').number_format(abs($p), 0, ',', '.').'% vs periode lalu'];
    };
    $namaBulan = collect(range(1, 12))->mapWithKeys(fn ($b) => [$b => \Illuminate\Support\Carbon::create(2000, $b)->translatedFormat('F')]);
@endphp

{{-- Filter (tidak ikut dicetak) --}}
<form class="card card-body py-2 mb-3 d-print-none">
    <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($mode !== 'rentang' && $tahun === $t)>{{ $t }}</option>@endforeach
            </select>
        </div>
        <div class="col-6 col-md-2">
            <label class="form-label small mb-1">Bulan</label>
            <select name="bulan" class="form-select" onchange="this.form.dari.value=''; this.form.sampai.value=''; this.form.submit()">
                <option value="">Setahun penuh</option>
                @foreach($namaBulan as $b => $nama)<option value="{{ $b }}" @selected($mode === 'bulanan' && $bulanDipilih === $b)>{{ $nama }}</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="{{ $mode === '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="{{ $mode === 'rentang' ? $sampai->toDateString() : '' }}" class="form-control">
        </div>
        <div class="col-md-4 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">Pembanding: {{ $periodeLalu }}. Tips cetak: kertas A4, aktifkan <em>Background graphics</em>, atau pilih <em>Save as PDF</em>.
        Rincian lengkap: <a href="{{ route('laporan.laba-rugi') }}">Pendapatan &amp; Beban</a> · <a href="{{ route('laporan.neraca') }}">Neraca</a>.</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">Infografis Keuangan · {{ $periode }} · pembanding {{ $periodeLalu }}</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">
        @foreach([
            ['Pendapatan', $kpi->pendapatan, $delta($kpi->pendapatan, $kpi->pendapatan_lalu), 'bi-graph-up-arrow'],
            ['Beban', $kpi->beban, $delta($kpi->beban, $kpi->beban_lalu, false), 'bi-receipt'],
            [$kpi->laba >= 0 ? 'Laba Bersih' : 'Rugi Bersih', $kpi->laba, $kpi->margin !== null ? ['netral', 'margin '.number_format($kpi->margin, 0, ',', '.').'% · '.$delta($kpi->laba, $kpi->laba_lalu)[1]] : $delta($kpi->laba, $kpi->laba_lalu), 'bi-trophy'],
            ['Saldo Kas & Bank', $kpi->saldo_akhir, ['netral', 'per '.tgl($per).' · awal Rp '.$jt($kpi->saldo_awal)], 'bi-safe'],
            ['Arus Kas Bersih', $kpi->kas_masuk - $kpi->kas_keluar, ['netral', 'masuk Rp '.$jt($kpi->kas_masuk).' · keluar Rp '.$jt($kpi->kas_keluar)], 'bi-arrow-left-right'],
            ['Piutang Penjualan', $kpi->piutang, ['netral', $kpi->piutang_transaksi.' transaksi berjalan (di luar neraca)'], 'bi-hourglass-split'],
        ] as [$label, $nilai, [$arah, $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">Rp {{ $jt($nilai) }}</div>
                    <div class="delta {{ $arah }}">{{ $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 Keuangan</div>
        <ul class="small mb-0 ps-3">@foreach($sorotan as $s)<li>{{ $s }}</li>@endforeach</ul>
    </div>

    <div class="row g-3 mb-3">
        <div class="col-md-7 blok">
            <div class="tile h-100">
                <div class="judul">Pendapatan vs Beban per Bulan</div>
                <div class="grafik" style="height: 200px"><canvas id="gPendBeban" role="img" aria-label="Grafik batang pendapatan dan beban per bulan"></canvas></div>
            </div>
        </div>
        <div class="col-md-5 blok">
            <div class="tile h-100">
                <div class="judul">Laba / Rugi per Bulan</div>
                <div class="grafik" style="height: 200px"><canvas id="gLaba" role="img" aria-label="Grafik laba rugi per bulan; biru laba, merah rugi"></canvas></div>
            </div>
        </div>
    </div>

    <div class="row g-3 mb-3">
        <div class="col-md-7 blok">
            <div class="tile h-100">
                <div class="judul">Saldo Akhir Kas &amp; Bank per Bulan</div>
                <div class="grafik" style="height: 200px"><canvas id="gSaldo" role="img" aria-label="Grafik garis saldo kas tunai dan bank per akhir bulan"></canvas></div>
            </div>
        </div>
        <div class="col-md-5 blok">
            <div class="tile h-100">
                <div class="judul d-flex justify-content-between">Posisi Neraca <span class="teks-3 fw-normal">per {{ tgl($per) }}</span></div>
                @php
                    $n = $neraca;
                    $aset = $n['aset_lancar']->concat($n['aset_lain'])->filter(fn ($a) => abs($a->jumlah) >= 0.5);
                    $pasiva = $n['kewajiban']->map(fn ($a) => (object) ['nama' => $a->nama, 'jumlah' => $a->jumlah, 'k' => 'Kewajiban'])
                        ->concat($n['ekuitas']->map(fn ($a) => (object) ['nama' => $a->nama, 'jumlah' => $a->jumlah, 'k' => 'Ekuitas']))->filter(fn ($a) => abs($a->jumlah) >= 0.5);
                    $porsi = fn ($x, $tot) => $tot > 0 ? max(0, $x) / $tot * 100 : 0;
                @endphp
                <table class="table table-sm mb-2 small angka tabel-batang">
                    <tr><td class="fw-semibold" colspan="2">Aset</td><td class="text-end fw-semibold text-nowrap">Rp {{ $jt($n['total_aset']) }}</td></tr>
                    @foreach($aset as $a)
                        <tr><td class="ps-2">{{ $a->nama }}</td><td style="width: 30%"><div class="batang"><span style="width: {{ $porsi($a->jumlah, $n['total_aset']) }}%"></span></div></td><td class="text-end">{{ $jt($a->jumlah) }}</td></tr>
                    @endforeach
                    <tr><td class="fw-semibold pt-2" colspan="2">Kewajiban + Ekuitas</td><td class="text-end fw-semibold pt-2 text-nowrap">Rp {{ $jt($n['total_pasiva']) }}</td></tr>
                    @foreach($pasiva as $a)
                        <tr><td class="ps-2">{{ $a->nama }} <span class="teks-3">· {{ $a->k }}</span></td><td><div class="batang beban"><span style="width: {{ $porsi($a->jumlah, $n['total_pasiva']) }}%"></span></div></td><td class="text-end">{{ $jt($a->jumlah) }}</td></tr>
                    @endforeach
                </table>
                <div class="small {{ $n['seimbang'] ? 'teks-2' : 'delta turun' }}">
                    <i class="bi {{ $n['seimbang'] ? 'bi-check2-circle' : 'bi-exclamation-triangle' }}"></i>
                    {{ $n['seimbang'] ? 'Neraca seimbang' : 'Neraca tidak seimbang (selisih Rp '.$jt($n['total_aset'] - $n['total_pasiva']).')' }}
                </div>
            </div>
        </div>
    </div>

    <div class="row g-3 mb-3 blok">
        @foreach([['Komposisi Pendapatan', $komposisiPendapatan, ''], ['Komposisi Beban', $komposisiBeban, 'beban']] as [$judul, $daftar, $kelas])
            <div class="col-md-6">
                <div class="tile h-100">
                    <div class="judul">{{ $judul }}</div>
                    <table class="table table-sm mb-0 small tabel-batang angka">
                        @forelse($daftar as $x)
                            <tr>
                                <td style="width: 38%">{{ $x->nama }}</td>
                                <td><div class="batang {{ $kelas }}"><span style="width: {{ $x->persen }}%"></span></div></td>
                                <td class="text-end text-nowrap" style="width: 28%"><strong>{{ $jt($x->jumlah) }}</strong> · {{ number_format($x->persen, 0, ',', '.') }}%</td>
                            </tr>
                        @empty
                            <tr><td class="teks-3">Tidak ada transaksi pada periode ini.</td></tr>
                        @endforelse
                    </table>
                </div>
            </div>
        @endforeach
    </div>

    {{-- Tabel data bulanan (tampilan tabel untuk grafik) --}}
    <div class="tile blok">
        <div class="judul">Ringkasan per Bulan</div>
        <table class="table table-sm mb-0 small angka">
            <thead><tr><th>Bulan</th><th class="text-end">Pendapatan</th><th class="text-end">Beban</th><th class="text-end">Laba / Rugi</th>
                <th class="text-end">Kas Masuk</th><th class="text-end">Kas Keluar</th><th class="text-end">Saldo Tunai</th><th class="text-end">Saldo Bank</th></tr></thead>
            <tbody>
            @foreach($bulanPanjang as $i => $b)
                <tr><td>{{ $b }}</td>
                    @foreach(['pendapatan', 'beban', 'laba', 'masuk', 'keluar', 'tunai', 'bank'] as $k)
                        <td class="text-end {{ $k === 'laba' && $seri['laba'][$i] < 0 ? 'delta turun' : '' }}">{{ $seri[$k][$i] ? $jt($seri[$k][$i]) : '-' }}</td>
                    @endforeach
                </tr>
            @endforeach
            </tbody>
            <tfoot><tr class="fw-semibold"><td>Total</td>
                @foreach(['pendapatan', 'beban', 'laba', 'masuk', 'keluar'] as $k)<td class="text-end">{{ $jt($seri[$k]->sum()) }}</td>@endforeach
                <td class="text-end">{{ $jt($seri['tunai']->filter(fn ($v) => $v !== null)->last() ?? 0) }}</td><td class="text-end">{{ $jt($seri['bank']->filter(fn ($v) => $v !== null)->last() ?? 0) }}</td></tr></tfoot>
        </table>
    </div>

    <div class="teks-3 text-center mt-3" style="font-size: .7rem">
        {{ perusahaan() }} · Infografis Keuangan {{ $periode }} · Basis kas: pendapatan & beban dicatat saat uang diterima / dikeluarkan.
        Deposit titipan pembeli adalah kewajiban, bukan pendapatan. Piutang penjualan ditampilkan sebagai informasi di luar neraca.
    </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'), pos: css('--div-pos'), neg: css('--div-neg'), surface: css('--surface-1'),
                grid: css('--grid'), axis: css('--axis'), muted: css('--text-muted'), ink: css('--text-primary'), ink2: css('--text-secondary') };
    const rp = v => (v < 0 ? '−' : '') + 'Rp ' + Math.abs(Math.round(v)).toLocaleString('id-ID');
    const singkat = v => { const a = Math.abs(v), s = v < 0 ? '−' : '';
        return s + (a >= 1e9 ? (a / 1e9).toLocaleString('id-ID', { maximumFractionDigits: 1 }) + ' M'
            : a >= 1e6 ? (a / 1e6).toLocaleString('id-ID', { maximumFractionDigits: 1 }) + ' jt' : a.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);
    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 labels = @json($bulan);
    const seri = @json($seri);
    const batang = { borderRadius: 4, borderSkipped: 'start', maxBarThickness: 18 };
    const sumbuY = { beginAtZero: true, grid: { color: c.grid }, border: { display: false }, ticks: { callback: v => singkat(v), maxTicksLimit: 5 } };
    const sumbuX = { grid: { display: false }, border: { color: c.axis } };
    const grafik = [];

    // Pendapatan vs beban: batang berdampingan, celah 2px antarbatang
    grafik.push(new Chart(document.getElementById('gPendBeban'), {
        type: 'bar',
        data: { labels, datasets: [
            { label: 'Pendapatan', data: seri.pendapatan, backgroundColor: c.s1, ...batang },
            { label: 'Beban', data: seri.beban, backgroundColor: c.s2, ...batang },
        ] },
        options: { maintainAspectRatio: false, interaction: { mode: 'index', intersect: false },
            datasets: { bar: { categoryPercentage: 0.7, barPercentage: 0.9 } },
            plugins: { legend: { position: 'bottom', align: 'start' },
                tooltip: { callbacks: { label: x => ' ' + x.dataset.label + ': ' + rp(x.raw),
                    footer: xs => 'Laba/rugi: ' + rp((xs[0]?.raw ?? 0) - (xs[1]?.raw ?? 0)) } } },
            scales: { x: sumbuX, y: sumbuY } },
    }));

    // Laba/rugi: divergen dari nol (biru laba, merah rugi), satu sumbu
    grafik.push(new Chart(document.getElementById('gLaba'), {
        type: 'bar',
        data: { labels, datasets: [{ label: 'Laba / rugi', data: seri.laba, ...batang, borderSkipped: 'start',
            backgroundColor: seri.laba.map(v => v < 0 ? c.neg : c.pos) }] },
        options: { maintainAspectRatio: false, plugins: { legend: { display: false },
            tooltip: { callbacks: { label: x => ' ' + (x.raw < 0 ? 'Rugi ' : 'Laba ') + rp(Math.abs(x.raw)) } } },
            scales: { x: sumbuX, y: { ...sumbuY, beginAtZero: true, grid: { color: ctx => ctx.tick.value === 0 ? c.axis : c.grid } } } },
    }));

    // Saldo akhir kas tunai & bank: garis 2px, penanda 8px
    grafik.push(new Chart(document.getElementById('gSaldo'), {
        type: 'line',
        data: { labels, datasets: [
            { label: 'Bank (transfer)', data: seri.bank, borderColor: c.s1, backgroundColor: c.s1 },
            { label: 'Kas tunai', data: seri.tunai, borderColor: c.s2, backgroundColor: c.s2 },
        ].map(d => ({ ...d, borderWidth: 2, pointRadius: labels.length > 12 ? 0 : 4, pointHoverRadius: 6, pointBorderColor: c.surface, pointBorderWidth: 2, tension: 0 })) },
        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), 0)) } } },
            scales: { x: sumbuX, y: { ...sumbuY, beginAtZero: false } } },
    }));

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