@extends('layouts.app')

@section('title', $userGroup->name . ' — 群組管理')

@push('styles')
<style>
/* ── hero ── */
.ug-hero {
  background: linear-gradient(135deg, #f0f4ff 0%, #e8f0fe 100%);
  border-bottom: 1px solid #dce3f3;
  padding: 1.5rem 1.75rem 1.25rem;
}
[data-theme="dark"] .ug-hero {
  background: linear-gradient(135deg, #1a1f2e 0%, #1e2438 100%);
  border-bottom-color: #2d3450;
}

/* ── stat chips ── */
.ug-stat {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  padding: .25rem .75rem;
  border-radius: 999px;
  font-size: .8rem;
  font-weight: 500;
  background: rgba(255,255,255,.7);
  border: 1px solid rgba(0,0,0,.08);
}
[data-theme="dark"] .ug-stat {
  background: rgba(255,255,255,.06);
  border-color: rgba(255,255,255,.1);
}

/* ── section cards ── */
.ug-panel { border: none; border-radius: .75rem; }
.ug-panel .card-header {
  border-radius: .75rem .75rem 0 0 !important;
  border-bottom: 1px solid rgba(0,0,0,.06);
  background: transparent;
  padding: .85rem 1.1rem;
}
[data-theme="dark"] .ug-panel .card-header { border-bottom-color: rgba(255,255,255,.06); }

/* ── add panel ── */
.ug-add-panel {
  border-bottom: 1px solid rgba(0,0,0,.06);
  background: #f8faff;
  padding: .9rem 1.1rem;
  transition: none;
}
[data-theme="dark"] .ug-add-panel { background: rgba(255,255,255,.03); border-bottom-color: rgba(255,255,255,.06); }

/* ── member / project list items ── */
#memberList .list-group-item,
#projectList .list-group-item {
  padding: .6rem 1.1rem;
  border-left: none; border-right: none;
  transition: background .12s;
}
#memberList .list-group-item:hover,
#projectList .list-group-item:hover { background: rgba(0,0,0,.025); }
[data-theme="dark"] #memberList .list-group-item:hover,
[data-theme="dark"] #projectList .list-group-item:hover { background: rgba(255,255,255,.04); }

/* ── avatar circle ── */
.ug-avatar {
  width: 30px; height: 30px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: .7rem; font-weight: 700;
  flex-shrink: 0;
  color: #fff;
}

/* ── remove button ── */
.btn-rm {
  opacity: 0;
  transition: opacity .15s;
  font-size: .8rem;
  line-height: 1;
}
.list-group-item:hover .btn-rm { opacity: 1; }

/* ── project checklist ── */
.project-check-item { transition: background .1s; }
.project-check-item:hover { background: rgba(13,110,253,.05); }
[data-theme="dark"] .project-check-item:hover { background: rgba(255,255,255,.05); }
.project-check-item:first-child { border-radius: .375rem .375rem 0 0; }
.project-check-item:last-child  { border-radius: 0 0 .375rem .375rem; }

/* ── floating toast ── */
#gdToastWrap {
  position: fixed; bottom: 1.5rem; right: 1.5rem;
  z-index: 9999; min-width: 260px; max-width: 360px;
}
</style>
@endpush

@section('content')

{{-- ── Hero ────────────────────────────────────────────────────────── --}}
<div class="ug-hero">
  <div class="container-fluid px-2">
    <div class="d-flex align-items-start justify-content-between gap-3 flex-wrap">
      <div>
        <div class="d-flex align-items-center gap-2 mb-1">
          <div class="rounded-circle d-flex align-items-center justify-content-center bg-primary bg-opacity-10 text-primary" style="width:42px;height:42px;font-size:1.25rem">
            <i class="bi bi-people-fill"></i>
          </div>
          <div>
            <h5 class="mb-0 fw-bold">{{ $userGroup->name }}</h5>
            @if($userGroup->description)
              <small class="text-muted">{{ $userGroup->description }}</small>
            @endif
          </div>
        </div>
        <div class="d-flex gap-2 mt-2 flex-wrap">
          <span class="ug-stat text-primary"><i class="bi bi-person-fill"></i><span id="member-count">{{ $userGroup->users->count() }}</span> 人</span>
          <span class="ug-stat text-success"><i class="bi bi-kanban-fill"></i><span id="project-count">{{ $userGroup->projects->count() }}</span> 個專案</span>
        </div>
      </div>
      <a href="{{ route('settings.projects.index') }}#tab-user-groups" class="btn btn-sm btn-outline-secondary align-self-start">
        <i class="bi bi-arrow-left me-1"></i>返回
      </a>
    </div>
  </div>
