{% extends 'navbar/navbar.html' %}
{% load static %}
{% block malware %}
<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <link rel="stylesheet" href="{% static 'malware/css/malware.css' %}">
        <link rel="stylesheet" href="{% static 'malware/css/bubbleMalware.css' %}">
        <title>malware - x-sys</title>
        <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
        <script src="https://cdn.jsdelivr.net/npm/apexcharts"></script>
    </head>    
    <body>    
        <div class="tabSection">
            <div class="tabMalwareTitle">
                <p class="tabSectionMalware tabSectionActiveMalware">Alerts and Alarms</p>
                <!-- <p class="tabSectionMalware ">Alerts and Alarms</p> -->
                <p class="tabSectionMalware">Malware Alerts</p>
                <p class="tabSectionMalware">AI training Parameter graphs</p>
                <p class="tabSectionMalware">AI model performance</p>
                <p class="tabSectionMalware">Log Activity</p>
            </div>
            <div class="tabDetailsMainSection">
                <div class="tabSectionDetails tabSectionActiveDetails">
                    <ul style="padding: 1em; color:#ffffff; text-align:center;">
                        {% for file in files_list %}
                            <li>{{ file }}</li>
                        {% empty %}
                            <li>No Alerts and Alarms for malware detected</li>
                        {% endfor %}
                    </ul>                   
                    
                </div>
                <div class="tabSectionDetails" >
                    <div style="display: flex; align-items: center; justify-content: center;">
                        {% if frequency %}
                            <table style="border-collapse: collapse; margin: 20px; display: flex; align-items: center; justify-content: center;">
                                <tr style="background-color: #f2f2f2;">
                                    <th style="border: 1px solid #dddddd; text-align: left; color: black; padding: 8px;">Class</th>
                                    <th style="border: 1px solid #dddddd; text-align: left; color: black; padding: 8px;">Frequency</th>
                                </tr>
                                {% for class, frequency in frequency.items %}
                                <tr>
                                    <td style="border: 1px solid #dddddd; text-align: left; padding: 8px;">{{ class }}</td>
                                    <td style="border: 1px solid #dddddd; text-align: left; padding: 8px;">{{ frequency }}</td>
                                </tr>
                                {% endfor %}
                            </table>
                        {% else %}
                            <p>No alerts for malware detected.</p>
                        {% endif %}
                    </div>
                </div>
                <div class="tabSectionDetails">
                    <div class="chartOpenClose">
                        <div class="tabSectionHeader">
                            <p class="tabTitle">Malware Class Identification</p>
                            <span class="svgIcon">
                                <svg width="50" height="50" viewBox="0 0 50 50" fill="none" xmlns="http://www.w3.org/2000/svg">
                                    <path d="M0 25C0 11.1929 11.1929 0 25 0V0C38.8071 0 50 11.1929 50 25V25C50 38.8071 38.8071 50 25 50V50C11.1929 50 0 38.8071 0 25V25Z" fill="#0C7DB1" fill-opacity="0.7"/>
                                    <path d="M14 20L25 31L36 20" stroke="white" stroke-width="4" stroke-linecap="round"/>
                                </svg>
                            </span>
                        </div>
                        <div id="barMalwareChart" style="width: 100%; height:450px;"></div>
                    </div>
                    <div class="chartOpenClose">
                        <div class="tabSectionHeader">
                            <p class="tabTitle">Identifying malware class type while validating new data set</p>
                            <span class="svgIcon">
                                <svg width="50" height="50" viewBox="0 0 50 50" fill="none" xmlns="http://www.w3.org/2000/svg">
                                    <path d="M0 25C0 11.1929 11.1929 0 25 0V0C38.8071 0 50 11.1929 50 25V25C50 38.8071 38.8071 50 25 50V50C11.1929 50 0 38.8071 0 25V25Z" fill="#0C7DB1" fill-opacity="0.7"/>
                                    <path d="M14 20L25 31L36 20" stroke="white" stroke-width="4" stroke-linecap="round"/>
                                </svg>
                            </span>
                        </div>
                        <div class="mainCalendarSection">
                            <div style="display: flex; justify-content: center; align-items: center;">
                            <canvas id="myCanvas" style="width: 90%;height:30% ;"></canvas>    
                            </div>                        
                            <!-- <div class="chartLabelTitle">
                                <p class="malwareClassRamnit"><span></span>Ramnit</p>
                                <p class="malwareClassLollipop"><span></span>Lollipop</p>
                                <p class="malwareClassKelihos_ver3"><span></span>Kelihos_ver3</p>
                                <p class="malwareClassVundo"><span></span>Vundo</p>
                                <p class="malwareClassSimda"><span></span>Simda</p>
                                <p class="malwareClassTracur"><span></span>Tracur</p>
                                <p class="malwareClassKelihos_ver1"><span></span>Kelihos_ver1</p>
                                <p class="malwareClassObfuscator"><span></span>Obfuscator.AYC</p>
                                <p class="malwareClassGatak"><span></span>Gatak</p>
                            </div>
                            <div class="bubbleChartSection">
                                <div class="rowSection">
                                    <div class="bubbleChartRowLine"></div>
                                    <div class="bubbleChartRowLine"></div>
                                    <div class="bubbleChartRowLine"></div>
                                    <div class="bubbleChartRowLine"></div>
                                </div>
                                <div class="columnSection">
                                    <div class="bubbleChartColumnLine"></div>
                                    <div class="bubbleChartColumnLine"></div>
                                    <div class="bubbleChartColumnLine"></div>
                                    <div class="bubbleChartColumnLine"></div>
                                    <div class="bubbleChartColumnLine"></div>
                                    <div class="bubbleChartColumnLine"></div>
                                    <div class="bubbleChartColumnLine"></div>
                                    <div class="bubbleChartColumnLine"></div>
                                </div>
                                <div class="bottomTextSection" id="bubbleBottomTextChart">
                                    <p>68</p>
                                    <p>70</p>
                                    <p>72</p>
                                    <p>74</p>
                                    <p>76</p>
                                    <p>78</p>
                                    <p>80</p>
                                    <p>82</p>
                                </div>
                                <div class="bubble bubble-animation">
                                    <span></span>
                                    <span></span>
                                    <span></span>
                                    <span></span>
                                    <span></span>
                                    <span></span>
                                    <span></span>
                                </div>
                                <div class="bubble ColorThree bubble-animation">
                                    <span></span>
                                    <span></span>
                                    <span></span>
                                    <span></span>
                                    <span></span>
                                    <span></span>
                                    <span></span>
                                </div>
                                <div class="bubble AnonymousHit bubble-animation">
                                    <span></span>
                                    <span></span>
                                    <span></span>
                                    <span></span>
                                    <span></span>
                                    <span></span>
                                    <span></span>
                                </div>
                                <div class="bubble bubble-animation">
                                    <span></span>
                                    <span></span>
                                    <span></span>
                                    <span></span>
                                    <span></span>
                                    <span></span>
                                    <span></span>
                                </div>
                                <div class="bubble ColorFour bubble-animation">
                                    <span></span>
                                    <span></span>
                                    <span></span>
                                    <span></span>
                                    <span></span>
                                    <span></span>
                                    <span></span>
                                </div>
                                <div class="bubble colorNine bubble-animation">
                                    <span></span>
                                    <span></span>
                                    <span></span>
                                    <span></span>
                                    <span></span>
                                    <span></span>
                                    <span></span>
                                </div>
                                <div class="bubble colorEight bubble-animation">
                                    <span></span>
                                    <span></span>
                                    <span></span>
                                    <span></span>
                                    <span></span>
                                    <span></span>
                                    <span></span>
                                </div>
                                <div class="bubble ColorFive bubble-animation">
                                    <span></span>
                                    <span></span>
                                    <span></span>
                                    <span></span>
                                    <span></span>
                                    <span></span>
                                    <span></span>
                                </div>
                                <div class="bubble AnonymousHit bubble-animation">
                                    <span></span>
                                    <span></span>
                                    <span></span>
                                    <span></span>
                                    <span></span>
                                    <span></span>
                                    <span></span>
                                </div>
                                <div class="bubble ColorSix bubble-animation">
                                    <span></span>
                                    <span></span>
                                    <span></span>
                                    <span></span>
                                    <span></span>
                                    <span></span>
                                    <span></span>
                                </div>
                                <div class="bubble colorSeven bubble-animation">
                                    <span></span>
                                    <span></span>
                                    <span></span>
                                    <span></span>
                                    <span></span>
                                    <span></span>
                                    <span></span>
                                </div>
                            </div> -->
                        </div>
                    </div>                    
                    <div class="chartOpenClose">
                        <div class="tabSectionHeader">
                            <p class="tabTitle">Distribution of training parameters in dataset</p>
                            <span class="svgIcon">
                                <svg width="50" height="50" viewBox="0 0 50 50" fill="none" xmlns="http://www.w3.org/2000/svg">
                                    <path d="M0 25C0 11.1929 11.1929 0 25 0V0C38.8071 0 50 11.1929 50 25V25C50 38.8071 38.8071 50 25 50V50C11.1929 50 0 38.8071 0 25V25Z" fill="#0C7DB1" fill-opacity="0.7"/>
                                    <path d="M14 20L25 31L36 20" stroke="white" stroke-width="4" stroke-linecap="round"/>
                                </svg>
                            </span>
                        </div>
                        <div id="DistributionTrainData" style="width: 100%; height: 500px;"></div>
                    </div>
                    <div class="chartOpenClose">
                        <div class="tabSectionHeader">
                            <p class="tabTitle">Distribution of testing parameters in the dataset</p>
                            <span class="svgIcon">
                                <svg width="50" height="50" viewBox="0 0 50 50" fill="none" xmlns="http://www.w3.org/2000/svg">
                                    <path d="M0 25C0 11.1929 11.1929 0 25 0V0C38.8071 0 50 11.1929 50 25V25C50 38.8071 38.8071 50 25 50V50C11.1929 50 0 38.8071 0 25V25Z" fill="#0C7DB1" fill-opacity="0.7"/>
                                    <path d="M14 20L25 31L36 20" stroke="white" stroke-width="4" stroke-linecap="round"/>
                                </svg>
                            </span>
                        </div>
                        <div id="DistributionTrainTwoData" style="width: 100%; height: 500px;"></div>
                    </div>
                    <div class="chartOpenClose">
                        <div class="tabSectionHeader">
                            <p class="tabTitle">Distribution of validation parameters in the dataset</p>
                            <span class="svgIcon">
                                <svg width="50" height="50" viewBox="0 0 50 50" fill="none" xmlns="http://www.w3.org/2000/svg">
                                    <path d="M0 25C0 11.1929 11.1929 0 25 0V0C38.8071 0 50 11.1929 50 25V25C50 38.8071 38.8071 50 25 50V50C11.1929 50 0 38.8071 0 25V25Z" fill="#0C7DB1" fill-opacity="0.7"/>
                                    <path d="M14 20L25 31L36 20" stroke="white" stroke-width="4" stroke-linecap="round"/>
                                </svg>
                            </span>
                        </div>
                         <div id="DistributionTrainThreeData" style="width: 100%; height: 500px;"></div>
                    </div>
                </div>
                <div class="tabSectionDetails">
                    <div class="chartOpenClose">
                        <div class="tabSectionHeader">
                            <p class="tabTitle">Confusion Matrix of model performance</p>
                            <span class="svgIcon">
                                <svg width="50" height="50" viewBox="0 0 50 50" fill="none" xmlns="http://www.w3.org/2000/svg">
                                    <path d="M0 25C0 11.1929 11.1929 0 25 0V0C38.8071 0 50 11.1929 50 25V25C50 38.8071 38.8071 50 25 50V50C11.1929 50 0 38.8071 0 25V25Z" fill="#0C7DB1" fill-opacity="0.7"/>
                                    <path d="M14 20L25 31L36 20" stroke="white" stroke-width="4" stroke-linecap="round"/>
                                </svg>
                            </span>
                        </div>
                        <div class="ConfusionMatrix" id="ConfusionMatrix" style="width: 90%; height: 450px;"></div>  

                    </div>                    
                    <div class="chartOpenClose">
                        <div class="tabSectionHeader">
                            <p class="tabTitle">Error measure</p>
                            <span class="svgIcon">
                                <svg width="50" height="50" viewBox="0 0 50 50" fill="none" xmlns="http://www.w3.org/2000/svg">
                                    <path d="M0 25C0 11.1929 11.1929 0 25 0V0C38.8071 0 50 11.1929 50 25V25C50 38.8071 38.8071 50 25 50V50C11.1929 50 0 38.8071 0 25V25Z" fill="#0C7DB1" fill-opacity="0.7"/>
                                    <path d="M14 20L25 31L36 20" stroke="white" stroke-width="4" stroke-linecap="round"/>
                                </svg>
                            </span>
                        </div>
                        <div id="Errormeasure" style="width: 100%; height: 450px; padding:10px"></div>  <!-- PredictedChart.js-->                          
                    </div>
                </div>
                <div class="tabSectionDetails">
                    <pre id="MalwareLogActivity">

                        {% for line in logs %}
                        <p>{{line}}</p>
                        {% endfor %}

                    </pre>

                </div>
            </div>
        </div>
   
        <h2 style="display:none;" class="ipNumber"></h2>    
        <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
        <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
        <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
        <script src="{% static 'malware/js/PredictedChart.js' %}"></script>
        <script type="application/json" id="class-frequency-data">{{ class_frequency|safe }}</script>
        
        <script type="text/javascript">
            google.charts.load("current", { packages: ['corechart'] });
            google.charts.setOnLoadCallback(drawChart);
    
            function drawChart() {
                // Use the Django context variable to populate the frequencies
                var classData = document.getElementById('class-frequency-data').textContent
                classData = classData.replace(/'/g, '"');
                var classFrequency = JSON.parse(classData);
                
                var data = google.visualization.arrayToDataTable([
                    ["Element", "Density", { role: "style" }],
                    ["Ramnit", parseInt(classFrequency['Ramnit']), "#000080"],
                    ["Lollipop", parseInt(classFrequency['LolliPop']), "#0000ff"],
                    ["Kelihos_ver3", parseInt(classFrequency['Kelihos_ver3']), "#0081ff"],
                    ["Vundo", parseInt(classFrequency['Vundo']), "#17ffe2"],
                    ["Simda", parseInt(classFrequency['Simda']), "#7bff7b"],
                    ["Tracur", parseInt(classFrequency['Tracur']), "#e3ff15"],
                    ["Kelihos_ver1", parseInt(classFrequency['Kelihos_ver1"']), "#ff9801"],
                    ["Obfuscator.ACY", parseInt(classFrequency['Obfuscator.ACY']), "#ff2200"],
                    ["Gatak", parseInt(classFrequency['Gatak']), "#810000"],
                ]);
    
                var view = new google.visualization.DataView(data);
                view.setColumns([0, 1, 2]);
    
                var options = {
                    title: "",
                    height: 430,
                    width: 900,
                    legend: { position: "none" },
                    backgroundColor: '#0c212b',
                    tooltip: { trigger: 'none' },
                    vAxis: {
                        title: 'Count',
                        viewWindow: {
                            min: 0,
                            max: 200
                        },
                        ticks: [0, 20, 40, 60, 80, 100, 120, 140, 160, 180, 200],
                        // gridlines: { count: 11 },
                        // textStyle: { color: '#ffffff',font_size: 12 }
                    },
                    hAxis: { 
                        title: 'Class',
                        slantedText: true, // Tilt the text to prevent collisions
                     },
                    legend: { position: 'none' },
                };
    
                var chart = new google.visualization.ColumnChart(document.getElementById("barMalwareChart"));
                chart.draw(view, options);
            }
        </script>
        <script type="application/json" id="class-average-data">{{ average|safe }}</script>
        <script>

                var classData = document.getElementById('class-average-data').textContent
                classData = classData.replace(/'/g, '"');
                var malwareData = JSON.parse(classData);
            
    
            const datasets = Object.entries(malwareData).map(([label, radius], index) => ({
                label,
                data: [{ x: index + 1, y: 5, r: radius * 50 }], // Adjust 'y' value as needed
                backgroundColor: `rgba(${Math.floor(Math.random() * 255)}, ${Math.floor(Math.random() * 255)}, ${Math.floor(Math.random() * 255)}, 0.6)`,
                borderColor: `rgba(${Math.floor(Math.random() * 255)}, ${Math.floor(Math.random() * 255)}, ${Math.floor(Math.random() * 255)}, 1)`,
                borderWidth: 1,
            }));
    
            const data = {
                datasets
            };
    
            const config = {
                type: 'bubble',
                data: data,
                options: {
                    scales: {
                        x: {
                            title: {
                                display: true,
                                text: 'Malware Class'
                            },
                            ticks: {
                                callback: function(value, index, values) {
                                    return Object.keys(malwareData)[index] || value;
                                }
                            }
                        },
                        y: {
                            title: {
                                display: true,
                                text: 'Y Axis'
                            },
                            ticks: {
                                display: false, // Add this line to hide the Y axis labels
                                beginAtZero: true
                            }
                            
                        }
                    },
                    plugins: {
                        tooltip: {
                            callbacks: {
                                label: function(tooltipItem) {
                                    return `${tooltipItem.dataset.label}: ${tooltipItem.raw.r}`;
                                }
                            }
                        }
                    },
                    animation: {
                        duration: 1000,
                        easing: 'easeOutBounce',
                    }
                }
            };
    
            const ctx = document.getElementById('myCanvas').getContext('2d');
            const myChart = new Chart(ctx, config);
        </script>
        <!-- <script src="{% static 'malware/js/barMalwareChart.js' %}"></script> -->
        <!-- <script src="{% static 'malware/js/MalwareBubbleChart.js' %}"></script>         -->
        <script src="{% static 'malware/js/DistributionTrainData.js' %}"></script>
        <script src="{% static 'malware/js/DistributionTrainTwoData.js' %}"></script>
        <script src="{% static 'malware/js/DistributionTrainThreeData.js' %}"></script>
        <script src="{% static 'malware/js/ConfusionMatrix.js' %}"></script>
        <!-- <script src="{% static 'malware/js/log-Activity.js' %}"></script> -->
        <script src="{% static 'malware/js/malware.js' %}"></script>
        <script src="{% static 'malware/js/bubble.js' %}"></script>
    </body>
{% endblock %}
</html>