@extends('layouts.app')
@section('title', '看板')

@push('styles')
<style>
.boards-hero {
  text-align: center;
  padding: 3rem 1rem 2.5rem;
}
.boards-hero-icon {
  width: 72px;
  height: 72px;
  border-radius: 20px;
  background: linear-gradient(135deg, #6366f1, #8b5cf6);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 2rem;
  color: #fff;
  margin-bottom: 1.25rem;
  box-shadow: 0 8px 24px rgba(99,102,241,.35);
}
.boards-hero h1 {
  font-size: 1.75rem;
  font-weight: 700;
  color: #1e293b;
  margin-bottom: .4rem;
}
.boards-hero p {
  color: #64748b;
  font-size: .95rem;
}

/* Board entry card */
.board-entry {
  display: block;
  text-decoration: none;
  border-radius: 20px;
  overflow: hidden;
  position: relative;
  transition: transform .22s cubic-bezier(.34,1.56,.64,1), box-shadow .22s ease;
  box-shadow: 0 2px 12px rgba(0,0,0,.07);
  background: #fff;
  height: 100%;
}
.board-entry:hover {
  transform: translateY(-6px);
  box-shadow: 0 16px 40px rgba(0,0,0,.13);
}
.board-entry-header {
  padding: 2rem 1.75rem 1.5rem;
  position: relative;
  overflow: hidden;
}
.board-entry-header::after {
  content: '';
  position: absolute;
  right: -20px;
  bottom: -20px;
  width: 100px;
  height: 100px;
  border-radius: 50%;
  background: rgba(255,255,255,.15);
}
.board-entry-header::before {
  content: '';
  position: absolute;
  right: 30px;
  bottom: 10px;
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background: rgba(255,255,255,.1);
}
.board-entry-icon-wrap {
  width: 56px;
  height: 56px;
  border-radius: 16px;
  background: rgba(255,255,255,.25);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.6rem;
  color: #fff;
  margin-bottom: .75rem;
  backdrop-filter: blur(4px);
}
.board-entry-header h5 {
  color: #fff;
  font-size: 1.15rem;
  font-weight: 700;
  margin-bottom: .2rem;
}
.board-entry-header .board-tag {
  display: inline-block;
  padding: .15rem .65rem;
  border-radius: 20px;
  background: rgba(255,255,255,.22);
  color: rgba(255,255,255,.9);
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .04em;
}
.board-entry-body {
  padding: 1.25rem 1.75rem 1.5rem;
}
.board-entry-body p {
  color: #64748b;
  font-size: .875rem;
  line-height: 1.6;
  margin-bottom: 1.1rem;
}
.board-entry-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .5rem;
  flex-wrap: wrap;
}
.board-entry-features {
  display: flex;
  gap: .5rem;
  flex-wrap: wrap;
}
.board-feature-chip {
  display: inline-flex;
  align-items: center;
  gap: .3rem;
  padding: .2rem .6rem;
  border-radius: 8px;
  font-size: .72rem;
  font-weight: 500;
  background: #f1f5f9;
  color: #475569;
}
.board-entry-cta {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  font-size: .82rem;
  font-weight: 600;
  padding: .4rem .9rem;
  border-radius: 10px;
  border: none;
  cursor: pointer;
  transition: opacity .15s;
  text-decoration: none;
  white-space: nowrap;
}
.board-entry-cta:hover { opacity: .85; }

