@extends('admin.content')

@section('title', '代理用户')

@section('content')
<div class="layui-card">
  <form class="layui-form layui-card-header layuiadmin-card-header-auto" lay-filter="LAY-agent-search">
    <div class="layui-form-item">
      <div class="layui-inline">
        <label class="layui-form-label">账号</label>
        <div class="layui-input-block">
          <input type="text" name="username" class="layui-input" autocomplete="off">
        </div>
      </div>
      <div class="layui-inline">
        <label class="layui-form-label">状态</label>
        <div class="layui-input-block">
          <select name="status">
            <option value="">全部</option>
            <option value="1">启用</option>
            <option value="0">禁用</option>
          </select>
        </div>
      </div>
      <div class="layui-inline">
        <button class="layui-btn" lay-submit lay-filter="LAY-agent-search">搜索</button>
        <button type="button" class="layui-btn layui-btn-normal" id="LAY-agent-create">新建</button>
      </div>
    </div>
  </form>
  <div class="layui-card-body">
    <table id="LAY-agent-list" lay-filter="LAY-agent-list"></table>
    <script type="text/html" id="LAY-agent-ops">
      <a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="channels">渠道链接</a>
      <a class="layui-btn layui-btn-warm layui-btn-xs" lay-event="edit">编辑</a>
    </script>
  </div>
</div>
@endsection

