script.js

// script.js - Laundry Services Web App
document.addEventListener('DOMContentLoaded', () => {
  if(window.emailjs){
    emailjs.init('heS3W2-S45UonryLR');
  }

  const services = [
    { id: 's1', name: 'Wash & Fold (per kg)', price: 60 },
    { id: 's2', name: 'Dry Cleaning (per item)', price: 120 },
    { id: 's3', name: 'Ironing (per item)', price: 20 },
    { id: 's4', name: 'Bed Sheet Wash', price: 180 },
    { id: 's5', name: 'Shoe Cleaning', price: 200 }
  ];

  const serviceList = document.getElementById('serviceList');
  const cartItemsEl = document.getElementById('cartItems');
  const totalAmountEl = document.getElementById('totalAmount');
  const bookingForm = document.getElementById('bookingForm');
  const orderDetailsInput = document.getElementById('orderDetails');
  const bookingMsg = document.getElementById('bookingMsg');
  const bookScrollBtn = document.getElementById('bookScrollBtn');

  const cart = {};

  // Render services with one button visible at a time
  function renderServices() {
    serviceList.innerHTML = '';
    services.forEach(s => {
      const div = document.createElement('div');
      div.className = 'service-item';
      div.innerHTML = `
        <div class="service-meta">
          <div>
            <strong>${s.name}</strong><br/><small>₹ ${s.price}</small>
          </div>
        </div>
        <div class="service-actions">
          <button data-id="${s.id}" class="add-btn">Add Item</button>
          <button data-id="${s.id}" class="remove-btn" style="display:none;">Remove</button>
        </div>
      `;
      serviceList.appendChild(div);
    });
  }

  function updateCartUI() {
    const keys = Object.keys(cart);
    if(keys.length === 0){
      cartItemsEl.textContent = 'No items added.';
      totalAmountEl.textContent = '0';
      return;
    }
    cartItemsEl.innerHTML = '';
    let total = 0;
    keys.forEach(k => {
      const item = cart[k];
      const row = document.createElement('div');
      row.style.display = 'flex';
      row.style.justifyContent = 'space-between';
      row.style.marginBottom = '8px';
      row.innerHTML = `<div>${item.name} x ${item.qty}</div><div>₹ ${item.qty * item.price}</div>`;
      cartItemsEl.appendChild(row);
      total += item.qty * item.price;
    });
    totalAmountEl.textContent = total;
  }

  // Add / Remove handlers with visibility toggle
  serviceList.addEventListener('click', (e) => {
    const addBtn = e.target.closest('.add-btn');
    const remBtn = e.target.closest('.remove-btn');

    if(addBtn){
      const id = addBtn.dataset.id;
      const svc = services.find(s => s.id === id);
      if(!cart[id]) cart[id] = { ...svc, qty: 0 };
      cart[id].qty += 1;
      updateCartUI();

      // hide add, show remove
      addBtn.style.display = 'none';
      addBtn.parentElement.querySelector('.remove-btn').style.display = 'inline-block';
    }
    else if(remBtn){
      const id = remBtn.dataset.id;
      if(cart[id]){
        cart[id].qty -= 1;
        if(cart[id].qty <= 0){
          delete cart[id];
          // show add, hide remove
          remBtn.style.display = 'none';
          remBtn.parentElement.querySelector('.add-btn').style.display = 'inline-block';
        }
        updateCartUI();
      }
    }
  });

  bookScrollBtn.addEventListener('click', () => {
    document.querySelector('#services').scrollIntoView({behavior:'smooth'});
  });

  bookingForm.addEventListener('submit', (e) => {
    e.preventDefault();
    bookingMsg.textContent = '';
    const cartKeys = Object.keys(cart);
    if(cartKeys.length === 0){
      bookingMsg.style.color = 'crimson';
      bookingMsg.textContent = 'Please add at least one item to the cart before booking.';
      return;
    }
    const fullName = document.getElementById('fullName').value.trim();
    const email = document.getElementById('email').value.trim();
    const phone = document.getElementById('phone').value.trim();
    const details = cartKeys.map(k => `${cart[k].name} x ${cart[k].qty} (₹${cart[k].price})`).join('; ');
    orderDetailsInput.value = details;

    const templateParams = {
      full_name: fullName,
      email: email,
      phone: phone,
      order: details,
      total: totalAmountEl.textContent
    };

    sendBookingEmail(templateParams)
      .then(() => {
        bookingMsg.style.color = 'green';
        bookingMsg.textContent = 'Thank you For Booking the Service! We will get back to you soon!';
        Object.keys(cart).forEach(k => delete cart[k]);
        updateCartUI();
        bookingForm.reset();

        // After booking, show all Add buttons again and hide Remove buttons
        document.querySelectorAll('.add-btn').forEach(b => b.style.display = 'inline-block');
        document.querySelectorAll('.remove-btn').forEach(b => b.style.display = 'none');
      })
      .catch((err) => {
        console.error('Email send error:', err);
        bookingMsg.style.color = 'crimson';
        bookingMsg.textContent = 'There was an error sending confirmation email. Please check console and EmailJS keys.';
      });
  });

  const newsletterForm = document.getElementById('newsletterForm');
  const nlMsg = document.getElementById('nlMsg');
  newsletterForm.addEventListener('submit', (e) => {
    e.preventDefault();
    nlMsg.style.color = 'green';
    nlMsg.textContent = 'Subscribed! Thanks for joining our newsletter.';
    newsletterForm.reset();
  });

  function sendBookingEmail(templateParams){
    const service_id = 'service_szs2mr9';
    const template_id = 'template_yc0vcao';
    if(!window.emailjs || service_id.startsWith('YOUR_')){
      return Promise.reject(new Error('EmailJS not configured. Replace service_id/template_id/user id.'));
    }
    return emailjs.send(service_id, template_id, templateParams);
  }

  renderServices();
  updateCartUI();

  const navToggle = document.querySelector('.nav-toggle');
  navToggle.addEventListener('click', () => {
    const nav = document.querySelector('.nav-links');
    nav.style.display = nav.style.display === 'flex' ? 'none' : 'flex';
  });
});