{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.member_list}</div>
    <div class="nv-page-desc">
      {lang member.list_total_a}{$list.total}{lang member.list_total_b}
      {if $review_total > 0}{lang member.list_pending_a} <strong>{$review_total}</strong>{lang member.list_pending_b}{/if}
      {if $profile_review_total > 0}
      <a class="nv-link" href="{$entry_prefix}/admin/plugin/member/reviews">{lang member.list_profile_a} <strong>{$profile_review_total}</strong>{lang member.list_profile_b}</a>，
      {/if}
      {lang member.super_only_note}
    </div>
  </div>
  {if $is_super}
  <div style="display:flex;gap:8px">
    <a class="nv-btn" id="exportLink" href="{$entry_prefix}/admin/plugin/member/export">{lang member.export_csv}</a>
    <a class="nv-btn" href="{$entry_prefix}/admin/plugin/member/import">{lang member.import_members}</a>
  </div>
  {/if}
</div>

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

<form class="member-filters" method="get" action="{$entry_prefix}/admin/plugin/member/members">
  <div class="member-filter-grid">
    <div class="member-field">
      <label for="mKeyword">{lang member.keyword_placeholder}</label>
      <input id="mKeyword" type="text" name="keyword" value="{$filters.keyword}" placeholder="{lang member.fuzzy_match}">
    </div>
    <div class="member-field">
      <label for="mAccountStatus">{lang member.account_status}</label>
      <select id="mAccountStatus" name="account_status">
        <option value="">{lang admin.all}</option>
        {loop $status_options as $sv => $sn}
        <option value="{$sv}"{if $filters.account_status == $sv} selected{/if}>{$sn}</option>
        {/loop}
      </select>
    </div>
    <div class="member-field">
      <label for="mGroup">{lang admin.col_group}</label>
      <select id="mGroup" name="group_id">
        <option value="">{lang admin.all}</option>
        {loop $group_options as $gv => $gn}
        <option value="{$gv}"{if $filters.group_id == $gv} selected{/if}>{$gn}</option>
        {/loop}
      </select>
    </div>
    <div class="member-field">
      <label for="mMobile">{lang member.mobile}</label>
      <input id="mMobile" type="text" name="mobile" value="{$filters.mobile}" placeholder="{lang member.fuzzy_match}">
    </div>
    <div class="member-field">
      <label for="mProvince">{lang member.province}</label>
      <select id="mProvince" name="province">
        <option value="">{lang member.any}</option>
        {loop $provinces as $pv}
        <option value="{$pv}"{if $filters.province == $pv} selected{/if}>{$pv}</option>
        {/loop}
      </select>
    </div>
    <div class="member-field">
      <label for="mCity">{lang member.city}</label>
      <select id="mCity" name="city">
        <option value="">{lang member.any}</option>
        {loop $cities as $cv}
        <option value="{$cv}"{if $filters.city == $cv} selected{/if}>{$cv}</option>
        {/loop}
      </select>
    </div>
    <div class="member-field">
      <label for="mDistrict">{lang member.district}</label>
      <select id="mDistrict" name="district">
        <option value="">{lang member.any}</option>
        {loop $districts as $dv}
        <option value="{$dv}"{if $filters.district == $dv} selected{/if}>{$dv}</option>
        {/loop}
      </select>
    </div>
    <div class="member-field">
      <label for="mIp">{lang member.register_ip}</label>
      <input id="mIp" type="text" name="register_ip" value="{$filters.register_ip}" placeholder="{lang member.prefix_hint}">
    </div>
    <div class="member-field">
      <label for="mFrom">{lang member.register_from}</label>
      <input id="mFrom" type="date" name="register_from" value="{$filters.register_from}">
    </div>
    <div class="member-field">
      <label for="mTo">{lang member.register_to}</label>
      <input id="mTo" type="date" name="register_to" value="{$filters.register_to}">
    </div>
    {loop $fields as $fname => $field}
    <div class="member-field">
      <label for="m{$field.id}">{$field.label}</label>
      {if $field.type == 'select' || $field.type == 'radio'}
      <select id="m{$field.id}" name="{$field.name}">
        <option value="">{lang member.any}</option>
        {loop $field.option_list as $opt}
        <option value="{$opt}"{if $filters.custom[$field.name] == $opt} selected{/if}>{$opt}</option>
        {/loop}
      </select>
      {else}
      <input id="m{$field.id}" type="text" name="{$field.name}" value="{$filters.custom[$field.name]}">
      {/if}
    </div>
    {/loop}
    <div class="member-filter-actions">
      <button class="nv-btn nv-btn-primary" type="submit">{lang member.filter}</button>
      <a class="nv-btn" href="{$entry_prefix}/admin/plugin/member/members">{lang member.reset}</a>
    </div>
  </div>
