<?php   

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

 session_start();

include("configa.php");

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


    <style>
        /* আপনার CSS স্টাইল এখানে যোগ করুন */
        .memo_outBox {
            border: 1px solid #ccc;
            padding: 10px;
            margin: 10px;
        }
        .first_row, .second_row {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 10px;
        }
        .quantityCad {
            display: flex;
            align-items: center;
            border: 1px solid #ccc;
            width: fit-content;
        }
        .minusCard, .plusCard {
            padding: 5px 10px;
            cursor: pointer;
            background-color: #f0f0f0;
            border: none;
        }
        .quantity-inputCard {
            width: 30px;
            text-align: center;
            border: none;
            -moz-appearance: textfield; /* Firefox remove arrows */
        }
        /* Hide arrows for Chrome, Safari, Edge, Opera */
        input[type=text]::-webkit-inner-spin-button,
        input[type=text]::-webkit-outer-spin-button {
            -webkit-appearance: none;
            margin: 0;
        }
    </style>



<style type="text/css">



  *{
    border: solid 0pt;
  }



.to_card{
  padding: 7pt; 
  background-color: #439DDF; 
  border-radius: 5pt; 
  font-family: sutonnyOMJ; 
  font-size: 15pt;
  cursor: pointer;
  z-index: 20000;
}


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




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

.zoom_area {
  width: 100%; /* 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 */
  position: relative; /* For positioning the zoomed image inside */
  display: none; /* Hidden by default */
  margin-top: 10px; /* Spacing from the button */



}

.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; 
  padding: 20pt;
  box-sizing: border-box;
   
}


.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%);
}


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

}


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


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



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


.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;
}
  


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

        .to_card:hover {
            background-color: #D608E3;
        }

        .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;
        }




  .heading_box {
  position: relative;
  padding: 20px;
  text-align: center;
  background-color: #DD3C06;
  color: #fff;
  font-size: 20px;
  font-weight: bold;
  overflow: hidden;
}

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



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


.img_order_payment_container{
  padding: 5pt;
}


}

</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  style="" 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="zoom_area"></div> <br>

<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" class="category_picture_input" value="<?php echo $row2->category_picture; ?>">

<strong><span style="font-size: 20pt;"><?php echo"$row2->product_name";?></span></strong>
<input type="" name="product_name" class="product_name" value="<?php echo$row2->product_name;?>"> 
<!-- ----------------- --> <br>


<span><?php echo" goods/পণ্য :"." $row2->item";?></span>
<input type="hidden" name="item" class="item_input" value="<?php echo $row2->item; ?>"> 
<!-- ----------------- --> <br>


<span><?php echo"gks :"." $row2->gks";?></span>
<input type="hidden" name="gks" class="gks_input" value="<?php echo $row2->gks; ?>"> 
<!-- ----------------- --> <br>


<span><?php echo"Seller/বিক্রেতা :"." $row2->seller";?></span>
<input type="hidden" name="seller" class="seller_input" value="<?php echo $row2->seller; ?>"> 
<!-- ----------------- --> <br>

<hr>
<strong><span style="color: green;">For Visa/Mastercard 10% Discount( Upto tk500)
bKash & Nagad 10% Cashback / <br>
ভিসা/মাস্টারকার্ডে ১০% ডিসকাউন্ট (সর্বোচ্চ ৫০০ টাকা পর্যন্ত), বিকাশ ও নগদে ১০% ক্যাশব্যাক।"
</span></strong>

<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 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">
        
      <strong style="color: blue; border-bottom: solid 1pt;">ডেলিভারী বৃত্তান্ত/Delivery Option :</strong><br><br>

      <span><strong>Available Delivery Area/ডেলিভারী এলাকা :</strong></span> <br>
      <span>All over the Bangladesh./সমগ্র বাংলাদেশ।</span> <br><br>
      


      <strong>ঢাকার মধ্যে </strong>
      ক্যাশ অন ডেলিভারি ৭০ ৳ <br>
      <strong>ঢাকার বাইরে </strong>ক্যাশ অন ডেলিভারি ১১০ ৳ <br>
      <strong>রিটার্ন ও ওয়ারেন্টি </strong> <br>
      ১০০% অরিজিনাল <br>
      ৭ দিনের মধ্যে রিটার্ন <br>
      ওয়ারেন্টি নেইমার্চেন্ট DROPS BD
      goldgoldমোট অর্ডার১০২৩৮পজেটিভ রিভিউ৭৫%মার্চেন্ট স্কোর১১৮৩
   </div>
