/* [File: main.js] (Multi-Step Layout Version) */

document.addEventListener('DOMContentLoaded', function() {
  bindOtherToggles(document);   // 1. Logic "อื่นๆ"
  bindUsedService();            // 2. Logic "เคย/ไม่เคย"
  initStepNav();                // 3. Logic เปลี่ยน Step (ถัดไป/ย้อนกลับ)
  setupSinglePageForm();        // 4. Logic ส่งฟอร์ม + Validate
  initChainedDropdowns();       // 5. Logic Dropdown จังหวัด/อำเภอ/ตำบล
});


// ============================================================
// Step Navigation — ถัดไป / ย้อนกลับ
// ============================================================
function initStepNav() {
  const form = document.getElementById('surveyForm');
  if (!form) return;

  const cards    = Array.from(form.querySelectorAll('.question-card[data-step]'));
  const stepDots = Array.from(document.querySelectorAll('.step[data-step]'));

  if (cards.length === 0) return;

  let currentStep = 1;

  // แสดงเฉพาะ card ที่ active
  function showStep(step) {
    cards.forEach(card => {
      const cardStep = parseInt(card.dataset.step);
      card.classList.toggle('active', cardStep === step);
    });
    stepDots.forEach(dot => {
      const dotStep = parseInt(dot.dataset.step);
      dot.classList.toggle('active', dotStep === step);
    });
    currentStep = step;
    window.scrollTo({ top: 0, behavior: 'smooth' });
  }

  // Validate เฉพาะ field ที่อยู่ใน card ปัจจุบัน
  function validateCurrentStep() {
    const currentCard = cards.find(c => parseInt(c.dataset.step) === currentStep);
    if (!currentCard) return true;

    let isValid = true;

    // ล้าง error เดิม
    currentCard.querySelectorAll('.form-group.error').forEach(el => el.classList.remove('error'));

    // Validate checkbox groups ที่มองเห็นอยู่
    currentCard.querySelectorAll('.form-group[data-required-group="true"]').forEach(group => {
      if (group.offsetParent === null) return;
      const isChecked = group.querySelector('input[type="checkbox"]:checked');
      if (!isChecked) {
        isValid = false;
        group.classList.add('error');
      }
    });

    // Validate required inputs ที่มองเห็นอยู่
    currentCard.querySelectorAll('input:required, textarea:required, select:required').forEach(input => {
      if (input.offsetParent === null || input.disabled) return;
      if (input.type === 'radio') {
        const groupChecked = form.querySelector(`input[name="${input.name}"]:checked`);
        if (!groupChecked) {
          isValid = false;
          const g = input.closest('.form-group');
          if (g) g.classList.add('error');
        }
      } else if (input.type !== 'checkbox') {
        if (input.value.trim() === '') {
          isValid = false;
          const g = input.closest('.form-group');
          if (g) g.classList.add('error');
        }
      }
    });

    if (!isValid) {
      const firstError = currentCard.querySelector('.form-group.error');
      if (firstError) firstError.scrollIntoView({ behavior: 'smooth', block: 'center' });
    }

    return isValid;
  }

  // ผูก event click กับปุ่ม ถัดไป / ย้อนกลับ
  document.addEventListener('click', function(e) {
    const btn = e.target.closest('[data-nav]');
    if (!btn) return;

    if (btn.dataset.nav === 'next') {
      if (!validateCurrentStep()) return;
      if (currentStep < cards.length) showStep(currentStep + 1);
    }

    if (btn.dataset.nav === 'prev') {
      if (currentStep > 1) showStep(currentStep - 1);
    }
  });

  // ลบ class active ออกทั้งหมดแล้วเริ่มที่ step 1
  showStep(1);
}



