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



$username = $_SESSION['username'] ?? '';
$password = $_SESSION['password'] ?? '';
$id_no = $_SESSION['id_no'] ?? '';
$first_name = $_SESSION['first_name'] ?? '';
$last_name =  $_SESSION['last_name'] ?? '';
$shopName = $_SESSION['shopName'] ?? '';
$up = $_SESSION['up'] ?? '';
$upazila =  $_SESSION['upazila'] ?? '';
$district =  $_SESSION['district'] ?? '' ;       
$division = $_SESSION['division'] ?? '';
$address =  $_SESSION['address'] ?? '';
            




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

<link rel="stylesheet" type="text/css" href="fram.css">
     
<title>অনলাইন শপ</title>
    

<!-- jsPDF এবং html2canvas -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/1.4.1/html2canvas.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/2.5.1/jspdf.umd.min.js"></script>
<!-- Font Awesome CDN যুক্ত করুন (যদি আগে না দিয়ে থাকেন) -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">

<script src="jquery.min.js"></script> <!-- অথবা CDN -->





  <style>
    @font-face {
      font-family: 'SutonnyOMJ';
      src: url('font/SutonnyOMJ.ttf') format('truetype');
      font-display: swap;
    }

    @font-face {
      font-family: 'SutonnyMJ';
      src: url('font/SUTOM___0.TTF') format('truetype');
      font-display: swap;
    }
    
    /* অন্যান্য গুরুত্বপূর্ণ CSS রুলগুলো এখানে রাখতে পারেন */
    body {
      font-family: 'SutonnyOMJ', Arial, sans-serif;
      font-size: 16px; /* একটি বেস ফন্ট সাইজ সেট করুন */
    }
  </style>

  <!-- <link rel="stylesheet" href="path/to/your/remaining-styles.css"> -->




  
</head>
<body >



<span class="to_card">  <span class="to_card_text">কার্ডে যোগ করতে ক্লিক করুন</span></span>

<style>
.to_card_text{
  display: inline-block;
  transform-origin: center center;
  will-change: transform, letter-spacing;
}

@keyframes spread-pop {
  0%   { letter-spacing: 0;     transform: scale(1); }
  35%  { letter-spacing: 0.30em; transform: scale(1.18); }
  50%  { letter-spacing: 0.45em; transform: scale(1.30); }
  65%  { letter-spacing: 0.30em; transform: scale(1.18); }
  100% { letter-spacing: 0;     transform: scale(1); }
}

.pulse-spread{
  animation: spread-pop 700ms ease-in-out both;
}
</style>

<script>
// এনিমেশন চালানোর ফাংশন
function animateToCardText(){
  const el = document.querySelector('.to_card_text');
  if(!el) return;
  el.classList.remove('pulse-spread');
  void el.offsetWidth; // reflow ট্রিক
  el.classList.add('pulse-spread');
}

// ডকুমেন্ট লোড হওয়ার পর থেকে বারবার চালানো
document.addEventListener("DOMContentLoaded", function(){
  // সাথে সাথেই একবার চালাও
  animateToCardText();

  // তারপর প্রতি 2 সেকেন্ড পরপর চালাও
  setInterval(animateToCardText, 2000);
});
</script>



<!-- বৃষ্টি তৈরী
<script type="text/javascript">
  const toCard = document.querySelector('.to_card');
const rainContainer = document.createElement('div');
rainContainer.classList.add('rain');
toCard.appendChild(rainContainer);

function createRain() {
 const amount = 150; // কতগুলো বৃষ্টির কণা তৈরি হবে

 for (let i = 0; i < amount; i++) {
  const drop = document.createElement('i');
  const size = Math.random() * 5;
  const posX = Math.floor(Math.random() * toCard.offsetWidth);
  const delay = Math.random() * -20;
  const duration = Math.random() * 5 + 5;

  drop.style.width = size + 'px';
  drop.style.height = size * 3 + 'px'; // লম্বাটে ফোঁটা
  drop.style.left = posX + 'px';
  drop.style.animationDelay = delay + 's';
  drop.style.animationDuration = duration + 's';
  drop.classList.add('drop');
  rainContainer.appendChild(drop);
 }
}

createRain();
</script>

 -->


<div class="menubar" onclick="pordaHide()">

<div class="top_bar_secondBox">

  <div class="top_bar">
    <span class="forBnFont"><a href="">| hamisah |</a></span>
  <span class="top_barFram">    
    <span class="forBnFont"><a href="">| ৳ ঘরে বসে আয় করুন |</a></span>
    <span class="forBnFont"><a href=""> পণ্য যুক্ত করুন |</a></span>
    <span class="forBnFont"><a href=""> পণ্য ট্র্যাক |</a></span>
    <span class="forBnFont"><a href=""> আজকের বহুল বিক্রি পণ্য |</a></span>
  </span>
</div>



<form autocomplete="off"> 
<div class="secondBox">


 
    <div class="menu_symbol">
    <span onclick="event.stopPropagation(); siteberShow(); setZIndicesSmall(); searchResultsHide(); setZIndicesSmalForAll();">☰</span>
    </div>
    <div><img class="hamisah_big" src="logo/hamisah_big5.png"></div>

    
    <div class="search_box_big">

    <img class="search_symbol_image" src="logo/search.png">   
    <input id="searchBox" class="search_input" type="" name="" onclick=" event.stopPropagation(); pordaShowAddToCard(); setZIndicesBig(); searchResultsShow(); setZIndicesSmalForAll();"> 
      
     <span onclick="pordaHide();" class="reset_button" style="font-family: arial;">x</span>

    </div>
    

    
<div class="loging_link">
  <div style="display: block;" class="logOut" onclick="event.stopPropagation();logoutBerShow(); setZIndicesBigForlogoutBer();">
  <div class="menu_button">
    <i class="fas fa-user" onclick="searchResultsHide();"></i> <!-- মানুষের চিহ্ন -->
  </div>

<!--   <div class="sub_menu">
    <a href="profile.php">profile</a>
    <a href="logout.php">Logout</a>
  </div> -->
</div>
<!-- <a style="white-space: nowrap; " style="display: none;" class="logIn" onclick="event.stopPropagation();regFormShow(); setZIndicesSmall();">Sign In </a> -->
</div> 



<style type="text/css">

  .loging_link {
    margin-right: 20pt;
  } 


  .menu_button {
    background-color: transparent;
    padding: 5px;
    cursor: pointer;
    color: blue;
    font-family: SutonnyOMJ, Arial;
    font-size: 17pt;
    /*width: 100%;*/
    margin: 0;
  } 

  .logOut {
    position: relative;
    display: inline-block;
  }

  .sub_menu {
    display: none;
    position: absolute;
    background-color: #f9f9f9;
   /* min-width: 85px;*/
    z-index: 100;
    font-family: SutonnyOMJ, Arial;
    font-size: 11pt;

  }

  .sub_menu a {
    color: black;
    padding: 5px;
    text-decoration: none;
    display: block;
    font-family: SutonnyOMJ, Arial;
    font-size: 11pt;
  }

  .sub_menu a:hover {
    background-color: blue;
    color: #fff;
    font-family: SutonnyOMJ, Arial;
    font-size: 11pt;
  }

  .logOut:hover .sub_menu {
    display: block;
    font-family: SutonnyOMJ, Arial;
    font-size: 11pt;
  }

  .logOut:hover .menu_button {
    background-color: blue;
    color: #fff;
    font-family: SutonnyOMJ, Arial;
    font-size: 11pt;
  }
</style>

<!-- 
    <div onclick="event.stopPropagation(); pordaShow(); setZIndicesSmall(); setZIndicesSmalForAll();" style="position: relative; display: inline-block;" class="tro_sym_troliBox">

    
      <span class="troli_symbol" onclick="toggleMotDeliverSorbomot();"><i class="fas fa-cart-shopping"></i></span>

      <span class="troliAdedQuantity" style="cursor: pointer;" onclick="toggleMotDeliverSorbomot(); searchResultsHide(); setZIndicesSmalForAll();"></span>

    </div> -->


</div>
</form>

</div>


<!-- এনিমেশন -->
<script>
  const placeholderText = " আপনি যাহা চাইতেছেন, এখানে লিখুন...";
  let i = 0;

  function typeEffect() {
    const input = document.getElementById("searchBox");

    input.setAttribute("placeholder", placeholderText.substring(0, i));
    i++;

    if (i <= placeholderText.length) {
      setTimeout(typeEffect, 150); // প্রতি অক্ষরের সময়
    } else {
      // লেখা শেষ — কিছু সময় পরে আবার শুরু
      setTimeout(() => {
        i = 0;
        typeEffect();
      }, 1500); // শেষ হয়ে ১৫০০ms পর আবার শুরু
    }
  }

  window.addEventListener("load", typeEffect);
</script>


<!-- secondBox এর শেড শো করা। -->
<script type="text/javascript">
  // স্ক্রল হলেই .secondBox-এ ছায়া আসবে
window.addEventListener("scroll", function () {
  const secondBox = document.querySelector(".secondBox");
  const homBer = document.querySelector(".homBer");

  const homBerTop = homBer.getBoundingClientRect().top;

  if (homBerTop <= 20) {
    secondBox.style.boxShadow = "0 4px 6px rgba(0, 0, 0, 0.1)";
  } else {
    secondBox.style.boxShadow = "none";
  }
});

</script>





 

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

<div class="homBer">
  <div></div>

  <div class="homeBoundariBox" ><span class="forBnFontBig">
      
       <a href="homepage.php"><span class="dividedDash">|</span> হোম</a>

       <a href="order_page.php"><span class="dividedDash"> |</span> অর্ডার </a>


      <!--  <a href="seller.php"><span class="dividedDash">|</span> বিক্রয়কারী প্রতিষ্ঠান </a> -->
  <a href="goods_truck_for_seller.php"><span class="dividedDash">|</span> বিক্রিত পণ্য ট্রাক</a>
        <a href="product_add.php"><span class="dividedDash">|</span> পন্য এ্যাড</a>
      <a href="catagory_add.php"><span class="dividedDash">|</span> ক্যাটাগরী এ্যাড</a>
        <!--<a href="index.php"><span class="dividedDash">|</span> তেল</a>
       <a href="index.php"><span class="dividedDash">|</span> আম<span class="dividedDash"> |</span></a></span> -->
    </div>

  <div></div>

</div>


<!-- <script>
  // DOM লোড হওয়া পর্যন্ত অপেক্ষা করুন
  document.addEventListener("DOMContentLoaded", function() {
    // top_bar এবং secondBox - এই দুটি এলিমেন্ট সিলেক্ট করুন
    const topBar = document.querySelector(".top_bar");
    const secondBox = document.querySelector(".secondBox");
    // যে এলিমেন্টের margin-top পরিবর্তন করতে চান, সেটি সিলেক্ট করুন
    const homBer = document.querySelector(".homBer");

    // top_bar এবং secondBox - এর উচ্চতা বের করুন
    const topBarHeight = topBar.offsetHeight;
    const secondBoxHeight = secondBox.offsetHeight;

    // দুটি উচ্চতাকে যোগ করে মোট উচ্চতা বের করুন
    const totalHeight = topBarHeight + secondBoxHeight;

    // homBer-এর margin-top এ মোট উচ্চতা সেট করুন
    homBer.style.marginTop = totalHeight + "px";
  });
</script> -->

<!-- homBer এর উচ্চতা top_bar_secondBox এর উচ্চতার মান করা। -->
<!-- <script>
  window.onload = function() {
  const topBarSecondBox = document.querySelector(".top_bar_secondBox");
  const homBer = document.querySelector(".homBer");
  const topBarSecondBoxHeight = topBarSecondBox.offsetHeight;
  homBer.style.marginTop = topBarSecondBoxHeight + "px";
};
</script>
 -->
</div> 


