@extends('layouts.app')
@section('title', '專案管理設定')

@section('content')
<div class="container-fluid px-4 py-4">

  <div class="d-flex align-items-center mb-4 gap-3">
    <h4 class="mb-0 fw-bold"><i class="bi bi-sliders me-2"></i>專案管理設定</h4>
    <span class="badge bg-secondary">管理員</span>
  </div>

  @if(session('success'))
    <div class="alert alert-success alert-dismissible fade show">{{ session('success') }}<button type="button" class="btn-close" data-bs-dismiss="alert"></button></div>
  @endif
  @if(session('error'))
    <div class="alert alert-danger alert-dismissible fade show">{{ session('error') }}<button type="button" class="btn-close" data-bs-dismiss="alert"></button></div>
  @endif

  {{-- Tab 導覽 --}}
  <ul class="nav nav-tabs mb-4" id="settingTabs">
    <li class="nav-item"><a class="nav-link active" data-bs-toggle="tab" href="#tab-roles"><i class="bi bi-shield-lock me-1"></i>角色 & 權限</a></li>
    <li class="nav-item"><a class="nav-link" data-bs-toggle="tab" href="#tab-user-groups"><i class="bi bi-people-fill me-1"></i>群組管理</a></li>
    <li class="nav-item"><a class="nav-link" data-bs-toggle="tab" href="#tab-trackers"><i class="bi bi-tags me-1"></i>議題類型</a></li>
    <li class="nav-item"><a class="nav-link" data-bs-toggle="tab" href="#tab-statuses"><i class="bi bi-check2-circle me-1"></i>議題狀態</a></li>
    <li class="nav-item"><a class="nav-link" data-bs-toggle="tab" href="#tab-priorities"><i class="bi bi-flag me-1"></i>優先度</a></li>
    <li class="nav-item"><a class="nav-link" data-bs-toggle="tab" href="#tab-activities"><i class="bi bi-clock me-1"></i>工時活動</a></li>
    <li class="nav-item"><a class="nav-link" data-bs-toggle="tab" href="#tab-doc-categories"><i class="bi bi-folder2 me-1"></i>文件分類</a></li>
    <li class="nav-item"><a class="nav-link" data-bs-toggle="tab" href="#tab-doc-templates"><i class="bi bi-layout-text-window me-1"></i>文件樣板</a></li>
    <li class="nav-item"><a class="nav-link" data-bs-toggle="tab" href="#tab-dev-tools"><i class="bi bi-tools me-1"></i>開發工具</a></li>
    <li class="nav-item"><a class="nav-link" data-bs-toggle="tab" href="#tab-project-types"><i class="bi bi-tags me-1"></i>開發類型</a></li>
