// Fungsi inisialisasi Selectize dan Auto-expand
function initSelectize(formElement) {
  const kategoriSelect = formElement.querySelector('.tags-menu');
  const kaloriSelect = formElement.querySelector('.kalori-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,
    preload: true,
      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 (kaloriSelect) {
    $(kaloriSelect).selectize({
      valueField: 'kalori_id',
      labelField: 'nilai_kalori',
      searchField: ['nilai_kalori', 'kalori_id'],
      create: false,
      placeholder: "Kualifikasi kalori...",
      maxItems: null,
      preload: true,
      load: function (query, callback) {
        if (!query.length) return callback();
        $.ajax({
          url: '/dashboard/option/kalori',
          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.nilai_kalori)}</div>
          </div>`;
        },
        item: function (item, escape) {
          return `<div>${escape(item.nilai_kalori)}</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="Someday"]`);
    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(){
        let angka = this.value.replace(/[^0-9]/g, '');
        this.value = formatAngka(angka)
    })
  })


});

// Fungsi untuk menambah form baru
let countForm = 1; // karena form pertama pakai index 0
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();

      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 allFormSetsBeforSubmit = document.querySelectorAll('.form-set');

    for (let i = 0; i < allFormSetsBeforSubmit.length; i++) {
        const checkSiang = allFormSetsBeforSubmit[i].querySelector(`input[name="data[${i}][apakah_menu_siang]"]`);
        const checkSore = allFormSetsBeforSubmit[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
            const allFormSets = document.querySelectorAll('.form-set');

            for(let i = 1; i < allFormSets.length; i++){
                allFormSets[i].remove();
            }
             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"
                });
            });
        }
    })
}

let tanggalSelectizeInstance = null;
let klasifikasiMenuSelectizeInstance = null;
let kaloriSelectizeInstance = null;

function editMasterMenu(e) {
    const el = $(e);
    const modal = new bootstrap.Modal(modalEditMenu);
    formEditMenu.setAttribute('action', `/dashboard/menu/${el.data('master_menu_id')}`)
    modal.show();

    // Ambil data
    let dataOld = {
        master_menu_id: el.data('master_menu_id'),
        nama_menu: el.data('nama'),
        harga_public: el.data('harga_public'),
        harga_karyawan: el.data('harga_karyawan'),
        jenis_menu: el.data('jenis_menu'),
        apakah_someday: el.data('apakah_someday') == 1,
        apakah_menu_siang: el.data('apakah_menu_siang') == 1,
        apakah_menu_sore: el.data('apakah_menu_sore') == 1,
        deskripsi: el.data('deskripsi') || '',
        tgl: JSON.parse(decodeURIComponent(el.data('tgl') || '[]')),
        kalori: JSON.parse(decodeURIComponent(el.data('kalori') || '[]')),
        kategori_diet: JSON.parse(decodeURIComponent(el.data('kategori_diet') || '[]')),
    };
    console.log(dataOld);


    // Set value ke input form
    $("#nama_edit").val(dataOld.nama_menu);
    $("#harga_public_edit").val(dataOld.harga_public);
    $("#harga_karyawan_edit").val(dataOld.harga_karyawan);
    $("#jenis_makanan_edit").val(dataOld.jenis_menu);
    $("#deskripsi_edit").val(dataOld.deskripsi);

    $(`input[name="kategori_menu"][value="${dataOld.apakah_someday ? 'Someday' : 'Menu Normal'}"]`).prop('checked', true);
    $(`input[name="apakah_menu_siang"][value="${dataOld.apakah_menu_siang ? 'iya' : ''}"]`).prop('checked', true);
    $(`input[name="apakah_menu_sore"][value="${dataOld.apakah_menu_sore ? 'iya' : ''}"]`).prop('checked', true);

    const tanggalWrapper = document.querySelector('.tgl-part');
    const tanggalField = document.getElementById('tanggal_edit');

    if(tanggalSelectizeInstance){
        tanggalSelectizeInstance.destroy();
        tanggalSelectizeInstance = null
    }

    if (!dataOld.apakah_someday) {
        tanggalWrapper.classList.remove('d-none');
        tanggalField.style.display = 'block';
        tanggalSelectizeInstance =$('#tanggal_edit').selectize({
            valueField: 'tanggal',
            labelField: 'tgl',
            create: true,
            placeholder: 'Masukkan Tanggal...',
            onInitialize: function () {
                    const s = this;
                    dataOld.tgl.forEach(item => {
                    const tglValue = item?.tgl_harian || item?.tanggal || item;
                    s.addOption({ tanggal: tglValue, tgl: tglValue });
                    s.addItem(tglValue);
                    });
                }
            })[0].selectize;
    } else {
        tanggalWrapper.classList.add('d-none');
        tanggalField.style.display = 'none';
    }


    $('input[name="kategori_menu"]').on('change', function(){
        const selected = $(this).val();
        const isSomeday = selected === 'Someday';
        if(isSomeday){
            tanggalWrapper.classList.add('d-none');
              if (tanggalSelectizeInstance) {
                tanggalSelectizeInstance.destroy();
                tanggalSelectizeInstance = null;
            }
        }else{
            tanggalWrapper.classList.remove('d-none');
            tanggalSelectizeInstance =$('#tanggal_edit').selectize({
                valueField: 'tanggal',
                labelField: 'tgl',
                create: true,
                placeholder: 'Masukkan Tanggal...'
            })[0].selectize;
        }
    })


   if (klasifikasiMenuSelectizeInstance) {
    klasifikasiMenuSelectizeInstance.destroy();
    klasifikasiMenuSelectizeInstance = null;
    }

    klasifikasiMenuSelectizeInstance = $('#kategori_diet_id_edit').selectize({
        valueField: 'kategori_diet_id',
        labelField: 'nama_kategori_diet',
        searchField: ['nama_kategori_diet'],
        create: false,
        placeholder: "Klasifikasi Diet...",
        maxItems: null,
        preload: true,
        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();
            }
            });
        },
        onInitialize: function () {
            const s = this;
            dataOld.kategori_diet.forEach(item => {
            // Manual tambahkan ke Selectize
            s.addOption(item);                // agar bisa dipilih
            s.addItem(item.kategori_diet_id); // agar muncul sebagai selected
            });
        },
        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>`;
            }
        }
        })[0].selectize;

    if (kaloriSelectizeInstance) {
        kaloriSelectizeInstance.destroy();
        kaloriSelectizeInstance = null;
        }

        kaloriSelectizeInstance = $('#kalori_id_edit').selectize({
        valueField: 'kalori_id',
        labelField: 'nilai_kalori',
        searchField: ['nilai_kalori'],
        create: false,
        placeholder: "Kalori...",
        maxItems: null,
        preload: true,
        load: function (query, callback) {
            if (!query.length) return callback();
            $.ajax({
            url: '/dashboard/option/kalori',
            data: { search: query },
            success: function (response) {
                if (response.error === 0 && Array.isArray(response.data)) {
                callback(response.data);
                } else {
                callback();
                }
            },
            error: function () {
                callback();
            }
            });
        },
        onInitialize: function () {
            const s = this;
            dataOld?.kalori.forEach(item => {
                // Manual tambahkan ke Selectize
                s.addOption(item);                // agar bisa dipilih
                s.addItem(item.kalori_id); // agar muncul sebagai selected
            });
        },
        render: {
            option: function (item, escape) {
            return `<div class="p-1">
                <div class="fw-semibold" style="font-size: 0.85rem;">${escape(item.nilai_kalori)}</div>
            </div>`;
            },
            item: function (item, escape) {
            return `<div>${escape(item.nilai_kalori)}</div>`;
            }
        }
        })[0].selectize;


}


document.getElementById('formMasterMenuEdit').addEventListener('submit', function(e){
    e.preventDefault();

    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');
                modalEditMenu.removeEventListener('hidden.bs.modal', handler); // ✅ pakai DOM
            };
            modalEditMenu.addEventListener('hidden.bs.modal', handler); // ✅ pakai DOM
            bootstrap.Modal.getInstance(modalEditMenu).hide(); // ✅ pakai instance
        } 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.',
        });
    });
})