<!DOCTYPE html>
<html lang="pt">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Back-office - Mitigacao de Ataques Ciberneticos</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <!-- Saudacao dinamica e contador de visitas -->
    <div id="saudacao"></div>

    <!-- Botao para alternar entre temas (Dark/Light) -->
    <button id="btn-tema">🌙 Modo Escuro</button>

    <header>
        <h1>Mitigacao de Ataques Ciberneticos</h1>
        <nav>
            <ul>
                <li><a href="index.php">Inicio</a></li>
                <li><a href="phishing.php">Phishing</a></li>
                <li><a href="ransomware.php">Ransomware</a></li>
                <li><a href="ddos.php">DDoS</a></li>
                <li><a href="about.php">Sobre</a></li>
                <li><a href="backoffice.php" class="active">Back-office</a></li>
            </ul>
        </nav>
    </header>

    <main>
        <section class="content-section">
            <h2>Back-office - Registo de Incidentes</h2>
            <p>Utilize o formulario abaixo para registar um novo incidente de seguranca na base de dados.</p>

            <form id="form-incidente" class="backoffice-form">
                <div class="form-group">
                    <label for="tipo">Tipo de Ataque:</label>
                    <select id="tipo" name="tipo" required>
                        <option value="" disabled selected>Selecione o tipo</option>
                        <option value="Phishing">Phishing</option>
                        <option value="Ransomware">Ransomware</option>
                        <option value="DDoS">DDoS</option>
                    </select>
                </div>

                <div class="form-group">
                    <label for="descricao">Descricao:</label>
                    <textarea id="descricao" name="descricao" rows="4" required placeholder="Descreva o incidente..."></textarea>
                </div>

                <div class="form-group">
                    <label for="data_ocorrencia">Data da Ocorrencia:</label>
                    <input type="date" id="data_ocorrencia" name="data_ocorrencia" required>
                </div>

                <div class="form-group">
                    <label for="severidade">Severidade:</label>
                    <select id="severidade" name="severidade" required>
                        <option value="" disabled selected>Selecione a severidade</option>
                        <option value="Baixa">Baixa</option>
                        <option value="Moderada">Moderada</option>
                        <option value="Alta">Alta</option>
                        <option value="Critica">Critica</option>
                    </select>
                </div>

                <div class="form-group">
                    <label for="origem">Origem:</label>
                    <input type="text" id="origem" name="origem" required placeholder="Ex: Email, Internet, Rede, USB...">
                </div>

                <button type="submit" class="btn-submit">Registar Incidente</button>
            </form>

            <div id="feedback" class="feedback-message" style="display: none;"></div>
        </section>
    </main>

    <footer>
        <p>&copy; 2026 - João Marques (2403882) - Laboratório de Sistemas e Serviços Web (E-fólios A e B)</p>
    </footer>

    <!-- Modal para visualizacao de imagens em tamanho grande -->
    <div id="modal-imagem">
        <img src="" alt="">
    </div>

    <script src="script.js"></script>
    <script>
        // Gestor do formulario de back-office - envia pedido PUT para a API REST
        document.getElementById('form-incidente').addEventListener('submit', async function(e) {
            e.preventDefault();

            const formData = {
                tipo: document.getElementById('tipo').value,
                descricao: document.getElementById('descricao').value,
                data_ocorrencia: document.getElementById('data_ocorrencia').value,
                severidade: document.getElementById('severidade').value,
                origem: document.getElementById('origem').value
            };

            try {
                const response = await fetch('api/incidentes.php', {
                    method: 'PUT',
                    headers: {
                        'Content-Type': 'application/json'
                    },
                    body: JSON.stringify(formData)
                });

                const result = await response.json();
                const feedback = document.getElementById('feedback');

                if (response.ok) {
                    feedback.className = 'feedback-message success';
                    feedback.textContent = 'Incidente registado com sucesso! ID: ' + result.id;
                    document.getElementById('form-incidente').reset();
                } else {
                    feedback.className = 'feedback-message error';
                    feedback.textContent = 'Erro: ' + (result.message || 'Ocorreu um erro.');
                }

                feedback.style.display = 'block';

            } catch (error) {
                const feedback = document.getElementById('feedback');
                feedback.className = 'feedback-message error';
                feedback.textContent = 'Erro de rede: ' + error.message;
                feedback.style.display = 'block';
            }
        });
    </script>
</body>
</html>