product.js

document.addEventListener("DOMContentLoaded", function () {
    // плус/минус копче кај количина на продукт
    document.getElementById("name").focus();

    document.getElementById("minus-btn").addEventListener("click", function () {
        var input = document.getElementById("stock_quantity");
        var value = parseInt(input.value);
        if (!isNaN(value) && value > 0) {
            input.value = value - 1;
        }
        updateColorCheckboxValidity();
        updateCheckboxValidity();
    });

    document.getElementById("plus-btn").addEventListener("click", function () {
        var input = document.getElementById("stock_quantity");
        var value = parseInt(input.value);
        if (!isNaN(value)) {
            input.value = value + 1;
        }
        updateColorCheckboxValidity();
        updateCheckboxValidity();
    });

    // чек боксовите за боја
    const colorCheckboxes = document.querySelectorAll(".color-checkbox-input");
    colorCheckboxes.forEach(function (checkbox) {
        checkbox.addEventListener("change", function () {
            const label = this.nextElementSibling;
            if (this.checked) {
                label.classList.add("checked");
            } else {
                label.classList.remove("checked");
            }
            updateColorCheckboxValidity();
            updateCheckboxValidity();
        });
    });

    const sizeCheckboxes = document.querySelectorAll(".size-checkbox-input");
    sizeCheckboxes.forEach(function (checkbox) {
        checkbox.addEventListener("change", function () {
            updateCheckboxValidity();
        });
    });

    function updateCheckboxValidity() {
        const stockQuantity = parseInt(
            document.getElementById("stock_quantity").value
        );

        // Проверка за боите
        const checkedColorCheckboxes = document.querySelectorAll(
            ".color-checkbox-input:checked"
        );
        if (checkedColorCheckboxes.length > stockQuantity) {
            checkedColorCheckboxes.forEach(function (checkbox) {
                checkbox.checked = false;
                checkbox.nextElementSibling.classList.remove("checked");
            });
        }

        // Проверка за величините
        const checkedSizeCheckboxes = document.querySelectorAll(
            ".size-checkbox-input:checked"
        );
        if (checkedSizeCheckboxes.length > stockQuantity) {
            checkedSizeCheckboxes.forEach(function (checkbox) {
                checkbox.checked = false;
                checkbox.nextElementSibling.classList.remove("checked");
            });
        }

        const uncheckedSizeCheckboxes = document.querySelectorAll(
            ".size-checkbox-input:not(:checked)"
        );

        uncheckedSizeCheckboxes.forEach(function (checkbox) {
            checkbox.disabled = checkedSizeCheckboxes.length >= stockQuantity;
            if (checkbox.disabled) {
                const messageElement = document.querySelector(
                    ".stock_quantity_exceeded_for_sizes"
                );
                messageElement.innerText = `Максимален број на различни величини е достигнат. (Количина ${
                    document.getElementById("stock_quantity").value
                })`;
            } else {
                checkbox.nextElementSibling.style.backgroundColor = "";
                document.querySelector(
                    ".stock_quantity_exceeded_for_sizes"
                ).innerText = "";
            }
        });
    }

    function updateColorCheckboxValidity() {
        const stockQuantity = parseInt(
            document.getElementById("stock_quantity").value
        );
        const checkedColorCheckboxes = document.querySelectorAll(
            ".color-checkbox-input:checked"
        );

        if (checkedColorCheckboxes.length > stockQuantity) {
            const excessCheckedCheckboxes = Array.from(
                checkedColorCheckboxes
            ).slice(stockQuantity);
            excessCheckedCheckboxes.forEach(function (checkbox) {
                checkbox.checked = false;
                checkbox.nextElementSibling.classList.remove("checked");
            });
        }

        const uncheckedColorCheckboxes = document.querySelectorAll(
            ".color-checkbox-input:not(:checked)"
        );
        uncheckedColorCheckboxes.forEach(function (checkbox) {
            checkbox.disabled = checkedColorCheckboxes.length >= stockQuantity;
            if (checkbox.disabled) {
                checkbox.nextElementSibling.style.backgroundColor = "white";
                const messageElement = document.querySelector(
                    ".stock_quantity_exceeded_for_colors"
                );
                messageElement.innerText =`Максимален број на различни бои е достигнат. (Количина ${
                    document.getElementById("stock_quantity").value
                })`;
            } else {
                checkbox.nextElementSibling.style.backgroundColor = "";
                // Remove the message when the checkbox is enabled
                document.querySelector(
                    ".stock_quantity_exceeded_for_colors"
                ).innerText = "";
            }
        });
    }

    // делот со 4-те слики
    document
        .querySelectorAll('.image-upload-box input[type="file"]')
        .forEach(function (input) {
            input.addEventListener("change", function () {
                const reader = new FileReader();
                const imageContainer = this.parentNode.querySelector(
                    ".image-container img"
                );

                reader.onload = function (e) {
                    imageContainer.src = e.target.result;
                };
                input.parentElement.querySelector(
                    ".image-container + i"
                ).style.display = "none";

                reader.readAsDataURL(this.files[0]);
            });
        });

    //копчето -откажи- на крајо од формата
    document.getElementById("cancel").addEventListener("click", function () {
        const form = document.getElementById("create_product");

        form.querySelectorAll(
            'input[type="text"], input[type="number"], input[type="checkbox"], textarea'
        ).forEach(function (input) {
            if (input.type === "checkbox") {
                input.checked = false;
            } else {
                input.value = "";
            }
        });

        document.getElementById("stock_quantity").value = 1;

        const colorCheckboxes = form.querySelectorAll(".color-checkbox-input");
        colorCheckboxes.forEach(function (checkbox) {
            const label = checkbox.nextElementSibling;
            label.classList.remove("checked");
        });

        form.querySelectorAll(".text-danger").forEach(function (error) {
            error.textContent = "";
        });

        form.querySelectorAll('input[type="file"]').forEach(function (input) {
            input.value = "";
            const imageContainer = input.parentNode.querySelector(
                ".image-container img"
            );
            imageContainer.src = "";
        });

        window.scrollTo({ top: 0, behavior: "smooth" });
        document.getElementById("name").focus();
    });
});