@extends('layouts.app')
@section('title', ($fileType === 'spreadsheet' ? '新試算表' : ($fileType === 'presentation' ? '新簡報' : '新文件')) . ' — ' . $project->name)

@push('styles')
<link rel="stylesheet" href="/vendor/summernote/summernote-bs5.min.css">
<style>
/* ── Google Docs chrome (mirrors show.blade.php) ── */
.doc-chrome { display:flex; flex-direction:column; }

.doc-titlebar {
  display:flex; align-items:center; gap:8px;
  padding:6px 12px 4px;
  background:var(--bs-body-bg);
  flex-shrink:0; position:relative; z-index:1002;
}
.doc-mac-tl { display:none; align-items:center; gap:7px; margin-right:4px; flex-shrink:0; }
[data-theme="mac"] .doc-mac-tl { display:flex; }
.dtb-back {
  display:inline-flex; align-items:center; justify-content:center;
  width:32px; height:32px; border-radius:50%; color:var(--bs-body-color);
  text-decoration:none; flex-shrink:0; transition:background .12s;
}
.dtb-back:hover { background:var(--bs-tertiary-bg); color:var(--bs-body-color); }
.dtb-file-icon { font-size:1.5rem; flex-shrink:0; line-height:1; }
.dtb-title-wrap { flex:1; min-width:0; }
.dtb-title-input {
  display:block; width:auto; min-width:80px; max-width:600px; font-size:1.05rem; font-weight:500;
  border:none; border-radius:4px; padding:3px 6px;
  background:transparent; color:var(--bs-body-color); outline:none;
  transition:background .15s;
}
.dtb-title-input:hover:not(:focus) { background:var(--bs-tertiary-bg); }
.dtb-title-input:focus               { background:var(--bs-tertiary-bg); }
.dtb-breadcrumb { font-size:.72rem; color:var(--bs-secondary-color); padding:0 6px; line-height:1; margin-top:1px; }
.dtb-actions { display:flex; align-items:center; gap:6px; flex-shrink:0; }

/* ── Menu bar ── */
.doc-menubar {
  display:flex; align-items:center;
  padding:0 8px;
  border-bottom:1px solid var(--bs-border-color);
  background:var(--bs-body-bg);
  flex-shrink:0; min-height:28px; position:relative; z-index:1002;
}
.dmenu-btn {
  padding:3px 8px; font-size:.79rem; border:none; background:none;
  border-radius:3px; cursor:pointer; color:var(--bs-body-color);
  line-height:1.7; transition:background .1s; white-space:nowrap;
}
.dmenu-btn:hover, .dmenu-btn.show { background:var(--bs-tertiary-bg); }
.dmenu-shortcut { color:var(--bs-secondary-color); font-size:.71rem; margin-left:auto; padding-left:18px; }

/* ── Toolbar row ── */
.doc-toolbar-row {
  flex-shrink:0; background:var(--bs-body-bg);
  border-bottom:1px solid var(--bs-border-color);
  min-height:0;
}

