formipay/public/assets/js/thankyou.js

jQuery(function($){

    $(document).on('click', '.formipay-copy-button', function() {
        var $this = $(this);
        var copiedtext = $(this).prev('p').attr("data-copy-value");
        if (navigator.clipboard) {
            navigator.clipboard.writeText(copiedtext)
                .then(() => {
                    $this.html('<i class="bi bi-check-circle-fill"></i> '+$this.attr('data-copied-text'));
                    setTimeout(() => {
                        $this.html('<i class="bi bi-copy"></i> '+$this.attr('data-copy-text'));
                    }, 1200);
                })
                .catch((error) => {
                    $this.html('<i class="bi bi-exclamation-circle-fill"></i> '+$this.attr('data-not-copied-text'));
                    setTimeout(() => {
                        $this.html('<i class="bi bi-copy"></i> '+$this.attr('data-copy-text'));
                    }, 1200);
                });
        } else {
            $this.html('<i class="bi bi-check-circle-fill"></i> '+$this.attr('data-not-copied-text'));
            setTimeout(() => {
                $this.html('<i class="bi bi-copy"></i> '+$this.attr('data-copy-text'));
            }, 1200);
        }

    });

    // Store a reference to the file input element
    let fileInput;
    let thumbnailPreview;
    let previewImage;

    function initializeUploadFunctionality() {
        const dropzoneArea = $('#dropzoneArea');
        fileInput = $('#fileInput');
        thumbnailPreview = $('#thumbnailPreview');
        previewImage = $('#previewImage');

        fileInput.hide();
        thumbnailPreview.hide();

        // Click event to open file selector
        dropzoneArea.on('click', function(event) {
            if (!$(event.target).is(fileInput)) {
                fileInput.trigger('click');
            }
        });

        // Change event for file input
        fileInput.on('change', handleFileSelect);

        // Drag and drop events
        dropzoneArea.on('dragover', function(e) {
            e.preventDefault(); // Prevent default behavior
            e.stopPropagation();
            dropzoneArea.addClass('dragging'); // Add class to change style on drag
        });

        dropzoneArea.on('dragleave', function(e) {
            e.preventDefault();
            e.stopPropagation();
            dropzoneArea.removeClass('dragging'); // Remove class on drag leave
        });

        dropzoneArea.on('drop', function(e) {
            e.preventDefault();
            e.stopPropagation();
            dropzoneArea.removeClass('dragging'); // Remove class on drop
            const files = e.originalEvent.dataTransfer.files; // Get dropped files
            if (files.length > 0) {
                fileInput[0].files = files; // Assign files to input
                handleFileSelect(); // Trigger file selection handling
            }
        });

        // Submit event for the form
        $('#uploadForm').on('submit', function(e) {
            e.preventDefault();
            const formData = new FormData(this);
            
            $.ajax({
                url: formipay_thankyou.ajax_url, // Adjust if necessary
                type: 'POST',
                data: formData,
                contentType: false,
                processData: false,
                beforeSend: function() {
                    $('#uploadForm').block({ message: 'Uploading order receipt...' });
                },
                success: function(response) {
                    // Handle success
                    let timerInterval;
                    Swal.fire({
                        html: response.data.message,
                        icon: response.data.icon,
                        timer: 2500,
                        timerProgressBar: true,
                        didOpen: () => {
                            Swal.showLoading();
                            const timer = Swal.getPopup().querySelector("b");
                            timerInterval = setInterval(() => {
                            timer.textContent = `${Swal.getTimerLeft()}`;
                            }, 100);
                        },
                        willClose: () => {
                            clearInterval(timerInterval);
                        },
                        allowOutsideClick: false,
                        allowEscapeKey: false,
                        showCloseButton: false,
                    }).then((result) => {
                        if (result.dismiss === Swal.DismissReason.timer) {
                            window.location.reload();
                        }
                    });
                },
                error: function(xhr, status, error) {
                    // Handle error
                    console.error('AJAX Error:', error);
                }
            });
        });
    }

    // Function to handle file selection and preview
    function handleFileSelect() {
        const file = fileInput[0].files[0];
        
        if (file) {
            const validTypes = ['image/jpeg', 'image/png'];
            const maxFileSize = 1 * 1024 * 1024; // 1 MB in bytes

            // Check file type and size
            if (validTypes.indexOf(file.type) === -1) {
                // alert('Please upload a JPG or PNG file.');
                Swal.fire({
                    icon: 'info',
                    html: 'Please upload a JPG or PNG file.'
                });
                fileInput.val(''); // Clear the input
                thumbnailPreview.hide();
                thumbnailPreview.siblings('.bi').show();
                return;
            }

            if (file.size > maxFileSize) {
                // alert('File size must be less than 1 MB.');
                Swal.fire({
                    icon: 'info',
                    html: 'File size must be less than 1 MB.'
                });
                fileInput.val(''); // Clear the input
                thumbnailPreview.hide();
                thumbnailPreview.siblings('.bi').show();
                return;
            }

            const reader = new FileReader();
            reader.onload = function(e) {
                previewImage.attr('src', e.target.result);
                thumbnailPreview.show();
                thumbnailPreview.siblings('.bi').hide();
            }
            reader.readAsDataURL(file);
        }
    }

    initializeUploadFunctionality();

});