<!-- --------------------------------------- -->
<!-- <script>
  function removeBarOnSmallScreen() {
    const spans = document.querySelectorAll(".forBnFontBig a");

    spans.forEach(function (link) {
      // যদি স্ক্রিন 1024px বা তার নিচে হয়
      if (window.innerWidth <= 1024) {
        link.innerHTML = link.innerHTML.replace(/\|/g, ""); // সব | মুছে ফেলা
      } else {
        // বড় স্ক্রিনে আবার | যোগ করা (যদি না থাকে)
        if (!link.innerHTML.includes("|")) {
          const text = link.innerText.trim();
          if (text !== "") {
            // শেষের | এর জন্য আমে || ছিল, তাই এমনভাবে বসানো
            if (text === "আম") {
              link.innerHTML = `| ${text} |`;
            } else {
              link.innerHTML = `| ${text}`;
            }
          }
        }
      }
    });
  }

  // লোড ও রিসাইজে কল করো
  window.addEventListener("load", removeBarOnSmallScreen);
  window.addEventListener("resize", removeBarOnSmallScreen);
</script> -->


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

   <center><div id="searchResults" class="searchResults" ></div></center>
<script>
  $(document).ready(function () {

    // ইনপুটে টাইপ করলে রেজাল্ট দেখাও
    $('#searchBox').on('input', function () {
      const query = $(this).val();

      if (query.length < 2) {
        $('#searchResults').html('');
        return;
      }

      $.get('search_as_product_name.php', { q: query }, function (data) {
        $('#searchResults').html(data);
      });
    });

    // যেকোনো জায়গায় ক্লিক করলে রেজাল্ট হাইড
    $(document).on('click', function (e) {
      if (!$(e.target).closest('#searchBox, #searchResults').length) {
        $('#searchResults').html('');
      }
    });

    // search_box_big এর প্রস্থ searchResults এ বসানো
    function matchSearchResultsWidth() {
      const width = $('.search_box_big').outerWidth();
      $('#searchResults').css('width', width + 'px');
    }

    // প্রথমবার লোডে এবং রিসাইজে প্রস্থ মিলিয়ে দাও
    matchSearchResultsWidth();
    $(window).on('resize', matchSearchResultsWidth);
  });
</script>








<script>

  function pordaHide() {
     
    document.querySelector('.reg_form').style.display = 'none';
    /*document.querySelector('.customer_info').style.display = 'none';*/
    // cardBoard.style.display = "none";   


    const cardBoard = document.querySelector('.card_board'); 
    cardBoard.classList.remove('active'); // slide out
    setTimeout(() => {
      cardBoard.style.display = "none";  
    }, 400);



    const porda = document.querySelector('.porda');
    porda.classList.remove('active'); // slide out
    setTimeout(() => {
      porda.style.display = "none";  
    }, 400);



    const bar = document.querySelector('.logoutBer');
    bar.classList.remove('active'); // slide out
    setTimeout(() => {
      bar.style.display = "none";  
    }, 400);


    const siteber = document.querySelector('.siteber');
    siteber.classList.remove('active'); // slide out
    setTimeout(() => {
      siteber.style.display = "none";  
    }, 400);


    const toCard = document.querySelector('.to_card'); 
    toCard.classList.remove('active'); // slide out
    setTimeout(() => {
      toCard.style.display = "block";  
    }, 400);
  
  }


 function toCardHide() {    
    const toCard = document.querySelector('.to_card'); 
    toCard.classList.remove('active'); // slide out
    setTimeout(() => {
      toCard.style.display = "none";  
    }, 400);


  }


 function toCardShow() {  
    const toCard = document.querySelector('.to_card'); 
    toCard.style.display = "block"; 
    setTimeout(() => {
    toCard.classList.add('active');
    }, 10);
  }



function searchResultsHide() {
  const searchResults = document.getElementById('searchResults');   
  searchResults.style.display = "none";   // সঠিকভাবে হাইড হবে
}


function searchResultsShow() {
  const searchResults = document.getElementById('searchResults');   
  searchResults.style.display = "block";   // সঠিকভাবে হাইড হবে
}






  function pordaShow() {

    const pordaInput = document.querySelector('.porda'); 
    pordaInput.style.display = "block"; 
    setTimeout(() => {
    pordaInput.classList.add('active');
    }, 10);



    const cardBoard = document.querySelector('.card_board'); 
    cardBoard.style.display = "block"; 
    setTimeout(() => {
    cardBoard.classList.add('active');
    }, 10);

  
    const siteber = document.querySelector('.siteber');
    siteber.classList.remove('active'); // slide out
    setTimeout(() => {
      siteber.style.display = "none";  
    }, 400);


    loadCardBoard(); // সফল হলে লোড করো

  }


    // function logoutBerShow(){
    // const pordaInput = document.querySelector('.porda');    
    // pordaInput.style.display = "block";  
    // document.querySelector('.logoutBer').style.display = "block";
    // }


function logoutBerShow(){

  const pordaInput = document.querySelector('.porda');    
  pordaInput.style.display = "block";

  const bar = document.querySelector('.logoutBer');
  bar.style.display = "block";  

  // transition ট্রিগার করার জন্য ছোট delay
  setTimeout(() => {
    bar.classList.add('active');
  }, 10);


}


// -------------------------------

  function setZIndicesSmall() {
    const menubar = document.querySelector('.menubar');
    const topBar = document.querySelector('.top_bar_secondBox');
    const homBer = document.querySelector('.homBer');

    if (menubar) {
      menubar.style.zIndex = '2';
    }

    if (topBar) {
      topBar.style.zIndex = '3';
    }

      if (homBer) {
      homBer.style.zIndex = '1';
    }
  }

  // কল করে প্রয়োগ করতে চাইলে নিচের লাইন আনকমেন্ট করুন
  // setZIndices();



function setZIndicesBig() {
    const menubar = document.querySelector('.menubar');
    const topBar = document.querySelector('.top_bar_secondBox');

    if (menubar) {
      menubar.style.zIndex = '34';
    }

    if (topBar) {
      topBar.style.zIndex = '33';
    }
  }



  function setZIndicesBigForlogoutBer() {
    const porda = document.querySelector('.porda');
    if (porda) {
      porda.style.zIndex = '36';
    }
  }



    function setZIndicesSmalForAll() {
    const porda = document.querySelector('.porda');
    if (porda) {
      porda.style.zIndex = '30';
    }
  }

  // কল করে প্রয়োগ করতে চাইলে নিচের লাইন আনকমেন্ট করুন
  // setZIndices();


// ------------------------------


  function pordaShowAddToCard() {
    const pordaInput = document.querySelector('.porda');    
    pordaInput.style.display = "block";
  }


    function siteberShow() {
    const pordaInput = document.querySelector('.porda');    
    const siteBer = document.querySelector('.siteber');  
    siteBer.style.display = "block";
    pordaInput.style.display = "block";

   /*loadCardBoard(); // সফল হলে লোড করো*/

     setTimeout(() => {
    siteBer.classList.add('active');
  }, 10);
  }


  function siteberHide() {

    
    document.querySelector('.reg_form').style.display = 'none';
    /*document.querySelector('.customer_info').style.display = 'none';*/
    


    const cardBoard = document.querySelector('.card_board'); 
    cardBoard.classList.remove('active'); // slide out
    setTimeout(() => {
      cardBoard.style.display = "none";  
    }, 400);







    const porda = document.querySelector('.porda');
    porda.classList.remove('active'); // slide out
    setTimeout(() => {
      porda.style.display = "none";  
    }, 400);


    const logoutBer = document.querySelector('.logoutBer');
    logoutBer.classList.remove('active'); // slide out
    setTimeout(() => {
      logoutBer.style.display = "none";  
    }, 400);


    const siteber = document.querySelector('.siteber');
    siteber.classList.remove('active'); // slide out
    setTimeout(() => {
      siteber.style.display = "none";  
    }, 400);


    const toCard = document.querySelector('.to_card'); 
    toCard.classList.remove('active'); // slide out
    setTimeout(() => {
      toCard.style.display = "block";  
    }, 400);
  

  }




    function regFormShow() {
   document.querySelector('.reg_form').style.display = 'block';
   document.querySelector('.porda').style.display = "block"; 

  }
  


</script>

 







 
<!-- ---------------কার্ডে quantity বাড়ানো- কমানো ---------------- -->

<script type="text/javascript">

  document.addEventListener('DOMContentLoaded', function() {
    // quantityCad ক্লাসের প্রতিটি উপাদান নির্বাচন করুন
    document.querySelectorAll('.quantityCad').forEach(function(quantityContainer) {
        const minusButton = quantityContainer.querySelector('.minusCard');
        const plusButton = quantityContainer.querySelector('.plusCard');
        const quantityInput = quantityContainer.querySelector('.quantity-inputCard');

        // মাইনাস বোতামে ক্লিক ইভেন্ট লিসেনার
        minusButton.addEventListener('click', function() {
            let currentValue = parseInt(quantityInput.value);
            if (currentValue > 1) { // নিশ্চিত করুন যে মান 1 এর নিচে না যায়
                quantityInput.value = currentValue - 1;
            }
        });

        // প্লাস বোতামে ক্লিক ইভেন্ট লিসেনার
        plusButton.addEventListener('click', function() {
            let currentValue = parseInt(quantityInput.value);
            quantityInput.value = currentValue + 1;
        });
    });
});

</script>


<div class="smal_one_two" style="background-color: red;">

<div style="display: none; overflow: scroll;" class="siteber">

    <div style="background-color: #1557FF; padding: 10pt; color: white; width: 100%; box-sizing: border-box;">
     <span>হামীসাহ</span>
     <span onclick="siteberHide();  setZIndicesSmall();" style="float: right; cursor: pointer;">x</span>
    </div>


<div style="padding: 10pt;">
<?php

// ক্যাটাগরি নামগুলো নিই
$categoryQuery = mysqli_query($conn, "SELECT DISTINCT category_name FROM goods_category ORDER BY category_name");