</form>

<!-- 批量表单：表格里的 checkbox 通过 form 属性关联到这里
     （HTML 不允许 form 嵌套，筛选表单是 GET，批量必须是 POST） -->
<form id="batchForm" method="post" action="{$entry_prefix}/admin/plugin/member/member/batch" style="display:none">
  <input type="hidden" name="_token" value="{$csrf}">
  <input type="hidden" name="_form_token" value="{$form_token}">
  <input type="hidden" name="action" id="batchActionInput" value="">
  <input type="hidden" name="group_id" id="batchGroupInput" value="3">
</form>

{if $is_super}
<div class="member-batch-bar">
  <label class="member-check"><input type="checkbox" id="checkAll"> {lang member.select_page}</label>
  <span class="member-batch-sep">{lang member.batch_actions}</span>
  <button class="nv-btn" type="button" onclick="doBatch('enable')">{lang member.enable}</button>
  <button class="nv-btn" type="button" onclick="doBatch('disable')">{lang member.status_disabled}</button>
  <button class="nv-btn" type="button" onclick="doBatch('lock')">{lang member.lock}</button>
  <button class="nv-btn" type="button" onclick="doBatch('unlock')">{lang member.unlock}</button>
  <button class="nv-btn" type="button" onclick="doBatch('approve')">{lang member.approve}</button>
  <button class="nv-btn" type="button" onclick="doBatch('reject')">{lang member.reject}</button>
  <select id="batchGroup" title="{lang member.batch_change_group}">
    <option value="3">{lang member.change_to_member}</option>
    <option value="2">{lang member.change_to_editor}</option>
  </select>
  <button class="nv-btn" type="button" onclick="doBatch('group')">{lang member.change_group}</button>
</div>
{/if}

<div class="nv-card">
  <div class="nv-card-body">
    {if empty($list.items)}
    <div class="nv-empty">{lang member.no_members_match}</div>
    {else}
    <table class="member-table">
      <thead>
        <tr>
          {if $is_super}<th style="width:34px"></th>{/if}
          <th>ID</th><th>{lang member.member}</th><th>{lang admin.status}</th><th>{lang member.region}</th>
          <th class="nv-num">{lang member.available_points}</th><th class="nv-num">{lang member.total_points_col}</th>
          <th>{lang member.register_time}</th><th>{lang admin.operation}</th>
        </tr>
      </thead>
      <tbody>
      {loop $list.items as $m}
      <tr>
        {if $is_super}<td><input class="member-check-item" type="checkbox" name="ids[]" value="{$m.user_id}" form="batchForm"></td>{/if}
        <td>{$m.user_id}</td>
        <td>
          <a href="{$entry_prefix}/member/{$m.user_id}" target="_blank">{$m.nickname}</a>
          <div style="font-size:12px;color:var(--color-text-muted,#6b7280)">{$m.username}</div>
        </td>
        <td>
          {if $m.user_status == 1}<span class="member-badge is-ok">{lang member.status_normal}</span>
          {elseif $m.user_status == 2}<span class="member-badge is-warn">{lang member.status_pending_active}</span>
          {elseif $m.user_status == 3}<span class="member-badge is-warn">{lang member.status_locked}</span>
          {elseif $m.user_status == 4}<span class="member-badge is-warn">{lang member.status_pending_review}</span>
          {else}<span class="member-badge is-off">{lang member.status_disabled}</span>{/if}
        </td>
        <td>
          {if !empty($m.province)}{$m.province}{/if}{if !empty($m.city)} / {$m.city}{/if}{if !empty($m.district)} / {$m.district}{/if}{if empty($m.province)}—{/if}
        </td>
        <td class="nv-num">{$m.points}</td>
        <td class="nv-num">{$m.total_points}</td>
        <td style="font-size:13px">{$m.register_at_format}</td>
        <td>
          <div class="member-actions">
            <a class="nv-btn" href="{$entry_prefix}/admin/plugin/member/detail/{$m.user_id}">{lang member.detail}</a>
            <a class="nv-btn" href="{$entry_prefix}/admin/plugin/member/member/edit/{$m.user_id}">{lang member.group_editor}</a>
            <a class="nv-btn" href="{$entry_prefix}/member/{$m.user_id}" target="_blank">{lang member.homepage}</a>
          </div>
        </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/members?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/members?page={$next_page}">{lang admin.next_page}</a>
  {else}
  <span class="is-disabled">{lang admin.next_page}</span>
  {/if}