<li class="nav-item"><a class="nav-link" data-bs-toggle="tab" href="#tab-notifications"><i class="bi bi-bell me-1"></i>通知</a></li>
  </ul>

  @php
    $perms = [
      'perm_manage'         => ['icon' => 'bi-gear-fill',          'label' => '管理專案',    'desc' => '修改設定、管理成員'],
      'perm_view_docs'      => ['icon' => 'bi-file-earmark-text',  'label' => '查看文件',    'desc' => '查看文件'],
      'perm_edit_docs'      => ['icon' => 'bi-pencil-square',      'label' => '編輯文件',    'desc' => '新增、編輯、刪除文件（需同時勾選查看文件）'],
      'perm_manage_issues'  => ['icon' => 'bi-bug-fill',           'label' => '管理議題',    'desc' => '新增、編輯議題'],
      'perm_close_issues'   => ['icon' => 'bi-check-circle-fill',  'label' => '結束議題',    'desc' => '可將議題設為已完成/已解決/已拒絕等結束狀態'],
      'perm_upload_files'   => ['icon' => 'bi-paperclip',          'label' => '上傳附件',    'desc' => '上傳、刪除附件'],
      'perm_view_roadmap'   => ['icon' => 'bi-map',                'label' => '查看合約',    'desc' => '查看合約版本與里程碑'],
      'perm_manage_roadmap' => ['icon' => 'bi-map-fill',           'label' => '管理合約',    'desc' => '新增、編輯、刪除合約版本（需同時勾選查看合約）'],
      'perm_view_gitlab'    => ['icon' => 'bi-git',                'label' => '查看 GitLab', 'desc' => '查看 GitLab 整合頁'],
      'perm_view_gantt'     => ['icon' => 'bi-bar-chart-steps',    'label' => '甘特圖',      'desc' => '查看甘特圖'],
      'perm_view_calendar'  => ['icon' => 'bi-calendar3',          'label' => '行事曆',      'desc' => '查看行事曆'],
      'perm_log_time'       => ['icon' => 'bi-clock-history',      'label' => '記錄工時',    'desc' => '新增、查看工時紀錄'],
      'perm_view_members'   => ['icon' => 'bi-people',             'label' => '查看成員',    'desc' => '查看專案成員列表'],
    ];
    $colors = ['primary'=>'藍','secondary'=>'灰','success'=>'綠','danger'=>'紅','warning'=>'黃','info'=>'青','dark'=>'黑'];
  @endphp

  <div class="tab-content">

    {{-- ═══ 角色 & 權限 ════════════════════════════════════════════ --}}
    <div class="tab-pane fade show active" id="tab-roles">
      <div class="row g-4">
        <div class="col-lg-8">
          <div class="card shadow-sm">
            <div class="card-header bg-white"><h6 class="mb-0 fw-semibold">全域角色（{{ $roles->count() }}）</h6></div>
            <div class="table-responsive">
              <table class="table table-hover align-middle mb-0">
                <thead class="table-light"><tr><th>角色名稱</th><th>權限</th><th style="width:120px">操作</th></tr></thead>
                <tbody>
                  @foreach($roles as $role)
                  <tr>
                    <td>
                      <span class="badge bg-{{ $role->badge_color }}">{{ $role->label }}</span>
                      @if($role->is_default)<span class="badge bg-light text-muted border ms-1 small">預設</span>@endif
                    </td>
                    <td>
                      @foreach($perms as $key => $p)
                        @if($role->$key)
                          <span class="badge bg-light text-dark border me-1 small"><i class="bi {{ $p['icon'] }} me-1"></i>{{ $p['label'] }}</span>
                        @endif
                      @endforeach
                      @if(!$role->perm_manage && !$role->perm_view_docs && !$role->perm_edit_docs && !$role->perm_manage_issues && !$role->perm_close_issues && !$role->perm_upload_files && !$role->perm_view_roadmap && !$role->perm_manage_roadmap && !$role->perm_view_gitlab && !$role->perm_view_gantt && !$role->perm_view_calendar && !$role->perm_log_time && !$role->perm_view_members)
                        <span class="text-muted small">無任何權限</span>
                      @endif
                    </td>
                    <td>
                      <button class="btn btn-sm btn-outline-secondary btn-edit-role"
                        data-id="{{ $role->id }}" data-label="{{ $role->label }}" data-color="{{ $role->badge_color }}"
                        data-perm-manage="{{ $role->perm_manage ? 1 : 0 }}"
                        data-perm-view-docs="{{ $role->perm_view_docs ? 1 : 0 }}"
                        data-perm-docs="{{ $role->perm_edit_docs ? 1 : 0 }}"
                        data-perm-issues="{{ $role->perm_manage_issues ? 1 : 0 }}"
                        data-perm-close-issues="{{ $role->perm_close_issues ? 1 : 0 }}"
                        data-perm-files="{{ $role->perm_upload_files ? 1 : 0 }}"
                        data-perm-roadmap="{{ $role->perm_view_roadmap ? 1 : 0 }}"
                        data-perm-manage-roadmap="{{ $role->perm_manage_roadmap ? 1 : 0 }}"
                        data-perm-gitlab="{{ $role->perm_view_gitlab ? 1 : 0 }}"
                        data-perm-gantt="{{ $role->perm_view_gantt ? 1 : 0 }}"
                        data-perm-calendar="{{ $role->perm_view_calendar ? 1 : 0 }}"
                        data-perm-log-time="{{ $role->perm_log_time ? 1 : 0 }}"
                        data-perm-members="{{ $role->perm_view_members ? 1 : 0 }}">
                        <i class="bi bi-pencil"></i>
                      </button>
                      @if(!$role->is_default)
                      <form action="{{ route('settings.projects.roles.destroy', $role) }}" method="POST" class="d-inline">
                        @csrf @method('DELETE')
                        <button type="submit" class="btn btn-sm btn-outline-danger" onclick="return confirm('刪除角色「{{ $role->label }}」？')"><i class="bi bi-trash"></i></button>
                      </form>
                      @endif
                    </td>
                  </tr>
                  @endforeach
                </tbody>
              </table>
            </div>
          </div>
        </div>
        <div class="col-lg-4">
          <div class="card shadow-sm">
            <div class="card-header bg-white"><h6 class="mb-0 fw-semibold"><i class="bi bi-plus-circle me-1"></i>新增角色</h6></div>
            <div class="card-body">
              <form action="{{ route('settings.projects.roles.store') }}" method="POST">
                @csrf
                <div class="mb-2">
                  <label class="form-label small fw-semibold" for="label">角色名稱</label>
                  <input type="text" name="label" class="form-control form-control-sm" required maxlength="50" id="label">
                </div>
                <div class="mb-2">
                  <label class="form-label small fw-semibold" for="badge_color">Badge 顏色</label>
                  <select name="badge_color" class="form-select form-select-sm" id="badge_color">
                    @foreach($colors as $v=>$n)<option value="{{ $v }}" @selected($v==='success')>{{ $n }}</option>@endforeach
                  </select>
                </div>
                <div class="mb-3">
                  <label class="form-label small fw-semibold">權限</label>
                  @foreach($perms as $key=>$p)
                  <div class="form-check">
                    <input class="form-check-input" type="checkbox" name="{{ $key }}" value="1" id="new_r_{{ $key }}">
                    <label class="form-check-label small" for="new_r_{{ $key }}">
                      <i class="bi {{ $p['icon'] }} me-1 text-muted"></i>{{ $p['label'] }}
                      <span class="text-muted" style="font-size:.8em">— {{ $p['desc'] }}</span>
                    </label>
                  </div>
                  @endforeach
                </div>
                <button class="btn btn-primary btn-sm w-100">建立角色</button>
              </form>
            </div>
          </div>
        </div>
      </div>
    </div>

    {{-- ═══ 群組管理 ════════════════════════════════════════════════ --}}
    <div class="tab-pane fade" id="tab-user-groups">
      <div class="row g-4">
        <div class="col-lg-8">
          <div class="card shadow-sm">
            <div class="card-header bg-white d-flex justify-content-between align-items-center">
              <h6 class="mb-0 fw-semibold">使用者群組（{{ $userGroups->count() }}）</h6>
              <button class="btn btn-sm btn-primary" data-bs-toggle="modal" data-bs-target="#addGroupModal"><i class="bi bi-plus-lg me-1"></i>新增群組</button>
            </div>
            @if($userGroups->isEmpty())
              <div class="card-body text-muted small">尚未建立任何群組。</div>
            @else
              <ul class="list-group list-group-flush">
                @foreach($userGroups as $grp)
                  <li class="list-group-item d-flex align-items-center justify-content-between py-2">
                    <div>
                      <span class="fw-semibold">{{ $grp->name }}</span>
                      @if($grp->description)
                        <span class="text-muted small ms-2">{{ $grp->description }}</span>
                      @endif
                      <div class="mt-1">
                        <span class="badge bg-light text-dark border small me-1"><i class="bi bi-person me-1"></i>{{ $grp->users->count() }} 人</span>
                        <span class="badge bg-light text-dark border small"><i class="bi bi-kanban me-1"></i>{{ $grp->projects->count() }} 專案</span>
                      </div>
                    </div>
                    <div class="d-flex gap-2">
                      <button type="button" class="btn btn-sm btn-outline-primary btn-manage-group" data-id="{{ $grp->id }}" data-name="{{ $grp->name }}">
                        <i class="bi bi-pencil-square me-1"></i>管理
                      </button>
                      <form action="{{ route('settings.projects.user-groups.destroy', $grp) }}" method="POST" class="d-inline">
                        @csrf @method('DELETE')
                        <button type="submit" class="btn btn-sm btn-outline-danger"
                          onclick="return confirm('刪除群組「{{ $grp->name }}」？此操作不影響已加入的專案成員。')">
                          <i class="bi bi-trash"></i>
                        </button>
                      </form>
                    </div>
                  </li>
                @endforeach
              </ul>
            @endif
          </div>
        </div>
        <div class="col-lg-4">
          <div class="card shadow-sm border-0 bg-light">
            <div class="card-body small text-muted">
              <p class="fw-semibold text-dark mb-2"><i class="bi bi-info-circle me-1"></i>群組說明</p>
              <ul class="ps-3 mb-0">
                <li>可將多位成員集合成一個群組</li>
                <li>群組加入專案時，成員自動加為專案成員</li>
                <li>新增群組成員後，該成員也會自動加入群組所在的所有專案</li>
                <li>移除群組與專案的關聯，不影響已加入的個別成員</li>
              </ul>
            </div>
          </div>
        </div>
      </div>

      {{-- ── 群組詳細管理（inline）─────────────────────────────────── --}}
      <div id="groupDetailPanel" class="mt-3 d-none">
        <div class="card border-primary border-opacity-25 shadow-sm">
          <div class="card-header d-flex justify-content-between align-items-center py-2" style="background:rgba(13,110,253,.04)">
            <span class="fw-semibold small"><i class="bi bi-people-fill me-2 text-primary"></i><span id="gdp-name"></span></span>
            <button type="button" class="btn btn-sm btn-outline-secondary py-0 px-2" id="btnCloseGdp" title="關閉"><i class="bi bi-x-lg"></i></button>
          </div>
          <div class="card-body p-0">
            <div class="row g-0">

              {{-- 左：成員 --}}
              <div class="col-md-6 border-end">
                <div class="px-3 pt-3 pb-2 border-bottom d-flex justify-content-between align-items-center">
                  <span class="small fw-semibold">成員（<span id="gdp-member-count">0</span> 人）</span>
                  <button type="button" class="btn btn-sm btn-outline-primary py-0 px-2" id="btnGdpToggleMember"><i class="bi bi-plus-lg"></i></button>
                </div>
                <div class="px-3 py-2 border-bottom d-none" id="gdpAddMemberPanel">
                  <div class="d-flex gap-2">
                    <select id="gdpMemberSelect" 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" id="btnGdpAddMember">加入</button>
                    <button type="button" class="btn btn-outline-secondary btn-sm" id="btnGdpCancelMember"><i class="bi bi-x"></i></button>
                  </div>
                </div>
                <ul class="list-group list-group-flush" id="gdpMemberList" style="max-height:340px;overflow-y:auto">
                  <li class="list-group-item text-muted small py-3 text-center gdp-empty-members">尚無成員</li>
                </ul>
              </div>

              {{-- 右：專案 --}}
              <div class="col-md-6">
                <div class="px-3 pt-3 pb-2 border-bottom d-flex justify-content-between align-items-center">
                  <span class="small fw-semibold">已加入專案（<span id="gdp-project-count">0</span> 個）</span>
                  <button type="button" class="btn btn-sm btn-outline-success py-0 px-2" id="btnGdpToggleProject"><i class="bi bi-plus-lg"></i></button>
                </div>
                <div class="px-3 py-2 border-bottom d-none" id="gdpAddProjectPanel">
                  <input type="text" id="gdpProjectSearch" class="form-control form-control-sm mb-2" placeholder="搜尋專案…">
                  @php
                    $gdpTypeBadge = ['產品'=>'bg-info','開發'=>'bg-primary','維護'=>'bg-success','保固'=>'bg-warning text-dark','結束'=>'bg-secondary'];
                  @endphp
                  <div id="gdpProjectCheckList" style="max-height:160px;overflow-y:auto;border:1px solid #dee2e6;border-radius:.375rem">
                    @foreach($allProjects as $p)
                      <label class="gdp-proj-item d-flex align-items-center gap-2 px-3 py-1 small" data-pid="{{ $p->id }}" data-name="{{ strtolower($p->name) }}" style="cursor:pointer">
                        <input type="checkbox" class="gdp-proj-cb form-check-input mt-0 flex-shrink-0" value="{{ $p->id }}">
                        <span class="flex-grow-1">{{ $p->name }}</span>
                        <span class="badge {{ $gdpTypeBadge[$p->project_type] ?? 'bg-secondary' }}" style="font-size:.65rem">{{ $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="gdpSelAll" style="font-size:.78rem">全選</button>
                      <button type="button" class="btn btn-link btn-sm p-0 text-muted" id="gdpSelNone" style="font-size:.78rem">全不選</button>
                    </div>
                    <small class="text-muted" id="gdpSelCount">已選 0 個</small>
                  </div>
                  <div class="d-flex gap-2">
                    <select id="gdpRoleSelect" 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" id="btnGdpAddProject">加入</button>
                    <button type="button" class="btn btn-outline-secondary btn-sm" id="btnGdpCancelProject"><i class="bi bi-x"></i></button>
                  </div>
                </div>
                <ul class="list-group list-group-flush" id="gdpProjectList" style="max-height:340px;overflow-y:auto">
                  <li class="list-group-item text-muted small py-3 text-center gdp-empty-projects">尚未加入任何專案</li>
                </ul>
              </div>

            </div>
          </div>
          <div class="card-footer py-2">
            <small class="text-muted"><i class="bi bi-info-circle me-1"></i>加入群組成員或專案後立即生效，移除關聯不影響個別已加入的成員。</small>
          </div>
        </div>
      </div>
      {{-- /群組詳細管理 --}}

    </div>

    {{-- ═══ 議題類型 ════════════════════════════════════════════════ --}}
    <div class="tab-pane fade" id="tab-trackers">
      <div class="row g-4">
        <div class="col-lg-8">
          <div class="card shadow-sm">
            <div class="card-header bg-white"><h6 class="mb-0 fw-semibold">議題類型（{{ $trackers->count() }}）</h6></div>
            <div class="table-responsive">
              <table class="table table-hover align-middle mb-0">
                <thead class="table-light"><tr><th>名稱</th><th>顏色</th><th>狀態</th><th style="width:120px">操作</th></tr></thead>
                <tbody>
                  @foreach($trackers as $t)
                  <tr>
                    <td><span class="badge bg-{{ $t->color }}">{{ $t->label }}</span></td>
                    <td><span class="small text-muted">{{ $colors[$t->color] ?? $t->color }}</span></td>
                    <td>{!! $t->is_active ? '<span class="badge bg-success-subtle text-success border border-success-subtle small">啟用</span>' : '<span class="badge bg-secondary-subtle text-muted border small">停用</span>' !!}</td>
                    <td>
                      <button class="btn btn-sm btn-outline-secondary btn-edit-tracker"
                        data-id="{{ $t->id }}" data-label="{{ $t->label }}" data-color="{{ $t->color }}" data-active="{{ $t->is_active ? 1 : 0 }}">
                        <i class="bi bi-pencil"></i>
                      </button>
                      <form action="{{ route('settings.projects.trackers.destroy', $t) }}" method="POST" class="d-inline">
                        @csrf @method('DELETE')
                        <button type="submit" class="btn btn-sm btn-outline-danger" onclick="return confirm('刪除？')"><i class="bi bi-trash"></i></button>
                      </form>
                    </td>
                  </tr>
                  @endforeach
                </tbody>
              </table>
            </div>
          </div>
        </div>
        <div class="col-lg-4">
          <div class="card shadow-sm">
            <div class="card-header bg-white"><h6 class="mb-0 fw-semibold"><i class="bi bi-plus-circle me-1"></i>新增類型</h6></div>
            <div class="card-body">
              <form action="{{ route('settings.projects.trackers.store') }}" method="POST">
                @csrf
                <div class="mb-2"><label class="form-label small fw-semibold" for="label">名稱</label><input type="text" name="label" class="form-control form-control-sm" required id="label"></div>
                <div class="mb-3">
                  <label class="form-label small fw-semibold" for="color">顏色</label>
                  <select name="color" class="form-select form-select-sm" id="color">
                    @foreach($colors as $v=>$n)<option value="{{ $v }}">{{ $n }}</option>@endforeach
                  </select>
                </div>
                <button class="btn btn-primary btn-sm w-100">建立</button>
              </form>
            </div>
          </div>
        </div>
      </div>
    </div>

    {{-- ═══ 議題狀態 ════════════════════════════════════════════════ --}}
    <div class="tab-pane fade" id="tab-statuses">
      <div class="row g-4">
        <div class="col-lg-8">
          <div class="card shadow-sm">
            <div class="card-header bg-white"><h6 class="mb-0 fw-semibold">議題狀態（{{ $statuses->count() }}）</h6></div>
            <div class="table-responsive">
              <table class="table table-hover align-middle mb-0">
                <thead class="table-light"><tr><th>名稱</th><th>屬性</th><th>可使用角色</th><th>狀態</th><th style="width:80px">操作</th></tr></thead>
                <tbody>
                  @foreach($statuses as $s)
                  @php $allowedRoles = $s->allowed_roles ?? []; @endphp
                  <tr>
                    <td><span class="badge bg-{{ $s->color }}">{{ $s->label }}</span>@if($s->is_default)<span class="badge bg-light text-muted border ms-1 small">預設</span>@endif</td>
                    <td>
                      @if($s->is_closed)<span class="badge bg-secondary-subtle text-muted border small me-1">已關閉</span>@else<span class="badge bg-primary-subtle text-primary border small me-1">開放中</span>@endif
                    </td>
                    <td>
                      @if(empty($allowedRoles))
                        <span class="text-muted small">所有人</span>
                      @else
                        @foreach($roles->whereIn('slug', $allowedRoles) as $r)
                          <span class="badge bg-{{ $r->badge_color ?? 'secondary' }} me-1 small">{{ $r->label }}</span>
                        @endforeach
                      @endif
                    </td>
                    <td>{!! $s->is_active ? '<span class="badge bg-success-subtle text-success border border-success-subtle small">啟用</span>' : '<span class="badge bg-secondary-subtle text-muted border small">停用</span>' !!}</td>
                    <td>
                      <button class="btn btn-sm btn-outline-secondary btn-edit-status"
                        data-id="{{ $s->id }}" data-label="{{ $s->label }}" data-color="{{ $s->color }}"
                        data-closed="{{ $s->is_closed ? 1 : 0 }}" data-default="{{ $s->is_default ? 1 : 0 }}" data-active="{{ $s->is_active ? 1 : 0 }}"
                        data-allowed-roles="{{ json_encode($allowedRoles) }}">
                        <i class="bi bi-pencil"></i>
                      </button>
                      @if(!$s->is_default)
                      <form action="{{ route('settings.projects.statuses.destroy', $s) }}" method="POST" class="d-inline">
                        @csrf @method('DELETE')
                        <button type="submit" class="btn btn-sm btn-outline-danger" onclick="return confirm('刪除？')"><i class="bi bi-trash"></i></button>
                      </form>
                      @endif
                    </td>
                  </tr>
                  @endforeach
                </tbody>
              </table>
            </div>
          </div>
        </div>
        <div class="col-lg-4">
          <div class="card shadow-sm">
            <div class="card-header bg-white"><h6 class="mb-0 fw-semibold"><i class="bi bi-plus-circle me-1"></i>新增狀態</h6></div>
            <div class="card-body">
              <form action="{{ route('settings.projects.statuses.store') }}" method="POST">
                @csrf
                <div class="mb-2"><label class="form-label small fw-semibold" for="label">名稱</label><input type="text" name="label" class="form-control form-control-sm" required id="label"></div>
                <div class="mb-2">
                  <label class="form-label small fw-semibold" for="color">顏色</label>
                  <select name="color" class="form-select form-select-sm" id="color">
                    @foreach($colors as $v=>$n)<option value="{{ $v }}">{{ $n }}</option>@endforeach
                  </select>
                </div>
                <div class="mb-3 form-check">
                  <input type="checkbox" class="form-check-input" name="is_closed" value="1" id="new_s_closed">
                  <label class="form-check-label small" for="new_s_closed">屬於「已關閉」狀態</label>
                </div>
                <div class="mb-3">
                  <label class="form-label small fw-semibold">可使用角色 <span class="text-muted fw-normal">（不勾選 = 所有人）</span></label>
                  @foreach($roles as $r)
                  <div class="form-check form-check-sm">
                    <input class="form-check-input" type="checkbox" name="allowed_roles[]" value="{{ $r->slug }}" id="new_s_role_{{ $r->slug }}">
                    <label class="form-check-label small" for="new_s_role_{{ $r->slug }}">{{ $r->label }}</label>
                  </div>
                  @endforeach
                </div>
                <button class="btn btn-primary btn-sm w-100">建立</button>
              </form>
            </div>
          </div>
        </div>
      </div>
    </div>

    {{-- ═══ 優先度 ══════════════════════════════════════════════════ --}}
    <div class="tab-pane fade" id="tab-priorities">
      <div class="row g-4">
        <div class="col-lg-8">
          <div class="card shadow-sm">
            <div class="card-header bg-white"><h6 class="mb-0 fw-semibold">優先度（{{ $priorities->count() }}）</h6></div>
            <div class="table-responsive">
              <table class="table table-hover align-middle mb-0">
                <thead class="table-light"><tr><th>名稱</th><th>顏色</th><th>狀態</th><th style="width:120px">操作</th></tr></thead>
                <tbody>
                  @foreach($priorities as $p)
                  <tr>
                    <td><span class="badge bg-{{ $p->color }}">{{ $p->label }}</span>@if($p->is_default)<span class="badge bg-light text-muted border ms-1 small">預設</span>@endif</td>
                    <td><span class="small text-muted">{{ $colors[$p->color] ?? $p->color }}</span></td>
                    <td>{!! $p->is_active ? '<span class="badge bg-success-subtle text-success border border-success-subtle small">啟用</span>' : '<span class="badge bg-secondary-subtle text-muted border small">停用</span>' !!}</td>
                    <td>
                      <button class="btn btn-sm btn-outline-secondary btn-edit-priority"
                        data-id="{{ $p->id }}" data-label="{{ $p->label }}" data-color="{{ $p->color }}"
                        data-default="{{ $p->is_default ? 1 : 0 }}" data-active="{{ $p->is_active ? 1 : 0 }}">
                        <i class="bi bi-pencil"></i>
                      </button>
                      @if(!$p->is_default)
                      <form action="{{ route('settings.projects.priorities.destroy', $p) }}" method="POST" class="d-inline">
                        @csrf @method('DELETE')
                        <button type="submit" class="btn btn-sm btn-outline-danger" onclick="return confirm('刪除？')"><i class="bi bi-trash"></i></button>
                      </form>
                      @endif
                    </td>
                  </tr>
                  @endforeach
                </tbody>
              </table>
            </div>
          </div>
        </div>
        <div class="col-lg-4">
          <div class="card shadow-sm">
            <div class="card-header bg-white"><h6 class="mb-0 fw-semibold"><i class="bi bi-plus-circle me-1"></i>新增優先度</h6></div>
            <div class="card-body">
              <form action="{{ route('settings.projects.priorities.store') }}" method="POST">
                @csrf
                <div class="mb-2"><label class="form-label small fw-semibold" for="label">名稱</label><input type="text" name="label" class="form-control form-control-sm" required id="label"></div>
                <div class="mb-3">
                  <label class="form-label small fw-semibold" for="color">顏色</label>
                  <select name="color" class="form-select form-select-sm" id="color">
                    @foreach($colors as $v=>$n)<option value="{{ $v }}">{{ $n }}</option>@endforeach
                  </select>
                </div>
                <button class="btn btn-primary btn-sm w-100">建立</button>
              </form>
            </div>
          </div>
        </div>
      </div>
    </div>

    {{-- ═══ 工時活動 ════════════════════════════════════════════════ --}}
    <div class="tab-pane fade" id="tab-activities">
      <div class="row g-4">
        <div class="col-lg-8">
          <div class="card shadow-sm">
            <div class="card-header bg-white"><h6 class="mb-0 fw-semibold">工時活動類型（{{ $activities->count() }}）</h6></div>
            <div class="table-responsive">
              <table class="table table-hover align-middle mb-0">
                <thead class="table-light"><tr><th>名稱</th><th>狀態</th><th style="width:120px">操作</th></tr></thead>
                <tbody>
                  @foreach($activities as $a)
                  <tr>
                    <td>{{ $a->label }}@if($a->is_default)<span class="badge bg-light text-muted border ms-1 small">預設</span>@endif</td>
                    <td>{!! $a->is_active ? '<span class="badge bg-success-subtle text-success border border-success-subtle small">啟用</span>' : '<span class="badge bg-secondary-subtle text-muted border small">停用</span>' !!}</td>
                    <td>
                      <button class="btn btn-sm btn-outline-secondary btn-edit-activity"
                        data-id="{{ $a->id }}" data-label="{{ $a->label }}"
                        data-default="{{ $a->is_default ? 1 : 0 }}" data-active="{{ $a->is_active ? 1 : 0 }}">
                        <i class="bi bi-pencil"></i>
                      </button>
                      @if(!$a->is_default)
                      <form action="{{ route('settings.projects.activities.destroy', $a) }}" method="POST" class="d-inline">
                        @csrf @method('DELETE')
                        <button type="submit" class="btn btn-sm btn-outline-danger" onclick="return confirm('刪除？')"><i class="bi bi-trash"></i></button>
                      </form>
                      @endif
                    </td>
                  </tr>
                  @endforeach
                </tbody>
              </table>
            </div>
          </div>
        </div>
        <div class="col-lg-4">
          <div class="card shadow-sm">
            <div class="card-header bg-white"><h6 class="mb-0 fw-semibold"><i class="bi bi-plus-circle me-1"></i>新增活動</h6></div>
            <div class="card-body">
              <form action="{{ route('settings.projects.activities.store') }}" method="POST">
                @csrf
                <div class="mb-3"><label class="form-label small fw-semibold" for="label">名稱</label><input type="text" name="label" class="form-control form-control-sm" required id="label"></div>
                <button class="btn btn-primary btn-sm w-100">建立</button>
              </form>
            </div>
          </div>
        </div>
      </div>
    </div>

    {{-- ── 文件分類 ── --}}
    <div class="tab-pane fade" id="tab-doc-categories">
      <div class="row g-4">
        <div class="col-lg-8">
          <div class="card shadow-sm">
            <div class="card-header bg-white"><h6 class="mb-0 fw-semibold">文件分類（{{ $docCategories->count() }}）</h6></div>
            <div class="table-responsive">
              <table class="table table-hover align-middle mb-0">
                <thead class="table-light"><tr><th>名稱</th><th style="width:120px">操作</th></tr></thead>
                <tbody>
                  @forelse($docCategories as $cat)
                  <tr>
                    <td>{{ $cat->name }}</td>
                    <td>
                      <button class="btn btn-sm btn-outline-secondary btn-edit-doc-cat"
                              data-id="{{ $cat->id }}" data-name="{{ $cat->name }}">
                        <i class="bi bi-pencil"></i>
                      </button>
                      <form action="{{ route('settings.projects.doc-categories.destroy', $cat) }}" method="POST" class="d-inline">
                        @csrf @method('DELETE')
                        <button type="submit" class="btn btn-sm btn-outline-danger"
                                onclick="return confirm('刪除分類「{{ $cat->name }}」？此分類下的文件將改為未分類。')">
                          <i class="bi bi-trash"></i>
                        </button>
                      </form>
                    </td>
                  </tr>
                  @empty
                  <tr><td colspan="2" class="text-center text-muted py-3">尚無分類</td></tr>
                  @endforelse
                </tbody>
              </table>
            </div>
          </div>
        </div>
        <div class="col-lg-4">
          <div class="card shadow-sm">
            <div class="card-header bg-white"><h6 class="mb-0 fw-semibold"><i class="bi bi-plus-circle me-1"></i>新增分類</h6></div>
            <div class="card-body">
              <form action="{{ route('settings.projects.doc-categories.store') }}" method="POST">
                @csrf
                <div class="mb-3"><label class="form-label small fw-semibold" for="name">名稱</label>
                  <input type="text" name="name" class="form-control form-control-sm" required placeholder="例：使用文件" id="name"></div>
                <button class="btn btn-primary btn-sm w-100">建立</button>
              </form>
            </div>
          </div>
        </div>
      </div>
    </div>

    {{-- ── 文件樣板 ── --}}
    <div class="tab-pane fade" id="tab-doc-templates">
      <div class="row g-4">
        <div class="col-lg-8">
          <div class="card shadow-sm">
            <div class="card-header bg-white"><h6 class="mb-0 fw-semibold">文件樣板（{{ $docTemplates->count() }}）</h6></div>
            <div class="table-responsive">
              <table class="table table-hover align-middle mb-0">
                <thead class="table-light"><tr><th>樣板名稱</th><th>說明</th><th>分類</th><th style="width:120px">操作</th></tr></thead>
                <tbody>
                  @forelse($docTemplates as $tpl)
                  <tr>
                    <td class="fw-semibold">{{ $tpl->name }}</td>
                    <td class="text-muted small">{{ $tpl->description ?? '—' }}</td>
                    <td>{{ $tpl->category?->name ?? '—' }}</td>
                    <td>
                      <button class="btn btn-sm btn-outline-secondary btn-edit-doc-tpl"
                              data-id="{{ $tpl->id }}"
                              data-name="{{ $tpl->name }}"
                              data-description="{{ $tpl->description }}"
                              data-category="{{ $tpl->category_id }}">
                        <i class="bi bi-pencil"></i>
                      </button>
                      <form action="{{ route('settings.projects.doc-templates.destroy', $tpl) }}" method="POST" class="d-inline">
                        @csrf @method('DELETE')
                        <button type="submit" class="btn btn-sm btn-outline-danger"
                                onclick="return confirm('刪除樣板「{{ $tpl->name }}」？')">
                          <i class="bi bi-trash"></i>
                        </button>
                      </form>
                    </td>
                  </tr>
                  @empty
                  <tr><td colspan="4" class="text-center text-muted py-3">尚無樣板</td></tr>
                  @endforelse
                </tbody>
              </table>
            </div>
          </div>
        </div>
        <div class="col-lg-4">
          <div class="card shadow-sm">
            <div class="card-header bg-white"><h6 class="mb-0 fw-semibold"><i class="bi bi-plus-circle me-1"></i>新增樣板</h6></div>
            <div class="card-body">
              <form action="{{ route('settings.projects.doc-templates.store') }}" method="POST">
                @csrf
                <div class="mb-2"><label class="form-label small fw-semibold" for="name">名稱 <span class="text-danger">*</span></label>
                  <input type="text" name="name" class="form-control form-control-sm" required placeholder="例：會議記錄" id="name"></div>
                <div class="mb-2"><label class="form-label small fw-semibold" for="description">說明</label>
                  <input type="text" name="description" class="form-control form-control-sm" placeholder="選填說明文字" id="description"></div>
                <div class="mb-2">
                  <label class="form-label small fw-semibold" for="category_id">文件分類</label>
                  <select name="category_id" class="form-select form-select-sm" id="category_id">
                    <option value="">— 無 —</option>
                    @foreach($docCategories as $cat)
                    <option value="{{ $cat->id }}">{{ $cat->name }}</option>
                    @endforeach
                  </select>
                </div>
                <div class="mb-3"><label class="form-label small fw-semibold">樣板內容 <span class="text-danger">*</span></label>
                  <textarea name="content" id="new-tpl-content" class="form-control form-control-sm" rows="10"></textarea>
                </div>
                <button class="btn btn-primary btn-sm w-100">建立樣板</button>
              </form>
            </div>
          </div>
        </div>
      </div>
    </div>

    {{-- ═══ 開發工具 ════════════════════════════════════════════════ --}}
    <div class="tab-pane fade" id="tab-dev-tools">
      <div class="row g-4">
        <div class="col-lg-8">
          <div class="card shadow-sm">
            <div class="card-header bg-white"><h6 class="mb-0 fw-semibold">開發工具選項（{{ $devTools->count() }}）</h6></div>
            <div class="table-responsive">
              <table class="table table-hover align-middle mb-0">
                <thead class="table-light">
                  <tr><th>名稱</th><th>狀態</th><th style="width:120px">操作</th></tr>
                </thead>
                <tbody>
                  @foreach($devTools as $dt)
                  <tr>
                    <td><span class="fw-medium">{{ $dt->label }}</span></td>
                    <td>
                      @if($dt->is_active)
                        <span class="badge bg-success-subtle text-success border border-success-subtle small">啟用</span>
                      @else
                        <span class="badge bg-secondary-subtle text-muted border small">停用</span>
                      @endif
                    </td>
                    <td>
                      <button class="btn btn-sm btn-outline-secondary btn-edit-devtool"
                        data-id="{{ $dt->id }}"
                        data-label="{{ $dt->label }}"
                        data-active="{{ $dt->is_active ? 1 : 0 }}">
                        <i class="bi bi-pencil"></i>
                      </button>
                      <form action="{{ route('settings.projects.dev-tools.destroy', $dt) }}" method="POST" class="d-inline">
                        @csrf @method('DELETE')
                        <button type="submit" class="btn btn-sm btn-outline-danger"
                          onclick="return confirm('刪除「{{ $dt->label }}」？若有專案使用中將無法刪除。')">
                          <i class="bi bi-trash"></i>
                        </button>
                      </form>
                    </td>
                  </tr>
                  @endforeach
                </tbody>
              </table>
            </div>
          </div>
        </div>
        <div class="col-lg-4">
          <div class="card shadow-sm">
            <div class="card-header bg-white"><h6 class="mb-0 fw-semibold"><i class="bi bi-plus-circle me-1"></i>新增開發工具</h6></div>
            <div class="card-body">
              <form action="{{ route('settings.projects.dev-tools.store') }}" method="POST">
                @csrf
                <div class="mb-3">
                  <label class="form-label small fw-semibold" for="dt_label">名稱</label>
                  <input type="text" name="label" id="dt_label" class="form-control form-control-sm" placeholder="例：Vue、React、Django…" required>
                </div>
                <button class="btn btn-primary btn-sm w-100">建立</button>
              </form>
            </div>
          </div>
        </div>
      </div>
    </div>

    {{-- ═══ 開發類型 ════════════════════════════════════════════════ --}}
    <div class="tab-pane fade" id="tab-project-types">
      <div class="row g-4">
        <div class="col-lg-8">
          <div class="card shadow-sm">
            <div class="card-header bg-white"><h6 class="mb-0 fw-semibold">專案開發類型（{{ $projectTypes->count() }}）</h6></div>
            <div class="table-responsive">
              <table class="table table-hover align-middle mb-0">
                <thead class="table-light">
                  <tr><th>名稱</th><th>適用範圍</th><th>標籤色</th><th>狀態</th><th style="width:120px">操作</th></tr>
                </thead>
                <tbody>
                  @foreach($projectTypes as $pt)
                  <tr>
                    <td><span class="badge bg-{{ $pt->color }} fs-6 fw-semibold">{{ $pt->label }}</span></td>
                    <td>
                      @if($pt->scope === 'both')
                        <span class="badge bg-secondary-subtle text-secondary border small">兩者共用</span>
                      @elseif($pt->scope === 'product')
                        <span class="badge bg-warning-subtle text-warning border border-warning-subtle small">僅產品</span>
                      @else
                        <span class="badge bg-info-subtle text-info border border-info-subtle small">僅專案</span>
                      @endif
                    </td>
                    <td><span class="text-muted small">{{ $pt->color }}</span></td>
                    <td>
                      @if($pt->is_active)
                        <span class="badge bg-success-subtle text-success border border-success-subtle small">啟用</span>
                      @else
                        <span class="badge bg-secondary-subtle text-muted border small">停用</span>
                      @endif
                    </td>
                    <td>
                      <button class="btn btn-sm btn-outline-secondary btn-edit-projtype"
                        data-id="{{ $pt->id }}"
                        data-label="{{ $pt->label }}"
                        data-color="{{ $pt->color }}"
                        data-scope="{{ $pt->scope }}"
                        data-active="{{ $pt->is_active ? 1 : 0 }}">
                        <i class="bi bi-pencil"></i>
                      </button>
                      <form action="{{ route('settings.projects.project-types.destroy', $pt) }}" method="POST" class="d-inline">
                        @csrf @method('DELETE')
                        <button type="submit" class="btn btn-sm btn-outline-danger"
                          onclick="return confirm('刪除「{{ $pt->label }}」？若有專案使用中將無法刪除。')">
                          <i class="bi bi-trash"></i>
                        </button>
                      </form>
                    </td>
                  </tr>
                  @endforeach
                </tbody>
              </table>
            </div>
          </div>
        </div>
        <div class="col-lg-4">
          <div class="card shadow-sm">
            <div class="card-header bg-white"><h6 class="mb-0 fw-semibold"><i class="bi bi-plus-circle me-1"></i>新增開發類型</h6></div>
            <div class="card-body">
              <form action="{{ route('settings.projects.project-types.store') }}" method="POST">
                @csrf
                <div class="mb-3">
                  <label class="form-label small fw-semibold">名稱</label>
                  <input type="text" name="label" class="form-control form-control-sm" placeholder="例：產品、導入、規劃…" required>
                </div>
                <div class="mb-3">
                  <label class="form-label small fw-semibold">標籤顏色</label>
                  <select name="color" class="form-select form-select-sm" required>
                    <option value="primary">藍（primary）</option>
                    <option value="success">綠（success）</option>
                    <option value="warning">黃（warning）</option>
                    <option value="danger">紅（danger）</option>
                    <option value="info">青（info）</option>
                    <option value="secondary">灰（secondary）</option>
                    <option value="dark">黑（dark）</option>
                  </select>
                </div>
                <div class="mb-3">
                  <label class="form-label small fw-semibold">適用範圍</label>
                  <select name="scope" class="form-select form-select-sm" required>
                    <option value="both" selected>兩者共用（產品 + 專案）</option>
                    <option value="product">僅產品</option>
                    <option value="project">僅專案</option>
                  </select>
                </div>
                <button class="btn btn-primary btn-sm w-100">建立</button>
              </form>
            </div>
          </div>
        </div>
      </div>
    </div>

    {{-- 編輯開發類型 Modal --}}
    <div class="modal fade" id="editProjTypeModal" tabindex="-1">
      <div class="modal-dialog modal-sm">
        <div class="modal-content">
          <div class="modal-header"><h6 class="modal-title">編輯開發類型</h6><button type="button" class="btn-close" data-bs-dismiss="modal"></button></div>
          <form id="editProjTypeForm" method="POST">
            @csrf @method('PATCH')
            <div class="modal-body">
              <div class="mb-3">
                <label class="form-label small fw-semibold">名稱</label>
                <input type="text" name="label" id="edit_pt_label" class="form-control form-control-sm" required>
              </div>
              <div class="mb-3">
                <label class="form-label small fw-semibold">標籤顏色</label>
                <select name="color" id="edit_pt_color" class="form-select form-select-sm" required>
                  <option value="primary">藍（primary）</option>
                  <option value="success">綠（success）</option>
                  <option value="warning">黃（warning）</option>
                  <option value="danger">紅（danger）</option>
                  <option value="info">青（info）</option>
                  <option value="secondary">灰（secondary）</option>
                  <option value="dark">黑（dark）</option>
                </select>
              </div>
              <div class="mb-3">
                <label class="form-label small fw-semibold">適用範圍</label>
                <select name="scope" id="edit_pt_scope" class="form-select form-select-sm" required>
                  <option value="both">兩者共用（產品 + 專案）</option>
                  <option value="product">僅產品</option>
                  <option value="project">僅專案</option>
                </select>
              </div>
              <div class="form-check form-switch">
                <input class="form-check-input" type="checkbox" name="is_active" id="edit_pt_active" value="1">
                <label class="form-check-label small" for="edit_pt_active">啟用</label>
              </div>
            </div>
            <div class="modal-footer">
              <button type="button" class="btn btn-secondary btn-sm" data-bs-dismiss="modal">取消</button>
              <button type="submit" class="btn btn-primary btn-sm">儲存</button>
            </div>
          </form>
        </div>
      </div>
    </div>

    {{-- 編輯開發工具 Modal --}}
    <div class="modal fade" id="editDevToolModal" tabindex="-1">
      <div class="modal-dialog modal-sm">
        <div class="modal-content">
          <div class="modal-header"><h6 class="modal-title">編輯開發工具</h6><button type="button" class="btn-close" data-bs-dismiss="modal"></button></div>
          <form id="editDevToolForm" method="POST">
            @csrf @method('PATCH')
            <div class="modal-body">
              <div class="mb-3">
                <label for="edit_dt_label" class="form-label small fw-semibold">名稱</label>
                <input type="text" name="label" id="edit_dt_label" class="form-control form-control-sm" required>
              </div>
              <div class="form-check form-switch">
                <input class="form-check-input" type="checkbox" name="is_active" id="edit_dt_active" value="1">
                <label class="form-check-label small" for="edit_dt_active">啟用</label>
              </div>
            </div>
            <div class="modal-footer">
              <button type="button" class="btn btn-secondary btn-sm" data-bs-dismiss="modal">取消</button>
              <button type="submit" class="btn btn-primary btn-sm">儲存</button>
            </div>
          </form>
        </div>
      </div>
    </div>

    {{-- 通知設定 ════════════════════════════════════════════════ --}}
    <div class="tab-pane fade" id="tab-notifications">
      <div class="row g-4">
        <div class="col-lg-7">
          <div class="card shadow-sm">
            <div class="card-header bg-white"><h6 class="mb-0 fw-semibold"><i class="bi bi-bell me-1"></i>議題通知設定</h6></div>
            <div class="card-body">
              <form action="{{ route('settings.projects.notifications.save') }}" method="POST">
                @csrf

                <p class="text-muted small mb-3">設定系統在哪些事件發生時，自動寄送 Email 及推播通知給相關人員。</p>

                <h6 class="fw-semibold mb-2 text-secondary" style="font-size:.85rem;letter-spacing:.04em">指派通知</h6>
                <div class="form-check mb-2">
                  <input class="form-check-input" type="checkbox" name="notify_issue_assigned" value="1" id="nf_assigned"
                    {{ $notificationSetting->notify_issue_assigned ? 'checked' : '' }}>
                  <label class="form-check-label" for="nf_assigned">
                    <strong>新議題指派</strong>
                    <span class="text-muted small d-block">新建議題時，通知被指派的成員</span>
                  </label>
                </div>
                <div class="form-check mb-3">
                  <input class="form-check-input" type="checkbox" name="notify_issue_reassigned" value="1" id="nf_reassigned"
                    {{ $notificationSetting->notify_issue_reassigned ? 'checked' : '' }}>
                  <label class="form-check-label" for="nf_reassigned">
                    <strong>議題重新指派</strong>
                    <span class="text-muted small d-block">編輯議題更改指派對象時，通知新被指派的成員</span>
                  </label>
                </div>

                <hr class="my-3">
                <h6 class="fw-semibold mb-2 text-secondary" style="font-size:.85rem;letter-spacing:.04em">狀態變更通知</h6>
                <div class="form-check mb-2">
                  <input class="form-check-input" type="checkbox" name="notify_status_change" value="1" id="nf_status"
                    {{ $notificationSetting->notify_status_change ? 'checked' : '' }}
                    onchange="document.getElementById('statusSlugsBlock').style.display=this.checked?'':'none'">
                  <label class="form-check-label" for="nf_status">
                    <strong>狀態變更時通知指派人</strong>
                    <span class="text-muted small d-block">勾選後可指定哪些狀態變更要發送通知（不勾選則對所有狀態變更發送）</span>
                  </label>
                </div>

                <div id="statusSlugsBlock" class="ms-4 mb-3" style="{{ $notificationSetting->notify_status_change ? '' : 'display:none' }}">
                  <p class="small text-muted mb-2">勾選後才發送通知的目標狀態（空白 = 所有狀態皆通知）：</p>
                  @foreach($statuses as $status)
                  <div class="form-check form-check-inline">
                    <input class="form-check-input" type="checkbox" name="notify_status_slugs[]"
                      value="{{ $status->slug }}" id="ns_{{ $status->slug }}"
                      {{ in_array($status->slug, $notificationSetting->notify_status_slugs ?? []) ? 'checked' : '' }}>
                    <label class="form-check-label small" for="ns_{{ $status->slug }}">
                      <span class="badge bg-{{ $status->color }}">{{ $status->label }}</span>
                    </label>
                  </div>
                  @endforeach
                </div>

                <hr class="my-3">
                <h6 class="fw-semibold mb-2 text-secondary" style="font-size:.85rem;letter-spacing:.04em">留言通知</h6>
                <div class="form-check mb-3">
                  <input class="form-check-input" type="checkbox" name="notify_comment" value="1" id="nf_comment"
                    {{ $notificationSetting->notify_comment ? 'checked' : '' }}>
                  <label class="form-check-label" for="nf_comment">
                    <strong>新留言時通知指派人</strong>
                    <span class="text-muted small d-block">有人在議題留言時，通知被指派的成員（不通知留言者自己）</span>
                  </label>
                </div>

                <div class="d-flex gap-2 mt-3">
                  <button type="submit" class="btn btn-primary btn-sm"><i class="bi bi-save me-1"></i>儲存設定</button>
                </div>
              </form>
            </div>
          </div>
        </div>
        <div class="col-lg-5">
          <div class="card shadow-sm border-0 bg-light">
            <div class="card-body">
              <h6 class="fw-semibold mb-3"><i class="bi bi-info-circle me-1 text-primary"></i>通知說明</h6>
              <ul class="small text-muted mb-0 ps-3">
                <li class="mb-2">通知對象為<strong>被指派的成員</strong>，不包含操作者本人。</li>
                <li class="mb-2">系統同時發送 <strong>Email</strong> 及<strong>平台推播</strong>（需啟用瀏覽器通知）。</li>
                <li class="mb-2">狀態變更通知與留言通知，僅在議題<strong>有指派成員</strong>時才會觸發。</li>
                <li>Email 發送失敗不影響議題操作，錯誤會記錄至系統 Log。</li>
              </ul>
            </div>
          </div>
        </div>
      </div>
    </div>

  </div>{{-- /tab-content --}}
</div>

{{-- ── 文件分類編輯 Modal ── --}}
<div class="modal fade" id="editDocCatModal" tabindex="-1">
  <div class="modal-dialog modal-sm">
    <div class="modal-content">
      <form id="editDocCatForm" method="POST">
        @csrf @method('PATCH')
        <div class="modal-header"><h6 class="modal-title fw-semibold">編輯文件分類</h6><button type="button" class="btn-close" data-bs-dismiss="modal"></button></div>
        <div class="modal-body">
          <div class="mb-0"><label class="form-label small fw-semibold">名稱</label>
            <input type="text" name="name" id="edc_name" class="form-control" required></div>
        </div>
        <div class="modal-footer"><button type="button" class="btn btn-secondary" data-bs-dismiss="modal">取消</button><button type="submit" class="btn btn-primary">儲存</button></div>
      </form>
    </div>
  </div>
</div>

{{-- ── 文件樣板編輯 Modal ── --}}
<div class="modal fade" id="editDocTplModal" tabindex="-1">
  <div class="modal-dialog modal-lg">
    <div class="modal-content">
      <form id="editDocTplForm" method="POST">
        @csrf @method('PATCH')
        <div class="modal-header"><h6 class="modal-title fw-semibold">編輯文件樣板</h6><button type="button" class="btn-close" data-bs-dismiss="modal"></button></div>
        <div class="modal-body">
          <div class="row g-3">
            <div class="col-md-6">
              <label class="form-label small fw-semibold">名稱 <span class="text-danger">*</span></label>
              <input type="text" name="name" id="edt_name" class="form-control" required>
            </div>
            <div class="col-md-6">
              <label class="form-label small fw-semibold">文件分類</label>
              <select name="category_id" id="edt_category" class="form-select">
                <option value="">— 無 —</option>
                @foreach($docCategories as $cat)
                <option value="{{ $cat->id }}">{{ $cat->name }}</option>
                @endforeach
              </select>
            </div>
            <div class="col-12">
              <label class="form-label small fw-semibold">說明</label>
              <input type="text" name="description" id="edt_description" class="form-control">
            </div>
            <div class="col-12">
              <label class="form-label small fw-semibold">樣板內容 <span class="text-danger">*</span></label>
              <textarea name="content" id="edt_content" class="form-control" rows="12"></textarea>
            </div>
          </div>
        </div>
        <div class="modal-footer"><button type="button" class="btn btn-secondary" data-bs-dismiss="modal">取消</button><button type="submit" class="btn btn-primary">儲存</button></div>
      </form>
    </div>
  </div>
</div>

{{-- ═══ 角色編輯 Modal ══════════════════════════════════════════════ --}}
<div class="modal fade" id="editRoleModal" tabindex="-1">
  <div class="modal-dialog">
    <div class="modal-content">
      <form id="editRoleForm" method="POST">
        @csrf @method('PATCH')
        <div class="modal-header"><h6 class="modal-title fw-semibold">編輯角色</h6><button type="button" class="btn-close" data-bs-dismiss="modal"></button></div>
        <div class="modal-body">
          <div class="mb-2"><label class="form-label small fw-semibold">角色名稱</label><input type="text" name="label" id="er_label" class="form-control" required></div>
          <div class="mb-2">
            <label class="form-label small fw-semibold">Badge 顏色</label>
            <select name="badge_color" id="er_color" class="form-select">
              @foreach($colors as $v=>$n)<option value="{{ $v }}">{{ $n }}</option>@endforeach
            </select>
          </div>
          <div class="mb-0">
            <label class="form-label small fw-semibold">權限</label>
            @foreach($perms as $key=>$p)
            <div class="form-check">
              <input class="form-check-input" type="checkbox" name="{{ $key }}" value="1" id="er_{{ $key }}">
              <label class="form-check-label small" for="er_{{ $key }}"><i class="bi {{ $p['icon'] }} me-1 text-muted"></i>{{ $p['label'] }}</label>
            </div>
            @endforeach
          </div>
        </div>
        <div class="modal-footer"><button type="button" class="btn btn-secondary" data-bs-dismiss="modal">取消</button><button type="submit" class="btn btn-primary">儲存</button></div>
      </form>
    </div>
  </div>
</div>

{{-- ═══ Tracker 編輯 Modal ══════════════════════════════════════════ --}}
<div class="modal fade" id="editTrackerModal" tabindex="-1">
  <div class="modal-dialog modal-sm">
    <div class="modal-content">
      <form id="editTrackerForm" method="POST">
        @csrf @method('PATCH')
        <div class="modal-header"><h6 class="modal-title fw-semibold">編輯議題類型</h6><button type="button" class="btn-close" data-bs-dismiss="modal"></button></div>
        <div class="modal-body">
          <div class="mb-2"><label class="form-label small fw-semibold">名稱</label><input type="text" name="label" id="et_label" class="form-control form-control-sm" required></div>
          <div class="mb-2">
            <label class="form-label small fw-semibold">顏色</label>
            <select name="color" id="et_color" class="form-select form-select-sm">
              @foreach($colors as $v=>$n)<option value="{{ $v }}">{{ $n }}</option>@endforeach
            </select>
          </div>
          <div class="form-check">
            <input class="form-check-input" type="checkbox" name="is_active" value="1" id="et_active">
            <label class="form-check-label small" for="et_active">啟用</label>
          </div>
        </div>
        <div class="modal-footer"><button type="button" class="btn btn-secondary btn-sm" data-bs-dismiss="modal">取消</button><button type="submit" class="btn btn-primary btn-sm">儲存</button></div>
      </form>
    </div>
  </div>
</div>

{{-- ═══ Status 編輯 Modal ═══════════════════════════════════════════ --}}
<div class="modal fade" id="editStatusModal" tabindex="-1">
  <div class="modal-dialog">
    <div class="modal-content">
      <form id="editStatusForm" method="POST">
        @csrf @method('PATCH')
        <div class="modal-header"><h6 class="modal-title fw-semibold">編輯議題狀態</h6><button type="button" class="btn-close" data-bs-dismiss="modal"></button></div>
        <div class="modal-body">
          <div class="mb-2"><label class="form-label small fw-semibold">名稱</label><input type="text" name="label" id="es_label" class="form-control form-control-sm" required></div>
          <div class="mb-2">
            <label class="form-label small fw-semibold">顏色</label>
            <select name="color" id="es_color" class="form-select form-select-sm">
              @foreach($colors as $v=>$n)<option value="{{ $v }}">{{ $n }}</option>@endforeach
            </select>
          </div>
          <div class="form-check mb-1"><input class="form-check-input" type="checkbox" name="is_closed" value="1" id="es_closed"><label class="form-check-label small" for="es_closed">屬於「已關閉」</label></div>
          <div class="form-check mb-1"><input class="form-check-input" type="checkbox" name="is_default" value="1" id="es_default"><label class="form-check-label small" for="es_default">設為預設狀態</label></div>
          <div class="form-check mb-3"><input class="form-check-input" type="checkbox" name="is_active" value="1" id="es_active"><label class="form-check-label small" for="es_active">啟用</label></div>
          <div>
            <label class="form-label small fw-semibold">可使用角色 <span class="text-muted fw-normal">（不勾選 = 所有人）</span></label>
            <div class="d-flex flex-wrap gap-3">
              @foreach($roles as $r)
              <div class="form-check form-check-sm">
                <input class="form-check-input es-role-check" type="checkbox" name="allowed_roles[]"
                       value="{{ $r->slug }}" id="es_role_{{ $r->slug }}">
                <label class="form-check-label small" for="es_role_{{ $r->slug }}">{{ $r->label }}</label>
              </div>
              @endforeach
            </div>
          </div>
        </div>
        <div class="modal-footer"><button type="button" class="btn btn-secondary btn-sm" data-bs-dismiss="modal">取消</button><button type="submit" class="btn btn-primary btn-sm">儲存</button></div>
      </form>
    </div>
  </div>
</div>

{{-- ═══ Priority 編輯 Modal ════════════════════════════════════════ --}}
<div class="modal fade" id="editPriorityModal" tabindex="-1">
  <div class="modal-dialog modal-sm">
    <div class="modal-content">
      <form id="editPriorityForm" method="POST">
        @csrf @method('PATCH')
        <div class="modal-header"><h6 class="modal-title fw-semibold">編輯優先度</h6><button type="button" class="btn-close" data-bs-dismiss="modal"></button></div>
        <div class="modal-body">
          <div class="mb-2"><label class="form-label small fw-semibold">名稱</label><input type="text" name="label" id="ep_label" class="form-control form-control-sm" required></div>
          <div class="mb-2">
            <label class="form-label small fw-semibold">顏色</label>
            <select name="color" id="ep_color" class="form-select form-select-sm">
              @foreach($colors as $v=>$n)<option value="{{ $v }}">{{ $n }}</option>@endforeach
            </select>
          </div>
          <div class="form-check mb-1"><input class="form-check-input" type="checkbox" name="is_default" value="1" id="ep_default"><label class="form-check-label small" for="ep_default">設為預設</label></div>
          <div class="form-check"><input class="form-check-input" type="checkbox" name="is_active" value="1" id="ep_active"><label class="form-check-label small" for="ep_active">啟用</label></div>
        </div>
        <div class="modal-footer"><button type="button" class="btn btn-secondary btn-sm" data-bs-dismiss="modal">取消</button><button type="submit" class="btn btn-primary btn-sm">儲存</button></div>
      </form>
    </div>
  </div>
</div>

{{-- ═══ Activity 編輯 Modal ════════════════════════════════════════ --}}
<div class="modal fade" id="editActivityModal" tabindex="-1">
  <div class="modal-dialog modal-sm">
    <div class="modal-content">
      <form id="editActivityForm" method="POST">
        @csrf @method('PATCH')
        <div class="modal-header"><h6 class="modal-title fw-semibold">編輯活動類型</h6><button type="button" class="btn-close" data-bs-dismiss="modal"></button></div>
        <div class="modal-body">
          <div class="mb-2"><label class="form-label small fw-semibold">名稱</label><input type="text" name="label" id="ea_label" class="form-control form-control-sm" required></div>
          <div class="form-check mb-1"><input class="form-check-input" type="checkbox" name="is_default" value="1" id="ea_default"><label class="form-check-label small" for="ea_default">設為預設</label></div>
          <div class="form-check"><input class="form-check-input" type="checkbox" name="is_active" value="1" id="ea_active"><label class="form-check-label small" for="ea_active">啟用</label></div>
        </div>
        <div class="modal-footer"><button type="button" class="btn btn-secondary btn-sm" data-bs-dismiss="modal">取消</button><button type="submit" class="btn btn-primary btn-sm">儲存</button></div>
      </form>
    </div>
  </div>
</div>

{{-- ═══ 使用者群組 Modal ════════════════════════════════════════════ --}}

{{-- 新增群組 Modal --}}
<div class="modal fade" id="addGroupModal" tabindex="-1">
  <div class="modal-dialog modal-sm">
    <div class="modal-content">
      <form action="{{ route('settings.projects.user-groups.store') }}" method="POST">
        @csrf
        <div class="modal-header"><h6 class="modal-title">新增使用者群組</h6><button type="button" class="btn-close" data-bs-dismiss="modal"></button></div>
        <div class="modal-body">
          <div class="mb-2"><label class="form-label small fw-semibold" for="name">群組名稱 <span class="text-danger">*</span></label><input type="text" name="name" class="form-control form-control-sm" required maxlength="100" placeholder="例：PM、測試人員" id="name"></div>
          <div class="mb-0"><label class="form-label small fw-semibold" for="description">說明</label><input type="text" name="description" class="form-control form-control-sm" maxlength="255" id="description"></div>
        </div>
        <div class="modal-footer"><button type="button" class="btn btn-secondary btn-sm" data-bs-dismiss="modal">取消</button><button type="submit" class="btn btn-primary btn-sm">建立</button></div>
      </form>
    </div>
  </div>
</div>


@endsection

@push('scripts')
<script src="/vendor/ckeditor5/ckeditor.js"></script>
<script>
// Role edit
document.querySelectorAll('.btn-edit-role').forEach(btn => {
  btn.addEventListener('click', function() {
    const f = document.getElementById('editRoleForm');
    f.action = '{{ route("settings.projects.roles.update", "__ID__") }}'.replace('__ID__', this.dataset.id);
    document.getElementById('er_label').value = this.dataset.label;
    document.getElementById('er_color').value = this.dataset.color;
    document.getElementById('er_perm_manage').checked          = this.dataset.permManage   === '1';
    document.getElementById('er_perm_view_docs').checked       = this.dataset.permViewDocs === '1';
    document.getElementById('er_perm_edit_docs').checked       = this.dataset.permDocs     === '1';
    document.getElementById('er_perm_manage_issues').checked   = this.dataset.permIssues      === '1';
    document.getElementById('er_perm_close_issues').checked    = this.dataset.permCloseIssues === '1';
    document.getElementById('er_perm_upload_files').checked    = this.dataset.permFiles       === '1';
    document.getElementById('er_perm_view_roadmap').checked    = this.dataset.permRoadmap       === '1';
    document.getElementById('er_perm_manage_roadmap').checked  = this.dataset.permManageRoadmap === '1';
    document.getElementById('er_perm_view_gitlab').checked     = this.dataset.permGitlab        === '1';
    document.getElementById('er_perm_view_gantt').checked      = this.dataset.permGantt    === '1';
    document.getElementById('er_perm_view_calendar').checked   = this.dataset.permCalendar === '1';
    document.getElementById('er_perm_log_time').checked        = this.dataset.permLogTime  === '1';
    document.getElementById('er_perm_view_members').checked    = this.dataset.permMembers  === '1';
    new bootstrap.Modal(document.getElementById('editRoleModal')).show();
  });
});

// Tracker edit
document.querySelectorAll('.btn-edit-tracker').forEach(btn => {
  btn.addEventListener('click', function() {
    const f = document.getElementById('editTrackerForm');
    f.action = '{{ route("settings.projects.trackers.update", "__ID__") }}'.replace('__ID__', this.dataset.id);
    document.getElementById('et_label').value = this.dataset.label;
    document.getElementById('et_color').value = this.dataset.color;
    document.getElementById('et_active').checked = this.dataset.active === '1';
    new bootstrap.Modal(document.getElementById('editTrackerModal')).show();
  });
});

// Status edit
document.querySelectorAll('.btn-edit-status').forEach(btn => {
  btn.addEventListener('click', function() {
    const f = document.getElementById('editStatusForm');
    f.action = '{{ route("settings.projects.statuses.update", "__ID__") }}'.replace('__ID__', this.dataset.id);
    document.getElementById('es_label').value = this.dataset.label;
    document.getElementById('es_color').value = this.dataset.color;
    document.getElementById('es_closed').checked  = this.dataset.closed  === '1';
    document.getElementById('es_default').checked = this.dataset.default === '1';
    document.getElementById('es_active').checked  = this.dataset.active  === '1';
    const allowed = JSON.parse(this.dataset.allowedRoles || '[]');
    document.querySelectorAll('.es-role-check').forEach(cb => {
      cb.checked = allowed.includes(cb.value);
    });
    new bootstrap.Modal(document.getElementById('editStatusModal')).show();
  });
});

// Priority edit
document.querySelectorAll('.btn-edit-priority').forEach(btn => {
  btn.addEventListener('click', function() {
    const f = document.getElementById('editPriorityForm');
    f.action = '{{ route("settings.projects.priorities.update", "__ID__") }}'.replace('__ID__', this.dataset.id);
    document.getElementById('ep_label').value = this.dataset.label;
    document.getElementById('ep_color').value = this.dataset.color;
    document.getElementById('ep_default').checked = this.dataset.default === '1';
    document.getElementById('ep_active').checked  = this.dataset.active  === '1';
    new bootstrap.Modal(document.getElementById('editPriorityModal')).show();
  });
});

// Activity edit
document.querySelectorAll('.btn-edit-activity').forEach(btn => {
  btn.addEventListener('click', function() {
    const f = document.getElementById('editActivityForm');
    f.action = '{{ route("settings.projects.activities.update", "__ID__") }}'.replace('__ID__', this.dataset.id);
    document.getElementById('ea_label').value = this.dataset.label;
    document.getElementById('ea_default').checked = this.dataset.default === '1';
    document.getElementById('ea_active').checked  = this.dataset.active  === '1';
    new bootstrap.Modal(document.getElementById('editActivityModal')).show();
  });
});

// Doc category edit
document.querySelectorAll('.btn-edit-doc-cat').forEach(btn => {
  btn.addEventListener('click', function() {
    const f = document.getElementById('editDocCatForm');
    f.action = '{{ route("settings.projects.doc-categories.update", "__ID__") }}'.replace('__ID__', this.dataset.id);
    document.getElementById('edc_name').value = this.dataset.name;
    new bootstrap.Modal(document.getElementById('editDocCatModal')).show();
  });
});

// Doc template data (keyed by id → content)
const tplData = @json($docTemplates->keyBy('id')->map(fn($t) => $t->content));

// ── CKEditor: 新增樣板表單（Tab 顯示後才初始化，避免 hidden 容器寬度為 0）
let newTplEditor = null;
document.querySelector('a[href="#tab-doc-templates"]').addEventListener('shown.bs.tab', function () {
  if (newTplEditor) return;
  ClassicEditor.create(document.getElementById('new-tpl-content'), {
    toolbar: ['heading','|','bold','italic','underline','|','bulletedList','numberedList','|','blockQuote','link','|','undo','redo']
  }).then(editor => { newTplEditor = editor; }).catch(console.error);
});

// ── CKEditor: 編輯樣板 Modal
let tplEditEditor  = null;
let pendingTplContent = null;

document.getElementById('editDocTplModal').addEventListener('shown.bs.modal', function () {
  if (tplEditEditor) {
    if (pendingTplContent !== null) tplEditEditor.setData(pendingTplContent);
    pendingTplContent = null;
    return;
  }
  ClassicEditor.create(document.getElementById('edt_content'), {
    toolbar: ['heading','|','bold','italic','underline','|','bulletedList','numberedList','|','blockQuote','link','|','undo','redo']
  }).then(editor => {
    tplEditEditor = editor;
    if (pendingTplContent !== null) { editor.setData(pendingTplContent); pendingTplContent = null; }
  }).catch(console.error);
});

// Doc template edit
document.querySelectorAll('.btn-edit-doc-tpl').forEach(btn => {
  btn.addEventListener('click', function() {
    const f = document.getElementById('editDocTplForm');
    f.action = '{{ route("settings.projects.doc-templates.update", "__ID__") }}'.replace('__ID__', this.dataset.id);
    document.getElementById('edt_name').value        = this.dataset.name;
    document.getElementById('edt_description').value = this.dataset.description || '';
    document.getElementById('edt_category').value    = this.dataset.category || '';
    pendingTplContent = tplData[this.dataset.id] ?? '';
    new bootstrap.Modal(document.getElementById('editDocTplModal')).show();
  });
});

// ── 群組詳細管理（inline panel，AJAX）────────────────────────────────────────
const roleLabels = @json($roles->pluck('label', 'id'));
@php
$_gdpBadge = ['產品'=>'bg-info','開發'=>'bg-primary','維護'=>'bg-success','保固'=>'bg-warning text-dark','結束'=>'bg-secondary'];
$_groupDataForJs = $userGroups->map(fn($g) => [
    'id'       => $g->id,
    'name'     => $g->name,
    'members'  => $g->users->map(fn($u) => ['id'=>$u->id,'name'=>$u->name,'dept'=>$u->department])->values()->all(),
    'projects' => $g->projects->map(fn($p) => ['id'=>$p->id,'name'=>$p->name,'role_id'=>$p->pivot->role_id])->values()->all(),
])->values()->all();
@endphp
const GDP_BADGE  = @json($_gdpBadge);
const GROUP_DATA = @json($_groupDataForJs);
let currentGroupId = null;

const GDP_URLS = {
  addMember:     '{{ route("settings.projects.user-groups.members.add",     "__GID__") }}',
  removeMember:  '{{ route("settings.projects.user-groups.members.remove",  ["userGroup"=>"__GID__","user"=>"__UID__"]) }}',
  addProject:    '{{ route("settings.projects.user-groups.projects.add",    "__GID__") }}',
  removeProject: '{{ route("settings.projects.user-groups.projects.remove", ["userGroup"=>"__GID__","project"=>"__PID__"]) }}',
};
const GDP_CSRF = document.querySelector('meta[name="csrf-token"]').content;

function gdpEsc(s) {
  return String(s??'').replace(/&/g,'&amp;').replace(/</g,'&lt;').replace(/>/g,'&gt;').replace(/"/g,'&quot;');
}
function gdpGroup() { return GROUP_DATA.find(g => String(g.id) === String(currentGroupId)); }

async function gdpFetch(url, method, body) {
  const opts = { method, headers: {'X-CSRF-TOKEN': GDP_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;
}

function gdpRenderMembers() {
  const members = gdpGroup()?.members ?? [];
  const list = document.getElementById('gdpMemberList');
  document.getElementById('gdp-member-count').textContent = members.length;
  list.innerHTML = '';
  if (!members.length) {
    list.innerHTML = '<li class="list-group-item text-muted small py-3 text-center gdp-empty-members">尚無成員</li>';
    return;
  }
  members.forEach(m => {
    const li = document.createElement('li');
    li.className = 'list-group-item d-flex justify-content-between align-items-center py-2 px-3';
    li.dataset.userId = m.id;
    li.innerHTML =
      `<span class="small">${gdpEsc(m.name)}${m.dept?`<span class="text-muted ms-1 small">（${gdpEsc(m.dept)}）</span>`:''}</span>` +
      `<button type="button" class="btn btn-link text-danger p-0 gdp-rm-member" data-id="${m.id}" data-name="${gdpEsc(m.name)}" style="font-size:.85rem" title="移除"><i class="bi bi-x-circle"></i></button>`;
    list.appendChild(li);
  });
}

function gdpRenderProjects() {
  const projects = gdpGroup()?.projects ?? [];
  const addedIds = new Set(projects.map(p => String(p.id)));
  document.getElementById('gdp-project-count').textContent = projects.length;

  document.querySelectorAll('.gdp-proj-item').forEach(item => {
    const pid = item.querySelector('.gdp-proj-cb').value;
    const added = addedIds.has(pid);
    item.style.display = added ? 'none' : '';
    if (added) item.dataset.added = '1'; else delete item.dataset.added;
    if (added) item.querySelector('.gdp-proj-cb').checked = false;
  });
  gdpUpdateCount();

  const list = document.getElementById('gdpProjectList');
  list.innerHTML = '';
  if (!projects.length) {
    list.innerHTML = '<li class="list-group-item text-muted small py-3 text-center gdp-empty-projects">尚未加入任何專案</li>';
    return;
  }
  projects.forEach(p => {
    const roleName = gdpEsc(roleLabels[p.role_id] || '—');
    const badgeCls = GDP_BADGE[p.project_type] ?? 'bg-secondary';
    const li = document.createElement('li');
    li.className = 'list-group-item d-flex justify-content-between align-items-center py-2 px-3';
    li.dataset.projectId = p.id;
    li.innerHTML =
      `<span class="small">${gdpEsc(p.name)}<span class="badge ${badgeCls} ms-2" style="font-size:.65rem">${gdpEsc(p.project_type??'')}</span><span class="badge bg-light text-dark border ms-1" style="font-size:.65rem">${roleName}</span></span>` +
      `<button type="button" class="btn btn-link text-danger p-0 gdp-rm-project" data-id="${p.id}" data-name="${gdpEsc(p.name)}" style="font-size:.85rem" title="移除關聯"><i class="bi bi-x-circle"></i></button>`;
    list.appendChild(li);
  });
}

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

// "管理" 按鈕
document.querySelectorAll('.btn-manage-group').forEach(btn => {
  btn.addEventListener('click', function() {
    currentGroupId = this.dataset.id;
    document.getElementById('gdp-name').textContent = this.dataset.name;

    // Reset add forms
    document.getElementById('gdpMemberSelect').value = '';
    document.getElementById('gdpRoleSelect').value = '';
    document.getElementById('gdpProjectSearch').value = '';
    document.querySelectorAll('.gdp-proj-cb').forEach(cb => cb.checked = false);
    document.getElementById('gdpAddMemberPanel').classList.add('d-none');
    document.getElementById('gdpAddProjectPanel').classList.add('d-none');

    gdpRenderMembers();
    gdpRenderProjects();

    const panel = document.getElementById('groupDetailPanel');
    panel.classList.remove('d-none');
    panel.scrollIntoView({ behavior: 'smooth', block: 'nearest' });

    // 高亮選中的群組列
    document.querySelectorAll('.btn-manage-group').forEach(b => b.classList.remove('active'));
    this.classList.add('active');
  });
});

document.getElementById('btnCloseGdp').addEventListener('click', () => {
  document.getElementById('groupDetailPanel').classList.add('d-none');
  document.querySelectorAll('.btn-manage-group').forEach(b => b.classList.remove('active'));
  currentGroupId = null;
});

// toggle add panels
document.getElementById('btnGdpToggleMember').addEventListener('click', () => document.getElementById('gdpAddMemberPanel').classList.toggle('d-none'));
document.getElementById('btnGdpCancelMember').addEventListener('click', () => document.getElementById('gdpAddMemberPanel').classList.add('d-none'));
document.getElementById('btnGdpToggleProject').addEventListener('click', () => document.getElementById('gdpAddProjectPanel').classList.toggle('d-none'));
document.getElementById('btnGdpCancelProject').addEventListener('click', () => document.getElementById('gdpAddProjectPanel').classList.add('d-none'));

// 加入成員
document.getElementById('btnGdpAddMember').addEventListener('click', async function() {
  const sel = document.getElementById('gdpMemberSelect');
  if (!sel.value) { sel.focus(); return; }
  this.disabled = true;
  try {
    const url  = GDP_URLS.addMember.replace('__GID__', currentGroupId);
    const data = await gdpFetch(url, 'POST', { user_id: sel.value });
    const g = gdpGroup();
    if (g && data.member && !g.members.find(m => String(m.id) === String(data.member.id))) g.members.push(data.member);
    gdpRenderMembers();
    sel.value = '';
    document.getElementById('gdpAddMemberPanel').classList.add('d-none');
  } catch(err) { alert('操作失敗：' + err.message); }
  finally { this.disabled = false; }
});

// 移除成員
document.getElementById('gdpMemberList').addEventListener('click', async function(e) {
  const btn = e.target.closest('.gdp-rm-member');
  if (!btn) return;
  if (!confirm(`從群組移除「${btn.dataset.name}」？`)) return;
  btn.disabled = true;
  try {
    const url = GDP_URLS.removeMember.replace('__GID__', currentGroupId).replace('__UID__', btn.dataset.id);
    await gdpFetch(url, 'DELETE');
    const g = gdpGroup();
    if (g) g.members = g.members.filter(m => String(m.id) !== String(btn.dataset.id));
    gdpRenderMembers();
  } catch(err) { alert('操作失敗：' + err.message); btn.disabled = false; }
});

// 搜尋專案
document.getElementById('gdpProjectSearch').addEventListener('input', function() {
  const q = this.value.toLowerCase();
  document.querySelectorAll('.gdp-proj-item').forEach(item => {
    if (item.dataset.added) return;
    item.style.display = (!q || item.dataset.name.includes(q)) ? '' : 'none';
  });
});
document.getElementById('gdpProjectCheckList').addEventListener('change', gdpUpdateCount);
document.getElementById('gdpSelAll').addEventListener('click', () => {
  document.querySelectorAll('.gdp-proj-item:not([data-added]) .gdp-proj-cb').forEach(cb => cb.checked = true);
  gdpUpdateCount();
});
document.getElementById('gdpSelNone').addEventListener('click', () => {
  document.querySelectorAll('.gdp-proj-cb').forEach(cb => cb.checked = false);
  gdpUpdateCount();
});

// 加入專案
document.getElementById('btnGdpAddProject').addEventListener('click', async function() {
  const checked = document.querySelectorAll('.gdp-proj-cb:checked');
  if (!checked.length) { alert('請至少勾選一個專案。'); return; }
  const roleId = document.getElementById('gdpRoleSelect').value;
  if (!roleId) { alert('請選擇角色。'); return; }
  const params = new URLSearchParams();
  params.append('role_id', roleId);
  checked.forEach(cb => params.append('project_ids[]', cb.value));
  this.disabled = true;
  try {
    const url  = GDP_URLS.addProject.replace('__GID__', currentGroupId);
    const data = await gdpFetch(url, 'POST', params);
    const g = gdpGroup();
    if (g && data.projects) data.projects.forEach(p => { if (!g.projects.find(gp => String(gp.id)===String(p.id))) g.projects.push(p); });
    gdpRenderProjects();
    document.getElementById('gdpRoleSelect').value = '';
    document.getElementById('gdpProjectSearch').value = '';
    document.getElementById('gdpAddProjectPanel').classList.add('d-none');
  } catch(err) { alert('操作失敗：' + err.message); }
  finally { this.disabled = false; }
});

// 移除專案
document.getElementById('gdpProjectList').addEventListener('click', async function(e) {
  const btn = e.target.closest('.gdp-rm-project');
  if (!btn) return;
  if (!confirm(`移除群組與專案「${btn.dataset.name}」的關聯？`)) return;
  btn.disabled = true;
  try {
    const url = GDP_URLS.removeProject.replace('__GID__', currentGroupId).replace('__PID__', btn.dataset.id);
    await gdpFetch(url, 'DELETE');
    const g = gdpGroup();
    if (g) g.projects = g.projects.filter(p => String(p.id) !== String(btn.dataset.id));
    gdpRenderProjects();
  } catch(err) { alert('操作失敗：' + err.message); btn.disabled = false; }
});

// Keep active tab across page reloads (form submits)
const STORAGE_KEY = 'settings_projects_tab';
document.querySelectorAll('#settingTabs [data-bs-toggle="tab"]').forEach(el => {
  el.addEventListener('shown.bs.tab', function () {
    sessionStorage.setItem(STORAGE_KEY, this.getAttribute('href'));
  });
});
const savedTab = sessionStorage.getItem(STORAGE_KEY);
const target   = window.location.hash || savedTab;
if (target) {
  const el = document.querySelector(`#settingTabs [href="${target}"]`);
  if (el) bootstrap.Tab.getOrCreateInstance(el).show();
}

// Dev Tool edit
document.querySelectorAll('.btn-edit-devtool').forEach(btn => {
  btn.addEventListener('click', function() {
    const f = document.getElementById('editDevToolForm');
    f.action = '{{ route("settings.projects.dev-tools.update", "__ID__") }}'.replace('__ID__', this.dataset.id);
    document.getElementById('edit_dt_label').value = this.dataset.label;
    document.getElementById('edit_dt_active').checked = this.dataset.active === '1';
    new bootstrap.Modal(document.getElementById('editDevToolModal')).show();
  });
});

document.querySelectorAll('.btn-edit-projtype').forEach(btn => {
  btn.addEventListener('click', function() {
    const f = document.getElementById('editProjTypeForm');
    f.action = '{{ route("settings.projects.project-types.update", "__ID__") }}'.replace('__ID__', this.dataset.id);
    document.getElementById('edit_pt_label').value = this.dataset.label;
    document.getElementById('edit_pt_color').value = this.dataset.color;
    document.getElementById('edit_pt_scope').value = this.dataset.scope;
    document.getElementById('edit_pt_active').checked = this.dataset.active === '1';
    new bootstrap.Modal(document.getElementById('editProjTypeModal')).show();
  });
});

</script>
@endpush