@extends('admin.content')

@section('title', '交易记录')

@section('content')
@php $portal = $portal ?? 'admin'; @endphp
<style>
  .tx-cell { word-break: break-all; font-family: Menlo, Monaco, Consolas, monospace; font-size: 12px; }
  .tx-status-success { color: #16b777; font-weight: 600; }
  .tx-status-failed { color: #ff5722; font-weight: 600; }
  .tx-chain-tag {
    display: inline-block;
    padding: 0 8px;
    line-height: 20px;
    border-radius: 2px;
    font-size: 12px;
    color: #fff;
    background: #909399;
  }
  .tx-chain-eth, .tx-chain-ethereum { background: #627eea; }
  .tx-chain-btc, .tx-chain-bitcoin { background: #f7931a; }
  .tx-chain-trx, .tx-chain-tron { background: #ff0013; }
</style>
<div class="layui-card">
  <form class="layui-form layui-card-header layuiadmin-card-header-auto" lay-filter="LAY-tx-search">
    <div class="layui-form-item">
      <div class="layui-inline">
        <label class="layui-form-label">From</label>
        <div class="layui-input-block">
          <input type="text" name="from_address" class="layui-input" autocomplete="off">
        </div>
      </div>
      <div class="layui-inline">
        <label class="layui-form-label">To</label>
        <div class="layui-input-block">
          <input type="text" name="to_address" class="layui-input" autocomplete="off">
        </div>
      </div>
      <div class="layui-inline">
        <label class="layui-form-label">Tx Hash</label>
        <div class="layui-input-block">
          <input type="text" name="tx_hash" class="layui-input" autocomplete="off">
        </div>
      </div>
      <div class="layui-inline">
        <label class="layui-form-label">链</label>
        <div class="layui-input-block">
          <select name="chain">
            <option value="">全部</option>
            @foreach ($chains as $value => $label)
              <option value="{{ $value }}">{{ $label }}</option>
            @endforeach
          </select>
        </div>
      </div>
      <div class="layui-inline">
        <label class="layui-form-label">资产</label>
        <div class="layui-input-block">
          <select name="asset">
            <option value="">全部</option>
            @foreach ($assets as $a)
              <option value="{{ $a }}">{{ $a }}</option>
            @endforeach
          </select>
        </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="success">success</option>
            <option value="failed">failed</option>
          </select>
        </div>
      </div>
      <div class="layui-inline">
        <label class="layui-form-label">操作者</label>
        <div class="layui-input-block">
          <input type="text" name="operator" class="layui-input" autocomplete="off">
        </div>
      </div>
      <div class="layui-inline">
        <button class="layui-btn" lay-submit lay-filter="LAY-tx-search">搜索</button>
      </div>
    </div>
  </form>
  <div class="layui-card-body">
    <table id="LAY-tx-list" lay-filter="LAY-tx-list"></table>
    <script type="text/html" id="LAY-tx-ops">
      <a class="layui-btn layui-btn-primary 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;

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

  function statusHtml(status) {
    var s = String(status || '');
    if (s === 'success') return '<span class="tx-status-success">success</span>';
    if (s === 'failed') return '<span class="tx-status-failed">failed</span>';
    return s || '—';
  }

  table.render({
    elem: '#LAY-tx-list',
    id: 'LAY-tx-list',
    url: @json(route($portal.'.transfers.data')),
    cols: [[
      { field: 'id', title: 'ID', width: 70, sort: true },
      { field: 'chain', title: '链', width: 90, templet: function (d) { return chainTag(d.chain); } },
      { field: 'asset', title: '资产', width: 80, sort: true },
      { field: 'amount', title: '金额', width: 120, sort: true },
      { field: 'from_address', title: 'From', minWidth: 220, templet: function (d) {
        return '<span class="tx-cell">' + (d.from_address || '') + '</span>';
      }},
      { field: 'to_address', title: 'To', minWidth: 220, templet: function (d) {
        return '<span class="tx-cell">' + (d.to_address || '') + '</span>';
      }},
      { field: 'tx_hash', title: 'Tx Hash', minWidth: 220, templet: function (d) {
        return '<span class="tx-cell">' + (d.tx_hash || '—') + '</span>';
      }},
      { field: 'status', title: '状态', width: 90, sort: true, templet: function (d) {
        return statusHtml(d.status);
      }},
      { field: 'operator', title: '操作者', width: 120 },
      { field: 'type', title: '类型', width: 70 },
      { field: 'created_at', title: '时间', width: 170, sort: true },
      { title: '操作', width: 90, align: 'center', fixed: 'right', toolbar: '#LAY-tx-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-tx-search)', function (data) {
    table.reload('LAY-tx-list', { where: data.field, page: { curr: 1 } });
    return false;
  });

  table.on('tool(LAY-tx-list)', function (obj) {
    if (obj.event !== 'detail') return;
    var d = obj.data;
    var esc = function (v) {
      return String(v == null || v === '' ? '—' : v)
        .replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;');
    };
    layer.open({
      type: 1,
      title: '交易详情 — #' + d.id,
      area: ['640px', '480px'],
      content:
        '<div style="padding:16px;line-height:1.8;font-size:13px;">' +
          '<div><b>状态</b>：' + statusHtml(d.status) + '</div>' +
          '<div><b>链 / 资产</b>：' + esc(d.chain) + ' / ' + esc(d.asset) + '</div>' +
          '<div><b>金额</b>：' + esc(d.amount) + '</div>' +
          '<div><b>类型</b>：' + esc(d.type) + '</div>' +
          '<div><b>From</b>：<span class="tx-cell">' + esc(d.from_address) + '</span></div>' +
          '<div><b>To</b>：<span class="tx-cell">' + esc(d.to_address) + '</span></div>' +
          '<div><b>Tx Hash</b>：<span class="tx-cell">' + esc(d.tx_hash) + '</span></div>' +
          '<div><b>操作者</b>：' + esc(d.operator) + '</div>' +
          '<div><b>时间</b>：' + esc(d.created_at) + '</div>' +
          '<div style="margin-top:8px;"><b>错误</b>：<pre style="white-space:pre-wrap;word-break:break-all;margin:4px 0 0;">' + esc(d.error) + '</pre></div>' +
        '</div>'
    });
  });
});
</script>
@endpush