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

}

// 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 () {
            // Simpan posisi kursor awal
            let start = this.selectionStart;
            let end = this.selectionEnd;

            // Ambil angka saja
            let angka = this.value.replace(/[^0-9]/g, '');
            let formatted = formatAngka(angka);

            // Hitung perbedaan panjang string sebelum dan sesudah format
            let selisih = formatted.length - this.value.length;

            // Update value
            this.value = formatted;

            // Pulihkan posisi kursor (geser sesuai perubahan panjang)
            this.setSelectionRange(start + selisih, end + selisih);
        });
    });

});

// Fungsi untuk menambah form baru
let countForm = 1; // karena form pertama pakai index 0
function addFormMcu() {
  const container = document.getElementById('form-sets-container');
  const original = container.querySelector('.form-set');

  const html = original.outerHTML
    .replace(/\[0\]/g, `[${countForm}]`);

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

  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('formMasterMcu').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,
                });
                datatableMasterMcu.bootstrapTable('refresh');
                modalAddMcu.removeEventListener('hidden.bs.modal', handler); // ✅ pakai DOM
            };
            modalAddMcu.addEventListener('hidden.bs.modal', handler); // ✅ pakai DOM
            bootstrap.Modal.getInstance(modalAddMcu).hide(); // ✅ pakai instance
            const allFormSets = document.querySelectorAll('.form-set');

            for(let i = 1; i < allFormSets.length; i++){
                allFormSets[i].remove();
            }
        } 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 deleteMasterMcu(e){
    let id = $(e).data('menu_mcu_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/mcu/${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(() => {
                        datatableMasterMcu.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"
                });
            });
        }
    })
}

function editMasterMcu(e) {
    const el = $(e);

    const modal = new bootstrap.Modal(modalEditMcu);
    formEditMcu.setAttribute('action', `/dashboard/mcu/${el.data('menu_mcu_id')}`)
    modal.show();

    // Ambil data
    let dataOld = {
        menu_mcu_id: el.data('menu_mcu_id'),
        nama_mcu: el.data('nama_mcu'),
        harga: el.data('harga'),
    };
    // Set value ke input form
    $("#nama_edit").val(dataOld.nama_mcu);
    $("#harga_edit").val(dataOld.harga);
}


document.getElementById('formMasterMcuEdit').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,
                });
                datatableMasterMcu.bootstrapTable('refresh');
                modalEditMcu.removeEventListener('hidden.bs.modal', handler); // ✅ pakai DOM
            };
            modalEditMcu.addEventListener('hidden.bs.modal', handler); // ✅ pakai DOM
            bootstrap.Modal.getInstance(modalEditMcu).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.',
        });
    });
})