Dropzone Configuration and Form

<form action="{{ route('checkout') }}" method="post" class="dropzone" id="receiptDropzone" enctype="multipart/form-data">
    @csrf
    @if($hasProducts)

    @foreach($cartItem as $item)
    <input type="hidden" name="product_names[]" value="{{ $item->product->product_name }}">
    <input type="hidden" name="product_prices[]" value="{{ $item->product->product_price }}">
    <input type="hidden" id="hidden_quantity_{{ $item->id }}" name="quantities[]" value="{{ $item->quantity }}">
    <input type="hidden" id="subtotal_{{ $item->id }}" name="subtotals[]" value="{{ $item->subtotal }}">
    <input type="hidden" name="total_amount" value="{{ $total }}"> <!-- Assuming $total holds the total amount value -->

    @foreach($cartItem as $item)
        <input type="hidden" name="cart_items[]" value="{{ json_encode(['product_id' => $item->product->id, 'quantity' => $item->quantity]) }}">
    @endforeach

@endforeach
@endif

<div class="fallback">
    <input name="receipt" type="file" accept="image/jpeg,image/png,application/pdf">
</div>
<div class="dz-message needsclick">
    <div class="mb-3">
        <i class="display-4 text-muted ri-upload-cloud-2-line"></i>
    </div>
    <h4>Please upload your receipts.</h4>
</div>
<input type="hidden" name="total_amount" id="totalAmountInput">


<div class="text-center mt-4">
    <button type="submit" id="checkout" name="checkout_button" class="btn btn-warning btn-rounded waves-effect waves-light">Proceed to Checkout</button>
</div>
</form>



// <!-- Dropzone configuration -->
Dropzone.autoDiscover = false;
    const myDropzone = new Dropzone("#receiptDropzone", {

        autoProcessQueue: false, // Disable auto-upload
        maxFiles: 1, // Allow only one file to be uploaded
        addRemoveLinks: true,
        renameFile: function(file) {
                var dt = new Date();
                var time = dt.getTime();
               return time+file.name;
            },

        // Other Dropzone options if needed
        init: function () {
            const submitButton = document.querySelector("#checkout");
            const form = this; // "this" refers to the dropzone instance

            submitButton.addEventListener("click", function (event) {
                event.preventDefault();
                event.stopPropagation();
                form.processQueue(); // Process the queue manually

                // Listen for the success event when all files are uploaded
                form.on("success", function (file, response) {
                    // Assuming the response contains the notification data
                    const notification = response.notification;
                    if (notification && notification.message) {
                        // Display the notification message using your preferred method
                        alert(notification.message);
                    }

                    // Redirect after successful checkout
                    window.location.href = "{{ route('success.checkout') }}"; // Replace with your success page route
                });
            });


        // Listen to the addedfile event to handle file upload and saving
        this.on("addedfile", function (file) {
                    // Make sure to remove any previously uploaded file
                    if (this.files.length > 1) {
                        this.removeFile(this.files[0]);
                    }

                    // Trigger the form submission when the user adds a file
                    form.processQueue();
                });




        },
    });