<!DOCTYPE html>
<html lang="zh-CN" xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org" data-bs-theme="light">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css">
  <title>进销管理</title>
  <style>
    /* 自定义样式 */
    body {
      padding: 20px;
    }

    .pagination {
      justify-content: end;
    }
  </style>
</head>

<body>
<h1>进销管理</h1>
<ul class="nav nav-tabs">
  <li class="nav-item">
    <a class="nav-link active" aria-current="page" href="#">采购单管理</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="purchase_detail_list.html">采购明细</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="sale_detail_list.html">售出明细</a>
  </li>
</ul>
<div class="mt-4">
  <button class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#addModal">新增</button>
  <table class="table table-striped">
    <thead>
    <tr>
      <th>采购ID</th>
      <th>所属公司</th>
      <th>采购时间</th>
      <th>甲方名称</th>
      <th>采购标题</th>
      <th>采购单状态</th>
      <th>备注</th>
      <th>操作</th>
    </tr>
    </thead>
    <tbody>
    <!-- 表格数据 -->
    </tbody>
  </table>
  <nav aria-label="Page navigation example">
    <ul class="pagination">
      <li class="page-item">
        <a class="page-link" href="#" aria-label="Previous">
          <span aria-hidden="true">&laquo;</span>
        </a>
      </li>
      <li class="page-item"><a class="page-link" href="#">1</a></li>
      <li class="page-item"><a class="page-link" href="#">2</a></li>
      <li class="page-item"><a class="page-link" href="#">3</a></li>
      <li class="page-item">
        <a class="page-link" href="#" aria-label="Next">
          <span aria-hidden="true">&raquo;</span>
        </a>
      </li>
    </ul>
  </nav>
</div>

<!-- 新增模态框 -->
<div class="modal fade" id="addModal" tabindex="-1" aria-labelledby="addModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="addModalLabel">新增采购单</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="modal-body">
        <form id="addForm">
          <div class="mb-3">
            <label for="company" class="form-label">所属公司</label>
            <input type="text" class="form-control" id="company" required>
          </div>
          <div class="mb-3">
            <label for="purchaseTime" class="form-label">采购时间</label>
            <input type="datetime-local" class="form-control" id="purchaseTime" required>
          </div>
          <div class="mb-3">
            <label for="aSide" class="form-label">甲方名称</label>
            <input type="text" class="form-control" id="aSide" required>
          </div>
          <div class="mb-3">
            <label for="title" class="form-label">采购标题</label>
            <input type="text" class="form-control" id="title" required>
          </div>
          <div class="mb-3">
            <label for="orderStatus" class="form-label">采购单状态</label>
            <select class="form-select" id="orderStatus" required>
              <option value="1">采购完成</option>
              <option value="2">售卖完成</option>
            </select>
          </div>
          <div class="mb-3">
            <label for="remark" class="form-label">备注</label>
            <textarea class="form-control" id="remark"></textarea>
          </div>
        </form>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">关闭</button>
        <button type="button" class="btn btn-primary" onclick="addOrder()">保存</button>
      </div>
    </div>
  </div>
</div>

<!-- 修改模态框 -->
<div class="modal fade" id="editModal" tabindex="-1" aria-labelledby="editModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="editModalLabel">修改采购单</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="modal-body">
        <form id="editForm">
          <input type="hidden" id="editOrderId">
          <div class="mb-3">
            <label for="editCompany" class="form-label">所属公司</label>
            <input type="text" class="form-control" id="editCompany" required>
          </div>
          <div class="mb-3">
            <label for="editPurchaseTime" class="form-label">采购时间</label>
            <input type="datetime-local" class="form-control" id="editPurchaseTime" required>
          </div>
          <div class="mb-3">
            <label for="editASide" class="form-label">甲方名称</label>
            <input type="text" class="form-control" id="editASide" required>
          </div>
          <div class="mb-3">
            <label for="editTitle" class="form-label">采购标题</label>
            <input type="text" class="form-control" id="editTitle" required>
          </div>
          <div class="mb-3">
            <label for="editOrderStatus" class="form-label">采购单状态</label>
            <select class="form-select" id="editOrderStatus" required>
              <option value="1">采购完成</option>
              <option value="2">售卖完成</option>
            </select>
          </div>
          <div class="mb-3">
            <label for="editRemark" class="form-label">备注</label>
            <textarea class="form-control" id="editRemark"></textarea>
          </div>
        </form>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">关闭</button>
        <button type="button" class="btn btn-primary" onclick="updateOrder()">保存</button>
      </div>
    </div>
  </div>
</div>

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
<script>
  function addOrder() {
    var company = $('#company').val();
    var purchaseTime = $('#purchaseTime').val();
    var aSide = $('#aSide').val();
    var title = $('#title').val();
    var orderStatus = $('#orderStatus').val();
    var remark = $('#remark').val();

    $.ajax({
      url: 'addOrder',
      type: 'post',
      data: {
        company: company,
        purchaseTime: purchaseTime,
        aSide: aSide,
        title: title,
        orderStatus: orderStatus,
        remark: remark
      },
      success: function (response) {
        if (response.success) {
          alert('新增成功');
          $('#addModal').modal('hide');
          // 刷新表格数据
        } else {
          alert('新增失败');
        }
      },
      error: function () {
        alert('网络错误');
      }
    });
  }

  function updateOrder() {
    var orderId = $('#editOrderId').val();
    var company = $('#editCompany').val();
    var purchaseTime = $('#editPurchaseTime').val();
    var aSide = $('#editASide').val();
    var title = $('#editTitle').val();
    var orderStatus = $('#editOrderStatus').val();
    var remark = $('#editRemark').val();

    $.ajax({
      url: 'updateOrder',
      type: 'post',
      data: {
        orderId: orderId,
        company: company,
        purchaseTime: purchaseTime,
        aSide: aSide,
        title: title,
        orderStatus: orderStatus,
        remark: remark
      },
      success: function (response) {
        if (response.success) {
          alert('修改成功');
          $('#editModal').modal('hide');
          // 刷新表格数据
        } else {
          alert('修改失败');
        }
      },
      error: function () {
        alert('网络错误');
      }
    });
  }

  function deleteOrder(orderId) {
    if (confirm('确定要删除吗？')) {
      $.ajax({
        url: 'deleteOrder',
        type: 'post',
        data: {
          orderId: orderId
        },
        success: function (response) {
          if (response.success) {
            alert('删除成功');
            // 刷新表格数据
          } else {
            alert('删除失败');
          }
        },
        error: function () {
          alert('网络错误');
        }
      });
    }
  }

  function showEditModal(orderId, company, purchaseTime, aSide, title, orderStatus, remark) {
    $('#editOrderId').val(orderId);
    $('#editCompany').val(company);
    $('#editPurchaseTime').val(purchaseTime);
    $('#editASide').val(aSide);
    $('#editTitle').val(title);
    $('#editOrderStatus').val(orderStatus);
    $('#editRemark').val(remark);
    $('#editModal').modal('show');
  }
</script>
</body>

</html>