<?php   
session_start();
ob_start(); //এটা এবং এর ইনড-ফ্লাস না দিলে; যদি নেট গতি কম হয় তাহলে ডাটাবেজ পাবে না।

 

include("configa.php");

// if( isset($_SESSION['mobile']) ){
//   echo "আমার মোবাইল নাম্বার :" .$_SESSION['mobile'];
// }
// Start capturing the output of the category display
if( isset($_GET['id']) && isset($_GET['ref']) ){
  $id = $_GET['id'];
  $ref = $_GET['ref'];
}else{
  $id = 1; //এই কোড $id = 1; না দিলে; যদি সরাসরি view.php হিট করে; তাহলে Error দেখাবেন//
  $ref = '';
}
?>




<style type="text/css">



  *{
    border: solid 0pt;
  }


/*
.to_card{
  font-family: sutonnyOMJ; 
  z-index: 20000;

  padding: 8px 15px;
  background-color: #007bff;
  color: white;
  border-radius: 5px;
  cursor: pointer;
  display: inline-block; /* span যেহেতু, তাই প্যাডিং এর জন্য এটি ব্যবহার করা ভালো */
 /* font-size: 16px;
  user-select: none; /* টেক্সট সিলেক্ট হওয়া থেকে বিরত রাখে */
 /* transition: background-color 0.3s ease; /* হোভার ইফেক্টের জন্য */
/*}


.to_card :hover {
  padding: 7pt; 
  background-color: #D608E3;
  border-radius: 5pt; 
  font-family: sutonnyOMJ; 
  font-size: 15pt;
}

*/




.to_card{
  position: fixed;  /* এটি বাটনকে স্ক্রিনের একটি নির্দিষ্ট স্থানে স্থির রাখবে */
  bottom: 0%;
  padding: 12pt;
  /*background-color: #439DDF;*/
  background-color: #FD0707;
  font-family: sutonnyOMJ;
  font-size: 20pt;
  cursor: pointer;
  z-index: 20000;
  width: 100%;
  text-align: center;
  box-sizing: border-box;
  color: yellow;

}


.rain {
 position: absolute;
 width: 100%;
 height: 100%;
 top: 0;
 left: 0;
 pointer-events: none; /* বৃষ্টির কণা যেন ক্লিক ইভেন্টে বাধা না দেয় */
}

.drop {
  background: rgba(255, 255, 255, 0.3); /* হালকা সাদা রঙের ফোঁটা */
  position: absolute;
  bottom: 100%;
  border-radius: 50%;
  opacity: 0;

  /* এখানেই animation যোগ করতে হবে */
  animation-name: fall;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
}


@keyframes fall {
  from {
    transform: translateY(0);
    opacity: 1;
  }
  to {
    transform: translateY(200px); /* কতদূর পর্যন্ত ফোঁটা পড়বে */
    opacity: 0;
  }
}


a{
  text-decoration: none;
  color: #000;
}

.zoom_area {
  width: 40%;
  height: 300px;
  background-color: #f0f0f0;
  border: 1px solid #ccc;
  overflow: hidden;
  display: none;

  position: absolute;
  left: 55%;
  top: 15pt;
  z-index: 200;
}

.close_zoom {
  position: absolute;
  top: 5px;
  right: 8px;
  font-size: 40px;
  font-weight: bold;
  color: #333;
  cursor: pointer;
  z-index: 201
}

.close_zoom:hover {
  color: red;
}


.zoomed_image_content {
  position: absolute;
  top: 0;
  left: 0;
  transform-origin: top left; /* Ensures zoom starts from top-left of the original image */
}

.img_order_payment_container{
  /*border: solid red 1pt; */
  /*background-color: #F8F7DB; */
  background-color: #fff; 
  padding: 10pt;
   
 /* background-color:#ABABAB; */
  width: 85%;
  box-sizing: border-box;
  margin-left: auto;
  margin-right: auto;
}


.img_order_payment{  
  padding: 10pt;
  margin : 10pt;
  display: flex;
  flex-direction: row; 
  justify-content: center;
  background-color: #fff;
  box-shadow: -1px 0px 15px rgb(0 0 0 / 20%);
  box-sizing: border-box;

}


