{{-- resources/views/reports/analytics.blade.php — PACS Reports & Analytics (6.0) --}}
@extends('layouts.app')
@section('title', 'Reports & Analytics - ICMIS')
@push('styles')
<style>
    .kpi{border:none;border-radius:16px;color:#fff;overflow:hidden;position:relative}
    .kpi .v{font-size:2.2rem;font-weight:700;line-height:1}
    .kpi .l{font-size:.78rem;opacity:.9;text-transform:uppercase;letter-spacing:.5px}
    .kpi i{position:absolute;right:14px;top:14px;font-size:2.4rem;opacity:.25}
    .g1{background:linear-gradient(135deg,#2c3e50,#3498db)}.g2{background:linear-gradient(135deg,#16a085,#27ae60)}
    .g3{background:linear-gradient(135deg,#8e44ad,#9b59b6)}.g4{background:linear-gradient(135deg,#c0392b,#e74c3c)}
    .g5{background:linear-gradient(135deg,#d35400,#f39c12)}
    .chart-card{border:none;border-radius:16px;box-shadow:0 2px 10px rgba(0,0,0,.06)}
    .chart-card .card-header{background:transparent;border-bottom:1px solid #eef0f3;font-weight:600}
</style>
@endpush
@section('content')
<div class="container-fluid">
    <div class="d-flex justify-content-between align-items-center mb-4">
        <div><h2 class="fw-bold mb-1">Reports &amp; Analytics</h2>
            <p class="text-muted mb-0">Probation &amp; Aftercare Service — live caseload intelligence</p></div>
        <div class="btn-group">
            <a href="{{ route('reports.probation') }}" class="btn btn-outline-primary"><i class="fas fa-table"></i> Case Data</a>
            <a href="{{ route('reports.probation', ['export'=>'csv']) }}" class="btn btn-success"><i class="fas fa-file-excel"></i> Export CSV</a>
        </div>
    </div>

    <div class="row g-3 mb-4">
        <div class="col-md"><div class="kpi g1 p-3"><i class="fas fa-folder-open"></i><div class="v">{{ $kpis['total'] }}</div><div class="l">Total Cases</div></div></div>
        <div class="col-md"><div class="kpi g2 p-3"><i class="fas fa-user-clock"></i><div class="v">{{ $kpis['active'] }}</div><div class="l">Active</div></div></div>
        <div class="col-md"><div class="kpi g3 p-3"><i class="fas fa-check-circle"></i><div class="v">{{ $kpis['completed'] }}</div><div class="l">Completed</div></div></div>
        <div class="col-md"><div class="kpi g4 p-3"><i class="fas fa-triangle-exclamation"></i><div class="v">{{ $kpis['breached'] }}</div><div class="l">Breached</div></div></div>
        <div class="col-md"><div class="kpi g5 p-3"><i class="fas fa-gauge-high"></i><div class="v">{{ $kpis['compliance'] }}%</div><div class="l">Compliance</div></div></div>
    </div>

    <div class="row g-3">
        <div class="col-lg-8"><div class="card chart-card"><div class="card-header">Intake Trend — last 6 months</div><div class="card-body"><canvas id="trend" height="90"></canvas></div></div></div>
        <div class="col-lg-4"><div class="card chart-card"><div class="card-header">Risk Distribution (6.1)</div><div class="card-body"><canvas id="risk" height="190"></canvas></div></div></div>
        <div class="col-lg-5"><div class="card chart-card"><div class="card-header">Caseload by Work-stream</div><div class="card-body"><canvas id="ctype" height="190"></canvas></div></div></div>
        <div class="col-lg-4"><div class="card chart-card"><div class="card-header">Caseload by Status</div><div class="card-body"><canvas id="cstatus" height="190"></canvas></div></div></div>
        <div class="col-lg-3"><div class="card chart-card"><div class="card-header">Reports Pipeline</div><div class="card-body"><canvas id="creports" height="190"></canvas></div></div></div>
        <div class="col-lg-12"><div class="card chart-card"><div class="card-header">Cases per Officer (6.4)</div><div class="card-body"><canvas id="cofficer" height="70"></canvas></div></div></div>
    </div>
</div>
@endsection
@push('scripts')
<script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.1/dist/chart.umd.min.js"></script>
<script>
    const palette=['#3498db','#27ae60','#9b59b6','#e74c3c','#f39c12','#16a085','#34495e','#e67e22','#7f8c8d','#2980b9'];
    const baseOpts={plugins:{legend:{position:'bottom',labels:{boxWidth:12,padding:14}}}};
    const kv=o=>({labels:Object.keys(o),data:Object.values(o)});
    const hl=s=>s.replace(/_/g,' ').replace(/\b\w/g,c=>c.toUpperCase());
    const $=id=>document.getElementById(id);

    let d=kv(@json((object)$trend));
    new Chart($('trend'),{type:'line',data:{labels:d.labels,datasets:[{label:'New cases',data:d.data,fill:true,borderColor:'#3498db',backgroundColor:'rgba(52,152,219,.12)',tension:.35,pointRadius:4}]},options:baseOpts});
    d=kv(@json((object)$byRisk));
    new Chart($('risk'),{type:'doughnut',data:{labels:d.labels,datasets:[{data:d.data,backgroundColor:['#e74c3c','#f39c12','#27ae60','#7f8c8d','#34495e']}]},options:baseOpts});
    d=kv(@json((object)$byType));
    new Chart($('ctype'),{type:'bar',data:{labels:d.labels.map(hl),datasets:[{data:d.data,backgroundColor:palette}]},options:{...baseOpts,plugins:{legend:{display:false}},indexAxis:'y'}});
    d=kv(@json((object)$byStatus));
    new Chart($('cstatus'),{type:'polarArea',data:{labels:d.labels.map(hl),datasets:[{data:d.data,backgroundColor:palette}]},options:baseOpts});
    d=kv(@json((object)$reportsByStatus));
    new Chart($('creports'),{type:'doughnut',data:{labels:d.labels,datasets:[{data:d.data,backgroundColor:palette}]},options:baseOpts});
    d=kv(@json((object)$byOfficer));
    new Chart($('cofficer'),{type:'bar',data:{labels:d.labels,datasets:[{label:'Cases',data:d.data,backgroundColor:'#16a085'}]},options:{...baseOpts,plugins:{legend:{display:false}}}});
</script>
@endpush