</div>

  

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



<hr>


<div class="heading_details">

      

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




<br> <br>

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





<div class="catagory_display_container">
  <?php 
 
    $result2 = mysqli_query($conn,"SELECT * FROM goods_category order by category_name ") or die(mysqli_error($conn));


    while ($row2 = mysqli_fetch_object($result2) ) {?>  
  <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$row2->category_name;?></a>    
    </strong>    
  </div>

  <a href="#" 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?>" 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> 




<!-- ----------------lging_gest এর মধ্যে mobile, otp insert করা------------ -->

<script>
document.addEventListener('DOMContentLoaded', function () {
    const smsMobileCustomer = document.querySelector('.sms_mobile_customer');
    const smsOtpCustomer = document.querySelector('.sms_otp_customer');
    const displayResult = document.querySelector('.display_result');
    const submitBtn = document.querySelector('.submit_verify_opt');

    submitBtn.addEventListener('click', function () {
        const smsMobile = smsMobileCustomer.value;
        const smsOtp = smsOtpCustomer.value;

        const formData = new FormData();
        formData.append("mobile", smsMobile);
        formData.append("otp", smsOtp);

        fetch('insert_login_gest.php', {
            method: 'POST',
            body: formData
        })
        .then(response => response.text())
        .then(data => {
           displayResult.innerHTML = data;
        });
    });
});
</script>



<!-- ----------------lging_gest এর login করা------------ -->

<script>


document.addEventListener('DOMContentLoaded', function () {
    const smsMobileCustomer = document.querySelector('.sms_mobile_customer');
    const smsOtpCustomer = document.querySelector('.sms_otp_customer');
    const displayResultTwo = document.querySelector('.display_result_two');
    const submitBtn = document.querySelector('.submit_verify_opt');

    submitBtn.addEventListener('click', function () {
        const smsMobile = smsMobileCustomer.value;
        const smsOtp = smsOtpCustomer.value;

        const formData = new FormData();
        formData.append("mobile", smsMobile);
        formData.append("otp", smsOtp);

              fetch('login_login_gest.php', {
                method: 'POST',
                body: formData
            })
            .then(response => response.json())
            .then(data => {
                if (data.status === "success") {
                    displayResultTwo.innerHTML = data.mobile 
                        ? "ভেরিফাই সফল: " + data.mobile 
                        : data.message;
                } else {
                    displayResultTwo.innerHTML = "ভুল: " + data.message;
                }
            })
            .catch(error => {
                displayResultTwo.innerHTML = "সার্ভার সমস্যা: " + error.message;
            });

    });
});


</script>


<script type="text/javascript">
  
// const category_name_input = document.querySelector('.category_name_input').value;
// const categoryInputSecond = 
// document.querySelector('.category_name_input_seond').value = category_name_input;




// const categoryPictureInput = 
// document.querySelector('.category_picture_input').value;
// const categoryPictureInputSecond = 
// document.querySelector('.category_picture_input_second');
//   categoryPictureInputSecond.value = categoryPictureInput;


</script>

<!-- ----------------order_table এর মধ্যে INSERT করা------------ -->

<script>
document.addEventListener('DOMContentLoaded', function () {

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');
                  
const smsMobileCustomer = document.querySelector('.sms_mobile_customer');
const smsOtpCustomer = document.querySelector('.sms_otp_customer');
const verifyForm = document.querySelector('.verify_form');

const reg_form = document.querySelector('.reg_form');
const submitBtn = document.querySelector('.submit_verify_opt');



submitBtn.addEventListener('click', function () {
        const categoryName = categoryInput.value.trim();
        const categoryPicture = categoryInputPicture.value.trim();
        const productName = productNameInput.value.trim();
        const item = itemIinput.value.trim();
        const gks = gksInput.value.trim();
        const seller = sellerInput.value.trim();
        const currentPrice = currentPriceInput.value.trim();
        const price = priceInput.value.trim();
        const discount = discountInput.value.trim();
        const quantity = quantityInput.value.trim();
        const weight = weightInput.value.trim();
        const description = descriptionInput.value.trim();
        const specification = specificationInput.value.trim();
        const vendorInfo = vendorInfoInput.value.trim();
        const customerReview = customerReviewInput.value.trim();
        const questionAnswer = questionAnswerInput.value.trim();

        const smsMobile = smsMobileCustomer.value.trim();
        const smsOtp = smsOtpCustomer.value.trim();



        const formData = new FormData();
        formData.append("categoryName", categoryName);
        formData.append("categoryPicture", categoryPicture);
        formData.append("product_name", productName);
        formData.append("item", item);
        formData.append("gks", gks);
        formData.append("seller", seller);
        formData.append("currentPrice", currentPrice);
        formData.append("price", price);
        formData.append("discount", discount);
        formData.append("quantity", quantity);
        formData.append("weight", weight);
        formData.append("description", description);
        formData.append("specification", specification);
        formData.append("vendorInfo", vendorInfo);
        formData.append("customerReview", customerReview);
        formData.append("questionAnswer", questionAnswer);

        formData.append("mobile", smsMobile);
        formData.append("otp", smsOtp);

        fetch('insert_order.php', {
            method: 'POST',
            body: formData
        })
        .then(response => response.json())
        .then(data => {
            console.log('Server Response:', data);

            if (data.status === 'success') {
                // সফল হলে: ফর্ম হাইড করে কার্ড লোড করো
                reg_form.style.display = 'none';
                verifyForm.style.display = 'none';
                loadCardBoard();
            } else {
                // ব্যর্থ হলে: রেজিস্ট্রেশন ফর্ম দেখাও
                reg_form.style.display = 'block';
                alert(data.message); // ব্যবহারকারীকে ত্রুটির মেসেজ দেখাও
            }
        })
        .catch(error => {
            console.error('Fetch Error:', error);
            reg_form.style.display = 'block';
            alert('সার্ভারে সমস্যা হয়েছে। অনুগ্রহ করে আবার চেষ্টা করুন।');
        });
    });

});
</script>





<!-- -- এটা একই সাথে login_gest এ insert এবং order_table থেকে fetch এর কাজ করে। --------- -->
<!-- <script>
document.addEventListener('DOMContentLoaded', function () {
    const smsMobileCustomer = document.querySelector('.sms_mobile_customer');
    const smsOtpCustomer = document.querySelector('.sms_otp_customer');
    const displayResult = document.querySelector('.display_result');
    const displayResultTwo = document.querySelector('.display_result_two');
    const submitBtn = document.querySelector('.submit_verify_opt');

    submitBtn.addEventListener('click', async function () {
        const smsMobile = smsMobileCustomer.value;
        const smsOtp = smsOtpCustomer.value;

        const formData = new FormData();
        formData.append("mobile", smsMobile);
        formData.append("otp", smsOtp);

        try {
            // প্রথম fetch – insert_login_gest.php
            const insertResponse = await fetch('insert_login_gest.php', {
                method: 'POST',
                body: formData
            });
            const insertData = await insertResponse.text();
            displayResult.innerHTML = insertData;

            // 3-4 সেকেন্ড অপেক্ষা
            await new Promise(resolve => setTimeout(resolve, 3000)); // 3000 = 3 সেকেন্ড

            // দ্বিতীয় fetch – login_login_gest.php
            const loginResponse = await fetch('login_login_gest.php', {
                method: 'POST',
                body: formData
            });
            const loginData = await loginResponse.json();

            if (loginData.status === "success") {
                displayResultTwo.innerHTML = loginData.mobile 
                    ? "ভেরিফাই সফল: " + loginData.mobile 
                    : loginData.message;
            } else {
                displayResultTwo.innerHTML = "ভুল: " + loginData.message;
            }

        } catch (error) {
            displayResultTwo.innerHTML = "সার্ভার সমস্যা: " + error.message;
        }
    });
});
</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 categoryName = categoryInput.value.trim();
        const categoryPicture = categoryInputPicture.value.trim();

        const productName = productNameInput.value.trim();

        const item = itemIinput.value.trim();
        const gks = gksInput.value.trim();
        const seller = sellerInput.value.trim();
        const currentPrice = currentPriceInput.value.trim();
        const price = priceInput.value.trim();
        const discount = discountInput.value.trim();
        const quantity = quantityInput.value.trim();
        const weight = weightInput.value.trim();
        const description = descriptionInput.value.trim();
        const specification = specificationInput.value.trim();
        const vendorInfo = vendorInfoInput.value.trim();
        const customerReview = customerReviewInput.value.trim();
        const questionAnswer = questionAnswerInput.value.trim();




        const formData = new FormData();
        formData.append("categoryName", categoryName);
        formData.append("categoryPicture", categoryPicture);


        formData.append("product_name", productName);
        formData.append("item", item);
        formData.append("gks", gks);
        formData.append("seller", seller);
        formData.append("currentPrice", currentPrice);
        formData.append("price", price);
        formData.append("discount", discount);
        formData.append("quantity", quantity);
        formData.append("weight", weight);
        formData.append("description", description);
        formData.append("specification", specification);
        formData.append("vendorInfo", vendorInfo);
        formData.append("customerReview", customerReview);
        formData.append("questionAnswer", questionAnswer);



         fetch('insert_order.php', {
                    method: 'POST',
                    body: formData
                })



        .then(response => response.json())
        .then(data => {
            if (data.status === 'success') {
                console.log(data.message);
                loadCardBoard(); // সফল হলে লোড করো
            document.querySelector('.porda').style.display = 'block';

            } else {
                console.warn(data.message);
                reg_form.style.display = "block"; // ব্যর্থ হলে ফর্ম দেখাও
            }
        })
        .catch(error => {
            console.error('Fetch error:', error);
            reg_form.style.display = "block"; // সার্ভার রেসপন্স না পেলে ফর্ম দেখাও
        });
    });
});


