{% extends "layout.html" %}
{% block content %}
<div class="container mt-4">
  <h2>Water Quality Tests</h2>
  <button class="btn btn-primary mb-3" data-toggle="modal" data-target="#testModal">New Test</button>
  <table class="table table-striped">
    <thead><tr><th>ID</th><th>System</th><th>Type</th><th>Date</th><th>Value</th><th>Actions</th></tr></thead>
    <tbody>
      {% for t in tests %}
      <tr>
        <td>{{ t.id }}</td>
        <td>{{ t.system.name }}</td>
        <td>{{ t.test_type_rel.name }}</td>
        <td>{{ t.test_date }}</td>
        <td>{{ t.value }}</td>
        <td>
          <button class="btn btn-sm btn-secondary" data-toggle="modal" data-target="#testModal"
                  data-id="{{ t.id }}"
                  data-system="{{ t.system_id }}"
                  data-type="{{ t.test_type }}"
                  data-date="{{ t.test_date }}"
                  data-value="{{ t.value }}">Edit</button>
          <a href="{{ url_for('water_quality.delete_test', id=t.id) }}" class="btn btn-sm btn-danger">Delete</a>
        </td>
      </tr>
      {% endfor %}
    </tbody>
  </table>
</div>

<!-- Test Modal -->
<div class="modal fade" id="testModal" tabindex="-1">
  <div class="modal-dialog">
    <form id="testForm" method="post" action="">
      <div class="modal-content">
        <div class="modal-header"><h5 class="modal-title">Quality Test</h5><button class="close" data-dismiss="modal">&times;</button></div>
        <div class="modal-body">
          <input type="hidden" id="test-id" name="id">
          <div class="form-group">
            <label>System</label>
            <select id="test-system" name="system_id" class="form-control">
              {% for ws in water_systems %}<option value="{{ ws.id }}">{{ ws.name }}</option>{% endfor %}
            </select>
          </div>
          <div class="form-group">
            <label>Test Type</label>
            <select id="test-type" name="test_type_id" class="form-control">
              {% for tp in types %}<option value="{{ tp.id }}">{{ tp.name }}</option>{% endfor %}
            </select>
          </div>
          <div class="form-group">
            <label>Date</label>
            <input type="date" id="test-date" name="test_date" class="form-control">
          </div>
          <div class="form-group">
            <label>Value</label>
            <input type="text" id="test-value" name="value" class="form-control">
          </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>
$('#testModal').on('show.bs.modal', function(e){
  var btn = $(e.relatedTarget), form = $('#testForm');
  var id = btn.data('id');
  if(id){
    form.attr('action','/api/quality-tests/'+id);
    form.append('<input name="_method" type="hidden" value="PUT">');
    $('#test-id').val(id);
    $('#test-system').val(btn.data('system'));
    $('#test-type').val(btn.data('type'));
    $('#test-date').val(btn.data('date'));
    $('#test-value').val(btn.data('value'));
  } else {
    form.attr('action','/api/quality-tests');
    form.find('input[name="_method"]').remove();
    form[0].reset();
  }
});
</script>
{% endblock %}