order_gizi/public/js/menu/action.js

let countForm = 1; // karena form pertama pakai index 0

// Fungsi inisialisasi Selectize dan Auto-expand
function initSelectize(formElement) {
  const kategoriSelect = formElement.querySelector('.tags-menu');
  const tanggalSelect = formElement.querySelector('.date-input');

  if (kategoriSelect) {
    $(kategoriSelect).selectize({
      valueField: 'kategori_diet_id',
      labelField: 'nama_kategori_diet',
      searchField: ['nama_kategori_diet', 'kategori_diet_id'],
      create: false,
      placeholder: "Kualifikasi Menu...",
      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>`;
        }
      }
    });
  }

  if (tanggalSelect) {
    $(tanggalSelect).selectize({
      valueField: 'tanggal',
      labelField: 'tgl',
      create: true,
      placeholder: "Masukkan Tanggal...",
    });
  }

  formElement.querySelectorAll('.auto-expand').forEach(textarea => {
    textarea.addEventListener('input', function () {
      this.style.height = 'auto';
      this.style.height = this.scrollHeight + 'px';
    });
  });


   formElement.querySelectorAll('.money').forEach(input => {
        input.addEventListener('input', function () {
        let angka = this.value.replace(/[^0-9]/g, '');
        this.value = formatAngka(angka);
        });
    });

    const radioSomeday = formElement.querySelector(`input[value="Some Day"]`);
    const radioMenuNormal = formElement.querySelector(`input[value="Menu Normal"]`);
    const tanggalWrapper = formElement.querySelector('.date-input')?.closest('.col-md-12');

    function toggleTanggalField() {
        if (radioMenuNormal && radioMenuNormal.checked) {
            tanggalWrapper?.classList.remove('d-none');
            } else {
            tanggalWrapper?.classList.add('d-none');
        }
    }

    if (radioSomeday && radioMenuNormal) {
        radioSomeday.addEventListener('change', toggleTanggalField);
        radioMenuNormal.addEventListener('change', toggleTanggalField);
        toggleTanggalField(); // jalankan di awal
    }
}

// Jalankan saat halaman dimuat untuk form pertama
document.addEventListener('DOMContentLoaded', function () {
  const firstForm = document.querySelector('.form-set');
  initSelectize(firstForm);

  const money = document.querySelectorAll('.money')

  money.forEach(input => {
    input.addEventListener('input', function(){
        console.log();
        let angka = this.value.replace(/[^0-9]/g, '');
        this.value = formatAngka(angka)
    })
  })


});

// Fungsi untuk menambah form baru
function addFormMenu() {
  const container = document.getElementById('form-sets-container');
  const original = container.querySelector('.form-set');

  const html = original.outerHTML
    .replace(/\[0\]/g, `[${countForm}]`)
    .replace(/name="jenis_customer"/g, `name="jenis_customer_${countForm}"`)
    .replace(/id="radio_karyawan"/g, `id="radio_karyawan_${countForm}"`)
    .replace(/id="radio_kp"/g, `id="radio_kp_${countForm}"`)
    .replace(/for="radio_karyawan"/g, `for="radio_karyawan_${countForm}"`)
    .replace(/for="radio_kp"/g, `for="radio_kp_${countForm}"`);

  const wrapper = document.createElement('div');
  wrapper.innerHTML = html.trim();
  const newForm = wrapper.firstChild;

  // Kosongkan semua input
  newForm.querySelectorAll('input, textarea').forEach(el => {
    if (el.type === 'file') el.value = null;
    else if (el.type === 'radio' || el.type === 'checkbox') el.checked = false;
    else el.value = '';
  });

  // Hapus Selectize wrapper jika ada
  newForm.querySelectorAll('select').forEach(select => {
    const wrapper = select.nextElementSibling;
    if (wrapper?.classList.contains('selectize-control')) wrapper.remove();
    console.log(select);

      select.value = '';
    if (select.multiple) {
      // Untuk multiple select, pastikan semua opsi tidak terseleksi
      Array.from(select.options).forEach(option => option.selected = false);
    }
  });




  container.appendChild(newForm);
  initSelectize(newForm);
  countForm++;
}

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

function formatAngka(angka) {
    return angka.replace(/\B(?=(\d{3})+(?!\d))/g, '.');
}


document.getElementById('formMasterMenu').addEventListener('submit', function(e){
    e.preventDefault();
      const allFormSets = document.querySelectorAll('.form-set');

    for (let i = 0; i < allFormSets.length; i++) {
        const checkSiang = allFormSets[i].querySelector(`input[name="data[${i}][apakah_menu_siang]"]`);
        const checkSore = allFormSets[i].querySelector(`input[name="data[${i}][apakah_menu_sore]"]`);

        if (!checkSiang.checked && !checkSore.checked) {
            e.preventDefault();
            alert(`Form ke-${i + 1}: Pilih minimal Siang atau Sore`);
            return;
        }
    }


    const form = this;
    const actionUrl = form.getAttribute('action');
    const formData = new FormData(form);

    fetch(actionUrl, {
        method: 'POST',
        headers: {
            'X-CSRF-TOKEN': document.querySelector('input[name="_token"]').value,
        },
        body: formData
    }).then(async (res) => {
        const data = await res.json();

        if (data.status) {
            const handler = function () {
                Swal.fire({
                    icon: 'success',
                    title: 'Berhasil',
                    text: data.message,
                    timer: 2000,
                    showConfirmButton: false,
                    backdrop: true,
                });
                datatableMasterMenu.bootstrapTable('refresh');
                modalAddMenu.removeEventListener('hidden.bs.modal', handler); // ✅ pakai DOM
            };
            modalAddMenu.addEventListener('hidden.bs.modal', handler); // ✅ pakai DOM
            bootstrap.Modal.getInstance(modalAddMenu).hide(); // ✅ pakai instance

             document.querySelectorAll('.form-set').forEach((formSet, index) => {
                formSet.querySelectorAll('input, textarea, select').forEach(el => {
                    if (el.type === 'file') {
                        el.value = null;
                    } else if (el.type === 'checkbox' || el.type === 'radio') {
                        el.checked = false;
                    } else {
                        el.value = '';
                    }

                    // Reset Selectize jika ada
                    if (el.classList.contains('selectized')) {
                        const selectize = el.selectize;
                        if (selectize) {
                            selectize.clear();
                        }
                    }
                });
            });
        } else {
            throw new Error(data.message || 'Terjadi kesalahan saat mengubah status.');
        }
    }).catch(err => {
        console.error(err);
        Swal.fire({
            icon: 'error',
            title: 'Gagal',
            text: err.message || 'Terjadi kesalahan pada server.',
        });
    });
})


function deleteMasterMenu(e){
    let id = $(e).data('master_menu_id')
     Swal.fire({
        title: "Apakah kamu yakin ingin menghapus data ini?",
        text : $(e).data('nama'),
        icon: "warning",
        showCancelButton: true,
        backdrop: true,
    }).then((result) => {
        if(result.isConfirmed){
            fetch(`/dashboard/menu/${id}`, {
                method:'DELETE',
                headers: {
                    "X-CSRF-TOKEN": document.querySelector('input[name="_token"]').value,
                    "Content-Type": "application/json"
                }
            }).then((response) => {
                if(!response.ok){
                    throw new Error("Network response was not ok");
                }
                return response.json();
            })
            .then((data) => {
                if(data.status){
                    Swal.fire({
                        title: "Success",
                        text: "Data berhasil dihapus",
                        icon:"success",
                        showConfirmButton: false,
                        timer: 1000
                    }).then(() => {
                        datatableMasterMenu.bootstrapTable("refresh")
                    })
                }else{
                    Swal.fire({
                        title: "Error!",
                        text: data.message || "Failed to delete Item.",
                        icon: "error"
                    });
                }
            })
            .catch(error => {
                Swal.fire({
                    title: "Error!",
                    text: "Something went wrong. Please try again later.",
                    icon: "error"
                });
            });
        }
    })
}