@extends('layouts.app')
@section('title', 'Prison Reports')
@section('content')
<div class="container-fluid">
    <div class="card text-white mb-4" style="background:linear-gradient(135deg,#0f172a,#334155)">
        <div class="card-body d-flex justify-content-between align-items-center flex-wrap gap-2">
            <div>
                <h3 class="mb-0"><i class="fas fa-chart-column me-2"></i>Prison Reports & Analytics</h3>
                <small class="opacity-75">All prison modules · as at {{ $stats['generated'] }}</small>
            </div>
            <div class="d-flex gap-2">
                <a href="{{ route('prison.reports.excel') }}" class="btn btn-light"><i class="fas fa-file-excel text-success me-1"></i> Excel</a>
                <a href="{{ route('prison.reports.pdf') }}" class="btn btn-light"><i class="fas fa-file-pdf text-danger me-1"></i> PDF</a>
            </div>
        </div>
    </div>

    {{-- Module coverage KPI tiles --}}
    <div class="row g-3 mb-4">
        @foreach($stats['modules'] as $name => $count)
        <div class="col-6 col-md-3 col-xl-2">
            <div class="card h-100"><div class="card-body py-3">
                <div class="text-muted small text-uppercase" style="font-size:.7rem">{{ $name }}</div>
                <h4 class="mb-0">{{ number_format($count) }}</h4>
            </div></div>
        </div>
        @endforeach
    </div>

    <div class="row g-3">
        <div class="col-lg-8">
            <div class="card h-100"><div class="card-header fw-semibold">Records by module</div>
                <div class="card-body"><canvas id="modulesChart" height="140"></canvas></div></div>
        </div>
        <div class="col-lg-4">
            <div class="card h-100"><div class="card-header fw-semibold">Population by gender</div>
                <div class="card-body"><canvas id="genderChart" height="200"></canvas></div></div>
        </div>
        <div class="col-md-4">
            <div class="card h-100"><div class="card-header fw-semibold">By security level</div>
                <div class="card-body"><canvas id="securityChart" height="200"></canvas></div></div>
        </div>
        <div class="col-md-4">
            <div class="card h-100"><div class="card-header fw-semibold">Discipline by category</div>
                <div class="card-body"><canvas id="disciplineChart" height="200"></canvas></div></div>
        </div>
        <div class="col-md-4">
            <div class="card h-100"><div class="card-header fw-semibold">Visits by type</div>
                <div class="card-body"><canvas id="visitsChart" height="200"></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>
(function () {
    const palette = ['#3498db','#27ae60','#e74c3c','#f39c12','#8e44ad','#16a085','#2c3e50','#d35400','#7f8c8d','#c0392b'];
    const mk = (id, type, labels, data, label) => {
        const el = document.getElementById(id);
        if (!el) return;
        if (!labels.length) { el.parentElement.innerHTML = '<div class="text-muted small text-center py-4">No data yet.</div>'; return; }
        new Chart(el, {
            type: type,
            data: { labels: labels, datasets: [{ label: label || '', data: data, backgroundColor: palette }] },
            options: { responsive: true, plugins: { legend: { display: type !== 'bar' } }, scales: type === 'bar' ? { y: { beginAtZero: true } } : {} }
        });
    };
    const modules = @json($stats['modules']);
    mk('modulesChart', 'bar', Object.keys(modules), Object.values(modules), 'Records');
    const g = @json($stats['charts']['gender']);     mk('genderChart','doughnut',Object.keys(g),Object.values(g));
    const s = @json($stats['charts']['security']);    mk('securityChart','doughnut',Object.keys(s),Object.values(s));
    const d = @json($stats['charts']['discipline']);  mk('disciplineChart','doughnut',Object.keys(d),Object.values(d));
    const v = @json($stats['charts']['visits']);      mk('visitsChart','doughnut',Object.keys(v),Object.values(v));
})();
</script>
@endpush