{{-- resources/views/menu-settings.blade.php --}}
@extends('layouts.appd')
@section('title', '首頁個人化')

@push('styles')
<link href="/vendor/bootstrap-icons/1.11.3/bootstrap-icons.min.css" rel="stylesheet">
<style>
.ms-layout {
  display:grid; grid-template-columns:1fr 340px; gap:20px;
  max-width:1080px; margin:0 auto; padding:16px 0 60px; align-items:start;
}
@media(max-width:760px){ .ms-layout{grid-template-columns:1fr} .ms-right{order:-1} }
.ms-canvas { position:sticky; top:12px; }
.canvas-hd { display:flex; align-items:center; justify-content:space-between; margin-bottom:14px; }
.canvas-hd h5 { margin:0; font-size:1rem; font-weight:600; }
.zone-lbl {
  font-size:.7rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase;
  color:#94a3b8; display:flex; align-items:center; gap:8px; margin-bottom:8px;
}
.zone-lbl::after { content:''; flex:1; height:1px; background:currentColor; opacity:.3; }
.drop-zone {
  min-height:70px; border:2px dashed #dde0e8; border-radius:12px;
  padding:8px; transition:border-color .18s,background .18s;
}
.drop-zone.over { border-color:#6366f1; background:rgba(99,102,241,.05); }
.drop-zone.empty::after {
  content:'拖曳功能圖示到這裡'; display:block; text-align:center;
  padding:12px; color:#c5d0de; font-size:.85rem; pointer-events:none;
}
.placed-chip {
  display:flex; align-items:center; gap:10px;
  padding:9px 10px; border-radius:10px; margin-bottom:5px;
  background:#fff; border:1px solid #e2e8f0; box-shadow:0 1px 3px rgba(0,0,0,.04);
  user-select:none;
}
.placed-chip:last-child { margin-bottom:0; }
.placed-chip.sortable-ghost { opacity:.3; }
.placed-chip.sortable-chosen { box-shadow:0 6px 20px rgba(0,0,0,.12); }
.chip-ico {
  width:36px; height:36px; border-radius:8px; flex:0 0 36px;
  display:flex; align-items:center; justify-content:center; font-size:18px;
}
.chip-name { flex:1; font-size:.9rem; font-weight:500; color:#1e293b; }
.chip-drag { color:#c8d1de; flex:0 0 auto; cursor:grab; font-size:1rem; padding:0 2px; }
.chip-drag:hover { color:#7a8fa8; }
.chip-remove {
  flex:0 0 auto; width:22px; height:22px; border-radius:50%;
  border:none; background:#f1f5f9; color:#94a3b8; font-size:.75rem; line-height:1;
  display:flex; align-items:center; justify-content:center; cursor:pointer;
  transition:background .12s,color .12s;
}
.chip-remove:hover { background:#fee2e2; color:#dc2626; }
.folder-section { margin-bottom:14px; margin-top:14px; }
.folder-block { border:1px solid rgba(0,0,0,.07); border-radius:13px; box-shadow:0 1px 4px rgba(0,0,0,.04); }
.folder-head { display:flex; align-items:center; gap:8px; padding:9px 12px; border-radius:12px 12px 0 0; color:#fff; }
.folder-head-name { background:transparent; border:none; color:#fff; font-size:.9rem; font-weight:500; outline:none; flex:1; min-width:0; }
.folder-head-name::placeholder { color:rgba(255,255,255,.5); }
.folder-body { padding:8px; background:#f8fafc; border-radius:0 0 12px 12px; }
.folder-color-dot { width:22px; height:22px; padding:1px; border:none; background:none; cursor:pointer; border-radius:4px; flex:0 0 22px; }
.del-folder-btn { background:none; border:none; color:rgba(255,255,255,.65); cursor:pointer; padding:2px 5px; border-radius:4px; }
.del-folder-btn:hover { background:rgba(0,0,0,.15); color:#fff; }
.add-folder-btn {
  width:100%; margin-top:10px; padding:9px; border:2px dashed #e2e8f0; border-radius:10px;
  background:none; color:#94a3b8; font-size:.88rem; cursor:pointer;
  transition:border-color .15s,color .15s; text-align:center; display:block;
}
.add-folder-btn:hover { border-color:#6366f1; color:#6366f1; }
.ms-right { background:#fff; border:1px solid #e2e8f0; border-radius:16px; box-shadow:0 1px 4px rgba(0,0,0,.05); overflow:hidden; }
.list-hd {
  padding:12px 14px 8px; font-size:.7rem; font-weight:700; letter-spacing:.08em;
  text-transform:uppercase; color:#94a3b8; border-bottom:1px solid #f1f5f9;
  display:flex; align-items:center; gap:6px;
}
.list-hint { font-size:.7rem; letter-spacing:0; text-transform:none; font-weight:400; color:#c5d0de; }
.list-scroll { max-height:calc(100vh - 160px); overflow-y:auto; padding:8px; }
.list-item {
  display:flex; align-items:center; gap:10px; padding:8px 10px; border-radius:10px;
  cursor:grab; user-select:none; margin-bottom:3px; transition:background .1s;
}
.list-item:last-child { margin-bottom:0; }
.list-item:hover { background:#f8fafc; }
.list-item.is-placed { opacity:.4; pointer-events:none; }
.list-ico { width:32px; height:32px; border-radius:8px; flex:0 0 32px; display:flex; align-items:center; justify-content:center; font-size:16px; }
.list-name { flex:1; font-size:.88rem; color:#334155; }
.placed-badge { font-size:.7rem; padding:2px 7px; border-radius:10px; background:#eff6ff; color:#3b82f6; flex:0 0 auto; white-space:nowrap; }
#ms-toast {
  position:fixed; bottom:22px; right:22px; z-index:1080;
  padding:8px 18px; border-radius:20px; font-size:.88rem; font-weight:500;
  background:#22c55e; color:#fff; box-shadow:0 4px 16px rgba(34,197,94,.3);
  opacity:0; transform:translateY(8px); transition:opacity .2s,transform .2s; pointer-events:none;
}
#ms-toast.show { opacity:1; transform:translateY(0); }
#ms-toast.err { background:#ef4444; }
/* dark */
[data-bs-theme="dark"] .ms-right { background:#1c1f26; border-color:#2e3340; }
[data-bs-theme="dark"] .list-hd { border-color:#2e3340; }
[data-bs-theme="dark"] .list-item:hover { background:#23272f; }
[data-bs-theme="dark"] .list-name { color:#cbd5e1; }
[data-bs-theme="dark"] .placed-chip { background:#1c1f26; border-color:#2e3340; }
[data-bs-theme="dark"] .chip-name { color:#e2e8f0; }
[data-bs-theme="dark"] .drop-zone { border-color:#3a3f4b; }
[data-bs-theme="dark"] .folder-body { background:#161b22; }
[data-bs-theme="dark"] .add-folder-btn { border-color:#3a3f4b; color:#64748b; }
[data-bs-theme="dark"] .add-folder-btn:hover { border-color:#818cf8; color:#818cf8; }
[data-bs-theme="dark"] .chip-remove { background:#2e3340; color:#64748b; }
[data-bs-theme="dark"] .chip-remove:hover { background:#450a0a; color:#f87171; }
[data-bs-theme="dark"] .folder-block { border-color:#2e3340; }
[data-bs-theme="dark"] .placed-badge { background:#1e3a5c; }
[data-theme="sepia"] .placed-chip,[data-theme="japandi"] .placed-chip { background:#faf7f2; border-color:#ddd4c6; }
[data-theme="sepia"] .chip-name,[data-theme="japandi"] .chip-name { color:#3d2b1f; }
[data-theme="sepia"] .drop-zone,[data-theme="japandi"] .drop-zone { border-color:#ddd4c6; }
[data-theme="japandi"] .folder-body { background:#f0ebe1; }
[data-theme="japandi"] .ms-right { background:#faf7f2; }
[data-theme="space"] .placed-chip { background:rgba(255,255,255,.05); border-color:rgba(139,92,246,.15); }
[data-theme="space"] .chip-name { color:#c8d3f5; }
[data-theme="space"] .drop-zone { border-color:rgba(139,92,246,.2); }
</style>
@endpush

@section('content')
@php
  $pairs = [
    ['bg'=>'rgba(37,99,235,.14)',  'fg'=>'#1d4ed8'],
    ['bg'=>'rgba(21,128,61,.14)',  'fg'=>'#15803d'],
    ['bg'=>'rgba(180,83,9,.14)',   'fg'=>'#b45309'],
    ['bg'=>'rgba(124,58,237,.14)', 'fg'=>'#6d28d9'],
    ['bg'=>'rgba(220,38,38,.14)',  'fg'=>'#b91c1c'],
    ['bg'=>'rgba(13,148,136,.14)', 'fg'=>'#0f766e'],
    ['bg'=>'rgba(234,88,12,.14)',  'fg'=>'#c2410c'],
    ['bg'=>'rgba(168,85,247,.14)', 'fg'=>'#7c3aed'],
    ['bg'=>'rgba(20,184,166,.14)', 'fg'=>'#0d9488'],
    ['bg'=>'rgba(5,150,105,.14)',  'fg'=>'#047857'],
  ];
  $defColors = ['#6366f1','#10b981','#f59e0b','#ef4444','#3b82f6','#8b5cf6','#ec4899'];
  $folderNames = [];
  foreach($folders as $f) $folderNames[$f->id] = $f->name;
  $mainCards = array_values(array_filter($cards, fn($c)=>$c['show_in_menu']&&empty($c['folder_id'])));
  usort($mainCards, fn($a,$b)=>($a['order']??0)<=>($b['order']??0));
@endphp

<div id="ms-toast"></div>

<div class="ms-layout">

{{-- ══ LEFT canvas ══ --}}
<div class="ms-canvas">
  <div class="canvas-hd">
    <h5><i class="bi bi-layout-sidebar-reverse me-2 opacity-50"></i>首頁配置</h5>
    <div class="d-flex gap-2">
      <a href="{{ route('dashboard') }}" class="btn btn-sm btn-outline-secondary">返回首頁</a>
      <button id="btn-save" class="btn btn-sm btn-primary px-3">
        <i class="bi bi-check2 me-1"></i>儲存設定
      </button>
    </div>
  </div>

  <div class="zone-lbl">直接顯示在首頁</div>
  <div class="drop-zone {{ empty($mainCards)?'empty':'' }}" id="zone-main" data-folder-id="">
    @foreach($mainCards as $c)
      @php $p=$pairs[($c['id']??0)%count($pairs)]; $em=trim((string)($c['icon_emoji']??'')); $bi=trim((string)($c['icon']??'')); if(!$em&&!$bi)$bi='bi bi-grid'; @endphp
      <div class="placed-chip" data-card-id="{{ $c['id'] }}">
        <div class="chip-ico" style="background:{{ $p['bg'] }};color:{{ $p['fg'] }};">
          @if($em)<span style="font-size:18px;line-height:1">{{ $em }}</span>@else<i class="{{ $bi }}"></i>@endif
        </div>
        <span class="chip-name">{{ $c['name'] }}</span>
        <span class="chip-drag"><i class="bi bi-grip-vertical"></i></span>
        <button type="button" class="chip-remove" title="移除"><i class="bi bi-x"></i></button>
      </div>
    @endforeach
  </div>

  <div id="folder-container">
  @foreach($folders as $fi => $folder)
    @php
      $fc=$userFolderColors[$folder->id]??($folder->color??$defColors[$fi%count($defColors)]);
      $fh=ltrim($fc,'#'); if(strlen($fh)!==6)$fh='6366f1';
      [$fr,$fg2,$fb]=[hexdec(substr($fh,0,2)),hexdec(substr($fh,2,2)),hexdec(substr($fh,4,2))];
      $flt=sprintf('#%02x%02x%02x',min(255,$fr+28),min(255,$fg2+28),min(255,$fb+28));
      $fCards=array_values(array_filter($cards,fn($c)=>$c['show_in_menu']&&$c['folder_id']==$folder->id));
      usort($fCards,fn($a,$b)=>($a['order']??0)<=>($b['order']??0));
    @endphp
    <div class="folder-section" data-folder-id="{{ $folder->id }}">
      <div class="folder-block">
        <div class="folder-head" style="background:linear-gradient(135deg,{{ $flt }},{{ $fc }})">
          <i class="bi bi-folder-fill" style="font-size:.95rem;opacity:.85"></i>
          <input class="folder-head-name folder-name-input" type="text" value="{{ $folder->name }}" data-folder-id="{{ $folder->id }}" placeholder="資料夾名稱">
          <input type="color" class="folder-color-dot folder-color-input" value="{{ $fc }}" data-folder-id="{{ $folder->id }}" title="顏色">
          <button type="button" class="del-folder-btn" data-folder-id="{{ $folder->id }}" title="刪除資料夾"><i class="bi bi-trash3"></i></button>
        </div>
        <div class="folder-body">
          <div class="drop-zone {{ empty($fCards)?'empty':'' }}" data-folder-id="{{ $folder->id }}">
            @foreach($fCards as $c)
              @php $p=$pairs[($c['id']??0)%count($pairs)]; $em=trim((string)($c['icon_emoji']??'')); $bi=trim((string)($c['icon']??'')); if(!$em&&!$bi)$bi='bi bi-grid'; @endphp
              <div class="placed-chip" data-card-id="{{ $c['id'] }}">
                <div class="chip-ico" style="background:{{ $p['bg'] }};color:{{ $p['fg'] }};">
                  @if($em)<span style="font-size:18px;line-height:1">{{ $em }}</span>@else<i class="{{ $bi }}"></i>@endif
                </div>
                <span class="chip-name">{{ $c['name'] }}</span>
                <span class="chip-drag"><i class="bi bi-grip-vertical"></i></span>
                <button type="button" class="chip-remove" title="移除"><i class="bi bi-x"></i></button>
              </div>
            @endforeach
          </div>
        </div>
      </div>
    </div>
  @endforeach
  </div>

  <button type="button" id="btn-add-folder" class="add-folder-btn">
    <i class="bi bi-folder-plus me-1"></i>新增資料夾
  </button>
</div>

{{-- ══ RIGHT list ══ --}}
<div class="ms-right">
  <div class="list-hd">
    <i class="bi bi-list-ul"></i>可用功能
    <span class="list-hint ms-1">— 拖曳到左側</span>
  </div>
  <div class="list-scroll" id="right-list">
    @foreach($cards as $c)
      @php
        $cid=$c['id']; $p=$pairs[$cid%count($pairs)];
        $em=trim((string)($c['icon_emoji']??'')); $bi=trim((string)($c['icon']??'')); if(!$em&&!$bi)$bi='bi bi-grid';
        $placed=$c['show_in_menu'];
        $fid=$c['folder_id'];
        $badge=$placed?(($fid&&isset($folderNames[$fid]))?$folderNames[$fid]:'首頁'):'';
      @endphp
      <div class="list-item {{ $placed?'is-placed':'' }}"
           data-card-id="{{ $cid }}"
           data-name="{{ $c['name'] }}"
           data-bg="{{ $p['bg'] }}"
           data-fg="{{ $p['fg'] }}"
           data-emoji="{{ $em }}"
           data-bi="{{ $bi }}">
        <div class="list-ico" style="background:{{ $p['bg'] }};color:{{ $p['fg'] }};">
          @if($em)<span style="font-size:16px;line-height:1">{{ $em }}</span>@else<i class="{{ $bi }}"></i>@endif
        </div>
        <span class="list-name">{{ $c['name'] }}</span>
        @if($badge)<span class="placed-badge">{{ $badge }}</span>@endif
      </div>
    @endforeach
  </div>
</div>

</div>
@endsection

@push('scripts')
<script src="/vendor/sortablejs/Sortable.min.js"></script>
<script>
(function () {
'use strict';

var CSRF = (document.querySelector('meta[name="csrf-token"]') || {}).content || '';
var toastTimer;

/* ── Toast ── */
function toast(ok, msg) {
  var t = document.getElementById('ms-toast');
  t.textContent = msg || (ok ? '✓ 已儲存' : '✗ 儲存失敗');
  t.className = ok ? 'show' : 'show err';
  clearTimeout(toastTimer);
  toastTimer = setTimeout(function () { t.className = ''; }, 2200);
}

/* ── Build chip element ── */
function buildChip(cardId, name, bg, fg, emoji, bi) {
  var ico = emoji
    ? '<span style="font-size:18px;line-height:1">' + emoji + '</span>'
    : '<i class="' + bi + '"></i>';
  var d = document.createElement('div');
  d.className = 'placed-chip';
  d.dataset.cardId = cardId;
  d.innerHTML =
    '<div class="chip-ico" style="background:' + bg + ';color:' + fg + ';">' + ico + '</div>' +
    '<span class="chip-name">' + name + '</span>' +
    '<span class="chip-drag"><i class="bi bi-grip-vertical"></i></span>' +
    '<button type="button" class="chip-remove" title="移除"><i class="bi bi-x"></i></button>';
  return d;
}

/* ── Empty state ── */
function refreshEmpty() {
  document.querySelectorAll('.drop-zone').forEach(function (z) {
    z.classList.toggle('empty', z.querySelectorAll('.placed-chip').length === 0);
  });
}

/* ── Badge on right list ── */
function setBadge(cardId, text) {
  var li = document.querySelector('.list-item[data-card-id="' + cardId + '"]');
  if (!li) return;
  var b = li.querySelector('.placed-badge');
  if (text) {
    li.classList.add('is-placed');
    if (!b) { b = document.createElement('span'); b.className = 'placed-badge'; li.appendChild(b); }
    b.textContent = text;
  } else {
    li.classList.remove('is-placed');
    if (b) b.remove();
  }
}

function zoneLabel(zoneEl) {
  var fid = zoneEl.dataset.folderId;
  if (!fid) return '首頁';
  var inp = document.querySelector('.folder-name-input[data-folder-id="' + fid + '"]');
  return inp ? inp.value : '資料夾';
}

/* ── Init Sortable on every drop-zone ── */
var canvasGroup = { name: 'canvas', pull: true, put: ['canvas', 'rlist'] };

function initZone(zone) {
  return Sortable.create(zone, {
    group: canvasGroup,
    animation: 140,
    handle: '.chip-drag',
    ghostClass: 'sortable-ghost',
    chosenClass: 'sortable-chosen',
    onAdd: function (evt) {
      var item = evt.item;
      /* Came from right list (clone) */
      if (item.classList.contains('list-item')) {
        var cardId = item.dataset.cardId;
        /* Reject duplicate */
        if (document.querySelectorAll('.placed-chip[data-card-id="' + cardId + '"]').length > 1) {
          item.remove();
          toast(false, '已在配置中');
          return;
        }
        var chip = buildChip(cardId, item.dataset.name, item.dataset.bg, item.dataset.fg, item.dataset.emoji, item.dataset.bi);
        item.replaceWith(chip);
        setBadge(cardId, zoneLabel(evt.to));
        refreshEmpty();
      }
    },
    onEnd: function (evt) {
      if (evt.from !== evt.to) {
        setBadge(evt.item.dataset.cardId, zoneLabel(evt.to));
      }
      refreshEmpty();
    },
  });
}

document.querySelectorAll('.drop-zone').forEach(function (z) { initZone(z); });

/* ── Right list: clone-only source ── */
Sortable.create(document.getElementById('right-list'), {
  group: { name: 'rlist', pull: 'clone', put: false },
  animation: 0,
  sort: false,
  ghostClass: 'sortable-ghost',
  onClone: function (evt) {
    /* Style the clone while dragging */
    evt.clone.style.width = evt.item.offsetWidth + 'px';
    evt.clone.style.opacity = '0.85';
  },
});

/* ── Remove chip (×) ── */
document.addEventListener('click', function (e) {
  var btn = e.target.closest('.chip-remove');
  if (!btn) return;
  var chip = btn.closest('.placed-chip');
  setBadge(chip.dataset.cardId, '');
  chip.remove();
  refreshEmpty();
});

/* ── Collect settings ── */
function collectSettings() {
  var s = [];
  document.querySelectorAll('.drop-zone').forEach(function (zone) {
    var fid = zone.dataset.folderId || null;
    var chips = zone.querySelectorAll('.placed-chip[data-card-id]');
    chips.forEach(function (el, i) {
      s.push({ id: +el.dataset.cardId, folder_id: fid ? +fid : null, order: i, show_in_menu: 1 });
    });
  });
  document.querySelectorAll('.list-item:not(.is-placed)').forEach(function (el, i) {
    s.push({ id: +el.dataset.cardId, folder_id: null, order: 999 + i, show_in_menu: 0 });
  });
  return s;
}

/* ── Save ── */
document.getElementById('btn-save').addEventListener('click', function () {
  var btn = this;
  btn.disabled = true;
  fetch('{{ route("menu-settings.save") }}', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json', 'X-CSRF-TOKEN': CSRF },
    body: JSON.stringify({ settings: collectSettings() }),
  })
  .then(function (r) { toast(r.ok); })
  .catch(function () { toast(false); })
  .finally(function () { btn.disabled = false; });
});

/* ── Add folder ── */
document.getElementById('btn-add-folder').addEventListener('click', function () {
  var name = prompt('資料夾名稱：');
  if (!name || !name.trim()) return;
  var self = this;
  self.disabled = true;
  /* Save first, then create folder */
  fetch('{{ route("menu-settings.save") }}', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json', 'X-CSRF-TOKEN': CSRF },
    body: JSON.stringify({ settings: collectSettings() }),
  })
  .then(function () {
    var f = document.createElement('form');
    f.method = 'POST'; f.action = '{{ route("menu-settings.save") }}';
    f.innerHTML = '<input name="_token" value="' + CSRF + '"><input name="add_folder" value="1"><input name="new_folder_name" value="' + name.trim().replace(/"/g, '') + '">';
    document.body.appendChild(f); f.submit();
  })
  .catch(function () { self.disabled = false; toast(false); });
});

/* ── Folder rename ── */
document.addEventListener('change', function (e) {
  if (!e.target.matches('.folder-name-input')) return;
  fetch('{{ route("menu-settings.folder-rename") }}', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json', 'X-CSRF-TOKEN': CSRF },
    body: JSON.stringify({ id: +e.target.dataset.folderId, name: e.target.value }),
  }).then(function (r) { toast(r.ok); });
});

/* ── Folder delete ── */
document.addEventListener('click', function (e) {
  var btn = e.target.closest('.del-folder-btn');
  if (!btn) return;
  if (!confirm('確定刪除此資料夾？底下圖示將移回首頁。')) return;
  var fid = btn.dataset.folderId;
  var main = document.getElementById('zone-main');
  document.querySelectorAll('.drop-zone[data-folder-id="' + fid + '"] .placed-chip').forEach(function (c) {
    main.appendChild(c);
    setBadge(c.dataset.cardId, '首頁');
  });
  btn.closest('.folder-section').remove();
  fetch('{{ route("menu-settings.folder-delete") }}', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json', 'X-CSRF-TOKEN': CSRF },
    body: JSON.stringify({ id: +fid }),
  }).then(function (r) { toast(r.ok); });
  refreshEmpty();
});

/* ── Folder color ── */
var colorTimer;
document.addEventListener('input', function (e) {
  if (!e.target.matches('.folder-color-input')) return;
  var fid = e.target.dataset.folderId, color = e.target.value;
  var hx = color.replace('#', '');
  var tint = function (d) {
    return '#' + [0, 2, 4].map(function (i) {
      return Math.max(0, Math.min(255, parseInt(hx.slice(i, i + 2), 16) + d)).toString(16).padStart(2, '0');
    }).join('');
  };
  e.target.closest('.folder-head').style.background = 'linear-gradient(135deg,' + tint(28) + ',' + color + ')';
  clearTimeout(colorTimer);
  colorTimer = setTimeout(function () {
    fetch('{{ url("/menu-settings/folders") }}/' + fid + '/color', {
      method: 'POST',
      headers: { 'Content-Type': 'application/json', 'X-CSRF-TOKEN': CSRF },
      body: JSON.stringify({ color: color }),
    }).then(function (r) { toast(r.ok); });
  }, 400);
});

refreshEmpty();

})();
</script>
@endpush