@extends('adminlte::page')
@section('title','Dashboard')
@section('content_header')<div class="d-flex justify-content-between align-items-center"><h1>Adoption information system</h1><span class="text-muted">{{ now()->format('d M Y') }}</span></div>@stop
@section('content')
<div class="row">
@php $cards=[
['total','Total recorded cases','info','folder',route('children.index')],
['approved','Approved cases','success','check',route('children.index',['status'=>'approved'])],
['pending','Awaiting review','warning','clock',route('children.index',['status'=>'submitted'])],
['rejected','Rejected / correction needed','danger','exclamation',route('children.index',['status'=>'rejected'])],
['search_requests','Total information requests','primary','search',route('search-requests.index')],
['open_requests','Open information requests','secondary','tasks',route('search-requests.index',['open'=>1])]
]; @endphp
@foreach($cards as [$key,$label,$color,$icon,$url])<div class="col-md-4"><div class="small-box bg-{{ $color }}"><div class="inner"><h3>{{ number_format($stats[$key]) }}</h3><p>{{ $label }}</p></div><div class="icon"><i class="fas fa-{{ $icon }}"></i></div><a href="{{ $url }}" class="small-box-footer">View more <i class="fas fa-arrow-circle-right"></i></a></div></div>@endforeach
</div>
<div class="card"><div class="card-header"><h3 class="card-title">Cases by country</h3></div><div class="card-body"><div style="height:360px"><canvas id="countryChart"></canvas></div></div></div>
@can('view monitoring')<div class="card"><div class="card-body"><a href="{{ route('monitoring.index') }}" class="btn btn-outline-primary">Open management monitoring</a></div></div>@endcan
@stop
@section('js')
<script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.4/dist/chart.umd.min.js"></script>
<script>
const countryData=@json($countries->values());
new Chart(document.getElementById('countryChart'),{type:'bar',data:{labels:countryData.map(x=>x.country),datasets:[{label:'Cases',data:countryData.map(x=>x.total),borderWidth:1}]},options:{responsive:true,maintainAspectRatio:false,indexAxis:'y',plugins:{legend:{display:false}},scales:{x:{beginAtZero:true,ticks:{precision:0}}}}});
</script>
@stop