.product_image{
  display: flex;
  flex-grow: 1;
  justify-content: center;
  align-items: center;
  margin : 5pt;
}


.order_box{
  padding: 5pt;
  margin : 5pt;
  background-color: #fff;
  font-family: sutonnyOMJ;
}


.payment_box{
  padding: 5pt;
  background-color: #fff;
  font-family: sutonnyOMJ;
  line-height: 12pt;
}



.heading_box{
  margin-left: 10pt;
  margin-right: 10pt;
  margin-top: 10pt;
  margin-bottom: 0pt;
  box-sizing: border-box;
  /*background-color: #699C91; */
  background-color: #20AA05; 
  text-align: center;
  font-family: sutonnyOMJ; 


  position: relative;
  padding: 8px;
  text-align: center;
  color: #fff;
  font-size: 15px;
  overflow: hidden;

}


.heading_details{
  padding: 10pt;
  margin-left: 10pt;
  margin-right: 10pt;
  margin-top: 0pt;
  margin-bottom: 10pt;
  box-sizing: border-box;
  background-color: #fff; 
  text-align: center;
  font-family: sutonnyOMJ; 
  text-align: left;
    box-shadow: -1px 0px 15px rgb(0 0 0 / 20%);

}



 
    .quantity-control {
    display: flex;
    align-items: center;
    border: 1px solid #ccc;
    width: fit-content;
    border-radius: 4px;
    overflow: hidden;
}

.quantity-control span {
    padding: 8px 12px;
    cursor: pointer;
    background-color: #f0f0f0;
    user-select: none; /* Prevent text selection on click */
}

.quantity-control span:hover {
    background-color: #e0e0e0;
}

.quantity-input {
    width: 40px;
    text-align: center;
    border: none;
    padding: 8px 0;
    -moz-appearance: textfield; /* Hide arrows for Firefox */
}

.quantity-input::-webkit-outer-spin-button,
.quantity-input::-webkit-inner-spin-button {
    -webkit-appearance: none; /* Hide arrows for Chrome, Safari, Edge */
    margin: 0;
}
  
/*----------কার্ডের কোয়ন্টিনি----------*/

    .quantity-control_card {
    display: flex;
    align-items: center;
    border: 1px solid #ccc;
    width: fit-content;
    border-radius: 4px;
    overflow: hidden;
}

.quantity-control_card span {
    padding: 8px 12px;
    cursor: pointer;
    background-color: #f0f0f0;
    user-select: none; /* Prevent text selection on click */
}

.quantity-control_card span:hover {
    background-color: #e0e0e0;
}

.quantity-input_card {
    width: 40px;
    text-align: center;
    border: none;
    padding: 8px 0;
    -moz-appearance: textfield; /* Hide arrows for Firefox */
}

.quantity-input_card::-webkit-outer-spin-button,
.quantity-input_card::-webkit-inner-spin-button {
    -webkit-appearance: none; /* Hide arrows for Chrome, Safari, Edge */
    margin: 0;
}
  




        .message {
            margin-top: 15px;
            color: green;
            font-weight: bold;
        }


        .rating-container {
            display: flex;
            align-items: center;
        }
        .stars {
            font-size: 20pt;
            color: gold; /* তারকার রঙ */
        }
        .review-count {
            font-size: 10pt;
            margin-left: 5pt; /* তারকা এবং রিভিউ সংখ্যার মধ্যে দূরত্ব */
            color: #555;
        }






#holiCanvas {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.product_img{
  border: solid #0284C7 1pt;
}


