@extends('layouts.app')

@section('content')
<div class="container">
  <div class="d-flex justify-content-between align-items-center mb-4">
    <h1>{{ $project['name'] }}</h1>
    <div>
      <a href="{{ route('redmine-projects.edit', $project['id']) }}" class="btn btn-warning me-1">
        <i class="bi bi-pencil"></i> 編輯
      </a>
      <a href="{{ route('redmine-projects.index') }}" class="btn btn-outline-secondary">
        <i class="bi bi-arrow-left"></i> 返回列表
      </a>
    </div>
  </div>

  @if (session('success'))
    <div class="alert alert-success">{{ session('success') }}</div>
  @endif
  @if ($errors->any())
    <div class="alert alert-danger">{{ $errors->first() }}</div>
  @endif

  {{-- 專案資訊 --}}
  <div class="card mb-4">
    <div class="card-header bg-success text-white">
      <i class="bi bi-folder"></i> 專案資訊
    </div>
    <div class="card-body">
      <div class="row">
        <div class="col-md-6">
          <div class="table-responsive"><table class="table table-borderless mb-0">
            <tr>
              <th class="text-muted" style="width:140px">專案 ID</th>
              <td>{{ $project['id'] }}</td>
            </tr>
            <tr>
              <th class="text-muted">Identifier</th>
              <td><code>{{ $project['identifier'] }}</code></td>
            </tr>
            <tr>
              <th class="text-muted">狀態</th>
              <td>
                @if (($project['status'] ?? 0) == 1)
                  <span class="badge bg-success">啟用中</span>
                @else
                  <span class="badge bg-secondary">已關閉</span>
                @endif
              </td>
            </tr>
          </table></div>
        </div>
        <div class="col-md-6">
          <div class="table-responsive"><table class="table table-borderless mb-0">
            <tr>
              <th class="text-muted" style="width:140px">公開</th>
              <td>{{ ($project['is_public'] ?? false) ? '是' : '否' }}</td>
            </tr>
            <tr>
              <th class="text-muted">建立時間</th>
              <td>{{ \Carbon\Carbon::parse($project['created_on'])->format('Y-m-d H:i') }}</td>
            </tr>
            <tr>
              <th class="text-muted">更新時間</th>
              <td>{{ \Carbon\Carbon::parse($project['updated_on'])->format('Y-m-d H:i') }}</td>
            </tr>
          </table></div>
        </div>
      </div>
      @if (!empty($project['description']))
        <hr>
        <p class="mb-0">{{ $project['description'] }}</p>
      @endif
    </div>
  </div>

  {{-- 追蹤標籤 --}}
  @if (!empty($project['trackers']))
  <div class="card mb-4">
    <div class="card-header bg-secondary text-white">
      <i class="bi bi-tags"></i> 啟用的追蹤標籤
    </div>
    <div class="card-body">
      @foreach ($project['trackers'] as $tracker)
        <span class="badge bg-info text-dark me-1 mb-1">{{ $tracker['name'] }}</span>
      @endforeach
    </div>
  </div>
  @endif

  {{-- 成員列表 --}}
  <div class="card mb-4">
    <div class="card-header bg-success text-white d-flex justify-content-between align-items-center">
      <span><i class="bi bi-people"></i> 專案成員 ({{ count($members) }})</span>
      <button class="btn btn-sm btn-light" data-bs-toggle="collapse" data-bs-target="#addMemberForm">
        <i class="bi bi-person-plus"></i> 新增成員
      </button>
    </div>

    {{-- 新增成員表單 --}}
    <div class="collapse" id="addMemberForm">
      <div class="card-body border-bottom bg-light">
        <form action="{{ route('redmine-projects.add-member', $project['id']) }}" method="POST" class="row g-3 align-items-end">
          @csrf
          <div class="col-md-5">
            <label class="form-label fw-bold" for="user_id">Redmine 使用者 ID</label>
            <input type="number" name="user_id" class="form-control" required placeholder="輸入 Redmine 使用者 ID" id="user_id">
          </div>
          <div class="col-md-4">
            <label class="form-label fw-bold" for="role_ids">角色</label>
            <select name="role_ids[]" class="form-select" required id="role_ids">
              @foreach ($roles as $role)
                <option value="{{ $role['id'] }}">{{ $role['name'] }}</option>
              @endforeach
            </select>
          </div>
          <div class="col-md-3">
            <button type="submit" class="btn btn-success w-100">
              <i class="bi bi-plus-lg"></i> 加入
            </button>
          </div>
        </form>
      </div>
    </div>

    <div class="card-body">
      @if (count($members) > 0)
      <div class="table-responsive"><table class="table table-hover align-middle mb-0">
        <thead class="table-light">
          <tr>
            <th>使用者</th>
            <th>角色</th>
            <th style="width:80px">操作</th>
          </tr>
        </thead>
        <tbody>
          @foreach ($members as $member)
          <tr>
            <td>
              @if (!empty($member['user']))
                <i class="bi bi-person"></i>
                {{ $member['user']['name'] ?? '未知' }}
              @elseif (!empty($member['group']))
                <i class="bi bi-people"></i>
                {{ $member['group']['name'] ?? '群組' }}
              @endif
            </td>
            <td>
              @foreach ($member['roles'] ?? [] as $r)
                <span class="badge bg-outline-secondary border">{{ $r['name'] }}</span>
              @endforeach
            </td>
            <td>
              <form action="{{ route('redmine-projects.remove-member', [$project['id'], $member['id']]) }}" method="POST"
                    onsubmit="return confirm('確定移除此成員？')">
                @csrf @method('DELETE')
                <button class="btn btn-sm btn-danger">
                  <i class="bi bi-person-x"></i> 移除
                </button>
              </form>
            </td>
          </tr>
          @endforeach
        </tbody>
      </table></div>
      @else
        <p class="text-muted mb-0">尚無成員</p>
      @endif
    </div>
  </div>
</div>
@endsection