{% extends 'inspection/base.html' %}

{% block content %}
<div class="d-flex justify-content-between align-items-center mb-3">
  <h2 class="mb-0">Records</h2>
  <form class="d-flex flex-wrap gap-2" method="get" action="">
    <input class="form-control me-2" type="search" name="q" placeholder="Search device or note" value="{{ q }}">
    <select class="form-select me-2" name="status">
      <option value="">All</option>
      <option value="ok" {% if status == 'ok' %}selected{% endif %}>OK</option>
      <option value="warn" {% if status == 'warn' %}selected{% endif %}>Warning</option>
      <option value="fail" {% if status == 'fail' %}selected{% endif %}>Fail</option>
    </select>
    <input class="form-control me-2" type="date" name="start_date" value="{{ start_date }}" placeholder="Start date">
    <input class="form-control me-2" type="date" name="end_date" value="{{ end_date }}" placeholder="End date">
    <button class="btn btn-outline-primary me-1" type="submit" style="white-space:nowrap;">查询</button>
  </form>
  <button class="btn btn-success" data-bs-toggle="modal" data-bs-target="#recordModal" onclick="openRecordModal()">新增记录</button>
</div>

<div class="table-responsive">
  <table class="table table-striped">
    <thead><tr><th>Time</th><th>Device</th><th>Status</th><th>By</th></tr></thead>
    <tbody>
    {% for r in records.object_list %}
      <tr>
        <td>{{ r.checked_at }}</td>
        <td><a href="{% url 'record_detail' r.id %}">{{ r.device.code }} - {{ r.device.name }}</a></td>
        <td>{{ r.status }}</td>
        <td>{{ r.checked_by }}</td>
        <td class="text-end">
          <button class="btn btn-sm btn-outline-primary" data-bs-toggle="modal" data-bs-target="#recordModal" onclick="openRecordModal({{ r.id }}, {{ r.plan.id|default:'null' }}, {{ r.device.id }}, {{ r.item.id|default:'null' }}, '{{ r.status }}', '{{ r.value|escapejs }}', '{{ r.note|escapejs }}', '{{ r.checked_by|escapejs }}')">编辑</button>
          <button class="btn btn-sm btn-outline-danger" onclick="deleteRecord({{ r.id }})">删除</button>
        </td>
      </tr>
    {% empty %}
      <tr><td colspan="5">No records.</td></tr>
    {% endfor %}
    </tbody>
  </table>
</div>

<nav class="mt-4">
  <ul class="pagination">
    {% if records.has_previous %}
      <li class="page-item"><a class="page-link" href="?q={{ q }}&status={{ status }}&start_date={{ start_date }}&end_date={{ end_date }}&page={{ records.previous_page_number }}">Previous</a></li>
    {% else %}
      <li class="page-item disabled"><span class="page-link">Previous</span></li>
    {% endif %}
    <li class="page-item disabled"><span class="page-link">Page {{ records.number }} of {{ records.paginator.num_pages }}</span></li>
    {% if records.has_next %}
      <li class="page-item"><a class="page-link" href="?q={{ q }}&status={{ status }}&start_date={{ start_date }}&end_date={{ end_date }}&page={{ records.next_page_number }}">Next</a></li>
    {% else %}
      <li class="page-item disabled"><span class="page-link">Next</span></li>
    {% endif %}
  </ul>
</nav>



