// CMC Sales Application JavaScript

// Initialize HTMX events
document.body.addEventListener('htmx:configRequest', (event) => {
    // Add CSRF token if needed in the future
});

// Handle HTMX errors
document.body.addEventListener('htmx:responseError', (event) => {
    console.error('HTMX request failed:', event.detail);
    showNotification('An error occurred. Please try again.', 'danger');
});

// Handle form validation
document.body.addEventListener('htmx:validation:validate', (event) => {
    const element = event.detail.elt;
    if (element.tagName === 'FORM') {
        // Clear previous errors
        element.querySelectorAll('.is-danger').forEach(el => {
            el.classList.remove('is-danger');
        });
        element.querySelectorAll('.help.is-danger').forEach(el => {
            el.remove();
        });
        
        // Validate required fields
        let isValid = true;
        element.querySelectorAll('[required]').forEach(input => {
            if (!input.value.trim()) {
                input.classList.add('is-danger');
                const help = document.createElement('p');
                help.className = 'help is-danger';
                help.textContent = 'This field is required';
                input.parentElement.appendChild(help);
                isValid = false;
            }
        });
        
        if (!isValid) {
            event.preventDefault();
        }
    }
});

// Show notification
function showNotification(message, type = 'info') {
    const notification = document.createElement('div');
    notification.className = `notification is-${type}`;
    notification.innerHTML = `
        <button class="delete"></button>
        ${message}
    `;
    
    // Insert at the top of the main content
    const container = document.querySelector('.section .container');
    container.insertBefore(notification, container.firstChild);
    
    // Auto-dismiss after 5 seconds
    setTimeout(() => {
        notification.remove();
    }, 5000);
    
    // Handle delete button
    notification.querySelector('.delete').addEventListener('click', () => {
        notification.remove();
    });
}

// Handle delete confirmations
document.body.addEventListener('htmx:confirm', (event) => {
    if (event.detail.question === 'Are you sure you want to delete this customer?') {
        event.preventDefault();
        
        // Use Bulma modal or native confirm
        if (confirm(event.detail.question)) {
            event.detail.issueRequest();
        }
    }
});

// Handle successful deletes
document.body.addEventListener('htmx:afterRequest', (event) => {
    if (event.detail.xhr.status === 204 && event.detail.verb === 'delete') {
        showNotification('Item deleted successfully', 'success');
    }
});

// Format dates
function formatDate(dateString) {
    const date = new Date(dateString);
    return date.toLocaleDateString('en-AU', {
        year: 'numeric',
        month: 'short',
        day: 'numeric'
    });
}

// Initialize tooltips if using Bulma extensions
document.addEventListener('DOMContentLoaded', () => {
    // Add any initialization code here
});

// Handle search clear button
document.addEventListener('click', (event) => {
    if (event.target.matches('[data-clear-search]')) {
        const searchInput = document.querySelector('#customer-search');
        if (searchInput) {
            searchInput.value = '';
            searchInput.dispatchEvent(new Event('keyup'));
        }
    }
});