<?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';

// Handle POST actions (Create, Update Status, Delete)
$flash_msg = '';
$flash_type = '';

if ($_SERVER['REQUEST_METHOD'] === 'POST') {
    $action = $_POST['action'] ?? '';

    if ($action === 'create_task') {
        $title = trim((string) ($_POST['title'] ?? ''));
        $description = trim((string) ($_POST['description'] ?? ''));
        $due_date = trim((string) ($_POST['due_date'] ?? ''));
        $priority = trim((string) ($_POST['priority'] ?? 'Normal'));
        $status = trim((string) ($_POST['status'] ?? 'Pending'));

        if ($title !== '') {
            $due_at = !empty($due_date) ? $due_date . ' 23:59:59' : null;
            $stmt = mysqli_prepare($conn, "INSERT INTO calendar_events (user_id, event_type, title, description, start_at, due_date, priority, status, created_by, updated_by) VALUES (?, 'task', ?, ?, NOW(), ?, ?, ?, ?, ?)");
            if ($stmt) {
                mysqli_stmt_bind_param($stmt, 'isssssii', $user_id, $title, $description, $due_at, $priority, $status, $user_id, $user_id);
                if (mysqli_stmt_execute($stmt)) {
                    $flash_msg = 'Tugasan baharu berjaya disimpan!';
                    $flash_type = 'success';
                }
            }
        }
    } elseif ($action === 'update_task_status') {
        $task_id = (int) ($_POST['task_id'] ?? 0);
        $new_status = trim((string) ($_POST['status'] ?? 'Pending'));
        if ($task_id > 0) {
            $stmt = mysqli_prepare($conn, "UPDATE calendar_events SET status = ?, updated_by = ? WHERE id = ? AND user_id = ? AND event_type = 'task'");
            if ($stmt) {
                mysqli_stmt_bind_param($stmt, 'siii', $new_status, $user_id, $task_id, $user_id);
                if (mysqli_stmt_execute($stmt)) {
                    $flash_msg = 'Status tugasan dikemas kini!';
                    $flash_type = 'success';
                }
            }
        }
    } elseif ($action === 'delete_task') {
        $task_id = (int) ($_POST['task_id'] ?? 0);
        if ($task_id > 0) {
            $stmt = mysqli_prepare($conn, "DELETE FROM calendar_events WHERE id = ? AND user_id = ? AND event_type = 'task'");
            if ($stmt) {
                mysqli_stmt_bind_param($stmt, 'ii', $task_id, $user_id);
                if (mysqli_stmt_execute($stmt)) {
                    $flash_msg = 'Tugasan berjaya dipadam!';
                    $flash_type = 'success';
                }
            }
        }
    }
}

// Fetch user tasks
$sql = "SELECT * FROM calendar_events WHERE user_id = ? AND event_type = 'task' ORDER BY id DESC";
$stmt = mysqli_prepare($conn, $sql);
mysqli_stmt_bind_param($stmt, 'i', $user_id);
mysqli_stmt_execute($stmt);
$result = mysqli_stmt_get_result($stmt);
$tasks = $result ? mysqli_fetch_all($result, MYSQLI_ASSOC) : [];

// Statistics
$total_count = count($tasks);
$pending_count = 0;
$in_progress_count = 0;
$completed_count = 0;

