Revonzy Mini Shell

<?php
include("header.php");

require_once("lib/functions.php");	
	$db = new login_function();
	$product_name = "";
	$actual_price = "";
	$selling_price = "";
	$owner_name = "";
	$adver_images = "";
	if(isset($_GET['tracking_id']))
	{
		$tracking_id	=	$_GET['tracking_id'];
		$_SESSION['current_tracking_id'] = $tracking_id;
	}
	else if(isset($_SESSION['current_tracking_id']))
	{
		$tracking_id	= $_SESSION['current_tracking_id'];
	}
	$details = $db->track_product_by_id($tracking_id);
	if(!empty($details))
	{
		    $counter =0;
		
			$id				=	$details[$counter][0];
			$prd_id			=	$id;
			$category		=	$details[$counter][1];
			$product_name	=	$details[$counter][2];
			$tags			=	$details[$counter][3];
			$description_main	=	$details[$counter][4];
			$actual_price	=	$details[$counter][5];
			$selling_price	=	$details[$counter][6];
			$added_by		=	$details[$counter][7];
			$home_delivery	=	$details[$counter][8];
			$p_images		=	$db->fetch_product_images_by_product_id($tracking_id);
			$pro_img		=	$p_images;
	}

$all_p_images = $db->fetch_product_all_images_by_product_id($tracking_id); // Get all image IDs for the product



$discount_value = $actual_price - $selling_price;

if ($actual_price > 0) {
    $discount_percentage = ($discount_value / $actual_price) * 100;
} else {
    $discount_percentage = 0; 
}

?>
<style type="text/css">
	.container1
	{
		
	}
.product-name
{
	font-size: inherit;
    font-weight: bold;
}
.reduced
{
	color: black;
	font-weight: 800;
	font-size: 18px;
	margin-top: -17px;
}
.discount
{
	color: green;
}
.taxes
{
	color: #ADADAD;
	font-size: 12px;
}

.add {
    display: flex;
    align-items: center;
    padding: 10px;
    border-radius: 15px;
    background: rgba(255, 255, 255, 0.1); 
    backdrop-filter: blur(10px);  
}
.single-w3agile
{
	height: auto;
	width: 100%;
}
.picture-frame
{
	border:1px solid red;
}

</style>
<!--content-->
<div class="content-top">
<div class="container">
<div class="spec">
	<h3 ><?php echo $product_name; ?> Products</h3>


<div class="ser-t">
	<b></b>
	<span><i></i></span>
	<b class="line"></b>
</div>
</div>
<div class="single">
<div class="container">

<div class="container1">
	<div class="single-top-main" >
		<div class="col-md-5 single-top" style="display:flex;">
			<div class="image-gallary-sidebar" style="display: flex; flex-direction: column; align-items: center; padding: 15px; border: 1px solid #e0e0e0;height: 400px; overflow-y: auto;">

			    <?php
			    $all_p_images = $db->fetch_product_all_images_by_product_id($tracking_id); 
			    if ($all_p_images) 
			    {
			        foreach ($all_p_images as $image_path) 
			        {
			            if ($image_path != "") {
			                echo '<img src="product/' . $image_path . '" data-src="product/' . $image_path . '" onclick="changeIt(this)" alt="" class="img-responsive" style="height: 70px; width: 100%; object-fit: fill; margin-bottom: 10px; border: 1px solid #D6D6D6; cursor:pointer;" />';
			            } else {
			                echo '<img src="/images/no-image.png" height="90" width="70">';
			            }
			        }
			    } else 
			    {
			        echo '<img src="/images/no-image.png" height="90" width="70">';
			    }
			    ?>
			</div>
