{{-- resources/views/reports/expenses.blade.php --}}
@extends('layouts.app')
@section('title', 'Expense Report')
@section('page_title', 'Expense Report')
@section('page_subtitle', $from->format('d M Y') . ' — ' . $to->format('d M Y'))

@section('content')

@include('reports.partials.nav')
@include('reports.partials.filters', [
    'route'      => 'reports.expenses',
    'showExport' => true,
    'reportName' => 'expenses',
])

<div class="row g-3 mb-3">
    <div class="col-md-4">
        <div class="stat-card">
            <div class="stat-icon si-danger">
                <i class="bi bi-wallet2"></i>
            </div>
            <div>
                <div class="stat-value">
                    ${{ number_format($total, 0) }}
                </div>
                <div class="stat-label">Total Expenses</div>
            </div>
        </div>
    </div>
    <div class="col-md-4">
        <div class="stat-card">
            <div class="stat-icon si-muted">
                <i class="bi bi-receipt"></i>
            </div>
            <div>
                <div class="stat-value">{{ $count }}</div>
                <div class="stat-label">Transactions</div>
            </div>
        </div>
    </div>
    <div class="col-md-4">
        <div class="stat-card">
            <div class="stat-icon si-clay">
                <i class="bi bi-tags"></i>
            </div>
            <div>
                <div class="stat-value">{{ $by_category->count() }}</div>
                <div class="stat-label">Categories</div>
            </div>
        </div>
    </div>
</div>

<div class="row g-3">
    <div class="col-md-5">
        <div class="card">
            <div class="card-header">
                <span class="card-title">By Category</span>
            </div>
            <div class="card-body">
                @foreach($by_category as $cat => $data)
                    <div style="margin-bottom:10px;">
                        <div style="display:flex;justify-content:space-between;
                                    font-size:.8rem;margin-bottom:3px;">
                            <span class="fw-semibold">{{ $cat }}</span>
                            <span>
                                ${{ number_format($data['total'], 0) }}
                                <span style="color:var(--muted);font-size:.72rem;">
                                    ({{ $total > 0 ? round(($data['total'] / $total) * 100, 0) : 0 }}%)
                                </span>
                            </span>
                        </div>
                        <div style="background:var(--border);border-radius:3px;height:6px;overflow:hidden;">
                            <div style="height:100%;width:{{ $total > 0 ? ($data['total'] / $total) * 100 : 0 }}%;background:var(--danger);border-radius:3px;opacity:.7;"></div>
                        </div>
                    </div>
                @endforeach
            </div>
        </div>
    </div>

    <div class="col-md-7">
        <div class="card">
            <div class="card-header">
                <span class="card-title">Monthly Trend</span>
            </div>
            <div class="card-body">
                <canvas id="expenseChart" height="120"></canvas>
            </div>
        </div>
    </div>
</div>

@endsection

@push('scripts')
<script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.0/dist/chart.umd.min.js"></script>
<script>
const months = @json($by_month->keys()->values());
const amounts = @json($by_month->values());

new Chart(document.getElementById('expenseChart'), {
    type: 'bar',
    data: {
        labels: months,
        datasets: [{
            label: 'Expenses',
            data: amounts,
            backgroundColor: 'rgba(239,68,68,.2)',
            borderColor: '#ef4444',
            borderWidth: 2,
            borderRadius: 4,
        }]
    },
    options: {
        responsive: true,
        plugins: {
            legend: { display: false },
            tooltip: { callbacks: { label: c => '$' + c.parsed.y.toFixed(2) } }
        },
        scales: {
            y: {
                beginAtZero: true,
                grid: { color: '#f1f5f9' },
                ticks: { callback: v => '$' + v, font: { size: 11 } }
            },
            x: { grid: { display: false }, ticks: { font: { size: 11 } } }
        }
    }
});
</script>
@endpush