<?php   
ob_start(); 
include("configa.php");
ob_end_flush();
?>

<!DOCTYPE html>
<html lang="bn">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta name="theme-color" content="#0ea5e9">
  <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;
    }

body {
  font-family: 'SutonnyOMJ', Arial, sans-serif;
  font-size: 16px;
  margin: 0;
  color: #333;
  position: relative;
  z-index: 0;
  background-color: #f4f6f8; /* মূল ব্যাকগ্রাউন্ড কালার */
}

body::before {
  content: "";
  position: fixed; /* পুরো স্ক্রিনে স্থির থাকবে */
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: url('picture/istockphoto.jpg') center center no-repeat;
  background-size: cover; /* পুরো ব্যাকগ্রাউন্ডে ফিট হবে */
  opacity: 0.2; /* হালকা জলছাপের জন্য ট্রান্সপারেন্সি */
  z-index: -1; /* কন্টেন্টের নিচে থাকবে */
}


.tab_button_group {
  display: flex;
  width: 100%;
}


    header {
      background: linear-gradient(135deg, #0ea5e9, #0284c7);
      color: white;
      padding: 16px;
      text-align: center;
      font-size: 20px;
      font-weight: bold;
    }

    footer {
      background: #0ea5e9;
      color: white;
      text-align: center;
      padding: 10px;
      font-size: 14px;
      margin-top: 40px;
    }

    /* Container */
    .containerFrame {
      max-width: 450px;
      margin: 40px auto;
      background: white;
      border-radius: 16px;
      box-shadow: 0 4px 15px rgba(0,0,0,0.1);
      overflow: hidden;
    }

    .container {
      padding: 25px 30px;
    }

    .tab_buttons {
      display: flex;
      border: 1px solid #ddd;
      border-radius: 8px;
      overflow: hidden;
      margin-bottom: 20px;
    }

    .tab_button {
      flex: 1;
      padding: 12px 0;
      text-align: center;
      background: #f5f5f5;
      cursor: pointer;
      font-weight: 500;
      transition: 0.3s;
    }

    .tab_button.active {
      background: #0ea5e9;
      color: #fff;
      font-weight: bold;
    }

    /* Form */
    .auth_form {
      display: none;
      flex-direction: column;
      gap: 15px;
      animation: fadeIn 0.3s ease-in-out;
    }

    .auth_form.active {
      display: flex;
    }

    .auth_form input {
      padding: 12px;
      border: 1px solid #ccc;
      border-radius: 8px;
      font-size: 15px;
      outline: none;
      transition: 0.3s;
    }

    .auth_form input:focus {
      border-color: #0ea5e9;
      box-shadow: 0 0 5px rgba(14,165,233,0.3);
    }

    .submit_mobile,
    .submit_login,
    .forget_password {
      display: inline-block;
      padding: 12px;
      text-align: center;
      border-radius: 8px;
      font-size: 14px;
      cursor: pointer;
      transition: 0.3s;
    }

    .submit_mobile, .submit_login {
      background: #0ea5e9;
      color: #fff;
    }

    .submit_mobile:hover, .submit_login:hover {
      background: #0284c7;
    }

    .forget_password {
      background: #10b981;
      color: white;
    }

    .forget_password:hover {
      background: #059669;
    }

    .login_actions_bottom {
      display: flex;
      justify-content: space-between;
      align-items: center;
      gap: 10px;
    }

    /* Password Eye */
    .password_wrapper {
      position: relative;
    }
    .password_wrapper input {
      width: 100%;
      padding-right: 40px;
    }
    .toggle_password {
      position: absolute;
      top: 50%;
      right: 12px;
      transform: translateY(-50%);
      cursor: pointer;
      color: #666;
    }
    .toggle_password:hover {
      color: #0ea5e9;
    }

/* Paragraph */
.promo_text {
  padding: 20px;
  background: #f9fafb;
  border-radius: 12px;
  margin: 20px auto;
  width: 60%;
  line-height: 1.6;
  text-align: justify;
  font-size: 18pt;

  /* শেডো */
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}


    .verify_otp_customer{
      padding: 5pt;
      margin-right: auto;
      margin-left: auto;

    }


    @keyframes fadeIn {
      from { opacity: 0; transform: translateY(5px); }
      to   { opacity: 1; transform: translateY(0); }
    }

  </style>

</head>

<body>

<header>লাখো রকম</header>

<div class="containerFrame">
  <div class="container">


<div class="reg_formContainer">
<div class="reg_form">

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


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




<!-- ----------Sign Up এর মাধ্যেম------lging_gest এর login করা / সেশন স্র্ট করা------------ -->
<!-- -----------------সেশন সফল হলে order টেবিলে ডাটা ইনসার্ট করা।----------- -->

<script>
document.addEventListener('DOMContentLoaded', function () {
    // DOM এলিমেন্ট রেফারেন্স
    const smsMobileCustomer = document.querySelector('.sms_mobile_customer');
    const smsOtpCustomer = document.querySelector('.sms_otp_customer');
    const verifiedInput = document.querySelector('.verifiedFromOtp');
    const displayResultTwo = document.querySelector('.display_result_two');
    const submitBtn = document.querySelector('.submit_verify_opt');

    const reg_form = document.querySelector('.reg_form');
    const verifyForm = document.querySelector('.verify_form');

    let isSubmitting = false;

    // ✅ mobile ফিল্ডে data.mobile সেট করার ফাংশন
    function setMobileValue(mobileValue) {
        const mobileField = document.querySelector('.mobile');
        if (mobileField) {
            mobileField.value = mobileValue;
            console.log("✅ Mobile value set to:", mobileValue);
            return true;
        }
        return false;
    }

    // ✅ ভেরিফিকেশন ফাংশন
    function verifyLogin() {
        const smsMobile = smsMobileCustomer.value.trim();
        const smsOtp = smsOtpCustomer.value.trim();
        const verifiedInp = verifiedInput.value.trim();

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

        fetch('login_login_seller.php', {
            method: 'POST',
            body: formData
        })
        .then(response => response.json())
        .then(data => {
            isSubmitting = false;
            if (data.status === 'success') {
                reg_form.style.display = 'none';
                verifyForm.style.display = 'none';

              document.querySelector(".logOut").style.display = "block";
              document.querySelector(".logIn").style.display = "none";


                            // ✅ localStorage এ mobile এবং otp সেভ করুন
              localStorage.setItem("mobile", data.mobile);
              localStorage.setItem("otp", data.otp);
              localStorage.setItem("first_name", data.first_name);



            const mobile = localStorage.getItem("mobile") || "";
            const otp = localStorage.getItem("otp") || "";
            const firstName = localStorage.getItem("first_name") || "";
            document.getElementById("user_info").textContent = mobile + " " + firstName;


                if (typeof loadCardBoard === "function") {
                    loadCardBoard();
                }
            } else {
                reg_form.style.display = 'block';
                alert(data.message);
            }
        })
        .catch(error => {
            isSubmitting = false;
            displayResultTwo.innerHTML = "সার্ভার সমস্যা: " + error.message;
        });
    }

  

    // ✅ বাটন ক্লিক হ্যান্ডলার
    submitBtn.addEventListener('click', function () {
        if (isSubmitting) return;
        isSubmitting = true;
        verifyLogin();
    });
});
</script>




<!-- -----Sign In এর মাধ্যেম------User Name এবং Password এর মাধ্যমে লগিন---login_login_seller.php------ -->

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

    if (loginBtn) {
        loginBtn.addEventListener('click', function () {
            const mobileInput = document.querySelector('.mobile_customerLogin').value.trim();
            const passwordInput = document.querySelector('.passwordLogin').value.trim();


            if (mobileInput === '' || passwordInput === '') {
                alert("মোবাইল নাম্বার এবং পাসওয়ার্ড দিতে হবে।");
                return;
            }

            const formData = new FormData();
            formData.append('username', mobileInput);
            formData.append('password', passwordInput);

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

                if (data.status === 'success') {
                    alert("লগইন সফল হয়েছে! " + data.username);

        window.location.href = "homepage.php";




                  

                } else {                  
                  alert(data.message || 'ভুল মোবাইল নাম্বার বা পাসওয়ার্ড');
                  document.querySelector(".logOut").style.display = "none";
                  document.querySelector(".logIn").style.display = "block";
                }

            })
            .catch(error => {
              
                console.error('Login Error:', error);
                /*alert("সার্ভারে সমস্যা হয়েছে। পরে চেষ্টা করুন।");*/
            });
        });
    }
});
</script>


