<!DOCTYPE html>
<html lang="pt-br">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Gerador de Folha de Ponto</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;
            display: flex;
            flex-direction: column;
            height: 100%;
            margin: 0;
        }
        .container {
            flex: 1;
        }
        footer {
            background-color: #343a40;
            color: white;
            text-align: center;
            padding: 10px 0;
            position: fixed;
            bottom: 0;
            width: 100%;
        }
        iframe {
            border: 1px solid #ddd;
        }
        .container-custom-border {
            border: 1px solid #ddd; /* Espessura, estilo e cor da borda */
            border-radius: 5px; /* Bordas levemente arredondadas */
            padding: 15px; /* Espaçamento interno */
        }
        .text-start {
            padding-top: 20px;
            padding-left: -5px;
        }
    </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>
                </ul>
            </div>
        </div>
    </nav>

    <!-- Formulário e Visualização -->
    <div class="container">
        <h1 class="mb-4 text-start">Gerador de Folha de Ponto</h1>
        <div class="row">
            <!-- Formulário -->
            <div class="col-md-4  container-custom-border">
                <h3>Preencha os Dados</h3>
                <form id="pontoForm">
                    <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="cnpj" class="form-label">CNPJ</label>
                        <input type="text" class="form-control" id="cnpj" required>
                    </div>
                    <div class="mb-3">
                        <label for="funcionario" class="form-label">Nome do Funcionário</label>
                        <input type="text" class="form-control" id="funcionario" required>
                    </div>
                    <div class="mb-3">
                        <label for="gestor" class="form-label">Nome do Gestor</label>
                        <input type="text" class="form-control" id="gestor" required>
                    </div>
                    <div class="mb-3">
                        <label for="cargo" class="form-label">Cargo</label>
                        <input type="text" class="form-control" id="cargo" required>
                    </div>
                    <div class="mb-3">
                        <label for="mes" class="form-label">Mês da Folha</label>
                        <input type="month" class="form-control" id="mes" required>
                    </div>
                </form>
            </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="baixarPdf" class="btn btn-danger">
                            <i class="bi bi-file-earmark-pdf"></i> Baixar PDF
                        </button>
                    </div>
                </div>
                <iframe id="pdfViewer" class="w-100 border" style="height: 600px;"></iframe>
            </div>
        </div>
    </div>

    <!-- Rodapé -->
    <footer>
        &copy; 2024 Gerador de Folha de Ponto. Todos os direitos reservados.
    </footer>

    <script>
        function gerarFolhaPonto() {
            const empresa = document.getElementById("empresa").value;
            const cnpj = document.getElementById("cnpj").value;
            const funcionario = document.getElementById("funcionario").value;
            const gestor = document.getElementById("gestor").value;
            const cargo = document.getElementById("cargo").value;
            const mes = document.getElementById("mes").value;

            const dias = Array.from({ length: 31 }, (_, i) => ({ text: i + 1, style: 'tableCellSmall' }));

            const docDefinition = {
                content: [
                    { text: 'FOLHA DE PONTO', style: 'headerSmall', alignment: 'center', margin: [0, 0, 0, 10] },
                    { text: `Empresa: ${empresa}  |  CNPJ: ${cnpj}`, style: 'textSmall', margin: [0, 2] },
                    { text: `Funcionário: ${funcionario}  |  Cargo: ${cargo}  |  Mês: ${mes}`, style: 'textSmall', margin: [0, 2, 0, 10] },
                    {
                        table: {
                            headerRows: 1,
                            widths: ['auto', '*', '*', '*', '*', 'auto', '*'],
                            body: [
                                [
                                    { text: 'Dia', style: 'tableHeaderSmall' },
                                    { text: 'Entrada', style: 'tableHeaderSmall' },
                                    { text: 'Início do Intervalo', style: 'tableHeaderSmall' },
                                    { text: 'Fim do Intervalo', style: 'tableHeaderSmall' },
                                    { text: 'Saída', style: 'tableHeaderSmall' },
                                    { text: 'Hora Extra', style: 'tableHeaderSmall' },
                                    { text: 'Assinatura', style: 'tableHeaderSmall' }
                                ],
                                ...dias.map(dia => [
                                    { text: dia.text, style: 'tableCellSmall' },
                                    { text: '', style: 'tableCellSmall' },
                                    { text: '', style: 'tableCellSmall' },
                                    { text: '', style: 'tableCellSmall' },
                                    { text: '', style: 'tableCellSmall' },
                                    { text: '', style: 'tableCellSmall' },
                                    { text: '', style: 'tableCellSmall' }
                                ])
                            ]
                        },
                        layout: {
                            hLineWidth: () => 1,
                            vLineWidth: () => 1
                        }
                    },
                    {
                        columns: [
                            {
                                stack: [
                                    { text: '____________________________', alignment: 'left', style: 'textSmall' },
                                    { text: gestor, alignment: 'left', style: 'textSmall' },
                                    { text: 'Assinatura do Gestor', alignment: 'left', style: 'textSmall' }
                                ],
                                width: '50%'
                            },
                            {
                                stack: [
                                    { text: '____________________________', alignment: 'right', style: 'textSmall' },
                                    { text: funcionario, alignment: 'right', style: 'textSmall' },
                                    { text: 'Assinatura do Funcionário', alignment: 'right', style: 'textSmall' }
                                ],
                                width: '50%'
                            }
                        ],
                        margin: [0, 40, 0, 0] <!-- Margem maior ajustada aqui -->
                    }
                ],
                styles: {
                    headerSmall: {
                        fontSize: 14,
                        bold: true
                    },
                    textSmall: {
                        fontSize: 11
                    },
                    tableHeaderSmall: {
                        bold: true,
                        fillColor: '#eeeeee',
                        alignment: 'center',
                        fontSize: 8
                    },
                    tableCellSmall: {
                        alignment: 'center',
                        margin: [0, 2],
                        fontSize: 8
                    }
                }
            };

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

        function baixarPdf() {
            gerarFolhaPonto().download('folha_de_ponto.pdf');
        }

        document.getElementById('pontoForm').addEventListener('input', gerarFolhaPonto);
        document.getElementById('baixarPdf').addEventListener('click', baixarPdf);
    </script>
</body>
</html>
