server-manager/views/teams/show.php

<?php
$team = $team ?? [];
$members = $members ?? [];
$servers = $servers ?? [];
$availableUsers = $availableUsers ?? [];
$availableServers = $availableServers ?? [];
?>

<div class="page-header">
    <div class="page-header-left">
        <div class="back-link">
            <a href="/teams"><i class="fas fa-arrow-left"></i> Back to Teams</a>
        </div>
        <h1 class="page-title"><?= htmlspecialchars($team['name'] ?? '') ?></h1>
        <p class="page-subtitle"><?= htmlspecialchars($team['description'] ?? '') ?></p>
    </div>
    <div class="page-header-right">
        <button class="btn btn-secondary" onclick="editTeam()">
            <i class="fas fa-edit"></i> Edit
        </button>
        <button class="btn btn-danger" onclick="deleteTeam()">
            <i class="fas fa-trash"></i> Delete
        </button>
    </div>
</div>

<div class="dashboard-grid">
    <div class="dashboard-card">
        <div class="card-header">
            <h2><i class="fas fa-users"></i> Members</h2>
            <span class="badge badge-info"><?= count($members) ?></span>
        </div>
        <div class="card-body">
            <div class="table-responsive">
                <table class="table table-sm">
                    <thead>
                        <tr>
                            <th>User</th>
                            <th>Actions</th>
                        </tr>
                    </thead>
                    <tbody>
                        <?php foreach ($members as $member): ?>
                            <tr>
                                <td>
                                    <strong><?= htmlspecialchars($member['username']) ?></strong>
                                    <br><small class="text-muted"><?= htmlspecialchars($member['email']) ?></small>
                                </td>
                                <td>
                                    <button class="btn btn-xs btn-danger"
                                            onclick="removeMember(<?= $member['user_id'] ?>, '<?= htmlspecialchars(addslashes($member['username'])) ?>')">
                                        <i class="fas fa-user-minus"></i>
                                    </button>
                                </td>
                            </tr>
                        <?php endforeach; ?>
                    </tbody>
                </table>
            </div>

            <?php if (!empty($availableUsers)): ?>
            <form class="form-inline" style="margin-top:1rem;display:flex;gap:0.5rem;align-items:end" onsubmit="addMember(event)">
                <input type="hidden" name="_csrf_token" value="<?= $this->csrfToken() ?>">
                <div class="form-group" style="flex:1;margin-bottom:0">
                    <select id="addUserId" class="form-select" required>
                        <option value="">Add user...</option>
                        <?php foreach ($availableUsers as $user): ?>
                            <option value="<?= $user['id'] ?>">
                                <?= htmlspecialchars($user['username']) ?> (<?= htmlspecialchars($user['email']) ?>)
                            </option>
                        <?php endforeach; ?>
                    </select>
                </div>
                <button type="submit" class="btn btn-primary btn-sm">
                    <i class="fas fa-plus"></i> Add
                </button>
            </form>
            <?php endif; ?>
        </div>
    </div>

    <div class="dashboard-card">
        <div class="card-header">
            <h2><i class="fas fa-server"></i> Servers</h2>
            <span class="badge badge-primary"><?= count($servers) ?></span>
        </div>
        <div class="card-body">
            <div class="table-responsive">
                <table class="table table-sm">
                    <thead>
                        <tr>
                            <th>Server</th>
                            <th>Role</th>
                            <th>Actions</th>
                        </tr>
                    </thead>
                    <tbody>
                        <?php foreach ($servers as $s): ?>
                            <tr>
                                <td>
                                    <a href="/servers/<?= $s['server_id'] ?>">
                                        <?= htmlspecialchars($s['server_name']) ?>
                                    </a>
                                </td>
                                <td>
                                    <select class="form-select form-select-sm role-select"
                                            onchange="updateServerRole(<?= $s['server_id'] ?>, this.value)"
                                            style="width:auto">
                                        <option value="viewer" <?= $s['role'] === 'viewer' ? 'selected' : '' ?>>Viewer</option>
                                        <option value="manager" <?= $s['role'] === 'manager' ? 'selected' : '' ?>>Manager</option>
                                    </select>
                                </td>
                                <td>
                                    <button class="btn btn-xs btn-danger"
                                            onclick="removeServer(<?= $s['server_id'] ?>, '<?= htmlspecialchars(addslashes($s['server_name'])) ?>')">
                                        <i class="fas fa-unlink"></i>
                                    </button>
                                </td>
                            </tr>
                        <?php endforeach; ?>
                    </tbody>
                </table>
            </div>

            <?php if (!empty($availableServers)): ?>
            <form class="form-inline" style="margin-top:1rem;display:flex;gap:0.5rem;align-items:end" onsubmit="addServer(event)">
                <input type="hidden" name="_csrf_token" value="<?= $this->csrfToken() ?>">
                <div class="form-group" style="flex:1;margin-bottom:0">
                    <select id="addServerId" class="form-select" required>
                        <option value="">Assign server...</option>
                        <?php foreach ($availableServers as $s): ?>
                            <option value="<?= $s['id'] ?>">
                                <?= htmlspecialchars($s['name']) ?> (<?= htmlspecialchars($s['ip_address']) ?>)
                            </option>
                        <?php endforeach; ?>
                    </select>
                </div>
                <div class="form-group" style="margin-bottom:0">
                    <select id="addServerRole" class="form-select" required>
                        <option value="viewer">Viewer</option>
                        <option value="manager">Manager</option>
                    </select>
                </div>
                <button type="submit" class="btn btn-primary btn-sm">
                    <i class="fas fa-plus"></i> Assign
                </button>
            </form>
            <?php endif; ?>
        </div>
    </div>
