script.js

let budget = 0;
let remainingBudget = 0;
let shoppingList = [];
let serialList = [];
let expenseList = [];
let mealList = [];
let cleaningList = [];
let medicineTaken = [];
let importantDaysArr = [];

// Show selected functionality (updates active nav and background video)
function showFunction(func, el) {
    const allFuncs = document.querySelectorAll('.functionality');
    allFuncs.forEach(f => f.style.display = 'none');

    const target = document.getElementById(func);
    if (target) target.style.display = 'block';

    // update active nav item
    try { document.querySelectorAll('.nav-item').forEach(n => n.classList.remove('active')); if (el && el.classList) el.classList.add('active'); } catch (e) { }

    // set video related to current section (non-blocking)
    setVideoForSection(func);
}

/* --------- Shopping --------- */
function addShoppingItem() {
    const product = document.getElementById('product').value;
    const price = parseFloat(document.getElementById('price').value);
    const quantity = parseInt(document.getElementById('quantity').value);
    const category = document.getElementById('category').value;

    if (!product || isNaN(price) || isNaN(quantity)) { alert('Please enter valid product, price and quantity'); return; }
    if (!budget) { const b = parseFloat(document.getElementById('budget').value); if (b) budget = b; }

    shoppingList.push({ product, price, quantity, category });
    recalcRemainingBudget();
    updateShoppingList();
}

function updateShoppingList() {
    const shoppingListElement = document.getElementById('shoppingList');
    shoppingListElement.innerHTML = '';
    shoppingList.forEach((item, idx) => {
        const li = document.createElement('li');
        const text = document.createElement('span');
        text.textContent = `${item.product} - $${item.price} x ${item.quantity} [${item.category}]`;
        li.appendChild(text);

        const actions = document.createElement('span');
        actions.className = 'item-actions';
        const editBtn = document.createElement('button'); editBtn.className = 'btn small'; editBtn.textContent = 'Edit'; editBtn.onclick = () => editShoppingItem(idx);
        const delBtn = document.createElement('button'); delBtn.className = 'btn small'; delBtn.textContent = 'Delete'; delBtn.onclick = () => deleteShoppingItem(idx);
        actions.appendChild(editBtn); actions.appendChild(delBtn);
        li.appendChild(actions);
        shoppingListElement.appendChild(li);
    });
}

function editShoppingItem(index) {
    const it = shoppingList[index]; if (!it) return;
    const product = prompt('Product name:', it.product); if (product === null) return;
    const price = parseFloat(prompt('Price:', it.price)); if (isNaN(price)) { alert('Invalid price'); return; }
    const quantity = parseInt(prompt('Quantity:', it.quantity)); if (isNaN(quantity)) { alert('Invalid quantity'); return; }
    const category = prompt('Category:', it.category || 'grocery');
    shoppingList[index] = { product, price, quantity, category };
    recalcRemainingBudget(); updateShoppingList();
}

function deleteShoppingItem(index) { shoppingList.splice(index, 1); recalcRemainingBudget(); updateShoppingList(); }

function recalcRemainingBudget() {
    const spent = shoppingList.reduce((s, i) => s + (i.price * i.quantity), 0);
    remainingBudget = budget ? (budget - spent) : 0;
    const el = document.getElementById('remainingBudget'); if (el) el.textContent = remainingBudget.toFixed(2);
}

/* --------- Serial Tracker --------- */
function addSerial() {
    const serialName = document.getElementById('serialName').value;
    const serialTime = document.getElementById('serialTime').value;
    const serialChannel = document.getElementById('serialChannel').value;
    if (!serialName) { alert('Enter a serial name'); return; }
    serialList.push({ serialName, serialTime, serialChannel }); updateSerialList();
}

function updateSerialList() {
    const serialListElement = document.getElementById('serialList'); serialListElement.innerHTML = '';
    serialList.forEach((item, idx) => {
        const li = document.createElement('li'); const txt = document.createElement('span'); txt.textContent = `${item.serialName} on ${item.serialChannel} at ${item.serialTime}`; li.appendChild(txt);
        const actions = document.createElement('span'); actions.className = 'item-actions'; const editBtn = document.createElement('button'); editBtn.className = 'btn small'; editBtn.textContent = 'Edit'; editBtn.onclick = () => editSerial(idx);
        const delBtn = document.createElement('button'); delBtn.className = 'btn small'; delBtn.textContent = 'Delete'; delBtn.onclick = () => deleteSerial(idx);
        actions.appendChild(editBtn); actions.appendChild(delBtn); li.appendChild(actions); serialListElement.appendChild(li);
    });
}

function editSerial(index) { const s = serialList[index]; if (!s) return; const name = prompt('Serial name:', s.serialName); if (name === null) return; const channel = prompt('Channel:', s.serialChannel); const time = prompt('Time:', s.serialTime); serialList[index] = { serialName: name, serialTime: time, serialChannel: channel }; updateSerialList(); }
function deleteSerial(index) { serialList.splice(index, 1); updateSerialList(); }

