// Mock data for PC statuses (you will replace this with your API call)
const pcs = [
  { id: 1, available: true },
  { id: 2, available: false },
  // ... other PCs ...
];

// Populate the PC selection with buttons
const pcContainer = document.getElementById('pc-selection');
pcs.forEach(pc => {
  const button = document.createElement('button');
  button.textContent = `PC ${pc.id}`;
  button.disabled = !pc.available;
  button.onclick = function() { selectPC(pc.id); };
  pcContainer.appendChild(button);
});

// Function to handle PC selection
const selectedPCs = [];
function selectPC(id) {
  if (selectedPCs.includes(id)) {
    selectedPCs.splice(selectedPCs.indexOf(id), 1);
  } else {
    selectedPCs.push(id);
  }
}

// Populate hours dropdown
const hoursDropdown = document.getElementById('hours');
for (let i = 1; i <= 12; i++) {
  const option = document.createElement('option');
  option.value = i;
  option.textContent = `${i} hour${i > 1 ? 's' : ''}`;
  hoursDropdown.appendChild(option);
}

// Update total price when hours change
hoursDropdown.addEventListener('change', function() {
  const hours = this.value;
  const price = hours * 5; // Each hour costs $5
  document.getElementById('totalPrice').textContent = `Total Price: $${price}`;
});

// Handle form submission
document.getElementById('submitBtn').addEventListener('click', submitForm);

function submitForm() {
  const phone = document.getElementById('phone').value;
  // ... Submit to webhook and handle Stripe redirection ...
}