@extends('layouts.app')

@section('content')
@php
    $month = \Illuminate\Support\Carbon::createFromFormat('Y-m',$monthValue)->locale('id')->translatedFormat('F Y');
    $incomeChange = $previousIncome > 0 ? round((($income - $previousIncome) / $previousIncome) * 100) : null;
    $expenseChange = $previousExpense > 0 ? round((($expense - $previousExpense) / $previousExpense) * 100) : null;
    $balancePrevious = $previousIncome - $previousExpense;
    $balanceCurrent = $income - $expense;
    $balanceChange = $balancePrevious != 0 ? round((($balanceCurrent - $balancePrevious) / abs($balancePrevious)) * 100) : null;
    $cards = [
        ['Total Pemasukan', $income, 'emerald', 'income', $incomeChange],
        ['Total Pengeluaran', $expense, 'rose', 'expense', $expenseChange],
        ['Sisa Saldo', $currentBalance, 'blue', 'balance', $balanceChange],
        ['Pengeluaran Hari Ini', $todayExpense, 'amber', 'today', null],
    ];
@endphp

<div class="mb-5 flex flex-col gap-3 md:flex-row md:items-end md:justify-between">
    <div>
        <h1 class="text-2xl font-extrabold tracking-tight text-slate-900 lg:text-3xl">
            Selamat datang, {{ explode(' ', trim(auth()->user()->name))[0] }}
        </h1>
        <p class="mt-1 text-sm text-slate-500">Ringkasan keuangan kamu di bulan {{ $month }}</p>
    </div>
    <form method="GET" id="dashboardMonthForm" class="relative flex items-center gap-2">
        <label class="text-xs font-bold text-slate-500">Bulan</label>
        <input type="hidden" name="month" id="dashboardMonth" value="{{ $monthValue }}">
        <button type="button" id="dashboardMonthButton" aria-haspopup="dialog" aria-expanded="false"
                class="min-w-[180px] min-h-[48px] rounded-xl border border-slate-200 bg-white px-4 py-2 text-left flex items-center justify-between gap-3 shadow-sm hover:border-emerald-300 focus:border-emerald-400 focus:ring-4 focus:ring-emerald-50">
            <span id="dashboardMonthLabel" class="font-semibold text-slate-800">{{ $month }}</span>
            <span class="text-slate-400 text-lg" aria-hidden="true">▾</span>
        </button>
        <div id="dashboardMonthPicker" class="hidden absolute z-50 right-0 top-full mt-2 w-[320px] rounded-2xl border border-slate-200 bg-white shadow-xl p-4">
            <div class="flex items-center justify-between mb-4">
                <button type="button" id="dashboardPrevYear" class="w-10 h-10 rounded-xl border border-slate-200 text-slate-600 hover:bg-slate-50" aria-label="Tahun sebelumnya">‹</button>
                <div id="dashboardPickerYear" class="font-bold text-lg text-slate-800"></div>
                <button type="button" id="dashboardNextYear" class="w-10 h-10 rounded-xl border border-slate-200 text-slate-600 hover:bg-slate-50" aria-label="Tahun berikutnya">›</button>
            </div>
            <div id="dashboardMonthGrid" class="grid grid-cols-3 gap-2"></div>
        </div>
    </form>
</div>

<div class="mb-5 flex flex-wrap gap-2">
    <button onclick="openTx()" class="rounded-lg bg-emerald-600 px-4 py-2.5 text-sm font-bold text-white hover:bg-emerald-700">＋ Tambah Transaksi</button>
    <a href="{{ route('receipts.scan') }}" class="rounded-lg border border-emerald-200 bg-emerald-50 px-4 py-2.5 text-sm font-bold text-emerald-700 hover:bg-emerald-100">📷 Scan Struk</a>
    <a href="{{ route('budgets.create') }}" class="rounded-lg border border-slate-200 bg-white px-4 py-2.5 text-sm font-bold text-slate-600">Atur Anggaran</a><a href="{{ route('transfers.create') }}" class="rounded-lg border border-slate-200 bg-white px-4 py-2.5 text-sm font-bold text-slate-600">↔ Transfer</a><a href="{{ route('goals.index') }}" class="rounded-lg border border-slate-200 bg-white px-4 py-2.5 text-sm font-bold text-slate-600">🎯 Target</a>