@media screen and (max-width: 1024px){
  .img_order_payment{  
  display: flex;
  flex-direction: column;  
}


.img_order_payment_container{
  width: 100%;
  padding: 0pt;
  box-sizing: border-box;
}



.tab-buttons {
    flex-direction: column;
    width: 100%;
}

.tab-button {
    width: 100%;
    text-align: center;
}


.zoom_area {
  width: 90%; /* Adjust as needed, but let it fill the order_box */
  height: 300px; /* Set a fixed height for the zoom area */
  background-color: #f0f0f0; /* Just for visualization */
  border: 1px solid #ccc;
  overflow: hidden; /* Important to hide the overflowing zoomed image */
  display: none; /* Hidden by default */
    position: absolute; 
    left: 50%;
    top: 10%; 
    transform: translate(-50%, 0);
    z-index: 200; 
}



.to_card{
  position: fixed;  /* এটি বাটনকে স্ক্রিনের একটি নির্দিষ্ট স্থানে স্থির রাখবে */
  bottom: 0%;

  padding: 12pt;
  /*background-color: #439DDF;*/
  background-color: #FD0707;
  font-family: sutonnyOMJ;
  font-size: 15pt;
  cursor: pointer;
  z-index: 20000;
  width: 100%;
  text-align: center;
  box-sizing: border-box;

}


.rain {
 position: absolute;
 width: 100%;
 height: 100%;
 top: 0;
 left: 0;
 pointer-events: none; /* বৃষ্টির কণা যেন ক্লিক ইভেন্টে বাধা না দেয় */
}

.drop {
  background: rgba(255, 255, 255, 0.3); /* হালকা সাদা রঙের ফোঁটা */
  position: absolute;
  bottom: 100%;
  border-radius: 50%;
  opacity: 0;

  /* এখানেই animation যোগ করতে হবে */
  animation-name: fall;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
}


@keyframes fall {
  from {
    transform: translateY(0);
    opacity: 1;
  }
  to {
    transform: translateY(200px); /* কতদূর পর্যন্ত ফোঁটা পড়বে */
    opacity: 0;
  }
}



}

</style>







<div class="img_order_payment_container">







  <?php 
 

