{% extends 'base.html' %}

{% block title %}Tasks{% endblock %}

{% block content %}
<h1>Manage Tasks</h1>
<form id="taskForm" onsubmit="event.preventDefault(); addTask();">
    <input type="text" id="task_name" placeholder="Task Name" required>
    <input type="text" id="priority" placeholder="Priority" required>
    <input type="text" id="assignee" placeholder="Assignee" required>
    <textarea id="description" placeholder="Description" required></textarea>
    <input type="date" id="task_end_date" required>
    <button type="submit">Add Task</button>
</form>

<h2>Tasks</h2>
<table id="taskTable">
    <thead>
        <tr>
            <th>Task ID</th>
            <th>Task Name</th>
            <th>Priority</th>
            <th>Assignee</th>
            <th>Description</th>
            <th>Start Date</th>
            <th>End Date</th>
            <th>Updated Date</th>
            <th>Updated Count</th>
            <th>Actions</th>
        </tr>
    </thead>
    <tbody>
        {% for task in tasks %}
        <tr id="task-{{ task[0] }}">
            <td contenteditable="false">{{ task[0] }}</td> <!-- task_id non-editable -->
            <td>{{ task[1] }}</td>
            <td>{{ task[2] }}</td>
            <td>{{ task[3] }}</td>
            <td>{{ task[4] }}</td>
            <td>{{ task[5] }}</td>
            <td>{{ task[6] }}</td>
            <td contenteditable="false">{{ task[7] }}</td> <!-- updated_date non-editable -->
            <td contenteditable="false">{{ task[8] }}</td> <!-- updated_count non-editable -->
            <td>
                <button onclick="editTask({{ task[0] }})">Edit</button>
                <button onclick="deleteTask({{ task[0] }})">Delete</button>
            </td>
        </tr>
        {% endfor %}
    </tbody>
</table>
    
{% endblock %}

{% block scripts %}

