@if(empty($receivers) || count($receivers)===0)
    <div class="p-3 text-muted">No recipients found.</div>
@else
    <div class="d-flex justify-content-between align-items-center mb-2">
        <div>
            <button id="checkAllRecv" class="btn btn-sm btn-outline-secondary">Select All</button>
            <button id="uncheckAllRecv" class="btn btn-sm btn-outline-secondary ms-1">Unselect All</button>
        </div>
        <div class="text-muted small">{{ count($receivers) }} recipients</div>
    </div>

    <ul class="list-group">
    @foreach($receivers as $idx => $r)
        @php
            $num = $r['number'] ?? '';
            $actorType = $r['actor_type'] ?? '';
            $actorId = $r['actor_id'] ?? '';
            $label = $r['label'] ?? $num;
            $disabled = empty($num) ? 'disabled' : '';
        @endphp

        <li class="list-group-item d-flex align-items-center">
            <div class="form-check">
                <input class="form-check-input receiver-checkbox" type="checkbox"
                    id="recv_{{ $idx }}"
                    value="{{ $idx }}"
                    data-actor-type="{{ $actorType }}"
                    data-actor-id="{{ $actorId }}"
                    data-number="{{ $num }}"
                    {{ $disabled }}>
            </div>

            <div class="ms-2">
                <label for="recv_{{ $idx }}" class="mb-0">
                    <strong>{{ $label }}</strong>
                </label>
                <div class="small text-muted"> {{ $num ?: 'No number' }} </div>
            </div>
        </li>
    @endforeach
    </ul>

    <script>
    // quick js for select all/none within partial scope
    $('#checkAllRecv').on('click', function(e){
        e.preventDefault();
        $('.receiver-checkbox:not(:disabled)').prop('checked', true);
    });
    $('#uncheckAllRecv').on('click', function(e){
        e.preventDefault();
        $('.receiver-checkbox').prop('checked', false);
    });
    </script>
@endif