{layout admin/layout}
<link rel="stylesheet" href="/plugin/member/static/member-system.css">
<link rel="stylesheet" href="/plugin/member-community/static/community.css">
<div class="nv-card">
  <div class="nv-card-head"><h3 class="nv-card-title">{lang community.settings_title}</h3></div>
  <div class="nv-card-body">
    <form method="post" action="{$entry_prefix}/admin/plugin/member-community/save" id="communityForm">
      <input type="hidden" name="_token" value="{$csrf}">
      <input type="hidden" name="_form_token" value="{$form_token}">

      <h4 class="nv-section-title">{lang community.sec_basic}</h4>

      <div class="nv-form-item">
        <label class="nv-label">{lang community.enable_community}</label>
        <div class="nv-control">
          <label class="nv-switch">
            <input type="hidden" name="enable" value="0">
            <input type="checkbox" name="enable" value="1"{if $cfg.enable==1} checked{/if}>
            <span></span>
          </label>
          <p class="nv-tips">{lang community.enable_community_hint}</p>
        </div>
      </div>

      <div class="nv-form-item">
        <label class="nv-label">{lang community.vip_only}</label>
        <div class="nv-control">
          <label class="nv-switch">
            <input type="hidden" name="vip_only" value="0">
            <input type="checkbox" name="vip_only" value="1"{if $cfg.vip_only==1} checked{/if}>
            <span></span>
          </label>
          <p class="nv-tips">{lang community.vip_only_hint}</p>
        </div>
      </div>

      {* 列表每页条数用 nv-form-item（label 在上、控件在下）而不是紧凑的
         nv-form-row：页面里既有开关又有数字框时，统一竖排才不会出现
         "开关压住文字 / 输入框悬空" 的错位（原 settings.html 的错位就源于此）。 *}
      <div class="nv-form-item">
        <label class="nv-label" for="list_per_page">{lang community.list_per_page}</label>
        <div class="nv-control">
          <input class="nv-input" id="list_per_page" type="number" name="list_per_page" value="{$cfg.list_per_page}" min="6" max="100">
        </div>
      </div>

      <div class="nv-form-item">
        <label class="nv-label">{lang community.show_province}</label>
        <div class="nv-control">
          <label class="nv-switch">
            <input type="hidden" name="show_province_filter" value="0">
            <input type="checkbox" name="show_province_filter" value="1"{if $cfg.show_province_filter==1} checked{/if}>
            <span></span>
          </label>
        </div>
      </div>

      <h4 class="nv-section-title">{lang community.sec_booking}</h4>

      <div class="nv-form-item">
        <label class="nv-label">{lang community.enable_booking}</label>
        <div class="nv-control">
          <label class="nv-switch">
            <input type="hidden" name="enable_appointment" value="0">
            <input type="checkbox" name="enable_appointment" value="1"{if $cfg.enable_appointment==1} checked{/if}>
            <span></span>
          </label>
          <p class="nv-tips">{lang community.enable_booking_hint}</p>
        </div>
      </div>

      <div class="nv-form-item">
        <label class="nv-label">{lang community.services}</label>
        <div class="nv-control">
          <textarea class="nv-textarea" name="appointment_services" rows="3" placeholder="{lang community.services_ph}">{$cfg.appointment_services}</textarea>
        </div>
      </div>

      <div class="nv-form-item">
        <label class="nv-label">{lang community.booking_notice}</label>
        <div class="nv-control">
          <textarea class="nv-textarea" name="appointment_notice" rows="3">{$cfg.appointment_notice}</textarea>
        </div>
      </div>

      <div class="nv-form-item">
        <label class="nv-label" for="appointment_daily_limit">{lang community.daily_limit}</label>
        <div class="nv-control">
          <input class="nv-input" id="appointment_daily_limit" type="number" name="appointment_daily_limit" value="{$cfg.appointment_daily_limit}" min="0" max="999">
        </div>
      </div>

      <div class="nv-form-item">
        <label class="nv-label">{lang community.allow_guest}</label>
        <div class="nv-control">
          <label class="nv-switch">
            <input type="hidden" name="appointment_guest" value="0">
            <input type="checkbox" name="appointment_guest" value="1"{if $cfg.appointment_guest==1} checked{/if}>
            <span></span>
          </label>
          <p class="nv-tips">{lang community.allow_guest_hint}</p>
        </div>
      </div>

      <div class="nv-form-item">
        <label class="nv-label" for="appointment_guest_per_hour">{lang community.guest_limit}</label>
        <div class="nv-control">
          <input class="nv-input" id="appointment_guest_per_hour" type="number" name="appointment_guest_per_hour" value="{$cfg.appointment_guest_per_hour}" min="0" max="999">
        </div>
      </div>

      <div class="nv-form-item">
        <label class="nv-label">{lang community.show_submits}</label>
        <div class="nv-control">
          <label class="nv-switch">
            <input type="hidden" name="list_show_submits" value="0">
            <input type="checkbox" name="list_show_submits" value="1"{if $cfg.list_show_submits==1} checked{/if}>
            <span></span>
          </label>
          <p class="nv-tips">{lang community.show_submits_hint}</p>
        </div>
      </div>

      <h4 class="nv-section-title">{lang community.sec_fields}
        <button type="button" class="nv-btn nv-btn-sm" id="addFieldBtn">{lang community.add_field}</button>
      </h4>
      <p class="nv-tips">{lang community.fields_hint}</p>

      <table class="nv-table" id="fieldTable">
        <thead>
          <tr>
            <th style="width:14%">{lang community.col_field_name}</th>
            <th style="width:16%">{lang community.col_label}</th>
            <th style="width:12%">{lang community.col_type}</th>
            <th style="width:8%">{lang community.col_required}</th>
            <th style="width:20%">{lang community.col_hint_ph}</th>
            <th style="width:22%">{lang community.col_options}</th>
            <th style="width:8%"></th>
          </tr>
        </thead>
        <tbody>
          {loop $fields as $f}
          <tr class="field-row{if $f.is_core} is-core{/if}">
            {if $f.is_core}
            <td><code>{$f.name}</code><input type="hidden" name="f_name[]" value="{$f.name}"></td>
            {else}
            <td><input class="nv-input" type="text" name="f_name[]" value="{$f.name}"></td>
            {/if}
            <td><input class="nv-input" type="text" name="f_label[]" value="{$f.label}"></td>
            <td>
              {* 不能写两个 class 属性：HTML 只认第一个，第二个会被浏览器丢弃，
                 导致已有行的类型下拉丢失 .ftype 钩子、JS 联动失效。 *}
              <select class="nv-input ftype" name="f_type[]">
                {loop $types as $t}
                <option value="{$t}"{if $f.type==$t} selected{/if}>{$t}</option>
                {/loop}
              </select>
            </td>
            <td><input type="checkbox" name="f_required[]" value="1"{if $f.required} checked{/if}></td>
            <td>
              <input class="nv-input" type="text" name="f_hint[]" value="{$f.hint}" placeholder="{lang community.hint_ph}">
              <input class="nv-input" type="text" name="f_placeholder[]" value="{$f.placeholder}" placeholder="{lang community.placeholder_ph}">
            </td>
            <td>
              {if $f.type=='select' && $f.name!='service' && $f.name!='appoint_time'}
              <textarea class="nv-textarea" name="f_options[]" rows="2">{loop $f.options as $o}{$o}
{/loop}</textarea>
              {else}
              <input type="hidden" name="f_options[]" value="">
              <span class="nv-muted">{if $f.name=='service'}{lang community.sys_service}{elseif $f.name=='appoint_time'}{lang community.sys_time}{else}—{/if}</span>
              {/if}
            </td>
            <td>{if !$f.is_core}<button type="button" class="nv-btn nv-btn-sm nv-btn-danger delFieldBtn">{lang admin.delete}</button>{else}<span class="nv-muted">{lang community.core}</span>{/if}</td>
          </tr>
          {/loop}
        </tbody>
      </table>

      <div class="nv-form-actions">
        <button type="submit" class="nv-btn nv-btn-primary">{lang community.save_settings}</button>
      </div>
    </form>
  </div>
