{% load static %}
<!DOCTYPE html>
<html lang="en">
<head>
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css">
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="icon" type="image/x-icon" href="{% static 'assets/x-phy-new-logo-white.png'%}">
    <link rel="stylesheet" href="{% static 'navbar/css/navbar.css' %}">
    <link rel="stylesheet" href="{% static '/device/css/devices.css' %}">
    <link rel="stylesheet" href="{% static '/device/css/add_device.css' %}">
    <link rel="stylesheet" href="{% static '/device/css/edit_devices.css' %}">

    <script src='https://api.mapbox.com/mapbox-gl-js/v2.9.2/mapbox-gl.js'></script>
    <link href='https://api.mapbox.com/mapbox-gl-js/v2.9.2/mapbox-gl.css' rel='stylesheet' />
    <script src="https://api.mapbox.com/mapbox-gl-js/plugins/mapbox-gl-geocoder/v4.7.2/mapbox-gl-geocoder.min.js"></script>
    <link rel="stylesheet" href="https://api.mapbox.com/mapbox-gl-js/plugins/mapbox-gl-geocoder/v4.7.2/mapbox-gl-geocoder.css" type="text/css">
   <style>
        #map { position: absolute; top: 0; bottom: 0; width: 100%; }
        #map_view_bg { position: absolute; top: 0; bottom: 0; width: 100%; }
        #mapTop { position: absolute; top: 0; bottom: 0; width: 100%; }
    </style> 
    <title>x-sys</title>