while ($category = mysqli_fetch_assoc($categoryQuery)) {
    $categoryName = $category['category_name'];

    echo '<div class="menuContainer">';
    echo '  <div class="menu">' . htmlspecialchars($categoryName) . '</div>';

    // ঐ ক্যাটাগরির ইউনিক আইটেম নিই
    $itemQuery = mysqli_query($conn, "
        SELECT DISTINCT item 
        FROM goods_category 
        WHERE category_name = '" . mysqli_real_escape_string($conn, $categoryName) . "'
        ORDER BY item
    ");

    echo '  <div class="subMenu">';
    while ($item = mysqli_fetch_assoc($itemQuery)) {
        $itemName = $item['item'];
        $url = "category_as_individual.php?catagory=" . urlencode($categoryName) .
               "&item=" . urlencode($itemName) .
               "&ref=" . urlencode($ref);
        echo '    <a href="' . $url . '">' . htmlspecialchars($itemName) . '</a><br>';
    }
    echo '  </div>';
    echo '</div>';
}
?>


<!-- href="category_as_individual.php?catagory=<?php echo$row2->category_name?>&item=<?php echo$row2->item?>&ref=<?php echo$ref?>" -->
</div>
</div>





<div style="display: none; overflow: scroll;" class="logoutBer">
    <div style="background-color: #1557FF; padding: 10pt; color: white;">


     <span id="user_info">
      <?php
        echo "মোবাইল নং- " .$username . "<br>" .
             "আইডি নং- " .$id_no . "<br>" .
             "মালিকের নাম : " .$first_name . " " . $last_name . "<br>" .
             "দোকানের নাম : " .$shopName . "<br>" .
             "ইউনিয়ন : " .$up . " " . $upazila . "<br>" .
             "উপজেলা : ".$district . " " . $division . "<br>" .
             "জেলা : " .$address;
        ?>

      </span>


     <span onclick="siteberHide();" style="float: right; cursor: pointer;">x</span>
    </div>
    <br>
    <div style="display: flex; flex-direction: column;">
      <a href="seller.php"><i class="fas fa-user"></i> Profile</a>
      <a href="sellerChangePassword.php"><i class="fas fa-key"></i> Change Password </a>
      <a href="logout.php" onclick="clearLocal();"><i class="fas fa-sign-out-alt"></i> Logout</a>
    </div>
</div>







<style type="text/css">

.menuContainer, .menu, .subMenu{
    font-family: 'SutonnyMJ', 'SutonnyOMJ', sans-serif;
  }


.subMenu {
  display: none;
  padding-left: 20px;
  background-color: #f9f9f9;
}
.menu {
  cursor: pointer;
  font-weight: bold;
  margin-top: 10px;
}

</style>

<script>
  document.addEventListener('DOMContentLoaded', function () {
    const menus = document.querySelectorAll('.menu');

    menus.forEach(function (menu) {
      menu.addEventListener('click', function () {
        const nextSubMenu = menu.nextElementSibling;

        // যদি submenu আছে
        if (nextSubMenu && nextSubMenu.classList.contains('subMenu')) {
          const isVisible = nextSubMenu.style.display === 'block';

          // সব সাবমেনু হাইড করে দাও
          document.querySelectorAll('.subMenu').forEach(function (sub) {
            sub.style.display = 'none';
          });

          // যদি আগেই শো ছিল, তাহলে হাইড হবে না — কারণ আগেই হাইড করে ফেলেছি
          // যদি আগেই হাইড ছিল, তাহলে এখন শো হবে
          if (!isVisible) {
            nextSubMenu.style.display = 'block';
          }
        }
      });
    });
  });
</script>







<!-- ---------------------------------------- -->
<div class="card_board_and_customer_info">

<div class="card_board" style="display: none; overflow: scroll;">  

    <div style="background-color: #1557FF; padding: 10pt; color: white;">
     <span>আপনার নির্বাচিত পন্য</span>
     <span onclick="siteberHide();" style="float: right; cursor: pointer;">x</span>
    </div>
<br>


    <div id="card_content">Loading...</div>

   <!--  <hr> -->

<div class="motDeliverSorbomot">

<div class="motDeliverSorbomotFrame">
<div style="display: grid; grid-template-columns: repeat(2, 1fr);"> 
  <span>মোট =</span>
  <span style="text-align: right;" class="Total"></span>
  <input hidden="" name="total_price" class="Total_input">
</div>

<div style="display: grid; grid-template-columns: repeat(2, 1fr); border-bottom: solid 1pt; margin-bottom: 3pt;">     
  <span>ডেলিভারী চার্জ =</span>
  <span style="text-align: right;" class="delivery_charge"></span>
  <input hidden="" name="delivery_charge" class="delivery_charge_input">
</div>

<div style="display: grid; grid-template-columns: repeat(2, 1fr);">     
  <span>সর্বমোট =</span>
  <span style="text-align: right;" class="grand_total"></span>
  <input hidden="" name="grand_total" class="grand_total_input">
</div>
</div>

</div>


<!-- ----------লোকাল স্টোরে ডাটা থাকলে, motDeliverSorbomot শো হবে, না থাকলে হাইড থাকবে।-- -->
<script>
function toggleMotDeliverSorbomot() {
    const motDeliverSorbomotList = document.querySelectorAll('.motDeliverSorbomot');

    // cart key থেকে ডাটা চেক
    const cartData = JSON.parse(localStorage.getItem('cart')) || [];

    motDeliverSorbomotList.forEach(div => {
        if (cartData.length > 0) {
            div.style.display = 'block'; // দেখাও
        } else {
            div.style.display = 'none'; // লুকাও
        }
    });
}

</script>

<!-- ------------to_card এ ক্লিক করলে যেন, motDeliverSorbomot শো হয় -------- -->
<script>
function showMotDeliverSorbomot() {
    const motDeliverSorbomotList = document.querySelectorAll('.motDeliverSorbomot');
    motDeliverSorbomotList.forEach(function(item) {
        item.style.display = 'block';
    });
}
</script>



<!-- ---------মোট, ডেলিভারী চার্জ, সর্বমোট এর ইনপুট যোগ করা--------------- -->
<script type="text/javascript">
  // Total মান ইনপুটে বসানো
document.querySelector('.Total_input').value = document.querySelector('.Total')?.textContent || '0';

// Delivery Charge ইনপুটে বসানো
document.querySelector('.delivery_charge_input').value = document.querySelector('.delivery_charge')?.textContent || '0';

// Grand Total ইনপুটে বসানো
document.querySelector('.grand_total_input').value = document.querySelector('.grand_total')?.textContent || '0';

</script>

<!--   <div style="display: grid; grid-template-columns: repeat(2, 1fr);">     
    <span>ডিসকাউন্ট * Discount 10% =</span><span style="text-align: right;" class="discountByCode"></span>
  </div>
 -->





<div class="motDeliverSorbomot">
<div class="action-buttons">
 <span class="checkout_button"><span class="checkout_button_text">অর্ডার করতে ক্লিক করুন</span></span>
</div>
</div>



<style>
.checkout_button_text{
  display: inline-block;
  transform-origin: center center;
  will-change: transform, letter-spacing;
}

@keyframes spread-pop {
  0%   { letter-spacing: 0;     transform: scale(1); }
  35%  { letter-spacing: 0.30em; transform: scale(1.04); }
  50%  { letter-spacing: 0.45em; transform: scale(1.09); }
  65%  { letter-spacing: 0.30em; transform: scale(1.04); }
  100% { letter-spacing: 0;     transform: scale(1); }
}

.pulse-spread{
  animation: spread-pop 700ms ease-in-out both;
}
</style>

<script>
// এনিমেশন চালানোর ফাংশন
function animateCheckoutButton(){
  const el = document.querySelector('.checkout_button_text');
  if(!el) return;
  el.classList.remove('pulse-spread');
  void el.offsetWidth; // reflow ট্রিক
  el.classList.add('pulse-spread');
}

// ডকুমেন্ট লোড হওয়ার পর থেকে বারবার চালানো
document.addEventListener("DOMContentLoaded", function(){
  // সাথে সাথেই একবার চালাও
  animateCheckoutButton();

  // তারপর প্রতি 2 সেকেন্ড পরপর চালাও
  setInterval(animateCheckoutButton, 2000);
});
</script>



<div class="action-buttons">
  <a href="index.php">
  <span style="background-color: #F82DFA;" class="more_product">Buy More Products"  * আরো পণ্য ক্রয় করুন</span>
  </a>
</div>

</div>


<!-- <div class="customer_info">
      <h1> PERSONAL INFORMATION <br> ব্যক্তিগত তথ্য : </h1>

      <label>নামের অংশ * First Name :</label>
      <input type="" class="first_name" name="first_name" >


      <label>নামের শেষ অংশ * Last Name :</label>
      <input type="" class="last_name" name="last_name" >


        <label>mobile * মোবাইল :</label>
        <input type="text" class="mobile" name="mobile" value="" onblur="generateTracking()" />




<div class="location-select">
  <div>
    <label for="division">বিভাগ * Division</label>
    <select id="division" class="division" onblur="generateTracking()"><option value="">-- নির্বাচন করুন * Select your option --</option></select>
  </div>
  <div>
    <label for="district">জেলা * District</label>
    <select id="district" class="district" disabled><option value="">-- নির্বাচন করুন * Select your option --</option></select>
  </div>
  <div>
    <label for="upazila">উপজেলা * Upazela</label>
    <select id="upazila" class="upazila" disabled><option value="">-- নির্বাচন করুন * Select your option --</option></select>
  </div>
  <div hidden="">
    <label for="union">ইউনিয়ন/পৌরসভা</label>
    <select id="union" disabled><option value="">-- নির্বাচন করুন * Select your option --</option></select>
  </div>
</div>






        <label>Address * ঠিকানা :</label>
        <input type="" class="address" name="address" required="" >






<div class="discount-wrapper">
  <label>Discount Code * ডিসকাউন্ট কোড :</label>
  <div class="input-group">
    <input type="text" class="discount_code" name="discount_code" placeholder="Enter code">
    <button class="add-btn" onclick="applyDiscount()">Add</button>
  </div>
</div>

  <input hidden="" type="text" class="discount_code_submit" name="discount_code_submit">

  <input hidden="" type="text" class="discount_present_submit" name="discount_present_submit">


  <input hidden="" type="text" class="track_number" name="track_number">



   
<br><br><br><br>


<label>Payment * পরিশোধ :</label>
<div class="payment-options-container">

    <div class="payment-option" data-method="Cash On Delivery">
        <img src="payment/cashOnDelivery.png" class="CashOnDelivery" alt="Cash On Delivery"><br>
        Cash On Delivery * ক্যাশ অন ডেলিভারী
    </div>

    <div class="payment-option" data-method="bKash">
        <img src="payment/bkash.png" class="bkash" alt="bKash"><br>
        bKash * বিকাশ
    </div>

    <div class="payment-option" data-method="Nagad">
        <img src="payment/nogod.png" class="nagad" alt="Nagad"><br>
        nogod * নগদ
    </div>

    <div class="payment-option" data-method="OK Wallet">
        <img src="payment/ok.png" class="ok" alt="OK"><br>
        ok * ওকে
    </div>

    <div class="payment-option" data-method="Rocket">
        <img src="payment/rocekt.png" class="rocket" alt="Rocket"><br>
        rocekt * রকেট
    </div>

    <div class="payment-option" data-method="Tap">
        <img src="payment/tap.png" class="tap" alt="Tap"><br>
        tap * ট্যাপ
    </div>

    <div class="payment-option" data-method="Upay">
        <img src="payment/upay.png" class="upay" alt="Upay"><br>
        upay * উপায়
    </div>

</div>

<input type="hidden"name="selected_payment_method"id="selectedPaymentMethod">

<br>
<br>
<br>

<div class="action-buttonsInfo">
  <span class="order_button">Place Order * অর্ডার করুন</span>
</div>

</div> -->

</div>




<script>
function generateTrackNumber() {
  const mobile = "<?php echo$mobile; ?>";

  if (mobile.length < 5) {
    alert("মোবাইল নম্বর সঠিকভাবে পাওয়া যায়নি।");
    return;
  }

  // ৫ সংখ্যার র‍্যান্ডম সিরিয়াল
  const serial = Math.floor(10000 + Math.random() * 90000); // always 5 digits

  // মোবাইলের শেষ ৫টি সংখ্যা
  const lastFive = mobile.slice(-5);

  // track_number ইনপুটে বসানো
  const trackInput = document.querySelector('.track_number');
  trackInput.value = serial + lastFive;
}
</script>



<script>
  function applyDiscount() {
    const code = document.querySelector('.discount_code').value;
    if (code.trim() === "") {
      //alert("Please enter a discount code!");
      return;
    }
    // এখানে AJAX বা ভ্যালিডেশন কোড যোগ করতে পারেন
    //alert("Applied Discount Code: " + code);
  }
</script>



<style type="text/css">
  .payment-options-container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 15px;
  margin-top: 10px;
}

.payment-option {
  text-align: center;
  padding: 12px;
  border: 2px solid #ccc;
  border-radius: 10px;
  cursor: pointer;
  transition: 0.3s ease-in-out;
  background-color: #f9f9f9;
}

.payment-option img {
  width: 60px;
  height: auto;
  margin-bottom: 8px;
}

.payment-option:hover {
  border-color: #0c7dda;
  background-color: #e7f3ff;
}

.payment-option.selected {
  border-color: #0c7dda;
  background-color: #d1eaff;
  box-shadow: 0 0 10px rgba(12, 125, 218, 0.3);
  font-weight: bold;
}

</style>

<!-- ---------------------পেমেন্ট অফশন সিলেক্ট করা-------------------- -->
<script>
  const paymentOptions = document.querySelectorAll('.payment-option');
  const selectedInput = document.getElementById('selectedPaymentMethod');

  paymentOptions.forEach(option => {
    option.addEventListener('click', () => {
      // Remove previous selection
      paymentOptions.forEach(opt => opt.classList.remove('selected'));

      // Mark selected
      option.classList.add('selected');
      selectedInput.value = option.dataset.method;
    });
  });
</script>




<style type="text/css">
.divisionBox {
    background-color: #fff;
    padding: 30px;
    border-radius: 8px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    text-align: center;
}

