<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>To-Do List</title>
    <style>
        body {
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            background: linear-gradient(135deg, #2b2d42, #8d99ae);
            margin: 0;
            padding: 0;
            display: flex;
            justify-content: center;
            align-items: center;
            min-height: 100vh;
            color: #edf2f4;
        }
        #login, #app {
            background-color: #2b2d42;
            box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
            border-radius: 12px;
            width: 90%;
            max-width: 800px;
            padding: 30px;
            display: none;
            color: #edf2f4;
        }
        #login.active, #app.active {
            display: block;
        }
        h1, h2 {
            text-align: center;
            color: #ef233c;
        }
        #controls input, #controls button, #login input, #login button {
            width: 100%;
            padding: 12px;
            margin-bottom: 12px;
            border: 1px solid #8d99ae;
            border-radius: 6px;
            background: #edf2f4;
            color: #2b2d42;
        }
        #controls button, #login button, #user-info button {
            background: linear-gradient(135deg, #ef233c, #d90429);
            color: white;
            border: none;
            cursor: pointer;
            transition: background 0.3s ease;
        }
        #controls button:hover, #login button:hover, #user-info button:hover {
            background: linear-gradient(135deg, #d90429, #ef233c);
        }
        #todo-list {
            list-style-type: none;
            padding: 0;
        }
        .todo-item {
            display: flex;
            justify-content: space-between;
            align-items: center;
            border: 1px solid #8d99ae;
            padding: 15px;
            margin-bottom: 10px;
            border-radius: 6px;
            background-color: #edf2f4;
            color: #2b2d42;
            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
            transition: transform 0.2s ease;
        }
        .todo-item:hover {
            transform: scale(1.02);
        }
        .todo-item.completed {
            text-decoration: line-through;
            color: #8d99ae;
        }
        .todo-actions button {
            margin-right: 5px;
            padding: 8px 12px;
            border: none;
            border-radius: 6px;
            cursor: pointer;
            transition: opacity 0.3s ease;
        }
        .todo-actions button.edit {
            background-color: #3a86ff;
            color: white;
        }
        .todo-actions button.delete {
            background-color: #ef233c;
            color: white;
        }
        .todo-actions button.complete {
            background-color: #8338ec;
            color: white;
        }
        .todo-actions button:hover {
            opacity: 0.9;
        }
        #user-info {
            display: flex;
            justify-content: space-between;
            align-items: center;
        }
        #user-info span {
            margin-right: 10px;
        }
        #header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 20px;
        }
        #controls h2 {
            margin-bottom: 10px;
        }
        #main-content {
            display: flex;
            flex-direction: column;
            gap: 20px;
        }
        @media(min-width: 768px) {
            #main-content {
                flex-direction: row;
            }
        }
        #controls, #task-display {
            flex: 1;
        }
    </style>