<script>
//Function to change image of main display
function changeIt(img)
{
    var name = img.src;
    //alert(name);
    $('#picture-frame').children('img').attr('src', name);
    //document.getElementById("main_img_display").src=name;
}
</script>
			<div class="single-w3agile" style="border:1px solid #D6D6D6;">
			    <div id="picture-frame" style="border:1px solid #D6D6D6;">

			        <?php
			            if($p_images != "")
			            {
			        ?>
			            <img src="product/<?php echo $p_images; ?>" data-src="product/<?php echo $p_images; ?>" alt="" class="img-responsive" id="main_img_display" style="height:340px; width:auto !important;"/>

			        <?php
			            }
			            else
			            {
			        ?>
			            <img src="/images/no-image.png" height="90" width="70">
			        <?php
			            }
			        ?>
			    </div>
			</div>

		<script src="js/jquery.zoomtoo.js"></script>
		<script>
			$(function() {
				$("#picture-frame").zoomToo({
					magnify: 0.8
				});
			});
		</script>
			</div>
			</div>
			 <div class="col-md-7 single-top-left">
            <div class="single-right">
                <h1 class="product-name" style="font-size: 22px; font-weight: bold;text-decoration: underline;"><?php echo $product_name; ?></h1>
                <hr style="border:1px solid #EFEFEF;" />
                <div class="pr-single" style="margin-top:15px" >
                    <p>MRP <del>₹<?php echo $actual_price; ?></del></p>
                </div>
                <div style="display: flex; align-items: center;margin-top: 10px;">
                    <p class="reduced" style="font-size: 18px; font-weight: bold; color: #CC0000;">Price: ₹<?php echo $selling_price; ?></p>
                    <p style="margin-top: -15px; margin-left: 10px; font-size: 16px; color: #888;">(₹0.16/g)</p>
                </div>
                <div class="discount" style="font-size: 16px; color: green;margin-top: 5px;">
                      You Save <?php echo round($discount_percentage, 2); ?>% off (₹<?php echo round($discount_value, 2); ?>)

                </div>
                <div class="taxes" style="font-size: 16px; color: #555;margin-top: 10px;">
                    (inclusive of all taxes)
                </div>
                <p style="font-size: 14px; margin-top: 10px;"><?php echo $description_main; ?></p>
                
                <!-- Add to Cart Section -->
                <div class="add" style="margin-top: 20px;">
                    <a href="#" class="plus_button btn btn-primary" style="font-size: 16px; font-family: Cambria; background-color: #CC0000; font-weight: bold; padding: 8px 20px; border: none; text-decoration: none; color: white;margin-left: -10px;">Add to Cart</a>
                    <div style="padding: 10px;">
                        <a href="#" class="minus_button" style="font-size: 18px; color: #CC0000; text-decoration: none;">-</a>
                        <input type="text" style="width: 50px; text-align: center;" value="1" class="field" />
                        <input type="hidden" value="<?php echo $id; ?>" class="val_id" />
                        <input type="hidden" value="<?php echo $selling_price; ?>" class="val_price" />
                        <a href="#" class="plus_button" style="font-size: 18px; color: #CC0000; text-decoration: none;">+</a>
                    </div>
                    <br />
                </div>
            </div>
			</div>
		</div>
	   </div>	
	</div>
	   
	   <br />
	   
	   <hr style="border-bottom:1px solid #DFDFDF" />
	   
		<!--content-->
<div class="content-top" style="padding-top:2em !important;">
<div class="container ">
<div class="spec ">
<h3 style="color:green !important;">RELATED PRODUCTS</h3>

</div>
<div class="tab-head">
	
<div class=" tab-content tab-content-t ">
<div class="tab-pane active text-style" id="tab1">
<?php
$search = "";
$details = $db->fetch_search_product_by_search_name($category);
if(!empty($details))
{
$counter =0;
foreach($details as $record)
{
	$id				=	$details[$counter][0];
	$category		=	$details[$counter][1];
	$product_name	=	$details[$counter][2];
	$tags			=	$details[$counter][3];
	$description	=	$details[$counter][4];
	$actual_price	=	$details[$counter][5];
	$selling_price	=	$details[$counter][6];
	$home_delivery	=	$details[$counter][7];
	$p_images		=	$db->fetch_product_images_by_product_id($id);
?>

<div class="con-w3l">
<div class="col-md-2 m-wthree" >
	<div class="col-m" style="border:1px solid white !important;">	
		<div class="img_div">
		<a href="#" data-toggle="modal" data-target="#myModal1" class="offer-img">
			<img src="product/<?php echo $p_images; ?>" class="img-responsive prodcts" alt="">
		</a>
		</div>
		<div class="mid-1" style="padding:0px;">
		<a href="product-display.php?tracking_id=<?php echo $id; ?>">
			<div class="women" style="text-align:center !important;">
							<p style="text-align:center !important; font-size:16px;" ><label style="text-decoration: line-through;"> &#8377 <?php echo $actual_price; ?></label><em class="item_price" style="color:red; font-weight:bold;"> &#8377 <?php echo $selling_price; ?></em></p>

			<div class="title_div">	<span class="pr_title"><?php echo $product_name; ?></span>	</div>
				
			</div>
			<br />
			<div class="add">
			<a href="#" class="minus_button"> - </a>
			<input type="text" style="width:50px" value="1" class="field" />
			<input type="hidden" value=<?php echo $id; ?> class="val_id" />
			<input type="hidden" value=<?php echo $selling_price; ?> class="val_price" />
			<a href="#"  class="plus_button">+</a>	
		
			<br />
		
			<a href="#"  class="plus_button btn btn-primary" style="font-size:14px; font-family:Cambria; background-color:#0070C0; font-weight:bold; padding:5px; margin-top:5px;">Add to Cart</a>
			  
			</div>
			</a>
		</div>
		
	</div>
</div>

</div>


<?php
$counter ++;
}
}
?>
	<div class="clearfix"></div>
 </div>
</div>
</div>
</div>
</div>		 
				
	</div>
</div>
</div>
</div>

<hr style="border-bottom:1px solid #DFDFDF" />

<?php
	include("footer.php");
?>
<!-- //footer-->

<!-- smooth scrolling -->
<script type="text/javascript">
$(document).ready(function() {
/*
var defaults = {
containerID: 'toTop', // fading element id
containerHoverID: 'toTopHover', // fading element hover id
scrollSpeed: 1200,
easingType: 'linear' 
};
*/								
$().UItoTop({ easingType: 'easeOutQuart' });
});
</script>
<a href="#" id="toTop" style="display: block;"> <span id="toTopHover" style="opacity: 1;"> </span></a>
<!-- //smooth scrolling -->
<!-- for bootstrap working -->
		<script src="js/bootstrap.js"></script>
<!-- //for bootstrap working -->
<script type='text/javascript' src="js/jquery.mycart.js"></script>
  
  
 



	
	
	
</body>
</html>