function updateTimes() {
  const travelTime = 1;  // in hours

  const now = new Date();
  const currentHours = now.getHours();
  const currentMinutes = now.getMinutes();
  const currentSeconds = now.getSeconds();

  const currentTimeElement = document.getElementById('currentTime');
  currentTimeElement.textContent = `${currentHours.toString().padStart(2, '0')}:${currentMinutes.toString().padStart(2, '0')}:${currentSeconds.toString().padStart(2, '0')}`;

  const targetTimesElement = document.getElementById('targetTimes');
  const leaveTimesElement = document.getElementById('leaveTimes');
  const timeDifferencesElement = document.getElementById('timeDifferences');

  targetTimesElement.innerHTML = '';
  leaveTimesElement.innerHTML = '';
  timeDifferencesElement.innerHTML = '';

  const ttBlock = document.createElement('span');
  ttBlock.className = 'time-block label-block';
  ttBlock.textContent = 'TT';
  targetTimesElement.appendChild(ttBlock);

  const ltBlock = document.createElement('span');
  ltBlock.className = 'time-block label-block';
  ltBlock.textContent = 'LT';
  leaveTimesElement.appendChild(ltBlock);

  const tdBlock = document.createElement('span');
  tdBlock.className = 'time-block label-block';
  tdBlock.textContent = 'TD';
  timeDifferencesElement.appendChild(tdBlock);

  const targetTimeBlocks = [];
  const leaveTimeBlocks = [];
  const diffTimeBlocks = [];

  for (let hour = 13; hour <= 22; hour++) {
    let leaveHour = hour - travelTime;

    const timeBlock = document.createElement('span');
    timeBlock.className = 'time-block';
    timeBlock.textContent = `${hour.toString().padStart(2, '0')}:00`;
    targetTimeBlocks.push(timeBlock);

    const leaveTimeBlock = document.createElement('span');
    leaveTimeBlock.className = 'time-block';
    leaveTimeBlock.textContent = `${(leaveHour).toString().padStart(2, '0')}:00`;
    leaveTimeBlocks.push(leaveTimeBlock);

    const targetTime = new Date();
    targetTime.setHours(leaveHour, 0, 0, 0);

    const diffBlock = document.createElement('span');
    diffBlock.className = 'time-block';

    const diffMs = targetTime - now;
    if (diffMs < 0) {
      const diffHours = -1 * Math.ceil(diffMs / (1000 * 60 * 60));
      const diffMinutes = -1 * Math.ceil((diffMs % (1000 * 60 * 60)) / (1000 * 60));
      diffBlock.textContent = `-${diffHours.toString().padStart(2, '0')}:${diffMinutes.toString().padStart(2, '0')}`;
    } else {
      const diffHours = Math.floor(diffMs / (1000 * 60 * 60));
      const diffMinutes = Math.ceil((diffMs % (1000 * 60 * 60)) / (1000 * 60));
      diffBlock.textContent = `${diffHours.toString().padStart(2, '0')}:${diffMinutes.toString().padStart(2, '0')}`;
    }

    diffTimeBlocks.push(diffBlock);
  }

  distributeBlocks(targetTimesElement, targetTimeBlocks);
  distributeBlocks(leaveTimesElement, leaveTimeBlocks);
  distributeBlocks(timeDifferencesElement, diffTimeBlocks);
}


function distributeBlocks(container, blocks) {
  const screenWidth = window.innerWidth;
  const blockWidth = 120;
  const labelWidth = 40;

  const availableWidth = screenWidth - labelWidth;
  const blocksPerRow = Math.floor(availableWidth / blockWidth);

  if (blocksPerRow > blocks.length) {
    blocks.forEach(block => container.appendChild(block));
    return;
  }

  const totalBlocks = blocks.length;
  const halfBlocks = Math.ceil(totalBlocks / 2);

  const rowsContainer = document.createElement('div');
  rowsContainer.className = 'multi-rows-container';

  const topRow = document.createElement('div');
  topRow.className = 'time-row';
  for (let i = 0; i < halfBlocks; i++) {
    topRow.appendChild(blocks[i]);
  }
  rowsContainer.appendChild(topRow);

  const bottomRow = document.createElement('div');
  bottomRow.className = 'time-row';
  for (let i = halfBlocks; i < totalBlocks; i++) {
    bottomRow.appendChild(blocks[i]);
  }
  rowsContainer.appendChild(bottomRow);

  const label = container.firstChild;
  container.appendChild(rowsContainer);
}


updateTimes();
setInterval(updateTimes, 200);
window.addEventListener('resize', updateTimes);