<!DOCTYPE html>
<html lang="en">
<head>
  <!--#include file="./includes/header.asp"-->
  <!--#include file="./includes/sql.asp"-->
  <!--#include file="./includes/data_cache.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="./printermap.asp" target="_blank"><i class='zmdi zmdi-map' title='Show Printer Map' style='color:#fff;'></i></a>&nbsp&nbsp<a href="./tonerreport.asp" target="_blank"><i class='zmdi zmdi-collection-image text-yellow' title='Low Toner Report'></i></a>&nbsp&nbsp<a href="./printerinstallermap.asp" target="_blank"><i class='zmdi zmdi-download' title='Printer Installer Map' style='color:#fff;'></i></a>&nbsp&nbsp&nbsp&nbsp;Printers
                </h5>
                <div>
                  <a href="./addprinter.asp" class="btn btn-primary">
                    <i class="zmdi zmdi-plus-circle"></i> Add Printer
                  </a>
                </div>
              </div>
			  <div class="table-responsive">
              <table class="table table-hover">
                <thead>
                  <tr>
                    <th scope="col"><i class="zmdi zmdi-pin"></i></th>
                    <th scope="col"><i class="zmdi zmdi-attachment-alt"></i></th>
                    <th scope="col">ID</th>
                    <th scope="col">Machine</th>
                    <th scope="col">Vendor</th>
                    <th scope="col">Model</th>
                    <th scope="col">CSF</th>
                    <th scope="col">IP</th>
                    <th scope="col">Serial</th>
                  </tr>
                </thead>
                <tbody>

<%
	' Get cached printer list (refreshes every 5 minutes)
	Dim printerList, i, printer, image, installpath, machinenumber, machineid
	Dim vendor, modelnumber, documentationpath, printercsfname, ipaddress, serialnumber, islocationonly, isLocOnly

	printerList = GetPrinterListCached()

	' Check if we have data
	On Error Resume Next
	If IsArray(printerList) And UBound(printerList) >= 0 Then
		On Error Goto 0

		' Loop through cached printer data
		For i = 0 To UBound(printerList)
			' Extract data from array
			' Array structure: printer, image, installpath, machinenumber, machineid, vendor, modelnumber, documentationpath, printercsfname, ipaddress, serialnumber, islocationonly
			printer = printerList(i, 0)
			image = printerList(i, 1)
			installpath = printerList(i, 2)
			machinenumber = printerList(i, 3)
			machineid = printerList(i, 4)
			vendor = printerList(i, 5)
			modelnumber = printerList(i, 6)
			documentationpath = printerList(i, 7)
			printercsfname = printerList(i, 8)
			ipaddress = printerList(i, 9)
			serialnumber = printerList(i, 10)

			' Safely get islocationonly (might not exist in old cached data)
			On Error Resume Next
			islocationonly = printerList(i, 11)
			If Err.Number <> 0 Then islocationonly = 0
			On Error Goto 0

			Response.write("<tr>")

			' Location column - just map icon
			Response.write("<td>")
			Response.write("<span class='location-link' data-machineid='" & machineid & "' style='cursor:pointer;'>")
			Response.write("<i class='zmdi zmdi-pin'></i>")
			Response.write("</span>")
			Response.write("</td>")

			' Drivers column
			If installpath <> "" Then
				Response.write("<td><a href='./" & installpath & "'><i class='zmdi zmdi-download' title='Click to Download Specific Installer' style='color:#fff;'></i></a></td>")
			Else
				Response.write("<td><a href='./installprinter.asp?printerid=" & printer & "'><i class='zmdi zmdi-download' title='Click to Download Universal Driver Installer' style='color:#fff;'></i></a></td>")
			End If

			' ID column
			Response.Write("<td><a href='./displayprinter.asp?printerid=" & printer & "' title='Click to Display Printer Details'><img src='./images/printers/" & image & "' width='30px' height='30px'></a></td>")

			' Machine column - link to machine (or printer if location only)
			' Check if location only (1 = location only)
			isLocOnly = False

			If Not IsNull(islocationonly) And Not IsEmpty(islocationonly) Then
				' Check if islocationonly equals 1
				If CInt(islocationonly) = 1 Then
					isLocOnly = True
				End If
			End If

			If isLocOnly Then
				' Location only - link to printer instead of machine
				Response.write("<td><a href='./displayprinter.asp?printerid=" & printer & "' title='Click to Display Printer Details'>" & machinenumber & "</a></td>")
			Else
				' Regular machine - link to machine
				Response.write("<td><a href='./displaymachine.asp?machineid=" & machineid & "' title='Click to Display Machine Details'>" & machinenumber & "</a></td>")
			End If
