$(document).ready(function() {
    // Document upload handling
    $('.document-upload-form').on('submit', function(e) {
        e.preventDefault();
        
        var formData = new FormData(this);
        var $uploadButton = $(this).find('button[type="submit"]');
        var $progressContainer = $(this).find('.upload-progress-container');
        var $progressBar = $progressContainer.find('.progress-bar');
        var $messageContainer = $(this).siblings('.upload-message');
        
        // Reset UI
        $messageContainer.empty();
        $progressBar.css('width', '0%').attr('aria-valuenow', 0);
        $progressContainer.show();
        $uploadButton.prop('disabled', true).text('Uploading...');
        
        $.ajax({
            url: $(this).attr('action'),
            type: 'POST',
            data: formData,
            processData: false,
            contentType: false,
            xhr: function() {
                var xhr = new window.XMLHttpRequest();
                xhr.upload.addEventListener('progress', function(e) {
                    if (e.lengthComputable) {
                        var percent = Math.round((e.loaded / e.total) * 100);
                        $progressBar.css('width', percent + '%').attr('aria-valuenow', percent);
                    }
                }, false);
                return xhr;
            },
            success: function(response) {
                if (response.success) {
                    $messageContainer.html('<div class="alert alert-success">' + 
                        '<i class="fas fa-check-circle"></i> ' + 
                        'Document uploaded successfully! Please wait for verification.' + 
                        '</div>');
                    
                    // Update UI to show document is pending verification
                    var docType = formData.get('document_type');
                    $('#' + docType + '-status').html('<span class="badge bg-warning">Pending</span>');
                    $('#' + docType + '-date').text(new Date().toLocaleDateString());
                    
                    // Refresh the document list
                    updateApplicationProgress();
                } else {
                    $messageContainer.html('<div class="alert alert-danger">' + 
                        '<i class="fas fa-exclamation-circle"></i> ' + 
                        response.message + 
                        '</div>');
                }
            },
            error: function() {
                $messageContainer.html('<div class="alert alert-danger">' + 
                    '<i class="fas fa-exclamation-circle"></i> ' + 
                    'An error occurred during upload. Please try again.' + 
                    '</div>');
            },
            complete: function() {
                $progressContainer.hide();
                $uploadButton.prop('disabled', false).text('Upload Document');
            }
        });
    });
    
    // Function to check document status periodically
    function updateApplicationProgress() {
        $.ajax({
            url: '/enroll/ajax/check_document_status.php',
            type: 'GET',
            dataType: 'json',
            success: function(response) {
                if (response.success) {
                    // Update progress bar
                    var percent = 0;
                    if (response.total_documents > 0) {
                        percent = Math.round((response.verified_documents / response.total_documents) * 100);
                    }
                    
                    $('#documents-progress-bar')
                        .css('width', percent + '%')
                        .attr('aria-valuenow', percent)
                        .text(percent + '%');
                    
                    // Update stats
                    $('#verified-docs-count').text(response.verified_documents);
                    $('#total-docs-count').text(response.total_documents);
                    
                    // Update application status indicator
                    updateApplicationStatusUI(response.application_status);
                    
                    // If page needs refreshing due to major status changes
                    if (response.refresh_needed) {
                        showStatusChangeNotification();
                    }
                }
            }
        });
    }
    
    function updateApplicationStatusUI(status) {
        var $statusBadge = $('#application-status-badge');
        $statusBadge.removeClass('bg-success bg-warning bg-info bg-danger bg-secondary');
        
        switch(status) {
            case 'pending':
                $statusBadge.addClass('bg-warning').text('Documents Pending');
                break;
            case 'document_review':
                $statusBadge.addClass('bg-info').text('Documents Under Review');
                break;
            case 'payment_pending':
                $statusBadge.addClass('bg-primary').text('Payment Pending');
                break;
            case 'payment_verified':
                $statusBadge.addClass('bg-success').text('Enrollment Active');
                break;
            case 'rejected':
                $statusBadge.addClass('bg-danger').text('Application Rejected');
                break;
            default:
                $statusBadge.addClass('bg-secondary').text('Unknown');
        }
    }
    
    function showStatusChangeNotification() {
        const Toast = Swal.mixin({
            toast: true,
            position: 'top-end',
            showConfirmButton: true,
            confirmButtonText: 'Refresh Now',
            timer: 10000,
            timerProgressBar: true
        });
        
        Toast.fire({
            icon: 'info',
            title: 'Your application status has been updated!',
            text: 'Please refresh the page to see the latest changes.'
        }).then((result) => {
            if (result.isConfirmed) {
                window.location.reload();
            }
        });
    }
    
    // Initialize document status checking
    if ($('.document-upload-section').length) {
        updateApplicationProgress();
        // Check every 30 seconds for updates
        setInterval(updateApplicationProgress, 30000);
    }
    
    // Document preview handling
    $('.view-document-btn').on('click', function() {
        var documentUrl = $(this).data('document-url');
        var documentType = $(this).data('document-type');
        var fileExtension = documentUrl.split('.').pop().toLowerCase();
        
        var modalTitle = 'Document Preview: ' + documentType.replace('_', ' ').replace(/\b\w/g, l => l.toUpperCase());
        $('#documentPreviewModalLabel').text(modalTitle);
        
        var previewContent = '';
        
        if (['jpg', 'jpeg', 'png'].includes(fileExtension)) {
            previewContent = '<img src="' + documentUrl + '" class="img-fluid" alt="Document Preview">';
        } else if (fileExtension === 'pdf') {
            previewContent = '<iframe src="' + documentUrl + '" width="100%" height="500px"></iframe>';
        } else {
            previewContent = '<div class="alert alert-info">Preview not available for this file type. ' +
                '<a href="' + documentUrl + '" target="_blank" class="btn btn-primary">Download File</a></div>';
        }
        
        $('#documentPreviewContent').html(previewContent);
        $('#documentPreviewModal').modal('show');
    });
});