</div>

<div class="grid gap-3 md:grid-cols-2 xl:grid-cols-4">
    @foreach($cards as $card)
        <div class="rounded-xl border border-slate-100 bg-{{ $card[2] }}-50 p-4 soft">
            <div class="flex items-start justify-between">
                <div>
                    <div class="text-xs font-medium text-slate-600">{{ $card[0] }}</div>
                    <div class="mt-1 text-xl font-extrabold text-slate-900">Rp {{ number_format($card[1], 0, ',', '.') }}</div>
                </div>
                <div class="grid h-9 w-9 place-items-center rounded-xl bg-white/70 text-{{ $card[2] }}-600">
                    @if($card[3] === 'income')
                        <svg class="h-5 w-5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M12 3v18M7 8l5-5 5 5M5 21h14"/></svg>
                    @elseif($card[3] === 'expense')
                        <svg class="h-5 w-5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M12 21V3m-5 13 5 5 5-5M5 3h14"/></svg>
                    @elseif($card[3] === 'balance')
                        <svg class="h-5 w-5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="3" y="5" width="18" height="14" rx="2"/><path d="M7 9h10M7 13h4"/></svg>
                    @else
                        <svg class="h-5 w-5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="9"/><path d="M12 7v5l3 2"/></svg>
                    @endif
                </div>
            </div>
            <div class="mt-3 text-[11px]">
                <span class="rounded-full bg-white/80 px-2 py-1 font-bold text-{{ $card[2] }}-600">
                    @if($card[4] !== null)
                        {{ $card[4] > 0 ? '+' : '' }}{{ $card[4] }}%
                    @else
                        hari ini
                    @endif
                </span>
                <span class="ml-1 text-slate-400">{{ $card[4] !== null ? 'dari bulan lalu' : 'aktivitas hari ini' }}</span>
            </div>
        </div>
    @endforeach
</div>

<div class="insight-panel mb-4 mt-6 rounded-2xl border border-emerald-100 bg-gradient-to-r from-emerald-50 to-white p-5 soft"><div class="flex flex-col gap-3 sm:flex-row sm:items-start sm:justify-between"><div><div class="text-xs font-bold uppercase tracking-wider text-emerald-600">💡 Insight Keuangan</div><h2 class="mt-1 font-extrabold text-slate-900">Ringkasan bulan ini</h2><p class="mt-1 max-w-3xl text-sm text-slate-600">{{ $insightText }}</p></div><div class="shrink-0 rounded-xl bg-white px-4 py-3 text-center shadow-sm"><div class="text-[10px] text-slate-400">Saving rate</div><div class="text-lg font-extrabold {{ $savingsRate>=20?'text-emerald-600':($savingsRate>=0?'text-amber-600':'text-rose-600') }}">{{number_format($savingsRate,1,',','.')}}%</div></div></div></div>
<div class="mt-4 rounded-2xl border border-slate-100 bg-white p-5 soft">
    <div class="flex flex-col gap-4 sm:flex-row sm:items-center sm:justify-between">
        <div>
            <h2 class="font-extrabold text-slate-900">Kondisi Keuangan Bulan Ini</h2>
            <p class="mt-1 text-xs text-slate-400">Ringkasan sederhana untuk membantu melihat kesehatan cashflow kamu.</p>
        </div>
        @php $incomeRatio=$income>0?round(($expense/$income)*100,1):0; @endphp
        <div class="rounded-xl {{ $incomeRatio <= 50 ? 'bg-emerald-50 text-emerald-700' : ($incomeRatio <= 80 ? 'bg-amber-50 text-amber-700' : 'bg-rose-50 text-rose-700') }} px-4 py-2 text-sm font-bold">
            {{ $incomeRatio <= 50 ? '✓ Cashflow sehat' : ($incomeRatio <= 80 ? '⚠ Perlu diperhatikan' : '🔴 Pengeluaran tinggi') }}
        </div>
    </div>
    <div class="mt-4 grid gap-4 sm:grid-cols-3">
        <div><div class="text-xs text-slate-400">Pemasukan</div><div class="mt-1 text-lg font-extrabold text-emerald-600">Rp {{ number_format($income,0,',','.') }}</div></div>
        <div><div class="text-xs text-slate-400">Pengeluaran</div><div class="mt-1 text-lg font-extrabold text-rose-500">Rp {{ number_format($expense,0,',','.') }}</div></div>
        <div><div class="text-xs text-slate-400">Rasio Pengeluaran</div><div class="mt-1 text-lg font-extrabold">{{ number_format($incomeRatio,1,',','.') }}%</div></div>
    </div>