</script> 



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


<!-- <script>
document.addEventListener('DOMContentLoaded', function () {
    const addToCardBtn = document.querySelector('.to_card');
    const categoryInput = document.querySelector('.category_name_input');
    const categoryInputPicture = document.querySelector('.category_picture_input');

    addToCardBtn.addEventListener('click', function () {
        const categoryName = categoryInput.value;
        const categoryPicture = categoryInputPicture.value;

        fetch('insert_order.php', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/x-www-form-urlencoded',
            },
            body: 'category_name=' + encodeURIComponent(categoryName) +
                    '&category_picture=' + encodeURIComponent(categoryPicture)
        })
        .then(response => response.text())
        .then(data => {
            console.log('Inserted:', data);
            // এখানে ডেটা ইনসার্ট হওয়ার পর loadCardBoard() ফাংশন কল করা হয়
            loadCardBoard(); 
        });
    });
});
</script> -->



<script>
function loadCardBoard() {
    const categoryInput = document.querySelector('.category_name_input');
    const categoryName = categoryInput.value;

    const formData = new FormData();
    formData.append("categoryName", categoryName);

    fetch('load_order.php', {
        method: 'POST',
        body: formData
    })
    .then(response => response.json())
    .then(data => {
        const cardBoard = document.querySelector('.card_board');
        const cardContent = document.getElementById('card_content');

        cardBoard.style.display = 'block';

        if (data.status === "success") {
            let html = '';
            data.orders.forEach(order => {
                html += `<div class="memo_outBox">

  <div class="first_row"><span><strong>Description-বিবরণ</strong></span><span><strong></strong></span><span><strong>Price-মূল্য</strong></span></div>

  <div class="second_row">
  <span>
    <img style="max-width: 2in;" src="category/${order.category_picture}">    
  </span>

  <span style="text-align: left;">

   <span>Goods-পণ্য : ${order.item}</span><br>
   <input type="" name="item[]" value="${order.item}"><br>

  <span>Name-নাম : ${order.product_name}</span><br>
  <input type="" name="product_name[]" value="${order.product_name}"><br>

   <span>SL No-এসএল নং- ${order.gks}</span><br>
   <input type="" name="gks[]" value="${order.gks}"><br>

   <span>seller-বিক্রেতা : ${order.seller}</span><br>
   <input type="" name="seller[]" value="${order.seller}"><br>

   <span style="font-size: 14pt; margin : 5pt; text-decoration: line-through; color: #969496">Previous Price-পূর্বের মূল্য : ${order.price}</span><br>
   <input type="" name="price[]" value="${order.price}"><br>

   <span style="font-size: 10pt; margin : 5pt; color: #097EF7; ">Discount-ডিসকাউন্ট : ${order.discount}% Off </span><br>
   <input type="" name="discount[]" value="${order.discount}"><br>


   <span style="font-size: 20pt; margin : 5pt; color: red;">Price-মুল্য : ${order.current_price}</span><br>
   <input type="" name="current_price[]" value="${order.current_price}">


  <div>  
    <div class="quantityCad">
      <span class="minusCard">-</span>
      <input type="text" name="quantityInputCard" value="${order.quantity}" class="quantityInputCard" readonly>
      <span class="plusCard">+</span>
    </div>
  </div>
  </span>

  <span></span>
  <span class="current_price" style="font-size: 20pt; margin : 5pt; color: blue;"
  data-unit-price="${order.current_price}">
  ${order.current_price}</span><br>
  <input type="" name="current_price[]" value="${order.current_price}">

  </div>

</div>`;
            });
            cardContent.innerHTML = html;            
            updateAllPrices();
            updateTotal();
        } else {
            cardContent.innerHTML = `<p>${data.message}</p>`;
        }
    })
    .catch(error => {
        console.error('Error:', error);
        document.getElementById('card_content').innerHTML = `<p>Error loading data.</p>`;
    });
}