/* --------- Expense Tracker --------- */
function addExpense() {
    const expense = document.getElementById('expense').value;
    const expenseAmount = parseFloat(document.getElementById('expenseAmount').value);
    if (!expense) { alert('Enter expense name'); return; }
    if (isNaN(expenseAmount)) { alert('Enter valid amount'); return; }
    expenseList.push({ expense, expenseAmount }); updateExpenseList();
}

function updateExpenseList() {
    const expenseListElement = document.getElementById('expenseList'); expenseListElement.innerHTML = ''; let totalExpense = 0;
    expenseList.forEach((item, idx) => {
        const li = document.createElement('li'); const txt = document.createElement('span'); txt.textContent = `${item.expense}: $${item.expenseAmount}`; li.appendChild(txt);
        const actions = document.createElement('span'); actions.className = 'item-actions'; const editBtn = document.createElement('button'); editBtn.className = 'btn small'; editBtn.textContent = 'Edit'; editBtn.onclick = () => editExpense(idx);
        const delBtn = document.createElement('button'); delBtn.className = 'btn small'; delBtn.textContent = 'Delete'; delBtn.onclick = () => deleteExpense(idx);
        actions.appendChild(editBtn); actions.appendChild(delBtn); li.appendChild(actions); expenseListElement.appendChild(li);
        totalExpense += item.expenseAmount;
    });
    const remEl = document.getElementById('expenseRemainingBudget'); if (remEl) remEl.textContent = ((remainingBudget || 0) - totalExpense).toFixed(2);
}

function editExpense(index) { const e = expenseList[index]; if (!e) return; const name = prompt('Expense name:', e.expense); if (name === null) return; const amt = parseFloat(prompt('Amount:', e.expenseAmount)); if (isNaN(amt)) { alert('Invalid'); return; } expenseList[index] = { expense: name, expenseAmount: amt }; updateExpenseList(); }
function deleteExpense(index) { expenseList.splice(index, 1); updateExpenseList(); }

/* --------- Medicine Tracker --------- */
function trackMedicine() { const medicineName = document.getElementById('medicineName').value; if (!medicineName) { alert('Enter medicine name'); return; } medicineTaken.push(medicineName); updateMedicineList(); }

function updateMedicineList() { const el = document.getElementById('medicineList'); el.innerHTML = ''; medicineTaken.forEach((m, idx) => { const li = document.createElement('li'); const txt = document.createElement('span'); txt.textContent = m; li.appendChild(txt); const actions = document.createElement('span'); actions.className = 'item-actions'; const editBtn = document.createElement('button'); editBtn.className = 'btn small'; editBtn.textContent = 'Edit'; editBtn.onclick = () => { const v = prompt('Medicine name:', m); if (v !== null) { medicineTaken[idx] = v; updateMedicineList(); } }; const delBtn = document.createElement('button'); delBtn.className = 'btn small'; delBtn.textContent = 'Delete'; delBtn.onclick = () => { medicineTaken.splice(idx, 1); updateMedicineList(); }; actions.appendChild(editBtn); actions.appendChild(delBtn); li.appendChild(actions); el.appendChild(li); }); }

/* --------- Important Days --------- */
function saveImportantDay() { const importantDate = document.getElementById('importantDate').value; const importantNote = document.getElementById('importantNote').value; if (!importantDate || !importantNote) { alert('Select date and enter note'); return; } importantDaysArr.push({ date: importantDate, note: importantNote }); updateImportantDaysList(); }

function updateImportantDaysList() { const el = document.getElementById('importantDaysList'); el.innerHTML = ''; importantDaysArr.forEach((it, idx) => { const li = document.createElement('li'); const txt = document.createElement('span'); txt.textContent = `${it.date}: ${it.note}`; li.appendChild(txt); const actions = document.createElement('span'); actions.className = 'item-actions'; const editBtn = document.createElement('button'); editBtn.className = 'btn small'; editBtn.textContent = 'Edit'; editBtn.onclick = () => { const d = prompt('Date:', it.date); if (d === null) return; const n = prompt('Note:', it.note); if (n === null) return; importantDaysArr[idx] = { date: d, note: n }; updateImportantDaysList(); }; const delBtn = document.createElement('button'); delBtn.className = 'btn small'; delBtn.textContent = 'Delete'; delBtn.onclick = () => { importantDaysArr.splice(idx, 1); updateImportantDaysList(); }; actions.appendChild(editBtn); actions.appendChild(delBtn); li.appendChild(actions); el.appendChild(li); }); }

/* --------- Meal Planner --------- */
function addMeal() { const mealDay = document.getElementById('mealDay').value; const mealName = document.getElementById('mealName').value; if (!mealName) { alert('Enter meal name'); return; } mealList.push({ day: mealDay, name: mealName }); updateMealList(); }