h1 {
    color: #333;
    margin-bottom: 30px;
}

.select-group {
    margin-bottom: 20px;
    text-align: left;
}

label {
    display: block;
    margin-bottom: 8px;
    font-weight: bold;
    color: #555;
}

select {
    width: 100%;
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 4px;
    font-size: 16px;
    appearance: none; /* Remove default arrow in some browsers */
    -webkit-appearance: none;
    -moz-appearance: none;
    background-color: #fff;
    cursor: pointer;
}

select:focus {
    outline: none;
    border-color: #007bff;
    box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
}

select:disabled {
    background-color: #e9ecef;
    cursor: not-allowed;
}


</style>


<!-- -----------checkout_button এর মধ্যে customer_info শো হবে।-------------- -->
<!-- 
<script type="text/javascript">
document.addEventListener('DOMContentLoaded', function () {
    const cardBoard = document.querySelector('.card_board');
    const customerInfo = document.querySelector('.customer_info');
    const checkoutButton = document.querySelector('.checkout_button');
    const moreProduct = document.querySelector('.more_product');
    const cardBoardAndCustomerInfo = document.querySelector('.card_board_and_customer_info');

    const windowWidth = window.innerWidth;

    // স্ক্রিন যদি 1024 বা তার কম হয়, তাহলে শুরুতেই customer_info হাইড করো
    if (windowWidth <= 1024) {
        customerInfo.style.display = 'none';
    }

    // Checkout button click করলে শুরু হবে
    checkoutButton.addEventListener('click', function () {
        const windowWidth = window.innerWidth;

        if (windowWidth > 1024) {
            const cardBoardWidth = cardBoard.offsetWidth;
            const finalWidth = windowWidth - cardBoardWidth;

            customerInfo.style.display = 'block';
            customerInfo.style.width = finalWidth + 'px';
            customerInfo.style.height = cardBoard.offsetHeight + 'px';

            if (cardBoardAndCustomerInfo) {
                cardBoardAndCustomerInfo.style.flexDirection = 'row';
            }

            cardBoard.style.position = 'fixed';
            cardBoard.style.top = '50%';
            cardBoard.style.left = '100%';
            cardBoard.style.transform = 'translate(-100%, -50%)';
            cardBoard.style.width = '50%';
        } else {
            // ছোট স্ক্রিন: এখনই show করাও
            customerInfo.style.display = 'block';

            if (cardBoardAndCustomerInfo) {
                cardBoardAndCustomerInfo.style.flexDirection = 'column';
            }

            cardBoard.style.position = 'relative';
            cardBoard.style.top = 'auto';
            cardBoard.style.left = 'auto';
            cardBoard.style.transform = 'none';
        }

        checkoutButton.style.display = 'none';
        moreProduct.style.display = 'block';
    });
});
</script>

 -->





<!-- <script>
  document.querySelector('.checkout_button').addEventListener('click', function () {
    const cardBoard = document.querySelector('.card_board');
    const customerInfo = document.querySelector('.customer_info');
    const moreProduct = document.querySelector('.more_product');

    // Display both sections
    cardBoard.style.display = 'block';
    customerInfo.style.display = 'block';
    moreProduct.style.display = 'block';

    // Responsive logic only for wider screen
    if (window.innerWidth > 1024) {
      // Large screen: two side layout
      document.querySelector('.card_board_and_customer_info').style.flexDirection = 'row';
      cardBoard.style.width = '50%';
      customerInfo.style.width = '50%';
    } else {
      // Small screen: column layout
      document.querySelector('.card_board_and_customer_info').style.flexDirection = 'column';
      cardBoard.style.width = '100%';
      customerInfo.style.width = '100%';
    }

    // Hide checkout button
    this.style.display = 'none';
  });
</script> -->



<!-- 
<script>
let data; // পুরো JSON ডেটা এখানে রাখা হবে

const divisionSelect = document.getElementById('division');
const districtSelect = document.getElementById('district');
const upazilaSelect = document.getElementById('upazila');
const unionSelect = document.getElementById('union');

// ✅ JSON ফাইল থেকে fetch করে data লোড করা
fetch('bd-dd-ui-bn.JSON')
  .then(response => response.json())
  .then(jsonData => {
    data = jsonData;
    const divisions = data["বিভাগ"];
    divisions.forEach(div => {
      const option = document.createElement('option');
      option.value = div.নাম;
      option.textContent = div.নাম;
      divisionSelect.appendChild(option);
    });
  })
  .catch(error => {
    console.error('ডেটা লোড করতে সমস্যা:', error);
  });

// Division সিলেকশন
divisionSelect.addEventListener('change', function () {
  districtSelect.innerHTML = '<option value="">-- নির্বাচন করুন --</option>';
  upazilaSelect.innerHTML = '<option value="">-- নির্বাচন করুন --</option>';
  unionSelect.innerHTML = '<option value="">-- নির্বাচন করুন --</option>';
  districtSelect.disabled = true;
  upazilaSelect.disabled = true;
  unionSelect.disabled = true;

  const selectedDivision = data["বিভাগ"].find(div => div.নাম === this.value);
  if (selectedDivision) {
    selectedDivision.জেলা.forEach(dist => {
      const option = document.createElement('option');
      option.value = dist.নাম;
      option.textContent = dist.নাম;
      districtSelect.appendChild(option);
    });
    districtSelect.disabled = false;
  }
});

// District সিলেকশন
districtSelect.addEventListener('change', function () {
  upazilaSelect.innerHTML = '<option value="">-- নির্বাচন করুন --</option>';
  unionSelect.innerHTML = '<option value="">-- নির্বাচন করুন --</option>';
  upazilaSelect.disabled = true;
  unionSelect.disabled = true;

  const selectedDivision = data["বিভাগ"].find(div => div.নাম === divisionSelect.value);
  const selectedDistrict = selectedDivision?.জেলা.find(dist => dist.নাম === this.value);

  if (selectedDistrict) {
    selectedDistrict.উপজেলা.forEach(upz => {
      const option = document.createElement('option');
      option.value = upz.নাম;
      option.textContent = upz.নাম;
      upazilaSelect.appendChild(option);
    });
    upazilaSelect.disabled = false;
  }
});

// Upazila সিলেকশন
upazilaSelect.addEventListener('change', function () {
  unionSelect.innerHTML = '<option value="">-- নির্বাচন করুন --</option>';
  unionSelect.disabled = true;

  const selectedDivision = data["বিভাগ"].find(div => div.নাম === divisionSelect.value);
  const selectedDistrict = selectedDivision?.জেলা.find(dist => dist.নাম === districtSelect.value);
  const selectedUpazila = selectedDistrict?.উপজেলা.find(upz => upz.নাম === this.value);

  if (selectedUpazila) {
    selectedUpazila.ইউনিয়ন.forEach(union => {
      const option = document.createElement('option');
      option.value = union;
      option.textContent = union;
      unionSelect.appendChild(option);
    });
    unionSelect.disabled = false;
  }
});
</script>

 -->




<div class="reg_formContainer">
<div class="reg_form" style="display: none;">

<div class="notice_board"></div>
<div class="notice_board_two"></div>
<div class="notice_board_three"></div>
<br>
<!-- Tab Buttons & Close Button একসাথে -->
<div class="tab_buttons">
  <div class="tab_button_group">
    <div class="tab_button active" onclick="switchTab('signup')">Sign Up</div>
    <div class="tab_button" onclick="switchTab('signin')">Sign In</div>
  </div>

  <div class="close_reg_form">
    <img onclick="pordaHide()+pordaHideAndreg_form()" src="logo/close_button.png" alt="Close">
  </div>
</div>


  <!-- Sign Up Form -->
  <div id="signup" class="auth_form active">
    <input type="text" name="mobile_customer" placeholder="আপনার মোবাইল নাম্বার লিখুন">
    <span name="submit_mobile" class="submit_mobile">✔ সাবমিট করুন</span>
  </div>



<!-- 🔒 Sign In Form – পাসওয়ার্ড ফিল্ড -->
<div id="otp_timer_for_forgot" class="otp_timerForForgot" style="font-size:16px; color:#097EF7; text-align:center; margin-bottom:10px; display: none;">03:00</div>


<div id="signin" class="auth_form">
  <input type="text" name="mobile_customerLogin" class="mobile_customerLogin" 
         placeholder="আপনার মোবাইল নাম্বার লিখুন">
<div class="password_wrapper">
<input type="password" name="passwordLogin" class="passwordLogin" 
           id="password" placeholder="আপনার পাসওয়ার্ড লিখুন">
<input style="display: none;" type="text" name="verified" class="verified" id="verified" value="verified">

    <!-- চোখের আইকন (SVG) -->
    <span class="toggle_password" onclick="togglePassword()">
      <!-- open eye -->
      <svg class="eye_open" xmlns="logo/eye-open-svgrepo-com.svg"
           viewBox="0 0 24 24" width="22" height="22">
        <path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8S1 12 1 12Z"
              fill="none" stroke="currentColor" stroke-width="2"/>
        <circle cx="12" cy="12" r="3"
                fill="none" stroke="currentColor" stroke-width="2"/>
      </svg>

      <!-- closed eye (slash আইকন) -->
      <svg class="eye_closed" xmlns="logo/eye-open-svgrepo-com.svg"
           viewBox="0 0 24 24" width="22" height="22" style="display:none">
        <path d="M17.94 17.94A10.97 10.97 0 0 1 12 20
           c-7 0-11-8-11-8a21.82 21.82 0 0 1 5.05-5.77"
        fill="none" stroke="currentColor" stroke-width="2"/>
        <path d="M1 1L23 23"
        fill="none" stroke="currentColor" stroke-width="2"/>
      </svg>
    </span>
  </div>
  <div class="login_actions_bottom">
    <span name="submit_login" class="submit_login">✔ সাবমিট করুন</span>
    <span style="width: 20%;"></span>
    <span name="forget_password" class="forget_password"> পাসওয়ার্ড ভুলে গেছেন</span>
  </div>

</div>




<script>
function startOtpTimerForgot(durationSeconds = 180) {
    const timerDisplay = document.getElementById('otp_timer_for_forgot');
    const submitBtn = document.querySelector('.forget_password');

    let remaining = durationSeconds;

    const interval = setInterval(() => {
        let minutes = Math.floor(remaining / 60);
        let seconds = remaining % 60;
        timerDisplay.textContent = `${minutes.toString().padStart(2,'0')}:${seconds.toString().padStart(2,'0')}`;

        if (remaining <= 0) {
            clearInterval(interval);
            timerDisplay.textContent = "OTP এক্সপায়ার!";

            otpInput.disabled = true;
            submitBtn.style.cursor = "not-allowed";
            submitBtn.style.backgroundColor = "#ccc";            

        }
        remaining--;
    }, 1000);
}

function showVerifyFormForgot() {
  const timerDisplay = document.querySelector('.otp_timerForForgot');
  timerDisplay.style.display = "block";  
    startOtpTimerForgot(180); // 3 মিনিট
}

// উদাহরণ: বাটন বা OTP পাঠানোর পরে কল দিন
//showVerifyFormForgot(); 
</script>









</div>
</div>





<!-- ----------যেখানে ক্লিক করা হবে, তখন notice_board মুছে যাবে।--------- -->
<script type="text/javascript">
  document.addEventListener('click', function () {
  const noticeBoard = document.querySelector('.notice_board');
  if (noticeBoard) {
    noticeBoard.innerText = ''; // অথবা noticeBoard.innerHTML = '';
  }
});



</script>







<script>
  function switchTab(tab) {
    // Toggle tab button active class
    document.querySelectorAll('.tab_button').forEach(btn => btn.classList.remove('active'));
    if (tab === 'signup') {
      document.querySelectorAll('.tab_button')[0].classList.add('active');
    } else {
      document.querySelectorAll('.tab_button')[1].classList.add('active');
    }

    // Toggle form visibility
    document.querySelectorAll('.auth_form').forEach(form => form.classList.remove('active'));
    document.getElementById(tab).classList.add('active');
  }

  function pordaHideAndreg_form() {
    document.querySelector('.reg_form').style.display = 'none';
  }


  function pordaHideAndverify_form() {
    document.querySelector('.verify_form').style.display = 'none';
  }
