{{-- resources/views/probation/cases/edit.blade.php --}}
@extends('layouts.app')
@section('title', 'Edit ' . $case->serial_number)
@section('content')
<div class="container-fluid">
    <h2 class="fw-bold mb-3">Edit {{ $case->serial_number }}</h2>
    @if($errors->any())<div class="alert alert-danger"><ul class="mb-0">@foreach($errors->all() as $e)<li>{{ $e }}</li>@endforeach</ul></div>@endif
    <form method="POST" action="{{ route('probation.' . $module['routeKey'] . '.update', $case->id) }}">
        @csrf @method('PUT')
        <div class="card"><div class="card-body row g-3">

            <div class="col-md-4">
                <label class="form-label">Assigned officer</label>
                <select name="assigned_officer_id" id="sel-officer" class="form-select">
                    <option value="">— Select officer —</option>
                    @foreach($officers as $o)<option value="{{ $o->id }}" {{ $case->assigned_officer_id==$o->id ? 'selected' : '' }}>{{ $o->name }}</option>@endforeach
                </select>
                <div class="mt-2"><span id="prev-officer" class="badge"></span></div>
            </div>

            <div class="col-md-4">
                <label class="form-label">Status</label>
                <select name="status" id="sel-status" class="form-select" required>
                    <option value="" disabled {{ !$case->status ? 'selected' : '' }}>— Select status —</option>
                    {{-- "Under inquiry" is no longer offered; "Open" covers it (kept only when a case still carries it) --}}
                    @foreach(array_merge(['open','allocated'], $case->status === 'under_inquiry' ? ['under_inquiry'] : [], ['reported','awaiting_court','under_supervision','breached','completed','closed']) as $s)
                        <option value="{{ $s }}" {{ $case->status==$s ? 'selected' : '' }}>{{ ucwords(str_replace('_',' ', $s)) }}</option>
                    @endforeach
                </select>
                <div class="mt-2"><span id="prev-status" class="badge"></span></div>
            </div>

            <div class="col-md-4">
                <label class="form-label">Supervision intensity</label>
                <select name="intensity" id="sel-intensity" class="form-select">
                    <option value="" {{ !$case->intensity ? 'selected' : '' }}>— Select intensity —</option>
                    @foreach(['high','moderate','low'] as $i)<option value="{{ $i }}" {{ $case->intensity==$i ? 'selected' : '' }}>{{ ucfirst($i) }}</option>@endforeach
                </select>
                <div class="mt-2"><span id="prev-intensity" class="badge"></span></div>
            </div>

            <div class="col-md-4">
                <label class="form-label">Tribe</label>
                <input type="text" name="tribe" class="form-control" value="{{ old('tribe', $case->tribe) }}">
            </div>
            <div class="col-md-4">
                <label class="form-label">CRC No.</label>
                <input type="text" name="crc_number" class="form-control" value="{{ old('crc_number', $case->crc_number) }}">
            </div>
            <div class="col-md-4">
                <label class="form-label">Offence / Section</label>
                <input type="text" name="offence" class="form-control" value="{{ old('offence', $case->offence) }}">
            </div>

            <div class="col-12">
                <button class="btn btn-primary"><i class="fas fa-save"></i> Save</button>
                <a href="{{ route('probation.' . $module['routeKey'] . '.show', $case->id) }}" class="btn btn-outline-secondary">Cancel</a>
            </div>
        </div></div>
    </form>
</div>

{{-- Live badge previews. Native <option> can't render icons/colour, so we mirror the
     ProbationCase badge helpers here and update a preview badge as the user selects. --}}
<script>
(function () {
    var STATUS = {
        open:              ['bg-warning text-dark', 'fa-folder-open'],
        allocated:         ['bg-warning text-dark', 'fa-user-check'],
        under_inquiry:     ['bg-warning text-dark', 'fa-magnifying-glass'],
        reported:          ['bg-info',              'fa-file-lines'],
        awaiting_court:    ['bg-info',              'fa-gavel'],
        under_supervision: ['bg-primary',           'fa-user-shield'],
        breached:          ['bg-danger',            'fa-triangle-exclamation'],
        completed:         ['bg-success',           'fa-circle-check'],
        closed:            ['bg-success',           'fa-circle-check']
    };
    var INTENSITY = {
        high:     ['bg-danger',            'fa-signal'],
        moderate: ['bg-warning text-dark', 'fa-wave-square'],
        low:      ['bg-success',           'fa-minus']
    };
    var titleCase = function (s) {
        return s.replace(/_/g, ' ').replace(/\b\w/g, function (c) { return c.toUpperCase(); });
    };
    var paint = function (badge, cls, icon, label) {
        badge.className = 'badge ' + cls;
        badge.innerHTML = '<i class="fas ' + icon + ' me-1"></i>' + label;
    };

    var selStatus = document.getElementById('sel-status');
    var prevStatus = document.getElementById('prev-status');
    var renderStatus = function () {
        var v = selStatus.value;
        if (!v) { paint(prevStatus, 'bg-light text-muted', 'fa-circle-dot', 'No status selected'); return; }
        var m = STATUS[v] || ['bg-warning text-dark', 'fa-circle-dot'];
        paint(prevStatus, m[0], m[1], titleCase(v));
    };
    selStatus.addEventListener('change', renderStatus); renderStatus();

    var selInt = document.getElementById('sel-intensity');
    var prevInt = document.getElementById('prev-intensity');
    var renderInt = function () {
        var v = selInt.value;
        if (!v) { paint(prevInt, 'bg-secondary', 'fa-circle-question', 'No intensity set'); return; }
        var m = INTENSITY[v];
        paint(prevInt, m[0], m[1], titleCase(v) + ' intensity');
    };
    selInt.addEventListener('change', renderInt); renderInt();

    var selOff = document.getElementById('sel-officer');
    var prevOff = document.getElementById('prev-officer');
    var renderOff = function () {
        if (selOff.value) {
            var name = selOff.options[selOff.selectedIndex].text;
            paint(prevOff, 'bg-primary', 'fa-user-check', name);
        } else {
            paint(prevOff, 'bg-secondary', 'fa-user-slash', 'Unassigned');
        }
    };
    selOff.addEventListener('change', renderOff); renderOff();
})();
</script>
@endsection