</div>

{{-- ── Main content ─────────────────────────────────────────────────── --}}
<div class="container-fluid px-3 py-4">

  <div class="row g-4">

    {{-- ── 左側：成員 ───────────────────────────────────────────────── --}}
    <div class="col-xl-6">
      <div class="card shadow-sm ug-panel h-100">
        <div class="card-header d-flex justify-content-between align-items-center">
          <span class="fw-semibold d-flex align-items-center gap-2">
            <i class="bi bi-person-lines-fill text-primary"></i>成員
          </span>
          <button type="button" class="btn btn-sm btn-primary" id="btnToggleAddMember">
            <i class="bi bi-plus-lg me-1"></i>加入成員
          </button>
        </div>

        {{-- 加入成員表單 --}}
        <div class="ug-add-panel d-none" id="addMemberPanel">
          <label class="form-label small fw-semibold mb-1 text-muted">選擇要加入的成員</label>
          <div class="d-flex gap-2">
            <select id="memberSelect" class="form-select form-select-sm flex-grow-1">
              <option value="">請選擇…</option>
              @foreach($allUsers as $u)
                <option value="{{ $u->id }}">{{ $u->name }}{{ $u->department ? '（'.$u->department.'）' : '' }}</option>
              @endforeach
            </select>
            <button type="button" class="btn btn-primary btn-sm px-3" id="btnAddMember">加入</button>
            <button type="button" class="btn btn-outline-secondary btn-sm" id="btnCancelAddMember" title="取消"><i class="bi bi-x"></i></button>
          </div>
        </div>

        {{-- 成員清單 --}}
        @php
          $avatarColors = ['#4e79a7','#f28e2b','#e15759','#76b7b2','#59a14f','#edc948','#b07aa1','#ff9da7','#9c755f','#bab0ac'];
        @endphp
        <ul class="list-group list-group-flush" id="memberList" style="max-height:480px;overflow-y:auto">
          @forelse($userGroup->users as $idx => $u)
            <li class="list-group-item d-flex align-items-center gap-3" data-user-id="{{ $u->id }}">
              <div class="ug-avatar" style="background:{{ $avatarColors[$idx % count($avatarColors)] }}">{{ mb_substr($u->name, 0, 1) }}</div>
              <div class="flex-grow-1 min-width-0">
                <div class="small fw-semibold lh-sm">{{ $u->name }}</div>
                @if($u->department)
                  <div class="text-muted" style="font-size:.75rem">{{ $u->department }}</div>
                @endif
              </div>
              <button type="button" class="btn btn-rm text-danger btn-rm-member" data-id="{{ $u->id }}" data-name="{{ $u->name }}" title="從群組移除">
                <i class="bi bi-person-dash-fill"></i>
              </button>
            </li>
          @empty
            <li class="list-group-item text-center text-muted py-4 gdm-empty-members" style="font-size:.9rem">
              <i class="bi bi-people d-block mb-1" style="font-size:1.5rem;opacity:.3"></i>尚無成員
            </li>
          @endforelse
        </ul>
      </div>
    </div>

    {{-- ── 右側：專案指派 ───────────────────────────────────────────── --}}
    <div class="col-xl-6">
      <div class="card shadow-sm ug-panel h-100">
        <div class="card-header d-flex justify-content-between align-items-center">
          <span class="fw-semibold d-flex align-items-center gap-2">
            <i class="bi bi-kanban-fill text-success"></i>已加入專案
          </span>
          <button type="button" class="btn btn-sm btn-success" id="btnToggleAddProject">
            <i class="bi bi-plus-lg me-1"></i>加入專案
          </button>
        </div>

        {{-- 加入專案表單 --}}
        @php
          $assignedIds = $userGroup->projects->pluck('id')->toArray();
          $typeBadge   = ['產品'=>'bg-info text-white','開發'=>'bg-primary text-white','維護'=>'bg-success text-white','保固'=>'bg-warning text-dark','結束'=>'bg-secondary text-white'];
        @endphp
        <div class="ug-add-panel d-none" id="addProjectPanel">
          <label class="form-label small fw-semibold mb-1 text-muted">搜尋並勾選專案</label>
          <div class="position-relative mb-2">
            <i class="bi bi-search position-absolute top-50 translate-middle-y ms-2 text-muted" style="font-size:.8rem;left:2px;pointer-events:none"></i>
            <input type="text" id="projectSearchInput" class="form-control form-control-sm ps-4" placeholder="輸入關鍵字篩選…">
          </div>
          <div id="projectCheckList" style="max-height:180px;overflow-y:auto;border:1px solid #dee2e6;border-radius:.5rem">
            @foreach($allProjects as $p)
              <label class="project-check-item d-flex align-items-center gap-2 px-3 py-1 small border-bottom border-opacity-25"
                     data-pid="{{ $p->id }}"
                     data-name="{{ strtolower($p->name) }}"
                     style="cursor:pointer{{ in_array($p->id, $assignedIds) ? ';display:none' : '' }}"
                     @if(in_array($p->id, $assignedIds)) data-added="1" @endif>
                <input type="checkbox" class="proj-cb form-check-input mt-0 flex-shrink-0" value="{{ $p->id }}">
                <span class="flex-grow-1">{{ $p->name }}</span>
                <span class="badge {{ $typeBadge[$p->project_type] ?? 'bg-secondary text-white' }}" style="font-size:.65rem;white-space:nowrap">{{ $p->project_type }}</span>
              </label>
            @endforeach
          </div>
          <div class="d-flex justify-content-between align-items-center mt-1 mb-2">
            <div class="d-flex gap-2">
              <button type="button" class="btn btn-link btn-sm p-0 text-muted" id="btnSelAll" style="font-size:.78rem">全選</button>
              <button type="button" class="btn btn-link btn-sm p-0 text-muted" id="btnSelNone" style="font-size:.78rem">全不選</button>
            </div>
            <small class="text-muted" id="selectedCount">已選 0 個</small>
          </div>
          <div class="d-flex gap-2">
            <select id="roleSelect" class="form-select form-select-sm flex-grow-1">
              <option value="">選擇加入角色…</option>
              @foreach($roles as $r)
                <option value="{{ $r->id }}">{{ $r->label }}</option>
              @endforeach
            </select>
            <button type="button" class="btn btn-success btn-sm px-3" id="btnAddProjects">加入</button>
            <button type="button" class="btn btn-outline-secondary btn-sm" id="btnCancelAddProject" title="取消"><i class="bi bi-x"></i></button>
          </div>
        </div>

        {{-- 專案清單 --}}
        @php
          $roleLabels = $roles->pluck('label', 'id');
          $typeBadgeSmall = ['產品'=>'bg-info','開發'=>'bg-primary','維護'=>'bg-success','保固'=>'bg-warning text-dark','結束'=>'bg-secondary'];
        @endphp
        <ul class="list-group list-group-flush" id="projectList" style="max-height:480px;overflow-y:auto">
          @forelse($userGroup->projects as $p)
            <li class="list-group-item d-flex align-items-center gap-3" data-project-id="{{ $p->id }}">
              <div class="flex-grow-1 min-width-0">
                <div class="small fw-semibold lh-sm">{{ $p->name }}</div>
                <div class="d-flex gap-1 mt-1 flex-wrap">
                  <span class="badge {{ $typeBadgeSmall[$p->project_type] ?? 'bg-secondary' }}" style="font-size:.65rem">{{ $p->project_type }}</span>
                  <span class="badge bg-light text-dark border" style="font-size:.65rem">{{ $roleLabels[$p->pivot->role_id] ?? '—' }}</span>
                </div>
              </div>
              <button type="button" class="btn btn-rm text-danger btn-rm-project" data-id="{{ $p->id }}" data-name="{{ $p->name }}" title="移除關聯">
                <i class="bi bi-x-circle-fill"></i>
              </button>
            </li>
          @empty
            <li class="list-group-item text-center text-muted py-4 gdm-empty-projects" style="font-size:.9rem">
              <i class="bi bi-kanban d-block mb-1" style="font-size:1.5rem;opacity:.3"></i>尚未加入任何專案
            </li>
          @endforelse
        </ul>
      </div>
    </div>

  </div>

  <p class="text-muted mt-3 mb-0" style="font-size:.8rem">
    <i class="bi bi-info-circle me-1"></i>將群組加入專案時，群組成員會自動成為專案成員。移除專案關聯不影響個別已加入的成員。
  </p>

