{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">
          </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">{if !empty($summary.pending)}你有 {$summary.pending} 笔待处理的预约{else}还没有待处理的预约{/if}</p>
          </div>
          <div class="ms-head-actions">
            <a class="ms-btn ms-btn-accent" href="{$entry_prefix}/member/appointment">发起预约</a>
          </div>
        </div>

        <div class="ms-tabs">
          <a class="ms-tab{if $tab=='sent'} is-active{/if}" href="{$entry_prefix}/member/appointments?tab=sent">我发起的{if $summary.pending>0}<span class="ms-tab-badge">{$summary.pending}</span>{/if}</a>
          <a class="ms-tab{if $tab=='received'} is-active{/if}" href="{$entry_prefix}/member/appointments?tab=received">收到的预约{if $recv_summary.pending>0}<span class="ms-tab-badge">{$recv_summary.pending}</span>{/if}</a>
        </div>

        {if $tab == 'received'}
          {if !empty($received.items)}
          <div class="ms-appt-list">
            {loop $received.items as $it}
            <div class="ms-appt">
              <div class="ms-appt-date">
                <span class="ms-appt-day">{$it.day}</span>
                <span class="ms-appt-month">{$it.month} 月</span>
              </div>
              <div class="ms-appt-main">
                <p class="ms-appt-service">
                  {$it.service}
                  <span class="ms-st ms-st-{$it.status}">{$it.status_name}</span>
                </p>
                <p class="ms-appt-meta">{$it.date_text} {$it.time_text} · 周{$it.week}</p>
                <p class="ms-appt-meta">预约人：{$it.name} · 电话：{$it.phone}</p>
                {if !empty($it.remark)}
                <p class="ms-appt-note">备注：{$it.remark}</p>
                {/if}
                {if $it.status == 4 && !empty($it.admin_note)}
                <p class="ms-appt-note">处理备注：{$it.admin_note}</p>
                {/if}
              </div>
              <div class="ms-appt-side">
                <span class="ms-card-sub">提交于 {$it.created_text}</span>
                {if $it.can_cancel}
                <form method="post" action="{$entry_prefix}/member/appointment/cancel" onsubmit="return confirm('确认取消这笔预约？');">
                  <input type="hidden" name="_token" value="{$csrf}">
                  <input type="hidden" name="id" value="{$it.id}">
                  <button class="ms-btn ms-btn-sm" type="submit">取消预约</button>
                </form>
                {/if}
              </div>
            </div>
            {/loop}
          </div>

          {if $recv_pager.last_page > 1}
          <div class="ms-pager">
            {if $recv_pager.has_prev}<a href="{$recv_pager.prev_url}">上一页</a>{else}<span class="is-disabled">上一页</span>{/if}
            {loop $recv_pager.items as $it}
            {if $it == 0}<span class="is-disabled">…</span>
            {elseif $it.current}<span class="is-current">{$it.page}</span>
            {else}<a href="{$it.url}">{$it.page}</a>{/if}
            {/loop}
            {if $recv_pager.has_next}<a href="{$recv_pager.next_url}">下一页</a>{else}<span class="is-disabled">下一页</span>{/if}
          </div>
          {/if}

          {else}
          <div class="ms-card"><div class="ms-card-body">
            <div class="ms-empty" style="padding:40px">
              <div class="ms-empty-title">还没有收到的预约</div>
              <div class="ms-card-sub">别人在你的主页点击「预约 TA」后会出现在这里</div>
            </div>
          </div></div>
          {/if}

        {else}

        {if !empty($list.items)}
        <div class="ms-appt-list">
          {loop $list.items as $it}
          <div class="ms-appt">
            <div class="ms-appt-date">
              <span class="ms-appt-day">{$it.day}</span>
              <span class="ms-appt-month">{$it.month} 月</span>
            </div>
            <div class="ms-appt-main">
              <p class="ms-appt-service">
                {$it.service}
                <span class="ms-st ms-st-{$it.status}">{$it.status_name}</span>
              </p>
              <p class="ms-appt-meta">{$it.date_text} {$it.time_text} · 周{$it.week}</p>
              <p class="ms-appt-meta">预约人：{$it.name} · 电话：{$it.phone}</p>
              {if !empty($it.remark)}
              <p class="ms-appt-note">备注：{$it.remark}</p>
              {/if}
              {if $it.status == 4 && !empty($it.admin_note)}
              <p class="ms-appt-note">处理备注：{$it.admin_note}</p>
              {/if}
            </div>
            <div class="ms-appt-side">
              <span class="ms-card-sub">提交于 {$it.created_text}</span>
              {if $it.can_cancel}
              <form method="post" action="{$entry_prefix}/member/appointment/cancel" onsubmit="return confirm('确认取消这笔预约？');">
                <input type="hidden" name="_token" value="{$csrf}">
                <input type="hidden" name="id" value="{$it.id}">
                <button class="ms-btn ms-btn-sm" type="submit">取消预约</button>
              </form>
              {/if}
            </div>
          </div>
          {/loop}
        </div>

        {if $pager.last_page > 1}
        <div class="ms-pager">
          {if $pager.has_prev}<a href="{$pager.prev_url}">上一页</a>{else}<span class="is-disabled">上一页</span>{/if}
          {loop $pager.items as $it}
          {if $it == 0}<span class="is-disabled">…</span>
          {elseif $it.current}<span class="is-current">{$it.page}</span>
          {else}<a href="{$it.url}">{$it.page}</a>{/if}
          {/loop}
          {if $pager.has_next}<a href="{$pager.next_url}">下一页</a>{else}<span class="is-disabled">下一页</span>{/if}
        </div>
        {/if}

        {else}
        <div class="ms-card"><div class="ms-card-body">
          <div class="ms-empty" style="padding:40px">
            <div class="ms-empty-title">还没有预约记录</div>
            <a href="{$entry_prefix}/member/appointment">立即发起预约</a>
          </div>
        </div></div>
        {/if}

        {/if}

        <p style="margin-top:16px"><a class="ms-btn ms-btn-ghost" href="{$entry_prefix}/member/center">← 返回会员中心</a></p>
      </main>

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