@extends('layouts.public-signature')
@section('title', 'Assinar '.$signatureRequest->document?->original_name)
@section('tenant', $signatureRequest->tenant?->name)
@section('content')
<div class="signature-request-heading">
<div><span class="signature-kicker">Pedido de assinatura</span><h1>{{ $signatureRequest->document?->original_name ?: 'Documento' }}</h1><p>Destinatário: <strong>{{ $signatureRequest->recipient_name }}</strong> · Válido até {{ $signatureRequest->expires_at?->timezone(config('app.timezone'))->format('d/m/Y H:i') }}</p></div>
<span class="signature-status signature-status-{{ $signatureRequest->status }}">{{ str_replace('_',' ',$signatureRequest->status) }}</span>
</div>

@if($signatureRequest->status === 'signed')
<div class="signature-result-card signature-result-success"><div class="signature-result-icon">✓</div><h2>Documento assinado com sucesso</h2><p>A assinatura foi concluída em {{ $signatureRequest->signed_at?->timezone(config('app.timezone'))->format('d/m/Y H:i:s') }}. O pedido não pode ser utilizado novamente.</p>@if(! $signatureRequest->isExpired() && data_get($signatureRequest->signing_options,'download_after_signing',true))<a class="btn btn-primary" href="{{ route('public-signatures.signed',['token'=>$token]) }}">Descarregar documento assinado</a>@endif</div>
@elseif(in_array($signatureRequest->status, ['expired','cancelled','declined'], true))
<div class="signature-result-card signature-result-error"><div class="signature-result-icon">×</div><h2>{{ match($signatureRequest->status){'expired'=>'O pedido expirou','cancelled'=>'O pedido foi cancelado','declined'=>'A assinatura foi recusada'} }}</h2><p>Este endereço já não permite consultar ou assinar o documento.</p></div>
@elseif($signatureRequest->status === 'failed')
<div class="signature-result-card signature-result-error"><div class="signature-result-icon">!</div><h2>Não foi possível concluir o documento</h2><p>A assinatura foi recebida, mas ocorreu um erro ao aplicá-la. A organização foi informada e poderá repetir o processamento sem pedir uma nova assinatura.</p></div>
@elseif($signatureRequest->status === 'processing')
<div class="signature-result-card"><div class="signature-spinner"></div><h2>A aplicar a assinatura</h2><p>Mantenha esta página aberta. O documento final está a ser criado e validado.</p></div>
@elseif(!$hasAccess)
<div class="signature-auth-grid">
<div class="signature-info-card"><h2>Verificação de identidade</h2><p>Antes de mostrar o documento, é necessário confirmar o acesso através de um código enviado exclusivamente para o email associado ao pedido.</p><ul><li>O código expira rapidamente.</li><li>Só pode ser utilizado uma vez.</li><li>As tentativas e acessos ficam registados por hash.</li></ul></div>
<div class="signature-auth-card">
@if($signatureRequest->otp_required)
<h2>Receber código</h2><p class="muted">O código será enviado para {{ preg_replace('/(^..).+(@.+$)/','$1***$2',$signatureRequest->recipient_email) }}.</p>
<form method="post" action="{{ route('public-signatures.otp.send',['token'=>$token]) }}">@csrf<button class="btn btn-primary" style="width:100%">Enviar código OTP</button></form>
<hr class="signature-divider">
<form method="post" action="{{ route('public-signatures.otp.verify',['token'=>$token]) }}" class="form-grid">@csrf<label>Código recebido<input name="code" inputmode="numeric" autocomplete="one-time-code" pattern="[0-9]{4,8}" maxlength="8" required placeholder="000000"></label><button class="btn btn-secondary">Verificar e abrir documento</button></form>
@else
<h2>A preparar acesso</h2><p>Atualize a página para continuar.</p>
@endif
</div>
</div>
@else
<div class="signature-workspace">
<section class="signature-document-panel"><div class="signature-panel-heading"><div><h2>1. Reveja o documento</h2><p>Leia todas as páginas antes de prosseguir.</p></div><a class="btn btn-secondary btn-sm" target="_blank" rel="noopener noreferrer" href="{{ route('public-signatures.document',['token'=>$token]) }}">Abrir noutro separador</a></div><iframe class="signature-document-frame" title="Documento a assinar" src="{{ route('public-signatures.document',['token'=>$token]) }}"></iframe></section>
<section class="signature-capture-panel"><div class="signature-panel-heading"><div><h2>2. Assine</h2><p>A assinatura será aplicada a {{ $signatureRequest->fields->where('status','pending')->count() }} região(ões).</p></div></div>
<form id="signature-form" method="post" action="{{ route('public-signatures.submit',['token'=>$token]) }}" class="form-grid">@csrf
<input type="hidden" name="signature_data" id="signature-data"><input type="hidden" name="signature_method" id="signature-method" value="drawn"><input type="hidden" name="lock_version" value="{{ $signatureRequest->lock_version }}">
@foreach($signatureRequest->fields->where('status','pending') as $field)<input type="hidden" name="field_ids[]" value="{{ $field->id }}">@endforeach
<label>Nome completo do signatário<input id="signer-name" name="signer_name" value="{{ old('signer_name',$signatureRequest->recipient_name) }}" required maxlength="190" autocomplete="name"></label>
<div class="signature-method-tabs" role="tablist"><button type="button" class="signature-method active" data-method="drawn">Desenhar</button><button type="button" class="signature-method" data-method="typed">Escrever nome</button><button type="button" class="signature-method" data-method="uploaded">Carregar imagem</button></div>
<div class="signature-canvas-wrap"><canvas id="signature-canvas" width="900" height="280" aria-label="Área de assinatura"></canvas><button type="button" id="signature-clear" class="btn btn-secondary btn-sm signature-clear">Limpar</button></div>
<div id="typed-controls" class="signature-method-controls" hidden><label>Texto da assinatura<input id="typed-signature" maxlength="190" placeholder="Escreva o nome a apresentar"></label></div>
<div id="upload-controls" class="signature-method-controls" hidden><label>Imagem da assinatura<input id="signature-upload" type="file" accept="image/png,image/jpeg,image/webp"></label><p class="muted">Utilize uma imagem sua, com fundo transparente ou branco. Nunca carregue documentos de identificação.</p></div>
<div class="signature-fields-summary"><strong>Campos a preencher</strong><ul>@foreach($signatureRequest->fields->where('status','pending') as $field)<li>{{ $field->label }} · página {{ $field->page_number }}</li>@endforeach</ul></div>
<label class="signature-consent"><input type="checkbox" name="consent" value="1" required><span>{{ $consentText }}</span></label>
<button class="btn btn-primary signature-submit" type="submit">Confirmar e aplicar assinatura</button>
</form>
@if(data_get($signatureRequest->signing_options,'allow_decline',true))<details class="signature-decline"><summary>Não pretendo assinar este documento</summary><form method="post" action="{{ route('public-signatures.decline',['token'=>$token]) }}" class="form-grid">@csrf<label>Justificação<textarea name="reason" rows="4" required minlength="3" maxlength="2000"></textarea></label><button class="btn btn-danger">Recusar assinatura</button></form></details>@endif
</section>
</div>
@endif
@endsection

