//Таблица умножения
let table = document.createElement("table");
for (let i = 0; i <= 9; i++) {
    let tr = document.createElement("tr");

    for (let j = 0; j <= 9; j++) {
        let td = document.createElement("td");
        if (i == 0 || j == 0) {
            td.innerText = i + j;
        } else {
            td.innerText = i * j;
        }
        tr.appendChild(td);
    }
    table.appendChild(tr);
}
tables.appendChild(table);

//Подсветить ячейку
let table2 = document.createElement("table");
for (let i = 0; i <= 9; i++) {
    let tr = document.createElement("tr");

    for (let j = 0; j <= 9; j++) {
        let td = document.createElement("td");
        if (i == 0 || j == 0) {
            td.innerText = i + j;
        } else {
            td.innerText = i * j;
        }
        tr.appendChild(td);

        td.onmouseover = function (event) {
            this.style.background = "red";
        }
        td.onmouseout = function (event) {
            this.style.background = "";
        }
    }
    table2.appendChild(tr);
}
tables.appendChild(table2);

//Подсветить строку и столбец
let table3 = document.createElement("table");
table3.className = "table3";

for (let i = 0; i <= 9; i++) {
    let tr = document.createElement("tr");
    let tdIndex = i;
    for (let j = 0; j <= 9; j++) {
        let td = document.createElement("td");
        if (i == 0 || j == 0) {
            td.innerText = i + j;
        } else {
            td.innerText = i * j;
        }
        tr.appendChild(td);

        td.onmouseover = function (event) {
            tdIndex = this.cellIndex;                       // записываем в переменную индекс ячейки, на которую навели мышкой
            console.log(tdIndex)

            for (let i = 0; i < table3.children.length; i++) {          //перебор всех тр и покраска тд с определенным индексом
                table3.children[i].children[tdIndex].style.background = "yellow";
            }

            this.parentElement.style.background = "red"  //красим строку
            this.style.background = "orange";                  //красим саму ячейку
        }

        td.onmouseout = function (event) {
            for (let i = 0; i < table3.children.length; i++) {
                table3.children[i].children[tdIndex].style.background = "";
            }
            this.parentElement.style.background = ""
            this.style.background = "";
        }
    }
    table3.appendChild(tr);
}
tables.appendChild(table3);


//Calc
let form = document.createElement("form");
let h3 = document.createElement("h3");
h3.innerText = "Расчет покупки квартиры"

form.appendChild(h3)

form.setAttribute("id", "formCalc");
calcs.appendChild(form);

formCalc.style.display = "flex";
formCalc.style.flexDirection = "column";

function createInput(inputName, inputType, label) {
    if (label) {
        let labelForInput = document.createElement("label");
        labelForInput.innerText = label;

        let input = document.createElement("input");
        input.id = inputName;
        input.type = inputType;
        labelForInput.appendChild(input)
        return labelForInput;
    } else {
        let input = document.createElement("input");
        input.id = inputName;
        input.type = inputType;
        return input;
    }
}

formCalc.appendChild(createInput("inputFlatType", "number", "Класс жилья: 1(эконом), 2(комфорт), 3(бизнес), 4(премиум)"));
formCalc.appendChild(createInput("inputPerSquareMetre", "number", "Размер квартиры (м²)"));
formCalc.appendChild(createInput("inputIncome", "number", "Ваш доход в месяц"));
formCalc.appendChild(createInput("inputBtn", "button"));

inputBtn.value = "Посчитаем";
inputBtn.style.alignSelf = "flex-end";

inputBtn.onclick = function () {
    let perSquareMetreCost;
    if (inputFlatType.value == 1) {
        perSquareMetreCost = 12547;
    } else if (inputFlatType.value == 2) {
        perSquareMetreCost = 17635;
    } else if (inputFlatType.value == 3) {
        perSquareMetreCost = 20178;
    } else if (inputFlatType.value == 4) {
        perSquareMetreCost = 27940;
    } else {
        perSquareMetreCost = 30000;
    }

    let flatCost = inputPerSquareMetre.value * perSquareMetreCost;
    let timeForBuying = (flatCost / (inputIncome.value * 0.35) / 12).toFixed(1)

    alert("Стоимость квартиры: " + flatCost + " грн" + "\n" + "Время накопления полной суммы (в годах): " + timeForBuying);
}


//Calc Live
let formLive = document.createElement("form");
let h3Live = document.createElement("h3");
h3Live.innerText = "Расчет покупки квартиры ОНЛАЙН"

formLive.appendChild(h3Live)

formLive.setAttribute("id", "formCalcLive");
calcs.appendChild(formLive);

formCalcLive.style.display = "flex";
formCalcLive.style.flexDirection = "column"

formCalcLive.appendChild(createInput("inputFlatTypeLive", "number", "Класс жилья: 1(эконом), 2(комфорт), 3(бизнес), 4(премиум)"));
formCalcLive.appendChild(createInput("inputPerSquareMetreLive", "number", "Размер квартиры (м²)"));
formCalcLive.appendChild(createInput("inputIncomeLive", "number", "Ваш доход в месяц"));
formCalcLive.appendChild(createInput("inputPerSquareMetreCost", "number", "Стоимость м²"));
formCalcLive.appendChild(createInput("inputFlatCost", "number", "Стоимость жилья"));
formCalcLive.appendChild(createInput("inputTimeForBuying", "number", "Время накопления полной суммы (в годах)"));

inputPerSquareMetreCost.disabled = "disabled"
inputFlatCost.disabled = "disabled"
inputTimeForBuying.disabled = "disabled"

function liveResult() {
    if (inputFlatTypeLive.value == 1) {
        inputPerSquareMetreCost.value = 12547;
    } else if (inputFlatTypeLive.value == 2) {
        inputPerSquareMetreCost.value = 17635;
    } else if (inputFlatTypeLive.value == 3) {
        inputPerSquareMetreCost.value = 20178;
    } else if (inputFlatTypeLive.value == 4) {
        inputPerSquareMetreCost.value = 27940;
    } else {
        inputPerSquareMetreCost.value = "";
    }

    inputFlatCost.value = inputPerSquareMetreLive.value * inputPerSquareMetreCost.value;
    inputTimeForBuying.value = (inputFlatCost.value / (inputIncomeLive.value * 0.35) / 12).toFixed(1)
}

inputFlatTypeLive.oninput = function (event) {
    liveResult()
}

inputPerSquareMetreLive.oninput = function (event) {
    liveResult()
}

inputIncomeLive.oninput = function (event) {
    liveResult()
}