<!-- -----login_login_seller.php- এর মাধ্যমে লগিন সফল হলে, লোকাল স্টোরে মোবাইল এবং পাসওয়ার্ড সেভ করানো----- -->
<script>
document.addEventListener("DOMContentLoaded", function () {
    const localMobile = localStorage.getItem("mobile");
    const localOtp = localStorage.getItem("otp");

    if (localMobile && localOtp) {
        // ✅ লোকাল স্টোরে ভ্যালু আছে → সার্ভারে মিলিয়ে দেখবো
        const formData = new FormData();
        formData.append('mobile', localMobile);
        formData.append('otp', localOtp);
        formData.append('verified', "yes"); // চাইলে fixed দিতে পারেন

        fetch("login_login_seller.php", {
            method: "POST",
            body: formData
        })
        .then(res => res.json())
        .then(data => {
            console.log("Auto login response:", data);

            if (data.status === "success") {
                // ✅ লগইন সফল হলে UI আপডেট

                document.querySelector(".logOut").style.display = "block";
                document.querySelector(".logIn").style.display = "none";


                
                // লোকাল স্টোর থেকে ডাটা নিয়ে span এ বসানো
              
                    const mobile = localStorage.getItem("mobile") || "";
                    const otp = localStorage.getItem("otp") || "";
                    const firstName = localStorage.getItem("first_name") || "";
                    document.getElementById("user_info").textContent = mobile + " " + firstName;
               
                // লগআউটের সময় লোকাল স্টোর ক্লিয়ার
                // function clearLocal() {
                //     localStorage.removeItem("mobile");
                //     localStorage.removeItem("first_name");
                //     localStorage.removeItem("otp"); // থাকলে এটাও মুছে যাবে
                // }




            } else {
                // লোকাল স্টোরে ভুল ডেটা থাকলে ক্লিয়ার করে দিবো
                localStorage.removeItem("mobile");
                localStorage.removeItem("otp");

                document.querySelector(".logOut").style.display = "none";
                document.querySelector(".logIn").style.display = "block";
            }
        })
        .catch(err => {
            console.error("Auto login error:", err);
        });
    } else {
        // ✅ লোকাল স্টোরে কিছু নাই → ডিফল্ট লগইন বাটন দেখাবে
        document.querySelector(".logOut").style.display = "none";
        document.querySelector(".logIn").style.display = "block";
    }
});
</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');
  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="verify_form" style="display: none;">
  <div class="close_verify_form">
    <img hidden="" 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">