</script>



<script>
document.addEventListener('DOMContentLoaded', function () {
    const closeBtn = document.querySelector('.close_sybmol_image_reg_form');
    const regForm = document.querySelector('.reg_form');

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



<!-- 
<script>
document.addEventListener('DOMContentLoaded', function () {
    const submitBtn = document.querySelector('.submit_mobile');
    const mobileInput = document.querySelector('.mobile_customer');
    const regForm = document.querySelector('.reg_form');
    const verifyForm = document.querySelector('.verify_form');

    if (submitBtn && mobileInput) {
        submitBtn.addEventListener('click', function () {
            const mobileNumber = mobileInput.value.trim();

            if (mobileNumber === "") {
                alert("মোবাইল নাম্বার দিন।");
                return;
            }

            // Send OTP to server
            fetch('send_otp.php', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/x-www-form-urlencoded',
                },
                body: 'mobile=' + encodeURIComponent(mobileNumber)
            })
            .then(response => response.text())
            .then(data => {
                console.log('Server response:', data);

                if (data.trim() === "OTP_SENT") {
                    regForm.style.display = 'none';
                    verifyForm.style.display = 'block';
                } else {
                    alert("OTP পাঠানো ব্যর্থ হয়েছে। আবার চেষ্টা করুন।");
                }
            })
            .catch(error => {
                console.error('Error:', error);
                alert("সার্ভার ত্রুটি হয়েছে।");
            });
        });
    }
});
</script>

 -->



