<div class="card p-3">
  <div class="d-flex justify-content-between align-items-center mb-3">
    <h5>Loan Products</h5>
    <button class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#productModal">Add Product</button>
  </div>

  <table class="table">
    <thead><tr><th>Name</th><th>Slug</th><th>Interest</th><th>Fee %</th><th>Min</th><th>Max</th><th>Action</th></tr></thead>
    <tbody>
      <?php foreach($products as $p): ?>
      <tr>
        <td><?= esc($p['name']) ?></td>
        <td><?= esc($p['slug']) ?></td>
        <td><?= esc($p['base_interest']) ?>%</td>
        <td><?= esc($p['processing_fee_pct']) ?>%</td>
        <td>₹ <?= esc(number_format($p['min_amount'],2)) ?></td>
        <td>₹ <?= esc(number_format($p['max_amount'],2)) ?></td>
        <td>
          <button class="btn btn-sm btn-outline-secondary" onclick="openEdit(<?= $p['id'] ?>, '<?= esc($p['name']) ?>', '<?= esc($p['slug']) ?>', <?= $p['base_interest'] ?>, <?= $p['processing_fee_pct'] ?>, <?= $p['min_amount'] ?>, <?= $p['max_amount'] ?>)">Edit</button>
        </td>
      </tr>
      <?php endforeach; ?>
    </tbody>
  </table>
</div>

<!-- Modal -->
<div class="modal fade" id="productModal" tabindex="-1">
  <div class="modal-dialog">
    <form method="post" action="/admin/products/save" class="modal-content">
      <?= csrf_field() ?>
      <input type="hidden" name="id" id="prod_id">
      <div class="modal-header"><h5 class="modal-title">Add / Edit Product</h5><button class="btn-close" data-bs-dismiss="modal"></button></div>
      <div class="modal-body">
        <div class="mb-2"><label>Name</label><input class="form-control" name="name" id="prod_name" required></div>
        <div class="mb-2"><label>Slug</label><input class="form-control" name="slug" id="prod_slug" required></div>
        <div class="mb-2"><label>Interest (%)</label><input class="form-control" name="base_interest" id="prod_interest" required></div>
        <div class="mb-2"><label>Processing Fee (%)</label><input class="form-control" name="processing_fee_pct" id="prod_fee" required></div>
        <div class="mb-2"><label>Min Amount</label><input class="form-control" name="min_amount" id="prod_min" required></div>
        <div class="mb-2"><label>Max Amount</label><input class="form-control" name="max_amount" id="prod_max" required></div>
      </div>
      <div class="modal-footer"><button class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button><button class="btn btn-primary">Save</button></div>
    </form>
  </div>
</div>

<script>
function openEdit(id,name,slug,interest,fee,min,max){
  document.getElementById('prod_id').value = id;
  document.getElementById('prod_name').value = name;
  document.getElementById('prod_slug').value = slug;
  document.getElementById('prod_interest').value = interest;
  document.getElementById('prod_fee').value = fee;
  document.getElementById('prod_min').value = min;
  document.getElementById('prod_max').value = max;
  var modal = new bootstrap.Modal(document.getElementById('productModal'));
  modal.show();
}
</script>