{% extends "layout.html" %}
{% block content %}
<div class="container mt-4">
  <h2>O&M Visits</h2>
  <button class="btn btn-primary mb-3" data-toggle="modal" data-target="#visitModal">New Visit</button>
  <table class="table table-striped">
    <thead>
      <tr><th>ID</th><th>System</th><th>Type</th><th>Date</th><th>Notes</th><th>Actions</th></tr>
    </thead>
    <tbody>
      {% for v in visits %}
      <tr>
        <td>{{ v.id }}</td>
        <td>{{ v.water_system.name }}</td>
        <td>{{ v.type.name }}</td>
        <td>{{ v.visit_date }}</td>
        <td>{{ v.notes }}</td>
        <td>
          <button class="btn btn-sm btn-secondary" data-toggle="modal" 
                  data-target="#visitModal" 
                  data-id="{{ v.id }}"
                  data-system="{{ v.water_system_id }}"
                  data-type="{{ v.visit_type }}"
                  data-date="{{ v.visit_date }}"
                  data-notes="{{ v.notes }}">Edit</button>
          <a href="{{ url_for('om_visits.delete_visit', id=v.id) }}" class="btn btn-sm btn-danger">Delete</a>
        </td>
      </tr>
      {% endfor %}
    </tbody>
  </table>
</div>

<!-- Visit Modal -->
<div class="modal fade" id="visitModal" tabindex="-1">
  <div class="modal-dialog">
    <form id="visitForm" method="post" action="">
      <div class="modal-content">
        <div class="modal-header"><h5 class="modal-title">O&M Visit</h5><button class="close" data-dismiss="modal">&times;</button></div>
        <div class="modal-body">
          <input type="hidden" name="id" id="visit-id">
          <div class="form-group">
            <label>Water System</label>
            <select name="system_id" id="visit-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="visit_type_id" id="visit-type" class="form-control" required>
              {% for t in types %}<option value="{{ t.id }}">{{ t.name }}</option>{% endfor %}
            </select>
          </div>
          <div class="form-group">
            <label>Date</label>
            <input type="date" name="visit_date" id="visit-date" class="form-control" required>
          </div>
          <div class="form-group">
            <label>Notes</label>
            <textarea name="notes" id="visit-notes" class="form-control"></textarea>
          </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>
$('#visitModal').on('show.bs.modal', function(e){
  var btn = $(e.relatedTarget), form = $('#visitForm');
  var id = btn.data('id');
  if(id){
    form.attr('action','/api/om-visits/'+id);
    form.append('<input type="hidden" name="_method" value="PUT">');
    $('#visit-id').val(id);
    $('#visit-system').val(btn.data('system'));
    $('#visit-type').val(btn.data('type'));
    $('#visit-date').val(btn.data('date'));
    $('#visit-notes').val(btn.data('notes'));
  } else {
    form.attr('action','/api/om-visits');
    form.find('input[name="_method"]').remove();
    form[0].reset();
  }
});
</script>
{% endblock %}