{{-- 專案子頁面共用頂部導覽 --}}
@php
    $openIssues      = \App\Models\Issue::where('project_id', $project->id)
        ->whereNotIn('status', ['completed', 'rejected'])->count();
    $docCount        = $project->docs()->where('type','doc')->count();
    $memCount        = $project->members->count();
    $versionCount    = $project->versions()->count();
    $contractCount   = $project->contracts()->count();
    $currentRoute    = Route::currentRouteName();
    $classicMode     = \App\Models\UserUiPreference::viewMode() === 'classic';
    $navContracts    = $contractCount > 1 ? $project->contracts()->orderByDesc('start_date')->get(['id','name']) : collect();
    $navContractId   = session("project.{$project->id}.contract_id");
@endphp

@if($classicMode)
{{-- ══════════════════════════════════
     REDMINE CLASSIC 頂部導覽
══════════════════════════════════ --}}
<style>
.rm5-topbar{background:#48536b;color:#fff;padding:0 20px;display:flex;align-items:center;justify-content:space-between;min-height:48px;}
.rm5-topbar-brand{font-size:18px;font-weight:bold;color:#fff;text-decoration:none;}
.rm5-project-bar{background:#3d4f6e;padding:10px 20px 0;}
.rm5-project-bar .breadcrumb-rm{font-size:11px;color:#aac4e0;margin-bottom:6px;}
.rm5-project-bar .breadcrumb-rm a{color:#aac4e0;text-decoration:none;}
.rm5-project-bar .breadcrumb-rm a:hover{text-decoration:underline;}
.rm5-project-bar h2{margin:0 0 0;font-size:22px;font-weight:bold;color:#fff;line-height:1.3;}
.rm5-project-bar .proj-type{display:inline-block;padding:1px 8px;border-radius:2px;font-size:11px;margin-left:8px;background:#ffffff33;color:#ddeeff;}
.rm5-tabs{background:#5d6880;display:flex;align-items:flex-end;padding:0 12px;gap:2px;min-height:36px;flex-wrap:wrap;}
.rm5-tabs a{display:block;padding:7px 13px 5px;color:#ccd6ee;font-size:13px;text-decoration:none;border:1px solid transparent;border-bottom:none;border-radius:3px 3px 0 0;white-space:nowrap;}
.rm5-tabs a:hover{background:#697598;color:#fff;}
.rm5-tabs a.active{background:#f5f5f5;color:#333;border-color:#aaa;border-bottom-color:#f5f5f5;font-weight:bold;}
.rm5-tab-badge{display:inline-block;background:#c0392b;color:#fff;border-radius:8px;padding:0 5px;font-size:10px;margin-left:3px;}
.rm5-tabs-spacer{flex:1;}
.rm5-tabs-right{display:flex;align-items:center;padding-bottom:4px;gap:6px;}
.rm5-btn-sm{display:inline-block;padding:2px 9px;background:#e8e8e8;border:1px solid #aaa;border-radius:2px;font-size:12px;color:#333;text-decoration:none;cursor:pointer;white-space:nowrap;}
.rm5-btn-sm:hover{background:#d0d0d0;color:#222;text-decoration:none;}
.rm5-btn-toggle{background:#e8eef7;border-color:#aabcd8;color:#2c5f9a;font-size:11px;}
.rm5-btn-toggle:hover{background:#d5e3f5;}
/* 覆蓋 .rm5-tabs a 對 tabs-right 內連結的 tab 樣式 */
.rm5-tabs-right a.rm5-btn-sm{display:inline-block;padding:2px 9px;border-radius:2px;border:1px solid #aaa;font-size:12px;background:#e8e8e8;color:#333;}
.rm5-tabs-right a.rm5-btn-sm.rm5-btn-toggle{background:#e8eef7;border-color:#aabcd8;color:#2c5f9a;}
/* 內頁內容 Redmine 化 */
.rm5-inner{background:#f5f5f5;padding:14px 20px 30px;font-family:"Noto Sans TC",Arial,sans-serif;font-size:13px;color:#333;}
.rm5-inner .card,.rm5-inner .shadow-sm{box-shadow:none!important;border-color:#d0d0d0!important;border-radius:2px!important;}
.rm5-inner .card-header{background:#e4e4e4!important;border-bottom:1px solid #ccc!important;font-size:12px;font-weight:bold;color:#444;padding:6px 12px;}
.rm5-inner .card-body{padding:10px 12px;}
.rm5-inner .btn-primary{background:#3e75c3;border-color:#2d5fa0;}
.rm5-inner .btn-sm{padding:2px 9px;font-size:12px;}
.rm5-inner h4,.rm5-inner h5{font-size:14px;}
.rm5-inner .list-group-item{border-color:#e0e0e0;font-size:13px;padding:5px 10px;}
.rm5-inner .table th{background:#f0f0f0;border-color:#d0d0d0;font-size:12px;padding:5px 10px;}
.rm5-inner .table td{border-color:#e0e0e0;font-size:13px;padding:5px 10px;}
.rm5-inner .badge{font-size:10px;}
.rm5-inner .alert{font-size:13px;}
.rm5-inner .text-muted{color:#888!important;}
</style>

<div class="rm5-topbar">
  <a href="{{ route('projects.list') }}" class="rm5-topbar-brand">{{ config('app.company_name') }} 專案管理平台</a>
</div>

<div class="rm5-project-bar">
  <div class="breadcrumb-rm">
    <a href="{{ route('projects.list') }}">首頁</a> &raquo;
    @if($project->client)
      <a href="#">{{ $project->client->name }}</a> &raquo;
    @endif
    <a href="{{ route('projects.show', $project) }}">{{ $project->name }}</a>
  </div>
  <h2>
    {{ $project->name }}
    <span class="proj-type">{{ $project->project_type }}</span>
  </h2>
</div>

<div class="rm5-tabs">
  <a href="{{ route('projects.show', $project) }}"
     class="{{ $currentRoute === 'projects.show' ? 'active' : '' }}">概觀</a>

  <a href="{{ route('projects.issues.index', $project) }}"
     class="{{ Str::contains($currentRoute, 'projects.issues') ? 'active' : '' }}">
    議題清單{!! $openIssues > 0 ? '<span class="rm5-tab-badge">'.$openIssues.'</span>' : '' !!}
  </a>

  @can('viewRoadmap', $project)
  <a href="{{ route('projects.roadmap', $project) }}"
     class="{{ Str::startsWith($currentRoute,'projects.roadmap')||Str::startsWith($currentRoute,'projects.versions') ? 'active' : '' }}">
    合約{!! $versionCount > 0 ? '<span class="rm5-tab-badge" style="background:#777">'.$versionCount.'</span>' : '' !!}
  </a>
  @endcan

  @can('update', $project)
  <a href="{{ route('projects.estimations.index', $project) }}"
     class="{{ $currentRoute === 'projects.estimations.index' ? 'active' : '' }}">工時評估</a>
  @endcan

  @can('viewGitlab', $project)
  @if($project->gitlab_project_id)
  <a href="{{ route('projects.gitlab', $project) }}"
     class="{{ $currentRoute === 'projects.gitlab' ? 'active' : '' }}">GitLab</a>
  @endif
  @endcan

  @can('viewGantt', $project)
  <a href="{{ route('projects.gantt', $project) }}"
     class="{{ $currentRoute === 'projects.gantt' ? 'active' : '' }}">甘特圖</a>
  @endcan

  @can('viewCalendar', $project)
  <a href="{{ route('projects.calendar', $project) }}"
     class="{{ $currentRoute === 'projects.calendar' ? 'active' : '' }}">日層</a>
  @endcan

  @can('view', $project)
  @if($contractCount > 0)
  <a href="{{ route('projects.time.index', $project) }}"
     class="{{ Str::startsWith($currentRoute,'projects.time') ? 'active' : '' }}">工時紀錄</a>
  @endif
  @endcan

  @can('viewDocs', $project)
  <a href="{{ route('projects.docs.index', $project) }}"
     class="{{ Str::startsWith($currentRoute,'projects.docs') ? 'active' : '' }}">
    文件{!! $docCount > 0 ? '<span class="rm5-tab-badge" style="background:#777">'.$docCount.'</span>' : '' !!}
  </a>
  @endcan

  @can('viewMembers', $project)
  <a href="{{ route('projects.members.index', $project) }}"
     class="{{ Str::contains($currentRoute,'projects.members') ? 'active' : '' }}">
    成員{!! $memCount > 0 ? '<span class="rm5-tab-badge" style="background:#777">'.$memCount.'</span>' : '' !!}
  </a>
  @endcan

  @can('update', $project)
  <a href="{{ route('projects.edit', $project) }}"
     class="{{ $currentRoute === 'projects.edit' ? 'active' : '' }}">設定</a>
  @endcan

  <div class="rm5-tabs-spacer"></div>

  <div class="rm5-tabs-right">
    <a href="{{ route('projects.list') }}" class="rm5-btn-sm rm5-btn-toggle">&#8592; 返回列表</a>
  </div>
</div>

{{-- 包住內容的 wrapper，內頁 view 需在 @include('projects._nav') 後加 <div class="rm5-inner"> --}}
<script>
  // 把接下來的 container-fluid / container 包進 rm5-inner
  document.addEventListener('DOMContentLoaded', function() {
    var nav = document.querySelector('.rm5-tabs');
    if (!nav) return;
    var sibling = nav.nextElementSibling;
    while (sibling && !sibling.classList.contains('footer')) {
      sibling.classList.add('rm5-inner');
      sibling = sibling.nextElementSibling;
    }
  });
</script>

@else
{{-- ══════════════════════════════════
     現代版（Bootstrap）頂部導覽
══════════════════════════════════ --}}
<div class="border-bottom mb-0 pb-0 bg-white" style="margin:-1.5rem -16px 0;">
  <div class="container-fluid px-4">
    <div class="d-flex flex-wrap align-items-center justify-content-between gap-2 pt-3 pb-1">
      <div class="d-flex align-items-center gap-2 flex-wrap">
        <h4 class="mb-0 fw-bold fs-5">
          <a href="{{ route('projects.show', $project) }}" class="text-decoration-none text-dark">
            {{ $project->name }}
          </a>
        </h4>
        @if($project->client)
          <span class="text-muted small"><i class="bi bi-building me-1"></i>{{ $project->client?->name ?? '未分類' }}</span>
        @endif
        <span class="badge bg-{{ $project->project_type === '開發' ? 'primary' : ($project->project_type === '維護' ? 'success' : ($project->project_type === '產品' ? 'warning' : 'secondary')) }}">
          {{ $project->project_type }}
        </span>
      </div>
      <div class="d-flex gap-2 flex-wrap align-items-center">
        @if($navContracts->isNotEmpty())
        <form method="POST" action="{{ route('projects.switch-contract', $project) }}" class="d-flex align-items-center gap-1">
          @csrf
          <label for="nav-contract-switcher" class="small text-muted mb-0 text-nowrap">
            <i class="bi bi-file-earmark-text me-1"></i>合約
          </label>
          <select name="contract_id" id="nav-contract-switcher"
                  class="form-select form-select-sm" style="max-width:220px;"
                  onchange="this.form.submit()">
            <option value="">全部合約</option>
            @foreach($navContracts as $nc)
              <option value="{{ $nc->id }}" {{ $navContractId == $nc->id ? 'selected' : '' }}>
                {{ $nc->name }}
              </option>
            @endforeach
          </select>
        </form>
        @endif
        <a href="{{ route('projects.list') }}" class="btn btn-sm btn-outline-secondary">
          <i class="bi bi-arrow-left me-1"></i>返回
        </a>
      </div>
    </div>

    <div style="overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none;margin:0 -24px;padding:0 24px;">
    <ul class="nav nav-tabs border-0 mt-1" style="flex-wrap:nowrap;min-width:max-content;">
      <li class="nav-item">
        <a class="nav-link {{ $currentRoute === 'projects.show' ? 'active' : '' }}"
           href="{{ route('projects.show', $project) }}">
          <i class="bi bi-house me-1"></i>概覽
        </a>
      </li>
      <li class="nav-item">
        <a class="nav-link {{ Str::contains($currentRoute, 'projects.issues') ? 'active' : '' }}"
           href="{{ route('projects.issues.index', $project) }}">
          <i class="bi bi-bug me-1"></i>議題
          @if($openIssues > 0)
            <span class="badge bg-danger ms-1">{{ $openIssues }}</span>
          @endif
        </a>
      </li>
      @can('viewRoadmap', $project)
      <li class="nav-item">
        <a class="nav-link {{ Str::startsWith($currentRoute, 'projects.roadmap') || Str::startsWith($currentRoute, 'projects.versions') ? 'active' : '' }}"
           href="{{ route('projects.roadmap', $project) }}">
          <i class="bi bi-map me-1"></i>合約
          @if($versionCount > 0)
            <span class="badge bg-secondary ms-1">{{ $versionCount }}</span>
          @endif
        </a>
      </li>
      @endcan
      @can('update', $project)
      <li class="nav-item">
        <a class="nav-link {{ $currentRoute === 'projects.estimations.index' ? 'active' : '' }}"
           href="{{ route('projects.estimations.index', $project) }}">
          <i class="bi bi-calculator me-1"></i>工時評估
        </a>
      </li>
      @endcan
      @can('viewGitlab', $project)
      @if($project->gitlab_project_id)
      <li class="nav-item">
        <a class="nav-link {{ $currentRoute === 'projects.gitlab' ? 'active' : '' }}"
           href="{{ route('projects.gitlab', $project) }}">
          <i class="bi bi-git me-1"></i>GitLab
        </a>
      </li>
      @endif
      @endcan
      @can('viewGantt', $project)
      <li class="nav-item">
        <a class="nav-link {{ $currentRoute === 'projects.gantt' ? 'active' : '' }}"
           href="{{ route('projects.gantt', $project) }}">
          <i class="bi bi-bar-chart-steps me-1"></i>甘特圖
        </a>
      </li>
      @endcan
      @can('viewCalendar', $project)
      <li class="nav-item">
        <a class="nav-link {{ $currentRoute === 'projects.calendar' ? 'active' : '' }}"
           href="{{ route('projects.calendar', $project) }}">
          <i class="bi bi-calendar3 me-1"></i>行事曆
        </a>
      </li>
      @endcan
      @can('view', $project)
      @if($contractCount > 0)
      <li class="nav-item">
        <a class="nav-link {{ Str::startsWith($currentRoute, 'projects.time') ? 'active' : '' }}"
           href="{{ route('projects.time.index', $project) }}">
          <i class="bi bi-clock-history me-1"></i>工時紀錄
        </a>
      </li>
      @endif
      @endcan
      @can('viewDocs', $project)
      <li class="nav-item">
        <a class="nav-link {{ Str::startsWith($currentRoute, 'projects.docs') ? 'active' : '' }}"
           href="{{ route('projects.docs.index', $project) }}">
          <i class="bi bi-file-earmark-text me-1"></i>文件
          @if($docCount > 0)
            <span class="badge bg-secondary ms-1">{{ $docCount }}</span>
          @endif
        </a>
      </li>
      @endcan
      @can('viewMembers', $project)
      <li class="nav-item">
        <a class="nav-link {{ Str::contains($currentRoute, 'projects.members') ? 'active' : '' }}"
           href="{{ route('projects.members.index', $project) }}">
          <i class="bi bi-people me-1"></i>成員
          <span class="badge bg-secondary ms-1">{{ $memCount }}</span>
        </a>
      </li>
      @endcan
      @can('update', $project)
      <li class="nav-item ms-auto">
        <a class="nav-link text-muted" href="{{ route('projects.edit', $project) }}">
          <i class="bi bi-gear"></i>
        </a>
      </li>
      @endcan
    </ul>
    </div>
  </div>
</div>
@endif