$stmt = $conn->prepare("SELECT * FROM goods_category WHERE id = ?");
$stmt->bind_param("i", $id);
$stmt->execute();
$result2 = $stmt->get_result();




    while ($row2 = mysqli_fetch_object($result2) ) {?>  


  <div  class="img_order_payment">
   <div class="product_image">
      <img style="width: 70%;" class="product_img" src='<?php echo "category/$row2->category_picture";?>'>      
   </div>

   

<div class="order_box">

<input type="hidden" name="category_name" class="category_name_input" value="<?php echo $row2->category_name; ?>">
<input type="hidden" name="category_picture_prod_indi" class="category_picture_input" value="<?php echo $row2->category_picture; ?>">

<p style="line-height: 12pt;">
<strong>
  <span style="font-size: 20pt;"><?php echo"পণ্য : "."$row2->product_name";?>    
  </span>
</strong>
<input hidden="" type="" name="product_name" class="product_name" value="<?php echo$row2->product_name;?>"> 

<!-- ----------------- --> <br>
<?php echo"ক্যাটাগরী :"." $row2->item";?>
<input type="hidden" name="item" class="item_input" value="<?php echo $row2->item; ?>"> 
<!-- ----------------- --> <br>
<?php echo"সিরিয়াল নং :"." $row2->gks";?>
<input type="hidden" name="gks" class="gks_input" value="<?php echo$row2->gks; ?>"> 
<!-- ----------------- --> <br>
<?php echo"বিক্রেতা :"." $row2->seller";?>
<input type="hidden" name="seller" class="seller_input" value="<?php echo $row2->seller; ?>"> 
<!-- ----------------- --> 
</p>
<br>

<hr>


<br>
<br>
<div style="border-bottom: solid 1pt;"></div>
<br>


<div style="display: flex; flex-direction: row; ">

    <strong><span style="font-size: 20pt; margin : 5pt; color: red;" ‍ ><?php echo"Taka :"." $row2->current_price  ";?></span>
    <input type="hidden" name="current_price" class="current_price_input" value="<?php echo $row2->current_price; ?>">
    </strong>


    <span style="font-size: 18pt; margin : 5pt; text-decoration: line-through; color: #969496"><?php echo ""."  $row2->price";?>
    <input type="hidden" name="price" class="price_input" value="<?php echo $row2->price; ?>"> 
    </span>


    <span style="font-size: 12pt; margin : 5pt; color: #097EF7; "  ><?php echo ""."  $row2->discount Off";?>
    <input type="hidden" name="discount" class="discount_input" value="<?php echo $row2->discount; ?>"> 
    </span>

</div>



    <div class="rating-container">
        <span class="stars" id="productStars">*****</span>
        <span class="review-count" id="productReviews">0 Review(S)</span>
    </div>

<!-- 
    <button onclick="updateRating(4, 15)">৪ স্টার, ১৫ রিভিউ</button>
    <button onclick="updateRating(3.5, 7)">৩.৫ স্টার, ৭ রিভিউ</button>
    <button onclick="updateRating(5, 120)">৫ স্টার, ১২০ রিভিউ</button>

     -->

<div style="display: flex; flex-direction: row;">
  <div class="quantity-control">
      <span class="minus">-</span>
      <input type="text" name="quantity_input" value="1" class="quantity-input">
      <span class="plus">+</span>
    </div>
<!--   <span onclick="pordaShowAddToCard(); showMotDeliverSorbomot(); setZIndicesSmalForAll();" class="to_card" style="margin-left: 10pt;" > মেমোতে যোগ করুন </span> -->
</div>

<br>
<br>
<div style="border-bottom: solid 1pt;"></div>
<br>

<span hidden="">
    <input type="hidden" name="weight" class="weight_input" value="<?php echo $row2->weight; ?>"> 
</span>



<span>Call : 018</span>

<br>
<br>
<div style="border-bottom: solid 1pt;"></div>
<br>



</div>




   <div class="payment_box">
        
      <p>
      <strong style="color: blue;">
      ডেলিভারী বৃত্তান্ত
      </strong> <br>
      ডেলিভারী এলাকা : সমগ্র বাংলাদেশ।
     </p>

      
   </div>


</div>

<div class="zoom_area">
  <span class="close_zoom">&times;</span>
</div>

  

<div class="heading_box holi-animation" style="width: 100%;">  
  <strong> একাধিক পণ্য অর্ডারে ডেলিভারী চার্জে ছাড় রয়েছে। </strong>
  <!-- <canvas id="holiCanvas"></canvas> -->
</div>



<hr>


<div class="heading_details" style="width: 100%;">

      

  <div class="tab-buttons">
    <button class="tab-button active" data-target="descriptionChild">Description</button>
    <button class="tab-button" data-target="specificationChild">Specification</button>
    <button class="tab-button" data-target="vendor-infoChild">Vendor Info</button>
    <button class="tab-button" data-target="customer-reviewsChild">Customer Reviews</button>
    <button class="tab-button" data-target="question-&-answerChild">Q&A</button>
  </div>

  <div class="description">
    <div class="descriptionChild tab-content active">

      <?php echo "$row2->description"; ?>
          <input type="hidden" name="description" class="description_input" value="<?php echo $row2->description; ?>"> 
    </div>
  </div>

  <div class="specification">
    <div class="specificationChild tab-content">
      <?php echo "$row2->specification"; ?>
          <input type="hidden" name="specification" class="specification_input" value="<?php echo $row2->specification; ?>"> 
    </div>
  </div>

  <div class="vendor-info">
    <div class="vendor-infoChild tab-content">
          <?php echo "$row2->vendor_info"; ?>
          <input type="hidden" name="vendor_info" class="vendor_info_input" value="<?php echo $row2->vendor_info; ?>"> 
    </div>
  </div>

  <div class="customer-reviews">
    <div class="customer-reviewsChild tab-content">
        <?php echo "$row2->customer_review"; ?>
        <input type="hidden" name="customer_review" class="customer_review_input" value="<?php echo $row2->customer_review; ?>">
    </div>
  </div>

  <div class="question-&-answer">
    <div class="question-&-answerChild tab-content">
        <?php echo "$row2->question_and_answer"; ?>
        <input type="hidden" name="question_and_answer" class="question_and_answer_input" value="<?php echo $row2->question_and_answer; ?>">
    </div>
  </div>

</div>


<?php }?>




<style type="text/css">
  .tab-buttons {
  display: flex;
  gap: 10px;
  margin-bottom: 10px;
}

.tab-button {
  padding: 8px 12px;
  background-color: #eee;
  border: 1px solid #ccc;
  cursor: pointer;
}

.tab-button.active {
  background-color: #007bff;
  color: white;
}

.tab-content {
  display: none;
  padding: 10px;
  border: 1px solid #ddd;
}

.tab-content.active {
  display: block;
}

</style>


</div>






  <!-- ------------------------------------ -->