<script>
document.addEventListener('DOMContentLoaded', function () {
    const submitBtn = document.querySelector('.submit_mobile');
    const mobileInput = document.querySelector('.mobile_customer');
    const regForm = document.querySelector('.reg_form');
    const verifyForm = document.querySelector('.verify_form');
    const smsMobileCustomer = document.getElementById('sms_mobile_customer');
    const smsOtpCustomer = document.getElementById('sms_otp_customer');

    if (submitBtn && mobileInput) {
        submitBtn.addEventListener('click', function () {
            const mobileNumber = mobileInput.value.trim();

            if (mobileNumber === "") {
                alert("মোবাইল নাম্বার দিন।");
                return;
            }

            // OTP পাঠানোর জন্য সার্ভারে রিকোয়েস্ট
            fetch('send_otp.php', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/x-www-form-urlencoded',
                },
                body: 'mobile=' + encodeURIComponent(mobileNumber)
            })
            .then(response => {
                if (!response.ok) {
                    throw new Error(`HTTP error! status: ${response.status}`);
                }
                return response.json(); // সার্ভার থেকে আসা JSON রেসপন্স পার্স করুন
            })
            .then(data => {
                console.log('Server response (OTP Send):', data);

                // if (data.status === "OTP_SENT") {
                    regForm.style.display = 'none'; // রেজিস্ট্রেশন ফর্ম লুকান
                    verifyForm.style.display = 'block'; // ভেরিফাই ফর্ম দেখান

                    // **এখানেই AJAX এর মাধ্যমে প্রাপ্ত ডেটা ইনপুট ফিল্ডে বসানো হচ্ছে**
                    smsMobileCustomer.value = data.mobile || ''; // প্রাপ্ত মোবাইল নাম্বার সেট করুন
                    smsOtpCustomer.value = data.otp || '';       // প্রাপ্ত OTP সেট করুন

                // } else {
                //     const errorMessage = data.error ? data.error : "OTP পাঠানো ব্যর্থ হয়েছে। আবার চেষ্টা করুন।";
                //     alert(errorMessage);
                // }
            })
            .catch(error => {
                console.error('Error sending OTP:', error);
                alert("OTP পাঠানোর সময় সার্ভার ত্রুটি হয়েছে।");
            });
        });
    }

    // এই অংশটি ঐচ্ছিক, যদি আপনি পেজ লোড হওয়ার সময় সেশন থেকে ডেটা লোড করতে চান
    // এবং verify_form দেখাতে চান (যদি সেশন ডেটা থাকে)।
    // মনে রাখবেন, এই ক্ষেত্রে verify_form এর প্রাথমিক display: none; CSS কে ওভাররাইড করতে হবে।
    /*
    fetch('send_otp.php', { method: 'GET' }) // GET রিকোয়েস্ট করুন সেশন ডেটা পেতে
        .then(res => res.json())
        .then(data => {
            console.log('Initial session data:', data);
            if (data.mobile && data.otp) {
                smsMobileCustomer.value = data.mobile;
                smsOtpCustomer.value = data.otp;
                // যদি সেশন ডেটা থাকে তাহলে verify_form দেখান
                // verifyForm.style.display = 'block';
                // regForm.style.display = 'none'; // regForm লুকান
            }
        })
        .catch(err => console.error('Error fetching initial session data:', err));
    */
});
</script>


