document.querySelectorAll(".editable").forEach(el => {

    el.addEventListener("click", function () {

        const oldValue = this.innerText;
        const field = this.dataset.field;
        const card = this.closest(".shortcut");
        const id = card.dataset.id;

        const input = document.createElement("input");
        input.value = oldValue;
        input.className = "form-control";

        this.replaceWith(input);
        input.focus();

        input.addEventListener("blur", function () {

            const newValue = this.value;

            fetch("updateShortcut.php", {
                method: "POST",
                headers: {
                    'Content-Type': 'application/json'
                },
                body: JSON.stringify({
                    id: id,
                    field: field,
                    value: newValue
                })
            });

            const span = document.createElement("span");
            span.className = "editable";
            span.dataset.field = field;
            span.innerText = newValue;

            input.replaceWith(span);

        });

    });

});

document.querySelectorAll(".editable-image").forEach(img => {

    img.addEventListener("click", function () {

        let url = "./Assets/Logos/";
        url += prompt("Nouvelle image (URL ou chemin local):", this.src);

        if (!url) return;

        const card = this.closest(".shortcut");
        const id = card.dataset.id;

        fetch("updateShortcut.php", {
            method: "POST",
            headers: {
                'Content-Type': 'application/json'
            },
            body: JSON.stringify({
                id: id,
                field: "image",
                value: url
            })
        });

        this.src = url;

    });

});