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

@section('content')
    <div class="page-head">
        <div><h1>Users</h1><p>{{ $users->total() }} staff account(s).</p></div>
        <button type="button" class="btn" data-modal="user-modal">+ New user</button>
    </div>

    <form class="filters" method="GET">
        <div class="field" style="flex:2 1 240px;">
            <label>Search</label>
            <input type="search" name="q" value="{{ request('q') }}" placeholder="Name, email, phone…">
        </div>
        <div class="field">
            <label>Role</label>
            <select name="role" data-auto-submit>
                <option value="">All roles</option>
                @foreach ($roles as $role)
                    <option value="{{ $role->id }}" @selected(request('role') == $role->id)>{{ $role->name }}</option>
                @endforeach
            </select>
        </div>
        <div class="field" style="flex:0 0 auto;"><label>&nbsp;</label><button type="submit" class="btn secondary">Filter</button></div>
    </form>

    <div class="card">
        <div class="card-body tight">
            <div class="table-wrap">
                <table class="data">
                    <thead><tr><th>User</th><th>Email</th><th>Role</th><th>Branch</th><th>Status</th><th>Last login</th><th></th></tr></thead>
                    <tbody>
                    @forelse ($users as $user)
                        <tr>
                            <td>
                                <div class="flex gap-1">
                                    <div class="avatar sm">{{ $user->initials() }}</div>
                                    <div>
                                        <strong>{{ $user->name }}</strong>
                                        <div class="tiny muted">{{ $user->job_title }}</div>
                                    </div>
                                </div>
                            </td>
                            <td class="small">{{ $user->email }}</td>
                            <td>
                                @foreach ($user->roles as $role)
                                    <span class="badge info">{{ $role->name }}</span>
                                @endforeach
                                @if ($user->is_super_admin)
                                    <span class="badge danger">super admin</span>
                                @endif
                            </td>
                            <td class="small">{{ $user->branch?->name ?? 'Head office' }}</td>
                            <td>
                                <span class="badge {{ status_color($user->is_active ? 'active' : 'inactive') }}">
                                    {{ $user->is_active ? 'active' : 'inactive' }}</span>
                                @if ($user->isLocked())
                                    <span class="badge danger">locked</span>
                                @endif
                            </td>
                            <td class="small">{{ $user->last_login_at?->diffForHumans() ?? 'never' }}</td>
                            <td class="right nowrap">
                                <button type="button" class="btn xs secondary" data-modal="reset-{{ $user->id }}">Reset password</button>
                                <form method="POST" action="{{ route('settings.users.toggle', $user) }}"
                                      data-confirm="{{ $user->is_active ? 'Deactivate' : 'Reactivate' }} {{ $user->name }}?">
                                    @csrf
                                    <button type="submit" class="btn xs {{ $user->is_active ? 'danger' : 'success' }}">
                                        {{ $user->is_active ? 'Deactivate' : 'Activate' }}
                                    </button>
                                </form>
                            </td>
                        </tr>
                    @empty
                        <tr><td colspan="7">@include('components.empty-state', ['icon' => '&#128100;', 'title' => 'No users found'])</td></tr>
                    @endforelse
                    </tbody>
                </table>
            </div>
        </div>
        @if ($users->hasPages())<div class="card-foot">{{ $users->links('partials.pagination') }}</div>@endif
    </div>

    <div class="modal-backdrop" id="user-modal">
        <div class="modal">
            <form method="POST" action="{{ route('settings.users.store') }}">
                @csrf
                <div class="modal-head"><h3>New user</h3>
                    <button type="button" class="modal-close" data-modal-close>&times;</button></div>
                <div class="modal-body">
                    <div class="form-grid cols-1">
                        <div class="field"><label>Full name <span class="req">*</span></label>
                            <input type="text" name="name" required></div>
                        <div class="field"><label>Email <span class="req">*</span></label>
                            <input type="email" name="email" required></div>
                        <div class="field"><label>Phone</label>
                            <input type="tel" name="phone"></div>
                        <div class="field"><label>Job title</label>
                            <input type="text" name="job_title"></div>
                        <div class="field"><label>Password <span class="req">*</span></label>
                            <div class="flex gap-1">
                                <input type="password" name="password" id="new-user-pw" required minlength="8" class="grow">
                                <button type="button" class="btn secondary sm" data-generate-password="#new-user-pw">Generate</button>
                            </div>
                            <span class="hint">Minimum 8 characters.</span></div>
                        <div class="field"><label>Confirm password <span class="req">*</span></label>
                            <input type="password" name="password_confirmation" required></div>
                        <div class="field"><label>Role <span class="req">*</span></label>
                            <select name="role_id" required>
                                <option value="">Select a role…</option>
                                @foreach ($roles as $role)
                                    <option value="{{ $role->id }}">{{ $role->name }}</option>
                                @endforeach
                            </select></div>
                        <div class="field"><label>Branch</label>
                            <select name="branch_id">
                                <option value="">Head office</option>
                                @foreach ($branches as $branch)
                                    <option value="{{ $branch->id }}">{{ $branch->name }}</option>
                                @endforeach
                            </select></div>
                    </div>
                </div>
                <div class="modal-foot">
                    <button type="button" class="btn secondary" data-modal-close>Cancel</button>
                    <button type="submit" class="btn">Create user</button>
                </div>
            </form>
        </div>
    </div>

    @foreach ($users as $user)
        <div class="modal-backdrop" id="reset-{{ $user->id }}">
            <div class="modal">
                <form method="POST" action="{{ route('settings.users.reset-password', $user) }}">
                    @csrf
                    <div class="modal-head"><h3>Reset password for {{ $user->name }}</h3>
                        <button type="button" class="modal-close" data-modal-close>&times;</button></div>
                    <div class="modal-body">
                        <div class="form-grid cols-1">
                            <div class="field"><label>New password <span class="req">*</span></label>
                                <div class="flex gap-1">
                                    <input type="password" name="password" id="reset-{{ $user->id }}-pw" required minlength="8" class="grow">
                                    <button type="button" class="btn secondary sm" data-generate-password="#reset-{{ $user->id }}-pw">Generate</button>
                                </div></div>
                            <div class="field"><label>Confirm password <span class="req">*</span></label>
                                <input type="password" name="password_confirmation" required></div>
                        </div>
                    </div>
                    <div class="modal-foot">
                        <button type="button" class="btn secondary" data-modal-close>Cancel</button>
                        <button type="submit" class="btn">Reset password</button>
                    </div>
                </form>
            </div>
        </div>
    @endforeach
@endsection