@extends('layouts.app')

@section('page-title', 'Dashboard')

@section('content')
    <div class="card">
        <h3 class="card-title">Dashboard</h3>
        <div class="muted" style="margin-bottom: 16px;">
            Selected Quarter: <strong>Q{{ $quarter }} {{ $year }}</strong>
            &nbsp;|&nbsp; Range: <strong>{{ $rangeStart->format('Y-m-d') }} to {{ $rangeEnd->format('Y-m-d') }}</strong>
        </div>
        <form method="GET" action="{{ route('dashboard') }}" class="form-grid-3" style="align-items: end;">
            <div>
                <label for="year">Year</label>
                <input id="year" type="number" name="year" value="{{ $year }}" min="2020" max="2099">
            </div>
            <div>
                <label for="quarter">Quarter</label>
                <select id="quarter" name="quarter">
                    <option value="1" {{ $quarter==1?'selected':'' }}>Q1 (Jan – Mar)</option>
                    <option value="2" {{ $quarter==2?'selected':'' }}>Q2 (Apr – Jun)</option>
                    <option value="3" {{ $quarter==3?'selected':'' }}>Q3 (Jul – Sep)</option>
                    <option value="4" {{ $quarter==4?'selected':'' }}>Q4 (Oct – Dec)</option>
                </select>
            </div>
            <div style="display:flex; gap:8px;">
                <button type="submit" class="btn btn-primary">Filter</button>
                <a href="{{ route('dashboard') }}" class="btn">Reset</a>
            </div>
        </form>
    </div>

    <div class="kpi-grid">
        <div class="kpi">
            <div class="kpi-label">Linked Bank Credits</div>
            <div class="kpi-value">PKR {{ number_format($linkedBankCredits, 0) }}</div>
            <div class="kpi-sub">Approved Add Transactions — Entries: {{ $linkedBankEntries }}</div>
        </div>
        <div class="kpi">
            <div class="kpi-label">PayFast Credits</div>
            <div class="kpi-value">PKR {{ number_format($payfastCredits, 0) }}</div>
            <div class="kpi-sub muted">This quarter</div>
        </div>
        <div class="kpi">
            <div class="kpi-label">Total Income</div>
            <div class="kpi-value">PKR {{ number_format($totalIncome, 0) }}</div>
            <div class="kpi-sub">All sources combined</div>
        </div>
        <div class="kpi">
            <div class="kpi-label">Total Expense</div>
            <div class="kpi-value">PKR {{ number_format($totalExpense, 0) }}</div>
            <div class="kpi-sub muted">Invoices & outflows</div>
        </div>
        <div class="kpi">
            <div class="kpi-label">Net Profit</div>
            <div class="kpi-value" style="color: {{ $netProfit >= 0 ? 'var(--green)' : 'var(--red)' }}">PKR {{ number_format($netProfit, 0) }}</div>
            <div class="kpi-sub muted">Income − Expense</div>
        </div>
    </div>

    <div class="card">
        <h3 class="card-title">In Stock Vouchers</h3>
        @if($stockProducts->isEmpty())
            <div class="empty">No voucher products yet. <a href="{{ route('vouchers.create') }}">Add one →</a></div>
        @else
            <div class="kpi-grid" style="margin-bottom:0;">
                @foreach($stockProducts as $p)
                    <div class="kpi">
                        <div class="kpi-value" style="font-size: 28px;">{{ $p->stock }}</div>
                        <div style="font-weight: 600; margin-top: 4px;">{{ $p->name }}</div>
                        <div class="muted" style="font-size: 12px; margin-top: 4px;">
                            Inventory Value: PKR {{ number_format($p->stock * (float) $p->cost_price, 0) }}
                        </div>
                    </div>
                @endforeach
            </div>
        @endif
    </div>

    <div class="card">
        <h3 class="card-title">Bank Account Balances</h3>
        @if($bankAccounts->isEmpty())
            <div class="empty">No bank accounts. <a href="{{ route('bank-accounts.create') }}">Add one →</a></div>
        @else
            <div class="table-wrap">
                <table>
                    <thead><tr><th>Account</th><th>Bank</th><th>Type</th><th style="text-align:right">Current Balance</th></tr></thead>
                    <tbody>
                    @foreach($bankAccounts as $a)
                        <tr>
                            <td><strong>{{ $a->name }}</strong></td>
                            <td>{{ $a->bank_name }}</td>
                            <td><span class="badge badge-active">{{ ucfirst($a->account_type) }}</span></td>
                            <td style="text-align:right; font-weight: 600;">{{ $a->currency }} {{ number_format($a->current_balance, 2) }}</td>
                        </tr>
                    @endforeach
                    </tbody>
                </table>
            </div>
        @endif
    </div>

    <div class="card">
        <h3 class="card-title">Recent Transactions</h3>
        @if($recentTransactions->isEmpty())
            <div class="empty">No transactions yet. <a href="{{ route('transactions.create') }}">Record one →</a></div>
        @else
            <div class="table-wrap">
                <table>
                    <thead><tr><th>Date</th><th>Type</th><th>Source</th><th>Account</th><th>Counterparty</th><th style="text-align:right">Amount</th></tr></thead>
                    <tbody>
                    @foreach($recentTransactions as $t)
                        <tr>
                            <td>{{ $t->transaction_date->format('Y-m-d') }}</td>
                            <td><span class="badge badge-{{ $t->type }}">{{ $t->type }}</span></td>
                            <td>{{ $t->source }}</td>
                            <td>{{ $t->bankAccount->name ?? '—' }}</td>
                            <td>{{ $t->counterparty ?? '—' }}</td>
                            <td style="text-align:right; font-weight: 600; color: {{ $t->type==='income' ? 'var(--green)' : 'var(--red)' }}">
                                {{ $t->type === 'income' ? '+' : '−' }} PKR {{ number_format($t->amount, 2) }}
                            </td>
                        </tr>
                    @endforeach
                    </tbody>
                </table>
            </div>
            <div style="text-align:right; margin-top: 12px;"><a href="{{ route('transactions.index') }}">View all transactions →</a></div>
        @endif
    </div>
@endsection