script.js

let tasks = JSON.parse(localStorage.getItem("tasks")) || [];

function saveTasks() {
    localStorage.setItem("tasks", JSON.stringify(tasks));
}

// Add task
function addTask() {
    let name = document.getElementById("taskName").value;
    let date = document.getElementById("taskDate").value;

    if (name === "" || date === "") {
        alert("Enter task & date!");
        return;
    }

    tasks.push({ name, date, status: "Pending" });
    saveTasks();

    document.getElementById("taskName").value = "";
    document.getElementById("taskDate").value = "";

    loadTasks();
}

// Mark complete
function completeTask(i) {
    tasks[i].status = "Completed";
    saveTasks();
    loadTasks();
}

// Delete
function deleteTask(i) {
    tasks.splice(i, 1);
    saveTasks();
    loadTasks();
}

// Edit
function editTask(i) {
    let newName = prompt("Enter new task name:", tasks[i].name);
    let newDate = prompt("Enter new date (YYYY-MM-DD):", tasks[i].date);

    if (newName && newDate) {
        tasks[i].name = newName;
        tasks[i].date = newDate;
        saveTasks();
        loadTasks();
    }
}

// Filters + Search + Sorting
function loadTasks() {
    let table = document.getElementById("taskTable");
    let filter = document.getElementById("filter").value;
    let search = document.getElementById("searchBar").value.toLowerCase();
    let sort = document.getElementById("sort").value;

    let list = tasks.filter(t => {
        if (filter === "pending" && t.status !== "Pending") return false;
        if (filter === "completed" && t.status !== "Completed") return false;
        if (!t.name.toLowerCase().includes(search)) return false;
        return true;
    });

    if (sort === "oldest") {
        list.sort((a, b) => a.date.localeCompare(b.date));
    } else if (sort === "newest") {
        list.sort((a, b) => b.date.localeCompare(a.date));
    }

    table.innerHTML = "";

    list.forEach((task, i) => {
        table.innerHTML += `
            <tr>
                <td>${i + 1}</td>
                <td>${task.name}</td>
                <td>${task.date}</td>
                <td class="${task.status === 'Completed' ? 'status-completed' : 'status-pending'}">${task.status}</td>
                <td>
                    <button class="action-btn complete-btn" onclick="completeTask(${i})">✔</button>
                    <button class="action-btn edit-btn" onclick="editTask(${i})">✏️</button>
                    <button class="action-btn delete-btn" onclick="deleteTask(${i})">🗑</button>
                </td>
            </tr>
        `;
    });
}

// Dark Mode
function toggleDarkMode() {
    document.body.classList.toggle("dark");
}

loadTasks();