<?php
include("db/cn.php");
if(isset($_SESSION['user_name']) && isset($_SESSION['user_role'])) {
    $userName = $_SESSION['user_name'];
    $userRole = $_SESSION['user_role'];
}

// Retrieve products from the database
$products_query = "SELECT * FROM products";
$products_result = $connection->query($products_query);
?>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Product QR Detail</title>
    <!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css">
<link rel="stylesheet" href="css/custom_css.css" />
    <!-- QRCode.js -->
    <script src="https://cdn.rawgit.com/davidshimjs/qrcodejs/gh-pages/qrcode.min.js"></script>
</head>

<style>
/* Custom styles for sidebar */
    .sidebar {
    width: 100px;
    background-color: #8A1218;
    position: fixed;
    bottom: 0;
	top:60px;
    transition: transform 0.3s ease-in-out;
    transform: translateX(0);
    z-index: 1;
    height: 100%;
    border-radius: 0px;
}
    .sidebar.hide {
      transform: translateX(-100px); /* Move sidebar out of the viewport when it is hidden */
    }
       .sidebar .nav-item {
    padding: 10px 0 ;
    text-align: center;
    position: relative;
	font-size:12px;
}
    .sidebar .nav-link {
      color: #fff;
      position: relative; /* Ensure icon and text are positioned relative to the nav link */
      z-index: 2; /* Ensure the text and icon are above the hover background */
    }
    .sidebar .nav-link i {
      margin-bottom: 5px; /* Adjust the margin of the icon */
    }
    /* Custom styles for hover effect */
    .sidebar .nav-item:hover:after {
      background-color: #fff;
      content: '';
      position: absolute;
      left: 0;
      bottom: 0;
      width: 100%;
      height: 100%;
      z-index: 1; /* Ensure the hover background is below the text and icon */
    }
    .sidebar .nav-item:hover .nav-link {
      color: #8A1218;
    }
    /* Custom styles for divider */
    .sidebar .nav-item:after {
      content: "";
      position: absolute;
      left: 0;
      bottom: 0;
      width: 100%;
      height: 1px;
      background-color: #fff;
      transition: height 0.3s ease-in-out; /* Transition effect for smooth animation */
    }
    /* Custom styles for header */
    .header {
      background-color: #8A1218;
      color: #fff;
      padding: 10px;
      position: fixed;
      top: 0;
      width: 100%;
      z-index: 2;
	  height:69px;
	  box-shadow:#FFF 2px 0px 0px 0px; /* Ensure header appears above sidebar */
    }
    .header .navbar-toggler {
      color: #fff;
    }
    .header .navbar-toggler-icon {
      color: #fff; /* Set the color of the toggle button to white */
    }
    .header .navbar-toggler.white {
      color: #fff !important; /* Ensure the toggle button is white */
    }
    .header .navbar-brand {
      color: #fff; /* Set navbar brand text color to white */
    }
    .header .nav-item .nav-link {
      color: #fff; /* Set nav link text color to white */
    }
    .main-content {
      margin-top: 50px; /* Height of fixed header + padding */
      margin-left: 100px; /* Width of sidebar */
      padding-top: 30px; /* Height of fixed header */
    }
	/* Custom styles for search bar */
    .search-container {
      display: flex;
      align-items: center;
      width: 300px;
      margin: 2px auto;
    }
    .search-input {
      width: 100%;
      padding: 10px 30px 10px 10px; /* Adjust padding to accommodate the icon */
      border: 1px solid #ccc;
      border-radius: 20px;
      font-size: 16px;
    }
    .search-icon {
      position: relative;
      left: -25px; /* Adjust the position of the icon */
      color: #aaa;
    }
    .search-icon i {
      position: absolute;
      top: 50%;
      transform: translateY(-50%);
    }
.btn-dark
         {
			 background:#8A1218;
			 color:#fff;
			 border-radius:
                 	}
		.btn-dark:hover{
			background:#fff;
			 color:#8A1218;
			 border:1px solid #8A1218;
			}	
			.bg-dark2{
			background:#8A1218;
			color:#fff;	
				}	
	
	 .modal-content {
            animation: modal-animation 0.5s;
        }

        @keyframes modal-animation {
            from {
                opacity: 0;
                transform: scale(0.8);
            }
            to {
                opacity: 1;
                transform: scale(1);
            }
        }
</style>

<body>

<?php
if(isset($msg)){
	
	echo $msg;
	}
?>
<?php include("common/hd.php");?>
<!-- Sidebar -->
<?php include("common/sd.php"); ?>
<div class="main-content">
<br />

    <div class="container">
      <div class="row">
        <div class="col-sm-10">
            <div class="row text-center">
                <?php
                    // Fetch product data from the database
                    $sql = "SELECT id, name, price FROM products";
                    $result = $connection->query($sql);

                    if ($result->num_rows > 0) {
                        while ($row = $result->fetch_assoc()) {
                            // Set a unique ID for each product
                            $productId = $row["id"];
                            echo '<div id="product_' . $productId . '" class="col-sm-3 mb-3">
                                    <div class="card">
                                        <div class="card-body">
                                            <h5 class="card-title text-uppercase">' . $row["name"] . '</h5>
                                            <p class="card-text">Rs' . $row["price"] . '</p>
                                           <center> <div id="qrcode_' . $productId . '"></div></center>
                                            <br>
                                            
                                        </div>
                                    </div>
                                </div>';
                            echo '<script>
                                    var qrcode' . $productId . ' = new QRCode(document.getElementById("qrcode_' . $productId . '"), {
                                        text: "Product: ' . $row["name"] . '\\nPrice: $' . $row["price"] . '",
                                        width: 100,
                                        height: 100
                                    });
                                </script>';
                        }
                    }

                    // Close the database connection
                    $connection->close();
                ?>
                </div>
        </div>
        
        <div class="col-sm-1" >
        
        <a href="addproduct.php"><button type="button" class="btn btn-dark"><i class="fa fa-arrow-circle-left"></i></button></a>
        
        </div>    
       </div>
    </div>
    
    
</div>    
</body>

<script>
        function toggleSidebar() {
      document.getElementById("sidebar").classList.toggle("hide");
    }
	</script>
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
<!-- Popper JS -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>

</html>