@extends('layouts.app')
@section('title', 'Staff & 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">Staff & Users</h1>
            <p class="text-sm text-ink-muted">Every login, its role, and account status. Deactivating removes access without deleting their history.</p>
        </div>
        <button class="btn-primary btn-sm" x-on:click="$dispatch('open-modal-add-user')"><i data-lucide="user-plus" class="w-3.5 h-3.5"></i> Add staff</button>
    </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 by name or email…" class="input flex-1">
        <select name="role_id" class="input sm:w-48" 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>
        <button class="btn-secondary btn-sm">Filter</button>
    </form>

    <div class="card overflow-x-auto">
        <table class="data-table">
            <thead><tr><th>Staff</th><th>Employee code</th><th>Email</th><th>Role</th><th>Status</th><th></th></tr></thead>
            <tbody>
                @forelse ($users as $user)
                    <tr>
                        <td class="flex items-center gap-2.5 font-medium">
                            <div class="w-7 h-7 rounded-full bg-primary-50 text-primary-700 flex items-center justify-center text-xs font-bold shrink-0">{{ strtoupper(substr($user->name, 0, 2)) }}</div>
                            {{ $user->name }}
                        </td>
                        <td class="text-xs text-ink-faint">{{ $user->employee_code ?? '—' }}</td>
                        <td class="text-xs">{{ $user->email }}</td>
                        <td><x-badge color="teal">{{ $user->role->name ?? 'No role' }}</x-badge></td>
                        <td><x-badge :color="$user->is_active ? 'emerald' : 'slate'">{{ $user->is_active ? 'Active' : 'Inactive' }}</x-badge></td>
                        <td class="text-right whitespace-nowrap">
                            <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-pw-{{ $user->id }}')">Reset password</button>
                            @if ($user->id !== auth()->id())
                                <form method="POST" action="{{ route('settings.users.destroy', $user) }}" class="inline" onsubmit="return confirm('Deactivate {{ $user->name }}?')">
                                    @csrf @method('DELETE')
                                    <button class="btn-ghost btn-sm text-danger">Deactivate</button>
                                </form>
                            @endif
                        </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="{{ $user->email }}" class="input" required></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>
                            <label class="flex items-center gap-2 text-sm"><input type="checkbox" name="is_active" value="1" @checked($user->is_active) class="rounded border-border text-primary-500"> Active</label>
                        </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-pw-{{ $user->id }}" title="Reset password for {{ $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" required minlength="8"></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</button>
                        </x-slot:footer>
                    </x-modal>
                @empty
                    <tr><td colspan="6" class="text-center text-ink-muted py-8">No staff found.</td></tr>
                @endforelse
            </tbody>
        </table>
    </div>
    {{ $users->links() }}

    <x-modal id="add-user" title="Add staff member">
        <form method="POST" action="{{ route('settings.users.store') }}" id="add-user-form" class="space-y-4">
            @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">Email</label><input type="email" name="email" class="input" required></div>
            <div><label class="field-label">Password</label><input type="password" name="password" class="input" required minlength="8"></div>
            <div>
                <label class="field-label">Role</label>
                <select name="role_id" class="input" required>
                    <option value="">Select role…</option>
                    @foreach ($roles as $role)<option value="{{ $role->id }}">{{ $role->name }}</option>@endforeach
                </select>
            </div>
        </form>
        <x-slot:footer>
            <button class="btn-secondary" x-on:click="open = false">Cancel</button>
            <button form="add-user-form" class="btn-primary">Add staff</button>
        </x-slot:footer>
    </x-modal>
</div>
@endsection