@extends('layouts.app')

@section('title', 'Editor PDF — '.$template->name)

@push('styles')
<link rel="stylesheet" href="{{ asset('css/pdf-region-editor.css') }}">
@endpush

@section('content')
<div class="pdf-editor-page">
    <div class="pdf-editor-header">
        <div>
            <div class="pdf-editor-breadcrumb"><a href="{{ route('pdf-forms.index') }}">Formulários PDF</a> / {{ $template->name }}</div>
            <div class="pdf-editor-title-row">
                <h1>{{ $template->name }}</h1>
                @php($badge = match($template->status) {'published' => 'badge-success', 'archived' => 'badge-danger', default => 'badge-warning'})
                <span class="badge {{ $badge }}" id="pdf-template-status">{{ match($template->status) {'published' => 'Publicado', 'archived' => 'Arquivado', default => 'Rascunho'} }}</span>
                <span class="muted">v{{ $template->version }}</span>
            </div>
        </div>
        <div class="actions">
            <span class="pdf-save-status" id="pdf-save-status" role="status">A carregar PDF…</span>
            <button type="button" class="btn btn-secondary" id="pdf-save-now">Guardar</button>
            @if($template->status === 'published')<a class="btn btn-primary" href="{{ route('pdf-forms.generate', $template) }}">Gerar PDF</a>@endif
            <form method="post" action="{{ route('pdf-forms.revisions.store', $template) }}" class="inline-form" data-save-editor>
                @csrf
                <input type="hidden" name="reason" value="Versão manual pelo editor">
                <button class="btn btn-secondary">Guardar versão</button>
            </form>
            @if($template->status !== 'archived')
                <form method="post" action="{{ route('pdf-forms.publish', $template) }}" class="inline-form" id="pdf-publish-form" data-save-editor>
                    @csrf
                    <button class="btn btn-primary">Publicar</button>
                </form>
            @endif
        </div>
    </div>

    <div class="pdf-editor-toolbar" aria-label="Ferramentas do editor">
        <div class="pdf-tool-group">
            <button type="button" class="pdf-icon-button" data-command="undo" title="Desfazer (Ctrl+Z)" disabled>↶</button>
            <button type="button" class="pdf-icon-button" data-command="redo" title="Refazer (Ctrl+Shift+Z)" disabled>↷</button>
        </div>
        <div class="pdf-tool-group">
            <button type="button" class="pdf-icon-button" data-command="previous-page" title="Página anterior">‹</button>
            <label class="pdf-page-control">Página <input id="pdf-page-number" type="number" min="1" value="1"> / <span id="pdf-page-count">—</span></label>
            <button type="button" class="pdf-icon-button" data-command="next-page" title="Página seguinte">›</button>
        </div>
        <div class="pdf-tool-group">
            <button type="button" class="pdf-icon-button" data-command="zoom-out" title="Reduzir">−</button>
            <select id="pdf-zoom" aria-label="Zoom">
                <option value="0.5">50%</option>
                <option value="0.75">75%</option>
                <option value="1" selected>100%</option>
                <option value="1.25">125%</option>
                <option value="1.5">150%</option>
                <option value="2">200%</option>
            </select>
            <button type="button" class="pdf-icon-button" data-command="zoom-in" title="Ampliar">+</button>
            <button type="button" class="pdf-icon-button" data-command="fit-width" title="Ajustar à largura">Ajustar</button>
        </div>
        <div class="pdf-tool-group">
            <label class="pdf-toolbar-check"><input type="checkbox" id="pdf-snap" checked> Grelha</label>
            <label class="pdf-toolbar-check"><input type="checkbox" id="pdf-show-labels" checked> Etiquetas</label>
            <button type="button" class="pdf-icon-button" data-command="preview" title="Alternar pré-visualização">Pré-visualizar</button>
        </div>
        <div class="pdf-tool-group pdf-toolbar-right">
            <span id="pdf-selection-summary" class="muted">Nenhum campo selecionado</span>
            <button type="button" class="pdf-icon-button" data-command="duplicate" title="Duplicar (Ctrl+D)" disabled>Duplicar</button>
            <button type="button" class="pdf-icon-button pdf-danger-button" data-command="delete" title="Apagar (Delete)" disabled>Apagar</button>
        </div>
    </div>

    <div class="pdf-editor-shell" id="pdf-region-editor">
        <aside class="pdf-editor-tools">
            <h2>Adicionar campo</h2>
            <p class="muted pdf-small">Escolha um tipo e arraste sobre o PDF.</p>
            <div id="pdf-field-tools" class="pdf-field-tools"></div>

            <hr>
            <h2>Páginas</h2>
            <div id="pdf-page-list" class="pdf-page-list"></div>
        </aside>

        <main class="pdf-editor-workspace" id="pdf-workspace">
            <div class="pdf-workspace-loading" id="pdf-loading">
                <strong>A preparar o editor…</strong>
                <span class="muted">A analisar as páginas do PDF.</span>
            </div>
            <div class="pdf-page-wrap" id="pdf-page-wrap" hidden>
                <div class="pdf-page-stage" id="pdf-page-stage">
                    <canvas id="pdf-canvas"></canvas>
                    <div id="pdf-region-layer" class="pdf-region-layer" aria-label="Regiões do PDF"></div>
                    <div id="pdf-draw-box" class="pdf-draw-box" hidden></div>
                </div>
            </div>
        </main>

        <aside class="pdf-editor-inspector" id="pdf-inspector">
            <div class="pdf-inspector-empty" id="pdf-inspector-empty">
                <h2>Propriedades</h2>
                <p class="muted">Selecione uma região para editar as suas propriedades.</p>
            </div>
            <div id="pdf-inspector-fields" hidden></div>
        </aside>
    </div>

    <details class="card pdf-template-settings">
        <summary><strong>Definições, versões e manutenção do modelo</strong></summary>
        <div class="grid grid-2 pdf-settings-grid">
            <section>
                <h2>Dados do modelo</h2>
                <form method="post" action="{{ route('pdf-forms.update', $template) }}" class="form-grid" data-save-editor>
                    @csrf
                    @method('PUT')
                    <label>Nome<input name="name" value="{{ $template->name }}" required maxlength="190"></label>
                    <label>Categoria<input name="category" value="{{ $template->category }}" maxlength="100"></label>
                    <label>Descrição<textarea name="description" rows="4" maxlength="5000">{{ $template->description }}</textarea></label>
                    <button class="btn btn-secondary">Atualizar dados</button>
                </form>
            </section>
            <section>
                <h2>Substituir PDF</h2>
                <p class="muted">PDF atual: {{ $template->original_name }}</p>
                <form method="post" action="{{ route('pdf-forms.source.replace', $template) }}" enctype="multipart/form-data" class="form-grid" data-save-editor>
                    @csrf
                    <label>Novo PDF<input type="file" name="pdf" accept="application/pdf,.pdf" required></label>
                    <label class="checkbox"><input type="checkbox" name="preserve_regions" value="1" checked> Manter as regiões existentes</label>
                    <button class="btn btn-secondary">Substituir PDF</button>
                </form>
            </section>
            <section>
                <h2>Importar / exportar regiões</h2>
                <div class="actions" style="margin-bottom:12px">
                    <a class="btn btn-secondary" href="{{ route('pdf-forms.export', $template) }}">Exportar JSON</a>
                </div>
                <form method="post" action="{{ route('pdf-forms.import', $template) }}" enctype="multipart/form-data" class="form-grid" data-save-editor>
                    @csrf
                    <label>Esquema JSON<input type="file" name="schema" accept="application/json,.json" required></label>
                    <label class="checkbox"><input type="checkbox" name="replace_metadata" value="1"> Substituir também nome, categoria e descrição</label>
                    <button class="btn btn-secondary">Importar regiões</button>
                </form>
            </section>
            <section>
                <h2>Versões</h2>
                @if($template->revisions->isEmpty())
                    <p class="muted">Ainda não existem versões guardadas.</p>
                @else
                    <div class="pdf-revision-list">
                        @foreach($template->revisions as $revision)
                            <div class="pdf-revision-row">
                                <div><strong>v{{ $revision->version }}</strong> · {{ $revision->reason ?: 'Sem descrição' }}<br><span class="muted">{{ $revision->created_at?->format('d/m/Y H:i') }} · {{ $revision->creator?->name ?: 'Sistema' }}</span></div>
                                <form method="post" action="{{ route('pdf-forms.revisions.restore', [$template, $revision]) }}" onsubmit="return confirm('Restaurar esta versão? O estado atual será guardado como uma nova versão.');">
                                    @csrf
                                    <button class="btn btn-secondary btn-sm">Restaurar</button>
                                </form>
                            </div>
                        @endforeach
                    </div>
                @endif
            </section>
        </div>
        <div class="pdf-danger-zone">
            <form method="post" action="{{ route('pdf-forms.duplicate', $template) }}" data-save-editor>
                @csrf
                <button class="btn btn-secondary">Duplicar modelo</button>
            </form>
            @if($template->status !== 'archived')
                <form method="post" action="{{ route('pdf-forms.archive', $template) }}" data-save-editor>
                    @csrf
                    <button class="btn btn-secondary">Arquivar modelo</button>
                </form>
            @endif
            <form method="post" action="{{ route('pdf-forms.destroy', $template) }}" onsubmit="return confirm('Remover permanentemente este modelo e os seus ficheiros?');">
                @csrf
                @method('DELETE')
                <button class="btn btn-danger">Eliminar modelo</button>
            </form>
        </div>
    </details>
</div>

<script id="pdf-editor-data" type="application/json">@json($editorData)</script>
@endsection

@push('scripts')
<script type="module" src="{{ asset('js/pdf-region-editor.js') }}"></script>
@endpush