@php($leadId = $lead->id ?? request()->get('lead_id'))
<div class="assigned-users-actions-wrapper mb-3" data-lead-id="{{ $leadId }}" 
     data-proposals-index-url="{{ $leadId ? route('leads.proposals.index',['lead'=>$leadId]) : '' }}" 
     data-proposals-store-url="{{ $leadId ? route('leads.proposals.store',['lead'=>$leadId]) : '' }}">
    <div class="card mb-3 lead-assigned-users-box border-0 shadow-none">
        <div id="assignedUsersCollapse" class="collapse show">
            <div class="card-body p-2">
                <ul class="list-unstyled assigned-users-list mb-2 assigned-users-scroll">
                    @forelse(($assignedUsers ?? []) as $u)
                        <li class="d-flex align-items-center gap-2 assigned-user-item">
                            <span class="assigned-user-avatar flex-shrink-0">
                                <i class="bx bx-user"></i>
                            </span>
                            <span class="flex-grow-1 text-truncate assigned-user-name">{{ $u['name'] }}@if(!empty($u['class'])) <small class="text-muted">({{ $u['class'] }})</small>@endif</span>
                            <a href="javascript:void(0);" class="remove-assigned-user flex-shrink-0" data-toggle="tooltip" title="Remove"
                               data-confirm="Remove User?|This will unassign the user from the lead. Continue?"
                               data-user-id="{{ $u['id'] }}">
                                <i class="bx bx-trash" style="color:#e74c3c;font-size:1rem;"></i>
                            </a>
                        </li>
                    @empty
                        <li class="text-muted small text-center py-2">No users assigned yet.</li>
                    @endforelse
                </ul>
                <div class="project-form form-line lead-assign-users-ui" data-section="leads">
                    <label class="form-label small">Select Users to Assign</label>
                    <div class="d-flex gap-2">
                        <select multiple class="form-control form-control-lg select2 assign-users-select" placeholder="Select user">
                            @php($grouped = isset($assignableUsersRoleWise) && is_array($assignableUsersRoleWise) && count($assignableUsersRoleWise))
                            @if($grouped)
                                @foreach($assignableUsersRoleWise as $roleId => $roleBlock)
                                    @if(!empty($roleBlock['children']))
                                        <optgroup label="{{ $roleBlock['label'] }}">
                                            @foreach($roleBlock['children'] as $cid => $cname)
                                                <option value="{{ $cid }}">{{ $cname }}</option>
                                            @endforeach
                                        </optgroup>
                                    @endif
                                @endforeach
                            @else
                                @foreach(($assignableUsers ?? []) as $au)
                                    <option value="{{ $au->id }}">{{ $au->name ?? ($au->first_name.' '.$au->last_name) }}</option>
                                @endforeach
                            @endif
                        </select>
                        <a href="javascript:void(0)" class="green-btn-inner btn-sm-custom link-btn assign-users-submit disabled-effect" data-toggle="tooltip" title="Assign Selected">Assign</a>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
@push('styles')
<style>
.assigned-user-avatar{width:28px;height:28px;border-radius:50%;background:#bdc3c7;color:#fff;display:inline-flex;align-items:center;justify-content:center;font-size:.9rem;}
.assigned-user-name{font-size:.875rem;color:#333;}
.assigned-user-item{padding:6px 4px;}
.assigned-user-item+.assigned-user-item{border-top:1px solid #f0f0f0;}
.assigned-user-item .remove-assigned-user{line-height:1;}
</style>
@endpush