<!DOCTYPE html>
<html lang="pt-BR" class="scroll-smooth">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Assinar Contrato — OPCON</title>
    <link rel="icon" type="image/jpeg" href="<?php echo e(asset('favicon.jpg')); ?>">
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700;800&display=swap" rel="stylesheet">
    <style>
        * { margin: 0; padding: 0; box-sizing: border-box; }
        body { font-family: 'Poppins', sans-serif; background: #f1f5f9; min-height: 100vh; padding: 2rem 1rem 4rem; }

        .page-header {
            max-width: 620px; margin: 0 auto 2rem;
            display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 0.75rem;
        }
        .logo-text { font-size: 1.125rem; font-weight: 800; color: #1e3a5f; letter-spacing: -0.5px; }
        .logo-dot { color: #25b87e; }
        .secure-badge {
            display: inline-flex; align-items: center; gap: 0.375rem;
            font-size: 0.75rem; font-weight: 600; color: #25b87e;
            background: #ecfdf5; border: 1px solid #bbf7d0;
            padding: 0.3rem 0.75rem; border-radius: 100px;
        }

        .card {
            background: #fff; border-radius: 20px; border: 1px solid #e2e8f0;
            max-width: 620px; margin: 0 auto 1.25rem;
            box-shadow: 0 4px 24px rgba(0,0,0,0.05);
        }
        .card-header {
            padding: 1.25rem 1.5rem; border-bottom: 1px solid #f1f5f9;
        }
        .card-header h2 { font-size: 0.9375rem; font-weight: 700; color: #1e3a5f; margin: 0; }
        .card-header p  { font-size: 0.8125rem; color: #64748b; margin: 0.2rem 0 0; }
        .card-body { padding: 1.5rem; }

        .info-grid {
            display: grid; grid-template-columns: 1fr 1fr; gap: 0.875rem;
        }
        .info-item { background: #f8fafc; border-radius: 10px; padding: 0.75rem 1rem; }
        .info-label { font-size: 0.6875rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: #94a3b8; margin-bottom: 0.2rem; }
        .info-value { font-size: 0.875rem; font-weight: 600; color: #1e3a5f; }
        .info-item.honor { background: #e8f8f1; }
        .info-item.honor .info-value { color: #059669; }

        .legal-box {
            background: #f8fafc; border: 1px solid #e2e8f0; border-radius: 12px;
            padding: 1rem 1.25rem; font-size: 0.8125rem; color: #475569; line-height: 1.65;
        }
        .legal-box strong { color: #1e3a5f; }

        .canvas-wrap {
            border: 2px dashed #cbd5e1; border-radius: 12px;
            background: #fafafa; overflow: hidden; position: relative; cursor: crosshair;
            transition: border-color 0.15s;
        }
        .canvas-wrap:focus-within, .canvas-wrap.active { border-color: #25b87e; border-style: solid; }
        .canvas-placeholder {
            position: absolute; inset: 0; display: flex; flex-direction: column;
            align-items: center; justify-content: center; gap: 0.5rem;
            pointer-events: none; transition: opacity 0.2s;
        }
        .canvas-placeholder svg { width: 28px; height: 28px; color: #cbd5e1; }
        .canvas-placeholder span { font-size: 0.8125rem; color: #94a3b8; font-weight: 500; }

        canvas#sig { display: block; width: 100%; touch-action: none; }

        .canvas-actions { display: flex; justify-content: flex-end; margin-top: 0.625rem; }
        .btn-clear {
            display: inline-flex; align-items: center; gap: 0.375rem;
            font-size: 0.8125rem; font-weight: 600; color: #64748b;
            background: none; border: 1px solid #e2e8f0; border-radius: 8px;
            padding: 0.375rem 0.875rem; cursor: pointer; transition: all 0.15s;
        }
        .btn-clear:hover { border-color: #ef4444; color: #ef4444; background: #fef2f2; }

        .input-wrap { display: flex; flex-direction: column; gap: 0.375rem; }
        .input-wrap label { font-size: 0.8125rem; font-weight: 600; color: #1e3a5f; }
        .input-wrap input {
            padding: 0.6875rem 1rem; border: 1.5px solid #e2e8f0; border-radius: 10px;
            font-family: 'Poppins', sans-serif; font-size: 0.9375rem; color: #1e3a5f;
            transition: border-color 0.15s; outline: none; width: 100%;
        }
        .input-wrap input:focus { border-color: #25b87e; }
        .input-wrap input.error { border-color: #ef4444; }
        .input-error { font-size: 0.75rem; color: #ef4444; }

        .submit-area { margin-top: 1.5rem; }
        .btn-sign {
            width: 100%; padding: 0.875rem; background: #25b87e; color: #fff;
            border: none; border-radius: 12px; font-family: 'Poppins', sans-serif;
            font-size: 1rem; font-weight: 700; cursor: pointer; transition: background 0.15s, transform 0.1s;
            display: flex; align-items: center; justify-content: center; gap: 0.625rem;
        }
        .btn-sign:hover { background: #1fa96e; }
        .btn-sign:active { transform: scale(0.98); }
        .btn-sign:disabled { background: #94a3b8; cursor: not-allowed; transform: none; }

        .error-msg {
            background: #fef2f2; border: 1px solid #fecaca; border-radius: 10px;
            padding: 0.75rem 1rem; font-size: 0.8125rem; color: #dc2626; margin-top: 0.875rem;
            display: none;
        }
        .error-msg.show { display: block; }

        .footer-note {
            max-width: 620px; margin: 0 auto;
            text-align: center; font-size: 0.75rem; color: #94a3b8; line-height: 1.6;
        }

        @media (max-width: 480px) {
            .info-grid { grid-template-columns: 1fr; }
            body { padding: 1.25rem 0.75rem 3rem; }
        }
    </style>
</head>
<body>

    
    <header class="page-header">
        <span class="logo-text">OP<span class="logo-dot">CON</span></span>
        <span class="secure-badge">
            <svg width="13" height="13" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z"/>
            </svg>
            Página segura
        </span>
    </header>

    
    <div class="card">
        <div class="card-header">
            <h2>Contrato de Prestação de Serviços Contábeis</h2>
            <p>Leia os dados abaixo e assine digitalmente para ativar seu contrato.</p>
        </div>
        <div class="card-body">
            <div class="info-grid">
                <div class="info-item" style="grid-column: 1 / -1;">
                    <div class="info-label">Empresa Contratante</div>
                    <div class="info-value" style="font-size: 1rem;"><?php echo e($contrato->razao_social); ?></div>
                </div>
                <?php if($contrato->cnpj): ?>
                <div class="info-item">
                    <div class="info-label">CNPJ</div>
                    <div class="info-value"><?php echo e($contrato->cnpj); ?></div>
                </div>
                <?php endif; ?>
                <div class="info-item">
                    <div class="info-label">Regime Tributário</div>
                    <div class="info-value"><?php echo e($contrato->regime_tributario); ?></div>
                </div>
                <?php if($contrato->honorario): ?>
                <div class="info-item honor" style="<?php echo e(!$contrato->cnpj ? 'grid-column: 1 / -1;' : ''); ?>">
                    <div class="info-label">Honorário Mensal</div>
                    <div class="info-value">R$ <?php echo e(number_format($contrato->honorario, 2, ',', '.')); ?></div>
                </div>
                <?php endif; ?>
                <?php if($contrato->responsavel_legal): ?>
                <div class="info-item">
                    <div class="info-label">Responsável Legal</div>
                    <div class="info-value"><?php echo e($contrato->responsavel_legal); ?></div>
                </div>
                <?php endif; ?>
                <?php if($contrato->cidade_uf): ?>
                <div class="info-item">
                    <div class="info-label">Cidade / UF</div>
                    <div class="info-value"><?php echo e($contrato->cidade_uf); ?></div>
                </div>
                <?php endif; ?>
            </div>
        </div>
    </div>

    
    <div class="card">
        <div class="card-header">
            <h2>Assinatura Digital</h2>
            <p>Use o mouse ou o toque para assinar no campo abaixo.</p>
        </div>
        <div class="card-body">

            
            <div class="legal-box" style="margin-bottom: 1.5rem;">
                Ao assinar este documento declaro que li e aceito os termos do <strong>Contrato de Prestação de Serviços Contábeis</strong> firmado com a
                <strong>OPCON Soluções Contábeis</strong>, concordo com o regime tributário <strong><?php echo e($contrato->regime_tributario); ?></strong>
                <?php if($contrato->honorario): ?>
                    e com o honorário mensal de <strong>R$ <?php echo e(number_format($contrato->honorario, 2, ',', '.')); ?></strong>
                <?php endif; ?>
                , e autorizo o uso desta assinatura eletrônica com plena validade jurídica conforme a Lei n.º 14.063/2020.
            </div>

            <form id="signing-form" method="POST" action="<?php echo e(route('assinar.store', $contrato->assinatura_token)); ?>">
                <?php echo csrf_field(); ?>
                <input type="hidden" name="assinatura_dados" id="assinatura_dados">

                
                <div class="canvas-wrap" id="canvas-wrap">
                    <div class="canvas-placeholder" id="canvas-placeholder">
                        <svg fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M15.232 5.232l3.536 3.536m-2.036-5.036a2.5 2.5 0 113.536 3.536L6.5 21.036H3v-3.572L16.732 3.732z"/>
                        </svg>
                        <span>Desenhe sua assinatura aqui</span>
                    </div>
                    <canvas id="sig" height="180"></canvas>
                </div>
                <div class="canvas-actions">
                    <button type="button" class="btn-clear" onclick="clearCanvas()">
                        <svg width="13" height="13" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"/>
                        </svg>
                        Limpar
                    </button>
                </div>

                
                <div class="input-wrap" style="margin-top: 1.25rem;">
                    <label for="assinatura_nome">Nome completo do assinante</label>
                    <input type="text" id="assinatura_nome" name="assinatura_nome"
                           placeholder="<?php echo e($contrato->responsavel_legal ?? 'Digite o nome completo'); ?>"
                           value="<?php echo e(old('assinatura_nome', $contrato->responsavel_legal ?? '')); ?>"
                           autocomplete="name">
                    <span class="input-error" id="nome-error" style="display:none;">Informe o nome completo.</span>
                </div>

                <div id="form-error" class="error-msg">
                    Por favor, preencha o nome e desenhe sua assinatura antes de continuar.
                </div>

                <div class="submit-area">
                    <button type="submit" class="btn-sign" id="btn-sign">
                        <svg width="20" height="20" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"/>
                        </svg>
                        Assinar e ativar contrato
                    </button>
                </div>
            </form>
        </div>
    </div>

    <p class="footer-note">
        Esta assinatura é juridicamente válida nos termos da Lei n.º 14.063/2020 (assinatura eletrônica simples).<br>
        IP, data e hora serão registrados automaticamente. OPCON Soluções Contábeis — Palmas, Tocantins.
    </p>

    <script>
    (function () {
        var canvas = document.getElementById('sig');
        var ctx    = canvas.getContext('2d');
        var wrap   = document.getElementById('canvas-wrap');
        var placeholder = document.getElementById('canvas-placeholder');
        var drawing = false;
        var hasMark = false;

        function resize() {
            var rect = canvas.getBoundingClientRect();
            var dpr  = window.devicePixelRatio || 1;
            var imgData = hasMark ? ctx.getImageData(0, 0, canvas.width, canvas.height) : null;
            canvas.width  = rect.width  * dpr;
            canvas.height = 180 * dpr;
            ctx.scale(dpr, dpr);
            ctx.strokeStyle = '#1e3a5f';
            ctx.lineWidth   = 2.5;
            ctx.lineCap     = 'round';
            ctx.lineJoin    = 'round';
            if (imgData) ctx.putImageData(imgData, 0, 0);
        }

        resize();
        window.addEventListener('resize', function () { if (!hasMark) resize(); });

        function getPos(e) {
            var rect = canvas.getBoundingClientRect();
            var src  = e.touches ? e.touches[0] : e;
            return { x: src.clientX - rect.left, y: src.clientY - rect.top };
        }

        function onStart(e) {
            e.preventDefault();
            drawing = true;
            var p = getPos(e);
            ctx.beginPath();
            ctx.moveTo(p.x, p.y);
            wrap.classList.add('active');
            if (!hasMark) { placeholder.style.opacity = '0'; }
        }

        function onMove(e) {
            if (!drawing) return;
            e.preventDefault();
            var p = getPos(e);
            ctx.lineTo(p.x, p.y);
            ctx.stroke();
            hasMark = true;
        }

        function onEnd(e) {
            drawing = false;
        }

        canvas.addEventListener('mousedown',  onStart, { passive: false });
        canvas.addEventListener('mousemove',  onMove,  { passive: false });
        canvas.addEventListener('mouseup',    onEnd);
        canvas.addEventListener('mouseleave', onEnd);
        canvas.addEventListener('touchstart', onStart, { passive: false });
        canvas.addEventListener('touchmove',  onMove,  { passive: false });
        canvas.addEventListener('touchend',   onEnd,   { passive: false });

        window.clearCanvas = function () {
            ctx.clearRect(0, 0, canvas.width, canvas.height);
            hasMark = false;
            placeholder.style.opacity = '1';
            wrap.classList.remove('active');
        };

        document.getElementById('signing-form').addEventListener('submit', function (e) {
            e.preventDefault();
            var nome  = document.getElementById('assinatura_nome').value.trim();
            var errEl = document.getElementById('form-error');
            var nomeErr = document.getElementById('nome-error');
            var ok = true;

            if (!nome) {
                document.getElementById('assinatura_nome').classList.add('error');
                nomeErr.style.display = 'block';
                ok = false;
            } else {
                document.getElementById('assinatura_nome').classList.remove('error');
                nomeErr.style.display = 'none';
            }

            if (!hasMark) {
                wrap.style.borderColor = '#ef4444';
                ok = false;
            } else {
                wrap.style.borderColor = '';
            }

            if (!ok) {
                errEl.classList.add('show');
                return;
            }
            errEl.classList.remove('show');

            document.getElementById('assinatura_dados').value = canvas.toDataURL('image/png');

            var btn = document.getElementById('btn-sign');
            btn.disabled = true;
            btn.innerHTML = '<svg width="20" height="20" class="spin" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15"/></svg> Processando…';

            this.submit();
        });
    }());
    </script>

    <style>
    @keyframes spin { to { transform: rotate(360deg); } }
    .spin { animation: spin 0.8s linear infinite; }
    </style>
</body>
</html>
<?php /**PATH C:\ProjetosWeb\OPCON\resources\views\pages\assinar.blade.php ENDPATH**/ ?>