{layout admin/layout}
<link rel="stylesheet" href="/plugin/member/static/member-system.css">
<link rel="stylesheet" href="/plugin/member/static/member.css">
<div class="nv-page-head">
  <div>
    <div class="nv-page-title">{lang member.profile_review}</div>
    <div class="nv-page-desc">
      {lang member.reviews_desc_a}
      {lang member.reviews_desc_b}
    </div>
  </div>
  <div><a class="nv-btn" href="{$entry_prefix}/admin/plugin/member/members">{lang member.member_list}</a></div>
</div>

{if $flash.message}<div class="nv-alert nv-alert-{$flash.type}">{$flash.message}</div>{/if}

<div class="nv-card" style="margin-bottom:16px">
  <div class="nv-card-body">
    <div class="ms-tabs">
      <a href="{$entry_prefix}/admin/plugin/member/reviews?status=0" class="{if $status == 0}is-active{/if}">{lang member.pending_prefix}{$counts.pending}</a>
      <a href="{$entry_prefix}/admin/plugin/member/reviews?status=1" class="{if $status == 1}is-active{/if}">{lang member.approved} {$counts.approved}</a>
      <a href="{$entry_prefix}/admin/plugin/member/reviews?status=2" class="{if $status == 2}is-active{/if}">{lang member.rejected} {$counts.rejected}</a>
    </div>

    <form method="get" action="{$entry_prefix}/admin/plugin/member/reviews" style="display:flex;gap:8px;align-items:center">
      <input type="hidden" name="status" value="{$status}">
      <input type="text" name="keyword" value="{$keyword}" placeholder="{lang member.search_by_content}" style="width:260px">
      <button class="nv-btn nv-btn-primary" type="submit">{lang admin.search}</button>
      {if $keyword != ''}<a class="nv-btn" href="{$entry_prefix}/admin/plugin/member/reviews?status={$status}">{lang admin.clear}</a>{/if}
    </form>
  </div>
</div>

<!-- 批量表单：行内 checkbox 通过 form 属性关联到这里（HTML 不允许 form 嵌套） -->
<form id="reviewBatch" method="post" action="{$entry_prefix}/admin/plugin/member/review/approve">
  <input type="hidden" name="_token" value="{$csrf}">
  <input type="hidden" name="_form_token" value="{$form_token}">
</form>

{if $status == 0 && !empty($list.items)}
<div class="member-batch-bar">
  <label class="member-check"><input type="checkbox" id="reviewCheckAll"> {lang member.select_page}</label>
  <span class="member-batch-sep">{lang member.batch}</span>
  <input type="text" name="note" form="reviewBatch" placeholder="{lang member.reject_note_ph}" maxlength="200" style="width:320px">
  <button class="nv-btn nv-btn-primary" type="submit" form="reviewBatch" formaction="{$entry_prefix}/admin/plugin/member/review/approve" onclick="return confirmReview('{lang member.approve}')">{lang member.batch_approve}</button>
  <button class="nv-btn" type="submit" form="reviewBatch" formaction="{$entry_prefix}/admin/plugin/member/review/reject" onclick="return confirmReview('{lang member.reject}')">{lang member.batch_reject}</button>
</div>
{/if}