<script>
document.addEventListener('DOMContentLoaded', function () {

    const cardBoard = document.querySelector('.card_board');
    const verifyForm = document.querySelector('.verify_form');
    const submitBtn = document.querySelector('.submit_verify_opt');
    const smsOtpCustomer = document.querySelector('.sms_otp_customer');
    const verifyOtpInput = document.querySelector('.verify_otp_customer');
    const smsMobileCustomer = document.querySelector('.sms_mobile_customer');

    submitBtn.addEventListener('click', function () {
        const otpFromSession = smsOtpCustomer.value.trim();
        const otpFromUser = verifyOtpInput.value.trim();
        const mobile = smsMobileCustomer.value.trim();

        if (otpFromUser === "") {
            alert("OTP দিন।");
            return;
        }

        if (otpFromUser === otpFromSession) {
            // OTP মিলেছে, সার্ভারে পাঠাও
            fetch('verify_otp_process.php', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/x-www-form-urlencoded',
                },
                body: 'mobile=' + encodeURIComponent(mobile)
            })
            .then(response => response.text())
            .then(data => {

               verifyForm.style.display = 'none';
                cardBoard.style.display = 'block';


                fetch('load_order.php')
                .then(response => response.text())
                .then(data => {
                    if (data.trim() === "NO_SESSION") {

                        // ... (হ্যান্ডেলিং যখন সেশন থাকে না)
                    } else {
                        document.querySelector('.card_board').style.display = 'block';
                        document.getElementById('card_content').innerHTML = data; // ডেটা card_content এ লোড করা হচ্ছে
                    }
                });


                alert("আপনার নতুন পাসওয়ার্ড " + data + "আপনার মোবাইলে পাঠানো হয়েছে। ");
                })
            .catch(error => {
                console.error('Error:', error);
                alert("সার্ভার ত্রুটি হয়েছে।");
            });
        } else {
            alert("OTP মিলেনি।");
        }
    });
});
</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>