<script>
    // Define editable fields (task_name, priority, assignee, description, task_start_date, task_end_date)
    const editableFields = ['task_name', 'priority', 'assignee', 'description', 'task_start_date', 'task_end_date'];

    function addTask() {
        const taskName = document.getElementById('task_name').value;
        const priority = document.getElementById('priority').value;
        const assignee = document.getElementById('assignee').value;
        const description = document.getElementById('description').value;
        const taskEndDate = document.getElementById('task_end_date').value;
        const taskStartDate = new Date().toISOString().split('T')[0];  // Set the current date as the start date

        const formData = new FormData();
        formData.append('task_name', taskName);
        formData.append('priority', priority);
        formData.append('assignee', assignee);
        formData.append('description', description);
        formData.append('task_end_date', taskEndDate);
        formData.append('task_start_date', taskStartDate);

        fetch('/add_task', {
            method: 'POST',
            body: formData
        })
        .then(response => response.json())
        .then(data => {
            if (data.status === 'success') {
                const task = data.task;
                const taskTable = document.getElementById('taskTable');
                const newRow = taskTable.insertRow();
                newRow.id = 'task-' + task.id;

                // Create new row based on editable fields
                let rowHTML = `
                    <td contenteditable="false">${task.id}</td> <!-- task_id non-editable -->
                `;
                for (const field of editableFields) {
                    rowHTML += `<td contenteditable="true">${task[field]}</td>`;
                }
                rowHTML += `
                    <td contenteditable="false">${task.updated_date || ''}</td> <!-- updated_date non-editable -->
                    <td contenteditable="false">${task.updated_count || 0}</td> <!-- updated_count non-editable -->
                    <td>
                        <button onclick="editTask(${task.id})">Edit</button>
                        <button onclick="deleteTask(${task.id})">Delete</button>
                    </td>
                `;
                newRow.innerHTML = rowHTML;

                // Clear input fields
                document.getElementById('task_name').value = '';
                document.getElementById('priority').value = '';
                document.getElementById('assignee').value = '';
                document.getElementById('description').value = '';
                document.getElementById('task_end_date').value = '';
            }
        })
        .catch(error => alert('Error: ' + error));
    }

    function editTask(taskId) {
        const row = document.getElementById('task-' + taskId);
        const cells = row.getElementsByTagName('td');

        // Disable the "Update" button initially
        const editButton = row.querySelector('button');
        editButton.textContent = 'Update';
        editButton.disabled = true;  // Disable the button initially
        editButton.setAttribute('onclick', '');  // Remove the old click handler

        // Toggle contenteditable for all fields based on editableFields
        for (let i = 1; i < editableFields.length + 1; i++) {
            cells[i].setAttribute('contenteditable', 'true');
        }

        // Add an event listener to detect changes in any of the editable fields
        row.addEventListener('input', function() {
            // Check if any field is modified
            let modified = false;
            for (let i = 1; i < editableFields.length + 1; i++) {
                if (cells[i].innerText !== cells[i].getAttribute('data-original')) {
                    modified = true;
                    break;
                }
            }

            // Enable the "Update" button if any field is modified
            if (modified) {
                editButton.disabled = false;
                editButton.setAttribute('onclick', `updateTask(${taskId})`);
            } else {
                editButton.disabled = true;
            }
        });

        // Store the original values of the fields to compare when a modification occurs
        for (let i = 1; i < editableFields.length + 1; i++) {
            cells[i].setAttribute('data-original', cells[i].innerText);
        }
    }

    function updateTask(taskId) {
        const row = document.getElementById('task-' + taskId);
        const cells = row.getElementsByTagName('td');

        // Get current updated_count value from the table (do not increment here)
        let updatedCount = parseInt(cells[8].innerText) || 0;  // Ensure it's a number, fallback to 0 if undefined

        const updatedTaskData = {
            task_id: taskId,
            task_name: cells[1].innerText,
            priority: cells[2].innerText,
            assignee: cells[3].innerText,
            description: cells[4].innerText,
            task_start_date: cells[5].innerText,  // Include start date from the table
            task_end_date: cells[6].innerText,
            updated_date: new Date().toISOString(), // Use current timestamp for updated_date
            updated_count: updatedCount  // Send current updated_count (do not increment here)
        };

        const formData = new FormData();
        formData.append('task_id', updatedTaskData.task_id);
        formData.append('task_name', updatedTaskData.task_name);
        formData.append('priority', updatedTaskData.priority);
        formData.append('assignee', updatedTaskData.assignee);
        formData.append('description', updatedTaskData.description);
        formData.append('task_start_date', updatedTaskData.task_start_date);  // Include start date in the update
        formData.append('task_end_date', updatedTaskData.task_end_date);
        formData.append('updated_date', updatedTaskData.updated_date);  // Include updated_date in the update
        formData.append('updated_count', updatedTaskData.updated_count);  // Send current updated_count

        fetch('/update_task', {
            method: 'POST',
            body: formData
        })
        .then(response => response.json())
        .then(data => {
            if (data.status === 'success') {
                const updatedTask = data.task;

                // After updating, make the fields non-editable
                for (let i = 1; i < editableFields.length + 1; i++) {
                    cells[i].setAttribute('contenteditable', 'false');
                }

                // Change Update button back to Edit button
                const updateButton = row.querySelector('button');
                updateButton.textContent = 'Edit';
                updateButton.setAttribute('onclick', `editTask(${updatedTask.id})`);
                updateButton.disabled = false; // Re-enable the "Edit" button

                // Update task data in the table (including incremented updated_count from backend)
                row.innerHTML = `
                    <td contenteditable="false">${updatedTask.id}</td> <!-- task_id non-editable -->
                    <td>${updatedTask.task_name}</td>
                    <td>${updatedTask.priority}</td>
                    <td>${updatedTask.assignee}</td>
                    <td>${updatedTask.description}</td>
                    <td>${updatedTask.task_start_date}</td>
                    <td>${updatedTask.task_end_date}</td>
                    <td contenteditable="false">${updatedTask.updated_date}</td> <!-- updated_date non-editable -->
                    <td contenteditable="false">${updatedTask.updated_count}</td> <!-- updated_count non-editable -->
                    <td>
                        <button onclick="editTask(${updatedTask.id})">Edit</button>
                        <button onclick="deleteTask(${updatedTask.id})">Delete</button>
                    </td>
                `;
            }
        })
        .catch(error => alert('Error: ' + error));
    }

    // Function to delete a task from the database
    function deleteTask(taskId) {
        const formData = new FormData();
        formData.append('task_id', taskId);

        fetch('/delete_task', {
            method: 'POST',
            body: formData
        })
        .then(response => response.json())
        .then(data => {
            if (data.status === 'success') {
                document.getElementById('task-' + taskId).remove();
            }
        })
        .catch(error => alert('Error: ' + error));
    }
    </script>

{% endblock %}