edit bonding vyos

  // edit Bonding
  function editBonding(data) {
    let modalContent = '<div class="mt-3 mb-10"><div class="dataTables_processing" role="status"><div><div></div><div></div><div></div><div></div></div></div></div>';
    Swal.fire({
        title: 'Edit Bonding',
        html: modalContent,
        showCancelButton: true,
        showLoaderOnConfirm: true,
        confirmButtonText: 'Save',
        cancelButtonText: 'Cancel',
        didOpen: () => {
            $.ajax({
                url: '/api/interfaces_list',
                type: 'POST',
                dataType: 'json',
                success: function(responseData) {
                    jsonData = responseData;
                    ethernetInterfaces = Object.keys(jsonData.data.interfaces.ethernet);

                    modalContent = createEditForm(data, ethernetInterfaces);
                    Swal.update({ html: modalContent });
                },
                error: function(error) {
                    Swal.update({ html: '<div>Error loading data.</div>', icon: 'error' });
                    console.log('Error fetching data:', error);
                }
            });
        },
      //   preConfirm: () => {
      //     function getFormData() {
      //       const bondMode = document.getElementById("bondMode").value;
      //       const hashPolicy = document.getElementById("hashPolicy").value;
      //       const slaveSelects = document.querySelectorAll(".slaveRow select");
      //       let memberInterface;

      //       if (slaveSelects.length === 0) {
      //           memberInterface = [null]; // Jika tidak ada select option, berikan nilai [null]
      //       } else {
      //           memberInterface = Array.from(slaveSelects).map(select => select.value);
      //       }

      //       return {
      //           bondMode: bondMode,
      //           hashPolicy: hashPolicy,
      //           memberInterface: memberInterface
      //       };
      //   }


      //   const formData = getFormData();
      //   const isBondModeChanged = formData.bondMode !== data.mode;
      //   const isHashPolicyChanged = formData.hashPolicy !== data.hashPolicy;

      //   const originalMemberInterfaces = data.memberInterfaces.split(',').map(s => s.trim());
      //   let isMembersChanged = !(originalMemberInterfaces.every((val, index) => val === formData.memberInterface[index])
      //                               && originalMemberInterfaces.length === formData.memberInterface.length);

      //   const isMembersInitiallyEmpty = originalMemberInterfaces.length === 0 || (originalMemberInterfaces.length === 1 && originalMemberInterfaces[0] === "");
      //   const isFormDataMembersEmpty = formData.memberInterface[0] === null;

      //   if (isMembersInitiallyEmpty && isFormDataMembersEmpty) {
      //       isMembersChanged = false;
      //   }

      //   if (!isBondModeChanged && !isHashPolicyChanged && !isMembersChanged) {
      //     Swal.fire('No Changes', 'There are no changes to save.', 'info');
      //     return false;
      // }

      // // Mengganti nilai null menjadi "delete all"
      // if (formData.memberInterface[0] === null) {
      //     formData.memberInterface = ["deleteInterface"];
      // }

      // // Mendefinisikan postData
      // let postData = {
      //     bondName: data.bondName,
      //     bondMode: isBondModeChanged ? formData.bondMode : "",
      //     hashPolicy: isHashPolicyChanged ? formData.hashPolicy : "",
      //     bondMember: isMembersChanged ? formData.memberInterface : []
      // };
      //   console.log(postData);

      //       return fetch('/api/bonding_edit', {
      //         method: "POST",
      //         headers: {
      //             "Content-Type": "application/json",
      //         },
      //         body: JSON.stringify({
      //           bondName: data.bondName,
      //           bondMode: isBondModeChanged ? formData.bondMode : "",
      //           hashPolicy: isHashPolicyChanged ? formData.hashPolicy : "",
      //           bondMember: isMembersChanged ? formData.memberInterface : []
      //       })
      //     })
      //     .then((response) => {
      //         if (!response.ok) {
      //             throw new Error("Network response was not ok");
      //         }
      //         return response.json();
      //     })
      //     .then((data) => {
      //         if (!data.success) {
      //             throw new Error(data.message);
      //         }
      //         Swal.fire("Success!", data.message, "success");
      //         $('#interfaces-bonding').DataTable().ajax.reload();
      //         console.info(data);
      //     })
      //     .catch((error) => {
      //         Swal.fire("Error!", error.message , "error");
      //         console.error(error);
      //     });

      //   }

      preConfirm: () => {
        function getFormData() {
            const bondMode = document.getElementById("bondMode").value;
            const hashPolicy = document.getElementById("hashPolicy").value;
            const slaveSelects = document.querySelectorAll(".slaveRow select");
            let memberInterface;

            if (slaveSelects.length === 0) {
                memberInterface = [null]; // Jika tidak ada select option, berikan nilai [null]
            } else {
                memberInterface = Array.from(slaveSelects).map(select => select.value);
            }

            return {
                bondMode: bondMode,
                hashPolicy: hashPolicy,
                memberInterface: memberInterface
            };
        }

        const formData = getFormData();
        const isBondModeChanged = formData.bondMode !== data.mode;
        const isHashPolicyChanged = formData.hashPolicy !== data.hashPolicy;

        const originalMemberInterfaces = data.memberInterfaces.split(',').map(s => s.trim());
        const formDataInterfaces = formData.memberInterface;

        let addedInterfaces = formDataInterfaces.filter(interface => !originalMemberInterfaces.includes(interface));
        let removedInterfaces = originalMemberInterfaces.filter(interface => !formDataInterfaces.includes(interface));

        const isMembersChanged = addedInterfaces.length > 0 || removedInterfaces.length > 0;

        // // Mengganti nilai null menjadi "delete all"
        // let formDataInterfacesCopy = [...formDataInterfaces]; // Buat salinan dari array formDataInterfaces
        // if (formDataInterfacesCopy[0] === null) {
        //     formDataInterfacesCopy = ["deleteInterface"];
        // }

        // Hapus null dari addedInterfaces jika semua antarmuka dihapus
        addedInterfaces = addedInterfaces.filter(interface => interface !== null);

        // Mendefinisikan postData
        let postData = {
            bondName: data.bondName,
            bondMode: isBondModeChanged ? formData.bondMode : "",
            hashPolicy: isHashPolicyChanged ? formData.hashPolicy : "",
            bondMember: {
                add: addedInterfaces,
                delete: removedInterfaces
            } // Objek dengan turunan add dan delete
        };

        console.log(postData);


        // Jika tidak ada perubahan, tampilkan pesan dan kembalikan false
        if (!isMembersChanged) {
            Swal.fire('No Changes', 'There are no changes to save.', 'info');
            return false;
        }

        return fetch('/api/bonding_edit', {
                method: "POST",
                headers: {
                    "Content-Type": "application/json",
                },
                body: JSON.stringify(postData) // Kirim postData ke backend
            })
            .then((response) => {
                if (!response.ok) {
                    throw new Error("Network response was not ok");
                }
                return response.json();
            })
            .then((data) => {
                if (!data.success) {
                    throw new Error(data.message);
                }
                Swal.fire("Success!", data.message, "success");
                $('#interfaces-bonding').DataTable().ajax.reload();
                console.info(data);
            })
            .catch((error) => {
                Swal.fire("Error!", error.message, "error");
                console.error(error);
            });

    }






      })
    }


  function createEditForm(data, ethernetInterfaces) {
    let modalContent = `
        <div id="modalFormContainer">
            <input type="text" id="bondName" class="mt-3 form-control" placeholder="${data.bondName}" disabled>
    `;

    modalContent += `
        <select id="bondMode" class="mt-3 form-select">
    `;

    const bondModes = [
        '802.3ad', 'active-backup', 'broadcast', 'round-robin', 'transmit-load-balance',
        'adaptive-load-balance', 'xor-hash'
    ];
    bondModes.forEach(mode => {
        modalContent += `
            <option value="${mode}" ${data.mode === mode ? 'selected' : ''}>${mode}</option>
        `;
    });

    modalContent += '</select>';

    modalContent += `
        <select id="hashPolicy" class="mt-3 form-select">
    `;

    const hashPolicies = ['layer2', 'layer2+3', 'layer3+4', 'encap2+3', 'encap3+4'];
    hashPolicies.forEach(policy => {
        modalContent += `
            <option value="${policy}" ${data.hashPolicy === policy ? 'selected' : ''}>${policy}</option>
        `;
    });

    modalContent += '</select>';
    modalContent += `
        <div class="input-group mt-3">
            <button class="mt-3 btn btn-sm btn-outline-primary" type="button" onclick="tambahSlave(document.getElementById('modalFormContainer'))">+ Add Member Interface</button>
        </div>
    `;

    const slaveInterfaces = data.memberInterfaces.split(',').map(s => s.trim());
    if (slaveInterfaces.length > 0 && slaveInterfaces[0] !== "") {
        slaveInterfaces.forEach(item => {
            modalContent += '<div class="slaveRow input-group mt-3"><select class="form-select">';
            ethernetInterfaces.forEach(interface => {
                modalContent += `
                    <option value="${interface}" ${item === interface ? 'selected' : ''}>${interface}</option>
                `;
            });
            modalContent += `
                </select>
                <button class="btn btn-outline-danger" onclick="hapusBaris(this)">-</button>
                </div>
            `;
        });
    }


    modalContent += '</div>';

    return modalContent;
  }

  function tambahSlave(container) {
        const newSelect = document.createElement('select');
        newSelect.className = 'form-select';
        const defaultOption = document.createElement('option');
        defaultOption.value = "";
        defaultOption.textContent = "-- Choose Interface --";
        newSelect.appendChild(defaultOption);

        ethernetInterfaces.forEach(interface => {
            const option = document.createElement('option');
            option.value = interface;
            option.textContent = interface;
            newSelect.appendChild(option);
        });

        const removeBtn = document.createElement('button');
        removeBtn.className = 'btn btn-outline-danger';
        removeBtn.textContent = '-';
        removeBtn.onclick = function () {
            hapusBaris(removeBtn);
        };

        const newRow = document.createElement('div');
        newRow.className = 'slaveRow input-group mt-3';
        newRow.appendChild(newSelect);
        newRow.appendChild(removeBtn);

        container.appendChild(newRow);
  }

  function hapusBaris(button) {
        const row = button.parentNode;
        row.parentNode.removeChild(row);
  }