<!DOCTYPE html>
<html lang="pt-BR">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Procuração</title>
    <style>
        /* Estilos básicos e responsivos */
        * {
            box-sizing: border-box;
            margin: 0;
            padding: 0;
        }

        /* Estilo do corpo da página */
        body {
      
            font-family: 'Arial', sans-serif;
            background-color: #f3f4f6;
            padding: 20px;
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;            
        }

        

        /* Estilo do container do formulário em formato A4 */
        .container {
            background-color: #ffffff;
            border: 1px solid #ddd;
            border-radius: 5px;
            padding: 40px;
            max-width: 210mm;
            max-height: 297mm;
            width: 100%;
            height: 100%;
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
            position: relative;
            overflow-y: auto;
            /* Barra de rolagem no container para layout A4 */
        }

        /* Estilo do cabeçalho com a logo e títulos */
        .header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 20px;
        }

        /* Estilo do logo */
        .logo img {
            width: 200px;
        }

        /* Estilo dos títulos */
        .titulo {
        font-size: 20px;
        text-transform: uppercase;
        color: #2f5879;
        font-weight: bold;
        /* background-color: rgba(232, 231, 231, 0.8);  Fundo cinza com 80% de transparência */
        padding: 5px;
        border-radius: 5px;
        text-align: center;
        margin-bottom: 1px;
        margin-top: 30px;
    }

    .highlight-box {
        border: 2px solid #007BFF; /* Azul */
        border-radius: 10px; /* Pontas arredondadas */
        padding: 10px;
        margin-bottom: 20px;
    }

    .divider {
        border-top: 2px solid #007BFF; /* Linha azul */
        margin: 20px 0;
    }

        .subtitulo {
            font-size: 15px;
            text-transform: uppercase;
            color: #4178a5;
            margin-top: 3px; /* Ajusta margem superior */
            margin-bottom: 15px;
        }

        /* Estilo da data */
        .data-atual {
            text-align: right;
            font-size: 12px;
            color: #2f5879;
            margin-top: 30px;
            margin-bottom: 20px;
        }

        /* Estilos de texto e formulários */
        .paragrafo,
        .dados-formulario,
        .poderes-gerais,
        .poderes-especiais {
            text-align: justify;
            margin-bottom: 20px;
            color: #333;
            font-size: 12px;
            line-height: 1.6;
        }

        label {
            display: block;
            margin-top: 15px;
            color: #555;
            font-weight: bold;
            font-size: 12px;
        }

        input[type="text"],
        input[type="email"],
        select {
            width: 100%;
            padding: 8px;
            margin-top: 5px;
            border: 1px solid #ddd;
            border-radius: 4px;
            font-size: 12px;
            transition: border-color 0.3s, box-shadow 0.3s;
            margin-bottom: 10px;
        }

        button {
            width: auto;
            /* Ajusta a largura do botão */
            padding: 5px 10px;
            /* Reduz o tamanho do botão */
            margin-top: 20px;
            /* Mantém espaço acima do botão */
            background-color: #007BFF;
            /* Cor de fundo azul */
            color: #fff;
            /* Cor do texto */
        }

        button:hover {
            background-color: #0056b3;
            /* Cor mais escura ao passar o mouse */
        }

        /* Estilo para os botões ao lado um do outro */
        .button-container {
            display: flex;
            gap: 10px;
            /* Espaço entre os botões */
        }

        /* Layout do formulário em duas colunas */
        .form-row {
            display: flex;
            flex-wrap: wrap;
            justify-content: space-between;
            margin-bottom: 15px;
        }

        .form-column {
            flex: 1;
            margin-right: 10px;
        }

        .form-column:last-child {
            margin-right: 0;
        }

        /* Campo de seleção reduzido */
        .form-column.select {
            flex: 0 0 40%;
        }

        footer {
            margin-top: 20px;
            width: 100%;
            text-align: center;
            padding: 5px 0;
            background-color: rgba(0, 0, 0, 0.8); /* Fundo escuro com transparência */
            color: white;
            font-size: 14px;
        }

        footer a {
            color: #FFD700; /* Cor dourada para links */
            text-decoration: none;
        }

        footer a:hover {
            text-decoration: underline;
        }

        /* Estilos de impressão */
        @media print {
            .data-atual {
                position: absolute;
                bottom: 300px;
                right: 40px;
                font-size: 14px;
                color: #2f5879;
            }

            .container {
                box-shadow: none;
                border: none;
                max-width: 100%;
                max-height: 100%;
            }

            form,
            button {
                display: none;
            }

            /* Campo de assinatura para o Outorgante */
            .assinatura {
                margin-top: 20px;
                font-size: 10px;
                text-align: right;
                margin-right: 20px;
            }
        }

        /* Ocultar a assinatura no front-end */
        .assinatura-impressao {
            display: none;
        }

        /* Estilos de impressão */
        @media print {
            .assinatura-impressao {
                display: block;
                margin-top: 120px;
                font-size: 10px;
                text-align: right;
                margin-right: 0px;
            }
        }

        @media print {

            /* Ocultar título do sistema e caminho do arquivo */
            @page {
                size: auto;
                margin: 0;
                /* Remove as margens da página */
            }

            /* Remover cabeçalho e rodapé inseridos automaticamente pelo navegador */
            body {
                -webkit-print-color-adjust: exact;
                /* Preserva as cores na impressão */
                margin: 0;
                padding: 0;
            }
        }

        @media print {

            /* Aumenta a fonte do corpo do texto em 2px */
            .paragrafo,
            .dados-formulario,
            .poderes-gerais,
            .poderes-especiais {
                font-size: 14px;
                /* Ajuste o tamanho da fonte para 2px a mais */
            }
        }

        /* Define as palavras específicas em negrito para a impressão */
        .dados-formulario::before {
            content: "OUTORGANTE: ";
            font-weight: bold;
            color: #2f5879;
        }

        .paragrafo::before {
            content: "OUTORGADO: ";
            font-weight: bold;
            color: #2f5879;
        }

        .poderes-gerais::before {
            content: "PODERES GERAIS: ";
            font-weight: bold;
            color: #2f5879;
        }

        .poderes-especiais::before {
            content: "PODERES ESPECIAIS: ";
            font-weight: bold;
            color: #2f5879;
        }
        .linha {
            
            color: #2f5879;
        }                          
        
    </style>    
