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

session_start();

$ref = "147";


if( isset($_GET['track_number'])  ){

  $track_number = $_GET['track_number'];
 
}else{
  $track_number = 1; //এই কোড $id = 1; না দিলে; যদি সরাসরি view.php হিট করে; তাহলে Error দেখাবেন//
}


if( isset($_GET['mobile'])  ){
  $mobile = $_GET['mobile'];
 
}else{
  $mobile = NULL; //এই কোড $id = 1; না দিলে; যদি সরাসরি view.php হিট করে; তাহলে Error দেখাবেন//
}




include("configa.php");

// Start capturing the output of the category display
?>

<!-- 
<script>
document.addEventListener('DOMContentLoaded', () => {
    // Select all elements with the class 'add-button'
    const addButtons = document.querySelectorAll('.add-button');

    // Loop through each 'add-button' and add a click event listener
    addButtons.forEach(button => {
        button.addEventListener('click', () => {
            // Retrieve the track_number from a hidden input or data attribute
            // Assuming you have a PHP variable named $track_number on this page
            const trackNumber = '<?php echo $track_number; ?>';
            
            // Get the product ID from the data-id attribute of the clicked button
            const productId = button.getAttribute('data-id');

            // Redirect to the order_edit.php page, passing all the required parameters
            window.location.href = `order_edit.php?track_number=${trackNumber}&add_new_row=true&id=${productId}`;
        });
    });
});
</script>
 -->

<div class="pictureFrameOutbox">
  <div class="pictureFrame">
    <img src="slide picture/fish.png" class="slideImg active">
    <img src="slide picture/seli-item.png" class="slideImg">
    <img src="slide picture/sutki.png" class="slideImg">

    <img src="slide picture/fish.png" class="slideImg active">
    <img src="slide picture/seli-item.png" class="slideImg">
    <img src="slide picture/sutki.png" class="slideImg">

    <!-- এরো বাটন -->
    <div class="arrow left" onclick="prevSlide()">&#10094;</div>
    <div class="arrow right" onclick="nextSlide()">&#10095;</div>
  </div>
</div>




<style>

.pictureFrameOutbox {
  width: 85%; 
  height: 2.7in; 
  background-color: red; 
  margin-left: auto; 
  margin-right: auto; 
  margin-top: 20pt; 
  margin-bottom: 20pt;
}

.pictureFrame {
  width: 100%;
  height: 100%;
  position: relative;
  overflow: hidden;
  background-color: #fff;
}

.pictureFrame img {
  position: absolute;
  top: 0;
  left: 100%;
  width: 100%;
  height: 100%;
  object-fit: contain;
  opacity: 0;
  transition: all 1.5s ease-in-out; /* ধীরে স্লাইডিং */
}

.pictureFrame img.active {
  left: 0;
  opacity: 1;
}

/* এরো ডিজাইন */
.arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 50px;           /* চওড়া */
  height: 50px;          /* উচ্চতা */
  font-size: 24pt;       /* icon সাইজ */
  color: #333;
  background-color: rgba(255, 255, 255, 0.9); /* opacity বাড়ানো */
  cursor: pointer;
  z-index: 10;
  user-select: none;
  border-radius: 50%;    /* পুরো গোল */
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background-color 0.3s;
   box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
}

.arrow:hover {
  background-color: rgba(255, 255, 255, 1); /* hover এ পুরো opacity */
}

.arrow.left {
  left: 10pt;
}
.arrow.right {
  right: 10pt;
}

@media screen and (max-width: 1024px) {
  .pictureFrameOutbox {
  width: 85%; 
  height: 100pt; 
  background-color: red; 
  margin-left: auto; 
  margin-right: auto; 
  margin-top: 20pt; 
  margin-bottom: 20pt;
}

}

.add:hover{
  color: magenta;
  cursor: pointer;

}

.add{
  cursor: pointer;
}

.go{
  cursor: pointer;
}
.go:hover{
  color: red;
}

</style>

<script>
  let currentIndex = 0;
  const slides = document.querySelectorAll('.slideImg');
  let autoSlideInterval;

  function showSlide(index) {
    slides.forEach((slide, i) => {
      slide.classList.remove('active');
      slide.style.left = i < index ? '-100%' : '100%';
      slide.style.opacity = 0;
    });

    slides[index].style.left = '0';
    slides[index].style.opacity = 1;
    slides[index].classList.add('active');
  }

  function nextSlide() {
    currentIndex = (currentIndex + 1) % slides.length;
    showSlide(currentIndex);
    resetAutoSlide();
  }

  function prevSlide() {
    currentIndex = (currentIndex - 1 + slides.length) % slides.length;
    showSlide(currentIndex);
    resetAutoSlide();
  }

  function startAutoSlide() {
    autoSlideInterval = setInterval(() => {
      nextSlide();
    }, 5000); // প্রতি ৫ সেকেন্ডে
  }

  function resetAutoSlide() {
    clearInterval(autoSlideInterval);
    startAutoSlide();
  }

  document.addEventListener('DOMContentLoaded', () => {
    showSlide(currentIndex);
    startAutoSlide();
  });
