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

@section('breadcrumb')
    <li class="breadcrumb-item"><a href="{{ route('dashboard') }}">Dashboard</a></li>
    <li class="breadcrumb-item active">Users</li>
@endsection

@section('content')
<div class="page-header">
    <div>
        <h1 class="page-title">Users</h1>
        <p class="page-subtitle">Manage who can access this company account</p>
    </div>
    @if(auth()->user()->hasPermission('users','create'))
    <a href="{{ route('admin.users.create') }}" class="btn btn-primary">
        <i class="bi bi-person-plus me-1"></i>Add User
    </a>
    @endif
</div>

<div class="card">
    <div class="card-body p-0">
        <div class="table-responsive">
            <table class="table table-hover mb-0" id="usersTable">
                <thead>
                    <tr>
                        <th style="width:40px">#</th>
                        <th>User</th>
                        <th>Username</th>
                        <th>Roles</th>
                        <th>Last Login</th>
                        <th>Status</th>
                        <th style="width:130px">Actions</th>
                    </tr>
                </thead>
                <tbody>
                    @forelse($users as $i => $user)
                    <tr class="{{ $user->trashed() ? 'text-muted' : '' }}">
                        <td class="text-muted" style="font-size:12px">{{ $users->firstItem() + $i }}</td>
                        <td>
                            <div class="d-flex align-items-center gap-2">
                                <img src="{{ $user->avatar_url }}" alt=""
                                     style="width:32px;height:32px;border-radius:50%;object-fit:cover;{{ $user->trashed() ? 'opacity:.4' : '' }}">
                                <div>
                                    <div class="fw-semibold" style="font-size:13.5px">{{ $user->name }}</div>
                                    <div class="text-muted" style="font-size:11.5px">{{ $user->email }}</div>
                                </div>
                            </div>
                        </td>
                        <td>
                            <code style="font-size:12.5px">{{ $user->username }}</code>
                            @if($user->is_admin)
                                <span class="badge bg-primary ms-1" style="font-size:10px">Admin</span>
                            @endif
                            @if($user->id === auth()->id())
                                <span class="badge bg-secondary ms-1" style="font-size:10px">You</span>
                            @endif
                        </td>
                        <td>
                            @forelse($user->roles as $role)
                                <span class="badge bg-light text-dark border me-1" style="font-size:11px">
                                    {{ $role->display_name ?? $role->name }}
                                </span>
                            @empty
                                <span class="text-muted" style="font-size:12px">No roles</span>
                            @endforelse
                        </td>
                        <td class="text-muted" style="font-size:12px">
                            {{ $user->last_login_at ? $user->last_login_at->diffForHumans() : 'Never' }}
                        </td>
                        <td>
                            @if($user->trashed())
                                <span class="badge bg-secondary">Deleted</span>
                            @elseif($user->is_active)
                                <span class="badge" style="background:#d1e7dd;color:#0a3622">Active</span>
                            @else
                                <span class="badge" style="background:#f8d7da;color:#842029">Inactive</span>
                            @endif
                            @if($user->force_password_change)
                                <span class="badge bg-warning text-dark ms-1" style="font-size:10px" title="Must change password">
                                    <i class="bi bi-key"></i>
                                </span>
                            @endif
                        </td>
                        <td>
                            @if(!$user->trashed())
                            <div class="d-flex gap-1">
                                @if(auth()->user()->hasPermission('users','edit'))
                                <a href="{{ route('admin.users.edit', $user) }}"
                                   class="btn btn-outline-primary btn-sm" title="Edit"><i class="bi bi-pencil"></i></a>

                                @if($user->id !== auth()->id())
                                <form method="POST" action="{{ route('admin.users.toggle-active', $user) }}" id="toggle-{{ $user->id }}">
                                    @csrf @method('PATCH')
                                    <button type="button" class="btn btn-sm {{ $user->is_active ? 'btn-outline-warning' : 'btn-outline-success' }}"
                                        data-confirm data-form="#toggle-{{ $user->id }}"
                                        data-confirm-title="{{ $user->is_active ? 'Deactivate User?' : 'Activate User?' }}"
                                        data-confirm-text="{{ $user->is_active ? 'This will prevent the user from logging in.' : 'This will allow the user to log in.' }}"
                                        data-confirm-icon="{{ $user->is_active ? 'warning' : 'question' }}"
                                        data-confirm-color="{{ $user->is_active ? '#E67E22' : '#27AE60' }}"
                                        data-confirm-btn="{{ $user->is_active ? 'Deactivate' : 'Activate' }}"
                                        title="{{ $user->is_active ? 'Deactivate' : 'Activate' }}">
                                        <i class="bi bi-{{ $user->is_active ? 'pause-circle' : 'play-circle' }}"></i>
                                    </button>
                                </form>

                                <form method="POST" action="{{ route('admin.users.destroy', $user) }}" id="del-{{ $user->id }}">
                                    @csrf @method('DELETE')
                                    <button type="button" class="btn btn-outline-danger btn-sm"
                                        data-confirm data-form="#del-{{ $user->id }}"
                                        data-confirm-title="Delete User?"
                                        data-confirm-text="This will soft-delete {{ $user->name }}. They will not be able to log in."
                                        data-confirm-icon="warning"
                                        data-confirm-color="#E74C3C"
                                        data-confirm-btn="Delete"
                                        title="Delete">
                                        <i class="bi bi-trash"></i>
                                    </button>
                                </form>
                                @endif
                                @endif
                            </div>
                            @else
                                <span class="text-muted" style="font-size:12px">Deleted</span>
                            @endif
                        </td>
                    </tr>
                    @empty
                    <tr>
                        <td colspan="7" class="text-center py-5">
                            <i class="bi bi-people display-6 d-block text-muted mb-2"></i>
                            <span class="text-muted">No users found.</span><br>
                            <a href="{{ route('admin.users.create') }}" class="btn btn-primary btn-sm mt-3">Add First User</a>
                        </td>
                    </tr>
                    @endforelse
                </tbody>
            </table>
        </div>
        @if($users->hasPages())
        <div class="px-4 py-3 border-top">{{ $users->links() }}</div>
        @endif
    </div>
</div>
@endsection