<!DOCTYPE html>
<html lang="en">
<head>
  <!--#include file="./includes/header.asp"-->
  <!--#include file="./includes/sql.asp"-->
</head>

<%
	theme = Request.Cookies("theme")
	IF theme = "" THEN
		theme="bg-theme1"
	END IF
%>
<body class="bg-theme <%Response.Write(theme)%>">

<!-- start loader -->
   <div id="pageloader-overlay" class="visible incoming"><div class="loader-wrapper-outer"><div class="loader-wrapper-inner" ><div class="loader"></div></div></div></div>
   <!-- end loader -->
<!-- Start wrapper-->
 <div id="wrapper">
  <!--#include file="./includes/leftsidebar.asp"-->
<!--Start topbar header-->
  <!--#include file="./includes/topbarheader.asp"-->
<!--End topbar header-->
<div class="clearfix"></div>
  <div class="content-wrapper">
      <div class="row">
        <div class="col-xl-auto">
          <div class="card">
            <div class="card-body">
              <div style="display:flex; justify-content:space-between; align-items:center; margin-bottom:15px;">
                <h5 class="card-title" style="margin:0;">
                  <a href="./network_map.asp" target="_blank"><i class='zmdi zmdi-map' title='Show Network Map'></i></a>&nbsp&nbsp&nbsp&nbsp;Network Devices
                </h5>
                <div class="btn-group">
                  <button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">
                    <i class="zmdi zmdi-plus-circle"></i> Add Device
                  </button>
                  <div class="dropdown-menu">
                    <a class="dropdown-item" href="deviceidf.asp?id=0"><i class="zmdi zmdi-city-alt"></i> Add IDF</a>
                    <a class="dropdown-item" href="deviceserver.asp?id=0"><i class="zmdi zmdi-storage"></i> Add Server</a>
                    <a class="dropdown-item" href="deviceswitch.asp?id=0"><i class="zmdi zmdi-device-hub"></i> Add Switch</a>
                    <a class="dropdown-item" href="devicecamera.asp?id=0"><i class="zmdi zmdi-videocam"></i> Add Camera</a>
                    <a class="dropdown-item" href="deviceaccesspoint.asp?id=0"><i class="zmdi zmdi-wifi"></i> Add Access Point</a>
                    <a class="dropdown-item" href="addprinter.asp"><i class="zmdi zmdi-print"></i> Add Printer</a>
                  </div>
                </div>
              </div>

              <!-- Filter Tabs -->
              <%
              Dim filterType
              filterType = Request.QueryString("filter")
              If filterType = "" Then filterType = "all"
              %>
              <ul class="nav nav-tabs" style="margin-bottom:20px;">
                <li class="nav-item">
                  <a class="nav-link <%If filterType="all" Then Response.Write("active")%>" href="network_devices.asp?filter=all">
                    All Devices
                  </a>
                </li>
                <li class="nav-item">
                  <a class="nav-link <%If filterType="Access Point" Then Response.Write("active")%>" href="network_devices.asp?filter=Access Point">
                    <i class="zmdi zmdi-wifi"></i> Access Points
                  </a>
                </li>
                <li class="nav-item">
                  <a class="nav-link <%If filterType="Camera" Then Response.Write("active")%>" href="network_devices.asp?filter=Camera">
                    <i class="zmdi zmdi-videocam"></i> Cameras
                  </a>
                </li>
                <li class="nav-item">
                  <a class="nav-link <%If filterType="IDF" Then Response.Write("active")%>" href="network_devices.asp?filter=IDF">
                    <i class="zmdi zmdi-city-alt"></i> IDFs
                  </a>
                </li>
                <li class="nav-item">
                  <a class="nav-link <%If filterType="Printer" Then Response.Write("active")%>" href="network_devices.asp?filter=Printer">
                    <i class="zmdi zmdi-print"></i> Printers
                  </a>
                </li>
                <li class="nav-item">
                  <a class="nav-link <%If filterType="Server" Then Response.Write("active")%>" href="network_devices.asp?filter=Server">
                    <i class="zmdi zmdi-storage"></i> Servers
                  </a>
                </li>
                <li class="nav-item">
                  <a class="nav-link <%If filterType="Switch" Then Response.Write("active")%>" href="network_devices.asp?filter=Switch">
                    <i class="zmdi zmdi-device-hub"></i> Switches
                  </a>
                </li>
              </ul>

			  <div class="table-responsive">
              <table class="table table-hover">
                <thead>
                  <tr>
