<!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-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; display:inline-block;">
                  <i class='zmdi zmdi-network'></i>&nbsp;&nbsp;Network Infrastructure Map
                </h5>
                <div style="float:right;">
                  <input type="text" id="machineSearch" class="form-control form-control-sm" placeholder="Search by name, IP, vendor, model..." style="display:inline-block; width:250px; margin-right:15px;">
                  <label style="margin-right:10px; display:inline-block; color:#aaa;">Filter by Type:</label>
                  <select id="machineTypeFilter" class="form-control form-control-sm" style="display:inline-block; width:200px;">
                    <option value="all">All Equipment</option>
                    <option value="Access Point">Access Point</option>
                    <option value="Camera">Camera</option>
                    <option value="IDF">IDF</option>
                    <option value="Printer">Printer</option>
                    <option value="Server">Server</option>
                    <option value="Switch">Switch</option>
                  </select>
                </div>
              </div>
              <div id="map"></div>
            </div>
          </div>
        </div>

        <div class="col-lg-3">
          <div class="card">
            <div class="card-header" style="background: linear-gradient(45deg, #667eea, #764ba2); color: white;">
              <i class="zmdi zmdi-info"></i> Legend
            </div>
            <div class="card-body">
              <p style="font-size:12px; color:#aaa; margin-bottom:15px;">
                Equipment type color codes:
              </p>

              <div style="margin-bottom:20px;">
                <div style="margin:8px 0; display:flex; align-items:center;">
                  <span style="display:inline-block; width:16px; height:16px; background:#4CAF50; border-radius:50%; margin-right:10px; border:2px solid #fff; box-shadow:0 2px 5px rgba(0,0,0,0.5);"></span>
                  <span style="font-size:13px; color:#fff;">Printer</span>
                </div>
                <div style="margin:8px 0; display:flex; align-items:center;">
                  <span style="display:inline-block; width:16px; height:16px; background:#2196F3; border-radius:50%; margin-right:10px; border:2px solid #fff; box-shadow:0 2px 5px rgba(0,0,0,0.5);"></span>
                  <span style="font-size:13px; color:#fff;">Access Point</span>
                </div>
                <div style="margin:8px 0; display:flex; align-items:center;">
                  <span style="display:inline-block; width:16px; height:16px; background:#FF9800; border-radius:50%; margin-right:10px; border:2px solid #fff; box-shadow:0 2px 5px rgba(0,0,0,0.5);"></span>
                  <span style="font-size:13px; color:#fff;">IDF</span>
                </div>
                <div style="margin:8px 0; display:flex; align-items:center;">
                  <span style="display:inline-block; width:16px; height:16px; background:#F44336; border-radius:50%; margin-right:10px; border:2px solid #fff; box-shadow:0 2px 5px rgba(0,0,0,0.5);"></span>
                  <span style="font-size:13px; color:#fff;">Camera</span>
                </div>
                <div style="margin:8px 0; display:flex; align-items:center;">
                  <span style="display:inline-block; width:16px; height:16px; background:#9C27B0; border-radius:50%; margin-right:10px; border:2px solid #fff; box-shadow:0 2px 5px rgba(0,0,0,0.5);"></span>
                  <span style="font-size:13px; color:#fff;">Switch</span>
                </div>
                <div style="margin:8px 0; display:flex; align-items:center;">
                  <span style="display:inline-block; width:16px; height:16px; background:#607D8B; border-radius:50%; margin-right:10px; border:2px solid #fff; box-shadow:0 2px 5px rgba(0,0,0,0.5);"></span>
                  <span style="font-size:13px; color:#fff;">Server</span>
                </div>
              </div>

              <div style="margin-top:20px; padding:15px; background:#2a2a2a; border-radius:4px; font-size:12px;">
                <strong style="color:#4fc3f7;">Tips:</strong>
                <ul style="margin:8px 0; padding-left:20px; color:#aaa;">
                  <li style="margin:5px 0;">Hover over markers for details</li>
                  <li style="margin:5px 0;">Use search to find specific equipment</li>
                  <li style="margin:5px 0;">Filter by type to focus on specific equipment</li>
                  <li style="margin:5px 0;">Click "View Details" for full information</li>
                </ul>
              </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: #1f1f1f !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;
}
</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 machine data and markers
var machineMarkers = [];

// Machine type colors
var machineTypeColors = {
    'Printer': '#4CAF50',
    'Access Point': '#2196F3',
    'IDF': '#FF9800',
    'Camera': '#F44336',
    'Switch': '#9C27B0',
    'Server': '#607D8B',
    'default': '#FFC107'
};

<%
' Query active network infrastructure with map coordinates
Dim strSQL, rs, mapleft, maptop, machineid, machinenumber, machineType, machineTypeId, modelnumber, vendor, alias, ipaddress, sourceTable

