{% extends "layout.html" %}
{% block content %}
<div class="container mt-4">
  <h2>Community Contributions</h2>
  <button class="btn btn-primary mb-3" data-toggle="modal" data-target="#contribModal">New Contribution</button>
  <table class="table table-striped">
    <thead>
      <tr>
        <th>ID</th><th>System</th><th>Type</th><th>Amount</th><th>Date</th><th>Actions</th>
      </tr>
    </thead>
    <tbody>
      {% for rec in contributions %}
      <tr>
        <td>{{ rec.id }}</td>
        <td>{{ rec.water_system.name }}</td>
        <td>{{ rec.type.name }}</td>
        <td>{{ rec.amount or '-' }}</td>
        <td>{{ rec.date_recorded }}</td>
        <td>
          <button class="btn btn-sm btn-secondary" data-toggle="modal" 
                  data-target="#contribModal" 
                  data-id="{{ rec.id }}"
                  data-system="{{ rec.water_system_id }}"
                  data-type="{{ rec.contribution_type }}"
                  data-amount="{{ rec.amount }}"
                  data-date="{{ rec.date_recorded }}">Edit</button>
          <a href="{{ url_for('community.delete_contribution', id=rec.id) }}" 
             class="btn btn-sm btn-danger">Delete</a>
        </td>
      </tr>
      {% endfor %}
    </tbody>
  </table>
</div>

<!-- Contribution Modal -->
<div class="modal fade" id="contribModal" tabindex="-1" role="dialog">
  <div class="modal-dialog" role="document">
    <form id="contribForm" method="post" action="">
      <div class="modal-content">
        <div class="modal-header">
          <h5 class="modal-title">Community Contribution</h5>
          <button type="button" class="close" data-dismiss="modal">&times;</button>
        </div>
        <div class="modal-body">
          <input type="hidden" name="id" id="contrib-id">
          <div class="form-group">
            <label>Water System</label>
            <select name="system_id" id="contrib-system" class="form-control" required>
              {% for ws in water_systems %}<option value="{{ ws.id }}">{{ ws.name }}</option>{% endfor %}
            </select>
          </div>
          <div class="form-group">
            <label>Type</label>
            <select name="contribution_type_id" id="contrib-type" class="form-control" required>
              {% for t in types %}<option value="{{ t.id }}">{{ t.name }}</option>{% endfor %}
            </select>
          </div>
          <div class="form-group">
            <label>Amount</label>
            <input type="number" step="0.01" name="amount" id="contrib-amount" class="form-control">
          </div>
          <div class="form-group">
            <label>Date</label>
            <input type="date" name="date_recorded" id="contrib-date" class="form-control" required>
          </div>
        </div>
        <div class="modal-footer">
          <button class="btn btn-secondary" data-dismiss="modal">Cancel</button>
          <button type="submit" class="btn btn-primary">Save</button>
        </div>
      </div>
    </form>
  </div>
</div>
{% endblock %}

{% block scripts %}
<script>
$('#contribModal').on('show.bs.modal', function(e){
  var btn = $(e.relatedTarget);
  var id = btn.data('id');
  if(id){
    // editing
    $('#contribForm').attr('action','/api/community/contributions/'+id);
    $('#contribForm').append('<input type="hidden" name="_method" value="PUT">');
    $('#contrib-id').val(id);
    $('#contrib-system').val(btn.data('system'));
    $('#contrib-type').val(btn.data('type'));
    $('#contrib-amount').val(btn.data('amount'));
    $('#contrib-date').val(btn.data('date'));
  } else {
    // creating
    $('#contribForm').attr('action','/api/community/contributions');
    $('#contribForm input[name="_method"]').remove();
    $('#contribForm')[0].reset();
  }
});
</script>
{% endblock %}