<%
' Render table headers based on filter type
If filterType = "IDF" Then
    ' IDF columns: Location, Name, Description
    Response.Write("<th scope='col'><i class='zmdi zmdi-pin'></i></th>")
    Response.Write("<th scope='col'>Name</th>")
    Response.Write("<th scope='col'>Description</th>")
ElseIf filterType = "Server" Or filterType = "Switch" Then
    ' Server/Switch columns: Location, Name, Vendor, Model, Serial, IP Address, FQDN, Description
    Response.Write("<th scope='col'><i class='zmdi zmdi-pin'></i></th>")
    Response.Write("<th scope='col'>Name</th>")
    Response.Write("<th scope='col'>Vendor</th>")
    Response.Write("<th scope='col'>Model</th>")
    Response.Write("<th scope='col'>Serial</th>")
    Response.Write("<th scope='col'>IP Address</th>")
    Response.Write("<th scope='col'>FQDN</th>")
    Response.Write("<th scope='col'>Description</th>")
ElseIf filterType = "Camera" Then
    ' Camera columns: Location, Name, IDF, Vendor, Model, MAC Address, IP Address, FQDN
    Response.Write("<th scope='col'><i class='zmdi zmdi-pin'></i></th>")
    Response.Write("<th scope='col'>Name</th>")
    Response.Write("<th scope='col'>IDF</th>")
    Response.Write("<th scope='col'>Vendor</th>")
    Response.Write("<th scope='col'>Model</th>")
    Response.Write("<th scope='col'>MAC Address</th>")
    Response.Write("<th scope='col'>IP Address</th>")
    Response.Write("<th scope='col'>FQDN</th>")
ElseIf filterType = "Access Point" Or filterType = "Printer" Then
    ' Access Point/Printer columns: Location, Name, Vendor, Model, IP Address, FQDN
    Response.Write("<th scope='col'><i class='zmdi zmdi-pin'></i></th>")
    Response.Write("<th scope='col'>Name</th>")
    Response.Write("<th scope='col'>Vendor</th>")
    Response.Write("<th scope='col'>Model</th>")
    Response.Write("<th scope='col'>IP Address</th>")
    Response.Write("<th scope='col'>FQDN</th>")
Else
    ' All devices: Location, Type, Name, Vendor, Model, Serial, IP Address, Description
    Response.Write("<th scope='col'><i class='zmdi zmdi-pin'></i></th>")
    Response.Write("<th scope='col'>Type</th>")
    Response.Write("<th scope='col'>Name</th>")
    Response.Write("<th scope='col'>Vendor</th>")
    Response.Write("<th scope='col'>Model</th>")
    Response.Write("<th scope='col'>Serial</th>")
    Response.Write("<th scope='col'>IP Address</th>")
    Response.Write("<th scope='col'>Description</th>")
End If
%>
                  </tr>
                </thead>
                <tbody>