</script>



  <div style="width: 85%; background-color:white;  margin-left: auto; margin-right: auto; box-sizing: border-box;padding: 10pt; margin-bottom: 20pt; "  class="catagory_display_container"> 





    

  <?php 
  // Moved the mysqli_query for $result here as it's directly used in this section
  $result = mysqli_query($conn,"SELECT distinct category_name FROM goods_category ") or die(mysqli_error($conn));

  while ($row = mysqli_fetch_object($result) ) {?>

    <?php
    $result2 = mysqli_query($conn,"SELECT * FROM goods_category WHERE category_name = '$row->category_name' order by item ") or die(mysqli_error($conn));


    while ($row2 = mysqli_fetch_object($result2) ) {?>  
  <div class="catagory_display">


  <div class="catagory_display_inner" style="background-color: #F1F2F4; padding: 5pt; box-sizing: border-box;  display: flex; flex-direction: column;"  >
  <br>
  

<div>  
 

  <div class="add">Add</div> <!-- id="add" বাদ, class="add" রাখুন -->
  <div class="go"> 
  <a href="order_edit.php?track_number=<?php echo$track_number?>"><-----Go-----></a>
  </div>

<input type="hidden" name="id[]" value="<?php echo isset($row2->id) ? $row2->id : ''; ?>">
<input type="hidden" name="category_picture[]" value="<?php echo isset($row2->category_picture) ? $row2->category_picture : ''; ?>">
<input type="hidden" name="product_name[]" value="<?php echo isset($row2->product_name) ? $row2->product_name : ''; ?>">
<input type="hidden" name="item[]" value="<?php echo isset($row2->item) ? $row2->item : ''; ?>">
<input type="hidden" name="person[]" value="<?php echo isset($row2->person) ? $row2->person : ''; ?>">
<input type="hidden" name="gks[]" value="<?php echo isset($row2->gks) ? $row2->gks : ''; ?>">
<input type="hidden" name="seller[]" value="<?php echo isset($row2->seller) ? $row2->seller : ''; ?>">
<input type="hidden" name="price[]" value="<?php echo isset($row2->price) ? $row2->price : ''; ?>">
<input type="hidden" name="discount[]" value="<?php echo isset($row2->discount) ? $row2->discount : ''; ?>">
<input type="hidden" name="current_price[]" value="<?php echo isset($row2->current_price) ? $row2->current_price : ''; ?>">
<input type="hidden" name="size[]" value="<?php echo isset($row2->size) ? $row2->size : ''; ?>">
<input type="hidden" name="weight[]" value="<?php echo isset($row2->weight) ? $row2->weight : ''; ?>">
<input type="number" class="quantity" name="quantity[]" value="<?php echo isset($row2->quantity) ? $row2->quantity : 1; ?>" min="1">
<input type="hidden" name="discount_code[]" value="<?php echo isset($row2->discount_code) ? $row2->discount_code : ''; ?>">
<input type="hidden" name="discount_special[]" value="<?php echo isset($row2->discount_special) ? $row2->discount_special : ''; ?>">
<input type="hidden" name="mobile" value="<?php echo isset($mobile) ? $mobile : ''; ?>">
<input type="hidden" name="track_number" value="<?php echo isset($track_number) ? $track_number : ''; ?>">


    <strong>  
    <a class="category_name"  href="category_as_individual.php?catagory=<?php echo$row2->category_name?>&ref=<?php echo$ref?>" data-category="Food"><?php echo$row2->product_name;?></a>    
    </strong>    
</div>



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

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


  </div>

  </div>
  <?php }?>
<?php }?>


<script>
document.addEventListener("DOMContentLoaded", function() {
    document.querySelectorAll(".add").forEach(button => {
        button.addEventListener("click", function() {
            let container = button.closest(".catagory_display_inner");
            let formData = new FormData();
            let allValid = true;

            // Collect all inputs within the specific container
            container.querySelectorAll("input").forEach(el => {
                // Check if the input is a quantity field and its value is negative
                if (el.name === 'quantity[]' && parseInt(el.value, 10) < 0) {
                    allValid = false;
                    alert("Quantity can't be a negative number.");
                    return; // Exit the loop
                }
                
                if (el.name) {
                    formData.append(el.name, el.value);
                }
            });

            if (!allValid) {
                return; // Stop the function if validation fails
            }
            
            // Get mobile and track_number
            let mobileInput = document.querySelector("input[name='mobile']");
            let trackNumberInput = document.querySelector("input[name='track_number']");
            
            if (mobileInput) {
                formData.append("mobile", mobileInput.value);
            }
            if (trackNumberInput) {
                formData.append("track_number", trackNumberInput.value);
            }

            fetch("insert_final_order_item.php", {
                method: "POST",
                body: formData
            })
            .then(res => res.text())
            .then(data => {
                alert(data);
            })
            .catch(err => console.error(err));
        });
    });
});
</script>


</div>

<?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>


<style type="text/css">

</style>


</body>
</html>