</script>


<script>
  // ইংরেজি ডিজিট ছাড়া অন্য কিছু ইনপুট থেকে সরিয়ে ফেলবে
  document.addEventListener('DOMContentLoaded', function () {
    const mobileInputs = document.querySelectorAll('input[name="mobile_customer"]');

    mobileInputs.forEach(input => {
      input.addEventListener('input', function () {
        // কেবল 0-9 রাখা হবে, অন্য সব সরানো হবে
        this.value = this.value.replace(/[^0-9]/g, '');
      });
    });
  });
</script>


<script>
/* 👁 Show / Hide Password */
function togglePassword() {
  const pass   = document.getElementById('password');
  const eyeOn  = document.querySelector('.eye_open');
  const eyeOff = document.querySelector('.eye_closed');

  const showing = pass.type === 'text';
  pass.type = showing ? 'password' : 'text';

  // SVG টগ্‌ল
  eyeOn.style.display  = showing ? 'inline' : 'none';
  eyeOff.style.display = showing ? 'none'   : 'inline';
}

</script>

<!-- ----------------------পাসওয়ার্ড ভুলে গেলে---------------------------------- -->
<!-- <script>
document.addEventListener('DOMContentLoaded', () => {
  const forgetPasswordBtn = document.querySelector('.forget_password');
  const mobileInput = document.querySelector('.mobile_customerLogin');

  forgetPasswordBtn.addEventListener('click', () => {
    const mobile = mobileInput.value.trim();

    // মোবাইল নাম্বার যাচাই (১১ সংখ্যার, 01 দিয়ে শুরু)
    if (!/^01[3-9][0-9]{8}$/.test(mobile)) {
      alert("সঠিক ১১ সংখ্যার মোবাইল নাম্বার দিন।");
      return;
    }

    // FormData তৈরি
    const formData = new FormData();
    formData.append('mobile', mobile);

    // fetch দিয়ে POST রিকোয়েস্ট পাঠানো
    fetch('send_password_by_sms.php', {
      method: 'POST',
      body: formData
    })
    .then(response => response.json())
    .then(data => {
      // সার্ভার থেকে পাওয়া রেসপন্স অনুযায়ী অ্যালার্ট দেখানো
      if (data.status === 'PASSWORD_SENT') {
        alert("পাসওয়ার্ড এই নাম্বারে পাঠানো হয়েছে: " + data.mobile);
      } else if (data.status === 'NOT_FOUND') {
        alert("এই নাম্বারের কোন একাউন্ট খুঁজে পাওয়া যায়নি।");
      } else if (data.status === 'INVALID_MOBILE') {
        alert("সঠিক মোবাইল নাম্বার দিন।");
      } else if (data.status === 'FAILED') {
        alert("SMS পাঠানো যায়নি। সমস্যা: " + data.error);
      } else {
        alert("অজানা সমস্যা হয়েছে: " + data.status);
      }
    })
    .catch(error => {
      console.error("Fetch error:", error);
      alert("নেটওয়ার্ক সমস্যা হয়েছে। আবার চেষ্টা করুন।");
    });
  });
});
</script> -->



<script>
document.addEventListener('DOMContentLoaded', () => {
  const forgetPasswordBtn = document.querySelector('.forget_password');
  const mobileInput = document.querySelector('.mobile_customerLogin');
  const passwordInput = document.querySelector('.passwordLogin');

  const submitLoginBtn = document.querySelector('.submit_login');

  forgetPasswordBtn.addEventListener('click', () => {
    const mobile = mobileInput.value.trim();

    // মোবাইল নাম্বার যাচাই (১১ সংখ্যার, 01 দিয়ে শুরু)
    if (!/^01[3-9][0-9]{8}$/.test(mobile)) {
      alert("সঠিক ১১ সংখ্যার মোবাইল নাম্বার দিন।");
      return;
    }

    // FormData তৈরি
    const formData = new FormData();
    formData.append('mobile', mobile);

    // fetch দিয়ে POST রিকোয়েস্ট পাঠানো
    fetch('send_password_by_sms.php', {
      method: 'POST',
      body: formData
    })
    .then(response => response.json())
    .then(data => {
      // সার্ভার থেকে পাওয়া রেসপন্স অনুযায়ী অ্যালার্ট দেখানো
      if (data.status === 'PASSWORD_SENT') {
        alert("OTP / Password এই নাম্বারে পাঠানো হয়েছে: " + data.mobile);

        // =======================
        // ✅ Web OTP API Integration
        // =======================
        if ('OTPCredential' in window) {
          const abortController = new AbortController();

          navigator.credentials.get({
            otp: { transport: ['sms'] },
            signal: abortController.signal
          }).then(otp => {
            console.log("OTP received:", otp.code);

            // 👉 SMS থেকে পাওয়া কোড mobile_customerLogin ফিল্ডে বসানো
            //mobileInput.value = otp.code;

            passwordInput.value = otp.code;

            submitLoginBtn.click();
            
          }).catch(err => {
            console.log("OTP auto fetch failed:", err);
          });
        }



      } else if (data.status === 'NOT_FOUND') {
        alert("এই নাম্বারের কোন একাউন্ট খুঁজে পাওয়া যায়নি।");
      } else if (data.status === 'INVALID_MOBILE') {
        alert("সঠিক মোবাইল নাম্বার দিন।");
      } else if (data.status === 'FAILED') {
        alert("SMS পাঠানো যায়নি। সমস্যা: " + data.error);
      } else {
        alert("অজানা সমস্যা হয়েছে: " + data.status);
      }

      showVerifyFormForgot();

    })
    .catch(error => {
      console.error("Fetch error:", error);
      alert("নেটওয়ার্ক সমস্যা হয়েছে। আবার চেষ্টা করুন।");
    });
  });
});
</script>


<!-- 
<div class="reg_form" style="display: block;">
  <div class="close_reg_form">
  <img  onclick="pordaHide()" class="close_sybmol_image_reg_form" src="logo/close_button.png">
  </div>
  <center><h1 style="font-family: sutonnyOMJ; margin-left: auto; margin-right: auto; line-height: 5pt; color: #097EF7;">মোবাইল নং</h1></center>
  <hr>
  <br>
  <input name="mobile_customer" class="mobile_customer" placeholder="আপনার মোবাইল নাম্বার লিখুন"> 
  <br><br><br>
  <span name="submit_mobile" class="submit_mobile" style="cursor: pointer;">Submit</span>
</div>

 -->

<!-- 
<div class="verify_form" style="display: none;">
  <div class="close_verify_form">
  <img onclick="pordaHide()+pordaHideAndverify_form()" class="close_sybmol_image_verify_form" src="logo/close_button.png">
  </div>
  <center><h1 style="font-family: sutonnyOMJ; margin-left: auto; margin-right: auto; line-height: 5pt; color: #097EF7;">ভ্যারিফাই মোবাইল</h1>
  </center>
  <hr>
  <br>


  <input style="display: none;" name="sms_mobile_customer" id="sms_mobile_customer" class="sms_mobile_customer" placeholder=""> 
<input style="display: none;" name="sms_otp_customer" id="sms_otp_customer" class="sms_otp_customer" placeholder="সিস্টেম OTP" >
<input style="display: none;" name=""class="verifiedFromOtp" value="verified">
<input name="verify_mobile_customer" class="verify_otp_customer" placeholder="OTP নাম্বার লিখুন" autocomplete="one-time-code">

<small class="otp_error_message" style="color: red; display: none;">আপনার OTP সঠিক নয়</small>

<span class="submit_verify_opt" style="cursor: not-allowed; background-color: #ccc; color: #fff; padding: 5px 10px; border-radius: 4px;">Submit</span>

  


  <div hidden="" id="display_result" class="display_result"></div>
  <div hidden="" id="display_result_two" class="display_result_two"></div>
  
  </div>
 -->

<div class="verify_form" style="display: none;">
  <div class="close_verify_form">
    <img onclick="closeVerifyForm()" class="close_sybmol_image_verify_form" src="logo/close_button.png">
  </div>
  <center>
    <h1 style="font-family: sutonnyOMJ; margin-left: auto; margin-right: auto; line-height: 5pt; color: #097EF7;">ভ্যারিফাই মোবাইল</h1>
  </center>
  <hr>
  <br>

  <div id="otp_timer" style="font-size:16px; color:#097EF7; text-align:center; margin-bottom:10px;">03:00</div>

  <input style="display: none;" name="sms_mobile_customer" id="sms_mobile_customer" class="sms_mobile_customer" placeholder=""> 
  <input style="display: none;" name="sms_otp_customer" id="sms_otp_customer" class="sms_otp_customer" placeholder="সিস্টেম OTP" >
  <input style="display: none;" name=""class="verifiedFromOtp" value="verified">
  <input name="verify_mobile_customer" class="verify_otp_customer" placeholder="OTP নাম্বার লিখুন" autocomplete="one-time-code">

  <small class="otp_error_message" style="color: red; display: none;">আপনার OTP সঠিক নয়</small>

  <span class="submit_verify_opt" style="cursor: not-allowed; background-color: #ccc; color: #fff; padding: 5px 10px; border-radius: 4px;">Submit</span>

  <div hidden="" id="display_result" class="display_result"></div>
  <div hidden="" id="display_result_two" class="display_result_two"></div>
</div>

<script>
function startOtpTimer(durationSeconds = 180) {
    const timerDisplay = document.getElementById('otp_timer');
    const submitBtn = document.querySelector('.submit_verify_opt');
    const otpInput = document.querySelector('.verify_otp_customer');

    let remaining = durationSeconds;

    // শুরু করার সঙ্গে সঙ্গে বাটন এক্টিভ নয়
    submitBtn.style.cursor = "not-allowed";
    submitBtn.style.backgroundColor = "#ccc";
    otpInput.disabled = false;

    const interval = setInterval(() => {
        let minutes = Math.floor(remaining / 60);
        let seconds = remaining % 60;
        timerDisplay.textContent = `${minutes.toString().padStart(2,'0')}:${seconds.toString().padStart(2,'0')}`;

        if (remaining <= 0) {
            clearInterval(interval);
            timerDisplay.textContent = "OTP এক্সপায়ার!";
            otpInput.disabled = true;
            submitBtn.style.cursor = "not-allowed";
            submitBtn.style.backgroundColor = "#ccc";
        }
        remaining--;
    }, 1000);
}

function showVerifyForm() {
    document.querySelector('.reg_form').style.display = 'none';
    document.querySelector('.verify_form').style.display = 'block';
    startOtpTimer(180); // 3 মিনিট
}

// উদাহরণ: বাটন বা OTP পাঠানোর পরে কল দিন
//showVerifyForm(); 
</script>















  
</div>

<!-- ------------সঠিক OTP দেওয়ার আগ পর্যন্ত submit_verify_otp হাইড থাকবে------------- -->
<script>
document.addEventListener('DOMContentLoaded', function () {
    const smsOtpInput = document.querySelector('.sms_otp_customer');
    const verifyOtpInput = document.querySelector('.verify_otp_customer');
    const submitBtn = document.querySelector('.submit_verify_opt');
    const errorMessage = document.querySelector('.otp_error_message');

    submitBtn.style.display = 'none';

    function validateOtp() {
        const systemOtp = smsOtpInput.value.trim();
        const userOtp = verifyOtpInput.value.trim();

        if (systemOtp !== "" && userOtp !== "") {
            if (systemOtp === userOtp) {
                submitBtn.style.display = 'inline-block';
                submitBtn.style.backgroundColor = '#28a745';
                submitBtn.style.color = '#fff';
                submitBtn.style.cursor = 'pointer';
                submitBtn.style.pointerEvents = 'auto';
                errorMessage.style.display = 'none';
            } else {
                submitBtn.style.display = 'none';
                errorMessage.style.display = 'none';
            }
        } else {
            submitBtn.style.display = 'none';
            errorMessage.style.display = 'none';
        }
    }

    smsOtpInput.addEventListener('input', validateOtp);
    verifyOtpInput.addEventListener('input', validateOtp);

    submitBtn.addEventListener('click', function (e) {
        const systemOtp = smsOtpInput.value.trim();
        const userOtp = verifyOtpInput.value.trim();

        if (systemOtp !== userOtp) {
            e.preventDefault();
            errorMessage.style.display = 'inline';
        }
    });
});
</script>






