$(function () {
    $('body').on('submit', 'form[name=fetch-orders]', function(e) {
        e.preventDefault();
        let formData = $(this).serialize(); // Serialize form data
        let src= $(this).attr('src');
        let loadingText = $(this).find('button').data('loading-text');
        let fetchedText = $(this).find('button').data('fetched-text');
        let orderidText = $(this).find('button').data('orderid-text');
        let errorText = $(this).find('button').data('error-text');
        $.ajax({
            url: src, // Adjust route if necessary
            method: "POST",
            data: formData,
            headers: {
                'X-CSRF-TOKEN': '{{ csrf_token() }}' // CSRF token for security
            },
            beforeSend: function () {
                $("#ordersContainer").html("<li>"+loadingText+"</li>"); // Loading indicator
            },
            success: function (response) {
                let ordersHtml = "";
                ordersHtml += `<li>${fetchedText} ${response.count} db</li>`;
                response.orders.forEach(order => {
                    ordersHtml += `<li>${orderidText} ${order.id} - Status: ${order.status}</li>`;
                });

                $("#ordersContainer").html(ordersHtml);
                enableSubmitButtons($(this));
            },
            error: function (e) {
                console.log(e);
                enableSubmitButtons($(this));
                $("#ordersContainer").html("<li>"+errorText+"</li>");
            }
        });

    });
    function enableSubmitButtons(form) {
        form.find('input[type="submit"]').removeAttr('disabled');
        form.find('button[type="submit"]').removeAttr('disabled');
    }
});