@extends('layouts.app')
@section('title', '專案清單')

@push('styles')
<style>
/* ══════════════════════════════════════════
   Redmine 5.x 風格  ─  專案清單
══════════════════════════════════════════ */

/* 覆蓋 layouts/app 的 container padding */
.rm5-root .container-fluid { padding: 0 !important; }

/* 頂部深藍欄 */
.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;
  white-space: nowrap;
}
.rm5-topbar-search {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: #dde;
}
.rm5-topbar-search input[type=text] {
  padding: 3px 8px;
  font-size: 12px;
  border: 1px solid #8899bb;
  border-radius: 3px;
  background: #5a6680;
  color: #fff;
  width: 180px;
}
.rm5-topbar-search input[type=text]::placeholder { color: #aabbcc; }
.rm5-topbar-search select {
  padding: 3px 6px;
  font-size: 12px;
  border: 1px solid #8899bb;
  border-radius: 3px;
  background: #5a6680;
  color: #fff;
}

/* Tab 導覽列 */
.rm5-tabs {
  background: #5d6880;
  display: flex;
  align-items: flex-end;
  padding: 0 12px;
  gap: 2px;
  min-height: 38px;
}
.rm5-tabs a {
  display: block;
  padding: 8px 14px 6px;
  color: #ccd6ee;
  font-size: 13px;
  text-decoration: none;
  border: 1px solid transparent;
  border-bottom: none;
  border-radius: 3px 3px 0 0;
  margin-bottom: 0;
  white-space: nowrap;
  line-height: 1.4;
}
.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-tabs-spacer { flex: 1; }
.rm5-tabs-right {
  display: flex;
  align-items: center;
  padding-bottom: 5px;
  gap: 6px;
}

/* 頁面主體 */
.rm5-page { background: #f5f5f5; min-height: 60vh; padding: 16px 20px 30px; font-family: "Noto Sans TC", Arial, sans-serif; font-size: 13px; color: #333; }
.rm5-page h1 { font-size: 20px; font-weight: bold; margin: 0 0 14px; color: #222; }

/* 篩選器 */
.rm5-filter-wrap { background: #fff; border: 1px solid #d0d0d0; border-radius: 3px; margin-bottom: 16px; }
.rm5-filter-head {
  padding: 7px 12px;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  color: #555;
  user-select: none;
}
.rm5-filter-head:hover { background: #fafafa; }
.rm5-filter-arrow { display: inline-block; transition: transform .15s; }
.rm5-filter-body { padding: 10px 14px 14px; border-top: 1px solid #eee; }
.rm5-filter-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 8px; font-size: 12px; }
.rm5-filter-row label { color: #555; width: 60px; }
.rm5-filter-row input, .rm5-filter-row select { padding: 3px 7px; border: 1px solid #ccc; border-radius: 2px; font-size: 12px; }
.rm5-filter-actions { display: flex; gap: 8px; margin-top: 10px; }
.rm5-filter-link { color: #2c5f9a; text-decoration: none; font-size: 12px; cursor: pointer; display: flex; align-items: center; gap: 3px; }
.rm5-filter-link:hover { text-decoration: underline; }

/* 按鈕 */
.rm5-btn { display: inline-block; padding: 4px 11px; background: #e8e8e8; border: 1px solid #aaa; border-radius: 3px; font-size: 12px; color: #333; text-decoration: none; cursor: pointer; white-space: nowrap; }
.rm5-btn:hover { background: #d8d8d8; color: #222; text-decoration: none; }
.rm5-btn-primary { background: #3e75c3; border-color: #2d5fa0; color: #fff; }
.rm5-btn-primary:hover { background: #325fa8; color: #fff; }
.rm5-btn-sm { padding: 2px 8px; font-size: 11px; }
.rm5-btn-toggle { background: #e8eef7; border-color: #aabcd8; color: #2c5f9a; font-size: 12px; }
.rm5-btn-toggle:hover { background: #d5e3f5; }

/* 多欄卡片格線 */
.rm5-grid {
  columns: 3;
  column-gap: 14px;
}
@media (max-width: 1100px) { .rm5-grid { columns: 2; } }
@media (max-width: 700px)  { .rm5-grid { columns: 1; } }

/* 單個客戶卡片 */
.rm5-card {
  break-inside: avoid;
  background: #fff;
  border: 1px solid #d4d4d4;
  border-radius: 3px;
  margin-bottom: 14px;
  overflow: hidden;
  display: inline-block;   /* 讓 columns 正確 break */
  width: 100%;
}
.rm5-card-header {
  padding: 9px 12px;
  font-size: 14px;
  font-weight: bold;
  display: flex;
  align-items: center;
  gap: 6px;
  border-bottom: 1px solid #eee;
}
.rm5-card-header a { color: #2c5f9a; text-decoration: none; }
.rm5-card-header a:hover { text-decoration: underline; }
.rm5-member-icon { font-size: 15px; color: #8aaa66; }

/* 專案列表 */
.rm5-proj-list { padding: 6px 0; }
.rm5-proj-item { padding: 4px 12px 4px 20px; display: flex; align-items: baseline; gap: 6px; font-size: 13px; position: relative; }
.rm5-proj-item:hover { background: #f0f6ff; }
.rm5-proj-item a { color: #2c6eb0; text-decoration: none; }
.rm5-proj-item a:hover { text-decoration: underline; }
.rm5-proj-sub { padding-left: 36px; border-left: 2px solid #d8e4f0; margin-left: 22px; }
.rm5-proj-sub .rm5-proj-item { padding-left: 8px; }
.rm5-proj-desc { color: #888; font-size: 11px; padding: 2px 12px 4px 20px; }

/* 類型標籤 */
.rm5-type { display: inline-block; padding: 1px 6px; border-radius: 9px; font-size: 10px; font-weight: bold; }
.rm5-type-dev  { background: #dce9f7; color: #2d6094; }
.rm5-type-maint{ background: #dff0d8; color: #2d6440; }
.rm5-type-prod { background: #fdf7dc; color: #856404; }
.rm5-type-end  { background: #f0f0f0; color: #888; }
.rm5-type-war  { background: #f3e8ff; color: #6a3aa2; }

/* 到期提醒 */
.rm5-expire { background: #fff8e1; border: 1px solid #ffcc80; border-radius: 3px; padding: 10px 14px; margin-bottom: 14px; font-size: 12px; }
.rm5-expire-title { font-weight: bold; color: #e65100; margin-bottom: 5px; font-size: 13px; }

/* 無結果提示 */
#rm5NoResult { display: none; text-align: center; color: #999; padding: 40px 0; font-size: 14px; }
</style>
@endpush

@section('content')
@php
  $typeRank  = ['產品'=>1,'開發'=>2,'保固'=>3,'維護'=>4,'結束'=>5];
  $typeCls   = ['開發'=>'rm5-type-dev','維護'=>'rm5-type-maint','產品'=>'rm5-type-prod','結束'=>'rm5-type-end','保固'=>'rm5-type-war'];
  $viewMode  = \App\Models\UserUiPreference::viewMode();
@endphp

{{-- ── 頂部深藍欄 ── --}}
<div class="rm5-topbar">
  <a href="{{ route('projects.list') }}" class="rm5-topbar-brand">{{ config('app.company_name') }} 專案管理平台</a>
  <div class="rm5-topbar-search">
    <span>搜尋：</span>
    <input type="text" id="rm5SearchTop" placeholder="搜尋…">
    <select id="rm5TypeTop">
      <option value="">選擇欲篩選類型</option>
      <option value="開發">開發</option>
      <option value="保固">保固</option>
      <option value="維護">維護</option>
      <option value="產品">產品</option>
      <option value="結束">結束</option>
    </select>
  </div>
</div>

{{-- ── Tab 導覽 ── --}}
<div class="rm5-tabs">
  <a href="{{ route('projects.index') }}" class="active">專案清單</a>
  <a href="{{ route('projects.activity') }}">活動</a>
  <a href="{{ route('projects.globalIssues') }}">議題清單</a>
  <div class="rm5-tabs-spacer"></div>
  <div class="rm5-tabs-right">
    @can('create', App\Models\Project::class)
      <a href="{{ route('projects.create') }}" class="rm5-btn rm5-btn-primary">+ 新增專案</a>
    @endcan
  </div>
</div>

{{-- ── 頁面主體 ── --}}
<div class="rm5-page" style="position:relative;">


  <h1>專案清單</h1>

  {{-- 到期提醒 --}}
  @if ($soonToExpire->count())
  <div class="rm5-expire">
    <div class="rm5-expire-title">⏰ 即將到期專案提醒</div>
    <ul style="margin:0;padding-left:18px;">
      @foreach ($soonToExpire->sortBy(fn($p)=>\Carbon\Carbon::parse($p->end_date)->timestamp) as $exp)
        @php
          $end = \Carbon\Carbon::parse($exp->end_date);
          $daysLeft = \Carbon\Carbon::now()->floatDiffInRealDays($end, false);
        @endphp
        @if ($daysLeft > 0)
        <li>
          <strong>{{ $exp->name }}</strong>（{{ $exp->client?->name ?? '未分類' }}）
          — 結束日：<span style="color:#c0392b">{{ $end->format('Y-m-d') }}</span>
          （剩 {{ number_format($daysLeft, 0) }} 天）
          @can('update', $exp)
            <a href="{{ route('projects.edit', $exp) }}" class="rm5-filter-link" style="display:inline">[編輯]</a>
          @endcan
        </li>
        @endif
      @endforeach
    </ul>
  </div>
  @endif

  {{-- 篩選器 --}}
  <div class="rm5-filter-wrap" id="rm5FilterWrap">
    <button type="button" class="rm5-filter-head" onclick="toggleFilter()"
            style="width:100%;text-align:left;border:none;background:none;cursor:pointer;">
      <span class="rm5-filter-arrow" id="rm5FilterArrow">&#9660;</span>
      <span>篩選條件</span>
    </button>
    <div class="rm5-filter-body" id="rm5FilterBody">
      <div class="rm5-filter-row">
        <label for="rm5TypeFilter">狀態</label>
        <span>等於</span>
        <select id="rm5TypeFilter">
          <option value="">使用中（全部）</option>
          <option value="開發">開發</option>
          <option value="保固">保固</option>
          <option value="維護">維護</option>
          <option value="產品">產品</option>
          <option value="結束">結束</option>
        </select>
      </div>
      <div class="rm5-filter-row">
        <label for="rm5SearchFilter">關鍵字</label>
        <input type="text" id="rm5SearchFilter" placeholder="搜尋專案或客戶名稱…" style="width:240px">
      </div>
      <div class="rm5-filter-actions">
        <button type="button" class="rm5-filter-link" onclick="applyFilter()">
          <span style="color:#3a3;font-size:16px;">&#10003;</span> 套用
        </button>
        <button type="button" class="rm5-filter-link" onclick="clearFilter()">
          <span style="font-size:14px;">&#8635;</span> 清除
        </button>
        @can('create', App\Models\Project::class)
        <a href="{{ route('projects.export', ['type' => 'xlsx']) }}" class="rm5-filter-link">
          &#128202; 匯出 Excel
        </a>
        <a href="{{ route('projects.export', ['type' => 'csv']) }}" class="rm5-filter-link">
          &#128196; 匯出 CSV
        </a>
        @endcan
      </div>
    </div>
  </div>

  {{-- 選項清單（摺疊） --}}
  <div class="rm5-filter-wrap" style="margin-bottom:16px;">
    <button type="button" class="rm5-filter-head"
            onclick="this.nextElementSibling.classList.toggle('d-none')"
            style="width:100%;text-align:left;border:none;background:none;cursor:pointer;color:#888;">
      <span>&#9658;</span> <span>選項清單</span>
    </button>
    <div class="rm5-filter-body d-none" style="color:#888;font-size:12px;">
      目前無自訂選項。
    </div>
  </div>

  {{-- 多欄卡片 --}}
  @php
    $grouped = $projects->groupBy(fn($p) => $p->client?->name ?? '(未分類)');
  @endphp

  <div class="rm5-grid" id="rm5Grid">
    @foreach ($grouped as $clientName => $clientProjects)
    @php
      $safeId = 'rc_' . $loop->index;
      $topLevel = $clientProjects->whereNull('parent_id');
      $children  = $clientProjects->whereNotNull('parent_id')->groupBy('parent_id');
    @endphp
    <div class="rm5-card" id="{{ $safeId }}"
         data-client="{{ strtolower($clientName) }}"
         data-types="{{ $clientProjects->pluck('project_type')->unique()->implode(',') }}">

      <div class="rm5-card-header">
        <span class="rm5-member-icon">&#128100;</span>
        <a href="#">{{ $clientName }}</a>
      </div>

      <div class="rm5-proj-list">
        @foreach ($topLevel->sortBy(fn($p)=>$typeRank[$p->project_type]??5) as $p)
          <div class="rm5-proj-item"
               data-name="{{ strtolower($p->name) }}"
               data-type="{{ $p->project_type }}">
            <span class="rm5-type {{ $typeCls[$p->project_type] ?? 'rm5-type-end' }}">{{ $p->project_type }}</span>
            <a href="{{ route('projects.show', $p) }}">{{ $p->name }}</a>
            @can('update', $p)
              <span style="font-size:11px;color:#aaa">&#128100;</span>
            @endcan
          </div>
          @if($p->description)
            <div class="rm5-proj-desc">{{ Str::limit($p->description, 60) }}</div>
          @endif

          {{-- 子專案 --}}
          @if(isset($children[$p->id]) && $children[$p->id]->count())
          <div class="rm5-proj-sub">
            @foreach($children[$p->id]->sortBy(fn($c)=>$c->name) as $child)
            <div class="rm5-proj-item"
                 data-name="{{ strtolower($child->name) }}"
                 data-type="{{ $child->project_type }}">
              <span class="rm5-type {{ $typeCls[$child->project_type] ?? 'rm5-type-end' }}">{{ $child->project_type }}</span>
              <a href="{{ route('projects.show', $child) }}">{{ $child->name }}</a>
              @can('update', $child)<span style="font-size:11px;color:#aaa">&#128100;</span>@endcan
            </div>
            @endforeach
          </div>
          @endif
        @endforeach
      </div>

      @can('update', $clientProjects->first())
      <div style="padding:6px 12px; border-top:1px solid #eee; background:#fafafa;">
        <a href="{{ route('projects.create') }}" class="rm5-filter-link" style="font-size:11px;">+ 新增此客戶專案</a>
      </div>
      @endcan
    </div>
    @endforeach
  </div>

  <div id="rm5NoResult">找不到符合的專案。</div>

</div>{{-- /rm5-page --}}
@endsection

@push('scripts')
<script>
/* ── 篩選器收合 ── */
function toggleFilter() {
  var body  = document.getElementById('rm5FilterBody');
  var arrow = document.getElementById('rm5FilterArrow');
  var open  = body.style.display !== 'none';
  body.style.display  = open ? 'none' : '';
  arrow.textContent   = open ? '▶' : '▼';
}

/* ── 篩選邏輯 ── */
var _q    = '';
var _type = '';

function applyFilter() {
  _q    = (document.getElementById('rm5SearchFilter').value || '').toLowerCase().trim();
  _type = document.getElementById('rm5TypeFilter').value;
  doFilter();
}
function clearFilter() {
  document.getElementById('rm5SearchFilter').value = '';
  document.getElementById('rm5TypeFilter').value   = '';
  document.getElementById('rm5SearchTop').value    = '';
  document.getElementById('rm5TypeTop').value      = '';
  _q = ''; _type = '';
  doFilter();
}

function doFilter() {
  var anyVisible = false;
  document.querySelectorAll('#rm5Grid .rm5-card').forEach(function(card) {
    var client = card.dataset.client || '';
    var rows   = card.querySelectorAll('.rm5-proj-item');
    var cardVisible = false;

    rows.forEach(function(row) {
      var name    = row.dataset.name || '';
      var rowType = row.dataset.type || '';
      var match   = (!_q    || name.indexOf(_q) >= 0 || client.indexOf(_q) >= 0)
                 && (!_type || rowType === _type);
      row.style.display = match ? '' : 'none';
      if (match) cardVisible = true;
    });

    card.style.display = cardVisible ? '' : 'none';
    if (cardVisible) anyVisible = true;
  });
  document.getElementById('rm5NoResult').style.display = anyVisible ? 'none' : '';
}

/* 頂部搜尋框即時篩選 */
document.getElementById('rm5SearchTop').addEventListener('input', function() {
  _q = this.value.toLowerCase().trim();
  document.getElementById('rm5SearchFilter').value = this.value;
  doFilter();
});
document.getElementById('rm5TypeTop').addEventListener('change', function() {
  _type = this.value;
  document.getElementById('rm5TypeFilter').value = this.value;
  doFilter();
});
document.getElementById('rm5SearchFilter').addEventListener('input', function() {
  _q = this.value.toLowerCase().trim();
});
</script>
@endpush