@extends('layouts.app')

@section('title', '操作手冊')

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

  <div class="mb-5">
    <h1 class="fw-bold mb-1" style="font-size:1.7rem;">📖 操作手冊</h1>
    <p class="text-muted mb-0" style="font-size:.9rem;">
      請選擇適合您權限的手冊版本，每份手冊包含完整的頁面截圖與操作說明。
    </p>
  </div>

  <div class="row g-4">

    {{-- 使用者手冊（所有人可見）--}}
    <div class="col-md-4">
      <a href="{{ route('manual.view', 'user') }}" target="_blank" class="text-decoration-none">
        <div class="card h-100 border-0 shadow-sm manual-card" style="border-radius:12px; overflow:hidden;">
          <div class="card-header py-4 text-center text-white border-0"
               style="background: linear-gradient(135deg,#3b82f6,#2563eb);">
            <div style="font-size:2.5rem;">👤</div>
            <div class="fw-bold mt-2" style="font-size:1.05rem;">使用者手冊</div>
          </div>
          <div class="card-body p-4">
            <p class="text-muted small mb-3">適用所有登入人員，包含日常使用的功能說明。</p>
            <ul class="list-unstyled small text-secondary mb-0">
              <li class="mb-1"><i class="bi bi-check2 text-primary me-2"></i>登入與首頁</li>
              <li class="mb-1"><i class="bi bi-check2 text-primary me-2"></i>看板與議題</li>
              <li class="mb-1"><i class="bi bi-check2 text-primary me-2"></i>工時記錄</li>
              <li class="mb-1"><i class="bi bi-check2 text-primary me-2"></i>簽到退與加班申請</li>
              <li class="mb-1"><i class="bi bi-check2 text-primary me-2"></i>各類申請服務</li>
              <li><i class="bi bi-check2 text-primary me-2"></i>資安工作（CVE、資產、文件）</li>
            </ul>
          </div>
          <div class="card-footer bg-transparent border-top-0 px-4 pb-4 pt-0 d-flex gap-2">
            <div class="btn btn-primary flex-grow-1 btn-sm rounded-pill">
              <i class="bi bi-box-arrow-up-right me-1"></i>開啟手冊
            </div>
            <a href="{{ route('manual.pdf', 'user') }}" class="btn btn-outline-primary btn-sm rounded-pill px-3" title="下載 PDF" onclick="event.stopPropagation()">
              <i class="bi bi-file-earmark-pdf"></i>
            </a>
          </div>
        </div>
      </a>
    </div>

    {{-- 主管手冊（supervisor / admin 可見）--}}
    @if(in_array(Auth::user()->role, ['supervisor', 'admin']))
    <div class="col-md-4">
      <a href="{{ route('manual.view', 'supervisor') }}" target="_blank" class="text-decoration-none">
        <div class="card h-100 border-0 shadow-sm manual-card" style="border-radius:12px; overflow:hidden;">
          <div class="card-header py-4 text-center text-white border-0"
               style="background: linear-gradient(135deg,#8b5cf6,#6d28d9);">
            <div style="font-size:2.5rem;">👥</div>
            <div class="fw-bold mt-2" style="font-size:1.05rem;">主管手冊</div>
          </div>
          <div class="card-body p-4">
            <p class="text-muted small mb-3">包含使用者手冊全部內容，另加主管審核與管理功能。</p>
            <ul class="list-unstyled small text-secondary mb-0">
              <li class="mb-1"><i class="bi bi-check2 text-purple me-2" style="color:#7c3aed;"></i>包含所有使用者功能</li>
              <li class="mb-1"><i class="bi bi-check2 text-purple me-2" style="color:#7c3aed;"></i>工時總表（週/區間/年度）</li>
              <li class="mb-1"><i class="bi bi-check2 text-purple me-2" style="color:#7c3aed;"></i>申請審核管理</li>
              <li class="mb-1"><i class="bi bi-check2 text-purple me-2" style="color:#7c3aed;"></i>出勤管理與統計</li>
              <li><i class="bi bi-check2 text-purple me-2" style="color:#7c3aed;"></i>部屬資產管理</li>
            </ul>
          </div>
          <div class="card-footer bg-transparent border-top-0 px-4 pb-4 pt-0 d-flex gap-2">
            <div class="btn flex-grow-1 btn-sm rounded-pill text-white" style="background:#7c3aed;">
              <i class="bi bi-box-arrow-up-right me-1"></i>開啟手冊
            </div>
            <a href="{{ route('manual.pdf', 'supervisor') }}" class="btn btn-sm rounded-pill px-3 text-white" style="background:rgba(124,58,237,.3); border:1px solid #7c3aed;" title="下載 PDF" onclick="event.stopPropagation()">
              <i class="bi bi-file-earmark-pdf"></i>
            </a>
          </div>
        </div>
      </a>
    </div>
    @endif

    {{-- 管理員手冊（admin 可見）--}}
    @if(Auth::user()->role === 'admin')
    <div class="col-md-4">
      <a href="{{ route('manual.view', 'admin') }}" target="_blank" class="text-decoration-none">
        <div class="card h-100 border-0 shadow-sm manual-card" style="border-radius:12px; overflow:hidden;">
          <div class="card-header py-4 text-center text-white border-0"
               style="background: linear-gradient(135deg,#ef4444,#b91c1c);">
            <div style="font-size:2.5rem;">🛡</div>
            <div class="fw-bold mt-2" style="font-size:1.05rem;">管理員手冊</div>
          </div>
          <div class="card-body p-4">
            <p class="text-muted small mb-3">完整的全功能手冊，包含所有系統管理與進階設定說明。</p>
            <ul class="list-unstyled small text-secondary mb-0">
              <li class="mb-1"><i class="bi bi-check2 text-danger me-2"></i>包含所有主管功能</li>
              <li class="mb-1"><i class="bi bi-check2 text-danger me-2"></i>資安掃描（源碼/弱點/滲透）</li>
              <li class="mb-1"><i class="bi bi-check2 text-danger me-2"></i>主機監控與 Docker 管理</li>
              <li class="mb-1"><i class="bi bi-check2 text-danger me-2"></i>資訊資產管理</li>
              <li class="mb-1"><i class="bi bi-check2 text-danger me-2"></i>專案與客戶維護</li>
              <li><i class="bi bi-check2 text-danger me-2"></i>使用者、權限、系統設定</li>
            </ul>
          </div>
          <div class="card-footer bg-transparent border-top-0 px-4 pb-4 pt-0 d-flex gap-2">
            <div class="btn btn-danger flex-grow-1 btn-sm rounded-pill">
              <i class="bi bi-box-arrow-up-right me-1"></i>開啟手冊
            </div>
            <a href="{{ route('manual.pdf', 'admin') }}" class="btn btn-outline-danger btn-sm rounded-pill px-3" title="下載 PDF" onclick="event.stopPropagation()">
              <i class="bi bi-file-earmark-pdf"></i>
            </a>
          </div>
        </div>
      </a>
    </div>
    @endif

  </div>

  <div class="mt-4 text-center">
    <p class="text-muted small mb-0">
      <i class="bi bi-robot me-1"></i>此手冊為 AI 自動產生，若有任何問題，再請通知管理人員。
    </p>
  </div>

  {{-- 重新產生手冊（僅 admin）--}}
  @if(Auth::user()->role === 'admin')
  <div class="mt-5 pt-4 border-top text-center">
    <p class="text-muted small mb-3">手冊由系統自動截圖產生，如頁面有重大更新可重新產生。</p>
    <button id="regen-btn" class="btn btn-outline-secondary rounded-pill px-4">
      <i class="bi bi-arrow-clockwise me-1"></i>重新產生手冊
    </button>
    <div id="regen-status" class="mt-2 small text-muted" style="display:none;"></div>
  </div>
  @endif

