$(document).ready(function() {
    const successToastEl = document.getElementById('successToast');
    const successToast = new bootstrap.Toast(successToastEl);
    const previewModalEl = document.getElementById('previewModal');
    const previewModal = new bootstrap.Modal(previewModalEl);

    $('#uploadForm').on('submit', function(event) {
        event.preventDefault();

        const form = this;
        const submitButton = $(form).find('button[type="submit"]');
        const spinner = submitButton.find('.spinner-border');

        // Basic validation
        if (form.checkValidity() === false) {
            event.stopPropagation();
            $(form).addClass('was-validated');
            return;
        }

        // Show loading state
        submitButton.attr('disabled', true);
        spinner.removeClass('d-none');

        // Simulate async background process
        setTimeout(function() {
            // Show success toast
            successToast.show();

            // Show preview modal
            previewModal.show();

            // Reset form and button
            form.reset();
            $(form).removeClass('was-validated');
            submitButton.attr('disabled', false);
            spinner.addClass('d-none');

        }, 1000); // Simulate a 1-second delay for effect
    });
});