{% extends 'navbar/navbar.html' %}
{% load static %}
{% block ransomware %}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="{% static 'ransomware/css/ransomware.css' %}">
    <title>x-sys</title>
    <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
</head>

<body>        
    <div class="gridGraphSection">       
        <div class="CPUMemory">
            <p>CPU and Memory Usages</p>
            <p>CPU Usages: <span id="cpu-usage" class="CPUUsagesSpan">00.00%</span> </p>
        </div>
        <div class="mainCalendarSection">
           <canvas id="lineChart" ></canvas>
           <canvas id="barChart" ></canvas>
        </div>
    </div>
    <div class="gridGraphSection">
        <div style="display:flex">
        <button id="change-button" class="green-button" style="display:none;" onclick="toggleLoading()">Stop attack</button>
        <div id="output" class="text-change" style="display:none;"></div>
        </div>
    </div>
    <div class="gridGraphSection">
            <h3 class="running-title">Ransomware threat detection</h3>
            <pre id="detect-log">
                {% if flag == "No" %}
                No threat detected
            {% else %}
                Threat Detected at time: {{ time }}
            {% endif %}
            </pre>
    </div>
    <h2 style="display:none;" class="ipNumber"></h2>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script src="{% static 'dashboard/js/running-processes.js' %}"></script>
    <!-- <script src="{% static 'ransomware/js/line-chart.js' %}"></script> -->
    <script type="application/json" id="usage-data">
        {
            "cpu_data": {{ cpu|safe }},
            "memory_data": {{ memory|safe }}
        }
    </script>

    <script>
        // Retrieve the JSON data
        var usageData = JSON.parse(document.getElementById('usage-data').textContent);
        
        var ctx = document.getElementById('lineChart').getContext('2d');

        var data = {
            labels: ['1', '2', '3', '4', '5'],  // X-axis labels representing the 5 entries
            datasets: [{
                label: 'CPU Usage',
                data: usageData.cpu_data,  // Data for CPU Usage
                fill: false,
                borderColor: 'rgba(75, 192, 192, 1)',
                borderWidth: 2,
                pointRadius: 5,
                pointHoverRadius: 8,
            }, {
                label: 'Memory Usage',
                data: usageData.memory_data,  // Data for Memory Usage
                fill: false,
                borderColor: 'rgba(255, 99, 132, 1)',
                borderWidth: 2,
                pointRadius: 5,
                pointHoverRadius: 8,
            }]
        };

        var options = {
            scales: {
                y: {
                    beginAtZero: true,
                    max: 100,  // Set the Y-axis range from 0 to 100%
                    ticks: {
                        color: "#ffffff",
                    },
                },
                x: {
                    beginAtZero: true,
                    ticks: {
                        color: "#ffffff",
                    },
                },
            }
        };

        var myLineChart = new Chart(ctx, {
            type: 'line',
            data: data,
            options: options
        });
    </script>
    <!-- <script src="{% static 'ransomware/js/detect-bar-chart.js' %}"></script>     -->
    <script type="application/json" id="type">{{ type|safe }}</script>
    <script type="text/javascript">
        // Get the data from Django context

        var classData = document.getElementById('type').textContent
        classData = classData.replace(/'/g, '"');
        var classFrequencyDict = JSON.parse(classData);
       

        // Extract labels and data from the dictionary
        var labels = Object.keys(classFrequencyDict);
        var dataValues = Object.values(classFrequencyDict);

        // Create the chart
        var ctx = document.getElementById('barChart').getContext('2d');

        var initialData = {
            labels: labels,
            datasets: [{
                label: 'Ransomware Frequency',
                data: dataValues,
                backgroundColor: [
                    'rgba(255, 165, 0, 0.5)', // orange
                    'rgba(255, 0, 0, 0.5)',   // red
                    'rgba(255, 192, 203, 0.5)', // pink
                    'rgba(0, 0, 255, 0.5)',   // blue
                    'rgba(0, 255, 255, 0.5)', // aqua
                    'rgba(238, 130, 238, 0.5)', // violet
                    'rgba(192, 192, 192, 0.5)', // silver
                    'rgba(0, 0, 0, 0.5)'       // black
                ],
                borderColor: [
                    'rgba(255, 165, 0, 1)', // orange
                    'rgba(255, 0, 0, 1)',   // red
                    'rgba(255, 192, 203, 1)', // pink
                    'rgba(0, 0, 255, 1)',   // blue
                    'rgba(0, 255, 255, 1)', // aqua
                    'rgba(238, 130, 238, 1)', // violet
                    'rgba(192, 192, 192, 1)', // silver
                    'rgba(0, 0, 0, 1)'       // black
                ],
                borderWidth: 1
            }]
        };

        var options = {
            scales: {
                y: {
                    beginAtZero: true,  // Changed to true for better visibility
                    min: 0,
                    max: Math.max(...dataValues) + 10,  // Adjust max based on the data
                    stepSize: 1
                }
            }
        };

        var myBarChart = new Chart(ctx, {
            type: 'bar',
            data: initialData,
            options: options
        });
    </script>
    <!-- <script src="{% static 'ransomware/js/detectlog.js' %}"></script>     -->
    
    <script>
        var steps = [
            "Identifying the Ransomware Attack type...",
            "Identified the ransomware type...",
            "Its type not revealed...",
            "Checking for compromised files...",
            "Will show the list of all compromised files...",
            "Stopping the ransomware attack...",
            "Ransomware attack stopped...",
            "Eliminating the ransomware attack...",
            "Ransomware attack removed...",
            "parameters passed for additional reinforcement learning...",
            "Retrieving the compromised data...",
            "Will list all the unencrypted files...",
            "Stopping the counteractive measure...",
            "Counteractive measure stopped..."
        ];
    
        var currentStep = 0;
        var interval;
        var textVisible = false;
    
        function loadTextOneByOne() {
            var output = document.getElementById("output");
    
            if (currentStep < steps.length) {
                output.innerHTML = steps[currentStep];
                currentStep++;
            } else {
                clearInterval(interval);
                textVisible = false;
                output.innerHTML="This is taking longer than expected. Please be patient."
                //output.style.display = "none";
            }
        }
    
        function toggleLoading() {
            var output = document.getElementById("output");
    
            if (!textVisible) {
                currentStep = 0; // Reset to the beginning
                output.style.display = "block";
                textVisible = true;
                clearInterval(interval);
                interval = setInterval(loadTextOneByOne, 1000);
                loadTextOneByOne();
            } else {
                output.style.display = "none";
                textVisible = false;
            }
        }
    </script>
    <script>
        $(document).ready(function () {
            $("#change-button").click(function () {
                var csrfToken = $("input[name=csrfmiddlewaretoken]").val();
                var deviceId = localStorage.getItem('deviceId');
                var url = '';
                if (deviceId === 'xAq9W1PO5rmAuuQ') {
                    url = '/changestatus';
                } else if (deviceId === 'wzI0R1JqWqV0Lyi') {
                    url = '/changestatus2';
                }
    
                $.ajax({
                    type: 'POST',
                    url: url,
                    data: {},
                    dataType: 'json',
                    headers: { 'X-CSRFToken': csrfToken },
                    success: function (data) {
                        if (data.status !== undefined) {
                            $("#status-text").text(data.status ? "1" : "0");
                        } else if (data.error !== undefined) {
                            alert("Error: " + data.error);
                        }
                    },
                    error: function (xhr, status, error) {
                        alert("An error occurred: " + error);
                    }
                });
            });
        });
    </script>
    
</body>
{% endblock %}
</html>