</div>

<div class="mb-4 rounded-2xl border bg-white p-5 soft"><div class="mb-4 flex items-center justify-between"><div><h2 class="font-extrabold">Perbandingan Bulan</h2><p class="text-xs text-slate-400">Dibandingkan dengan bulan sebelumnya</p></div><span class="rounded-full bg-slate-50 px-3 py-1 text-xs font-bold text-slate-500">{{\Illuminate\Support\Carbon::createFromFormat('Y-m',$monthValue)->subMonth()->locale('id')->translatedFormat('F Y')}}</span></div><div class="grid gap-4 sm:grid-cols-3"><div><div class="text-xs text-slate-400">Pemasukan</div><div class="mt-1 text-lg font-extrabold">Rp {{number_format($income,0,',','.')}}</div><div class="text-xs {{($incomeChange??0)>=0?'text-emerald-600':'text-rose-600'}}">{{ $incomeChange===null?'Belum ada data':(($incomeChange>0?'+':'').$incomeChange.'%') }}</div></div><div><div class="text-xs text-slate-400">Pengeluaran</div><div class="mt-1 text-lg font-extrabold">Rp {{number_format($expense,0,',','.')}}</div><div class="text-xs {{($expenseChange??0)<=0?'text-emerald-600':'text-rose-600'}}">{{ $expenseChange===null?'Belum ada data':(($expenseChange>0?'+':'').$expenseChange.'%') }}</div></div><div><div class="text-xs text-slate-400">Selisih Cashflow</div><div class="mt-1 text-lg font-extrabold {{($income-$expense)>=0?'text-emerald-600':'text-rose-600'}}">{{($income-$expense)>=0?'+':'-'}} Rp {{number_format(abs($income-$expense),0,',','.')}}</div><div class="text-xs text-slate-400">Bulan ini</div></div></div></div>
<div class="mt-4 grid gap-4 xl:grid-cols-2">
    <div class="rounded-xl border bg-white p-4 soft">
        <div class="mb-3 flex items-center justify-between"><h2 class="font-bold">Pengeluaran per Kategori</h2><span class="text-xs text-slate-400">Bulan ini</span></div>
        <div class="grid items-center gap-4 md:grid-cols-[1fr_1.2fr]">
            <div class="h-48"><canvas id="catChart"></canvas></div>
            <div class="space-y-2 text-xs">
                @forelse($categorySpend as $row)
                    <div class="flex items-center justify-between"><span>{{ $row->category?->name ?? 'Lainnya' }}</span><span class="font-semibold">Rp {{ number_format($row->total, 0, ',', '.') }}</span></div>
                @empty
                    <div class="py-12 text-center text-slate-400">Belum ada pengeluaran.</div>
                @endforelse
            </div>
        </div>
    </div>
    <div class="rounded-xl border bg-white p-4 soft">
        <div class="mb-3 flex items-center justify-between"><h2 class="font-bold">Tren Pengeluaran</h2><span class="text-xs text-slate-400">Bulan ini</span></div>
        <div class="h-52"><canvas id="trendChart"></canvas></div>
    </div>
</div>

