@extends('layouts.app')

@section('content')
<div class="container-fluid min-vh-100 bg-light">

    <!-- Page Title -->
    <h1 class="text-center text-dark py-5">User Management</h1>

    <!-- Filters Section -->
    <div class="card bg-light shadow-sm rounded-lg mb-4">
        <div class="card-header bg-white text-dark py-3 rounded-top border-0">
            <h3 class="m-0">Filters</h3>
        </div>
        <div class="card-body">
            <form method="GET" action="{{ route('admin.users') }}">
                <div class="row g-3">
                    <div class="col-md-3">
                        <select name="role" class="form-select form-control-lg custom-select" onchange="this.form.submit()">
                            <option value="">Filter by Role</option>
                            <option value="admin" {{ request('role') == 'admin' ? 'selected' : '' }}>Admin</option>
                            <option value="user" {{ request('role') == 'user' ? 'selected' : '' }}>User</option>
                        </select>
                    </div>
                    <div class="col-md-3">
                        <select name="status" class="form-select form-control-lg custom-select" onchange="this.form.submit()">
                            <option value="">Filter by Status</option>
                            <option value="active" {{ request('status') == 'active' ? 'selected' : '' }}>Active</option>
                            <option value="inactive" {{ request('status') == 'inactive' ? 'selected' : '' }}>Inactive</option>
                        </select>
                    </div>
                    
                    <div class="col-md-3">
                        <input type="text" name="search" class="form-control form-control-lg shadow-sm" placeholder="Search by name" value="{{ request('search') }}">
                    </div>
                </div>
            </form>
        </div>
    </div>

    <!-- User Table -->
    <div class="table-responsive">
        <table class="table table-borderless table-hover text-dark">
            <thead class="bg-light">
                <tr>
                    <th>Name</th>
                    <th>Email</th>
                    <th>Role</th>
                    <th>Status</th>
                    <th>Last Login</th>
                    <th>Actions</th>
                </tr>
            </thead>
            <tbody>
                @forelse ($users as $user)
                <tr>
                    <td>{{ $user->name }}</td>
                    <td>{{ $user->email }}</td>
                    <td><span class="badge bg-primary">{{ ucfirst($user->role) }}</span></td>
                    <td>
                        <span class="badge {{ $user->status == 'active' ? 'bg-success' : 'bg-danger' }}">
                            {{ ucfirst($user->status) }}
                        </span>
                    </td>
                    <td>{{ ucfirst($user->department) }}</td>
                    <td>{{ $user->last_login ? $user->last_login->format('d M Y H:i') : 'Never' }}</td>
                    <td>
                        <div class="d-flex gap-2">
                            <!-- Edit -->
                            <a href="{{ route('admin.users.edit', $user->id) }}" class="btn btn-sm btn-outline-primary">
                                <i class="bi bi-pencil-square"></i> Edit
                            </a>
                            <!-- Change Password -->
                            <a href="{{ route('password.change', $user->id) }}" class="btn btn-sm btn-outline-warning">
                                <i class="bi bi-lock"></i> Change Password
                            </a>
                            <!-- Suspend/Activate -->
                            @if ($user->status == 'active')
                                <button type="button" class="btn btn-sm btn-outline-danger" data-bs-toggle="modal" data-bs-target="#confirmSuspendModal{{ $user->id }}">
                                    <i class="bi bi-x-circle"></i> Suspend
                                </button>
                            @else
                                <button type="button" class="btn btn-sm btn-outline-success" data-bs-toggle="modal" data-bs-target="#confirmActivateModal{{ $user->id }}">
                                    <i class="bi bi-check-circle"></i> Activate
                                </button>
                            @endif
                            <!-- Impersonate -->
                            <button type="button" class="btn btn-sm btn-outline-info" data-bs-toggle="modal" data-bs-target="#confirmImpersonateModal{{ $user->id }}">
                                <i class="bi bi-person"></i> Impersonate
                            </button>
                        </div>
                    </td>
                </tr>

                <!-- Suspend Modal -->
                <div class="modal fade" id="confirmSuspendModal{{ $user->id }}" tabindex="-1">
                    <div class="modal-dialog">
                        <div class="modal-content">
                            <div class="modal-header">
                                <h5 class="modal-title">Suspend User</h5>
                                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                            </div>
                            <div class="modal-body">
                                Are you sure you want to suspend <strong>{{ $user->name }}</strong>?
                            </div>
                            <div class="modal-footer">
                                <form action="{{ route('admin.users.suspend', $user->id) }}" method="POST">
                                    @csrf
                                    <button type="submit" class="btn btn-danger">Suspend</button>
                                </form>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- Activate Modal -->
                <div class="modal fade" id="confirmActivateModal{{ $user->id }}" tabindex="-1">
                    <div class="modal-dialog">
                        <div class="modal-content">
                            <div class="modal-header">
                                <h5 class="modal-title">Activate User</h5>
                                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                            </div>
                            <div class="modal-body">
                                Are you sure you want to activate <strong>{{ $user->name }}</strong>?
                            </div>
                            <div class="modal-footer">
                                <form action="{{ route('admin.users.activate', $user->id) }}" method="POST">
                                    @csrf
                                    <button type="submit" class="btn btn-success">Activate</button>
                                </form>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- Impersonate Modal -->
                <div class="modal fade" id="confirmImpersonateModal{{ $user->id }}" tabindex="-1">
                    <div class="modal-dialog">
                        <div class="modal-content">
                            <div class="modal-header">
                                <h5 class="modal-title">Impersonate User</h5>
                                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                            </div>
                            <div class="modal-body">
                                Are you sure you want to impersonate <strong>{{ $user->name }}</strong>?
                            </div>
                            <div class="modal-footer">
                                <form action="{{ route('admin.impersonate', $user->id) }}" method="POST">
                                    @csrf
                                    <button type="submit" class="btn btn-info">Yes, Impersonate {{ $user->name }} now.</button>
                                </form>
                            </div>
                        </div>
                    </div>
                </div>
                @empty
                <tr>
                    <td colspan="7" class="text-center">No users found.</td>
                </tr>
                @endforelse
            </tbody>
        </table>
    </div>

    <!-- Pagination -->
    <div class="mt-4">
        {{ $users->links() }}
    </div>
</div>
@endsection