{layout admin/layout}

<div class="nv-page-head">
  <div>
    <div class="nv-page-title">{lang admin.field_management} · {$model.title}</div>
    <div class="nv-page-desc">
      {lang admin.model_id} <span class="nv-tag">{$model.name}</span>, {lang admin.total} {$rows|count} {lang admin.unit_fields}
      ({lang admin.builtin} {$builtin_count} {lang admin.unit_word} + {lang admin.extended} {($rows|count - $builtin_count)} {lang admin.unit_word}).
      {lang admin.fields_editable_hint} {lang admin.fields_delete_hint} {lang admin.fields_disabled_hidden_hint}
    </div>
  </div>
  <div class="nv-page-actions">
    <a class="nv-btn" href="{$entry_prefix}/admin/model">{lang admin.back}{lang admin.models}</a>
    <a class="nv-btn" href="{$entry_prefix}/admin/content/{$model.name}">{lang admin.view}{lang admin.content}</a>
    <button class="nv-btn nv-btn-primary" type="button" data-field-add>＋ {lang admin.new_field}</button>
  </div>
</div>

{if $flash.message}<div class="nv-alert nv-alert-{$flash.type}">{$flash.message}</div>{/if}

<div class="nv-card">
  <div class="nv-card-head">
    <span class="nv-card-title">{lang admin.all}{lang admin.fields}</span>
    <span class="nv-muted">{lang admin.builtin_fields_editable} {lang admin.builtin_fields_protected}</span>
  </div>
  <div class="nv-card-body nv-flush">
    {if $rows}
    <div class="nv-table-scroll">
      <table class="nv-table">
        <thead>
          <tr>
            <th class="nv-col-id">ID</th>
            <th>{lang admin.col_field_name}</th>
            <th>{lang admin.display_name}</th>
            <th style="width:120px">{lang admin.col_type}</th>
            <th style="width:60px">{lang admin.required}</th>
            <th style="width:60px">{lang admin.search}</th>
            <th style="width:60px">{lang admin.sort}</th>
            <th style="width:70px">{lang admin.status}</th>
            <th class="nv-col-actions">{lang admin.actions}</th>
          </tr>
        </thead>
        <tbody>
          {foreach $rows as $item}
          <tr>
            <td class="nv-col-id">{if $item.builtin}<span class="nv-muted">—</span>{else}{$item.id}{/if}</td>
            <td>
              <span class="nv-tag">{$item.name}</span>
              {if $item.builtin}<span class="nv-badge nv-badge-info">{lang admin.builtin}</span>{/if}
            </td>
            <td>
              {$item.label}
              {if !empty($item.tips)}<div class="nv-muted">{$item.tips}</div>{/if}
            </td>
            <td>
              {foreach $field_types as $t}
              {if $t.type == $item.type}{$t.label}{/if}
              {/foreach}
            </td>
            <td>
              {if !empty($item.required)}<span class="nv-badge nv-badge-danger">{lang admin.required}</span>{else}<span class="nv-muted">—</span>{/if}
            </td>
            <td>
              {if !empty($item.searchable)}<span class="nv-badge nv-badge-info">{lang admin.yes}</span>{else}<span class="nv-muted">—</span>{/if}
            </td>
            <td>{$item.sort}</td>
            <td>
              {if !empty($item.status)}<span class="nv-badge nv-badge-ok">{lang admin.enabled}</span>{else}<span class="nv-badge">{lang admin.disabled}</span>{/if}
            </td>
            <td class="nv-col-actions">
              <button class="nv-btn nv-btn-xs" type="button"
                data-field-edit="{$item.id}" data-field-name="{$item.name}" data-field-builtin="{$item.builtin}">{lang admin.edit}</button>

              {if !$item.deletable}
              <span class="nv-badge nv-badge-warn" title="{lang admin.protected_title}">{lang admin.protected}</span>
              {else}
                <form method="post" action="{$entry_prefix}/admin/field/status" style="display:inline">
                  <input type="hidden" name="_token" value="{$csrf}">
                  <input type="hidden" name="model_id" value="{$model.id}">
                  <input type="hidden" name="id" value="{$item.id}">
                  <input type="hidden" name="name" value="{$item.name}">
                  <input type="hidden" name="builtin" value="{$item.builtin}">
                  <input type="hidden" name="status" value="{if $item.status}0{else}1{/if}">
                  <button class="nv-btn nv-btn-xs" type="submit">{if $item.status}{lang admin.disabled}{else}{lang admin.enabled}{/if}</button>
                </form>
                <form method="post" action="{$entry_prefix}/admin/field/delete" style="display:inline">
                  <input type="hidden" name="_token" value="{$csrf}">
                  <input type="hidden" name="model_id" value="{$model.id}">
                  <input type="hidden" name="id" value="{$item.id}">
                  <input type="hidden" name="name" value="{$item.name}">
                  <input type="hidden" name="builtin" value="{$item.builtin}">
                  <button class="nv-btn nv-btn-xs nv-btn-danger nv-confirm" type="submit"
                    data-message="{if $item.builtin}{lang admin.confirm_remove_builtin_field}{else}{lang admin.confirm_delete_field}{/if}">{lang admin.delete}</button>
                </form>
              {/if}
            </td>
          </tr>
          {/foreach}
        </tbody>
      </table>
    </div>
    {else}
    <div class="nv-empty">
      <div class="nv-empty-title">{lang admin.empty_fields}</div>
      <div>{lang admin.empty_fields_hint}</div>
    </div>
    {/if}
  </div>
