<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
      
    <title>Document</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet">
  <!-- Bootstrap Icons -->
  <link href="https://cdn.jsdelivr.net/npm/bootstrap-icons/font/bootstrap-icons.css" rel="stylesheet">
<link href="style.css" rel="stylesheet">
</head>
<body>
   <?php
   $id=$_GET['id'];
                    include('admin-panel/dist/includes/connection.php');
                    $sql="select * from product_add where id='$id'";
                    $result=mysqli_query($con,$sql);
                    $data=mysqli_fetch_assoc($result);
                    
                   ?>
   
        <div class="container">
            <div class="row justify-content-center">
                <div class="col-md-6 details-img mt-5 "  >
                    <img src="admin-panel/dist/products/<?php echo $data['image']; ?>" alt="" >
                </div>
                <div class="col-md-6 mt-5 details ">
                    <h1><?php echo $data['name']; ?></h1>
                    <p> In Stock Be the first to review this product</p>
                    <div style="border-bottom: 1px solid silver;"></div>
                    <h5 class="mt-3">M.R.P.:</h5>
                    <div style="display: flex;">
                      <div><s style=" text-decoration-color: red;  text-decoration-thickness: 1.5px;"><h3 class="mt-3"><?php echo $data['price_1']; ?></h3></s> </div>
                      <div>
                        <button class="btn btn-danger mt-3 ms-5">50% OFF</button>
                      </div>
                    </div>
                   
                   <h3 class="mt-3"><?php echo $data['price_2']; ?></h3>
                    <div class="d-flex details-button mt-3">
                        <a href="#" class="btn btn-primary">ADD TO CART</a>
                        <a href="checkout.php" class="btn btn-primary ms-3">BUY NOW</a>
                        
                    </div>
                    <div class=" mt-4 d-flex" style="justify-content: space-evenly; ">
                       <div class="details-icon"><i class="bi bi-facebook"></i></div> 
                       <div class="details-icon"><i class="bi bi-twitter"></i></div> 
                     <div class="details-icon"><i class="bi bi-whatsapp"></i></div>   
                       <div class="details-icon"> <i class="bi bi-instagram"></i></div>
                    </div>
                  
                </div>
            </div>
        </div>
        <div class="container mt-5">
            <div class="gallary-image d-flex ">
                        <div class="gallary-image-sub"><img src="admin-panel/dist/products/<?php echo $data['image']; ?>" alt=""></div>
                        <div class="gallary-image-sub ms-4"><img src="image/bat_vault.jpg" alt=""  ></div>
                        <div class="gallary-image-sub ms-4"><img src="image/accessories-category.jpg" alt="" ></div>
                        <div class="gallary-image-sub ms-4"><img src="image/chase_pro_cricket_bat.jpg" alt=""  ></div>
                         <div class="gallary-image-sub ms-4"><img src="image/accessories-category.jpg" alt="" ></div>
                    </div>
        </div>

        <div class="container mt-5">
            <h3>DESCRIPTION</h3>
               <div style="border-bottom: 1px solid silver;"></div>
                
    <div class=" p-3 border border-top-0" >
      
      <div class="">
        <h5 class="font-weight-bold">SS Limited Edition Cricket Kit Bag (wheel)</h5>
        <ul>
          <li>Package contents: 1 kit bag</li>
        </ul>

        <h6 class="mt-3">Product size</h6>
        <ul>
          <li>Height: 34.29 cm</li>
          <li>Width: 34.29 cm</li>
          <li>Length: 99 cm</li>
          <li>Weight Range: 2680 to 2720 Grams</li>
          <li>Capacity: 105 Ltr</li>
          <li>Material: 1600D Pvc</li>
          <li>Color: Black</li>
          <li>1 Main Compartment</li>
        </ul>
      </div>

        </div>

</body>
<!-- Bootstrap JS -->
 <script>
  let detail_img=document.querySelector(".details-img img");
  let sub_img=document.querySelectorAll(".gallary-image-sub img");
  let n=sub_img.length;
  for(let i=0;i<n;i++){
  sub_img[i].onmouseover=function(){
    detail_img.src=sub_img[i].src;
  }
  }
 </script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"></script>
</html>