</head>

<body>
    <div class="container">
        <div class="header">
            <div class="header-text">
                <div class="titulo">Procuração</div>
                <div class="subtitulo">Judicial e Extra Judicial</div>
            </div>
            <div class="logo">
                <img src="./LOGO OFICIAL.png" alt="Logo do Escritório">
            </div>
        </div>

        <div class="dados-formulario" id="dadosFormulario">
            <!-- Parágrafo preenchido com dados do formulário -->
        </div>

        <div class="paragrafo">
            ORLANDO PATRÍCIO DE SOUSA, brasileiro, casado, advogado, inscrito na OAB/AM sob o nº 7.705; com escritório
            profissional situado à Rua Basilicata, n° 50, Sala 01, Térreo, São Geraldo, CEP 69053-340, Manaus/AM, onde
            recebe as intimações, notificações e outros documentos.
        </div>
        
        <div class="linha">
        ___________________________________________________________________________<br>
        <br><br>
        </div>

        <div class="poderes-gerais">
            Confere ao procurador poderes para o foro em geral, com a cláusula "ad judicia", podendo propor contra
            terceiros ações de qualquer natureza e defendê-lo nas contrárias, seguindo os processos em todos os graus de
            jurisdição, bem como para o foro extrajudicial, incluindo, mas não se limitando a, administrar bens, assinar
            contratos, representá-lo junto a órgãos públicos e privados, resolver questões administrativas e praticar
            todos os atos necessários para a execução dos serviços.
        </div>

        <div class="linha">
            ___________________________________________________________________________<br>
            <br><br>
            </div>

        <div class="poderes-especiais">
            Concede também ao advogado constituído poderes especiais para confessar, desistir, transigir, firmar
            compromissos ou acordos, receber e dar quitação, agindo em conjunto ou separadamente, podendo ainda,
            substabelecer, com ou sem reservas de iguais poderes, dando tudo por bom, firme e valioso para o fiel
            desempenho do presente mandato.
        </div>

        <!-- Espaço de duas linhas antes da data atual -->
        <br><br>
        <div class="data-atual" id="dataAtual"></div>

        <!-- Campo de assinatura visível apenas na impressão -->
        <div class="assinatura-impressao">
            __________________________________________<br>
            Assinatura do Outorgante
        </div>      

        <form id="procuraForm">            
            <div class="form-row">
                <div class="form-column">
                    <label for="nome">Nome:</label>
                    <input type="text" id="nome" name="nome" maxlength="50" placeholder="Ex: João da Silva" required>
                </div>
                <div class="form-column select">
                    <label for="nacionalidade">Nacionalidade:</label>
                    <select id="nacionalidade" name="nacionalidade" required>
                        <option value="brasileiro (a)">Brasileiro (a)</option>
                        <option value="estrangeiro (a)">Estrangeiro (a)</option>
                    </select>
                </div>
            </div>
            <div class="form-row">
                <div class="form-column select">
                    <label for="estadoCivil">Estado Civil:</label>
                    <select id="estadoCivil" name="estadoCivil" required>
                        <option value="solteiro (a)" selected>Solteiro (a)</option>
                        <option value="casado (a)">Casado (a)</option>
                        <option value="divorciado (a)">Divorciado (a)</option>
                        <option value="viuvo (a)">Viúvo (a)</option>
                    </select>
                </div>
                <div class="form-column">
                    <label for="profissao">Profissão:</label>
                    <input type="text" id="profissao" name="profissao" maxlength="50" placeholder="Ex: Advogado"
                        required>
                </div>
            </div>
            <div class="form-row">
                <div class="form-column">
                    <label for="cpf">CPF:</label>
                    <input type="text" id="cpf" name="cpf" maxlength="14" placeholder="Ex: 123.456.789-00" required>
                </div>
                <div class="form-column">
                    <label for="rg">RG:</label>
                    <input type="text" id="rg" name="rg" maxlength="15" placeholder="Ex: 2211100-0" required>
                </div>
                <div class="form-column">
                    <label for="orgaoEmissor">Orgão emissor / UF:</label>
                    <input type="text" id="orgaoEmissor" name="orgaoEmissor" maxlength="15" placeholder="Ex: SSP-AM"
                        required>
                </div>
            </div>
            <div class="form-row">
                <div class="form-column">
                    <label for="cep">CEP:</label>
                    <input type="text" id="cep" name="cep" maxlength="10" placeholder="Ex: 69099-591" required
                        onblur="consultarCep()">
                </div>
                <div class="form-column">
                    <label for="endereco">Endereço:</label>
                    <input type="text" id="endereco" name="endereco" maxlength="100" placeholder="Ex: Rua dos Graúnas"
                        required>
                </div>
            </div>
            <div class="form-row">
                <div class="form-column">
                    <label for="bairro">Bairro:</label>
                    <input type="text" id="bairro" name="bairro" maxlength="50"
                        placeholder="Ex: Nossa Senhora de Fátima" required>
                </div>
                <div class="form-column">
                    <label for="numero">Número:</label>
                    <input type="text" id="numero" name="numero" maxlength="10" placeholder="Ex: 10" required>
                </div>
            </div>
            <div class="form-row">
                <div class="form-column">
                    <label for="cidade">Cidade:</label>
                    <input type="text" id="cidade" name="cidade" maxlength="50" placeholder="Ex: Manaus" required>
                </div>
                <div class="form-column select">
                    <label for="estado">Estado:</label>
                    <select id="estado" name="estado" required>
                        <option value="AC">Acre</option>
                        <option value="AL">Alagoas</option>
                        <option value="AP">Amapá</option>
                        <option value="AM">Amazonas</option>
                        <option value="BA">Bahia</option>
                        <option value="CE">Ceará</option>
                        <option value="DF">Distrito Federal</option>
                        <option value="ES">Espírito Santo</option>
                        <option value="GO">Goiás</option>
                        <option value="MA">Maranhão</option>
                        <option value="MT">Mato Grosso</option>
                        <option value="MS">Mato Grosso do Sul</option>
                        <option value="MG">Minas Gerais</option>
                        <option value="PA">Pará</option>
                        <option value="PB">Paraíba</option>
                        <option value="PR">Paraná</option>
                        <option value="PE">Pernambuco</option>
                        <option value="PI">Piauí</option>
                        <option value="RJ">Rio de Janeiro</option>
                        <option value="RN">Rio Grande do Norte</option>
                        <option value="RS">Rio Grande do Sul</option>
                        <option value="RO">Rondônia</option>
                        <option value="RR">Roraima</option>
                        <option value="SC">Santa Catarina</option>
                        <option value="SP">São Paulo</option>
                        <option value="SE">Sergipe</option>
                        <option value="TO">Tocantins</option>
                    </select>
                </div>
            </div>
            <div class="form-row">
                <div class="form-column">
                    <label for="email">E-mail:</label>
                    <input type="text" id="email" name="email" maxlength="50" placeholder="Ex: xxx@gmail.com">
                </div>
                <div class="form-column">
                    <label for="telefone">Telefone Celular:</label>
                    <input type="text" id="telefone" name="telefone" maxlength="15" placeholder="Ex: (92) 98801-4198"
                        required>
                </div>
            </div>
            <div style="display: flex; gap: 10px; margin-top: 20px;">
                <button type="submit"
                    style="background-color: #4CAF50; color: #fff; border: 1px solid #388e3c; border-radius: 5px; padding: 10px 15px;">Gerar
                    Procuração</button>
                <button id="imprimirDeclaracao"
                    style="background-color: #007BFF; color: #fff; border: 1px solid #0056b3; border-radius: 5px; padding: 10px 15px;">Declaração
                    de Hipossuficiência</button>
                <button id="exportarTxt"
                    style="background-color: #ff9800; color: #fff; border: 1px solid #e68900; border-radius: 5px; padding: 10px 15px;">
                    Exportar TXT </button>
                <button id="copiarDados"
                    style="background-color: #6c757d; color: #fff; border: 1px solid #5a6268; border-radius: 5px; padding: 10px 15px;">Copiar
                    Dados</button>
            </div>                   
        </form>
        <footer>
            © 2024 Patrício & Maclayd Advogados Associados. Todos os direitos reservados. 
            <br>
            Desenvolvido por <a href="#">Scot Maclayd</a>.
        </footer>                
    </div>

    

    <script>
        // Função para formatar a data
        function formatarDataAtual() {
            const meses = ["janeiro", "fevereiro", "março", "abril", "maio", "junho", "julho", "agosto", "setembro", "outubro", "novembro", "dezembro"];
            const dataAtual = new Date();
            const dia = dataAtual.getDate();
            const mes = meses[dataAtual.getMonth()];
            const ano = dataAtual.getFullYear();
            return `Manaus, ${dia} de ${mes} de ${ano}`;
        }

        // Força o campo "orgaoEmissor" a ficar em caixa alta
        document.getElementById("orgaoEmissor").addEventListener("input", function () {
            this.value = this.value.toUpperCase();
        });

        // Força o campo "nome" a ficar em caixa alta
        document.getElementById("nome").addEventListener("input", function () {
            this.value = this.value.toUpperCase();
        });

        // Função para aplicar a máscara ao CPF
        function aplicarMascaraCPF(campo) {
            let valor = campo.value.replace(/\D/g, ""); // Remove caracteres não numéricos
            if (valor.length <= 11) {
                valor = valor.replace(/(\d{3})(\d)/, "$1.$2"); // Adiciona o primeiro ponto
                valor = valor.replace(/(\d{3})(\d)/, "$1.$2"); // Adiciona o segundo ponto
                valor = valor.replace(/(\d{3})(\d{1,2})$/, "$1-$2"); // Adiciona o traço
            }
            campo.value = valor; // Atualiza o campo com o valor formatado
        }

        // Ouvinte de evento para aplicar a máscara ao CPF
        window.onload = function () {
            document.getElementById("cpf").addEventListener("input", function () {
                aplicarMascaraCPF(this);
            });
        };

        // Função para aplicar a máscara ao campo de telefone
        document.getElementById("telefone").addEventListener("input", function (event) {
            let telefone = event.target.value.replace(/\D/g, ""); // Remove todos os caracteres não numéricos
            telefone = telefone.replace(/^(\d{2})(\d)/g, "($1) $2"); // Adiciona parênteses em torno do DDD
            telefone = telefone.replace(/(\d{5})(\d{4})$/, "$1-$2"); // Adiciona o traço

            event.target.value = telefone; // Atualiza o campo de entrada com o valor formatado
        });

        document.getElementById("cep").addEventListener("input", function () {
    let cep = this.value.replace(/\D/g, ""); // Remove caracteres não numéricos
    if (cep.length > 5) {
        cep = cep.replace(/^(\d{5})(\d{1,3})$/, "$1-$2"); // Formata no padrão XXXXX-XXX
    }
    this.value = cep; // Atualiza o campo com o valor formatado
});

        document.getElementById("cep").addEventListener("input", function (event) {
            const cep = event.target.value.replace(/\D/g, ""); // Remove caracteres não numéricos
            if (cep.length === 8) { // Verifica se o CEP tem 8 dígitos
                document.getElementById("numero").focus(); // Move o cursor para o campo "Número"
            }
        });

        // Inserir a data formatada nos locais indicados
        document.getElementById("dataAtual").innerText = formatarDataAtual();

        document.getElementById("procuraForm").addEventListener("submit", function (event) {
            event.preventDefault();
            gerarImpressao();
        });

        function consultarCep() {
            const cep = document.getElementById("cep").value.replace(/\D/g, '');
            if (cep.length === 8) {
                fetch(`https://viacep.com.br/ws/${cep}/json/`)
                    .then(response => response.json())
                    .then(data => {
                        if (!data.erro) {
                            document.getElementById("endereco").value = data.logradouro;
                            document.getElementById("bairro").value = data.bairro;
                            document.getElementById("cidade").value = data.localidade;
                            document.getElementById("estado").value = data.uf;
                        } else {
                            alert("CEP não encontrado.");
                        }
                    })
                    .catch(error => {
                        console.error("Erro ao consultar o CEP:", error);
                    });
            } else {
                alert("CEP inválido. Digite um CEP válido com 8 dígitos.");
            }
        }

        function gerarImpressao() {
            const nome = document.getElementById("nome").value;
            const nacionalidade = document.getElementById("nacionalidade").value;
            const estadoCivil = document.getElementById("estadoCivil").value;
            const profissao = document.getElementById("profissao").value;
            const cpf = document.getElementById("cpf").value;
            const rg = document.getElementById("rg").value;
            const orgaoEmissor = document.getElementById("orgaoEmissor").value;
            const cep = document.getElementById("cep").value;
            const endereco = document.getElementById("endereco").value;
            const bairro = document.getElementById("bairro").value;
            const numero = document.getElementById("numero").value;
            const cidade = document.getElementById("cidade").value;
            const estado = document.getElementById("estado").value;
            const email = document.getElementById("email").value;
            const telefone = document.getElementById("telefone").value;
            

            const dadosFormulario = `
                  ${nome}, ${nacionalidade}, ${estadoCivil}, ${profissao}, portador(a) da cédula de identidade RG nº ${rg} - ${orgaoEmissor}, inscrito no Cadastro de Pessoa Física – CPF: ${cpf}, e-mail: ${email}, residente e domiciliado na ${endereco}, nº ${numero}, bairro: ${bairro}, CEP: ${cep}, ${cidade} – ${estado}, telefone celular: ${telefone}
            `;

            document.getElementById("dadosFormulario").innerHTML = dadosFormulario;
            window.print();
        }

        document.getElementById("copiarDados").addEventListener("click", function (event) {
            event.preventDefault(); // Impede o envio do formulário

            // Coletar os dados dos campos do formulário
            const nome = document.getElementById("nome").value;
            const nacionalidade = document.getElementById("nacionalidade").value;
            const estadoCivil = document.getElementById("estadoCivil").value;
            const profissao = document.getElementById("profissao").value;
            const rg = document.getElementById("rg").value;
            const orgaoEmissor = document.getElementById("orgaoEmissor").value;
            const cpf = document.getElementById("cpf").value;
            const email = document.getElementById("email").value;
            const endereco = document.getElementById("endereco").value;
            const numero = document.getElementById("numero").value;
            const bairro = document.getElementById("bairro").value;
            const cep = document.getElementById("cep").value;
            const cidade = document.getElementById("cidade").value;
            const estado = document.getElementById("estado").value;
            const telefone = document.getElementById("telefone").value;

            // Formatação dos dados para copiar
            const dadosParaCopiar = `${nome}, ${nacionalidade}, ${estadoCivil}, ${profissao}, portador(a) da cédula de identidade RG nº ${rg} ${orgaoEmissor}, inscrito no Cadastro de Pessoa Física – CPF: ${cpf}, e-mail: ${email}, residente e domiciliado na ${endereco}, nº ${numero}, bairro: ${bairro}, Cep: ${cep}, ${cidade} – ${estado}, telefone celular: ${telefone}.`;

            // Copiar os dados para a área de transferência
            navigator.clipboard.writeText(dadosParaCopiar)
                .then(() => {
                    alert("Dados copiados para a área de transferência!");
                })
                .catch(err => {
                    console.error("Erro ao copiar os dados: ", err);
                });
        });

        document.getElementById("imprimirDeclaracao").addEventListener("click", function (event) {
            event.preventDefault(); // Impede a impressão da procuração

            const nome = document.getElementById("nome").value;
            const nacionalidade = document.getElementById("nacionalidade").value;
            const estadoCivil = document.getElementById("estadoCivil").value;
            const profissao = document.getElementById("profissao").value;
            const rg = document.getElementById("rg").value;
            const orgaoEmissor = document.getElementById("orgaoEmissor").value.toUpperCase();
            const cpf = document.getElementById("cpf").value;
            const endereco = document.getElementById("endereco").value;
            const numero = document.getElementById("numero").value;
            const bairro = document.getElementById("bairro").value;
            const cep = document.getElementById("cep").value;
            const cidade = document.getElementById("cidade").value;
            const estado = document.getElementById("estado").value;
            const telefone = document.getElementById("telefone").value;

            const data = new Date();
            const dia = data.getDate();
            const mes = data.toLocaleString("pt-BR", { month: "long" });
            const ano = data.getFullYear();
            const dataFormatada = `${cidade}, ${dia} de ${mes} de ${ano}`;

            const declaracao = `
        <div style="height: 8em;"></div>
        <div style="text-align: center; font-size: 18px; font-weight: bold; margin-bottom: 20px;">
            DECLARAÇÃO DE HIPOSSUFICIÊNCIA
        </div>
        <div style="font-size: 14px; text-align: justify; margin-bottom: 20px;">
            Eu, ${nome}, ${nacionalidade}, ${estadoCivil}, ${profissao}, portador(a) da cédula de identidade RG nº ${rg} ${orgaoEmissor}, 
            inscrito no CPF nº ${cpf}, residente e domiciliado na ${endereco}, nº ${numero}, bairro ${bairro}, CEP ${cep}, ${cidade} – ${estado}, 
            telefone celular ${telefone}, declaro que, em razão de minha condição financeira, não tenho condições de arcar com o pagamento das custas processuais, 
            sob pena de implicar em prejuízo próprio e de minha família, nos termos do art. 5º, LXXIV, da Constituição da República e da Lei nº 1.060/50. 
            Requeiro, ainda, que o benefício abranja a todos os atos do processo, na forma do art. 98 do Código de Processo Civil.
        </div>
        <div style="text-align: right; margin-top: 50px; font-size: 14px;">
            ${dataFormatada}
        </div>
        <div style="margin-top: 50px; text-align: center; font-size: 14px;">
            __________________________________________<br>
            Assinatura do Declarante
        </div>
    `;

            const janelaImpressao = window.open("", "_blank");
            janelaImpressao.document.write(`
        <html>
            <head>
                <title>Declaração de Hipossuficiência</title>
                <style>
                    body { font-family: Arial, sans-serif; margin: 40px; -webkit-print-color-adjust: exact; }
                </style>
            </head>
            <body>
                ${declaracao}
            </body>
        </html>
    `);

            janelaImpressao.document.close();
            janelaImpressao.print();
        });

        /*document.getElementById("imprimirDeclaracao").addEventListener("click", function () {
            // Coletar os dados dos campos do formulário
            const nome = document.getElementById("nome").value;
            const nacionalidade = document.getElementById("nacionalidade").value;
            const estadoCivil = document.getElementById("estadoCivil").value;
            const profissao = document.getElementById("profissao").value;
            const rg = document.getElementById("rg").value;
            const orgaoEmissor = document.getElementById("orgaoEmissor").value.toUpperCase();
            const cpf = document.getElementById("cpf").value;
            const endereco = document.getElementById("endereco").value;
            const numero = document.getElementById("numero").value;
            const bairro = document.getElementById("bairro").value;
            const cep = document.getElementById("cep").value;
            const cidade = document.getElementById("cidade").value;
            const estado = document.getElementById("estado").value;
            const telefone = document.getElementById("telefone").value;

            // Formatar a data atual
            const data = new Date();
            const dia = data.getDate();
            const mes = data.toLocaleString("pt-BR", { month: "long" });
            const ano = data.getFullYear();
            const dataFormatada = `${cidade}, ${dia} de ${mes} de ${ano}`;

            // Conteúdo da declaração com o título
            const declaracao = `
            <div style="height: 8em;"></div> <!-- 8 linhas de espaço -->
            <div style="text-align: center; font-size: 18px; font-weight: bold; margin-bottom: 20px;">
                DECLARAÇÃO DE HIPOSSUFICIÊNCIA
            </div>
            <div style="font-size: 14px; text-align: justify; margin-bottom: 20px;">
                Eu, ${nome}, ${nacionalidade}, ${estadoCivil}, ${profissao}, portador(a) da cédula de identidade RG nº ${rg} ${orgaoEmissor}, 
                inscrito no CPF nº ${cpf}, residente e domiciliado na ${endereco}, nº ${numero}, bairro ${bairro}, CEP ${cep}, ${cidade} – ${estado}, 
                telefone celular ${telefone}, declaro que, em razão de minha condição financeira, não tenho condições de arcar com o pagamento das custas processuais, 
                sob pena de implicar em prejuízo próprio e de minha família, nos termos do art. 5º, LXXIV, da Constituição da República e da Lei nº 1.060/50. 
                Requeiro, ainda, que o benefício abranja a todos os atos do processo, na forma do art. 98 do Código de Processo Civil.
            </div>
            <div style="text-align: right; margin-top: 50px; font-size: 14px;">
                ${dataFormatada}
            </div>
            <div style="margin-top: 50px; text-align: center; font-size: 14px;">
                __________________________________________<br>
                Assinatura do Declarante
            </div>
        `;

            // Abrir uma nova aba para impressão sem afetar a página principal
            const janelaImpressao = window.open("", "_blank");
            janelaImpressao.document.write(`
            < html >
                <head>
                    <title>Declaração de Hipossuficiência</title>
                    <style>
                        body { font-family: Arial, sans-serif; margin: 40px; -webkit-print-color-adjust: exact; }
                        .titulo { text-align: center; font-size: 18px; font-weight: bold; margin-bottom: 20px; }
                    </style>
                </head>
                <body>
                    ${declaracao}
                </body>
            </html >
            `);

            janelaImpressao.document.close();
            janelaImpressao.print();
        }); */

        document.getElementById("exportarTxt").addEventListener("click", function (event) {
    event.preventDefault(); // Impede qualquer ação padrão do botão

    const nome = document.getElementById("nome").value;
    const nacionalidade = document.getElementById("nacionalidade").value;
    const estadoCivil = document.getElementById("estadoCivil").value;
    const profissao = document.getElementById("profissao").value;
    const rg = document.getElementById("rg").value;
    const orgaoEmissor = document.getElementById("orgaoEmissor").value.toUpperCase();
    const cpf = document.getElementById("cpf").value;
    const email = document.getElementById("email").value;
    const endereco = document.getElementById("endereco").value;
    const numero = document.getElementById("numero").value;
    const bairro = document.getElementById("bairro").value;
    const cep = document.getElementById("cep").value;
    const cidade = document.getElementById("cidade").value;
    const estado = document.getElementById("estado").value;
    const telefone = document.getElementById("telefone").value;
    

    const conteudoTxt = `
        #### DADOS DO CLIENTE

        Nome: ${ nome }
        Nacionalidade: ${ nacionalidade }
        Estado Civil: ${ estadoCivil }
        Profissão: ${ profissao }
        RG: ${ rg } - ${ orgaoEmissor }
        CPF: ${ cpf }
        e-mail: ${ email }
        Endereço: ${ endereco }, Nº ${ numero }, Bairro: ${ bairro }
        CEP: ${ cep }, Cidade: ${ cidade } – ${ estado }
        Telefone: ${ telefone }

        #### DADOS PARA COPIAR E COLAR

        ${nome}, ${nacionalidade}, ${estadoCivil}, ${profissao}, portador(a) da cédula de identidade RG nº ${rg} - ${orgaoEmissor}, inscrito no Cadastro de Pessoa Física – CPF: ${cpf}, e-mail: ${email}, residente e domiciliado na ${endereco}, nº ${numero}, bairro: ${bairro}, CEP: ${cep}, ${cidade} – ${estado}, telefone celular: ${telefone}
    `;

    const blob = new Blob([conteudoTxt], { type: "text/plain;charset=utf-8" });
    const link = document.createElement("a");
    link.href = URL.createObjectURL(blob);
    link.download = "dados_formulario.txt";
    link.click();
});
    </script>
</body>
 
</html>