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

@php
use Illuminate\Support\Facades\Auth;
$u       = Auth::user();
$isAdmin = $u->role === 'admin';

$canUseProjMaintenance = $isAdmin || $u->hasModulePermission('ProjectController', 'projects.index');
$canUseProjManagement  = $isAdmin || $u->hasModulePermission('ProjectController', 'projects.all');
$canUseProject       = $canUseProjMaintenance || $canUseProjManagement;
$canUseClient        = $isAdmin || $u->hasModulePermission('ClientController');
$canManageDocker     = $isAdmin || $u->hasModuleAdminPermission('DockerController');
$canManageProjSetting= $isAdmin || $u->hasModuleAdminPermission('ProjectSettingController');
$canManualGen        = $isAdmin || $u->hasModulePermission('ManualGeneratorController');

$canUseTimeSheet     = $isAdmin || $u->hasModulePermission('TimeSheetController');
$canManageTimeSheet  = $isAdmin || $u->hasModuleAdminPermission('TimeSheetController');

$canManageLeave      = $isAdmin || $u->hasModuleAdminPermission('LeaveSettingController');
$canManageAttendance = $isAdmin || $u->hasModuleAdminPermission('AttendanceController');

$hasProject = $canUseProjMaintenance || $canUseClient || $canManageProjSetting || $canManageDocker;
$hasTime    = $canUseTimeSheet;
$hasHR      = $canManageLeave;
$hasAttend  = $canManageAttendance;
$hasNotify  = $isAdmin;
@endphp

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

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

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

.fc2-list {
  display: flex;
  flex-direction: column;
  padding: 16px;
  gap: 10px;
}

