{{-- resources/views/projects/members/index.blade.php --}}
@extends('layouts.app')

@section('content')
@include('projects._nav')
  <div class="container py-4">
    <h5 class="mb-4 fw-bold"><i class="bi bi-people-fill me-2"></i>管理成員</h5>

    @if(session('success'))
      <div class="alert alert-success alert-dismissible fade show">{{ session('success') }}<button type="button" class="btn-close" data-bs-dismiss="alert"></button></div>
    @endif

    @php $roleMap = $roles->keyBy('id'); @endphp

    <div class="row g-4">
      {{-- 現有成員列表 --}}
      <div class="col-lg-7">
        <div class="card shadow-sm">
          <div class="card-header bg-white d-flex justify-content-between align-items-center">
            <h6 class="mb-0 fw-semibold">現有成員（{{ $members->count() }}）</h6>
          </div>
          <div class="table-responsive">
            <table class="table table-hover align-middle mb-0">
              <thead class="table-light">
                <tr>
                  <th>姓名</th>
                  <th>帳號</th>
                  <th>專案角色</th>
                  @can('update', $project)
                  <th style="width:230px">變更角色</th>
                  <th style="width:80px"></th>
                  @endcan
                </tr>
              </thead>
              <tbody>
                @forelse ($members as $member)
                  @php $role = $roleMap[$member->pivot->role_id] ?? null; @endphp
                  <tr>
                    <td>{{ $member->name }}</td>
                    <td class="text-muted small">{{ $member->email }}</td>
                    <td>
                      @if($role)
                        <span class="badge bg-{{ $role->badge_color }}">{{ $role->label }}</span>
                      @else
                        <span class="text-muted small">未指定</span>
                      @endif
                    </td>
                    @can('update', $project)
                    <td>
                      <form action="{{ route('projects.members.update-role', [$project, $member]) }}" method="POST" class="d-flex gap-1 m-0">
                        @csrf @method('PATCH')
                        <select name="role_id" class="form-select form-select-sm" style="min-width:110px">
                          @foreach ($roles as $r)
                            <option value="{{ $r->id }}" @selected($role?->id === $r->id)>{{ $r->label }}</option>
                          @endforeach
                        </select>
                        <button type="submit" class="btn btn-sm btn-outline-primary">套用</button>
                      </form>
                    </td>
                    <td>
                      <form action="{{ route('projects.members.destroy', [$project, $member]) }}" method="POST" class="m-0">
                        @csrf @method('DELETE')
                        <button type="submit" class="btn btn-sm btn-outline-danger"
                          onclick="return confirm('確定要移除 {{ $member->name }} 嗎？')">
                          移除
                        </button>
                      </form>
                    </td>
                    @endcan
                  </tr>
                @empty
                  <tr><td colspan="5" class="text-center text-muted py-3">尚無成員</td></tr>
                @endforelse
              </tbody>
            </table>
          </div>
        </div>

        {{-- 角色速覽 --}}
        <div class="card shadow-sm mt-3">
          <div class="card-header bg-white d-flex justify-content-between align-items-center">
            <h6 class="mb-0 fw-semibold"><i class="bi bi-info-circle me-1"></i>角色一覽</h6>
            @if(auth()->user()->role === 'admin' || auth()->user()->hasModuleAdminPermission('ProjectSettingController'))
            <a href="{{ route('settings.projects.index') }}" class="btn btn-sm btn-link p-0 small">管理角色設定</a>
            @endif
          </div>
          <ul class="list-group list-group-flush">
            @foreach ($roles as $r)
              <li class="list-group-item py-2 d-flex align-items-center gap-2">
                <span class="badge bg-{{ $r->badge_color }}">{{ $r->label }}</span>
                <span class="small text-muted">
                  @php $p = []; @endphp
                  @if($r->perm_manage)        @php $p[] = '管理專案' @endphp @endif
                  @if($r->perm_edit_docs)     @php $p[] = '文件/Wiki' @endphp @endif
                  @if($r->perm_manage_issues) @php $p[] = '管理議題' @endphp @endif
                  @if($r->perm_upload_files)  @php $p[] = '上傳附件' @endphp @endif
                  {{ empty($p) ? '僅查看' : implode('、', $p) }}
                </span>
              </li>
            @endforeach
          </ul>
        </div>
      </div>

      {{-- 新增成員 --}}
      <div class="col-lg-5">
        @can('update', $project)
          <div class="card shadow-sm">
            <div class="card-header bg-white">
              <h6 class="mb-0 fw-semibold"><i class="bi bi-person-plus-fill me-2"></i>新增成員</h6>
            </div>
            <div class="card-body">
              <form action="{{ route('projects.members.store', $project) }}" method="POST">
                @csrf
                <div class="mb-3">
                  <label class="form-label fw-semibold small" for="user_id">選擇使用者</label>
                  <select name="user_id" class="form-select" required id="user_id">
                    <option value="" disabled selected>— 請選擇 —</option>
                    @foreach ($allUsers as $user)
                      @if (!$members->contains($user))
                        <option value="{{ $user->id }}">{{ $user->name }}（{{ $user->email }}）</option>
                      @endif
                    @endforeach
                  </select>
                </div>
                <div class="mb-3">
                  <label class="form-label fw-semibold small" for="role_id">專案角色</label>
                  <select name="role_id" class="form-select" required id="role_id">
                    @foreach ($roles as $r)
                      <option value="{{ $r->id }}" @selected($r->slug === 'developer')>{{ $r->label }}</option>
                    @endforeach
                  </select>
                </div>
                <button type="submit" class="btn btn-primary w-100">
                  <i class="bi bi-person-plus me-1"></i>加入成員
                </button>
              </form>
            </div>
          </div>
        @else
          <div class="alert alert-warning">你沒有權限管理此專案的成員。</div>
        @endcan
      </div>
    </div>

    <div class="mt-4">
      <a href="{{ route('projects.show', $project) }}" class="btn btn-outline-secondary">
        ← 返回專案
      </a>
    </div>
  </div>
@endsection