<!DOCTYPE html>
<html lang="pt-br">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Modelo de Pedido de Demissão</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.70/pdfmake.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.70/vfs_fonts.js"></script>
    <style>
        body {
            padding-top: 60px;
            padding-bottom: 0;
        }
        .column {
            height: 100%;
        }
        .form-column {
            border: 1px solid #ddd;
            border-radius: 5px;
            padding: 10px;
        }
        .form-content {
            max-height: 500px;
            overflow-y: auto;
        }
        footer {
            margin-top: auto;
        }
        .text-start {
            padding-top: 20px;
            padding-left: -5px;
        }
        .form-check-label {
          padding-top: 15px; 
        }
        html, body {
            height: 100%;
            margin: 0;
            display: flex;
            flex-direction: column;
        }   
        .container {
            flex: 1;
        }

        footer {
            margin-top: auto;
            position: relative;
            width: 100%;
            background-color: #343a40;
            color: white;
            text-align: center;
            padding: 10px 0;
        }
    </style>
    <script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-1738781469983163"
    crossorigin="anonymous"></script>
</head>
<body>
    <!-- Barra de Navegação -->
    <nav class="navbar navbar-expand-lg navbar-dark bg-dark fixed-top">
        <div class="container-fluid">
            <a class="navbar-brand" href="#">Criar Docs</a>
            <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
                <span class="navbar-toggler-icon"></span>
            </button>
            <div class="collapse navbar-collapse" id="navbarNav">
                <ul class="navbar-nav">
                    <li class="nav-item">
                        <a class="nav-link active" aria-current="page" href="index.html">Início</a>
                    </li>
                    <!-- <li class="nav-item">
                        <a class="nav-link" href="#about">Sobre</a>
                    </li> -->
                </ul>
            </div>
        </div>
    </nav>

    <div class="container">
        <h1 class="text-start mb-4">Pedido de Demissão</h1>
        <div class="row">
            <!-- Formulário -->
            <div class="col-md-4 form-column">
                <h3>Preencha os Dados</h3>
                <div class="form-content">
                    <form id="resignationForm">
                        <div class="mb-3">
                            <label for="avisoPrevio" class="form-check-label form-label">Pedido com Aviso Prévio?</label> <br />
                            <input type="checkbox" id="avisoPrevio" class="form-check-input"> Sim 
                        </div>
                        <div class="mb-3" id="diasAvisoGroup" style="display: none;">
                            <label for="diasAviso" class="form-label">Quantidade de Dias de Aviso Prévio</label>
                            <input type="number" class="form-control" id="diasAviso" min="1" max="30">
                        </div>
                        <div class="mb-3">
                            <label for="nome" class="form-label">Seu Nome</label>
                            <input type="text" class="form-control" id="nome" required>
                        </div>
                        <div class="mb-3">
                            <label for="endereco" class="form-label">Seu Endereço</label>
                            <input type="text" class="form-control" id="endereco" required>
                        </div>
                        <div class="mb-3">
                            <label for="cidade" class="form-label">Cidade, Estado, CEP</label>
                            <input type="text" class="form-control" id="cidade" required>
                        </div>
                        <div class="mb-3">
                            <label for="data" class="form-label">Data</label>
                            <input type="date" class="form-control" id="data">
                        </div>
                        <div class="mb-3">
                            <label for="empresa" class="form-label">Nome da Empresa</label>
                            <input type="text" class="form-control" id="empresa" required>
                        </div>
                        <div class="mb-3">
                            <label for="enderecoEmpresa" class="form-label">Endereço da Empresa</label>
                            <input type="text" class="form-control" id="enderecoEmpresa" required>
                        </div>
                        <div class="mb-3">
                            <label for="cidadeEmpresa" class="form-label">Cidade, Estado, CEP</label>
                            <input type="text" class="form-control" id="cidadeEmpresa" required>
                        </div>
                        <div class="mb-3">
                            <label for="responsavel" class="form-label">Nome do Responsável ou Departamento</label>
                            <input type="text" class="form-control" id="responsavel" required>
                        </div>
                        <div class="mb-3">
                            <label for="cargo" class="form-label">Seu Cargo</label>
                            <input type="text" class="form-control" id="cargo" required>
                        </div>
                        <div class="mb-3">
                            <label for="dataSaida" class="form-label">Data de Saída</label>
                            <input type="date" class="form-control" id="dataSaida">
                        </div>
                    </form>
                </div>
            </div>

            <!-- PDF Gerado -->
            <div class="col-md-8">
                <div class="d-flex justify-content-between align-items-center">
                    <h3>Visualização do Documento</h3>
                    <div>
                        <button id="downloadPdf" class="btn btn-danger">
                            <i class="bi bi-file-earmark-pdf"></i> Baixar PDF
                        </button>
                        <!-- <button id="downloadDoc" class="btn btn-primary">
                            Baixar DOC
                        </button> -->
                    </div>
                </div>
                <iframe id="pdfViewer" class="w-100 border" style="height: 600px;"></iframe>
            </div>
        </div>
    </div>

    <!-- Rodapé -->
    <footer class="bg-dark text-white text-center py-3">
        <p>&copy; 2025 GeradorDocs. Todos os direitos reservados.</p>
    </footer>

    <script>
        function formatDateToBrazilian(dateStr) {
            const [year, month, day] = dateStr.split("-");
            return `${day}/${month}/${year}`;
        }

        function getTodayDate() {
            const today = new Date();
            const day = String(today.getDate()).padStart(2, '0');
            const month = String(today.getMonth() + 1).padStart(2, '0');
            const year = today.getFullYear();
            return `${year}-${month}-${day}`;
        }

        document.getElementById('avisoPrevio').addEventListener('change', function() {
            const avisoPrevioChecked = this.checked;
            document.getElementById('diasAvisoGroup').style.display = avisoPrevioChecked ? 'block' : 'none';
        });

        function updatePdf() {
            const avisoPrevioChecked = document.getElementById('avisoPrevio').checked;
            const diasAviso = avisoPrevioChecked ? document.getElementById('diasAviso').value || 'N/A' : 'N/A';
            const avisoText = avisoPrevioChecked
                ? `com ${diasAviso} dias de aviso prévio.`
                : 'sem aviso prévio.';

            let dataValue = document.getElementById('data').value || getTodayDate();
            let dataSaidaValue = document.getElementById('dataSaida').value || getTodayDate();

            const dataFormatada = formatDateToBrazilian(dataValue);
            const dataSaidaFormatada = formatDateToBrazilian(dataSaidaValue);

            const docDefinition = {
                content: [
                    { text: document.getElementById('nome').value, style: 'header' },
                    document.getElementById('endereco').value,
                    document.getElementById('cidade').value,
                    '\n',
                    dataFormatada,
                    '\n',
                    document.getElementById('empresa').value,
                    document.getElementById('enderecoEmpresa').value,
                    document.getElementById('cidadeEmpresa').value,
                    '\n',
                    `À ${document.getElementById('responsavel').value},`,
                    '\n',
                    `Venho, por meio desta, formalizar meu pedido de demissão do cargo de ${document.getElementById('cargo').value} nesta empresa, com último dia de trabalho previsto para ${dataSaidaFormatada}, ${avisoText}`,
                    '\n',
                    'Agradeço pela oportunidade de fazer parte da equipe e pelo aprendizado adquirido durante o período em que estive na empresa. Estou à disposição para auxiliar na transição das minhas responsabilidades, visando garantir uma saída organizada e o mínimo impacto possível.',
                    '\n',
                    'Reforço minha gratidão à equipe e desejo muito sucesso à empresa no futuro.',
                    '\n\n\n\n',
                    { text: '_________________________', alignment: 'center', margin: [0, 40, 0, 0] },
                    { text: document.getElementById('nome').value, alignment: 'center', margin: [0, 10, 0, 0] }
                ]
            };

            pdfMake.createPdf(docDefinition).getDataUrl(function(dataUrl) {
                document.getElementById('pdfViewer').src = dataUrl;
            });
        }

        function downloadPdf() {
            const avisoPrevioChecked = document.getElementById('avisoPrevio').checked;
            const diasAviso = avisoPrevioChecked ? document.getElementById('diasAviso').value || 'N/A' : 'N/A';
            const avisoText = avisoPrevioChecked
                ? `com ${diasAviso} dias de aviso prévio.`
                : 'sem aviso prévio.';
            const dataFormatada = formatDateToBrazilian(document.getElementById('data').value);
            const dataSaidaFormatada = formatDateToBrazilian(document.getElementById('dataSaida').value);

            const docDefinition = {
                content: [
                    { text: document.getElementById('nome').value, style: 'header' },
                    document.getElementById('endereco').value,
                    document.getElementById('cidade').value,
                    '\n',
                    dataFormatada,
                    '\n',
                    document.getElementById('empresa').value,
                    document.getElementById('enderecoEmpresa').value,
                    document.getElementById('cidadeEmpresa').value,
                    '\n',
                    `À ${document.getElementById('responsavel').value},`,
                    '\n',
                    `Venho, por meio desta, formalizar meu pedido de demissão do cargo de ${document.getElementById('cargo').value} nesta empresa, com último dia de trabalho previsto para ${dataSaidaFormatada}, ${avisoText}`,
                    '\n',
                    'Agradeço pela oportunidade de fazer parte da equipe e pelo aprendizado adquirido durante o período em que estive na empresa. Estou à disposição para auxiliar na transição das minhas responsabilidades, visando garantir uma saída organizada e o mínimo impacto possível.',
                    '\n',
                    'Reforço minha gratidão à equipe e desejo muito sucesso à empresa no futuro.',
                    '\n\n\n\n',
                    { text: '_________________________', alignment: 'center', margin: [0, 40, 0, 0] },
                    { text: document.getElementById('nome').value, alignment: 'center', margin: [0, 10, 0, 0] }
                ]
            };

            pdfMake.createPdf(docDefinition).download('pedido_demissao.pdf');
        }

        function downloadDoc() {
            const content = `
                ${document.getElementById('nome').value}
                ${document.getElementById('endereco').value}
                ${document.getElementById('cidade').value}

                ${formatDateToBrazilian(document.getElementById('data').value)}

                ${document.getElementById('empresa').value}
                ${document.getElementById('enderecoEmpresa').value}
                ${document.getElementById('cidadeEmpresa').value}

                À ${document.getElementById('responsavel').value},

                Venho, por meio desta, formalizar meu pedido de demissão do cargo de ${document.getElementById('cargo').value} nesta empresa, com último dia de trabalho previsto para ${formatDateToBrazilian(document.getElementById('dataSaida').value)}, respeitando o período de aviso prévio conforme a legislação vigente ou conforme acordado entre as partes.

                Agradeço pela oportunidade de fazer parte da equipe e pelo aprendizado adquirido durante o período em que estive na empresa. Estou à disposição para auxiliar na transição das minhas responsabilidades, visando garantir uma saída organizada e o mínimo impacto possível.

                Reforço minha gratidão à equipe e desejo muito sucesso à empresa no futuro.

                Atenciosamente,
                ${document.getElementById('nome').value}
            `;

            const blob = new Blob([content], { type: "application/msword" });
            const link = document.createElement("a");
            link.href = URL.createObjectURL(blob);
            link.download = "pedido_demissao.doc";
            link.click();
        }

        document.getElementById('resignationForm').addEventListener('input', updatePdf);
        document.getElementById('downloadPdf').addEventListener('click', downloadPdf);
        document.getElementById('downloadDoc').addEventListener('click', downloadDoc);
    </script>
</body>
</html>