// 1. ฟังก์ชันสำหรับควบคุมฟอร์มแบบหน้าเดียว (Single-Page)
function setupSinglePageForm() {
  const form = document.getElementById('surveyForm');
  if (!form) return;
  
  const thankYouMessage = document.getElementById('thank-you-message');

  function validateAll() {
    const inputs = form.querySelectorAll('input:required, textarea:required, select:required');
    let isValid = true;
    
    form.querySelectorAll('.form-group.error').forEach(el => el.classList.remove('error'));

    // Validate checkbox groups
    form.querySelectorAll('.form-group[data-required-group="true"]').forEach(group => {
        // Only validate if parent is visible
        if (group.offsetParent === null) return; 

        const isChecked = group.querySelector('input[type="checkbox"]:checked');
        if (!isChecked) {
            isValid = false;
            group.classList.add('error');
        }
    });

    for (const input of inputs) {
        // Skip hidden/disabled inputs
        if (input.offsetParent === null || input.disabled) continue; 

        if (input.type === 'radio') {
            const name = input.name;
            const groupChecked = form.querySelector(`input[name="${name}"]:checked`);
            if (!groupChecked) {
                isValid = false;
                const groupContainer = input.closest('.form-group');
                if (groupContainer) groupContainer.classList.add('error');
            }
        } else if (input.type !== 'checkbox') { 
            if (input.value.trim() === '') {
                isValid = false;
                const groupContainer = input.closest('.form-group');
                if (groupContainer) groupContainer.classList.add('error');
            }
        }
    }
    
    if (!isValid) {
        alert('กรุณากรอกข้อมูลที่จำเป็น (*) ให้ครบถ้วน');
        // Scroll to the first error
        const firstError = form.querySelector('.form-group.error');
        if (firstError) {
          firstError.scrollIntoView({ behavior: 'smooth', block: 'center' });
        }
    }
    return isValid;
  }

  function resetTheForm() {
    if (thankYouMessage) {
      thankYouMessage.classList.add('hidden');
      thankYouMessage.classList.remove('active');
    }
    form.style.display = 'block';
    form.reset();
    
    // Reset Address Dropdowns
    document.querySelectorAll('.amphoe-select, .tambon-select').forEach(sel => {
        sel.innerHTML = '<option value="">-- กรุณาเลือก --</option>';
        sel.disabled = true;
    });

    form.querySelectorAll('.other-input').forEach(input => {
        input.style.display = 'none';
        input.classList.remove('visible');
        input.required = false;
    });
    
    bindUsedService();
    window.scrollTo(0, 0);
  }

  form.addEventListener('submit', function(e) {
      e.preventDefault();
      
      if (!validateAll()) {
          return;
      }
      
      const submitBtn = document.getElementById('submit-btn');
      const btnText = submitBtn.querySelector('span:not(.send-icon)');
      submitBtn.classList.add('loading');
      submitBtn.disabled = true;
      if(btnText) {
          btnText.textContent = 'กำลังส่ง...';
      } else {
          // If no span found, update button text directly but don't clear the icon if possible
          submitBtn.childNodes.forEach(node => {
              if (node.nodeType === Node.TEXT_NODE && node.textContent.trim() !== "") {
                  node.textContent = 'กำลังส่ง... ';
              }
          });
      }

      const formData = new FormData(form);
      
      // Capture Address Text instead of ID
      const selectedChangwat = form.querySelector('.province-select:not(:disabled) option:checked');
      const selectedAmphoe = form.querySelector('.amphoe-select:not(:disabled) option:checked');
      const selectedTambon = form.querySelector('.tambon-select:not(:disabled) option:checked');
      
      if (selectedChangwat) formData.set('changwat', selectedChangwat.text);
      if (selectedAmphoe) formData.set('amphoe', selectedAmphoe.text);
      if (selectedTambon) formData.set('tambon', selectedTambon.text);
      
      fetch(form.action, {
          method: 'POST',
          body: formData
      })
      .then(async response => {
          const text = await response.text();
          try {
              return JSON.parse(text);
          } catch (e) {
              console.error('JSON Parse Error. Raw Response:', text);
              throw new Error('Server returned invalid JSON: ' + text.substring(0, 200));
          }
      })
      .then(data => {
          if (data.success) {
              form.style.display = 'none';
              alert('ส่งข้อมูลสำเร็จ! 🎉');
              window.location.href = 'main.php';
          } else {
              alert('เกิดข้อผิดพลาด: ' + (data.message || 'ไม่สามารถส่งข้อมูลได้'));
              submitBtn.classList.remove('loading');
              submitBtn.disabled = false;
              if(btnText) btnText.textContent = 'ส่งแบบฟอร์ม';
          }
      })
      .catch(error => {
          console.error('Submission Error:', error);
          alert('เกิดข้อผิดพลาดในการส่งข้อมูล: ' + error.message + '\nกรุณาตรวจสอบการเชื่อมต่ออินเทอร์เน็ตหรือติดต่อผู้ดูแลระบบ');
          submitBtn.classList.remove('loading');
          submitBtn.disabled = false;
          if(btnText) {
              btnText.textContent = 'ส่งแบบฟอร์ม';
          } else {
              submitBtn.childNodes.forEach(node => {
                  if (node.nodeType === Node.TEXT_NODE && node.textContent.trim() !== "") {
                      node.textContent = 'ส่งแบบฟอร์ม ';
                  }
              });
          }
      });
  });

  form.addEventListener('keydown', (e) => {
    if (e.key === 'Enter' && e.target.type !== 'textarea') {
      e.preventDefault();
    }
  });

  form.querySelectorAll('input, textarea, select').forEach(input => {
    const eventType = (input.type === 'radio' || input.type === 'checkbox' || input.tagName === 'SELECT' || input.type === 'date') 
      ? 'change'
      : 'input';

    input.addEventListener(eventType, () => {
      const groupContainer = input.closest('.form-group');
      if (groupContainer && groupContainer.classList.contains('error')) {
        groupContainer.classList.remove('error');
      }
    });
  });
}


