@extends('core/base::layouts.master')

@section('content')
<div class="container-fluid">
    <div class="row mb-3">
        <div class="col-12">
            <form method="GET" class="d-flex gap-2">
                <input type="hidden" name="filter" value="weekly">
                <button type="submit" name="filter" value="weekly" class="btn btn-outline-primary @if($filter == 'weekly') active @endif">Weekly</button>
                <button type="submit" name="filter" value="monthly" class="btn btn-outline-primary @if($filter == 'monthly') active @endif">Monthly</button>
                <button type="submit" name="filter" value="yearly" class="btn btn-outline-primary @if($filter == 'yearly') active @endif">Yearly</button>
            </form>
        </div>
    </div>
    <div class="row">
        <div class="col-md-4">
            <div class="card text-white bg-danger mb-3">
                <div class="card-header">{{ trans('plugins/expense-calculator::general.expenses') }}</div>
                <div class="card-body">
                    <h5 class="card-title">{{ number_format($totalExpenses, 2) }}</h5>
                </div>
            </div>
        </div>
        <div class="col-md-4">
            <div class="card text-white bg-success mb-3">
                <div class="card-header">{{ trans('plugins/expense-calculator::general.incomes') }}</div>
                <div class="card-body">
                    <h5 class="card-title">{{ number_format($totalIncomes, 2) }}</h5>
                </div>
            </div>
        </div>
        <div class="col-md-4">
            <div class="card text-white bg-info mb-3">
                <div class="card-header">{{ trans('plugins/expense-calculator::general.savings') }}</div>
                <div class="card-body">
                    <h5 class="card-title">{{ number_format($savings, 2) }}</h5>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection

@push('scripts')
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script>
    const expenseChart = @json(array_values($expenseChart->toArray()));
    const incomeChart = @json(array_values($incomeChart->toArray()));
    const labels = @json(array_keys($expenseChart->toArray()));
    const incomeLabels = @json(array_keys($incomeChart->toArray()));
    // Use all unique labels from both arrays
    const allLabels = Array.from(new Set([...labels, ...incomeLabels])).sort();
    const expenseData = allLabels.map(l => expenseChart[allLabels.indexOf(l)] ?? 0);
    const incomeData = allLabels.map(l => incomeChart[allLabels.indexOf(l)] ?? 0);
    const ctx = document.getElementById('overviewChart').getContext('2d');
    new Chart(ctx, {
        type: 'line',
        data: {
            labels: allLabels,
            datasets: [
                {
                    label: 'Expenses',
                    data: expenseData,
                    borderColor: 'rgba(220,53,69,1)',
                    backgroundColor: 'rgba(220,53,69,0.1)',
                    fill: true,
                    tension: 0.4,
                },
                {
                    label: 'Incomes',
                    data: incomeData,
                    borderColor: 'rgba(40,167,69,1)',
                    backgroundColor: 'rgba(40,167,69,0.1)',
                    fill: true,
                    tension: 0.4,
                }
            ]
        },
        options: {
            responsive: true,
            plugins: {
                legend: { position: 'top' },
                title: { display: true, text: 'Expenses & Incomes Over Time' }
            },
            scales: {
                y: { beginAtZero: true }
            }
        }
    });
</script>
@endpush