{layout layout}
<link rel="stylesheet" href="/plugin/member/static/member-system.css">
<link rel="stylesheet" href="/plugin/member/static/vip.css">
<section class="container" style="padding:28px 16px 48px">
  <div style="display:flex;justify-content:space-between;align-items:baseline;flex-wrap:wrap;gap:10px;margin-bottom:18px">
    <h1 style="font-size:22px;font-weight:500;margin:0">{lang vip.title}</h1>
    <div style="display:flex;gap:8px">
      <a class="btn" href="{$entry_prefix}/member/vip/orders">开通记录</a>
      <a class="btn" href="{$entry_prefix}/member/center">会员中心</a>
    </div>
  </div>

  <!-- 当前 VIP 状态 -->
  {if !empty($my)}
  <div class="vip-card is-active">
    <div class="vip-card-head">
      <span class="vip-badge">{$my.plan_name}</span>
      <span class="vip-expire">有效期至 {date('Y-m-d', $my.expire_at)}（剩 {$my.days_left} 天）</span>
    </div>
    {if !empty($my_privileges)}
    <div class="vip-priv">
      {loop $my_privileges as $p}<span class="vip-priv-item">{$p}</span>{/loop}
    </div>
    {/if}
  </div>
  {else}
  <div class="vip-card">
    <div class="vip-card-head">
      <span class="vip-badge vip-badge-muted">普通会员</span>
      <span class="vip-expire">{lang vip.expired}，开通 VIP 享专属特权</span>
    </div>
  </div>
  {/if}

  <!-- 套餐列表 -->
  <h2 style="font-size:16px;font-weight:500;margin:24px 0 14px">会员套餐</h2>
  {if !empty($plans)}
  <div class="vip-plans">
    {loop $plans as $plan}
    <div class="vip-plan">
      <div class="vip-plan-name">{$plan.name}</div>
      <div class="vip-plan-price">
        {if $plan.pay_type == 1}
        <b>{$plan.points_price}</b> 积分
        {else}
        <b>¥{$plan.price_text}</b>
        {/if}
        <span class="vip-plan-unit">/ {$plan.duration_days} 天</span>
      </div>
      {if !empty($plan.description)}
      <div class="vip-plan-desc">{$plan.description}</div>
      {/if}
      {if !empty($plan.privilege_text)}
      <div class="vip-priv">
        {loop $plan.privilege_text as $p}<span class="vip-priv-item">{$p}</span>{/loop}
      </div>
      {/if}
      {if $plan.gift_points > 0 || $plan.gift_balance > 0}
      <div class="vip-plan-gift">
        开通赠送：
        {if $plan.gift_points > 0}{$plan.gift_points} 积分{/if}
        {if $plan.gift_balance > 0} ¥{$plan.gift_balance_text}{/if}
      </div>
      {/if}
      <form class="vip-buy-form" data-plan="{$plan.id}">
        <input type="hidden" name="_token" value="{$csrf}">
        <input type="hidden" name="_form_token" value="{$form_token}">
        <input type="hidden" name="plan_id" value="{$plan.id}">
        <button type="submit" class="btn btn-primary vip-buy-btn">立即开通</button>
        <span class="vip-buy-msg"></span>
      </form>
    </div>
    {/loop}
  </div>
  {else}
  <div class="vip-empty">暂无可售套餐，请联系管理员</div>
  {/if}
</section>
<script>
document.querySelectorAll('.vip-buy-form').forEach(function (form) {
  form.addEventListener('submit', function (e) {
    e.preventDefault();
    var btn = form.querySelector('.vip-buy-btn');
    var msg = form.querySelector('.vip-buy-msg');
    btn.disabled = true;
    msg.textContent = '处理中…';
    msg.className = 'vip-buy-msg';
    fetch('{$entry_prefix}/member/vip/buy', {
      method: 'POST',
      headers: {'Content-Type': 'application/x-www-form-urlencoded', 'X-Requested-With': 'XMLHttpRequest'},
      body: new URLSearchParams(new FormData(form))
    }).then(function (r) { return r.json(); }).then(function (d) {
      if (d && d.code === 0) {
        msg.textContent = (d.message || '开通成功');
        msg.className = 'vip-buy-msg is-ok';
        setTimeout(function () { location.reload(); }, 800);
      } else {
        msg.textContent = (d && d.message) ? d.message : '开通失败';
        msg.className = 'vip-buy-msg is-err';
        btn.disabled = false;
      }
    }).catch(function () {
      msg.textContent = '网络错误，请重试';
      msg.className = 'vip-buy-msg is-err';
      btn.disabled = false;
    });
  });
});
</script>