{% extends 'base.html' %}
{% block title %}Materials{% endblock %}
{% block content %}
<div class="page-header">
  <div class="page-title">Materials <small>Manage rubber product types</small></div>
</div>

<div class="row g-4">
  <div class="col-lg-5">
    <div class="card">
      <div class="card-header"><span class="card-title">Add Material</span></div>
      <div class="card-body">
        {% if can_edit() %}
        <form method="post">
          <div class="form-group mb-3">
            <label>Material Name *</label>
            <input type="text" name="name" required placeholder="e.g. RSS 1">
          </div>
          <div class="form-group mb-3">
            <label>Unit</label>
            <select name="unit">
              <option value="kg">kg</option>
              <option value="L">L (Litres)</option>
              <option value="mt">mt (Metric Ton)</option>
            </select>
          </div>
          <button type="submit" class="btn btn-primary btn-sm">Add Material</button>
        </form>
        {% else %}
        <p class="text-muted">You don't have permission to add materials.</p>
        {% endif %}
      </div>
    </div>
  </div>

  <div class="col-lg-7">
    <div class="card">
      <div class="card-header">
        <span class="card-title">Materials</span>
        <span class="badge badge-open">{{ materials|length }}</span>
      </div>
      <div class="table-wrap">
        <table>
          <thead><tr><th>Name</th><th>Unit</th><th class="no-print"></th></tr></thead>
          <tbody>
          {% for m in materials %}
            <tr>
              <td style="font-weight:500">{{ m.name }}</td>
              <td><span class="badge badge-open">{{ m.unit }}</span></td>
              <td class="no-print">
                <div class="d-flex gap-1">
                  <button class="btn btn-outline-secondary btn-sm btn-edit-mat"
                    data-mid="{{ m.id }}"
                    data-name="{{ m.name }}"
                    data-unit="{{ m.unit }}">Edit</button>
                  <form method="post" onsubmit="return confirm('Delete material?')">
                    <input type="hidden" name="id" value="{{ m.id }}">
                    <input type="hidden" name="action" value="delete">
                    <button type="submit" class="btn btn-danger btn-sm">Delete</button>
                  </form>
                </div>
              </td>
            </tr>
          {% else %}
            <tr><td colspan="3" class="empty-state">No materials yet</td></tr>
          {% endfor %}
          </tbody>
        </table>
      </div>
    </div>
  </div>
</div>

<!-- Edit Modal (Bootstrap) -->
<div class="modal fade" id="editModal" tabindex="-1">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title">Edit Material</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
      </div>
      <form method="post">
        <div class="modal-body">
          <input type="hidden" name="id" id="editId">
          <div class="form-group mb-3">
            <label>Name *</label>
            <input type="text" name="name" id="editName" required>
          </div>
          <div class="form-group mb-3">
            <label>Unit</label>
            <select name="unit" id="editUnit">
              <option value="kg">kg</option>
              <option value="L">L</option>
              <option value="mt">mt</option>
            </select>
          </div>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-outline-secondary" data-bs-dismiss="modal">Cancel</button>
          <button type="submit" class="btn btn-primary">Save</button>
        </div>
      </form>
    </div>
  </div>
</div>

{% endblock %}
{% block scripts %}
<script>
document.querySelectorAll('.btn-edit-mat').forEach(function(btn) {
  btn.addEventListener('click', function() {
    document.getElementById('editId').value   = this.dataset.mid;
    document.getElementById('editName').value = this.dataset.name;
    document.getElementById('editUnit').value = this.dataset.unit;
    new bootstrap.Modal(document.getElementById('editModal')).show();
  });
});
</script>
{% endblock %}