@extends('layouts.app')
@section('title','Reports')
@section('heading','Reports & insights')
@section('content')
<div class="page-actions"><div><p class="eyebrow mb-1">PORTFOLIO ANALYTICS</p><h2>Collection performance</h2><p>Issued value, payments, outstanding status, and ageing.</p></div></div>
<form class="filter-bar mb-4" method="GET"><div><label class="form-label">From</label><input class="form-control" type="date" name="from" value="{{ request('from') }}"></div><div><label class="form-label">To</label><input class="form-control" type="date" name="to" value="{{ request('to') }}"></div><button class="btn btn-dark align-self-end">Apply range</button>@if(request()->hasAny(['from','to']))<a class="btn btn-link align-self-end" href="{{ route('reports') }}">Clear</a>@endif</form>
<div class="row g-3 mb-4"><div class="col-md-4"><div class="summary-tile"><span>Issued value</span><strong>LKR {{ number_format($invoices->sum('total_amount'),2) }}</strong><small>{{ $invoices->count() }} invoices in range</small></div></div><div class="col-md-4"><div class="summary-tile success"><span>Payments received</span><strong>LKR {{ number_format($invoices->sum(fn($i)=>$i->paid_amount),2) }}</strong><small>Across selected invoices</small></div></div><div class="col-md-4"><div class="summary-tile danger"><span>Outstanding</span><strong>LKR {{ number_format($invoices->sum(fn($i)=>$i->outstanding_amount),2) }}</strong><small>{{ $invoices->filter->is_overdue->count() }} overdue invoices</small></div></div></div>
<div class="row g-4"><div class="col-xl-8"><div class="chart-card"><div><h2>Issued versus paid</h2><p>Six-month value trend</p></div><div class="chart-wrap"><canvas id="trendChart"></canvas></div></div></div><div class="col-xl-4"><div class="chart-card"><div><h2>Outstanding by status</h2><p>Open balance distribution</p></div><div class="chart-wrap"><canvas id="statusChart"></canvas></div></div></div><div class="col-12"><div class="chart-card"><div><h2>Invoice ageing</h2><p>Outstanding value by age bucket</p></div><div class="chart-wrap chart-short"><canvas id="ageingChart"></canvas></div></div></div></div>
@push('scripts')<script src="https://cdn.jsdelivr.net/npm/chart.js@4.5.0/dist/chart.umd.min.js"></script><script>Chart.defaults.font.family='Inter, system-ui, sans-serif';Chart.defaults.color='#69758d';const grid={color:'#edf0f5'};new Chart(document.getElementById('trendChart'),{type:'line',data:{labels:@json($monthLabels),datasets:[{label:'Issued',data:@json($monthlyIssued),borderColor:'#3569f3',backgroundColor:'rgba(53,105,243,.1)',fill:true,tension:.35},{label:'Paid',data:@json($monthlyPaid),borderColor:'#169b62',backgroundColor:'rgba(22,155,98,.08)',fill:true,tension:.35}]},options:{maintainAspectRatio:false,plugins:{legend:{position:'bottom'}},scales:{y:{beginAtZero:true,grid},x:{grid:{display:false}}}}});new Chart(document.getElementById('statusChart'),{type:'doughnut',data:{labels:@json($statusData->keys()),datasets:[{data:@json($statusData->values()),backgroundColor:['#3569f3','#7351cf','#e1a32b','#d43c4d','#169b62','#8692a7'],borderWidth:0}]},options:{maintainAspectRatio:false,cutout:'68%',plugins:{legend:{position:'bottom',labels:{boxWidth:10}}}}});new Chart(document.getElementById('ageingChart'),{type:'bar',data:{labels:@json($ageingData->keys()),datasets:[{label:'Outstanding',data:@json($ageingData->values()),backgroundColor:['#75a0ff','#5f83e8','#e2ae43','#e17850','#d43c4d'],borderRadius:7}]},options:{maintainAspectRatio:false,plugins:{legend:{display:false}},scales:{y:{beginAtZero:true,grid},x:{grid:{display:false}}}}});</script>@endpush
@endsection