{*
 * 预约弹窗（列表页 / 个人主页共用）
 *
 * 用 {include community/_appt_modal} 引入，变量继承当前作用域：
 *   $appt.enabled     预约功能是否开启
 *   $appt.guest       是否允许游客提交
 *   $appt.need_login  游客不允许时提示登录
 *   $appt.fields      字段 schema（含 options）
 *   $appt.form_token  一次性表单令牌
 *   $appt.prefill     已登录用户的姓名/电话预填
 *}
{if !empty($appt.enabled)}
<div class="mc-appt" id="mcApptModal" aria-hidden="true">
  <div class="mc-appt-mask" data-appt-close></div>
  <div class="mc-appt-panel" role="dialog" aria-modal="true" aria-label="在线预约">
    <div class="mc-appt-head">
      <span class="mc-appt-title">在线预约</span>
      <button class="mc-appt-x" type="button" data-appt-close aria-label="关闭">&times;</button>
    </div>

    <div class="mc-appt-body">
      {if !empty($appt.need_login)}
      <div class="mc-appt-msg is-err">请先登录后再预约</div>
      <a class="ms-btn ms-btn-primary" href="{$entry_prefix}/login">去登录</a>
      {else}
      <form id="mcApptForm" method="post" action="{$entry_prefix}/member/appointment">
        <input type="hidden" name="_token" value="{$csrf}">
        <input type="hidden" name="_form_token" value="{$appt.form_token}">
        <input type="hidden" name="to_member_id" value="{$appt.member_id}">

        {loop $appt.fields as $f}
        <div class="mc-appt-field">
          <label for="mc-{$f.name}">
            {$f.label}{if !empty($f.required)}<i class="mc-req">*</i>{/if}
          </label>

          {if $f.type == 'select'}
          <select id="mc-{$f.name}" name="{$f.name}"{if !empty($f.required)} required{/if}>
            <option value="">请选择{$f.label}</option>
            {loop $f.options as $opt}
            <option value="{$opt}">{$opt}</option>
            {/loop}
          </select>
          {elseif $f.type == 'textarea'}
          <textarea id="mc-{$f.name}" name="{$f.name}" rows="3"
            placeholder="{$f.placeholder}"{if !empty($f.required)} required{/if}></textarea>
          {elseif $f.type == 'date'}
          <input id="mc-{$f.name}" type="date" name="{$f.name}"
            min="{$appt.today}" max="{$appt.max_date}"{if !empty($f.required)} required{/if}>
          {elseif $f.type == 'tel'}
          <input id="mc-{$f.name}" type="tel" name="{$f.name}" placeholder="{$f.placeholder}"
            {if $f.name == 'phone' && !empty($appt.prefill.phone)}value="{$appt.prefill.phone}"{/if}
            {if !empty($f.required)} required{/if}>
          {else}
          <input id="mc-{$f.name}" type="text" name="{$f.name}" placeholder="{$f.placeholder}"
            {if $f.name == 'name' && !empty($appt.prefill.name)}value="{$appt.prefill.name}"{/if}
            {if !empty($f.required)} required{/if}>
          {/if}

          {if !empty($f.hint)}<p class="mc-appt-hint">{$f.hint}</p>{/if}
        </div>
        {/loop}

        {if !empty($appt.notice)}
        <div class="mc-appt-notice">{$appt.notice}</div>
        {/if}

        <div class="mc-appt-msg" id="mcApptMsg"></div>

        <div class="mc-appt-foot">
          <button class="mc-btn" type="button" data-appt-close>取消</button>
          <button class="mc-btn mc-btn-primary" type="submit" id="mcApptSubmit"
            style="background:#2f6feb;border-color:#2f6feb;color:#fff;">立即预约</button>
        </div>
        {if !empty($appt.guest)}
        <p class="mc-appt-tip">未注册也可预约，请填写正确的联系电话，我们会电话与你确认。</p>
        {/if}
      </form>
      {/if}
    </div>
  </div>
</div>
{/if}