<%
	' Build query based on filter
	Dim strSQL
	If filterType = "all" Then
		strSQL = "SELECT * FROM vw_network_devices WHERE isactive = 1 ORDER BY device_type, device_name"
	Else
		' Filter by specific type
		strSQL = "SELECT * FROM vw_network_devices WHERE device_type = '" & Replace(filterType, "'", "''") & "' AND isactive = 1 ORDER BY device_name"
	End If

	Dim rs
	Set rs = objConn.Execute(strSQL)

	If Not rs.EOF Then
		Do While Not rs.EOF
			' Determine badge style and icon based on device type (using network_map legend colors)
			Dim badgeStyle, iconClass, detailUrl
			Select Case rs("device_type")
				Case "IDF"
					badgeStyle = "background:#FF9800; color:#fff; padding:5px 10px; border-radius:4px; font-weight:500;"
					iconClass = "zmdi-city-alt"
					detailUrl = "displaymachine.asp?machineid=" & rs("device_id")
				Case "Server"
					badgeStyle = "background:#607D8B; color:#fff; padding:5px 10px; border-radius:4px; font-weight:500;"
					iconClass = "zmdi-storage"
					detailUrl = "displaymachine.asp?machineid=" & rs("device_id")
				Case "Switch"
					badgeStyle = "background:#9C27B0; color:#fff; padding:5px 10px; border-radius:4px; font-weight:500;"
					iconClass = "zmdi-device-hub"
					detailUrl = "displaymachine.asp?machineid=" & rs("device_id")
				Case "Camera"
					badgeStyle = "background:#F44336; color:#fff; padding:5px 10px; border-radius:4px; font-weight:500;"
					iconClass = "zmdi-videocam"
					detailUrl = "displaymachine.asp?machineid=" & rs("device_id")
				Case "Access Point"
					badgeStyle = "background:#2196F3; color:#fff; padding:5px 10px; border-radius:4px; font-weight:500;"
					iconClass = "zmdi-wifi"
					detailUrl = "displaymachine.asp?machineid=" & rs("device_id")
				Case "Router"
					badgeStyle = "background:#00BCD4; color:#fff; padding:5px 10px; border-radius:4px; font-weight:500;"
					iconClass = "zmdi-router"
					detailUrl = "displaymachine.asp?machineid=" & rs("device_id")
				Case "Firewall"
					badgeStyle = "background:#E91E63; color:#fff; padding:5px 10px; border-radius:4px; font-weight:500;"
					iconClass = "zmdi-shield-security"
					detailUrl = "displaymachine.asp?machineid=" & rs("device_id")
				Case "Printer"
					badgeStyle = "background:#4CAF50; color:#fff; padding:5px 10px; border-radius:4px; font-weight:500;"
					iconClass = "zmdi-print"
					detailUrl = "displayprinter.asp?printerid=" & rs("device_id")
				Case Else
					badgeStyle = "background:#FFC107; color:#000; padding:5px 10px; border-radius:4px; font-weight:500;"
					iconClass = "zmdi-devices"
					detailUrl = "#"
			End Select

			Response.Write("<tr>")

			' Location column (always shown first)
			Response.Write("<td>")
			' Add location link if device has map coordinates
			If Not IsNull(rs("maptop")) And Not IsNull(rs("mapleft")) And rs("maptop") <> "" And rs("mapleft") <> "" Then
				Response.Write("<span class='location-link' data-deviceid='" & rs("device_id") & "' data-devicetype='" & LCase(rs("device_type")) & "' data-devicename='" & Server.HTMLEncode(rs("device_name")) & "' style='cursor:pointer;'>")
				Response.Write("<i class='zmdi zmdi-pin'></i>")
				Response.Write("</span>")
			Else
				Response.Write("&nbsp;")
			End If
			Response.Write("</td>")

			' Type badge (only shown on "All Devices" view)
			If filterType = "all" Then
				Response.Write("<td>")
				Response.Write("<span style='" & badgeStyle & "'>")
				Response.Write("<i class='zmdi " & iconClass & "'></i> " & Server.HTMLEncode(rs("device_type")))
				Response.Write("</span>")
				Response.Write("</td>")
			End If

			' Name (always shown) - clickable link to detail page
			Response.Write("<td>")
			If Not IsNull(rs("device_name")) And rs("device_name") <> "" Then
				Response.Write("<a href='" & detailUrl & "' style='color: inherit; text-decoration: none;'>")
				Response.Write("<strong>" & Server.HTMLEncode(rs("device_name")) & "</strong>")
				Response.Write("</a>")
			Else
				Response.Write("<em class='text-muted'>Unnamed</em>")
			End If
			Response.Write("</td>")

			' Render remaining columns based on filter type
			If filterType = "IDF" Then
				' Description, Actions
				Response.Write("<td>")
				Dim descValue
				descValue = rs("description") & ""
				If Len(Trim(descValue)) > 0 Then
					Dim desc
					desc = Server.HTMLEncode(Trim(descValue))
					If Len(desc) > 100 Then
						Response.Write(Left(desc, 100) & "...")
					Else
						Response.Write(desc)
					End If
				Else
					Response.Write("<span class='text-muted'>-</span>")
				End If
				Response.Write("</td>")

			ElseIf filterType = "Server" Or filterType = "Switch" Then
				' Vendor, Model, Serial, IP Address, FQDN, Description, Actions
				Response.Write("<td>")
				If Not IsNull(rs("vendor")) Then
					Response.Write(Server.HTMLEncode(rs("vendor")))
				Else
					Response.Write("<span class='text-muted'>-</span>")
				End If
				Response.Write("</td>")

				Response.Write("<td>")
				If Not IsNull(rs("modelnumber")) Then
					Response.Write(Server.HTMLEncode(rs("modelnumber")))
				Else
					Response.Write("<span class='text-muted'>-</span>")
				End If
				Response.Write("</td>")

				Response.Write("<td>")
				If Not IsNull(rs("serialnumber")) And rs("serialnumber") <> "" Then
					Response.Write(Server.HTMLEncode(rs("serialnumber")))
				Else
					Response.Write("<span class='text-muted'>-</span>")
				End If
				Response.Write("</td>")

				Response.Write("<td>")
				If Not IsNull(rs("ipaddress")) And rs("ipaddress") <> "" Then
					Response.Write("<a href='http://" & rs("ipaddress") & "' target='_blank' title='Click to access device'>")
					Response.Write(Server.HTMLEncode(rs("ipaddress")))
					Response.Write("</a>")
				Else
					Response.Write("<span class='text-muted'>-</span>")
				End If
				Response.Write("</td>")

				Response.Write("<td>")
				If Not IsNull(rs("fqdn")) And rs("fqdn") <> "" Then
					Response.Write(Server.HTMLEncode(rs("fqdn")))
				Else
					Response.Write("<span class='text-muted'>-</span>")
				End If
				Response.Write("</td>")

				Response.Write("<td>")
				Dim descSvrValue
				descSvrValue = rs("description") & ""
				If Len(Trim(descSvrValue)) > 0 Then
					Dim descSvr
					descSvr = Server.HTMLEncode(Trim(descSvrValue))
					If Len(descSvr) > 50 Then
						Response.Write(Left(descSvr, 50) & "...")
					Else
						Response.Write(descSvr)
					End If
				Else
					Response.Write("<span class='text-muted'>-</span>")
				End If
				Response.Write("</td>")

			ElseIf filterType = "Camera" Then
				' IDF, Vendor, Model, MAC Address, IP Address, FQDN, Actions
				Response.Write("<td>")
				If Not IsNull(rs("idfname")) Then
					Response.Write("<a href='deviceidf.asp?id=" & rs("idfid") & "'>")
					Response.Write(Server.HTMLEncode(rs("idfname")))
					Response.Write("</a>")
				Else
					Response.Write("<span class='text-muted'>-</span>")
				End If
				Response.Write("</td>")

				Response.Write("<td>")
				If Not IsNull(rs("vendor")) Then
					Response.Write(Server.HTMLEncode(rs("vendor")))
				Else
					Response.Write("<span class='text-muted'>-</span>")
				End If
				Response.Write("</td>")

				Response.Write("<td>")
				If Not IsNull(rs("modelnumber")) Then
					Response.Write(Server.HTMLEncode(rs("modelnumber")))
				Else
					Response.Write("<span class='text-muted'>-</span>")
				End If
				Response.Write("</td>")

				Response.Write("<td>")
				If Not IsNull(rs("macaddress")) And rs("macaddress") <> "" Then
					Response.Write("<code>" & Server.HTMLEncode(rs("macaddress")) & "</code>")
				Else
					Response.Write("<span class='text-muted'>-</span>")
				End If
				Response.Write("</td>")

				Response.Write("<td>")
				If Not IsNull(rs("ipaddress")) And rs("ipaddress") <> "" Then
					Response.Write("<a href='http://" & rs("ipaddress") & "' target='_blank' title='Click to access device'>")
					Response.Write(Server.HTMLEncode(rs("ipaddress")))
					Response.Write("</a>")
				Else
					Response.Write("<span class='text-muted'>-</span>")
				End If
				Response.Write("</td>")

				Response.Write("<td>")
				If Not IsNull(rs("fqdn")) And rs("fqdn") <> "" Then
					Response.Write(Server.HTMLEncode(rs("fqdn")))
				Else
					Response.Write("<span class='text-muted'>-</span>")
				End If
				Response.Write("</td>")

			ElseIf filterType = "Access Point" Or filterType = "Printer" Then
				' Access Point/Printer - Name (already shown), Vendor, Model, IP Address, FQDN, Actions
				Response.Write("<td>")
				If Not IsNull(rs("vendor")) Then
					Response.Write(Server.HTMLEncode(rs("vendor")))
				Else
					Response.Write("<span class='text-muted'>-</span>")
				End If
				Response.Write("</td>")

				Response.Write("<td>")
				If Not IsNull(rs("modelnumber")) Then
					Response.Write(Server.HTMLEncode(rs("modelnumber")))
				Else
					Response.Write("<span class='text-muted'>-</span>")
				End If
				Response.Write("</td>")

				Response.Write("<td>")
				If Not IsNull(rs("ipaddress")) And rs("ipaddress") <> "" Then
					Response.Write("<a href='http://" & rs("ipaddress") & "' target='_blank' title='Click to access device'>")
					Response.Write(Server.HTMLEncode(rs("ipaddress")))
					Response.Write("</a>")
				Else
					Response.Write("<span class='text-muted'>-</span>")
				End If
				Response.Write("</td>")

				Response.Write("<td>")
				If Not IsNull(rs("fqdn")) And rs("fqdn") <> "" Then
					Response.Write(Server.HTMLEncode(rs("fqdn")))
				Else
					Response.Write("<span class='text-muted'>-</span>")
				End If
				Response.Write("</td>")

			Else
				' All devices view - Vendor, Model, Serial, IP Address, Description, Actions
				Response.Write("<td>")
				If Not IsNull(rs("vendor")) Then
					Response.Write(Server.HTMLEncode(rs("vendor")))
				Else
					Response.Write("<span class='text-muted'>-</span>")
				End If
				Response.Write("</td>")

				Response.Write("<td>")
				If Not IsNull(rs("modelnumber")) Then
					Response.Write(Server.HTMLEncode(rs("modelnumber")))
				Else
					Response.Write("<span class='text-muted'>-</span>")
				End If
				Response.Write("</td>")

				Response.Write("<td>")
				If Not IsNull(rs("serialnumber")) And rs("serialnumber") <> "" Then
					Response.Write(Server.HTMLEncode(rs("serialnumber")))
				Else
					Response.Write("<span class='text-muted'>-</span>")
				End If
				Response.Write("</td>")

				Response.Write("<td>")
				If Not IsNull(rs("ipaddress")) And rs("ipaddress") <> "" Then
					Response.Write("<a href='http://" & rs("ipaddress") & "' target='_blank' title='Click to access device'>")
					Response.Write(Server.HTMLEncode(rs("ipaddress")))
					Response.Write("</a>")
				Else
					Response.Write("<span class='text-muted'>-</span>")
				End If
				Response.Write("</td>")

				Response.Write("<td>")
				Dim descAllValue
				descAllValue = rs("description") & ""
				If Len(Trim(descAllValue)) > 0 Then
					Dim descAll
					descAll = Server.HTMLEncode(Trim(descAllValue))
					If Len(descAll) > 50 Then
						Response.Write(Left(descAll, 50) & "...")
					Else
						Response.Write(descAll)
					End If
				Else
					Response.Write("<span class='text-muted'>-</span>")
				End If
				Response.Write("</td>")
			End If

			Response.Write("</tr>")

			rs.MoveNext
		Loop
	Else
		' No devices found
		Dim noDataMessage, colspanCount
		Select Case filterType
			Case "IDF":
				noDataMessage = "No IDFs found."
				colspanCount = "3"
			Case "Server":
				noDataMessage = "No servers found."
				colspanCount = "8"
			Case "Switch":
				noDataMessage = "No switches found."
				colspanCount = "8"
			Case "Camera":
				noDataMessage = "No cameras found."
				colspanCount = "8"
			Case "Access Point":
				noDataMessage = "No access points found."
				colspanCount = "6"
			Case "Printer":
				noDataMessage = "No printers found."
				colspanCount = "6"
			Case Else:
				noDataMessage = "No network devices found."
				colspanCount = "8"
		End Select
		Response.Write("<tr><td colspan='" & colspanCount & "' class='text-center text-muted'>" & noDataMessage & "</td></tr>")
	End If

	rs.Close
	Set rs = Nothing
	objConn.Close
