food.js

document.querySelector('.orderNow ').addEventListener('click', popCart)
document.getElementById('closeCart').addEventListener('click', closeCart)
document.getElementById('reservation').addEventListener('click', popForm)
document.getElementById('close-button').addEventListener('click', closeForm)

const toggleButton = document.querySelector('.toggle_btn');
const icon = toggleButton.querySelector('i');


toggleButton.addEventListener('click', Show)

function Show() {
  // document.querySelector('.mobileContainer').style.display = 'block'
  document.querySelector('.mobileContainer').classList.toggle('show-menu');
  
  
  // Toggle between the bars and X icon
  if (icon.classList.contains('fa-bars')) {
    icon.classList.remove('fa-bars');
    icon.classList.add('fa-times');
  } else {
    icon.classList.remove('fa-times');
    icon.classList.add('fa-bars');
   
  }
  
};


function popCart() {
  document.getElementById('cartContainer').style.display = 'block';
};
  
  function closeCart() {
    document.getElementById('cartContainer').style.display = 'none';
  };



/*..........Automatic sliding..........*/
// let slideIndex = 0;
// showSlides();

// function showSlides() {
//   let i;
//   let slides = document.getElementsByClassName("mySlides");
//   for (i = 0; i < slides.length; i++) {
//     slides[i].style.display = "none";
//   }
//   slideIndex++;
//   if (slideIndex > slides.length) {slideIndex = 1}
//   slides[slideIndex-1].style.display = "block";
//   setTimeout(showSlides, 2000); // Change image every 2 seconds
// }



/*.........Manual sliding.........*/
let slideIndex = 1;
showSlides(slideIndex);

// Next/previous controls
function plusSlides(n) {
  showSlides(slideIndex += n);
}

// Thumbnail image controls
function currentSlide(n) {
  showSlides(slideIndex = n);
}

function showSlides(n) {
  let i;
  let slides = document.getElementsByClassName("mySlides");
  let dots = document.getElementsByClassName("dot");
  if (n > slides.length) {slideIndex = 1}
  if (n < 1) {slideIndex = slides.length}
  for (i = 0; i < slides.length; i++) {
    slides[i].style.display = "none";
  }
  for (i = 0; i < dots.length; i++) {
    dots[i].className = dots[i].className.replace(" active", "");
  }
  slides[slideIndex-1].style.display = "block";
  dots[slideIndex-1].className += " active";
}



const selectedTime = document.getElementById('time').value;


