{layout layout}
<link rel="stylesheet" href="/plugin/member/static/member-system.css">
<link rel="stylesheet" href="/plugin/member/static/member.css">
<div class="ms-page">
  <div class="container">
    <div class="ms-layout">

      <aside class="ms-aside">
        <div class="ms-profile-card">
          <div class="ms-avatar ms-avatar-lg" style="{$avatar_style}">
            {if !empty($profile.avatar)}
            <img src="{$profile.avatar}" alt="{$profile.nickname}">
            {else}
            {$avatar_char}
            {/if}
          </div>
          <p class="ms-profile-name">{$profile.nickname}</p>
          <p class="ms-profile-meta">
            {if !empty($level)}<span class="ms-level" style="background:{$level.color}">{$level.name}</span>{/if}
          </p>
          <div class="ms-points">
            <div class="ms-points-num">{if !empty($profile)}{$profile.points}{else}0{/if}</div>
            <div class="ms-points-label">可用积分</div>
          </div>
        </div>

        <ul class="ms-nav">
          <li><a href="{$entry_prefix}/member/center" class="{if $nav_active=='center'}is-active{/if}">会员中心</a></li>
          <li><a href="{$entry_prefix}/member/profile" class="{if $nav_active=='profile'}is-active{/if}">资料设置</a></li>
          {if !empty($appt_enabled)}
          <li><a href="{$entry_prefix}/member/appointments" class="{if $nav_active=='appointments'}is-active{/if}">我的预约</a></li>
          {/if}
          <li><a href="{$entry_prefix}/member/vip" class="{if $nav_active=='vip'}is-active{/if}">我的 VIP</a></li>
          <li><a href="{$entry_prefix}/member/submit" class="{if $nav_active=='submit'}is-active{/if}">我要投稿</a></li>
          <li><a href="{$entry_prefix}/member/submits" class="{if $nav_active=='submits'}is-active{/if}">我的投稿</a></li>
          <li><a href="{$entry_prefix}/member/favorites" class="{if $nav_active=='favorites'}is-active{/if}">我的收藏</a></li>
          <li>
            <a href="{$entry_prefix}/member/messages" class="{if $nav_active=='messages'}is-active{/if}">
              消息通知{if !empty($unread) && $unread>0}<span class="ms-nav-badge">{$unread}</span>{/if}
            </a>
          </li>
          <li><a href="{$entry_prefix}/member/followers" class="{if $nav_active=='followers'}is-active{/if}">我的粉丝</a></li>
          <li><a href="{$entry_prefix}/members">会员列表</a></li>
          {if !empty($wallet_enabled)}<li><a href="{$entry_prefix}/member/wallet">我的资产</a></li>{/if}
          {if !empty($vip_enabled)}<li><a href="{$entry_prefix}/member/vip">我的 VIP</a></li>{/if}
          {if !empty($socialauth_enabled)}<li><a href="{$entry_prefix}/member/binds">社交账号</a></li>{/if}
        </ul>
      </aside>

      <main>
        <div class="ms-head">
          <div>
            <h1 class="ms-title">资料设置</h1>
            <p class="ms-subtitle">完善资料，让更多人认识你</p>
          </div>
        </div>

        {if $review_enabled}
        <div class="ms-notice" style="margin-bottom:18px;border-color:#fde68a;background:#fffbeb">
          <div class="ms-notice-title">资料需要管理员审核后才会公开</div>
          <div>
            为防止违法和不当信息，你修改或填写的昵称、头像、简介、地区等内容，提交后先进入审核队列，
            管理员通过后才会在会员列表、个人主页等页面展示；未通过的修改不会生效，你可以按提示修改后重新提交。
          </div>
          {if !empty($pending_review)}
          <div style="margin-top:12px;padding-top:12px;border-top:1px dashed #fcd34d">
            <strong>你有一条资料修改正在审核中</strong>
            <span style="color:#92400e">（提交于 {$pending_review.created_text}）</span>
            {if !empty($pending_review.diff)}
            <table style="width:100%;border-collapse:collapse;margin-top:8px;font-size:13px">
              <thead>
                <tr style="text-align:left;color:#92400e">
                  <th style="padding:4px 8px;width:120px">项目</th>
                  <th style="padding:4px 8px">当前对外展示</th>
                  <th style="padding:4px 8px">提交的修改</th>
                </tr>
              </thead>
              <tbody>
                {loop $pending_review.diff as $d}
                <tr style="border-top:1px solid #fde68a">
                  <td style="padding:4px 8px;color:#6b7280">{$d.label}</td>
                  <td style="padding:4px 8px;color:#6b7280">{if !empty($d.is_image)}<img src="{$d.old}" alt="当前" style="width:40px;height:40px;border-radius:50%;object-fit:cover">{else}{$d.old}{/if}</td>
                  <td style="padding:4px 8px;color:#111827;font-weight:500">{if !empty($d.is_image)}<img src="{$d.new}" alt="待审" style="width:40px;height:40px;border-radius:50%;object-fit:cover">{else}{$d.new}{/if}</td>
                </tr>
                {/loop}
              </tbody>
            </table>
            {/if}
          </div>
          {/if}
          {if !empty($pending_avatar)}
          <div style="margin-top:10px">
            <strong>新头像正在审核中</strong>
            <span style="color:#92400e">（提交于 {$pending_avatar.created_text}）</span>
            <img src="{$pending_avatar.payload_data.avatar}" alt="待审头像" style="width:44px;height:44px;border-radius:50%;object-fit:cover;margin-left:10px;vertical-align:middle">
          </div>
          {/if}
        </div>
        {/if}

        <div class="ms-card" style="margin-bottom:18px">
          <div class="ms-card-head"><span class="ms-card-title">头像</span></div>
          <div class="ms-card-body">
            <div class="ms-split" style="grid-template-columns:auto 1fr;align-items:center">
              <span class="ms-avatar ms-avatar-lg" style="{$avatar_style}">
                {if !empty($profile.avatar)}
                <img src="{$profile.avatar}" alt="当前头像">
                {else}
                {$avatar_char}
                {/if}
              </span>
              <form method="post" action="{$entry_prefix}/member/avatar" enctype="multipart/form-data">
                <input type="hidden" name="_token" value="{$csrf}">
                <input type="hidden" name="_form_token" value="{$avatar_form_token}">
                <input type="file" name="avatar" accept="image/jpeg,image/png,image/gif,image/webp" required>
                <div class="ms-savebar">
                  <button class="ms-btn ms-btn-primary" type="submit">上传头像</button>
                  <span class="ms-hint">JPG / PNG / GIF / WebP，不超过 2 MB，自动裁剪为 256×256 方形。</span>
                </div>
              </form>
            </div>
          </div>
        </div>

        <form method="post" action="{$entry_prefix}/member/profile">
          <input type="hidden" name="_token" value="{$csrf}">
          <input type="hidden" name="_form_token" value="{$form_token}">

          <div class="ms-card">
            <div class="ms-card-head"><span class="ms-card-title">基本信息</span></div>
            <div class="ms-card-body">
              <div class="ms-form-grid">
                <div class="ms-field">
                  <label class="ms-label" for="pNickname">昵称</label>
                  <input class="ms-input" id="pNickname" type="text" name="nickname" value="{$form.nickname}"
                    maxlength="60" placeholder="展示给其他会员的名字">
                </div>
                <div class="ms-field">
                  <label class="ms-label" for="pProvince">
                    所在省份{loop $fields as $f}{if $f.name == 'province' && $f.required} <span style="color:#dc2626">*</span>{/if}{/loop}
                  </label>
                  <select class="ms-select" id="pProvince" name="province">
                    <option value="">请选择</option>
                    {loop $provinces as $pv}
                    <option value="{$pv}"{if $form.province == $pv} selected{/if}>{$pv}</option>
                    {/loop}
                  </select>
                </div>
                <div class="ms-field">
                  <label class="ms-label" for="pCity">所在城市</label>
                  <select class="ms-select" id="pCity" name="city">
                    <option value="">请先选择省份</option>
                    {loop $cities as $cv}
                    <option value="{$cv}"{if $form.city == $cv} selected{/if}>{$cv}</option>
                    {/loop}
                  </select>
                </div>
                <div class="ms-field">
                  <label class="ms-label" for="pDistrict">所在区县</label>
                  <select class="ms-select" id="pDistrict" name="district">
                    <option value="">请先选择城市</option>
                    {loop $districts as $dv}
                    <option value="{$dv}"{if $form.district == $dv} selected{/if}>{$dv}</option>
                    {/loop}
                  </select>
                </div>
                <div class="ms-field">
                  <label class="ms-label" for="pGender">性别</label>
                  <select class="ms-select" id="pGender" name="gender">
                    <option value="0"{if $form.gender == 0} selected{/if}>保密</option>
                    <option value="1"{if $form.gender == 1} selected{/if}>男</option>
                    <option value="2"{if $form.gender == 2} selected{/if}>女</option>
                  </select>
                </div>
                <div class="ms-field">
                  <label class="ms-label" for="pBirthday">生日</label>
                  <input class="ms-input" id="pBirthday" type="date" name="birthday"
                    value="{$form.birthday}">
                </div>
                <div class="ms-field">
                  <label class="ms-label" for="pWebsite">个人网站</label>
                  <input class="ms-input" id="pWebsite" type="text" name="website" value="{$form.website}"
                    maxlength="250" placeholder="https:// 仅支持 http/https">
                </div>
                <div class="ms-field">
                  <label class="ms-label" for="pPrivacy">主页可见性</label>
                  <select class="ms-select" id="pPrivacy" name="privacy">
                    {loop $privacy_options as $pv => $pl}
                    <option value="{$pv}"{if $form.privacy == $pv} selected{/if}>{$pl}</option>
                    {/loop}
                  </select>
                  <span class="ms-hint">选择"仅关注者/仅自己"后，其他人访问你的主页会看到 404</span>
                </div>
                <div class="ms-field is-full">
                  <label class="ms-label" for="pBio">个人简介</label>
                  <textarea class="ms-textarea" id="pBio" name="bio" rows="3" maxlength="500"
                    placeholder="简单介绍一下自己（纯文本）">{$form.bio}</textarea>
                </div>
              </div>
            </div>
          </div>

          {if !empty($fields)}
          <div class="ms-card" style="margin-top:18px">
            <div class="ms-card-head"><span class="ms-card-title">扩展资料</span></div>
            <div class="ms-card-body">
              <div class="ms-form-grid is-3">
                {loop $fields as $fname => $field}
                {if $field.name != 'province' && $field.name != 'city' && $field.name != 'district'}
                <div class="ms-field">
                  <label class="ms-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 class="ms-select" id="c{$field.id}" name="custom[{$field.name}]">
                    <option value="">请选择</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 class="ms-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 class="ms-input" id="c{$field.id}" type="date" name="custom[{$field.name}]"
                    value="{if $form.custom[$field.name]}{$form.custom[$field.name]}{/if}">
                  {elseif $field.type == 'checkbox'}
                  <div class="ms-checks">
                    {loop $field.option_list as $opt}
                    <label class="ms-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 class="ms-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="ms-hint">{$field.tips}</span>{/if}
                </div>
                {/if}
                {/loop}
              </div>
            </div>
          </div>
          {/if}

          <div class="ms-savebar">
            <button class="ms-btn ms-btn-primary ms-btn-block" type="submit" style="width:auto">保存资料</button>
            <a class="ms-btn" href="{$entry_prefix}/member/center">返回会员中心</a>
          </div>
        </form>
      </main>

    </div>
  </div>
</div>

<script>
(function () {
  // 省 → 市 → 区县 三级联动
  var p = document.getElementById('pProvince');
  var c = document.getElementById('pCity');
  var d = document.getElementById('pDistrict');
  if (!p || !c || !d) { return; }

  function fill(sel, placeholder, list, keep) {
    while (sel.firstChild) { sel.removeChild(sel.firstChild); }
    var head = document.createElement('option');
    head.value = '';
    head.textContent = placeholder;
    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 = '/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 () {
    if (!p.value) {
      fill(c, '请先选择省份', [], '');
      fill(d, '请先选择城市', [], '');
      return;
    }
    fill(c, '加载中…', [], '');
    fill(d, '请先选择城市', [], '');
    load(p.value, '', function (data) {
      fill(c, '请选择城市', data.cities, '');
    });
  });

  c.addEventListener('change', function () {
    if (!c.value) {
      fill(d, '请先选择城市', [], '');
      return;
    }
    fill(d, '加载中…', [], '');
    load(p.value, c.value, function (data) {
      var list = data.districts || [];
      fill(d, list.length ? '请选择区县' : '该市暂无区县数据', list, '');
    });
  });
})();
</script>