update() { const activeDropdowns = Array.from(this.container.querySelectorAll('.dropdown-item.active')) .map(item => item.querySelector('.dropdown-header').dataset.dropdown); this.render(); this.attachEventListeners(); // Restore active dropdowns activeDropdowns.forEach(dropdown => { const item = this.container.querySelector(`[data-dropdown="${dropdown}"]`)?.closest('.dropdown-item'); if (item) { item.classList.add('active'); } }); } attachEventListeners() { // Service Options this.container.querySelectorAll('[data-service]').forEach(button => { button.addEventListener('click', (e) => { e.preventDefault(); e.stopPropagation(); this.state.serviceContract = button.dataset.service; this.update(); }); }); // Payment Options this.container.querySelectorAll('[data-payment]').forEach(button => { button.addEventListener('click', (e) => { e.preventDefault(); e.stopPropagation(); const value = button.dataset.payment; this.state.paymentOption = value; if (value === 'rent') { this.state.serviceContract = 'all'; this.state.withCoffeeContract = true; } this.update(); }); }); // Duration Buttons this.container.querySelectorAll('[data-duration]').forEach(button => { button.addEventListener('click', (e) => { e.preventDefault(); e.stopPropagation(); this.state.duration = parseInt(button.dataset.duration); this.update(); }); }); // Coffee Contract Toggle const contractToggle = this.container.querySelector('[data-contract-toggle]'); if (contractToggle) { contractToggle.addEventListener('click', () => { if (this.state.paymentOption === 'rent') return; this.state.withCoffeeContract = !this.state.withCoffeeContract; this.update(); }); } // Quote Button const quoteButton = this.container.querySelector('[data-quote-button]'); if (quoteButton) { quoteButton.addEventListener('click', () => this.toggleModal(true)); } // Share Button const shareButton = this.container.querySelector('[data-share-button]'); if (shareButton) { shareButton.addEventListener('click', () => this.handleShare()); } } setupDropdowns() { // Handle dropdown toggles this.container.querySelectorAll('.dropdown-header').forEach(header => { header.addEventListener('click', (e) => { e.preventDefault(); e.stopPropagation(); const dropdown = header.closest('.dropdown-item'); // Close other dropdowns this.container.querySelectorAll('.dropdown-item').forEach(item => { if (item !== dropdown) { item.classList.remove('active'); } }); // Toggle current dropdown dropdown.classList.toggle('active'); }); }); // Close dropdowns when clicking outside document.addEventListener('click', (e) => { if (!e.target.closest('.dropdown-item') && !e.target.closest('.info-icon')) { this.container.querySelectorAll('.dropdown-item').forEach(item => { item.classList.remove('active'); }); } }); // Handle info icons this.container.querySelectorAll('.info-icon').forEach(icon => { icon.addEventListener('click', (e) => { e.preventDefault(); e.stopPropagation(); // Remove existing tooltips document.querySelectorAll('.mobile-tooltip').forEach(t => t.remove()); const tooltip = document.createElement('div'); tooltip.className = 'mobile-tooltip'; tooltip.textContent = icon.getAttribute('title'); document.body.appendChild(tooltip); // Position tooltip const iconRect = icon.getBoundingClientRect(); tooltip.style.left = '50%'; tooltip.style.transform = 'translateX(-50%)'; tooltip.style.bottom = '20px'; // Close on any click setTimeout(() => { document.addEventListener('click', () => tooltip.remove(), { once: true }); }, 100); }); }); }