@php
    $categories = $categories ?? collect();
    $selectedId = $row->player?->player_category_id;
    $selected = $categories->firstWhere('id', $selectedId);
    $selectedText = $selected->name ?? 'Unassigned';

    $color = ['red', 'green', 'blue', 'yellow'];

    $tierForColor = preg_replace('/^[A-D](?::-|\s*[—\-–]\s*)/u', '', (string) $selectedText) ?? $selectedText;
    $tierForColor = strtoupper(trim($tierForColor));

    switch ($tierForColor) {
        case 'UNASSIGNED':
            $selectedColor = 'red';
            break;
        case 'ICON':
            $selectedColor = 'red';
            break;
        case 'STAR':
            $selectedColor = 'green';
            break;
        case 'RISING':
            $selectedColor = 'blue';
            break;
        case 'EMERGING':
            $selectedColor = 'yellow';
            break;
        default:
            $selectedColor = '';
    }
   
@endphp

<div class="dropdown_table category-dropdown">
    <div class="drop-btn {{ $selectedColor }}" data-id="{{ $row->id }}"
        @if (!empty($selected->color_code)) @endif>
        <span class="selectedText">{{ $selectedText }}</span>
        <span class="arrow">
            <svg width="20" height="20" viewBox="0 0 24 24">
                <path
                    d="M12.7071 14.7071L6.29289 9.70711C5.90237 9.31658 5.90237 8.68342 6.29289 8.29289C6.68342 7.90237 7.31658 7.90237 7.70711 8.29289L12 12.5858L16.2929 8.29289C16.6834 7.90237 17.3166 7.90237 17.7071 8.29289C18.0976 8.68342 18.0976 9.31658 17.7071 9.70711L12.7071 14.7071Z" />
            </svg>
        </span>
    </div>
    
    <div class="dropdown-menu">
        @forelse ($categories as $key => $category)
            <div class="option {{ $color[$key] }} {{ $category->id == $selectedId ? 'selected' : '' }}"
                data-value="{{ $category->id }}"
                @if (!empty($category->color_code)) @endif>
                {{ $category->name }}
            </div>
        @empty
            <div class="option disabled">No categories</div>
        @endforelse
    </div>
</div>