@extends('layouts.app')
@section('title', '部門管理')

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

  <div class="d-flex align-items-center mb-4 gap-3">
    <h4 class="mb-0 fw-bold"><i class="bi bi-diagram-3 me-2"></i>部門管理</h4>
    <span class="badge bg-danger">管理員</span>
  </div>

  @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
  @if(session('error'))
    <div class="alert alert-danger alert-dismissible fade show">{{ session('error') }}<button type="button" class="btn-close" data-bs-dismiss="alert"></button></div>
  @endif

  {{-- 新增部門 --}}
  <div class="card mb-4">
    <div class="card-header fw-semibold bg-light">新增部門</div>
    <div class="card-body">
      <form method="POST" action="{{ route('settings.departments.store') }}" class="row g-2 align-items-end">
        @csrf
        <div class="col-sm-6">
          <label for="addName" class="form-label small">部門名稱</label>
          <input type="text" id="addName" name="name" class="form-control @error('name') is-invalid @enderror"
            placeholder="例：系統資安組" value="{{ old('name') }}" required maxlength="50">
          @error('name')<div class="invalid-feedback">{{ $message }}</div>@enderror
        </div>
        <div class="col-sm-3">
          <label for="addSortOrder" class="form-label small">排序</label>
          <input type="number" id="addSortOrder" name="sort_order" class="form-control" placeholder="0" min="0" max="999" value="{{ old('sort_order', 0) }}">
        </div>
        <div class="col-sm-3">
          <button type="submit" class="btn btn-primary w-100">
            <i class="bi bi-plus-lg me-1"></i>新增
          </button>
        </div>
      </form>
    </div>
  </div>

  {{-- 部門列表 --}}
  <div class="card">
    <div class="card-header fw-semibold bg-light d-flex justify-content-between align-items-center">
      <span>部門列表 ({{ $departments->count() }})</span>
      <small class="text-muted">排序越小越前面</small>
    </div>
    <div class="card-body p-0">
      <div class="table-responsive"><table class="table table-hover mb-0">
        <thead class="table-light">
          <tr>
            <th style="width:50px">排序</th>
            <th>部門名稱</th>
            <th style="width:80px" class="text-center">狀態</th>
            <th style="width:100px" class="text-center">人數</th>
            <th style="width:160px"></th>
          </tr>
        </thead>
        <tbody>
          @forelse($departments as $dept)
          <tr class="{{ $dept->is_active ? '' : 'text-muted' }}">
            <td class="text-center">{{ $dept->sort_order }}</td>
            <td>
              <span class="fw-medium">{{ $dept->name }}</span>
              @if(!$dept->is_active)
                <span class="badge bg-secondary ms-1">停用</span>
              @endif
            </td>
            <td class="text-center">
              @if($dept->is_active)
                <span class="badge bg-success">啟用</span>
              @else
                <span class="badge bg-secondary">停用</span>
              @endif
            </td>
            <td class="text-center">
              <span class="badge bg-light text-dark border">
                {{ \App\Models\User::where('department', $dept->name)->count() }} 人
              </span>
            </td>
            <td class="text-end pe-3" style="white-space:nowrap;">
              <a href="{{ route('settings.departments.show', $dept) }}" class="btn btn-sm btn-outline-primary">
                <i class="bi bi-people"></i>
              </a>
              <button type="button" class="btn btn-sm btn-outline-secondary"
                onclick="openEdit({{ $dept->id }}, '{{ addslashes($dept->name) }}', {{ $dept->sort_order }}, {{ $dept->is_active ? 1 : 0 }})">
                <i class="bi bi-pencil"></i>
              </button>
              <form action="{{ route('settings.departments.destroy', $dept) }}" method="POST" class="d-inline"
                onsubmit="return confirm('確定刪除「{{ $dept->name }}」？')">
                @csrf @method('DELETE')
                <button type="submit" class="btn btn-sm btn-outline-danger"><i class="bi bi-trash"></i></button>
              </form>
            </td>
          </tr>
          @empty
          <tr><td colspan="5" class="text-center text-muted py-4">尚無部門資料</td></tr>
          @endforelse
        </tbody>
      </table></div>
    </div>
  </div>

</div>

{{-- 編輯 Modal --}}
<div class="modal fade" id="editModal" tabindex="-1">
  <div class="modal-dialog modal-sm">
    <div class="modal-content">
      <div class="modal-header">
        <h6 class="modal-title">編輯部門</h6>
        <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
      </div>
      <form id="editForm" method="POST">
        @csrf @method('PATCH')
        <div class="modal-body">
          <div class="mb-3">
            <label for="editName" class="form-label">部門名稱</label>
            <input type="text" name="name" id="editName" class="form-control" required maxlength="50">
          </div>
          <div class="mb-3">
            <label for="editSortOrder" class="form-label">排序</label>
            <input type="number" name="sort_order" id="editSortOrder" class="form-control" min="0" max="999">
          </div>
          <div class="form-check">
            <input type="checkbox" name="is_active" id="editIsActive" class="form-check-input" value="1">
            <label class="form-check-label" for="editIsActive">啟用</label>
          </div>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-sm btn-outline-secondary" data-bs-dismiss="modal">取消</button>
          <button type="submit" class="btn btn-sm btn-primary">儲存</button>
        </div>
      </form>
    </div>
  </div>
</div>

@push('scripts')
<script>
function openEdit(id, name, sortOrder, isActive) {
    document.getElementById('editForm').action = '/settings/departments/' + id;
    document.getElementById('editName').value = name;
    document.getElementById('editSortOrder').value = sortOrder;
    document.getElementById('editIsActive').checked = isActive === 1;
    new bootstrap.Modal(document.getElementById('editModal')).show();
}
</script>
@endpush
@endsection