</head>
<body>  
    <div class="mainSection">
        <div class="mainSidebar">
            <div class="mainMenuHeaderSection">
                <a href="{% url 'home' %}" id="pageHome" class="menuMainList">
                    <img src="{% static 'assets/dashboard.png'%}" class="menuIconImage">
                    <img src="{% static 'assets/active-dashboard.png'%}" class="menuIconImage">
                    <span>Dashboard</span>
                </a>              
                <a href="{% url 'devices' %}" id="pageDevice" class="menuMainList">
                    <img src="{% static 'assets/device.png'%}" class="menuIconImage">
                    <img src="{% static 'assets/active-device.png'%}" class="menuIconImage">
                    <span>Devices</span>
                </a>
                <a href="{% url 'malware' %}" id="malware" class="menuMainList">
                    <img src="{% static 'assets/virus.png' %}" class="menuIconImage">
                    <img src="{% static 'assets/active-virus.png' %}" class="menuIconImage">
                    <span>Malware</span>
                </a>
                <a href="{% url 'ransomware' %}" id="ransomware" class="menuMainList">
                    <img src="{% static 'assets/ransomware.png'%}" class="menuIconImage">
                    <img src="{% static 'assets/active-ransomware.png'%}" class="menuIconImage">
                    <span>Ransomware</span>
                </a>
                <a  href="{% url 'ddos' %}" id="DDoS" class="menuMainList">
                    <img src="{% static 'assets/ddos.png'%}" class="menuIconImage">
                    <img src="{% static 'assets/active-ddos.png'%}" class="menuIconImage">
                    <span>DDoS</span>
                </a>
                
                
            </div>
            <div>
                <a class="userProfileSection" href="{% url 'profile' %}">
                    <img src="{% static 'assets/userProfile.png'%}">
                    <p id="User-name">user</p>
                </a>
                <a href="{% url 'logout' %}" class="profileMenulist">Logout</a>   
            </div>
        </div>
        <div class="subsection">
            <div id="map_view_bg" style="width: calc(100% - 0px);opacity: 0.3;"></div>
            <div style="position: relative;">
                <p id="company-dashboard-title" class="company-dashboard-title">company</p>
                <div class="topMapSection">
                    <div id="mapTop" style="width: calc(100% - 0px);height:450px"></div>
                </div>
                <div class="searchSection">
                    <span class="searchIcon"><i class="fas fa-search"></i></span>
                    <input type="text" class="searchInput" placeholder="search URL, IP, domain, file hash or threat advisories"/>
                </div>
            </div>
            <div class="wrapper">
                <div class="sectionMainContent">           
                    <div class="sidebar" id="SidebarHide">
                        <div class="profile">                            
                            <h3 class="running-title">Running Proccesses</h3>
                            <pre id="running-proccesses"></pre>
                        </div>                     
                    </div>
                    <div class="container-navbar" id="MainSectionFull">
                        {% block AddDevice %}
                        {% endblock %}
                        {% block edit_device %}
                        {% endblock %}
                        {% block home %}
                        {% endblock %}
                        {% block malware %}
                        {% endblock %}
                        {% block ddos %}
                        {% endblock %}
                        {% block dma %}
                        {% endblock %}
                        {% block devices %}
                        {% endblock %}		
                        {% block ransomware %}	
                        {% endblock %}		
                        {% block profile %}	
                        {% endblock %}		
                    </div> 
                    <div class="right-sidebar" id="RightSidebarHide">
                        <div style="display:none;" class="sidebar-section-box">
                            <p id="warning-message" class="GridTitle-mysql">Ransomware detected on your database after DDoS MYSQL attack</p>
                            <div class="SeverityTLPFlex">                              
                            </div>
                            <button class="database-restore" id="database-restore">Restore</button>
                            <p id="restore-message" style="display:none; color:green;">Please wait ..... </p>
                        </div>
                        <div class="sidebar-section-box">
                            <div style="display:flex;justify-content:space-between;">
                                <svg id="alert-icon" class="alertIcon" width="105" height="106" viewBox="0 0 105 106" fill="none" xmlns="http://www.w3.org/2000/svg">
                                    <path d="M56.0025 0C57.3459 0.428495 58.7598 0.362255 60.1343 0.594097C77.0215 3.4528 89.7936 12.2794 98.3511 27.0925C102.477 34.2341 104.745 42.005 104.975 50.2582C105.538 70.5341 97.2498 86.2808 80.4371 97.5852C79.7788 98.0282 79.4497 98.0199 79.0336 97.2747C77.6405 94.7844 76.1894 92.3252 74.7176 89.8826C74.3553 89.2802 74.4009 88.9925 75.0136 88.5992C84.7158 82.4036 91.0977 73.726 93.6501 62.5189C96.8959 48.2751 93.5921 35.4885 83.9313 24.5215C76.9429 16.5892 68.0128 12.0186 57.5302 10.8221C45.3377 9.43104 34.4245 12.7369 25.0515 20.7065C16.8749 27.6597 11.8737 36.5484 10.6793 47.18C8.71274 64.678 15.2582 78.485 29.8167 88.4274C30.6385 88.9884 30.7295 89.3258 30.2141 90.1579C28.7299 92.5529 27.3306 95.0038 25.9374 97.4548C25.6249 98.0054 25.4075 98.0716 24.8569 97.7177C12.1842 89.57 4.25597 78.1393 1.06192 63.4256C0.426425 60.4944 0.122132 57.524 0 54.5307C0 53.4232 0 52.3158 0 51.2083C0.0434705 49.248 0.211143 47.2918 0.511296 45.3605C2.46954 32.7871 8.03791 22.112 17.5166 13.5752C25.3827 6.4916 34.5922 2.18388 45.0707 0.577537C46.2361 0.399515 47.4533 0.494736 48.569 0H56.0046H56.0025Z" fill="#5A8CAB"/>
                                    <path d="M31.3857 52.7988C31.6196 60.2302 34.675 66.1588 40.8581 70.3899C41.4998 70.8288 41.6489 71.1041 41.21 71.8265C39.7237 74.2609 38.3058 76.7387 36.9147 79.2289C36.54 79.8996 36.2668 79.9928 35.6023 79.5477C27.5085 74.1532 22.6046 66.6949 21.3005 57.0403C19.3568 42.6681 27.1732 29.1488 40.5124 23.5349C59.1116 15.706 80.4205 27.3354 83.9105 47.218C86.1441 59.9404 80.497 72.6028 69.5342 79.5394C68.8283 79.9866 68.5323 79.8831 68.139 79.1813C66.7272 76.6621 65.272 74.1677 63.7899 71.6878C63.4525 71.1248 63.5021 70.8722 64.0631 70.4955C70.2111 66.3658 73.5169 60.5387 73.668 53.1776C73.8937 42.2583 66.0835 33.7712 56.3274 31.9868C45.199 29.952 34.5011 37.1246 31.9756 47.8804C31.5968 49.493 31.365 51.1221 31.3877 52.7968L31.3857 52.7988Z" fill="#5A8CAB"/>
                                    <path d="M52.6363 105.739C51.1231 105.739 49.6078 105.723 48.0946 105.748C47.5709 105.756 47.3184 105.603 47.3763 105.05C47.4012 104.812 47.3805 104.57 47.3805 104.328C47.3805 90.5662 47.3743 76.8046 47.395 63.0431C47.395 62.2855 47.1962 61.828 46.5504 61.3623C42.7064 58.5863 41.2346 53.5251 42.9175 49.1387C44.6315 44.6737 48.9868 41.9392 53.7313 42.3491C57.8341 42.7051 61.5664 45.8391 62.7483 49.9191C63.9779 54.1689 62.4482 58.752 58.8443 61.3664C58.2005 61.8342 57.9997 62.3041 58.0018 63.0617C58.0225 76.8916 58.008 90.7214 58.0349 104.553C58.0349 105.46 57.861 105.828 56.8674 105.762C55.4639 105.669 54.048 105.739 52.6383 105.739H52.6363Z" fill="#5B8DAB"/>
                                </svg>
                                <button id="alertButton" class="shadow-button">Restore</button>
                            </div>
                            <p id="alertMessage" class="alertMessage" style="padding-top:10px;color:red;"></p>
                            <p id="successMessage" class="successMessage" style="padding-top:10px;color:green;display:none">The password has been successfully recovered following the recent DMA attack</p>
                        </div>
                        <div class="sidebar-section-box">
                            <p class="GridTitle">Server Time stamp</p>
                            <div class="SeverityTLPFlex">                              
                            </div>
                            <div class="detailsDescription">
                                <p class="subDetails">Category: <span>IP Address</span></p>
                                <p class="subDetails">Origins: <span>External</span></p>
                            </div>
                            <div>
                                <p class="subDetails"><span id="singaporetext">Singapore server OS patch pending</span></p>
                                <p class="subDetails">Date : <span id="timezone_date"></span></p>
                                {% comment %} <p class="subDetails">Last Seen: <span>May 5, 2022</span></p> {% endcomment %}
                            </div>
                        </div>
                        <div class="sidebar-section-box">
                            <svg class="signalIcon" width="105" height="106" viewBox="0 0 105 106" fill="none" xmlns="http://www.w3.org/2000/svg">
                                <path d="M56.0025 0C57.3459 0.428495 58.7598 0.362255 60.1343 0.594097C77.0215 3.4528 89.7936 12.2794 98.3511 27.0925C102.477 34.2341 104.745 42.005 104.975 50.2582C105.538 70.5341 97.2498 86.2808 80.4371 97.5852C79.7788 98.0282 79.4497 98.0199 79.0336 97.2747C77.6405 94.7844 76.1894 92.3252 74.7176 89.8826C74.3553 89.2802 74.4009 88.9925 75.0136 88.5992C84.7158 82.4036 91.0977 73.726 93.6501 62.5189C96.8959 48.2751 93.5921 35.4885 83.9313 24.5215C76.9429 16.5892 68.0128 12.0186 57.5302 10.8221C45.3377 9.43104 34.4245 12.7369 25.0515 20.7065C16.8749 27.6597 11.8737 36.5484 10.6793 47.18C8.71274 64.678 15.2582 78.485 29.8167 88.4274C30.6385 88.9884 30.7295 89.3258 30.2141 90.1579C28.7299 92.5529 27.3306 95.0038 25.9374 97.4548C25.6249 98.0054 25.4075 98.0716 24.8569 97.7177C12.1842 89.57 4.25597 78.1393 1.06192 63.4256C0.426425 60.4944 0.122132 57.524 0 54.5307C0 53.4232 0 52.3158 0 51.2083C0.0434705 49.248 0.211143 47.2918 0.511296 45.3605C2.46954 32.7871 8.03791 22.112 17.5166 13.5752C25.3827 6.4916 34.5922 2.18388 45.0707 0.577537C46.2361 0.399515 47.4533 0.494736 48.569 0H56.0046H56.0025Z" fill="#5A8CAB"/>
                                <path d="M31.3857 52.7988C31.6196 60.2302 34.675 66.1588 40.8581 70.3899C41.4998 70.8288 41.6489 71.1041 41.21 71.8265C39.7237 74.2609 38.3058 76.7387 36.9147 79.2289C36.54 79.8996 36.2668 79.9928 35.6023 79.5477C27.5085 74.1532 22.6046 66.6949 21.3005 57.0403C19.3568 42.6681 27.1732 29.1488 40.5124 23.5349C59.1116 15.706 80.4205 27.3354 83.9105 47.218C86.1441 59.9404 80.497 72.6028 69.5342 79.5394C68.8283 79.9866 68.5323 79.8831 68.139 79.1813C66.7272 76.6621 65.272 74.1677 63.7899 71.6878C63.4525 71.1248 63.5021 70.8722 64.0631 70.4955C70.2111 66.3658 73.5169 60.5387 73.668 53.1776C73.8937 42.2583 66.0835 33.7712 56.3274 31.9868C45.199 29.952 34.5011 37.1246 31.9756 47.8804C31.5968 49.493 31.365 51.1221 31.3877 52.7968L31.3857 52.7988Z" fill="#5A8CAB"/>
                                <path d="M52.6363 105.739C51.1231 105.739 49.6078 105.723 48.0946 105.748C47.5709 105.756 47.3184 105.603 47.3763 105.05C47.4012 104.812 47.3805 104.57 47.3805 104.328C47.3805 90.5662 47.3743 76.8046 47.395 63.0431C47.395 62.2855 47.1962 61.828 46.5504 61.3623C42.7064 58.5863 41.2346 53.5251 42.9175 49.1387C44.6315 44.6737 48.9868 41.9392 53.7313 42.3491C57.8341 42.7051 61.5664 45.8391 62.7483 49.9191C63.9779 54.1689 62.4482 58.752 58.8443 61.3664C58.2005 61.8342 57.9997 62.3041 58.0018 63.0617C58.0225 76.8916 58.008 90.7214 58.0349 104.553C58.0349 105.46 57.861 105.828 56.8674 105.762C55.4639 105.669 54.048 105.739 52.6383 105.739H52.6363Z" fill="#5B8DAB"/>
                            </svg>

                            <p class="MyRelatedText">My Related Incidents</p>
                            <p class="highText">Low</p>
                            <p class="IncidentsText">3 <span>incidents</span></p>
                            <p class="daysCountMonth">30 days</p>
                        </div>
                        <div class="sidebar-section-box" id="RemoveMap">
                            <div class="ioc-status-Section">
                                <p class="GridTitle">IOC Status</p>                               
                            </div>
                            <div class="mapSectionMove">                               
                                <div id="map"></div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div id="userDeviceIdDisplay"></div>
        <div id="clickedDeviceIdDisplay"></div>
    </div>    
    <script src="https://cdnjs.cloudflare.com/ajax/libs/moment-timezone/0.5.34/moment-timezone-with-data.min.js"></script>
    <script src="{% static 'navbar/js/jquery-3.7.0.js' %}"></script>
    <script src="{% static 'navbar/js/navbar.js' %}"></script>
    <script src="{% static 'navbar/js/fetch_user.js' %}"></script>
    <script src="{% static 'navbar/js/map_view.js' %}"></script>
    <script src="{% static 'navbar/js/dma-alert.js' %}"></script>
    <script src="{% static 'navbar/js/mysql-timer.js' %}"></script>
    <!-- <script>
     document.addEventListener('DOMContentLoaded', function() {
    // Get the stored logged-in user's device ID
    var userDeviceId = window.localStorage.getItem("userDeviceId");
    console.log('Logged-in User Device ID:', userDeviceId);

    // If the user device ID exists, proceed with updating the link
    if (userDeviceId) {
        var ddosLink = document.getElementById('DDoS');
        var currentHref = ddosLink.getAttribute('href');
        console.log('Current href before update:', currentHref);
        
        // Retrieve the clicked device ID from localStorage
        var clickedDeviceId = window.localStorage.getItem("deviceId");
        console.log('Clicked Device ID retrieved:', clickedDeviceId);

        // If a clicked device ID exists, we will compare it with the logged-in user device ID
        if (clickedDeviceId) {
            var loggedInUserDeviceId = window.localStorage.getItem("loggedInUserDeviceId");
            console.log('Logged-in User Device ID from localStorage:', loggedInUserDeviceId);

            if (clickedDeviceId === loggedInUserDeviceId) {
                // If the clicked device ID matches the logged-in user's device ID, update the href
                var updatedHref = currentHref.replace('/ddos/0/', `/ddos/${clickedDeviceId}/`);
                ddosLink.setAttribute('href', updatedHref);
                console.log('Updated href with clicked device ID:', updatedHref);
            } else {
                // If the clicked device ID doesn't match, use the logged-in user's device ID
                var updatedHref = currentHref.replace('/ddos/0/', `/ddos/${userDeviceId}/`);
                ddosLink.setAttribute('href', updatedHref);
                console.log('Updated href with logged-in user device ID:', updatedHref);
            }
        } else {
            // If no clicked device ID, use the logged-in user's device ID
            var updatedHref = currentHref.replace('/ddos/0/', `/ddos/${userDeviceId}/`);
            ddosLink.setAttribute('href', updatedHref);
            console.log('Updated href with logged-in user device ID (no clicked device):', updatedHref);
        }
    } else {
        console.error('No user device ID found in localStorage.');
    }

    // Optional: Display clicked device ID for debugging (update element with id 'clickedDeviceIdDisplay')
    var clickedDeviceId = window.localStorage.getItem("deviceId");
    if (clickedDeviceId) {
        document.getElementById('clickedDeviceIdDisplay').innerText = `Clicked Device ID: ${clickedDeviceId}`;
        console.log('Clicked Device ID:', clickedDeviceId);
    } else {
        document.getElementById('clickedDeviceIdDisplay').innerText = 'No device clicked yet.';
        console.log('No clicked device ID found.');
    }
});

    </script> -->
    
    

    
    <script>
        $(document).ready(function() {
            $("#database-restore").click(function() {
                // Show the "Please wait..." message immediately
                $("#restore-message").show();
                $("#database-restore").hide();
                $("#warning-message").hide();

                $.ajax({
                    url: "{% url 'restore-database' %}",
                    type: "POST",
                    headers: {
                        'X-CSRFToken': $('meta[name="csrf-token"]').attr('content')
                    },
                    success: function(response) {
                        if (response.status === "success") {
                            setTimeout(function() {
                                $("#restore-message").text("Database restored successfully!");
                                setTimeout(function() {
                                    location.reload(); // Reload the page after 10 seconds
                                }, 10000);
                            }, 0);
                        } else {
                            alert("Error: " + response.message);
                        }
                    },
                    error: function(xhr, status, error) {
                        alert("AJAX error: " + error);
                    }
                });
            });

            $("#check-value").click(function() {
                $.ajax({
                    url: "{% url 'check-restore-value' %}",
                    type: "GET",
                    success: function(response) {
                        if (response.status === "success") {
                            let statusMessage = response.value == "1" ? "Database restored successfully!" : "Database restoration pending";
                            $("#value-message").text("Current status: " + statusMessage).show();
                        } else {
                            alert("Error: " + response.message);
                        }
                    },
                    error: function(xhr, status, error) {
                        alert("AJAX error: " + error);
                    }
                });
            });
        });
    </script>
    
    <script>
        // Fetch the user details and device pods from the API
        fetch('/user-details-and-device-pods/')
        .then(response => response.json())
        .then(data => {
            console.log(data);
            // Example: Update the DOM with the user details and device pods
            document.getElementById('User-name').textContent = data.user_details.email;
            document.getElementById('company-dashboard-title').textContent = data.user_details.company_name;
            
            // Example: Display device pods
            const podList = document.getElementById('pod-list');
            data.device_pods.forEach(pod => {
                let listItem = document.createElement('li');
                listItem.textContent = pod.pod;
                podList.appendChild(listItem);
            });
        })
        .catch(error => console.error('Error fetching data:', error));
              
    </script>
    {% comment %} <script>
        $(document).ready(function() {
            $("#database-restore").click(function() {
                // Show the "Please wait..." message immediately
                $("#restore-message").show();
                $("#database-restore").hide();
                $("#warning-message").hide();

                $.ajax({
                    url: "{% url 'restore-database' %}",
                    type: "POST",
                    headers: {
                        'X-CSRFToken': $('meta[name="csrf-token"]').attr('content')
                    },
                    success: function(response) {
                        if (response.status === "success") {
                            setTimeout(function() {
                                $("#restore-message").text("Database restored successfully!");
                            }, 10000); // Update the message after 10 seconds
                        } else {
                            alert("Error: " + response.message);
                        }
                    },
                    error: function(xhr, status, error) {
                        alert("AJAX error: " + error);
                    }
                });
            });
        });
    </script> {% endcomment %}
    
</body>
</html>