{layout admin/layout}

<div class="nv-page-head">
  <div>
    <div class="nv-page-title">{lang admin.system_settings}</div>
    <div class="nv-page-desc">{lang admin.setting_desc}</div>
  </div>
</div>

<div class="nv-card">
  <div class="nv-tabs">
    {foreach $groups as $gk => $g}
    <a class="nv-tab {if $gk == $current_group}is-active{/if}" href="{$entry_prefix}/admin/setting/{$gk}">{$g.title}</a>
    {/foreach}
  </div>

  <form method="post" action="{$entry_prefix}/admin/setting" id="nv-setting-form">
    <input type="hidden" name="_token" value="{$csrf}">
    <input type="hidden" name="_group" value="{$current_group}">

    <div class="nv-card-body">
      {if $current_group == 'upload'}
      <div class="nv-tips" style="margin-bottom:16px;line-height:1.8">
        {lang admin.storage_current}<strong>{$storage_status.label}</strong>
        {if $storage_status.is_local}
        · {lang admin.storage_local_files} <code>runtime/upload/</code>.
        {elseif $storage_status.missing_text}
        · <span style="color:#c0392b">{lang admin.storage_config_incomplete}{$storage_status.missing_text}</span>. {lang admin.storage_fix_and_test}
        {else}
        · {lang admin.storage_config_ok}
        {/if}
      </div>
      {/if}

      {foreach $groups[$current_group].fields as $fname => $f}
      <div class="nv-form-item"{if $f.depends} data-depends="{$f.depends.upload_driver}"{/if}>
        <label class="nv-label" for="set_{$fname}">{$f.label}</label>
        <div class="nv-control">
          {if $f.type == 'textarea'}
          <textarea class="nv-textarea" id="set_{$fname}" name="{$fname}" rows="3">{$values[$fname]}</textarea>
          {elseif $f.type == 'switch'}
          <label class="nv-switch">
            <input type="hidden" name="{$fname}" value="0">
            <input type="checkbox" name="{$fname}" value="1" {if $values[$fname]}checked{/if}>
            <span></span>
          </label>
          {elseif $f.type == 'number'}
          <input class="nv-input nv-input-sm" type="number" id="set_{$fname}" name="{$fname}" value="{$values[$fname]}">
          {elseif $f.type == 'select'}
          <select class="nv-input" id="set_{$fname}" name="{$fname}">
            {foreach $f.option_list as $ok => $ol}
            <option value="{$ok}" {if $values[$fname] == $ok}selected{/if}>{$ol}</option>
            {/foreach}
          </select>
          {elseif $f.type == 'password'}
          <input class="nv-input" type="password" id="set_{$fname}" name="{$fname}" value=""
                 autocomplete="new-password" placeholder="{$f.placeholder}">
          {elseif $f.type == 'image'}
          <input class="nv-input" type="text" id="set_{$fname}" name="{$fname}" value="{$values[$fname]}" placeholder="{lang admin.image_url_placeholder}">
          {else}
          <input class="nv-input" type="text" id="set_{$fname}" name="{$fname}" value="{$values[$fname]}"
                 {if $f.placeholder}placeholder="{$f.placeholder}"{/if}>
          {/if}
          {if $f.tips}<p class="nv-tips">{$f.tips}</p>{/if}
        </div>
      </div>
      {if $current_group == 'seo' && $fname == 'seo_rewrite'}
      <div class="nv-form-item" id="nv-rewrite-panel" data-server="{$rewrite_help.server}" style="display:none">
        <label class="nv-label">{lang admin.rewrite_rules_title}</label>
        <div class="nv-control">
          <p class="nv-tips">{lang admin.rewrite_rules_desc}</p>
          <div class="nv-tabs" id="nv-rewrite-tabs">
            <a class="nv-tab" data-rt="nginx" href="javascript:;">Nginx</a>
            <a class="nv-tab" data-rt="apache" href="javascript:;">Apache</a>
          </div>
          <pre class="nv-code" id="nv-rewrite-nginx">{$rewrite_help.nginx}</pre>
          <pre class="nv-code" id="nv-rewrite-apache" style="display:none">{$rewrite_help.apache}</pre>
          <p class="nv-tips" id="nv-rewrite-note-nginx">{lang admin.rewrite_note_nginx}</p>
          <p class="nv-tips" id="nv-rewrite-note-apache" style="display:none">{lang admin.rewrite_note_apache}</p>
        </div>
      </div>
      {/if}
      {/foreach}
    </div>

    <div class="nv-toolbar">
      <button class="nv-btn nv-btn-primary" type="submit">{lang admin.save_settings}</button>
      {if $current_group == 'upload'}
      <button class="nv-btn" type="button" id="nv-storage-test">{lang admin.test_storage}</button>
      <span class="nv-hint" id="nv-storage-test-result"></span>
      {else}
      <span class="nv-hint">{lang admin.settings_rebuild_hint}</span>
      {/if}
    </div>
  </form>