<center><div class="container_up_box"><strong>


</strong></div></center>

<div class="container">


<div  class="second_container">


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


<!-- ---------------যখন submit_mobile এর মধ্যে ক্লিক করা হবে, তখন OTP যাবে-------------- -->

<!-- <script>
document.addEventListener('DOMContentLoaded', function () {
  function setupOTPHandler() {
    const signupForm = document.getElementById('signup');
    const submitBtn = signupForm.querySelector('.submit_mobile');
    const mobileInput = signupForm.querySelector('input[name="mobile_customer"]');
    const smsMobileCustomer = document.getElementById('sms_mobile_customer');
    const smsOtpCustomer = document.getElementById('sms_otp_customer');
    const regForm = document.querySelector('.reg_form');
    const verifyForm = document.querySelector('.verify_form');

    const noticeBoard = document.querySelector('.notice_board');
    const noticeBoardTwo = document.querySelector('.notice_board_two');
    const noticeBoardThree = document.querySelector('.notice_board_three');

    if (submitBtn && mobileInput) {
      submitBtn.addEventListener('click', function () {

        const mobileNumber = mobileInput.value.trim();

          if (mobileNumber === "") {
            // noticeBoardTwo.innerText = "Please enter your mobile number. * মোবাইল নাম্বার দিন।";
            // noticeBoardTwo.style.color = "red";
            alert("মোবাইল নাম্বার দিন।");
             return;
          }

          if (mobileNumber.length !== 11) {
            alert(" সঠিক ১১ সংখ্যার মোবাইল নাম্বার দিন।");
            return;
            // noticeBoardThree.innerHTML = "Please enter a valid 11-digit mobile number. * সঠিক ১১ সংখ্যার মোবাইল নাম্বার দিন।";
            // noticeBoardThree.style.color = "red";           

          }



        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();
        })
        .then(data => {
          console.log('Server response (OTP Send):', data);

          if(data.status === "MOBILE_EXISTS"){
            // alert("This number is already registered. Please sign in. * এই নাম্বার নিবন্ধন আছে। দয়ান করে সাইন ইন করুন।");

            noticeBoard.innerText = "নম্বরটি নিবন্ধিত; দয়া করে Sign in করুন।";
            noticeBoard.style.color = "red";


          }else{

          regForm.style.display = 'none';
          verifyForm.style.display = 'block';
          smsMobileCustomer.value = data.mobile || '';
          smsOtpCustomer.value = data.otp || '';
          }
          


        const smsMobile = data.mobile;
        const smsOtp = data.otp;

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



        })
        .catch(error => {
          console.error('Error sending OTP:', error);
          alert("Please enter a valid mobile number * সঠিক মোবাইল নাম্বার দিন।");
        });
      });
    }
  }

  setupOTPHandler(); // Call once on DOM ready
});

</script>
 -->

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

  function setupOTPHandler() {
    const signupForm = document.getElementById('signup');
    const submitBtn = signupForm.querySelector('.submit_mobile');
    const mobileInput = signupForm.querySelector('input[name="mobile_customer"]');
    const smsMobileCustomer = document.getElementById('sms_mobile_customer');
    const smsOtpCustomer = document.getElementById('sms_otp_customer');
    const regForm = document.querySelector('.reg_form');
    const verifyForm = document.querySelector('.verify_form');

    const noticeBoard = document.querySelector('.notice_board');
    const submitVerifyBtn = document.querySelector('.submit_verify_opt');
    const verifyOtpInput = document.querySelector('.verify_otp_customer');

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

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

        if (mobileNumber.length !== 11) {
          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();
        })
        .then(data => {
          console.log('Server response (OTP Send):', data);

          if (data.status === "MOBILE_EXISTS") {
            noticeBoard.innerText = "নম্বরটি নিবন্ধিত; দয়া করে Sign in করুন।";
            noticeBoard.style.color = "red";
            return;
          }

          // ফর্ম পরিবর্তন
          regForm.style.display = 'none';
          verifyForm.style.display = 'block';
          smsMobileCustomer.value = data.mobile || '';
          smsOtpCustomer.value = data.otp || '';

          // DB তে মোবাইল+OTP ইনসার্ট
          const smsMobile = data.mobile;
          const smsOtp = data.otp;
          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(serverReply => {
            document.getElementById('display_result').innerHTML = serverReply;
          });

          // =======================
          // ✅ Web OTP API Integration
          // =======================
          if ('OTPCredential' in window) {
            const abortController = new AbortController();

            navigator.credentials.get({
              otp: { transport: ['sms'] },
              signal: abortController.signal
            }).then(otp => {
              console.log("OTP received: ", otp.code);
              verifyOtpInput.value = otp.code; // ইনপুটে বসাবে

              // বাটন এক্টিভ
              submitVerifyBtn.style.cursor = "pointer";
              submitVerifyBtn.style.backgroundColor = "#097EF7";

              // ✅ অটো সাবমিট
              submitVerifyBtn.click();

            }).catch(err => {
              console.log("OTP auto fetch failed:", err);
            });
          }


          showVerifyForm();

        })
        .catch(error => {
          console.error('Error sending OTP:', error);
          alert("Please enter a valid mobile number * সঠিক মোবাইল নাম্বার দিন।");
        });
      });
    }

    // ============================
    // ✅ Verify OTP Submit Handler
    // ============================
    if (submitVerifyBtn) {
      submitVerifyBtn.addEventListener('click', function () {
        const enteredOtp = verifyOtpInput.value.trim();
        const originalOtp = smsOtpCustomer.value.trim();

        if (enteredOtp === "" || enteredOtp.length !== 6) {
          alert("OTP লিখুন।");
          return;
        }

        if (enteredOtp !== originalOtp) {
          document.querySelector('.otp_error_message').style.display = "block";
          return;
        }

        // OTP মিললে সার্ভারে সাবমিট
        const formDataVerify = new FormData();
        formDataVerify.append("mobile", smsMobileCustomer.value);
        formDataVerify.append("verified", "true");

        fetch('verify_otp.php', {
          method: 'POST',
          body: formDataVerify
        })
        .then(response => response.text())
        .then(serverReply => {
          document.getElementById('display_result_two').innerHTML = serverReply;
          alert("✅ মোবাইল সফলভাবে ভেরিফাই হয়েছে!");
          // চাইলে এখানে redirect করতে পারেন
        });
      });
    }
  }

  setupOTPHandler(); // Call once on DOM ready
});
</script>







 <div style="background-color: #F1F2F4;" class="catagory_display_out_box">


   <?php
    // Include the content that was originally in index.php here
    // This allows index.php to "fill" this div
    if (isset($product_add_display_content)) {
        echo $product_add_display_content;
    }
  ?>


   <?php
    // Include the content that was originally in index.php here
    // This allows index.php to "fill" this div
    if (isset($seller_display_content)) {
        echo $seller_display_content;
    }
  ?>

    

  <?php
    // Include the content that was originally in index.php here
    // This allows index.php to "fill" this div
    if (isset($catagory_display_content)) {
        echo $catagory_display_content;
    }
  ?>


    <?php      
    // Include the content that was originally in index.php here
    // This allows index.php to "fill" this div
    if (isset($orderPage)) {
        echo$orderPage;
    }
  ?>

  <?php      
    // Include the content that was originally in index.php here
    // This allows index.php to "fill" this div
    if (isset($ruckNumberPage)) {
        echo$ruckNumberPage;
    }
  ?>




 



  

  <style type="text/css">
    .addressBar {
      background-color: #C3104D;
      color: #000000;
      width: 100%;
      height: 0.5in;
      text-align: center;
      color: white;
      line-height: 0.5in;
      font-weight: bold;
    }


  </style>

</div>
 







</div>  


<!-- <footer>
  <div style="background: #C3104D;  margin-top: 20pt;  bottom: 0pt; width: 100%; height: 40pt; position: sticky; z-index: 10000" >Jamal</div>
</footer> -->






 </div>

<div class="addressBar">আমাদের অফিস</div>


<!-- যে সময় card_board শো থাকবে, তখন পুরো স্ক্রীনের card_board অন্য অংশ হালকা কালারে কম oacity ব্যোকগ্রাউন্ডে  -->

<div class="porda" onclick="pordaHide()"> </div>  







<!-- ---------------কার্ডে যোগ করুন এর মধ্যে ক্লিক করলে কার্ডের পণ্য শো করানো---------------------- -->
 
<script>
function loadCardBoard() {
    const cardContent = document.getElementById('card_content');


    const cartData = JSON.parse(localStorage.getItem('cart')) || [];


    const cardBoard = document.querySelector('.card_board'); 
    cardBoard.style.display = "block"; 
    setTimeout(() => {
    cardBoard.classList.add('active');
    }, 10);


    toCardHide();



    if (cartData.length > 0) {
        let html = '';
        cartData.forEach(order => {
            html += `<div class="memo_outBox">
  <div class="first_row"><span>বিবরণ</span></div>
  <div class="second_row">
    <span class="category_pictureForCardFrame">
      <img class="category_pictureForCard" src="category/${order.category_picture}"> 
      <input hidden="" type="text" class="category_picture_input" name="category_picture[]" value="${order.category_picture}">
   
    </span>

    <span style="text-align: left; display: flex; flex-direction: column; gap: 5px;">

      <span>পণ্য : ${order.item}</span>
      <input hidden="" type="text" class="item_inputCard" name="item_input[]" value="${order.item}">

      <span>নাম : ${order.product_name}</span>
      <input hidden="" type="text" class="product_nameCard" name="product_name[]" value="${order.product_name}">

      <span>এসএল নং- ${order.gks}</span>
      <input hidden="" type="text" class="gksCard" name="gks[]" value="${order.gks}">

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

      <span>ওজন : ${order.weight}</span>
      <input hidden="" type="text" class="weightCard" name="weight[]" value="${order.weight}">

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

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

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

      <span class="deletButton" onclick="toggleMotDeliverSorbomot();" style="font-size: 10pt; color: black; cursor: pointer; padding: 2pt;">
        <i class="fa-solid fa-trash"></i>
      </span>
     </span>     
      <div class="quantityCad">
        <span class="minusCard">-</span>
        <input class="quantityInputCard" type="text" name="quantityInput[]" value="${order.quantity}"  readonly>
        <span class="plusCard">+</span>
      </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>
    <input hidden="" class="current_priceCard" type="text" name="current_price[]" value="${order.current_price}">
  </div>

</div>`;
        });

        cardContent.innerHTML = html;

        updateAllPrices?.();
        updateTotal?.();
        calculateDeliveryCharge?.();
        updateGrandTotal?.();

        document.querySelectorAll('.weightCard').forEach(input => {
            input.addEventListener('input', calculateDeliveryCharge);
        });

        // ✅ ডিলিট বাটনের ইভেন্ট বসানো
        document.querySelectorAll('.deletButton').forEach((btn, index) => {
            btn.addEventListener('click', function () {
                const memoBox = this.closest('.memo_outBox');
                if (memoBox) memoBox.remove();

                const cartData = JSON.parse(localStorage.getItem('cart')) || [];
                const itemToRemove = cartData[index];

                const updatedCart = cartData.filter(item =>
                    !(item.category_name === itemToRemove.category_name &&
                      item.item === itemToRemove.item &&
                      item.gks === itemToRemove.gks)
                );

                localStorage.setItem('cart', JSON.stringify(updatedCart));

                updateTroliQuantity();


                updateAllPrices?.();
                updateTotal?.();
                calculateDeliveryCharge?.();
                updateGrandTotal?.();
            });
        });

    } else {
        cardContent.innerHTML = `<p>কার্টে কোনো পণ্য নেই।</p>`;
    }

            window.scrollTo({
        top: 0,
        behavior: 'smooth'  // মসৃণভাবে উপরে যাবে
        });
}
</script>