<div class="mt-4 grid gap-4 xl:grid-cols-3">
    <div class="rounded-xl border bg-white p-4 soft">
        <div class="mb-4 flex justify-between"><div><h2 class="font-bold">Saldo per Rekening</h2><p class="text-xs text-slate-400">Total {{ $accounts->count() }} rekening</p></div><a href="{{ route('accounts.index') }}" class="text-xs font-bold text-blue-600">Kelola Rekening</a></div>
        <div class="space-y-3">
            @forelse($accounts->take(6) as $account)
                <div class="flex items-center justify-between border-b pb-2 last:border-0">
                    <div class="flex items-center gap-2">
                        <div class="grid h-8 w-8 place-items-center overflow-hidden rounded-lg bg-slate-50">
                            @if($account->logo_url)
                                <img src="{{ $account->logo_url }}" alt="{{ $account->provider_name ?? $account->name }}" class="h-8 w-8 object-contain" loading="lazy" onerror="this.style.display='none';this.nextElementSibling.style.display='grid'"><span class="hidden h-full w-full place-items-center text-[9px] font-bold text-emerald-700">{{ strtoupper(substr($account->provider_name ?: $account->type, 0, 4)) }}</span>
                            @else
                                <span class="text-[9px] font-bold text-emerald-700">{{ strtoupper(substr($account->provider_name ?: $account->type, 0, 4)) }}</span>
                            @endif
                        </div>
                        <div><div class="text-sm font-semibold">{{ $account->name }}</div><div class="text-[10px] text-slate-400">{{ $account->type }}</div></div>
                    </div>
                    <b class="text-sm">Rp {{ number_format($account->current_balance, 0, ',', '.') }}</b>
                </div>
            @empty
                <div class="py-8 text-center text-slate-400">Belum ada rekening.</div>
            @endforelse
        </div>
    </div>

    <div class="rounded-xl border bg-white p-4 soft">
        <div class="mb-4 flex justify-between"><div><h2 class="font-bold">Budget Bulanan</h2><p class="text-xs text-slate-400">{{ $budgets->count() }} anggaran aktif</p></div><a href="{{ route('budgets.index') }}" class="text-xs font-bold text-blue-600">Lihat Semua</a></div>
        <div class="space-y-4">
            @forelse($budgets->take(4) as $budget)
                <div>
                    <div class="flex items-center justify-between gap-3 text-xs">
                        <span class="font-semibold">{{ $budget->category?->name }}</span>
                        <span class="text-right font-semibold {{ $budget->percentage >= 100 ? 'text-rose-600' : 'text-slate-700' }}">
                            {{ $budget->percentage >= 100 ? 'Melebihi Rp '.number_format(max(0, $budget->spent - $budget->amount), 0, ',', '.') : 'Tersisa Rp '.number_format(max(0, $budget->amount - $budget->spent), 0, ',', '.') }}
                        </span>
                    </div>
                    <div class="mt-1 h-2 rounded-full bg-slate-100"><div class="h-full rounded-full {{ $budget->percentage >= 100 ? 'bg-rose-500' : ($budget->percentage >= 80 ? 'bg-amber-400' : 'bg-emerald-500') }}" style="width:{{ min(100, $budget->percentage) }}%"></div></div>
                    <div class="mt-1 flex justify-end text-[10px] text-slate-400">{{ $budget->percentage }}% terpakai</div>
                </div>
            @empty
                <div class="rounded-xl bg-slate-50 p-10 text-center"><div class="mx-auto grid h-10 w-10 place-items-center rounded-full bg-emerald-100 text-emerald-600"><svg class="h-5 w-5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M12 3v18M5 8l7-5 7 5M5 16l7 5 7-5"/></svg></div><b class="mt-2 block">Belum ada anggaran</b><a href="{{ route('budgets.create') }}" class="mt-2 inline-block text-xs font-bold text-blue-600">＋ Buat anggaran</a></div>
            @endforelse
        </div>
    </div>

    <div class="rounded-xl border bg-white p-4 soft">
        <div class="mb-4 flex justify-between"><div><h2 class="font-bold">Top Pengeluaran</h2><p class="text-xs text-slate-400">Terbesar bulan ini</p></div><a href="{{ route('transactions.index') }}?type=expense" class="text-xs font-bold text-blue-600">Lihat</a></div>
        <div class="space-y-2">
            @forelse($topExpenses as $index => $transaction)
                <div class="flex items-center justify-between gap-2"><div class="flex min-w-0 items-center gap-2"><span class="grid h-6 w-6 place-items-center rounded-full bg-slate-50 text-[10px] font-bold">{{ $index + 1 }}</span><span class="truncate text-xs font-semibold">{{ $transaction->description ?: ($transaction->category?->name ?? 'Pengeluaran') }}</span></div><b class="whitespace-nowrap text-xs text-rose-500">Rp {{ number_format($transaction->amount, 0, ',', '.') }}</b></div>
            @empty
                <div class="py-10 text-center text-slate-400">Belum ada pengeluaran</div>
            @endforelse
        </div>
    </div>
