zkt26/z2/frontend/generovanie_karticiek.js

const emptyMessage = document.getElementById("emptyMessage");
const cardContainer = document.getElementById("cardContainer");
const addCardBtn = document.getElementById("addCardBtn");
const taskModal = document.getElementById("taskModal");
const saveTaskBtn = document.getElementById("saveTaskBtn");
const cancelTaskBtn = document.getElementById("cancelTaskBtn");
const filterDate = document.getElementById("filterDate");
const loggedUser = document.getElementById("loggedUser");

let tasks = [];

function formatDate(isoDate) {
    if (!isoDate) return "bez termínu";
    return new Date(isoDate).toLocaleDateString("sk-SK", {
        day: "2-digit",
        month: "2-digit",
        year: "numeric"
    });
}

function updateEmptyVisibility() {
    if (tasks.length === 0) {
        emptyMessage.classList.remove("hidden");
    } else {
        emptyMessage.classList.add("hidden");
    }
}

function createCard(task) {
    const card = document.createElement("div");
    card.className = "p-6 rounded-xl shadow-md border hover:shadow-lg transition-all duration-200";
    card.dataset.deadline = task.deadline || "";
    card.dataset.id = task.id;

    if (task.status) {
        card.classList.add("bg-green-100", "border-green-200");
    } else {
        card.classList.add("bg-yellow-100", "border-yellow-200");
    }

    card.innerHTML = `
        <h3 class="font-bold text-lg mb-2 text-gray-800">${task.title}</h3>
        <p class="text-gray-700 mb-4">${task.description}</p>
        <p class="text-sm text-gray-600 mb-5">Termín: ${formatDate(task.deadline)}</p>

        <div class="flex items-center justify-between">
            <div class="flex items-center">
                <input type="checkbox" class="task-checkbox h-5 w-5 text-green-600 rounded border-gray-300 focus:ring-green-500" ${task.status ? "checked" : ""}>
                <label class="ml-2 text-sm text-gray-700 cursor-pointer">Hotovo</label>
            </div>

            <button class="delete-btn px-5 py-2 bg-red-600 text-white text-sm rounded-lg hover:bg-red-700 transition">
                Zmazať
            </button>
        </div>
    `;

    const checkbox = card.querySelector(".task-checkbox");
    checkbox.addEventListener("change", async () => {
        const newValue = checkbox.checked ? 1 : 0;

        try {
            const response = await fetch(`/api/tasks/${task.id}/toggle`, {
                method: "PATCH",
                headers: {
                    "Content-Type": "application/json"
                },
                body: JSON.stringify({ status: newValue })
            });

            if (!response.ok) {
                console.error("PATCH neprešiel:", response.status);
                checkbox.checked = !checkbox.checked;
                return;
            }

            task.status = newValue;

            card.classList.remove(
                "bg-yellow-100",
                "border-yellow-200",
                "bg-green-100",
                "border-green-200"
            );

            if (newValue) {
                card.classList.add("bg-green-100", "border-green-200");
            } else {
                card.classList.add("bg-yellow-100", "border-yellow-200");
            }
        } catch (error) {
            console.error("Chyba fetchu:", error);
            checkbox.checked = !checkbox.checked;
        }
    });

    const deleteBtn = card.querySelector(".delete-btn");
    deleteBtn.addEventListener("click", async () => {
        try {
            const response = await fetch(`/api/tasks/${task.id}`, {
                method: "DELETE"
            });

            if (response.ok) {
                tasks = tasks.filter(t => t.id !== task.id);
                renderTasks();
            }
        } catch (error) {
            console.error("Chyba pri mazaní úlohy:", error);
        }
    });

    cardContainer.appendChild(card);
}

function renderTasks() {
    const order = filterDate.value;

    const sortedTasks = [...tasks].sort((a, b) => {
        const da = a.deadline ? new Date(a.deadline) : new Date("9999-12-31");
        const db = b.deadline ? new Date(b.deadline) : new Date("9999-12-31");
        return order === "asc" ? da - db : db - da;
    });

    cardContainer.innerHTML = "";
    sortedTasks.forEach(createCard);
    updateEmptyVisibility();
}

function showModal() {
    taskModal.classList.remove("hidden");
    document.getElementById("taskTitle").value = "";
    document.getElementById("taskDescription").value = "";
    document.getElementById("taskDeadline").value = "";
}

function hideModal() {
    taskModal.classList.add("hidden");
}

async function loadUser() {
    try {
        const response = await fetch("/api/me");

        if (!response.ok) {
            window.location.href = "/login.html";
            return;
        }

        const user = await response.json();
        loggedUser.textContent = `Prihlásený ako: ${user.username}`;
    } catch (error) {
        console.error("Chyba pri načítaní používateľa:", error);
        window.location.href = "/login.html";
    }
}

async function loadTasks() {
    try {
        const response = await fetch("/api/tasks");

        if (!response.ok) {
            window.location.href = "/login.html";
            return;
        }

        tasks = await response.json();
        renderTasks();
    } catch (error) {
        console.error("Chyba pri načítaní úloh:", error);
    }
}

addCardBtn.addEventListener("click", showModal);
cancelTaskBtn.addEventListener("click", hideModal);

saveTaskBtn.addEventListener("click", async () => {
    const title = document.getElementById("taskTitle").value.trim();
    const description = document.getElementById("taskDescription").value.trim();
    const deadline = document.getElementById("taskDeadline").value;

    if (!title || !description || !deadline) {
        return;
    }

    try {
        const response = await fetch("/api/tasks", {
            method: "POST",
            headers: {
                "Content-Type": "application/json"
            },
            body: JSON.stringify({ title, description, deadline })
        });

        if (response.ok) {
            const newTask = await response.json();
            tasks.push(newTask);
            renderTasks();
            hideModal();
        }
    } catch (error) {
        console.error("Chyba pri pridávaní úlohy:", error);
    }
});

filterDate.addEventListener("change", renderTasks);

loadUser();
loadTasks();