{{--
    Next of Kin card. Include inside cases/show.blade.php's tab-pane:

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

    Reuses the SAME prisoner_next_of_kin data as the Prison module — this
    is $case->prisoner->nextOfKin, not a separate probation-only table.
    If $case->prisoner is null (no linked person yet), shows a notice
    instead of the form.
--}}
<div class="card mb-3">
    <div class="card-header"><i class="fas fa-people-group me-1"></i> Next of Kin</div>
    <div class="card-body">
        @if (!$case->prisoner)
            <div class="alert alert-warning mb-0">
                This case has no linked person record yet — next of kin can't be captured until one exists.
            </div>
        @else
            @php $existingKin = $case->prisoner->nextOfKin; @endphp
            <form method="POST" action="{{ route('probation.cases.next-of-kin.store', $case->id) }}">
                @csrf
                <table class="table table-sm" id="pcKinTable">
                    <thead><tr><th>Name</th><th>ID Number</th><th>Phone</th><th>Relationship</th><th>Primary?</th><th></th></tr></thead>
                    <tbody>
                        @forelse ($existingKin as $i => $kin)
                            <tr>
                                <td><input name="items[{{ $i }}][name]" class="form-control form-control-sm" value="{{ $kin->name }}" required></td>
                                <td><input name="items[{{ $i }}][id_number]" class="form-control form-control-sm" value="{{ $kin->id_number }}"></td>
                                <td><input name="items[{{ $i }}][phone]" class="form-control form-control-sm" value="{{ $kin->phone }}"></td>
                                <td><input name="items[{{ $i }}][relationship]" class="form-control form-control-sm" value="{{ $kin->relationship }}" placeholder="e.g. Spouse, Parent"></td>
                                <td class="text-center"><input type="radio" name="primary_index" value="{{ $i }}" class="form-check-input" {{ $kin->is_primary ? 'checked' : '' }}></td>
                                <td><button type="button" class="btn btn-sm btn-outline-danger remove-row">&times;</button></td>
                            </tr>
                        @empty
                        @endforelse
                    </tbody>
                </table>
                <button type="button" id="pcAddKinRow" class="btn btn-sm btn-outline-secondary">+ Add Next of Kin</button>
                <button type="submit" class="btn btn-sm btn-primary ms-2"><i class="fas fa-save"></i> Save</button>
                <p class="text-muted small mt-2 mb-0">Select the radio button next to the primary contact.</p>
            </form>
            <script>
            (function () {
                let idx = {{ $existingKin->count() ?? 0 }};
                document.getElementById('pcAddKinRow').addEventListener('click', function () {
                    const tbody = document.querySelector('#pcKinTable tbody');
                    const row = document.createElement('tr');
                    row.innerHTML = `
                        <td><input name="items[${idx}][name]" class="form-control form-control-sm" required></td>
                        <td><input name="items[${idx}][id_number]" class="form-control form-control-sm"></td>
                        <td><input name="items[${idx}][phone]" class="form-control form-control-sm"></td>
                        <td><input name="items[${idx}][relationship]" class="form-control form-control-sm" placeholder="e.g. Spouse, Parent"></td>
                        <td class="text-center"><input type="radio" name="primary_index" value="${idx}" class="form-check-input"></td>
                        <td><button type="button" class="btn btn-sm btn-outline-danger remove-row">&times;</button></td>`;
                    tbody.appendChild(row);
                    idx++;
                });
                document.querySelector('#pcKinTable').addEventListener('click', function (e) {
                    if (e.target.classList.contains('remove-row')) e.target.closest('tr').remove();
                });
            })();
            </script>
        @endif
    </div>
</div>