</div>
{/if}

{if $is_super}
<details class="nv-card" style="margin-top:16px">
  <summary style="cursor:pointer;padding:14px 16px;font-weight:500">{lang member.send_message}</summary>
  <form id="msgForm" method="post" action="{$entry_prefix}/admin/plugin/member/message/send" style="padding:0 16px 16px">
    <input type="hidden" name="_token" value="{$csrf}">
    <input type="hidden" name="_form_token" value="{$form_token}">
    <div class="member-filter-grid">
      <div class="member-field">
        <label for="msgScope">{lang member.recipients}</label>
        <select id="msgScope" name="scope">
          <option value="ids">{lang member.selected_on_page}</option>
          <option value="all">{lang member.all_normal_members}</option>
        </select>
      </div>
      <div class="member-field" style="grid-column:span 2">
        <label for="msgTitle">{lang admin.title}</label>
        <input id="msgTitle" type="text" name="title" maxlength="120" required placeholder="{lang member.msg_title_example}">
      </div>
    </div>
    <div class="member-field" style="margin-top:10px">
      <label for="msgContent">{lang member.content_plain}</label>
      <textarea id="msgContent" name="content" rows="4" required maxlength="2000" style="width:100%"></textarea>
    </div>
    <div style="margin-top:10px">
      <button class="nv-btn nv-btn-primary" type="submit">{lang member.send}</button>
      <span class="nv-tips">{lang member.select_on_page_hint}</span>
    </div>
  </form>
</details>
{/if}

