<?php
require_once 'auth.php';
include 'db.php';
requireLogin($conn);

$user_email = $_SESSION['email'] ?? '';
$user_id = (int) ($_SESSION['user_id'] ?? 0);
$role = $_SESSION['role'] ?? 'user';
$user_department = currentUserDepartment($conn);

// Fetch all members in department
$members = [];
if ($user_department !== '') {
    $m_stmt = mysqli_prepare($conn, "SELECT id, fullname, short_name, email, department, position, role, profile_photo FROM users WHERE LOWER(TRIM(department)) = LOWER(TRIM(?)) AND status = 'approved' ORDER BY fullname ASC");
    if ($m_stmt) {
        mysqli_stmt_bind_param($m_stmt, 's', $user_department);
        mysqli_stmt_execute($m_stmt);
        $m_res = mysqli_stmt_get_result($m_stmt);
        $members = $m_res ? mysqli_fetch_all($m_res, MYSQLI_ASSOC) : [];
    }
}

// Map member IDs
$member_ids = array_map(function($m) { return (int)$m['id']; }, $members);

// Fetch tasks for all team members
$team_tasks = [];
if (!empty($member_ids)) {
    $placeholders = implode(',', array_fill(0, count($member_ids), '?'));
    $types = str_repeat('i', count($member_ids));
    $t_sql = "SELECT * FROM calendar_events WHERE user_id IN ($placeholders) AND event_type = 'task' ORDER BY start_at DESC";
    $t_stmt = mysqli_prepare($conn, $t_sql);
    if ($t_stmt) {
        mysqli_stmt_bind_param($t_stmt, $types, ...$member_ids);
        mysqli_stmt_execute($t_stmt);
        $t_res = mysqli_stmt_get_result($t_stmt);
        $team_tasks = $t_res ? mysqli_fetch_all($t_res, MYSQLI_ASSOC) : [];
    }
}

// Group tasks by user_id
$tasks_by_member = [];
$total_tasks = count($team_tasks);
$dump_count = 0;
$ongoing_count = 0;
$completed_count = 0;

foreach ($team_tasks as $t) {
    $u_id = (int)$t['user_id'];
    $tasks_by_member[$u_id][] = $t;

    $st = strtolower(trim($t['status']));
    if (in_array($st, ['selesai', 'completed', 'done'], true)) {
        $completed_count++;
    } elseif (in_array($st, ['dalam proses', 'in progress', 'ongoing'], true)) {
        $ongoing_count++;
    } else {
        $dump_count++;
    }
}

