@extends('layouts.app')

@section('content')
<div class="d-flex justify-content-between align-items-center mb-4">
    <div>
        <h1 class="h3 mb-1">Account Summary</h1>
        <p class="text-muted mb-0">Current account balances by currency.</p>
    </div>
</div>

<form class="row g-2 mb-4 ajax-filter" method="GET" action="{{ route('accounts.summary') }}" data-ajax-target="#account-summary-results">
    <div class="col-md-4">
        <select class="form-select" name="currency_id">
            <option value="">All currencies</option>
            @foreach($currencies as $currency)
                <option value="{{ $currency->id }}" @selected(($filters['currency_id'] ?? '') == $currency->id)>{{ $currency->code }} - {{ $currency->name }}</option>
            @endforeach
        </select>
    </div>
    <div class="col-md-4">
        <select class="form-select" name="type">
            <option value="">All account types</option>
            <option value="bank" @selected(($filters['type'] ?? '') === 'bank')>Bank</option>
            <option value="cash" @selected(($filters['type'] ?? '') === 'cash')>Cash</option>
        </select>
    </div>
    <div class="col-md-4">
        <button class="btn btn-primary" type="submit">Filter</button>
    </div>
</form>

<div id="account-summary-results">
<div class="card">
    <div class="card-body">
        <div class="table-responsive">
            <table class="table table-striped align-middle">
                <thead>
                    <tr>
                        <th>Name</th>
                        <th>Currency</th>
                        <th class="text-end">Current Balance</th>
                    </tr>
                </thead>
                <tbody>
                    @forelse($accounts as $account)
                        <tr>
                            <td class="fw-semibold">{{ $account->name }}</td>
                            <td>{{ $account->currency->code }}</td>
                            <td class="text-end">{{ number_format((float) $account->balance, 4) }}</td>
                        </tr>
                    @empty
                        <tr>
                            <td class="text-muted text-center" colspan="3">No accounts added yet.</td>
                        </tr>
                    @endforelse
                </tbody>
            </table>
        </div>
    </div>
</div>
</div>
@endsection