' NOTE: machinetypeid is now sourced from models table (models.machinetypeid) not machines table
strSQL = "SELECT printers.printerid AS id, machines.machinenumber AS name, machines.alias, " &_
         "printers.mapleft, printers.maptop, printers.ipaddress, NULL AS machinetypeid, " &_
         "'Printer' AS type, models.modelnumber, vendors.vendor, 'printers' AS source " &_
         "FROM printers " &_
         "INNER JOIN machines ON printers.machineid = machines.machineid " &_
         "LEFT JOIN models ON printers.modelid = models.modelnumberid " &_
         "LEFT JOIN vendors ON models.vendorid = vendors.vendorid " &_
         "WHERE printers.isactive = 1 " &_
         "AND printers.mapleft IS NOT NULL " &_
         "AND printers.maptop IS NOT NULL " &_
         "" &_
         "UNION ALL " &_
         "" &_
         "SELECT m.machineid AS id, m.machinenumber AS name, m.alias, " &_
         "m.mapleft, m.maptop, c.address AS ipaddress, m.machinetypeid, " &_
         "mt.machinetype AS type, mo.modelnumber, v.vendor, 'machines' AS source " &_
         "FROM machines m " &_
         "LEFT JOIN models mo ON m.modelnumberid = mo.modelnumberid " &_
         "LEFT JOIN machinetypes mt ON m.machinetypeid = mt.machinetypeid " &_
         "LEFT JOIN vendors v ON mo.vendorid = v.vendorid " &_
         "LEFT JOIN communications c ON m.machineid = c.machineid AND c.isprimary = 1 AND c.comstypeid = 1 " &_
         "WHERE m.machinetypeid IN (16, 17, 18, 19, 20) " &_
         "AND m.isactive = 1 " &_
         "AND m.mapleft IS NOT NULL " &_
         "AND m.maptop IS NOT NULL " &_
         "" &_
         "ORDER BY type, name ASC"

set rs = objConn.Execute(strSQL)

while not rs.eof
    mapleft = rs("mapleft")
    maptop = rs("maptop")
    maptop = 2550-maptop
    machineid = rs("id")
    machinenumber = rs("name")
    machineType = rs("type")
    sourceTable = rs("source")

    ' machinetypeid may be NULL for infrastructure devices
    if NOT IsNull(rs("machinetypeid")) then
        machineTypeId = rs("machinetypeid")
    else
        machineTypeId = 0
    end if

    if NOT IsNull(rs("alias")) AND rs("alias") <> "" then
        alias = rs("alias")
    else
        alias = machinenumber
    end if

    if NOT IsNull(rs("modelnumber")) then
        modelnumber = rs("modelnumber")
    else
        modelnumber = "N/A"
    end if

    if NOT IsNull(rs("vendor")) then
        vendor = rs("vendor")
    else
        vendor = "N/A"
    end if

    if NOT IsNull(rs("ipaddress")) then
        ipaddress = rs("ipaddress")
    else
        ipaddress = "N/A"
    end if
