document.addEventListener('DOMContentLoaded', function () {
  const formSetsContainer = document.getElementById('form-sets-container');
  const btnTambahForm = document.getElementById('btnTambahForm');

  // Auto-expand textarea
  function autoExpand(textarea) {
    textarea.addEventListener('input', function () {
      this.style.height = 'auto';
      this.style.height = this.scrollHeight + 'px';
    });
  }

  // Inisialisasi Selectize
  function initSelectizeAll(context = document) {
    $(context).find('.tags-menu').selectize(selectizeConfigTagsMenu);
    $(context).find('.date-input').selectize(selectizeConfigDateInput);
  }

  // Destroy semua selectize sebelum clone
  function destroySelectize(context) {
    context.querySelectorAll('select').forEach(select => {
      const instance = select.selectize;
      if (instance) instance.destroy();
    });
  }

  // Inisialisasi awal
  document.querySelectorAll('.auto-expand').forEach(autoExpand);
  initSelectizeAll();

  // Tambah form-set
  btnTambahForm.addEventListener('click', function () {
    const lastFormSet = formSetsContainer.querySelector('.form-set:last-of-type');

    // Destroy selectize sebelum clone
    destroySelectize(lastFormSet);

    const clone = lastFormSet.cloneNode(true);

    // Bersihkan input dan textarea
    clone.querySelectorAll('input, textarea').forEach(el => {
      if (el.type === 'file') {
        el.value = null;
      } else {
        el.value = '';
      }
    });

    // Bersihkan select (hapus .selectize dan reset element <select>)
    clone.querySelectorAll('select').forEach(select => {
      const wrapper = select.parentElement.querySelector('.selectize-control');
      if (wrapper) wrapper.remove();
      select.innerHTML = ''; // Kosongkan option, bisa diisi ulang lewat AJAX
    });

    // Tampilkan tombol hapus
    clone.querySelector('.btn-remove-form').classList.remove('d-none');

    // Tambahkan ke DOM
    formSetsContainer.appendChild(clone);

    // Inisialisasi ulang textarea & Selectize untuk elemen baru
    clone.querySelectorAll('.auto-expand').forEach(autoExpand);
    initSelectizeAll();
  });

  // Hapus form-set
  formSetsContainer.addEventListener('click', function (e) {
    if (e.target.closest('.btn-remove-form')) {
      const formSets = formSetsContainer.querySelectorAll('.form-set');
      if (formSets.length > 1) {
        e.target.closest('.form-set').remove();
      } else {
        alert('Minimal satu form harus ada.');
      }
    }
  });
});

// CONFIG SELECTIZE

const selectizeConfigTagsMenu = {
  valueField: 'kategori_diet_id',
  labelField: 'nama_kategori_diet',
  searchField: ['nama_kategori_diet', 'kategori_diet_id'],
  create: false,
  placeholder: "Cari item kalibrasi...",
  maxItems: null,
  load: function(query, callback) {
    if (!query.length) return callback();
    $.ajax({
      url: '/dashboard/option/klasifikasi-menu',
      data: { search: query },
      success: function(response) {
        if (response.error === 0 && Array.isArray(response.data)) {
          callback(response.data);
        } else {
          callback();
        }
      },
      error: function() {
        callback();
      }
    });
  },
  render: {
    option: function(item, escape) {
      return `
        <div class="p-1">
          <div class="fw-semibold" style="font-size: 0.85rem;">
            ${escape(item.nama_kategori_diet)}
          </div>
        </div>`;
    },
    item: function(item, escape) {
      return `<div>${escape(item.nama_kategori_diet)}</div>`;
    }
  }
};

const selectizeConfigDateInput = {
  valueField: 'tgl',
  labelField: 'tgl',
  searchField: 'tgl',
  create: true,
  placeholder: "Masukkan Tanggal...",
};