<?= $this->extend('layouts/main') ?>
<?= $this->section('content') ?>

<div class="d-flex justify-content-between align-items-start mb-3">
    <div>
        <h1 class="h3 mb-1">Staff Users</h1>
        <p class="text-muted mb-0">Manage your hotel staff accounts and access permissions.</p>
    </div>
    <a href="<?= site_url('users/new') ?>" class="btn btn-primary"><i class="bi bi-plus-lg me-1"></i>New Staff User</a>
</div>

<div class="row g-3 mb-3">
    <div class="col-6 col-lg-3">
        <div class="card h-100"><div class="card-body">
            <div class="text-muted small mb-1">Total Staff</div>
            <div class="fs-3 fw-bold"><?= $stats['total'] ?></div>
            <div class="text-muted small">All staff accounts</div>
        </div></div>
    </div>
    <div class="col-6 col-lg-3">
        <div class="card h-100"><div class="card-body">
            <div class="text-muted small mb-1">Active</div>
            <div class="fs-3 fw-bold text-success"><?= $stats['active'] ?></div>
            <div class="text-muted small">Currently active</div>
        </div></div>
    </div>
    <div class="col-6 col-lg-3">
        <div class="card h-100"><div class="card-body">
            <div class="text-muted small mb-1">Inactive</div>
            <div class="fs-3 fw-bold text-danger"><?= $stats['inactive'] ?></div>
            <div class="text-muted small">Deactivated accounts</div>
        </div></div>
    </div>
    <div class="col-6 col-lg-3">
        <div class="card h-100"><div class="card-body">
            <div class="text-muted small mb-1">Roles</div>
            <div class="fs-3 fw-bold"><?= $stats['roles'] ?></div>
            <div class="text-muted small">Different roles</div>
        </div></div>
    </div>
</div>

<div class="card shadow-sm mb-3">
    <div class="card-body">
        <form action="<?= site_url('users') ?>" method="get" class="row g-2 align-items-center">
            <div class="col-md-5">
                <div class="input-icon position-relative">
                    <i class="bi bi-search position-absolute" style="left: 12px; top: 50%; transform: translateY(-50%); color: #9ca3af;"></i>
                    <input type="text" class="form-control ps-4" name="q" placeholder="Search staff by name or email..." value="<?= esc($filters['q']) ?>">
                </div>
            </div>
            <div class="col-md-3">
                <select class="form-select" name="role">
                    <option value="">All Roles</option>
                    <?php foreach ($lookups->staffRoles as $key => $meta): ?>
                        <option value="<?= esc($key) ?>" <?= $filters['role'] === $key ? 'selected' : '' ?>><?= esc($meta['label']) ?></option>
                    <?php endforeach; ?>
                </select>
            </div>
            <div class="col-md-2">
                <select class="form-select" name="status">
                    <option value="">All Status</option>
                    <option value="active" <?= $filters['status'] === 'active' ? 'selected' : '' ?>>Active</option>
                    <option value="inactive" <?= $filters['status'] === 'inactive' ? 'selected' : '' ?>>Inactive</option>
                </select>
            </div>
            <div class="col-md-2">
                <button type="submit" class="btn btn-outline-primary w-100"><i class="bi bi-funnel me-1"></i>Filter</button>
            </div>
        </form>
    </div>
</div>

<div class="card shadow-sm">
    <div class="table-scroll">
        <table class="table table-hover mb-0 align-middle">
            <thead class="table-light">
                <tr><th>Staff Name</th><th>Email Address</th><th>Role</th><th>Status</th><th>Last Login</th><th class="text-end">Actions</th></tr>
            </thead>
            <tbody>
                <?php if (empty($users)): ?>
                    <tr><td colspan="6" class="text-center text-muted py-4">No staff match this search/filter.</td></tr>
                <?php endif; ?>
                <?php foreach ($users as $user):
                    $words    = preg_split('/\s+/', trim($user->full_name));
                    $initials = strtoupper(($words[0][0] ?? '') . ($words[count($words) - 1][0] ?? ''));
                    $lastLogin = $lastLogins[$user->id] ?? null;
                ?>
                    <tr>
                        <td>
                            <div class="d-flex align-items-center gap-2">
                                <?php if ($user->photo_path): ?>
                                    <img src="<?= site_url('uploads/' . $user->photo_path) ?>" alt="" class="rounded-circle flex-shrink-0" style="width: 36px; height: 36px; object-fit: cover;">
                                <?php else: ?>
                                    <div class="rounded-circle d-flex align-items-center justify-content-center flex-shrink-0" style="width: 36px; height: 36px; background: color-mix(in srgb, var(--brand) 15%, white); color: var(--brand); font-weight: 700; font-size: 0.8rem;"><?= esc($initials) ?></div>
                                <?php endif; ?>
                                <a href="<?= site_url('users/' . $user->id) ?>" class="fw-semibold text-decoration-none text-body"><?= esc($user->full_name) ?></a>
                            </div>
                        </td>
                        <td class="text-muted"><?= esc($user->email) ?></td>
                        <td><span class="badge bg-<?= $lookups->staffRoles[$user->role]['badge'] ?? 'secondary' ?>"><?= esc($lookups->staffRoles[$user->role]['label'] ?? $user->role) ?></span></td>
                        <td>
                            <?php if ($user->is_active): ?>
                                <span class="badge bg-success">Active</span>
                            <?php else: ?>
                                <span class="badge bg-danger">Deactivated</span>
                            <?php endif; ?>
                        </td>
                        <td class="text-muted small"><?= $lastLogin ? esc(date('d M Y, g:i a', strtotime($lastLogin))) : 'Never' ?></td>
                        <td class="text-end">
                            <div class="d-flex justify-content-end gap-1">
                                <a href="<?= site_url('users/' . $user->id) ?>" class="btn btn-sm btn-outline-secondary" title="View"><i class="bi bi-eye"></i></a>
                                <form action="<?= site_url('users/' . $user->id . '/toggle-active') ?>" method="post" class="d-inline">
                                    <?= csrf_field() ?>
                                    <button type="submit" class="btn btn-sm btn-outline-secondary" title="<?= $user->is_active ? 'Deactivate' : 'Reactivate' ?>">
                                        <i class="bi bi-<?= $user->is_active ? 'person-dash' : 'person-check' ?>"></i>
                                    </button>
                                </form>
                            </div>
                        </td>
                    </tr>
                <?php endforeach; ?>
            </tbody>
        </table>
    </div>
    <?php if (! empty($users)): ?>
    <?php
        $perPage = $pager->getPerPage();
        $current = $pager->getCurrentPage();
        $total   = $pager->getTotal();
        $first   = ($current - 1) * $perPage + 1;
        $last    = min($current * $perPage, $total);
    ?>
    <div class="card-footer bg-white d-flex justify-content-between align-items-center">
        <span class="text-muted small">Showing <?= $first ?> to <?= $last ?> of <?= $total ?> staff</span>
        <?= $pager->links() ?>
    </div>
    <?php endif; ?>
</div>

<?= $this->endSection() ?>