function showMeals() {
    // Hide all meal sections
    const mealSections = document.querySelectorAll('#menu ul');
    mealSections.forEach(section => {
      section.style.display = 'none';
    });

    // Show selected meal section
    const selectedTime = document.getElementById('time').value;
    const selectedSection = document.getElementById(selectedTime + '-meals');
    if (selectedSection) {
    selectedSection.style.display = 'block';
    }
    // Change background color
  const cartContent = document.getElementById('cartContent');
  if (selectedTime === "choose") {
    cartContent.style.background = ''; // Revert to default background color
  } else {
    cartContent.style.background = 'white';
  }
  }

  function calculateTotal() {
    // Retrieve the selected time of the day
    const selectedTime = document.getElementById('time').value;
  
    // Retrieve the quantity for each meal
    const meal1Quantity = parseInt(document.getElementById('meal1').value);
    const meal2Quantity = parseInt(document.getElementById('meal2').value);
    const meal3Quantity = parseInt(document.getElementById('meal3').value);
    const meal4Quantity = parseInt(document.getElementById('meal4').value);
    const meal5Quantity = parseInt(document.getElementById('meal5').value);
    const meal6Quantity = parseInt(document.getElementById('meal6').value);
    const meal7Quantity = parseInt(document.getElementById('meal7').value);
    const meal8Quantity = parseInt(document.getElementById('meal8').value);
    const meal9Quantity = parseInt(document.getElementById('meal9').value);
    const meal10Quantity = parseInt(document.getElementById('meal10').value);
    const meal11Quantity = parseInt(document.getElementById('meal11').value);
    const meal12Quantity = parseInt(document.getElementById('meal12').value);
    const meal13Quantity = parseInt(document.getElementById('meal13').value);
    const meal14Quantity = parseInt(document.getElementById('meal14').value);
    const meal15Quantity = parseInt(document.getElementById('meal15').value);
    const meal16Quantity = parseInt(document.getElementById('meal16').value);
    const meal17Quantity = parseInt(document.getElementById('meal17').value);
    const meal18Quantity = parseInt(document.getElementById('meal18').value);
    const meal19Quantity = parseInt(document.getElementById('meal19').value);
    const meal20Quantity = parseInt(document.getElementById('meal20').value);
    const meal21Quantity = parseInt(document.getElementById('meal21').value);
    const meal22Quantity = parseInt(document.getElementById('meal22').value);
    const meal23Quantity = parseInt(document.getElementById('meal23').value);
    const meal24Quantity = parseInt(document.getElementById('meal24').value);
    const meal25Quantity = parseInt(document.getElementById('meal25').value);
    const meal26Quantity = parseInt(document.getElementById('meal26').value);
    const meal27Quantity = parseInt(document.getElementById('meal27').value);
    const meal28Quantity = parseInt(document.getElementById('meal28').value);
    const meal29Quantity = parseInt(document.getElementById('meal29').value);
    const meal30Quantity = parseInt(document.getElementById('meal30').value);
    const meal31Quantity = parseInt(document.getElementById('meal31').value);
    const meal32Quantity = parseInt(document.getElementById('meal32').value);
    const meal33Quantity = parseInt(document.getElementById('meal33').value);
    const meal34Quantity = parseInt(document.getElementById('meal34').value);
    const meal35Quantity = parseInt(document.getElementById('meal35').value);
    const meal36Quantity = parseInt(document.getElementById('meal36').value);
    
    
  
    // Define the prices for each meal
    const meal1Price = 4.30;
    const meal2Price = 4.70;
    const meal3Price = 5.30;
    const meal4Price = 4.50;
    const meal5Price = 4.00;
    const meal6Price = 5.20;
    const meal7Price = 3.60;
    const meal8Price = 4.30;
    const meal9Price = 5.60;
    const meal10Price = 5.80;
    const meal11Price = 6.30;
    const meal12Price = 5.50;
    const meal13Price = 5.20;
    const meal14Price = 3.80;
    const meal15Price = 6.20;
    const meal16Price = 7.20;
    const meal17Price = 6.00;
    const meal18Price = 4.75;
    const meal19Price = 3.50;
    const meal20Price = 4.00;
    const meal21Price = 5.25;
    const meal22Price = 4.00;
    const meal23Price = 5.25;
    const meal24Price = 4.00;
    const meal25Price = 5.55;
    const meal26Price = 6.25;
    const meal27Price = 3.65;
    const meal28Price = 4.00;
    const meal29Price = 4.50;
    const meal30Price = 5.00;
    const meal31Price = 4.00;
    const meal32Price = 5.00;
    const meal33Price = 4.50;
    const meal34Price = 5.25;
    const meal35Price = 4.75;
    const meal36Price = 4.00;
    
    
    
    
  
    // Calculate the total amount
    let totalAmount = 0;
  
    // Calculate total based on selected time and meal quantities
    if (selectedTime === 'brunch') {
      totalAmount = meal1Quantity * meal1Price + meal2Quantity * meal2Price + meal3Quantity * meal3Price + meal4Quantity * meal4Price + meal5Quantity * meal5Price + meal6Quantity * meal6Price + meal7Quantity * meal7Price;
    } else if (selectedTime === 'lunch') {
      totalAmount = meal8Quantity * meal8Price + meal9Quantity * meal9Price + meal10Quantity * meal10Price + meal11Quantity * meal11Price + meal12Quantity * meal12Price + meal13Quantity * meal13Price + meal14Quantity * meal14Price + meal15Quantity * meal15Price ;
    } else if (selectedTime === 'dinner') {
      totalAmount = meal16Quantity * meal16Price + meal17Quantity * meal17Price  + meal18Quantity * meal18Price + meal19Quantity * meal19Price + meal20Quantity * meal20Price + meal21Quantity * meal21Price + meal22Quantity * meal22Price + meal23Quantity * meal23Price;
    } else if (selectedTime === 'wines&Cocktails') {
    totalAmount = meal24Quantity * meal24Price + meal25Quantity * meal25Price  + meal26Quantity * meal26Price + meal27Quantity * meal27Price + meal28Quantity * meal28Price + meal29Quantity * meal29Price + meal30Quantity * meal30Price ;
  }
    else if (selectedTime === 'desserts'){
      totalAmount = meal31Quantity * meal31Price + meal32Quantity * meal32Price  + meal33Quantity * meal33Price + meal34Quantity * meal34Price + meal35Quantity * meal35Price + meal36Quantity * meal36Price ;
    }
  
    // Display the total amount
    document.getElementById('total').innerHTML = 'Total Amount: $' + totalAmount.toFixed(2);
  
    // Redirect to the payment website
    if (totalAmount > 0) {
      window.location.href = 'https://paypal.com'; // Replace with the actual payment website URL
    } else {
      alert('No items selected. Please choose at least one item.');
    }
  }

  // reservation form

  //click reservation button to display the form for booking

  function popForm() {
  document.querySelector('#reservation-form').style.display = 'block';
  };

  //click X icon button to close the form 
  function closeForm() {
    document.getElementById('reservation-form').style.display = 'none';
  };
  

  //get the values from the reservation form
  document.getElementById('reservation-form').addEventListener('submit', function(event) {
    event.preventDefault(); // Prevent form submission
  
    var name = document.getElementById('name').value;
    var email = document.getElementById('email').value;
    var date = document.getElementById('date').value;
    var partySize = document.getElementById('party-size').value;
  
    // Clear form inputs
    document.getElementById('name').value = '';
    document.getElementById('email').value = '';
    document.getElementById('date').value = '';
    document.getElementById('party-size').value = '';
  
    alert('Reservation request successful! One of our staff will call you soon.\n\nDetails:\nName: ' + name + '\nEmail: ' + email + '\nDate Booked: ' + date + '\nNumber of seat: ' + partySize);
  });