<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link href="css/booth.css" rel="stylesheet">
  <link href="css/networking.css" rel="stylesheet">
  <link href="https://www.jqueryscript.net/css/jquerysctipttop.css" rel="stylesheet" type="text/css">
  <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
  <script src="js/networkingjs.js"></script>
  <title>Virtual Booth</title>
</head>
<body>
  
  <div id="hotspotImg" class="responsive-hotspot-wrap row">
    <!--<img src="Booth1.png" class="img-responsive" alt="" width="1920" height="700">-->
	<img id="mainImage" src="" class="img-responsive" alt="" width="1920" height="700">
  <a href="/logout" class="logout-btn">Logout</a>
  <div class="left-buttons">
    <button class="button-3d" onclick="handleVideoHotspotClick(companyId);"><i class="fas fa-video"></i> Product Videos</button>
    <button class="button-3d" onclick="handleDocumentHotspotClick(companyId);"><i class="fas fa-file-alt"></i> Brochures</button>
    <button class="button-3d" onclick="openChat(companyId);"><i class="fas fa-users"></i> Connect With The Team</button>
    <!-- <button class="button-3d"><i class="fas fa-calendar-check"></i> Book An Appointment</button> -->
</div>

<div class="right-buttons">
    <button class="button-3d" onclick="handleImageHotspotClick(companyId);"><i class="fas fa-image"></i> Product Images</button>
    <button class="button-3d" onclick="handleBusinessCardClick(companyId);"><i class="fas fa-id-card"></i> Business Card</button>
    <button class="button-3d"><i class="fas fa-share-alt"></i> Social Media</button>
    <!-- <button class="button-3d"><i class="fas fa-comment-dots"></i> Feedback</button> -->
</div>

<div class="bottom-nav">
    <button class="nav-button" onclick="history.back()"><i class="fas fa-arrow-left"></i> Back</button>
    <button class="nav-button"onclick="window.location.href='networking.html';"><i class="fas fa-network-wired"></i> Networking Lounge</button>
    <button class="nav-button"onclick="window.location.href='lobby.html';"><i class="fas fa-door-open"></i> Lobby</button>
    <button class="nav-button"onclick="window.location.href='webinar.html';"><i class="fas fa-chalkboard-teacher"></i> Webinar Hall</button>
</div>
    <!-- <div class="hot-spot hotspot1" id="hotspot1" x="266" y="582" data-content-type="image">
      <div class="circle hotspot1"></div>
      <div class="tooltip">
        <div class="text-row">
          <h4>Images</h4>
          <p>This is the image</p>
        </div>
      </div>
    </div>

    <div class="hot-spot hotspot2" id="hotspot2" x="1171" y="224" data-content-type="video">
      <div class="circle hotspot2"></div>
	    <div class="tooltip">
        <div class="text-row">
          <h4>Video hotspot</h4>
          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore
            magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
            consequat.</p>
        </div>
      </div>
    </div>

    <div class="hot-spot hotspot3" id="hotspot3" x="1052" y="108" data-content-type="document">
      <div class="circle"></div>
	     <div class="tooltip">
        <div class="text-row">
          <h4>Documents</h4>
          <p>Click to view documents list</p>
        </div>
      </div>
    </div>
  </div> -->

  <!-- Bootstrap Modal Structure -->
  <div id="myModal" class="modal fade" role="dialog">
    <div class="modal-dialog">
      <!-- Modal content-->
      <div class="modal-content">
        <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal">&times;</button>
          <h4 class="modal-title">Modal Title</h4>
        </div>
        <div class="modal-body">
          <!-- Content dynamically inserted here -->
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        </div>
      </div>
    </div>
  </div>

 
  <!-- Include the full version of jQuery -->
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

<!-- Include Popper.js -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/2.10.2/umd/popper.min.js"></script>

<!-- Include Bootstrap JavaScript -->
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>

<!-- Your custom scripts -->
<script src="js/jquery.hotspot.js"></script>
<script src="js/booth.js"></script>
<script>
    // Function to get URL parameters
    function getParameterByName(name, url) {
        if (!url) url = window.location.href;
        name = name.replace(/[\[\]]/g, "\\$&");
        var regex = new RegExp("[?&]" + name + "(=([^&#]*)|&|#|$)"),
            results = regex.exec(url);
        if (!results) return null;
        if (!results[2]) return '';
        return decodeURIComponent(results[2].replace(/\+/g, " "));
    }

    // Get the value of the "image" parameter from the URL
    var imageUrl = getParameterByName('image');
    var companyId = getParameterByName('companyId');

// Set the data-company-id attribute for the hotspots
  $('.hot-spot').attr('data-company-id', companyId);
    // Check if the parameter is present
    if (imageUrl) {
        // Change the image source or perform any other dynamic content update
        var imageElement = document.getElementById('mainImage'); // Assuming you have an <img> element with ID 'mainImage'
        if (imageElement) {
            imageElement.src = imageUrl;
            // You can also update other attributes or content based on your requirements
        }
    }
</script>

</body>
</html>
