@extends('layouts.app')
@section('title', $department->name . ' — 部門成員')

@section('content')
<div class="container py-4" style="max-width:760px;">

  <div class="d-flex align-items-center justify-content-between mb-4">
    <div>
      <h4 class="mb-0 fw-bold">
        <i class="bi bi-diagram-3 me-2"></i>{{ $department->name }}
      </h4>
      <span class="text-muted small">
        共 {{ $supervisors->count() + $members->count() }} 位成員
      </span>
    </div>
    <a href="{{ route('settings.departments.index') }}" class="btn btn-sm btn-outline-secondary">
      <i class="bi bi-arrow-left me-1"></i>返回部門列表
    </a>
  </div>

  {{-- 主管 --}}
  <div class="card mb-3 shadow-sm">
    <div class="card-header bg-warning-subtle fw-semibold d-flex align-items-center gap-2">
      <i class="bi bi-person-check text-warning"></i>主管
      <span class="badge bg-warning text-dark">{{ $supervisors->count() }}</span>
    </div>
    <div class="card-body p-0">
      @if($supervisors->isEmpty())
        <p class="text-muted text-center py-3 mb-0 small">此部門尚未指定主管</p>
      @else
        <div class="table-responsive"><table class="table table-hover align-middle mb-0">
          <thead class="table-light" style="font-size:13px;">
            <tr>
              <th>姓名</th>
              <th>職稱</th>
              <th>Email</th>
              <th class="text-center">身份</th>
            </tr>
          </thead>
          <tbody>
            @foreach($supervisors as $u)
            <tr>
              <td class="fw-medium">{{ $u->name }}</td>
              <td class="text-muted small">{{ $u->position ?: '—' }}</td>
              <td class="text-muted small">{{ $u->email }}</td>
              <td class="text-center">
                @if($u->role === 'admin')
                  <span class="badge bg-danger">管理員</span>
                @else
                  <span class="badge bg-warning text-dark">主管</span>
                @endif
              </td>
            </tr>
            @endforeach
          </tbody>
        </table></div>
      @endif
    </div>
  </div>

  {{-- 成員 --}}
  <div class="card shadow-sm">
    <div class="card-header bg-light fw-semibold d-flex align-items-center gap-2">
      <i class="bi bi-people text-primary"></i>成員
      <span class="badge bg-secondary">{{ $members->count() }}</span>
    </div>
    <div class="card-body p-0">
      @if($members->isEmpty())
        <p class="text-muted text-center py-3 mb-0 small">此部門尚無一般成員</p>
      @else
        <div class="table-responsive"><table class="table table-hover align-middle mb-0">
          <thead class="table-light" style="font-size:13px;">
            <tr>
              <th>姓名</th>
              <th>職稱</th>
              <th>Email</th>
            </tr>
          </thead>
          <tbody>
            @foreach($members as $u)
            <tr>
              <td class="fw-medium">{{ $u->name }}</td>
              <td class="text-muted small">{{ $u->position ?: '—' }}</td>
              <td class="text-muted small">{{ $u->email }}</td>
            </tr>
            @endforeach
          </tbody>
        </table></div>
      @endif
    </div>
  </div>

</div>
@endsection