@extends('layouts.app')
@section('title', 'Finance Dashboard')
@section('content')
<div class="grid grid-cols-2 md:grid-cols-5 gap-4 mb-6">
    <div class="stat-card"><p class="text-xs text-gray-500">Revenue Today</p><p class="text-xl font-bold text-green-600">KES {{ number_format($stats['revenue_today']) }}</p></div>
    <div class="stat-card"><p class="text-xs text-gray-500">Revenue (Month)</p><p class="text-xl font-bold">KES {{ number_format($stats['revenue_month']) }}</p></div>
    <div class="stat-card"><p class="text-xs text-gray-500">Expenses (Month)</p><p class="text-xl font-bold text-red-600">KES {{ number_format($stats['expenses_month']) }}</p></div>
    <div class="stat-card"><p class="text-xs text-gray-500">Receivables</p><p class="text-xl font-bold text-amber-600">KES {{ number_format($stats['receivables']) }}</p></div>
    <div class="stat-card"><p class="text-xs text-gray-500">Claims Pending</p><p class="text-xl font-bold text-blue-600">KES {{ number_format($stats['claims_pending']) }}</p></div>
</div>
<div class="grid grid-cols-2 md:grid-cols-3 gap-3 mb-6">
    <a href="{{ route('finance.income') }}" class="btn-primary text-center">Income Report</a>
    <a href="{{ route('finance.expenses') }}" class="btn-secondary text-center">Expenses</a>
    <a href="{{ route('finance.receivables') }}" class="btn-secondary text-center">Receivables</a>
    <a href="{{ route('finance.collections') }}" class="btn-secondary text-center">Cash Collections</a>
    <a href="{{ route('finance.revenue') }}" class="btn-secondary text-center">Revenue Analysis</a>
</div>
<div class="bg-white rounded-xl border p-6">
    <h3 class="font-semibold mb-4">Monthly Revenue Trend</h3>
    <canvas id="revenueChart" height="200"></canvas>
</div>
@endsection
@section('scripts')
<script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.0/dist/chart.umd.min.js"></script>
<script>new Chart(document.getElementById('revenueChart'),{type:'bar',data:{labels:@json($revenueByDay->pluck('date')),datasets:[{label:'Revenue (KES)',data:@json($revenueByDay->pluck('total')),backgroundColor:'rgba(14,165,233,0.7)',borderRadius:6}]},options:{responsive:true,plugins:{legend:{display:false}},scales:{y:{beginAtZero:true}}}});</script>
@endsection