@extends('layouts.app')
@section('title', 'Dashboard · SakuApp')
@section('page-title', 'Dashboard')

@section('content')
    {{-- Stat Cards --}}
    <div class="stats-grid">
        <div class="stat-card">
            <div class="stat-ico income">
                <svg fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.75">
                    <path stroke-linecap="round" stroke-linejoin="round" d="M7 11l5-5m0 0l5 5m-5-5v12" />
                </svg>
            </div>
            <div class="stat-lbl">Total Income</div>
            <div class="stat-val income">{{ number_format($totalIncome, 2) }}</div>
        </div>
        <div class="stat-card">
            <div class="stat-ico expense">
                <svg fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.75">
                    <path stroke-linecap="round" stroke-linejoin="round" d="M17 13l-5 5m0 0l-5-5m5 5V6" />
                </svg>
            </div>
            <div class="stat-lbl">Total Expenses</div>
            <div class="stat-val expense">{{ number_format($totalExpense, 2) }}</div>
        </div>
        <div class="stat-card">
            <div class="stat-ico balance">
                <svg fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.75">
                    <path stroke-linecap="round" stroke-linejoin="round"
                        d="M3 6l3 1m0 0l-3 9a5.002 5.002 0 006.001 0M6 7l3 9M6 7l6-2m6 2l3-1m-3 1l-3 9a5.002 5.002 0 006.001 0M18 7l3 9m-3-9l-6-2m0-2v2m0 16V5m0 16H9m3 0h3" />
                </svg>
            </div>
            <div class="stat-lbl">Current Balance</div>
            <div class="stat-val balance">{{ number_format($balance, 2) }}</div>
        </div>
    </div>

    {{-- Monthly + Yearly --}}
    <div style="display:grid; grid-template-columns:1fr 1fr; gap:14px; margin-bottom:16px;">
        <div class="tbl-card">
            <div class="tbl-head">
                <h2>Monthly — {{ now()->year }}</h2>
            </div>
            <div class="tbl-wrap">
                @if ($monthlySummary->isEmpty())
                    <div class="empty">
                        <div class="empty-ico">📅</div>
                        <p>No data for {{ now()->year }}</p>
                    </div>
                @else
                    <table>
                        <thead>
                            <tr>
                                <th>Month</th>
                                <th class="text-right">Income</th>
                                <th class="text-right">Expense</th>
                                <th class="text-right">Net</th>
                            </tr>
                        </thead>
                        <tbody>
                            @foreach ($monthlySummary as $row)
                                @php $net = $row->income - $row->expense; @endphp
                                <tr>
                                    <td style="font-weight:500; color:var(--t1);">
                                        {{ DateTime::createFromFormat('!m', (int) $row->month)->format('M') }}</td>
                                    <td class="text-right amt-income">{{ number_format($row->income, 2) }}</td>
                                    <td class="text-right amt-expense">{{ number_format($row->expense, 2) }}</td>
                                    <td class="text-right"
                                        style="font-weight:600; color:{{ $net >= 0 ? 'var(--income)' : 'var(--expense)' }};">
                                        {{ number_format($net, 2) }}</td>
                                </tr>
                            @endforeach
                        </tbody>
                    </table>
                @endif
            </div>
        </div>

        <div class="tbl-card">
            <div class="tbl-head">
                <h2>Yearly Summary</h2>
            </div>
            <div class="tbl-wrap">
                @if ($yearlySummary->isEmpty())
                    <div class="empty">
                        <div class="empty-ico">📊</div>
                        <p>No yearly data yet</p>
                    </div>
                @else
                    <table>
                        <thead>
                            <tr>
                                <th>Year</th>
                                <th class="text-right">Income</th>
                                <th class="text-right">Expense</th>
                                <th class="text-right">Net</th>
                            </tr>
                        </thead>
                        <tbody>
                            @foreach ($yearlySummary as $row)
                                @php $net = $row->income - $row->expense; @endphp
                                <tr>
                                    <td style="font-weight:700; color:var(--t1);">{{ (int) $row->year }}</td>
                                    <td class="text-right amt-income">{{ number_format($row->income, 2) }}</td>
                                    <td class="text-right amt-expense">{{ number_format($row->expense, 2) }}</td>
                                    <td class="text-right"
                                        style="font-weight:600; color:{{ $net >= 0 ? 'var(--income)' : 'var(--expense)' }};">
                                        {{ number_format($net, 2) }}</td>
                                </tr>
                            @endforeach
                        </tbody>
                    </table>
                @endif
            </div>
        </div>
    </div>

    {{-- Recent Transactions --}}
    <div class="tbl-card">
        <div class="tbl-head">
            <h2>Recent Transactions</h2>
            <a href="{{ route('transactions.create') }}" class="btn btn-primary btn-sm">
                <svg fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2.5">
                    <path stroke-linecap="round" stroke-linejoin="round" d="M12 4v16m8-8H4" />
                </svg>
                New
            </a>
        </div>
        <div class="tbl-wrap">
            @if ($latestTransactions->isEmpty())
                <div class="empty">
                    <div class="empty-ico">💸</div>
                    <h3>No transactions yet</h3>
                    <p>Record your first income or expense to get started.</p>
                    <a href="{{ route('transactions.create') }}" class="btn btn-primary">Add Transaction</a>
                </div>
            @else
                <table>
                    <thead>
                        <tr>
                            <th>Date</th>
                            <th>Description</th>
                            <th>Type</th>
                            <th class="text-right">Amount</th>
                            <th>Note</th>
                        </tr>
                    </thead>
                    <tbody>
                        @foreach ($latestTransactions as $txn)
                            <tr>
                                <td style="color:var(--t3); font-size:.77rem; white-space:nowrap;">
                                    {{ $txn->date->format('d M Y') }}</td>
                                <td style="font-weight:500; color:var(--t1);">{{ $txn->title }}</td>
                                <td><span class="badge badge-{{ $txn->type }}">{{ ucfirst($txn->type) }}</span></td>
                                <td class="text-right amt-{{ $txn->type }}">{{ number_format($txn->amount, 2) }}</td>
                                <td style="color:var(--t3); font-size:.79rem;">
                                    {{ $txn->note ? Str::limit($txn->note, 38) : '—' }}</td>
                            </tr>
                        @endforeach
                    </tbody>
                </table>
            @endif
        </div>
        @if ($latestTransactions->hasPages())
            <div class="tbl-foot">
                <div class="pager">
                    @foreach ($latestTransactions->getUrlRange(1, $latestTransactions->lastPage()) as $page => $url)
                        @if ($page == $latestTransactions->currentPage())
                            <span class="cur">{{ $page }}</span>
                        @else
                            <a href="{{ $url }}">{{ $page }}</a>
                        @endif
                    @endforeach
                </div>
            </div>
        @endif
    </div>

@endsection