<!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-lg-8 col-xl-9">
          <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 Installation Map
                  <span style="float:right; font-size:14px; font-weight:normal;">
                    <span id="selectedCount" style="color:#4fc3f7;">0</span> printer(s) selected
                  </span>
                </h5>
              </div>
              <div id="map"></div>
            </div>
          </div>
        </div>

        <div class="col-lg-4 col-xl-3">
          <div class="card">
            <div class="card-header" style="background: linear-gradient(45deg, #667eea, #764ba2); color: white;">
              <i class="zmdi zmdi-download"></i> Printer Installer
            </div>
            <div class="card-body">
              <p style="font-size:13px; color:#aaa; margin-bottom:15px;">
                Click printers on the map to select them. Selected printers will turn green.
              </p>

              <div id="selectedPrinters" style="margin-bottom:20px; max-height:300px; overflow-y:auto;">
                <div style="color:#888; font-size:12px; text-align:center; padding:20px;">
                  No printers selected yet
                </div>
              </div>

              <button id="installBtn" class="btn btn-primary btn-block" style="display:none;" onclick="downloadInstaller()">
                <i class="zmdi zmdi-download"></i> Download Installer
              </button>

              <button class="btn btn-outline-secondary btn-block btn-sm" onclick="clearSelection()">
                <i class="zmdi zmdi-close"></i> Clear Selection
              </button>

              <div style="margin-top:20px; padding:15px; background:#2a2a2a; border-radius:4px; font-size:12px;">
                <strong style="color:#4fc3f7;">Legend:</strong>
                <div style="margin-top:8px;">
                  <span style="display:inline-block; width:10px; height:10px; background:#888; border-radius:50%; margin-right:8px;"></span> Not Selected<br>
                  <span style="display:inline-block; width:10px; height:10px; background:#4caf50; border-radius:50%; margin-right:8px; margin-top:5px;"></span> Selected
                </div>
              </div>
            </div>
          </div>
        </div>
      </div><!--End Row-->

    </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>
  <script src="assets/plugins/simplebar/js/simplebar.js"></script>
  <script src="assets/js/sidebar-menu.js"></script>
  <script src="assets/js/app-script.js"></script>

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

.leaflet-control-zoom a {
	background-color: #2a2a2a !important;
	color: #fff !important;
	border-color: #444 !important;
}
.leaflet-control-zoom a:hover {
	background-color: #3a3a3a !important;
}
.leaflet-bar {
	border: 1px solid #444 !important;
}

.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-control-attribution {
	display: none !important;
}

.selected-printer-item {
	padding: 8px;
	margin-bottom: 8px;
	background: #2a2a2a;
	border-left: 3px solid #4caf50;
	border-radius: 3px;
	font-size: 12px;
	color: #fff;
}

.selected-printer-item .remove-btn {
	float: right;
	color: #f44336;
	cursor: pointer;
	font-size: 14px;
}
</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';

