let data = [{
    "id": 1,
    "values": [{
            "2018-01": 10,

        },
        {
            "2018-02": 20
        },
        {
            "2018-03": 30
        },
        {
            "2018-05": 40
        }
    ]
}, {
    "id": 2,
    "values": [{
            "2018-03": 100
        },
        {
            "2018-04": 200
        },
        {
            "2018-05": 300
        },
        {
            "2018-06": 400
        }
    ]
}, {
    "id": 3,
    "values": [{
            "2018-01": 1000
        },
        {
            "2018-06": 2000
        },
        {
            "2018-07": 3000
        },
        {
            "2018-09": 4000
        }
    ]
}, {
    "id": 4,
    "values": [{
            "2018-02": 1000
        },
        {
            "2018-03": 1000
        },
        {
            "2018-08": 1500
        },
        {
            "2018-09": 1000
        }
    ]
}]


// get range of data from datapicker and change format

let button = document.querySelector("button");

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

    let startDate = document.querySelector("#start").valueAsDate;
    let endDate = document.querySelector("#end").valueAsDate;



    function monthDiff(d1, d2) {
        var months;
        months = (d2.getFullYear() - d1.getFullYear()) * 12;
        months -= d1.getMonth() + 1;
        months += d2.getMonth();
        return months <= 0 ? 0 : months;
    }

    function getDate(start, months) {
        let dates = [];
        let currentDate = startDate;
        for (i = 0; i <= months; i++) {
            let d = new Date(currentDate);
            dates.push(d);
            currentDate.setMonth(d.getMonth() + 1)
        }

        return dates;

    }

    let months = monthDiff(startDate, endDate);

    let dateArr = getDate(startDate, months + 1);



    //create table headers with startDate and endDate


    let table = document.createElement("table")
    let tr = document.createElement("tr")

    table.appendChild(tr);


    let idTh = document.createElement("th")

    var text = document.createTextNode("ID");
    let idLabel = idTh.appendChild(text);


    tr.appendChild(idTh);


    for (let value of dateArr) {

        let format = ("0" + (value.getMonth() + 1)).slice(-2) + " " + value.getFullYear();


        let dataHeader = document.createElement("th");
        var text = document.createTextNode(format);

        dataHeader.appendChild(text);


        tr.appendChild(dataHeader);

        var divContainer = document.getElementById("showData");
        divContainer.innerHTML = "";
        divContainer.appendChild(table);


    }



    //for each object with data

    for (let i = 0; i < data.length; i++) {
        let obj = data[i];

        console.log(obj)
        let itemsId = Object.values(obj)[0]; ///print id

        console.log(itemsId)

        let valuesFromJson = Object.values(obj)[1];



        //add the first cell from id

        let td = document.createElement("td")
        let tr = document.createElement("tr")
        var text = document.createTextNode(itemsId);
        td.appendChild(text);
        tr.appendChild(td);
        table.appendChild(tr);


        let lastAdded = 0;



        for (let value of dateArr) {

            let format = (value.getFullYear() + "-" + ("0" + (value.getMonth() + 1)).slice(-2));
            console.log(format)





            for (j = 0; j < valuesFromJson.length; j++) {
                let valueFromJson = valuesFromJson[j];


                let key = Object.keys(valueFromJson);



                if (format.includes(key[0])) {

                    console.log("zgadza sie")

                    td = document.createElement("td");
                    text = document.createTextNode(Object.values(valueFromJson));

                    td.appendChild(text);

                    for (let k = 0; k < value.getMonth() - lastAdded; k++) {
                        tdEmpty = document.createElement("td");
                        text = document.createTextNode([" "]);
                        tdEmpty.appendChild(text);
                        tr.appendChild(tdEmpty);
                    }

                    tr.appendChild(td)
                    lastAdded = value.getMonth() + 1;




                } else {

                    console.log("nie zgadza sie ")
                }
            }
        }
        if (lastAdded < 12) {
            for (var k = lastAdded; k < 12; k++) {
                tdEmpty = document.createElement("td");
                text = document.createTextNode([" "]);
                tdEmpty.appendChild(text);
                tr.appendChild(tdEmpty);
            }

        }
    }

}, false);