<x-admin-layout
    active="users"
    :title="__('users.title')"
    :crumbs="[
        ['label' => __('admin.shell.brand_sub')],
        ['label' => __('users.crumb_parent')],
        ['label' => __('users.title')],
    ]">

    <div class="page-wide" x-data="dataTable({ rowsSelector: 'tr[data-dt-row]', searchableSelector: '.user-row-name, .user-row-email' })">
        <div class="page-header mb-6">
            <div>
                <h1 class="page-title">{{ __('users.title') }}</h1>
                <p class="page-sub">{{ __('users.sub') }}</p>
            </div>
            <div class="flex items-center gap-2">
                <div class="dropdown" x-data="dropdown">
                    <button type="button"
                            class="pos-btn pos-btn-sm pos-btn-ghost"
                            @click="toggle()"
                            :aria-expanded="open">
                        <x-icon name="download" class="w-4 h-4" />
                        {{ __('users.actions.export') }}
                        <x-icon name="chevron" class="w-4 h-4" />
                    </button>
                    <div class="dropdown-panel"
                         x-show="open"
                         x-cloak
                         @click.outside="close()"
                         @keydown.escape.window="close()">
                        <a href="{{ route('admin.users.export', ['format' => 'csv']) }}"
                           class="dropdown-item"
                           @click="close()">
                            <span class="dropdown-item-label">{{ __('users.actions.export_csv') }}</span>
                        </a>
                        <a href="{{ route('admin.users.export', ['format' => 'xlsx']) }}"
                           class="dropdown-item"
                           @click="close()">
                            <span class="dropdown-item-label">{{ __('users.actions.export_xlsx') }}</span>
                        </a>
                    </div>
                </div>

                <a href="{{ route('admin.users.create') }}" class="pos-btn pos-btn-sm pos-btn-primary">
                    <x-icon name="plus" class="w-4 h-4" />
                    {{ __('users.actions.new') }}
                </a>
            </div>
        </div>

        <x-admin.data-table :search-placeholder="__('users.list.search_ph')">
            <x-slot:toolbarStart>
                <div class="dt-toolbar-title">{{ __('users.list.title', ['count' => $users->count()]) }}</div>
            </x-slot:toolbarStart>

            <div class="dt-scroll">
            <table class="dt-table">
                <thead>
                    <tr>
                        <th class="dt-th-sort" @click="sortBy('name')"
                            :class="{ 'is-sorted-asc': sortDirFor('name')==='asc', 'is-sorted-desc': sortDirFor('name')==='desc' }">
                            {{ __('users.columns.user') }}<span class="dt-th-sort-arrow" aria-hidden="true"></span>
                        </th>
                        <th>{{ __('users.columns.access') }}</th>
                        <th>{{ __('users.columns.status') }}</th>
                        <th class="dt-actions-col"><span class="sr-only">{{ __('users.columns.actions') }}</span></th>
                    </tr>
                </thead>
                <tbody>
                    @foreach ($users as $u)
                        @php $isSelf = $u->id === auth()->id(); @endphp
                        <tr data-dt-row
                            data-dt-name="{{ $u->name }}"
                            data-dt-id="{{ $u->id }}"
                            class="prod-row"
                            @click="window.location.href = {{ \Illuminate\Support\Js::from(route('admin.users.edit', $u)) }}">
                            <td>
                                <div class="user-row-id">
                                    <span class="avatar">{{ $u->initials }}</span>
                                    <div>
                                        <div class="user-row-name store-row-name">{{ $u->name }}</div>
                                        <div class="user-row-email store-row-code">{{ $u->email }}</div>
                                    </div>
                                </div>
                            </td>
                            <td>
                                @if ($u->is_super_admin)
                                    <span class="prod-muted">{{ __('users.badges.super_admin') }}</span>
                                @elseif ($u->stores->isEmpty())
                                    <span class="prod-muted">{{ __('users.list.no_stores') }}</span>
                                @else
                                    <div class="user-store-chips">
                                        @foreach ($u->stores as $s)
                                            <span class="user-store-chip">{{ $s->name }}</span>
                                        @endforeach
                                    </div>
                                @endif
                            </td>
                            <td>
                                <div class="user-status-cell">
                                    @if ($u->is_active)
                                        <span class="prod-badge prod-badge-positive">{{ __('users.badges.active') }}</span>
                                    @else
                                        <span class="prod-badge prod-badge-muted">{{ __('users.badges.inactive') }}</span>
                                    @endif
                                    @if ($isSelf)
                                        <span class="badge badge-accent"><span class="badge-dot"></span>{{ __('users.badges.you') }}</span>
                                    @endif
                                </div>
                            </td>
                            <td>
                                <div class="prod-row-actions">
                                    @unless ($isSelf)
                                        <form method="POST" action="{{ route('admin.users.toggle', $u) }}">
                                            @csrf
                                            @method('PATCH')
                                            <input type="hidden" name="is_active" value="{{ $u->is_active ? '0' : '1' }}">
                                            <button type="submit" class="prod-status-btn" :class="{ 'is-on': {{ $u->is_active ? 'true' : 'false' }} }"
                                                    @click.stop aria-label="{{ __('users.actions.deactivate') }}"
                                                    title="{{ $u->is_active ? __('users.actions.deactivate') : __('users.actions.activate') }}">
                                                <span class="prod-status-thumb" aria-hidden="true"></span>
                                            </button>
                                        </form>
                                    @endunless

                                    <x-admin.row-actions>
                                        <x-admin.row-action :href="route('admin.users.edit', $u)" icon="edit" :label="__('table.action.edit')" />
                                        @unless ($isSelf)
                                            <div class="row-action-sep"></div>
                                            <x-admin.row-action icon="trash" variant="danger" :label="__('users.actions.delete')"
                                                @click="$store.confirm.show({
                                                    title: {{ \Illuminate\Support\Js::from(__('users.delete.title', ['name' => $u->name])) }},
                                                    message: {{ \Illuminate\Support\Js::from(__('users.delete.message')) }},
                                                    intent: 'danger',
                                                    confirmLabel: {{ \Illuminate\Support\Js::from(__('users.actions.delete')) }},
                                                    cancelLabel: {{ \Illuminate\Support\Js::from(__('users.actions.cancel')) }},
                                                    onConfirm: () => $deleteForm({{ \Illuminate\Support\Js::from(route('admin.users.destroy', $u)) }}),
                                                })" />
                                        @endunless
                                    </x-admin.row-actions>
                                </div>
                            </td>
                        </tr>
                    @endforeach
                </tbody>
            </table>
            </div>
        </x-admin.data-table>
    </div>
</x-admin-layout>