<!-- ---------------কার্ডে অর্ডারকৃত পণ্য শো করানো---------------------- -->
<!-- <script>
function loadCardBoardByTroli() {
  const categoryInput = document.querySelector('.category_name_input');
  const categoryName = categoryInput ? categoryInput.value.trim() : '';

  const container = document.getElementById('card_content');
  const cartData = JSON.parse(localStorage.getItem('cart')) || [];

  const filteredData = categoryName
    ? cartData.filter(order => order.category_name === categoryName)
    : cartData;

  if (filteredData.length === 0) {
    container.innerHTML = "<p>🛒 ট্রলিতে কোনো অর্ডার নেই</p>";
    updateTroliQuantity();
    return;
  }

  let html = '<div class="order-list">';
  filteredData.forEach(order => {
    html += `
    <div class="memo_outBox">

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

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

        <span style="text-align: left; display: flex; flex-direction: column; gap: 5px;">

          <span>পণ্য: ${order.item}</span>
          <input type="hidden" class="item_inputCard" name="item_input[]" value="${order.item}">

          <span>নাম: ${order.product_name}</span>
          <input type="hidden" class="product_nameCard" name="product_name[]" value="${order.product_name}">

          <span>এসএল নং: ${order.gks}</span>
          <input type="hidden" class="gksCard" name="gks[]" value="${order.gks}">

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

          <span>ওজন: ${order.weight}</span>
          <input type="hidden" class="weightCard" name="weight[]" value="${order.weight}">

          <span style="text-decoration: line-through; color: #969496;">পূর্বের মূল্য: ${order.price}৳</span>
          <input type="hidden" class="priceCard" name="price[]" value="${order.price}">

          <span style="color: #097EF7;">ডিসকাউন্ট: ${order.discount}% Off</span>
          <input type="hidden" class="discountCard" name="discount[]" value="${order.discount}">

          <span style="font-size: 18pt; color: red;">মূল্য: ${order.current_price}৳</span>
          <input type="hidden" class="current_priceCard" name="current_price[]" value="${order.current_price}">

          <span class="deletButton" style="font-size: 10pt; color: white; cursor : pointer; background : red; padding : 2pt;">ডিলিট</span>

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

        <span class="current_price" style="font-size: 20pt; color: blue;" data-unit-price="${order.current_price}">
          ${order.current_price}
        </span>
      </div>
    </div>
    `;
  });

  html += '</div>';
  container.innerHTML = html;

  updateAllPrices?.();
  updateTotal?.();
  calculateDeliveryCharge?.();
  updateGrandTotal?.();

  document.querySelectorAll('.weightCard').forEach(input => {
    input.addEventListener('input', calculateDeliveryCharge);
  });

  // ডিলিট বাটনে ইভেন্ট যুক্ত করা
  document.querySelectorAll('.deletButton').forEach((btn, index) => {
    btn.addEventListener('click', function () {
      const memoBox = this.closest('.memo_outBox');
      if (memoBox) memoBox.remove();

      const cartData = JSON.parse(localStorage.getItem('cart')) || [];

      const filteredData = categoryName
        ? cartData.filter(order => order.category_name === categoryName)
        : cartData;

      const itemToRemove = filteredData[index];

      const updatedCart = cartData.filter(item =>
        !(item.category_name === itemToRemove.category_name &&
          item.item === itemToRemove.item &&
          item.gks === itemToRemove.gks)
      );

      localStorage.setItem('cart', JSON.stringify(updatedCart));

      updateAllPrices?.();
      updateTotal?.();
      calculateDeliveryCharge?.();
      updateGrandTotal?.();
      updateTroliQuantity(); // ডিলিট করার পর সংখ্যাও কমাও
    });
  });

  updateTroliQuantity(); // ট্রলি লোডের পর সংখ্যাও আপডেট করো
}
</script>
 -->



<script>
  // ট্রলিতে মোট কয়টি পণ্য আছে তা শো করবে
  function updateTroliQuantity() {
    const cartData = JSON.parse(localStorage.getItem('cart')) || [];
    const quantitySpan = document.querySelector('.troliAdedQuantity');
    quantitySpan.textContent = cartData.length;
  }

  // পেজ লোড হলে প্রথমে ট্রলি সংখ্যা দেখাও
  document.addEventListener('DOMContentLoaded', function () {
    updateTroliQuantity();
  });



document.addEventListener('DOMContentLoaded', function () {
    const toCardBtn = document.querySelector('.to_card');

    // 'কার্ডে যোগ করুন' বাটনে ক্লিক করলে ট্রলি আপডেট
    toCardBtn.addEventListener('click', function () {
        updateTroliQuantity();
    });

    // ডেলিগেশন: পুরো ডকুমেন্টে ক্লিক হ্যান্ডলার বসাও
    document.addEventListener('click', function (event) {
        if (event.target.classList.contains('deletButton')) {
            updateTroliQuantity(); // ✅ ট্রলি সংখ্যা আপডেট হবে
        }
    });
});




  // ✅ যদি অন্য কোথাও পণ্য অ্যাড করো, তাহলে এই ফাংশনটি কল করো
  function addToCart(product) {
    let cartData = JSON.parse(localStorage.getItem('cart')) || [];
    cartData.push(product); // এক্সাম্পল
    localStorage.setItem('cart', JSON.stringify(cartData));
    updateTroliQuantity(); // সংখ্যা আপডেট করো
  }

  // ✅ যদি পণ্য ডিলিট করো, তার পরেও এটা কল করো
  function deleteFromCart(index) {
    let cartData = JSON.parse(localStorage.getItem('cart')) || [];
    cartData.splice(index, 1);
    localStorage.setItem('cart', JSON.stringify(cartData));
    updateTroliQuantity(); // সংখ্যা আপডেট করো
  }
</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);

        // মোট দাম hidden input-এ বসানো
    const totalInput = document.querySelector('.Total_input');
    if (totalInput) {
      totalInput.value = 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>



<!-- -------------কার্ডের মধ্যে --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');
            const currentPriceInput = productRow.querySelector('.current_priceCard'); // ইনপুটটি খুঁজে আনা

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

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

            quantityInput.value = quantity;

            const newTotal = (unitPrice * quantity).toFixed(2);

            // স্প্যানে ভ্যালু বসানো
            currentPriceElement.innerText = newTotal;

            // ইনপুট ফিল্ডে ভ্যালু বসানো
            if (currentPriceInput) {
                currentPriceInput.value = newTotal;
            }

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

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

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

            if (!isNaN(unitPrice) && !isNaN(quantity)) {
                const newTotal = (unitPrice * quantity).toFixed(2);
                currentPriceElement.innerText = newTotal;
                if (currentPriceInput) {
                    currentPriceInput.value = newTotal;
                }
            }
        });
    }

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

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

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

        const totalInput = document.querySelector('.Total_input');
        if (totalInput) {
            totalInput.value = total.toFixed(2);
        }
    }

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

</script>




<!-- ---------------সাইটবার শো হাইড করা--------------------- -->

<!--  <script>
  document.addEventListener("DOMContentLoaded", function() {
    const pordaDiv = document.querySelector('.porda');
    const menuButton = document.querySelector('.menu_symbol');
    const closeButton = document.querySelector('.close_sybmol');
    const sidebar = document.querySelector('.sidebar');
    const toCardSpan = document.querySelector('.to_card'); // Get the "কার্ডে যোগ করুন" span
    const cardBoard = document.querySelector('.card_board'); // Get the "চেক বোর্ড" div
    const customerInfo = document.querySelector('.customer_info'); // Get the "চেক বোর্ড" div
    const closeCardBoard = document.querySelector('.close_card_board'); 
    const moreProduct = document.querySelector('.more_product'); 
    const checkoutButton = document.querySelector('.checkout_button'); 



    // Toggle sidebar on menu symbol click
    menuButton.addEventListener('click', function() {
      sidebar.style.display = (sidebar.style.display === "block") ? "none" : "block";
    });

    // Hide sidebar on close symbol click
    closeButton.addEventListener('click', function() {
      sidebar.style.display = "none";
    });

    // toCardSpan.addEventListener('click', function() {
    //   cardBoard.style.display = "block" ;
    // });


   closeCardBoard.addEventListener('click', function() {
      cardBoard.style.display = "none" ;
      pordaDiv.style.display = "none" ;
      customerInfo.style.display = "none" ;
      moreProduct.style.display = "none" ;
      checkoutButton.style.display = "block" ;
    });

http://localhost/hamisah/slide%20picture/fish.png


  });
</script> -->



<script>
  document.addEventListener("DOMContentLoaded", function() {
    const menuButtonSmall = document.querySelector('.menu_symbol_small');
    const closeButton = document.querySelector('.close_sybmol');
    const sidebar = document.querySelector('.sidebar');

    // Toggle sidebar on menu symbol click (for small screens)
    menuButtonSmall.addEventListener('click', function() {
      sidebar.style.display = (sidebar.style.display === "block") ? "none" : "block";
    });

    // Hide sidebar on close symbol click
    closeButton.addEventListener('click', function() {
      sidebar.style.display = "none";
    });
  });
</script>


<script>
  // বড় স্ক্রিনের রিসেট বাটনের জন্য
  document.querySelector('.reset_button').addEventListener('click', function () {
    document.querySelector('.search_input').value = '';
  });

</script>


<!-- ----------শুধু ইংরেজী সংখ্যা টাইপ করা যাবে, অন্য কোন ভাষার নয়, বর্ণও নয়----------- -->

<script>
document.addEventListener("DOMContentLoaded", function () {
  const input = document.querySelector('.mobile_customer');

  input.addEventListener('input', function () {
    // কেবলমাত্র ইংরেজি সংখ্যা রাখবে, অন্যসব সরিয়ে ফেলবে
    this.value = this.value.replace(/[^0-9]/g, '');
  });
});
</script>



<!-- ----------ডিসকাউন্ট-------- -->
<script>
document.addEventListener('DOMContentLoaded', function () {
    const submitBtn = document.querySelector('.add-btn');
    const discountCodeInput = document.querySelector('.discount_code');

    const discountCodeSubmit = document.querySelector('.discount_code_submit');
    const discountPresentSubmit = document.querySelector('.discount_present_submit');


    submitBtn.addEventListener('click', function () {
        // Clear previous styles and messages
        discountCodeInput.style.color = ''; // Reset color
        discountCodeInput.placeholder = 'Enter code'; // Reset placeholder

        const formData = new FormData();
        formData.append("discount_code", discountCodeInput.value); // Get the value

        fetch('discount.php', {
            method: 'POST',
            body: formData
        })
        .then(response => response.json())
        .then(data => {
            // console.log('Server Response:', data);
            if (data.status === 'success') {
                discountCodeInput.style.color = 'green';
          discountCodeInput.value = 'অভিনন্দন! আপনি' +data.discountPresent+'% ডিসকাউন্ট পাবেন।'; // Display "Congratulations!"

          discountCodeSubmit.value = data.discountCode; 
          discountPresentSubmit.value = data.discountPresent; // 

          // 
                //alert('অর্ডার সফল হয়েছে! ডিসকাউন্ট প্রয়োগ হয়েছে।'); // More descriptive alert
            } else if (data.status === 'invalid') {
                discountCodeInput.style.color = 'red';
                discountCodeInput.value = 'এমন কোন রেকর্ড নাই।'; // Display "No such record"
                //alert(data.message);
            } else {
                //alert(data.message); // For other potential error statuses from PHP
            }
        })
        .catch(error => {
            //console.error('Fetch Error:', error);
            //alert('সার্ভারে সমস্যা হয়েছে।');
            discountCodeInput.style.color = 'red'; // Indicate error
            discountCodeInput.value = 'ত্রুটি!'; // Display a generic error message
        });
    });
});
</script>









