@extends('layouts.app')
@section('title', '功能管理中心')

@php
use App\Http\Controllers\ModulePermissionController;

$groupMeta = [
    '人事服務' => ['icon' => 'bi-people',        'bg' => '#ede9fe', 'color' => '#6d28d9'],
    '資安服務' => ['icon' => 'bi-shield-lock',   'bg' => '#fee2e2', 'color' => '#b91c1c'],
    '主機管理' => ['icon' => 'bi-server',        'bg' => '#e0f2fe', 'color' => '#0369a1'],
    '資安'     => ['icon' => 'bi-shield-check',  'bg' => '#fef9c3', 'color' => '#854d0e'],
    '專案'     => ['icon' => 'bi-kanban',         'bg' => '#dbeafe', 'color' => '#1d4ed8'],
    '功能管理' => ['icon' => 'bi-gear',           'bg' => '#fef3c7', 'color' => '#b45309'],
    '系統'     => ['icon' => 'bi-cpu',            'bg' => '#f1f5f9', 'color' => '#475569'],
    '其他'     => ['icon' => 'bi-grid',           'bg' => '#faf5ff', 'color' => '#7c3aed'],
];
@endphp

@push('styles')
<style>
.fc-page {
  max-width: 1380px;
  margin: 0 auto;
  padding: 44px 32px 80px;
}
.fc-page-title {
  font-size: 1.75rem;
  font-weight: 800;
  color: #0f172a;
  margin-bottom: 6px;
  letter-spacing: -.02em;
}
.fc-page-sub { font-size: .9rem; color: #94a3b8; margin-bottom: 40px; }

.fc-cols {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
  gap: 20px;
  align-items: start;
}

.fc-section {
  border-radius: 20px;
  border: 1px solid #e2e8f0;
  background: #fff;
  overflow: hidden;
  box-shadow: 0 2px 12px rgba(0,0,0,.06);
}
.fc-sec-head {
  padding: 22px 24px 20px;
  border-bottom: 1px solid #f1f5f9;
  display: flex;
  align-items: center;
  gap: 16px;
}
.fc-sec-icon {
  width: 52px; height: 52px;
  border-radius: 14px;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.4rem; flex-shrink: 0;
}
.fc-sec-title {
  font-size: 1.05rem;
  font-weight: 800;
  color: #0f172a;
  letter-spacing: -.01em;
  margin-bottom: 3px;
}
.fc-sec-sub { font-size: .78rem; color: #94a3b8; }

.fc-list {
  display: flex;
  flex-direction: column;
  padding: 14px;
  gap: 8px;
}

.fc-item {
  background: #f8fafc;
  border: 1px solid #e8edf2;
  border-radius: 14px;
  padding: 14px 16px;
  display: flex;
  align-items: center;
  gap: 14px;
  transition: background .12s, box-shadow .14s, border-color .12s;
}
.fc-item:hover {
  background: #f0f5ff;
  border-color: #c7d7f8;
  box-shadow: 0 4px 16px rgba(59,130,246,.1);
}
.fc-item-icon {
  width: 40px; height: 40px;
  border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.1rem; flex-shrink: 0;
}
.fc-item-body { flex: 1; min-width: 0; }
.fc-item-name {
  font-size: .88rem;
  font-weight: 700;
  color: #1e293b;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.fc-item-meta { font-size: .74rem; color: #94a3b8; margin-top: 2px; }
.fc-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: #e0f2fe;
  color: #0369a1;
  border-radius: 20px;
  padding: 2px 9px;
  font-size: .72rem;
  font-weight: 600;
  white-space: nowrap;
  margin-right: 8px;
}
.fc-badge.zero { background: #f1f5f9; color: #94a3b8; }
.fc-btn-manage {
  display: inline-flex; align-items: center; justify-content: center; gap: 4px;
  padding: 7px 14px;
  border-radius: 9px;
  font-size: .78rem; font-weight: 700;
  background: #0f172a;
  color: #fff;
  border: none;
  text-decoration: none;
  cursor: pointer;
  white-space: nowrap;
  transition: opacity .12s;
  flex-shrink: 0;
}
.fc-btn-manage:hover { opacity: .8; color: #fff; }

.fc-header-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 40px;
}

@media (max-width: 900px) {
  .fc-cols { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 580px) {
  .fc-cols { grid-template-columns: 1fr; }
  .fc-page { padding: 24px 16px 60px; }
}
</style>
@endpush

@section('content')
<div class="fc-page">

  <div class="fc-header-row">
    <div>
      <h1 class="fc-page-title"><i class="bi bi-toggles me-2" style="color:#6366f1;"></i>功能管理中心</h1>
      <p class="fc-page-sub">管理各功能模組的使用者存取權限，共 {{ $userCount }} 位使用者</p>
    </div>
    <div class="btn-group">
      <a href="{{ route('permissions.index') }}" class="btn btn-outline-secondary btn-sm">
        <i class="bi bi-table me-1"></i>權限矩陣表
      </a>
      <a href="{{ route('permissions.center') }}" class="btn btn-secondary btn-sm">
        <i class="bi bi-toggles me-1"></i>功能管理中心
      </a>
    </div>
  </div>

  <div class="fc-cols">
    @foreach ($grouped as $groupName => $modules)
    @php
      $meta = $groupMeta[$groupName] ?? ['icon' => 'bi-grid', 'bg' => '#f1f5f9', 'color' => '#475569'];
    @endphp
    <div class="fc-section">
      <div class="fc-sec-head">
        <div class="fc-sec-icon" style="background:{{ $meta['bg'] }};color:{{ $meta['color'] }};">
          <i class="bi {{ $meta['icon'] }}"></i>
        </div>
        <div>
          <div class="fc-sec-title">{{ $groupName }}</div>
          <div class="fc-sec-sub">{{ $modules->count() }} 個功能模組</div>
        </div>
      </div>
      <div class="fc-list">
        @foreach ($modules as $module)
        @php
          $key = $module->controller . '|' . $module->route_name;
          $cnt = $permCounts->get($key)?->cnt ?? 0;
        @endphp
        <div class="fc-item">
          <div class="fc-item-icon" style="background:{{ $meta['bg'] }};color:{{ $meta['color'] }};">
            <i class="bi {{ $meta['icon'] }}"></i>
          </div>
          <div class="fc-item-body">
            <div class="fc-item-name">{{ $module->name }}</div>
            <div class="fc-item-meta">
              <span class="fc-badge {{ $cnt === 0 ? 'zero' : '' }}">
                <i class="bi bi-person-check"></i> {{ $cnt }} / {{ $userCount }}
              </span>
            </div>
          </div>
          <a href="{{ route('permissions.module.show', $module->id) }}" class="fc-btn-manage">
            <i class="bi bi-sliders"></i>管理
          </a>
        </div>
        @endforeach
      </div>
    </div>
    @endforeach
  </div>

</div>
@endsection