@extends('layouts.app')
@section('title', '系統中心')

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

$canUseStat          = $isAdmin || $u->hasModulePermission('StatisticController');
$canManageAttendance = $isAdmin || $u->hasModuleAdminPermission('AttendanceController');

$hasStats = $canUseStat || ($canManageAttendance && $isAdmin);
@endphp

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

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

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

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

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

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

[data-bs-theme="dark"] .sc2-page-title { color: #dee2e6; }
[data-bs-theme="dark"] .sc2-section { background: #1c1f26 !important; border-color: #2e3340 !important; }
[data-bs-theme="dark"] .sc2-sec-head { border-bottom-color: #2e3340 !important; }
[data-bs-theme="dark"] .sc2-sec-title { color: #dee2e6; }
[data-bs-theme="dark"] .sc2-item { background: #252830 !important; border-color: #2e3340 !important; }
[data-bs-theme="dark"] .sc2-item:hover { background: #2e3340 !important; border-color: #3d4455 !important; }
[data-bs-theme="dark"] .sc2-item-title { color: #dee2e6; }
[data-bs-theme="dark"] .sc2-item-desc { color: #9ca3af; }
[data-bs-theme="dark"] .sc2-btn-sub { background: #252830 !important; border-color: #3a3f4b !important; color: #dee2e6 !important; }
[data-bs-theme="dark"] .sc2-btn-sub:hover { background: #2e3340 !important; color: #fff !important; }
</style>
@endpush

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

  <h1 class="sc2-page-title"><i class="bi bi-gear-fill me-2" style="color:#475569;"></i>系統中心</h1>
  <p class="sc2-page-sub">系統管理員專用操作中心，集中管理帳號、權限、設定與監控</p>

  <div class="sc2-cols">

    {{-- ══ 帳號與權限 ══ --}}
    <div class="sc2-section">
      <div class="sc2-sec-head">
        <div class="sc2-sec-icon" style="background:#dbeafe;color:#1d4ed8;"><i class="bi bi-people"></i></div>
        <div>
          <div class="sc2-sec-title">帳號與權限</div>
          <div class="sc2-sec-sub">使用者帳號、功能存取與部門組織</div>
        </div>
      </div>
      <div class="sc2-list">

        <div class="sc2-item">
          <div class="sc2-item-top">
            <div class="sc2-item-icon" style="background:#dbeafe;color:#1d4ed8;"><i class="bi bi-person-badge"></i></div>
            <div>
              <div class="sc2-item-title">帳號管理</div>
              <div class="sc2-item-desc">新增、編輯或停用系統使用者帳號，設定角色與所屬部門</div>
            </div>
          </div>
          <div class="sc2-item-btns">
            <a href="{{ route('users.index') }}" class="sc2-btn" style="background:#1d4ed8;color:#fff;">
              <i class="bi bi-box-arrow-in-right"></i>前往
            </a>
          </div>
        </div>

        <div class="sc2-item">
          <div class="sc2-item-top">
            <div class="sc2-item-icon" style="background:#ede9fe;color:#6d28d9;"><i class="bi bi-toggles"></i></div>
            <div>
              <div class="sc2-item-title">功能管理中心</div>
              <div class="sc2-item-desc">依模組管理各使用者的功能存取權限，快速開通或停用</div>
            </div>
          </div>
          <div class="sc2-item-btns">
            <a href="{{ route('permissions.center') }}" class="sc2-btn" style="background:#6d28d9;color:#fff;">
              <i class="bi bi-box-arrow-in-right"></i>前往
            </a>
            <a href="{{ route('permissions.index') }}" class="sc2-btn-sub">
              <i class="bi bi-table"></i>矩陣表
            </a>
          </div>
        </div>

        <div class="sc2-item">
          <div class="sc2-item-top">
            <div class="sc2-item-icon" style="background:#e0f2fe;color:#0369a1;"><i class="bi bi-diagram-3"></i></div>
            <div>
              <div class="sc2-item-title">部門管理</div>
              <div class="sc2-item-desc">維護組織架構與部門名稱，影響人員分組與簽核流程</div>
            </div>
          </div>
          <div class="sc2-item-btns">
            <a href="{{ route('settings.departments.index') }}" class="sc2-btn" style="background:#0369a1;color:#fff;">
              <i class="bi bi-box-arrow-in-right"></i>前往
            </a>
          </div>
        </div>

      </div>
    </div>

    {{-- ══ 系統設定 ══ --}}
    <div class="sc2-section">
      <div class="sc2-sec-head">
        <div class="sc2-sec-icon" style="background:#f1f5f9;color:#475569;"><i class="bi bi-sliders2"></i></div>
        <div>
          <div class="sc2-sec-title">系統設定</div>
          <div class="sc2-sec-sub">環境參數與核心系統設定</div>
        </div>
      </div>
      <div class="sc2-list">

        <div class="sc2-item">
          <div class="sc2-item-top">
            <div class="sc2-item-icon" style="background:#f1f5f9;color:#334155;"><i class="bi bi-sliders2-vertical"></i></div>
            <div>
              <div class="sc2-item-title">環境變數 / 系統設定</div>
              <div class="sc2-item-desc">設定 SMTP、OAuth、管理員通知信箱等系統核心參數</div>
            </div>
          </div>
          <div class="sc2-item-btns">
            <a href="{{ route('settings.system.index') }}" class="sc2-btn" style="background:#334155;color:#fff;">
              <i class="bi bi-box-arrow-in-right"></i>前往
            </a>
          </div>
        </div>

      </div>
    </div>

    {{-- ══ 統計報表 ══ --}}
    @if ($hasStats)
    <div class="sc2-section">
      <div class="sc2-sec-head">
        <div class="sc2-sec-icon" style="background:#dbeafe;color:#1e40af;"><i class="bi bi-bar-chart-line"></i></div>
        <div>
          <div class="sc2-sec-title">統計報表</div>
          <div class="sc2-sec-sub">申請案件與人事加班統計分析</div>
        </div>
      </div>
      <div class="sc2-list">

        @if ($canManageAttendance && $isAdmin)
        <div class="sc2-item">
          <div class="sc2-item-top">
            <div class="sc2-item-icon" style="background:#fef3c7;color:#b45309;"><i class="bi bi-bar-chart-line"></i></div>
            <div>
              <div class="sc2-item-title">加班部門統計</div>
              <div class="sc2-item-desc">依部門、月份統計全體員工的加班申請與核准工時</div>
            </div>
          </div>
          <div class="sc2-item-btns">
            <a href="{{ route('overtime-requests.department') }}" class="sc2-btn" style="background:#b45309;color:#fff;">
              <i class="bi bi-box-arrow-in-right"></i>前往
            </a>
          </div>
        </div>
        @endif

        @if ($canUseStat)
        <div class="sc2-item">
          <div class="sc2-item-top">
            <div class="sc2-item-icon" style="background:#dcfce7;color:#15803d;"><i class="bi bi-key"></i></div>
            <div>
              <div class="sc2-item-title">VPN 申請統計</div>
              <div class="sc2-item-desc">統計各期間 VPN 帳號申請件數與核准率</div>
            </div>
          </div>
          <div class="sc2-item-btns">
            <a href="{{ route('stats.vpn') }}" class="sc2-btn" style="background:#15803d;color:#fff;">
              <i class="bi bi-box-arrow-in-right"></i>前往
            </a>
          </div>
        </div>

        <div class="sc2-item">
          <div class="sc2-item-top">
            <div class="sc2-item-icon" style="background:#e0f2fe;color:#0369a1;"><i class="bi bi-laptop"></i></div>
            <div>
              <div class="sc2-item-title">設備攜出 / 攜入統計</div>
              <div class="sc2-item-desc">統計公司設備進出辦公區域的申請件數與趨勢</div>
            </div>
          </div>
          <div class="sc2-item-btns">
            <a href="{{ route('stats.device_in') }}" class="sc2-btn" style="background:#0369a1;color:#fff;">
              <i class="bi bi-box-arrow-in-right"></i>攜入
            </a>
            <a href="{{ route('stats.device_out') }}" class="sc2-btn-sub">
              <i class="bi bi-box-arrow-right"></i>攜出
            </a>
          </div>
        </div>

        <div class="sc2-item">
          <div class="sc2-item-top">
            <div class="sc2-item-icon" style="background:#faf5ff;color:#7c3aed;"><i class="bi bi-tools"></i></div>
            <div>
              <div class="sc2-item-title">維修申請統計</div>
              <div class="sc2-item-desc">統計設備報修件數、處理時效與各類故障分布</div>
            </div>
          </div>
          <div class="sc2-item-btns">
            <a href="{{ route('stats.repair') }}" class="sc2-btn" style="background:#7c3aed;color:#fff;">
              <i class="bi bi-box-arrow-in-right"></i>前往
            </a>
          </div>
        </div>
        @endif

      </div>
    </div>
    @endif

    {{-- ══ 監控與記錄 ══ --}}
    <div class="sc2-section">
      <div class="sc2-sec-head">
        <div class="sc2-sec-icon" style="background:#fee2e2;color:#b91c1c;"><i class="bi bi-activity"></i></div>
        <div>
          <div class="sc2-sec-title">監控與記錄</div>
          <div class="sc2-sec-sub">操作稽核與系統活動追蹤</div>
        </div>
      </div>
      <div class="sc2-list">

        <div class="sc2-item">
          <div class="sc2-item-top">
            <div class="sc2-item-icon" style="background:#fee2e2;color:#b91c1c;"><i class="bi bi-journal-text"></i></div>
            <div>
              <div class="sc2-item-title">操作紀錄</div>
              <div class="sc2-item-desc">查看所有使用者的系統操作歷程，用於稽核與資安調查</div>
            </div>
          </div>
          <div class="sc2-item-btns">
            <a href="{{ route('logs.index') }}" class="sc2-btn" style="background:#b91c1c;color:#fff;">
              <i class="bi bi-box-arrow-in-right"></i>前往
            </a>
          </div>
        </div>

      </div>
    </div>

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