.fc2-item {
  background: #f8fafc;
  border: 1px solid #e8edf2;
  border-radius: 14px;
  padding: 16px 18px;
  transition: background .12s, box-shadow .14s, border-color .12s;
}
.fc2-item:hover {
  background: #f0f5ff;
  border-color: #c7d7f8;
  box-shadow: 0 4px 16px rgba(59,130,246,.1);
}
.fc2-item-top {
  display: flex;
  align-items: flex-start;
  gap: 13px;
  margin-bottom: 14px;
}
.fc2-item-icon {
  width: 40px; height: 40px;
  border-radius: 11px;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.1rem; flex-shrink: 0;
}
.fc2-item-title {
  font-size: .88rem;
  font-weight: 700;
  color: #1e293b;
  margin-bottom: 3px;
}
.fc2-item-desc {
  font-size: .77rem;
  color: #64748b;
  line-height: 1.5;
}
.fc2-item-btns {
  display: flex;
  gap: 8px;
}
.fc2-btn {
  flex: 1;
  display: inline-flex; align-items: center; justify-content: center; gap: 5px;
  padding: 8px 14px;
  border-radius: 9px;
  font-size: .8rem; font-weight: 700;
  border: none; cursor: pointer;
  text-decoration: none;
  transition: opacity .12s, transform .1s;
}
.fc2-btn:hover { opacity: .85; transform: translateY(-1px); }
.fc2-btn-sub {
  display: inline-flex; align-items: center; justify-content: center; gap: 5px;
  padding: 8px 14px;
  border-radius: 9px;
  font-size: .8rem; font-weight: 600;
  background: #fff;
  border: 1px solid #d1d9e6;
  color: #475569;
  cursor: pointer;
  text-decoration: none;
  transition: background .12s, border-color .12s;
}
.fc2-btn-sub:hover { background: #f1f5f9; border-color: #94a3b8; color: #1e293b; }

@media (max-width: 900px) { .fc2-cols { grid-template-columns: 1fr 1fr; } }
@media (max-width: 580px) { .fc2-cols { grid-template-columns: 1fr; } .fc2-page { padding: 24px 16px 60px; } }

/* 暗黑模式 */
[data-bs-theme="dark"] .fc2-page-title { color: #dee2e6; }
[data-bs-theme="dark"] .fc2-section { background: #1c1f26 !important; border-color: #2e3340 !important; }
[data-bs-theme="dark"] .fc2-sec-head { border-bottom-color: #2e3340 !important; }
[data-bs-theme="dark"] .fc2-sec-title { color: #dee2e6; }
[data-bs-theme="dark"] .fc2-item { background: #252830 !important; border-color: #2e3340 !important; }
[data-bs-theme="dark"] .fc2-item:hover { background: #2e3340 !important; border-color: #3d4455 !important; box-shadow: 0 4px 16px rgba(0,0,0,.3); }
[data-bs-theme="dark"] .fc2-item-title { color: #dee2e6; }
[data-bs-theme="dark"] .fc2-item-desc { color: #9ca3af; }
[data-bs-theme="dark"] .fc2-btn-sub { background: #252830 !important; border-color: #3a3f4b !important; color: #dee2e6 !important; }
[data-bs-theme="dark"] .fc2-btn-sub:hover { background: #2e3340 !important; border-color: #4b5563 !important; color: #fff !important; }
</style>
@endpush

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

  <h1 class="fc2-page-title"><i class="bi bi-sliders me-2" style="color:#6366f1;"></i>功能管理中心</h1>
  <p class="fc2-page-sub">集中管理各項系統功能，選擇下方模組快速前往</p>

  <div class="fc2-cols">

    {{-- ══ 專案管理 ══ --}}
    @if ($hasProject)
    <div class="fc2-section">
      <div class="fc2-sec-head">
        <div class="fc2-sec-icon" style="background:#dbeafe;color:#1d4ed8;"><i class="bi bi-kanban"></i></div>
        <div>
          <div class="fc2-sec-title">專案管理</div>
          <div class="fc2-sec-sub">專案、客戶與設定維護</div>
        </div>
      </div>
      <div class="fc2-list">

        @if ($canUseProjMaintenance)
        <div class="fc2-item">
          <div class="fc2-item-top">
            <div class="fc2-item-icon" style="background:#e0f2fe;color:#0369a1;"><i class="bi bi-tools"></i></div>
            <div>
              <div class="fc2-item-title">專案維護</div>
              <div class="fc2-item-desc">維護保固管理，查詢指派給我的專案與議題</div>
            </div>
          </div>
          <div class="fc2-item-btns">
            <a href="{{ route('projects.index') }}" class="fc2-btn" style="background:#0369a1;color:#fff;">
              <i class="bi bi-box-arrow-in-right"></i>前往
            </a>
          </div>
        </div>
        @endif

        @if ($canUseClient)
        <div class="fc2-item">
          <div class="fc2-item-top">
            <div class="fc2-item-icon" style="background:#e0f2fe;color:#0369a1;"><i class="bi bi-building"></i></div>
            <div>
              <div class="fc2-item-title">客戶維護</div>
              <div class="fc2-item-desc">建立與管理客戶資料，關聯至對應專案</div>
            </div>
          </div>
          <div class="fc2-item-btns">
            <a href="{{ route('clients.index') }}" class="fc2-btn" style="background:#0369a1;color:#fff;">
              <i class="bi bi-box-arrow-in-right"></i>前往
            </a>
          </div>
        </div>
        @endif

        @if ($canManageProjSetting)
        <div class="fc2-item">
          <div class="fc2-item-top">
            <div class="fc2-item-icon" style="background:#f1f5f9;color:#475569;"><i class="bi bi-gear"></i></div>
            <div>
              <div class="fc2-item-title">專案設定</div>
              <div class="fc2-item-desc">設定議題類型、優先度、狀態等專案通用參數</div>
            </div>
          </div>
          <div class="fc2-item-btns">
            <a href="{{ route('settings.projects.index') }}" class="fc2-btn" style="background:#475569;color:#fff;">
              <i class="bi bi-box-arrow-in-right"></i>前往
            </a>
          </div>
        </div>
        @endif


        @if ($canManageDocker)
        <div class="fc2-item">
          <div class="fc2-item-top">
            <div class="fc2-item-icon" style="background:#e0f2fe;color:#0284c7;"><i class="bi bi-hdd-network"></i></div>
            <div>
              <div class="fc2-item-title">Docker 主機設定</div>
              <div class="fc2-item-desc">管理 Docker 主機連線設定與容器監控</div>
            </div>
          </div>
          <div class="fc2-item-btns">
            <a href="{{ route('docker.hosts.index') }}" class="fc2-btn" style="background:#0284c7;color:#fff;">
              <i class="bi bi-box-arrow-in-right"></i>前往
            </a>
          </div>
        </div>
        @endif

      </div>
    </div>
    @endif

    {{-- ══ 工時管理 ══ --}}
    @if ($hasTime)
    <div class="fc2-section">
      <div class="fc2-sec-head">
        <div class="fc2-sec-icon" style="background:#fef3c7;color:#b45309;"><i class="bi bi-clock-history"></i></div>
        <div>
          <div class="fc2-sec-title">工時管理</div>
          <div class="fc2-sec-sub">工時統計、週次與設定</div>
        </div>
      </div>
      <div class="fc2-list">

        <div class="fc2-item">
          <div class="fc2-item-top">
            <div class="fc2-item-icon" style="background:#fef3c7;color:#b45309;"><i class="bi bi-table"></i></div>
            <div>
              <div class="fc2-item-title">工時總表</div>
              <div class="fc2-item-desc">以週為單位檢視所有人員的工時填報狀況</div>
            </div>
          </div>
          <div class="fc2-item-btns">
            <a href="{{ route('time-sheets.show') }}" class="fc2-btn" style="background:#b45309;color:#fff;">
              <i class="bi bi-box-arrow-in-right"></i>前往
            </a>
            <a href="{{ route('time-sheets.range') }}" class="fc2-btn-sub">
              <i class="bi bi-calendar-range"></i>區間
            </a>
            <a href="{{ route('time-sheets.yearly') }}" class="fc2-btn-sub">
              <i class="bi bi-bar-chart-steps"></i>年度
            </a>
          </div>
        </div>

        <div class="fc2-item">
          <div class="fc2-item-top">
            <div class="fc2-item-icon" style="background:#fff7ed;color:#c2410c;"><i class="bi bi-bar-chart-fill"></i></div>
            <div>
              <div class="fc2-item-title">工時統計圖表</div>
              <div class="fc2-item-desc">以視覺化圖表呈現各專案、人員的工時分佈</div>
            </div>
          </div>
          <div class="fc2-item-btns">
            <a href="{{ route('time-charts.index') }}" class="fc2-btn" style="background:#c2410c;color:#fff;">
              <i class="bi bi-box-arrow-in-right"></i>前往
            </a>
          </div>
        </div>

        <div class="fc2-item">
          <div class="fc2-item-top">
            <div class="fc2-item-icon" style="background:#fef9c3;color:#854d0e;"><i class="bi bi-calendar-week"></i></div>
            <div>
              <div class="fc2-item-title">周次管理</div>
              <div class="fc2-item-desc">設定工時填報用的週期與 Sprint 對應</div>
            </div>
          </div>
          <div class="fc2-item-btns">
            <a href="{{ route('sprints.index') }}" class="fc2-btn" style="background:#854d0e;color:#fff;">
              <i class="bi bi-box-arrow-in-right"></i>前往
            </a>
            <a href="{{ route('time-sheets.user-order') }}" class="fc2-btn-sub">
              <i class="bi bi-people-fill"></i>人員排序
            </a>
          </div>
        </div>

        @if ($canManageTimeSheet)
        <div class="fc2-item">
          <div class="fc2-item-top">
            <div class="fc2-item-icon" style="background:#f1f5f9;color:#475569;"><i class="bi bi-sliders"></i></div>
            <div>
              <div class="fc2-item-title">工時設定</div>
              <div class="fc2-item-desc">設定工時來源、填報規則等系統參數</div>
            </div>
          </div>
          <div class="fc2-item-btns">
            <a href="{{ route('settings.time') }}" class="fc2-btn" style="background:#475569;color:#fff;">
              <i class="bi bi-box-arrow-in-right"></i>前往
            </a>
          </div>
        </div>
        @endif

      </div>
    </div>
    @endif

    {{-- ══ 人事設定 ══ --}}
    @if ($hasHR)
    <div class="fc2-section">
      <div class="fc2-sec-head">
        <div class="fc2-sec-icon" style="background:#ede9fe;color:#6d28d9;"><i class="bi bi-calendar-heart"></i></div>
        <div>
          <div class="fc2-sec-title">人事設定</div>
          <div class="fc2-sec-sub">假別、配額與請假統計管理</div>
        </div>
      </div>
      <div class="fc2-list">

        <div class="fc2-item">
          <div class="fc2-item-top">
            <div class="fc2-item-icon" style="background:#ede9fe;color:#6d28d9;"><i class="bi bi-tags"></i></div>
            <div>
              <div class="fc2-item-title">假別管理</div>
              <div class="fc2-item-desc">新增或調整特休、病假、事假等假別規則</div>
            </div>
          </div>
          <div class="fc2-item-btns">
            <a href="{{ route('leave.settings.types') }}" class="fc2-btn" style="background:#6d28d9;color:#fff;">
              <i class="bi bi-box-arrow-in-right"></i>前往
            </a>
          </div>
        </div>

        <div class="fc2-item">
          <div class="fc2-item-top">
            <div class="fc2-item-icon" style="background:#f5f3ff;color:#7c3aed;"><i class="bi bi-person-lines-fill"></i></div>
            <div>
              <div class="fc2-item-title">特休配額</div>
              <div class="fc2-item-desc">設定各員工年度特休天數與剩餘配額</div>
            </div>
          </div>
          <div class="fc2-item-btns">
            <a href="{{ route('leave.settings.balance') }}" class="fc2-btn" style="background:#7c3aed;color:#fff;">
              <i class="bi bi-box-arrow-in-right"></i>前往
            </a>
          </div>
        </div>

        <div class="fc2-item">
          <div class="fc2-item-top">
            <div class="fc2-item-icon" style="background:#faf5ff;color:#9333ea;"><i class="bi bi-bar-chart"></i></div>
            <div>
              <div class="fc2-item-title">請假統計</div>
              <div class="fc2-item-desc">查看各部門與人員的請假申請統計報表</div>
            </div>
          </div>
          <div class="fc2-item-btns">
            <a href="{{ route('leave.settings.stats') }}" class="fc2-btn" style="background:#9333ea;color:#fff;">
              <i class="bi bi-box-arrow-in-right"></i>前往
            </a>
          </div>
        </div>

      </div>
    </div>
    @endif

    {{-- ══ 簽到退管理 ══ --}}
    @if ($hasAttend)
    <div class="fc2-section">
      <div class="fc2-sec-head">
        <div class="fc2-sec-icon" style="background:#d1fae5;color:#065f46;"><i class="bi bi-clock"></i></div>
        <div>
          <div class="fc2-sec-title">簽到退管理</div>
          <div class="fc2-sec-sub">出勤紀錄、報表與 IP 設定</div>
        </div>
      </div>
      <div class="fc2-list">

        <div class="fc2-item">
          <div class="fc2-item-top">
            <div class="fc2-item-icon" style="background:#d1fae5;color:#065f46;"><i class="bi bi-people"></i></div>
            <div>
              <div class="fc2-item-title">簽到退紀錄查詢</div>
              <div class="fc2-item-desc">查詢所有人員的上下班打卡紀錄與異常狀況</div>
            </div>
          </div>
          <div class="fc2-item-btns">
            <a href="{{ route('attendance.admin') }}" class="fc2-btn" style="background:#065f46;color:#fff;">
              <i class="bi bi-box-arrow-in-right"></i>前往
            </a>
          </div>
        </div>

        <div class="fc2-item">
          <div class="fc2-item-top">
            <div class="fc2-item-icon" style="background:#ecfdf5;color:#059669;"><i class="bi bi-bar-chart-line"></i></div>
            <div>
              <div class="fc2-item-title">簽到退報表</div>
              <div class="fc2-item-desc">依月份、部門匯出出勤統計報表</div>
            </div>
          </div>
          <div class="fc2-item-btns">
            <a href="{{ route('attendance.stats') }}" class="fc2-btn" style="background:#059669;color:#fff;">
              <i class="bi bi-box-arrow-in-right"></i>前往
            </a>
          </div>
        </div>

        <div class="fc2-item">
          <div class="fc2-item-top">
            <div class="fc2-item-icon" style="background:#f1f5f9;color:#475569;"><i class="bi bi-shield-lock"></i></div>
            <div>
              <div class="fc2-item-title">簽到退設定</div>
              <div class="fc2-item-desc">設定允許打卡的辦公室 IP 範圍與相關規則</div>
            </div>
          </div>
          <div class="fc2-item-btns">
            <a href="{{ route('attendance.settings') }}" class="fc2-btn" style="background:#475569;color:#fff;">
              <i class="bi bi-box-arrow-in-right"></i>前往
            </a>
          </div>
        </div>

      </div>
    </div>
    @endif

    {{-- ══ 通知設定（admin only）══ --}}
    @if ($hasNotify)
    <div class="fc2-section">
      <div class="fc2-sec-head">
        <div class="fc2-sec-icon" style="background:#fef9c3;color:#ca8a04;"><i class="bi bi-bell"></i></div>
        <div>
          <div class="fc2-sec-title">通知與掃描</div>
          <div class="fc2-sec-sub">信件排程、推播通知與資安掃描器</div>
        </div>
      </div>
      <div class="fc2-list">

        <div class="fc2-item">
          <div class="fc2-item-top">
            <div class="fc2-item-icon" style="background:#dbeafe;color:#1d4ed8;"><i class="bi bi-envelope-check"></i></div>
            <div>
              <div class="fc2-item-title">通知信件排程</div>
              <div class="fc2-item-desc">設定定期發送的維護報告與系統通知信件排程</div>
            </div>
          </div>
          <div class="fc2-item-btns">
            <a href="{{ route('settings.maintenance-reports') }}" class="fc2-btn" style="background:#1d4ed8;color:#fff;">
              <i class="bi bi-box-arrow-in-right"></i>前往
            </a>
          </div>
        </div>

        <div class="fc2-item">
          <div class="fc2-item-top">
            <div class="fc2-item-icon" style="background:#dcfce7;color:#15803d;"><i class="bi bi-chat-dots"></i></div>
            <div>
              <div class="fc2-item-title">Google Chat 通知</div>
              <div class="fc2-item-desc">設定 Webhook 將系統事件即時推送至 Google Chat 頻道</div>
            </div>
          </div>
          <div class="fc2-item-btns">
            <a href="{{ route('settings.chat-channels') }}" class="fc2-btn" style="background:#15803d;color:#fff;">
              <i class="bi bi-box-arrow-in-right"></i>前往
            </a>
          </div>
        </div>

        <div class="fc2-item">
          <div class="fc2-item-top">
            <div class="fc2-item-icon" style="background:#fef3c7;color:#b45309;"><i class="bi bi-bell-fill"></i></div>
            <div>
              <div class="fc2-item-title">推播管理</div>
              <div class="fc2-item-desc">管理瀏覽器推播訂閱與發送即時通知給使用者</div>
            </div>
          </div>
          <div class="fc2-item-btns">
            <a href="{{ route('push.admin') }}" class="fc2-btn" style="background:#b45309;color:#fff;">
              <i class="bi bi-box-arrow-in-right"></i>前往
            </a>
          </div>
        </div>

        <div class="fc2-item">
          <div class="fc2-item-top">
            <div class="fc2-item-icon" style="background:#fee2e2;color:#b91c1c;"><i class="bi bi-shield-fill-check"></i></div>
            <div>
              <div class="fc2-item-title">掃描器設定</div>
              <div class="fc2-item-desc">設定弱點掃描、源碼掃描等資安掃描工具的連線參數</div>
            </div>
          </div>
          <div class="fc2-item-btns">
            <a href="{{ route('settings.scanner') }}" class="fc2-btn" style="background:#b91c1c;color:#fff;">
              <i class="bi bi-box-arrow-in-right"></i>前往
            </a>
          </div>
        </div>

      </div>
    </div>
    @endif

  </div>{{-- /fc2-cols --}}
</div>
@endsection