<!DOCTYPE html>
<html lang="en">
<head>
  <!--#include file="./includes/header.asp"-->
  <!--#include file="./includes/sql.asp"-->
  <link rel="stylesheet" href="./leaflet/leaflet.css">
  <script src="./leaflet/leaflet.js"></script>
</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-12">
          <div class="card">
            <div class="card-body" style="padding:0;">
              <div style="padding:15px; border-bottom:1px solid #444;">
                <h5 class="card-title" style="margin:0;">
                  <i class='zmdi zmdi-map'></i>&nbsp;&nbsp;Printer Location Map
                  <span style="float:right; font-size:14px; font-weight:normal; color:#aaa;">
                    <a href="./displayprinters.asp" style="color:#007bff; text-decoration:none;" title="Back to Printers List">
                      <i class='zmdi zmdi-view-list'></i> List View
                    </a>
                  </span>
                </h5>
              </div>
              <div id="map"></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>

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

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

<style>
/* Make map container height fit nicely */
#map {
	width: 100%;
	height: calc(100vh - 250px);
	min-height: 600px;
	background-color: #1a1a1a;
}

/* 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;
}

/* Override Leaflet's default white popup styling for dark mode */
.leaflet-popup-content-wrapper {
	background: transparent !important;
	color: #fff !important;
	box-shadow: 0 3px 14px rgba(0,0,0,0.6) !important;
	border-radius: 4px !important;
	padding: 0 !important;
}
.leaflet-popup-content {
	margin: 0 !important;
}
.leaflet-popup-tip-container {
	display: none !important;
}
.leaflet-popup-close-button {
	color: #fff !important;
	font-size: 24px !important;
	padding: 4px 8px 0 0 !important;
}
.leaflet-popup-close-button:hover {
	color: #ddd !important;
}

/* Hide Leaflet attribution/logo */
.leaflet-control-attribution {
	display: none !important;
}
</style>

<script>
// Get current theme
var bodyClass = document.body.className;
var themeMatch = bodyClass.match(/bg-theme(\d+)/);
var theme = themeMatch ? 'bg-theme' + themeMatch[1] : 'bg-theme1';

// Theme-specific configurations
var themeConfig = {
    'bg-theme1': { bg: '#2a2a2a', filter: 'brightness(0.7) contrast(1.1)', gradient: 'linear-gradient(45deg, #3a3a3a, #4a4a4a)' },
    'bg-theme2': { bg: '#2a2a2a', filter: 'brightness(0.7) contrast(1.1)', gradient: 'linear-gradient(45deg, #3a3a3a, #4a4a4a)' },
    'bg-theme3': { bg: '#2a2a2a', filter: 'brightness(0.7) contrast(1.1)', gradient: 'linear-gradient(45deg, #3a3a3a, #4a4a4a)' },
    'bg-theme4': { bg: '#2a2a2a', filter: 'brightness(0.7) contrast(1.1)', gradient: 'linear-gradient(45deg, #3a3a3a, #4a4a4a)' },
    'bg-theme5': { bg: '#2a2a2a', filter: 'brightness(0.7) contrast(1.1)', gradient: 'linear-gradient(45deg, #3a3a3a, #4a4a4a)' },
    'bg-theme6': { bg: '#2a2a2a', filter: 'brightness(0.7) contrast(1.1)', gradient: 'linear-gradient(45deg, #3a3a3a, #4a4a4a)' },
    'bg-theme7': { bg: '#0c675e', filter: 'brightness(0.8) contrast(1.1) hue-rotate(-10deg)', gradient: 'linear-gradient(45deg, #0c675e, #069e90)' },
    'bg-theme8': { bg: '#4a3020', filter: 'brightness(0.75) contrast(1.1) saturate(0.8)', gradient: 'linear-gradient(45deg, #a52a04, #4f5f58)' },
    'bg-theme9': { bg: '#29323c', filter: 'brightness(0.7) contrast(1.1)', gradient: 'linear-gradient(45deg, #29323c, #485563)' },
    'bg-theme10': { bg: '#795548', filter: 'brightness(0.8) contrast(1.05) sepia(0.2)', gradient: 'linear-gradient(45deg, #795548, #945c48)' },
    'bg-theme11': { bg: '#1565C0', filter: 'brightness(0.85) contrast(1.05) hue-rotate(-5deg)', gradient: 'linear-gradient(45deg, #1565C0, #1E88E5)' },
    'bg-theme12': { bg: '#65379b', filter: 'brightness(0.8) contrast(1.1) hue-rotate(5deg)', gradient: 'linear-gradient(45deg, #65379b, #886aea)' },
    'bg-theme13': { bg: '#d03050', filter: 'brightness(0.85) contrast(1.05) saturate(0.9)', gradient: 'linear-gradient(45deg, #ff5447, #f1076f)' },
    'bg-theme14': { bg: '#2a7a2e', filter: 'brightness(0.8) contrast(1.1) saturate(0.95)', gradient: 'linear-gradient(45deg, #08a50e, #69bb03)' },
    'bg-theme15': { bg: '#4643d3', filter: 'brightness(0.85) contrast(1.05) hue-rotate(-5deg)', gradient: 'linear-gradient(45deg, #6a11cb, #2575fc)' },
    'bg-theme16': { bg: '#6a11cb', filter: 'brightness(0.8) contrast(1.1)', gradient: 'linear-gradient(45deg, #6a11cb, #cccccc)' }
};

