@push('css')
<style>
    /* Role badge styling */
    .role-badge {
        display: inline-flex;
        flex-direction: column;
        align-items: center;
        padding: 0.35rem 0.75rem;
        border-radius: 0.5rem;
        font-size: 0.8rem;
        font-weight: 600;
        line-height: 1;
        text-align: center;
        white-space: nowrap;
        vertical-align: baseline;
        transition: all 0.2s ease-in-out;
    }

    .badge-subtitle {
        font-size: 0.65rem;
        opacity: 0.8;
        margin-top: 0.1rem;
        font-weight: 500;
    }

    /* Role-specific colors */
    .badge-role-admin {
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        color: white;
        border: 1px solid #5a67d8;
    }

    .badge-role-group {
        background: linear-gradient(135deg, #4299e1 0%, #3182ce 100%);
        color: white;
        border: 1px solid #3182ce;
    }

    .badge-role-group-sub-admin {
        background: linear-gradient(135deg, #48bb78 0%, #38a169 100%);
        color: white;
        border: 1px solid #38a169;
    }

    .badge-role-member {
        background: linear-gradient(135deg, #ed8936 0%, #dd6b20 100%);
        color: white;
        border: 1px solid #dd6b20;
    }

    .badge-role-sub-admin {
        background: linear-gradient(135deg, #9f7aea 0%, #805ad5 100%);
        color: white;
        border: 1px solid #805ad5;
    }

    .badge-role-default {
        background: linear-gradient(135deg, #a0aec0 0%, #718096 100%);
        color: white;
        border: 1px solid #718096;
    }

    /* Assessable level badge styling */
    .level-badge {
        display: inline-flex;
        align-items: center;
        padding: 0.5rem 1rem;
        border-radius: 0.75rem;
        font-size: 0.85rem;
        font-weight: 700;
        line-height: 1;
        white-space: nowrap;
        vertical-align: baseline;
        box-shadow: 0 2px 4px rgba(0,0,0,0.1);
        transition: all 0.3s ease;
    }

    .level-badge:hover {
        transform: translateY(-2px);
        box-shadow: 0 4px 8px rgba(0,0,0,0.15);
    }

    /* Level-specific colors with metallic effects */
    .badge-level-bronze {
        background: linear-gradient(135deg, #cd7f32 0%, #b87333 100%);
        color: #fff8e1;
        border: 2px solid #cd7f32;
        text-shadow: 0 1px 2px rgba(0,0,0,0.3);
        position: relative;
        overflow: hidden;
    }

    .badge-level-bronze::before {
        content: '';
        position: absolute;
        top: -50%;
        left: -50%;
        width: 200%;
        height: 200%;
        background: linear-gradient(
            to bottom right,
            rgba(255,255,255,0.1) 0%,
            rgba(255,255,255,0) 50%,
            rgba(255,255,255,0.1) 100%
        );
        transform: rotate(30deg);
    }

    .badge-level-silver {
        background: linear-gradient(135deg, #c0c0c0 0%, #a0a0a0 100%);
        color: #333;
        border: 2px solid #c0c0c0;
        text-shadow: 0 1px 1px rgba(255,255,255,0.5);
        position: relative;
        overflow: hidden;
    }

    .badge-level-silver::before {
        content: '';
        position: absolute;
        top: -50%;
        left: -50%;
        width: 200%;
        height: 200%;
        background: linear-gradient(
            to bottom right,
            rgba(255,255,255,0.3) 0%,
            rgba(255,255,255,0) 50%,
            rgba(255,255,255,0.3) 100%
        );
        transform: rotate(30deg);
    }

    .badge-level-gold {
        background: linear-gradient(135deg, #ffd700 0%, #daa520 100%);
        color: #333;
        border: 2px solid #ffd700;
        font-weight: 800;
        text-shadow: 0 1px 1px rgba(255,255,255,0.5);
        position: relative;
        overflow: hidden;
    }

    .badge-level-gold::before {
        content: '';
        position: absolute;
        top: -50%;
        left: -50%;
        width: 200%;
        height: 200%;
        background: linear-gradient(
            to bottom right,
            rgba(255,255,255,0.4) 0%,
            rgba(255,255,255,0) 50%,
            rgba(255,255,255,0.4) 100%
        );
        transform: rotate(30deg);
    }

    /* Icon styling */
    .level-badge i {
        font-size: 0.9em;
        filter: drop-shadow(0 1px 1px rgba(0,0,0,0.2));
    }

    /* Responsive adjustments */
    @media (max-width: 768px) {
        .role-badge, .level-badge {
            padding: 0.25rem 0.5rem;
            font-size: 0.75rem;
        }
        
        .badge-subtitle {
            font-size: 0.6rem;
        }
    }
</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>