<script>
(function () {
  // 全选：只影响本页，不跨页（跨页全选需要服务端保存选择状态，
  // 而批量上限本来就只有 200，分页全选的实际价值不大）
  var all = document.getElementById('checkAll');
  var items = document.querySelectorAll('.member-check-item');
  if (all) {
    all.addEventListener('change', function () {
      for (var i = 0; i < items.length; i++) { items[i].checked = all.checked; }
    });
  }

  window.doBatch = function (action) {
    var checked = document.querySelectorAll('.member-check-item:checked');
    if (!checked.length) { alert('{lang member.select_members_first}'); return; }
    if (checked.length > 200) { alert('{lang member.js_max_200}'); return; }
    var label = {
      enable: '{lang member.enable}', disable: '{lang member.status_disabled}', lock: '{lang member.lock}', unlock: '{lang member.unlock}',
      approve: '{lang member.approve}', reject: '{lang member.reject}', group: '{lang member.change_group}'
    }[action] || action;
    if (!confirm('{lang member.js_confirm_selected}' + checked.length + '{lang member.js_confirm_on}' + label + '{lang member.js_confirm_q}')) return;

    document.getElementById('batchActionInput').value = action;
    var g = document.getElementById('batchGroup');
    if (g) { document.getElementById('batchGroupInput').value = g.value; }
    document.getElementById('batchForm').submit();
  };

  // 导出时带上当前筛选条件（去掉 page，导出的是"全部命中项"）
  //
  // 入口模式（默认）下地址是 /index.php?/admin/plugin/member&keyword=x ——
  // 路径本身住在查询串里，location.search 拿到的不是参数而是 "/admin/plugin/member&..."。
  // 直接拼 '/admin/plugin/member/export' + 它，会拼出一条根本不存在的 URL。
  // 这里先剥掉路径部分，只留 & 之后的筛选参数，再补上入口前缀。
  var exp = document.getElementById('exportLink');
  if (exp) {
    var q = (location.search || '').replace(/^\??\/admin\/plugin\/member/, '');
    q = q.replace(/([?&])page=\d+&?/, '$1').replace(/[?&]$/, '');
    if (q && q.charAt(0) !== '&' && q.charAt(0) !== '?') { q = '&' + q; }
    exp.href = '{$entry_prefix}/admin/plugin/member/export' + q;
  }

  // 群发"本页勾选"时，把勾选的 id 复制进消息表单
  var msgForm = document.getElementById('msgForm');
  if (msgForm) {
    msgForm.addEventListener('submit', function (e) {
      var scope = document.getElementById('msgScope').value;
      var old = msgForm.querySelectorAll('input[name="ids[]"]');
      for (var i = 0; i < old.length; i++) { old[i].parentNode.removeChild(old[i]); }
      if (scope === 'ids') {
        var checked = document.querySelectorAll('.member-check-item:checked');
        if (!checked.length) { e.preventDefault(); alert('{lang member.select_members_in_list}'); return; }
        for (var j = 0; j < checked.length; j++) {
          var h = document.createElement('input');
          h.type = 'hidden';
          h.name = 'ids[]';
          h.value = checked[j].value;
          msgForm.appendChild(h);
        }
      }
    });
  }
})();
</script>

<script>
(function () {
  // 后台筛选器的省 → 市 → 区县联动。
  // 与前台资料页共用同一份字典，但走后台路由（AdminAuth 保护）。
  var p = document.getElementById('mProvince');
  var c = document.getElementById('mCity');
  var d = document.getElementById('mDistrict');
  if (!p || !c || !d) { return; }

  function fill(sel, label, list, keep) {
    while (sel.firstChild) { sel.removeChild(sel.firstChild); }
    var head = document.createElement('option');
    head.value = '';
    head.textContent = label;
    sel.appendChild(head);
    (list || []).forEach(function (v) {
      var op = document.createElement('option');
      op.value = v;
      op.textContent = v;
      if (keep && v === keep) { op.selected = true; }
      sel.appendChild(op);
    });
  }

  function load(province, city, done) {
    var url = '/admin/plugin/member/regions?province=' + encodeURIComponent(province || '');
    if (city) { url += '&city=' + encodeURIComponent(city); }
    fetch(url, { credentials: 'same-origin' })
      .then(function (r) { return r.json(); })
      .then(function (res) { done(res && res.data ? res.data : {}); })
      .catch(function () { done({}); });
  }

  p.addEventListener('change', function () {
    fill(d, '{lang member.any}', [], '');
    if (!p.value) { fill(c, '{lang member.any}', [], ''); return; }
    fill(c, '{lang member.loading_text}', [], '');
    load(p.value, '', function (data) { fill(c, '{lang member.any}', data.cities, ''); });
  });

  c.addEventListener('change', function () {
    if (!c.value) { fill(d, '{lang member.any}', [], ''); return; }
    fill(d, '{lang member.loading_text}', [], '');
    load(p.value, c.value, function (data) {
      fill(d, data.districts && data.districts.length ? '{lang member.any}' : '{lang member.no_districts}', data.districts, '');
    });
  });
})();
</script>