</div>

<div class="nv-modal" id="fieldModal" hidden>
  <div class="nv-modal-backdrop" data-field-close></div>
  <div class="nv-modal-panel" role="dialog" aria-modal="true" aria-labelledby="fieldModalTitle">
    <form method="post" action="{$entry_prefix}/admin/field/save" id="fieldForm">
      <input type="hidden" name="_token" value="{$csrf}">
      <input type="hidden" name="_form_token" value="{$form_token}">
      <input type="hidden" name="model_id" value="{$model.id}">
      <input type="hidden" name="id" id="field_id" value="0">
      <input type="hidden" name="builtin" id="field_builtin" value="0">

      <div class="nv-modal-head">
        <span class="nv-modal-title" id="fieldModalTitle">{lang admin.new_field}</span>
        <button class="nv-modal-close" type="button" data-field-close aria-label="{lang admin.close}">×</button>
      </div>

      <div class="nv-modal-body">
        <div class="nv-form-grid">
          <div class="nv-form-row nv-mb0">
            <label class="nv-label" for="field_name">{lang admin.col_field_name} <span class="nv-required">*</span></label>
            <input class="nv-input" type="text" id="field_name" name="name" placeholder="{lang admin.ph_field_name_example}" required>
            <p class="nv-field-hint" id="field_name_hint">{lang admin.field_name_hint}</p>
          </div>
          <div class="nv-form-row nv-mb0">
            <label class="nv-label" for="field_label">{lang admin.display_name} <span class="nv-required">*</span></label>
            <input class="nv-input" type="text" id="field_label" name="label" placeholder="{lang admin.ph_field_label_example}" required>
          </div>
        </div>

        <div class="nv-form-row nv-mt16" id="field_type_row">
          <label class="nv-label" for="field_type">{lang admin.field_type}</label>
          <select class="nv-input" id="field_type" name="type">
            {foreach $field_types as $t}
            <option value="{$t.type}">{$t.label}</option>
            {/foreach}
          </select>
          <p class="nv-field-hint" id="field_type_hint">{lang admin.field_type_hint}</p>
        </div>

        <div class="nv-form-grid nv-mt16" id="field_options_grid">
          <div class="nv-form-row nv-mb0">
            <label class="nv-label" for="field_options">{lang admin.field_options_label}</label>
            <textarea class="nv-textarea" id="field_options" name="options" rows="4" placeholder="{lang admin.ph_field_options}"></textarea>
            <p class="nv-field-hint">{lang admin.field_options_hint}</p>
          </div>
          <div class="nv-form-row nv-mb0">
            <label class="nv-label" for="field_default">{lang admin.field_default_label}</label>
            <input class="nv-input" type="text" id="field_default" name="default" placeholder="{lang admin.ph_optional}">
          </div>
        </div>

        <div class="nv-form-row nv-mt16">
          <label class="nv-label" for="field_placeholder">{lang admin.field_placeholder_label}</label>
          <input class="nv-input" type="text" id="field_placeholder" name="placeholder" placeholder="{lang admin.ph_field_placeholder}">
        </div>

        <div class="nv-form-row nv-mt16">
          <label class="nv-label" for="field_tips">{lang admin.field_tips_label}</label>
          <input class="nv-input" type="text" id="field_tips" name="tips" placeholder="{lang admin.ph_field_tips}">
        </div>

        <div class="nv-form-inline nv-mt16">
          <label class="nv-option"><input type="checkbox" name="required" value="1" id="field_required"> {lang admin.required_optional}</label>
          <label class="nv-option">{lang admin.status}
            <select class="nv-input nv-input-sm" name="status" id="field_status">
              <option value="1">{lang admin.enabled}</option>
              <option value="0">{lang admin.disabled_hidden_in_form}</option>
            </select>
          </label>
        </div>
      </div>

      <div class="nv-modal-foot">
        <button class="nv-btn" type="button" data-field-close>{lang admin.cancel}</button>
        <button class="nv-btn nv-btn-primary" type="submit">{lang admin.save_field}</button>
      </div>
    </form>
  </div>
</div>

