@php
    $rowIndex = isset($rowIndex) ? $rowIndex : 0;
    $isGroupDisabled = false;



    // if(isset($selectedRole) && 
    //     (
    //         $selectedRole['role_type'] == "admin" ||
    //         $selectedRole['role_type'] == "sub-admin"
    //     ))                
    // {
    //     $isGroupDisabled = true;
    // }
    if(isset($selectedRole))
    {
        if(
            isset($selectedRole['role_type']) && (
                $selectedRole['role_type'] == "admin" ||
                $selectedRole['role_type'] == "sub-admin"
            )
        )                
        {
            $isGroupDisabled = true;
        }
    }          
@endphp

<div class="tab-pane fade {{ $rowIndex === 0 ? 'show active' : '' }}" id="role-{{ $rowIndex }}" role="tabpanel"
    aria-labelledby="role-tab-{{ $rowIndex }}">
    <div class="role-row mutitab-row" data-rowIndex="{{ $rowIndex }}">
        <!-- Remove Button -->
        @if(!isset($readonly) || (isset($readonly) && !$readonly))
            <div class="d-flex justify-content-end mb-3">
                <button type="button" class="remove-tab" onclick="removeRoleTab({{ $rowIndex }})">
                    <i class="fa fa-x"></i>
                </button>
            </div>
        @endif

        <!-- Hidden ID Fields -->
        <input type="hidden" name="roles[{{ $rowIndex }}][id]" 
                value="{{ $selectedRole['id'] ?? null }}">
        <input type="hidden" id="roles" name="roles[{{ $rowIndex }}][role_type]" 
                value="{{ $selectedRole['role_type'] ?? null }}">

        <!-- Role, Group Row -->
        <div class="row mb-3">
            <div class="col-md-6 role-selector">
                <label class="form-label">{{ __('labels.role') }} <span class="text-danger">*</span></label>
                <select class="form-control" {{ isset($readonly) && $readonly ? "disabled" : "" }} 
                        name="roles[{{ $rowIndex }}][role_id]" onchange="toggleRoleFields(this, {{ $rowIndex }})">
                    <option value="">{{ __('labels.select_role') }}</option>
                    @if(isset($roles) && count($roles))
                        @foreach($roles as $roleIndex => $role)
                            <option value="{{ $role->id }}" 
                                    data-role-type="{{ $role->role_type }}"
                                    @if(isset($selectedRole) && $selectedRole['id'] == $role->id) selected @endif>
                                {{ $role->name }} ({{ $role->role_type }})
                            </option>
                        @endforeach
                    @endif
                </select>
            </div>

            <div class="col-md-6 group-selection @if($isGroupDisabled) disabled-row @endif">
                <label class="form-label">{{ __('labels.group') }} <span class="text-danger">*</span></label>
                <select class="form-control" {{ isset($readonly) && $readonly ? "disabled" : "" }} 
                        name="roles[{{ $rowIndex }}][group_id]">
                    <option value="">{{ __('labels.select_group') }}</option>
                    @if(isset($groups) && count($groups))
                        @foreach($groups as $groupIndex => $group)
                            <option value="{{ $group->id }}" 
                                @if(isset($selectedRole['group_id']) && $selectedRole['group_id'] == $group->id) selected @endif>
                                {{ $group->name }}
                            </option>
                        @endforeach
                    @endif
                </select>
            </div>
            {{-- <div class="col-md-4">
                <label class="form-label">Status <span class="text-danger">*</span></label>
                <select class="form-control" {{ isset($readonly) && $readonly ? "disabled" : "" }} name="roles[{{ $rowIndex }}][status]" >
                    <option value="active" 
                        @if((isset($selectedRole) && $selectedRole['status'] == "active") || !isset($selectedRole['status'])) selected="true" @endif>
                        Active
                    </option>
                    <option value="pending" 
                        @if(isset($selectedRole) && $selectedRole['status'] == "pending") selected="true" @endif>
                        Pending
                    </option>
                    <option value="suspended" 
                        @if(isset($selectedRole) && $selectedRole['status'] == "suspended") selected="true" @endif>
                        Suspended
                    </option>
                    <option value="removed" 
                        @if(isset($selectedRole) && $selectedRole['status'] == "removed") selected="true" @endif>
                        Removed
                    </option>
                </select>
            </div> --}}
        </div>
        <!-- Package and Date Row -->
        {{-- <div class="row ">
            <div class="col-md-6 package-selection">
                <label class="form-label">Member Package</label>
                <select class="form-control" name="roles[{{ $rowIndex }}][member_package]">
                    <option value="bronze">Bronze</option>
                    <option value="silver">Silver</option>
                    <option value="gold">Gold</option>
                </select>
            </div>
            <div class="col-md-6">
                <label class="form-label">Joined Date</label>
                <input type="datetime-local" class="form-control" name="roles[{{ $rowIndex }}][joined_at]" value="">
            </div>
        </div> --}}
        <!-- Additional Fields (Hidden by default for admin/sub-admin) -->
        <div class="role-selection">
            <!-- Additional role-specific fields can go here -->
        </div>
    </div>
</div>