%>
                </tbody>
              </table>
            </div>
            </div>
          </div>
        </div>
      </div><!--End Row-->

    <!-- End container-fluid-->

    </div><!--End content-wrapper-->
   <!--Start Back To Top Button-->
    <a href="javaScript:void();" class="back-to-top"><i class="fa fa-angle-double-up"></i> </a>
    <!--End Back To Top Button-->

	<!--Start footer-->
	<footer class="footer">
      </div>
    </footer>
	<!--End footer-->


  </div><!--End wrapper-->

<!-- Bootstrap core JavaScript-->
<script src="assets/js/jquery.min.js"></script>
<script src="assets/js/popper.min.js"></script>
<script src="assets/js/bootstrap.min.js"></script>

<!-- sidebar-menu js -->
<script src="assets/js/sidebar-menu.js"></script>

<!-- Custom scripts -->
<script src="assets/js/app-script.js"></script>

<style>
  /* Device name link hover effect */
  td a:hover strong {
      text-decoration: underline;
      cursor: pointer;
  }

  .location-popup-overlay {
      display: none;
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background: rgba(0, 0, 0, 0.5);
      z-index: 9998;
  }
  .location-popup {
      display: none;
      position: fixed;
      background: #2a2a2a;
      border-radius: 6px;
      box-shadow: 0 4px 20px rgba(0,0,0,0.3);
      z-index: 9999;
      overflow: hidden;
      border: 1px solid #444;
  }
  .location-popup-header {
      background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
      padding: 12px 16px;
      color: white;
      display: flex;
      justify-content: space-between;
      align-items: center;
  }
  .location-popup-close {
      background: rgba(255,255,255,0.2);
      border: none;
      color: white;
      font-size: 24px;
      cursor: pointer;
      width: 30px;
      height: 30px;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      line-height: 1;
      padding: 0;
      transition: background 0.2s;
  }
  .location-popup-close:hover {
      background: rgba(255,255,255,0.3);
  }
  .location-popup-body {
      padding: 0;
      background: #1a1a1a;
  }
  .location-popup-body iframe {
      display: block;
      border: none;
      border-radius: 0 0 6px 6px;
  }
  .location-link:hover {
      text-decoration: underline;
  }
