{"id":84,"date":"2026-03-31T05:10:26","date_gmt":"2026-03-31T05:10:26","guid":{"rendered":"https:\/\/ph-portal.zyneventures.com\/?page_id=84"},"modified":"2026-03-31T05:12:44","modified_gmt":"2026-03-31T05:12:44","slug":"teams","status":"publish","type":"page","link":"https:\/\/ph-portal.zyneventures.com\/index.php\/teams\/","title":{"rendered":"Teams"},"content":{"rendered":"<style>.kadence-column84_8b696d-1c > .kt-inside-inner-col,.kadence-column84_8b696d-1c > .kt-inside-inner-col:before{border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;}.kadence-column84_8b696d-1c > .kt-inside-inner-col{column-gap:var(--global-kb-gap-sm, 1rem);}.kadence-column84_8b696d-1c > .kt-inside-inner-col{flex-direction:column;}.kadence-column84_8b696d-1c > .kt-inside-inner-col > .aligncenter{width:100%;}.kadence-column84_8b696d-1c > .kt-inside-inner-col:before{opacity:0.3;}.kadence-column84_8b696d-1c{position:relative;}@media all and (max-width: 1024px){.kadence-column84_8b696d-1c > .kt-inside-inner-col{flex-direction:column;justify-content:center;}}@media all and (max-width: 767px){.kadence-column84_8b696d-1c > .kt-inside-inner-col{flex-direction:column;justify-content:center;}}<\/style>\n<div class=\"wp-block-kadence-column kadence-column84_8b696d-1c\"><div class=\"kt-inside-inner-col\"><style>.kb-row-layout-id84_249d1d-58 > .kt-row-column-wrap{align-content:start;}:where(.kb-row-layout-id84_249d1d-58 > .kt-row-column-wrap) > .wp-block-kadence-column{justify-content:start;}.kb-row-layout-id84_249d1d-58 > .kt-row-column-wrap{column-gap:var(--global-kb-gap-md, 2rem);row-gap:var(--global-kb-gap-md, 2rem);padding-top:var(--global-kb-spacing-sm, 1.5rem);padding-bottom:var(--global-kb-spacing-sm, 1.5rem);grid-template-columns:minmax(0, 1fr);}.kb-row-layout-id84_249d1d-58 > .kt-row-layout-overlay{opacity:0.30;}@media all and (max-width: 1024px){.kb-row-layout-id84_249d1d-58 > .kt-row-column-wrap{grid-template-columns:minmax(0, 1fr);}}@media all and (max-width: 767px){.kb-row-layout-id84_249d1d-58 > .kt-row-column-wrap{grid-template-columns:minmax(0, 1fr);}}<\/style><div class=\"kb-row-layout-wrap kb-row-layout-id84_249d1d-58 alignnone wp-block-kadence-rowlayout\"><div class=\"kt-row-column-wrap kt-has-1-columns kt-row-layout-equal kt-tab-layout-inherit kt-mobile-layout-row kt-row-valign-top\">\n<style>.kadence-column84_5baa21-e0 > .kt-inside-inner-col,.kadence-column84_5baa21-e0 > .kt-inside-inner-col:before{border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;}.kadence-column84_5baa21-e0 > .kt-inside-inner-col{column-gap:var(--global-kb-gap-sm, 1rem);}.kadence-column84_5baa21-e0 > .kt-inside-inner-col{flex-direction:column;}.kadence-column84_5baa21-e0 > .kt-inside-inner-col > .aligncenter{width:100%;}.kadence-column84_5baa21-e0 > .kt-inside-inner-col:before{opacity:0.3;}.kadence-column84_5baa21-e0{position:relative;}@media all and (max-width: 1024px){.kadence-column84_5baa21-e0 > .kt-inside-inner-col{flex-direction:column;justify-content:center;}}@media all and (max-width: 767px){.kadence-column84_5baa21-e0 > .kt-inside-inner-col{flex-direction:column;justify-content:center;}}<\/style>\n<div class=\"wp-block-kadence-column kadence-column84_5baa21-e0\"><div class=\"kt-inside-inner-col\">\n<style>\n    :root {\n        --primary-blue: #0180FF;\n        --text-dark: #212529;\n        --text-muted: #8D8C9C;\n        --border-color: #EFEFEF;\n        --success-green: #1E8E3E;\n        --error-red: #D93025;\n    }\n\n    body { \n        margin: 0; \n        font-family: 'Sora', sans-serif; \n        color: var(--text-dark); \n        background-color: #fff;\n        box-sizing: border-box;\n    }\n\n    \/* \u2500\u2500 Header \u2500\u2500 *\/\n    .header-container { \n        display: flex; \n        justify-content: space-between; \n        align-items: center; \n        margin-bottom: 40px;\n        flex-wrap: wrap;\n        gap: 16px;\n    }\n    .title-group { \n        display: flex; \n        align-items: center; \n        gap: 8px; \n    }\n    .title-group h2 { \n        margin: 0; \n        font-size: 21px; \n        font-weight: 500; \n        text-transform: uppercase; \n        letter-spacing: 0.5px; \n        color: var(--text-dark);\n    }\n    .count { \n        color: var(--text-muted); \n        font-size: 16px; \n        font-weight: 400; \n    }\n\n    .action-group { \n        display: flex; \n        gap: 10px; \n        align-items: center; \n        flex-wrap: wrap;\n    }\n\n    \/* \u2500\u2500 Search Bar \u2500\u2500 *\/\n    .search-wrapper { \n        background: #F1F3F4; \n        border-radius: 6px; \n        padding: 9px 14px; \n        display: flex; \n        align-items: center; \n        width: 260px; \n        gap: 10px;\n    }\n    .search-icon { \n        width: 16px; \n        height: 16px; \n        color: #8D8C9C;\n        flex-shrink: 0;\n    }\n    .search-wrapper input { \n        border: none; \n        background: transparent; \n        outline: none; \n        width: 100%; \n        font-size: 12px; \n        font-family: 'Sora', sans-serif; \n        color: #212529;\n    }\n    .search-wrapper input::placeholder { color: #8D8C9C; }\n\n    \/* \u2500\u2500 Filter Button \u2500\u2500 *\/\n    .btn-filter {\n        background: transparent;\n        border: 1px solid;\n        border-color: #F1F3F4;\n        border-radius: 6px;\n        width: 38px;\n        height: 38px;\n        display: flex;\n        align-items: center;\n        justify-content: center;\n        cursor: pointer;\n        padding: 0;\n        flex-shrink: 0;\n        transition: background 0.2s;\n    }\n    .btn-filter:hover { background: transparent; }\n    .btn-filter svg { color: #5f6368; }\n\n    \/* \u2500\u2500 Filter Button wrapper \u2500\u2500 *\/\n    .filter-wrapper { position: relative; }\n\n    \/* \u2500\u2500 Buttons \u2500\u2500 *\/\n    .btn { \n        padding: 9px 16px; \n        border-radius: 6px; \n        font-size: 12px; \n        font-weight: 500; \n        cursor: pointer; \n        border: none; \n        transition: opacity 0.2s; \n        display: flex; \n        align-items: center; \n        justify-content: center;\n        gap: 6px;\n        white-space: nowrap;\n        font-family: 'Sora', sans-serif;\n    }\n    .btn-primary { background: var(--primary-blue); color: white; }\n    .btn-primary:hover { opacity: 0.88; }\n\n    \/* \u2500\u2500 Team Cards Grid \u2500\u2500 *\/\n    .project-grid { \n        display: grid; \n        grid-template-columns: repeat(3, 1fr);\n        gap: 20px; \n        margin-top: 8px; \n    }\n\n    @media (max-width: 1100px) {\n        .project-grid { grid-template-columns: repeat(2, 1fr); }\n    }\n    @media (max-width: 700px) {\n        .project-grid { grid-template-columns: 1fr; }\n        body { padding: 20px; }\n        .search-wrapper { width: 180px; }\n    }\n\n    .project-card { \n        border: 1px solid var(--border-color); \n        border-radius: 12px; \n        padding: 20px 24px 20px 24px;\n        background: #fff;\n        transition: box-shadow 0.2s;\n    }\n    .project-card:hover { box-shadow: 0 4px 14px rgba(0,0,0,0.06); }\n\n    \/* Card header: title + badge + dots *\/\n    .card-header { \n        display: flex; \n        justify-content: space-between; \n        align-items: center; \n        margin-bottom: 18px; \n    }\n    .card-title { \n        font-weight: 500; \n        font-size: 18px; \n        color: var(--text-dark);\n        flex: 1;\n        min-width: 0;\n        overflow: hidden;\n        text-overflow: ellipsis;\n        white-space: nowrap;\n        margin-right: 10px;\n    }\n    .badge-container { \n        display: flex; \n        align-items: center; \n        gap: 8px;\n        flex-shrink: 0;\n    }\n\n    \/* Status Badges *\/\n    .status-badge { \n        padding: 3px 12px; \n        border-radius: 20px; \n        font-size: 12px; \n        font-weight: 400; \n        display: flex; \n        align-items: center; \n        gap: 5px;\n        white-space: nowrap;\n        height: 24px;\n        box-sizing: border-box;\n    }\n    .status-badge .dot { \n        width: 7px; \n        height: 7px; \n        border-radius: 50%; \n        flex-shrink: 0;\n    }\n    .status-active { background: #E6F4EA; color: #1E8E3E; }\n    .status-active .dot { background: #1E8E3E; }\n    .status-inactive { background: #FCE8E6; color: #D93025; }\n    .status-inactive .dot { background: #D93025; }\n\n    \/* \u2500\u2500 Card Body: single row \u2500\u2500 *\/\n    .card-body {\n        display: flex;\n        flex-direction: row;\n        align-items: flex-start;\n        gap: 0;\n    }\n    .info-col {\n        display: flex;\n        flex-direction: column;\n        gap: 2px;\n    }\n    \/* Column widths *\/\n    .info-col.col-id    { flex: 0 0 80px; }\n    .info-col.col-lead  { flex: 1; min-width: 0; }\n    .info-col.col-count { flex: 0 0 90px; text-align: right; }\n\n    .info-label { \n        color: var(--text-muted); \n        font-size: 12px; \n        font-weight: 400;\n        margin-bottom: 3px;\n    }\n    .info-value { \n        font-size: 12px; \n        font-weight: 500; \n        color: var(--text-dark);\n        overflow: hidden;\n        text-overflow: ellipsis;\n        white-space: nowrap;\n    }\n    .info-link { \n        color: var(--primary-blue); \n        cursor: pointer; \n        font-weight: 500;\n    }\n\n    \/* Dropdown Menu *\/\n    .menu-container { \n        position: relative; \n        display: flex; \n        align-items: center; \n    }\n    .menu-dots { \n        cursor: pointer; \n        color: #444; \n        font-size: 20px; \n        line-height: 1; \n        padding: 2px 4px;\n        border-radius: 4px;\n        transition: background 0.15s;\n    }\n    .menu-dots:hover { background: #f1f3f4; }\n    .dropdown-content { \n        display: none; \n        position: absolute; \n        right: 0; \n        top: 28px; \n        background: white; \n        min-width: 120px; \n        box-shadow: 0 8px 20px rgba(0,0,0,0.1); \n        z-index: 100; \n        border-radius: 8px; \n        border: 1px solid #eee; \n        overflow: hidden;\n    }\n    .dropdown-content.show { display: block; }\n    .dropdown-item { \n        padding: 11px 16px; \n        font-size: 12px; \n        cursor: pointer; \n        color: #444;\n        font-family: 'Sora', sans-serif;\n    }\n    .dropdown-item:hover { background-color: #f8f9fa; color: var(--primary-blue); }\n\n    \/* \u2500\u2500 Modal \u2500\u2500 *\/\n    .modal-overlay { \n        display: none; \n        position: fixed; \n        top: 0; left: 0; width: 100%; height: 100%; \n        background: rgba(0,0,0,0.4); \n        z-index: 1000; \n        justify-content: center; \n        align-items: center; \n    }\n    .modal-content { \n        background: white; \n        padding: 40px; \n        border-radius: 12px; \n        width: 500px;\n        max-width: calc(100vw - 40px);\n        box-shadow: 0 20px 40px rgba(0,0,0,0.2);\n    }\n    .modal-content h3 { margin: 0 0 30px 0; font-size: 21px; font-weight: 500; }\n\n    .form-group { margin-bottom: 22px; }\n    .form-group label { \n        display: block; \n        font-size: 12px; \n        font-weight: 500; \n        margin-bottom: 10px; \n    }\n    .form-group label span { color: var(--error-red); }\n    .form-control { \n        width: 100%; \n        padding: 13px 14px; \n        border: 1px solid #E0E0E0; \n        border-radius: 8px; \n        box-sizing: border-box; \n        font-family: 'Sora', sans-serif; \n        font-size: 12px;\n        color: var(--text-dark);\n        outline: none;\n    }\n    .form-control:focus { border-color: var(--primary-blue); }\n\n    .btn-close-modal { \n        background: transparent; \n        color: #212529; \n        padding: 9px 16px; \n        font-size: 12px;\n        font-weight: 500;\n        border: none;\n        cursor: pointer;\n        font-family: 'Sora', sans-serif;\n    }\n\n    .toggle-row { \n        display: flex; \n        justify-content: space-between; \n        align-items: center; \n        margin-top: 10px; \n    }\n    .switch { \n        position: relative; \n        display: inline-block; \n        width: 44px; \n        height: 22px; \n    }\n    .switch input { opacity: 0; width: 0; height: 0; }\n    .slider { \n        position: absolute; \n        cursor: pointer; \n        top: 0; left: 0; right: 0; bottom: 0; \n        background-color: #ccc; \n        transition: .4s; \n        border-radius: 34px; \n    }\n    .slider:before { \n        position: absolute; \n        content: \"\"; \n        height: 16px; \n        width: 16px; \n        left: 3px; \n        bottom: 3px; \n        background-color: white; \n        transition: .4s; \n        border-radius: 50%; \n    }\n    input:checked + .slider { background-color: var(--primary-blue); }\n    input:checked + .slider:before { transform: translateX(22px); }\n\n    \/* \u2500\u2500 Pagination Footer \u2500\u2500 *\/\n    .pagination-footer { \n        margin-top: 44px; \n        display: flex; \n        justify-content: space-between; \n        align-items: center; \n        color: var(--text-muted); \n        font-size: 12px;\n        flex-wrap: wrap;\n        gap: 12px;\n    }\n    .pagination-controls { display: flex; align-items: center; gap: 6px; }\n    .page-num { \n        cursor: pointer; \n        width: 34px; \n        height: 34px; \n        display: flex; \n        align-items: center; \n        justify-content: center; \n        border-radius: 50%; \n        font-weight: 400;\n        font-size: 12px;\n        color: var(--text-dark);\n        transition: background 0.15s;\n    }\n    .page-num:hover { background: #f1f3f4; }\n    .page-num.active { background: var(--primary-blue); color: white; }\n    .nav-btn { \n        cursor: pointer; \n        color: var(--text-dark); \n        font-weight: 400; \n        font-size: 12px;\n        padding: 6px 4px;\n        user-select: none;\n    }\n    .nav-btn.disabled { color: #ccc; pointer-events: none; }\n\n    #entryInfo {\n        font-size: 12px;\n        color: var(--text-muted);\n    }\n<\/style>\n\n<link href=\"https:\/\/fonts.googleapis.com\/css2?family=Sora:wght@300;400;500;600;700&#038;display=swap\" rel=\"stylesheet\">\n\n<div class=\"header-container\">\n    <div class=\"title-group\">\n        <h2>Teams<\/h2>\n        <span class=\"count\" id=\"teamCount\">(0)<\/span>\n    <\/div>\n    <div class=\"action-group\">\n        <div class=\"search-wrapper\">\n            <svg class=\"search-icon\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n                <circle cx=\"11\" cy=\"11\" r=\"8\"><\/circle>\n                <line x1=\"21\" y1=\"21\" x2=\"16.65\" y2=\"16.65\"><\/line>\n            <\/svg>\n            <input type=\"text\" id=\"searchInput\" placeholder=\"Search Team...\" oninput=\"handleSearch()\">\n        <\/div>\n\n        <!-- Filter Button (no dropdown) -->\n        <div class=\"filter-wrapper\">\n            <button class=\"btn-filter\" title=\"Filter\">\n                <svg width=\"17\" height=\"17\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n                    <line x1=\"4\" y1=\"6\" x2=\"20\" y2=\"6\"\/>\n                    <line x1=\"7\" y1=\"12\" x2=\"17\" y2=\"12\"\/>\n                    <line x1=\"10\" y1=\"18\" x2=\"14\" y2=\"18\"\/>\n                <\/svg>\n            <\/button>\n        <\/div>\n\n        <button class=\"btn btn-primary\" onclick=\"openModal('add')\">+ Add New Team<\/button>\n        <button class=\"btn btn-primary\" onclick=\"downloadCSV()\">Download CSV<\/button>\n    <\/div>\n<\/div>\n\n<div class=\"project-grid\" id=\"teamsContainer\"><\/div>\n\n<div class=\"pagination-footer\">\n    <div class=\"pagination-controls\">\n        <span id=\"prevBtn\" class=\"nav-btn\">\u00ab Previous<\/span>\n        <div id=\"pageNumbers\" style=\"display:flex; gap:4px;\"><\/div>\n        <span id=\"nextBtn\" class=\"nav-btn\">Next \u00bb<\/span>\n    <\/div>\n    <div id=\"entryInfo\">Showing 0 to 0 of 0 entries<\/div>\n<\/div>\n\n<!-- Modal -->\n<div class=\"modal-overlay\" id=\"teamModal\">\n    <div class=\"modal-content\">\n        <h3 id=\"modalTitle\">New Team<\/h3>\n        <form id=\"teamForm\">\n            <input type=\"hidden\" id=\"editTeamId\">\n            <div class=\"form-group\">\n                <label>Team Name <span>*<\/span><\/label>\n                <input type=\"text\" id=\"teamNameInput\" class=\"form-control\" placeholder=\"Enter Team Name\" required>\n            <\/div>\n            <div class=\"form-group\">\n                <label>Team Lead <span>*<\/span><\/label>\n                <select id=\"teamLeadSelect\" class=\"form-control\" required>\n                    <option value=\"\">Select Team Lead<\/option>\n                <\/select>\n            <\/div>\n            <div class=\"toggle-row\">\n                <label style=\"font-size:12px; font-weight:500;\">Team Active <span style=\"color:var(--error-red)\">*<\/span><\/label>\n                <label class=\"switch\">\n                    <input type=\"checkbox\" id=\"teamActiveToggle\" checked>\n                    <span class=\"slider\"><\/span>\n                <\/label>\n            <\/div>\n            <div style=\"display:flex; justify-content:flex-end; gap:12px; margin-top:40px;\">\n                <button type=\"button\" class=\"btn-close-modal\" onclick=\"closeModal()\">Close<\/button>\n                <button type=\"submit\" id=\"saveBtn\" class=\"btn btn-primary\" style=\"padding: 10px 40px;\">Save<\/button>\n            <\/div>\n        <\/form>\n    <\/div>\n<\/div>\n\n<script>\n    const BASE_URL = 'https:\/\/api-ph-portal.zyneventures.com\/api\/v1';\n    const ENDPOINTS = {\n        ALL:    `${BASE_URL}\/team\/all`,\n        DETAIL: `${BASE_URL}\/team\/detail`,\n        ADD:    `${BASE_URL}\/team\/add`,\n        UPDATE: `${BASE_URL}\/team\/update`,\n        DELETE: `${BASE_URL}\/team\/delete`,\n        LEADS:  `${BASE_URL}\/user\/team-leads`\n    };\n\n    let allTeams      = [];\n    let leadsCache    = [];\n    let paginationData = { page: 1, limit: 10, total: 0, pages: 0 };\n\n    const getHeaders = () => ({\n        'Content-Type': 'application\/json',\n        'Authorization': `Bearer ${localStorage.getItem(\"TOKEN\")}`\n    });\n\n    \/* \u2500\u2500 Leads \u2500\u2500 *\/\n    async function fetchLeads() {\n        if (leadsCache.length) return;\n        try {\n            const res = await fetch(ENDPOINTS.LEADS, { headers: getHeaders() });\n            const result = await res.json();\n            leadsCache = result.data || [];\n            const select = document.getElementById('teamLeadSelect');\n            select.innerHTML = '<option value=\"\">Select Team Lead<\/option>';\n            leadsCache.forEach(l => select.add(new Option(l.name, l.id)));\n        } catch (err) { console.error(\"Leads Error:\", err); }\n    }\n\n    \/* \u2500\u2500 Teams \u2500\u2500 *\/\n    async function fetchTeams(page = 1) {\n        try {\n            const res = await fetch(`${ENDPOINTS.ALL}?page=${page}`, { headers: getHeaders() });\n            const result = await res.json();\n            if (result.code === 200) {\n                allTeams = result.data.data;\n                paginationData = result.data.pagination;\n                renderTeams();\n                renderPagination();\n            }\n        } catch (err) { console.error(\"Fetch Error:\", err); }\n    }\n\n    function renderTeams(filtered = null) {\n        const container = document.getElementById('teamsContainer');\n\n        let list = filtered !== null ? filtered : allTeams;\n\n        document.getElementById('teamCount').textContent = `(${paginationData.total})`;\n\n        const start = paginationData.total === 0 ? 0 : ((paginationData.page - 1) * paginationData.limit) + 1;\n        const end   = Math.min(paginationData.page * paginationData.limit, paginationData.total);\n        document.getElementById('entryInfo').textContent =\n            `Showing ${start} to ${end} of ${paginationData.total} entries`;\n\n        container.innerHTML = '';\n        list.forEach(team => {\n            const isActive = team.is_active == 1;\n            const leadName = leadsCache.find(l => l.id == team.team_lead_id)?.name || 'Unassigned';\n            const card = document.createElement('div');\n            card.className = 'project-card';\n            card.id = `team-card-${team.id}`;\n            card.innerHTML = `\n                <div class=\"card-header\">\n                    <span class=\"card-title\">${team.name}<\/span>\n                    <div class=\"badge-container\">\n                        <span class=\"status-badge ${isActive ? 'status-active' : 'status-inactive'}\">\n                            <span class=\"dot\"><\/span>${isActive ? 'Active' : 'Inactive'}\n                        <\/span>\n                        <div class=\"menu-container\">\n                            <span class=\"menu-dots\" onclick=\"toggleMenu(event, ${team.id})\">\u22ee<\/span>\n                            <div class=\"dropdown-content\" id=\"dropdown-${team.id}\">\n                                <div class=\"dropdown-item\" onclick=\"openModal('edit', ${team.id})\">Edit<\/div>\n                                <div class=\"dropdown-item\" style=\"color:var(--error-red)\" onclick=\"deleteTeam(${team.id})\">Delete<\/div>\n                            <\/div>\n                        <\/div>\n                    <\/div>\n                <\/div>\n                <div class=\"card-body\">\n                    <div class=\"info-col col-id\">\n                        <div class=\"info-label\">Team ID<\/div>\n                        <div class=\"info-value\">${team.id}<\/div>\n                    <\/div>\n                    <div class=\"info-col col-lead\">\n                        <div class=\"info-label\">Team Lead<\/div>\n                        <div class=\"info-value\">${leadName}<\/div>\n                    <\/div>\n                    <div class=\"info-col col-count\">\n                        <div class=\"info-label\">No. of members<\/div>\n                        <div class=\"info-value info-link\">${team.member_count || 0}<\/div>\n                    <\/div>\n                <\/div>`;\n            container.appendChild(card);\n        });\n    }\n\n    \/* \u2500\u2500 Delete \u2500\u2500 *\/\n    async function deleteTeam(id) {\n        if (!confirm(\"Are you sure you want to delete this team?\")) return;\n        try {\n            const res = await fetch(ENDPOINTS.DELETE, {\n                method: 'DELETE',\n                headers: getHeaders(),\n                body: JSON.stringify({ id })\n            });\n            const result = await res.json();\n            if (result.code === 200) {\n                const card = document.getElementById(`team-card-${id}`);\n                if (card) card.remove();\n                allTeams = allTeams.filter(t => t.id != id);\n                fetchTeams(paginationData.page);\n            } else {\n                alert(\"Delete failed: \" + result.message);\n            }\n        } catch (err) {\n            console.error(\"Delete Error:\", err);\n            const card = document.getElementById(`team-card-${id}`);\n            if (card) card.remove();\n        }\n    }\n\n    \/* \u2500\u2500 Modal \u2500\u2500 *\/\n    async function openModal(mode, id = null) {\n        await fetchLeads();\n        const modal = document.getElementById('teamModal');\n        document.getElementById('teamForm').reset();\n\n        if (mode === 'edit') {\n            document.getElementById('modalTitle').textContent = 'Update Team';\n            try {\n                const res = await fetch(ENDPOINTS.DETAIL, {\n                    method: 'POST',\n                    headers: getHeaders(),\n                    body: JSON.stringify({ id })\n                });\n                const result = await res.json();\n                const data = result.data;\n                document.getElementById('editTeamId').value = data.id;\n                document.getElementById('teamNameInput').value = data.name;\n                document.getElementById('teamLeadSelect').value = data.team_lead_id;\n                document.getElementById('teamActiveToggle').checked = (data.is_active == 1);\n            } catch (err) { console.error(err); }\n        } else {\n            document.getElementById('modalTitle').textContent = 'New Team';\n            document.getElementById('editTeamId').value = '';\n        }\n        modal.style.display = 'flex';\n    }\n\n    function closeModal() {\n        document.getElementById('teamModal').style.display = 'none';\n    }\n\n    document.getElementById('teamForm').onsubmit = async (e) => {\n        e.preventDefault();\n        const id = document.getElementById('editTeamId').value;\n        const payload = {\n            name: document.getElementById('teamNameInput').value,\n            team_lead_id: parseInt(document.getElementById('teamLeadSelect').value),\n            is_active: document.getElementById('teamActiveToggle').checked ? 1 : 0\n        };\n        const url = id ? ENDPOINTS.UPDATE : ENDPOINTS.ADD;\n        if (id) payload.id = parseInt(id);\n        try {\n            const res = await fetch(url, {\n                method: 'POST',\n                headers: getHeaders(),\n                body: JSON.stringify(payload)\n            });\n            if (res.ok) { closeModal(); fetchTeams(paginationData.page); }\n        } catch (err) { console.error(err); }\n    };\n\n    \/* \u2500\u2500 Pagination \u2500\u2500 *\/\n    function renderPagination() {\n        const container = document.getElementById('pageNumbers');\n        container.innerHTML = '';\n\n        const prevBtn = document.getElementById('prevBtn');\n        prevBtn.onclick = () => fetchTeams(paginationData.page - 1);\n        prevBtn.className = paginationData.page === 1 ? 'nav-btn disabled' : 'nav-btn';\n\n        for (let i = 1; i <= paginationData.pages; i++) {\n            const span = document.createElement('span');\n            span.className = i === paginationData.page ? 'page-num active' : 'page-num';\n            span.textContent = i;\n            span.onclick = () => fetchTeams(i);\n            container.appendChild(span);\n        }\n\n        const nextBtn = document.getElementById('nextBtn');\n        nextBtn.onclick = () => fetchTeams(paginationData.page + 1);\n        nextBtn.className =\n            (paginationData.page === paginationData.pages || paginationData.total === 0)\n                ? 'nav-btn disabled' : 'nav-btn';\n    }\n\n    \/* \u2500\u2500 Search \u2500\u2500 *\/\n    function handleSearch() {\n        const q = document.getElementById('searchInput').value.toLowerCase();\n        const filtered = allTeams.filter(t => t.name.toLowerCase().includes(q));\n        renderTeams(filtered);\n    }\n\n    \/* \u2500\u2500 Dropdown menus \u2500\u2500 *\/\n    function toggleMenu(e, id) {\n        e.stopPropagation();\n        document.querySelectorAll('.dropdown-content').forEach(d => d.classList.remove('show'));\n        document.getElementById(`dropdown-${id}`).classList.add('show');\n    }\n\n    \/* \u2500\u2500 CSV Download \u2500\u2500 *\/\n    function downloadCSV() {\n        if (!allTeams.length) return;\n        let csv = 'ID,Name,Status,Lead ID\\n';\n        allTeams.forEach(t => {\n            csv += `${t.id},\"${t.name}\",${t.is_active ? 'Active' : 'Inactive'},${t.team_lead_id}\\n`;\n        });\n        const blob = new Blob([csv], { type: 'text\/csv' });\n        const url  = window.URL.createObjectURL(blob);\n        const a    = document.createElement('a');\n        a.href = url; a.download = 'teams.csv'; a.click();\n    }\n\n    \/* \u2500\u2500 Global close \u2500\u2500 *\/\n    window.onclick = () => {\n        document.querySelectorAll('.dropdown-content').forEach(d => d.classList.remove('show'));\n    };\n\n    \/\/ Init\n    fetchLeads().then(() => fetchTeams());\n<\/script>\n<\/div><\/div>\n\n<\/div><\/div><\/div><\/div>\n","protected":false},"excerpt":{"rendered":"<p>Teams (0) + Add New Team Download CSV \u00ab Previous Next \u00bb Showing 0 to 0 of 0 entries New Team Team Name * Team Lead * Select Team Lead Team Active * Close Save<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_kad_post_transparent":"","_kad_post_title":"","_kad_post_layout":"","_kad_post_sidebar_id":"","_kad_post_content_style":"","_kad_post_vertical_padding":"","_kad_post_feature":"","_kad_post_feature_position":"","_kad_post_header":false,"_kad_post_footer":false,"_kad_post_classname":"","footnotes":""},"class_list":["post-84","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/ph-portal.zyneventures.com\/index.php\/wp-json\/wp\/v2\/pages\/84","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/ph-portal.zyneventures.com\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/ph-portal.zyneventures.com\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/ph-portal.zyneventures.com\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/ph-portal.zyneventures.com\/index.php\/wp-json\/wp\/v2\/comments?post=84"}],"version-history":[{"count":2,"href":"https:\/\/ph-portal.zyneventures.com\/index.php\/wp-json\/wp\/v2\/pages\/84\/revisions"}],"predecessor-version":[{"id":89,"href":"https:\/\/ph-portal.zyneventures.com\/index.php\/wp-json\/wp\/v2\/pages\/84\/revisions\/89"}],"wp:attachment":[{"href":"https:\/\/ph-portal.zyneventures.com\/index.php\/wp-json\/wp\/v2\/media?parent=84"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}