<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Job Process Schedule</title>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">

</head>
<body class="p-4">

<table class="table table-bordered text-center">
  <thead class="table-dark">
    <tr>
      <th>Step</th>
      <th>Duration</th>
      <th>Left Days</th>
      <th>Status</th>
      <th>Job</th>
    </tr>
  </thead>
  <tbody id="jobTable"></tbody>
</table>

<script>
const steps = [
  { name: "Forging", duration: 15 },
  { name: "Naram", duration: 1 },
  { name: "Charaiyan", duration: 4 },
  { name: "Naram", duration: 1 },
  { name: "Bend", duration: 3 },
  { name: "Khanchay", duration: 3 },
  { name: "Ragaraiyan", duration: 10 },
  { name: "Qc 1", duration: 1 },
  { name: "Temper", duration: 1 },
  { name: "Tazab", duration: 1 },
  { name: "Maramat", duration: 1 },
  { name: "Chakwa", duration: 2 },
  { name: "Jaraiye", duration: 3 },
  { name: "Tiyari", duration: 4 },
  { name: "Plant", duration: 1 },
  { name: "Tiyari", duration: 3 },
  { name: "Ultrasonic", duration: 1 },
  { name: "Maramat (2nd time)", duration: 1 },
  { name: "Goli", duration: 2 },
  { name: "Mistri checking", duration: 2 },
  { name: "Passivation", duration: 1 },
  { name: "Sand", duration: 1 },
  { name: "Dany Wala", duration: 1 },
  { name: "Att. Puff", duration: 1 },
  { name: "Polishing rebuff", duration: 2 },
  { name: "Ultrasonic wash", duration: 1 },
  { name: "Stamp", duration: 1 },
  { name: "Packing", duration: 2 }
];

function renderTable() {
  const tbody = document.getElementById('jobTable');
  tbody.innerHTML = '';

  let activeStepFound = false;

  steps.forEach((step, index) => {
    const leftDays = step.duration;
    let status = step.status || 'Process';

    let disabled = '';
    if (activeStepFound || status === 'Complete') {
      disabled = 'disabled';
    } else {
      activeStepFound = true;
    }

    let jobIcon = "<i class='fas fa-clock text-warning'></i>";
    if (status === 'Complete') {
      jobIcon = "<i class='fas fa-check text-success'></i>";
    }

    const row = document.createElement('tr');
    row.innerHTML = `
      <td>${step.name}</td>
      <td>${step.duration} days</td>
      <td>${leftDays}</td>
      <td>
        <select class="form-select status-update" data-step="${index}" ${disabled}>
          <option value="Process" ${status==='Process'?'selected':''}>Process</option>
          <option value="Complete" ${status==='Complete'?'selected':''}>Complete</option>
          <option value="Overdue" ${status==='Overdue'?'selected':''}>Overdue</option>
        </select>
      </td>
      <td>${jobIcon}</td>
    `;
    tbody.appendChild(row);
  });
}

// listen to changes
window.addEventListener('change', (e) => {
  if (e.target.classList.contains('status-update')) {
    const stepIndex = e.target.dataset.step;
    const value = e.target.value;
    steps[stepIndex].status = value;
    renderTable();
  }
});

renderTable();
</script>
</body>
</html>