</div>

<form id="postForm" method="POST" style="display:none">
    <input type="hidden" name="_csrf_token" value="<?= $this->csrfToken() ?>">
</form>

<script>
function getCsrfToken() {
    return document.querySelector('meta[name="csrf-token"]')?.content || '';
}

function editTeam() {
    const name = prompt('Team name:', '<?= htmlspecialchars(addslashes($team['name'] ?? '')) ?>');
    if (!name) return;
    const desc = prompt('Description:', '<?= htmlspecialchars(addslashes($team['description'] ?? '')) ?>');

    const form = new FormData();
    form.append('name', name);
    form.append('description', desc || '');
    form.append('_csrf_token', getCsrfToken());

    fetch('/teams/<?= $team['id'] ?>/update', {
        method: 'POST',
        headers: { 'X-CSRF-Token': getCsrfToken() },
        body: form,
    })
    .then(r => r.json())
    .then(res => {
        if (res.success) { showToast('success', res.message); location.reload(); }
        else { showToast('error', res.message); }
    });
}

function deleteTeam() {
    if (!confirm('Delete this team? Members will lose access to assigned servers.')) return;
    document.getElementById('postForm').action = '/teams/<?= $team['id'] ?>/delete';
    document.getElementById('postForm').submit();
}

function addMember(e) {
    e.preventDefault();
    const userId = document.getElementById('addUserId').value;
    if (!userId) return;

    const form = new FormData();
    form.append('user_id', userId);
    form.append('_csrf_token', getCsrfToken());

    fetch('/teams/<?= $team['id'] ?>/add-user', {
        method: 'POST',
        headers: { 'X-CSRF-Token': getCsrfToken() },
        body: form,
    })
    .then(r => r.json())
    .then(res => {
        if (res.success) { showToast('success', res.message); location.reload(); }
        else { showToast('error', res.message); }
    });
}

function removeMember(userId, username) {
    if (!confirm('Remove "' + username + '" from this team?')) return;

    const form = new FormData();
    form.append('user_id', userId);
    form.append('_csrf_token', getCsrfToken());

    fetch('/teams/<?= $team['id'] ?>/remove-user', {
        method: 'POST',
        headers: { 'X-CSRF-Token': getCsrfToken() },
        body: form,
    })
    .then(r => r.json())
    .then(res => {
        if (res.success) { showToast('success', res.message); location.reload(); }
        else { showToast('error', res.message); }
    });
}

function addServer(e) {
    e.preventDefault();
    const serverId = document.getElementById('addServerId').value;
    const role = document.getElementById('addServerRole').value;
    if (!serverId) return;

    const form = new FormData();
    form.append('server_id', serverId);
    form.append('role', role);
    form.append('_csrf_token', getCsrfToken());

    fetch('/teams/<?= $team['id'] ?>/add-server', {
        method: 'POST',
        headers: { 'X-CSRF-Token': getCsrfToken() },
        body: form,
    })
    .then(r => r.json())
    .then(res => {
        if (res.success) { showToast('success', res.message); location.reload(); }
        else { showToast('error', res.message); }
    });
}

function removeServer(serverId, name) {
    if (!confirm('Remove "' + name + '" from this team?')) return;

    const form = new FormData();
    form.append('server_id', serverId);
    form.append('_csrf_token', getCsrfToken());

    fetch('/teams/<?= $team['id'] ?>/remove-server', {
        method: 'POST',
        headers: { 'X-CSRF-Token': getCsrfToken() },
        body: form,
    })
    .then(r => r.json())
    .then(res => {
        if (res.success) { showToast('success', res.message); location.reload(); }
        else { showToast('error', res.message); }
    });
}

function updateServerRole(serverId, role) {
    const form = new FormData();
    form.append('server_id', serverId);
    form.append('role', role);
    form.append('_csrf_token', getCsrfToken());

    fetch('/teams/<?= $team['id'] ?>/update-server-role', {
        method: 'POST',
        headers: { 'X-CSRF-Token': getCsrfToken() },
        body: form,
    })
    .then(r => r.json())
    .then(res => {
        if (res.success) { showToast('success', 'Role updated to ' + role); }
        else { showToast('error', res.message); }
    });
}
</script>