@extends('eliteadmin::layouts.app')

@section('title', 'Finance Dashboard')

@section('content')
    <div class="page-header">
        <h1 class="page-title">Finance Dashboard</h1>
        <nav class="breadcrumb">
            <a href="{{ route('dashboard') }}" class="breadcrumb-item">Home</a>
            <span class="breadcrumb-item active">Finance</span>
        </nav>
    </div>

    <div class="row g-3 mb-4">
        <div class="col-md-4">
            <div class="card h-100"><div class="card-body">
                <h6 class="text-muted">Today</h6>
                <div class="small">Income: <strong class="text-success">{{ platform_money($today_income) }}</strong></div>
                <div class="small">Expense: <strong class="text-danger">{{ platform_money($today_expense) }}</strong></div>
                <div class="small">Net: <strong>{{ platform_money($today_profit) }}</strong></div>
            </div></div>
        </div>
        <div class="col-md-4">
            <div class="card h-100"><div class="card-body">
                <h6 class="text-muted">This Month</h6>
                <div class="small">Income: <strong class="text-success">{{ platform_money($month_income) }}</strong></div>
                <div class="small">Expense: <strong class="text-danger">{{ platform_money($month_expense) }}</strong></div>
                <div class="small">Profit: <strong>{{ platform_money($month_profit) }}</strong></div>
            </div></div>
        </div>
        <div class="col-md-4">
            <div class="card h-100"><div class="card-body">
                <h6 class="text-muted">Overall</h6>
                <div class="small">Total Income: <strong>{{ platform_money($total_income) }}</strong></div>
                <div class="small">Total Expense: <strong>{{ platform_money($total_expense) }}</strong></div>
                <div class="small">Balance: <strong class="text-primary">{{ platform_money($current_balance) }}</strong></div>
            </div></div>
        </div>
    </div>

    <div class="row g-3">
        <div class="col-xl-8">
            <div class="card">
                <div class="card-header"><h5 class="card-title mb-0">Recent Transactions</h5></div>
                <div class="card-body p-0">
                    <div class="table-responsive">
                        <table class="table table-hover mb-0">
                            <thead class="table-light"><tr><th>Date</th><th>Type</th><th>Category</th><th>Amount</th></tr></thead>
                            <tbody>
                                @forelse ($recent_transactions as $tx)
                                    <tr>
                                        <td>{{ $tx->transaction_at->format('M j, Y') }}</td>
                                        <td><span class="badge bg-{{ $tx->type->value === 'income' ? 'success' : 'danger' }}">{{ ucfirst($tx->type->value) }}</span></td>
                                        <td>{{ $tx->categoryName() }}</td>
                                        <td>{{ platform_money($tx->amount) }}</td>
                                    </tr>
                                @empty
                                    <tr><td colspan="4" class="text-center text-muted py-4">No transactions yet</td></tr>
                                @endforelse
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-xl-4">
            <div class="card mb-3">
                <div class="card-header"><h5 class="card-title mb-0">Top Income Sources</h5></div>
                <ul class="list-group list-group-flush">
                    @forelse ($top_income_categories as $item)
                        <li class="list-group-item d-flex justify-content-between"><span>{{ $item->name }}</span><strong>{{ platform_money($item->total) }}</strong></li>
                    @empty
                        <li class="list-group-item text-muted">No data</li>
                    @endforelse
                </ul>
            </div>
            <div class="card">
                <div class="card-header"><h5 class="card-title mb-0">Highest Expenses</h5></div>
                <ul class="list-group list-group-flush">
                    @forelse ($top_expense_categories as $item)
                        <li class="list-group-item d-flex justify-content-between"><span>{{ $item->name }}</span><strong>{{ platform_money($item->total) }}</strong></li>
                    @empty
                        <li class="list-group-item text-muted">No data</li>
                    @endforelse
                </ul>
            </div>
        </div>
    </div>
@endsection