</div>

<script>
(function(){
  var tbody = document.querySelector('#fieldTable tbody');

  function newRow(){
    var tr = document.createElement('tr');
    tr.className = 'field-row';
    tr.innerHTML =
      '<td><input class="nv-input" type="text" name="f_name[]" placeholder="{lang community.field_name_ph}"></td>' +
      '<td><input class="nv-input" type="text" name="f_label[]" placeholder="{lang community.label_ph}"></td>' +
      '<td><select class="nv-input ftype" name="f_type[]">' +
        {loop $types as $t}'<option value="{$t}">{$t}</option>' + {/loop}
      '</select></td>' +
      '<td><input type="checkbox" name="f_required[]" value="1"></td>' +
      '<td><input class="nv-input" type="text" name="f_hint[]" placeholder="{lang community.hint_ph}">' +
          '<input class="nv-input" type="text" name="f_placeholder[]" placeholder="{lang community.placeholder_ph}"></td>' +
      '<td><input type="hidden" name="f_options[]" value=""><span class="nv-muted">—</span></td>' +
      '<td><button type="button" class="nv-btn nv-btn-sm nv-btn-danger delFieldBtn">{lang admin.delete}</button></td>';
    tbody.appendChild(tr);
  }

  document.getElementById('addFieldBtn').addEventListener('click', newRow);

  tbody.addEventListener('click', function(e){
    if (e.target && e.target.classList.contains('delFieldBtn')) {
      var tr = e.target.closest('tr');
      if (tr) tr.parentNode.removeChild(tr);
    }
  });

  // Show options box when type is select
  tbody.addEventListener('change', function(e){
    if (e.target && e.target.classList.contains('ftype')) {
      var tr = e.target.closest('tr');
      var td = tr.children[5];
      if (e.target.value === 'select') {
        td.innerHTML = '<textarea class="nv-textarea" name="f_options[]" rows="2"></textarea>';
      } else {
        td.innerHTML = '<input type="hidden" name="f_options[]" value=""><span class="nv-muted">—</span>';
      }
    }
  });
})();
</script>