// Main application script document.addEventListener('DOMContentLoaded', function() { // Initialize feather icons with error handling if (typeof feather !== 'undefined') { feather.replace(); } // Smooth scrolling for anchor links document.querySelectorAll('a[href^="#"]').forEach(anchor => { anchor.addEventListener('click', function (e) { e.preventDefault(); document.querySelector(this.getAttribute('href')).scrollIntoView({ behavior: 'smooth' }); }); }); // Mobile menu toggle for web components document.addEventListener('click', function(e) { // Handle mobile menu toggle within shadow DOM if (e.target && e.target.closest) { const mobileButton = e.target.closest('#mobile-menu-button'); if (mobileButton) { const header = mobileButton.closest('custom-header'); if (header) { // The toggle is handled within the component return; } } } }); // Initialize mobile menu for non-web-component menus const mobileMenuButton = document.getElementById('mobile-menu-button'); const mobileMenu = document.getElementById('mobile-menu'); if (mobileMenuButton && mobileMenu) { mobileMenuButton.addEventListener('click', () => { mobileMenu.classList.toggle('hidden'); }); } // Form validation example const forms = document.querySelectorAll('form'); forms.forEach(form => { form.addEventListener('submit', function(e) { e.preventDefault(); // Add your form validation logic here console.log('Form submitted'); }); }); // Theme toggle (if implemented) const themeToggle = document.getElementById('theme-toggle'); if (themeToggle) { themeToggle.addEventListener('click', function() { document.documentElement.classList.toggle('dark'); // Save preference to localStorage const isDark = document.documentElement.classList.contains('dark'); localStorage.setItem('theme', isDark ? 'dark' : 'light'); }); } // Initialize any charts or data visualizations initializeCharts(); // Set up any event listeners for dynamic content setupEventListeners(); }); // Function to initialize charts function initializeCharts() { // Example chart initialization // In a real application, you would use a library like Chart.js console.log('Initializing charts...'); } // Function to set up event listeners function setupEventListeners() { // Example event listener setup console.log('Setting up event listeners...'); } // Notification system function showNotification(message, type = 'info') { const notification = document.createElement('div'); notification.className = `notification bg-${type === 'error' ? 'red' : type === 'success' ? 'green' : 'blue'}-500 text-white`; notification.textContent = message; document.body.appendChild(notification); // Remove notification after 3 seconds setTimeout(() => { notification.remove(); }, 3000); } // Helper function to format currency function formatCurrency(amount) { return new Intl.NumberFormat('ar-YE', { style: 'currency', currency: 'YER' }).format(amount); } // Helper function to format date function formatDate(dateString) { const options = { year: 'numeric', month: 'long', day: 'numeric' }; return new Date(dateString).toLocaleDateString('ar-YE', options); } // API call example async function fetchData(endpoint) { try { const response = await fetch(`/api/${endpoint}`); if (!response.ok) { throw new Error(`HTTP error! status: ${response.status}`); } return await response.json(); } catch (error) { console.error('Error fetching data:', error); showNotification('حدث خطأ أثناء جلب البيانات', 'error'); } } // Debounce function for search inputs function debounce(func, wait) { let timeout; return function executedFunction(...args) { const later = () => { clearTimeout(timeout); func(...args); }; clearTimeout(timeout); timeout = setTimeout(later, wait); }; } // Export functionality function exportToExcel(data, filename) { // This would typically use a library like SheetJS console.log('Exporting to Excel:', filename); showNotification('تم تصدير البيانات إلى Excel', 'success'); } // Print functionality function printPage() { window.print(); }