<?php
session_start();

require_once 'db.php';

// Verify role-based access
// For AJAX calls we must not output HTML/redirects; checkAccess() may redirect
// so we enforce JSON-only behavior below for any request that includes `action`.
checkAccess();


$user_id = $_SESSION['user_id'];
$user_name = isset($_SESSION['user_name']) ? $_SESSION['user_name'] : 'Admin User';
$user_role = isset($_SESSION['user_role']) ? $_SESSION['user_role'] : 'Designer'; // Default to Designer for new logic

// Fetch Employees for the dropdown (Only Users with Role 'Employee')
$employees = [];
try {
$stmt = mysqli_prepare($conn, "SELECT id, name, email FROM users WHERE role = 'Designer' AND id != ? ORDER BY name ASC");
    if ($stmt) {
        mysqli_stmt_bind_param($stmt, "i", $user_id);
        mysqli_stmt_execute($stmt);
        $result = mysqli_stmt_get_result($stmt);
        $employees = mysqli_fetch_all($result, MYSQLI_ASSOC);
        mysqli_stmt_close($stmt);
    }
} catch (Exception $e) {
    // Handle silently
}

// Handle AJAX requests
if ($_SERVER['REQUEST_METHOD'] === 'POST' && isset($_POST['action'])) {
    header('Content-Type: application/json; charset=utf-8');

    // Disable output buffering surprises/notices breaking JSON.
    // Any fatal/notice should still be caught as a JSON response.
ob_start();

    // Make PHP warnings/notices become Exceptions so we always return valid JSON.
    set_error_handler(function($severity, $message, $file, $line) {
        throw new ErrorException($message, 0, $severity, $file, $line);
    });

    try {


        // Lightweight endpoint used by Designer "Load Project" button (AJAX)
        if ($_POST['action'] === 'validate_project_access') {
            if ($user_role !== 'Designer') {
                echo json_encode(['success' => false, 'message' => 'Unauthorized']);
                exit;
            }

            $project_id = isset($_POST['project_id']) ? (int)$_POST['project_id'] : 0;
            if ($project_id <= 0) {
                echo json_encode(['success' => false, 'message' => 'Invalid project']);
                exit;
            }

            $stmt = mysqli_prepare($conn, "SELECT master_designer_id FROM projects WHERE id = ?");
            if (!$stmt) {
                throw new Exception('Prepare failed: ' . mysqli_error($conn));
            }
            mysqli_stmt_bind_param($stmt, "i", $project_id);
            mysqli_stmt_execute($stmt);
            $res = mysqli_stmt_get_result($stmt);
            $row = mysqli_fetch_assoc($res);
            mysqli_stmt_close($stmt);

            if (!$row) {
                echo json_encode(['success' => false, 'message' => 'Project not found']);
                exit;
            }

            $is_ok = ((int)$row['master_designer_id'] === (int)$user_id);
            if ($is_ok) {
                $_SESSION['isMasterDesigner'] = true;
                $_SESSION['loadedProjectId'] = $project_id;
                $_SESSION['loadedProjectName'] = null;

                echo json_encode(['success' => true]);
            } else {
                unset($_SESSION['isMasterDesigner'], $_SESSION['loadedProjectId'], $_SESSION['loadedProjectName']);
                echo json_encode(['success' => false, 'message' => 'Unauthorized: You are not the Master Designer for this project.']);
            }
            exit;
        }

        if ($_POST['action'] === 'add_task') {
            // We expect assigned_to to be an ID now. If 'Unassigned', we use 0 or NULL.
            if ($user_role === 'Designer') {
                // Verify if designer is master designer of this project
                $check_sql = "SELECT id FROM projects WHERE project_name = ? AND master_designer_id = ?";
                $check_stmt = mysqli_prepare($conn, $check_sql);
                mysqli_stmt_bind_param($check_stmt, "si", $_POST['project'], $user_id);
                mysqli_stmt_execute($check_stmt);
                $check_res = mysqli_stmt_get_result($check_stmt);
                if (mysqli_num_rows($check_res) === 0) {
                    throw new Exception("Unauthorized: You are not the Master Designer for this project.");
                }
                mysqli_stmt_close($check_stmt);
            }
            $assigned_to_id = !empty($_POST['assigned_to']) ? (int)$_POST['assigned_to'] : 0;
            
$stmt = mysqli_prepare($conn, "
                INSERT INTO tasks (title, project_name, priority, assigned_to, due_date, created_by_user_id)
                VALUES (?, ?, ?, ?, ?, ?)
            ");
            if (!$stmt) {
                throw new Exception("Prepare failed: " . mysqli_error($conn));
            }

            // tasks.assigned_to is VARCHAR in schema. UI sends assigned_to as user id (string),
            // which works because the column accepts varchar.
            mysqli_stmt_bind_param(
                $stmt,
                "sssssi",
                $_POST['title'],
                $_POST['project'],
                $_POST['priority'],
                $assigned_to_id,
                $_POST['due_date'],
                $user_id
            );


            
            // Note: We keep a text fallback in the column just in case, or we rely purely on ID. 
            // Given the schema wasn't fully provided, I am mapping the ID to the integer column.
            // If your schema expects a string in assigned_to, change 'i' to 's' in bind_param.
            // Assuming standard ID reference here.
            
            if (!mysqli_stmt_execute($stmt)) {
                throw new Exception("Execute failed: " . mysqli_stmt_error($stmt));
            }
            $new_id = mysqli_insert_id($conn);
            mysqli_stmt_close($stmt);
            
            // Fetch the full details of the new task to return to the UI (including names)
            $stmt = mysqli_prepare($conn, "
                SELECT t.*, 
                       u.name as assigned_to_name, u.email as assigned_to_email,
                       creator.name as created_by_name
                FROM tasks t
                LEFT JOIN users u ON t.assigned_to = u.id
                LEFT JOIN users creator ON t.created_by_user_id = creator.id
                WHERE t.id = ?
            ");
            mysqli_stmt_bind_param($stmt, "i", $new_id);
            mysqli_stmt_execute($stmt);
            $res = mysqli_stmt_get_result($stmt);
            $newTask = mysqli_fetch_assoc($res);
            mysqli_stmt_close($stmt);

            echo json_encode(['success' => true, 'id' => $new_id, 'task' => $newTask]);
            exit;
        }

        if ($_POST['action'] === 'edit_task') {
            // Note: Not used by current UI, but fixed to match schema types.
            $assigned_to_id = !empty($_POST['assigned_to']) ? (string)$_POST['assigned_to'] : 'Unassigned';

            $taskId = isset($_POST['task_id']) ? (int)$_POST['task_id'] : 0;
            if ($taskId <= 0) {
                throw new Exception('Missing task_id');
            }
            
            if ($user_role === 'Designer') {
                // Verify if designer is master designer of the project the task belongs to
                $check_sql = "SELECT t.id FROM tasks t JOIN projects p ON t.project_name = p.project_name 
                             WHERE t.id = ? AND p.master_designer_id = ?";
                $check_stmt = mysqli_prepare($conn, $check_sql);
                mysqli_stmt_bind_param($check_stmt, "ii", $taskId, $user_id);
                mysqli_stmt_execute($check_stmt);
                $check_res = mysqli_stmt_get_result($check_stmt);
                if (mysqli_num_rows($check_res) === 0) {
                    throw new Exception("Unauthorized: You cannot edit tasks for this project.");
                }
                mysqli_stmt_close($check_stmt);
            }

            $stmt = mysqli_prepare($conn, "
                UPDATE tasks SET title=?, project_name=?, priority=?, assigned_to=?, due_date=?
                WHERE id=?
            ");
            if (!$stmt) {
                throw new Exception("Prepare failed: " . mysqli_error($conn));
            }

            // tasks.assigned_to is VARCHAR in schema
            mysqli_stmt_bind_param(
                $stmt,
                "sssssi",
                $_POST['title'],
                $_POST['project'],
                $_POST['priority'],
                $assigned_to_id,
                $_POST['due_date'],
                $taskId
            );

            if (!mysqli_stmt_execute($stmt)) {
                throw new Exception("Execute failed: " . mysqli_stmt_error($stmt));
            }
            mysqli_stmt_close($stmt);
            echo json_encode(['success' => true]);
            exit;
        }


        if ($_POST['action'] === 'complete_task') {
            $stmt = mysqli_prepare($conn, "
                UPDATE tasks SET status='Completed' WHERE id=?
            ");
            if (!$stmt) {
                throw new Exception("Prepare failed: " . mysqli_error($conn));
            }
            mysqli_stmt_bind_param($stmt, "i", $_POST['task_id']);
            if (!mysqli_stmt_execute($stmt)) {
                throw new Exception("Execute failed: " . mysqli_stmt_error($stmt));
            }
            mysqli_stmt_close($stmt);
            echo json_encode(['success' => true]);
            exit;
        }

        if ($_POST['action'] === 'delete_task') {
            // Only Admins can delete tasks
            // This is a strict requirement from the prompt.
            // Designers should not have delete functionality.
            if ($user_role !== 'Admin') {
                throw new Exception("Unauthorized: Only Admins can delete tasks.");
            }
            
            $stmt = mysqli_prepare($conn, "
                DELETE FROM tasks WHERE id=?
            ");
            if (!$stmt) {
                throw new Exception("Prepare failed: " . mysqli_error($conn));
            }
            mysqli_stmt_bind_param($stmt, "i", $_POST['task_id']);
            if (!mysqli_stmt_execute($stmt)) {
                throw new Exception("Execute failed: " . mysqli_stmt_error($stmt));
            }
            mysqli_stmt_close($stmt);
            echo json_encode(['success' => true]);
            exit;
        }
    } catch (Exception $e) {
        echo json_encode(['success' => false, 'message' => $e->getMessage()]);
        exit;
    }
}

// Handle GET requests for AJAX data fetching
if ($_SERVER['REQUEST_METHOD'] === 'GET' && isset($_GET['action'])) {
    header('Content-Type: application/json');

    try {
        if ($_GET['action'] === 'get_task' && isset($_GET['task_id'])) {
            $stmt = mysqli_prepare($conn, "
                SELECT t.*, u.name as assigned_to_name 
                FROM tasks t 
                LEFT JOIN users u ON t.assigned_to = u.id
                WHERE t.id=?
            ");
            if (!$stmt) {
                throw new Exception("Prepare failed: " . mysqli_error($conn));
            }
            mysqli_stmt_bind_param($stmt, "i", $_GET['task_id']);
            if (!mysqli_stmt_execute($stmt)) {
                throw new Exception("Execute failed: " . mysqli_stmt_error($stmt));
            }
            $result = mysqli_stmt_get_result($stmt);
            $task = mysqli_fetch_assoc($result);
            mysqli_stmt_close($stmt);

            if ($task) {
                echo json_encode(['success' => true, 'task' => $task]);
            } else {
                echo json_encode(['success' => false, 'message' => 'Task not found']);
            }
            exit;
        }
    } catch (Exception $e) {
        echo json_encode(['success' => false, 'message' => $e->getMessage()]);
        exit;
    }
}

// Handle Project Loading logic
// Required behavior: validate master designer access and persist loaded project state.
$loaded_project_name = null;
$loadedProjectId = null;
$isMasterDesigner = false;

// Restore persisted loaded project state first
if (isset($_SESSION['loadedProjectId']) && (int)$_SESSION['loadedProjectId'] > 0) {
    $loadedProjectId = (int)$_SESSION['loadedProjectId'];
}

if ($loadedProjectId) {
    $stmt = mysqli_prepare($conn, "SELECT project_name, master_designer_id FROM projects WHERE id = ?");
    mysqli_stmt_bind_param($stmt, "i", $loadedProjectId);
    mysqli_stmt_execute($stmt);
    $res = mysqli_stmt_get_result($stmt);
    if ($prow = mysqli_fetch_assoc($res)) {
        $loaded_project_name = $prow['project_name'];
        // Validation rule: projects.master_designer_id = logged_in_user_id
        $isMasterDesigner = ((int)$prow['master_designer_id'] === (int)$user_id);
    }
    mysqli_stmt_close($stmt);
}

// If a project_id is selected via URL, re-validate and persist
if (isset($_GET['project_id'])) {
    $pid = (int)$_GET['project_id'];
    if ($pid > 0) {
        $stmt = mysqli_prepare($conn, "SELECT id, project_name, master_designer_id FROM projects WHERE id = ?");
        mysqli_stmt_bind_param($stmt, "i", $pid);
        mysqli_stmt_execute($stmt);
        $res = mysqli_stmt_get_result($stmt);

        if ($project = mysqli_fetch_assoc($res)) {
            // Required validation:
            // projects.master_designer_id = logged_in_user_id
            if ((int)$project['master_designer_id'] === (int)$user_id) {
                // Required fix: ensure these are set after successful validation
                $isMasterDesigner = true;
                $loadedProjectId = (int)$project['id'];
                $loaded_project_name = $project['project_name'];

                $_SESSION['isMasterDesigner'] = true;
                $_SESSION['loadedProjectId'] = $loadedProjectId;
                $_SESSION['loadedProjectName'] = $loaded_project_name;
            } else {
                // Not authorized for this project
                $isMasterDesigner = false;
                $loadedProjectId = null;
                $loaded_project_name = null;

                unset($_SESSION['isMasterDesigner'], $_SESSION['loadedProjectId'], $_SESSION['loadedProjectName']);
            }
        }
        mysqli_stmt_close($stmt);
    }
}

// Backward compatibility for JS/PHP usage
if (isset($_SESSION['isMasterDesigner']) && $_SESSION['isMasterDesigner'] === true) {
    $isMasterDesigner = true;
}
if (isset($_SESSION['loadedProjectId']) && (int)$_SESSION['loadedProjectId'] > 0) {
    $loadedProjectId = (int)$_SESSION['loadedProjectId'];
    if (!$loaded_project_name && isset($_SESSION['loadedProjectName'])) {
        $loaded_project_name = $_SESSION['loadedProjectName'];
    }
}


// Fetch tasks from database with Role Logic
$tasks = [];
try {
    // Base query joining with users to get names
    $sql = "
        SELECT t.*, 
               u.name as assigned_to_name, u.email as assigned_to_email,
               creator.name as created_by_name
        FROM tasks t
        LEFT JOIN users u ON t.assigned_to = u.id
        LEFT JOIN users creator ON t.created_by_user_id = creator.id
    ";

    // Apply Role Filter
    if ($user_role === 'Designer') {
        // Designer sees tasks assigned TO them OR tasks for projects where they are Master Designer
        $sql .= " WHERE t.assigned_to = ? OR t.project_name IN (SELECT project_name FROM projects WHERE master_designer_id = ?)";
    }
    
    $sql .= " ORDER BY t.due_date ASC";

    $stmt = mysqli_prepare($conn, $sql);
    
    if ($user_role === 'Designer') {
        mysqli_stmt_bind_param($stmt, "ii", $user_id, $user_id);
    }
    
    mysqli_stmt_execute($stmt);
    $result = mysqli_stmt_get_result($stmt);
    $tasks = mysqli_fetch_all($result, MYSQLI_ASSOC);
    mysqli_stmt_close($stmt);
} catch (Exception $e) {
    // Handle error silently
}

// Get projects from database
$projects = [];
try {
    if ($user_role === 'Admin') {
        // Admin: all projects
        $stmt = mysqli_prepare($conn, "
            SELECT p.id, p.project_name, c.client_name FROM projects p JOIN clients c ON p.client_id = c.id
        ");
    } else {
        // Designer: only projects where they are master designer
        $stmt = mysqli_prepare($conn, "
            SELECT p.id, p.project_name, c.client_name FROM projects p JOIN clients c ON p.client_id = c.id 
            WHERE p.master_designer_id = ?
        ");
        mysqli_stmt_bind_param($stmt, "i", $user_id);
    }

    mysqli_stmt_execute($stmt);
    $result = mysqli_stmt_get_result($stmt);
    $project_dropdown_list = mysqli_fetch_all($result, MYSQLI_ASSOC);

    // Task assignment dropdown needs only project_name values
    $projects = array_column($project_dropdown_list, 'project_name');

    mysqli_stmt_close($stmt);
} catch (Exception $e) {
    $projects = [];
}

?>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Task Manager - ConstructCRM</title>
    
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
    
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.css">
    
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">

    <style>
    :root {
        --primary-color: #977C49;
        --primary-dark: #7a633a;
        --primary-light: #f8f5ef;
        --secondary-color: #343a40;
        --secondary-light: #f8f9fa;
        --success-color: #28a745;
        --info-color: #17a2b8;
        --warning-color: #ffc107;
        --danger-color: #dc3545;
        --light-color: #f8f9fa;
        --dark-color: #343a40;
        --sidebar-width: 320px;
        --nav-width: 260px;
        --header-height: 70px;
        --footer-height: 40px;
        --border-radius: 12px;
        --box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
        --transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        --gradient-primary: linear-gradient(135deg, var(--primary-color), var(--primary-dark));
        --gradient-light: linear-gradient(135deg, #fff 0%, #f8f9fa 100%);
        --shadow-hover: 0 8px 25px rgba(0, 0, 0, 0.15);
        --shadow-card: 0 4px 15px rgba(0, 0, 0, 0.08);
    }

    * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
    }

    body {
        font-family: 'Inter', sans-serif;
        background-color: #f5f7fa;
        color: #333;
        font-size: 14px;
        line-height: 1.4;
        overflow-x: hidden;
    }

    /* Header */
    .header {
        background-color: #fff;
        box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        height: var(--header-height);
        z-index: 1000;
        display: flex;
        align-items: center;
        padding: 0 20px;
    }

    .logo {
        display: flex;
        align-items: center;
        font-weight: 700;
        font-size: 20px;
        color: var(--primary-color);
        text-decoration: none;
    }

    .logo i {
        font-size: 24px;
        margin-right: 10px;
    }

    .header-actions {
        margin-left: auto;
        display: flex;
        align-items: center;
    }

    .mobile-menu-toggle {
        display: none;
        background: none;
        border: none;
        font-size: 24px;
        color: var(--primary-color);
        margin-right: 15px;
        cursor: pointer;
    }

    /* User Dropdown */
    .user-dropdown {
        position: relative;
    }

    .user-profile {
        display: flex;
        align-items: center;
        cursor: pointer;
        padding: 5px 10px;
        border-radius: var(--border-radius);
        transition: var(--transition);
    }

    .user-profile:hover {
        background-color: #f8f9fa;
    }

    .user-avatar {
        width: 36px;
        height: 36px;
        border-radius: 50%;
        background-color: var(--primary-color);
        color: white;
        display: flex;
        align-items: center;
        justify-content: center;
        font-weight: 600;
        margin-right: 10px;
        font-size: 14px;
    }
    
    /* Role Badge */
    .role-badge {
        font-size: 10px;
        padding: 2px 6px;
        border-radius: 4px;
        text-transform: uppercase;
        font-weight: 700;
        letter-spacing: 0.5px;
        margin-left: 5px;
    }
    .role-admin {
        background-color: rgba(220, 53, 69, 0.1);
        color: var(--danger-color);
    }
    .role-employee {
        background-color: rgba(23, 162, 184, 0.1);
        color: var(--info-color);
    }

    .user-name {
        font-weight: 500;
        margin-right: 5px;
    }

    .dropdown-arrow {
        font-size: 12px;
        color: #666;
        transition: var(--transition);
    }

    .user-dropdown.show .dropdown-arrow {
        transform: rotate(180deg);
    }

    .user-dropdown-menu {
        position: absolute;
        top: 100%;
        right: 0;
        background-color: #fff;
        border-radius: var(--border-radius);
        box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
        min-width: 180px;
        padding: 8px 0;
        margin-top: 5px;
        opacity: 0;
        visibility: hidden;
        transform: translateY(-10px);
        transition: var(--transition);
        z-index: 1001;
    }

    .user-dropdown.show .user-dropdown-menu {
        opacity: 1;
        visibility: visible;
        transform: translateY(0);
    }

    .dropdown-item {
        display: flex;
        align-items: center;
        padding: 10px 20px;
        color: #555;
        text-decoration: none;
        transition: var(--transition);
    }

    .dropdown-item:hover {
        background-color: #f8f9fa;
        color: var(--primary-color);
    }

    .dropdown-item i {
        margin-right: 10px;
        font-size: 16px;
    }

    .dropdown-divider {
        height: 1px;
        background-color: #eee;
        margin: 8px 0;
    }

    /* Main Layout */
    .main-container {
        display: flex;
        min-height: calc(100vh - var(--header-height));
        margin-top: var(--header-height);
    }

    /* Sidebar Navigation */
    .sidebar-nav {
        width: var(--nav-width);
        background-color: #fff;
        box-shadow: 2px 0 10px rgba(0, 0, 0, 0.05);
        position: fixed;
        top: var(--header-height);
        left: 0;
        bottom: 0;
        z-index: 999;
        overflow-y: auto;
        transition: var(--transition);
    }

    .nav-section {
        padding: 15px 0;
    }

    .nav-section:last-child {
        padding-bottom: 20px;
    }

    .nav-title {
        font-size: 11px;
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: 0.5px;
        color: #999;
        padding: 0 20px;
        margin-bottom: 10px;
    }

    .nav-list {
        list-style: none;
    }

    .nav-item {
        margin-bottom: 5px;
    }

    .nav-link {
        display: flex;
        align-items: center;
        padding: 12px 20px;
        color: #555;
        text-decoration: none;
        font-weight: 500;
        transition: var(--transition);
        position: relative;
    }

    .nav-link i {
        font-size: 18px;
        margin-right: 12px;
        width: 20px;
        text-align: center;
    }

    .nav-link:hover {
        background-color: rgba(151, 124, 73, 0.05);
        color: var(--primary-color);
    }

    .nav-link.active {
        background-color: rgba(151, 124, 73, 0.1);
        color: var(--primary-color);
    }

    .nav-link.active::before {
        content: '';
        position: absolute;
        left: 0;
        top: 0;
        bottom: 0;
        width: 4px;
        background-color: var(--primary-color);
    }

    /* Content Wrapper */
    .content-wrapper {
        flex: 1;
        margin-left: var(--nav-width);
        display: flex;
        flex-direction: column;
        transition: var(--transition);
    }

    .content-header {
        background-color: #fff;
        padding: 20px 30px;
        border-bottom: 1px solid #eee;
        display: flex;
        align-items: center;
        justify-content: space-between;
    }

    .page-title {
        font-size: 24px;
        font-weight: 600;
        color: #333;
    }

    .breadcrumb {
        background-color: transparent;
        padding: 0;
        margin: 0;
        font-size: 13px;
    }

    .breadcrumb-item {
        color: #999;
    }

    .breadcrumb-item a {
        color: #999;
        text-decoration: none;
        transition: var(--transition);
    }

    .breadcrumb-item a:hover {
        color: var(--primary-color);
    }

    .breadcrumb-item.active {
        color: var(--primary-color);
    }

    .breadcrumb-item + .breadcrumb-item::before {
        content: "›";
        color: #ccc;
    }

    /* Main Content */
    .main-content {
        flex: 1;
        padding: 30px;
    }

    /* Task Form Container */
    .task-form-container {
        background-color: #fff;
        border-radius: var(--border-radius);
        box-shadow: var(--box-shadow);
        margin-bottom: 30px;
    overflow: visible; /* Ensure absolute dropdowns are not clipped */
    }

    .form-header {
        background-color: var(--primary-color);
        color: white;
        padding: 20px 30px;
        display: flex;
        align-items: center;
    border-radius: var(--border-radius) var(--border-radius) 0 0;
    }

    .form-title {
        font-size: 18px;
        font-weight: 600;
        margin: 0;
    }

    .form-body {
        padding: 30px;
    }

    /* Task Table Container */
    .task-table-container {
        background-color: #fff;
        border-radius: var(--border-radius);
        box-shadow: var(--box-shadow);
        overflow: hidden;
    }

    .table-header {
        padding: 20px 30px;
        border-bottom: 1px solid #eee;
        display: flex;
        align-items: center;
        justify-content: space-between;
    }

    .table-title {
        font-size: 18px;
        font-weight: 600;
        margin: 0;
        color: #333;
    }

    .table-body {
        padding: 0;
    }

    /* Form Controls */
    .form-group {
        margin-bottom: 20px;
    }

    .form-label {
        font-weight: 500;
        color: #555;
        margin-bottom: 8px;
        font-size: 14px;
    }

    .form-control, .form-select {
        border: 1px solid #ddd;
        border-radius: var(--border-radius);
        padding: 10px 15px;
        font-size: 14px;
        transition: var(--transition);
    }

    .form-control:focus, .form-select:focus {
        border-color: var(--primary-color);
        box-shadow: 0 0 0 3px rgba(151, 124, 73, 0.2);
        outline: none;
    }

    .btn {
        border-radius: var(--border-radius);
        font-weight: 500;
        padding: 10px 20px;
        font-size: 14px;
        transition: var(--transition);
        cursor: pointer;
    }

    .btn-primary {
        background-color: var(--primary-color);
        border-color: var(--primary-color);
    }

    .btn-primary:hover {
        background-color: var(--primary-dark);
        border-color: var(--primary-dark);
        transform: translateY(-2px);
        box-shadow: 0 4px 8px rgba(151, 124, 73, 0.3);
    }

    .btn-outline-secondary {
        border-color: #ddd;
        color: #666;
    }

    .btn-outline-secondary:hover {
        background-color: #f8f9fa;
        border-color: #ccc;
        color: #555;
    }

    .btn-outline-success {
        border-color: var(--success-color);
        color: var(--success-color);
    }

    .btn-outline-success:hover {
        background-color: var(--success-color);
        border-color: var(--success-color);
        color: white;
    }

    .btn-outline-danger {
        border-color: var(--danger-color);
        color: var(--danger-color);
    }

    .btn-outline-danger:hover {
        background-color: var(--danger-color);
        border-color: var(--danger-color);
        color: white;
    }

    /* Table Styles */
    .table {
        margin-bottom: 0;
    }

    .table th {
        border-top: none;
        font-weight: 600;
        color: #555;
        font-size: 14px;
    }

    .task-row.completed {
        text-decoration: line-through;
        opacity: 0.6;
        background-color: #f8f9fa;
    }

    .task-row td:last-child {
        white-space: nowrap;
    }

    .priority-badge {
        font-size: 11px;
        padding: 3px 8px;
        border-radius: 12px;
    }

    /* Small Avatar for Table */
    .table-avatar {
        width: 28px;
        height: 28px;
        border-radius: 50%;
        background-color: #e9ecef;
        color: #6c757d;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        font-size: 11px;
        margin-right: 8px;
        font-weight: 600;
    }

    /* Empty State */
    .empty-state {
        padding: 60px 20px;
        text-align: center;
        color: #999;
    }
    .empty-state i {
        font-size: 48px;
        margin-bottom: 20px;
        color: #ddd;
        display: block;
    }

    /* Custom Searchable Dropdown */
    .searchable-select-wrapper {
        position: relative;
    }

    .searchable-select-input {
        cursor: text;
    }

    /* Ensure designer dropdown stays usable with many entries */

    .searchable-select-dropdown {
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        background: white;
        border: 1px solid #ddd;
        border-top: none;
        border-radius: 0 0 var(--border-radius) var(--border-radius);
        box-shadow: 0 4px 12px rgba(0,0,0,0.1);
        max-height: 220px;
        overflow-y: auto;
        z-index: 1000;
        display: none;
    }


    .searchable-select-dropdown.show {
        display: block;
    }

    .searchable-option {
        padding: 10px 15px;
        cursor: pointer;
        border-bottom: 1px solid #f8f9fa;
        display: flex;
        justify-content: space-between;
        align-items: center;
        transition: var(--transition);
    }

    .searchable-option:hover {
        background-color: #f8f9fa;
    }

    .option-name {
        font-weight: 500;
        color: #333;
    }

    .option-email {
        font-size: 12px;
        color: #999;
    }

    .option-avatar {
        width: 24px;
        height: 24px;
        border-radius: 50%;
        background-color: var(--primary-color);
        color: white;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 10px;
        margin-right: 10px;
        float: left;
    }

    /* Alert */
    .alert {
        border-radius: var(--border-radius);
        padding: 15px 20px;
        margin-bottom: 20px;
        border: none;
    }

    .alert-success {
        background-color: rgba(40, 167, 69, 0.1);
        color: var(--success-color);
    }

    .alert-info {
        background-color: rgba(23, 162, 184, 0.1);
        color: var(--info-color);
    }

    .alert-danger {
        background-color: rgba(220, 53, 69, 0.1);
        color: var(--danger-color);
    }

    .alert-fixed {
        position: fixed;
        top: 80px;
        right: 20px;
        z-index: 1050;
        width: 300px;
        opacity: 0;
        transform: translateX(100%);
        transition: all 0.5s ease-in-out;
    }

    .alert-fixed.show {
        opacity: 1;
        transform: translateX(0);
    }

    /* Responsive */
    @media (max-width: 768px) {
        .mobile-menu-toggle {
            display: block;
        }
        
        .sidebar-nav {
            transform: translateX(-100%);
            width: 280px;
            z-index: 1001;
        }
        
        .sidebar-nav.show {
            transform: translateX(0);
        }
        
        .content-wrapper {
            margin-left: 0;
        }

        .overlay {
            z-index: 1000;
        }

        .overlay.show {
            display: block;
        }

        .content-header {
            padding: 15px 20px;
            flex-direction: column;
            align-items: flex-start;
        }

        .page-title {
            font-size: 20px;
            margin-bottom: 10px;
        }

        .main-content {
            padding: 20px;
        }

        .form-body {
            padding: 20px;
        }

        .header {
            padding: 0 15px;
        }

        .logo {
            font-size: 18px;
        }

        .logo i {
            font-size: 20px;
        }

        .user-name {
            display: none;
        }
    }
    
    /* Overlay for mobile menu */
    .overlay {
        display: none;
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background-color: rgba(0, 0, 0, 0.5);
        z-index: 998;
    }

    .overlay.show {
        display: block;
    }
    </style>
</head>
<body>
    <!-- Header -->
    <header class="header">
        <button class="mobile-menu-toggle" id="mobileMenuToggle">
            <i class="bi bi-list"></i>
        </button>
        <a href="crmdashboard" class="logo">
            <img src="./assets/logo.png" alt="ConstructCRM Logo" style="height: 60px; width: 85px;">
        </a>
        <div class="header-actions">
            <!-- User Dropdown -->
            <div class="user-dropdown" id="userDropdown">
                <div class="user-profile" id="userProfile">
                    <div class="user-avatar"><?php echo htmlspecialchars(strtoupper(substr($user_name, 0, 1))); ?></div>
                    <span class="user-name"><?php echo htmlspecialchars($user_name); ?></span>
                    
                    <i class="bi bi-chevron-down dropdown-arrow"></i>
                </div>
                <div class="user-dropdown-menu">
                    <a href="profile" class="dropdown-item">
                        <i class="bi bi-person"></i>
                        <span>Profile</span>
                    </a>
                    <a href="settings" class="dropdown-item">
                        <i class="bi bi-gear"></i>
                        <span>Settings</span>
                    </a>
                    <div class="dropdown-divider"></div>
                    <a href="signin?logout=true" class="dropdown-item">
                        <i class="bi bi-box-arrow-right"></i>
                        <span>Logout</span>
                    </a>
                </div>
            </div>
        </div>
    </header>

    <div class="main-container">
        <!-- Overlay for mobile -->
        <div class="overlay" id="overlay"></div>

        <!-- Sidebar Navigation -->
        <nav class="sidebar-nav" id="sidebarNav">
            <div class="nav-section">
                <div class="nav-title">Main</div>
                <ul class="nav-list">
                    <?php if ($user_role === 'Admin'): ?>
                    <li class="nav-item">
                        <a href="crmdashboard" class="nav-link">
                            <i class="bi bi-speedometer2"></i>
                            <span>Dashboard</span>
                        </a>
                    </li>
                    <?php endif; ?>
                    <li class="nav-item">
                        <a href="dashboard" class="nav-link">
                            <i class="bi bi-grid-1x2-fill"></i>
                            <span>Client</span>
                        </a>
                    </li>
                    <li class="nav-item">
                        <a href="projectlist" class="nav-link">
                            <i class="bi bi-list-ul"></i>
                            <span>Project List</span>
                        </a>
                    </li>
                    <li class="nav-item">
                        <a href="designimages" class="nav-link">
                            <i class="bi bi-palette-fill"></i>
                            <span>Design images</span>
                        </a>
                    </li>
                    <li class="nav-item">
                        <a href="assignmentcalendar" class="nav-link">
                            <i class="bi bi-calendar-event-fill"></i>
                            <span>Assignment Calendar</span>
                        </a>
                    </li>
                    <?php if (($_SESSION['user_role'] ?? '') === 'Admin'): ?>
                    <li class="nav-item">
                        <a href="<?= BASE_URL ?>place_order" class="nav-link">
                            <i class="bi bi-cart-check"></i> 
                            <span>Place Order</span>
                        </a>
                    </li>
                    <li class="nav-item">
                        <a href="financetracker" class="nav-link">
                            <i class="bi bi-cash-stack"></i>
                            <span>Finance Tracker</span>
                        </a>
                    </li>
                    <?php endif; ?>
                    <li class="nav-item">
                        <a href="imagepin" class="nav-link">
                            <i class="bi bi-pin-map-fill"></i>
                            <span>Image Pin & Comment</span>
                        </a>
                    </li>
                    <?php if ($user_role === 'Admin'): ?>
                    <li class="nav-item">
                        <a href="designcost" class="nav-link">
                            <i class="bi bi-palette-fill"></i>
                            <span>Designs Cost</span>
                        </a>
                    </li>
                    <?php endif; ?>
                </ul>
            </div>
            
            <div class="nav-section">
                <div class="nav-title">Management</div>
                <ul class="nav-list">
                    <li class="nav-item">
                        <a href="taskmanager" class="nav-link active">
                            <i class="bi bi-check2-square"></i>
                            <span>Task Manager</span>
                        </a>
                    </li>
                    <?php if ($user_role === 'Admin'): ?>
                    <li class="nav-item">
                        <a href="users" class="nav-link">
                            <i class="bi bi-people-fill"></i>
                            <span>Users</span>
                        </a>
                    </li>
                    <?php endif; ?>
                </ul>
            </div>
            
            <div class="nav-section">
                <?php if ($user_role === 'Admin'): ?>
                <div class="nav-title">Vendor Management</div>
                <ul class="nav-list">
                    <li class="nav-item">
                        <a href="addvendors" class="nav-link">
                            <i class="bi bi-person-plus-fill"></i>
                            <span>Add New Vendor</span>
                        </a>
                    </li>
                    <li class="nav-item">
                        <a href="viewvendors" class="nav-link">
                            <i class="bi bi-card-list"></i>
                            <span>View All Vendors</span>
                        </a>
                    </li>
                </ul>
            </div>
            <?php endif; ?>
        </nav>

        <!-- Content Wrapper -->
        <div class="content-wrapper">
            <!-- Content Header -->
            <div class="content-header">
                <h1 class="page-title">Task Manager</h1>
                <nav aria-label="breadcrumb">
                    <ol class="breadcrumb">
                        <li class="breadcrumb-item"><a href="#">Home</a></li>
                        <li class="breadcrumb-item"><a href="#">Management</a></li>
                        <li class="breadcrumb-item active" aria-current="page">Task Manager</li>
                    </ol>
                </nav>
            </div>

            <!-- Main Content -->
            <div class="main-content">
                <!-- Success/Error Message Container -->
                <div id="top-status-message" class="alert-fixed alert d-none" role="alert"></div>

                <!-- Load Project Section for Designer -->


                <!-- Add Task Form (Only Admin can add tasks usually, or allow both? Prompt says "Admin can create and assign". Implies employee might not see this.) -->
                <?php if ($user_role === 'Admin' || $user_role === 'Designer'): ?>


                <div class="task-form-container" id="assignmentFormContainer">
                    <div class="form-header">
                        <h4 class="form-title">
                            <i class="bi bi-plus-circle-fill"></i> Assign New Task
                        </h4>
                    </div>
                    <div class="form-body">
                        <form id="addTaskForm">
                            <div class="row g-3">
                                <div class="col-md-6">
                                    <div class="form-group">
                                        <label for="taskTitle" class="form-label">Task Title</label>
                                        <input type="text" class="form-control" id="taskTitle" placeholder="Enter task title" required>
                                    </div>
                                </div>
                                <div class="col-md-6">
                                    <div class="form-group">
                                        <label for="taskProject" class="form-label">Project</label>
                                        <select class="form-select" id="taskProject" required>
                                            <option value="" selected disabled>Select Project</option>
                                            <?php foreach ($projects as $project): 
                                                // Skip the filter placeholder for assignment
                                                if ($project === 'All Sites') continue;
                                            ?>
                                                <option value="<?php echo htmlspecialchars($project); ?>" <?= ($loaded_project_name === $project) ? 'selected' : '' ?>><?php echo htmlspecialchars($project); ?></option>
                                            <?php endforeach; ?>
                                        </select>
                                    </div>
                                </div>
                                <div class="col-md-4">
                                    <div class="form-group">
                                        <label for="taskPriority" class="form-label">Priority</label>
                                        <select class="form-select" id="taskPriority" required>
                                            <option value="" selected disabled>Select Priority</option>
                                            <option value="High">High</option>
                                            <option value="Medium">Medium</option>
                                            <option value="Low">Low</option>
                                        </select>
                                    </div>
                                </div>
                                <div class="col-md-4">
                                    <div class="form-group">
                                        <label for="taskAssignedTo" class="form-label">Assign To</label>
                                        <!-- Custom Searchable Dropdown -->
                                    <div class="searchable-select-wrapper" id="assignToDropdown">

                                            <input type="text" class="form-control searchable-select-input" id="taskAssignedToDisplay" placeholder="Search employee..." autocomplete="off">
                                            <input type="hidden" id="taskAssignedTo" name="assigned_to" value="">
                                            <input type="hidden" id="taskAssignedToNameFallback" name="assigned_to_name_fallback" value="">
                                            
                                        <div class="searchable-select-dropdown assign-to-dropdown">
                                                <?php if (!empty($employees)): ?>
                                                    <?php foreach ($employees as $emp): ?>
                                                        <div class="searchable-option" data-id="<?php echo $emp['id']; ?>" data-name="<?php echo htmlspecialchars($emp['name']); ?>" data-email="<?php echo htmlspecialchars($emp['email']); ?>">
                                                            <div>
                                                                <span class="option-avatar"><?php echo strtoupper(substr($emp['name'], 0, 1)); ?></span>
                                                                <span class="option-name"><?php echo htmlspecialchars($emp['name']); ?></span>
                                                            </div>
                                                            <span class="option-email"><?php echo htmlspecialchars($emp['email']); ?></span>
                                                        </div>
                                                    <?php endforeach; ?>
                                                <?php else: ?>
                                                    <div class="p-3 text-muted text-center small">No employees found.</div>
                                                <?php endif; ?>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-md-4">
                                    <div class="form-group">
                                        <label for="taskDueDate" class="form-label">Due Date</label>
                                        <input type="date" class="form-control" id="taskDueDate" required>
                                    </div>
                                </div>
                            </div>
                            <div class="form-actions mt-4 d-flex justify-content-end gap-2">
                                <button type="button" class="btn btn-outline-secondary" id="clearBtn">
                                    <i class="bi bi-x-circle"></i> Clear
                                </button>
                                <button type="submit" class="btn btn-primary">
                                    <i class="bi bi-check-circle"></i> Assign Task
                                </button>
                            </div>
                        </form>
                    </div>
                </div>
                <?php endif; ?>

                <!-- Task Table Container -->
                <div class="task-table-container">
                    <div class="table-header">
                        <h4 class="table-title">
                            <i class="bi bi-list-task"></i> Current Tasks
                        </h4>
                        <div class="table-actions">
                            <div class="btn-group" role="group">
                                <button type="button" class="btn btn-sm btn-outline-secondary active" id="allTasksBtn">All</button>
                                <button type="button" class="btn btn-sm btn-outline-secondary" id="pendingTasksBtn">Pending</button>
                                <button type="button" class="btn btn-sm btn-outline-secondary" id="completedTasksBtn">Completed</button>
                            </div>
                        </div>
                    </div>
                    <div class="table-body">
                        <div class="table-responsive">
                            <table class="table table-hover mb-0">
                                <thead class="table-light">
                                    <tr>
                                        <th style="width: 5%;">#</th>
                                        <th style="width: 25%;">Task</th>
                                        <th style="width: 15%;">Project</th>
                                        <th style="width: 15%;">Assigned To</th>
                                        <?php if ($user_role === 'Admin'): ?>
                                        <th style="width: 15%;">Created By</th>
                                        <?php endif; ?>
                                        <th style="width: 10%;">Due Date</th>
                                        <th style="width: 15%; text-align:right;">Actions</th>
                                    </tr>
                                </thead>
                                <tbody id="taskListBody">
                                    <?php if (empty($tasks)): ?>
                                        <tr>
                                            <td colspan="7">
                                                <div class="empty-state">
                                                    <i class="bi bi-clipboard-x"></i>
                                                    <p>No tasks assigned yet.</p>
                                                </div>
                                            </td>
                                        </tr>
                                    <?php else: ?>
                                        <?php foreach ($tasks as $task): ?>
                                        <tr id="task-row-<?= htmlspecialchars($task['id']) ?>" class="task-row <?= ($task['status'] == 'Completed' ? 'completed' : '') ?>" data-status="<?= htmlspecialchars($task['status']) ?>">
                                            <td><?= htmlspecialchars($task['id']) ?></td>
                                            <td>
                                                <div class="d-flex justify-content-between align-items-start">
                                                    <span class="fw-bold"><?= htmlspecialchars($task['title']) ?></span>
                                                    <span class="badge 
                                                        <?php 
                                                            if ($task['priority'] == 'High') echo 'bg-danger';
                                                            else if ($task['priority'] == 'Medium') echo 'bg-warning text-dark';
                                                            else echo 'bg-info';
                                                        ?> 
                                                        priority-badge"><?= htmlspecialchars($task['priority']) ?>
                                                    </span>
                                                </div>
                                            </td>
                                            <td><?= htmlspecialchars($task['project_name']) ?></td>
                                            <td>
                                                <?php 
                                                    $displayName = isset($task['assigned_to_name']) ? $task['assigned_to_name'] : 'Unassigned';
                                                    $initial = strtoupper(substr($displayName, 0, 1));
                                                ?>
                                                <span class="table-avatar"><?= $initial ?></span>
                                                <span class="small align-middle"><?= htmlspecialchars($displayName) ?></span>
                                            </td>
                                            
                                            <?php if ($user_role === 'Admin'): ?>
                                            <td>
                                                <?php 
                                                    $creatorName = isset($task['created_by_name']) ? $task['created_by_name'] : 'Unknown';
                                                ?>
                                                <span class="text-muted small"><?= htmlspecialchars($creatorName) ?></span>
                                            </td>
                                            <?php endif; ?>
                                            
                                            <td><?= htmlspecialchars($task['due_date']) ?></td>
                                            <td class="text-end">
                                                <?php if ($task['status'] !== 'Completed'): ?>
                                                    <button class="btn btn-sm btn-outline-success" onclick="markTaskComplete(<?= htmlspecialchars($task['id']) ?>, '<?= htmlspecialchars(addslashes($task['title'])) ?>')" <?= ($user_role === 'Designer' && $task['assigned_to'] != $user_id && (!$isMasterDesigner || $task['project_name'] !== $loaded_project_name)) ? 'disabled' : '' ?>>
                                                        <i class="bi bi-check"></i> Complete
                                                    </button>
                                                <?php else: ?>
                                                    <span class="text-success fw-bold small me-2"><i class="bi bi-check-all"></i> Done</span>
                                                    <?php if ($user_role === 'Admin'): ?>
                                                    <button class="btn btn-sm btn-outline-danger" onclick="deleteTask(<?= htmlspecialchars($task['id']) ?>, '<?= htmlspecialchars(addslashes($task['title'])) ?>')">
                                                        <i class="bi bi-trash"></i>
                                                    </button>
                                                    <?php endif; ?>
                                                <?php endif; ?>
                                            </td>
                                        </tr>
                                        <?php endforeach; ?>
                                    <?php endif; ?>
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>

    <script>
        // PHP Data for JS
        const currentUserRole = "<?php echo $user_role; ?>";
        const employees = <?php echo json_encode($employees); ?>;

        document.addEventListener('DOMContentLoaded', function () {
            // --- DOM Elements ---
            const mobileMenuToggle = document.getElementById('mobileMenuToggle');
            const sidebarNav = document.getElementById('sidebarNav');
            const overlay = document.getElementById('overlay');
            const userDropdown = document.getElementById('userDropdown');
            const userProfile = document.getElementById('userProfile');
            const addTaskForm = document.getElementById('addTaskForm');
            const clearBtn = document.getElementById('clearBtn');
            const taskListBody = document.getElementById('taskListBody');
            const allTasksBtn = document.getElementById('allTasksBtn');
            const pendingTasksBtn = document.getElementById('pendingTasksBtn');
            const completedTasksBtn = document.getElementById('completedTasksBtn');
            
            // Custom Dropdown Elements
            const assignToWrapper = document.getElementById('assignToDropdown');
            const assignToInput = document.getElementById('taskAssignedToDisplay');
            const assignToHidden = document.getElementById('taskAssignedTo');
            const assignToNameFallback = document.getElementById('taskAssignedToNameFallback');
            const dropdownList = assignToWrapper.querySelector('.searchable-select-dropdown');
            const dropdownOptions = dropdownList.querySelectorAll('.searchable-option');

            // Set today's date as default for due date
            const dateInput = document.getElementById('taskDueDate');
            if (dateInput) dateInput.valueAsDate = new Date();
            
            // --- Functions ---
            const clearForm = () => {
                if (addTaskForm) addTaskForm.reset();
                if (dateInput) dateInput.valueAsDate = new Date();
                // Clear custom dropdown
                assignToInput.value = '';
                assignToHidden.value = '';
                assignToNameFallback.value = '';
            };
            
            const showStatusMessage = (message, type = 'success') => {
                const statusMessage = document.getElementById('top-status-message');
                
                clearTimeout(window.messageTimeout);
                statusMessage.classList.remove('show', 'alert-success', 'alert-danger', 'alert-primary');

                statusMessage.textContent = message;
                statusMessage.classList.add(`alert-${type}`);
                statusMessage.classList.remove('d-none');

                void statusMessage.offsetWidth; 

                statusMessage.classList.add('show');

                window.messageTimeout = setTimeout(() => {
                    statusMessage.classList.remove('show');
                    setTimeout(() => {
                        statusMessage.classList.add('d-none');
                    }, 500);
                }, 5000);
            };
            
            const filterTasks = (status) => {
                const rows = document.querySelectorAll('.task-row');
                
                rows.forEach(row => {
                    if (status === 'all') {
                        row.style.display = '';
                    } else if (status === 'pending' && row.dataset.status !== 'Completed') {
                        row.style.display = '';
                    } else if (status === 'completed' && row.dataset.status === 'Completed') {
                        row.style.display = '';
                    } else {
                        row.style.display = 'none';
                    }
                });
                
                document.querySelectorAll('.btn-group .btn').forEach(btn => btn.classList.remove('active'));
                
                if (status === 'all') allTasksBtn.classList.add('active');
                else if (status === 'pending') pendingTasksBtn.classList.add('active');
                else if (status === 'completed') completedTasksBtn.classList.add('active');
            };
            
            // --- Event Listeners: Mobile ---
            if (mobileMenuToggle) {
                mobileMenuToggle.addEventListener('click', () => {
                    sidebarNav.classList.toggle('show');
                    overlay.classList.toggle('show');
                });
            }
            if (overlay) {
                overlay.addEventListener('click', () => {
                    sidebarNav.classList.remove('show');
                    overlay.classList.remove('show');
                });
            }
            document.querySelectorAll('.nav-link').forEach(link => {
                link.addEventListener('click', () => {
                    if (window.innerWidth <= 768) {
                        sidebarNav.classList.remove('show');
                        overlay.classList.remove('show');
                    }
                });
            });

            // --- User Dropdown (match place_order.php behavior) ---
            if (userDropdown && userProfile) {
                userProfile.addEventListener('click', (e) => {
                    e.stopPropagation();
                    userDropdown.classList.toggle('show');
                });

                document.addEventListener('click', () => {
                    userDropdown.classList.remove('show');
                });
            }
            

            
            // --- Custom Searchable Dropdown Logic ---
            // Prevent broken UI when Assign-to form is not rendered.
            if (assignToWrapper && assignToInput && dropdownList && dropdownOptions) {
                // Show list on focus
                assignToInput.addEventListener('focus', () => {
                    dropdownList.classList.add('show');
                });

                // Filter list on type
                assignToInput.addEventListener('input', (e) => {
                    const val = e.target.value.toLowerCase();
                    dropdownOptions.forEach(opt => {
                        const name = opt.getAttribute('data-name').toLowerCase();
                        const email = opt.getAttribute('data-email').toLowerCase();
                        if (name.includes(val) || email.includes(val)) {
                            opt.style.display = 'flex';
                        } else {
                            opt.style.display = 'none';
                        }
                    });
                });

                // Hide list when clicking outside
                document.addEventListener('click', (e) => {
                    if (!assignToWrapper.contains(e.target)) {
                        dropdownList.classList.remove('show');
                    }
                });

                // Select Option
                dropdownOptions.forEach(opt => {
                    opt.addEventListener('click', () => {
                        const id = opt.getAttribute('data-id');
                        const name = opt.getAttribute('data-name');
                        const email = opt.getAttribute('data-email');

                        assignToInput.value = `${name} (${email})`;
                        assignToHidden.value = id;
                        assignToNameFallback.value = name; // Store name for potential legacy/fallback
                        dropdownList.classList.remove('show');
                    });
                });
            }




            // Form submission
            if (addTaskForm) {
                addTaskForm.addEventListener('submit', function(event) {
                    event.preventDefault();

                    const titleInput = document.getElementById('taskTitle');
                    const projectSelect = document.getElementById('taskProject');
                    const prioritySelect = document.getElementById('taskPriority');
                    const dateInput = document.getElementById('taskDueDate');
                    
                    const title = titleInput.value.trim();
                    const project = projectSelect.value;
                    const priority = prioritySelect.value;
                    const dueDate = dateInput.value;
                    const assignedToId = assignToHidden.value;
                    const assignedToName = assignToNameFallback.value;
                    
                    // Validation
                    if (!title || !project || !priority || !dueDate) {
                        showStatusMessage('Please fill in all required fields.', 'danger');
                        return;
                    }

                    if (!assignedToId) {
                        showStatusMessage('Please select an employee to assign the task.', 'danger');
                        return;
                    }

                    const formData = new FormData();
                    formData.append('action', 'add_task');
                    formData.append('title', title);
                    formData.append('project', project);
                    formData.append('priority', priority);
                    formData.append('assigned_to', assignedToId);
                    formData.append('assigned_to_name_fallback', assignedToName);
                    formData.append('due_date', dueDate);

                    fetch('taskmanager.php', {
                        method: 'POST',
                        body: formData
                    })
                    .then(response => response.json())
                    .then(data => {
                        if (data.success) {
                            const task = data.task;
                            const newId = task.id;
                            let priorityClass = task.priority === 'High' ? 'bg-danger' : (task.priority === 'Medium' ? 'bg-warning text-dark' : 'bg-info');
                            
                            // Clean empty state if exists
                            const emptyState = taskListBody.querySelector('.empty-state');
                            if(emptyState) {
                                taskListBody.innerHTML = '';
                            }

                            const assignedName = task.assigned_to_name || assignedToName;
                            const initial = assignedName.charAt(0).toUpperCase();
                            const createdBy = task.created_by_name || 'You';

                            // Build Row HTML
                            let rowHtml = `
                                <tr id="task-row-${newId}" class="task-row" data-status="Pending">
                                    <td>${newId}</td>
                                    <td>
                                        <div class="d-flex justify-content-between align-items-start">
                                            <span class="fw-bold">${title}</span>
                                            <span class="badge ${priorityClass} priority-badge">${task.priority}</span>
                                        </div>
                                    </td>
                                    <td>${project}</td>
                                    <td>
                                        <span class="table-avatar">${initial}</span>
                                        <span class="small align-middle">${assignedName}</span>
                                    </td>
                            `;
                            
                            if (currentUserRole === 'Admin') {
                                rowHtml += `<td><span class="text-muted small">${createdBy}</span></td>`;
                            }
                            
                            rowHtml += `
                                    <td>${dueDate}</td>
                                    <td class="text-end">
                                        <button class="btn btn-sm btn-outline-success" onclick="markTaskComplete(${newId}, '${title.replace(/'/g, "\\'")}')">
                                            <i class="bi bi-check"></i> Complete
                                        </button>
                                    </td>
                                </tr>
                            `;

                            taskListBody.insertAdjacentHTML('afterbegin', rowHtml);
                            clearForm();
                            showStatusMessage(`Task assigned to ${assignedName}!`, 'success');
                        } else {
                            showStatusMessage('Error: ' + data.message, 'danger');
                        }
                    })
                    .catch(error => {
                        showStatusMessage('Error: ' + error.message, 'danger');
                    });
                });
            }
            
            if (clearBtn) clearBtn.addEventListener('click', clearForm);
            
            if (allTasksBtn) allTasksBtn.addEventListener('click', () => filterTasks('all'));
            if (pendingTasksBtn) pendingTasksBtn.addEventListener('click', () => filterTasks('pending'));
            if (completedTasksBtn) completedTasksBtn.addEventListener('click', () => filterTasks('completed'));
        });
        
        // Global functions for task actions
        function markTaskComplete(taskId, taskTitle) {
            const formData = new FormData();
            formData.append('action', 'complete_task');
            formData.append('task_id', taskId);

            fetch('taskmanager.php', {
                method: 'POST',
                body: formData
            })
            .then(response => response.json())
            .then(data => {
                if (data.success) {
                    const row = document.getElementById('task-row-' + taskId);
                    if (row) {
                        row.classList.add('completed');
                        row.dataset.status = 'Completed';
                        
                        // Find the actions cell (last cell)
                        const cells = row.querySelectorAll('td');
                        const actionCell = cells[cells.length - 1]; 
                        
                        let newActions = `<span class="text-success fw-bold small me-2"><i class="bi bi-check-all"></i> Done</span>`;
                        
                        // Only Admin can delete
                        if (currentUserRole === 'Admin') {
                            newActions += `
                            <button class="btn btn-sm btn-outline-danger" onclick="deleteTask(${taskId}, '${taskTitle.replace(/'/g, "\\'")}')">
                                <i class="bi bi-trash"></i>
                            </button>`;
                        }
                        
                        actionCell.innerHTML = newActions;
                        showStatusMessage(`Task "${taskTitle}" marked as completed!`, 'success');
                    }
                } else {
                    showStatusMessage('Error: ' + data.message, 'danger');
                }
            })
            .catch(error => {
                showStatusMessage('Error: ' + error.message, 'danger');
            });
        }
        
        function deleteTask(taskId, taskTitle) {
            if (!confirm(`Delete task "${taskTitle}"?`)) return;
            
            const formData = new FormData();
            formData.append('action', 'delete_task');
            formData.append('task_id', taskId);

            fetch('taskmanager.php', {
                method: 'POST',
                body: formData
            })
            .then(response => response.json())
            .then(data => {
                if (data.success) {
                    const row = document.getElementById('task-row-' + taskId);
                    if (row) {
                        row.remove();
                        
                        // Check if empty
                        const tbody = document.getElementById('taskListBody');
                        if(tbody.querySelectorAll('tr').length === 0) {
                            tbody.innerHTML = `
                                <tr>
                                    <td colspan="7">
                                        <div class="empty-state">
                                            <i class="bi bi-clipboard-x"></i>
                                            <p>No tasks assigned yet.</p>
                                        </div>
                                    </td>
                                </tr>
                            `;
                        }
                        
                        showStatusMessage(`Task "${taskTitle}" deleted.`, 'success');
                    }
                } else {
                    showStatusMessage('Error: ' + data.message, 'danger');
                }
            })
            .catch(error => {
                showStatusMessage('Error: ' + error.message, 'danger');
            });
        }
    </script>
</body>
</html>