@if($signatureRequest->status === 'processing')
@push('scripts')<script>(()=>{const u=@json(route('public-signatures.status',['token'=>$token]));const t=setInterval(async()=>{try{const r=await fetch(u,{headers:{Accept:'application/json'},cache:'no-store'});if(!r.ok)return;const d=await r.json();if(['signed','failed','cancelled','expired','declined'].includes(d.status)){clearInterval(t);location.reload();}}catch(e){}},2500);})();</script>@endpush
@endif

@if($hasAccess && $signatureRequest->canBeSigned())
@push('scripts')
<script>
(()=>{
const canvas=document.getElementById('signature-canvas'),ctx=canvas.getContext('2d'),form=document.getElementById('signature-form'),data=document.getElementById('signature-data'),methodInput=document.getElementById('signature-method'),clear=document.getElementById('signature-clear'),typed=document.getElementById('typed-signature'),upload=document.getElementById('signature-upload'),typedControls=document.getElementById('typed-controls'),uploadControls=document.getElementById('upload-controls');
let drawing=false,touched=false,method='drawn',last=null;
function reset(){ctx.clearRect(0,0,canvas.width,canvas.height);ctx.strokeStyle='#111827';ctx.lineWidth=4;ctx.lineCap='round';ctx.lineJoin='round';touched=false;}
function pos(e){const r=canvas.getBoundingClientRect(),p=e.touches?e.touches[0]:e;return{x:(p.clientX-r.left)*(canvas.width/r.width),y:(p.clientY-r.top)*(canvas.height/r.height)}}
function start(e){if(method!=='drawn')return;e.preventDefault();drawing=true;last=pos(e)}function move(e){if(!drawing||method!=='drawn')return;e.preventDefault();const p=pos(e);ctx.beginPath();ctx.moveTo(last.x,last.y);ctx.lineTo(p.x,p.y);ctx.stroke();last=p;touched=true}function end(){drawing=false;last=null}
canvas.addEventListener('pointerdown',start);canvas.addEventListener('pointermove',move);window.addEventListener('pointerup',end);canvas.addEventListener('touchstart',start,{passive:false});canvas.addEventListener('touchmove',move,{passive:false});canvas.addEventListener('touchend',end);
function setMethod(next){method=next;methodInput.value=next;document.querySelectorAll('.signature-method').forEach(b=>b.classList.toggle('active',b.dataset.method===next));typedControls.hidden=next!=='typed';uploadControls.hidden=next!=='uploaded';reset();if(next==='typed')renderTyped();}
document.querySelectorAll('.signature-method').forEach(b=>b.addEventListener('click',()=>setMethod(b.dataset.method)));clear.addEventListener('click',reset);
function renderTyped(){reset();const value=(typed.value||document.getElementById('signer-name').value||'').trim();if(!value)return;ctx.fillStyle='#111827';ctx.textAlign='center';ctx.textBaseline='middle';ctx.font='italic 72px "Segoe Script", "Brush Script MT", cursive';let size=72;while(ctx.measureText(value).width>canvas.width-80&&size>28){size-=2;ctx.font=`italic ${size}px "Segoe Script", "Brush Script MT", cursive`;}ctx.fillText(value,canvas.width/2,canvas.height/2);touched=true;}
typed.addEventListener('input',renderTyped);document.getElementById('signer-name').addEventListener('input',()=>{if(method==='typed'&&!typed.value)renderTyped()});
upload.addEventListener('change',()=>{const f=upload.files&&upload.files[0];if(!f)return;if(f.size>3145728){alert('A imagem excede 3 MB.');upload.value='';return;}const reader=new FileReader();reader.onload=()=>{const img=new Image();img.onload=()=>{reset();const scale=Math.min((canvas.width-40)/img.width,(canvas.height-40)/img.height);const w=img.width*scale,h=img.height*scale;ctx.drawImage(img,(canvas.width-w)/2,(canvas.height-h)/2,w,h);touched=true};img.src=reader.result};reader.readAsDataURL(f)});
form.addEventListener('submit',e=>{if(method==='typed')renderTyped();if(!touched){e.preventDefault();alert('Introduza uma assinatura antes de continuar.');return;}data.value=canvas.toDataURL('image/png');const button=form.querySelector('button[type=submit]');button.disabled=true;button.textContent='A enviar assinatura…';});
reset();
})();
</script>
@endpush
@endif