const productUrl = $("#product-container").data("url");

function createProductSelectOptions(callback) {
    $.ajax({
        url: productUrl,
        method: "GET",
        success: function (data) {
            let options = '<option value="">Pilih Produk</option>';
            data.forEach((product) => {
                options += `<option value="${product.id}">${product.name}</option>`;
            });
            callback(options);
        },
        error: function () {
            alert("Gagal memuat produk.");
        },
    });
}

$(document).ready(function () {
    // Initial load only for the first row
    createProductSelectOptions((options) => {
        $(".product-select").first().html(options);
    });

    // When adding a new row
    $(document).on("click", ".btn-add-row", function () {
        const row = `
          <div class="form-row align-items-end product-row">
            <div class="form-group col-md-4">
              <select name="product[]" class="form-control product-select">
                <option>Loading...</option>
              </select>
            </div>
            <div class="form-group col-md-3">
              <input type="text" name="system_quantity[]" class="form-control" placeholder="Stok sistem">
            </div>
            <div class="form-group col-md-3">
              <input type="text" name="physical_quantity[]" class="form-control" placeholder="Stok fisik">
            </div>
            <div class="form-group col-md-2">
              <button type="button" class="btn btn-danger btn-remove-row"><i class="flaticon2-delete"></i></button>
            </div>
          </div>
        `;

        const $newRow = $(row);
        $("#product-container").append($newRow);

        // Load options only for the new select
        createProductSelectOptions((options) => {
            $newRow.find(".product-select").html(options);
        });
    });

    // Remove row
    $(document).on("click", ".btn-remove-row", function () {
        $(this).closest(".product-row").remove();
    });
});