</div>

<div class="mt-4 rounded-xl border bg-white p-4 soft"><div class="mb-3 flex justify-between"><div><h2 class="font-bold">Target Finansial</h2><p class="text-xs text-slate-400">Progress tujuanmu</p></div><a href="{{route('goals.index')}}" class="text-xs font-bold text-blue-600">Lihat semua</a></div><div class="grid gap-3 sm:grid-cols-3">@forelse($goals as $goal) @php($gp=$goal->target_amount>0?min(100,round($goal->current_amount/$goal->target_amount*100)):0)<div class="rounded-xl bg-slate-50 p-3"><div class="truncate text-xs font-bold">🎯 {{$goal->name}}</div><div class="mt-2 h-2 rounded-full bg-white"><div class="h-full rounded-full bg-emerald-500" style="width:{{$gp}}%"></div></div><div class="mt-1 text-[10px] text-slate-500">{{$gp}}% · Rp {{number_format($goal->current_amount,0,',','.')}}</div></div>@empty<div class="text-sm text-slate-400">Belum ada target.</div>@endforelse</div></div>

<div class="mt-4 rounded-xl border bg-white p-4 soft">
    <div class="mb-3 flex justify-between"><div><h2 class="font-bold">Transaksi Terbaru</h2><p class="text-xs text-slate-400">Aktivitas keuangan terbaru</p></div><a href="{{ route('transactions.index') }}" class="text-xs font-bold text-blue-600">Lihat semua</a></div>
    <div class="overflow-x-auto">
        <table class="w-full text-left text-xs"><thead class="text-slate-400"><tr><th class="py-2">Tanggal</th><th>Kategori</th><th>Keterangan</th><th>Rekening</th><th class="text-right">Nominal</th></tr></thead>
            <tbody>
            @forelse($transactions as $transaction)
                <tr class="border-t"><td class="py-3">{{ $transaction->transaction_date->format('d M Y') }}</td><td>{{ $transaction->category?->name ?? 'Lainnya' }}</td><td>{{ $transaction->description ?: '-' }}</td><td>{{ $transaction->account?->name }}</td><td class="text-right font-bold {{ $transaction->type === 'income' ? 'text-emerald-600' : 'text-rose-500' }}">{{ $transaction->type === 'income' ? '+' : '-' }} Rp {{ number_format($transaction->amount, 0, ',', '.') }}</td></tr>
            @empty
                <tr><td colspan="5" class="py-14 text-center text-slate-400"><div class="mx-auto grid h-10 w-10 place-items-center rounded-full bg-slate-100 text-slate-500"><svg class="h-5 w-5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="4" y="3" width="16" height="18" rx="2"/><path d="M8 7h8M8 11h8M8 15h5"/></svg></div><div class="mt-2 font-semibold text-slate-600">Belum ada transaksi</div><button onclick="openTx()" class="mt-2 font-bold text-blue-600">＋ Tambah transaksi</button></td></tr>
            @endforelse
            </tbody>
        </table>
    </div>
</div>

