{{-- resources/views/probation/cases/show.blade.php
     Tabbed case workspace — one screen for every work-stream. Each tab lives in
     its own partial (probation/cases/_*.blade.php). --}}
@extends('layouts.app')
@section('title', $case->serial_number . ' - ICMIS')

@push('styles')
<style>
    .ws-head{background:linear-gradient(135deg,#2c3e50,#34495e);color:#fff;border-radius:16px;padding:22px 26px;margin-bottom:18px;position:relative;overflow:hidden}
    .ws-head h2{font-weight:700;margin:0}
    .ws-head .serial{opacity:.85;font-size:.9rem}
    .ws-head .ws-photo{width:72px;height:72px;border-radius:12px;object-fit:cover;border:2px solid rgba(255,255,255,.6);background:#fff}
    .ws-flags .badge{margin-right:4px}
    .nav-pills .nav-link{color:#34495e;border-radius:30px;font-size:.86rem;padding:6px 14px;margin:0 4px 6px 0}
    .nav-pills .nav-link.active{background:#16a085}
    .tab-card{border:none;border-radius:14px;box-shadow:0 2px 10px rgba(0,0,0,.05)}
    .mini{font-size:.85rem}
    .timeline li{position:relative;padding-left:18px;margin-bottom:10px}
    .timeline li::before{content:'';position:absolute;left:0;top:5px;width:8px;height:8px;border-radius:50%;background:#16a085}
    .sub-tabs .nav-link{font-size:.84rem;padding:6px 12px}
</style>
@endpush

@section('content')
@php
    $rt      = 'probation.' . $module['routeKey'];
    $ct      = $module['caseType'];
    $isSI    = $ct === 'social_inquiry';
    $isSup   = !empty($module['isSupervision']);   // Supervision / Interventions / Empowerment / Completion
    $isCso   = $ct === 'community_service';
    $remarks = !empty($module['hasRemarks']);
    $residency = $module['residency'] ?? null;
    $hasOutcome = empty($module['noOutcome']);
    $alerts  = $alerts ?? [];

    // tab list — "Supervision Summary" sits between the last two tabs (CSO analysis 18)
    $tabs = [['t-overview', 'Overview'], ['t-ledger', 'Case Ledger']];
    if (!$isSI)   $tabs[] = ['t-nok', 'Next of Kin'];
    if ($isSI)    $tabs[] = ['t-inquiry', 'Interviews'];
    $tabs[] = ['t-assess', 'Assessments'];
    $tabs[] = ['t-conf', 'Case Conferences'];
    $tabs[] = ['t-reports', 'Reports'];
    if ($residency) $tabs[] = ['t-residency', ['probation_hostel' => 'Hostel', 'halfway_house' => 'Halfway House', 'borstal' => 'Borstal Vacancy'][$residency]];
    if ($isCso)   $tabs[] = ['t-cso', 'CSO Quantification'];
    if ($isSup) {
        $tabs[] = ['t-superv', 'Supervision'];
        $tabs[] = ['t-interv', 'Interventions'];
        $tabs[] = ['t-emp', 'Empowerment'];
    }
    $tabs[] = ['t-docs', 'Documents'];
    if ($remarks) $tabs[] = ['t-remarks', 'Remarks'];
    if ($isSup)   $tabs[] = ['t-complete', 'Completion'];
    if ($hasOutcome) $tabs[] = ['t-outcome', 'Outcome'];
    if ($isSup) array_splice($tabs, count($tabs) - 1, 0, [['t-summary', 'Supervision Summary']]);
@endphp
<div class="container-fluid">
    @include('probation.cases._aftercare_nav')

    @if(session('duplicate_url'))
        <div class="alert alert-warning"><a href="{{ session('duplicate_url') }}">Open the matching case</a></div>
    @endif

    {{-- header --}}
    <div class="ws-head d-flex justify-content-between align-items-center flex-wrap gap-3">
        <div class="d-flex align-items-center gap-3">
            @if($case->photo_path)
                <img src="{{ asset('storage/' . $case->photo_path) }}" class="ws-photo" alt="Photo">
            @endif
            <div>
                <h2>{{ optional($case->prisoner)->name }}</h2>
                <div class="serial">
                    @unless($isCso)<span class="d-inline-block rounded-circle me-1 align-middle" style="width:10px;height:10px;background:{{ $case->colorHex() }};border:1px solid #fff" title="Colour code: {{ $case->colorLabel() }}"></span>@endunless
                    {{ $module['clientLabel'] ?? 'Offender' }} · Ref. No. {{ $case->serial_number }} · {{ $module['title'] }} · {{ optional($case->branch)->branch_name }}
                    @if($case->aftercare_category) · {{ config('probation.aftercare_categories')[$case->aftercare_category] ?? $case->aftercare_category }}@endif
                    @if($case->is_voluntary) · <span class="badge bg-info text-dark">Voluntary supervision</span>@endif
                </div>
                @if($case->wasConverted())
                    <div class="mt-1"><span class="badge bg-light text-dark border"><i class="fas fa-code-branch me-1"></i>
                        Retrieved from {{ \App\Models\ProbationCase::labelForType($case->converted_from_case_type) }}
                        ({{ $case->converted_from_serial }}) on {{ optional($case->converted_at)->format('d M Y') }}</span></div>
                @else
                    <div class="mt-1"><span class="badge bg-light text-dark border"><i class="fas fa-circle-plus me-1"></i>{{ $isSI ? 'Registered' : 'Direct placement' }} — {{ $module['title'] }}</span></div>
                @endif
                <div class="ws-flags mt-2">
                    <span class="badge {{ $case->getStatusBadgeClass() }}"><i class="fas {{ $case->getStatusIcon() }} me-1"></i>{{ $case->status_label }}</span>
                    @if($isSup)<span class="badge {{ $case->getIntensityBadgeClass() }}"><i class="fas {{ $case->getIntensityIcon() }} me-1"></i>{{ $case->intensity ? ucfirst($case->intensity).' intensity' : 'No intensity set' }}</span>@endif
                    @if($case->isAssigned())<span class="badge bg-primary"><i class="fas fa-user-check me-1"></i>{{ optional($case->officer)->name }}</span>@else<span class="badge bg-secondary"><i class="fas fa-user-slash me-1"></i>Unassigned</span>@endif
                    @foreach(config('probation_workflow.flags') as $f => $fl)
                        @if($case->{$f})<span class="badge {{ in_array($f, ['is_violent_extremist', 'is_child_sexual_offence']) ? 'bg-danger' : 'bg-warning text-dark' }}">{{ $fl }}</span>@endif
                    @endforeach
                </div>
            </div>
        </div>
        <div class="text-end">
            <a href="{{ route($rt.'.edit', $case->id) }}" class="btn btn-light btn-sm"><i class="fas fa-edit"></i> Edit</a>
            @if($case->completion && $case->completion->certificate_no && empty($module['noCertificate']))
                <a href="{{ route('probation.cases.certificate', $case->id) }}" target="_blank" class="btn btn-warning btn-sm"><i class="fas fa-award"></i> Certificate</a>
            @endif
            <a href="{{ route($rt.'.index') }}" class="btn btn-outline-light btn-sm"><i class="fas fa-arrow-left"></i></a>
        </div>
    </div>

    {{-- alerts: progress reports / conferences / plan due --}}
    @if(count($alerts))
        <div class="mb-3">
            @foreach($alerts as $al)
                <div class="alert alert-{{ $al['level'] }} py-2 mb-1 small d-flex justify-content-between align-items-center">
                    <span><i class="fas fa-bell me-1"></i>{{ $al['text'] }}</span>
                    @if($al['tab'])<button type="button" class="btn btn-sm btn-link p-0" onclick="var b=document.querySelector('[data-bs-target=&quot;#{{ $al['tab'] }}&quot;]'); if(b) bootstrap.Tab.getOrCreateInstance(b).show();">Open</button>@endif
                </div>
            @endforeach
        </div>
    @endif

    {{-- tabs --}}
    <ul class="nav nav-pills mb-3" role="tablist">
        @foreach($tabs as $i => [$id, $label])
            <li class="nav-item"><button class="nav-link {{ $i === 0 ? 'active' : '' }}" data-bs-toggle="pill" data-bs-target="#{{ $id }}">{{ $label }}</button></li>
        @endforeach
    </ul>

    <div class="tab-content">
        <div class="tab-pane fade show active" id="t-overview">@include('probation.cases._overview')</div>

        <div class="tab-pane fade" id="t-ledger">
            @include('probation.cases._supervision_ledger', ['case' => $case])
            @include('probation.cases._ledger', ['case' => $case])
        </div>

        @if(!$isSI)
        <div class="tab-pane fade" id="t-nok">@include('probation.cases._next_of_kin', ['case' => $case])</div>
        @endif

        @if($isSI)
        <div class="tab-pane fade" id="t-inquiry">@include('probation.cases._interviews')</div>
        @endif

        <div class="tab-pane fade" id="t-assess">
            @include('probation.cases._flags')
            @include('probation.cases._assessments', ['case' => $case])
        </div>

        <div class="tab-pane fade" id="t-conf">@include('probation.cases._conferences')</div>

        <div class="tab-pane fade" id="t-reports">@include('probation.cases._reports')</div>

        @if($residency)
        <div class="tab-pane fade" id="t-residency">@include('probation.cases._residency')</div>
        @endif

        @if($isCso)
        <div class="tab-pane fade" id="t-cso">@include('probation.cases._cso_work', ['case' => $case, 'agencies' => $agencies ?? collect()])</div>
        @endif

        @if($isSup)
        <div class="tab-pane fade" id="t-superv">@include('probation.cases._supervision_tab')</div>
        <div class="tab-pane fade" id="t-interv">@include('probation.cases._interventions', ['case' => $case])</div>
        <div class="tab-pane fade" id="t-emp">@include('probation.cases._empowerment')</div>
        @endif

        <div class="tab-pane fade" id="t-docs">@include('probation.cases._documents')</div>

        @if($remarks)
        <div class="tab-pane fade" id="t-remarks">@include('probation.cases._remarks', ['case' => $case])</div>
        @endif

        @if($isSup)
        <div class="tab-pane fade" id="t-summary">@include('probation.cases._summary')</div>
        <div class="tab-pane fade" id="t-complete">@include('probation.cases._completion')</div>
        @endif

        @if($hasOutcome)
        <div class="tab-pane fade" id="t-outcome">@include('probation.cases._outcome', ['case' => $case])</div>
        @endif
    </div>
</div>

@if(session('open_tab'))
<script>
document.addEventListener('DOMContentLoaded', function () {
    var show = function (sel) { var b = document.querySelector('[data-bs-target="#' + sel + '"]'); if (b && window.bootstrap) bootstrap.Tab.getOrCreateInstance(b).show(); };
    show(@json(session('open_tab')));
    @if(session('open_sub')) show(@json(session('open_sub'))); @endif
});
</script>
@endif
@endsection