{% extends base_template %}

{% block stylesheets %}
  {{ parent() }}
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@event-calendar/build@3.1.0/event-calendar.min.css">
{% endblock %}

{% block list_table %}
  <div class="col-xs-12 col-md-12">
      <div class="box box-primary">
        <div class="box-body">
          <input type="text" id="gotoDateInput" placeholder="Sélectionner une date" />
          <div id="calendar"></div>
        </div>
      </div>
  </div>
{% endblock %}

{% block javascripts %}
  {{ parent() }}
  <script src="https://cdn.jsdelivr.net/npm/@event-calendar/build@3.1.0/event-calendar.min.js"></script>
  <script>
      document.addEventListener('DOMContentLoaded', function() {
        // Function to update the position of the point indicator
        function updateIndicatorPosition() {
              // Get the container and all the time divs
              var timeContainer = document.querySelector('.ec-main');
              var timeDivs = document.querySelectorAll('.ec-time');

              // Check if the container exists
              if (!timeContainer) {
                  console.error('Element with class .ec-main not found!');
                  return;
              }

              // Create the indicator if it doesn't exist already
              var indicator = document.querySelector('.time-indicator');
              if (!indicator) {
                  indicator = document.createElement('span');
                  indicator.classList.add('time-indicator');
                  indicator.style.position = 'absolute';
                  //indicator.style.backgroundColor = 'red';
                  //indicator.style.width = '2px'; // Thin line for current time
                  indicator.style.height = '98%'; // Stretch vertically
                  indicator.style.zIndex = '1000';
                  timeContainer.appendChild(indicator);
              }

              // Get the current time in minutes
              var now = new Date();
              var currentTime = now.getHours() * 60 + now.getMinutes();

              // Loop through the time divs and find where the current time falls
              let previousTime = null;
              let nextTime = null;
              let previousDiv = null;
              let nextDiv = null;

              timeDivs.forEach(function (timeDiv) {
                  var timeText = timeDiv.querySelector('time').getAttribute('datetime');
                  var timeDate = new Date(timeText);
                  var timeMinutes = timeDate.getHours() * 60 + timeDate.getMinutes();

                  if (timeMinutes <= currentTime) {
                      previousTime = timeMinutes;
                      previousDiv = timeDiv;
                  }

                  if (timeMinutes > currentTime && !nextTime) {
                      nextTime = timeMinutes;
                      nextDiv = timeDiv;
                  }
              });

              // If previous and next times are found, interpolate position
              if (previousDiv && nextDiv) {
                  var previousLeft = previousDiv.offsetLeft;
                  var nextLeft = nextDiv.offsetLeft;

                  var timeRatio = (currentTime - previousTime) / (nextTime - previousTime);
                  var indicatorLeft = previousLeft + timeRatio * (nextLeft - previousLeft);

                  // Update the indicator's position
                  indicator.style.left = indicatorLeft + 'px';
              } else if (previousDiv) {
                  // If only previous time exists (e.g., at the end of the range)
                  indicator.style.left = previousDiv.offsetLeft + 'px';
              } else {
                  // If no valid times are found, hide the indicator
                  indicator.style.display = 'none';
              }
          }

        // Call the function initially to position the indicator
        setTimeout(function() {
          updateIndicatorPosition();
        },1000);

        // Update the position of the indicator every 60 seconds
        setInterval(updateIndicatorPosition, 6000);  // 60000 milliseconds = 1 minute
      });
  </script>
{% endblock %}