</div>

{if $current_group == 'seo'}
<script>
(function () {
  var panel = document.getElementById('nv-rewrite-panel');
  if (!panel) { return; }

  // 面板跟随「伪静态」开关显隐：开着就给规则，关了就收起来
  var sw = document.querySelector('input[name="seo_rewrite"][type="checkbox"]');
  function syncPanel() {
    panel.style.display = (sw && sw.checked) ? '' : 'none';
  }
  if (sw) { sw.addEventListener('change', syncPanel); }
  syncPanel();

  // Nginx / Apache 标签页切换，默认选中与当前服务器一致的一页
  var tabs   = document.querySelectorAll('#nv-rewrite-tabs .nv-tab');
  var blocks = {
    nginx:  document.getElementById('nv-rewrite-nginx'),
    apache: document.getElementById('nv-rewrite-apache')
  };
  var notes = {
    nginx:  document.getElementById('nv-rewrite-note-nginx'),
    apache: document.getElementById('nv-rewrite-note-apache')
  };

  function activate(name) {
    for (var i = 0; i < tabs.length; i++) {
      tabs[i].className = (tabs[i].getAttribute('data-rt') === name) ? 'nv-tab is-active' : 'nv-tab';
    }
    blocks.nginx.style.display  = (name === 'nginx')  ? '' : 'none';
    blocks.apache.style.display = (name === 'apache') ? '' : 'none';
    notes.nginx.style.display   = (name === 'nginx')  ? '' : 'none';
    notes.apache.style.display  = (name === 'apache') ? '' : 'none';
  }
  for (var j = 0; j < tabs.length; j++) {
    tabs[j].addEventListener('click', function () {
      activate(this.getAttribute('data-rt'));
    });
  }
  activate(panel.getAttribute('data-server') || 'nginx');
})();
</script>
{/if}

{if $current_group == 'upload'}
<script>
(function () {
  // 按"存储方式"折叠无关的凭证字段：一屏十几项全铺开，管理员根本分不清
  // 哪些是当前驱动要填的。
  var driver = document.getElementById('set_upload_driver');

  function syncDepends() {
    if (!driver) { return; }
    var items = document.querySelectorAll('[data-depends]');
    for (var i = 0; i < items.length; i++) {
      items[i].style.display = (items[i].getAttribute('data-depends') === driver.value) ? '' : 'none';
    }
  }
  if (driver) {
    driver.addEventListener('change', syncDepends);
    syncDepends();
  }

  // 连接测试：只读已保存配置，所以提示"保存后再测"
  var btn = document.getElementById('nv-storage-test');
  var out = document.getElementById('nv-storage-test-result');
  if (!btn) { return; }

  btn.addEventListener('click', function () {
    btn.disabled = true;
    out.style.color = '#6b7280';
    out.textContent = '{lang admin.storage_testing}';

    var body = new URLSearchParams();
    body.append('_token', document.querySelector('input[name="_token"]').value);
    body.append('_form_token', '{$storage_token}');

    fetch('{$entry_prefix}/admin/storage/test', {
      method: 'POST',
      headers: {
        'Content-Type': 'application/x-www-form-urlencoded; charset=UTF-8',
        'X-Requested-With': 'XMLHttpRequest'
      },
      credentials: 'same-origin',
      body: body.toString()
    }).then(function (r) { return r.json(); }).then(function (res) {
      var ok = res && res.code === 0;
      var detail = (res && res.data && res.data.detail) ? res.data.detail : (res && res.message ? res.message : '{lang admin.unknown_result}');
      out.style.color = ok ? '#1a7f37' : '#c0392b';
      out.textContent = detail;
    }).catch(function () {
      out.style.color = '#c0392b';
      out.textContent = '{lang admin.request_failed}';
    }).then(function () {
      btn.disabled = false;
    });
  });
})();
</script>
{/if}