@extends('layouts.app')
@section('title', '編輯 — ' . $doc->title)

@push('styles')
<link rel="stylesheet" href="/vendor/summernote/summernote-bs5.min.css">
@if($fileType === 'spreadsheet')
<style>
.sheet-wrap { border:1px solid var(--bs-border-color); border-radius:8px; overflow:hidden; }
.sheet-toolbar { display:flex; gap:6px; padding:6px 10px; background:var(--bs-tertiary-bg); border-bottom:1px solid var(--bs-border-color); }
.sheet-toolbar button { padding:2px 10px; font-size:.8rem; border-radius:4px; border:1px solid var(--bs-border-color); background:var(--bs-body-bg); cursor:pointer; }
.sheet-toolbar button:hover { background:var(--bs-secondary-bg); }
.sheet-outer { overflow:auto; max-height:520px; }
#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); }
</style>
@endif
@endpush

@section('content')
@include('projects._nav')

<div class="container py-4" style="max-width:980px;">
  <div class="d-flex align-items-center gap-2 mb-3">
    @if($fileType === 'spreadsheet')
      <i class="bi bi-file-earmark-spreadsheet text-success fs-4"></i>
    @else
      <i class="bi bi-file-earmark-richtext text-primary fs-4"></i>
    @endif
    <h4 class="mb-0 fw-bold">編輯</h4>
    <span class="text-muted small ms-1">— {{ $doc->title }}</span>
  </div>

  <form id="docForm" action="{{ route("{$routePrefix}.update", [$project, $doc]) }}" method="POST">
    @csrf @method('PUT')

    <div class="card shadow-sm mb-3">
      <div class="card-body">
        <div class="mb-3">
          <input type="text" name="title" class="form-control form-control-lg fw-semibold"
                 value="{{ old('title', $doc->title) }}" required
                 style="border:none;border-bottom:2px solid var(--bs-border-color);border-radius:0;padding-left:0;box-shadow:none;font-size:1.15rem;">
          @error('title')<div class="text-danger small mt-1">{{ $message }}</div>@enderror
        </div>

        @if($fileType === 'spreadsheet')
          <input type="hidden" name="content" id="sheetContent">
          <div class="sheet-wrap">
            <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>
          <script id="initData" type="application/json">@json($doc->content)</script>
        @else
          <textarea name="content" id="editor">{!! $doc->content !!}</textarea>
        @endif
      </div>
    </div>

    <div class="d-flex gap-2 justify-content-end">
      <a href="{{ route("{$routePrefix}.show", [$project, $doc]) }}" class="btn btn-outline-secondary">取消</a>
      <button type="submit" class="btn btn-primary px-4">
        <i class="bi bi-check2 me-1"></i>儲存
      </button>
    </div>
  </form>
</div>
@endsection

@push('scripts')
<script src="/vendor/summernote/summernote-bs5.min.js"></script>
<script src="/vendor/summernote/lang/summernote-zh-TW.min.js"></script>
@if($fileType === 'spreadsheet')
<script>
var initialRaw = document.getElementById('initData').textContent;
var initial = {};
try{initial=JSON.parse(JSON.parse(initialRaw));}catch(e){try{initial=JSON.parse(initialRaw);}catch(e2){}}
var ROWS=initial.rows||20, COLS=initial.cols||10, initData=initial.data||[];
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 escHtml(s){return String(s).replace(/&/g,'&amp;').replace(/</g,'&lt;').replace(/>/g,'&gt;').replace(/"/g,'&quot;');}
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++){var v=(initData[r]&&initData[r][c])?escHtml(initData[r][c]):'';html+='<td><input type="text" value="'+v+'" 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;}
document.getElementById('docForm').addEventListener('submit',function(){document.getElementById('sheetContent').value=JSON.stringify({rows:ROWS,cols:COLS,data:collectData()});});
buildSheet();
</script>
@else
<script>
$(function(){

$('#editor').summernote({
  lang: 'zh-TW',
  height: 480,
  minHeight: 300,
  placeholder: '開始輸入內容…',
  toolbar: [
    ['style',    ['style']],
    ['font',     ['bold', 'italic', 'underline', 'strikethrough', 'superscript', 'subscript', 'clear']],
    ['fontsize', ['fontsize']],
    ['fontname', ['fontname']],
    ['color',    ['color']],
    ['para',     ['ul', 'ol', 'paragraph']],
    ['height',   ['height']],
    ['table',    ['table']],
    ['insert',   ['link', 'hr']],
    ['view',     ['fullscreen', 'codeview', 'undo', 'redo']],
  ],
  fontSizes: ['8','9','10','11','12','14','16','18','20','24','28','32','36','48','64'],
  fontNames: [
    'Arial', 'Arial Black', 'Comic Sans MS', 'Courier New',
    'Georgia', 'Helvetica', 'Impact', 'Tahoma', 'Times New Roman',
    'Verdana', '微軟正黑體', '新細明體', '標楷體', '黑體',
  ],
  callbacks: {
    onImageUpload: function(files) {
      // No image upload in this build — paste or drag images not supported
    }
  }
});
});
</script>
@endif
@endpush