<!-- ----------ফাইনাল সাবমিট-------- -->
<!-- 
<script>
document.addEventListener('DOMContentLoaded', function () {
    const submitBtn = document.querySelector('.order_button');

    submitBtn.addEventListener('click', function () {
        const formData = new FormData();

        // Collect repeating product info
        document.querySelectorAll('.item_inputCard').forEach(input => {
            formData.append("item_inputCard[]", input.value.trim());
        });
        document.querySelectorAll('.product_nameCard').forEach(input => {
            formData.append("product_nameCard[]", input.value.trim());
        });
        document.querySelectorAll('.gksCard').forEach(input => {
            formData.append("gksCard[]", input.value.trim());
        });
        document.querySelectorAll('.sellerCard').forEach(input => {
            formData.append("sellerCard[]", input.value.trim());
        });
        document.querySelectorAll('.priceCard').forEach(input => {
            formData.append("priceCard[]", input.value.trim());
        });
        document.querySelectorAll('.discountCard').forEach(input => {
            formData.append("discountCard[]", input.value.trim());
        });
        document.querySelectorAll('.quantityInputCard').forEach(input => {
            formData.append("quantityInputCard[]", input.value.trim());
        });
        document.querySelectorAll('.current_priceCard').forEach(input => {
            formData.append("current_priceCard[]", input.value.trim());
        });

        // User info
      formData.append("first_name", document.querySelector('.first_name').value.trim());
      formData.append("last_name", document.querySelector('.last_name').value.trim());
      formData.append("mobile", document.querySelector('.mobile').value.trim());
      formData.append("division", document.querySelector('.division').value.trim());
      formData.append("district", document.querySelector('.district').value.trim());
      formData.append("upazila", document.querySelector('.upazila').value.trim());
      formData.append("address", document.querySelector('.address').value.trim());


formData.append("discount_code", document.querySelector('.discount_code_submit').value.trim());

formData.append("discount_present", document.querySelector('.discount_present_submit').value.trim());



formData.append("track_number", document.querySelector('.track_number').value.trim());



formData.append("total", document.querySelector('.Total').textContent.trim());

formData.append("delivery_charge", document.querySelector('.delivery_charge').textContent.trim());
formData.append("grand_total", document.querySelector('.grand_total').textContent.trim());




        // Payment method
        const selectedPaymentOption = document.querySelector('.payment-option.selected');
        if (selectedPaymentOption) {
            const selectedMethod = selectedPaymentOption.dataset.method;
            formData.append("payment_method", selectedMethod);
        } else {
            alert("দয়া করে একটি পেমেন্ট পদ্ধতি নির্বাচন করুন।");
            return;
        }

        // Send request
        fetch('final_order.php', {
            method: 'POST',
            body: formData
        })
        .then(response => response.json())
        .then(data => {
            console.log('Server Response:', data);
            if (data.status === 'success') {
                alert('অর্ডার সফল হয়েছে!');
                   // track_number নিন
          const trackNumber = document.querySelector('.track_number').value.trim();

          // রিডাইরেক্ট করুন ট্র্যাক নম্বর সহ
          window.location.href = 'searchAsTruckNumber.php?track_number=' + encodeURIComponent(trackNumber);
    } else {


                alert(data.message);
            }
        })
        .catch(error => {
            console.error('Fetch Error:', error);
            alert('সার্ভারে সমস্যা হয়েছে।');
        });
    });

    // Payment option selector
    const paymentOptions = document.querySelectorAll('.payment-option');
    paymentOptions.forEach(option => {
        option.addEventListener('click', () => {
            paymentOptions.forEach(opt => opt.classList.remove('selected'));
            option.classList.add('selected');
        });
    });
});
</script>


 -->


<!-- ---------------ডেলিভারী চার্জ হিসেব করা-------------- -->
<!-- ---------------ডেলিভারী চার্জ হিসেব করা-------------- -->
<script>
function calculateDeliveryCharge() {
  const weights = document.querySelectorAll('.weightCard');
  const quantities = document.querySelectorAll('.quantityInputCard');
  let totalWeight = 0;

  weights.forEach((input, index) => {
    let weight = parseFloat(input.value);
    let quantity = parseInt(quantities[index].value);
    if (!isNaN(weight) && !isNaN(quantity) && weight > 0 && quantity > 0) {
      totalWeight += weight * quantity;
    }
  });

  let totalCharge = 0;

  if (totalWeight > 0) {
    if (totalWeight <= 0.5) {
      totalCharge = 110;
    } else if (totalWeight <= 1) {
      totalCharge = 130;
    } else {
      let extraWeight = Math.ceil(totalWeight - 1);
      totalCharge = 130 + (extraWeight * 20);
    }
  }

  // চার্জ দেখানো
  document.querySelector('.delivery_charge').textContent = "" + totalCharge;

  // হিডেন ইনপুটেও চার্জ সেট করা
  const deliveryChargeInput = document.querySelector('.delivery_charge_input');
  if (deliveryChargeInput) {
    deliveryChargeInput.value = totalCharge;
  }

  // ডেলিভারি চার্জ হিসাব হবার পর গ্র্যান্ড টোটালও আপডেট করতে হবে
  updateGrandTotal();
}
</script>



<!-- ---------------মোট এবং ডেলিভারী চার্জ যোগ করা-------------- -->


<script>
function updateGrandTotal() {
  const totalEl = document.querySelector('.Total');
  const deliveryChargeEl = document.querySelector('.delivery_charge');
  const grandTotalEl = document.querySelector('.grand_total');

  // get numeric values by removing non-digit chars like ' টাকা' or others
  const total = parseFloat(totalEl.textContent.replace(/[^\d\.]/g, '')) || 0;
  const deliveryCharge = parseFloat(deliveryChargeEl.textContent.replace(/[^\d\.]/g, '')) || 0;

  const grandTotal = total + deliveryCharge;

  // গ্র্যান্ড টোটাল দেখানো
  grandTotalEl.textContent = "" + grandTotal.toFixed(2);

  // হিডেন ইনপুটেও মান বসানো
  const grandTotalInput = document.querySelector('.grand_total_input');
  if (grandTotalInput) {
    grandTotalInput.value = grandTotal.toFixed(2);
  }
}

// কল করতে পারো যখন দরকার, উদাহরণস্বরূপ:
updateGrandTotal();

// যদি পরবর্তীতে Total বা delivery_charge পরিবর্তিত হয়, তখন আবার কল করতে হবে।
</script>


<!-- -------------Traking নাম্বার তৈরী------------- -->
<script>
function generateTracking() {
  const mobileInput = document.querySelector('.mobile');
  const trackInput = document.querySelector('.track_number');

  const mobile = mobileInput.value.trim();

  // if (mobile.length < 5) {
  //   alert("মোবাইল নম্বর কমপক্ষে 11 সংখ্যার হতে হবে।");
  //   return;
  // }

  const lastFive = mobile.slice(-5);
  const serial = Math.floor(10000 + Math.random() * 90000); // ৫ ডিজিট র‍্যান্ডম সিরিয়াল
  const trackingNumber = serial + lastFive;

  trackInput.value = trackingNumber;
}
</script>


<script>
  document.addEventListener('DOMContentLoaded', function () {
    const printBtn = document.querySelector('.print');

    if (printBtn) {
      printBtn.addEventListener('click', function () {
        const printArea = document.querySelector('.print_area');
        const trackNumber = "<?= htmlspecialchars($track_number) ?>";
        const rawDate = "<?= htmlspecialchars($row_summary['sumit_date']) ?>";

        // তারিখ রূপান্তর: 2025-06-12 → 12-June-2025
        const months = [
          "January", "February", "March", "April", "May", "June",
          "July", "August", "September", "October", "November", "December"
        ];

        const dateObj = new Date(rawDate);
        const day = String(dateObj.getDate()).padStart(2, '0');
        const month = months[dateObj.getMonth()];
        const year = dateObj.getFullYear();

        const formattedDate = `${day}-${month}-${year}`;
        const fileName = `${formattedDate}_${trackNumber}.pdf`;

        if (printArea) {
          html2canvas(printArea, {
            scale: 2,
            useCORS: true
          }).then(canvas => {
            const imgData = canvas.toDataURL('image/png');
            const pdf = new jspdf.jsPDF('p', 'mm', 'a4');

            const pageWidth = pdf.internal.pageSize.getWidth();
            const pageHeight = pdf.internal.pageSize.getHeight();

            const margin = 15;
            const availableWidth = pageWidth - margin * 2;
            const availableHeight = pageHeight - margin;

            const imgProps = pdf.getImageProperties(imgData);
            const imgWidth = imgProps.width;
            const imgHeight = imgProps.height;

            const ratio = Math.min(availableWidth / imgWidth, availableHeight / imgHeight);
            const finalWidth = imgWidth * ratio;
            const finalHeight = imgHeight * ratio;

            const x = margin;
            const y = margin;

            pdf.addImage(imgData, 'PNG', x, y, finalWidth, finalHeight);
            pdf.save(fileName);
          });
        }
      });
    }
  });
</script>


<script>
function fillOrderTotals() {
  document.querySelector(".Total_input").value = document.querySelector(".Total")?.textContent || '0';
  document.querySelector(".delivery_charge_input").value = document.querySelector(".delivery_charge")?.textContent || '0';
  document.querySelector(".grand_total_input").value = document.querySelector(".grand_total")?.textContent || '0';
}

// ডকুমেন্ট লোড হলে কাজ শুরু
document.addEventListener("DOMContentLoaded", function () {
  const checkoutBtn = document.querySelector(".checkout_button");

  checkoutBtn.addEventListener("click", function () {
    // ✅ ইনপুট গুলোর মান বসাও
    fillOrderTotals();

    // তারপর session চেক করে ফর্ম সাবমিট
    fetch("check_session.php", {
      method: 'GET',
      credentials: 'same-origin'
    })
    .then(res => res.text())
    .then(status => {
      if (status.trim() === "logged_in") {

        const form = document.createElement("form");
        form.method = "POST";
        form.action = "order.php";

        const selectors = [
          ".Total_input",
          ".delivery_charge_input",
          ".grand_total_input",
          ".item_inputCard",
          ".product_nameCard",
          ".gksCard",
          ".sellerCard",
          ".weightCard",
          ".priceCard",
          ".discountCard",
          ".current_priceCard",
          ".quantityInputCard",
          ".category_picture_input"
        ];

        selectors.forEach(selector => {
          document.querySelectorAll(selector).forEach(input => {
            const clonedInput = document.createElement("input");
            clonedInput.type = "hidden";
            clonedInput.name = input.name;
            clonedInput.value = input.value;
            form.appendChild(clonedInput);
          });
        });

        document.body.appendChild(form);
        form.submit();


      } else {
        document.querySelector(".reg_form").style.display = "block";

        const cardBoard = document.querySelector('.card_board'); 
        cardBoard.classList.remove('active'); // slide out
        setTimeout(() => {
          cardBoard.style.display = "none";  
        }, 400);


      }
    })
    .catch(error => {
      console.error("Session check failed:", error);
    });
  });
});
</script>


<!-- <script>
document.addEventListener("DOMContentLoaded", function () {
    fetch("check_session.php", {
        method: 'GET',
        credentials: 'same-origin'
    })
    .then(res => res.text())
    .then(status => {
        status = status.trim();

        if (status === "logged_in") {
            // লগইন করা আছে
            document.querySelector(".logOut").style.display = "block";
            document.querySelector(".logIn").style.display = "none";

            // মূল কনটেন্ট দেখাবে

        } else {
            // লগইন করা নাই
            document.querySelector(".logOut").style.display = "none";
            document.querySelector(".logIn").style.display = "block";

            // রেজিস্ট্রেশন ফর্ম দেখাবে
        }
    })
    .catch(error => {
        console.error("Session check failed:", error);
    });
});
</script> -->



<!-- <script>
document.addEventListener('click', function () {
    window.scrollTo({
        top: 0,
        behavior: 'smooth'  // মসৃণভাবে উপরে যাবে
    });
});
</script>
 -->


</body>
</html>