@extends('admin.content')

@section('title', '钱包地址')

@section('content')
@php $portal = $portal ?? 'admin'; @endphp
<style>
  .addr-chain-tag {
    display: inline-block;
    padding: 0 8px;
    line-height: 20px;
    border-radius: 2px;
    font-size: 12px;
    color: #fff;
  }
  .addr-chain-eth, .addr-chain-ethereum, .addr-chain-evm { background: #627eea; }
  .addr-chain-btc, .addr-chain-bitcoin { background: #f7931a; }
  .addr-chain-trx, .addr-chain-tron { background: #ff0013; }
  .addr-chain-bnb, .addr-chain-bsc, .addr-chain-binance { background: #f3ba2f; color: #333; }
  .addr-chain-sol, .addr-chain-solana { background: #9945ff; }
  .addr-chain-ton { background: #0098ea; }
  .addr-chain-unknown, .addr-chain-unkno { background: #909399; }
  .addr-monitor-on { color: #16b777; font-weight: 600; }
  .addr-monitor-off { color: #ff5722; font-weight: 600; }
  .addr-cell { word-break: break-all; font-family: Menlo, Monaco, Consolas, monospace; font-size: 12px; }
</style>
<div class="layui-card">
  <form class="layui-form layui-card-header layuiadmin-card-header-auto" lay-filter="LAY-addr-search">
    <div class="layui-form-item">
      <div class="layui-inline">
        <label class="layui-form-label">渠道 ID</label>
        <div class="layui-input-block">
          <input type="text" name="channel_id" class="layui-input" autocomplete="off">
        </div>
      </div>
      <div class="layui-inline">
        <label class="layui-form-label">设备 ID</label>
        <div class="layui-input-block">
          <input type="text" name="device_key" class="layui-input" autocomplete="off">
        </div>
      </div>
      @if ($portal === 'admin')
      <div class="layui-inline">
        <label class="layui-form-label">代理用户</label>
        <div class="layui-input-block">
          <select name="agent_user_id">
            <option value="">全部</option>
            <option value="0">官方</option>
            @foreach ($agents as $a)
              <option value="{{ $a->id }}">{{ $a->username }}</option>
            @endforeach
          </select>
        </div>
      </div>
      @endif
      <div class="layui-inline">
        <label class="layui-form-label">来源</label>
        <div class="layui-input-block">
          <select name="source">
            <option value="">全部</option>
            @foreach ($sources as $s)
              <option value="{{ $s }}">{{ $s }}</option>
            @endforeach
          </select>
        </div>
      </div>
      <div class="layui-inline">
        <button class="layui-btn" lay-submit lay-filter="LAY-addr-search">搜索</button>
      </div>
    </div>
  </form>
  <div class="layui-card-body">
    <table id="LAY-addr-list" lay-filter="LAY-addr-list"></table>
    <script type="text/html" id="LAY-addr-ops">
      <a class="layui-btn layui-btn-warm layui-btn-xs" lay-event="edit">编辑</a>
      <a class="layui-btn layui-btn-normal layui-btn-xs" lay-event="detail">设备详情</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());
  var updateBase = @json(url('/'.$portal.'/addresses'));

  function chainTag(chain) {
    var raw = String(chain || 'UNKNOWN');
    var key = raw.toLowerCase().replace(/[^a-z0-9]+/g, '');
    var cls = 'addr-chain-tag addr-chain-' + (key || 'unknown');
    return '<span class="' + cls + '">' + raw + '</span>';
  }

  table.render({
    elem: '#LAY-addr-list',
    id: 'LAY-addr-list',
    url: @json(route($portal.'.addresses.data')),
    cols: [[
      { field: 'id', title: 'ID', width: 70, sort: true },
      { field: 'source', title: '来源', width: 120 },
      { field: 'device_key', title: '设备 ID', width: 150, sort: true },
      { field: 'address', title: '地址', minWidth: 360, templet: function (d) {
        return '<span class="addr-cell">' + (d.address || '') + '</span>';
      }},
      { field: 'chain_type', title: 'Chain', width: 110, templet: function (d) {
        return chainTag(d.chain_type);
      }},
      { field: 'usdt', title: 'USDT', width: 100, sort: true },
      { field: 'trx', title: 'TRX', width: 100, sort: true },
      { field: 'eth', title: 'ETH', width: 100, sort: true },
      { field: 'btc', title: 'BTC', width: 110, sort: true },
      { field: 'bnb', title: 'BNB', width: 100, sort: true },
      { field: 'channel_id', title: '渠道 ID', width: 140 },
      { field: 'created_at', title: '创建时间', width: 170, sort: true },
      { field: 'monitor', title: '监听', width: 80, fixed: 'right', templet: function (d) {
        return Number(d.monitor) === 1
          ? '<span class="addr-monitor-on">开</span>'
          : '<span class="addr-monitor-off">关</span>';
      }},
      { title: '操作', width: 160, align: 'center', fixed: 'right', toolbar: '#LAY-addr-ops' }
    ]],
    page: true, limit: 15, height: 'full-220',
    request: { pageName: 'page', limitName: 'limit' },
    response: { statusName: 'code', statusCode: 0, msgName: 'msg', countName: 'count', dataName: 'data' }
  });

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

  function openDeviceTab(url, title) {
    try {
      if (parent && parent.layui && parent.layui.index) {
        parent.layui.index.openTabsPage(url, title);
        return;
      }
    } catch (e) {}
    location.href = url;
  }

  table.on('tool(LAY-addr-list)', function (obj) {
    var d = obj.data;
    if (obj.event === 'detail') {
      openDeviceTab(d.detail_url, '设备 ' + (d.device_key || ('#' + d.id)));
      return;
    }
    if (obj.event !== 'edit') return;

    layer.open({
      type: 1,
      title: '编辑监听 — #' + d.id,
      area: ['420px', '260px'],
      content:
        '<form class="layui-form" style="padding:16px;" id="LAY-addr-edit-form">' +
          '<div class="layui-form-item"><label class="layui-form-label">地址</label>' +
          '<div class="layui-input-block"><div class="layui-form-mid addr-cell" style="width:100%;">' + (d.address || '') + '</div></div></div>' +
          '<div class="layui-form-item"><label class="layui-form-label">监听</label>' +
          '<div class="layui-input-block" style="padding-top:8px;">' +
          '<input type="checkbox" name="monitor" lay-skin="switch" lay-text="开|关" value="1"' +
          (Number(d.monitor) === 1 ? ' checked' : '') + '>' +
          '</div></div>' +
        '</form>',
      success: function () {
        form.render('checkbox');
      },
      btn: ['保存', '取消'],
      yes: function (index) {
        var monitor = $('#LAY-addr-edit-form input[name=monitor]').prop('checked') ? 1 : 0;
        $.ajax({
          url: updateBase + '/' + d.id,
          method: 'POST',
          data: { monitor: monitor, _method: 'PUT', _token: token },
          success: function (res) {
            if (res.code !== 0) return layer.msg(res.msg || '失败');
            layer.close(index);
            layer.msg('已保存');
            table.reload('LAY-addr-list');
          },
          error: function (xhr) {
            layer.msg((xhr.responseJSON && (xhr.responseJSON.msg || xhr.responseJSON.message)) || '保存失败');
          }
        });
      }
    });
  });
});
</script>
@endpush