@extends('layouts.app')
@section('title', 'Disposal Outcomes - Reports')

@section('content')
<div class="container-fluid">
    <div class="d-flex justify-content-between align-items-center mb-4">
        <div>
            <h2 class="fw-bold mb-0">Disposal Outcomes</h2>
            <nav aria-label="breadcrumb"><ol class="breadcrumb mb-0">
                <li class="breadcrumb-item"><a href="{{ route('reports.index') }}">Reports</a></li>
                <li class="breadcrumb-item active">Disposals</li>
            </ol></nav>
        </div>
        <a href="{{ route('reports.index') }}" class="btn btn-outline-secondary"><i class="fas fa-arrow-left"></i> Back</a>
    </div>

    {{-- summary --}}
    <div class="row g-3 mb-4">
        <div class="col-6 col-md-3"><div class="card bg-primary text-white"><div class="card-body">
            <div class="small text-uppercase">Finalized cases</div><h3 class="mb-0">{{ number_format($total) }}</h3></div></div></div>
        <div class="col-6 col-md-3"><div class="card bg-secondary text-white"><div class="card-body">
            <div class="small text-uppercase">Not yet finalized</div><h3 class="mb-0">{{ number_format($notFinalized) }}</h3></div></div></div>
        <div class="col-6 col-md-3"><div class="card bg-info text-white"><div class="card-body">
            <div class="small text-uppercase">Converted</div><h3 class="mb-0">{{ number_format($bySource['converted'] ?? 0) }}</h3>
            <small>from social inquiry</small></div></div></div>
        <div class="col-6 col-md-3"><div class="card bg-success text-white"><div class="card-body">
            <div class="small text-uppercase">Fines total</div><h3 class="mb-0">KES {{ number_format($fines ?? 0, 0) }}</h3></div></div></div>
    </div>

    <div class="row g-3">
        {{-- by disposal method --}}
        <div class="col-lg-8">
            <div class="card"><div class="card-header bg-white"><strong>By Disposal Method</strong></div>
                <div class="card-body p-0">
                    <table class="table table-hover align-middle mb-0">
                        <thead class="table-light"><tr><th>Disposal method</th><th class="text-center">Cases</th><th style="width:40%">Share</th></tr></thead>
                        <tbody>
                            @php $max = max(1, count($counts) ? max($counts) : 1); @endphp
                            @forelse($labels as $slug => $label)
                                @php $c = $counts[$slug] ?? 0; @endphp
                                <tr class="{{ $c ? '' : 'text-muted' }}">
                                    <td>{{ $label }}</td>
                                    <td class="text-center">{{ $c }}</td>
                                    <td>
                                        <div class="progress" style="height:8px;border-radius:6px">
                                            <div class="progress-bar" style="width: {{ round($c / $max * 100) }}%"></div>
                                        </div>
                                    </td>
                                </tr>
                            @empty
                                <tr><td colspan="3" class="text-center text-muted py-4">No disposals configured.</td></tr>
                            @endforelse
                        </tbody>
                    </table>
                </div>
            </div>
        </div>

        {{-- source split --}}
        <div class="col-lg-4">
            <div class="card"><div class="card-header bg-white"><strong>Source of Case</strong></div>
                <div class="card-body">
                    <div class="d-flex justify-content-between border-bottom py-2">
                        <span>Converted from social inquiry</span><strong>{{ $bySource['converted'] ?? 0 }}</strong></div>
                    <div class="d-flex justify-content-between py-2">
                        <span>Directly captured</span><strong>{{ $bySource['direct'] ?? 0 }}</strong></div>
                    <p class="text-muted small mt-2 mb-0">Shows how many supervision cases originated from a finalized social inquiry versus being registered directly.</p>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection