{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.edit_member_hash}{$user_row.id}</div>
    <div class="nv-page-desc">
      {$user_row.username}
      · {lang member.registered_at} {$user_row.created_at|date}
      · {lang member.admin_edit_note_1}{lang member.admin_edit_note_2}
    </div>
  </div>
  <div style="display:flex;gap:8px">
    <a class="nv-btn" href="{$entry_prefix}/admin/plugin/member/detail/{$user_row.id}">{lang member.member_detail}</a>
    <a class="nv-btn" href="{$entry_prefix}/admin/plugin/member/members">{lang member.back_to_list}</a>
  </div>
</div>

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

{if !empty($pending_review)}
<div class="nv-card" style="margin-bottom:16px;border-color:#fcd34d">
  <div class="nv-card-body">
    <div class="nv-page-title" style="font-size:15px;margin-bottom:8px">
      {lang member.has_pending_review}
      <span class="nv-muted" style="font-size:13px;font-weight:400">{lang member.paren_submitted_a}{$pending_review.created_text}{lang member.paren_submitted_b}</span>
    </div>
    {if !empty($pending_review.diff)}
    <table class="member-table">
      <thead><tr><th style="width:140px">{lang member.item}</th><th>{lang member.current_public}</th><th>{lang member.member_submitted_changes}</th></tr></thead>
      <tbody>
      {loop $pending_review.diff as $d}
      <tr>
        <td>{$d.label}</td>
        <td style="color:#6b7280">{if !empty($d.is_image)}<img src="{$d.old}" alt="{lang member.current}" style="width:36px;height:36px;border-radius:50%;object-fit:cover">{else}{$d.old}{/if}</td>
        <td style="color:#111827">{if !empty($d.is_image)}<img src="{$d.new}" alt="{lang member.pending_short}" style="width:36px;height:36px;border-radius:50%;object-fit:cover">{else}{$d.new}{/if}</td>
      </tr>
      {/loop}
      </tbody>
    </table>
    {else}
    <div class="nv-muted">{lang member.no_change_this_submit}</div>
    {/if}
    <div style="margin-top:10px;display:flex;gap:8px;align-items:center">
      <form 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_review}">
        <input type="hidden" name="id" value="{$pending_review.id}">
        <button class="nv-btn nv-btn-primary" type="submit">{lang member.approve_this_submit}</button>
      </form>
      <form method="post" action="{$entry_prefix}/admin/plugin/member/review/reject">
        <input type="hidden" name="_token" value="{$csrf}">
        <input type="hidden" name="_form_token" value="{$form_token_review}">
        <input type="hidden" name="id" value="{$pending_review.id}">
        <input type="hidden" name="note" value="{lang member.admin_manual_edit}">
        <button class="nv-btn" type="submit">{lang member.reject_this_submit}</button>
      </form>
      <a class="nv-btn" href="{$entry_prefix}/admin/plugin/member/member/edit/{$user_row.id}?use_pending=0">{lang member.refill_current}</a>
      <a class="nv-link" href="{$entry_prefix}/admin/plugin/member/reviews">{lang member.goto_review_list}</a>
    </div>
    <div class="nv-tips" style="margin-top:8px">{lang member.save_overwrite_hint_1}{lang member.save_overwrite_hint_2}</div>
  </div>
</div>
{/if}

{if !empty($pending_avatar)}
<div class="nv-card" style="margin-bottom:16px">
  <div class="nv-card-body" style="display:flex;align-items:center;gap:14px">
    <img src="{$pending_avatar.payload_data.avatar}" alt="{lang member.pending_avatar}" style="width:56px;height:56px;border-radius:50%;object-fit:cover">
    <div>
      <div style="font-weight:500">{lang member.avatar_pending}</div>
      <div class="nv-muted" style="font-size:13px">{lang member.submitted_at} {$pending_avatar.created_text}，{lang member.total_prefix}{$pending_avatar.field_count}{lang member.field_changes}</div>
    </div>
    <a class="nv-btn" style="margin-left:auto" href="{$entry_prefix}/admin/plugin/member/reviews">{lang member.goto_review}</a>
  </div>
</div>
{/if}

<form method="post" action="{$entry_prefix}/admin/plugin/member/member/update">
  <input type="hidden" name="_token" value="{$csrf}">
  <input type="hidden" name="_form_token" value="{$form_token}">
  <input type="hidden" name="user_id" value="{$user_row.id}">

  <div class="nv-card" style="margin-bottom:16px">
    <div class="nv-card-body">
      <div class="nv-page-title" style="font-size:15px;margin-bottom:12px">{lang member.account_info}</div>
      <table class="member-table">
        <tbody>
          <tr>
            <th style="width:120px">{lang member.login_account}</th>
            <td>{$user_row.username}</td>
            <th style="width:120px">{lang admin.col_group}</th>
            <td>{if $user_row.group_id == 1}{lang member.group_super}{elseif $user_row.group_id == 2}{lang member.group_editor}{else}{lang member.group_member}{/if}</td>
          </tr>
          <tr>
            <th>{lang member.mobile}</th>
            <td>
              {if $is_super}
              <input type="text" name="mobile" value="{$user_row.mobile}" maxlength="11" placeholder="{lang member.mobile_placeholder_11_1}{lang member.mobile_placeholder_11_2}" style="width:100%">
              {else}
              {if !empty($user_row.mobile)}{$user_row.mobile}{else}—{/if}
              {/if}
            </td>
            <th>{lang admin.email}</th>
            <td>
              {if $is_super}
              <input type="email" name="email" value="{$user_row.email}" maxlength="120" placeholder="{lang member.blank_clears}" style="width:100%">
              {else}
              {if !empty($user_row.email)}{$user_row.email}{else}—{/if}
              {/if}
            </td>
          </tr>
        </tbody>
      </table>
      {if !$is_super}
      <div class="nv-tips" style="margin-top:8px">{lang member.contact_super_only_1}{lang member.contact_super_only_2}</div>
      {/if}
    </div>
  </div>

  <div class="nv-card" style="margin-bottom:16px">
    <div class="nv-card-body">
      <div class="nv-page-title" style="font-size:15px;margin-bottom:12px">{lang member.member_profile}</div>
      <div class="member-filter-grid">
        <div class="member-field">
          <label for="eNickname">{lang admin.nickname}</label>
          <input id="eNickname" type="text" name="nickname" value="{$form.nickname}" maxlength="60" placeholder="{lang member.nickname_placeholder}">
        </div>
        <div class="member-field">
          <label for="eGender">{lang member.gender}</label>
          <select id="eGender" name="gender">
            <option value="0"{if $form.gender == 0} selected{/if}>{lang member.gender_secret}</option>
            <option value="1"{if $form.gender == 1} selected{/if}>{lang member.gender_male}</option>
            <option value="2"{if $form.gender == 2} selected{/if}>{lang member.gender_female}</option>
          </select>
        </div>
        <div class="member-field">
          <label for="eBirthday">{lang member.birthday}</label>
          <input id="eBirthday" type="date" name="birthday" value="{$form.birthday}">
        </div>
        <div class="member-field">
          <label for="eProvince">{lang member.province}</label>
          <select id="eProvince" name="province">
            <option value="">{lang member.please_select}</option>
            {loop $provinces as $pv}
            <option value="{$pv}"{if $form.province == $pv} selected{/if}>{$pv}</option>
            {/loop}
          </select>
        </div>
        <div class="member-field">
          <label for="eCity">{lang member.city}</label>
          <select id="eCity" name="city">
            <option value="">{lang member.please_select}</option>
            {loop $cities as $cv}
            <option value="{$cv}"{if $form.city == $cv} selected{/if}>{$cv}</option>
            {/loop}
          </select>
        </div>
        <div class="member-field">
          <label for="eDistrict">{lang member.district}</label>
          <select id="eDistrict" name="district">
            <option value="">{lang member.please_select}</option>
            {loop $districts as $dv}
            <option value="{$dv}"{if $form.district == $dv} selected{/if}>{$dv}</option>
            {/loop}
          </select>
        </div>
        <div class="member-field">
          <label for="eWebsite">{lang member.website}</label>
          <input id="eWebsite" type="text" name="website" value="{$form.website}" maxlength="250" placeholder="{lang member.ph_website}">
        </div>
        <div class="member-field">
          <label for="ePrivacy">{lang member.profile_visibility}</label>
          <select id="ePrivacy" name="privacy">
            {loop $privacy_options as $pv => $pl}
            <option value="{$pv}"{if $form.privacy == $pv} selected{/if}>{$pl}</option>
            {/loop}
          </select>
        </div>
        <div class="member-field">
          <label for="eAvatar">{lang member.avatar_url}</label>
          <input id="eAvatar" type="text" name="avatar" value="{$form.avatar}" maxlength="250" placeholder="{lang member.ph_avatar_path}">
          <span class="nv-tips">{lang member.avatar_path_hint}</span>
        </div>
        <div class="member-field" style="grid-column:1/-1">
          <label for="eBio">{lang member.bio}</label>
          <textarea id="eBio" name="bio" rows="3" maxlength="500" placeholder="{lang member.plain_text}">{$form.bio}</textarea>
        </div>
      </div>
    </div>
  </div>

  {if !empty($fields)}
  <div class="nv-card" style="margin-bottom:16px">
    <div class="nv-card-body">
      <div class="nv-page-title" style="font-size:15px;margin-bottom:12px">{lang member.extended_profile}</div>
      <div class="member-filter-grid">
        {loop $fields as $fname => $field}
        {if $field.name != 'province' && $field.name != 'city' && $field.name != 'district'}
        <div class="member-field">
          <label for="c{$field.id}">{$field.label}{if $field.required} <span style="color:#dc2626">*</span>{/if}</label>
          {if $field.type == 'select' || $field.type == 'radio'}
          <select id="c{$field.id}" name="custom[{$field.name}]">
            <option value="">{lang member.please_select}</option>
            {loop $field.option_list as $opt}
            <option value="{$opt}"{if $form.custom[$field.name] == $opt} selected{/if}>{$opt}</option>
            {/loop}
          </select>
          {elseif $field.type == 'textarea'}
          <textarea id="c{$field.id}" name="custom[{$field.name}]" rows="3" maxlength="500" placeholder="{$field.placeholder}">{$form.custom[$field.name]}</textarea>
          {elseif $field.type == 'date'}
          <input id="c{$field.id}" type="date" name="custom[{$field.name}]" value="{$form.custom[$field.name]}">
          {elseif $field.type == 'checkbox'}
          <div style="display:flex;gap:12px;flex-wrap:wrap;padding:6px 0">
            {loop $field.option_list as $opt}
            <label class="member-check">
              <input type="checkbox" name="custom[{$field.name}][]" value="{$opt}"
                {if isset($form.custom[$field.name]) && in_array($opt, explode(',', $form.custom[$field.name]))} checked{/if}>
              {$opt}
            </label>
            {/loop}
          </div>
          {else}
          <input id="c{$field.id}" type="text" name="custom[{$field.name}]" value="{$form.custom[$field.name]}" maxlength="200" placeholder="{$field.placeholder}">
          {/if}
          {if !empty($field.tips)}<span class="nv-tips">{$field.tips}</span>{/if}
        </div>
        {/if}
        {/loop}
      </div>
    </div>
  </div>
  {/if}

  <div class="nv-card">
    <div class="nv-card-body" style="display:flex;align-items:center;gap:10px">
      <button class="nv-btn nv-btn-primary" type="submit">{lang member.save_profile}</button>
      <a class="nv-btn" href="{$entry_prefix}/admin/plugin/member/detail/{$user_row.id}">{lang admin.cancel}</a>
      <span class="nv-tips">{lang member.save_effect_hint_1}{lang member.save_effect_hint_2}</span>
    </div>
  </div>
</form>

<script>
(function () {
  // 省 → 市 → 区县 联动（后台路由，AdminAuth 保护）
  var p = document.getElementById('eProvince');
  var c = document.getElementById('eCity');
  var d = document.getElementById('eDistrict');
  if (!p || !c || !d) { return; }

  function fill(sel, label, list) {
    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;
      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.please_select}', []);
    if (!p.value) { fill(c, '{lang member.please_select}', []); return; }
    fill(c, '{lang member.loading_text}', []);
    load(p.value, '', function (data) { fill(c, '{lang member.please_select}', data.cities); });
  });

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