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

{% block content %}
<div class="d-flex justify-content-between align-items-center mb-3">
  <h2 class="mb-0">Devices</h2>
  <form class="d-flex align-items-center" method="get" action="">
    <input class="form-control me-2" type="search" name="q" placeholder="Search name or code" value="{{ q }}">
    <input class="form-control me-2" type="text" name="group" placeholder="Group" value="{{ group }}">
    <select class="form-select me-2" name="sort" style="width:auto;">
      <option value="created_at" {% if sort == 'created_at' %}selected{% endif %}>按创建时间</option>
      <option value="name" {% if sort == 'name' %}selected{% endif %}>按名称</option>
    </select>
    <select class="form-select me-2" name="order" style="width:auto;">
      <option value="desc" {% if order == 'desc' %}selected{% endif %}>降序</option>
      <option value="asc" {% if order == 'asc' %}selected{% endif %}>升序</option>
    </select>
    <button class="btn btn-outline-primary me-1" type="submit" style="white-space:nowrap;">查询</button>
  </form>
  <button class="btn btn-success ms-2" data-bs-toggle="modal" data-bs-target="#deviceModal" onclick="openDeviceModal()">新增设备</button>
</div>

<div class="row g-3">
  {% for d in devices.object_list %}
    <div class="col-md-6">
      <div class="card position-relative">
        <div class="position-absolute top-0 end-0 p-2">
          <button class="btn btn-sm btn-outline-primary me-1" data-bs-toggle="modal" data-bs-target="#deviceModal" onclick="openDeviceModal({{ d.pk }}, '{{ d.code }}', '{{ d.name }}', '{{ d.location }}', '{{ d.group }}')">编辑</button>
          <button class="btn btn-sm btn-outline-danger" onclick="deleteDevice({{ d.pk }})">删除</button>
        </div>
        <div class="card-body">
          <h5 class="card-title"><a href="/devices/{{ d.pk }}/">{{ d.code }} - {{ d.name }}</a></h5>
          <p class="card-text">{{ d.location }} <small class="text-muted">{{ d.group }}</small></p>
          <p class="card-text"><small class="text-muted">创建时间：{{ d.created_at|date:'Y-m-d H:i' }}</small></p>
        </div>
      </div>
    </div>
  {% empty %}
    <div class="col-12"><div class="alert alert-warning">No devices found.</div></div>
  {% endfor %}
</div>

<nav class="mt-4">
  <ul class="pagination">
    {% if devices.has_previous %}
      <li class="page-item"><a class="page-link" href="?q={{ q }}&group={{ group }}&page={{ devices.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 {{ devices.number }} of {{ devices.paginator.num_pages }}</span></li>
    {% if devices.has_next %}
      <li class="page-item"><a class="page-link" href="?q={{ q }}&group={{ group }}&page={{ devices.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 device -->
<div class="modal fade" id="deviceModal" tabindex="-1" aria-labelledby="deviceModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <form id="deviceForm" onsubmit="submitDeviceForm(event)">
        <div class="modal-header">
          <h5 class="modal-title" id="deviceModalLabel">新增/编辑设备</h5>
          <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
        </div>
        <div class="modal-body">
          <input type="hidden" id="deviceId">
          <div class="mb-3">
            <label for="deviceCode" class="form-label">设备编号</label>
            <input type="text" class="form-control" id="deviceCode" required>
          </div>
          <div class="mb-3">
            <label for="deviceName" class="form-label">设备名称</label>
            <input type="text" class="form-control" id="deviceName" required>
          </div>
          <div class="mb-3">
            <label for="deviceLocation" class="form-label">位置</label>
            <input type="text" class="form-control" id="deviceLocation">
          </div>
          <div class="mb-3">
            <label for="deviceGroup" class="form-label">分组</label>
            <input type="text" class="form-control" id="deviceGroup">
          </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 openDeviceModal(id, code, name, location, group) {
  document.getElementById('deviceId').value = id || '';
  document.getElementById('deviceCode').value = code || '';
  document.getElementById('deviceName').value = name || '';
  document.getElementById('deviceLocation').value = location || '';
  document.getElementById('deviceGroup').value = group || '';
}

async function submitDeviceForm(e) {
  e.preventDefault();
  const id = document.getElementById('deviceId').value;
  const code = document.getElementById('deviceCode').value;
  const name = document.getElementById('deviceName').value;
  const location = document.getElementById('deviceLocation').value;
  const group = document.getElementById('deviceGroup').value;
  const data = { code, name, location, group };
  let url = '/api/devices/';
  let method = 'POST';
  if (id) { url += id + '/'; method = 'PUT'; }
  const headers = Object.assign({ 'Content-Type': 'application/json' }, csrfHeaders());
  const res = await authFetch(url, { method, headers, body: JSON.stringify(data) });
  if (res.ok) {
    var modal = bootstrap.Modal.getInstance(document.getElementById('deviceModal'));
    if (modal) modal.hide();
    // 强制刷新整个页面（跳过缓存）
    window.location.reload(true);
  } else {
    alert('操作失败');
  }
}

async function deleteDevice(id) {
  if (!confirm('确定要删除该设备吗？')) return;
  const res = await authFetch('/api/devices/' + 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) {
      // Keep the generic message if the body cannot be read.
    }
    alert(message);
  }
}
</script>
{% endblock %}