<div id="txModal" class="fixed inset-0 z-50 hidden items-center justify-center bg-slate-900/50 p-4">
    <div class="modal-panel w-full max-w-2xl rounded-2xl bg-white p-5 shadow-2xl">
        <div class="flex items-center justify-between"><h3 class="text-lg font-extrabold">Tambah Transaksi</h3><button type="button" onclick="closeTx()" class="text-slate-400">✕</button></div>
        <form method="POST" action="{{ route('transactions.store') }}" class="mt-4 grid gap-4 md:grid-cols-2">
            @csrf
            <div class="md:col-span-2 grid grid-cols-2 gap-2">
                <label class="rounded-lg border p-3"><input id="txExpense" type="radio" name="type" value="expense" checked> <span class="font-semibold text-rose-600">Pengeluaran</span></label>
                <label class="rounded-lg border p-3"><input id="txIncome" type="radio" name="type" value="income"> <span class="font-semibold text-emerald-600">Pemasukan</span></label>
            </div>
            <div class="min-w-0">
                <label for="txAmountDisplay" class="text-xs font-semibold">Nominal</label>
                <div class="relative mt-1">
                    <span class="pointer-events-none absolute left-3 top-1/2 -translate-y-1/2 text-sm font-bold text-slate-400">Rp</span>
                    <input id="txAmountDisplay" type="text" inputmode="numeric" autocomplete="off" required value="" class="w-full min-w-0 rounded-lg border border-slate-200 p-2.5 pl-9 text-base outline-none focus:border-emerald-400 focus:ring-4 focus:ring-emerald-50" placeholder="0">
                    <input id="txAmount" name="amount" type="hidden" value="">
                </div>
            </div>
            <div><label class="text-xs font-semibold">Tanggal</label><input name="transaction_date" type="date" value="{{ now()->format('Y-m-d') }}" required class="form-control mt-1"></div>
            <div><label class="text-xs font-semibold">Kategori</label><select id="txCategory" name="category_id" required class="form-control mt-1"></select></div>
            <div><label class="text-xs font-semibold">Rekening</label><select name="account_id" required class="form-control mt-1">
                    @foreach($accounts as $account)
                        <option value="{{ $account->id }}">{{ $account->name }}</option>
                    @endforeach
                </select></div>
            <div class="md:col-span-2"><label class="text-xs font-semibold">Keterangan</label><input name="description" class="form-control mt-1" placeholder="Makan siang di warung"></div>
            <div class="md:col-span-2 flex flex-col-reverse gap-2 sm:flex-row sm:justify-end page-actions"><button type="button" onclick="closeTx()" class="rounded-lg border px-4 py-2.5">Batal</button><button class="rounded-lg bg-emerald-600 px-4 py-2.5 font-bold text-white">Simpan Transaksi</button></div>
        </form>
    </div>
</div>
@push('scripts')
<script>
(function(){
    const form=document.getElementById('dashboardMonthForm');
    const input=document.getElementById('dashboardMonth');
    const button=document.getElementById('dashboardMonthButton');
    const picker=document.getElementById('dashboardMonthPicker');
    const label=document.getElementById('dashboardMonthLabel');
    const yearEl=document.getElementById('dashboardPickerYear');
    const grid=document.getElementById('dashboardMonthGrid');
    const prev=document.getElementById('dashboardPrevYear');
    const next=document.getElementById('dashboardNextYear');
    if(!form||!input||!button||!picker||!label||!yearEl||!grid)return;
    const months=['Januari','Februari','Maret','April','Mei','Juni','Juli','Agustus','September','Oktober','November','Desember'];
    let [year,month]=input.value.split('-').map(Number);
    let pickerYear=year;
    const render=()=>{
        yearEl.textContent=pickerYear;
        grid.innerHTML='';
        months.forEach((name,i)=>{
            const b=document.createElement('button');
            b.type='button'; b.textContent=name;
            b.className='min-h-[46px] rounded-xl border px-2 py-2 text-sm font-semibold transition';
            const selected=(pickerYear===year && i+1===month);
            if(selected){b.className+=' bg-emerald-600 text-white border-emerald-600';}
            else{b.className+=' bg-white text-slate-700 border-slate-200 hover:border-emerald-300 hover:bg-emerald-50';}
            b.addEventListener('click',()=>{
                year=pickerYear; month=i+1;
                input.value=year+'-'+String(month).padStart(2,'0');
                label.textContent=name+' '+year;
                close();
                form.submit();
            });
            grid.appendChild(b);
        });
    };
    const open=()=>{picker.classList.remove('hidden'); button.setAttribute('aria-expanded','true'); pickerYear=year; render();};
    const close=()=>{picker.classList.add('hidden'); button.setAttribute('aria-expanded','false');};
    button.addEventListener('click',()=>picker.classList.contains('hidden')?open():close());
    prev?.addEventListener('click',()=>{pickerYear--;render();});
    next?.addEventListener('click',()=>{pickerYear++;render();});
    document.addEventListener('click',e=>{if(!picker.contains(e.target)&&!button.contains(e.target))close();});
    document.addEventListener('keydown',e=>{if(e.key==='Escape')close();});
    render();
})();
</script>
@endpush