</div>

{{-- ── Floating Toast ──────────────────────────────────────────────── --}}
<div id="gdToastWrap" aria-live="polite"></div>

@endsection

@push('scripts')
<script>
const URLS = {
  addMember:     '{{ route("settings.projects.user-groups.members.add",     $userGroup->id) }}',
  removeMember:  '{{ route("settings.projects.user-groups.members.remove",  ["userGroup"=>$userGroup->id,"user"=>"__UID__"]) }}',
  addProject:    '{{ route("settings.projects.user-groups.projects.add",    $userGroup->id) }}',
  removeProject: '{{ route("settings.projects.user-groups.projects.remove", ["userGroup"=>$userGroup->id,"project"=>"__PID__"]) }}',
};
const CSRF = document.querySelector('meta[name="csrf-token"]').content;

const AVATAR_COLORS = ['#4e79a7','#f28e2b','#e15759','#76b7b2','#59a14f','#edc948','#b07aa1','#ff9da7','#9c755f','#bab0ac'];
let avatarIdx = {{ $userGroup->users->count() }};

function esc(s) {
  return String(s ?? '').replace(/&/g,'&amp;').replace(/</g,'&lt;').replace(/>/g,'&gt;').replace(/"/g,'&quot;');
}

function showToast(msg, type = 'success') {
  const icons = { success: 'bi-check-circle-fill', danger: 'bi-x-circle-fill', warning: 'bi-exclamation-triangle-fill' };
  const wrap = document.getElementById('gdToastWrap');
  const div = document.createElement('div');
  div.className = `alert alert-${type} d-flex align-items-center gap-2 shadow mb-2`;
  div.style.cssText = 'border-radius:.6rem;animation:fadeInUp .2s ease';
  div.innerHTML = `<i class="bi ${icons[type] ?? icons.success} flex-shrink-0"></i><span class="small">${esc(msg)}</span>`;
  wrap.appendChild(div);
  setTimeout(() => div.classList.add('fade'), 2200);
  setTimeout(() => div.remove(), 2700);
}

async function apiFetch(url, method, body) {
  const opts = { method, headers: { 'X-CSRF-TOKEN': CSRF, 'Accept': 'application/json' } };
  if (body) {
    opts.headers['Content-Type'] = 'application/x-www-form-urlencoded';
    opts.body = body instanceof URLSearchParams ? body.toString() : new URLSearchParams(body).toString();
  }
  const res  = await fetch(url, opts);
  const data = await res.json().catch(() => ({}));
  if (!res.ok) throw new Error(data.message || `HTTP ${res.status}`);
  return data;
}

// ── 加入成員 ──────────────────────────────────────────────────────────────────
const addMemberPanel = document.getElementById('addMemberPanel');

document.getElementById('btnToggleAddMember').addEventListener('click', () => {
  addMemberPanel.classList.toggle('d-none');
  if (!addMemberPanel.classList.contains('d-none')) document.getElementById('memberSelect').focus();
});
document.getElementById('btnCancelAddMember').addEventListener('click', () => addMemberPanel.classList.add('d-none'));

document.getElementById('btnAddMember').addEventListener('click', async function () {
  const sel = document.getElementById('memberSelect');
  if (!sel.value) { sel.focus(); return; }

  this.disabled = true;
  try {
    const data = await apiFetch(URLS.addMember, 'POST', { user_id: sel.value });
    const m = data.member;

    document.querySelector('#memberList .gdm-empty-members')?.remove();

    const color = AVATAR_COLORS[avatarIdx++ % AVATAR_COLORS.length];
    const li = document.createElement('li');
    li.className = 'list-group-item d-flex align-items-center gap-3';
    li.dataset.userId = m.id;
    li.innerHTML =
      `<div class="ug-avatar" style="background:${color}">${esc(m.name).charAt(0)}</div>` +
      `<div class="flex-grow-1 min-width-0">` +
        `<div class="small fw-semibold lh-sm">${esc(m.name)}</div>` +
        (m.dept ? `<div class="text-muted" style="font-size:.75rem">${esc(m.dept)}</div>` : '') +
      `</div>` +
      `<button type="button" class="btn btn-rm text-danger btn-rm-member" data-id="${m.id}" data-name="${esc(m.name)}" title="從群組移除"><i class="bi bi-person-dash-fill"></i></button>`;
    document.getElementById('memberList').appendChild(li);

    document.getElementById('member-count').textContent = document.querySelectorAll('#memberList [data-user-id]').length;
    sel.value = '';
    addMemberPanel.classList.add('d-none');
    showToast('成員已加入群組。');
  } catch (err) {
    showToast(err.message, 'danger');
  } finally {
    this.disabled = false;
  }
});

// ── 移除成員 ──────────────────────────────────────────────────────────────────
document.getElementById('memberList').addEventListener('click', async function (e) {
  const btn = e.target.closest('.btn-rm-member');
  if (!btn) return;
  if (!confirm(`從群組移除「${btn.dataset.name}」？`)) return;

  btn.disabled = true;
  try {
    await apiFetch(URLS.removeMember.replace('__UID__', btn.dataset.id), 'DELETE');
    btn.closest('li').remove();
    const n = document.querySelectorAll('#memberList [data-user-id]').length;
    document.getElementById('member-count').textContent = n;
    if (!n) document.getElementById('memberList').innerHTML =
      '<li class="list-group-item text-center text-muted py-4 gdm-empty-members" style="font-size:.9rem"><i class="bi bi-people d-block mb-1" style="font-size:1.5rem;opacity:.3"></i>尚無成員</li>';
    showToast('已從群組移除。');
  } catch (err) {
    showToast(err.message, 'danger');
    btn.disabled = false;
  }
});

// ── 加入專案 ──────────────────────────────────────────────────────────────────
@php
$_jsBadge = ['產品'=>'bg-info','開發'=>'bg-primary','維護'=>'bg-success','保固'=>'bg-warning text-dark','結束'=>'bg-secondary'];
@endphp
const roleLabels = @json($roles->pluck('label','id'));
const typeBadge  = @json($_jsBadge);
const addProjectPanel = document.getElementById('addProjectPanel');

document.getElementById('btnToggleAddProject').addEventListener('click', () => {
  addProjectPanel.classList.toggle('d-none');
  if (!addProjectPanel.classList.contains('d-none')) document.getElementById('projectSearchInput').focus();
});
document.getElementById('btnCancelAddProject').addEventListener('click', () => addProjectPanel.classList.add('d-none'));

document.getElementById('projectSearchInput').addEventListener('input', function () {
  const q = this.value.toLowerCase();
  document.querySelectorAll('.project-check-item').forEach(item => {
    if (item.dataset.added) return;
    item.style.display = (!q || item.dataset.name.includes(q)) ? '' : 'none';
  });
});

document.getElementById('projectCheckList').addEventListener('change', updateCount);

function updateCount() {
  const n = document.querySelectorAll('.proj-cb:checked').length;
  document.getElementById('selectedCount').textContent = `已選 ${n} 個`;
}

document.getElementById('btnSelAll').addEventListener('click', () => {
  document.querySelectorAll('.project-check-item:not([data-added]) .proj-cb').forEach(cb => cb.checked = true);
  updateCount();
});
document.getElementById('btnSelNone').addEventListener('click', () => {
  document.querySelectorAll('.proj-cb').forEach(cb => cb.checked = false);
  updateCount();
});

document.getElementById('btnAddProjects').addEventListener('click', async function () {
  const checked = document.querySelectorAll('.proj-cb:checked');
  if (!checked.length) { showToast('請至少勾選一個專案。', 'warning'); return; }
  const roleId = document.getElementById('roleSelect').value;
  if (!roleId) { showToast('請選擇角色。', 'warning'); return; }

  const params = new URLSearchParams();
  params.append('role_id', roleId);
  checked.forEach(cb => params.append('project_ids[]', cb.value));

  this.disabled = true;
  try {
    const data = await apiFetch(URLS.addProject, 'POST', params);

    document.querySelector('#projectList .gdm-empty-projects')?.remove();

    data.projects.forEach(p => {
      const roleName  = esc(roleLabels[p.role_id] || '—');
      const typeCls   = typeBadge[p.project_type] ?? 'bg-secondary';
      const li = document.createElement('li');
      li.className = 'list-group-item d-flex align-items-center gap-3';
      li.dataset.projectId = p.id;
      li.innerHTML =
        `<div class="flex-grow-1 min-width-0">` +
          `<div class="small fw-semibold lh-sm">${esc(p.name)}</div>` +
          `<div class="d-flex gap-1 mt-1">` +
            `<span class="badge ${typeCls}" style="font-size:.65rem">${esc(p.project_type)}</span>` +
            `<span class="badge bg-light text-dark border" style="font-size:.65rem">${roleName}</span>` +
          `</div>` +
        `</div>` +
        `<button type="button" class="btn btn-rm text-danger btn-rm-project" data-id="${p.id}" data-name="${esc(p.name)}" title="移除關聯"><i class="bi bi-x-circle-fill"></i></button>`;
      document.getElementById('projectList').appendChild(li);

      const label = document.querySelector(`.project-check-item[data-pid="${p.id}"]`);
      if (label) { label.style.display = 'none'; label.dataset.added = '1'; label.querySelector('.proj-cb').checked = false; }
    });

    document.getElementById('project-count').textContent = document.querySelectorAll('#projectList [data-project-id]').length;
    document.getElementById('roleSelect').value = '';
    document.getElementById('projectSearchInput').value = '';
    document.querySelectorAll('.proj-cb').forEach(cb => cb.checked = false);
    updateCount();
    addProjectPanel.classList.add('d-none');
    showToast(`已加入 ${data.added} 個專案，成員已同步。`);
  } catch (err) {
    showToast(err.message, 'danger');
  } finally {
    this.disabled = false;
  }
});

// ── 移除專案 ──────────────────────────────────────────────────────────────────
document.getElementById('projectList').addEventListener('click', async function (e) {
  const btn = e.target.closest('.btn-rm-project');
  if (!btn) return;
  if (!confirm(`移除群組與專案「${btn.dataset.name}」的關聯？`)) return;

  btn.disabled = true;
  try {
    await apiFetch(URLS.removeProject.replace('__PID__', btn.dataset.id), 'DELETE');
    const pid = btn.dataset.id;
    btn.closest('li').remove();
    const n = document.querySelectorAll('#projectList [data-project-id]').length;
    document.getElementById('project-count').textContent = n;
    if (!n) document.getElementById('projectList').innerHTML =
      '<li class="list-group-item text-center text-muted py-4 gdm-empty-projects" style="font-size:.9rem"><i class="bi bi-kanban d-block mb-1" style="font-size:1.5rem;opacity:.3"></i>尚未加入任何專案</li>';
    const label = document.querySelector(`.project-check-item[data-pid="${pid}"]`);
    if (label) { label.style.display = ''; delete label.dataset.added; }
    showToast('已移除關聯。');
  } catch (err) {
    showToast(err.message, 'danger');
    btn.disabled = false;
  }
});

// toast fade-in animation
const style = document.createElement('style');
style.textContent = '@keyframes fadeInUp{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}';
document.head.appendChild(style);
</script>
@endpush