{% extends "cms/materialpro/base.html" %}

{% block content %}
<div class="container-fluid">
  <div class="row mb-4">
    <div class="col-lg-6">
      <h4 class="mb-0">导航编辑</h4>
      <p class="text-muted mb-0">拖拽调整顺序，修改菜单名称和链接</p>
    </div>
    <div class="col-lg-6 text-end">
      <button class="btn btn-success" id="btn-save-order">
        <i data-feather="save" class="feather-sm"></i> 保存更改
      </button>
    </div>
  </div>

  <div class="card">
    <div class="card-body">
      <div class="table-responsive">
        <table class="table table-hover align-middle" id="nav-table">
          <thead>
            <tr>
              <th style="width:50px">#</th>
              <th style="width:50px">排序</th>
              <th>图标</th>
              <th>菜单名称</th>
              <th>链接地址</th>
              <th>可见性</th>
              <th>操作</th>
            </tr>
          </thead>
          <tbody id="nav-sortable">
            {% for item in nav_items %}
            <tr data-id="{{ item.id }}" draggable="true">
              <td class="text-muted">{{ item.id }}</td>
              <td>
                <i data-feather="move" class="feather-sm text-muted handle" style="cursor:grab"></i>
              </td>
              <td><code class="small">{{ item.icon or '—' }}</code></td>
              <td>
                <input type="text" class="form-control form-control-sm" value="{{ item.label }}"
                       data-field="label" data-id="{{ item.id }}">
              </td>
              <td>
                <input type="text" class="form-control form-control-sm" value="{{ item.url }}"
                       data-field="url" data-id="{{ item.id }}">
              </td>
              <td>
                <select class="form-select form-select-sm" data-field="visibility" data-id="{{ item.id }}" style="width:100px">
                  <option value="all"     {{ 'selected' if item.visibility=='all' else '' }}>全部</option>
                  <option value="desktop" {{ 'selected' if item.visibility=='desktop' else '' }}>桌面端</option>
                  <option value="mobile"  {{ 'selected' if item.visibility=='mobile' else '' }}>移动端</option>
                </select>
              </td>
              <td>
                <button class="btn btn-sm btn-outline-danger delete-nav" data-id="{{ item.id }}">
                  <i data-feather="trash-2" class="feather-sm"></i>
                </button>
              </td>
            </tr>
            {% endfor %}
          </tbody>
        </table>
      </div>

      <!-- 添加新菜单 -->
      <hr>
      <h6 class="mb-3">添加新菜单项</h6>
      <form id="add-nav-form" class="row g-2">
        <div class="col-md-3">
          <input type="text" class="form-control form-control-sm" placeholder="菜单名称" name="label" required>
        </div>
        <div class="col-md-4">
          <input type="text" class="form-control form-control-sm" placeholder="链接地址，如 /products/" name="url" required>
        </div>
        <div class="col-md-2">
          <input type="text" class="form-control form-control-sm" placeholder="图标（如 solar:home）" name="icon">
        </div>
        <div class="col-md-2">
          <select class="form-select form-select-sm" name="visibility">
            <option value="all">全部可见</option>
            <option value="desktop">桌面端</option>
            <option value="mobile">移动端</option>
          </select>
        </div>
        <div class="col-md-1">
          <button type="submit" class="btn btn-sm btn-primary w-100">
            <i data-feather="plus" class="feather-sm"></i>
          </button>
        </div>
      </form>
    </div>
  </div>
</div>
{% endblock %}

{% block extra_js %}
<script src="{{ '/libs/dragula/dist/dragula.min.js' }}"></script>
<script>
document.addEventListener('DOMContentLoaded', function() {
  // 拖拽排序
  if (typeof dragula !== 'undefined') {
    dragula([document.getElementById('nav-sortable')]).on('end', function() {
      $('#nav-sortable tr').each(function(i) {
        $(this).find('td:first').next().find('.feather-sm').before(
          '<span class="badge bg-light text-dark">'+(i+1)+'</span> '
        );
      });
    });
  }

  // 保存更改
  $('#btn-save-order').on('click', function() {
    var items = [];
    $('#nav-sortable tr').each(function() {
      items.push({
        id: $(this).data('id'),
        label: $(this).find('[data-field="label"]').val(),
        url: $(this).find('[data-field="url"]').val(),
        visibility: $(this).find('[data-field="visibility"]').val()
      });
    });
    $.ajax({
      url: '/admin/api/nav/reorder/',
      type: 'POST',
      contentType: 'application/json',
      data: JSON.stringify({ items: items }),
      success: function() { alert('保存成功！'); },
      error: function() { alert('保存失败，请重试'); }
    });
  });

  // 删除菜单
  $('.delete-nav').on('click', function() {
    if (!confirm('确定删除此菜单项？')) return;
    var id = $(this).data('id');
    $.ajax({
      url: '/admin/api/nav/' + id + '/',
      type: 'DELETE',
      success: function() { location.reload(); },
      error: function() { alert('删除失败'); }
    });
  });

  // 添加菜单
  $('#add-nav-form').on('submit', function(e) {
    e.preventDefault();
    var fd = $(this).serialize();
    $.ajax({
      url: '/admin/api/nav/',
      type: 'POST', data: fd,
      success: function() { location.reload(); },
      error: function() { alert('添加失败，请重试'); }
    });
  });
});
</script>
{% endblock %}