{{-- resources/views/probation/cases/create.blade.php
     Case Registry capture — adapts to the selected case type. The fields captured
     here ARE that stream's ledger. Uses $officers, $sources, $agencies, $module.
     Probation-user feedback applied:
       · Social Inquiry: full Case (Referral) Ledger; Disposal is captured in the Outcome tab.
       · Probation Order / CSO: "Direct placement" or "Retrieve from social inquiry" (default,
         searchable); Probationer / CSO Client; no Source of Inquiry; no safeguarding flags;
         "Date placed" / "Date of expiry".
       · Aftercare: retrieve from social inquiry (Final home report) only; Borstal or POMAC. --}}
@extends('layouts.app')
@section('title', 'Register ' . $module['title'] . ' - ICMIS')

@push('styles') @include('probation._styles') @endpush

@section('content')
@php
    $ct          = $module['caseType'];
    $isSI        = $ct === 'social_inquiry';
    $isConvert   = !empty($module['convertible']);   // probation_order / community_service / aftercare_borstal
    $isAftercare = $ct === 'aftercare_borstal';
    $isCso       = $ct === 'community_service';
    $direct      = $module['directAllowed'] ?? true;
    $client      = $module['clientLabel'] ?? 'Offender';
    $sources     = $sources ?? collect();
    $agencies    = $agencies ?? collect();
    $step        = 0;
    $retrieveLbl = $isAftercare ? 'Retrieve from social inquiry (Final home report)' : 'Retrieve from social inquiry';
@endphp