$total_members = count($members);
?>
<!DOCTYPE html>
<html lang="ms">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>My Team | MAINPP WORKSPACE</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <?php renderAppShellAssets(); ?>
    <style>
        :root {
            --primary: #0077b6; --primary-dark: #005f99; --secondary: #00b4d8;
            --deep-blue: #023e5f;
            --superadmin: #6c5ce7; --superadmin-dark: #5b4cdb;
            --bg-light: rgba(245, 250, 253, 0.72); --bg-card: rgba(255, 255, 255, 0.68); --text-main: #163447;
            --text-muted: #2d5367; --border: rgba(255, 255, 255, 0.48); --sidebar-width: 280px;
            --success: #1a9955; --danger: #dc3545; --warning: #ffc107;
            --glass: rgba(255, 255, 255, 0.58);
            --glass-strong: rgba(255, 255, 255, 0.76);
            --shadow-soft: 0 24px 70px rgba(2, 62, 95, 0.16);
        }
        * { box-sizing: border-box; margin: 0; padding: 0; font-family: 'Segoe UI', 'Inter', Tahoma, Geneva, Verdana, sans-serif; }
        body {
            min-height: 100vh;
            display: flex;
            color: var(--text-main);
            background:
                linear-gradient(135deg, rgba(245, 250, 253, 0.90), rgba(222, 246, 252, 0.76)),
                url('assets/auth-bg.png') center/cover no-repeat fixed;
            overflow-x: hidden;
        }

        body::before,
        body::after {
            content: "";
            position: fixed;
            pointer-events: none;
            z-index: 0;
        }

        body::before {
            width: 42vw;
            height: 42vw;
            right: -16vw;
            top: -18vw;
            border-radius: 50%;
            background: radial-gradient(circle, rgba(0, 180, 216, 0.24), transparent 62%);
            filter: blur(4px);
        }

        body::after {
            width: 48vw;
            height: 48vw;
            left: 120px;
            bottom: -30vw;
            border-radius: 46px;
            background:
                linear-gradient(155deg, rgba(255, 255, 255, 0.20), rgba(255, 255, 255, 0.03)),
                repeating-linear-gradient(0deg, transparent 0 34px, rgba(0, 119, 182, 0.08) 35px 36px);
            border: 1px solid rgba(255, 255, 255, 0.32);
            transform: rotate(-9deg);
        }

        /* Sidebar Theme Fix */
        .sidebar {
            width: var(--sidebar-width) !important;
            background:
                linear-gradient(180deg, rgba(2, 62, 95, 0.94), rgba(0, 119, 182, 0.84)),
                radial-gradient(circle at 22% 8%, rgba(0, 180, 216, 0.28), transparent 32%) !important;
            border-right: 1px solid rgba(255, 255, 255, 0.22) !important;
            position: fixed;
            height: 100vh;
            padding: 20px 0 !important;
            overflow-y: auto;
            overflow-x: hidden;
            z-index: 1000;
            box-shadow: 18px 0 44px rgba(2, 38, 60, 0.20);
            transition: width 0.3s ease;
            display:flex;
            flex-direction:column;
            backdrop-filter: blur(18px) saturate(1.25);
            -webkit-backdrop-filter: blur(18px) saturate(1.25);
        }
        .sidebar.collapsed { width: 70px !important; }
        .sidebar-header {
            text-align: center;
            padding: 0 20px 20px !important;
            border-bottom: 1px solid rgba(255, 255, 255, 0.16) !important;
            margin-bottom: 20px !important;
            white-space: nowrap;
            overflow: hidden;
            background: transparent !important;
        }
        .sidebar.collapsed .sidebar-header h3, .sidebar.collapsed .sidebar-header p, .sidebar.collapsed .menu-text { display: none !important; }
        .sidebar-header img { width: 54px !important; margin: 0 auto 10px !important; transition: margin 0.3s ease; filter: drop-shadow(0 10px 18px rgba(0,0,0,0.25)); }
        .sidebar-header h3 { font-size: 1rem !important; font-weight: 800 !important; color: #fff !important; margin-bottom: 4px !important; letter-spacing: 0.01em; }
        .sidebar-header p { font-size: 0.75rem !important; color: rgba(255,255,255,0.72) !important; }
        
        .sidebar-menu { list-style: none; padding: 0 10px !important; display:flex; flex-direction:column; flex:1; }
        .sidebar-section { padding: 10px 18px 6px !important; color: rgba(255,255,255,0.58) !important; font-size: 0.72rem !important; font-weight: 800 !important; text-transform: uppercase; letter-spacing: 0.06em; }
        .sidebar-menu li a { display: flex; align-items: center; gap: 12px; padding: 12px 18px; color: rgba(255,255,255,0.88) !important; text-decoration: none; border-radius: 12px; margin-bottom: 5px; transition: all 0.2s ease; font-size: 0.9rem; white-space: nowrap; border: 1px solid transparent; }
        .sidebar-menu li a:hover, .sidebar-menu li a.active { background: rgba(255,255,255,0.22) !important; color: #fff !important; border: 1px solid rgba(255,255,255,0.38) !important; border-radius: 12px !important; box-shadow: 0 4px 16px rgba(0,0,0,0.12), inset 0 1px 0 rgba(255,255,255,0.20) !important; }
        .sidebar-menu li a i { width: 20px; text-align: center; font-size: 1.1rem; }
        .sidebar-toggle { position: absolute !important; right: 10px !important; top: 18px !important; width: 28px !important; height: 28px !important; min-width: 28px !important; background: rgba(255,255,255,0.20) !important; color: #fff !important; border: 1px solid rgba(255,255,255,0.28) !important; border-radius: 50% !important; cursor: pointer !important; display: flex !important; align-items: center !important; justify-content: center !important; font-size: 0.75rem !important; box-shadow: 0 10px 22px rgba(0,0,0,0.14) !important; transition: transform 0.3s ease !important; z-index: 1300 !important; }
        .sidebar.collapsed .sidebar-toggle { transform: rotate(180deg) !important; }
        .sidebar-menu .dropdown { position: relative; }
        .sidebar-menu .dropdown-toggle { display: flex; align-items: center; justify-content: space-between; width: 100%; padding: 12px 18px; color: rgba(255,255,255,0.88) !important; background: none; border: none; border-radius: 10px; cursor: pointer; font-size: 0.9rem; text-align: left; transition: all 0.2s ease; }
        .sidebar-menu .dropdown-toggle:hover, .sidebar-menu .dropdown-toggle.active { background: rgba(255,255,255,0.18) !important; color: #fff !important; box-shadow: inset 0 0 0 1px rgba(255,255,255,0.18); }
        .sidebar-menu .dropdown-toggle i.chevron { transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1); font-size: 0.8rem; }
        .sidebar-menu .dropdown.active .dropdown-toggle i.chevron { transform: rotate(180deg); }
        .sidebar-menu .dropdown-menu { display: flex; flex-direction: column; padding-left: 36px; margin-top: 4px; max-height: 0; opacity: 0; overflow: hidden; transition: max-height 0.3s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.25s ease; }
        .sidebar-menu .dropdown.active .dropdown-menu { max-height: 600px !important; opacity: 1 !important; padding-bottom: 8px; display: flex !important; visibility: visible !important; }
        .sidebar-menu .dropdown-menu a { padding: 8px 16px; color: rgba(255,255,255,0.78) !important; text-decoration: none; border-radius: 8px; font-size: 0.85rem; display: flex; align-items: center; gap: 8px; opacity: 0; transform: translateY(-5px); transition: opacity 0.2s ease, transform 0.2s ease; }
        .sidebar-menu .dropdown.active .dropdown-menu a { opacity: 1 !important; transform: translateY(0) !important; pointer-events: auto !important; }
        .sidebar-menu .dropdown-menu a:hover, .sidebar-menu .dropdown-menu a.active { background: rgba(255,255,255,0.16) !important; color: #fff !important; }

        .sidebar::-webkit-scrollbar { width: 6px !important; }
        .sidebar::-webkit-scrollbar-track { background: rgba(0, 0, 0, 0.12) !important; }
        .sidebar::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, 0.32) !important; border-radius: 999px !important; }
        .sidebar::-webkit-scrollbar-thumb:hover { background: rgba(255, 255, 255, 0.55) !important; }

        .main { position: relative; z-index: 1; margin-left: var(--sidebar-width); flex: 1; padding: 28px 32px; transition: margin-left 0.3s ease; }

        /* Top Bar Header */
        .top-bar {
            background: var(--glass);
            padding: 18px 24px;
            border-radius: 18px;
            box-shadow: var(--shadow-soft);
            margin-bottom: 18px;
            display: flex;
            justify-content: space-between;
            align-items: center;
            border: 1px solid var(--border);
            backdrop-filter: blur(22px) saturate(1.25);
            -webkit-backdrop-filter: blur(22px) saturate(1.25);
        }
        .top-bar h2 { color: var(--deep-blue); font-size: 1.35rem; font-weight: 850; display: flex; align-items: center; gap: 10px; }
        .top-bar h2 i { color: var(--secondary); }

        /* Stats Row */
        .stats-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 18px; margin-bottom: 26px; }
        .stat-box { position: relative; overflow: hidden; background: linear-gradient(135deg, rgba(0,119,182,0.94), rgba(0,180,216,0.86)); color: #fff; padding: 22px; border-radius: 18px; box-shadow: 0 18px 34px rgba(0,119,182,0.24); border: 1px solid rgba(255,255,255,0.24); }
        .stat-box::after { content: ""; position: absolute; width: 140px; height: 140px; right: -46px; bottom: -70px; border-radius: 50%; background: rgba(255,255,255,0.16); }
        .stat-box.members { background: linear-gradient(135deg, #059669, #10b981); box-shadow: 0 18px 34px rgba(16,185,129,0.24); }
        .stat-box.ongoing { background: linear-gradient(135deg, #3b82f6, #1d4ed8); box-shadow: 0 18px 34px rgba(59,130,246,0.24); }
        .stat-box.completed { background: linear-gradient(135deg, #8b5cf6, #6d28d9); box-shadow: 0 18px 34px rgba(139,92,246,0.24); }
        .stat-box i { position: relative; z-index: 1; width: 46px; height: 46px; border-radius: 14px; background: rgba(255,255,255,0.18); display: inline-flex; align-items: center; justify-content: center; font-size: 1.4rem; }
        .stat-box h3 { position: relative; z-index: 1; font-size: 2.25rem; font-weight: 850; margin: 12px 0 4px; line-height: 1; }
        .stat-box p { position: relative; z-index: 1; font-size: 0.9rem; font-weight: 700; opacity: 0.92; }

        /* Filter Controls */
        .controls-row { display: flex; justify-content: space-between; align-items: center; gap: 15px; margin-bottom: 24px; flex-wrap: wrap; }
        .search-box { position: relative; flex: 1; max-width: 380px; }
        .search-box input { width: 100%; padding: 12px 18px 12px 44px; border-radius: 999px; border: 1px solid var(--border); background: rgba(255,255,255,0.72); font-size: 0.9rem; outline: none; box-shadow: 0 4px 12px rgba(0,0,0,0.03); backdrop-filter: blur(16px); }
        .search-box i { position: absolute; left: 16px; top: 50%; transform: translateY(-50%); color: var(--text-muted); font-size: 1rem; }

        .filter-tabs { display: flex; gap: 8px; background: rgba(255,255,255,0.68); padding: 6px; border-radius: 999px; border: 1px solid var(--border); box-shadow: 0 4px 12px rgba(0,0,0,0.03); backdrop-filter: blur(16px); }
        .tab-item { padding: 8px 20px; border-radius: 999px; border: none; background: transparent; font-size: 0.88rem; font-weight: 700; color: var(--text-muted); cursor: pointer; transition: all 0.2s ease; }
        .tab-item.active { background: linear-gradient(90deg, #0077b6, #00b4d8); color: #fff; box-shadow: 0 6px 16px rgba(0,119,182,0.25); }

        /* Member Grid */
        .team-container { display: flex; flex-direction: column; gap: 24px; }
        .member-card { background: rgba(255,255,255,0.70); border-radius: 22px; border: 1px solid rgba(255,255,255,0.58); padding: 26px; box-shadow: 0 14px 30px rgba(2,62,95,0.10); backdrop-filter: blur(18px) saturate(1.18); -webkit-backdrop-filter: blur(18px) saturate(1.18); }
        .member-header { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 20px; padding-bottom: 16px; border-bottom: 2px solid rgba(0,119,182,0.10); flex-wrap: wrap; }
        .member-info { display: flex; align-items: center; gap: 14px; }
        .avatar-circle { width: 52px; height: 52px; border-radius: 50%; background: linear-gradient(135deg, #0077b6, #00b4d8); color: #fff; display: flex; align-items: center; justify-content: center; font-size: 1.25rem; font-weight: 850; box-shadow: 0 8px 20px rgba(0,119,182,0.28); }
        .member-name { font-size: 1.1rem; font-weight: 850; color: var(--deep-blue); }
        .member-role { font-size: 0.82rem; font-weight: 700; color: var(--text-muted); display: inline-flex; align-items: center; gap: 6px; }

        .member-task-stats { display: flex; gap: 10px; }
        .badge-count { padding: 6px 14px; border-radius: 999px; font-size: 0.78rem; font-weight: 800; display: inline-flex; align-items: center; gap: 6px; }
        .badge-count.dump { background: #fee2e2; color: #b91c1c; }
        .badge-count.ongoing { background: #dbeafe; color: #1d4ed8; }
        .badge-count.completed { background: #d1fae5; color: #047857; }

        /* Tasks Sub-grid */
        .member-tasks-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 16px; }
        .task-item-card { background: rgba(255,255,255,0.78); border-radius: 14px; border: 1px solid rgba(0,119,182,0.12); padding: 16px; transition: transform 0.2s ease; }
        .task-item-card:hover { transform: translateY(-2px); background: #fff; }
        .task-item-title { font-size: 0.95rem; font-weight: 800; color: var(--text-main); margin-bottom: 6px; }
        .task-item-desc { font-size: 0.84rem; color: var(--text-muted); margin-bottom: 12px; line-height: 1.4; }
        .task-item-meta { display: flex; justify-content: space-between; align-items: center; font-size: 0.78rem; font-weight: 700; color: var(--text-muted); }
    </style>
</head>
<body class="role-<?= htmlspecialchars($role) ?>">

    <aside class="sidebar" id="sidebar">
        <button class="sidebar-toggle" id="sidebarToggle" title="Tutup/Buka Menu">
            <i class="fas fa-chevron-left"></i>
        </button>
        <div class="sidebar-header">
            <img src="mainpp.png" alt="Logo MAINPP">
            <h3>MAINPP WORKSPACE</h3>
        </div>
        <ul class="sidebar-menu">
            <?php renderUnifiedSidebarMenu($conn, $role, 'my_team.php'); ?>
        </ul>
    </aside>

    <main class="main">
        <div class="top-bar">
            <h2><i class="fas fa-users"></i> My Team - Tugasan Pasukan</h2>
            <?php renderTopBarUserMenu($conn, $role, 'my_team.php'); ?>
        </div>

        <?php
        renderBreadcrumb([
            ['label' => 'Modul Pasukan Saya', 'url' => '#'],
            ['label' => 'My Team', 'url' => 'my_team.php', 'current' => true]
        ]);
        ?>

        <!-- Overview Stats -->
        <div class="stats-row">
            <div class="stat-box">
                <i class="fas fa-building"></i>
                <h3 style="font-size:1.3rem; margin-top:8px; line-height:1.2;"><?= htmlspecialchars($user_department !== '' ? $user_department : 'Bahagian Utama') ?></h3>
                <p>Bahagian Saya</p>
            </div>
            <div class="stat-box members">
                <i class="fas fa-user-friends"></i>
                <h3><?= $total_members ?></h3>
                <p>Ahli Pasukan</p>
            </div>
            <div class="stat-box">
                <i class="fas fa-tasks"></i>
                <h3><?= $total_tasks ?></h3>
                <p>Jumlah Tugasan</p>
            </div>
            <div class="stat-box ongoing">
                <i class="fas fa-spinner"></i>
                <h3><?= $ongoing_count ?></h3>
                <p>Dalam Proses</p>
            </div>
            <div class="stat-box completed">
                <i class="fas fa-check-circle"></i>
                <h3><?= $completed_count ?></h3>
                <p>Selesai</p>
            </div>
        </div>

        <!-- Controls Row -->
        <div class="controls-row">
            <div class="search-box">
                <i class="fas fa-search"></i>
                <input type="text" id="searchInput" placeholder="Cari ahli pasukan..." onkeyup="filterTeam()">
            </div>
            <div class="filter-tabs">
                <button class="tab-item active" onclick="filterStage('all', this)">Semua Peringkat</button>
                <button class="tab-item" onclick="filterStage('dump', this)">Dump</button>
                <button class="tab-item" onclick="filterStage('ongoing', this)">On Going</button>
                <button class="tab-item" onclick="filterStage('completed', this)">Completed</button>
            </div>
        </div>

        <!-- Team Members List -->
        <?php if (empty($members)): ?>
            <div style="text-align:center; padding:50px; background:var(--glass); border-radius:18px; border:1px solid var(--border); box-shadow: var(--shadow-soft);">
                <i class="fas fa-users-slash" style="font-size:3rem; color:var(--text-muted); opacity:0.5; margin-bottom:15px;"></i>
                <h4 style="color:var(--text-muted);">Tiada Ahli Pasukan Ditemui</h4>
                <p style="font-size:0.85rem; color:var(--text-muted); margin-top:5px;">Tiada akaun pengguna lain berdaftar di bawah bahagian <?= htmlspecialchars($user_department) ?>.</p>
            </div>
        <?php else: ?>
            <div class="team-container" id="teamContainer">
                <?php foreach ($members as $m): 
                    $m_id = (int)$m['id'];
                    $m_tasks = $tasks_by_member[$m_id] ?? [];
                    $display_name = !empty($m['fullname']) ? $m['fullname'] : $m['short_name'];
                    $initials = strtoupper(substr($display_name, 0, 2));

                    $m_dump = 0; $m_ongoing = 0; $m_completed = 0;
                    foreach ($m_tasks as $mt) {
                        $st = strtolower(trim($mt['status']));
                        if (in_array($st, ['selesai', 'completed', 'done'], true)) $m_completed++;
                        elseif (in_array($st, ['dalam proses', 'in progress', 'ongoing'], true)) $m_ongoing++;
                        else $m_dump++;
                    }
                ?>
                    <div class="member-card" data-member-name="<?= strtolower(htmlspecialchars($display_name . ' ' . $m['email'])) ?>">
                        <div class="member-header">
                            <div class="member-info">
                                <div class="avatar-circle"><?= $initials ?></div>
                                <div>
                                    <div class="member-name"><?= htmlspecialchars($display_name) ?></div>
                                    <div class="member-role"><i class="fas fa-briefcase"></i> <?= htmlspecialchars(!empty($m['position']) ? $m['position'] : strtoupper($m['role'])) ?></div>
                                </div>
                            </div>
                            <div class="member-task-stats">
                                <span class="badge-count dump"><i class="fas fa-inbox"></i> <?= $m_dump ?> Dump</span>
                                <span class="badge-count ongoing"><i class="fas fa-spinner"></i> <?= $m_ongoing ?> On Going</span>
                                <span class="badge-count completed"><i class="fas fa-check"></i> <?= $m_completed ?> Done</span>
                            </div>
                        </div>

                        <?php if (empty($m_tasks)): ?>
                            <p style="font-size:0.85rem; color:var(--text-muted); font-style:italic;"><i class="far fa-smile"></i> Tiada tugasan aktif untuk ahli pasukan ini.</p>
                        <?php else: ?>
                            <div class="member-tasks-grid">
                                <?php foreach ($m_tasks as $task): 
                                    $st = strtolower(trim($task['status']));
                                    $stage_class = 'dump';
                                    $stage_label = 'Dump';
                                    if (in_array($st, ['selesai', 'completed', 'done'], true)) {
                                        $stage_class = 'completed';
                                        $stage_label = 'Completed';
                                    } elseif (in_array($st, ['dalam proses', 'in progress', 'ongoing'], true)) {
                                        $stage_class = 'ongoing';
                                        $stage_label = 'On Going';
                                    }

                                    $due_str = !empty($task['due_date']) ? date('d/m/Y', strtotime($task['due_date'])) : (!empty($task['start_at']) ? date('d/m/Y', strtotime($task['start_at'])) : '-');
                                ?>
                                    <div class="task-item-card" data-stage="<?= $stage_class ?>">
                                        <div style="display:flex; justify-content:space-between; align-items:center; margin-bottom:8px;">
                                            <span class="task-item-title"><?= htmlspecialchars($task['title']) ?></span>
                                            <span class="badge-count <?= $stage_class ?>" style="padding:3px 8px; font-size:0.7rem;"><?= $stage_label ?></span>
                                        </div>
                                        <div class="task-item-desc"><?= htmlspecialchars($task['description'] ?? 'Tiada penerangan.') ?></div>
                                        <div class="task-item-meta">
                                            <span><i class="far fa-calendar-alt"></i> <?= $due_str ?></span>
                                            <span style="text-transform:capitalize;"><i class="fas fa-flag"></i> <?= htmlspecialchars($task['priority'] ?? 'Normal') ?></span>
                                        </div>
                                    </div>
                                <?php endforeach; ?>
                            </div>
                        <?php endif; ?>
                    </div>
                <?php endforeach; ?>
            </div>
        <?php endif; ?>

    </main>

    <script>
        function filterTeam() {
            const query = document.getElementById('searchInput').value.toLowerCase().trim();
            document.querySelectorAll('.member-card').forEach(card => {
                const name = card.dataset.memberName || '';
                card.style.display = (query === '' || name.includes(query)) ? 'block' : 'none';
            });
        }

        function filterStage(stage, btn) {
            document.querySelectorAll('.tab-item').forEach(b => b.classList.remove('active'));
            btn.classList.add('active');

            document.querySelectorAll('.task-item-card').forEach(card => {
                if (stage === 'all' || card.dataset.stage === stage) {
                    card.style.display = 'block';
                } else {
                    card.style.display = 'none';
                }
            });
        }
    </script>
</body>
</html>