/* colour themes */
.theme-green  .board-entry-header { background: linear-gradient(135deg, #10b981, #059669); }
.theme-green  .board-entry-cta    { background: #d1fae5; color: #065f46; }
.theme-blue   .board-entry-header { background: linear-gradient(135deg, #3b82f6, #2563eb); }
.theme-blue   .board-entry-cta    { background: #dbeafe; color: #1e40af; }
.theme-red    .board-entry-header { background: linear-gradient(135deg, #ef4444, #dc2626); }
.theme-red    .board-entry-cta    { background: #fee2e2; color: #991b1b; }
.theme-purple .board-entry-header { background: linear-gradient(135deg, #6366f1, #8b5cf6); }
.theme-purple .board-entry-cta    { background: #ede9fe; color: #4c1d95; }

/* 4 個看板：限制 row 最大寬度，col-sm-6 在任何螢幕都保持 2 欄 */
.boards-row-4up {
  max-width: 800px;
  margin-left: auto !important;
  margin-right: auto !important;
}
</style>
@endpush

@section('content')
<div class="container-lg py-2">

  <div class="boards-hero">
    <div class="boards-hero-icon">
      <i class="bi bi-grid-3x3-gap-fill"></i>
    </div>
    <h1>看板工作空間</h1>
    <p>選擇你的看板，開始高效率的工作管理</p>
  </div>

  @php $col = $canUseWorkBoard ? 'col-12 col-sm-6' : 'col-12 col-sm-6 col-lg-4'; @endphp
  <div class="row g-4 justify-content-center pb-5 {{ $canUseWorkBoard ? 'boards-row-4up' : '' }}">

    {{-- 個人看板 --}}
    <div class="{{ $col }} d-flex">
      <a href="{{ route('personal-board.index') }}" class="board-entry theme-green w-100">
        <div class="board-entry-header">
          <div class="board-entry-icon-wrap">
            <i class="bi bi-person-workspace"></i>
          </div>
          <h5>個人看板</h5>
          <span class="board-tag">私人空間</span>
        </div>
        <div class="board-entry-body">
          <p>專屬個人的工作看板，只顯示自己建立的任務，專注管理個人工作進度。</p>
          <div class="board-entry-footer">
            <div class="board-entry-features">
              <span class="board-feature-chip"><i class="bi bi-lock"></i>僅自己可見</span>
              <span class="board-feature-chip"><i class="bi bi-columns-gap"></i>自訂泳道</span>
            </div>
            <span class="board-entry-cta">
              進入 <i class="bi bi-arrow-right"></i>
            </span>
          </div>
        </div>
      </a>
    </div>

    {{-- 工作看板 --}}
    @if($canUseWorkBoard)
    <div class="{{ $col }} d-flex">
      <a href="{{ route('work-board.index') }}" class="board-entry theme-blue w-100">
        <div class="board-entry-header">
          <div class="board-entry-icon-wrap">
            <i class="bi bi-kanban-fill"></i>
          </div>
          <h5>工作看板</h5>
          <span class="board-tag">團隊協作</span>
        </div>
        <div class="board-entry-body">
          <p>團隊共用看板，追蹤所有成員的任務狀態與進度，即時掌握工作全貌。</p>
          <div class="board-entry-footer">
            <div class="board-entry-features">
              <span class="board-feature-chip"><i class="bi bi-people"></i>多人協作</span>
              <span class="board-feature-chip"><i class="bi bi-bar-chart"></i>進度追蹤</span>
            </div>
            <span class="board-entry-cta">
              進入 <i class="bi bi-arrow-right"></i>
            </span>
          </div>
        </div>
      </a>
    </div>
    @endif

    {{-- 專案管理看板 --}}
    <div class="{{ $col }} d-flex">
      <a href="{{ route('project-board.board') }}" class="board-entry theme-purple w-100">
        <div class="board-entry-header">
          <div class="board-entry-icon-wrap">
            <i class="bi bi-clipboard2-check-fill"></i>
          </div>
          <h5>專案管理看板</h5>
          <span class="board-tag">本地議題</span>
        </div>
        <div class="board-entry-body">
          <p>直接串接專案管理系統的議題資料，依狀態分欄管理，支援拖拉排序與即時更新。</p>
          <div class="board-entry-footer">
            <div class="board-entry-features">
              <span class="board-feature-chip"><i class="bi bi-database"></i>本地資料</span>
              <span class="board-feature-chip"><i class="bi bi-layers"></i>議題管理</span>
            </div>
            <span class="board-entry-cta">
              進入 <i class="bi bi-arrow-right"></i>
            </span>
          </div>
        </div>
      </a>
    </div>

    {{-- Redmine 看板（已停用）--}}

  </div>
</div>
@endsection