@php
    $record = $getRecord();
    $assignments = $record ? $record->assignments()->with(['user', 'assignedBy'])->get() : collect();
    $departmentAssignments = $record ? $record->departmentAssignments()->with(['department', 'assignedBy'])->get() : collect();
    $currentUserId = auth()->id();
@endphp

@if($record)
    <div class="order-assignments-cell">
        {{-- Order Number - Keep original functionality --}}
        <div class="fi-ta-text-item inline-flex items-center gap-1.5">
            <span class="fi-ta-text-item-label text-sm leading-6 text-gray-950 dark:text-white order-number-cell"
                  data-order-id="{{ $record->order_id }}"
                  data-external-order-id="{{ $record->external_order_id }}"
                  data-is-radioactive="{{ $record->is_radioactive ? 'true' : 'false' }}"
                  style="cursor: pointer;">
                @if($record->is_radioactive)
                    <div style="position: relative;">
                        {{ $record->external_order_id }}
                        <span class="radioactive-emoji" style="position: absolute; left: -20px;">☢️</span>
                    </div>
                @else
                    {{ $record->external_order_id }}
                @endif
            </span>
        </div>

        {{-- Assignment Section - Completely separated from order number --}}
        <div style="margin-top: 2px;">
            {{-- Assigned Users Display --}}
            @if($assignments->count() > 0)
                <div class="assigned-users-display" style="font-size: 11px;">
                    <div style="display: flex; align-items: center; gap: 4px; flex-wrap: wrap; justify-content: center;">
                        @foreach($assignments as $assignment)
                            <div class="assigned-user-tag" 
                                 style="background: rgba(59, 130, 246, 0.1); color: rgb(59, 130, 246); padding: 1px 6px; border-radius: 3px; display: inline-flex; align-items: center; gap: 3px; position: relative;"
                                 data-tooltip="Assigned by: {{ $assignment->assignedBy ? $assignment->assignedBy->name : 'System' }} on {{ $assignment->created_at ? $assignment->created_at->format('M d, Y g:i A') : 'Unknown' }}">
                                <span>{{ $assignment->user->name }}</span>
                                <button type="button" 
                                        onclick="unassignUser(event, '{{ $record->order_id }}', {{ $assignment->user_id }})"
                                        style="background: none; border: none; color: rgb(239, 68, 68); cursor: pointer; padding: 0; font-size: 12px; line-height: 1;">
                                    ×
                                </button>
                            </div>
                        @endforeach
                    </div>
                </div>
            @endif

            {{-- Assigned Departments Display --}}
            @if($departmentAssignments->count() > 0)
                <div class="assigned-departments-display" style="font-size: 11px; margin-top: 2px;">
                    <div style="display: flex; align-items: center; gap: 4px; flex-wrap: wrap; justify-content: center;">
                        @foreach($departmentAssignments as $deptAssignment)
                            <div class="assigned-dept-tag" 
                                 style="background: rgba(16, 185, 129, 0.1); color: rgb(16, 185, 129); padding: 1px 6px; border-radius: 3px; display: inline-flex; align-items: center; gap: 3px; position: relative;"
                                 data-tooltip="Assigned by: {{ $deptAssignment->assignedBy ? $deptAssignment->assignedBy->name : 'System' }} on {{ $deptAssignment->created_at ? $deptAssignment->created_at->format('M d, Y g:i A') : 'Unknown' }}">
                                <span>{{ $deptAssignment->department->name }}</span>
                                <button type="button" 
                                        onclick="unassignDepartment(event, '{{ $record->order_id }}', {{ $deptAssignment->department_id }})"
                                        style="background: none; border: none; color: rgb(239, 68, 68); cursor: pointer; padding: 0; font-size: 12px; line-height: 1;">
                                    ×
                                </button>
                            </div>
                        @endforeach
                    </div>
                </div>
            @endif

            {{-- Assign User Button - Separate from order number --}}
            <div class="assign-user-wrapper" style="margin-top: 2px; position: relative;">
                <button type="button" 
                        onclick="toggleAssignDropdown(event, 'assign-{{ $record->order_id }}')"
                        onmouseover="event.stopPropagation();"
                        onmouseout="event.stopPropagation();"
                        style="font-size: 11px; color: rgb(107, 114, 128); cursor: pointer; padding: 1px 4px; border: 1px solid transparent; border-radius: 3px; background: transparent; transition: all 0.15s ease;">
                    + Assign
                </button>
                <div id="assign-{{ $record->order_id }}" class="assign-dropdown" style="display: none; position: fixed; z-index: 2147483647; border-radius: 4px; box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2); min-width: 200px;">
                    {{-- Will be populated dynamically --}}
                </div>
            </div>
        </div>
    </div>

    <style>
        .order-assignments-cell {
            text-align: center;
        }
        
        .assign-user-wrapper {
            position: relative;
        }
        
        .assign-user-wrapper button:hover {
            background: rgb(243, 244, 246);
            color: rgb(55, 65, 81);
            border-color: rgb(209, 213, 219);
        }
        
        .dark .assign-user-wrapper button:hover {
            background: rgb(55, 65, 81);
            color: rgb(209, 213, 219);
            border-color: rgb(75, 85, 99);
        }
        
        .assign-dropdown {
            max-height: 200px;
            overflow-y: auto;
            z-index: 999999 !important;
        }
        
        .assign-dropdown .user-option {
            padding: 6px 12px;
            cursor: pointer;
            font-size: 12px;
            color: rgb(55, 65, 81);
            transition: background 0.15s ease;
        }
        
        .assign-dropdown .user-option:hover {
            background: rgb(243, 244, 246);
        }
        
        .assign-dropdown .user-option.assigned {
            background: rgba(59, 130, 246, 0.1);
            color: rgb(59, 130, 246);
        }
        
        .dark .assign-dropdown {
            background: rgb(31, 41, 55);
            border-color: rgb(55, 65, 81);
        }
        
        .dark .assign-dropdown .user-option {
            color: rgb(209, 213, 219);
        }
        
        .dark .assign-dropdown .user-option:hover {
            background: rgb(55, 65, 81);
        }
        
        .dark .assigned-user-tag {
            background: rgba(59, 130, 246, 0.2) !important;
        }
    </style>
@endif