@extends('layouts.app')
@section('title', $title . ' - ICMIS')

@push('styles')
<style>
    @media print { .no-print { display: none !important; } .ledger-table { font-size: 10px; } }
    .ledger-table th, .ledger-table td { white-space: nowrap; vertical-align: middle; }
    .ledger-table thead th { background: #2c3e50; color: #fff; text-align: center; font-size: .78rem; }
    .ledger-table tbody td { font-size: .8rem; }
</style>
@endpush

@section('content')
<div class="container-fluid">
    <div class="d-flex justify-content-between align-items-center mb-3 no-print">
        <h4 class="fw-bold mb-0">{{ $title }}</h4>
        <div>
            <button onclick="window.print()" class="btn btn-outline-secondary btn-sm"><i class="fas fa-print"></i> Print</button>
            <a href="{{ route('reports.probation') }}" class="btn btn-outline-secondary btn-sm"><i class="fas fa-arrow-left"></i> Back</a>
        </div>
    </div>
    <h5 class="text-center d-none d-print-block mb-3">{{ strtoupper($title) }}</h5>

    <div class="card"><div class="card-body table-responsive">
        <table class="table table-bordered table-sm ledger-table mb-0">
            <thead>
                <tr>
                    <th rowspan="2">Serial Number</th>
                    <th rowspan="2">Name</th>
                    <th rowspan="2">Category</th>
                    <th rowspan="2">Sex</th>
                    <th rowspan="2">Age</th>
                    <th rowspan="2">ID No / Passport / Birth Cert. No</th>
                    <th rowspan="2">Offence &amp; Section</th>
                    <th rowspan="2">CRC Number</th>
                    <th rowspan="2">Officer Allocated</th>
                    <th rowspan="2">Period</th>
                    <th rowspan="2">Date Released</th>
                    <th rowspan="2">Date Completed</th>
                    <th colspan="3">Nature of Completion</th>
                    <th rowspan="2">Empowerment</th>
                    <th rowspan="2">Remarks</th>
                </tr>
                <tr>
                    <th>SAT</th>
                    <th>UNSAT</th>
                    <th>ABS</th>
                </tr>
            </thead>
            <tbody>
                @forelse($rows as $r)
                    <tr>
                        <td><strong>{{ $r->case->serial_number }}</strong></td>
                        <td>{{ $r->name ?? '—' }}</td>
                        <td>{{ config('probation.aftercare_categories')[$r->case->aftercare_category] ?? 'Borstal' }}</td>
                        <td>{{ $r->sex ? ucfirst($r->sex) : '—' }}</td>
                        <td>{{ $r->age ?? '—' }}</td>
                        <td>{{ $r->id_passport ?? '—' }}</td>
                        <td>{{ $r->offence ?? '—' }}</td>
                        <td>{{ $r->crc_number ?? '—' }}</td>
                        <td>{{ $r->officer ?? '—' }}</td>
                        <td>{{ ($r->placed && $r->expires) ? \Carbon\Carbon::parse($r->placed)->diffForHumans(\Carbon\Carbon::parse($r->expires), ['parts' => 2, 'syntax' => \Carbon\CarbonInterface::DIFF_ABSOLUTE]) : '—' }}</td>
                        <td>{{ $r->date_released ? \Carbon\Carbon::parse($r->date_released)->format('d M Y') : '—' }}</td>
                        <td>{{ $r->date_completed ? \Carbon\Carbon::parse($r->date_completed)->format('d M Y') : '—' }}</td>
                        <td class="text-center">{{ $r->mode === 'satisfactorily' ? '✓' : '' }}</td>
                        <td class="text-center">{{ $r->mode === 'unsatisfactorily' ? '✓' : '' }}</td>
                        <td class="text-center">{{ $r->mode === 'absconded' ? '✓' : '' }}</td>
                        <td style="white-space:normal;min-width:160px">{{ $r->empowerment ?? '—' }}</td>
                        <td style="white-space:normal;min-width:160px">{{ $r->remarks ?? '—' }}</td>
                    </tr>
                @empty
                    <tr><td colspan="17" class="text-center text-muted py-4">No cases in this ledger yet.</td></tr>
                @endforelse
            </tbody>
        </table>
    </div></div>
</div>
@endsection