<!DOCTYPE html>
<html lang="en">
<head>
	<!--#include file="./includes/sql.asp"-->
    <link rel="stylesheet" href="./leaflet/leaflet.css">
    <script src="./leaflet/leaflet.js"></script>
</head>

<body>
	<main>
<%
	On Error Resume Next
	Dim deviceType, deviceId, mapleft, maptop, deviceName, strSQL, rs

	deviceType = Trim(Request.Querystring("type"))
	deviceId = Trim(Request.Querystring("id"))

	' Validate inputs
	If deviceType = "" Or deviceId = "" Or Not IsNumeric(deviceId) Then
		Response.Write("<p>Invalid parameters</p>")
		Response.End
	End If

	' Build query based on device type
	' All network devices now use unified machines table with machinetypeid:
	'   16 = Access Point, 17 = IDF, 18 = Camera, 19 = Switch, 20 = Server
	Select Case LCase(deviceType)
		Case "idf"
			strSQL = "SELECT mapleft, maptop, COALESCE(alias, machinenumber) AS devicename FROM machines WHERE machineid = " & CLng(deviceId) & " AND machinetypeid = 17"
		Case "server"
			strSQL = "SELECT mapleft, maptop, alias AS devicename FROM machines WHERE machineid = " & CLng(deviceId) & " AND machinetypeid = 20"
		Case "switch"
			strSQL = "SELECT mapleft, maptop, alias AS devicename FROM machines WHERE machineid = " & CLng(deviceId) & " AND machinetypeid = 19"
		Case "camera"
			strSQL = "SELECT mapleft, maptop, alias AS devicename FROM machines WHERE machineid = " & CLng(deviceId) & " AND machinetypeid = 18"
		Case "accesspoint", "access point"
			strSQL = "SELECT mapleft, maptop, alias AS devicename FROM machines WHERE machineid = " & CLng(deviceId) & " AND machinetypeid = 16"
		Case Else
			Response.Write("<p>Unknown device type</p>")
			Response.End
	End Select

	Set rs = objConn.Execute(strSQL)

	If Not rs.EOF Then
		mapleft = rs("mapleft")
		maptop = rs("maptop")
		deviceName = rs("devicename")

		' Check if location is set
		If IsNull(mapleft) Or IsNull(maptop) Or mapleft = "" Or maptop = "" Then
%>
		<div style="padding:20px; text-align:center; color:#888;">
			<i class="zmdi zmdi-pin-off" style="font-size:48px; margin-bottom:10px;"></i>
			<p>No location set for this device</p>
		</div>
<%
		Else
			' Invert Y coordinate for Leaflet
			maptop = 2550 - maptop