%>
                    <td><%Response.Write(vendor)%></td>
                    <td><a href="<%Response.Write(documentationpath)%>" title="Click to Access Support Docs" target="_blank"><%Response.Write(modelnumber)%></a></td>
                    <td><%Response.Write(printercsfname)%></td>
                    <td><a href="http://<%Response.Write(ipaddress)%>" title="Click to Access Printer Admin Page" target="_blank"><%Response.Write(ipaddress)%></a></td>
                    <td><%Response.Write(serialnumber)%></td>
                  </tr>

<%
		Next
	Else
		' No printers found
		Response.Write("<tr><td colspan='9'>No active printers found.</td></tr>")
	End If
	On Error Goto 0

	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>
	
  <!-- 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>

  <!-- Location map popup modal -->
  <style>
  /* Theme-specific styling for better visibility on all themes */
  body.bg-theme1 .location-link,
  body.bg-theme2 .location-link,
  body.bg-theme3 .location-link,
  body.bg-theme4 .location-link,
  body.bg-theme5 .location-link,
  body.bg-theme6 .location-link,
  body.bg-theme7 .location-link,
  body.bg-theme8 .location-link,
  body.bg-theme9 .location-link,
  body.bg-theme10 .location-link,
  body.bg-theme11 .location-link,
  body.bg-theme12 .location-link,
  body.bg-theme13 .location-link,
  body.bg-theme14 .location-link,
  body.bg-theme15 .location-link,
  body.bg-theme16 .location-link {
      color: #fff !important;
  }

  /* Theme-specific popup header colors */
  body.bg-theme1 .location-popup-header { background: linear-gradient(45deg, #3a3a3a, #4a4a4a); }
  body.bg-theme2 .location-popup-header { background: linear-gradient(45deg, #3a3a3a, #4a4a4a); }
  body.bg-theme3 .location-popup-header { background: linear-gradient(45deg, #3a3a3a, #4a4a4a); }
  body.bg-theme4 .location-popup-header { background: linear-gradient(45deg, #3a3a3a, #4a4a4a); }
  body.bg-theme5 .location-popup-header { background: linear-gradient(45deg, #3a3a3a, #4a4a4a); }
  body.bg-theme6 .location-popup-header { background: linear-gradient(45deg, #3a3a3a, #4a4a4a); }
  body.bg-theme7 .location-popup-header { background: linear-gradient(45deg, #0c675e, #069e90); }
  body.bg-theme8 .location-popup-header { background: linear-gradient(45deg, #a52a04, #4f5f58); }
  body.bg-theme9 .location-popup-header { background: linear-gradient(45deg, #29323c, #485563); }
  body.bg-theme10 .location-popup-header { background: linear-gradient(45deg, #795548, #945c48); }
  body.bg-theme11 .location-popup-header { background: linear-gradient(45deg, #1565C0, #1E88E5); }
  body.bg-theme12 .location-popup-header { background: linear-gradient(45deg, #65379b, #886aea); }
  body.bg-theme13 .location-popup-header { background: linear-gradient(45deg, #ff5447, #f1076f); }
  body.bg-theme14 .location-popup-header { background: linear-gradient(45deg, #08a50e, #69bb03); }
  body.bg-theme15 .location-popup-header { background: linear-gradient(45deg, #6a11cb, #2575fc); }
  body.bg-theme16 .location-popup-header { background: linear-gradient(45deg, #6a11cb, #cccccc); }

  .location-popup-overlay {
      position: fixed;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background: rgba(0, 0, 0, 0.5);
      z-index: 9998;
      display: none;
  }
  .location-popup {
      position: fixed;
      background: #1f1f1f;
      border: 2px solid #667eea;
      border-radius: 8px;
      box-shadow: 0 10px 40px rgba(0, 0, 0, 0.8);
      z-index: 9999;
      display: none;
      max-width: 90vw;
      max-height: 90vh;
  }
  .location-popup-header {
      background: linear-gradient(45deg, #667eea 0%, #764ba2 100%);
      color: white;
      padding: 12px 15px;
      border-radius: 6px 6px 0 0;
      display: flex;
      justify-content: space-between;
      align-items: center;
  }
  .location-popup-close {
      background: none;
      border: none;
      color: white;
      font-size: 24px;
      cursor: pointer;
      padding: 0;
      width: 30px;
      height: 30px;
      display: flex;
      align-items: center;
      justify-content: center;
      border-radius: 4px;
  }
  .location-popup-close:hover {
      background: rgba(255, 255, 255, 0.2);
  }
  .location-popup-body {
      padding: 0;
      background: #2a2a2a;
  }
  .location-popup iframe {
      display: block;
      border: none;
      border-radius: 0 0 6px 6px;
  }
  .location-link:hover {
      text-decoration: underline;
  }
  /* Hide Leaflet logo/attribution in popup iframes */
  .location-popup .leaflet-control-attribution {
      display: none !important;
  }
  </style>

  <script>
  $(document).ready(function() {
      // Create popup elements
      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 currentMachineId = null;

      // Function to show popup with smart positioning
      function showLocationPopup(machineId, locationName, mouseEvent) {
          // Don't reload if same location
          if (currentMachineId === machineId && $popup.is(':visible')) {
              return;
          }

          currentMachineId = machineId;
          $title.text('Machine ' + locationName);

          // Load iframe
          $iframe.attr('src', './displaylocation.asp?machineid=' + machineId);

          // Position popup USING ONLY VIEWPORT COORDINATES
          // Popup is position:fixed, so we use clientX/Y directly
          var popupWidth = 440;
          var popupHeight = 400; // 340px map + 60px header

          // Mouse position in viewport (clientX/Y is relative to visible window)
          var mouseX = mouseEvent.clientX;
          var mouseY = mouseEvent.clientY;

          var windowWidth = window.innerWidth;
          var windowHeight = window.innerHeight;

          var left, top;

          // Horizontal positioning
          left = mouseX + 10;
          if (left + popupWidth > windowWidth - 10) {
              // Show to left of cursor instead
              left = mouseX - popupWidth - 10;
          }
          if (left < 10) {
              left = 10;
          }

          // Vertical positioning - below if space, otherwise above
          var spaceBelow = windowHeight - mouseY;
          var spaceAbove = mouseY;

          if (spaceBelow >= popupHeight + 20) {
              // Show below cursor
              top = mouseY + 10;
          } else if (spaceAbove >= popupHeight + 20) {
              // Show above cursor
              top = mouseY - popupHeight - 10;
          } else {
              // Not enough space - center vertically
              top = Math.max(10, (windowHeight - popupHeight) / 2);
          }

          // Final bounds check
          if (top < 10) {
              top = 10;
          }
          if (top + popupHeight > windowHeight - 10) {
              top = windowHeight - popupHeight - 10;
          }

          // Set position
          $popup.css({
              left: left + 'px',
              top: top + 'px',
              display: 'block'
          });

          // Show overlay and popup
          $overlay.fadeIn(200);
          $popup.fadeIn(200);
      }

      // Function to hide popup
      function hideLocationPopup() {
          $overlay.fadeOut(200);
          $popup.fadeOut(200);
          // Clear iframe after animation
          setTimeout(function() {
              $iframe.attr('src', '');
              currentMachineId = null;
          }, 200);
      }

      var hoverTimer = null;
      var isPopupOpen = false;

      // Hover handler for location links - show on hover with delay
      $('.location-link').on('mouseenter', function(e) {
          var $link = $(this);
          var machineId = $link.data('machineid');
          var locationName = $link.text().trim();
          var mouseEvent = e; // Store the event with mouse position

          // Clear any existing timer
          if (hoverTimer) {
              clearTimeout(hoverTimer);
          }

          // Show popup after brief delay (prevents accidental triggers)
          hoverTimer = setTimeout(function() {
              isPopupOpen = true;
              showLocationPopup(machineId, locationName, mouseEvent);
          }, 300); // 300ms delay
      });

      // Cancel popup if mouse leaves before delay
      $('.location-link').on('mouseleave', function() {
          if (hoverTimer) {
              clearTimeout(hoverTimer);
              hoverTimer = null;
          }
      });

      // Keep popup open when hovering over it
      $popup.on('mouseenter', function() {
          isPopupOpen = true;
      });

      // Close popup when mouse leaves popup
      $popup.on('mouseleave', function() {
          hideLocationPopup();
          isPopupOpen = false;
      });

      // Close on overlay click
      $overlay.on('click', hideLocationPopup);

      // Close on close button click
      $popup.find('.location-popup-close').on('click', hideLocationPopup);

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

</body>
</html>
