<!DOCTYPE html>
<html lang="pt-br">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Cadastro de Notícias - Unidade 4</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body class="bg-light">

    <div class="container my-5">
        <div class="row justify-content-center">
            <div class="col-md-6 bg-white p-4 rounded shadow-sm">
                <h3 class="mb-4">Publicar Nova Matéria</h3>
                
                <form id="form-noticia" novalidate>
                    <div class="mb-3">
                        <label for="titulo" class="form-label">Título da Notícia</label>
                        <input id="titulo" type="text" class="form-control" required>
                        <div class="invalid-feedback">Por favor, insira um título válido.</div>
                    </div>

                    <div class="mb-3">
                        <label for="categoria" class="form-label">Categoria</label>
                        <select id="categoria" class="form-select" required>
                            <option value="">Selecione...</option>
                            <option value="Tecnologia">Tecnologia</option>
                            <option value="Desenvolvimento">Desenvolvimento</option>
                            <option value="Design UX">Design UX</option>
                        </select>
                        <div class="invalid-feedback">Selecione uma categoria técnica.</div>
                    </div>

                    <div class="mb-3">
                        <label for="resumo" class="form-label">Resumo</label>
                        <textarea id="resumo" class="form-control" rows="3" required></textarea>
                        <div class="invalid-feedback">O resumo é obrigatório.</div>
                    </div>

                    <button type="submit" class="btn btn-primary w-100" id="btn-enviar">
                        Enviar para o Servidor
                    </button>
                </form>

                <div id="status-envio" class="mt-3"></div>
            </div>
        </div>
    </div>

    <script>
        const form = document.getElementById('form-noticia');
        const statusEnvio = document.getElementById('status-envio');

        form.addEventListener('submit', async (event) => {
            // 1. Evita que a página dê refresh
            event.preventDefault();

            // 2. Validação visual do Bootstrap 5
            if (!form.checkValidity()) {
                event.stopPropagation();
                form.classList.add('was-validated');
                return; // Interrompe a execução se houver erros
            }

            form.classList.add('was-validated');
            statusEnvio.innerHTML = `<div class="alert alert-info">Enviando dados assincronamente...</div>`;

            // 3. Construção do Objeto JSON com os dados do Formulário
            const dadosFormulario = {
                titulo: document.getElementById('titulo').value,
                categoria: document.getElementById('categoria').value,
                resumo: document.getElementById('resumo').value,
                autor: "Prof. Robson Carmo" // Dado estático inserido pelo sistema
            };

            try {
                // 4. Envio dos dados para a API Externa via método POST
                const response = await fetch('URL', {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json'
                    },
                    body: JSON.stringify(dadosFormulario) // Converte o objeto JS para texto JSON
                });

                if (response.ok) {
                    statusEnvio.innerHTML = `
                        <div class="alert alert-success">
                            <strong>Sucesso!</strong> A notícia foi enviada à API via AJAX.
                        </div>`;
                    form.reset(); // Limpa os campos
                    form.classList.remove('was-validated'); // Limpa os estados visuais
                } else {
                    throw new Error("O servidor retornou um status de erro.");
                }
            } catch (error) {
                statusEnvio.innerHTML = `
                    <div class="alert alert-danger">
                        <strong>Falha no Envio:</strong> Não foi possível conectar à API. erro: ${error.message}
                    </div>`;
            }
        });
    </script>
</body>
</html>