@extends('layouts.app')
@section('title', '專案權限申請')

@push('styles')
<style>
/* ── Type cards ── */
.type-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 14px;
  margin-bottom: 28px;
}
.type-card {
  position: relative;
  border: 2px solid #e5e7eb;
  appearance: none;
  font-family: inherit;
  font-size: inherit;
  border-radius: 16px;
  padding: 22px 18px 18px;
  cursor: pointer;
  background: #fff;
  transition: border-color .14s, box-shadow .14s, transform .1s;
  text-align: center;
  user-select: none;
}
.type-card:hover {
  border-color: #93c5fd;
  box-shadow: 0 4px 16px rgba(59,130,246,.12);
  transform: translateY(-2px);
}
.type-card.selected {
  border-color: #2563eb;
  box-shadow: 0 0 0 3px rgba(37,99,235,.15);
}
.type-card .tc-icon {
  width: 52px; height: 52px;
  border-radius: 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1.35rem;
  margin-bottom: 12px;
}
.type-card .tc-title { font-size: .95rem; font-weight: 700; color: #111827; margin-bottom: 4px; }
.type-card .tc-desc  { font-size: .75rem; color: #6b7280; line-height: 1.4; }
.type-card .tc-check {
  position: absolute; top: 10px; right: 10px;
  width: 20px; height: 20px;
  border-radius: 50%;
  background: #2563eb;
  color: #fff;
  font-size: .7rem;
  display: none;
  align-items: center;
  justify-content: center;
}
.type-card.selected .tc-check { display: flex; }
.type-card.selected .tc-title { color: #1d4ed8; }

/* ── Form section ── */
.form-panel { display: none; }
.form-panel.active { display: block; }

/* ── Portal project autocomplete ── */
.pp-wrap { position: relative; }
.pp-dropdown {
  position: absolute;
  top: calc(100% + 4px); left: 0; right: 0;
  background: #fff;
  border: 1px solid #d1d5db;
  border-radius: 10px;
  box-shadow: 0 8px 24px rgba(0,0,0,.10);
  max-height: 240px;
  overflow-y: auto;
  z-index: 9999;
  display: none;
}
.pp-dropdown.open { display: block; }
.pp-item {
  padding: 9px 14px;
  cursor: pointer;
  font-size: .84rem;
  border-bottom: 1px solid #f3f4f6;
  display: flex;
  align-items: center;
  gap: 8px;
}
.pp-item:last-child { border-bottom: none; }
.pp-item:hover, .pp-item.focused { background: #eff6ff; }
.pp-item-name { font-weight: 600; color: #1e293b; }
.pp-item-meta { font-size: .72rem; color: #94a3b8; margin-left: auto; white-space: nowrap; }
.pp-selected {
  display: flex; align-items: center; gap: 8px;
  background: #f0fdf4; border: 1px solid #bbf7d0;
  border-radius: 8px; padding: 8px 12px;
  font-size: .83rem; margin-top: 6px; color: #166534;
}
.pp-selected .pp-clear {
  margin-left: auto; cursor: pointer; color: #94a3b8;
  font-size: .75rem; border: none; background: none; padding: 0;
}
.pp-selected .pp-clear:hover { color: #ef4444; }
.pp-no-result { padding: 12px 14px; font-size: .82rem; color: #94a3b8; text-align: center; }

/* ── 加入專案兩欄 ── */
.atp-cols {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 28px;
}
.atp-col-head {
  font-size: .8rem;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: #6b7280;
  border-bottom: 1px solid #e5e7eb;
  padding-bottom: 10px;
  margin-bottom: 18px;
}
@media (max-width: 640px) {
  .atp-cols { grid-template-columns: 1fr; gap: 20px; }
}

/* ── 左側導覽 ── */
.gr-layout {
  display: grid;
  grid-template-columns: 180px 1fr;
  gap: 24px;
  align-items: start;
}
.gr-sidenav {
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 14px;
  overflow: hidden;
  position: sticky;
  top: 80px;
}
.gr-sidenav-title {
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: #94a3b8;
  padding: 14px 16px 8px;
}
.gr-nav-link {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 10px 16px;
  font-size: .84rem;
  font-weight: 600;
  color: #374151;
  text-decoration: none;
  border-left: 3px solid transparent;
  transition: background .1s, color .1s;
}
.gr-nav-link:hover { background: #f3f4f6; color: #1d4ed8; }
.gr-nav-link.active {
  background: #eff6ff;
  color: #1d4ed8;
  border-left-color: #2563eb;
}
.gr-nav-link i { font-size: 1rem; flex-shrink: 0; }
@media (max-width: 700px) {
  .gr-layout { grid-template-columns: 1fr; }
  .gr-sidenav { position: static; }
}

/* ── PM toggle box ── */
.pm-toggle-box {
  display: flex; align-items: flex-start; gap: 14px;
  background: #f0f9ff; border: 1.5px solid #bae6fd;
  border-radius: 12px; padding: 16px 18px;
  cursor: pointer; user-select: none;
  transition: border-color .12s, background .12s;
}
.pm-toggle-box:has(input:checked) { background: #e0f2fe; border-color: #38bdf8; }
.pm-toggle-box input[type="checkbox"] {
  width: 18px; height: 18px; margin-top: 2px;
  flex-shrink: 0; accent-color: #0284c7; cursor: pointer;
}
.pm-toggle-title { font-size: .9rem; font-weight: 700; color: #0c4a6e; margin-bottom: 3px; }
.pm-toggle-desc  { font-size: .78rem; color: #0369a1; line-height: 1.4; }

/* ── 暗黑模式 ── */
[data-bs-theme="dark"] .type-card {
  background: #1c1f26 !important;
  border-color: #2e3340 !important;
  color: #dee2e6 !important;
}
[data-bs-theme="dark"] .type-card:hover {
  border-color: #3b82f6 !important;
  box-shadow: 0 4px 16px rgba(59,130,246,.2) !important;
}
[data-bs-theme="dark"] .type-card.selected {
  border-color: #3b82f6 !important;
  box-shadow: 0 0 0 3px rgba(59,130,246,.2) !important;
  background: #1a2338 !important;
}
[data-bs-theme="dark"] .type-card .tc-title { color: #dee2e6 !important; }
[data-bs-theme="dark"] .type-card .tc-desc  { color: #9ca3af !important; }
[data-bs-theme="dark"] .type-card.selected .tc-title { color: #93c5fd !important; }

[data-bs-theme="dark"] .gr-sidenav {
  background: #1c1f26 !important;
  border-color: #2e3340 !important;
}
[data-bs-theme="dark"] .gr-sidenav-title { color: #6b7280 !important; }
[data-bs-theme="dark"] .gr-nav-link { color: #dee2e6 !important; }
[data-bs-theme="dark"] .gr-nav-link:hover { background: #252830 !important; color: #93c5fd !important; }
[data-bs-theme="dark"] .gr-nav-link.active { background: #1a2338 !important; color: #93c5fd !important; border-left-color: #3b82f6 !important; }

[data-bs-theme="dark"] .atp-col-head { color: #9ca3af !important; border-bottom-color: #2e3340 !important; }

[data-bs-theme="dark"] .pp-dropdown {
  background: #1c1f26 !important;
  border-color: #2e3340 !important;
  box-shadow: 0 8px 24px rgba(0,0,0,.4) !important;
}
[data-bs-theme="dark"] .pp-item { border-bottom-color: #252830 !important; }
[data-bs-theme="dark"] .pp-item:hover,
[data-bs-theme="dark"] .pp-item.focused { background: #252830 !important; }
[data-bs-theme="dark"] .pp-item-name { color: #dee2e6 !important; }
[data-bs-theme="dark"] .pp-item-meta { color: #6b7280 !important; }
[data-bs-theme="dark"] .pp-no-result { color: #6b7280 !important; }
[data-bs-theme="dark"] .pp-selected {
  background: #0f2d1a !important;
  border-color: #166534 !important;
  color: #4ade80 !important;
}
[data-bs-theme="dark"] .pp-selected .pp-clear { color: #6b7280 !important; }
[data-bs-theme="dark"] .pp-selected .pp-clear:hover { color: #ef4444 !important; }

[data-bs-theme="dark"] .pm-toggle-box {
  background: #0d1f2d !important;
  border-color: #1e4060 !important;
}
[data-bs-theme="dark"] .pm-toggle-box:has(input:checked) {
  background: #0a1a2e !important;
  border-color: #2563eb !important;
}
[data-bs-theme="dark"] .pm-toggle-title { color: #93c5fd !important; }
[data-bs-theme="dark"] .pm-toggle-desc  { color: #60a5fa !important; }
</style>
@endpush

@section('content')
<div class="container py-4" style="max-width:1100px;">

  <div class="mb-4">
    <h3 class="mb-0 fw-bold"><i class="bi bi-shield-check me-2 text-primary"></i>專案權限申請</h3>
    <div class="text-muted small mt-1">選擇申請類型，填寫表單後送出審核</div>
  </div>

  <div class="gr-layout">

    {{-- ── 左側導覽 ── --}}
    <nav class="gr-sidenav">
      <div class="gr-sidenav-title">導覽</div>
      <a href="{{ route('gitlab-requests.create') }}" class="gr-nav-link active">
        <i class="bi bi-plus-circle"></i>專案管理申請
      </a>
      <a href="{{ route('gitlab-requests.index') }}" class="gr-nav-link">
        <i class="bi bi-list-ul"></i>申請紀錄
      </a>
    </nav>

    {{-- ── 右側主內容 ── --}}
    <div>

  @if ($errors->any())
    <div class="alert alert-danger">
      <ul class="mb-0">@foreach ($errors->all() as $e)<li>{{ $e }}</li>@endforeach</ul>
    </div>
  @endif

  {{-- ── 申請類型卡片 ── --}}
  <div class="type-cards">

    {{-- 建立專案（PM 或管理者才能看到） --}}
    @if($canCreateProject)
    <button type="button" class="type-card" id="card-new_project" onclick="selectType('new_project')">
      <div class="tc-check"><i class="bi bi-check"></i></div>
      <div class="tc-icon" style="background:#dbeafe;color:#1d4ed8;">
        <i class="bi bi-folder-plus"></i>
      </div>
      <div class="tc-title">建立專案</div>
      <div class="tc-desc">在 GitLab 新增一個專案，並申請初始帳號</div>
    </button>
    @endif

    {{-- 加入專案 --}}
    <button type="button" class="type-card" id="card-add_to_project" onclick="selectType('add_to_project')">
      <div class="tc-check"><i class="bi bi-check"></i></div>
      <div class="tc-icon" style="background:#dcfce7;color:#15803d;">
        <i class="bi bi-person-plus"></i>
      </div>
      <div class="tc-title">加入專案</div>
      <div class="tc-desc">申請加入既有的 GitLab 專案，取得存取權限</div>
    </button>

    {{-- 防火牆申請 --}}
    <button type="button" class="type-card" id="card-firewall" onclick="selectType('firewall')">
      <div class="tc-check"><i class="bi bi-check"></i></div>
      <div class="tc-icon" style="background:#fce7f3;color:#9d174d;">
        <i class="bi bi-shield-lock"></i>
      </div>
      <div class="tc-title">防火牆申請</div>
      <div class="tc-desc">申請開放 IP 存取 git.steps.tw（SSH / HTTPS）</div>
    </button>

    {{-- 申請帳號（主管限定） --}}
    @if($canRequestAccount)
    <button type="button" class="type-card" id="card-new_account" onclick="selectType('new_account')">
      <div class="tc-check"><i class="bi bi-check"></i></div>
      <div class="tc-icon" style="background:#fef3c7;color:#b45309;">
        <i class="bi bi-person-badge"></i>
      </div>
      <div class="tc-title">申請帳號</div>
      <div class="tc-desc">為新進人員申請 GitLab 登入帳號</div>
    </button>
    @endif

  </div>

  {{-- ── 表單區（依選擇顯示） ── --}}
  <form method="POST" id="gitlabForm">
    @csrf
    <input type="hidden" name="request_type" id="request_type_hidden">

    {{-- 共用：申請人 Email --}}
    <div class="card border-0 shadow-sm mb-3 d-none" id="emailCard">
      <div class="card-body p-4">
        <label for="gitlab_email" class="form-label fw-semibold">申請人 Email</label>
        <input type="email" id="gitlab_email" name="email" class="form-control"
          value="{{ old('email', Auth::user()->email) }}" readonly>
      </div>
    </div>

    {{-- ════ 建立專案 panel ════ --}}
    <div class="form-panel" id="panel-new_project">
      <div class="card border-0 shadow-sm mb-3">
        <div class="card-body p-4">

          <div class="mb-4">
            <label for="gitlab_username_np" class="form-label fw-semibold">GitLab 帳號名稱 <span class="text-danger">*</span></label>
            <input type="text" id="gitlab_username_np" name="gitlab_username"
              class="form-control @error('gitlab_username') is-invalid @enderror"
              value="{{ old('gitlab_username') }}" placeholder="例：john.doe" disabled>
            @error('gitlab_username')<div class="invalid-feedback">{{ $message }}</div>@enderror
          </div>

          <div class="mb-4">
            <label for="group_id" class="form-label fw-semibold">建立於群組 <span class="text-danger">*</span></label>
            <select name="group_id" id="group_id"
              class="form-select @error('group_id') is-invalid @enderror" disabled>
              <option value="">— 請選擇群組 —</option>
              @foreach ($groups as $g)
                <option value="{{ $g['id'] }}">{{ $g['full_path'] }}</option>
              @endforeach
            </select>
            @error('group_id')<div class="invalid-feedback">{{ $message }}</div>@enderror
          </div>

          <div class="mb-4">
            <label for="project_name_np" class="form-label fw-semibold">新專案名稱 <span class="text-danger">*</span></label>
            <input type="text" id="project_name_np" name="project_name"
              class="form-control @error('project_name') is-invalid @enderror"
              value="{{ old('project_name') }}" placeholder="例：my-new-project" disabled>
            @error('project_name')<div class="invalid-feedback">{{ $message }}</div>@enderror
          </div>

        </div>
      </div>
    </div>

    {{-- ════ 加入專案 panel ════ --}}
    <div class="form-panel" id="panel-add_to_project">
      <div class="card border-0 shadow-sm mb-3">
        <div class="card-body p-4">
          <div class="atp-cols">

            {{-- 左：GitLab --}}
            <div class="atp-col">
              <div class="atp-col-head">
                <i class="bi bi-git me-1" style="color:#e24329;"></i>GitLab
              </div>

              <div class="mb-4">
                <label for="gitlabProjectInput" class="form-label fw-semibold">
                  專案 <span class="text-danger">*</span>
                </label>
                <div class="pp-wrap">
                  <input type="text" id="gitlabProjectInput" class="form-control"
                    placeholder="輸入名稱搜尋，或直接填寫…"
                    autocomplete="off"
                    value="{{ old('gitlab_project_name') }}"
                    disabled>
                  <div class="pp-dropdown" id="gpDropdown"></div>
                </div>
                <div class="pp-selected d-none" id="gpSelected">
                  <i class="bi bi-check-circle-fill text-success"></i>
                  <span id="gpSelectedName"></span>
                  <button type="button" class="pp-clear" id="gpClear">✕ 清除</button>
                </div>
                <input type="hidden" name="gitlab_project_id"   id="gitlabProjectId"   value="{{ old('gitlab_project_id') }}">
                <input type="hidden" name="gitlab_project_name" id="gitlabProjectNameHidden" value="{{ old('gitlab_project_name') }}">
                @error('gitlab_project_name')
                  <div class="text-danger small mt-1">{{ $message }}</div>
                @enderror
                <div class="form-text">找不到可直接輸入（例：group/project）</div>
              </div>

              <div class="mb-2">
                <label for="access_level" class="form-label fw-semibold">存取權限 <span class="text-danger">*</span></label>
                <select id="access_level" name="access_level" class="form-select" disabled>
                  <option value="">— 選擇權限 —</option>
                  <option value="10" {{ old('access_level','40')=='10'?'selected':'' }}>Guest</option>
                  <option value="20" {{ old('access_level','40')=='20'?'selected':'' }}>Reporter</option>
                  <option value="30" {{ old('access_level','40')=='30'?'selected':'' }}>Developer</option>
                  <option value="40" {{ old('access_level','40')=='40'?'selected':'' }}>Maintainer</option>
                  <option value="50" {{ old('access_level','40')=='50'?'selected':'' }}>Owner</option>
                </select>
              </div>
            </div>

            {{-- 右：平台專案管理 --}}
            <div class="atp-col">
              <div class="atp-col-head">
                <i class="bi bi-kanban me-1" style="color:#0284c7;"></i>平台專案管理
              </div>

              {{-- PM toggle 在上方，控制下方專案搜尋顯示 --}}
              <div class="mb-3">
                <label class="pm-toggle-box" for="also_request_portal_pm_atp">
                  <input type="checkbox" id="also_request_portal_pm_atp" name="also_request_portal_pm"
                    value="1" {{ old('also_request_portal_pm','1')==='1'?'checked':'' }}
                    onchange="togglePortalProject(this.checked)">
                  <div>
                    <div class="pm-toggle-title"><i class="bi bi-kanban me-1"></i>同時申請平台 PM 權限</div>
                    <div class="pm-toggle-desc">審核通過後同步開通看板、任務指派、文件管理等功能</div>
                  </div>
                </label>
              </div>

              {{-- 勾選後才顯示的專案選擇 --}}
              <div id="portalProjectSection">
                <div class="mb-2">
                  <label for="portalProjectInput" class="form-label fw-semibold">對應專案</label>
                  <div class="pp-wrap">
                    <input type="text" id="portalProjectInput" class="form-control"
                      placeholder="輸入名稱搜尋，或直接填寫…"
                      autocomplete="off"
                      value="{{ old('portal_project_name') }}"
                      disabled>
                    <div class="pp-dropdown" id="ppDropdown"></div>
                  </div>
                  <div class="pp-selected d-none" id="ppSelected">
                    <i class="bi bi-check-circle-fill text-success"></i>
                    <span id="ppSelectedName"></span>
                    <button type="button" class="pp-clear" id="ppClear">✕ 清除</button>
                  </div>
                  <input type="hidden" name="portal_project_id"   id="portalProjectId"   value="{{ old('portal_project_id') }}">
                  <input type="hidden" name="portal_project_name" id="portalProjectName" value="{{ old('portal_project_name') }}">
                  <div class="form-text">留空表示不指定平台專案</div>
                </div>
              </div>

            </div>

          </div>
        </div>
      </div>
    </div>

    {{-- ════ 申請帳號 panel（主管限定）════ --}}
    @if($canRequestAccount)
    <div class="form-panel" id="panel-new_account">
      <div class="card border-0 shadow-sm mb-3">
        <div class="card-body p-4">
          <div class="alert alert-warning py-2 mb-4 small">
            <i class="bi bi-exclamation-triangle me-1"></i>此功能限主管為新進人員申請 GitLab 帳號使用
          </div>
          <div class="mb-2">
            <label for="gitlab_username_na" class="form-label fw-semibold">GitLab 帳號名稱 <span class="text-danger">*</span></label>
            <input type="text" id="gitlab_username_na" name="gitlab_username"
              class="form-control" value="{{ old('gitlab_username') }}"
              placeholder="例：john.doe" disabled>
          </div>
        </div>
      </div>

      {{-- 同時申請平台 PM 權限 --}}
      <div class="mb-3">
        <label class="pm-toggle-box" for="also_request_portal_pm_na">
          <input type="checkbox" id="also_request_portal_pm_na" name="also_request_portal_pm"
            value="1" {{ old('also_request_portal_pm','1')==='1'?'checked':'' }}>
          <div>
            <div class="pm-toggle-title"><i class="bi bi-kanban me-1"></i>同時申請平台專案管理系統權限</div>
            <div class="pm-toggle-desc">審核通過後同步開通此帳號在平台專案管理的存取權限</div>
          </div>
        </label>
      </div>
    </div>
    @endif

    {{-- 共用：備註 & 送出 --}}
    <div class="d-none" id="submitSection">
      <div class="card border-0 shadow-sm mb-4">
        <div class="card-body p-4">
          <label for="reason" class="form-label fw-semibold">備註</label>
          <textarea id="reason" name="reason" class="form-control" rows="3"
            placeholder="如有特殊需求或說明，請在此填寫">{{ old('reason') }}</textarea>
        </div>
      </div>
      <div class="d-flex justify-content-end gap-2">
        <a href="{{ route('gitlab-requests.index') }}" class="btn btn-outline-secondary">取消</a>
        <button type="submit" id="submitBtn" class="btn btn-primary px-5">
          <i class="bi bi-send me-1"></i>送出申請
        </button>
      </div>
    </div>

  </form>

  {{-- ════ 防火牆申請 panel（獨立 form，不在 gitlabForm 內） ════ --}}
  <div class="form-panel" id="panel-firewall">
    <form method="POST" action="{{ route('firewall-requests.store') }}">
      @csrf
      <div class="card border-0 shadow-sm mb-3">
        <div class="card-body p-4">

          <div class="mb-4">
            <label for="fw_applicant" class="form-label fw-semibold">申請人</label>
            <input type="text" id="fw_applicant" class="form-control" value="{{ Auth::user()->name }}（{{ Auth::user()->email }}）" disabled>
          </div>

          <div class="mb-4">
            <label for="fw_target" class="form-label fw-semibold">目標伺服器</label>
            <input type="text" id="fw_target" name="target_server" class="form-control" value="git.steps.tw" readonly>
          </div>

          <div class="mb-4">
            <label for="fw_ip" class="form-label fw-semibold">申請開放的 IP <span class="text-danger">*</span></label>
            <input type="text" id="fw_ip" name="ip_address"
              class="form-control @error('ip_address') is-invalid @enderror"
              value="{{ old('ip_address') }}"
              placeholder="例：60.248.142.179" autocomplete="off">
            <div class="form-text">填入需要連到目標伺服器的 IP</div>
            @error('ip_address')<div class="invalid-feedback">{{ $message }}</div>@enderror
          </div>

          <div class="mb-4">
            <label class="form-label fw-semibold">申請開放的 Port <span class="text-danger">*</span></label>
            <div class="d-flex gap-4 mt-1">
              <div class="form-check">
                <input class="form-check-input" type="checkbox" name="ports[]" value="443" id="port443"
                  {{ in_array('443', old('ports', ['443'])) ? 'checked' : '' }}>
                <label class="form-check-label" for="port443">
                  <strong>443</strong> <span class="text-muted small">（HTTPS / API）</span>
                </label>
              </div>
              <div class="form-check">
                <input class="form-check-input" type="checkbox" name="ports[]" value="22" id="port22"
                  {{ in_array('22', old('ports', ['22'])) ? 'checked' : '' }}>
                <label class="form-check-label" for="port22">
                  <strong>22</strong> <span class="text-muted small">（SSH / Git clone）</span>
                </label>
              </div>
            </div>
            @error('ports')<div class="text-danger small mt-1">{{ $message }}</div>@enderror
          </div>

          <div class="mb-2">
            <label for="fw_reason" class="form-label fw-semibold">申請原因 <span class="text-danger">*</span></label>
            <textarea id="fw_reason" name="reason" rows="3"
              class="form-control @error('reason') is-invalid @enderror"
              placeholder="請說明此 IP 的用途及需要連線的原因">{{ old('reason') }}</textarea>
            @error('reason')<div class="invalid-feedback">{{ $message }}</div>@enderror
          </div>

        </div>
      </div>

      <div class="d-flex justify-content-end gap-2">
        <a href="{{ route('gitlab-requests.create') }}" class="btn btn-outline-secondary">取消</a>
        <button type="submit" class="btn btn-danger px-5">
          <i class="bi bi-shield-check me-1"></i>送出防火牆申請
        </button>
      </div>
    </form>
  </div>

    </div>{{-- /右側主內容 --}}
  </div>{{-- /gr-layout --}}
</div>
@endsection

@push('scripts')
<script>
// ── 專案資料 ────────────────────────────────────────────
const PORTAL_PROJECTS = {!! $portalProjectsJson !!};
const GITLAB_PROJECTS = {!! $gitlabProjectsJson !!};

// ── 各申請類型對應的 action URL ──────────────────────────
const TYPE_ACTIONS = {
  new_project:    '{{ route('gitlab-requests.store.new-project') }}',
  add_to_project: '{{ route('gitlab-requests.store.add-to-project') }}',
  new_account:    '{{ route('gitlab-requests.store.new-account') }}',
};

function selectType(type) {
  // 更新卡片選取狀態
  document.querySelectorAll('.type-card').forEach(c => c.classList.remove('selected'));
  document.getElementById('card-' + type)?.classList.add('selected');

  // 顯示/隱藏 panel
  document.querySelectorAll('.form-panel').forEach(p => p.classList.remove('active'));
  document.getElementById('panel-' + type)?.classList.add('active');

  // 防火牆申請有自己的 form，不使用 gitlabForm
  if (type === 'firewall') {
    document.getElementById('emailCard').classList.add('d-none');
    document.getElementById('submitSection').classList.add('d-none');
    enablePanelInputs('firewall');
    return;
  }

  // 設定 hidden input & form action
  document.getElementById('request_type_hidden').value = type;
  document.getElementById('gitlabForm').action = TYPE_ACTIONS[type];

  // Email card & submit section
  document.getElementById('emailCard').classList.remove('d-none');
  document.getElementById('submitSection').classList.remove('d-none');

  // 啟用/停用各 panel 內的 inputs
  enablePanelInputs(type);
}

function enablePanelInputs(type) {
  document.querySelectorAll('.form-panel input, .form-panel select, .form-panel textarea').forEach(i => {
    i.disabled = true;
  });
  const panel = document.getElementById('panel-' + type);
  if (panel) {
    panel.querySelectorAll('input, select, textarea').forEach(i => {
      i.disabled = false;
    });
  }
}

// ── 共用模糊搜尋 ──────────────────────────────────────────
function fuzzyMatch(str, kw) {
  let si = 0; str = str.toLowerCase(); kw = kw.toLowerCase();
  for (let i = 0; i < kw.length; i++) {
    si = str.indexOf(kw[i], si);
    if (si === -1) return false;
    si++;
  }
  return true;
}

function makeAutocomplete({ inputEl, dropdownEl, selectedEl, selNameEl, clearEl, idField, nameField, dataset, renderMeta }) {
  let focusIdx = -1;

  function renderItems(items) {
    focusIdx = -1;
    if (!items.length) {
      dropdownEl.innerHTML = '<div class="pp-no-result">找不到符合的項目，可直接輸入</div>';
    } else {
      dropdownEl.innerHTML = items.map((p, i) =>
        `<div class="pp-item" data-idx="${i}" data-id="${p.id}" data-name="${escHtml(p.name)}">
          <span class="pp-item-name">${escHtml(p.name)}</span>
          ${renderMeta ? `<span class="pp-item-meta">${escHtml(renderMeta(p))}</span>` : ''}
        </div>`
      ).join('');
      dropdownEl.querySelectorAll('.pp-item').forEach(el => {
        el.addEventListener('mousedown', e => { e.preventDefault(); select(el.dataset.id, el.dataset.name); });
      });
    }
    dropdownEl.classList.add('open');
  }

  function render(kw, showAll) {
    focusIdx = -1;
    if (!kw && !showAll) { dropdownEl.classList.remove('open'); return; }
    const items = kw
      ? dataset.filter(p => p.name && fuzzyMatch(p.name, kw)).slice(0, 40)
      : dataset.slice(0, 60);
    renderItems(items);
  }

  function select(id, name) {
    idField.value    = id;
    nameField.value  = name;
    inputEl.value    = '';
    inputEl.placeholder = '已選取（點「清除」可重選）';
    selNameEl.textContent = name;
    selectedEl.classList.remove('d-none');
    dropdownEl.classList.remove('open');
  }

  function clear() {
    idField.value = ''; nameField.value = '';
    inputEl.value = ''; inputEl.placeholder = '輸入名稱搜尋，或直接填寫…';
    selectedEl.classList.add('d-none');
    dropdownEl.classList.remove('open');
  }

  inputEl.addEventListener('focus', () => render(inputEl.value.trim(), true));
  inputEl.addEventListener('input', () => {
    idField.value = '';
    nameField.value = inputEl.value.trim();
    selectedEl.classList.add('d-none');
    render(inputEl.value.trim(), true);
  });
  inputEl.addEventListener('keydown', e => {
    const rows = dropdownEl.querySelectorAll('.pp-item');
    if (e.key === 'ArrowDown') { e.preventDefault(); focusIdx = Math.min(focusIdx+1, rows.length-1); }
    else if (e.key === 'ArrowUp') { e.preventDefault(); focusIdx = Math.max(focusIdx-1, 0); }
    else if (e.key === 'Enter' && focusIdx >= 0) { e.preventDefault(); const r = rows[focusIdx]; select(r.dataset.id, r.dataset.name); return; }
    else if (e.key === 'Escape') { dropdownEl.classList.remove('open'); return; }
    else return;
    rows.forEach((r,i) => r.classList.toggle('focused', i === focusIdx));
    rows[focusIdx]?.scrollIntoView({ block: 'nearest' });
  });
  inputEl.addEventListener('blur', () => setTimeout(() => dropdownEl.classList.remove('open'), 150));
  clearEl.addEventListener('click', clear);

  return { select, clear };
}

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

// ── 平台專案 autocomplete ─────────────────────────────────
const ppAC = makeAutocomplete({
  inputEl:    document.getElementById('portalProjectInput'),
  dropdownEl: document.getElementById('ppDropdown'),
  selectedEl: document.getElementById('ppSelected'),
  selNameEl:  document.getElementById('ppSelectedName'),
  clearEl:    document.getElementById('ppClear'),
  idField:    document.getElementById('portalProjectId'),
  nameField:  document.getElementById('portalProjectName'),
  dataset:    PORTAL_PROJECTS,
  renderMeta: p => `${p.category || ''} · ${p.type || ''}`,
});

// ── GitLab 專案 autocomplete ──────────────────────────────
const gpAC = makeAutocomplete({
  inputEl:    document.getElementById('gitlabProjectInput'),
  dropdownEl: document.getElementById('gpDropdown'),
  selectedEl: document.getElementById('gpSelected'),
  selNameEl:  document.getElementById('gpSelectedName'),
  clearEl:    document.getElementById('gpClear'),
  idField:    document.getElementById('gitlabProjectId'),
  nameField:  document.getElementById('gitlabProjectNameHidden'),
  dataset:    GITLAB_PROJECTS,
  renderMeta: null,
});

// ── PM toggle → 顯示/隱藏平台專案搜尋 ───────────────────
function togglePortalProject(checked) {
  const section = document.getElementById('portalProjectSection');
  if (!section) return;
  section.style.display = checked ? '' : 'none';
  if (!checked && ppAC) ppAC.clear();
}

// ── 若有 old() 資料，恢復選取狀態；否則預設「加入專案」 ──
@if(old('request_type'))
  selectType('{{ old('request_type') }}');
  @if(old('portal_project_id') && old('portal_project_name'))
    ppAC.select('{{ old('portal_project_id') }}', '{{ old('portal_project_name') }}');
  @endif
  @if(old('gitlab_project_id') && old('gitlab_project_name'))
    gpAC.select('{{ old('gitlab_project_id') }}', '{{ old('gitlab_project_name') }}');
  @endif
@else
  selectType('add_to_project');
@endif

// 初始化 PM toggle 狀態
togglePortalProject(document.getElementById('also_request_portal_pm_atp')?.checked ?? true);

// 防止重複送出
document.querySelector('form').addEventListener('submit', function() {
  var btn = document.getElementById('submitBtn');
  if (btn) {
    btn.disabled = true;
    btn.innerHTML = '<span class="spinner-border spinner-border-sm me-1" role="status"></span>送出中…';
  }
});
</script>
@endpush