<?php
/** @var array $c */
/** @var string $mode */
$v = function ($k, $d = '') use ($c) { return $c ? ($c[$k] ?? $d) : $d; };
$isEdit = !empty($c);
$mode   = $mode ?? 'fixed';
$switchUrl = $isEdit ? site_url('admin/categories/switchMode/' . (int)$c['id']) : '';
$desc = $v('description');
?>
<div class="page-head">
    <div>
        <h1><?php echo $isEdit ? '编辑分类' : '新增分类'; ?><span class="mode-badge mode-fixed">固定版面</span></h1>
        <div class="desc">固定版面：填写分类名称 / 图标 / 描述等基本信息<?php echo $isEdit ? '；可切换为可视化自由排版。' : '。'; ?></div>
    </div>
    <?php if ($isEdit): ?>
    <div class="mode-switch-sel">
        <label for="modeSel">切换模式</label>
        <select id="modeSel" class="mode-sel" onchange="location.href='<?php echo $switchUrl; ?>?mode='+this.value">
            <option value="fixed" <?php echo $mode === 'fixed' ? 'selected' : ''; ?>>固定版面</option>
            <option value="builder" <?php echo $mode === 'builder' ? 'selected' : ''; ?>>可视化编辑</option>
        </select>
    </div>
    <?php else: ?>
    <div class="mode-switch-sel">
        <label for="modeSel">排版方式</label>
        <select id="modeSel" class="mode-sel">
            <option value="fixed" <?php echo $mode === 'fixed' ? 'selected' : ''; ?>>固定版面</option>
            <option value="builder" <?php echo $mode === 'builder' ? 'selected' : ''; ?>>可视化编辑</option>
        </select>
    </div>
    <?php endif; ?>
</div>

<div class="admin-card">
    <form id="fxForm" method="post" action="<?php echo site_url($isEdit ? 'admin/categories/update/' . $c['id'] : 'admin/categories/store'); ?>">
        <?php echo csrf_field(); ?>
        <input type="hidden" name="mode" value="fixed">

        <div class="form-grid">
            <div class="field"><label>分类名称 *</label><input name="name" value="<?php echo e($v('name')); ?>" required></div>
            <div class="field"><label>图标（emoji）</label><input name="icon" value="<?php echo e($v('icon', '❄')); ?>"></div>
        </div>
        <div class="form-grid">
            <div class="field"><label>标识（留空按序号生成）</label><input name="slug" value="<?php echo e($v('slug')); ?>"></div>
            <div class="field"><label>排序</label><input name="sort_order" type="number" value="<?php echo e($v('sort_order', 0)); ?>"></div>
        </div>

        <div class="field fx-fixed-only">
            <label>分类描述</label>
            <textarea name="description" rows="4" placeholder="分类简介，用于前台分类展示区域"><?php echo e($desc); ?></textarea>
            <p class="fx-hint">纯文本描述，保存后前台分类列表展示。如需复杂排版可切换为可视化编辑。</p>
        </div>

        <div class="field" style="display:flex;align-items:center;gap:8px">
            <input type="checkbox" name="status" value="1" <?php echo $v('status', 1) ? 'checked' : ''; ?> id="st"> <label for="st" style="margin:0">显示</label>
        </div>

        <div class="form-actions">
            <button class="btn-primary" type="submit">保存</button>
            <a class="btn-ghost" href="<?php echo site_url('admin/categories'); ?>">取消</a>
        </div>
    </form>
</div>

<style>
.mode-switch-sel{display:inline-flex;align-items:center;gap:8px}
.mode-switch-sel label{font-size:13px;color:#64748b}
.mode-sel{border:1px solid #e2e8f0;border-radius:10px;padding:8px 12px;font-size:14px;background:#fff;color:#334155;cursor:pointer;min-width:140px}
.mode-sel:focus{border-color:#0ea5e9;box-shadow:0 0 0 3px rgba(14,165,233,.12)}
.mode-badge{display:inline-block;margin-left:10px;padding:2px 10px;border-radius:999px;font-size:12px;font-weight:600;vertical-align:middle;line-height:1.7}
.mode-badge.mode-fixed{background:#e0f2fe;color:#0369a1}
.mode-badge.mode-builder{background:#ede9fe;color:#6d28d9}
.fx-hint{font-size:12px;color:#94a3b8;margin:8px 2px 0}
</style>

<script>
// 新增分类时按「排版方式」选择器联动：选可视化编辑则隐藏描述，并提示保存后进入可视化编辑器
(function(){
  var sel = document.getElementById('modeSel');
  if(!sel) return;
  var isCreate = <?php echo $isEdit ? 'false' : 'true'; ?>;
  var modeField = document.querySelector('#fxForm input[name="mode"]');
  var fixedOnly = document.querySelectorAll('.fx-fixed-only');
  var note = document.createElement('p');
  note.className = 'fx-hint fx-builder-note';
  note.style.cssText = 'margin-top:10px;color:#6d28d9;background:#f5f3ff;border:1px solid #ddd6fe;border-radius:8px;padding:8px 12px;display:none';
  note.textContent = '已选择「可视化编辑」：描述无需填写，保存后将进入可视化编辑器排版分类内容。';
  var firstFixed = fixedOnly[0];
  if(firstFixed && firstFixed.parentNode){ firstFixed.parentNode.insertBefore(note, firstFixed); }
  function apply(){
    var m = sel.value;
    if(modeField) modeField.value = m;
    if(!isCreate) return;
    var isBuilder = (m === 'builder');
    for(var i=0;i<fixedOnly.length;i++){ fixedOnly[i].style.display = isBuilder ? 'none' : ''; }
    note.style.display = isBuilder ? 'block' : 'none';
  }
  sel.addEventListener('change', apply);
  apply();
})();
</script>