var themeConfig = {
    'bg-theme1': { 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-theme11': { bg: '#1565C0', filter: 'brightness(0.85) contrast(1.05) hue-rotate(-5deg)', gradient: 'linear-gradient(45deg, #1565C0, #1E88E5)' }
};

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

document.getElementById('map').style.backgroundColor = config.bg;

var map = L.map('map', {
    crs: L.CRS.Simple,
	minZoom: -3
});
var bounds = [[0,0], [2550,3300]];

var lightThemes = ['bg-theme11', 'bg-theme13'];
var mapImage = lightThemes.includes(theme) ? './images/sitemap2025-light.png' : './images/sitemap2025-dark.png';
var image = L.imageOverlay(mapImage, bounds);

image.on('load', function() {
    var imgElement = this.getElement();
    if (imgElement) {
        imgElement.style.filter = config.filter;
    }
});

image.addTo(map);
var center = [1275, 1650];
map.setView(center, -2.3);

// Store printer data and markers
var printerData = {};
var selectedPrinters = {};

<%
	strSQL =	"SELECT machines.mapleft, machines.maptop, machines.machinenumber, printers.printerid, " &_
			"printers.printercsfname, printers.printerwindowsname, models.modelnumber, models.image, " &_
			"printers.ipaddress, printers.fqdn, machines.alias, vendors.vendor " &_
			"FROM machines, printers, models, vendors WHERE " &_
			"printers.modelid = models.modelnumberid AND " &_
			"models.vendorid = vendors.vendorid AND " &_
			"printers.machineid != 1 AND " &_
			"printers.machineid = machines.machineid AND " &_
			"printers.isactive = 1 AND " &_
			"(vendors.vendor = 'HP' OR vendors.vendor = 'Xerox')"
	set rs = objconn.Execute(strSQL)
	while not rs.eof
		mapleft = rs("mapleft")
		maptop = rs("maptop")
		maptop = 2550-maptop
		printerid = rs("printerid")
		printercsfname = rs("printercsfname")
		modelnumber = rs("modelnumber")
		image = rs("image")
		ipaddress = rs("ipaddress")
		fqdn = rs("fqdn")
		vendor = rs("vendor")

		' Get machine name
		if NOT IsNull(rs("alias")) AND rs("alias") <> "" THEN
			machineName = rs("alias")
		else
			machineName = rs("machinenumber")
		end if

		location = machineName

		if image = "" THEN
			image = "Versalink-C7125.png"
		end if

		' Generate standardized printer name using same logic as api_printers.asp
		Dim cleanMachine, cleanModel, shortDescription, standardName
		cleanMachine = Replace(machineName, " ", "")
		cleanMachine = Replace(cleanMachine, "Machine", "")
		cleanModel = Replace(modelnumber, " ", "")

		' Extract short description from model number
		If InStr(cleanModel, "ColorLaserJet") > 0 Then
			shortDescription = "ColorLaserJet"
		ElseIf InStr(cleanModel, "LaserJetPro") > 0 Then
			shortDescription = "LaserJetPro"
		ElseIf InStr(cleanModel, "LaserJet") > 0 Then
			shortDescription = "LaserJet"
		ElseIf InStr(cleanModel, "Altalink") > 0 Then
			shortDescription = "Altalink"
		ElseIf InStr(cleanModel, "Versalink") > 0 Then
			shortDescription = "Versalink"
		ElseIf InStr(cleanModel, "DesignJet") > 0 Then
			shortDescription = "DesignJet"
		Else
			' Extract model prefix before numbers
			Dim i, char
			shortDescription = ""
			For i = 1 To Len(cleanModel)
				char = Mid(cleanModel, i, 1)
				If char >= "0" And char <= "9" Then
					Exit For
				End If
				shortDescription = shortDescription & char
			Next
			If shortDescription = "" Then
				shortDescription = cleanModel
			End If
		End If

		' Build standard name: CSFName-Location-VendorModel (no dash between vendor and model)
		If printercsfname <> "" And printercsfname <> "NONE" And printercsfname <> "gage lab " Then
			If cleanMachine <> "" Then
				standardName = printercsfname & "-" & cleanMachine & "-" & vendor & shortDescription
			Else
				standardName = printercsfname & "-" & vendor & shortDescription
			End If
		Else
			If cleanMachine <> "" Then
				standardName = cleanMachine & "-" & vendor & shortDescription
			Else
				standardName = "Printer" & printerid & "-" & vendor & shortDescription
			End If
		End If

		printerwindowsname = standardName
%>
(function() {
    var printerId = '<%Response.Write(printerid)%>';
    var printerName = '<%Response.Write(printerwindowsname)%>';
    var csfName = '<%Response.Write(printercsfname)%>';
    var location = '<%Response.Write(location)%>';

    printerData[printerId] = {
        name: printerName,
        csf: csfName,
        location: location,
        model: '<%Response.Write(modelnumber)%>',
        ip: '<%Response.Write(ipaddress)%>',
        fqdn: '<%Response.Write(fqdn)%>'
    };

    var normalIcon = L.icon({
        iconUrl: './images/printers/<%Response.Write(image)%>',
        iconSize: [60, 60],
        iconAnchor: [30, 30],
        popupAnchor: [0, -30],
        className: 'printer-icon-normal'
    });

    var selectedIcon = L.icon({
        iconUrl: './images/printers/<%Response.Write(image)%>',
        iconSize: [70, 70],
        iconAnchor: [35, 35],
        popupAnchor: [0, -35],
        className: 'printer-icon-selected'
    });

    var marker = L.marker([<%Response.Write(maptop)%>, <%Response.Write(mapleft)%>], {
        title: printerName,
        icon: normalIcon,
        printerId: printerId
    }).addTo(map);

    printerData[printerId].marker = marker;
    printerData[printerId].normalIcon = normalIcon;
    printerData[printerId].selectedIcon = selectedIcon;

    marker.on('click', function() {
        togglePrinter(printerId);
    });

    var popupContent = '<div style="background:#1f1f1f; color:#fff; min-width:280px; border-radius:4px; overflow:hidden;">' +
        '<div style="background:' + config.gradient + '; padding:10px 15px; border-bottom:1px solid #444;">' +
        '<h6 style="margin:0; color:#fff; font-size:14px;"><%Response.Write(printerwindowsname)%></h6>' +
        '</div>' +
        '<div style="padding:10px 15px; font-size:12px;">' +
        '<div style="margin:5px 0;"><strong style="color:#aaa;">CSF:</strong> <span style="color:#fff;"><%Response.Write(printercsfname)%></span></div>' +
        '<div style="margin:5px 0;"><strong style="color:#aaa;">Location:</strong> <span style="color:#fff;"><%Response.Write(location)%></span></div>' +
        '<div style="margin:5px 0;"><strong style="color:#aaa;">Model:</strong> <span style="color:#fff;"><%Response.Write(modelnumber)%></span></div>' +
        '</div>' +
        '<div style="padding:10px 15px; border-top:1px solid #444; text-align:center;">' +
        '<button onclick="togglePrinter(\'' + printerId + '\')" style="background:' + config.gradient + '; color:#fff; border:none; padding:6px 16px; border-radius:3px; cursor:pointer; font-size:12px;">' +
        '<i class="zmdi zmdi-plus"></i> <span id="toggle-btn-' + printerId + '">Add to Selection</span>' +
        '</button>' +
        '</div>' +
        '</div>';

    marker.bindPopup(popupContent);
})();
<%
	rs.movenext
	Wend
  	objConn.Close
%>

// Add CSS for selected markers
var style = document.createElement('style');
style.innerHTML = `
    .printer-icon-selected {
        filter: drop-shadow(0 0 10px #4caf50) brightness(1.3);
        z-index: 1000 !important;
    }
    .printer-icon-normal {
        filter: grayscale(50%) brightness(0.8);
    }
`;
document.head.appendChild(style);

function togglePrinter(printerId) {
    if (selectedPrinters[printerId]) {
        // Deselect
        delete selectedPrinters[printerId];
        printerData[printerId].marker.setIcon(printerData[printerId].normalIcon);
    } else {
        // Select
        selectedPrinters[printerId] = true;
        printerData[printerId].marker.setIcon(printerData[printerId].selectedIcon);
    }

    updateSelectionUI();
    updatePopupButton(printerId);
}

function updatePopupButton(printerId) {
    var btn = document.getElementById('toggle-btn-' + printerId);
    if (btn) {
        if (selectedPrinters[printerId]) {
            btn.innerHTML = 'Remove from Selection';
            btn.parentElement.innerHTML = btn.parentElement.innerHTML.replace('zmdi-plus', 'zmdi-minus');
        } else {
            btn.innerHTML = 'Add to Selection';
            btn.parentElement.innerHTML = btn.parentElement.innerHTML.replace('zmdi-minus', 'zmdi-plus');
        }
    }
}

function updateSelectionUI() {
    var count = Object.keys(selectedPrinters).length;
    document.getElementById('selectedCount').innerText = count;

    var container = document.getElementById('selectedPrinters');
    var installBtn = document.getElementById('installBtn');

    if (count === 0) {
        container.innerHTML = '<div style="color:#888; font-size:12px; text-align:center; padding:20px;">No printers selected yet</div>';
        installBtn.style.display = 'none';
    } else {
        var html = '';
        for (var printerId in selectedPrinters) {
            var printer = printerData[printerId];
            html += '<div class="selected-printer-item">' +
                    '<span class="remove-btn" onclick="togglePrinter(\'' + printerId + '\')">×</span>' +
                    '<strong>' + (printer.csf || 'N/A') + '</strong><br>' +
                    '<span style="font-size:11px; color:#aaa;">' + printer.location + '</span>' +
                    '</div>';
        }
        container.innerHTML = html;
        installBtn.style.display = 'block';
    }
}

function clearSelection() {
    for (var printerId in selectedPrinters) {
        printerData[printerId].marker.setIcon(printerData[printerId].normalIcon);
    }
    selectedPrinters = {};
    updateSelectionUI();
}

function downloadInstaller() {
    var printerNames = [];
    for (var printerId in selectedPrinters) {
        printerNames.push(printerData[printerId].name);
    }

    if (printerNames.length === 0) {
        alert('Please select at least one printer');
        return;
    }

    // Generate download link with all selected printers
    var printerParam = printerNames.join(',');
    window.location.href = 'install_printer.asp?printer=' + encodeURIComponent(printerParam);
}
</script>

</body>
</html>