<div style="width: 85%; margin-left: auto; margin-right: auto;" class="catagory_display_container">



  <?php 


  $for_as_item = mysqli_query($conn,"SELECT * FROM goods_category where id ='$id'") or die(mysqli_error($conn));
  $row_as_item = mysqli_fetch_object($for_as_item);


 
  $result_item = mysqli_query($conn,"SELECT * FROM goods_category where item = '$row_as_item->item' order by item ") or die(mysqli_error($conn));


  while ($rowItem = mysqli_fetch_object($result_item) ) {?>  


  <div class="catagory_display">
  <div class="catagory_display_inner" style="background-color: #FDE8C0; padding: 5pt; box-sizing: border-box;  display: flex; flex-direction: column; box-sizing: border-box;"  >
  <div>    
    <strong>  
    <a class="category_name" href="#" data-category="Food"><?php echo$rowItem->product_name;?></a>    
    </strong>    
  </div>

  <a href="product_individual.php?id=<?php echo$rowItem->id?>&ref=<?php echo$ref?>" data-category="Food">
  <img class="category_image" src='<?php echo"category/$rowItem->category_picture";?>'>  
  </a>

  <div>
    <a class="aro" style="color: blue;" href="category_as_individual.php?catagory=<?php echo$rowItem->category_name?>&item=<?php echo$rowItem->item?>&ref=<?php echo$ref?>" data-category="Food"><?php echo "আরও-->>";?></a>
  </div>
    
   

  </div>

  </div>
  <?php }?>



