@push('css')
<style>

</style>
@endpush
<div class="card section-card">
    <div class="card-header d-flex justify-content-between align-items-center">
        <h5 class="card-title">
            <i class="fas fa-users me-2 text-primary"></i>
            {{ __('labels.member_of_groups') }}
        </h5>
    </div>
    <div class="table-responsive">
        <table id="datatabel3" class="table display">
            <thead>
                <tr>
                    <th><strong>#</strong></th>
                    <th><strong>{{ __('labels.group') }}</strong></th>
                    <th><strong>{{ __('labels.role') }}</strong></th>
                    <th><strong>{{ __('labels.assessable_level') }}</strong></th>
                    <th></th>
                </tr>
            </thead>
            <tbody>
                @if (isset($groups) && count($groups) > 0)
                    @foreach ($groups as $index => $item)
                        @php
                            $selectedRole = collect($roles)->first(fn($value) => $value['id'] == $item->pivot->role_id);
                            
                            // Role badge styling
                            $roleBadgeClass = 'badge-role-';
                            if(isset($selectedRole)) {
                                switch($selectedRole->role_type) {
                                    case 'admin':
                                        $roleBadgeClass .= 'admin';
                                        break;
                                    case 'group':
                                        $roleBadgeClass .= 'group';
                                        break;
                                    case 'group-sub-admin':
                                        $roleBadgeClass .= 'group-sub-admin';
                                        break;
                                    case 'member':
                                        $roleBadgeClass .= 'member';
                                        break;
                                    case 'sub-admin':
                                        $roleBadgeClass .= 'sub-admin';
                                        break;
                                    default:
                                        $roleBadgeClass .= 'default';
                                }
                            }
                            
                            // Assessable level badge styling
                            $levelBadgeClass = 'badge-level-';
                            if($item->pivot->member_package == 'bronze') {
                                $levelBadgeClass .= 'bronze';
                            } elseif($item->pivot->member_package == 'silver') {
                                $levelBadgeClass .= 'silver';
                            } elseif($item->pivot->member_package == 'gold') {
                                $levelBadgeClass .= 'gold';
                            }
                        @endphp
                        <tr>
                            <td class="text-center">
                                <span class="table-index">
                                    {{ $index + 1 }}
                                </span>
                            </td>
                            <td id="group_name_{{ $index }}">
                                <div class="item-name-cell">
                                    <div class="item-avatar">
                                        <div class="item-avatar-default">
                                            {{ strtoupper(substr($item->name, 0, 2)) }}
                                        </div>
                                    </div>
                                    <div class="item-info">
                                        <h6 class="item-title">{{ $item->name }}</h6>
                                    </div>
                                </div>
                            </td>
                            <td>
                                @if(isset($selectedRole))
                                    <span class="role-badge {{ $roleBadgeClass }}">
                                        {{ $selectedRole->name }}
                                        <small class="badge-subtitle">{{ $selectedRole->role_type }}</small>
                                    </span>
                                @endif
                            </td>
                            <td>
                                @if($item->pivot->member_package == 'bronze')
                                    <span class="level-badge {{ $levelBadgeClass }}">
                                        {{ __('labels.bronze') }}
                                        <i class="fas fa-certificate ms-1"></i>
                                    </span>
                                @elseif($item->pivot->member_package == 'silver')
                                    <span class="level-badge {{ $levelBadgeClass }}">
                                        {{ __('labels.silver') }}
                                        <i class="fas fa-certificate ms-1"></i>
                                    </span>
                                @elseif($item->pivot->member_package == 'gold')
                                    <span class="level-badge {{ $levelBadgeClass }}">
                                        {{ __('labels.gold') }}
                                        <i class="fas fa-crown ms-1"></i>
                                    </span>
                                @endif
                            </td>
                            <td>
                                <div class="d-flex">
                                    <a href="{{ route('groups.show', ['group' => $item->id]) }}" target="_blank"
                                        class="btn-action btn-view"
                                        rel="tooltip" data-placement="top"
                                        data-bs-toggle="tooltip" title="{{ __('labels.details') }}">
                                        <i class="fas fa-lg fa-eye"></i>
                                    </a>
                                </div>
                            </td>
                        </tr>
                    @endforeach
                @endif
            </tbody>
        </table>
    </div>
</div>