@extends('layouts.app')
@section('title', '建立簽署請求 - ' . $doc->title)
@push('styles')
<link rel="stylesheet" href="/css/pdf-tool.css?v={{ filemtime(public_path('css/pdf-tool.css')) }}">
<style>
.sc-app { height: calc(100vh - 72px); min-height: 560px; display: flex; margin: -1rem -12px 0; }
.sc-side { width: 360px; background: #fff; border-right: 1px solid #e2e8f0; overflow-y: auto; padding: 14px; flex-shrink: 0; font-size: .84rem; }
.sc-side h5 { font-size: 1rem; font-weight: 800; }
.sc-rcp { border: 1px solid #e2e8f0; border-radius: 10px; padding: 8px; margin-bottom: 8px; cursor: pointer; position: relative; }
.sc-rcp.active { border-color: #2563eb; box-shadow: 0 0 0 2px rgba(37,99,235,.15); }
.sc-rcp .dot { width: 12px; height: 12px; border-radius: 50%; display: inline-block; margin-right: 6px; }
.sc-rcp .x { position: absolute; top: 6px; right: 8px; color: #b91c1c; cursor: pointer; }
.pt-item-field { font-size: 10px; }
.sc-fields .f { display: flex; align-items: center; gap: 6px; padding: 4px 0; border-bottom: 1px solid #f1f5f9; font-size: .76rem; }
.sc-fields .f .del { margin-left: auto; color: #b91c1c; cursor: pointer; }
.pt-viewer { flex: 1; }
.pt-mode-draw .pt-page { cursor: crosshair; }
@media (prefers-color-scheme: dark) { .sc-side { background: #1e2330; border-color: #2e3340; color: #e2e8f0; } .sc-rcp { border-color: #2e3a4a; } }
</style>
@endpush
@section('content')
@php
$cfg = [
  'fileUrl' => route('pdf-tool.file', $doc),
  'store'   => route('pdf-tool.sign.store', $doc),
  'back'    => route('pdf-tool.show', $doc),
  'pages'   => $doc->page_info ?? [],
  'title'   => $doc->title,
  'canSeal' => $canSeal,
  'linkDays'=> $linkDays,
];
@endphp
<div class="sc-app pt-mode-draw" id="scApp">
  <aside class="sc-side">
    <div class="d-flex justify-content-between align-items-center mb-2">
      <h5 class="mb-0"><i class="bi bi-send-check me-1 text-primary"></i>建立簽署請求</h5>
      <a href="{{ route('pdf-tool.show', $doc) }}" class="btn btn-sm btn-outline-secondary"><i class="bi bi-x-lg"></i></a>
    </div>
    <div class="mb-2"><label class="form-label small mb-1">簽署標題</label><input type="text" class="form-control form-control-sm" id="scTitle" value="{{ $doc->title }}"></div>
    <div class="mb-2"><label class="form-label small mb-1">給簽署人的訊息（選填）</label><textarea class="form-control form-control-sm" id="scMessage" rows="2"></textarea></div>

    <div class="d-flex justify-content-between align-items-center mt-3 mb-1"><b>簽署人</b><button class="btn btn-sm btn-outline-primary py-0" id="scAddRcp"><i class="bi bi-plus"></i> 新增</button></div>
    <div id="scRcps"></div>
    <div class="form-check"><input class="form-check-input" type="checkbox" id="scSequential"><label class="form-check-label small" for="scSequential">依序簽署（前一位完成後才通知下一位）</label></div>

    <div class="mt-3 mb-1"><b>放置欄位</b> <span class="text-muted small">（先點選上方簽署人，再選類型於頁面拖曳）</span></div>
    <div class="pt-tools">
      <button class="btn btn-sm btn-outline-secondary active" data-ft="signature"><i class="bi bi-pen"></i> 簽名</button>
      <button class="btn btn-sm btn-outline-secondary" data-ft="initials"><i class="bi bi-type"></i> 簽署縮寫</button>
      <button class="btn btn-sm btn-outline-secondary" data-ft="date"><i class="bi bi-calendar-date"></i> 日期</button>
      <button class="btn btn-sm btn-outline-secondary" data-ft="name"><i class="bi bi-person"></i> 姓名</button>
      <button class="btn btn-sm btn-outline-secondary" data-ft="text"><i class="bi bi-input-cursor-text"></i> 文字</button>
      <button class="btn btn-sm btn-outline-secondary" data-ft="select"><i class="bi bi-cursor"></i> 選取</button>
    </div>
    <div class="sc-fields" id="scFields"></div>

    <div class="mt-3 mb-1"><b>選項</b></div>
    <div class="d-flex align-items-center gap-2 mb-1"><label class="small">連結有效</label><input type="number" class="form-control form-control-sm" id="scExpires" value="{{ $linkDays }}" min="1" max="90" style="width:70px;"><span class="small">天</span></div>
    <div class="form-check"><input class="form-check-input" type="checkbox" id="scDigital" {{ $canSeal ? 'checked' : 'disabled' }}><label class="form-check-label small" for="scDigital">每位簽署加上數位簽章並於完成時封存（PAdES）</label></div>
    <div class="d-grid mt-3">
      <button class="btn btn-primary" id="scSend"><i class="bi bi-send me-1"></i>寄送簽署請求</button>
    </div>
    <div class="text-muted small mt-2">簽署人會收到含專屬連結的郵件，不需帳號即可於瀏覽器完成簽署。</div>
  </aside>
  <div class="pt-viewer" id="ptViewer"></div>
</div>
@endsection
@push('scripts')
<script type="application/json" id="sc-config">{!! json_encode($cfg, JSON_HEX_TAG | JSON_UNESCAPED_UNICODE | JSON_UNESCAPED_SLASHES) !!}</script>
<script type="module">
import { PdfViewer, makeInteractive, api, toast } from '/js/pdf-tool-viewer.mjs?v={{ filemtime(public_path('js/pdf-tool-viewer.mjs')) }}';
const CFG = JSON.parse(document.getElementById('sc-config').textContent);
const $ = (s, r = document) => r.querySelector(s); const $$ = (s, r = document) => Array.from(r.querySelectorAll(s));
const esc = (s) => String(s ?? '').replace(/[&<>"']/g, c => ({ '&': '&amp;', '<': '&lt;', '>': '&gt;', '"': '&quot;', "'": '&#39;' }[c]));
const COLORS = ['#2563eb', '#16a34a', '#d97706', '#dc2626', '#7c3aed', '#0891b2', '#db2777', '#4b5563', '#65a30d', '#9333ea'];
const S = { recipients: [{ name: '', email: '' }], active: 0, fields: [], ftype: 'signature', selected: null };
const viewerEl = $('#ptViewer');
const viewer = new PdfViewer({ container: viewerEl, url: CFG.fileUrl, textLayer: false, onPageCreated: (p) => renderFields(p) });
viewer.load().then(() => viewer.fitWidth()).catch(e => toast('無法載入 PDF：' + e.message, 'error'));

function renderRcps() {
  const box = $('#scRcps'); box.innerHTML = '';
  S.recipients.forEach((r, i) => {
    const d = document.createElement('div'); d.className = 'sc-rcp' + (i === S.active ? ' active' : '');
    d.innerHTML = `<div class="d-flex align-items-center mb-1"><span class="dot" style="background:${COLORS[i % COLORS.length]}"></span><b>簽署人 ${i + 1}</b>${S.recipients.length > 1 ? '<span class="x" title="移除"><i class="bi bi-x-circle"></i></span>' : ''}</div>
      <input type="text" class="form-control form-control-sm mb-1" placeholder="姓名" value="${esc(r.name)}" data-k="name"><input type="email" class="form-control form-control-sm" placeholder="Email" value="${esc(r.email)}" data-k="email">`;
    d.addEventListener('click', (e) => { if (e.target.closest('.x')) { S.recipients.splice(i, 1); S.fields = S.fields.filter(f => f.recipient !== i).map(f => ({ ...f, recipient: f.recipient > i ? f.recipient - 1 : f.recipient })); S.active = 0; renderRcps(); renderAll(); return; } S.active = i; $$('.sc-rcp').forEach((x, j) => x.classList.toggle('active', j === i)); });
    d.querySelectorAll('input').forEach(inp => inp.addEventListener('input', () => { r[inp.dataset.k] = inp.value; renderFieldList(); }));
    box.appendChild(d);
  });
}
$('#scAddRcp').addEventListener('click', () => { if (S.recipients.length >= 10) return; S.recipients.push({ name: '', email: '' }); S.active = S.recipients.length - 1; renderRcps(); });
renderRcps();
$$('[data-ft]').forEach(b => b.addEventListener('click', () => { S.ftype = b.dataset.ft; $$('[data-ft]').forEach(x => x.classList.toggle('active', x === b)); $('#scApp').classList.toggle('pt-mode-draw', S.ftype !== 'select'); }));

const LABEL = { signature: '簽名', initials: '縮寫', date: '日期', name: '姓名', text: '文字' };
const DEF = { signature: [160, 60], initials: [70, 40], date: [110, 22], name: [130, 22], text: [160, 22] };
function renderFields(p) {
  p.items.innerHTML = '';
  S.fields.forEach((f, idx) => {
    if (f.page !== p.num) return;
    const el = document.createElement('div'); el.className = 'pt-item pt-item-field' + (S.selected === idx ? ' selected' : '');
    const col = COLORS[f.recipient % COLORS.length]; el.style.cssText = `left:${f.x}px;top:${f.y}px;width:${f.w}px;height:${f.h}px;border-color:${col};color:${col};background:${col}22;`;
    el.innerHTML = `${LABEL[f.type]} · ${esc(S.recipients[f.recipient]?.name || ('簽署人' + (f.recipient + 1)))}`;
    makeInteractive(el, () => viewer.scale, { onSelect: () => { S.selected = idx; $$('.pt-item', viewerEl).forEach(x => x.classList.remove('selected')); el.classList.add('selected'); }, onChange: () => { f.x = parseFloat(el.style.left); f.y = parseFloat(el.style.top); f.w = parseFloat(el.style.width); f.h = parseFloat(el.style.height); } });
    p.items.appendChild(el);
  });
}
function renderAll() { viewer.pages.forEach(renderFields); renderFieldList(); }
function renderFieldList() {
  const box = $('#scFields');
  box.innerHTML = S.fields.map((f, i) => `<div class="f"><span class="badge bg-secondary">${f.page}</span><span class="dot" style="width:10px;height:10px;border-radius:50%;background:${COLORS[f.recipient % COLORS.length]};display:inline-block"></span>${LABEL[f.type]} · ${esc(S.recipients[f.recipient]?.name || ('簽署人' + (f.recipient + 1)))}${f.type === 'text' ? ` <input type="text" class="form-control form-control-sm py-0" style="width:90px;font-size:.7rem" placeholder="標籤" value="${esc(f.label || '')}" data-i="${i}">` : ''}<i class="bi bi-trash del" data-i="${i}"></i></div>`).join('') || '<div class="text-muted small py-1">尚未放置欄位</div>';
  box.querySelectorAll('.del').forEach(d => d.addEventListener('click', () => { S.fields.splice(+d.dataset.i, 1); S.selected = null; renderAll(); }));
  box.querySelectorAll('input[data-i]').forEach(inp => inp.addEventListener('input', () => { S.fields[+inp.dataset.i].label = inp.value; }));
}
let draw = null;
viewerEl.addEventListener('pointerdown', (e) => {
  if (S.ftype === 'select' || e.button !== 0 || e.target.closest('.pt-item')) return;
  const p = viewer.pageAt(e); if (!p) return;
  const pt = viewer.toPt(p, e.clientX, e.clientY);
  draw = { p, sx: pt.x, sy: pt.y, cur: null };
  const rb = document.createElement('div'); rb.className = 'pt-rubber'; rb.style.left = pt.x + 'px'; rb.style.top = pt.y + 'px'; p.items.appendChild(rb); draw.el = rb;
  viewerEl.setPointerCapture(e.pointerId); e.preventDefault();
});
viewerEl.addEventListener('pointermove', (e) => { if (!draw) return; const pt = viewer.toPt(draw.p, e.clientX, e.clientY); const x = Math.min(draw.sx, pt.x), y = Math.min(draw.sy, pt.y), w = Math.abs(pt.x - draw.sx), h = Math.abs(pt.y - draw.sy); Object.assign(draw.el.style, { left: x + 'px', top: y + 'px', width: w + 'px', height: h + 'px' }); draw.cur = { x, y, w, h }; });
viewerEl.addEventListener('pointerup', () => {
  if (!draw) return; const d = draw; draw = null; d.el.remove();
  const [dw, dh] = DEF[S.ftype]; let x = d.sx, y = d.sy, w = dw, h = dh;
  if (d.cur && d.cur.w > 8 && d.cur.h > 8) { ({ x, y, w, h } = d.cur); } else { x = d.sx - dw / 2; y = d.sy - dh / 2; }
  S.fields.push({ recipient: S.active, type: S.ftype, page: d.p.num, x: Math.max(0, x), y: Math.max(0, y), w, h, label: '', required: true });
  S.selected = S.fields.length - 1; renderAll();
});
document.addEventListener('keydown', (e) => { if ((e.key === 'Delete' || e.key === 'Backspace') && S.selected !== null && !['INPUT', 'TEXTAREA'].includes(document.activeElement.tagName)) { S.fields.splice(S.selected, 1); S.selected = null; renderAll(); } });
$('#scSend').addEventListener('click', async () => {
  for (const r of S.recipients) { if (!r.name.trim() || !r.email.trim()) { toast('請填寫所有簽署人的姓名與 Email', 'warn'); return; } }
  if (!S.fields.length) { toast('請至少放置一個簽名欄位', 'warn'); return; }
  const btn = $('#scSend'); btn.disabled = true;
  try {
    const d = await api(CFG.store, { body: { title: $('#scTitle').value, message: $('#scMessage').value, sequential: $('#scSequential').checked, digital: $('#scDigital').checked, expires_days: +$('#scExpires').value || CFG.linkDays, recipients: S.recipients, fields: S.fields } });
    toast(d.message, 'success'); setTimeout(() => location.href = d.url, 600);
  } catch (e) { toast(e.message, 'error'); btn.disabled = false; }
});
</script>
@endpush