03. Car Dealers

function solve() {
    const make = document.getElementById('make');
    const model = document.getElementById('model');
    const year = document.getElementById('year');
    const fuel = document.getElementById('fuel');
    const originalCost = document.getElementById('original-cost');
    const sellingPrice = document.getElementById('selling-price');
    const publishBtn = document.getElementById('publish');
    const tbody = document.getElementById('table-body');
    const carList = document.getElementById('cars-list');
    const profitValue = document.getElementById('profit');
    const form = document.getElementsByTagName('form')[0];
    let profit = 0;

    make.value = 'BMW';
    model.value = 'Z3';
    year.value = '2022';
    fuel.value = 'diesel';
    originalCost.value = 52300;
    sellingPrice.value = 132300;

    publishBtn.addEventListener('click', publishHandler);

    function publishHandler(e) {
        e.preventDefault();

        if ((make.value !== '') &&
            (model.value !== '') &&
            (year.value !== '') &&
            (sellingPrice.value !== '') &&
            (originalCost.value !== '') &&
            (Number(sellingPrice.value) > Number(originalCost.value))) {
            const tr = createElement('tr', '', tbody, '', ['row']);
            const brandCar = createElement('td', make.value, tr, 'make-value');
            const modelCar = createElement('td', model.value, tr, 'model-value');
            const yearCar = createElement('td', year.value, tr, 'year-value');
            const fuelCar = createElement('td', fuel.value, tr, 'fuel-value');
            const originalCostCar = createElement('td', originalCost.value, tr, 'original-cost-value');
            const sellingPriceCar = createElement('td', sellingPrice.value, tr, 'selling-price-value');
            const tdButtons = createElement('td', '', tr);
            const editBtn = createElement('button', 'Edit', tdButtons, '', ['action-btn', 'edit']);
            const sellBtn = createElement('button', 'Sell', tdButtons, '', ['action-btn', 'sell']);
            make.value = '';
            model.value = '';
            year.value = '';
            fuel.value = '';
            originalCost.value = '';
            sellingPrice.value = '';

            editBtn.addEventListener('click', editHandler);
            sellBtn.addEventListener('click', sellHandler);
        }
    }

    function sellHandler(e) {
        const element = e.currentTarget.parentNode.parentNode
        const elementChildren = e.currentTarget.parentNode.parentNode.children;
        // const elementChildren = this.parentNode.parentNode.children;
        console.log(elementChildren);
        const makeModel = `${elementChildren[0].textContent} ${elementChildren[1].textContent}`;
        const yearCar = elementChildren[2].textContent;
        const priceDiff = elementChildren[5].textContent - elementChildren[4].textContent;
        profit += priceDiff;
        const li = createElement('li', '', carList, '', ['each-list']);
        createElement('span', makeModel, li);
        createElement('span', yearCar, li);
        createElement('span', priceDiff, li);
        profitValue.textContent = profit.toFixed(2);
        element.remove()
    }

    function editHandler() {
        const element = this.parentNode.parentNode;
        console.log(element.children);
        make.value = element.children[0].textContent;
        model.value = element.children[1].textContent;
        year.value = element.children[2].textContent;
        fuel.value = element.children[3].textContent;
        originalCost.value = element.children[4].textContent;
        sellingPrice.value = element.children[5].textContent;
        tbody.innerHTML = '';

    }

    function createElement(type, content, parentNode, id, classes, attributes) {
        const htmlElement = document.createElement(type);

        if (content && type !== 'input') {
            htmlElement.textContent = content;
        }

        if (content && type === 'input') {
            htmlElement.value = content;
        }

        if (id) {
            htmlElement.id = id;
        }

        if (classes) {
            htmlElement.classList.add(...classes);
        }

        if (parentNode) {
            parentNode.appendChild(htmlElement);
        }

        if (attributes) {
            for (const key in attributes) {
                htmlElement.setAttribute(key, attributes[key]);
            }
        }

        return htmlElement;
    }
}