<!-- -------------------------------- -->




  <?php 

  $result3 = mysqli_query($conn,"SELECT item, MIN(category_name) as category_name, MIN(category_picture) as category_picture 
FROM goods_category
GROUP BY item;") or die(mysqli_error($conn));


  while ($row3 = mysqli_fetch_object($result3) ) {?>  


  <div class="catagory_display">
  <div class="catagory_display_inner" style="background-color: #FDE8C0; padding: 5pt; box-sizing: border-box;  display: flex; flex-direction: column; box-sizing: border-box;"  >
  <div>    
    <strong>  
    <a class="category_name" href="#" data-category="Food"><?php echo$row3->item;?></a>    
    </strong>
  </div>

  <a href="category_as_individual.php?catagory=<?php echo$row3->category_name?>&item=<?php echo$row3->item?>&ref=<?php echo$ref?>" data-category="Food">
  <img class="category_image" src='<?php echo"category/$row3->category_picture";?>'>  
  </a>

  <div>
    <a class="aro" style="color: blue;" href="category_as_individual.php?catagory=<?php echo$row3->category_name?>&item=<?php echo$row3->item?>&ref=<?php echo$ref?>" data-category="Food"><?php echo "আরও-->>";?></a>
  </div>
    
   

  </div>

  </div>
  <?php }?>







</div>




<script type="text/javascript">


document.addEventListener('DOMContentLoaded', function() {
    const productImg = document.querySelector('.product_img');
    const zoomArea = document.querySelector('.zoom_area');

    if (productImg && zoomArea) {
        let zoomedImageContent = document.createElement('img');
        zoomedImageContent.classList.add('zoomed_image_content');
        zoomedImageContent.src = productImg.src; // Set the source of the zoomed image
        zoomArea.appendChild(zoomedImageContent);

        const zoomFactor = 3; // 300% zoom

        productImg.addEventListener('mouseenter', () => {
            zoomArea.style.display = 'block'; // Show the zoom area
            // Set the width and height of the zoomed image to be zoomFactor times the original
            zoomedImageContent.style.width = (productImg.offsetWidth * zoomFactor) + 'px';
            zoomedImageContent.style.height = (productImg.offsetHeight * zoomFactor) + 'px';
        });

        productImg.addEventListener('mousemove', (e) => {
            if (zoomArea.style.display === 'block') {
                const imgRect = productImg.getBoundingClientRect();
                const mouseX = e.clientX - imgRect.left; // Mouse X relative to image
                const mouseY = e.clientY - imgRect.top;  // Mouse Y relative to image

                // Calculate the position for the zoomed image
                // The negative sign is because we want to move the image *opposite* to the mouse movement
                // to make it look like the mouse is hovering over that part of the zoomed image.
                // We also scale by the zoom factor to match the zoomed image's size.
                const bgPosX = -mouseX * zoomFactor + (zoomArea.offsetWidth / 2);
                const bgPosY = -mouseY * zoomFactor + (zoomArea.offsetHeight / 2);


                zoomedImageContent.style.left = bgPosX + 'px';
                zoomedImageContent.style.top = bgPosY + 'px';
            }
        });

        productImg.addEventListener('mouseleave', () => {
            zoomArea.style.display = 'none'; // Hide the zoom area
        });
    }
});
</script> 









<!-- ----------to_card এর মধ্যে ক্লিক করলে order table এ INSERT------------------ -->

 <script>
document.addEventListener('DOMContentLoaded', function () {
  const addToCardBtn = document.querySelector('.to_card');
  const reg_form = document.querySelector('.reg_form');

  const categoryInput = document.querySelector('.category_name_input');
  const categoryInputPicture = document.querySelector('.category_picture_input');

  const productNameInput = document.querySelector('.product_name');
  const itemIinput = document.querySelector('.item_input');
  const gksInput = document.querySelector('.gks_input');
  const sellerInput = document.querySelector('.seller_input');
  const currentPriceInput = document.querySelector('.current_price_input');
  const priceInput = document.querySelector('.price_input');
  const discountInput = document.querySelector('.discount_input');
  const quantityInput = document.querySelector('.quantity-input');
  const weightInput = document.querySelector('.weight_input');
  const descriptionInput = document.querySelector('.description_input');
  const specificationInput = document.querySelector('.specification_input');
  const vendorInfoInput = document.querySelector('.vendor_info_input');
  const customerReviewInput = document.querySelector('.customer_review_input');
  const questionAnswerInput = document.querySelector('.question_and_answer_input');

  addToCardBtn.addEventListener('click', function () {
    const newOrder = {
      category_name: categoryInput.value.trim(),
      category_picture: categoryInputPicture.value.trim(),
      product_name: productNameInput.value.trim(),
      item: itemIinput.value.trim(),
      gks: gksInput.value.trim(),
      seller: sellerInput.value.trim(),
      current_price: currentPriceInput.value.trim(),
      price: priceInput.value.trim(),
      discount: discountInput.value.trim(),
      quantity: quantityInput.value.trim(),
      weight: weightInput.value.trim(),
      description: descriptionInput.value.trim(),
      specification: specificationInput.value.trim(),
      vendor_info: vendorInfoInput.value.trim(),
      customer_review: customerReviewInput.value.trim(),
      question_answer: questionAnswerInput.value.trim()
    };

    // পুরাতন কার্ট ডেটা নেওয়া
    const existingCart = JSON.parse(localStorage.getItem('cart')) || [];

    // কার্টে নতুন পণ্য যোগ
    existingCart.push(newOrder);

    // লোকাল স্টোরেজে আবার সেট করা
    localStorage.setItem('cart', JSON.stringify(existingCart));

    // ✅ সফল হলে UI আপডেট
    console.log("Product added to cart.");
    loadCardBoard(); // কার্ট বোর্ড রেন্ডার
    document.querySelector('.porda').style.display = 'block';

  });
});
</script>










<!-- ---------------quantity বাড়ানো- কমানো ---------------- -->

<script type="text/javascript">
  document.addEventListener('DOMContentLoaded', function() {
    const quantityControl = document.querySelector('.quantity-control');
    const minusButton = quantityControl.querySelector('.minus');
    const plusButton = quantityControl.querySelector('.plus');
    const quantityInput = quantityControl.querySelector('.quantity-input');

    minusButton.addEventListener('click', function() {
        let currentValue = parseInt(quantityInput.value);
        if (currentValue > 1) { // Ensure quantity doesn't go below 1
            quantityInput.value = currentValue - 1;
        }
    });

    plusButton.addEventListener('click', function() {
        let currentValue = parseInt(quantityInput.value);
        quantityInput.value = currentValue + 1;
    });

    // Optional: Allow direct input but ensure it's a number and handles min/max
    quantityInput.addEventListener('change', function() {
        let value = parseInt(this.value);
        if (isNaN(value) || value < 1) {
            this.value = 1; // Default to 1 if not a valid number or less than 1
        }
    });
});
</script>






<!-- -----------------------রিভিউ---------------------- -->

<script>
        function updateRating(stars, reviews) {
            const starSpan = document.getElementById('productStars');
            const reviewSpan = document.getElementById('productReviews');

            // তারকার সংখ্যা আপডেট করুন
            let starString = '';
            const fullStars = Math.floor(stars);
            const hasHalfStar = stars % 1 >= 0.5;

            for (let i = 0; i < fullStars; i++) {
                starString += '★'; // সম্পূর্ণ তারকা
            }
            if (hasHalfStar) {
                starString += '☆'; // অর্ধেক তারকা (ফাঁকা তারকা ব্যবহার করা যেতে পারে)
            }
            // বাকি তারকাগুলো ফাঁকা দিয়ে পূরণ করুন (যদি প্রয়োজন হয়)
            const remainingStars = 5 - Math.ceil(stars);
            for (let i = 0; i < remainingStars; i++) {
                starString += '☆'; // ফাঁকা তারকা
            }
            
            starSpan.textContent = starString;

            // রিভিউ সংখ্যা আপডেট করুন
            reviewSpan.textContent = `${reviews} Review(S)`;
        }

        // পেজ লোড হওয়ার সময় ডিফল্ট রেটিং সেট করুন (ঐচ্ছিক)
        document.addEventListener('DOMContentLoaded', function() {
            updateRating(0, 0); // শুরুতে 0 স্টার এবং 0 রিভিউ
        });
    </script>



    <script type="text/javascript">

  const buttons = document.querySelectorAll('.tab-button');
  const contents = document.querySelectorAll('.tab-content');

  buttons.forEach(button => {
    button.addEventListener('click', () => {
      // Remove 'active' from all buttons
      buttons.forEach(btn => btn.classList.remove('active'));
      // Add 'active' to clicked button
      button.classList.add('active');

      // Hide all tab contents
      contents.forEach(content => content.classList.remove('active'));

      // Show selected tab content
      const target = button.getAttribute('data-target');
      document.querySelector(`.${target}`).classList.add('active');
    });
  });


    </script>




<script>
  const canvas = document.getElementById('holiCanvas');
  const ctx = canvas.getContext('2d');
  canvas.width = canvas.offsetWidth;
  canvas.height = canvas.offsetHeight;

  let splashes = [];

  function createColorSplash() {
    const x = Math.random() * canvas.width;
    const y = Math.random() * canvas.height;
    const colors = ['#ff007f', '#00ffff', '#ffff00', '#00ff00', '#ff6600', '#9933ff'];

    for (let i = 0; i < 50; i++) {
      splashes.push({
        x: x,
        y: y,
        radius: Math.random() * 3 + 1,
        color: colors[Math.floor(Math.random() * colors.length)],
        dx: (Math.random() - 0.5) * 5,
        dy: (Math.random() - 0.5) * 5,
        life: 60
      });
    }
  }

  function drawSplashes() {
    ctx.clearRect(0, 0, canvas.width, canvas.height);
    splashes.forEach((splash, i) => {
      ctx.beginPath();
      ctx.arc(splash.x, splash.y, splash.radius, 0, 2 * Math.PI);
      ctx.fillStyle = splash.color;
      ctx.fill();
      splash.x += splash.dx;
      splash.y += splash.dy;
      splash.life--;
      if (splash.life <= 0) {
        splashes.splice(i, 1);
      }
    });
  }

  setInterval(createColorSplash, 700);

  function animate() {
    drawSplashes();
    requestAnimationFrame(animate);
  }

  animate();
</script>




<script>
document.addEventListener('DOMContentLoaded', function () {
  const zoomArea = document.querySelector('.zoom_area');
  const closeBtn = document.querySelector('.close_zoom');

  if (closeBtn && zoomArea) {
    closeBtn.addEventListener('click', function () {
      zoomArea.style.display = 'none';
    });
  }
});
</script>


<?php
// End capturing the output and store it in a variable
$catagory_display_content = ob_get_clean();

// Now include frameForAll.php, which will use $catagory_display_content
include("frameForAll.php");

// mysqli_close($conn); // You might want to close the connection after all database operations
ob_end_flush();
?>



<!DOCTYPE html>
<html>
<head>

  <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">

<meta name="theme-color" content="#FF0000">
    
<title>অনলাইন শপ</title>
    

  
</head>
<body>




</body>
</html>



