@forelse ($users as $u)
    @php
        $url_detail = route('user.detail', ['id' => encrypt($u->id)]);
    @endphp

    <tr style="cursor: pointer;" onclick="window.location.href='{{ $url_detail }}';" oncontextmenu="event.preventDefault(); window.open('{{ $url_detail }}', '_blank');">
        <td class="has-text-centered" onclick="event.stopPropagation();">
            {{ $loop->index + 1 + $users->perPage() * ($users->currentPage() - 1) }}
        </td>
        <td>
            <div class="flex-media">
                @if ($u->pas_photo)
                    <div class="h-avatar is-medium">
                        <img class="avatar" src="{{ Util::linkFile('pas-photo', $u->pas_photo) }}" alt="">
                    </div>
                @else
                    {!! generate_avatar($u->name) !!}
                @endif
                <div class="meta">
                    <div style="display: inline-flex; align-items: center; gap: 2px">
                        <span>{{ $u->name }}</span>
                        @if (in_array($u->roles[0]->name, ['super_admin', 'user_admin']))
                            <span class="tag is-rounded is-warning text-white fs-10">ADMIN</span>
                        @endif
                    </div>
                    <span>{{ $u->email }}</span>
                </div>
            </div>
        </td>
        <td>
            @foreach ($u->roles as $role)
                {{ ucwords(str_replace('_', ' ', $role->name)) }}
            @endforeach
        </td>
        <td class="has-text-centered">
            {{ $u->last_login ? date('d M Y H:i', strtotime($u->last_login)) : '-' }}
        </td>
        <td class="has-text-centered">
            @if ($u->deleted_at == null)
                <span class="tag is-rounded is-success">
                    @lang('app.active')
                </span>
            @else
                <span class="tag is-rounded is-danger">
                    @lang('app.suspend')
                </span>
            @endif
        </td>
        <td class="has-text-centered" onclick="event.stopPropagation();">
            <div class="dropdown is-spaced is-dots is-right dropdown-trigger is-pushed-mobile dropdown-action-user">
                <div class="is-trigger" aria-haspopup="true">
                    @include('components.icons.more-vertical')
                </div>
                <div class="dropdown-menu" role="menu">
                    @if ($u->deleted_at == null)
                        <div class="dropdown-content">
                            @if (Auth::id() != $u->id)
                                <a href="{{ route('user.edit', ['id' => encrypt($u->id)]) }}" class="dropdown-item is-media modal-add-to-group">
                                    <div class="meta">
                                        <span>Edit</span>
                                    </div>
                                </a>
                                <a href="javascript:void(0)" onclick="suspendAccount('{{ $u->id }}')"
                                    class="dropdown-item is-media">
                                    <div class="meta">
                                        <span>@lang('app.suspend_access')</span>
                                    </div>
                                </a>
                            @else
                                <a href="{{ route('user.edit', ['id' => encrypt($u->id)]) }}" class="dropdown-item is-media modal-add-to-group">
                                    <div class="meta">
                                        <span>Edit</span>
                                    </div>
                                </a>
                                <a href="{{ $url_detail }}" class="dropdown-item is-media">
                                    <div class="meta">
                                        <span>@lang('app.my_profile')</span>
                                    </div>
                                </a>
                            @endif
                        </div>
                    @else
                        <div class="dropdown-content">
                            <a href="javascript:void(0)" onclick="restoreAccount('{{ $u->id }}')"
                                class="dropdown-item is-media">
                                <div class="meta">
                                    <span>@lang('app.restore_access')</span>
                                </div>
                            </a>
                            <hr class="dropdown-divider">
                            <a href="{{ $url_detail }}" class="dropdown-item is-media">
                                <div class="meta">
                                    <span>@lang('app.show_details')</span>
                                </div>
                            </a>
                        </div>
                    @endif
                </div>
            </div>
        </td>
    </tr>
@empty
    <tr>
        <td colspan="6" class="has-text-centered">
            @include('components.empty.empty-state')
        </td>
    </tr>
@endforelse

<script>
    $('.dropdown-action-user').on('click', function() {
        const dropdown = $(this).closest('.dropdown');
        const dropdownMenu = dropdown.find('.dropdown-menu');
        const dropdownOffset = dropdown.offset();
        const dropdownHeight = dropdownMenu.outerHeight();
        const viewportHeight = $('.table-wrapper').height();

        if (dropdownOffset.top + dropdownHeight > viewportHeight) {
            dropdown.addClass('is-up');
        } else {
            dropdown.removeClass('is-up');
        }

        dropdown.toggleClass('is-active');

        $('.dropdown').not(dropdown).removeClass('is-active');
    })

    $(document).on('click', '.modal-add-to-group', function() {
        $('#alert_no_group').remove()

        const id = $(this).data('id');
        const name = $(this).data('name');
        const groups = $(this).data('group')

        $('#user_name').val(name)
        $('#user_id').val(id)
        $('#title_add_to_group').html(`Add <span class="fw-700">${name}</span> to groups`)

        let opt = ''
        $.each(groups, function(index, value) {
            opt += `<option class="text-dark" value="${value.id}">${value.name}</option>`
        });

        if (groups.length > 0) {
            $('#select_group').html(opt)
            $('#btn_add_to_group').prop('disabled', false)
        } else {

            $('#select_group').html(
                `<option class="text-dark" >No groups are available that match this user's role.</option>`
            )
            $('.select2').after(
                '<div id="alert_no_group" class="help text-danger">Please contact administrator.</div>'
            )
            $('#btn_add_to_group').prop('disabled', true)
        }

        $('#modal_add_to_group').addClass('is-active')

    });
</script>