<?= $this->extend('layouts/panel') ?>
<?= $this->section('sidebar') ?>
<?= $this->include('panel/_sidebar') ?>
<?= $this->endSection() ?>

<?= $this->section('content') ?>

<div class="d-flex justify-content-between align-items-center mb-3">
    <h5 class="mb-0">Your Team</h5>
    <button class="btn btn-li-primary" data-bs-toggle="modal" data-bs-target="#inviteModal"><i class="bi bi-plus-lg me-1"></i>Invite Recruiter</button>
</div>

<div class="li-card">
    <div class="table-responsive">
        <table class="table li-table mb-0">
            <thead><tr><th>Name</th><th>Email</th><th>Role</th><th>Status</th><th></th></tr></thead>
            <tbody id="teamTable"></tbody>
        </table>
    </div>
</div>

<div class="modal fade" id="inviteModal" tabindex="-1">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header"><h6 class="modal-title">Invite Recruiter</h6><button class="btn-close" data-bs-dismiss="modal"></button></div>
            <div class="modal-body">
                <label class="form-label">Email</label>
                <input type="email" id="inviteEmail" class="form-control mb-2">
                <label class="form-label">Role</label>
                <select id="inviteRole" class="form-select">
                    <option value="recruiter">Recruiter</option>
                    <option value="support_staff">Support Staff</option>
                </select>
            </div>
            <div class="modal-footer"><button class="btn btn-li-primary" onclick="sendInvite()">Send Invitation</button></div>
        </div>
    </div>
</div>

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

<?= $this->section('scripts') ?>
<script>
async function loadTeam() {
    try {
        const res = await apiFetch('/agencies/me/team');
        const team = res.data.team || [];
        document.getElementById('teamTable').innerHTML = team.map(m => `
            <tr>
                <td>${escapeHtml(m.name)}</td>
                <td>${escapeHtml(m.email)}</td>
                <td><span class="li-pill li-pill-blue">${escapeHtml(m.role_name)}</span></td>
                <td><span class="li-pill li-pill-${m.status === 'active' ? 'green' : 'gray'}">${m.status}</span></td>
                <td>${m.role_slug !== 'agency_owner' ? `<button class="btn btn-li-ghost btn-sm text-danger" onclick="removeMember(${m.id})">Remove</button>` : ''}</td>
            </tr>
        `).join('');
    } catch (e) { showToast(e.message, true); }
}

async function sendInvite() {
    const email = document.getElementById('inviteEmail').value;
    const role = document.getElementById('inviteRole').value;
    if (!email) { showToast('Email is required.', true); return; }
    try {
        const res = await apiFetch('/agencies/me/team/invite', { method: 'POST', body: JSON.stringify({ email, role }) });
        bootstrap.Modal.getInstance(document.getElementById('inviteModal')).hide();
        showToast('Invitation sent! Link: ' + res.data.invitation_url);
        loadTeam();
    } catch (e) { showToast(e.message, true); }
}

async function removeMember(id) {
    if (!confirm('Remove this team member?')) return;
    try {
        await apiFetch(`/agencies/me/team/${id}`, { method: 'DELETE' });
        showToast('Team member removed.');
        loadTeam();
    } catch (e) { showToast(e.message, true); }
}

loadTeam();
</script>
<?= $this->endSection() ?>
