{{template "layout.html" .}}
<div class="flex items-center justify-between" style="margin-bottom:20px">
  <div>
    <select id="groupFilter" class="fctrl" style="max-width:180px;font-size:13px" onchange="filterGroup()">
      <option value="">全部幻灯片</option>
      {{range .groups}}<option value="{{.Group}}">{{.Group}}（{{.Count}}）</option>{{end}}
    </select>
  </div>
  <a href="/admin/slider/form" class="btn btn-primary">＋ 添加幻灯片</a>
</div>
<div class="card">
  <div class="tbl-wrap">
  <form id="sortForm">
  <table class="tbl" id="slideTable">
    <thead>
      <tr><th style="width:34px"><input type="checkbox" id="selectAll"></th><th style="width:50px">ID</th><th>图片</th><th>标题</th><th>分组</th><th>链接</th><th style="width:80px">排序</th><th style="width:70px">状态</th><th style="width:130px">操作</th></tr>
    </thead>
    <tbody>
      {{range .slides}}
      <tr class="slide-row" data-group="{{.Group}}">
        <td><input type="checkbox" name="ids" value="{{.ID}}"></td>
        <td><span class="badge badge-id">{{.ID}}</span></td>
        <td><img src="{{.Image}}" style="width:80px;height:45px;object-fit:cover;border-radius:6px" onerror="this.style.display='none'"></td>
        <td><strong>{{.Title}}</strong></td>
        <td><span class="badge badge-indigo">{{.Group}}</span></td>
        <td><span class="text-muted text-sm" style="max-width:150px;display:inline-block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap">{{.Link}}</span></td>
        <td><input type="number" name="sort_{{.ID}}" class="fctrl" style="width:60px;text-align:center" value="{{.Sort}}" min="0"></td>
        <td>{{if eq .Status 1}}<span class="badge badge-green">显示</span>{{else}}<span class="badge badge-red">隐藏</span>{{end}}</td>
        <td><div class="tbl-acts">
          <a href="/admin/slider/form?id={{.ID}}" class="btn btn-sm btn-info">编辑</a>
          <button type="button" class="btn btn-sm btn-danger" onclick="delSlide({{.ID}})">删除</button>
        </div></td>
      </tr>
      {{else}}
      <tr><td colspan="9"><div class="empty"><div class="empty-ico">🖼️</div><p>暂无幻灯片</p></div></td></tr>
      {{end}}
    </tbody>
  </table>
  </form>
  </div>
  <div class="card-bd" style="padding-top:12px">
    <div style="display:flex;gap:8px;align-items:center">
      <button class="btn btn-primary" onclick="saveSort()">保存排序</button>
      <button class="btn btn-sm btn-danger" onclick="batchDelSlides()" id="batchDelBtn">批量删除</button>
    </div>
  </div>
</div>
<script>
document.getElementById('selectAll').addEventListener('change',function(){
  document.querySelectorAll('#slideTable tbody input[name="ids"]').forEach(function(c){c.checked=this.checked},this);
});
function filterGroup(){
  var v=document.getElementById('groupFilter').value;
  document.querySelectorAll('.slide-row').forEach(function(r){
    r.style.display=(!v||r.dataset.group===v)?'':'none';
  });
}
function saveSort(){
  var btn=document.querySelector('.card-bd .btn');btn.disabled=true;btn.textContent='保存中…';
  fetch('/admin/slider/sort',{method:'POST',body:new FormData(document.getElementById('sortForm'))})
    .then(function(r){return r.json()})
    .then(function(d){toast(d.msg,d.code===0?'success':'error');if(d.code===0)setTimeout(function(){location.reload()},600);else{btn.disabled=false;btn.textContent='保存排序'}});
}
function delSlide(id){
  confirmModal('确认删除','确定要删除该幻灯片吗？',function(){
    var f=new FormData();f.append('id',id);
    fetch('/admin/slider/delete',{method:'POST',body:f})
      .then(function(r){return r.json()})
      .then(function(d){toast(d.msg,d.code===0?'success':'error');if(d.code===0)setTimeout(function(){location.reload()},600)});
  },'确认删除');
}
function batchDelSlides(){
  var ids=[];document.querySelectorAll('#slideTable tbody input[name="ids"]:checked').forEach(function(c){ids.push(c.value)});
  if(!ids.length){resultModal('⚠️','提示','请选择要删除的幻灯片');return}
  confirmModal('批量删除','确定删除选中的 '+ids.length+' 条幻灯片吗？',function(){
    var f=new FormData();f.append('ids',ids.join(','));
    fetch('/admin/slider/batch_delete',{method:'POST',body:f})
      .then(function(r){return r.json()})
      .then(function(d){resultModal(d.code===0?'✅':'❌',d.code===0?'删除成功':'删除失败',d.msg);if(d.code===0)setTimeout(function(){location.reload()},800)})
      .catch(function(){resultModal('❌','请求失败','网络错误，请检查网络连接后重试')});
  },'确认删除');
}
</script>

    </div>
  </main>
</div>
</body>
</html>