%>
(function() {
    var machineId = '<%Response.Write(machineid)%>';
    var machineName = '<%Response.Write(Server.HTMLEncode(alias))%>';
    var machineNumber = '<%Response.Write(Server.HTMLEncode(machinenumber))%>';
    var machineType = '<%Response.Write(Server.HTMLEncode(machineType))%>';
    var machineTypeId = '<%Response.Write(machineTypeId)%>';
    var model = '<%Response.Write(Server.HTMLEncode(modelnumber))%>';
    var vendor = '<%Response.Write(Server.HTMLEncode(vendor))%>';
    var ipAddress = '<%Response.Write(Server.HTMLEncode(ipaddress))%>';
    var sourceTable = '<%Response.Write(sourceTable)%>';

    // Get color for this machine type
    var color = machineTypeColors[machineType] || machineTypeColors['default'];

    // Create custom marker icon
    var icon = L.divIcon({
        html: '<div style="background:' + color + '; width:20px; height:20px; border-radius:50%; border:2px solid #fff; box-shadow:0 2px 5px rgba(0,0,0,0.5);"></div>',
        iconSize: [20, 20],
        iconAnchor: [10, 10],
        popupAnchor: [0, -15],
        className: 'custom-marker'
    });

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

    // Store marker with searchable data for filtering
    machineMarkers.push({
        marker: marker,
        machineType: machineType,
        searchData: {
            name: machineName.toLowerCase(),
            number: machineNumber.toLowerCase(),
            type: machineType.toLowerCase(),
            vendor: vendor.toLowerCase(),
            model: model.toLowerCase(),
            ip: ipAddress.toLowerCase()
        }
    });

    // Open popup on hover, but don't close immediately on mouseout
    // This allows users to click links in the popup
    var popupTimeout;

    marker.on('mouseover', function() {
        clearTimeout(popupTimeout);
        this.openPopup();
    });

    marker.on('mouseout', function(e) {
        var popup = this.getPopup();
        var popupElement = popup.getElement();

        // Delay closing so user can move mouse to popup
        popupTimeout = setTimeout(function() {
            marker.closePopup();
        }, 500); // 500ms delay

        // Keep popup open if mouse moves over it
        if (popupElement) {
            popupElement.addEventListener('mouseenter', function() {
                clearTimeout(popupTimeout);
            });

            popupElement.addEventListener('mouseleave', function() {
                marker.closePopup();
            });
        }
    });

    // Determine the correct detail page URL based on source table
    var detailUrl;
    if (sourceTable === 'printers') {
        detailUrl = './displayprinter.asp?printerid=' + machineId;
    } else if (sourceTable === 'machines') {
        detailUrl = './displaymachine.asp?machineid=' + machineId;
    } else if (sourceTable === 'servers') {
        detailUrl = './displayserver.asp?id=' + machineId;
    } else if (sourceTable === 'switches') {
        detailUrl = './displayswitch.asp?id=' + machineId;
    } else if (sourceTable === 'cameras') {
        detailUrl = './displaycamera.asp?id=' + machineId;
    } else if (sourceTable === 'accesspoints') {
        detailUrl = './displayaccesspoint.asp?id=' + machineId;
    } else if (sourceTable === 'idfs') {
        detailUrl = './displayidf.asp?id=' + machineId;
    } else {
        detailUrl = './network_devices.asp';
    }

    var popupContent = '<div style="background:#1f1f1f; color:#fff; min-width:250px; 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;">' + machineName + '</h6>' +
        '</div>' +
        '<div style="padding:10px 15px; font-size:12px;">' +
        '<div style="margin:5px 0;"><strong style="color:#aaa;">Number:</strong> <span style="color:#fff;">' + machineNumber + '</span></div>' +
        '<div style="margin:5px 0;"><strong style="color:#aaa;">Type:</strong> <span style="color:' + color + '; font-weight:bold;">' + machineType + '</span></div>' +
        (ipAddress !== 'N/A' ? '<div style="margin:5px 0;"><strong style="color:#aaa;">IP Address:</strong> <span style="color:#fff;">' + ipAddress + '</span></div>' : '') +
        (vendor !== 'N/A' ? '<div style="margin:5px 0;"><strong style="color:#aaa;">Vendor:</strong> <span style="color:#fff;">' + vendor + '</span></div>' : '') +
        (model !== 'N/A' ? '<div style="margin:5px 0;"><strong style="color:#aaa;">Model:</strong> <span style="color:#fff;">' + model + '</span></div>' : '') +
        '</div>' +
        '<div style="padding:10px 15px; border-top:1px solid #444; text-align:center;">' +
        '<a href="' + detailUrl + '" style="display:inline-block; background:' + config.gradient + '; color:#fff; padding:8px 18px; border-radius:4px; text-decoration:none; font-size:13px; font-weight:500; transition:all 0.2s;" target="_blank" onmouseover="this.style.opacity=\'0.9\'" onmouseout="this.style.opacity=\'1\'"><i class="zmdi zmdi-eye"></i> View Details</a>' +
        '</div>' +
        '</div>';

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

// Combined filter functionality (type + search)
function applyFilters() {
    var selectedType = document.getElementById('machineTypeFilter').value;
    var searchTerm = document.getElementById('machineSearch').value.toLowerCase().trim();

    machineMarkers.forEach(function(item) {
        var typeMatch = (selectedType === 'all' || item.machineType === selectedType);
        var searchMatch = true;

        if (searchTerm !== '') {
            // Search across all searchable fields
            searchMatch = item.searchData.name.indexOf(searchTerm) > -1 ||
                         item.searchData.number.indexOf(searchTerm) > -1 ||
                         item.searchData.type.indexOf(searchTerm) > -1 ||
                         item.searchData.vendor.indexOf(searchTerm) > -1 ||
                         item.searchData.model.indexOf(searchTerm) > -1 ||
                         item.searchData.ip.indexOf(searchTerm) > -1;
        }

        // Show marker only if it matches both type and search filters
        if (typeMatch && searchMatch) {
            item.marker.setOpacity(1);
        } else {
            item.marker.setOpacity(0.15);
        }
    });
}

// Listen to filter changes
document.getElementById('machineTypeFilter').addEventListener('change', applyFilters);

// Listen to search input with debouncing for better performance
var searchTimeout;
document.getElementById('machineSearch').addEventListener('input', function() {
    clearTimeout(searchTimeout);
    searchTimeout = setTimeout(applyFilters, 300);
});
</script>

</body>
</html>