@endsection

@push('scripts')
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script>
const spendioCategories = @json($categories->map(fn($c) => ['id'=>$c->id,'name'=>$c->name,'type'=>$c->type])->values());
(function(){
    const display = document.getElementById('txAmountDisplay');
    const hidden = document.getElementById('txAmount');
    if(!display || !hidden) return;
    const formatter = new Intl.NumberFormat('id-ID');
    const digitsOnly = value => String(value ?? '').replace(/\D/g, '');
    const format = value => {
        const digits = digitsOnly(value);
        return digits ? formatter.format(Number(digits)) : '';
    };
    const sync = () => {
        const digits = digitsOnly(display.value);
        hidden.value = digits;
        display.value = format(digits);
        try { display.setSelectionRange(display.value.length, display.value.length); } catch(e) {}
    };
    display.addEventListener('input', sync);
    display.addEventListener('focus', () => {
        try { display.setSelectionRange(display.value.length, display.value.length); } catch(e) {}
    });
    display.form?.addEventListener('submit', () => {
        hidden.value = digitsOnly(display.value);
    });
})();

function fillTxCategories(){
    const type = document.querySelector('input[name="type"]:checked')?.value || 'expense';
    const select = document.getElementById('txCategory');
    if(!select) return;
    select.innerHTML = '';
    spendioCategories.filter(c => c.type === type).forEach(c => {
        const option = document.createElement('option'); option.value = c.id; option.textContent = c.name; select.appendChild(option);
    });
}
function openTx(){ document.getElementById('txModal').classList.remove('hidden'); document.getElementById('txModal').classList.add('flex'); fillTxCategories(); }
function closeTx(){ document.getElementById('txModal').classList.add('hidden'); document.getElementById('txModal').classList.remove('flex'); }
document.querySelectorAll('input[name="type"]').forEach(el => el.addEventListener('change', fillTxCategories));
fillTxCategories();

const catLabels = @json($categorySpend->map(fn($r) => $r->category?->name ?? 'Lainnya')->values());
const catValues = @json($categorySpend->pluck('total')->map(fn($v)=>(float)$v)->values());
const trendLabels = @json($trendLabels); const trendValues = @json($trendValues->map(fn($v)=>(float)$v)->values());
if (window.Chart) {
    new Chart(document.getElementById('catChart'), {type:'doughnut', data:{labels:catLabels, datasets:[{data:catValues}]}, options:{responsive:true,maintainAspectRatio:false,plugins:{legend:{position:'bottom'}}}});
    new Chart(document.getElementById('trendChart'), {type:'line', data:{labels:trendLabels, datasets:[{label:'Pengeluaran',data:trendValues,tension:.35,fill:true}]}, options:{responsive:true,maintainAspectRatio:false,plugins:{legend:{display:false}},scales:{y:{ticks:{callback:v=>'Rp '+Number(v).toLocaleString('id-ID')}}}}});
}
</script>
@endpush

<style>
/* Spendio v3.9.8 - Insight Keuangan spacing + dark mode */
.insight-panel{margin-top:24px !important}
html.dark .insight-panel{background:linear-gradient(135deg,#0f2925 0%,#101827 58%,#111827 100%) !important;border-color:#065f46 !important;color:#e5e7eb !important}
html.dark .insight-panel h2{color:#f8fafc !important}
html.dark .insight-panel p{color:#cbd5e1 !important}
html.dark .insight-panel .bg-white{background:#0b1526 !important;color:#e5e7eb !important}
@media(max-width:767px){.insight-panel{margin-top:20px !important;padding:18px !important}}
</style>