// 2. ฟังก์ชันสำหรับเงื่อนไข "เคย/ไม่เคย"
function bindUsedService() {
  const yesRadio = document.getElementById('used_yes');
  const noRadio = document.getElementById('used_no');
  if (!yesRadio) return; 

  const usedBlock = document.getElementById('section-used'); 
  const notUsedBlock = document.getElementById('section-not-used');

  function setRequired(block, isRequired) {
    block.querySelectorAll('input:not([type="checkbox"]), textarea, select').forEach(el => {
        el.disabled = !isRequired;
        
        if (el.classList.contains('other-input') && !el.classList.contains('visible')) {
           el.required = false;
        } else {
            if (el.name === 'ehong_suggestion') {
                el.required = false;
            } else {
                el.required = isRequired;
            }
        }
    });
    
    block.querySelectorAll('.form-group[data-required-group="true"]').forEach(group => {
        const checkboxes = group.querySelectorAll('input[type="checkbox"]');
        
        checkboxes.forEach(cb => {
            cb.disabled = !isRequired;
            cb.required = false;
        });
    });
  }

  function updateVisibility() {
    if (yesRadio.checked) {
      usedBlock.classList.remove('hidden');
      setRequired(usedBlock, true);
      notUsedBlock.classList.add('hidden');
      setRequired(notUsedBlock, false);
      
    } else if (noRadio.checked) {
      usedBlock.classList.add('hidden');
      setRequired(usedBlock, false);
      notUsedBlock.classList.remove('hidden');
      setRequired(notUsedBlock, true);
    } else {
      usedBlock.classList.add('hidden');
      setRequired(usedBlock, false);
      notUsedBlock.classList.add('hidden');
      setRequired(notUsedBlock, false);
    }
  }

  [yesRadio, noRadio].forEach(el => el.addEventListener('change', updateVisibility));
  updateVisibility();
}


// 3. ฟังก์ชันสำหรับช่อง "อื่นๆ" (Others)
function bindOtherToggles(scope) {
  const otherInputMap = new Map();
  scope.querySelectorAll('input[data-toggle="other"]').forEach(toggleInput => {
    const targetElement = document.querySelector(toggleInput.dataset.target);
    if (targetElement) {
      otherInputMap.set(toggleInput, targetElement);
      targetElement.style.display = 'none';
      targetElement.required = false;
    }
  });

  const groups = {};
  scope.querySelectorAll('input[name]').forEach(input => {
    const name = input.name;
    if (input.type === 'radio' || input.type === 'checkbox') {
      if (!groups[name]) groups[name] = [];
      groups[name].push(input);
    }
  });

  Object.values(groups).forEach(inputsInGroup => {
    inputsInGroup.forEach(input => {
      input.addEventListener('change', () => {
        inputsInGroup.forEach(item => {
          const target = otherInputMap.get(item);
          if (target) {
            target.value = '';
            target.style.display = 'none';
            target.classList.remove('visible');
            target.required = false;
          }
        });

        if (input.checked) {
          const targetToShow = otherInputMap.get(input);
          if (targetToShow) {
            targetToShow.style.display = 'block';
            targetToShow.classList.add('visible');
            targetToShow.required = true;
            targetToShow.focus();
          }
        }
      });
    });
  });
}


