document.addEventListener("DOMContentLoaded", (event) => {

    window.addEventListener("load", function() {

        const DateTime = luxon.DateTime;

        class Webinar {
            constructor(industry, parent, date, time, timeZone, parsedDateTime, link) {
                this.industry = industry;
                this.parent = parent;
                this.date = date;
                this.time = time;
                this.timeZone = timeZone;
                this.link = link;
                this.parsedDateTime = parsedDateTime;
            }

            parseDateTime() {
                return DateTime.fromFormat(`${this.date} - ${this.time}`, "LLLL d, yyyy - t").setZone(this.timeZone, {
                    keepLocalTime: true
                });
            }

            createDate() {
                if (!this.parsedDateTime) this.parsedDateTime = this.parseDateTime();
                return this.parsedDateTime.setZone('local').toFormat("LLLL d, yyyy");
            }

            createTime() {
                if (!this.parsedDateTime) this.parsedDateTime = this.parseDateTime();
                return this.parsedDateTime.setZone('local').toFormat("hh:mm a");
            }

            createTimeZone() {
                if (!this.parsedDateTime) this.parsedDateTime = this.parseDateTime();
                return this.parsedDateTime.setZone('local').toFormat("ZZZZ");
            }

            returnMilliseconds(){
                if (!this.parsedDateTime) this.parsedDateTime = this.parseDateTime();
                return this.parsedDateTime.toMillis();
            }

        } // Webinar class

        const industries = Array.from(document.querySelectorAll(".upcoming-webinar-industry-container"));
        industries.forEach((industry) => {
            const industryID = industry.getAttribute("id");

            const scheduledWebinars = Array.from(industry.querySelectorAll(".upcoming-webinar-row"));
            let webinars = [];
            scheduledWebinars.forEach((scheduledWebinar) => {
                const webinar = new Webinar,
                    inputDate = scheduledWebinar.querySelector(".upcoming-webinar-date"),
                    inputTime = scheduledWebinar.querySelector(".upcoming-webinar-time"),
                    inputTimeZone = scheduledWebinar.querySelector(".upcoming-webinar-timezone"),
                    link = scheduledWebinar.querySelector("a");
    
                link.setAttribute("target", "_blank");
                
                webinar.industry = industryID;
                webinar.parent = scheduledWebinar;
                webinar.date = inputDate.innerText;
                webinar.time = inputTime.innerText;
                webinar.timeZone = inputTimeZone.innerText;
                webinar.parsedDateTime = webinar.parseDateTime();
                webinar.link = link;
    
                inputDate.innerText = webinar.createDate();
                inputTime.innerText = webinar.createTime();
                inputTimeZone.innerText = webinar.createTimeZone();
                
                webinars.push(webinar);
            }); // forEach webinar

            const sortedWebinars = webinars.sort((a, b) => a.returnMilliseconds() - b.returnMilliseconds()); // sorting webinars
            for(let i = 0; i < sortedWebinars.length; i++){
                sortedWebinars[i].parent.style.order = i + 1;
                sortedWebinars[i].parent.classList.add("localized");
            } // for sortedWebinars

        }); // forEach industry

    }); // window.onload

}); // DOMContentLoaded