</head>
<body>
    <div id="login" class="active">
        <h2>Login</h2>
        <input type="text" id="username" placeholder="Enter your username">
        <button onclick="login()">Login</button>
    </div>
    
    <div id="app">
        <div id="header">
            <h1>To-Do List</h1>
            <div id="user-info">
                <span id="welcome-message">Welcome, User</span>
                <button onclick="logout()">Logout</button>
            </div>
        </div>
        
        <div id="main-content">
            <div id="task-display">
                <h2>To-Do List</h2>
                <ul id="todo-list"></ul>
            </div>
            <div id="controls">
                <h2>Add New Task</h2>
                <input type="text" id="new-task-name" placeholder="Task Name">
                <input type="text" id="new-task-category" placeholder="Category">
                <input type="date" id="new-task-start-date">
                <input type="date" id="new-task-end-date">
                <button onclick="addTask()">Add Task</button>

                <h2>Sort Tasks</h2>
                <button onclick="sortTasks('startDate')">Sort by Start Date</button>
                <button onclick="sortTasks('endDate')">Sort by End Date</button>
                <button onclick="sortTasks('realEndDate')">Sort by Real End Date</button>

                <h2>Filter Tasks</h2>
                <input type="date" id="filter-start-date" placeholder="Filter by Start Date">
                <input type="date" id="filter-end-date" placeholder="Filter by End Date">
                <input type="date" id="filter-real-end-date" placeholder="Filter by Real End Date">
                <button onclick="filterTasks()">Apply Filters</button>

                <h2>Search Tasks</h2>
                <input type="text" id="search-task-name" placeholder="Search Task Name">
                <button onclick="searchTasks()">Search</button>
            </div>
        </div>
    </div>

    <script>
        let tasks = [];
        let currentUsername = '';

        function loadTasks() {
            const storedTasks = localStorage.getItem(currentUsername + '-tasks');
            if (storedTasks) {
                tasks = JSON.parse(storedTasks);
            } else {
                tasks = [];
            }
            renderTasks();
        }

        function saveTasks() {
            localStorage.setItem(currentUsername + '-tasks', JSON.stringify(tasks));
        }

        function renderTasks(filteredTasks = null) {
            const todoList = document.getElementById('todo-list');
            todoList.innerHTML = '';
            const today = new Date().toISOString().split('T')[0];
            let count = 0;

            const taskArray = filteredTasks ? filteredTasks : tasks;
            taskArray.forEach((task, index) => {
                if (count >= 10) return;

                if (task.startDate >= today) {
                    const li = document.createElement('li');
                    li.className = 'todo-item';
                    if (task.completed) {
                        li.classList.add('completed');
                    }

                    const taskInfo = document.createElement('div');
                    taskInfo.textContent = `${task.name} (Category: ${task.category}, Start: ${task.startDate}, End: ${task.endDate})`;

                    const actions = document.createElement('div');
                    actions.className = 'todo-actions';

                    const editButton = document.createElement('button');
                    editButton.textContent = 'Edit';
                    editButton.className = 'edit';
                    editButton.onclick = () => editTask(index);

                    const deleteButton = document.createElement('button');
                    deleteButton.textContent = 'Delete';
                    deleteButton.className = 'delete';
                    deleteButton.onclick = () => deleteTask(index);

                    const completeButton = document.createElement('button');
                    completeButton.textContent = 'Complete';
                    completeButton.className = 'complete';
                    completeButton.onclick = () => completeTask(index);

                    actions.appendChild(editButton);
                    actions.appendChild(deleteButton);
                    actions.appendChild(completeButton);

                    li.appendChild(taskInfo);
                    li.appendChild(actions);

                    todoList.appendChild(li);

                    count++;
                }
            });
        }

        function addTask() {
            const name = document.getElementById('new-task-name').value;
            const category = document.getElementById('new-task-category').value;
            const startDate = document.getElementById('new-task-start-date').value;
            const endDate = document.getElementById('new-task-end-date').value;

            if (name && category && startDate && endDate) {
                tasks.push({ name, category, startDate, endDate, completed: false });
                renderTasks();
                saveTasks();
                document.getElementById('new-task-name').value = '';
                document.getElementById('new-task-category').value = '';
                document.getElementById('new-task-start-date').value = '';
                document.getElementById('new-task-end-date').value = '';
            } else {
                alert('Please fill in all fields');
            }
        }

        function editTask(index) {
            const newName = prompt('Enter new task name:', tasks[index].name);
            const newCategory = prompt('Enter new category:', tasks[index].category);
            const newStartDate = prompt('Enter new start date:', tasks[index].startDate);
            const newEndDate = prompt('Enter new end date:', tasks[index].endDate);

            if (newName && newCategory && newStartDate && newEndDate) {
                tasks[index].name = newName;
                tasks[index].category = newCategory;
                tasks[index].startDate = newStartDate;
                tasks[index].endDate = newEndDate;
                renderTasks();
                saveTasks();
            }
        }

        function deleteTask(index) {
            tasks.splice(index, 1);
            renderTasks();
            saveTasks();
        }

        function completeTask(index) {
            tasks[index].completed = true;
            tasks[index].realEndDate = new Date().toISOString().split('T')[0];
            renderTasks();
            saveTasks();
        }

        function sortTasks(criterion) {
            tasks.sort((a, b) => (a[criterion] > b[criterion] ? 1 : -1));
            renderTasks();
            saveTasks();
        }

        function filterTasks() {
            const filterStartDate = document.getElementById('filter-start-date').value;
            const filterEndDate = document.getElementById('filter-end-date').value;
            const filterRealEndDate = document.getElementById('filter-real-end-date').value;

            const filteredTasks = tasks.filter(task => {
                return (
                    (!filterStartDate || task.startDate === filterStartDate) &&
                    (!filterEndDate || task.endDate === filterEndDate) &&
                    (!filterRealEndDate || task.realEndDate === filterRealEndDate)
                );
            });

            renderTasks(filteredTasks);
        }

        function searchTasks() {
            const searchTaskName = document.getElementById('search-task-name').value.toLowerCase();
            const filteredTasks = tasks.filter(task => task.name.toLowerCase().includes(searchTaskName));
            renderTasks(filteredTasks);
        }

        function login() {
            currentUsername = document.getElementById('username').value;
            if (currentUsername) {
                document.getElementById('login').classList.remove('active');
                document.getElementById('app').classList.add('active');
                document.getElementById('welcome-message').textContent = `Welcome, ${currentUsername}`;
                loadTasks();
            } else {
                alert('Please enter a username');
            }
        }

        function logout() {
            document.getElementById('app').classList.remove('active');
            document.getElementById('login').classList.add('active');
            currentUsername = '';
        }
    </script>
</body>
</html>
