<!DOCTYPE html>
<html lang="bn">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>বাংলাদেশ প্রশাসনিক কাঠামো</title>
  <style>
    body {
      font-family: Arial, sans-serif;
      margin: 20px;
      background-color: #f4f4f4;
      color: #333;
    }
    .location-select {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
      gap: 20px;
      padding: 20px;
      border: 1px solid #ddd;
      border-radius: 8px;
      background-color: #fff;
      box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    }
    .location-select div {
      display: flex;
      flex-direction: column;
    }
    label {
      margin-bottom: 8px;
      font-weight: bold;
    }
    select {
      padding: 10px;
      border: 1px solid #ccc;
      border-radius: 4px;
      background-color: #f9f9f9;
      font-size: 1rem;
      cursor: pointer;
    }
    select:focus {
      outline: none;
      border-color: #007bff;
      box-shadow: 0 0 0 0.2rem rgba(0,123,255,.25);
    }
  </style>
</head>
<body>

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

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

</body>
</html>
