document.addEventListener('DOMContentLoaded', function() {
  const userInput = document.getElementById('user-input');
  const minusBtn = document.querySelector('.minus-btn');
  const plusBtn = document.querySelector('.plus-btn');
  const amountElement = document.getElementById('amount');
  const minError = document.getElementById('minerror');
  const maxError = document.getElementById('maxerror');
  const userText = document.getElementById('users');
  const resetBtn = document.getElementById('resetusers');
  const maxUsers = 30; 
  function updateAmount(users) {
    let baseAmount = 550;
    let extraAmount = 0;

    if (users > 1 && users <= 15) {
      extraAmount = (users -1) * 550;
    } else if (users > 15 && users <= 30) {
      extraAmount = (14 * 550) + (users - 15) * 450;
    } 
    amountElement.textContent = baseAmount + extraAmount;
  }

  function updateUsers(value) {
    const currentUsers = parseInt(userInput.value);
    const newUsers = currentUsers + value;

    if (newUsers >= 1 && newUsers <= maxUsers) {
      userInput.value = newUsers;
      userText.textContent = ' '+newUsers;
      updateAmount(newUsers);
      maxError.style.display = 'none';
    } else if (newUsers > maxUsers) {
      maxError.style.display = 'block'; 
      $('#userLimitModal').modal('show');
    } else {
      minError.style.display = 'block'; 
      setTimeout(() => {
        minError.style.display = 'none';
      }, 3000);
    }
  }

  function flashButton(button) {
    const originalColor = button.style.backgroundColor;
    button.style.backgroundColor = '#444444';
    setTimeout(() => {
      button.style.backgroundColor = originalColor;
    }, 100);

  }

  minusBtn.addEventListener('click', () => {
    updateUsers(-1);
    flashButton(minusBtn);
  });

  plusBtn.addEventListener('click', () => {
    updateUsers(1);
    flashButton(plusBtn);
  });

userInput.addEventListener('change', () => {
  const newUsers = parseInt(userInput.value);
  if (newUsers > maxUsers) {
    userInput.value = maxUsers;
    maxError.style.display = 'block';
    $('#userLimitModal').modal('show');
  } else if (newUsers < 1) {
    userInput.value = 1; 
    minError.style.display = 'block';
    setTimeout(() => {
      minError.style.display = 'none';
    }, 3000);
  } else {
    maxError.style.display = 'none';
    minError.style.display = 'none';
    updateAmount(newUsers);
    userText.textContent = ' '+newUsers;
  }
});

userInput.addEventListener('change', () => {
  const newUsers = parseInt(userInput.value);
  if (newUsers > maxUsers) {
    maxError.style.display = 'block';
    $('#userLimitModal').modal('show');
  } else if (newUsers < 1) {
    minError.style.display = 'block';
    setTimeout(() => {
      minError.style.display = 'none';
    }, 3000);
  } else {
    maxError.style.display = 'none';
    minError.style.display = 'none';
    updateAmount(newUsers);
    userText.textContent = ' '+newUsers;
  }
});

  resetBtn.addEventListener('click', () => {
    userInput.value = 1;
    userText.textContent = ' '+1;
    updateAmount(1);
    maxError.style.display = 'none';
  });

  // Initialize with default values
  updateAmount(1);
});

document.addEventListener('DOMContentLoaded', function() {
  plusBtn.addEventListener('click', () => {
    const currentUsers = parseInt(userInput.value);
    if (currentUsers < maxUsers) {
      updateUsers(1);
      flashButton(plusBtn);
    } else {
      $('#userLimitModal').modal('show');
    }
  });
  const extensionForm = document.getElementById('user-extension-form');
  extensionForm.addEventListener('submit', function(event) {
    event.preventDefault();
    alert('Form submitted! We will review your request.');
    $('#userLimitModal').modal('hide');
  });
});
document.addEventListener('DOMContentLoaded', function() {
  document.getElementById('contactUsBtn').addEventListener('click', function() {
    $('#userLimitModal').modal('show');
  });
});

// ===== Scroll to Top ==== 
$(window).scroll(function() {
    if ($(this).scrollTop() >= 50) {        // If page is scrolled more than 50px
        $('#return-to-top').fadeIn(200);    // Fade in the arrow
    } else {
        $('#return-to-top').fadeOut(200);   // Else fade out the arrow
    }
});
$('#return-to-top').click(function() {      // When arrow is clicked
    $('body,html').animate({
        scrollTop : 0                       // Scroll to top of body
    }, 500);
});

AOS.init({ duration: 1000, once: true })