function updateMealList() { const el = document.getElementById('mealList'); el.innerHTML = ''; mealList.forEach((m, idx) => { const li = document.createElement('li'); const txt = document.createElement('span'); txt.textContent = `${m.day}: ${m.name}`; li.appendChild(txt); const actions = document.createElement('span'); actions.className = 'item-actions'; const editBtn = document.createElement('button'); editBtn.className = 'btn small'; editBtn.textContent = 'Edit'; editBtn.onclick = () => { const name = prompt('Meal name:', m.name); if (name === null) return; const day = prompt('Day:', m.day); if (day === null) return; mealList[idx] = { day, name }; updateMealList(); }; const delBtn = document.createElement('button'); delBtn.className = 'btn small'; delBtn.textContent = 'Delete'; delBtn.onclick = () => { mealList.splice(idx, 1); updateMealList(); }; actions.appendChild(editBtn); actions.appendChild(delBtn); li.appendChild(actions); el.appendChild(li); }); }

/* --------- Cleaning Schedule --------- */
function addCleaningTask() { const cleaningTask = document.getElementById('cleaningTask').value; const cleaningDay = document.getElementById('cleaningDay').value; if (!cleaningTask) { alert('Enter a task'); return; } cleaningList.push({ day: cleaningDay, task: cleaningTask }); updateCleaningList(); }

function updateCleaningList() { const el = document.getElementById('cleaningList'); el.innerHTML = ''; cleaningList.forEach((c, idx) => { const li = document.createElement('li'); const txt = document.createElement('span'); txt.textContent = `${c.day}: ${c.task}`; li.appendChild(txt); const actions = document.createElement('span'); actions.className = 'item-actions'; const editBtn = document.createElement('button'); editBtn.className = 'btn small'; editBtn.textContent = 'Edit'; editBtn.onclick = () => { const task = prompt('Task:', c.task); if (task === null) return; const day = prompt('Day:', c.day); if (day === null) return; cleaningList[idx] = { day, task }; updateCleaningList(); }; const delBtn = document.createElement('button'); delBtn.className = 'btn small'; delBtn.textContent = 'Delete'; delBtn.onclick = () => { cleaningList.splice(idx, 1); updateCleaningList(); }; actions.appendChild(editBtn); actions.appendChild(delBtn); li.appendChild(actions); el.appendChild(li); }); }

/* ---------- Background video helpers ---------- */
// Map section id -> video file (replace with real files in assets/videos)
const SECTION_VIDEOS = {
    home: 'assets/videos/mom-home.mp4',
    shopping: 'assets/videos/mom-shopping.mp4',
    mealPlanner: 'assets/videos/mom-cooking.mp4',
    serialTracker: 'assets/videos/mom-serial.mp4'
};

function lazyLoadVideo(src) {
    const video = document.getElementById('bgVideo');
    if (!video) return;
    // If same src, do nothing
    if (video.dataset.current === src) return;
    // Respect reduced motion: do not autoplay heavy videos
    const reduced = window.matchMedia('(prefers-reduced-motion: reduce)').matches;
    if (reduced) return;

    // create source element and load
    video.pause();
    video.removeAttribute('src');
    while (video.firstChild) video.removeChild(video.firstChild);
    const srcEl = document.createElement('source');
    srcEl.src = src;
    srcEl.type = 'video/mp4';
    video.appendChild(srcEl);
    video.load();
    video.play().then(() => {
        // hide play overlay if visible
        const btn = document.getElementById('playVideoBtn'); if (btn) btn.style.display = 'none';
    }).catch(() => {
        // show play overlay so user can start playback on mobile where autoplay is blocked
        const btn = document.getElementById('playVideoBtn'); if (btn) btn.style.display = 'block';
    });
    video.dataset.current = src;
}

function setVideoForSection(sectionId) {
    // choose the most relevant video for the section
    const src = SECTION_VIDEOS[sectionId] || SECTION_VIDEOS.home;
    lazyLoadVideo(src);
}

// Initialize: load default/hero video when DOM ready
document.addEventListener('DOMContentLoaded', () => {
    // Try to lazy-load the home video once DOM is ready
    setTimeout(() => { setVideoForSection('home'); }, 300);
});

// Mobile play button and menu toggle handlers
document.addEventListener('DOMContentLoaded', () => {
    const playBtn = document.getElementById('playVideoBtn');
    const video = document.getElementById('bgVideo');
    if (playBtn && video) {
        playBtn.addEventListener('click', () => {
            video.play().then(() => { playBtn.style.display = 'none'; }).catch(() => { /* still blocked */ });
        });
    }

    const menuToggle = document.getElementById('menuToggle');
    const sidebar = document.querySelector('.sidebar');
    if (menuToggle && sidebar) {
        menuToggle.addEventListener('click', () => {
            sidebar.classList.toggle('open');
        });
        // close sidebar when clicking outside on small screens
        document.addEventListener('click', (ev) => {
            if (window.innerWidth > 900) return;
            if (!sidebar.classList.contains('open')) return;
            const path = ev.composedPath ? ev.composedPath() : (ev.path || []);
            if (!path.includes(sidebar) && ev.target !== menuToggle) {
                sidebar.classList.remove('open');
            }
        });
    }
});