// Перевірка поточного стану мережі після завантаження сторінки
document.addEventListener("DOMContentLoaded", function() {
  const statusDisplay = document.getElementById("status");
  const sendStoredDataButton = document.getElementById("sendStoredData");
  const form = document.getElementById("dataForm");

  // Перевіряємо стан мережі при завантаженні сторінки
  if (!navigator.onLine) {
    statusDisplay.textContent = "Офлайн";
    sendStoredDataButton.disabled = false;
  }

  // Обробляємо подію 'offline'
  window.addEventListener('offline', function() {
    statusDisplay.textContent = "Офлайн";
    alert('Інтернет-з\'єднання втрачено. Ваші дані будуть збережені.');
  });

  // Обробляємо подію 'online'
  window.addEventListener('online', function() {
    statusDisplay.textContent = "Онлайн";
    sendStoredDataButton.disabled = false;
    alert('З\'єднання відновлено! Ви можете надіслати збережені дані.');
  });

  // Обробляємо відправку форми
  form.addEventListener('submit', function(event) {
    event.preventDefault();
    const inputData = document.getElementById("dataInput").value;

    if (navigator.onLine) {
      // Надсилаємо дані, якщо є з'єднання
      alert(`Дані "${inputData}" надіслано на сервер!`);
    } else {
      // Зберігаємо дані в локальне сховище, якщо з'єднання немає
      localStorage.setItem('offlineData', inputData);
      alert(`Дані збережені для відправки: "${inputData}"`);
    }

    document.getElementById("dataInput").value = '';
  });

  // Відправка збережених даних при натисканні кнопки
  sendStoredDataButton.addEventListener('click', function() {
    const storedData = localStorage.getItem('offlineData');
    if (storedData) {
      alert(`Збережені дані "${storedData}" успішно надіслано на сервер!`);
      localStorage.removeItem('offlineData');
      sendStoredDataButton.disabled = true;
    } else {
      alert('Немає збережених даних для відправки.');
    }
  });
});