</div>

<style>
.manual-card { transition: transform .18s, box-shadow .18s; }
.manual-card:hover { transform: translateY(-3px); box-shadow: 0 8px 24px rgba(0,0,0,.12) !important; }
</style>
@endsection

@if(Auth::user()->role === 'admin')
@push('scripts')
<script>
(function () {
  const btn    = document.getElementById('regen-btn');
  const status = document.getElementById('regen-status');
  if (!btn) return;

  const csrfToken   = document.querySelector('meta[name="csrf-token"]').content;
  const regenUrl    = '{{ route('manual.regenerate') }}';
  const statusUrl   = '{{ route('manual.regenerate.status') }}';

  let polling = null;

  function setStatus(html, color) {
    status.style.display = '';
    status.className = 'mt-2 small text-' + color;
    status.innerHTML = html;
  }

  function startPolling() {
    polling = setInterval(function () {
      fetch(statusUrl)
        .then(r => r.json())
        .then(data => {
          if (data.done) {
            clearInterval(polling);
            btn.disabled = false;
            btn.innerHTML = '<i class="bi bi-arrow-clockwise me-1"></i>重新產生手冊';
            setStatus('<i class="bi bi-check-circle-fill me-1 text-success"></i>產生完成！上次更新：' + data.last_updated, 'success');
          }
        })
        .catch(() => {});
    }, 4000);
  }

  btn.addEventListener('click', function () {
    btn.disabled = true;
    btn.innerHTML = '<span class="spinner-border spinner-border-sm me-1"></span>產生中…';
    setStatus('正在截圖並產生手冊，通常需要 3–5 分鐘，請稍候…', 'muted');

    fetch(regenUrl, {
      method: 'POST',
      headers: { 'X-CSRF-TOKEN': csrfToken, 'Accept': 'application/json' },
    })
    .then(r => r.json())
    .then(data => {
      if (data.status === 'started') startPolling();
    })
    .catch(function () {
      btn.disabled = false;
      btn.innerHTML = '<i class="bi bi-arrow-clockwise me-1"></i>重新產生手冊';
      setStatus('送出失敗，請重試。', 'danger');
    });
  });
})();
</script>
@endpush
@endif