%>

	<style>
		html, body {
			height: 100%;
			margin: 0;
		}
		.leaflet-container {
			height: 340px;
			width: 440px;
			max-width: 100%;
			max-height: 100%;
		}
		/* Dark mode for all Leaflet controls */
		.leaflet-control-zoom a {
			background-color: #2a2a2a !important;
			color: #fff !important;
			border-color: #444 !important;
		}
		.leaflet-control-zoom a:hover {
			background-color: #3a3a3a !important;
			color: #fff !important;
		}
		.leaflet-bar {
			border: 1px solid #444 !important;
		}
		/* Hide Leaflet attribution/logo */
		.leaflet-control-attribution {
			display: none !important;
		}
	</style>

	<div id="map" style="width: 440px; height: 340px;"></div>
	<script>
	// Detect theme from parent window or cookie
	function getTheme() {
		try {
			// Try to get theme from parent window
			if (window.parent && window.parent.document && window.parent.document.body) {
				var bodyClass = window.parent.document.body.className;
				var themeMatch = bodyClass.match(/bg-theme(\d+)/);
				if (themeMatch) {
					return 'bg-theme' + themeMatch[1];
				}
			}
		} catch(e) {
			// Cross-origin restriction, fall back to cookie
		}

		// Fall back to cookie
		var cookies = document.cookie.split(';');
		for (var i = 0; i < cookies.length; i++) {
			var cookie = cookies[i].trim();
			if (cookie.indexOf('theme=') === 0) {
				return cookie.substring(6);
			}
		}
		return 'bg-theme1'; // default
	}

	var theme = getTheme();

	// Theme-specific settings
	var themeConfig = {
		'bg-theme1': { bg: '#2a2a2a', filter: 'brightness(0.7) contrast(1.1)' },
		'bg-theme2': { bg: '#2a2a2a', filter: 'brightness(0.7) contrast(1.1)' },
		'bg-theme3': { bg: '#2a2a2a', filter: 'brightness(0.7) contrast(1.1)' },
		'bg-theme4': { bg: '#2a2a2a', filter: 'brightness(0.7) contrast(1.1)' },
		'bg-theme5': { bg: '#2a2a2a', filter: 'brightness(0.7) contrast(1.1)' },
		'bg-theme6': { bg: '#2a2a2a', filter: 'brightness(0.7) contrast(1.1)' },
		'bg-theme7': { bg: '#0c675e', filter: 'brightness(0.8) contrast(1.1) hue-rotate(-10deg)' },
		'bg-theme8': { bg: '#4a3020', filter: 'brightness(0.75) contrast(1.1) saturate(0.8)' },
		'bg-theme9': { bg: '#29323c', filter: 'brightness(0.7) contrast(1.1)' },
		'bg-theme10': { bg: '#795548', filter: 'brightness(0.8) contrast(1.05) sepia(0.2)' },
		'bg-theme11': { bg: '#1565C0', filter: 'brightness(0.85) contrast(1.05) hue-rotate(-5deg)' },
		'bg-theme12': { bg: '#65379b', filter: 'brightness(0.8) contrast(1.1) hue-rotate(5deg)' },
		'bg-theme13': { bg: '#d03050', filter: 'brightness(0.85) contrast(1.05) saturate(0.9)' },
		'bg-theme14': { bg: '#2a7a2e', filter: 'brightness(0.8) contrast(1.1) saturate(0.95)' },
		'bg-theme15': { bg: '#4643d3', filter: 'brightness(0.85) contrast(1.05) hue-rotate(-5deg)' },
		'bg-theme16': { bg: '#6a11cb', filter: 'brightness(0.8) contrast(1.1)' }
	};

	var config = themeConfig[theme] || { bg: '#1a1a1a', filter: 'brightness(0.7) contrast(1.1)' };

	// Apply background color
	document.body.style.backgroundColor = config.bg;
	document.getElementById('map').style.backgroundColor = config.bg;

	var map = L.map('map', {
		crs: L.CRS.Simple,
		minZoom: -3
	});

	var sol = L.latLng([<%=maptop%>, <%=mapleft%>]);
	L.marker(sol).addTo(map);
	var bounds = [[0, 0], [2550, 3300]];

	// Determine which map image to use based on theme
	var lightThemes = ['bg-theme11', 'bg-theme13']; // Blue and red themes use light map
	var imageUrl = lightThemes.includes(theme) ? './images/sitemap2025-light.png' : './images/sitemap2025-dark.png';

	// Create image overlay with theme-specific filter
	var imageOverlay = L.imageOverlay(imageUrl, bounds);

	// Apply theme-specific filter when image loads
	imageOverlay.on('load', function() {
		var imgElement = this.getElement();
		if (imgElement) {
			imgElement.style.filter = config.filter;
		}
	});

	imageOverlay.addTo(map);
	map.fitBounds(bounds);
	</script>

<%
		End If
	Else
		Response.Write("<div style='padding:20px; text-align:center; color:#888;'><p>Device not found</p></div>")
	End If

	rs.Close
	Set rs = Nothing
	objConn.Close
%>

	</main>
</body>
</html>
