{{-- Pré-visualização do carimbo com wireframe A4, canvas PDF.js e temas arrastáveis --}}

<p class="text-muted small text-center mb-3">
    Arraste o carimbo abaixo para definir o local exato da assinatura na página PDF.
</p>

{{-- Paginação do PDF --}}
<div id="pdf-pagination" class="d-flex justify-content-between align-items-center mb-2 d-none"
     style="max-width: 320px; margin: 0 auto;">
    <button type="button" class="btn btn-sm btn-outline-secondary" id="btn-prev-page" disabled
            aria-label="Página anterior">
        <i class="bi bi-chevron-left" aria-hidden="true"></i>
    </button>
    <span class="small fw-bold">
        Pág. <span id="current-page-num">1</span> de <span id="total-page-num">1</span>
    </span>
    <button type="button" class="btn btn-sm btn-outline-secondary" id="btn-next-page" disabled
            aria-label="Próxima página">
        <i class="bi bi-chevron-right" aria-hidden="true"></i>
    </button>
</div>

{{-- Wireframe do PDF A4 / Canvas --}}
<div id="a4-wireframe"
     class="position-relative mx-auto overflow-hidden d-flex justify-content-center align-items-center"
     style="width: 100%; max-width: 320px; background-color: #fff; border: 1px solid #cbd5e1; box-shadow: 0 4px 6px -1px rgba(0,0,0,0.1);">

    {{-- Canvas onde o PDF.js renderiza as páginas --}}
    <canvas id="pdf-render-canvas" class="d-block w-100"
            style="height: auto;"
            role="img"
            aria-label="Pré-visualização do PDF. O conteúdo não é legível por leitores de tela."></canvas>

    {{-- Placeholder inicial (nenhum PDF carregado) --}}
    <div id="signature-stamp-placeholder"
         class="position-absolute text-center text-muted"
         style="top: 50%; left: 50%; transform: translate(-50%, -50%); width: 100%;">
        <i class="bi bi-shield-lock-fill text-secondary mb-2" style="font-size: 2rem;" aria-hidden="true"></i>
        <p class="small mb-0 px-3">Selecione um certificado acima.</p>
    </div>

    {{-- Stamp arrastável — contém os 3 previews de tema --}}
    <div id="signature-stamp-preview"
         class="position-absolute"
         style="width: 54.8%; height: 11.8%; left: 9.52%; top: 79.79%; display: none; cursor: grab; user-select: none; overflow: hidden;"
         role="img"
         aria-label="Carimbo de assinatura. Arraste para reposicionar.">

        {{-- Tema: Modelo básico --}}
        <div id="preview-theme-lotep-government" class="preview-theme"
             style="width: 100%; height: 100%; border-left: 3px solid #1e3a8a; background-color: rgba(248,250,252,0.95); box-shadow: 0 4px 6px -1px rgba(0,0,0,0.1); font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; padding: 3%; font-size: 4.5px; line-height: 1.3;">
            <div class="preview-name fw-bold" style="font-size: 5.5px; color: #0f172a;">Nome</div>
            <div class="preview-meta" style="color: #555; margin-top: 0.3px;">Local</div>
            <div class="preview-date" style="color: #777; margin-top: 0.3px;">00/00/00</div>
            <div style="font-family: monospace; color: #475569; font-size: 3.5px; line-height: 1.1; margin-top: 0.5px;">A1B2C3D4E5F6A1B2C3D4E5F6A1B2C3D4E5F6A1B2<br>C3D4E5F6A1B2C3D4E5F6A1B2C3D4E5F6A1B2C3D4</div>
        </div>

        {{-- Tema: Profissional --}}
        <div id="preview-theme-professional" class="preview-theme d-none"
             style="width: 100%; height: 100%; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;">
            <table class="w-100 h-100" style="border-collapse: collapse; background-color: #fff;" aria-label="Pré-visualização">
                <tr>
                    <td style="width: 24%; text-align: center; vertical-align: middle; background-color: #f0f4f8; border: 1px solid #d0d5dd; border-right: none; padding: 1mm;">
                        <div style="font-size: 6pt; font-weight: bold; color: #1e3a8a; line-height: 1.2;">
                            <div style="font-size: 7pt;">Maxima</div>
                            <div style="font-size: 4pt; font-weight: normal; color: #64748b;">Gov.PB</div>
                        </div>
                    </td>
                    <td style="border: 1px solid #d0d5dd; border-left: none; padding: 1mm 1.5mm; vertical-align: middle;">
                        <div style="font-size: 4.5px; color: #334155; line-height: 1.3;">
                            <div class="preview-name fw-bold" style="color: #0f172a; font-size: 5px;">Nome</div>
                            <div class="preview-meta" style="color: #555; margin-top: 0.3px;">Local</div>
                            <div class="preview-date" style="color: #777; margin-top: 0.3px;">00/00/00</div>
                            <div style="font-family: monospace; color: #475569; font-size: 3.5px; line-height: 1.1; margin-top: 0.5px;">A1B2C3D4E5F6A1B2C3D4E5F6A1B2C3D4E5F6A1B2<br>C3D4E5F6A1B2C3D4E5F6A1B2C3D4E5F6A1B2C3D4</div>
                        </div>
                    </td>
                </tr>
            </table>
        </div>

        {{-- Tema: Minimalista --}}
        <div id="preview-theme-minimal" class="preview-theme d-none"
             style="width: 100%; height: 100%; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; background-color: #fff; padding: 2%;">
            <div style="font-size: 4.5px; color: #333; line-height: 1.3;">
                <div class="preview-name fw-bold" style="font-size: 5px;">Nome</div>
                <div class="preview-meta" style="color: #555;">Local</div>
                <div class="preview-date" style="color: #777;">00/00/00</div>
                <div style="font-family: monospace; color: #475569; font-size: 3.5px; line-height: 1.1;">A1B2C3D4E5F6A1B2C3D4E5F6A1B2C3D4E5F6A1B2<br>C3D4E5F6A1B2C3D4E5F6A1B2C3D4E5F6A1B2C3D4</div>
            </div>
        </div>
    </div>
</div>