<!-- Modal for add/edit record -->
<div class="modal fade" id="recordModal" tabindex="-1" aria-labelledby="recordModalLabel" aria-hidden="true">
  <div class="modal-dialog modal-lg">
    <div class="modal-content">
      <form id="recordForm" onsubmit="submitRecordForm(event)" enctype="multipart/form-data">
        <div class="modal-header">
          <h5 class="modal-title" id="recordModalLabel">新增/编辑检查记录</h5>
          <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
        </div>
        <div class="modal-body">
          <input type="hidden" id="recordId">
          <div class="row">
            <div class="col-md-6 mb-3">
              <label class="form-label">检查计划</label>
              <select id="recordPlan" class="form-select">
                <option value="">(none)</option>
                {% for p in plans %}
                <option value="{{ p.id }}">{{ p.name }}</option>
                {% endfor %}
              </select>
            </div>
            <div class="col-md-6 mb-3">
              <label class="form-label">设备</label>
              <select id="recordDevice" class="form-select" required>
                {% for d in devices %}
                <option value="{{ d.id }}">{{ d.code }} - {{ d.name }}</option>
                {% endfor %}
              </select>
            </div>
          </div>

          <div class="row">
            <div class="col-md-6 mb-3">
              <label class="form-label">检查项</label>
              <select id="recordItem" class="form-select">
                <option value="">(none)</option>
                {% for it in items %}
                <option value="{{ it.id }}">{{ it.name }}</option>
                {% endfor %}
              </select>
            </div>
            <div class="col-md-6 mb-3">
              <label class="form-label">状态</label>
              <select id="recordStatus" class="form-select" required>
                <option value="ok">OK</option>
                <option value="warn">Warning</option>
                <option value="fail">Fail</option>
              </select>
            </div>
          </div>

          <div class="mb-3">
            <label class="form-label">值</label>
            <input id="recordValue" class="form-control">
          </div>
          <div class="mb-3">
            <label class="form-label">备注</label>
            <textarea id="recordNote" class="form-control" rows="3"></textarea>
          </div>

          <div class="mb-3">
            <label class="form-label">记录人</label>
            <input id="recordCheckedBy" class="form-control" placeholder="默认当前登录用户">
          </div>

          <div class="row">
            <div class="col-md-6 mb-3">
              <label class="form-label">照片 (可拍照上传)</label>
              <input id="recordPhoto" type="file" accept="image/*" capture="environment" class="form-control">
            </div>
            <div class="col-md-6 mb-3">
              <label class="form-label">附件 (可选)</label>
              <input id="recordAttachment" type="file" class="form-control">
            </div>
          </div>

        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">取消</button>
          <button type="submit" class="btn btn-primary">保存</button>
        </div>
      </form>
    </div>
  </div>
</div>

<script>
function openRecordModal(id, plan, device, item, status, value, note, checkedBy){
  document.getElementById('recordId').value = id || '';
  document.getElementById('recordPlan').value = plan || '';
  document.getElementById('recordDevice').value = device || '';
  document.getElementById('recordItem').value = item || '';
  document.getElementById('recordStatus').value = status || 'ok';
  document.getElementById('recordValue').value = value || '';
  document.getElementById('recordNote').value = note || '';
  document.getElementById('recordCheckedBy').value = checkedBy || window.currentUsername || '';
  // clear file inputs
  document.getElementById('recordPhoto').value = '';
  document.getElementById('recordAttachment').value = '';
}

async function submitRecordForm(e){
  e.preventDefault();
  const id = document.getElementById('recordId').value;
  const plan = document.getElementById('recordPlan').value || '';
  const device = document.getElementById('recordDevice').value;
  const item = document.getElementById('recordItem').value || '';
  const status = document.getElementById('recordStatus').value;
  const value = document.getElementById('recordValue').value;
  const note = document.getElementById('recordNote').value;
  const checkedBy = document.getElementById('recordCheckedBy').value || window.currentUsername || '';
  const photoInput = document.getElementById('recordPhoto');
  const attachmentInput = document.getElementById('recordAttachment');

  const form = new FormData();
  if (plan) form.append('plan', plan);
  form.append('device', device);
  if (item) form.append('item', item);
  form.append('status', status);
  form.append('value', value);
  form.append('note', note);
  if (checkedBy) form.append('checked_by', checkedBy);
  if (photoInput.files.length > 0) form.append('photo', photoInput.files[0]);
  if (attachmentInput.files.length > 0) form.append('attachment', attachmentInput.files[0]);

  let url = '/api/records/';
  let method = 'POST';
  if (id){ url += id + '/'; method = 'PUT'; }

  const headers = csrfHeaders();
  const res = await authFetch(url, { method, headers, body: form });
  if (res.ok) { location.reload(); }
  else { const txt = await res.text(); alert('保存失败: ' + txt); }
}

async function deleteRecord(id){
  if (!confirm('确定删除该记录吗？')) return;
  const res = await authFetch('/api/records/' + id + '/', { method: 'DELETE', headers: csrfHeaders() });
  if (res.ok) location.reload(); else {
    let message = '删除失败';
    try {
      const detail = await res.text();
      if (detail) message += ': ' + detail;
    } catch (err) {}
    alert(message);
  }
}
</script>

{% endblock %}