<?php include('../includes/db.php'); ?>
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Fee Payment Form</title>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body class="p-4">
<div class="container">
  <h2 class="mb-4">Fee Payment</h2>
  <form id="paymentForm" method="post" action="submit_payment.php">
    <div class="mb-3">
      <label for="student_id" class="form-label">Student ID</label>
      <input type="number" class="form-control" name="student_id" required>
    </div>

    <div class="mb-3">
      <label for="course_name" class="form-label">Course Name</label>
      <input type="text" class="form-control" name="course_name" required>
    </div>

    <div class="row">
      <div class="col-md-4 mb-3">
        <label class="form-label">Course Fee (LKR)</label>
        <input type="number" step="0.01" class="form-control" name="course_fee" required>
      </div>
      <div class="col-md-4 mb-3">
        <label class="form-label">Registration Fee (LKR)</label>
        <input type="number" step="0.01" class="form-control" name="registration_fee" required>
      </div>
      <div class="col-md-4 mb-3">
        <label class="form-label">Certificate Fee (USD)</label>
        <input type="number" step="0.01" class="form-control" name="certificate_fee_usd" required>
      </div>
    </div>

    <div class="mb-3">
      <label class="form-label">Payment Type</label>
      <select name="payment_type" class="form-select" required onchange="toggleInstallments(this.value)">
        <option value="full">Full Payment</option>
        <option value="installment">Installments</option>
      </select>
    </div>

    <div id="installmentsSection" style="display:none;">
      <h5 class="mt-4">Installments</h5>
      <div id="installmentInputs">
        <!-- JavaScript will insert installment fields here -->
      </div>
      <button type="button" class="btn btn-secondary mt-2" onclick="addInstallment()">+ Add Installment</button>
    </div>

    <button type="submit" class="btn btn-primary mt-4">Submit Payment</button>
  </form>
</div>

<script>
function toggleInstallments(type) {
  document.getElementById('installmentsSection').style.display = (type === 'installment') ? 'block' : 'none';
}

function addInstallment() {
  const index = document.querySelectorAll('.installment-row').length + 1;
  const html = `
    <div class="installment-row border p-3 my-2">
      <strong>Installment ${index}</strong>
      <div class="row">
        <div class="col-md-3">
          <label>Course Fee</label>
          <input type="number" name="installments[${index}][course_fee]" class="form-control" required>
        </div>
        <div class="col-md-3">
          <label>Registration Fee</label>
          <input type="number" name="installments[${index}][registration_fee]" class="form-control" required>
        </div>
        <div class="col-md-3">
          <label>Certificate Fee (USD)</label>
          <input type="number" name="installments[${index}][certificate_fee_usd]" class="form-control" required>
        </div>
        <div class="col-md-3">
          <label>Due Date</label>
          <input type="date" name="installments[${index}][due_date]" class="form-control" required>
        </div>
      </div>
    </div>`;
  document.getElementById('installmentInputs').insertAdjacentHTML('beforeend', html);
}
</script>
</body>
</html>