foreach ($tasks as $t) {
    $st = strtolower(trim($t['status']));
    if ($st === 'selesai' || $st === 'completed' || $st === 'done') {
        $completed_count++;
    } elseif ($st === 'dalam proses' || $st === 'in progress' || $st === 'ongoing') {
        $in_progress_count++;
    } else {
        $pending_count++;
    }
}
?>
<!DOCTYPE html>
<html lang="ms">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>My Task | 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: 10px; margin-bottom: 5px; transition: all 0.2s ease; font-size: 0.9rem; white-space: nowrap; }
        .sidebar-menu li a:hover, .sidebar-menu li a.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 li a i { width: 20px; text-align: center; font-size: 1.1rem; }
        
        .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: 320px; opacity: 1; padding-bottom: 8px; }
        .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; transform: translateY(0); }
        .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; }
        
        .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; }
        
        .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(210px, 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.pending { background: linear-gradient(135deg, #f59e0b, #d97706); box-shadow: 0 18px 34px rgba(245,158,11,0.24); }
        .stat-box.progress { background: linear-gradient(135deg, #3b82f6, #1d4ed8); box-shadow: 0 18px 34px rgba(59,130,246,0.24); }
        .stat-box.completed { background: linear-gradient(135deg, #10b981, #059669); box-shadow: 0 18px 34px rgba(16,185,129,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; }

        /* Action Row & Tabs */
        .action-row { display: flex; justify-content: space-between; align-items: center; margin-bottom: 22px; gap: 15px; flex-wrap: wrap; }
        .btn-add { background: linear-gradient(90deg, #0077b6, #00b4d8); color: #fff; padding: 12px 24px; border-radius: 999px; border: none; font-weight: 750; font-size: 0.9rem; cursor: pointer; display: inline-flex; align-items: center; gap: 8px; box-shadow: 0 10px 24px rgba(0,119,182,0.24); transition: all 0.2s ease; }
        .btn-add:hover { transform: translateY(-2px); filter: brightness(1.06); }
        
        .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); }

        /* Tasks Cards Grid */
        .tasks-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 20px; }
        .task-card { background: rgba(255,255,255,0.70); border-radius: 18px; border: 1px solid rgba(255,255,255,0.58); padding: 22px; 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); display: flex; flex-direction: column; justify-content: space-between; transition: transform 0.2s ease, box-shadow 0.2s ease; }
        .task-card:hover { transform: translateY(-2px); box-shadow: 0 20px 40px rgba(2,62,95,0.15); }
        .task-header { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; margin-bottom: 12px; }
        .task-title { font-size: 1.05rem; font-weight: 800; color: var(--deep-blue); line-height: 1.3; }
        
        .badge { padding: 5px 12px; border-radius: 999px; font-size: 0.75rem; font-weight: 750; text-transform: uppercase; letter-spacing: 0.03em; }
        .badge.tinggi { background: rgba(239, 68, 68, 0.12); color: #dc2626; border: 1px solid rgba(239, 68, 68, 0.24); }
        .badge.normal { background: rgba(59, 130, 246, 0.12); color: #2563eb; border: 1px solid rgba(59, 130, 246, 0.24); }
        .badge.rendah { background: rgba(100, 116, 139, 0.12); color: #475569; border: 1px solid rgba(100, 116, 139, 0.24); }

        .status-badge { padding: 5px 12px; border-radius: 10px; font-size: 0.8rem; font-weight: 700; display: inline-flex; align-items: center; gap: 6px; }
        .status-badge.selesai { background: #d1fae5; color: #047857; }
        .status-badge.proses { background: #dbeafe; color: #1d4ed8; }
        .status-badge.pending { background: #fef3c7; color: #b45309; }

        .task-body { font-size: 0.88rem; color: var(--text-muted); margin-bottom: 18px; line-height: 1.5; flex: 1; }
        .task-footer { display: flex; justify-content: space-between; align-items: center; padding-top: 14px; border-top: 1px solid var(--border); font-size: 0.82rem; color: var(--text-muted); }
        .due-date { display: flex; align-items: center; gap: 6px; font-weight: 650; }
        
        .btn-icon { width: 34px; height: 34px; border-radius: 10px; border: none; background: rgba(0,119,182,0.08); color: var(--primary); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; transition: all 0.2s ease; }
        .btn-icon:hover { background: var(--primary); color: #fff; }
        .btn-icon.danger { color: #ef4444; background: rgba(239, 68, 68, 0.08); }
        .btn-icon.danger:hover { background: #ef4444; color: #fff; }

        /* Modal Sheet */
        .modal { display: none; position: fixed; inset: 0; background: rgba(15, 23, 42, 0.45); backdrop-filter: blur(8px); z-index: 2000; align-items: center; justify-content: center; padding: 20px; }
        .modal.active { display: flex; }
        .modal-content { background: #fff; width: 100%; max-width: 520px; border-radius: 22px; padding: 28px; box-shadow: 0 25px 50px rgba(0,0,0,0.25); border: 1px solid var(--border); animation: slideUp 0.3s ease; }
        @keyframes slideUp { from { transform: translateY(20px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }
        .modal-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px; }
        .modal-header h3 { font-size: 1.2rem; color: var(--deep-blue); font-weight: 800; }
        .modal-close { background: none; border: none; font-size: 1.2rem; color: var(--text-muted); cursor: pointer; }
        .form-group { margin-bottom: 16px; }
        .form-group label { display: block; font-size: 0.85rem; font-weight: 700; color: var(--text-main); margin-bottom: 6px; }
        .form-control { width: 100%; padding: 12px 14px; border-radius: 12px; border: 1px solid #cbd5e1; font-size: 0.9rem; outline: none; transition: border-color 0.2s ease; }
        .form-control:focus { border-color: var(--primary); box-shadow: 0 0 0 3px rgba(0,119,182,0.12); }
        .form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
        .btn-submit { width: 100%; padding: 12px; background: linear-gradient(90deg, #0077b6, #00b4d8); color: #fff; border: none; border-radius: 12px; font-weight: 750; font-size: 0.95rem; cursor: pointer; margin-top: 10px; box-shadow: 0 10px 24px rgba(0,119,182,0.25); }

        .alert { padding: 14px 18px; border-radius: 12px; margin-bottom: 20px; font-size: 0.9rem; font-weight: 650; display: flex; align-items: center; gap: 10px; }
        .alert.success { background: #d1fae5; color: #047857; border: 1px solid #a7f3d0; }
    </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_task.php'); ?>
        </ul>
    </aside>

    <main class="main">
        <div class="top-bar">
            <h2><i class="fas fa-tasks"></i> My Task</h2>
            <?php renderTopBarUserMenu($conn, $role, 'my_task.php'); ?>
        </div>

        <?php
        renderBreadcrumb([
            ['label' => 'Modul Peribadi', 'url' => '#'],
            ['label' => 'My Task', 'url' => 'my_task.php', 'current' => true]
        ]);
        ?>

        <?php if ($flash_msg): ?>
            <div class="alert <?= $flash_type ?>"><i class="fas fa-check-circle"></i> <?= htmlspecialchars($flash_msg) ?></div>
        <?php endif; ?>

        <!-- Stats Overview -->
        <div class="stats-row">
            <div class="stat-box">
                <i class="fas fa-list-check"></i>
                <h3><?= $total_count ?></h3>
                <p>Jumlah Tugasan</p>
            </div>
            <div class="stat-box">
                <i class="fas fa-inbox"></i>
                <h3><?= $pending_count ?></h3>
                <p>Dump</p>
            </div>
            <div class="stat-box progress">
                <i class="fas fa-spinner"></i>
                <h3><?= $in_progress_count ?></h3>
                <p>On Going</p>
            </div>
            <div class="stat-box completed">
                <i class="fas fa-check-double"></i>
                <h3><?= $completed_count ?></h3>
                <p>Completed</p>
            </div>
        </div>

        <!-- Action Row -->
        <div class="action-row">
            <button class="btn-add" onclick="openModal()"><i class="fas fa-plus-circle"></i> Tambah Tugasan Baharu</button>
            <div class="filter-tabs">
                <button class="tab-item active" onclick="filterTasks('all', this)">Semua Peringkat</button>
                <button class="tab-item" onclick="filterTasks('dump', this)">Dump</button>
                <button class="tab-item" onclick="filterTasks('ongoing', this)">On Going</button>
                <button class="tab-item" onclick="filterTasks('completed', this)">Completed</button>
            </div>
        </div>

        <!-- Tasks Grid -->
        <?php if (empty($tasks)): ?>
            <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-tasks" style="font-size:3rem; color:var(--text-muted); opacity:0.5; margin-bottom:15px;"></i>
                <h4 style="color:var(--text-muted);">Tiada Tugasan Didaftarkan</h4>
                <p style="font-size:0.85rem; color:var(--text-muted); margin-top:5px;">Sila tekan butang 'Tambah Tugasan Baharu' di atas untuk memulakan.</p>
            </div>
        <?php else: ?>
            <div class="tasks-grid">
                <?php foreach ($tasks as $task): 
                    $st = strtolower(trim($task['status']));
                    $st_class = 'dump';
                    $st_label = 'Dump';
                    if ($st === 'selesai' || $st === 'completed' || $st === 'done') {
                        $st_class = 'completed';
                        $st_label = 'Completed';
                    } elseif ($st === 'dalam proses' || $st === 'in progress' || $st === 'ongoing') {
                        $st_class = 'ongoing';
                        $st_label = 'On Going';
                    }
                    $prio = strtolower(trim($task['priority'] ?? 'normal'));
                ?>
                    <div class="task-card" data-status="<?= $st_class ?>">
                        <div>
                            <div class="task-header">
                                <span class="task-title"><?= htmlspecialchars($task['title']) ?></span>
                                <span class="badge <?= $prio ?>"><?= htmlspecialchars($task['priority'] ?? 'Normal') ?></span>
                            </div>
                            <div class="task-body">
                                <?= nl2br(htmlspecialchars($task['description'] ?? 'Tiada penerangan.')) ?>
                            </div>
                        </div>
                        <div class="task-footer">
                            <div class="due-date">
                                <i class="far fa-calendar-alt"></i>
                                <?= !empty($task['due_date']) ? date('d/m/Y', strtotime($task['due_date'])) : 'Tiada Tarikh' ?>
                            </div>
                            <div style="display:flex; align-items:center; gap:8px;">
                                <span class="status-badge <?= $st_class ?>"><?= $st_label ?></span>
                                <form method="POST" style="display:inline;" onsubmit="return confirm('Adakah anda pasti untuk memadam tugasan ini?');">
                                    <input type="hidden" name="action" value="delete_task">
                                    <input type="hidden" name="task_id" value="<?= $task['id'] ?>">
                                    <button type="submit" class="btn-icon danger" title="Padam"><i class="fas fa-trash"></i></button>
                                </form>
                            </div>
                        </div>
                    </div>
                <?php endforeach; ?>
            </div>
        <?php endif; ?>

    </main>

    <!-- Create Task Modal -->
    <div class="modal" id="taskModal">
        <div class="modal-content">
            <div class="modal-header">
                <h3><i class="fas fa-plus-circle" style="color:var(--primary);"></i> Tambah Tugasan Baharu</h3>
                <button class="modal-close" onclick="closeModal()"><i class="fas fa-times"></i></button>
            </div>
            <form method="POST">
                <input type="hidden" name="action" value="create_task">
                <div class="form-group">
                    <label>Tajuk Tugasan</label>
                    <input type="text" name="title" class="form-control" placeholder="Contoh: Semak Dokumen Laporan Kewangan" required>
                </div>
                <div class="form-group">
                    <label>Penerangan / Catatan</label>
                    <textarea name="description" class="form-control" rows="3" placeholder="Butiran tugasan yang perlu diselesaikan..."></textarea>
                </div>
                <div class="form-row">
                    <div class="form-group">
                        <label>Keutamaan</label>
                        <select name="priority" class="form-control">
                            <option value="Normal">Normal</option>
                            <option value="Tinggi">Tinggi</option>
                            <option value="Rendah">Rendah</option>
                        </select>
                    </div>
                    <div class="form-group">
                        <label>Status</label>
                        <select name="status" class="form-control">
                            <option value="Dump">Dump</option>
                            <option value="In Progress">On Going</option>
                            <option value="Completed">Completed</option>
                        </select>
                    </div>
                </div>
                <div class="form-group">
                    <label>Tarikh Akhir (Due Date)</label>
                    <input type="date" name="due_date" class="form-control">
                </div>
                <button type="submit" class="btn-submit"><i class="fas fa-save"></i> Simpan Tugasan</button>
            </form>
        </div>
    </div>

    <script>
        function openModal() { document.getElementById('taskModal').classList.add('active'); }
        function closeModal() { document.getElementById('taskModal').classList.remove('active'); }

        function filterTasks(status, btn) {
            document.querySelectorAll('.tab-item').forEach(b => b.classList.remove('active'));
            btn.classList.add('active');
            
            document.querySelectorAll('.task-card').forEach(card => {
                if (status === 'all' || card.dataset.status === status) {
                    card.style.display = 'flex';
                } else {
                    card.style.display = 'none';
                }
            });
        }
    </script>
</body>
</html>
