@extends('layouts.app')

@section('title', '所有專案')

@section('content')
  @include('projects._list_tabs', ['activeTab' => 'list'])

  <div class="container py-4 position-relative">

    {{-- 顯示目前篩選狀態 --}}
    @if ($type || $category)
      <p class="text-muted mb-3" style="font-size:.875rem;">
        🔎 目前篩選：
        @if($category)<strong>{{ $category }}</strong>@endif
        @if($type)<strong>{{ $type }}</strong>@endif
        <a href="{{ route('projects.list') }}" class="ms-2 small text-muted">清除</a>
      </p>
    @elseif($tool)
      <p class="text-muted mb-3" style="font-size:.875rem;">🔎 開發框架：<strong>{{ $tool }}</strong>
        <a href="{{ route('projects.list') }}" class="ms-2 small text-muted">清除</a>
      </p>
    @endif

    {{-- 🌐 儀表板 --}}
    <div class="p-4 rounded-4 shadow-sm mb-5"
      style="background: linear-gradient(135deg, #f4f6f8, #e9ecef); border: 1px solid #dee2e6;">
      <h4 class="mb-4 fw-bold text-dark">
        <i class="bi bi-bar-chart-line-fill me-2 text-primary"></i> 專案統計儀表板
      </h4>

      {{-- ① 總覽列：總數 / 進行中 / 已結束 --}}
      <div class="row row-cols-3 g-3 mb-4" style="max-width:480px;">
        <div class="col">
          <a href="{{ route('projects.list') }}" class="text-decoration-none">
            <div class="card text-white border-0 shadow-sm"
              style="background:linear-gradient(135deg,#2563eb,#3b82f6);">
              <div class="card-body text-center py-3">
                <div class="fs-1 fw-bold lh-1">{{ $stats['total'] }}</div>
                <div class="small mt-1 opacity-90">案子總數</div>
              </div>
            </div>
          </a>
        </div>
        <div class="col">
          <div class="card text-white border-0 shadow-sm"
            style="background:linear-gradient(135deg,#059669,#10b981);">
            <div class="card-body text-center py-3">
              <div class="fs-1 fw-bold lh-1">{{ $stats['active'] }}</div>
              <div class="small mt-1 opacity-90">開啟中</div>
            </div>
          </div>
        </div>
        <div class="col">
          <div class="card text-white border-0 shadow-sm"
            style="background:linear-gradient(135deg,#6b7280,#9ca3af);">
            <div class="card-body text-center py-3">
              <div class="fs-1 fw-bold lh-1">{{ $stats['closed'] }}</div>
              <div class="small mt-1 opacity-90">已結束</div>
            </div>
          </div>
        </div>
      </div>

      {{-- ② 分類細分：産品 / 專案，各自展示開発・保固・維護 --}}
      @php
        $catMeta = [
          '產品' => ['icon' => 'bi-box-seam',     'grad' => '#d97706,#f59e0b', 'param' => 'category'],
          '專案' => ['icon' => 'bi-folder-fill',  'grad' => '#2563eb,#60a5fa', 'param' => 'category'],
        ];
        $bsHex = [
          'primary'   => '#0a58ca', 'success' => '#146c43', 'warning' => '#997404',
          'danger'    => '#b02a37', 'info'    => '#055160', 'secondary'=> '#495057',
          'dark'      => '#212529',
        ];
        $typeIconMap = [
          '開發' => 'bi-tools',        '保固' => 'bi-shield-check',
          '維護' => 'bi-wrench',        '其他' => 'bi-folder2',
        ];
        $allTypeMeta = [];
        foreach ($projectTypes as $pt) {
          $allTypeMeta[$pt->label] = [
            'icon'  => $typeIconMap[$pt->label] ?? 'bi-tag',
            'color' => $bsHex[$pt->color] ?? '#495057',
            'scope' => $pt->scope,
          ];
        }
        $categories = collect($catMeta)->keys()
          ->filter(fn($cat) => ($stats['byCategory'][$cat] ?? 0) > 0);
      @endphp

      @if($categories->isNotEmpty())
      <div class="row g-3 mb-3">
        @foreach($categories as $cat)
        @php
          $cm     = $catMeta[$cat];
          $catTotal = $stats['byCategory'][$cat] ?? 0;
          $catTypes = $stats['byCatType'][$cat] ?? collect();
        @endphp
        <div class="col-12 col-lg-6">
          <div class="rounded-3 p-3" style="background:#fff;border:1px solid #e2e8f0;">

            {{-- 分類標頭 --}}
            <a href="{{ route('projects.list', [$cm['param'] => $cat]) }}"
               class="d-flex align-items-center gap-2 text-decoration-none mb-3">
              <span class="rounded-circle d-flex align-items-center justify-content-center text-white"
                style="width:36px;height:36px;background:linear-gradient(135deg,{{ $cm['grad'] }});flex-shrink:0;">
                <i class="bi {{ $cm['icon'] }}"></i>
              </span>
              <span class="fw-bold text-dark" style="font-size:1rem;">{{ $cat }}</span>
              <span class="badge ms-1" style="background:linear-gradient(135deg,{{ $cm['grad'] }});font-size:.8rem;">
                {{ $catTotal }}
              </span>
            </a>

            {{-- 階段細分 --}}
            <div class="row row-cols-2 row-cols-sm-4 g-2">
              @foreach($allTypeMeta as $typeName => $tm)
                @php
                  $cnt = $catTypes[$typeName] ?? 0;
                  $catScope = $cat === '產品' ? 'product' : 'project';
                  $scopeOk = $tm['scope'] === 'both' || $tm['scope'] === $catScope;
                @endphp
                @if($scopeOk && ($typeName !== '其他' || $cnt > 0))
                <div class="col">
                  <a href="{{ route('projects.list', [$cm['param'] => $cat, 'type' => $typeName]) }}"
                     class="d-block text-decoration-none rounded-2 text-center py-2 px-1"
                     style="background:#f8fafc;border:1px solid #e2e8f0;transition:background .12s;">
                    <div class="fw-bold" style="font-size:1.15rem;color:{{ $cnt > 0 ? $tm['color'] : '#cbd5e1' }};">{{ $cnt }}</div>
                    <div class="small" style="color:{{ $cnt > 0 ? '#64748b' : '#cbd5e1' }};">{{ $typeName }}</div>
                  </a>
                </div>
                @endif
              @endforeach
            </div>

          </div>
        </div>
        @endforeach
      </div>
      @endif

      {{-- ③ 開發工具 --}}
      <h6 class="fw-bold text-secondary mt-2 mb-2">💻 開發框架</h6>
      <div class="row row-cols-2 row-cols-md-6 g-3">
        @php
          $toolMeta = [
              'SMF'       => ['color' => '#e0ccff', 'icon' => 'bi-terminal'],
              'Laravel'   => ['color' => '#f5c6cb', 'icon' => 'bi-layers-fill'],
              'WordPress' => ['color' => '#d0e2ff', 'icon' => 'bi-wordpress'],
              'Wordpress' => ['color' => '#d0e2ff', 'icon' => 'bi-wordpress'],
              'ZF2'       => ['color' => '#c7eed8', 'icon' => 'bi-bootstrap'],
              '其他'      => ['color' => '#e2e3e5', 'icon' => 'bi-question-circle'],
          ];
          $allTools = \App\Models\ProjectDevTool::labels();
        @endphp
        @foreach ($allTools as $toolName)
          @php $meta = $toolMeta[$toolName] ?? ['color' => '#e2e3e5', 'icon' => 'bi-tools']; @endphp
          <div class="col">
            <a href="{{ route('projects.list', ['tool' => $toolName]) }}" class="text-decoration-none">
              <div class="card text-dark border-0 shadow-sm h-100"
                style="background: linear-gradient(135deg, {{ $meta['color'] }}, {{ $meta['color'] }}cc);">
                <div class="card-body text-center">
                  <div class="fs-2"><i class="bi {{ $meta['icon'] }}"></i></div>
                  <div class="fw-bold">{{ $toolName }}</div>
                  <div class="fs-4 fw-semibold">{{ $stats['byDevTool'][$toolName] ?? 0 }}</div>
                </div>
              </div>
            </a>
          </div>
        @endforeach
      </div>
    </div>

    {{-- 專案列表（Redmine 風格階層表格） --}}
    @php
      $allProjects = $projects->getCollection();
      $projectMap  = $allProjects->keyBy('id');

      // 根專案：parent_id 為 null，或父專案不在目前結果集（例如被篩選掉）
      $rootProjects = $allProjects->filter(
        fn($p) => is_null($p->parent_id) || !$projectMap->has($p->parent_id)
      );

      // 依客戶分組，按 clientScore 排序（全結束客戶排最後，未分類排次後）
      $typeRankView = ['產品' => 1, '結束' => 99];
      foreach ($projectTypes as $i => $t) { $typeRankView[$t->label] = $i + 2; }
      $byClient = $rootProjects
        ->sortBy(function ($p) use ($clientScore) {
          $score = $clientScore[(string)($p->client_id ?? 'null')] ?? 9;
          $name  = $p->client?->name ?? 'zzzzz';
          return sprintf('%02d_%s', $score, $name);
        })
        ->groupBy(fn($p) => $p->client?->name ?? '⚠ 未分類');
    @endphp

    @if ($projects->isEmpty())
      <p class="text-center text-muted py-5">找不到符合條件的專案。</p>
    @else
      @foreach ($byClient as $clientName => $clientRoots)
        <div class="mb-4">
          {{-- 客戶群組標題 --}}
          <div class="d-flex align-items-center gap-2 px-3 py-2 rounded-top"
            style="background:linear-gradient(90deg,#e8f4f8,#f4f8fb);border:1px solid #c8dde8;border-bottom:none;">
            <i class="bi bi-building text-primary"></i>
            <span class="fw-bold text-primary">{{ $clientName }}</span>
            <span class="badge bg-primary bg-opacity-25 text-primary ms-1">{{ $clientRoots->count() }} 個專案</span>
          </div>
          {{-- 表格 --}}
          <div class="table-responsive border rounded-bottom" style="border-color:#c8dde8 !important;">
            <table class="table table-sm table-hover align-middle mb-0" style="font-size:.9rem;">
              <thead style="background:#f0f6fa;">
                <tr>
                  <th style="min-width:220px;">專案名稱</th>
                  <th style="width:70px;">類型</th>
                  <th style="width:90px;">開發框架</th>
                  <th style="width:100px;">開始日期</th>
                  <th style="width:100px;">結束日期</th>
                  <th style="width:55px;" class="text-center">成員</th>
                  <th style="width:110px;"></th>
                </tr>
              </thead>
              <tbody>
                @foreach ($clientRoots->sortBy(function ($p) use ($treeEnded) {
                    return sprintf('%d_%s', ($treeEnded[$p->id] ?? false) ? 1 : 0, $p->name);
                  }) as $project)
                  @include('projects._project_row', [
                    'project'    => $project,
                    'depth'      => 0,
                    'projectMap' => $projectMap,
                  ])
                @endforeach
              </tbody>
            </table>
          </div>
        </div>
      @endforeach
    @endif

  </div>
@endsection