const date = new Date();

const renderCalendar = () => {
    date.setDate(1);

    const monthDays = document.querySelector(".days");

    const lastDay = new Date(
        date.getFullYear(),
        date.getMonth() + 1,
        0
    ).getDate();

    const prevLastDay = new Date(
        date.getFullYear(),
        date.getMonth(),
        0
    ).getDate();

    const firstDayIndex = date.getDay();

    const lastDayIndex = new Date(
        date.getFullYear(),
        date.getMonth() + 1,
        0
    ).getDay();

    const nextDays = 7 - lastDayIndex - 1 + 1;

    const months = [
        "Januar",
        "Februar",
        "Marts",
        "April",
        "Maj",
        "Juni",
        "Juli",
        "August",
        "September",
        "Oktober",
        "November",
        "December",
    ];

    document.querySelector(".date h1").innerHTML = months[date.getMonth()] + " " + date.getFullYear();

    document.querySelector(".date p").innerHTML = new Date().toLocaleDateString('da-DK', {
        weekday: 'long',
        year: 'numeric',
        month: 'long',
        day: 'numeric'
    });

    let days = "";

    for (let x = firstDayIndex; x > 1; x--) {
        days += `<div class="prev-date">${prevLastDay - x + 2}</div>`;
    }

    for (let i = 1; i <= lastDay; i++) {
        if (i === new Date().getDate() && date.getMonth() === new Date().getMonth() && date.getFullYear() === new Date().getFullYear()) {

            days += `<div class="today" onClick="clickdate()">${i}</div>`;

        } else {
            days += `<div onClick="clickdate()">${i}</div>`;
        }
    }

    for (let j = 1; j <= nextDays; j++) {
        days += `<div class="next-date" onClick="clickdate()">${j}</div>`;
        monthDays.innerHTML = days;
    }
    // 2021, 3, 28, 11, 30
    $('#test').click(function() {
        let newDate = new Date();

        newDate.setDate(28);

        console.log(newDate);
    });
};

document.querySelector(".prev").addEventListener("click", () => {
    date.setMonth(date.getMonth() - 1);
    renderCalendar();
});

document.querySelector(".next").addEventListener("click", () => {
    date.setMonth(date.getMonth() + 1);
    renderCalendar();
});

renderCalendar();



function clickdate() {
    var dato = new Date();
    let month = dato.getMonth() + 1;
    let day = dato.getDate();
    let currentDate = dato.getFullYear() + "/" + (("" + month).length < 2 ? "0" : "") + month + "/" + (("" + day).length < 2 ? "0" : "") + day;

    var myModal = new bootstrap.Modal(document.getElementById("popup"));
    $("#popupDate").text(currentDate);
    myModal.show();
}

var myModal = document.getElementById('popup')

myModal.addEventListener('shown.bs.modal', function() {
    myInput.focus()
})