<div class="nv-card">
  <div class="nv-card-body">
    {if empty($list.items)}
    <div class="nv-empty">{lang member.no_records_prefix}{if $status == 0}{lang member.status_pending_review}{elseif $status == 1}{lang member.status_approved}{else}{lang member.status_rejected}{/if}{lang member.no_records_suffix}</div>
    {else}
    <table class="member-table">
      <thead>
        <tr>
          {if $status == 0}<th style="width:34px"></th>{/if}
          <th style="width:56px">ID</th>
          <th style="width:180px">{lang member.member}</th>
          <th style="width:90px">{lang admin.col_type}</th>
          <th>{lang member.change_content}</th>
          <th style="width:120px">{lang member.submitted_time}</th>
          <th style="width:180px">{lang admin.operation}</th>
        </tr>
      </thead>
      <tbody>
      {loop $list.items as $it}
      <tr>
        {if $status == 0}
        <td><input class="review-check" type="checkbox" name="ids[]" value="{$it.id}" form="reviewBatch"></td>
        {/if}
        <td>{$it.id}</td>
        <td>
          <a href="{$entry_prefix}/admin/plugin/member/member/edit/{$it.user_id}" title="{lang member.edit_member_profile_tt}">{$it.username}</a>
          <div style="font-size:12px;color:#6b7280">#{$it.user_id}{if !empty($it.mobile)} · {$it.mobile}{/if}</div>
        </td>
        <td>
          <span class="member-badge {if $it.status == 0}is-warn{elseif $it.status == 1}is-ok{else}is-off{/if}">{$it.type_label}</span>
          {if $it.status != 0}<div style="font-size:12px;color:#6b7280;margin-top:4px">{$it.status_label}</div>{/if}
        </td>
        <td>
          {if empty($it.diff)}
          <span style="font-size:13px;color:#6b7280">{lang member.no_real_change_paren}</span>
          {else}
          <table style="width:100%;border-collapse:collapse;font-size:13px">
            {loop $it.diff as $d}
            <tr>
              <td style="padding:2px 8px 2px 0;color:#6b7280;white-space:nowrap">{$d.label}</td>
              <td style="padding:2px 8px 2px 0;color:#9ca3af">
                {if !empty($d.is_image)}<img src="{$d.old}" alt="{lang member.orig}" style="width:28px;height:28px;border-radius:50%;object-fit:cover">{else}{$d.old}{/if}
              </td>
              <td style="padding:2px 0;color:#111827">
                {if !empty($d.is_image)}<img src="{$d.new}" alt="{lang member.new}" style="width:28px;height:28px;border-radius:50%;object-fit:cover">{else}{$d.new}{/if}
              </td>
            </tr>
            {/loop}
          </table>
          {/if}
          {if $it.status == 2 && !empty($it.note)}<div style="font-size:12px;color:#b91c1c;margin-top:4px">{lang member.reject_reason_col}{$it.note}</div>{/if}
          {if $it.status == 1 && !empty($it.audit_text)}<div style="font-size:12px;color:#6b7280;margin-top:4px">{$it.auditor} · {$it.audit_text}</div>{/if}
        </td>
        <td style="font-size:13px">{$it.created_text}</td>
        <td>
          {if $it.status == 0}
          <form method="post" action="{$entry_prefix}/admin/plugin/member/review/approve" style="display:flex;gap:6px;flex-wrap:wrap;align-items:center">
            <input type="hidden" name="_token" value="{$csrf}">
            <input type="hidden" name="_form_token" value="{$form_token}">
            <input type="hidden" name="id" value="{$it.id}">
            <input type="text" name="note" placeholder="{lang member.remark_or_reject}" maxlength="200" style="width:110px">
            <button class="nv-btn nv-btn-primary" type="submit" formaction="{$entry_prefix}/admin/plugin/member/review/approve">{lang member.approve}</button>
            <button class="nv-btn" type="submit" formaction="{$entry_prefix}/admin/plugin/member/review/reject">{lang member.reject}</button>
          </form>
          <div style="margin-top:6px">
            <a class="nv-btn nv-btn-sm" href="{$entry_prefix}/admin/plugin/member/member/edit/{$it.user_id}">{lang member.edit_then_approve}</a>
          </div>
          {else}
          <span style="font-size:13px;color:#6b7280">{$it.auditor}{if !empty($it.audit_text)} · {$it.audit_text}{/if}</span>
          {/if}
        </td>
      </tr>
      {/loop}
      </tbody>
    </table>
    {/if}
  </div>
</div>

{if $list.last_page > 1}
<div class="member-pager">
  {if $list.page > 1}
  <a href="{$entry_prefix}/admin/plugin/member/reviews?status={$status}&keyword={$keyword}&page={$prev_page}">{lang admin.prev_page}</a>
  {else}
  <span class="is-disabled">{lang admin.prev_page}</span>
  {/if}
  <span class="is-current">{$list.page} / {$list.last_page}</span>
  {if $list.page < $list.last_page}
  <a href="{$entry_prefix}/admin/plugin/member/reviews?status={$status}&keyword={$keyword}&page={$next_page}">{lang admin.next_page}</a>
  {else}
  <span class="is-disabled">{lang admin.next_page}</span>
  {/if}
</div>
{/if}

<script>
(function () {
  var all = document.getElementById('reviewCheckAll');
  var items = document.querySelectorAll('.review-check');
  if (all) {
    all.addEventListener('change', function () {
      for (var i = 0; i < items.length; i++) { items[i].checked = all.checked; }
    });
  }

  window.confirmReview = function (label) {
    var checked = document.querySelectorAll('.review-check:checked');
    if (!checked.length) { alert('{lang member.select_records_first}'); return false; }
    return confirm('{lang member.js_confirm_selected}' + checked.length + '{lang member.js_confirm_on_records}' + label + '{lang member.js_confirm_q}');
  };
})();
</script>