<script type="application/json" id="fieldData">{$fields_json|raw}</script>
<script type="application/json" id="fieldReserved">{$reserved_json|raw}</script>
<script>
(function () {
  var modal = document.getElementById('fieldModal');
  var form = document.getElementById('fieldForm');
  if (!modal || !form) { return; }

  var data = [];
  try { data = JSON.parse(document.getElementById('fieldData').textContent || '[]'); } catch (e) { data = []; }

  // 系统保留字：新增扩展字段时不可与之重名（后端也会兜底拦截）
  var reserved = [];
  try { reserved = JSON.parse(document.getElementById('fieldReserved').textContent || '[]'); } catch (e) { reserved = []; }

  var el = {
    id: document.getElementById('field_id'),
    builtin: document.getElementById('field_builtin'),
    name: document.getElementById('field_name'),
    label: document.getElementById('field_label'),
    type: document.getElementById('field_type'),
    typeRow: document.getElementById('field_type_row'),
    typeHint: document.getElementById('field_type_hint'),
    optionsGrid: document.getElementById('field_options_grid'),
    sort: document.getElementById('field_sort'),
    options: document.getElementById('field_options'),
    def: document.getElementById('field_default'),
    placeholder: document.getElementById('field_placeholder'),
    tips: document.getElementById('field_tips'),
    required: document.getElementById('field_required'),
    status: document.getElementById('field_status'),
    title: document.getElementById('fieldModalTitle'),
    nameHint: document.getElementById('field_name_hint')
  };

  // 内置字段：类型/选项/默认值 由系统固定，编辑时隐藏这些行，只留显示名/必填/排序/说明/状态
  function applyBuiltinUi(isBuiltin) {
    if (isBuiltin) {
      el.typeRow.style.display = 'none';
      el.optionsGrid.style.display = 'none';
      el.typeHint.style.display = 'none';
    } else {
      el.typeRow.style.display = '';
      el.optionsGrid.style.display = '';
    }
  }

  function openModal(field) {
    form.reset();
    if (field) {
      el.title.textContent = (field.builtin ? '{lang admin.edit_builtin_field_title} · ' : '{lang admin.edit_field_title} · ') + field.name;
      el.id.value = field.id;
      el.builtin.value = field.builtin ? '1' : '0';
      el.name.value = field.name;
      el.name.readOnly = true;
      el.name.classList.add('nv-input-readonly');
      el.nameHint.textContent = '{lang admin.field_name_readonly}';
      el.label.value = field.label || '';
      el.type.value = field.type || 'text';
      el.sort.value = field.sort || 0;
      el.options.value = field.options || '';
      el.def.value = field['default'] || '';
      el.placeholder.value = field.placeholder || '';
      el.tips.value = field.tips || '';
      el.required.checked = !!field.required;
      el.status.value = String(field.status || 0);
    } else {
      el.title.textContent = '{lang admin.new_field}';
      el.id.value = '0';
      el.builtin.value = '0';
      el.name.readOnly = false;
      el.name.classList.remove('nv-input-readonly');
      el.nameHint.textContent = '{lang admin.field_name_hint}';
      el.type.value = 'text';
      el.sort.value = 0;
      el.status.value = '1';
    }
    applyBuiltinUi(!!(field && field.builtin));
    modal.hidden = false;
    document.body.style.overflow = 'hidden';
    setTimeout(function () { (field ? el.label : el.name).focus(); }, 30);
  }

  function closeModal() {
    modal.hidden = true;
    document.body.style.overflow = '';
  }

  document.addEventListener('click', function (ev) {
    var t = ev.target;
    if (!t) { return; }
    if (t.closest && t.closest('[data-field-add]')) {
      ev.preventDefault();
      openModal(null);
      return;
    }
    var edit = t.closest ? t.closest('[data-field-edit]') : null;
    if (edit) {
      ev.preventDefault();
      var id = parseInt(edit.getAttribute('data-field-edit'), 10);
      var name = edit.getAttribute('data-field-name') || '';
      var builtin = edit.getAttribute('data-field-builtin') === '1';
      var found = null;
      for (var i = 0; i < data.length; i++) {
        if (builtin) {
          if (data[i].builtin && data[i].name === name) { found = data[i]; break; }
        } else if (parseInt(data[i].id, 10) === id) {
          found = data[i]; break;
        }
      }
      if (found) { openModal(found); }
      return;
    }
    if (t.closest && t.closest('[data-field-close]')) {
      ev.preventDefault();
      closeModal();
    }
  });

  document.addEventListener('keydown', function (ev) {
    if (ev.key === 'Escape' && !modal.hidden) { closeModal(); }
  });

  form.addEventListener('submit', function (ev) {
    var name = (el.name.value || '').trim().toLowerCase();
    if (reserved.indexOf(name) !== -1) {
      ev.preventDefault();
      window.alert('{lang admin.field_name_reserved_alert}'.replace(':name', name));
      el.name.focus();
    }
  });
})();
</script>