// 4. Logic สำหรับ Dropdown 3 ชั้น
function initChainedDropdowns() {
    const apiEndpoint = 'get_locations.php';

    // ฟังก์ชันสำหรับ Reset และเติม Dropdown
    function populateDropdown(selectElement, items, defaultOptionText, valueKey, nameKey) {
        selectElement.innerHTML = ''; // ล้างของเก่า
        const defaultOption = document.createElement('option');
        defaultOption.value = '';
        defaultOption.textContent = defaultOptionText;
        selectElement.appendChild(defaultOption);

        items.forEach(item => {
            const option = document.createElement('option');
            option.value = item[valueKey]; // value คือ รหัส (เช่น AM_CODE)
            option.textContent = item[nameKey]; // text คือ ชื่อ (เช่น AM_NAME)
            selectElement.appendChild(option);
        });
        selectElement.disabled = false; // เปิดใช้งาน
    }

    // --- A. ผูก Event ให้กับ "จังหวัด" (มี 2 อัน) ---
    document.querySelectorAll('.province-select').forEach(selectProv => {
        selectProv.addEventListener('change', async function() {
            const pr_code = this.value; // นี่คือ PR_CODE
            const parentBlock = this.closest('#section-used, #section-not-used');
            if (!parentBlock) return;

            const selectAmphoe = parentBlock.querySelector('.amphoe-select');
            const selectTambon = parentBlock.querySelector('.tambon-select');

            // 1. รีเซ็ตอำเภอและตำบล
            selectAmphoe.innerHTML = '<option value="">-- กำลังโหลด... --</option>';
            selectAmphoe.disabled = true;
            selectTambon.innerHTML = '<option value="">-- เลือกตำบล --</option>';
            selectTambon.disabled = true;

            if (!pr_code) {
                 selectAmphoe.innerHTML = '<option value="">-- เลือกอำเภอ --</option>';
                return; // ถ้าผู้ใช้เลือก "-- เลือกจังหวัด --"
            }

            // 2. ยิง API ขออำเภอ
            try {
                const response = await fetch(`${apiEndpoint}?action=get_amphoe&pr_code=${pr_code}`);
                const amphoes = await response.json();
                populateDropdown(selectAmphoe, amphoes, '-- เลือกอำเภอ --', 'AM_CODE', 'AM_NAME');
            } catch (error) {
                console.error('Error fetching amphoe:', error);
                selectAmphoe.innerHTML = '<option value="">-- โหลดล้มเหลว --</option>';
            }
        });
    });

    // --- B. ผูก Event ให้กับ "อำเภอ" (มี 2 อัน) ---
    document.querySelectorAll('.amphoe-select').forEach(selectAmphoe => {
        selectAmphoe.addEventListener('change', async function() {
            const am_code = this.value; // นี่คือ AM_CODE
            const parentBlock = this.closest('#section-used, #section-not-used');
            if (!parentBlock) return;
            
            const selectProv = parentBlock.querySelector('.province-select');
            const pr_code = selectProv.value; // เอา PR_CODE จากจังหวัด
            
            const selectTambon = parentBlock.querySelector('.tambon-select');

            // 1. รีเซ็ตตำบล
            selectTambon.innerHTML = '<option value="">-- กำลังโหลด... --</option>';
            selectTambon.disabled = true;

            if (!am_code || !pr_code) {
                selectTambon.innerHTML = '<option value="">-- เลือกตำบล --</option>';
                return;
            }

            // 2. ยิง API ขอตำบล
            try {
                const response = await fetch(`${apiEndpoint}?action=get_tambon&pr_code=${pr_code}&am_code=${am_code}`);
                const tambons = await response.json();
                populateDropdown(selectTambon, tambons, '-- เลือกตำบล --', 'TU_CODE', 'TU_NAME');
            } catch (error) {
                console.error('Error fetching tambon:', error);
                selectTambon.innerHTML = '<option value="">-- โหลดล้มเหลว --</option>';
            }
        });
    });
}