{{--
    brafa Systems — Users. Mirror of the Properties list pattern.
    Livewire backing: App\Http\Livewire\LaravelExamples\UserManagement\Index.
    Bindings preserved: wire:model perPage/search, wire:click sortBy/destroy/
    showAddUserModal/store, wire:model picture/name/email/role_id/password/
    passwordConfirmation, @can policies, status/error flashes, the Bootstrap
    modal (data-toggle / wire:ignore.self), $users pagination.
--}}
<div class="brafa-screen">
    @if (Session::has('status'))
        <div class="status-banner status-banner--success">{{ Session::get('status') }}</div>
    @elseif (Session::has('error'))
        <div class="status-banner status-banner--danger">{{ Session::get('error') }}</div>
    @endif

    <div class="card prop-list">
        {{-- Toolbar --}}
        <div class="prop-toolbar">
            <div class="prop-toolbar__search">
                <x-lucide name="search" size="16" />
                <input wire:model.debounce.300ms="search" type="text" class="input" placeholder="Search users…">
            </div>
            <div class="prop-toolbar__right">
                <label class="prop-toolbar__perpage">
                    <span class="eyebrow">Show</span>
                    <select wire:model="perPage" class="select">
                        <option value="5">5</option>
                        <option value="10">10</option>
                        <option value="15">15</option>
                        <option value="20">20</option>
                    </select>
                    <span class="eyebrow">entries</span>
                </label>
                @can('create', App\Models\User::class)
                    <button type="button" class="btn btn--sm"
                            data-toggle="modal" data-target="#addUserModal"
                            wire:click="showAddUserModal">
                        <x-lucide name="plus" size="14" />
                        Add user
                    </button>
                @endcan
            </div>
        </div>

        {{-- Table --}}
        <div style="overflow-x: auto;">
            <table class="table">
                <thead>
                    <tr>
                        <th wire:click="sortBy('id')" style="cursor:pointer;">ID</th>
                        <th style="width: 60px;">Photo</th>
                        <th wire:click="sortBy('name')" style="cursor:pointer;">Name</th>
                        <th wire:click="sortBy('email')" style="cursor:pointer;">Email</th>
                        <th wire:click="sortBy('role_id')" style="cursor:pointer;">Role</th>
                        <th wire:click="sortBy('created_at')" style="cursor:pointer;">Created</th>
                        @can('manage-users', App\User::class)
                            <th style="width: 90px;">Actions</th>
                        @endcan
                    </tr>
                </thead>
                <tbody>
                    @forelse ($users as $user)
                        @php
                            $initials = collect(explode(' ', trim((string) $user->name)))
                                ->filter()->take(2)->map(fn ($p) => strtoupper(mb_substr($p, 0, 1)))->implode('');
                        @endphp
                        <tr wire:key="row-{{ $user->id }}">
                            <td class="mono muted">{{ $user->id }}</td>
                            <td>
                                @if ($user->picture)
                                    <img src="/storage/{{ $user->picture }}" alt="{{ $user->name }}"
                                         class="brafa-avatar" style="width:36px;height:36px;font-size:12px;">
                                @else
                                    <div class="brafa-avatar" style="width:36px;height:36px;font-size:12px;">{{ $initials ?: '?' }}</div>
                                @endif
                            </td>
                            <td><div class="prop-name__main">{{ $user->name }}</div></td>
                            <td class="muted">{{ $user->email }}</td>
                            <td><span class="pill pill--ink">{{ $user->role->name }}</span></td>
                            <td class="mono muted">{{ $user->created_at }}</td>
                            @can('manage-users', auth()->user())
                                <td>
                                    <div class="hstack" style="gap:6px;">
                                        @can('update', $user)
                                            <a class="row-chevron" href="{{ route('edit-user', $user) }}" title="Edit">
                                                <x-lucide name="edit-3" size="16" />
                                            </a>
                                        @endcan
                                        @can('delete', $user)
                                            <button type="button" class="row-chevron" title="Delete"
                                                    onclick="confirm('Are you sure you want to delete this user?') || event.stopImmediatePropagation()"
                                                    wire:click="destroy({{ $user->id }})">
                                                <x-lucide name="trash-2" size="16" />
                                            </button>
                                        @endcan
                                    </div>
                                </td>
                            @endcan
                        </tr>
                    @empty
                        <tr>
                            <td colspan="7" style="padding:48px 24px;text-align:center;color:var(--fg-subtle);font-size:13px;">
                                No users match your search.
                            </td>
                        </tr>
                    @endforelse
                </tbody>
            </table>
        </div>

        {{-- Footer --}}
        <div class="prop-list__footer">
            <div>
                @if ($users->total() > 0)
                    Showing <strong style="color:var(--fg);">{{ $users->firstItem() }}–{{ $users->lastItem() }}</strong>
                    of <strong style="color:var(--fg);">{{ $users->total() }}</strong>
                @else
                    No entries
                @endif
            </div>
            <div>{{ $users->links('vendor.pagination.brafa') }}</div>
        </div>
    </div>

    {{-- Add User modal — kept as the existing Bootstrap modal (data-toggle /
         wire:ignore.self). Markup-only restyle inside. --}}
    <div wire:ignore.self class="modal fade" id="addUserModal" tabindex="-1" aria-labelledby="addUserModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered">
            <div class="brafa-modal-content modal-content">
                <div class="brafa-modal-header">
                    <h5 class="brafa-modal-title" id="addUserModalLabel">Add user</h5>
                    <button type="button" class="brafa-modal-close" data-dismiss="modal" aria-label="Close">
                        <x-lucide name="x" size="16" />
                    </button>
                </div>
                <div class="brafa-modal-body">
                    <form wire:submit.prevent="store" enctype="multipart/form-data">
                        <div class="d-flex justify-content-center" style="margin-bottom: 18px;">
                            <div class="profile-avatar-wrap">
                                @if ($picture)
                                    <img src="{{ $picture->temporaryUrl() }}" class="brafa-avatar" style="width:72px;height:72px;" alt="Preview">
                                @else
                                    <div class="brafa-avatar" style="width:72px;height:72px;font-size:24px;">+</div>
                                @endif
                                <label for="file-input" class="profile-avatar-edit" title="Select image">
                                    <x-lucide name="edit-3" size="13" stroke="#FFFFFF" />
                                    <input wire:model="picture" type="file" id="file-input">
                                </label>
                            </div>
                        </div>
                        @error('picture') <p class="field-error" style="text-align:center;">{{ $message }}</p> @enderror

                        <div class="form-group">
                            <label class="field-label" for="exampleInputname">Name</label>
                            <input wire:model.lazy="name" type="text" id="exampleInputname" class="input @error('name') is-invalid @enderror" placeholder="Enter name">
                            @error('name') <p class="field-error">{{ $message }}</p> @enderror
                        </div>
                        <div class="form-group">
                            <label class="field-label" for="exampleInputemail">Email</label>
                            <input wire:model.lazy="email" type="email" id="exampleInputemail" class="input @error('email') is-invalid @enderror" placeholder="Enter email">
                            @error('email') <p class="field-error">{{ $message }}</p> @enderror
                        </div>
                        <div class="form-group">
                            <label class="field-label" for="role">Role</label>
                            <select wire:model.lazy="role_id" id="role" class="select @error('role_id') is-invalid @enderror">
                                @foreach ($roles as $role)
                                    <option value="{{ $role->id }}">{{ $role->name }}</option>
                                @endforeach
                            </select>
                            @error('role_id') <p class="field-error">{{ $message }}</p> @enderror
                        </div>
                        <div class="form-group">
                            <label class="field-label" for="examplePassword">Password</label>
                            <input wire:model.lazy="password" type="password" id="examplePassword" class="input @error('password') is-invalid @enderror" placeholder="Enter password">
                            @error('password') <p class="field-error">{{ $message }}</p> @enderror
                        </div>
                        <div class="form-group">
                            <label class="field-label" for="examplePassword2">Confirm password</label>
                            <input wire:model.lazy="passwordConfirmation" type="password" name="passwordConfirmation" id="examplePassword2" class="input" placeholder="Confirm password">
                        </div>

                        <div class="hstack" style="margin-top: 18px;">
                            <button type="submit" class="btn">Add user</button>
                            <button type="button" class="btn btn--outline" data-dismiss="modal">Cancel</button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>

    @push('js')
        <script src="{{ asset('assets') }}/js/plugins/perfect-scrollbar.min.js"></script>
    @endpush
</div>