/* ── Find bar ── */
.find-bar {
  display:flex; align-items:center; gap:6px; padding:4px 14px;
  background:var(--bs-body-bg); border-bottom:1px solid var(--bs-border-color);
  flex-shrink:0; flex-wrap:wrap;
}
.find-bar input {
  font-size:.81rem; padding:3px 8px; border-radius:4px;
  border:1px solid var(--bs-border-color);
  background:var(--bs-body-bg); color:var(--bs-body-color); width:150px;
}
.find-bar input:focus { outline:none; border-color:#1a73e8; }
.find-count { font-size:.73rem; color:var(--bs-secondary-color); min-width:48px; }

/* ── Editor area ── */
.doc-editor-area { flex:1; overflow-y:auto; padding:0; }
.doc-editor-area .note-toolbar  { display:none !important; }
.doc-editor-area .note-editable { font-size:1rem; line-height:1.8; }
.doc-editor-area .note-statusbar { display:none; }

/* ── Paper page look ── */
.doc-editor-area { background:#e8eaed; }
.doc-editor-area .note-editor { background:transparent !important; border:none !important; box-shadow:none !important; }
.doc-editor-area .note-editable {
  max-width:794px; margin:24px auto;
  background:#fff; padding:60px 72px !important;
  box-shadow:0 1px 4px rgba(0,0,0,.15),0 4px 16px rgba(0,0,0,.1);
  min-height:1123px; border-radius:2px;
}
.doc-editor-area.print-layout-off { background:var(--bs-body-bg); }
.doc-editor-area.print-layout-off .note-editable {
  max-width:none; margin:0; background:transparent;
  padding:20px 0 !important; box-shadow:none; min-height:calc(100vh - 200px); border-radius:0;
}

/* ── Spreadsheet ── */
.sheet-wrap { overflow:hidden; }
.sheet-toolbar { display:flex; gap:6px; padding:6px 10px; background:var(--bs-tertiary-bg); border-bottom:1px solid var(--bs-border-color); flex-wrap:wrap; }
.sheet-toolbar button { padding:2px 10px; font-size:.8rem; border-radius:4px; border:1px solid var(--bs-border-color); background:var(--bs-body-bg); color:var(--bs-body-color); cursor:pointer; }
.sheet-toolbar button:hover { background:var(--bs-secondary-bg,var(--bs-tertiary-bg)); }
.sheet-outer { overflow:auto; flex:1; }
#sheetTable { border-collapse:collapse; font-size:.83rem; }
#sheetTable th { background:var(--bs-tertiary-bg); padding:3px 8px; text-align:center; border:1px solid var(--bs-border-color); font-weight:600; font-size:.75rem; min-width:90px; user-select:none; color:var(--bs-secondary-color); }
#sheetTable th.row-h { min-width:36px; width:36px; }
#sheetTable td { border:1px solid var(--bs-border-color); padding:0; min-width:90px; }
#sheetTable td.row-h { background:var(--bs-tertiary-bg); text-align:center; font-size:.72rem; color:var(--bs-secondary-color); padding:0 4px; user-select:none; }
#sheetTable td input { width:100%; border:none; outline:none; padding:4px 6px; font-size:.83rem; background:transparent; color:var(--bs-body-color); }
#sheetTable td input:focus { background:rgba(13,110,253,.07); }

/* ── Template picker ── */
.tpl-card {
  border:2px solid var(--bs-border-color); border-radius:10px;
  padding:14px 16px; cursor:pointer; transition:all .15s;
  background:var(--bs-body-bg); height:100%;
}
.tpl-card:hover { border-color:#1a73e8; background:rgba(26,115,232,.04); box-shadow:0 2px 8px rgba(26,115,232,.15); }
.tpl-card .tpl-icon { font-size:2rem; margin-bottom:8px; }
.tpl-card .tpl-name { font-weight:600; font-size:.92rem; margin-bottom:4px; }
.tpl-card .tpl-desc { font-size:.78rem; color:var(--bs-secondary-color); line-height:1.4; }
.tpl-card .tpl-cat  { font-size:.72rem; margin-top:6px; color:#1a73e8; }
.tpl-empty { text-align:center; padding:32px; color:var(--bs-secondary-color); font-size:.88rem; }
</style>
@endpush

@section('content')
@php
  $backUrl  = route("{$routePrefix}.index", array_filter(['project' => $project->id, 'folder_id' => $parentId]));
  $storeUrl = route("{$routePrefix}.store", $project);
  $isSheet  = $fileType === 'spreadsheet';
@endphp

{{-- Hidden form for submission --}}
<form id="docForm" action="{{ $storeUrl }}" method="POST" style="display:none;">
  @csrf
  <input type="hidden" name="file_type"  value="{{ $fileType }}">
  <input type="hidden" name="parent_id"  value="{{ $parentId }}">
  <input type="hidden" name="title"      id="formTitle">
  <input type="hidden" name="content"    id="formContent">
</form>

<div id="docChrome" class="doc-chrome">

  {{-- ── Title bar ── --}}
  <div class="doc-titlebar">
    <div class="doc-mac-tl">
      <span style="width:12px;height:12px;border-radius:50%;background:#ff5f57;display:inline-block;cursor:pointer;" onclick="location.href='{{ $backUrl }}'"></span>
      <span style="width:12px;height:12px;border-radius:50%;background:#febc2e;display:inline-block;"></span>
      <span style="width:12px;height:12px;border-radius:50%;background:#28c840;display:inline-block;"></span>
    </div>
    <a href="{{ $backUrl }}" class="dtb-back">
      <i class="bi bi-arrow-left" style="font-size:1rem;"></i>
    </a>
    @if($isSheet)
      <span class="dtb-file-icon">🟩</span>
    @else
      <span class="dtb-file-icon">📄</span>
    @endif
    <div class="dtb-title-wrap">
      <input id="docTitleInput" class="dtb-title-input"
             type="text"
             placeholder="{{ $isSheet ? '試算表名稱' : '未命名文件' }}"
             autocomplete="off"
             autofocus>
      <div class="dtb-breadcrumb">{{ $project->name }}</div>
    </div>
    <div class="dtb-actions">
      @if(!$isSheet && $templates->isNotEmpty())
      <button type="button" class="btn btn-sm btn-outline-secondary py-0 px-2"
              data-bs-toggle="modal" data-bs-target="#tplModal">
        <i class="bi bi-layout-text-window me-1"></i>套用樣板
      </button>
      @endif
      <button type="button" class="btn btn-sm btn-primary px-3" onclick="saveDoc()">
        <i class="bi bi-check2 me-1"></i>建立
      </button>
      <a href="{{ $backUrl }}" class="btn btn-sm btn-outline-secondary py-0 px-2">取消</a>
    </div>
  </div>

  {{-- ══════════════════════
       ROW 2 — Menu bar
       ══════════════════════ --}}
  <div class="doc-menubar">

    {{-- 檔案 --}}
    <div class="dropdown">
      <button class="dmenu-btn" data-bs-toggle="dropdown">檔案</button>
      <ul class="dropdown-menu" style="font-size:.81rem;min-width:220px;">
        <li><a class="dropdown-item" href="{{ route("{$routePrefix}.create", $project) }}">
          <i class="bi bi-file-earmark-plus me-2 text-muted"></i>新增檔案
        </a></li>
        <li><a class="dropdown-item" href="{{ $backUrl }}">
          <i class="bi bi-folder2-open me-2 text-muted"></i>開啟
        </a></li>
        <li><hr class="dropdown-divider"></li>
        <li><a class="dropdown-item d-flex justify-content-between" href="#" onclick="event.preventDefault();saveDoc()">
          <span><i class="bi bi-check2 me-2 text-muted"></i>建立文件</span><span class="dmenu-shortcut">Ctrl+S</span>
        </a></li>
        <li><hr class="dropdown-divider"></li>
        <li><a class="dropdown-item" href="{{ $backUrl }}">
          <i class="bi bi-x-circle me-2 text-muted"></i>取消
        </a></li>
      </ul>
    </div>

    {{-- 編輯 --}}
    <div class="dropdown">
      <button class="dmenu-btn" data-bs-toggle="dropdown">編輯</button>
      <ul class="dropdown-menu" style="font-size:.81rem;min-width:210px;">
        @if(!$isSheet)
        <li><a class="dropdown-item d-flex justify-content-between" href="#" onclick="event.preventDefault();$('#editor').summernote('undo')">
          <span><i class="bi bi-arrow-counterclockwise me-2 text-muted"></i>復原</span><span class="dmenu-shortcut">Ctrl+Z</span>
        </a></li>
        <li><a class="dropdown-item d-flex justify-content-between" href="#" onclick="event.preventDefault();$('#editor').summernote('redo')">
          <span><i class="bi bi-arrow-clockwise me-2 text-muted"></i>重做</span><span class="dmenu-shortcut">Ctrl+Y</span>
        </a></li>
        <li><hr class="dropdown-divider"></li>
        <li><a class="dropdown-item d-flex justify-content-between" href="#" onclick="event.preventDefault();docCut()">
          <span><i class="bi bi-scissors me-2 text-muted"></i>剪下</span><span class="dmenu-shortcut">Ctrl+X</span>
        </a></li>
        <li><a class="dropdown-item d-flex justify-content-between" href="#" onclick="event.preventDefault();docCopy()">
          <span><i class="bi bi-copy me-2 text-muted"></i>複製</span><span class="dmenu-shortcut">Ctrl+C</span>
        </a></li>
        <li><a class="dropdown-item d-flex justify-content-between" href="#" onclick="event.preventDefault();docPaste()">
          <span><i class="bi bi-clipboard me-2 text-muted"></i>貼上</span><span class="dmenu-shortcut">Ctrl+V</span>
        </a></li>
        <li><a class="dropdown-item d-flex justify-content-between" href="#" onclick="event.preventDefault();docSelectAll()">
          <span><i class="bi bi-check-all me-2 text-muted"></i>全選</span><span class="dmenu-shortcut">Ctrl+A</span>
        </a></li>
        <li><hr class="dropdown-divider"></li>
        <li><a class="dropdown-item d-flex justify-content-between" href="#" onclick="event.preventDefault();openFindBar()">
          <span><i class="bi bi-search me-2 text-muted"></i>尋找與取代</span><span class="dmenu-shortcut">Ctrl+H</span>
        </a></li>
        @endif
      </ul>
    </div>

    {{-- 查看 --}}
    <div class="dropdown">
      <button class="dmenu-btn" data-bs-toggle="dropdown">查看</button>
      <ul class="dropdown-menu" style="font-size:.81rem;min-width:220px;">
        @if(!$isSheet)
        <li><a class="dropdown-item" href="#" onclick="event.preventDefault();toggleDocFullscreen()">
          <i class="bi bi-fullscreen me-2 text-muted"></i>全螢幕
        </a></li>
        <li><hr class="dropdown-divider"></li>
        <li><a class="dropdown-item d-flex justify-content-between" href="#" onclick="event.preventDefault();togglePrintLayout()">
          <span><i class="bi bi-file-earmark me-2 text-muted"></i>列印版面配置</span>
          <i class="bi bi-check2 text-primary" id="printLayoutCheck"></i>
        </a></li>
        @endif
      </ul>
    </div>

    @if(!$isSheet)
    {{-- 插入 --}}
    <div class="dropdown">
      <button class="dmenu-btn" data-bs-toggle="dropdown">插入</button>
      <ul class="dropdown-menu" style="font-size:.81rem;min-width:210px;">
        <li><a class="dropdown-item" href="#" onclick="event.preventDefault();insertLink()">
          <i class="bi bi-link-45deg me-2 text-muted"></i>連結
        </a></li>
        <li><a class="dropdown-item" href="#" onclick="event.preventDefault();$('#editor').summernote('insertTable','3x3')">
          <i class="bi bi-table me-2 text-muted"></i>表格 3×3
        </a></li>
        <li><a class="dropdown-item" href="#" onclick="event.preventDefault();$('#editor').summernote('insertHorizontalRule')">
          <i class="bi bi-hr me-2 text-muted"></i>水平線
        </a></li>
        <li><hr class="dropdown-divider"></li>
        <li><a class="dropdown-item" href="#" onclick="event.preventDefault();insertCodeBlock()">
          <i class="bi bi-code-slash me-2 text-muted"></i>程式碼區塊
        </a></li>
      </ul>
    </div>

    {{-- 格式 (文件) --}}
    <div class="dropdown">
      <button class="dmenu-btn" data-bs-toggle="dropdown">格式</button>
      <ul class="dropdown-menu" style="font-size:.81rem;min-width:210px;">
        <li><h6 class="dropdown-header" style="font-size:.7rem;">段落樣式</h6></li>
        <li><a class="dropdown-item" href="#" onclick="event.preventDefault();$('#editor').summernote('formatBlock','h1')">
          <span style="font-size:1.1rem;font-weight:700;">H1</span>&nbsp;標題 1
        </a></li>
        <li><a class="dropdown-item" href="#" onclick="event.preventDefault();$('#editor').summernote('formatBlock','h2')">
          <span style="font-size:1rem;font-weight:700;">H2</span>&nbsp;標題 2
        </a></li>
        <li><a class="dropdown-item" href="#" onclick="event.preventDefault();$('#editor').summernote('formatBlock','h3')">
          <span style="font-size:.95rem;font-weight:600;">H3</span>&nbsp;標題 3
        </a></li>
        <li><a class="dropdown-item" href="#" onclick="event.preventDefault();$('#editor').summernote('formatBlock','p')">
          <i class="bi bi-paragraph me-2 text-muted"></i>一般段落
        </a></li>
        <li><hr class="dropdown-divider"></li>
        <li><h6 class="dropdown-header" style="font-size:.7rem;">文字格式</h6></li>
        <li><a class="dropdown-item d-flex justify-content-between" href="#" onclick="event.preventDefault();$('#editor').summernote('bold')">
          <span><b>B</b>&nbsp;粗體</span><span class="dmenu-shortcut">Ctrl+B</span>
        </a></li>
        <li><a class="dropdown-item d-flex justify-content-between" href="#" onclick="event.preventDefault();$('#editor').summernote('italic')">
          <span><i>I</i>&nbsp;斜體</span><span class="dmenu-shortcut">Ctrl+I</span>
        </a></li>
        <li><a class="dropdown-item d-flex justify-content-between" href="#" onclick="event.preventDefault();$('#editor').summernote('underline')">
          <span><u>U</u>&nbsp;底線</span><span class="dmenu-shortcut">Ctrl+U</span>
        </a></li>
        <li><a class="dropdown-item" href="#" onclick="event.preventDefault();$('#editor').summernote('strikethrough')">
          <s>S</s>&nbsp;刪除線
        </a></li>
        <li><hr class="dropdown-divider"></li>
        <li><a class="dropdown-item" href="#" onclick="event.preventDefault();$('#editor').summernote('removeFormat')">
          <i class="bi bi-eraser me-2 text-muted"></i>清除格式
        </a></li>
      </ul>
    </div>
    @endif

    @if($isSheet)
    {{-- 格式 (試算表) --}}
    <div class="dropdown">
      <button class="dmenu-btn" data-bs-toggle="dropdown">格式</button>
      <ul class="dropdown-menu" style="font-size:.81rem;min-width:220px;">
        <li><h6 class="dropdown-header" style="font-size:.72rem;">文字</h6></li>
        <li><button class="dropdown-item d-flex justify-content-between" onclick="sheetFmt('b')">
          <span><b>B</b>&nbsp;粗體</span><span class="dmenu-shortcut">Ctrl+B</span>
        </button></li>
        <li><button class="dropdown-item d-flex justify-content-between" onclick="sheetFmt('i')">
          <span><i>I</i>&nbsp;斜體</span><span class="dmenu-shortcut">Ctrl+I</span>
        </button></li>
        <li><button class="dropdown-item d-flex justify-content-between" onclick="sheetFmt('u')">
          <span><u>U</u>&nbsp;底線</span><span class="dmenu-shortcut">Ctrl+U</span>
        </button></li>
        <li><button class="dropdown-item" onclick="sheetFmt('st')"><s>S</s>&nbsp;刪除線</button></li>
        <li><hr class="dropdown-divider"></li>
        <li><h6 class="dropdown-header" style="font-size:.72rem;">水平對齊</h6></li>
        <li><button class="dropdown-item" onclick="sheetFmtToggle('a','left')"><i class="bi bi-text-left me-2 text-muted"></i>靠左</button></li>
        <li><button class="dropdown-item" onclick="sheetFmtToggle('a','center')"><i class="bi bi-text-center me-2 text-muted"></i>置中</button></li>
        <li><button class="dropdown-item" onclick="sheetFmtToggle('a','right')"><i class="bi bi-text-right me-2 text-muted"></i>靠右</button></li>
      </ul>
    </div>
    @endif

    {{-- 工具 --}}
    <div class="dropdown">
      <button class="dmenu-btn" data-bs-toggle="dropdown">工具</button>
      <ul class="dropdown-menu" style="font-size:.81rem;min-width:220px;">
        @if(!$isSheet)
        <li><a class="dropdown-item" href="#" onclick="event.preventDefault();showWordCount()">
          <i class="bi bi-123 me-2 text-muted"></i>字數統計
        </a></li>
        <li><a class="dropdown-item d-flex justify-content-between" href="#" onclick="event.preventDefault();openFindBar()">
          <span><i class="bi bi-search me-2 text-muted"></i>尋找與取代</span><span class="dmenu-shortcut">Ctrl+H</span>
        </a></li>
        @endif
        <li><button class="dropdown-item" onclick="showShortcuts()">
          <i class="bi bi-keyboard me-2 text-muted"></i>鍵盤快捷鍵
        </button></li>
      </ul>
    </div>

    {{-- 說明 --}}
    <div class="dropdown">
      <button class="dmenu-btn" data-bs-toggle="dropdown">說明</button>
      <ul class="dropdown-menu" style="font-size:.81rem;min-width:210px;">
        <li><a class="dropdown-item" href="#" onclick="event.preventDefault();showShortcuts()">
          <i class="bi bi-keyboard me-2 text-muted"></i>鍵盤快捷鍵
        </a></li>
      </ul>
    </div>

  </div>{{-- /doc-menubar --}}

  {{-- ── Find & Replace bar (document only) ── --}}
  @if(!$isSheet)
  <div class="find-bar d-none" id="findBar">
    <i class="bi bi-search text-muted" style="font-size:.8rem;"></i>
    <input type="text" id="findInput" placeholder="尋找…" oninput="findHighlight()" onkeydown="if(event.key==='Enter')findNext()">
    <span class="find-count" id="findCount"></span>
    <button class="btn btn-sm btn-outline-secondary py-0 px-2" onclick="findPrev()">
      <i class="bi bi-chevron-up"></i>
    </button>
    <button class="btn btn-sm btn-outline-secondary py-0 px-2" onclick="findNext()">
      <i class="bi bi-chevron-down"></i>
    </button>
    <span style="font-size:.75rem;color:var(--bs-secondary-color);margin-left:4px;">取代：</span>
    <input type="text" id="replaceInput" placeholder="取代為…" style="width:120px;">
    <button class="btn btn-sm btn-outline-secondary py-0 px-2" onclick="replaceOne()">取代</button>
    <button class="btn btn-sm btn-outline-secondary py-0 px-2" onclick="replaceAll()">全部取代</button>
    <button class="btn btn-sm btn-link py-0 text-muted ms-auto" onclick="closeFindBar()">
      <i class="bi bi-x-lg"></i>
    </button>
  </div>
  @endif

  {{-- ── Summernote toolbar row (document only) ── --}}
  @if(!$isSheet)
  <div id="toolbarRow" class="doc-toolbar-row"></div>
  @endif

  {{-- ── Content ── --}}
  <div id="docContentRow" style="flex:1;overflow:hidden;display:flex;flex-direction:column;">
    @if($isSheet)
      <input type="hidden" id="sheetContent">
      <div class="sheet-wrap" style="display:flex;flex-direction:column;flex:1;">
        <div class="sheet-toolbar">
          <button type="button" onclick="addRow()"><i class="bi bi-plus-circle me-1"></i>加列</button>
          <button type="button" onclick="addCol()"><i class="bi bi-plus-square me-1"></i>加欄</button>
          <button type="button" onclick="removeLastRow()"><i class="bi bi-dash-circle me-1"></i>刪末列</button>
          <button type="button" onclick="removeLastCol()"><i class="bi bi-dash-square me-1"></i>刪末欄</button>
        </div>
        <div class="sheet-outer">
          <table id="sheetTable"><thead id="sheetHead"></thead><tbody id="sheetBody"></tbody></table>
        </div>
      </div>
    @else
      <div class="doc-editor-area" id="editorArea">
        <textarea id="editor"></textarea>
      </div>
    @endif
  </div>

</div>{{-- /docChrome --}}

{{-- ── Template picker modal ── --}}
@if(!$isSheet)
<div class="modal fade" id="tplModal" tabindex="-1">
  <div class="modal-dialog modal-lg modal-dialog-scrollable">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title"><i class="bi bi-layout-text-window me-2 text-primary"></i>選擇樣板</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
      </div>
      <div class="modal-body">
        @if($templates->isEmpty())
          <div class="tpl-empty">
            <i class="bi bi-layout-text-window fs-1 d-block mb-2 text-muted"></i>
            尚未建立任何樣板，請至「設定 → 文件樣板」新增。
          </div>
        @else
          @php $grouped = $templates->groupBy(fn($t) => $t->category?->name ?? '未分類'); @endphp
          @foreach($grouped as $catName => $group)
            <h6 class="text-muted fw-semibold mb-2 mt-3" style="font-size:.78rem;letter-spacing:.05em;text-transform:uppercase;">{{ $catName }}</h6>
            <div class="row g-3 mb-2">
              @foreach($group as $tpl)
                <div class="col-sm-6 col-md-4">
                  <div class="tpl-card" onclick="applyTemplate({{ $tpl->id }})" data-bs-dismiss="modal">
                    <div class="tpl-icon">📄</div>
                    <div class="tpl-name">{{ $tpl->name }}</div>
                    @if($tpl->description)<div class="tpl-desc">{{ $tpl->description }}</div>@endif
                    <div class="tpl-cat"><i class="bi bi-tag me-1"></i>{{ $catName }}</div>
                  </div>
                </div>
              @endforeach
            </div>
          @endforeach
        @endif
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-outline-secondary btn-sm" data-bs-dismiss="modal">取消</button>
      </div>
    </div>
  </div>
</div>
<script id="tplData" type="application/json">
@json($templates->map(fn($t) => ['id' => $t->id, 'name' => $t->name, 'content' => $t->content]))
</script>
@endif

@endsection

@push('scripts')
{{-- Strip container padding & size chrome to fill viewport --}}
<script>
(function() {
  var cont = document.querySelector('.container-fluid');
  if (cont) { cont.style.paddingTop='0'; cont.style.paddingBottom='0'; cont.style.paddingLeft='0'; cont.style.paddingRight='0'; }
  document.body.style.paddingBottom = '0';
  function resize() {
    var chrome = document.getElementById('docChrome');
    if (!chrome) return;
    var rect = chrome.getBoundingClientRect();
    chrome.style.height = (window.innerHeight - rect.top) + 'px';
  }
  if (document.readyState === 'loading') { document.addEventListener('DOMContentLoaded', resize); }
  else { resize(); }
  window.addEventListener('resize', resize);
})();
</script>

@if($isSheet)
<script>
var ROWS = 20, COLS = 10;
function colLabel(n){var s='';n++;while(n>0){s=String.fromCharCode(64+(n%26||26))+s;n=Math.floor((n-1)/26);}return s;}
function buildSheet(){
  var tr='<tr><th class="row-h"></th>';
  for(var c=0;c<COLS;c++) tr+='<th>'+colLabel(c)+'</th>';
  document.getElementById('sheetHead').innerHTML=tr+'</tr>';
  var html='';
  for(var r=0;r<ROWS;r++){
    html+='<tr><td class="row-h">'+(r+1)+'</td>';
    for(var c=0;c<COLS;c++) html+='<td><input type="text" data-r="'+r+'" data-c="'+c+'" onkeydown="navCell(event,this)"></td>';
    html+='</tr>';
  }
  document.getElementById('sheetBody').innerHTML=html;
}
function navCell(e,inp){
  var r=+inp.dataset.r, c=+inp.dataset.c;
  if(e.key==='Tab'){e.preventDefault();focusCell(r,c+1>=COLS?r+1:r,c+1>=COLS?0:c+1);}
  if(e.key==='Enter'){e.preventDefault();focusCell(r+1,c);}
  if(e.key==='ArrowRight'&&inp.selectionStart===inp.value.length){e.preventDefault();focusCell(r,c+1);}
  if(e.key==='ArrowLeft'&&inp.selectionStart===0){e.preventDefault();focusCell(r,c-1);}
  if(e.key==='ArrowDown'){e.preventDefault();focusCell(r+1,c);}
  if(e.key==='ArrowUp'){e.preventDefault();focusCell(r-1,c);}
}
function focusCell(r,c){if(r<0||c<0||r>=ROWS||c>=COLS)return;var i=document.querySelector('#sheetBody input[data-r="'+r+'"][data-c="'+c+'"]');if(i)i.focus();}
function addRow(){ROWS++;buildSheet();}
function addCol(){COLS++;buildSheet();}
function removeLastRow(){if(ROWS>1){ROWS--;buildSheet();}}
function removeLastCol(){if(COLS>1){COLS--;buildSheet();}}
function collectData(){var res=[];for(var r=0;r<ROWS;r++){var row=[];for(var c=0;c<COLS;c++){var i=document.querySelector('#sheetBody input[data-r="'+r+'"][data-c="'+c+'"]');row.push(i?i.value:'');}res.push(row);}return res;}

/* sheet fmt stubs (no-op on create — no selection state) */
function sheetFmt(){}
function sheetFmtToggle(){}
function sheetFmtSet(){}
function showShortcuts(){ alert('Ctrl+S 建立文件\nCtrl+Z 復原\nCtrl+Y 重做'); }

var STORE_URL = '{{ $storeUrl }}';
var CSRF      = '{{ csrf_token() }}';
var _creating = false;

function saveDoc() {
  var title = document.getElementById('docTitleInput').value.trim();
  if (!title) { document.getElementById('docTitleInput').focus(); return; }
  if (_creating) return;
  _creating = true;

  var ti = document.getElementById('docTitleInput');
  ti.disabled = true; ti.style.opacity = '.6';

  fetch(STORE_URL, {
    method: 'POST',
    headers: { 'Content-Type': 'application/json', 'Accept': 'application/json', 'X-CSRF-TOKEN': CSRF },
    body: JSON.stringify({
      title:     title,
      content:   JSON.stringify({rows:ROWS,cols:COLS,data:collectData()}),
      file_type: 'spreadsheet',
      parent_id: {{ $parentId ? $parentId : 'null' }},
    })
  })
  .then(function(r) { if (!r.ok) throw new Error(r.status); return r.json(); })
  .then(function(d) { window.location.href = d.url; })
  .catch(function() {
    _creating = false;
    ti.disabled = false; ti.style.opacity = '';
    alert('建立失敗，請重試');
  });
}

// Auto-create when title loses focus or stops typing
var _autoTimer;
document.getElementById('docTitleInput').addEventListener('input', function() {
  clearTimeout(_autoTimer);
  if (this.value.trim()) _autoTimer = setTimeout(saveDoc, 800);
});
document.getElementById('docTitleInput').addEventListener('blur', function() {
  clearTimeout(_autoTimer);
  if (this.value.trim()) saveDoc();
});
document.getElementById('docTitleInput').addEventListener('keydown', function(e) {
  if (e.key === 'Enter') { e.preventDefault(); saveDoc(); }
});

document.addEventListener('keydown', function(e) {
  if ((e.ctrlKey || e.metaKey) && e.key === 's') { e.preventDefault(); saveDoc(); }
});

buildSheet();
</script>
@else
<script src="/vendor/summernote/summernote-bs5.min.js"></script>
<script src="/vendor/summernote/lang/summernote-zh-TW.min.js"></script>
<script>
$(function(){
  $('#editor').summernote({
    lang:'zh-TW',
    height: 600,
    placeholder: '開始輸入內容…',
    toolbar:[
      ['style',   ['style']],
      ['font',    ['bold','italic','underline','strikethrough','clear']],
      ['fontsize',['fontsize']],
      ['fontname',['fontname']],
      ['color',   ['color']],
      ['para',    ['ul','ol','paragraph']],
      ['table',   ['table']],
      ['insert',  ['link','hr']],
      ['view',    ['codeview','undo','redo']],
    ],
    fontSizes:['8','9','10','11','12','14','16','18','20','24','28','32','36','48','64'],
    fontNames:['Arial','Comic Sans MS','Courier New','Georgia','Helvetica','Times New Roman','Verdana','微軟正黑體','新細明體','標楷體'],
    callbacks:{
      onInit: function() {
        var toolbar = document.querySelector('.note-editor .note-toolbar');
        var row     = document.getElementById('toolbarRow');
        if (toolbar && row) { row.appendChild(toolbar); toolbar.style.display=''; }
      }
    }
  });
});

var STORE_URL = '{{ $storeUrl }}';
var CSRF      = '{{ csrf_token() }}';
var _creating = false;

function saveDoc() {
  var title = document.getElementById('docTitleInput').value.trim();
  if (!title) {
    document.getElementById('docTitleInput').style.outline = '2px solid #ea4335';
    document.getElementById('docTitleInput').focus();
    return;
  }
  if (_creating) return;
  _creating = true;

  var ti = document.getElementById('docTitleInput');
  ti.style.outline = '';
  ti.disabled = true;
  ti.style.opacity = '.6';

  fetch(STORE_URL, {
    method: 'POST',
    headers: { 'Content-Type': 'application/json', 'Accept': 'application/json', 'X-CSRF-TOKEN': CSRF },
    body: JSON.stringify({
      title:     title,
      content:   $('#editor').summernote('code'),
      file_type: '{{ $fileType }}',
      parent_id: {{ $parentId ? $parentId : 'null' }},
    })
  })
  .then(function(r) { if (!r.ok) throw new Error(r.status); return r.json(); })
  .then(function(d) { window.location.href = d.url; })
  .catch(function() {
    _creating = false;
    ti.disabled = false;
    ti.style.opacity = '';
    alert('建立失敗，請重試');
  });
}

function showWordCount() {
  var text = $($('#editor').summernote('code')).text();
  var words = text.trim() ? text.trim().split(/\s+/).length : 0;
  alert('字數：' + words + '\n字元數：' + text.length);
}

function showShortcuts() {
  alert('Ctrl+S 建立文件\nCtrl+B 粗體\nCtrl+I 斜體\nCtrl+U 底線\nCtrl+Z 復原\nCtrl+Y 重做\nCtrl+H 尋找與取代');
}

function insertLink() { $('#editor').summernote('createLink', {text:'', url:'', isNewWindow:true}); }

function insertCodeBlock() {
  var code = '<pre><code>在此輸入程式碼</code></pre>';
  $('#editor').summernote('pasteHTML', code);
}

function docCut()       { document.execCommand('cut'); }
function docCopy()      { document.execCommand('copy'); }
function docPaste()     { document.execCommand('paste'); }
function docSelectAll() { $('#editor').summernote('focus'); document.execCommand('selectAll'); }

var _printLayoutOn = true;
function togglePrintLayout() {
  _printLayoutOn = !_printLayoutOn;
  var ea = document.getElementById('editorArea');
  if (ea) ea.classList.toggle('print-layout-off', !_printLayoutOn);
  var chk = document.getElementById('printLayoutCheck');
  if (chk) chk.style.visibility = _printLayoutOn ? 'visible' : 'hidden';
}

function toggleDocFullscreen() {
  var chrome = document.getElementById('docChrome');
  if (!document.fullscreenElement) {
    chrome.requestFullscreen && chrome.requestFullscreen();
  } else {
    document.exitFullscreen && document.exitFullscreen();
  }
}

/* ── Find & Replace ── */
var _findMatches = [], _findIdx = -1;
function openFindBar() {
  var fb = document.getElementById('findBar');
  if (fb) { fb.classList.remove('d-none'); document.getElementById('findInput').focus(); }
}
function closeFindBar() {
  var fb = document.getElementById('findBar');
  if (fb) fb.classList.add('d-none');
  var editable = document.querySelector('.note-editable');
  if (editable) editable.querySelectorAll('mark.sn-find').forEach(function(m){
    var p = m.parentNode; while(m.firstChild) p.insertBefore(m.firstChild, m); p.removeChild(m); p.normalize();
  });
  _findMatches = []; _findIdx = -1;
  document.getElementById('findCount').textContent = '';
}
function findHighlight() {
  var q = document.getElementById('findInput').value;
  var editable = document.querySelector('.note-editable');
  if (!editable) return;
  editable.querySelectorAll('mark.sn-find').forEach(function(m){
    var p = m.parentNode; while(m.firstChild) p.insertBefore(m.firstChild, m); p.removeChild(m); p.normalize();
  });
  _findMatches = []; _findIdx = -1;
  if (!q) { document.getElementById('findCount').textContent = ''; return; }
  var walker = document.createTreeWalker(editable, NodeFilter.SHOW_TEXT);
  var nodes = [], node;
  while((node = walker.nextNode())) nodes.push(node);
  nodes.forEach(function(n){
    var idx, txt = n.textContent, lower = txt.toLowerCase(), lq = q.toLowerCase();
    while((idx = lower.indexOf(lq, 0)) !== -1) {
      var range = document.createRange();
      range.setStart(n, idx); range.setEnd(n, idx + q.length);
      var mark = document.createElement('mark');
      mark.className = 'sn-find';
      mark.style.cssText = 'background:#ffeb3b;color:inherit;border-radius:2px;';
      range.surroundContents(mark);
      _findMatches.push(mark);
      n = mark.nextSibling; if(!n) break;
      txt = n.textContent; lower = txt.toLowerCase();
    }
  });
  document.getElementById('findCount').textContent = _findMatches.length ? (1 + '/' + _findMatches.length) : '無結果';
  if (_findMatches.length) { _findIdx = 0; _scrollToMatch(0); }
}
function _scrollToMatch(i) {
  _findMatches.forEach(function(m,j){ m.style.background = j===i ? '#ff9800' : '#ffeb3b'; });
  if (_findMatches[i]) _findMatches[i].scrollIntoView({block:'center'});
  document.getElementById('findCount').textContent = (i+1) + '/' + _findMatches.length;
}
function findNext() { if(!_findMatches.length) return; _findIdx=(_findIdx+1)%_findMatches.length; _scrollToMatch(_findIdx); }
function findPrev() { if(!_findMatches.length) return; _findIdx=(_findIdx-1+_findMatches.length)%_findMatches.length; _scrollToMatch(_findIdx); }
function replaceOne() {
  if (_findMatches[_findIdx]) {
    _findMatches[_findIdx].textContent = document.getElementById('replaceInput').value;
    _findMatches.splice(_findIdx, 1);
    if (_findMatches.length) _scrollToMatch(_findIdx % _findMatches.length);
    else document.getElementById('findCount').textContent = '無結果';
  }
}
function replaceAll() {
  var rep = document.getElementById('replaceInput').value;
  _findMatches.forEach(function(m){ m.textContent = rep; });
  _findMatches = []; _findIdx = -1;
  document.getElementById('findCount').textContent = '完成';
}

// Auto-create when title loses focus or user stops typing
var _autoTimer;
document.getElementById('docTitleInput').addEventListener('input', function() {
  clearTimeout(_autoTimer);
  if (this.value.trim()) {
    this.style.outline = '';
    _autoTimer = setTimeout(saveDoc, 800);
  }
});
document.getElementById('docTitleInput').addEventListener('blur', function() {
  clearTimeout(_autoTimer);
  if (this.value.trim()) saveDoc();
});
document.getElementById('docTitleInput').addEventListener('keydown', function(e) {
  if (e.key === 'Enter') { e.preventDefault(); saveDoc(); }
});

document.addEventListener('keydown', function(e) {
  if ((e.ctrlKey || e.metaKey) && e.key === 's') { e.preventDefault(); saveDoc(); }
  if ((e.ctrlKey || e.metaKey) && e.key === 'h') { e.preventDefault(); openFindBar(); }
});

/* Template apply */
var TPL_DATA = {};
var tplEl = document.getElementById('tplData');
if (tplEl) { JSON.parse(tplEl.textContent).forEach(function(t){ TPL_DATA[t.id] = t; }); }

function applyTemplate(id) {
  var tpl = TPL_DATA[id];
  if (!tpl) return;
  $('#editor').summernote('code', tpl.content || '');
  var ti = document.getElementById('docTitleInput');
  if (ti && !ti.value.trim()) ti.value = tpl.name;
}
</script>
@endif
@endpush