<!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 Documentos</title>
    <!-- Bootstrap CSS -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
    <style>
       body {
            padding-top: 60px;
            background-image: url('background.jpg');
            background-size: cover;
            background-position: center;
            background-repeat: no-repeat;
            color: #000000;
        }
        html, body {
            height: 100%;
            margin: 0;
            display: flex;
            flex-direction: column;
        }   
        .container {
            flex: 1;
        }
        .centralized-content {
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            min-height: 81vh;
            text-align: center;
        }
        footer {
            margin-top: auto;
            position: relative;
            width: 100%;
            background-color: #343a40;
            color: white;
            text-align: center;
            padding: 10px 0;
        }
        .input-valid {
            border: 2px solid green;
            box-shadow: 0 0 5px green;
        }
        .input-invalid {
            border: 2px solid red;
            box-shadow: 0 0 5px red;
        }
        #docModel {
            max-width: 1000px;
            width: 100%;
            margin: 0 auto;
            height: 50px;
            font-size: 1.25rem;
            padding: 10px;
        }
        #generateBtn {
            max-width: 1000px;
            width: 100%;
            margin: 10px auto;
            visibility: hidden;
        }
        #suggestions .list-group-item {
            cursor: pointer;
            transition: background-color 0.2s ease;
        }
        #suggestions .list-group-item:hover {
            background-color: #c2ccd6;
            color: #0d6efd;
        }
        .model-list {
            margin-top: 30px;
        }
        .model-links a {
            text-decoration: none;
            margin-right: 15px;
            color: #0d6efd;
            font-weight: bold;
        }
        .model-links a:hover {
            text-decoration: underline;
        }
    </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>
        </div>
    </nav>

    <!-- Conteúdo Principal -->
    <div class="centralized-content">
        <h1 class="text-center mb-4">Criador de Documentos</h1>
        <p class="text-center">Digite abaixo o modelo do documento que deseja criar.</p>

        <div class="row justify-content-center col-md-8 col-lg-8 col-sm-12 col-xs-12">
            <div class="col-md-8 col-lg-8 col-xs-12">
                <div class="mb-3">
                    <input type="text" class="form-control" id="docModel" placeholder="Digite o modelo do documento">
                    <ul id="suggestions" class="list-group mt-2" style="display: none;"></ul>
                </div>
                <button id="generateBtn" class="btn btn-primary">Gerar Documento</button>
            </div>
        </div>
        
        <!-- Links dos modelos -->
        <div class="mt-4 model-links text-center">
            <h4>Modelos Disponíveis:</h4>
            <a href="modelo_pedido_demissao.html">Pedido de Demissão</a>
            <a href="folha_de_ponto.html">Folha de Ponto</a>
        </div>
    </div>

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

    <!-- JavaScript -->
    <script>
        const docModelInput = document.getElementById('docModel');
        const suggestionsList = document.getElementById('suggestions');
        const generateBtn = document.getElementById('generateBtn');

        const suggestions = [
            { name: "Pedido de Demissão", link: "modelo_pedido_demissao.html" },
            { name: "Folha de Ponto", link: "folha_de_ponto.html" }
        ];

        function validateInput() {
            const query = docModelInput.value.trim().toLowerCase();
            const matchedSuggestion = suggestions.find(suggestion =>
                suggestion.name.toLowerCase() === query
            );

            if (matchedSuggestion) {
                docModelInput.classList.add('input-valid');
                docModelInput.classList.remove('input-invalid');
                docModelInput.dataset.link = matchedSuggestion.link;
                generateBtn.style.visibility = 'visible';
                generateBtn.disabled = false;
            } else {
                docModelInput.classList.add('input-invalid');
                docModelInput.classList.remove('input-valid');
                delete docModelInput.dataset.link;
                generateBtn.style.visibility = 'hidden';
                generateBtn.disabled = true;
            }
        }

        docModelInput.addEventListener('input', function () {
            const query = docModelInput.value.toLowerCase();
            suggestionsList.innerHTML = '';
            if (query) {
                const filteredSuggestions = suggestions.filter(suggestion =>
                    suggestion.name.toLowerCase().includes(query)
                );

                if (filteredSuggestions.length > 0) {
                    suggestionsList.style.display = 'block';
                    filteredSuggestions.forEach(suggestion => {
                        const listItem = document.createElement('li');
                        listItem.textContent = suggestion.name;
                        listItem.className = 'list-group-item';
                        listItem.dataset.link = suggestion.link;
                        suggestionsList.appendChild(listItem);
                    });
                } else {
                    suggestionsList.style.display = 'none';
                }
            } else {
                suggestionsList.style.display = 'none';
            }
            validateInput();
        });

        suggestionsList.addEventListener('click', function (event) {
            if (event.target && event.target.nodeName === 'LI') {
                const selectedLink = event.target.dataset.link;
                if (selectedLink) {
                    window.location.href = selectedLink;
                }
            }
        });

        generateBtn.addEventListener('click', function () {
            const selectedLink = docModelInput.dataset.link;
            if (!selectedLink) {
                alert('Selecione um modelo válido.');
            } else {
                window.location.href = selectedLink;
            }
        });

        generateBtn.disabled = true;
    </script>
</body>
</html>