var config = themeConfig[theme] || { bg: '#1a1a1a', filter: 'brightness(0.7) contrast(1.1)', gradient: 'linear-gradient(45deg, #667eea, #764ba2)' };

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

var map = L.map('map', {
    crs: L.CRS.Simple,
	minZoom: -3
});
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 mapImage = lightThemes.includes(theme) ? './images/sitemap2025-light.png' : './images/sitemap2025-dark.png';

var image = L.imageOverlay(mapImage, bounds);

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

image.addTo(map);
// Start with a better initial zoom - not too close, not too far
var center = [1275, 1650]; // Center of bounds (2550/2, 3300/2)
map.setView(center, -2.3); // -2.3 zoom level - slightly more zoomed out than -2

<%
	strSQL =	"SELECT printers.mapleft, printers.maptop, machines.machinenumber, printers.printerid, printers.printercsfname, printers.printerwindowsname, models.modelnumber, models.image, printers.ipaddress, printers.fqdn, machines.machinenotes, machines.alias FROM machines, printers, models WHERE " &_
			"printers.modelid = models.modelnumberid AND " &_
			"printers.machineid != 1 AND " & _
			"printers.machineid = machines.machineid AND " &_
			"printers.isactive = 1 AND " &_
			"printers.mapleft IS NOT NULL AND " &_
			"printers.maptop IS NOT NULL"
	set rs = objconn.Execute(strSQL)
	while not rs.eof
		mapleft			=	rs("mapleft")
		maptop			=	rs("maptop")
		maptop			=	2550-maptop
		printerid		=	rs("printerid")
		printercsfname		=	rs("printercsfname")
		printerwindowsname	=	rs("printerwindowsname")
		modelnumber		=	rs("modelnumber")
		image			=	rs("image")
		ipaddress		=	rs("ipaddress")
		fqdn			=	rs("fqdn")
		' Use alias if available, otherwise machinenumber
		if NOT IsNull(rs("alias")) AND rs("alias") <> "" THEN
			location = rs("alias")
		else
			location = rs("machinenumber")
		end if
		if image	=	"" THEN
			image="Versalink-C7125.png"
		end if
%>
var greenIcon = L.icon({
    iconUrl: './images/printers/<%Response.Write(image)%>',
    iconSize:     [60, 60], // size of the icon
    iconAnchor:   [30, 30], // center the icon on the coordinate
    popupAnchor:  [0, -30] // point from which the popup should open relative to the iconAnchor
});

var popupContent = '<div style="background:#1f1f1f; color:#fff; min-width:320px; max-width:320px; border-radius:4px; overflow:hidden; font-family:Arial,sans-serif;">' +
    '<div style="background:' + config.gradient + '; padding:10px 15px; border-bottom:1px solid #444;">' +
    '<h6 style="margin:0; color:#fff; font-size:15px; font-weight:600;"><i class="fa fa-print"></i> <%Response.Write(printerwindowsname)%></h6>' +
    '</div>' +
    '<div style="padding:12px 15px;">' +
    '<table style="width:100%; font-size:12px; border-collapse:collapse;">' +
    '<tr><td style="color:#aaa; padding:5px 0; vertical-align:top; width:35%;"><strong>CSF Name:</strong></td><td style="color:#fff; padding:5px 0; word-break:break-word;"><%Response.Write(printercsfname)%></td></tr>' +
    '<tr><td style="color:#aaa; padding:5px 0; vertical-align:top;"><strong>Location:</strong></td><td style="color:#fff; padding:5px 0; word-break:break-word;"><%Response.Write(location)%></td></tr>' +
    '<tr><td style="color:#aaa; padding:5px 0; vertical-align:top;"><strong>Model:</strong></td><td style="color:#fff; padding:5px 0; word-break:break-word;"><%Response.Write(modelnumber)%></td></tr>' +
    '<tr><td style="color:#aaa; padding:5px 0; vertical-align:top;"><strong>IP Address:</strong></td><td style="padding:5px 0;"><a href="http://<%Response.Write(ipaddress)%>" style="color:#4fc3f7; text-decoration:none;" target="_blank"><%Response.Write(ipaddress)%></a></td></tr>' +
    '<tr><td style="color:#aaa; padding:5px 0; vertical-align:top;"><strong>FQDN:</strong></td><td style="color:#fff; padding:5px 0; word-break:break-all; font-size:11px;"><%Response.Write(fqdn)%></td></tr>' +
    '</table>' +
    '</div>' +
    '<div style="padding:10px 15px; text-align:center; border-top:1px solid #444;">' +
    '<a href="./displayprinter.asp?printerid=<%Response.Write(printerid)%>" style="display:inline-block; background:' + config.gradient + '; color:#fff; padding:6px 16px; border-radius:3px; text-decoration:none; font-size:13px; font-weight:500;" target="_blank"><i class="fa fa-external-link"></i> View Details</a>' +
    '</div>' +
    '</div>';

L.marker([<%Response.Write(maptop)%>, <%Response.Write(mapleft)%>],{
    title:'<%Response.Write(printerwindowsname)%> - <%Response.Write(modelnumber)%>',
    icon: greenIcon
}).addTo(map).bindPopup(popupContent);
<%
	rs.movenext
	Wend
  	objConn.Close
%>
</script>

</body>
</html>
