{{template "layout.html" .}}
<div class="card">
  <div class="tbl-wrap">
  <table class="tbl">
    <thead>
      <tr>
        <th style="width:36px"><input type="checkbox" id="checkAll" onchange="toggleAll()"></th>
        <th style="width:50px">ID</th>
        <th style="width:120px">IP</th>
        <th>路径</th>
        <th>User-Agent</th>
        <th style="width:90px">日期</th>
        <th style="width:150px">时间</th>
      </tr>
    </thead>
    <tbody>
      {{range .logs}}
      <tr>
        <td><input type="checkbox" class="visitCheck" value="{{.ID}}" onchange="updateBatchBtn()"></td>
        <td><span class="badge badge-id">{{.ID}}</span></td>
        <td class="text-muted text-sm">{{.IP}}</td>
        <td><code class="text-sm">{{.Path}}</code></td>
        <td><span class="text-muted text-xs" style="max-width:300px;display:inline-block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap">{{.UserAgent}}</span></td>
        <td class="text-muted text-sm">{{.Date}}</td>
        <td class="text-muted text-sm">{{.CreatedAt.Format "15:04:05"}}</td>
      </tr>
      {{else}}
      <tr><td colspan="7"><div class="empty"><div class="empty-ico">🌐</div><p>暂无访问记录</p></div></td></tr>
      {{end}}
    </tbody>
  </table>
  </div>
  <div class="card-bd" style="padding-top:12px">
    <div class="flex items-center justify-between flex-wrap gap-2">
      <div class="flex gap-2">
        <button class="btn btn-sm btn-danger" id="batchDelBtn" onclick="doBatchDel()" disabled>删除选中</button>
        <button class="btn btn-sm btn-ghost" onclick="doClearAll()">清空全部</button>
      </div>
      <div class="pages">
        {{if gt .pagination.TotalPage 1}}
        {{if gt .pagination.Page 1}}
        <a href="/admin/visit?page={{sub .pagination.Page 1}}" class="page-btn">‹ 上一页</a>
        {{end}}
        {{range $i := pages .pagination.Page .pagination.TotalPage}}
        <a href="/admin/visit?page={{$i}}" class="page-btn {{if eq $i $.pagination.Page}}active{{end}}">{{$i}}</a>
        {{end}}
        {{if lt .pagination.Page .pagination.TotalPage}}
        <a href="/admin/visit?page={{add .pagination.Page 1}}" class="page-btn">下一页 ›</a>
        {{end}}
        {{end}}
        <span class="text-muted text-sm" style="margin-left:8px">共 {{.pagination.Total}} 条</span>
      </div>
    </div>
  </div>
</div>
<div id="confirmModal" style="display:none;position:fixed;inset:0;background:rgba(15,23,42,.3);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);z-index:9999;align-items:center;justify-content:center;font-family:system-ui,sans-serif">
  <div style="background:#fff;border-radius:12px;padding:32px 28px;min-width:320px;max-width:400px;box-shadow:0 20px 60px rgba(0,0,0,.18);text-align:center">
    <div style="font-size:44px;margin-bottom:10px;line-height:1">⚠️</div>
    <h3 id="confirmTitle" style="margin:0 0 6px;font-size:17px;color:#1e293b">确认操作</h3>
    <p id="confirmMsg" style="margin:0 0 24px;color:#6B7280;font-size:14px;line-height:1.5"></p>
    <div class="flex gap-2" style="justify-content:center">
      <button class="btn btn-secondary" onclick="closeConfirm()">取消</button>
      <button class="btn btn-danger" id="confirmOk">确定</button>
    </div>
  </div>
</div>

<script>
function toggleAll(){
  var checked=document.getElementById('checkAll').checked;
  document.querySelectorAll('.visitCheck').forEach(function(cb){cb.checked=checked});
  updateBatchBtn();
}
function updateBatchBtn(){
  var checked=document.querySelectorAll('.visitCheck:checked').length;
  document.getElementById('batchDelBtn').disabled=checked===0;
}
function showConfirm(title,msg,onOk){
  document.getElementById('confirmTitle').textContent=title;
  document.getElementById('confirmMsg').textContent=msg;
  var m=document.getElementById('confirmModal');
  m.style.display='flex';
  document.getElementById('confirmOk').onclick=function(){
    m.style.display='none';
    if(onOk)onOk();
  };
}
function closeConfirm(){
  document.getElementById('confirmModal').style.display='none';
}
function doBatchDel(){
  var ids=[];
  document.querySelectorAll('.visitCheck:checked').forEach(function(cb){ids.push(cb.value)});
  if(ids.length===0)return;
  showConfirm('批量删除','确定要删除选中的 '+ids.length+' 条访问记录吗？',function(){
    var f=new FormData();f.append('ids',ids.join(','));
    fetch('/admin/visit/batch_delete',{method:'POST',body:f})
      .then(function(r){return r.json()})
      .then(function(d){
        var ov=document.createElement('div');
        ov.style.cssText='position:fixed;inset:0;background:rgba(15,23,42,.3);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);z-index:9999;display:flex;align-items:center;justify-content:center;font-family:system-ui,sans-serif';
        ov.innerHTML='<div style="background:#fff;border-radius:12px;padding:36px 32px;min-width:300px;box-shadow:0 20px 60px rgba(0,0,0,.18);text-align:center"><div style="font-size:48px;margin-bottom:12px">'+(d.code===0?'✅':'❌')+'</div><h3 style="margin:0 0 6px;font-size:18px;color:'+(d.code===0?'#1e293b':'#dc2626')+'">'+(d.code===0?'删除成功':'删除失败')+'</h3><p style="margin:0 0 20px;color:#6B7280;font-size:14px">'+d.msg+'</p><button class="btn btn-primary" id="resultOk" style="cursor:pointer">确定</button></div>';
        document.body.appendChild(ov);
        document.getElementById('resultOk').onclick=function(){location.reload()};
        ov.onclick=function(e){if(e.target===ov)location.reload()};
      });
  });
}
function doClearAll(){
  showConfirm('清空全部','确定要清空所有访问记录吗？此操作不可恢复！',function(){
    fetch('/admin/visit/clear_all',{method:'POST'})
      .then(function(r){return r.json()})
      .then(function(d){
        var ov=document.createElement('div');
        ov.style.cssText='position:fixed;inset:0;background:rgba(15,23,42,.3);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);z-index:9999;display:flex;align-items:center;justify-content:center;font-family:system-ui,sans-serif';
        ov.innerHTML='<div style="background:#fff;border-radius:12px;padding:36px 32px;min-width:300px;box-shadow:0 20px 60px rgba(0,0,0,.18);text-align:center"><div style="font-size:48px;margin-bottom:12px">'+(d.code===0?'✅':'❌')+'</div><h3 style="margin:0 0 6px;font-size:18px;color:'+(d.code===0?'#1e293b':'#dc2626')+'">'+(d.code===0?'清空成功':'清空失败')+'</h3><p style="margin:0 0 20px;color:#6B7280;font-size:14px">'+d.msg+'</p><button class="btn btn-primary" id="resultOk" style="cursor:pointer">确定</button></div>';
        document.body.appendChild(ov);
        document.getElementById('resultOk').onclick=function(){location.reload()};
        ov.onclick=function(e){if(e.target===ov)location.reload()};
      });
  });
}
</script>
</body>
</html>