<!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'); /* Exemplo de imagem de fundo */
            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; /* Centraliza verticalmente */
            align-items: center; /* Centraliza horizontalmente */
            min-height: 81vh; /* Garante que ocupa toda a altura da tela */
            text-align: center; /* Centraliza o texto interno */
        }

        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; /* Aumenta a largura máxima */
        width: 100%; /* Ocupa todo o espaço disponível */
        margin: 0 auto; /* Centraliza horizontalmente */
        height: 50px; /* Aumenta a altura do campo */
        font-size: 1.25rem; /* Aumenta o tamanho da fonte */
        padding: 10px; /* Adiciona espaçamento interno */
    }

    #generateBtn {
        max-width: 1000px; /* Ajusta a largura máxima do botão */
        width: 100%; /* Ocupa todo o espaço disponível */
        margin: 10px auto; /* Adiciona espaçamento superior */
    }

    #generateBtn {
        visibility: hidden; /* Inicialmente invisível */
    }

    #suggestions .list-group-item {
        cursor: pointer; /* Muda o cursor para pointer ao passar o mouse */
        transition: background-color 0.2s ease; /* Adiciona transição suave */
    }

    #suggestions .list-group-item:hover {
        background-color: #c2ccd6; /* Altera a cor de fundo ao passar o mouse */
        color: #0d6efd; /* Muda a cor do texto */
    }
    .justify-content-center {
        margin-top: 25px;
    }


        
    </style>
</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="#">Início</a>
                    </li>
                    <!-- <li class="nav-item">
                        <a class="nav-link" href="#about">Sobre</a>
                    </li> -->
                </ul>
            </div>
        </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>
        
    </div>


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

    <!-- Bootstrap Bundle com Popper -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>

    <!-- JavaScript Personalizado -->
    <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: "Relatório", link: "relatorio.html" },
        // { name: "Proposta", link: "proposta.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'; // Exibe o botão
            generateBtn.disabled = false; // Habilita o botão
        } else {
            docModelInput.classList.add('input-invalid');
            docModelInput.classList.remove('input-valid');
            delete docModelInput.dataset.link;
            generateBtn.style.visibility = 'hidden'; // Oculta o botão
            generateBtn.disabled = true; // Desabilita o botão
        }
    }


    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;

        // Redireciona para o link associado à sugestão clicada
        if (selectedLink) {
            window.location.href = selectedLink;
        }
    }
});


    generateBtn.addEventListener('click', function () {
        const selectedLink = docModelInput.dataset.link;
        if (!docModelInput.value.trim()) {
            alert('Por favor, insira um modelo de documento.');
        } else if (!selectedLink) {
            alert('Por favor, selecione um modelo válido da lista de sugestões.');
        } else {
            window.location.href = selectedLink;
        }
    });

    // Desabilita o botão ao carregar a página
    generateBtn.disabled = true;
    </script>

</body>
</html>