<!-- -------------কার্ডের মধ্যে --quantity বাড়ানো- কমানো ---------------- -->
    <script>
document.addEventListener('DOMContentLoaded', function () {
    const container = document.body;

    // 🔁 ডকুমেন্ট লোডে current_price গুন এবং Total দেখাও
    updateAllPrices();
    updateTotal();

    container.addEventListener('click', function (e) {
        if (e.target.classList.contains('minusCard') || e.target.classList.contains('plusCard')) {
            const quantityCad = e.target.closest('.quantityCad');
            const quantityInput = quantityCad.querySelector('.quantityInputCard');
            const productRow = e.target.closest('.second_row');
            const currentPriceElement = productRow.querySelector('.current_price');

            let unitPrice = parseFloat(currentPriceElement.dataset.unitPrice); // unit price
            let quantity = parseInt(quantityInput.value);

            if (e.target.classList.contains('minusCard')) {
                if (quantity > 1) quantity--;
            } else {
                quantity++;
            }

            quantityInput.value = quantity;
            currentPriceElement.innerText = (unitPrice * quantity).toFixed(2) + " ৳";

            // মোট দাম হালনাগাদ
            updateTotal();
        }
    });

    function updateAllPrices() {
        const productRows = document.querySelectorAll('.second_row');

        productRows.forEach(function (row) {
            const quantityInput = row.querySelector('.quantityInputCard');
            const currentPriceElement = row.querySelector('.current_price');
            const unitPrice = parseFloat(currentPriceElement.dataset.unitPrice);
            const quantity = parseInt(quantityInput.value);

            if (!isNaN(unitPrice) && !isNaN(quantity)) {
                currentPriceElement.innerText = (unitPrice * quantity).toFixed(2) + " ৳";
            }
        });
    }

    function updateTotal() {
    let total = 0;
    const priceElements = document.querySelectorAll('.current_price');

    priceElements.forEach(function (el) {
      let priceText = el.innerText.replace('৳', '').trim();
      let price = parseFloat(priceText);
      if (!isNaN(price)) {
        total += price;
      }
    });

    const totalDisplay = document.querySelector('.Total');
    totalDisplay.innerText = '৳' + total.toFixed(2);
  }

  // ডকুমেন্ট লোড হলে ফাংশন চালানো হবে
  document.addEventListener('DOMContentLoaded', function () {
    updateTotal();
  });
});
</script>





<!-- ---------ডেকুলেন্ট লোড হওয়ার সময় Total এর ভ্যালু যোগ করা থাকবে।-------- -->
<script type="text/javascript">
  function updateTotal() {
    let total = 0;
    const priceElements = document.querySelectorAll('.current_price');

    priceElements.forEach(function (el) {
      let priceText = el.innerText.replace('৳', '').trim();
      let price = parseFloat(priceText);
      if (!isNaN(price)) {
        total += price;
      }
    });

    const totalDisplay = document.querySelector('.Total');
    totalDisplay.innerText = '৳' + total.toFixed(2);
  }

  // ডকুমেন্ট লোড হলে ফাংশন চালানো হবে
  document.addEventListener('DOMContentLoaded', function () {
    updateTotal();
  });
</script>

<!-- ------ডেকুলেন্ট লোড হওয়ার সময় প্রেতিটি আইটিমের current_price * quantity হবে।------ -->

<script type="text/javascript">
      function updateAllPrices() {
        const productRows = document.querySelectorAll('.second_row');

        productRows.forEach(function (row) {
            const quantityInput = row.querySelector('.quantityInputCard');
            const currentPriceElement = row.querySelector('.current_price');
            const unitPrice = parseFloat(currentPriceElement.dataset.unitPrice);
            const quantity = parseInt(quantityInput.value);

            if (!isNaN(unitPrice) && !isNaN(quantity)) {
                currentPriceElement.innerText = (unitPrice * quantity).toFixed(2) + " ৳";
            }
        });
    }
</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>
      fetch('send_otp.php')
    .then(res => res.json())
    .then(data => {
        document.getElementById('sms_mobile_customer').value = data.mobile;
        document.getElementById('sms_otp_customer').value = data.otp;
    })
    .catch(err => console.error('Session fetch error:', err));
</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>



