{{-- Form Loading Component --}}
<script>
document.addEventListener('DOMContentLoaded', function() {
    // Universal form loading handler
    function initializeFormLoading(formSelector, options = {}) {
        const forms = document.querySelectorAll(formSelector);
        
        forms.forEach(form => {
            const buttons = form.querySelectorAll('button[type="submit"], input[type="submit"]');
            
            form.addEventListener('submit', function(event) {
                const submitButton = event.submitter || buttons[0];
                
                // Disable all submit buttons in the form
                buttons.forEach(btn => {
                    btn.disabled = true;
                    
                    // Handle button loading states
                    const btnText = btn.querySelector('.btn-text');
                    const btnLoading = btn.querySelector('.btn-loading');
                    
                    if (btnText && btnLoading) {
                        btnText.classList.add('d-none');
                        btnLoading.classList.remove('d-none');
                    } else {
                        // Fallback: add spinner to button if no custom loading structure
                        const originalHtml = btn.innerHTML;
                        btn.dataset.originalHtml = originalHtml;
                        
                        const spinner = '<span class="spinner-border spinner-border-sm me-2" role="status"></span>';
                        const loadingText = options.loadingText || 'Processing...';
                        btn.innerHTML = spinner + loadingText;
                    }
                });
                
                // Show progress toast if specified
                if (options.showProgressToast) {
                    showProgressToast(options.toastOptions || {});
                }
                
                // Auto re-enable buttons after timeout (fallback for errors)
                const timeout = options.timeout || 15000;
                setTimeout(() => {
                    resetFormButtons(buttons);
                }, timeout);
            });
        });
    }
    
    // Reset form buttons to original state
    function resetFormButtons(buttons) {
        buttons.forEach(btn => {
            btn.disabled = false;
            
            const btnText = btn.querySelector('.btn-text');
            const btnLoading = btn.querySelector('.btn-loading');
            
            if (btnText && btnLoading) {
                btnText.classList.remove('d-none');
                btnLoading.classList.add('d-none');
            } else if (btn.dataset.originalHtml) {
                btn.innerHTML = btn.dataset.originalHtml;
                delete btn.dataset.originalHtml;
            }
        });
    }
    
    // Show progress toast
    function showProgressToast(options = {}) {
        const {
            title = 'Processing',
            steps = ['Processing...', 'Almost done...'],
            duration = 300
        } = options;
        
        // Create toast container if it doesn't exist
        let toastContainer = document.getElementById('progress-toast-container');
        if (!toastContainer) {
            toastContainer = document.createElement('div');
            toastContainer.id = 'progress-toast-container';
            toastContainer.className = 'toast-container position-fixed top-0 end-0 p-3';
            toastContainer.style.zIndex = '9999';
            document.body.appendChild(toastContainer);
        }

        const toastHtml = `
            <div class="toast show" role="alert" aria-live="assertive" aria-atomic="true" id="progressToast">
                <div class="toast-header bg-primary text-white">
                    <div class="spinner-border spinner-border-sm me-2" role="status">
                        <span class="visually-hidden">Loading...</span>
                    </div>
                    <strong class="me-auto">${title}</strong>
                    <small>Just now</small>
                </div>
                <div class="toast-body">
                    <div class="d-flex align-items-center">
                        <div class="flex-grow-1">
                            <div class="progress mb-2" style="height: 4px;">
                                <div class="progress-bar progress-bar-striped progress-bar-animated" 
                                     role="progressbar" style="width: 0%"></div>
                            </div>
                            <small class="text-muted" id="progressText">${steps[0]}</small>
                        </div>
                    </div>
                </div>
            </div>
        `;

        toastContainer.innerHTML = toastHtml;

        // Animate progress
        const progressBar = document.querySelector('#progressToast .progress-bar');
        const progressText = document.getElementById('progressText');
        
        let progress = 0;
        let currentStep = 0;
        
        const interval = setInterval(() => {
            progress += Math.random() * 15 + 5;
            
            // Update step text based on progress
            const stepIndex = Math.floor((progress / 100) * steps.length);
            if (stepIndex < steps.length && stepIndex !== currentStep) {
                currentStep = stepIndex;
                progressText.textContent = steps[stepIndex];
            }
            
            progressBar.style.width = Math.min(progress, 95) + '%';
            
            if (progress >= 95) {
                clearInterval(interval);
                progressText.textContent = steps[steps.length - 1];
            }
        }, duration);
    }
    
    // Initialize form loading for common forms
    initializeFormLoading('form:not(.no-loading)', {
        loadingText: 'Processing...',
        timeout: 15000
    });
    
    // Special handling for employee forms with email sending
    const employeeForms = document.querySelectorAll('form.employee-form');
    employeeForms.forEach(form => {
        const sendInvitationCheckbox = form.querySelector('#send_invitation');
        
        form.addEventListener('submit', function(event) {
            // Check if email invitation is checked
            if (sendInvitationCheckbox && sendInvitationCheckbox.checked) {
                // Show email-specific progress toast
                showProgressToast({
                    title: 'Sending Invitation Email',
                    steps: [
                        'Creating employee record...',
                        'Generating invitation token...',
                        'Preparing email template...',
                        'Sending invitation email...',
                        'Finalizing...'
                    ],
                    duration: 400
                });
            }
        });
    });
    
    // Special handling for forms with email sending
    initializeFormLoading('form.email-form', {
        loadingText: 'Sending...',
        showProgressToast: true,
        toastOptions: {
            title: 'Sending Email',
            steps: [
                'Preparing email...',
                'Connecting to mail server...',
                'Sending email...',
                'Almost done...'
            ]
        },
        timeout: 20000
    });
    
    // Make functions globally available
    window.initializeFormLoading = initializeFormLoading;
    window.showProgressToast = showProgressToast;
});
</script>