<div class="container-fluid">
    @include('probation.cases._aftercare_nav')

    <div class="pcase-hero {{ $module['grad'] }} mb-4">
        <div class="d-flex align-items-center gap-3 position-relative">
            <div class="hicon"><i class="fas {{ $module['icon'] }}"></i></div>
            <div>
                <h2>Register {{ $module['title'] }}</h2>
                @unless($isSI)<div class="tagline">{{ $module['tagline'] }} — this capture is the supervision ledger.</div>@endunless
            </div>
        </div>
    </div>

    @if(session('duplicate_url'))
        <div class="alert alert-warning"><i class="fas fa-copy me-1"></i> <a href="{{ session('duplicate_url') }}" class="alert-link">Open the matching case</a></div>
    @endif
    @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'] . '.store') }}">
        @csrf

        {{-- DIRECT PLACEMENT or RETRIEVE FROM SOCIAL INQUIRY (supervision streams) --}}
        @if($isConvert)
        <div class="card pcard mb-4">
            <div class="card-header"><span class="step-badge">{{ ++$step }}</span> Where does this case come from?</div>
            <div class="card-body">
                <div class="row g-3">
                    @if($direct)
                    <div class="col-md-4">
                        <div class="form-check">
                            <input class="form-check-input" type="radio" name="_source_mode" id="mNew" value="new" {{ (old('_source_mode') === 'new') ? 'checked' : '' }}>
                            <label class="form-check-label fw-semibold" for="mNew">Direct placement</label>
                        </div>
                        <div class="p-help">Placed directly by the court into {{ $module['title'] }}.</div>
                    </div>
                    @endif
                    <div class="{{ $direct ? 'col-md-8' : 'col-12' }}">
                        <div class="form-check">
                            <input class="form-check-input" type="radio" name="_source_mode" id="mConv" value="convert" {{ (old('_source_mode', 'convert') === 'convert') ? 'checked' : '' }}>
                            <label class="form-check-label fw-semibold" for="mConv">{{ $retrieveLbl }}</label>
                        </div>
                        <input type="search" id="convSearch" class="form-control form-control-sm mt-2" placeholder="Search by name, serial or CRC number…" autocomplete="off">
                        <select name="converted_from_case_id" id="convSelect" class="form-select mt-2" size="6" @if($isAftercare) required @endif>
                            @foreach($sources as $s)
                                <option value="{{ $s->id }}" {{ (old('converted_from_case_id') == $s->id) ? 'selected' : '' }}
                                    data-search="{{ strtolower(optional($s->prisoner)->name . ' ' . $s->serial_number . ' ' . $s->crc_number . ' ' . $s->court_case_number) }}"
                                    data-name="{{ optional($s->prisoner)->name }}"
                                    data-gender="{{ optional($s->prisoner)->gender }}"
                                    data-dob="{{ optional($s->prisoner)->dob ? \Carbon\Carbon::parse($s->prisoner->dob)->format('Y-m-d') : '' }}"
                                    data-age="{{ $s->age }}"
                                    data-offence="{{ $s->offence }}" data-section="{{ $s->offence_section }}"
                                    data-crc="{{ $s->crc_number ?? $s->court_case_number }}" data-court="{{ $s->referral_court_name }}"
                                    data-magistrate="{{ $s->magistrate_judge }}"
                                    data-tribe="{{ $s->tribe }}" data-doctype="{{ $s->document_type }}" data-docno="{{ $s->document_number ?? $s->national_id }}">
                                    {{ $s->serial_number }} — {{ optional($s->prisoner)->name }}
                                    ({{ $s->referral_type_label ?? ($s->disposal_label ?? 'finalized') }})
                                </option>
                            @endforeach
                        </select>
                        @if($sources->isEmpty())
                            <div class="p-help text-danger">No social inquiry is available to retrieve yet.</div>
                        @else
                            <div class="p-help">Its details carry over automatically. {{ $sources->count() }} inquir{{ $sources->count() === 1 ? 'y' : 'ies' }} available.</div>
                        @endif
                    </div>
                </div>
                @if($isAftercare)
                <div class="row g-3 mt-1">
                    <div class="col-md-4">
                        <label class="form-label">Client category</label>
                        <select name="aftercare_category" class="form-select" required>
                            @foreach(config('probation.aftercare_categories', []) as $v => $l)
                                <option value="{{ $v }}" {{ (old('aftercare_category', 'borstal') === $v) ? 'selected' : '' }}>{{ $l }}</option>
                            @endforeach
                        </select>
                    </div>
                    <div class="col-md-4">
                        <label class="form-label">Date released</label>
                        <input type="date" name="date_released" class="form-control" value="{{ old('date_released') }}">
                    </div>
                </div>
                @endif
            </div>
        </div>
        @endif

        <div class="row">
            <div class="col-lg-8">

                {{-- SOCIAL INQUIRY: referral details --}}
                @if($isSI)
                <div class="card pcard mb-4">
                    <div class="card-header"><span class="step-badge">{{ ++$step }}</span> Referral</div>
                    <div class="card-body"><div class="row">
                        <div class="col-md-6 mb-3">
                            <label class="form-label">Type of referral</label>
                            <select name="type_of_referral" class="form-select">
                                <option value="">— Select —</option>
                                @foreach(config('probation.referral_types', []) as $v => $l)
                                    <option value="{{ $v }}" {{ (old('type_of_referral') === $v) ? 'selected' : '' }}>{{ $l }}</option>
                                @endforeach
                            </select>
                        </div>
                        <div class="col-md-6 mb-3">
                            <label class="form-label">Source of inquiry</label>
                            <select name="referral_source" class="form-select">
                                @foreach(config('probation.referral_sources', []) as $v => $l)
                                    <option value="{{ $v }}" {{ (old('referral_source', 'magistrate_court') === $v) ? 'selected' : '' }}>{{ $l }}</option>
                                @endforeach
                            </select>
                        </div>
                        <div class="col-md-4 mb-3">
                            <label class="form-label">Date referred</label>
                            <input type="date" name="date_referred" class="form-control" value="{{ old('date_referred') }}">
                        </div>
                        <div class="col-md-4 mb-3">
                            <label class="form-label">Date registered / noted</label>
                            <input type="date" name="date_registered" class="form-control" value="{{ old('date_registered', now()->format('Y-m-d')) }}">
                            <div class="p-help">Date the case is entered in the case ledger.</div>
                        </div>
                        <div class="col-md-4 mb-3">
                            <label class="form-label">Mention date</label>
                            <input type="date" name="mention_date" class="form-control" value="{{ old('mention_date') }}">
                        </div>
                    </div></div>
                </div>
                @endif

                {{-- PERSON --}}
                <div class="card pcard mb-4" id="personCard">
                    <div class="card-header"><span class="step-badge">{{ ++$step }}</span> {{ $client }}</div>
                    <div class="card-body">
                        <div class="row">
                            <div class="col-md-6 mb-3">
                                <label class="form-label">Full name</label>
                                <input type="text" name="name" class="form-control" value="{{ old('name') }}" placeholder="As on the court order / charge sheet">
                            </div>
                            @if($isSI)
                            <div class="col-md-6 mb-3">
                                <label class="form-label">Place remanded</label>
                                <input type="text" name="place_remanded" class="form-control" value="{{ old('place_remanded') }}" placeholder="e.g. Industrial Area Remand, police cells, on bond">
                            </div>
                            @endif
                            <div class="col-md-3 mb-3">
                                <label class="form-label">Sex</label>
                                <select name="gender" class="form-select">
                                    <option value="">—</option>
                                    @foreach(config('probation.sexes', []) as $v => $l)<option value="{{ $v }}" {{ (old('gender') === $v) ? 'selected' : '' }}>{{ $l }}</option>@endforeach
                                </select>
                            </div>
                            <div class="col-md-3 mb-3">
                                <label class="form-label">Date of birth</label>
                                <input type="date" name="dob" id="dobInput" class="form-control" value="{{ old('dob') }}" max="{{ now()->format('Y-m-d') }}">
                            </div>
                            <div class="col-md-2 mb-3">
                                <label class="form-label">Age</label>
                                <input type="number" min="0" max="120" name="age" id="ageInput" class="form-control" value="{{ old('age') }}">
                                <div class="p-help">Calculated from the date of birth.</div>
                            </div>
                            <div class="col-md-4 mb-3">
                                <label class="form-label">Phone (for SMS reminders)</label>
                                <input type="text" name="client_phone" class="form-control" value="{{ old('client_phone') }}" placeholder="07…">
                            </div>
                            <div class="col-md-4 mb-3">
                                <label class="form-label">Document</label>
                                <select name="document_type" id="docTypeSel" class="form-select">
                                    <option value="">— Select —</option>
                                    @foreach(config('probation.document_types', []) as $v => $l)<option value="{{ $v }}" {{ (old('document_type') === $v) ? 'selected' : '' }}>{{ $l }}</option>@endforeach
                                </select>
                            </div>
                            {{-- the number disappears only when "No Document" is selected --}}
                            <div class="col-md-4 mb-3" id="docNoWrap" style="{{ old('document_type') === 'no_document' ? 'display:none' : '' }}">
                                <label class="form-label">Document number</label>
                                <input type="text" name="document_number" class="form-control" value="{{ old('document_number') }}">
                            </div>
                            <div class="col-md-4 mb-3">
                                <label class="form-label">Tribe</label>
                                <input type="text" name="tribe" class="form-control" value="{{ old('tribe') }}">
                            </div>
                            @if($isSI)
                            <div class="col-md-4 mb-3">
                                <label class="form-label">Nationality</label>
                                <input type="text" name="nationality" class="form-control" value="{{ old('nationality', 'Kenyan') }}">
                            </div>
                            <div class="col-md-4 mb-3">
                                <label class="form-label">Religion</label>
                                <input type="text" name="religion" class="form-control" value="{{ old('religion') }}">
                            </div>
                            <div class="col-md-4 mb-3">
                                <label class="form-label">Ethnicity</label>
                                <input type="text" name="ethnicity" class="form-control" value="{{ old('ethnicity') }}">
                            </div>
                            @endif
                            @if($isAftercare)
                            <div class="col-md-4 mb-3">
                                <label class="form-label">Institutions Number</label>
                                <input type="text" name="institutions_number" class="form-control" value="{{ old('institutions_number') }}" placeholder="Institution no.">
                            </div>
                            @endif
                        </div>
                    </div>
                </div>

                {{-- CASE / COURT --}}
                <div class="card pcard mb-4">
                    <div class="card-header"><span class="step-badge">{{ ++$step }}</span> Case &amp; court details</div>
                    <div class="card-body">
                        <div class="row">
                            <div class="col-md-8 mb-3">
                                <label class="form-label">Offence</label>
                                <input type="text" name="offence" class="form-control" value="{{ old('offence') }}" placeholder="e.g. Theft">
                            </div>
                            <div class="col-md-4 mb-3">
                                <label class="form-label">Section of the offence</label>
                                <input type="text" name="offence_section" class="form-control" value="{{ old('offence_section') }}" placeholder="e.g. 275 Penal Code">
                            </div>
                            <div class="col-md-4 mb-3">
                                <label class="form-label">Court file No. (CRC No.)</label>
                                <input type="text" name="court_case_number" class="form-control" value="{{ old('court_case_number') }}">
                            </div>
                            @if($isSI)
                            <div class="col-md-4 mb-3">
                                <label class="form-label">Police file No. (PCR No.)</label>
                                <input type="text" name="pcr_no" class="form-control" value="{{ old('pcr_no') }}">
                            </div>
                            <div class="col-md-4 mb-3">
                                <label class="form-label">Police station</label>
                                <input type="text" name="police_station" class="form-control" value="{{ old('police_station') }}">
                            </div>
                            @endif
                            @if(!$isSI && empty($module['hideSource']))
                            <div class="col-md-4 mb-3">
                                <label class="form-label">Source of inquiry</label>
                                <select name="referral_source" class="form-select">
                                    <option value="">—</option>
                                    @foreach(config('probation.referral_sources', []) as $val => $label)
                                        <option value="{{ $val }}" {{ (old('referral_source') === $val) ? 'selected' : '' }}>{{ $label }}</option>
                                    @endforeach
                                </select>
                            </div>
                            @endif
                            <div class="col-md-6 mb-3">
                                <label class="form-label">Court / Penal institution</label>
                                <input type="text" name="referral_court_name" class="form-control" value="{{ old('referral_court_name') }}" placeholder="e.g. Kibera Magistrate's Court, Langata Women's Prison">
                            </div>
                            <div class="col-md-6 mb-3">
                                <label class="form-label">Magistrate / Judge</label>
                                <input type="text" name="magistrate_judge" class="form-control" value="{{ old('magistrate_judge') }}">
                            </div>
                        </div>
                    </div>
                </div>

                {{-- ORDER & SUPERVISION (supervision streams) --}}
                @if($isConvert)
                <div class="card pcard mb-4">
                    <div class="card-header"><span class="step-badge">{{ ++$step }}</span> Order &amp; supervision</div>
                    <div class="card-body">
                        <div class="row">
                            <div class="col-md-6 mb-3">
                                <label class="form-label">{{ $isCso ? 'CSO supervising officer' : 'Supervising officer' }} <span class="text-danger">*</span></label>
                                <select name="assigned_officer_id" class="form-select" required>
                                    <option value="">— Select officer —</option>
                                    @foreach($officers as $o)<option value="{{ $o->id }}" {{ (old('assigned_officer_id') == $o->id) ? 'selected' : '' }}>{{ $o->name }}</option>@endforeach
                                </select>
                            </div>
                            <div class="col-md-3 mb-3">
                                <label class="form-label">Date placed</label>
                                <input type="date" name="order_start" class="form-control" value="{{ old('order_start') }}">
                            </div>
                            <div class="col-md-3 mb-3">
                                <label class="form-label">Expected date of expiry</label>
                                <input type="date" name="order_end" class="form-control" value="{{ old('order_end') }}">
                            </div>
                            @unless($isCso)
                            <div class="col-12 mb-3"><div class="form-check">
                                <input class="form-check-input" type="checkbox" name="is_voluntary" value="1" id="isVoluntary" {{ old('is_voluntary') ? 'checked' : '' }}>
                                <label class="form-check-label" for="isVoluntary">Voluntary supervision (no court order)</label>
                            </div></div>
                            @endunless
                            @if($isCso)
                            <div class="col-md-3 mb-3">
                                <label class="form-label">Hours ordered <span class="text-danger">*</span></label>
                                <input type="number" min="1" name="hours_required" id="csoHours" class="form-control" value="{{ old('hours_required') }}" required>
                            </div>
                            <div class="col-md-6 mb-3">
                                <label class="form-label">Work agency <span class="text-danger">*</span></label>
                                <select name="agency_id" id="csoAgency" class="form-select">
                                    <option value="" data-rate="">— Select agency —</option>
                                    @foreach($agencies as $a)
                                        <option value="{{ $a->id }}" data-rate="{{ $a->hourly_rate }}" {{ (old('agency_id') == $a->id) ? 'selected' : '' }}>{{ $a->name }}@if($a->area) — {{ $a->area }}@endif @if($a->hourly_rate) (KSh {{ number_format($a->hourly_rate, 2) }}/hr)@endif</option>
                                    @endforeach
                                </select>
                                <a class="small" data-bs-toggle="collapse" href="#newAgency"><i class="fas fa-plus"></i> Agency not listed — add it here</a>
                            </div>
                            <div class="col-md-3 mb-3">
                                <label class="form-label">Rate for the area (KSh/hr)</label>
                                <input type="number" step="0.01" min="0" name="wage_rate" id="csoRate" class="form-control" value="{{ old('wage_rate') }}" placeholder="from agency">
                            </div>
                            <div class="col-12 collapse {{ old('new_agency_name') ? 'show' : '' }}" id="newAgency">
                                <div class="row g-2 border rounded p-2 mx-0 mb-3 bg-light">
                                    <div class="col-12 small fw-bold">New work agency (station manager)</div>
                                    <div class="col-md-4"><input name="new_agency_name" class="form-control form-control-sm" value="{{ old('new_agency_name') }}" placeholder="Agency name"></div>
                                    <div class="col-md-3"><input name="new_agency_area" class="form-control form-control-sm" value="{{ old('new_agency_area') }}" placeholder="Area"></div>
                                    <div class="col-md-2"><input type="number" step="0.01" min="0" name="new_agency_rate" id="newAgencyRate" class="form-control form-control-sm" value="{{ old('new_agency_rate') }}" placeholder="KSh/hr"></div>
                                    <div class="col-md-3"><input name="new_agency_contact" class="form-control form-control-sm" value="{{ old('new_agency_contact') }}" placeholder="Contact"></div>
                                </div>
                            </div>
                            <div class="col-12 mb-3">
                                <div class="alert alert-light border py-2 mb-0 small" id="csoQuant">
                                    <strong>Quantification:</strong> <span id="csoQuantText">enter the hours and choose the agency to see the value of the order.</span>
                                </div>
                            </div>
                            @endif
                        </div>
                    </div>
                </div>
                @else
                <div class="card pcard mb-4">
                    <div class="card-header"><span class="step-badge">{{ ++$step }}</span> Allocated officer</div>
                    <div class="card-body">
                        <label class="form-label">Probation / Community Service Officer</label>
                        <select name="assigned_officer_id" class="form-select">
                            <option value="">— Assign later —</option>
                            @foreach($officers as $o)<option value="{{ $o->id }}" {{ (old('assigned_officer_id') == $o->id) ? 'selected' : '' }}>{{ $o->name }}</option>@endforeach
                        </select>
                        @if($isSI)
                            <div class="p-help mt-2">The court's disposal is recorded later in the case <strong>Outcome</strong> tab.</div>
                        @endif
                    </div>
                </div>
                @endif

                {{-- Safeguarding flags are captured in the case's Assessments tab. --}}

                <div class="d-flex gap-2 mb-4">
                    <button type="submit" class="btn btn-primary btn-lg"><i class="fas fa-save"></i> Register &amp; Generate Reference No.</button>
                    <a href="{{ route('probation.' . $module['routeKey'] . '.index') }}" class="btn btn-outline-secondary btn-lg">Cancel</a>
                </div>
            </div>

            {{-- guidance --}}
            <div class="col-lg-4 mb-4">
                <div class="capture-guide">
                    <h6><i class="fas fa-list-check text-primary"></i> This becomes the {{ $isSI ? 'Case (Referral) Ledger' : 'Central Supervision Ledger' }}</h6>
                    <ul>
                        @if($isSI)
                            <li><i class="fas fa-circle-check"></i> Reference number &amp; colour code are generated (black = referral, blue = placement, grey = completion)</li>
                            <li><i class="fas fa-circle-check"></i> Type of referral, source, dates referred / noted / mention</li>
                            <li><i class="fas fa-circle-check"></i> Name, place remanded, date of birth / age, sex, tribe, nationality, religion</li>
                            <li><i class="fas fa-circle-check"></i> Safeguarding flags are set in the Assessments tab</li>
                            <li><i class="fas fa-circle-check"></i> Offence, section, CRC / PCR, police station, court, magistrate</li>
                            <li><i class="fas fa-circle-check"></i> Allocated officer · disposal goes in the Outcome tab</li>
                        @else
                            <li><i class="fas fa-circle-check"></i> Serial, {{ strtolower($client) }}, sex, age, tribe, document</li>
                            <li><i class="fas fa-circle-check"></i> Offence/section, CRC, court &amp; magistrate/judge</li>
                            <li><i class="fas fa-circle-check"></i> Date placed &amp; date of expiry, officer</li>
                            <li><i class="fas fa-circle-check"></i> Source — {{ $direct ? 'direct placement or ' : '' }}retrieved from social inquiry</li>
                        @endif
                    </ul>
                </div>
            </div>
        </div>
    </form>
</div>

@push('scripts')
<script>
(function () {
    // direct-placement / retrieve toggle (retrieve is the default)
    var mNew = document.getElementById('mNew'), mConv = document.getElementById('mConv');
    var conv = document.getElementById('convSelect'), search = document.getElementById('convSearch');
    var person = document.getElementById('personCard');
    function apply() {
        if (!mConv) return;
        var converting = mConv.checked;
        if (conv) conv.disabled = !converting;
        if (search) search.disabled = !converting;
        if (person) person.style.opacity = converting ? .55 : 1;
    }
    if (mNew) mNew.addEventListener('change', apply);
    if (mConv) mConv.addEventListener('change', apply);
    apply();

    // age is calculated from the date of birth
    var dob = document.getElementById('dobInput'), age = document.getElementById('ageInput');
    function calcAge() {
        if (!dob || !dob.value) { if (age) age.readOnly = false; return; }
        var b = new Date(dob.value), t = new Date(), a = t.getFullYear() - b.getFullYear();
        if (t.getMonth() < b.getMonth() || (t.getMonth() === b.getMonth() && t.getDate() < b.getDate())) a--;
        age.value = a >= 0 ? a : ''; age.readOnly = true;
    }
    if (dob) { dob.addEventListener('change', calcAge); calcAge(); }

    // CSO: value of the order = hours ordered × rate for the area
    var hrs = document.getElementById('csoHours'), ag = document.getElementById('csoAgency'),
        rate = document.getElementById('csoRate'), nr = document.getElementById('newAgencyRate'), out = document.getElementById('csoQuantText');
    function quant() {
        if (!out) return;
        var r = parseFloat(rate.value) || parseFloat(nr && nr.value) || parseFloat(ag.options[ag.selectedIndex] && ag.options[ag.selectedIndex].dataset.rate) || 0;
        var h = parseFloat(hrs.value) || 0;
        out.textContent = (h && r) ? (h + ' hours × KSh ' + r.toFixed(2) + '/hr = KSh ' + (h * r).toLocaleString(undefined, {minimumFractionDigits: 2, maximumFractionDigits: 2}) + ' (value of the full order)')
                                   : 'enter the hours and choose the agency (or type the rate) to see the value of the order.';
    }
    [hrs, ag, rate, nr].forEach(function (el) { if (el) el.addEventListener('input', quant); if (el) el.addEventListener('change', quant); });
    quant();

    // searchable list of social inquiries
    if (search && conv) search.addEventListener('input', function () {
        var q = this.value.trim().toLowerCase();
        Array.prototype.forEach.call(conv.options, function (o) {
            o.hidden = q !== '' && (o.dataset.search || '').indexOf(q) === -1;
        });
    });

    // autofill person + case details from the chosen inquiry
    if (conv) conv.addEventListener('change', function () {
        var o = this.options[this.selectedIndex]; if (!o || !o.value) return;
        var d = o.dataset;
        var set = function (name, val) {
            if (val === undefined || val === null || val === '') return;
            var el = document.querySelector('[name="' + name + '"]');
            if (el) el.value = val;
        };
        set('name', d.name);        set('gender', d.gender);   set('dob', d.dob);  set('age', d.age); calcAge();
        set('tribe', d.tribe);      set('document_type', d.doctype); set('document_number', d.docno);
        var dts = document.getElementById('docTypeSel'); if (dts) dts.dispatchEvent(new Event('change'));
        set('offence', d.offence);  set('offence_section', d.section);
        set('court_case_number', d.crc); set('referral_court_name', d.court); set('magistrate_judge', d.magistrate);
    });
})();
</script>
@endpush

<script>
(function () {
    var sel = document.getElementById('docTypeSel'), wrap = document.getElementById('docNoWrap');
    if (!sel || !wrap) return;
    function toggle() {
        var none = sel.value === 'no_document';
        wrap.style.display = none ? 'none' : '';
        if (none) { var i = wrap.querySelector('input'); if (i) i.value = ''; }
    }
    sel.addEventListener('change', toggle);
    window.addEventListener('load', toggle);   // also after a prisoner pick fills the fields
    toggle();
})();
</script>
@endsection