<input hidden="" name="id_no" class="id_no">
  

  <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; display: none;">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>



<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');
    const otpErrorMessage = document.querySelector('.otp_error_message');
    const otpTimer = document.getElementById('otp_timer');
    const idNoInput = document.querySelector('.id_no');

    let timerInterval;

    // ============================
    // OTP পাঠানো
    // ============================
    if (submitBtn && mobileInput) {
      submitBtn.addEventListener('click', function () {
        const mobileNumber = mobileInput.value.trim();

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

        if (mobileNumber.length !== 11) {
          alert("সঠিক ১১ সংখ্যার মোবাইল নাম্বার দিন।");
          return;
        }

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

          startOtpTimer(3 * 60);

          // ✅ 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;
              handleOtpVerification();
            }).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 * সঠিক মোবাইল নাম্বার দিন।");
        });
      });
    }

    // ============================
    // OTP ভেরিফাই
    // ============================
    function handleOtpVerification() {
      const enteredOtp = verifyOtpInput.value.trim();
      const originalOtp = smsOtpCustomer.value.trim();

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

      if (enteredOtp !== originalOtp) {
        otpErrorMessage.style.display = "block";
        return;
      }

      const smsMobile = smsMobileCustomer.value;
      const smsOtp = smsOtpCustomer.value;

      // ৬ ডিজিটের র‌্যান্ডম নাম্বার তৈরি
      function generateRandom6() {
        return Math.floor(100000 + Math.random() * 900000); 
      }

      if (smsMobile.length >= 4) {
        const last4 = smsMobile.slice(-4);
        const random6 = generateRandom6();
        idNoInput.value = 's-'+random6 + last4;
      } else {
        idNoInput.value = "";
      }

      const formData = new FormData();
      formData.append("username", smsMobile);
      formData.append("password", smsOtp);
      formData.append("id_no", idNoInput.value);

      fetch('insert_login_seller.php', {
        method: 'POST',
        body: formData
      })
      .then(response => response.text())
      .then(serverReply => {
        document.getElementById('display_result').innerHTML = serverReply;

        clearInterval(timerInterval);
        autoLogin(smsMobile, smsOtp);
      });
    }

    // ============================
    // লগইন ফাংশন
    // ============================
    function autoLogin(mobile, otp) {
      const formData = new FormData();
      formData.append('username', mobile);
      formData.append('password', otp);

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

        if (data.status === 'success') {
          window.location.href = "homepage.php";
        } else {                  
          alert(data.message || 'ভুল মোবাইল নাম্বার বা পাসওয়ার্ড');
          document.querySelector(".logOut").style.display = "none";
          document.querySelector(".logIn").style.display = "block";
        }
      })
      .catch(error => {
        console.error('Login Error:', error);
        alert("সার্ভারে সমস্যা হয়েছে। পরে চেষ্টা করুন।");
      });
    }

    // ============================
    // Submit + Auto Submit
    // ============================
    if (submitVerifyBtn) {
      submitVerifyBtn.addEventListener('click', handleOtpVerification);

      verifyOtpInput.addEventListener('input', function () {
        const enteredOtp = verifyOtpInput.value.trim();
        const originalOtp = smsOtpCustomer.value.trim();

        if (enteredOtp.length === 6 && enteredOtp === originalOtp) {
          handleOtpVerification();
        }
      });
    }

    // ============================
    // OTP Timer
    // ============================
    function startOtpTimer(duration) {
      let time = duration;
      clearInterval(timerInterval);

      timerInterval = setInterval(function () {
        let minutes = Math.floor(time / 60);
        let seconds = time % 60;

        otpTimer.textContent =
          (minutes < 10 ? "0" : "") + minutes + ":" +
          (seconds < 10 ? "0" : "") + seconds;

        if (--time < 0) {
          clearInterval(timerInterval);
          otpTimer.textContent = "OTP মেয়াদ শেষ";
        }
      }, 1000);
    }
  }

  setupOTPHandler();
});
</script>



  
</div>


  </div>