@push('scripts')
<script>
layui.use(['table', 'form', 'layer'], function () {
  var table = layui.table, form = layui.form, layer = layui.layer, $ = layui.$;
  var token = @json(csrf_token());

  function esc(s) {
    return String(s == null ? '' : s)
      .replace(/&/g, '&amp;')
      .replace(/"/g, '&quot;')
      .replace(/</g, '&lt;');
  }

  table.render({
    elem: '#LAY-agent-list',
    id: 'LAY-agent-list',
    url: @json(route('admin.agents.data')),
    cols: [[
      { field: 'id', title: 'ID', width: 70, sort: true },
      { field: 'username', title: '账号', width: 120, sort: true },
      { field: 'status', title: '状态', width: 80, templet: function (d) {
        return d.status == 1
          ? '<span style="color:#16a34a;font-weight:600;">启用</span>'
          : '<span style="color:#dc2626;font-weight:600;">禁用</span>';
      }},
      { field: 'telegram_ready', title: 'TG', width: 70, templet: function (d) {
        return d.telegram_ready
          ? '<span style="color:#16a34a;">已配</span>'
          : '<span style="color:#888;">未配</span>';
      }},
      { field: 'chat_id', title: 'Chat ID', width: 140 },
      { field: 'comment', title: '备注', minWidth: 100 },
      { field: 'channels_count', title: '渠道数', width: 90 },
      { field: 'created_at', title: '创建时间', width: 160, sort: true },
      { title: '操作', width: 180, align: 'center', fixed: 'right', toolbar: '#LAY-agent-ops' }
    ]],
    page: true, limit: 20, limits: [10, 20, 30, 50],
    request: { pageName: 'page', limitName: 'limit' },
    response: { statusName: 'code', statusCode: 0, msgName: 'msg', countName: 'count', dataName: 'data' }
  });

  form.on('submit(LAY-agent-search)', function (data) {
    table.reload('LAY-agent-list', { where: data.field, page: { curr: 1 } });
    return false;
  });

  function openForm(title, values, onOk) {
    values = values || {};
    layer.open({
      type: 1,
      title: title,
      area: ['520px', '520px'],
      content: '<form class="layui-form" style="padding:16px;" id="LAY-agent-form">' +
        '<div class="layui-form-item"><label class="layui-form-label">账号</label><div class="layui-input-block">' +
        '<input name="username" class="layui-input" ' + (values.id ? 'readonly' : '') + ' value="' + esc(values.username || '') + '"></div></div>' +
        '<div class="layui-form-item"><label class="layui-form-label">密码</label><div class="layui-input-block">' +
        '<input name="password" type="password" class="layui-input" placeholder="' + (values.id ? '留空不改' : '必填') + '"></div></div>' +
        '<div class="layui-form-item"><label class="layui-form-label">备注</label><div class="layui-input-block">' +
        '<input name="comment" class="layui-input" value="' + esc(values.comment || '') + '"></div></div>' +
        '<div class="layui-form-item"><label class="layui-form-label">Bot Token</label><div class="layui-input-block">' +
        '<input name="bot_token" class="layui-input" placeholder="代理 Telegram Bot Token" value="' + esc(values.bot_token || '') + '"></div></div>' +
        '<div class="layui-form-item"><label class="layui-form-label">Chat ID</label><div class="layui-input-block">' +
        '<input name="chat_id" class="layui-input" placeholder="代理通知群 chat_id" value="' + esc(values.chat_id || '') + '"></div></div>' +
        '<div class="layui-form-item"><div class="layui-input-block" style="color:#888;font-size:12px;line-height:1.5;">配置后该代理渠道通知发往此 Bot/群；指令仅可查本代理数据，不支持 /transfer。<br>Webhook: <code>/hooks/telegram/agent/{id}</code>，保存后执行 <code>php artisan telegram:set-webhook --agent={id}</code></div></div>' +
        '<div class="layui-form-item"><label class="layui-form-label">状态</label><div class="layui-input-block">' +
        '<input type="checkbox" name="status_switch" lay-skin="switch" lay-text="启用|禁用" ' + ((values.status == null || values.status == 1) ? 'checked' : '') + '>' +
        '</div></div>' +
        '</form>',
      success: function () {
        form.render();
      },
      btn: ['保存', '取消'],
      yes: function (index) {
        var data = {};
        $('#LAY-agent-form').serializeArray().forEach(function (x) { data[x.name] = x.value; });
        data.status = $('#LAY-agent-form input[name=status_switch]').is(':checked') ? 1 : 0;
        delete data.status_switch;
        onOk(data, index);
      }
    });
  }

  $('#LAY-agent-create').on('click', function () {
    openForm('新建代理', { status: 1 }, function (data, index) {
      $.ajax({
        url: @json(route('admin.agents.store')),
        method: 'POST',
        data: data,
        headers: { 'X-CSRF-TOKEN': token },
        success: function (res) {
          if (res.code !== 0) return layer.msg(res.msg || '失败');
          layer.close(index);
          table.reload('LAY-agent-list');
        },
        error: function (xhr) {
          layer.msg((xhr.responseJSON && xhr.responseJSON.message) || '创建失败');
        }
      });
    });
  });

  table.on('tool(LAY-agent-list)', function (obj) {
    var d = obj.data;
    if (obj.event === 'edit') {
      openForm('编辑代理', d, function (data, index) {
        $.ajax({
          url: @json(url('/admin/agents')) + '/' + d.id,
          method: 'POST',
          data: Object.assign(data, { _method: 'PUT', _token: token }),
          success: function (res) {
            if (res.code !== 0) return layer.msg(res.msg || '失败');
            layer.close(index);
            table.reload('LAY-agent-list');
          }
        });
      });
    } else if (obj.event === 'channels') {
      $.getJSON(@json(url('/admin/agents')) + '/' + d.id + '/channels', function (res) {
        var html = (res.data || []).map(function (c) {
          var st = c.status == 1
            ? '<span style="color:#16a34a;">启用</span>'
            : '<span style="color:#dc2626;">禁用</span>';
          return '<div style="margin-bottom:10px;"><b>' + c.channel_id + '</b> (' + st + ')' +
            (c.remark ? '<br><span style="color:#888;">' + c.remark + '</span>' : '') +
            '</div>';
        }).join('') || '暂无渠道链接';
        layer.open({ type: 1, title: '渠道链接 — ' + d.username, area: ['520px', '360px'], content: '<div style="padding:16px;">' + html + '</div>' });
      });
    }
  });
});
</script>
@endpush