<section class="plan-table-container">
  <h1>Manage Plans</h1>
  <button id="toggle-passed-btn" class="btn">Show Passed Plans</button>
  <table id="plan-table" aria-label="Plans Table">
    <thead>
      <tr>
        <th>ID</th>
        <th>From Date</th>
        <th>Weeks</th>
        <th>End Date</th>
        <th>Status</th>
        <th>Actions</th>
      </tr>
    </thead>
    <tbody>
      <!-- rows dynamically loaded by js -->
    </tbody>
  </table>
</section>

<script>
  const togglePassedBtn = document.getElementById('toggle-passed-btn');
  let showPassed = false;

  function calcEndDate(fromDate, weeks) {
    const date = new Date(fromDate);
    date.setDate(date.getDate() + weeks * 7 - 1);
    return date.toISOString().slice(0, 10);
  }

  function isPassed(plan) {
    const today = new Date();
    const endDate = new Date(calcEndDate(plan.fromDate, plan.weeks));
    return endDate < today;
  }

  function isActive(plan) {
    const today = new Date();
    const startDate = new Date(plan.fromDate);
    startDate.setDate(startDate.getDate() - 7); // 1 week before start
    const endDate = new Date(calcEndDate(plan.fromDate, plan.weeks));
    return today >= startDate && today <= endDate;
  }

  async function loadPlans() {
    const res = await fetch('Functions/Plans/getPlans.php');
    const data = await res.json();

    const tbody = document.querySelector('#plan-table tbody');
    tbody.innerHTML = '';

    if (data.status !== 'success') {
      tbody.innerHTML = `<tr><td colspan="6">Failed to load plans: ${data.message}</td></tr>`;
      return;
    }

    data.plans.forEach(plan => {
      if (!showPassed && isPassed(plan)) return;

      const tr = document.createElement('tr');
      tr.dataset.id = plan.pk_plan;

      const endDate = calcEndDate(plan.fromDate, plan.weeks);
      const passed = isPassed(plan);
      const active = isActive(plan);
      const modifiable = !passed && !active;

      if (!modifiable) tr.classList.add('disabled-row');

      tr.classList.toggle('passed-plan', passed);
      tr.classList.toggle('active-plan', active);

      tr.innerHTML = `
        <td>${plan.pk_plan}</td>
        <td><input type="date" class="fromDate" value="${plan.fromDate}" ${modifiable ? '' : 'disabled'}></td>
        <td><input type="number" min="1" class="weeks" value="${plan.weeks}" ${modifiable ? '' : 'disabled'}></td>
        <td>${endDate}</td>
        <td>${passed ? 'Passed' : (active ? 'Active' : 'Upcoming')}</td>
        <td>
          <button class="btn-edit" ${modifiable ? '' : 'disabled'}>Edit</button>
          <button class="btn-update" style="display:none;">Save</button>
          <button class="btn-delete" ${modifiable ? '' : 'disabled'}>Delete</button>
        </td>
      `;

      tbody.appendChild(tr);
    });
  }

  document.addEventListener('DOMContentLoaded', () => {
    const tbody = document.querySelector('#plan-table tbody');

    loadPlans();

    togglePassedBtn.addEventListener('click', () => {
      showPassed = !showPassed;
      togglePassedBtn.textContent = showPassed ? 'Hide Passed Plans' : 'Show Passed Plans';
      loadPlans();
    });

    tbody.addEventListener('click', async e => {
      const target = e.target;
      const tr = target.closest('tr');
      if (!tr) return;

      const id = tr.dataset.id;

      if (target.classList.contains('btn-edit')) {
        tr.querySelectorAll('input').forEach(input => input.disabled = false);
        target.style.display = 'none';
        tr.querySelector('.btn-update').style.display = 'inline-block';
      }

      if (target.classList.contains('btn-update')) {
        const fromDate = tr.querySelector('.fromDate').value;
        const weeks = tr.querySelector('.weeks').value;

        if (!fromDate || weeks < 1) {
          alert('Please enter a valid From Date and Weeks >= 1');
          return;
        }

        const updateRes = await fetch('Functions/Plans/updatePlan.php', {
          method: 'POST',
          headers: {'Content-Type': 'application/json'},
          body: JSON.stringify({ pk_plan: id, fromDate, weeks })
        });

        const updateData = await updateRes.json();

        if (updateData.status === 'success') {
          alert('Plan updated');
          tr.querySelectorAll('input').forEach(input => input.disabled = true);
          target.style.display = 'none';
          tr.querySelector('.btn-edit').style.display = 'inline-block';
          loadPlans(); // refresh list to update statuses/colors
        } else {
          alert('Update failed: ' + updateData.message);
        }
      }

      if (target.classList.contains('btn-delete')) {
        if (!confirm('Are you sure you want to delete this plan?')) return;

        const deleteRes = await fetch('Functions/Plans/deletePlan.php', {
          method: 'POST',
          headers: {'Content-Type': 'application/json'},
          body: JSON.stringify({ pk_plan: id })
        });

        const deleteData = await deleteRes.json();

        if (deleteData.status === 'success') {
          alert('Plan deleted');
          tr.remove();
        } else {
          alert('Delete failed: ' + deleteData.message);
        }
      }
    });
  });
</script>