</div>

<div class="promo_text">
  আপনার তৈরি প্রতিটি পণ্যের ভেতরে লুকিয়ে আছে আপনার পরিশ্রম, আপনার স্বপ্ন আর আপনার মেধা। হয়তো আজ পর্যন্ত সেই পণ্য সীমিত কিছু মানুষের কাছেই পৌঁছেছে। কিন্তু সময় এসেছে আপনার প্রতিভাকে সবার সামনে তুলে ধরার। আমাদের ই-কমার্স প্ল্যাটফর্ম আপনাকে দিচ্ছে সেই সুযোগ—এক ক্লিকে আপনার পণ্য পৌঁছে যাবে সারা দেশের হাজারো ক্রেতার হাতে। এখানে সেলার হয়ে আপনি শুধু বিক্রেতাই নন, বরং একজন উদ্যোক্তা হয়ে উঠবেন। আমরা আপনার পাশে থাকব—নিরাপদ পেমেন্ট, নির্ভরযোগ্য ডেলিভারি, মার্কেটিং সাপোর্ট এবং সহজ বিক্রয় ব্যবস্থাপনা দিয়ে। ঘরে বসেই শুরু করুন নিজের ব্যবসার নতুন অধ্যায়, আর দেখুন কিভাবে আপনার ছোট্ট উদ্যোগ একদিন বড় ব্র্যান্ডে পরিণত হয়। এখনই সেলার রেজিস্ট্রেশন করুন, কারণ আপনার প্রতিভা ও পণ্যের মূল্য সারা দেশের মানুষ জানার যোগ্য।
</div>

<footer>
  আমাদের ঠিকানা : জামানা প্লাজা, ডিবি রোড, চৌমুহনী, নোয়াখালী।
</footer>


</div>
</div>




</body>
</html>
