@extends('layouts.app')
@section('page-title', 'Transactions')
@section('content')
    <div class="page-header">
        <h2>Transactions</h2>
        <a href="{{ route('transactions.create') }}" class="btn btn-primary">+ New Transaction</a>
    </div>

    <div class="card">
        <form method="GET" class="form-grid-3">
            <div>
                <label>Type</label>
                <select name="type">
                    <option value="">All</option>
                    <option value="income" {{ request('type')==='income'?'selected':'' }}>Income</option>
                    <option value="expense" {{ request('type')==='expense'?'selected':'' }}>Expense</option>
                </select>
            </div>
            <div>
                <label>Source</label>
                <select name="source">
                    <option value="">All</option>
                    @foreach(['linked_bank','payfast','manual','invoice','refund','other'] as $s)
                        <option value="{{ $s }}" {{ request('source')===$s?'selected':'' }}>{{ $s }}</option>
                    @endforeach
                </select>
            </div>
            <div>
                <label>Bank Account</label>
                <select name="bank_account_id">
                    <option value="">All</option>
                    @foreach($bankAccounts as $b)
                        <option value="{{ $b->id }}" {{ request('bank_account_id')==$b->id?'selected':'' }}>{{ $b->name }}</option>
                    @endforeach
                </select>
            </div>
            <div>
                <label>From</label>
                <input type="date" name="from" value="{{ request('from') }}">
            </div>
            <div>
                <label>To</label>
                <input type="date" name="to" value="{{ request('to') }}">
            </div>
            <div style="display:flex; gap:8px; align-items:end;">
                <button class="btn btn-primary" type="submit">Filter</button>
                <a href="{{ route('transactions.index') }}" class="btn">Reset</a>
            </div>
        </form>
    </div>

    @if($transactions->isEmpty())
        <div class="card empty">No transactions match. <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>Reference</th><th>Counterparty</th><th style="text-align:right">Amount</th><th></th></tr></thead>
                <tbody>
                @foreach($transactions 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->reference ?? '—' }}</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>
                        <td style="text-align:right;">
                            <a href="{{ route('transactions.show', $t) }}" class="btn btn-sm">View</a>
                            <form method="POST" action="{{ route('transactions.destroy', $t) }}" style="display:inline" onsubmit="return confirm('Delete this transaction?')">
                                @csrf @method('DELETE')
                                <button class="btn btn-sm btn-danger" type="submit">Delete</button>
                            </form>
                        </td>
                    </tr>
                @endforeach
                </tbody>
            </table>
        </div>
        <div style="margin-top:16px;">{{ $transactions->links() }}</div>
    @endif
@endsection