{extend name="common/layout" /}
{block name="title"}{if isset($row)}编辑用户等级{else /}新增用户等级{/if}{/block}
{block name="css"}
<link href="https://cdn.jsdelivr.net/npm/remixicon@4.6.0/fonts/remixicon.css" rel="stylesheet">
<style>
.ul-avatar-preview{position:relative;display:inline-block;width:52px;height:52px;line-height:0;vertical-align:middle}
.ul-avatar-preview > img.ul-avatar-main{display:block;width:52px;height:52px;border-radius:50%;object-fit:cover;background:#e2e8f0;box-sizing:border-box;border:3px solid var(--avatar-ring,#64748b)}
.ul-avatar-badge{position:absolute;right:-5px;bottom:-5px;width:22px;height:22px;border-radius:0;display:grid;place-items:center;color:var(--avatar-ring,#64748b);font-size:17px;border:0;box-sizing:border-box;font-style:normal;line-height:1;background:transparent!important;box-shadow:none;filter:drop-shadow(0 1px 1px rgba(0,0,0,.28))}
.ul-avatar-badge.is-img{padding:0;object-fit:contain;background:transparent!important;border-radius:0}
.ul-avatar-badge[hidden],.ul-avatar-badge.is-img[hidden]{display:none!important}
</style>
{/block}
{block name="content"}
<div class="row">
  <div class="col-12">
    <div class="card">
      <div class="card-header">
        <h4 class="card-title mb-0">{if isset($row)}编辑用户等级{else /}新增用户等级{/if}</h4>
      </div>
      <div class="card-body">
        <form id="data-form" method="post" class="row g-3">
          <input type="hidden" name="id" value="{$row.id|default='0'}">
          <input type="hidden" name="color" id="color-value" value="{$row.color|default='#64748b'}">
          <div class="col-md-6">
            <label class="form-label">等级名称</label>
            <input type="text" class="form-control" name="name" value="{$row.name|default=''}" placeholder="如：初级会员" required>
          </div>
          <div class="col-md-3">
            <label class="form-label">起始成长值（含）</label>
            <input type="number" class="form-control" name="coins_min" min="0" step="1" value="{$row.coins_min|default='0'}">
            <div class="form-text">成长值 = 积分 + 金币 + 发帖数 + 回帖数</div>
          </div>
          <div class="col-md-3">
            <label class="form-label">结束成长值（含）</label>
            <input type="number" class="form-control" name="coins_max" min="0" step="1" value="{$row.coins_max|default='0'}">
            <div class="form-text">填 0 表示不设上限（该档及以上）</div>
          </div>
          <div class="col-12">
            <label class="form-label">背景颜色</label>
            <div class="d-flex gap-3 mb-2">
              <div class="form-check">
                <input class="form-check-input" type="radio" name="color_mode" value="solid" id="color-mode-solid" checked>
                <label class="form-check-label" for="color-mode-solid">纯色</label>
              </div>
              <div class="form-check">
                <input class="form-check-input" type="radio" name="color_mode" value="gradient" id="color-mode-gradient">
                <label class="form-check-label" for="color-mode-gradient">渐变</label>
              </div>
            </div>
            <div id="color-solid-box" class="d-flex gap-2 align-items-center flex-wrap">
              <input type="color" id="color-solid" value="#64748b" class="form-control form-control-color" style="width:48px;height:34px;padding:0;">
              <input type="text" class="form-control" id="color-solid-text" value="#64748b" style="max-width:160px;" placeholder="#64748b">
            </div>
            <div id="color-gradient-box" style="display:none;">
              <div class="d-flex gap-2 align-items-center flex-wrap mb-2">
                <span class="text-muted" style="min-width:48px;">起始</span>
                <input type="color" id="color-from" value="#38bdf8" class="form-control form-control-color" style="width:48px;height:34px;padding:0;">
                <input type="text" class="form-control" id="color-from-text" value="#38bdf8" style="max-width:140px;">
              </div>
              <div class="d-flex gap-2 align-items-center flex-wrap mb-2">
                <span class="text-muted" style="min-width:48px;">结束</span>
                <input type="color" id="color-to" value="#6366f1" class="form-control form-control-color" style="width:48px;height:34px;padding:0;">
                <input type="text" class="form-control" id="color-to-text" value="#6366f1" style="max-width:140px;">
              </div>
              <div class="d-flex gap-2 align-items-center flex-wrap">
                <span class="text-muted" style="min-width:48px;">角度</span>
                <input type="number" class="form-control" id="color-angle" value="135" min="0" max="360" style="max-width:100px;">
                <span class="text-muted">deg</span>
              </div>
            </div>
            <div class="mt-3 d-flex align-items-center gap-2">
              <span class="text-muted small">预览</span>
              <em id="color-preview" class="badge rounded-pill" style="font-style:normal;background:#64748b;color:#fff;">等级</em>
            </div>
            <div class="form-text">前台等级角标：白字 + 此背景（支持纯色或线性渐变）；头像边框同步使用此颜色</div>
          </div>
          <div class="col-12">
            <label class="form-label">头像角标图标</label>
            <div class="d-flex gap-2 align-items-center flex-wrap">
              <input type="text" class="form-control" name="badge_icon" id="badge-icon" value="{$row.badge_icon|default=''}" placeholder="如 ri-vip-crown-fill，或图片 URL" style="max-width:320px;">
              <button type="button" class="btn btn-light" id="badge-upload-btn">上传图片</button>
              <button type="button" class="btn btn-link px-0" id="badge-clear-btn">清空</button>
              <input type="file" id="badge-file" accept="image/*" style="display:none;">
            </div>
            <div class="mt-3 d-flex align-items-center gap-3">
              <span class="text-muted small">头像预览</span>
              <span id="avatar-preview" class="ul-avatar-preview" style="--avatar-ring:#64748b;">
                <img class="ul-avatar-main" src="/static/admin/images/users/avatar.jpg" alt="">
                <i id="avatar-badge-preview" class="ul-avatar-badge" hidden></i>
                <img id="avatar-badge-img-preview" class="ul-avatar-badge is-img" src="" alt="" hidden>
              </span>
            </div>
            <div class="form-text">填写 Remix Icon 类名（如 <code>ri-vip-crown-fill</code>），或上传/填写角标图片。留空则不显示角标。</div>
          </div>
          <div class="col-12">{include file="_community_perms" /}</div>
          <div class="col-md-6">
            <label class="form-label">排序</label>
            <input type="number" class="form-control" name="sort" value="{$row.sort|default='0'}">
            <div class="form-text">数值越小越靠前；匹配时按排序与起始积分依次命中</div>
          </div>
          <div class="col-md-6">
            <label class="form-label">状态</label>
            <select class="form-select" name="status">
              <option value="1" {if !isset($row) || $row.status==1}selected{/if}>启用</option>
              <option value="0" {if isset($row) && $row.status==0}selected{/if}>禁用</option>
            </select>
          </div>
          <div class="col-12 d-flex gap-2">
            <button type="submit" class="btn btn-primary">保存</button>
            <a class="btn btn-light" href="{:url('/admin/user_level')}">返回</a>
          </div>
        </form>
      </div>
    </div>
  </div>
</div>
{/block}
{block name="js"}
<script>
(function () {
  var initial = String($('#color-value').val() || '#64748b').trim();
  var $mode = $('input[name="color_mode"]');
  var $preview = $('#color-preview');
  var $avatarPreview = $('#avatar-preview');
  var $badgeIcon = $('#badge-icon');
  var $badgeI = $('#avatar-badge-preview');
  var $badgeImg = $('#avatar-badge-img-preview');
  var nameInput = $('input[name="name"]');

  function syncPreviewName() {
    var n = $.trim(nameInput.val() || '');
    $preview.text(n || '等级');
  }

  function parseInitial(val) {
    var m = val.match(/linear-gradient\(\s*(\d+)deg\s*,\s*(#[0-9a-fA-F]{3,8})\s*,\s*(#[0-9a-fA-F]{3,8})\s*\)/i);
    if (m) {
      return { mode: 'gradient', angle: m[1], from: m[2], to: m[3] };
    }
    if (/^#([0-9a-fA-F]{3}|[0-9a-fA-F]{6}|[0-9a-fA-F]{8})$/.test(val)) {
      return { mode: 'solid', solid: val };
    }
    if (val.indexOf('gradient') > -1) {
      return { mode: 'gradient', angle: 135, from: '#38bdf8', to: '#6366f1', raw: val };
    }
    return { mode: 'solid', solid: '#64748b' };
  }

  function buildColor() {
    var mode = $('input[name="color_mode"]:checked').val();
    if (mode === 'gradient') {
      var from = $.trim($('#color-from-text').val() || '#38bdf8');
      var to = $.trim($('#color-to-text').val() || '#6366f1');
      var angle = parseInt($('#color-angle').val() || '135', 10);
      if (isNaN(angle)) angle = 135;
      return 'linear-gradient(' + angle + 'deg, ' + from + ', ' + to + ')';
    }
    return $.trim($('#color-solid-text').val() || '#64748b');
  }

  function isBadgeImage(v) {
    return /^(https?:)?\/\//i.test(v) || v.charAt(0) === '/';
  }

  function borderColorFrom(bg) {
    var m = String(bg || '').match(/#([0-9a-fA-F]{3}|[0-9a-fA-F]{6}|[0-9a-fA-F]{8})\b/);
    return m ? m[0] : '#64748b';
  }

  function syncBadgePreview() {
    var v = $.trim($badgeIcon.val() || '');
    var fg = borderColorFrom(buildColor());
    $badgeI.attr('hidden', true).attr('class', 'ul-avatar-badge').css({ background: 'transparent', color: fg });
    $badgeImg.attr('hidden', true).attr('src', '');
    if (!v) return;
    if (isBadgeImage(v)) {
      $badgeImg.attr('src', v).removeAttr('hidden');
      return;
    }
    $badgeI.attr('class', 'ul-avatar-badge ' + v).css({ background: 'transparent', color: fg }).removeAttr('hidden');
  }

  function applyPreview() {
    var bg = buildColor();
    var border = borderColorFrom(bg);
    $('#color-value').val(bg);
    $preview.css('background', bg);
    $avatarPreview.css('--avatar-ring', border);
    syncPreviewName();
    syncBadgePreview();
  }

  function toggleMode() {
    var mode = $('input[name="color_mode"]:checked').val();
    $('#color-solid-box').toggle(mode === 'solid');
    $('#color-gradient-box').toggle(mode === 'gradient');
    applyPreview();
  }

  var parsed = parseInitial(initial);
  if (parsed.mode === 'gradient') {
    $('input[name="color_mode"][value="gradient"]').prop('checked', true);
    $('#color-from').val(parsed.from || '#38bdf8');
    $('#color-from-text').val(parsed.from || '#38bdf8');
    $('#color-to').val(parsed.to || '#6366f1');
    $('#color-to-text').val(parsed.to || '#6366f1');
    $('#color-angle').val(parsed.angle || 135);
    if (parsed.raw) {
      $('#color-value').val(parsed.raw);
    }
  } else {
    $('input[name="color_mode"][value="solid"]').prop('checked', true);
    $('#color-solid').val(parsed.solid || '#64748b');
    $('#color-solid-text').val(parsed.solid || '#64748b');
  }
  toggleMode();
  if (parsed.raw) {
    $preview.css('background', parsed.raw);
    $avatarPreview.css('--avatar-ring', borderColorFrom(parsed.raw));
  }

  $mode.on('change', toggleMode);
  $('#color-solid').on('input', function () {
    $('#color-solid-text').val(this.value);
    applyPreview();
  });
  $('#color-solid-text').on('input', function () {
    var v = $.trim(this.value);
    if (/^#([0-9a-fA-F]{3}|[0-9a-fA-F]{6})$/.test(v)) $('#color-solid').val(v);
    applyPreview();
  });
  $('#color-from').on('input', function () {
    $('#color-from-text').val(this.value);
    applyPreview();
  });
  $('#color-to').on('input', function () {
    $('#color-to-text').val(this.value);
    applyPreview();
  });
  $('#color-from-text,#color-to-text,#color-angle').on('input', applyPreview);
  nameInput.on('input', syncPreviewName);
  $badgeIcon.on('input', syncBadgePreview);

  $('#badge-upload-btn').on('click', function () { $('#badge-file').trigger('click'); });
  $('#badge-clear-btn').on('click', function () {
    $badgeIcon.val('');
    syncBadgePreview();
  });
  $('#badge-file').on('change', function () {
    if (!this.files || !this.files.length) return;
    var fd = new FormData();
    fd.append('file', this.files[0]);
    $.ajax({
      url: "{:url('/admin/file/upload')}",
      type: 'POST',
      data: fd,
      processData: false,
      contentType: false,
      success: function (res) {
        AdminUI.result(res);
        if (res.code === 1 && res.data && res.data.url) {
          $badgeIcon.val(res.data.url);
          syncBadgePreview();
        }
      }
    });
    this.value = '';
  });

  $('#data-form').on('submit', function (e) {
    e.preventDefault();
    applyPreview();
    $.post("{:url('/admin/user_level/save')}", $(this).serialize(), function (res) {
      AdminUI.result(res);
      if (res.code === 1) {
        setTimeout(function () { location.href = "{:url('/admin/user_level')}"; }, 400);
      }
    }, 'json');
  });
})();
</script>
{/block}