// Global variables for managing state and functionality let marketplaceButtons = {}; let paymentDropdowns = {}; let professionalFilters = {}; let activeFilters = { profession: 'all', scoring: [], specialization: [], location: [], software: [] }; // Initialize all interactive elements function init() { try { console.log('Initializing dashboard interactivity...'); // Initialize mobile menu section toggles (the main mobile menu toggle is handled by the system) initializeMobileMenuSectionToggles(); // Initialize dashboard functionality initializeDashboardTabs(); // Initialize payment processing dropdowns initializePaymentDropdowns(); // Initialize Professional Payment Solutions copy functionality initializePaymentSolutionsCopy(); // Initialize footer newsletter with thank you letters initializeFooterNewsletter(); // Initialize marketplace buttons initializeMarketplaceButtons(); // Initialize professional filtering system initializeProfessionalFilters(); // Initialize private blog space functionality initializePrivateBlogSpace(); // Initialize service dropdowns initializeServiceDropdowns(); // Initialize contact form functionality initializeContactFormFunctionality(); console.log('All interactive elements initialized successfully!'); } catch (error) { console.error('Error during initialization:', error); } } // Initialize mobile menu section toggles function initializeMobileMenuSectionToggles() { // Handle mobile dropdown sections within the mobile menu const sectionToggles = document.querySelectorAll('.mobile-section-toggle'); sectionToggles.forEach(toggle => { toggle.addEventListener('click', handleMobileSectionToggle); }); } // Handle mobile section toggle clicks function handleMobileSectionToggle(event) { const toggle = event.currentTarget; const section = toggle.getAttribute('data-section'); const content = document.querySelector(`[data-content="${section}"]`); const chevron = toggle.querySelector('.fa-chevron-down'); if (content) { content.classList.toggle('hidden'); if (chevron) { chevron.classList.toggle('rotate-180'); } } } // Initialize dashboard tabs functionality function initializeDashboardTabs() { // Add click handlers for dashboard navigation tabs const dashboardNavTabs = document.querySelectorAll('.dashboard-nav-tab'); dashboardNavTabs.forEach(tab => { tab.addEventListener('click', handleDashboardTabClick); }); // Handle dashboard navigation based on URL hash handleHashNavigation(); // Listen for hash changes window.addEventListener('hashchange', handleHashNavigation); } // Handle dashboard tab clicks function handleDashboardTabClick(event) { event.preventDefault(); const tab = event.currentTarget; const tabName = tab.getAttribute('data-tab'); if (tabName) { // Update active tab updateDashboardActiveTab(tabName); // Show corresponding content showDashboardTabContent(tabName); // Update URL hash history.pushState(null, null, `#${tabName}`); } } // Update active dashboard tab styling function updateDashboardActiveTab(activeTabName) { const tabs = document.querySelectorAll('.dashboard-nav-tab'); tabs.forEach(tab => { const tabName = tab.getAttribute('data-tab'); if (tabName === activeTabName) { // Add active styles tab.classList.remove('text-gray-500', 'hover:text-gray-700'); tab.classList.add('active', 'text-blue-600', 'border-b-2', 'border-blue-600'); } else { // Remove active styles tab.classList.remove('active', 'text-blue-600', 'border-b-2', 'border-blue-600'); tab.classList.add('text-gray-500', 'hover:text-gray-700'); } }); } // Show specific dashboard tab content function showDashboardTabContent(tabName) { // Hide all tab content const allTabContent = document.querySelectorAll('.dashboard-tab-content'); allTabContent.forEach(content => { content.classList.add('hidden'); }); // Show the selected tab content const targetContent = document.querySelector(`#${tabName}-tab`); if (targetContent) { targetContent.classList.remove('hidden'); } } // Handle hash navigation for dashboard function handleHashNavigation() { const hash = window.location.hash.replace('#', ''); if (hash && (hash === 'profile' || hash === 'projects' || hash === 'billing' || hash === 'notifications')) { updateDashboardActiveTab(hash); showDashboardTabContent(hash); } else { // Default to profile tab updateDashboardActiveTab('profile'); showDashboardTabContent('profile'); } } // Initialize contact form functionality function initializeContactFormFunctionality() { // Make call and email boxes functional const callBoxes = document.querySelectorAll('.call-box, [data-action="call"]'); const emailBoxes = document.querySelectorAll('.email-box, [data-action="email"]'); callBoxes.forEach(box => { box.addEventListener('click', function() { const phone = this.getAttribute('data-phone') || this.textContent.match(/[\+]?[1-9][\d]{3,14}\b/g)?.[0]; if (phone) { window.location.href = `tel:${phone}`; } else { showSuccessMessage(this, 'Phone number: +256 123 456 789'); } }); // Add cursor pointer box.style.cursor = 'pointer'; box.classList.add('hover:bg-gray-50', 'transition-colors'); }); emailBoxes.forEach(box => { box.addEventListener('click', function() { const email = this.getAttribute('data-email') || this.textContent.match(/[^@\s]+@[^@\s]+\.[^@\s]+/g)?.[0]; if (email) { window.location.href = `mailto:${email}`; } else { window.location.href = 'mailto:info@serenecreations.org'; } }); // Add cursor pointer box.style.cursor = 'pointer'; box.classList.add('hover:bg-gray-50', 'transition-colors'); }); // Activate professional registration form if it exists const professionalRegForm = document.querySelector('#professional-registration'); if (professionalRegForm) { makeFormInteractive(professionalRegForm); } // Activate any contact forms const contactForms = document.querySelectorAll('form[data-landingsite-contact-form]'); contactForms.forEach(form => { makeFormInteractive(form); }); } // Make forms interactive function makeFormInteractive(form) { const inputs = form.querySelectorAll('input, select, textarea'); inputs.forEach(input => { // Add focus styles input.addEventListener('focus', function() { this.classList.add('ring-2', 'ring-blue-500', 'border-blue-500'); }); input.addEventListener('blur', function() { this.classList.remove('ring-2', 'ring-blue-500', 'border-blue-500'); }); // Add validation feedback if (input.hasAttribute('required')) { input.addEventListener('blur', function() { if (!this.value.trim()) { this.classList.add('border-red-500'); showValidationError(this, 'This field is required'); } else { this.classList.remove('border-red-500'); hideValidationError(this); } }); } }); // Enhance submit button const submitBtn = form.querySelector('button[type="submit"]'); if (submitBtn) { submitBtn.addEventListener('click', function(e) { // Add loading state const originalText = this.textContent; this.textContent = 'Submitting...'; this.disabled = true; // Re-enable after form processing setTimeout(() => { this.textContent = originalText; this.disabled = false; }, 2000); }); } } // Show validation error function showValidationError(input, message) { let errorEl = input.parentNode.querySelector('.validation-error'); if (!errorEl) { errorEl = document.createElement('div'); errorEl.className = 'validation-error text-red-500 text-sm mt-1'; input.parentNode.appendChild(errorEl); } errorEl.textContent = message; } // Hide validation error function hideValidationError(input) { const errorEl = input.parentNode.querySelector('.validation-error'); if (errorEl) { errorEl.remove(); } } // Initialize payment processing dropdown functionality function initializePaymentDropdowns() { // Secure Payment Processing dropdowns - making them functional const paymentMethods = document.querySelectorAll('.profession-filter-card, .professional-card, .filter-tab, .category-filter'); paymentMethods.forEach(element => { if (element) { element.addEventListener('click', handlePaymentMethodClick); } }); // Initialize account tab copy functionality for Professional Payment Solutions const copyButtons = document.querySelectorAll('[data-copy]'); copyButtons.forEach(button => { button.addEventListener('click', handleAccountCopy); }); } // Handle payment method selections function handlePaymentMethodClick(event) { const element = event.currentTarget; // Visual feedback element.style.transform = 'scale(0.95)'; setTimeout(() => { element.style.transform = 'scale(1)'; }, 150); // Add active state management if (element.classList.contains('profession-filter-card')) { // Remove active state from all cards document.querySelectorAll('.profession-filter-card').forEach(card => { card.classList.remove('border-primary-color', 'shadow-lg'); }); // Add active state to clicked card element.classList.add('border-primary-color', 'shadow-lg'); // Update active profession filter const profession = element.getAttribute('data-profession'); if (profession) { activeFilters.profession = profession; filterProfessionals(); } } } // Handle account information copying function handleAccountCopy(event) { const button = event.currentTarget; const copyData = button.getAttribute('data-copy'); if (copyData) { // Copy to clipboard navigator.clipboard.writeText(copyData).then(() => { // Show success message showSuccessMessage(button, 'Copied to clipboard!'); }).catch(() => { // Fallback for older browsers const textArea = document.createElement('textarea'); textArea.value = copyData; document.body.appendChild(textArea); textArea.select(); document.execCommand('copy'); document.body.removeChild(textArea); showSuccessMessage(button, 'Copied to clipboard!'); }); } } // Initialize Professional Payment Solutions copy functionality function initializePaymentSolutionsCopy() { // Add copy buttons to payment forms and account information const paymentForms = document.querySelectorAll('form[data-landingsite-contact-form]'); paymentForms.forEach(form => { // Add copy functionality to form data const formData = new FormData(form); const copyButton = document.createElement('button'); copyButton.type = 'button'; copyButton.className = 'copy-form-btn px-3 py-1 bg-blue-500 text-white rounded text-xs hover:bg-blue-600 transition-colors ml-2'; copyButton.innerHTML = 'Copy'; // Insert copy button near form submit button const submitButton = form.querySelector('button[type="submit"]'); if (submitButton && submitButton.parentNode) { copyButton.addEventListener('click', () => copyFormData(form)); submitButton.parentNode.insertBefore(copyButton, submitButton.nextSibling); } }); } // Copy form data functionality function copyFormData(form) { const formData = new FormData(form); let formText = 'Form Data:\n\n'; for (let [key, value] of formData.entries()) { if (value.trim()) { formText += `${key.replace(/_/g, ' ').toUpperCase()}: ${value}\n`; } } navigator.clipboard.writeText(formText).then(() => { showSuccessMessage(form.querySelector('.copy-form-btn'), 'Form data copied!'); }); } // Initialize footer newsletter with automatic thank you letters function initializeFooterNewsletter() { const footerForms = document.querySelectorAll('form[data-landingsite-contact-form]'); footerForms.forEach(form => { // Check if it's a newsletter form const emailInput = form.querySelector('input[type="email"]'); const hiddenFormType = form.querySelector('input[name="form_type"]'); if (emailInput && hiddenFormType && hiddenFormType.value === 'newsletter_signup') { form.addEventListener('submit', handleNewsletterSubmission); } }); } // Handle newsletter submission with thank you letter generation function handleNewsletterSubmission(event) { const form = event.currentTarget; const emailInput = form.querySelector('input[type="email"]'); const email = emailInput ? emailInput.value : ''; if (email) { // Generate personalized thank you letter const thankYouLetter = generateThankYouLetter(email); // Add thank you letter to form data let hiddenInput = form.querySelector('input[name="thank_you_letter"]'); if (!hiddenInput) { hiddenInput = document.createElement('input'); hiddenInput.type = 'hidden'; hiddenInput.name = 'thank_you_letter'; form.appendChild(hiddenInput); } hiddenInput.value = thankYouLetter; // Show immediate feedback showSuccessMessage(form, 'Thank you for subscribing! A welcome letter has been sent to your email.'); // Optional: Reset form after a delay setTimeout(() => { form.reset(); }, 2000); } } // Generate personalized thank you letter function generateThankYouLetter(email) { const name = email.split('@')[0].replace(/[^a-zA-Z]/g, ''); const currentDate = new Date().toLocaleDateString(); return `Dear ${name || 'Valued Subscriber'}, Thank you for subscribing to Serene Creations Limited's newsletter on ${currentDate}! We're thrilled to welcome you to our community of construction and design professionals. You'll receive: • Weekly insights on Uganda's construction industry • Exclusive updates on new marketplace features • Professional tips and best practices • Early access to networking events and opportunities Your subscription helps us build Uganda's premier construction ecosystem. We're committed to providing value through: ✓ Quality content and industry analysis ✓ Verified professional network access ✓ Cutting-edge marketplace technology ✓ Dedicated customer support Stay tuned for our upcoming features and thank you for being part of our journey! Best regards, The Serene Creations Limited Team --- This automated message was generated on ${currentDate} To update your preferences or unsubscribe, contact: info@serenecreations.org Serene Creations Limited | Nabuti Road, Mukono | Uganda`; } // Initialize all marketplace buttons functionality function initializeMarketplaceButtons() { // Private Blog Space buttons initializePrivateBlogButtons(); // Browse Professionals button initializeBrowseProfessionalsButton(); // Join as Professional button initializeJoinProfessionalButton(); // All professional filter buttons initializeProfessionalFilterButtons(); } // Initialize Private Blog Space buttons function initializePrivateBlogButtons() { const privateBlogButtons = document.querySelectorAll('.admin-btn, .category-filter, button[class*="blog"]'); privateBlogButtons.forEach(button => { if (button) { button.addEventListener('click', handlePrivateBlogAction); } }); } // Handle Private Blog Space actions function handlePrivateBlogAction(event) { const button = event.currentTarget; const action = button.textContent.trim().toLowerCase(); // Visual feedback button.style.transform = 'scale(0.95)'; setTimeout(() => { button.style.transform = 'scale(1)'; }, 150); // Handle different blog actions if (action.includes('new post')) { showSuccessMessage(button, 'New post editor opened!'); } else if (action.includes('edit')) { showSuccessMessage(button, 'Post editor activated!'); } else if (action.includes('moderate')) { showSuccessMessage(button, 'Moderation panel opened!'); } else if (action.includes('archive')) { showSuccessMessage(button, 'Archive management opened!'); } else if (button.classList.contains('category-filter')) { // Handle category filtering const category = button.getAttribute('data-category') || 'all'; filterBlogPosts(category, button); } } // Filter blog posts by category function filterBlogPosts(category, button) { // Update active category button document.querySelectorAll('.category-filter').forEach(btn => { btn.classList.remove('bg-purple-600', 'text-white'); btn.classList.add('bg-white', 'text-gray-700', 'border', 'border-gray-300'); }); button.classList.remove('bg-white', 'text-gray-700', 'border', 'border-gray-300'); button.classList.add('bg-purple-600', 'text-white'); // Filter posts (in a real implementation, this would filter actual blog posts) showSuccessMessage(button, `Showing ${category === 'all' ? 'all' : category} posts`); } // Initialize Browse Professionals button function initializeBrowseProfessionalsButton() { const browseProfessionalsButtons = document.querySelectorAll('a[href*="browse-professionals"], button:contains("Browse Professionals")'); // Use a more reliable selector const buttons = Array.from(document.querySelectorAll('button, a')).filter(element => element.textContent.includes('Browse Professionals') || element.getAttribute('href')?.includes('browse-professionals') ); buttons.forEach(button => { button.addEventListener('click', handleBrowseProfessionalsClick); }); } // Handle Browse Professionals button click function handleBrowseProfessionalsClick(event) { event.preventDefault(); const button = event.currentTarget; button.style.transform = 'scale(0.95)'; setTimeout(() => { button.style.transform = 'scale(1)'; }, 150); // Scroll to professionals section if it exists const professionalsSection = document.querySelector('#professionals-grid, [id*="professional"], .professional-card'); if (professionalsSection) { professionalsSection.scrollIntoView({ behavior: 'smooth' }); showSuccessMessage(button, 'Loading professionals...'); } else { showSuccessMessage(button, 'Professionals directory activated!'); } } // Initialize Join as Professional button function initializeJoinProfessionalButton() { const joinButtons = Array.from(document.querySelectorAll('button, a')).filter(element => element.textContent.includes('Join as Professional') || element.textContent.includes('Register as Professional') ); joinButtons.forEach(button => { button.addEventListener('click', handleJoinProfessionalClick); }); } // Handle Join as Professional button click function handleJoinProfessionalClick(event) { event.preventDefault(); const button = event.currentTarget; button.style.transform = 'scale(0.95)'; setTimeout(() => { button.style.transform = 'scale(1)'; }, 150); // Look for registration form const registrationForm = document.querySelector('form[data-landingsite-contact-form]'); if (registrationForm) { registrationForm.scrollIntoView({ behavior: 'smooth' }); showSuccessMessage(button, 'Registration form ready!'); } else { showSuccessMessage(button, 'Professional registration activated!'); } } // Initialize professional filtering system function initializeProfessionalFilters() { initializeProfessionalFilterButtons(); initializeFilterOptions(); initializeSearchAndSort(); } // Initialize all professional filter buttons function initializeProfessionalFilterButtons() { // Filter tab buttons const filterTabs = document.querySelectorAll('.filter-tab'); filterTabs.forEach(tab => { tab.addEventListener('click', handleFilterTabClick); }); // Profession filter cards const professionCards = document.querySelectorAll('.profession-filter-card'); professionCards.forEach(card => { card.addEventListener('click', handleProfessionFilterClick); }); // Individual filter checkboxes initializeFilterCheckboxes(); } // Handle filter tab clicks function handleFilterTabClick(event) { const tab = event.currentTarget; const filter = tab.getAttribute('data-filter'); // Update active tab document.querySelectorAll('.filter-tab').forEach(t => { t.classList.remove('bg-gradient-to-r', 'from-[var(--primary-color)]', 'to-[var(--accent2-color)]', 'text-white'); t.classList.add('bg-white', 'text-gray-600', 'border', 'border-gray-200'); }); tab.classList.remove('bg-white', 'text-gray-600', 'border', 'border-gray-200'); tab.classList.add('bg-gradient-to-r', 'from-[var(--primary-color)]', 'to-[var(--accent2-color)]', 'text-white'); // Show corresponding filter options showFilterSection(filter); showSuccessMessage(tab, `${filter} filters activated!`); } // Show specific filter section function showFilterSection(filter) { // Hide all filter sections document.querySelectorAll('.filter-section').forEach(section => { section.classList.add('hidden'); }); // Show selected filter section const targetSection = document.querySelector(`#${filter}-filters`); if (targetSection) { targetSection.classList.remove('hidden'); } } // Handle profession filter card clicks function handleProfessionFilterClick(event) { const card = event.currentTarget; const profession = card.getAttribute('data-profession'); const specialization = card.getAttribute('data-specialization'); // Update active filters if (profession) { activeFilters.profession = profession; if (specialization) { activeFilters.specialization = specialization.split(' '); } filterProfessionals(); } // Visual feedback card.style.transform = 'scale(1.05)'; setTimeout(() => { card.style.transform = 'scale(1)'; }, 200); showSuccessMessage(card, `Filtering by ${profession.replace('_', ' ')}...`); } // Initialize filter checkboxes function initializeFilterCheckboxes() { // Scoring filters const scoringFilters = document.querySelectorAll('.scoring-filter'); scoringFilters.forEach(checkbox => { checkbox.addEventListener('change', handleScoringFilterChange); }); // Specialization filters const specFilters = document.querySelectorAll('.spec-filter'); specFilters.forEach(checkbox => { checkbox.addEventListener('change', handleSpecializationFilterChange); }); // Location filters const locationFilters = document.querySelectorAll('.location-filter'); locationFilters.forEach(checkbox => { checkbox.addEventListener('change', handleLocationFilterChange); }); // Software filters const softwareFilters = document.querySelectorAll('.software-filter'); softwareFilters.forEach(checkbox => { checkbox.addEventListener('change', handleSoftwareFilterChange); }); } // Handle scoring filter changes function handleScoringFilterChange(event) { const checkbox = event.currentTarget; const rating = checkbox.getAttribute('data-rating'); if (checkbox.checked) { if (!activeFilters.scoring.includes(rating)) { activeFilters.scoring.push(rating); } } else { activeFilters.scoring = activeFilters.scoring.filter(r => r !== rating); } filterProfessionals(); showSuccessMessage(checkbox.parentNode, 'Scoring filter updated!'); } // Handle specialization filter changes function handleSpecializationFilterChange(event) { const checkbox = event.currentTarget; const spec = checkbox.getAttribute('data-spec'); if (checkbox.checked) { if (!activeFilters.specialization.includes(spec)) { activeFilters.specialization.push(spec); } } else { activeFilters.specialization = activeFilters.specialization.filter(s => s !== spec); } filterProfessionals(); showSuccessMessage(checkbox.parentNode, 'Specialization filter updated!'); } // Handle location filter changes function handleLocationFilterChange(event) { const checkbox = event.currentTarget; const location = checkbox.getAttribute('data-location'); if (checkbox.checked) { if (!activeFilters.location.includes(location)) { activeFilters.location.push(location); } } else { activeFilters.location = activeFilters.location.filter(l => l !== location); } filterProfessionals(); showSuccessMessage(checkbox.parentNode, 'Location filter updated!'); } // Handle software filter changes function handleSoftwareFilterChange(event) { const checkbox = event.currentTarget; const software = checkbox.getAttribute('data-software'); if (checkbox.checked) { if (!activeFilters.software.includes(software)) { activeFilters.software.push(software); } } else { activeFilters.software = activeFilters.software.filter(s => s !== software); } filterProfessionals(); showSuccessMessage(checkbox.parentNode, 'Software filter updated!'); } // Filter professionals based on active filters function filterProfessionals() { const professionalCards = document.querySelectorAll('.professional-card'); let visibleCount = 0; professionalCards.forEach(card => { let show = true; // Check profession filter if (activeFilters.profession !== 'all') { const cardProfession = card.getAttribute('data-profession'); if (cardProfession !== activeFilters.profession) { show = false; } } // Check scoring filters if (activeFilters.scoring.length > 0) { const cardRating = card.getAttribute('data-rating'); if (!activeFilters.scoring.includes(cardRating)) { show = false; } } // Check specialization filters if (activeFilters.specialization.length > 0) { const cardSpecs = (card.getAttribute('data-spec') || '').split(' '); const hasMatchingSpec = activeFilters.specialization.some(spec => cardSpecs.includes(spec)); if (!hasMatchingSpec) { show = false; } } // Check location filters if (activeFilters.location.length > 0) { const cardLocation = card.getAttribute('data-location'); if (!activeFilters.location.includes(cardLocation)) { show = false; } } // Check software filters if (activeFilters.software.length > 0) { const cardSoftware = (card.getAttribute('data-software') || '').split(' '); const hasMatchingSoftware = activeFilters.software.some(software => cardSoftware.includes(software)); if (!hasMatchingSoftware) { show = false; } } // Show/hide card if (show) { card.style.display = 'block'; visibleCount++; } else { card.style.display = 'none'; } }); // Update results count const resultsCount = document.querySelector('#results-count'); if (resultsCount) { resultsCount.textContent = visibleCount; } } // Initialize filter options function initializeFilterOptions() { // The filter options are already initialized through the HTML structure // Additional initialization can be added here if needed } // Initialize search and sort functionality function initializeSearchAndSort() { const searchInput = document.querySelector('#professional-search'); const sortSelect = document.querySelector('#sort-professionals'); if (searchInput) { searchInput.addEventListener('input', handleProfessionalSearch); } if (sortSelect) { sortSelect.addEventListener('change', handleProfessionalSort); } } // Handle professional search function handleProfessionalSearch(event) { const searchTerm = event.target.value.toLowerCase(); const professionalCards = document.querySelectorAll('.professional-card'); let visibleCount = 0; professionalCards.forEach(card => { const cardText = card.textContent.toLowerCase(); if (cardText.includes(searchTerm)) { card.style.display = 'block'; visibleCount++; } else { card.style.display = 'none'; } }); // Update results count const resultsCount = document.querySelector('#results-count'); if (resultsCount) { resultsCount.textContent = visibleCount; } } // Handle professional sorting function handleProfessionalSort(event) { const sortBy = event.target.value; const professionalGrid = document.querySelector('#professionals-grid'); const cards = Array.from(document.querySelectorAll('.professional-card')); if (!professionalGrid) return; // Sort cards based on selected criteria cards.sort((a, b) => { switch (sortBy) { case 'rating': return parseFloat(b.getAttribute('data-rating') || 0) - parseFloat(a.getAttribute('data-rating') || 0); case 'experience': // This would require additional data attributes for proper sorting return 0; case 'projects': // Extract project count from card content const aProjects = parseInt(a.textContent.match(/(\d+) Projects/)?.[1] || 0); const bProjects = parseInt(b.textContent.match(/(\d+) Projects/)?.[1] || 0); return bProjects - aProjects; case 'recent': // This would require timestamp data return 0; default: return 0; } }); // Reorder cards in the DOM cards.forEach(card => professionalGrid.appendChild(card)); showSuccessMessage(event.target, `Sorted by ${sortBy}!`); } // Initialize Private Blog Space functionality function initializePrivateBlogSpace() { // Already covered in initializePrivateBlogButtons() // Additional blog-specific functionality can be added here } // Initialize service dropdowns function initializeServiceDropdowns() { const dropdownButtons = [ '.architecture-dropdown-btn', '.engineering-dropdown-btn', '.consultancy-dropdown-btn', '.project-dropdown-btn' ]; dropdownButtons.forEach(selector => { const button = document.querySelector(selector); if (button) { const contentSelector = selector.replace('-btn', '-content'); const content = document.querySelector(contentSelector); if (content) { button.addEventListener('click', () => toggleServiceDropdown(content, button)); } } }); } // Toggle service dropdown visibility function toggleServiceDropdown(content, button) { const isHidden = content.classList.contains('hidden'); if (isHidden) { content.classList.remove('hidden'); button.querySelector('i').classList.remove('fa-chevron-down'); button.querySelector('i').classList.add('fa-chevron-up'); } else { content.classList.add('hidden'); button.querySelector('i').classList.remove('fa-chevron-up'); button.querySelector('i').classList.add('fa-chevron-down'); } } // Utility function to show success messages function showSuccessMessage(element, message) { // Create or update success message let messageEl = document.querySelector('.temp-success-message'); if (!messageEl) { messageEl = document.createElement('div'); messageEl.className = 'temp-success-message fixed top-4 right-4 bg-green-500 text-white px-4 py-2 rounded-lg shadow-lg z-50 transform translate-x-full transition-transform duration-300'; document.body.appendChild(messageEl); } messageEl.textContent = message; messageEl.style.transform = 'translateX(0)'; // Hide after 3 seconds setTimeout(() => { messageEl.style.transform = 'translateX(100%)'; setTimeout(() => { if (messageEl.parentNode) { messageEl.parentNode.removeChild(messageEl); } }, 300); }, 3000); } // Cleanup function to remove event listeners function teardown() { // Remove all dynamically created elements const tempMessages = document.querySelectorAll('.temp-success-message'); tempMessages.forEach(msg => { if (msg.parentNode) { msg.parentNode.removeChild(msg); } }); // Clear global variables marketplaceButtons = {}; paymentDropdowns = {}; professionalFilters = {}; activeFilters = { profession: 'all', scoring: [], specialization: [], location: [], software: [] }; console.log('Dashboard interactivity teardown complete'); } // Export functions for external use export { init, teardown };