menya-zovut-bahytgul-sozdayt/script.js

const form = document.getElementById('meterForm');
const resultCard = document.getElementById('resultCard');
const historyCard = document.getElementById('historyCard');
const clearBtn = document.getElementById('clearBtn');
const saveBtn = document.getElementById('saveBtn');
const clearHistoryBtn = document.getElementById('clearHistoryBtn');
const setReminderBtn = document.getElementById('setReminderBtn');
const cancelReminderBtn = document.getElementById('cancelReminderBtn');
const reminderDateInput = document.getElementById('reminderDate');
const reminderTimeInput = document.getElementById('reminderTime');
const activeReminder = document.getElementById('activeReminder');
const reminderDateTime = document.getElementById('reminderDateTime');

let historyData = JSON.parse(localStorage.getItem('waterHistory') || '[]');
let reminder = JSON.parse(localStorage.getItem('waterReminder') || 'null');

function renderHistory() {
  const list = document.getElementById('historyList');
  if (historyData.length === 0) {
    list.innerHTML = '<p class="empty-msg">Пока нет сохранённых показаний</p>';
    clearHistoryBtn.style.display = 'none';
    return;
  }

  clearHistoryBtn.style.display = 'inline-block';
  list.innerHTML = historyData.map(item => `
    <div class="history-item">
      <div class="date">${new Date(item.date).toLocaleDateString('ru-RU')}</div>
      <div class="details">
        <span>❄️ Холодная: ${item.coldCurrent} м³</span>
        <span>🔥 Горячая: ${item.hotCurrent} м³</span>
      </div>
      <div class="details" style="margin-top: 5px; color: #667eea; font-weight: 600;">
        К оплате: ${item.totalCost} ₸
      </div>
    </div>
  `).join('');
}

function calculate() {
  const coldCurrent = parseFloat(document.getElementById('coldCurrent').value) || 0;
  const hotCurrent = parseFloat(document.getElementById('hotCurrent').value) || 0;
  const coldPrev = parseFloat(document.getElementById('coldPrev').value) || 0;
  const hotPrev = parseFloat(document.getElementById('hotPrev').value) || 0;

  const coldUsage = Math.max(0, coldCurrent - coldPrev);
  const hotUsage = Math.max(0, hotCurrent - hotPrev);
  const totalUsage = coldUsage + hotUsage;

  document.getElementById('coldUsage').textContent = coldUsage.toFixed(2) + ' м³';
  document.getElementById('hotUsage').textContent = hotUsage.toFixed(2) + ' м³';
  document.getElementById('totalUsage').textContent = totalUsage.toFixed(2) + ' м³';

  updateCost(coldUsage, hotUsage);
  resultCard.style.display = 'block';
}

function updateCost(coldUsage, hotUsage) {
  const coldRate = parseFloat(document.getElementById('coldRate').value) || 0;
  const hotRate = parseFloat(document.getElementById('hotRate').value) || 0;

  const coldCost = coldUsage * coldRate;
  const hotCost = hotUsage * hotRate;
  const totalCost = coldCost + hotCost;

  document.getElementById('totalCost').textContent = totalCost.toFixed(2) + ' ₸';
}

function saveReading() {
  const coldCurrent = parseFloat(document.getElementById('coldCurrent').value) || 0;
  const hotCurrent = parseFloat(document.getElementById('hotCurrent').value) || 0;
  const totalCost = document.getElementById('totalCost').textContent;

  const reading = {
    date: new Date().toISOString(),
    coldCurrent,
    hotCurrent,
    totalCost
  };

  historyData.unshift(reading);
  localStorage.setItem('waterHistory', JSON.stringify(historyData));
  renderHistory();

  document.getElementById('coldPrev').value = coldCurrent;
  document.getElementById('hotPrev').value = hotCurrent;
  document.getElementById('coldCurrent').value = '';
  document.getElementById('hotCurrent').value = '';
  resultCard.style.display = 'none';

  alert('Показания сохранены!');
}

function clearForm() {
  form.reset();
  resultCard.style.display = 'none';
}

function clearHistory() {
  if (confirm('Удалить всю историю показаний?')) {
    historyData = [];
    localStorage.removeItem('waterHistory');
function setReminder() {
  const date = reminderDateInput.value;
  const time = reminderTimeInput.value;

  if (!date || !time) {
    alert('Выберите дату и время напоминания');
    return;
  }

  const reminderDatetime = new Date(`${date}T${time}`);
  if (reminderDatetime <= new Date()) {
    alert('Выберите дату и время в будущем');
    return;
  }

  reminder = {
    date: date,
    time: time,
    datetime: reminderDatetime.toISOString()
  };

  localStorage.setItem('waterReminder', JSON.stringify(reminder));
  renderReminder();
  alert('✅ Напоминание установлено! Вы получите уведомление в назначенное время.');
}

function cancelReminder() {
  reminder = null;
  localStorage.removeItem('waterReminder');
  renderReminder();
  alert('Напоминание отменено');
}

function renderReminder() {
  if (reminder) {
    const dt = new Date(reminder.datetime);
    const options = { day: 'numeric', month: 'long', hour: '2-digit', minute: '2-digit' };
    reminderDateTime.textContent = dt.toLocaleDateString('ru-RU', options);
    activeReminder.style.display = 'block';
    reminderDateInput.value = '';
    reminderTimeInput.value = '09:00';
  } else {
    activeReminder.style.display = 'none';
  }
}

function checkReminder() {
  if (!reminder) return;

  const now = new Date();
  const reminderDatetime = new Date(reminder.datetime);

  if (now >= reminderDatetime) {
    // Показываем уведомление
    if ('Notification' in window && Notification.permission === 'granted') {
      new Notification('💧 Оплата воды', {
        body: 'Не забудьте оплатить горячую и холодную воду!',
        icon: '💧'
      });
    } else {
      alert('💧 Не забудьте оплатить горячую и холодную воду!');
    }

    // Удаляем напоминание после срабатывания
    reminder = null;
    localStorage.removeItem('waterReminder');
    renderReminder();
  }
}

function requestNotificationPermission() {
  if ('Notification' in window && Notification.permission === 'default') {
    Notification.requestPermission();
  }
}

setReminderBtn.addEventListener('click', setReminder);
cancelReminderBtn.addEventListener('click', cancelReminder);

// Проверяем напоминания каждую минуту
setInterval(checkReminder, 60000);

// Запрашиваем разрешение на уведомления при загрузке
requestNotificationPermission();

renderReminder();
renderHistory();
  }
}

form.addEventListener('submit', (e) => {
  e.preventDefault();
  calculate();
});

clearBtn.addEventListener('click', clearForm);
saveBtn.addEventListener('click', saveReading);
clearHistoryBtn.addEventListener('click', clearHistory);

document.getElementById('coldRate').addEventListener('input', () => {
  const coldUsage = parseFloat(document.getElementById('coldUsage').textContent) || 0;
  const hotUsage = parseFloat(document.getElementById('hotUsage').textContent) || 0;
  updateCost(coldUsage, hotUsage);
});

document.getElementById('hotRate').addEventListener('input', () => {
  const coldUsage = parseFloat(document.getElementById('coldUsage').textContent) || 0;
  const hotUsage = parseFloat(document.getElementById('hotUsage').textContent) || 0;
  updateCost(coldUsage, hotUsage);
});

renderHistory();