</style>

<script>
$(document).ready(function() {
    var $overlay = $('<div class="location-popup-overlay"></div>').appendTo('body');
    var $popup = $('<div class="location-popup"></div>').appendTo('body');

    $popup.html(
        '<div class="location-popup-header">' +
            '<h6 style="margin:0; font-size:16px;"><i class="zmdi zmdi-pin"></i> <span class="location-title">Loading...</span></h6>' +
            '<button class="location-popup-close" title="Close (Esc)">&times;</button>' +
        '</div>' +
        '<div class="location-popup-body">' +
            '<iframe src="" width="440" height="340"></iframe>' +
        '</div>'
    );

    var $iframe = $popup.find('iframe');
    var $title = $popup.find('.location-title');
    var currentDeviceId = null;
    var currentDeviceType = null;
    var hoverTimer = null;

    function showLocationPopup(deviceId, deviceType, deviceName, mouseEvent) {
        if (currentDeviceId === deviceId && currentDeviceType === deviceType && $popup.is(':visible')) {
            return;
        }

        currentDeviceId = deviceId;
        currentDeviceType = deviceType;
        $title.text(deviceName);
        $iframe.attr('src', './displaylocation.asp?type=' + deviceType + '&id=' + deviceId);

        var popupWidth = 440;
        var popupHeight = 400;
        var mouseX = mouseEvent.clientX;
        var mouseY = mouseEvent.clientY;
        var windowWidth = window.innerWidth;
        var windowHeight = window.innerHeight;

        var left, top;

        left = mouseX + 10;
        if (left + popupWidth > windowWidth - 10) {
            left = mouseX - popupWidth - 10;
        }
        if (left < 10) {
            left = 10;
        }

        top = mouseY + 10;
        if (top + popupHeight > windowHeight - 10) {
            top = mouseY - popupHeight - 10;
        }
        if (top < 10) {
            top = 10;
        }

        $popup.css({
            left: left + 'px',
            top: top + 'px'
        });

        $overlay.fadeIn(200);
        $popup.fadeIn(200);
    }

    function hideLocationPopup() {
        $overlay.fadeOut(200);
        $popup.fadeOut(200, function() {
            $iframe.attr('src', '');
        });
        currentDeviceId = null;
        currentDeviceType = null;
    }

    $(document).on('mouseenter', '.location-link', function(e) {
        var $link = $(this);
        var deviceId = $link.data('deviceid');
        var deviceType = $link.data('devicetype');
        var deviceName = $link.data('devicename');
        var mouseEvent = e;

        if (hoverTimer) {
            clearTimeout(hoverTimer);
        }

        hoverTimer = setTimeout(function() {
            showLocationPopup(deviceId, deviceType, deviceName, mouseEvent);
        }, 300);
    });

    $(document).on('mouseleave', '.location-link', function() {
        if (hoverTimer) {
            clearTimeout(hoverTimer);
            hoverTimer = null;
        }
    });

    $popup.on('mouseenter', function() {});
    $popup.on('mouseleave', function() {
        hideLocationPopup();
    });

    $overlay.on('click', hideLocationPopup);
    $popup.find('.location-popup-close').on('click', hideLocationPopup);

    $(document).on('keydown', function(e) {
        if (e.key === 'Escape' && $popup.is(':visible')) {
            hideLocationPopup();
        }
    });
});
</script>

</body>
</html>
