<script>
  const training_eventsArr=[];
</script>
{% for training_event in training_events.available %}
    {% for session in training_event.sessions %}
    <script>
      training_eventsArr.push("{{ session.day }}{{ session.month }}{{ session.year }}");
      //console.log("{{ training_event.title }} {{ session.day }} {{ session.month }} {{ session.year }}" )
    </script>
    {% endfor %}
  {% endfor %}



<div class="calFrame">
  <div class="container">
      <div class="calendar">
        <header>
          <pre class="left">◀</pre>

          <div class="header-display">
            <p class="display">""</p>
          </div>

          <pre class="right">▶</pre>

        </header>

        <div class="week">
          <div>Su</div>
          <div>Mo</div>
          <div>Tu</div>
          <div>We</div>
          <div>Th</div>
          <div>Fr</div>
          <div>Sa</div>
        </div>
        <div class="days"></div>
      </div>
      <div class="divToday">Today</div>
    <!--<div class="display-selected">
        <p class="selected"></p>
      </div>-->
    </div>
  </div>

  <style>
    /*variables*/
:root {
  --white: #ffff;
  --main: #3C228A;
  --accent: #211D44;
  --accent-2: #ebedf0;
}

/*styles*/
.divToday:hover {
  cursor: pointer;
}
.divToday {
  background-color: var(--accent);
  color: var(--white);
  font-weight: 700;
  padding: 4px;
  border-radius: 6px;
}
.calFrame {
  background-color: var(--white);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: sans-serif;
}
.days {
    height: 144px;
}
.container {
    display: flex;
    background-color: var(--white);
    border-radius: 35px;
    border: 1px solid;
    padding: 1em;
    height: 265px;
    width: 280px;
    flex-wrap: nowrap;
    flex-direction: column;
    align-content: center;
    justify-content: center;
    align-items: center;
}

header {
    margin: 10px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    /* padding: 4px; */
    width: 230px;
}
.header-display {
  display: flex;
  align-items: center;
}

.header-display p {
  color: var(--accent);
  margin: 5px;
  font-size: 1.2rem;
  word-spacing: 0.5rem;
}

.left {
  padding: 10px;
  margin: 0;
  cursor: unset;
  font-size: 1.2rem;
  color: var(--accent);
  opacity: 0.5;
}

.right {
  padding: 10px;
  margin: 0;
  cursor: pointer;
  font-size: 1.2rem;
  color: var(--accent);
}

.days, .week {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    margin: auto;
    /* padding: 0px 20px; */
    justify-content: space-between;
    width: 210px;
}
.week div, .days div {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 1.5rem;
    width: 1.5rem;
    border-radius: 100%;
}
.days div:hover {
  background: var(--accent-2);
  color: rgb(25, 25, 201);
  cursor: pointer;
}
.week div {
  opacity: 0.5;
}
.current-date {
  background-color: var(--accent);
  color: var(--white);
}

.has-event {
  background-color: var(--main);
  color: var(--white);
}
.display-selected {
  margin-bottom: 10px;
  padding: 20px 20px;
  text-align: center;
}
  </style>

<script>
    const montharr = ["January","February","March","April","May","June","July","August","September","October","November","December"];
    let display = document.querySelector(".display");
    let days = document.querySelector(".days");
    let previous = document.querySelector(".left");
    let next = document.querySelector(".right");
    let selected = document.querySelector(".selected");
    let today = document.querySelector(".divToday");

    let date = new Date();

    let year = date.getFullYear();
    let month = date.getMonth();

// Main function to render Calendar
function displayCalendar() {
  const firstDay = new Date(year, month, 1);

  const lastDay = new Date(year, month + 1, 0);

  const firstDayIndex = firstDay.getDay(); //4

  const numberOfDays = lastDay.getDate(); //31


  let formattedDate =  montharr[firstDay.getMonth()]+" " +firstDay.getFullYear().toString();

  display.innerHTML = `${formattedDate}`;

  for (let x = 1; x <= firstDayIndex; x++) {
    const div = document.createElement("div");
    div.innerHTML += "";

    days.appendChild(div);
  }
  //console.log("In Display " + month + " Year " + year);
  for (let i = 1; i <= numberOfDays; i++) {
    let div = document.createElement("div");
    let currentDate = new Date(year, month, i);

    div.dataset.date = currentDate.getDate().toString()+montharr[currentDate.getMonth()]+currentDate.getFullYear().toString();


    div.innerHTML += i;
    days.appendChild(div);
    if (
      currentDate.getFullYear() === new Date().getFullYear() &&
      currentDate.getMonth() === new Date().getMonth() &&
      currentDate.getDate() === new Date().getDate()
    )
    {
      div.classList.add("current-date");
    }
    if (training_eventsArr.includes(div.dataset.date))
    {
      div.classList.add("has-event");

      div.outerHTML="<a href='app/training_events' style='text-decoration: none;' target='_blank'>"+div.outerHTML+"</a>";
    }

  }
}

// Call the function to display the calendar
displayCalendar();

//Today Event Listener
today.addEventListener("click", () => {
  days.innerHTML = "";
  date = new Date();
  year = date.getFullYear();
  month = date.getMonth();
  document.querySelector(".left").style.color = "var(--accent)";
  document.querySelector(".left").style.opacity="0.5";
  document.querySelector(".left").style.cursor="unset";
  displayCalendar();

});


//Previous Event Listener
previous.addEventListener("click", () => {

  if ( year === new Date().getFullYear() &&  month === new Date().getMonth() )
  {

    return; //Skip the Previous if it is Current Month as thie is for Upcoming Events
  }
  days.innerHTML = "";
  //selected.innerHTML = "";
  //console.log("Before Pre set " + month +  " Year " + year);
  if (month < 0) {
    month = 11;
    year = year - 1;
  }

  month = month - 1;
  date.setMonth(month);
  displayCalendar();
  //console.log("after Pre set " + month +  " Year " + year);

  //Disable Previous if the current Display Month is same as today Month as thie is for Upcoming Events
  if (year === new Date().getFullYear() &&   month === new Date().getMonth() )
  {
      document.querySelector(".left").style.color = "var(--accent)";
      document.querySelector(".left").style.opacity="0.5";
      document.querySelector(".left").style.cursor="unset";

  }
  //displaySelected();
});

//Next Button event listener
next.addEventListener("click", () => {
  days.innerHTML = "";
  //selected.innerHTML = "";
  //console.log("Before Next set " + month +   " Year " + year);
  if (month >= 11) {
    month = -1;
    year = year + 1;
  }

  month = month + 1;
  date.setMonth(month);

  displayCalendar();
  //console.log("After Next set " + month + " Year " + year);

  if ( year === new Date().getFullYear() && month+1 === new Date().getMonth()+1 )
  {

      document.querySelector(".left").style.color = "var(--accent)";
      document.querySelector(".left").style.opacity="0.5";
      document.querySelector(".left").style.cursor="unset";

  }
  else { //Enable Previous Buttom if the current display month is not currnet month
      document.querySelector(".left").style.color = "var(--accent)";
      document.querySelector(".left").style.opacity="100";
      document.querySelector(".left").style.cursor="pointer";

  }
 // displaySelected();
});

//Currently not in Use
function displaySelected() {
  const dayElements = document.querySelectorAll(".days div");
  dayElements.forEach((day) => {
    day.addEventListener("click", (e) => {
      const selectedDate = e.target.dataset.date;
      selected.innerHTML = `Selected Date : ${selectedDate}`;
    });
  });
}
displaySelected();
</script>
