@extends('layouts.app')
@section('title', '申請服務中心')

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

// ── 人事
$canUseAttendance = $_isAdmin || $_u->hasModulePermission('AttendanceController');
$canUseLeave      = $_isAdmin || $_u->hasModulePermission('LeaveController');
$canUseOvertime   = $_isAdmin || $_u->hasModulePermission('OvertimeRequestController');
$canUseHandover   = $_isAdmin || $_u->hasModulePermission('HandoverController');

// ── 帳號服務
$canUseVpn        = $_isAdmin || $_u->hasModulePermission('VpnRequestController');
$canUseGitlab     = $_isAdmin || $_u->hasModulePermission('GitlabRequestController');
$canUseAccount    = $_isAdmin || $_u->hasModulePermission('AccountRequestController');

// ── 設備
$canUseDevice     = $_isAdmin || $_u->hasModulePermission('DeviceRequestController');

$hasPersonnel  = $canUseAttendance || $canUseLeave || $canUseOvertime || $canUseHandover;
$hasSecuritySvc = $canUseVpn || $canUseGitlab || $canUseAccount || $canUseDevice;
@endphp

@push('styles')
<style>
.sc-page {
  max-width: 1280px;
  margin: 0 auto;
  padding: 44px 32px 80px;
}

/* ── Page title ── */
.sc-page-title {
  font-size: 1.75rem;
  font-weight: 800;
  color: #0f172a;
  margin-bottom: 6px;
  letter-spacing: -.02em;
}
.sc-page-sub { font-size: .9rem; color: #94a3b8; margin-bottom: 40px; }

/* ── Column layout — auto-fit so hidden sections don't leave gaps ── */
.sc-cols {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 20px;
  align-items: start;
}

/* ── Section card ── */
.sc-section {
  border-radius: 20px;
  border: 1px solid #e2e8f0;
  background: #fff;
  overflow: hidden;
  box-shadow: 0 2px 12px rgba(0,0,0,.06);
}

/* Section header — colored top accent */
.sc-sec-head {
  padding: 22px 24px 20px;
  border-bottom: 1px solid #f1f5f9;
  display: flex;
  align-items: center;
  gap: 16px;
}
.sc-sec-icon {
  width: 52px; height: 52px;
  border-radius: 14px;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.4rem; flex-shrink: 0;
}
.sc-sec-title {
  font-size: 1.05rem;
  font-weight: 800;
  color: #0f172a;
  letter-spacing: -.01em;
  margin-bottom: 3px;
}
.sc-sec-sub { font-size: .78rem; color: #94a3b8; line-height: 1.4; }

/* ── Items list ── */
.sc-list {
  display: flex;
  flex-direction: column;
  gap: 0;
  padding: 16px;
  gap: 10px;
}

/* ── Single service item ── */
.sc-item {
  background: #f8fafc;
  border: 1px solid #e8edf2;
  border-radius: 14px;
  padding: 18px 18px 16px;
  transition: background .12s, box-shadow .14s, border-color .12s;
}
.sc-item:hover {
  background: #f0f5ff;
  border-color: #c7d7f8;
  box-shadow: 0 4px 16px rgba(59,130,246,.1);
}
.sc-item-top {
  display: flex;
  align-items: flex-start;
  gap: 13px;
  margin-bottom: 14px;
}
.sc-item-icon {
  width: 44px; height: 44px;
  border-radius: 12px;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.15rem; flex-shrink: 0;
}
.sc-item-title {
  font-size: .9rem;
  font-weight: 700;
  color: #1e293b;
  margin-bottom: 4px;
  line-height: 1.3;
}
.sc-item-desc {
  font-size: .78rem;
  color: #64748b;
  line-height: 1.5;
}
.sc-item-btns {
  display: flex;
  gap: 8px;
}
.sc-btn-apply {
  flex: 1;
  display: inline-flex; align-items: center; justify-content: center; gap: 5px;
  padding: 9px 14px;
  border-radius: 9px;
  font-size: .8rem; font-weight: 700;
  border: none; cursor: pointer;
  text-decoration: none;
  transition: opacity .12s, transform .1s;
}
.sc-btn-apply:hover { opacity: .88; transform: translateY(-1px); }
.sc-btn-record {
  display: inline-flex; align-items: center; justify-content: center; gap: 5px;
  padding: 9px 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;
  white-space: nowrap;
}
.sc-btn-record:hover { background: #f1f5f9; border-color: #94a3b8; color: #1e293b; }

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

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

  <div>
    <h1 class="sc-page-title">申請服務中心</h1>
    <p class="sc-page-sub">選擇下方服務類別，點擊「申請」填寫表單送出後由主管逐層審核</p>
  </div>

  @if (!$hasPersonnel && !$hasSecuritySvc)
  <div class="text-center py-5 text-muted">
    <i class="bi bi-lock" style="font-size:2.5rem;display:block;margin-bottom:12px;"></i>
    您目前沒有任何可用的申請服務，如有需要請聯繫系統管理者開通權限。
  </div>
  @else
  <div class="sc-cols">

    {{-- ══════════════════════════════════════ --}}
    {{-- 人事服務                              --}}
    {{-- ══════════════════════════════════════ --}}
    @if ($hasPersonnel)
    <div class="sc-section">
      <div class="sc-sec-head">
        <div class="sc-sec-icon" style="background:#ede9fe;color:#6d28d9;">
          <i class="bi bi-people"></i>
        </div>
        <div>
          <div class="sc-sec-title">人事服務</div>
          <div class="sc-sec-sub">出勤、假勤、加班及人事異動申請</div>
        </div>
      </div>
      <div class="sc-list">

        @if ($canUseAttendance)
        <div class="sc-item">
          <div class="sc-item-top">
            <div class="sc-item-icon" style="background:#e0f2fe;color:#0284c7;"><i class="bi bi-clock"></i></div>
            <div>
              <div class="sc-item-title">簽到退</div>
              <div class="sc-item-desc">記錄每日出勤的上下班打卡，查看個人出勤狀況</div>
            </div>
          </div>
          <div class="sc-item-btns">
            <a href="{{ route('attendance.index') }}" class="sc-btn-apply" style="background:#0284c7;color:#fff;">
              <i class="bi bi-box-arrow-in-right"></i>前往簽到退
            </a>
          </div>
        </div>
        @endif

        @if ($canUseLeave)
        <div class="sc-item">
          <div class="sc-item-top">
            <div class="sc-item-icon" style="background:#ede9fe;color:#6d28d9;"><i class="bi bi-calendar2-check"></i></div>
            <div>
              <div class="sc-item-title">請假申請</div>
              <div class="sc-item-desc">特休、病假、事假、婚假等各類假別，支援半天或自訂時間區間申請</div>
            </div>
          </div>
          <div class="sc-item-btns">
            <a href="{{ route('leave.create') }}" class="sc-btn-apply" style="background:#7c3aed;color:#fff;">
              <i class="bi bi-plus-lg"></i>立即申請
            </a>
            <a href="{{ route('leave.index') }}" class="sc-btn-record">
              <i class="bi bi-list-ul"></i>查看紀錄
            </a>
          </div>
        </div>
        @endif

        @if ($canUseOvertime)
        <div class="sc-item">
          <div class="sc-item-top">
            <div class="sc-item-icon" style="background:#fef3c7;color:#b45309;"><i class="bi bi-clock-history"></i></div>
            <div>
              <div class="sc-item-title">加班申請</div>
              <div class="sc-item-desc">申請加班工時紀錄，超過規定時數送老闆審核，完成後可申請補休或加班費</div>
            </div>
          </div>
          <div class="sc-item-btns">
            <a href="{{ route('overtime-requests.create') }}" class="sc-btn-apply" style="background:#d97706;color:#fff;">
              <i class="bi bi-plus-lg"></i>立即申請
            </a>
            <a href="{{ route('overtime-requests.index') }}" class="sc-btn-record">
              <i class="bi bi-list-ul"></i>查看紀錄
            </a>
          </div>
        </div>
        @endif

        @if ($canUseHandover)
        <div class="sc-item">
          <div class="sc-item-top">
            <div class="sc-item-icon" style="background:#fee2e2;color:#b91c1c;"><i class="bi bi-person-dash"></i></div>
            <div>
              <div class="sc-item-title">調離職交接</div>
              <div class="sc-item-desc">辦理調職或離職時提交工作交接清單，由主管及相關人員簽核確認</div>
            </div>
          </div>
          <div class="sc-item-btns">
            <a href="{{ route('handovers.index') }}" class="sc-btn-apply" style="background:#dc2626;color:#fff;">
              <i class="bi bi-arrow-right-circle"></i>前往辦理
            </a>
          </div>
        </div>
        @endif

      </div>
    </div>
    @endif

    {{-- ══════════════════════════════════════ --}}
    {{-- 資安服務（帳號 + 設備）              --}}
    {{-- ══════════════════════════════════════ --}}
    @if ($hasSecuritySvc)
    <div class="sc-section">
      <div class="sc-sec-head">
        <div class="sc-sec-icon" style="background:#fee2e2;color:#b91c1c;">
          <i class="bi bi-shield-lock"></i>
        </div>
        <div>
          <div class="sc-sec-title">資安服務</div>
          <div class="sc-sec-sub">系統帳號與設備管理，需主管及 IT 管理者雙重審核</div>
        </div>
      </div>
      <div class="sc-list">

        @if ($canUseVpn)
        <div class="sc-item">
          <div class="sc-item-top">
            <div class="sc-item-icon" style="background:#dcfce7;color:#15803d;"><i class="bi bi-shield-lock"></i></div>
            <div>
              <div class="sc-item-title">VPN 帳號</div>
              <div class="sc-item-desc">申請遠端 VPN 連線帳號，安全存取公司內部網路與各項系統資源</div>
            </div>
          </div>
          <div class="sc-item-btns">
            <a href="{{ route('vpn-requests.create') }}" class="sc-btn-apply" style="background:#16a34a;color:#fff;">
              <i class="bi bi-plus-lg"></i>立即申請
            </a>
            <a href="{{ route('vpn-requests.index') }}" class="sc-btn-record">
              <i class="bi bi-list-ul"></i>查看紀錄
            </a>
          </div>
        </div>
        @endif

        @if ($canUseGitlab)
        <div class="sc-item">
          <div class="sc-item-top">
            <div class="sc-item-icon" style="background:#fff7ed;color:#ea580c;"><i class="bi bi-git"></i></div>
            <div>
              <div class="sc-item-title">GitLab 帳號申請</div>
              <div class="sc-item-desc">申請 GitLab 帳號、新增專案或加入現有專案，可同時申請平台專案管理系統權限</div>
            </div>
          </div>
          <div class="sc-item-btns">
            <a href="{{ route('gitlab-requests.create') }}" class="sc-btn-apply" style="background:#ea580c;color:#fff;">
              <i class="bi bi-plus-lg"></i>立即申請
            </a>
            <a href="{{ route('gitlab-requests.index') }}" class="sc-btn-record">
              <i class="bi bi-list-ul"></i>查看紀錄
            </a>
          </div>
        </div>
        @endif

        @if ($canUseAccount)
        <div class="sc-item">
          <div class="sc-item-top">
            <div class="sc-item-icon" style="background:#e0f2fe;color:#0284c7;"><i class="bi bi-envelope-at"></i></div>
            <div>
              <div class="sc-item-title">主機 / 信箱帳號</div>
              <div class="sc-item-desc">申請伺服器連線帳號或公司電子信箱，需主管及 IT 管理者雙重審核後開通</div>
            </div>
          </div>
          <div class="sc-item-btns">
            <a href="{{ route('account-requests.create') }}" class="sc-btn-apply" style="background:#0284c7;color:#fff;">
              <i class="bi bi-plus-lg"></i>立即申請
            </a>
            <a href="{{ route('account-requests.index') }}" class="sc-btn-record">
              <i class="bi bi-list-ul"></i>查看紀錄
            </a>
          </div>
        </div>
        @endif

        @if ($canUseDevice)
        <div class="sc-item">
          <div class="sc-item-top">
            <div class="sc-item-icon" style="background:#f0fdf4;color:#166534;"><i class="bi bi-laptop"></i></div>
            <div>
              <div class="sc-item-title">設備攜出 / 攜入申請</div>
              <div class="sc-item-desc">申請將公司設備（筆電、硬碟、周邊等）攜帶進出辦公區域，需填寫原因並附上資訊</div>
            </div>
          </div>
          <div class="sc-item-btns">
            <a href="{{ route('device-requests.menu') }}" class="sc-btn-apply" style="background:#16a34a;color:#fff;">
              <i class="bi bi-plus-lg"></i>立即申請
            </a>
            <a href="{{ route('device-requests.index') }}" class="sc-btn-record">
              <i class="bi bi-list-ul"></i>查看紀錄
            </a>
          </div>
        </div>
        @endif

      </div>
    </div>
    @endif

  </div>{{-- /sc-cols --}}
  @endif
</div>
@endsection