<?php include APP_PATH . '/views/layouts/header.php'; ?>

<div class="container-fluid">
    <!-- Page Header -->
    <div class="page-header">
        <div class="row align-items-center">
            <div class="col">
                <h1>Users</h1>
                <nav aria-label="breadcrumb">
                    <ol class="breadcrumb">
                        <li class="breadcrumb-item"><a href="<?php echo URL_PATH; ?>/admin/dashboard">Dashboard</a></li>
                        <li class="breadcrumb-item active">Users</li>
                    </ol>
                </nav>
            </div>
            <div class="col-auto">
                <a href="<?php echo URL_PATH; ?>/admin/users/create" class="btn btn-primary">
                    <i class="bi bi-plus-circle"></i> Add New User
                </a>
            </div>
        </div>
    </div>
    
    <!-- Search Box -->
    <div class="card mb-3">
        <div class="card-body">
            <div class="row">
                <div class="col-md-12">
                    <input type="text" id="userSearch" class="form-control" placeholder="🔍 Search users by username or email...">
                </div>
            </div>
        </div>
    </div>

    <!-- Users Table -->
    <div class="card">
        <div class="card-header">
            <i class="bi bi-people"></i> All Users
        </div>
        <div class="card-body">
            <div class="table-responsive">
                <table class="table table-hover data-table">
                    <thead>
                        <tr>
                            <th>ID</th>
                            <th>Username</th>
                            <th>Email</th>
                            <th>Status</th>
                            <th>Created</th>
                            <th>Actions</th>
                        </tr>
                    </thead>
                    <tbody id="usersTableBody">
                        <!-- Data will be loaded via AJAX -->
                    </tbody>
                </table>
            </div>
            
            <div id="usersPagination"></div>
            
            <div id="usersEmpty" class="alert alert-info" style="display: none;">
                <i class="bi bi-info-circle"></i> No users found. 
                <a href="<?php echo URL_PATH; ?>/admin/users/create">Create your first user</a>
            </div>
        </div>
    </div>
</div>

<script src="<?php echo URL_PATH; ?>/js/ajax-search.js"></script>
<script>
// Initialize AJAX table handler for users
new AjaxTableHandler({
    searchInput: '#userSearch',
    tableBody: '#usersTableBody',
    paginationContainer: '#usersPagination',
    emptyMessage: '#usersEmpty',
    apiEndpoint: '<?php echo URL_PATH; ?>/admin/ajax/search-users',
    renderRow: (user) => {
        const statusBadge = user.is_active == 1
            ? '<span class="badge bg-success">Active</span>' 
            : '<span class="badge bg-danger">Inactive</span>';
        
        const currentUserId = <?php echo getCurrentUserId(); ?>;
        const deleteButton = user.id != currentUserId 
            ? `<a href="<?php echo URL_PATH; ?>/admin/users/delete/${user.id}" 
                   class="btn btn-sm btn-danger btn-delete" 
                   data-name="${escapeHtml(user.username)}"
                   title="Delete">
                    <i class="bi bi-trash"></i>
                </a>`
            : '';
        
        return `
            <tr>
                <td>${user.id}</td>
                <td>
                    <i class="bi bi-person-circle"></i>
                    ${escapeHtml(user.username)}
                </td>
                <td>${escapeHtml(user.email)}</td>
                <td>${statusBadge}</td>
                <td>${formatDate(user.created_at)}</td>
                <td>
                    <a href="<?php echo URL_PATH; ?>/admin/users/edit/${user.id}" 
                       class="btn btn-sm btn-info" title="Edit">
                        <i class="bi bi-pencil"></i>
                    </a>
                    ${deleteButton}
                </td>
            </tr>
        `;
    }
});
</script>

<?php include APP_PATH . '/views/layouts/footer.php'; ?>
