@extends('layouts.app')
@section('title', 'Users')

@section('content')
<div class="space-y-6" x-data="{ ...modal() }">
    <div class="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-3">
        <div>
            <h1 class="text-xl font-bold">Users</h1>
            <p class="text-sm text-ink-muted">Every staff account and the role that controls what they can do.
                @can('settings.roles') <a href="{{ route('settings.roles.index') }}" class="text-primary-600 font-semibold hover:underline">Change what each role can do →</a> @endcan</p>
        </div>
        @can('users.manage')
            <button class="btn-primary btn-sm" x-on:click="$dispatch('open-modal-new-user')"><i data-lucide="user-plus" class="w-3.5 h-3.5"></i> Add user</button>
        @endcan
    </div>

    <form method="GET" class="card card-pad !p-3 flex flex-col sm:flex-row gap-2">
        <input type="text" name="search" value="{{ request('search') }}" placeholder="Search name or email…" class="input flex-1">
        <select name="role_id" class="input sm:w-56" onchange="this.form.submit()">
            <option value="">All roles</option>
            @foreach ($roles as $role)
                <option value="{{ $role->id }}" @selected(request('role_id') == $role->id)>{{ $role->name }}</option>
            @endforeach
        </select>
    </form>

    <div class="card overflow-x-auto">
        <table class="data-table">
            <thead><tr><th>Name</th><th>Employee code</th><th>Email</th><th>Phone</th><th>Role</th><th>Sections</th><th>Sign-in</th><th>Status</th><th></th></tr></thead>
            <tbody>
                @forelse ($users as $user)
                    <tr>
                        <td class="font-medium">{{ $user->name }}</td>
                        <td>{{ $user->employee_code ?? '—' }}</td>
                        <td>{{ $user->email }}</td>
                        <td>{{ $user->phone ?? '—' }}</td>
                        <td><x-badge color="violet">{{ $user->role->name ?? 'No role' }}</x-badge></td>
                        <td class="text-xs">
                            @if (($user->location ?: 'all') === 'all')
                                <span class="text-ink-faint">All areas</span>
                            @elseif ($user->sections->isNotEmpty())
                                <div class="flex flex-wrap gap-1">
                                    @foreach ($user->sections as $section)
                                        <x-badge color="teal">{{ $section->name }}</x-badge>
                                    @endforeach
                                </div>
                            @else
                                <x-badge color="amber">{{ \App\Models\User::locationOptions()[$user->location] ?? 'No sections' }}</x-badge>
                            @endif
                        </td>
                        <td class="text-xs">
                            @if ($user->usesPinOnly())
                                <x-badge color="{{ $user->hasPin() ? 'emerald' : 'amber' }}">{{ $user->hasPin() ? 'PIN only' : 'PIN needed' }}</x-badge>
                            @else
                                Email{{ $user->hasPin() ? ' + PIN' : '' }}
                            @endif
                        </td>
                        <td><x-badge color="{{ $user->is_active ? 'emerald' : 'rose' }}">{{ $user->is_active ? 'Active' : 'Inactive' }}</x-badge></td>
                        <td class="text-right">
                            <div class="flex justify-end gap-1.5">
                              @can('users.manage')
                                <button class="btn-ghost btn-sm" x-on:click="$dispatch('open-modal-edit-user-{{ $user->id }}')">Edit</button>
                                <button class="btn-ghost btn-sm" x-on:click="$dispatch('open-modal-reset-pin-{{ $user->id }}')">{{ $user->hasPin() ? 'Reset PIN' : 'Set PIN' }}</button>
                                @unless ($user->usesPinOnly())
                                    <button class="btn-ghost btn-sm" x-on:click="$dispatch('open-modal-reset-pw-{{ $user->id }}')">Reset password</button>
                                @endunless
                                <form method="POST" action="{{ route('settings.users.toggle-active', $user) }}">
                                    @csrf
                                    <button class="btn-ghost btn-sm {{ $user->is_active ? 'text-danger' : 'text-success' }}">{{ $user->is_active ? 'Deactivate' : 'Reactivate' }}</button>
                                </form>
                              @endcan
                            </div>
                        </td>
                    </tr>

                    <x-modal id="edit-user-{{ $user->id }}" title="Edit {{ $user->name }}">
                        <form method="POST" action="{{ route('settings.users.update', $user) }}" id="edit-user-{{ $user->id }}-form" class="space-y-4">
                            @csrf @method('PUT')
                            <div><label class="field-label">Name</label><input type="text" name="name" value="{{ $user->name }}" class="input" required></div>
                            <div class="grid grid-cols-2 gap-3">
                                <div><label class="field-label">Employee code</label><input type="text" name="employee_code" value="{{ $user->employee_code }}" class="input"></div>
                                <div><label class="field-label">Phone</label><input type="text" name="phone" value="{{ $user->phone }}" class="input"></div>
                            </div>
                            <div><label class="field-label">Email</label><input type="email" name="email" value="{{ str_ends_with($user->email, '@staff.invalid') ? '' : $user->email }}" class="input" @if(! $user->usesPinOnly()) required @endif placeholder="{{ $user->usesPinOnly() ? 'Not needed — signs in with PIN' : '' }}"></div>
                            <div>
                                <label class="field-label">Role</label>
                                <select name="role_id" class="input" required>
                                    @foreach ($roles as $role)
                                        <option value="{{ $role->id }}" @selected($user->role_id === $role->id)>{{ $role->name }}</option>
                                    @endforeach
                                </select>
                            </div>
                            @include('settings.users._access', ['user' => $user, 'sections' => $sections])
                        </form>
                        <x-slot:footer>
                            <button class="btn-secondary" x-on:click="open = false">Cancel</button>
                            <button form="edit-user-{{ $user->id }}-form" class="btn-primary">Save</button>
                        </x-slot:footer>
                    </x-modal>

                    <x-modal id="reset-pin-{{ $user->id }}" title="{{ $user->hasPin() ? 'Reset PIN' : 'Set PIN' }} · {{ $user->name }}">
                        <form method="POST" action="{{ route('settings.users.reset-pin', $user) }}" id="reset-pin-{{ $user->id }}-form" class="space-y-4" autocomplete="off">
                            @csrf
                            <div>
                                <label class="field-label">New PIN (4 or 5 digits)</label>
                                <input type="text" inputmode="numeric" pattern="[0-9]{4,5}" minlength="4" maxlength="5" name="pin" class="input tracking-[0.4em]" required>
                            </div>
                            <p class="text-xs text-ink-muted">Each person needs their own PIN — it is how the till knows who is signing in. Ask them to change it themselves from My Profile afterwards.</p>
                        </form>
                        <x-slot:footer>
                            <button class="btn-secondary" x-on:click="open = false">Cancel</button>
                            <button form="reset-pin-{{ $user->id }}-form" class="btn-primary">Save PIN</button>
                        </x-slot:footer>
                    </x-modal>

                    <x-modal id="reset-pw-{{ $user->id }}" title="Reset password · {{ $user->name }}">
                        <form method="POST" action="{{ route('settings.users.reset-password', $user) }}" id="reset-pw-{{ $user->id }}-form" class="space-y-4">
                            @csrf
                            <div><label class="field-label">New password</label><input type="password" name="password" class="input" minlength="8" required></div>
                        </form>
                        <x-slot:footer>
                            <button class="btn-secondary" x-on:click="open = false">Cancel</button>
                            <button form="reset-pw-{{ $user->id }}-form" class="btn-primary">Reset password</button>
                        </x-slot:footer>
                    </x-modal>
                @empty
                    <tr><td colspan="9" class="text-center text-ink-muted py-8">No users found.</td></tr>
                @endforelse
            </tbody>
        </table>
    </div>
    {{ $users->links() }}

    <x-modal id="new-user" title="Add user">
        <form method="POST" action="{{ route('settings.users.store') }}" id="new-user-form" class="space-y-4" autocomplete="off"
              x-data="{ pinOnly: false }">
            @csrf
            <div><label class="field-label">Name</label><input type="text" name="name" class="input" required></div>
            <div class="grid grid-cols-2 gap-3">
                <div><label class="field-label">Employee code</label><input type="text" name="employee_code" class="input"></div>
                <div><label class="field-label">Phone</label><input type="text" name="phone" class="input"></div>
            </div>
            <div>
                <label class="field-label">Role</label>
                <select name="role_id" class="input" required x-on:change="pinOnly = $event.target.selectedOptions[0].dataset.pinOnly === '1'">
                    <option value="">Select role…</option>
                    @foreach ($roles as $role)
                        <option value="{{ $role->id }}" data-pin-only="{{ in_array($role->slug, (array) config('pos.pin_only_roles', []), true) ? 1 : 0 }}">{{ $role->name }}</option>
                    @endforeach
                </select>
            </div>

            <div x-show="pinOnly" x-cloak class="rounded-lg bg-primary-50 p-3 space-y-2">
                <p class="text-xs text-primary-800">This role signs in with a PIN only — no email or password.</p>
                <div><label class="field-label">PIN (4 or 5 digits)</label><input type="text" inputmode="numeric" pattern="[0-9]{4,5}" minlength="4" maxlength="5" name="pin" class="input tracking-[0.4em]" x-bind:required="pinOnly" x-bind:disabled="!pinOnly"></div>
            </div>

            <div x-show="!pinOnly" class="space-y-4">
                <div><label class="field-label">Email</label><input type="email" name="email" class="input" x-bind:required="!pinOnly" x-bind:disabled="pinOnly"></div>
                <div><label class="field-label">Temporary password</label><input type="password" name="password" class="input" minlength="8" x-bind:required="!pinOnly" x-bind:disabled="pinOnly"></div>
                <div><label class="field-label">PIN for quick till sign-in (optional)</label><input type="text" inputmode="numeric" pattern="[0-9]{4,5}" minlength="4" maxlength="5" name="pin" class="input tracking-[0.4em]" x-bind:disabled="pinOnly"></div>
            </div>
            @include('settings.users._access', ['sections' => $sections])
        </form>
        <x-slot:footer>
            <button class="btn-secondary" x-on:click="open = false">Cancel</button>
            <button form="new-user-form" class="btn-primary">Create user</button>
        </x-slot:footer>
    </x-modal>
</div>
@endsection