<!DOCTYPE html>
<html lang="bn">
<head>
<meta charset="UTF-8">
<title>Order Form</title>
<style>
  body {
    font-family: "Noto Sans Bengali", Arial, sans-serif, sutonnyOMJ;
    background: #f3f4f6;
    margin: 0;
    padding: 20px;
  }

  .product_and_information {
    max-width: 600px;
    margin: auto;
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
    padding: 20px 30px;
  }

  .info h1 {
    font-size: 20px;
    margin-bottom: 15px;
    color: #111827;
    border-bottom: 2px solid #e5e7eb;
    padding-bottom: 8px;
  }

  label {
    display: block;
    margin: 10px 0 5px;
    font-weight: 600;
    color: #374151;
  }

  input[type="text"], select {
    width: 100%;
    padding: 10px;
    border: 1px solid #d1d5db;
    border-radius: 8px;
    font-size: 14px;
    outline: none;
    transition: border 0.2s ease;
  }

  input[type="text"]:focus, select:focus {
    border-color: #2563eb;
    box-shadow: 0 0 0 3px rgba(37,99,235,0.2);
  }

  .location-select {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    margin-top: 10px;
  }

  .buttonsInfo {
    text-align: center;
    margin-top: 20px;
  }

  .order_button {
    display: inline-block;
    background: #2563eb;
    color: #fff;
    font-size: 16px;
    font-weight: bold;
    padding: 12px 25px;
    border-radius: 50px;
    cursor: pointer;
    transition: background 0.3s ease, transform 0.2s;
  }

  .order_button:hover {
    background: #1e40af;
    transform: translateY(-2px);
  }
</style>
</head>
<body>



<div  class="product_and_information">

  <div class="info">
    <h1>ব্যক্তিগত তথ্য :</h1>

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

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

    <label>মোবাইল :</label>
    <input type="text" class="mobile" name="mobile">

    <div class="location-select">
      <div>
        <label for="division">বিভাগ</label>
        <select id="division" class="division" name="division">
          <option value="">--নির্বাচন করুন--</option>
        </select>
      </div>
      <div>
        <label for="district">জেলা</label>
        <select id="district" class="district" name="district">
          <option value="">--নির্বাচন করুন--</option>
        </select>
      </div>
      <div>
        <label for="upazila">উপজেলা</label>
        <select id="upazila" class="upazila" name="upazila">
          <option value="">--নির্বাচন করুন--</option>
        </select>
      </div>
      <div>
        <label for="union">ইউনিয়ন/পৌরসভা</label>
        <select id="union" class="union" name="union">
          <option value="">--নির্বাচন করুন--</option>
        </select>
      </div>
    </div>

    <label>দোকানের নাম :</label>
    <input type="text" class="shopName" name="shopName" required>

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

  <div class="buttonsInfo">
    <span class="order_button"><span class="order_button_text" name="submitButton">অর্ডার করুন</span></span>
  </div>

</div>




<script>
document.addEventListener("DOMContentLoaded", function() {
  document.querySelector(".order_button").addEventListener("click", function() {

    const data = {
      first_name: document.querySelector(".first_name").value,
      last_name: document.querySelector(".last_name").value,
      mobile: document.querySelector(".mobile").value,
      division: document.querySelector(".division").value,
      district: document.querySelector(".district").value,
      upazila: document.querySelector(".upazila").value,
      union: document.querySelector(".union").value,
      shopName: document.querySelector(".shopName").value,
      address: document.querySelector(".address").value
    };

    const xhr = new XMLHttpRequest();
    xhr.open("POST", "seller_insert.php", true);
    xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
    xhr.onload = function() {
      if (xhr.status === 200) {
        // যদি ইনসার্ট সফল হয় (সার্ভার থেকে সফল বার্তা আসে)
        const response = xhr.responseText.trim();
        if (response === "সফল") { // আপনার সার্ভার থেকে আসা সফল বার্তা
          document.querySelector(".product_and_information").style.display = "none";
          alert("আপনার অর্ডার সফল হয়েছে!");
        } else {
          alert(response);
        }
      } else {
        alert("Error: " + xhr.status);
      }
    };

    const params = Object.keys(data).map(key => key + "=" + encodeURIComponent(data[key])).join("&");
    xhr.send(params);

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




<script>
document.addEventListener("DOMContentLoaded", function () {
    const divisionSelect = document.querySelector(".division");
    const districtSelect = document.querySelector(".district");

    // JSON ফাইল লোড
    fetch("bd-dd-ui-bn.JSON")
        .then(response => response.json())
        .then(data => {
            const selectedDivision = divisionSelect.value.trim();

            if (selectedDivision && data[selectedDivision]) {
                // জেলা dropdown পরিষ্কার করে নতুন option যোগ করবো
                districtSelect.innerHTML = "";

                // প্রথম default option
                const defaultOption = document.createElement("option");
                defaultOption.value = "";
                defaultOption.textContent = "-- নির্বাচন করুন * Select your option --";
                districtSelect.appendChild(defaultOption);

                // JSON থেকে জেলা list নিয়ে append করা
                data[selectedDivision].districts.forEach(district => {
                    const option = document.createElement("option");
                    option.value = district.name;
                    option.textContent = district.name;
                    
                    // যদি আগের district value match করে তাহলে selected
                    if (district.name === "<?php echo $district; ?>") {
                        option.selected = true;
                    }
                    
                    districtSelect.appendChild(option);
                });
            }
        })
        .catch(err => {
            console.error("JSON লোড করতে সমস্যা:", err);
        });
});
</script>




</body>
</html>



