// Enhanced Sign-In System with Admin Panel for Bahama Bay let adminPanel = null; let isAdminLoggedIn = false; let signInHandlers = {}; // Admin data for demonstration let adminData = { vendors: [ { id: 1, name: "Island Fresh Market", status: "active", products: 25, revenue: "$2,450" }, { id: 2, name: "Conch Bar Crafts", status: "pending", products: 12, revenue: "$890" }, { id: 3, name: "Paradise Fishermen", status: "active", products: 18, revenue: "$1,670" }, { id: 4, name: "Tropical Treats", status: "active", products: 32, revenue: "$3,200" } ], orders: [ { id: 1001, customer: "Sarah Johnson", vendor: "Island Fresh Market", amount: "$45.99", status: "delivered", date: "2024-08-09" }, { id: 1002, customer: "Mike Wilson", vendor: "Conch Bar Crafts", amount: "$89.50", status: "in-transit", date: "2024-08-09" }, { id: 1003, customer: "Lisa Brown", vendor: "Paradise Fishermen", amount: "$67.25", status: "processing", date: "2024-08-10" }, { id: 1004, customer: "David Clark", vendor: "Tropical Treats", amount: "$125.00", status: "pending", date: "2024-08-10" } ], deliveries: [ { id: 501, orderId: 1001, driver: "John Smith", status: "completed", time: "2:30 PM" }, { id: 502, orderId: 1002, driver: "Maria Garcia", status: "in-progress", time: "3:45 PM" }, { id: 503, orderId: 1003, driver: "Robert Johnson", status: "assigned", time: "4:15 PM" }, { id: 504, orderId: 1004, driver: "Available", status: "pending", time: "TBD" } ], stats: { totalRevenue: "$8,210", totalOrders: 156, activeVendors: 23, completedDeliveries: 142 } }; // Scroll-to-top functionality function handleScroll() { const scrollToTopBtn = document.getElementById('scrollToTopBtn'); if (scrollToTopBtn) { if (window.pageYOffset > 300) { scrollToTopBtn.classList.remove('opacity-0', 'translate-y-4', 'pointer-events-none'); scrollToTopBtn.classList.add('opacity-100', 'translate-y-0'); } else { scrollToTopBtn.classList.add('opacity-0', 'translate-y-4', 'pointer-events-none'); scrollToTopBtn.classList.remove('opacity-100', 'translate-y-0'); } } } function scrollToTop() { window.scrollTo({ top: 0, behavior: 'smooth' }); } // Page navigation functions function togglePageNav() { const mobileNav = document.getElementById('pageNavMobile'); if (mobileNav) { mobileNav.classList.toggle('hidden'); } } function smoothScrollTo(targetId) { const element = document.getElementById(targetId); if (element) { element.scrollIntoView({ behavior: 'smooth', block: 'start' }); } // Close mobile nav if open const mobileNav = document.getElementById('pageNavMobile'); if (mobileNav && !mobileNav.classList.contains('hidden')) { mobileNav.classList.add('hidden'); } } // Sign-in modal functions function openModal(modalId) { const modal = document.getElementById(modalId); const modalContent = document.getElementById(modalId + 'Content'); if (modal && modalContent) { modal.classList.remove('hidden'); modal.classList.add('flex'); // Animate modal in setTimeout(() => { modalContent.classList.remove('scale-95', 'opacity-0'); modalContent.classList.add('scale-100', 'opacity-100'); }, 10); } } function closeModal(modalId) { const modal = document.getElementById(modalId); const modalContent = document.getElementById(modalId + 'Content'); if (modal && modalContent) { // Animate modal out modalContent.classList.remove('scale-100', 'opacity-100'); modalContent.classList.add('scale-95', 'opacity-0'); setTimeout(() => { modal.classList.add('hidden'); modal.classList.remove('flex'); }, 300); } } // Dropdown toggle function function toggleSignInDropdown() { const menu = document.getElementById('signInMenu'); if (menu) { const isHidden = menu.classList.contains('hidden'); if (isHidden) { menu.classList.remove('hidden'); setTimeout(() => { menu.classList.add('opacity-100', 'scale-100'); menu.classList.remove('opacity-0', 'scale-95'); }, 10); } else { menu.classList.add('opacity-0', 'scale-95'); menu.classList.remove('opacity-100', 'scale-100'); setTimeout(() => { menu.classList.add('hidden'); }, 200); } } } // Sign-in handlers function handleVendorSignIn() { openModal('vendorModal'); closeSignInDropdown(); } function handleAdminSignIn() { openModal('adminModal'); closeSignInDropdown(); } function handleTravelerSignIn() { openModal('travelerModal'); closeSignInDropdown(); } function closeSignInDropdown() { const menu = document.getElementById('signInMenu'); if (menu) { menu.classList.add('hidden'); } } // Form submission handlers function handleVendorFormSubmit(event) { event.preventDefault(); const email = document.getElementById('vendorEmail').value; const password = document.getElementById('vendorPassword').value; if (email && password) { // Demo authentication alert(`Vendor sign-in successful!\nEmail: ${email}\n\nRedirecting to vendor dashboard...`); closeModal('vendorModal'); } } function handleAdminFormSubmit(event) { event.preventDefault(); const email = document.getElementById('adminEmail').value; const password = document.getElementById('adminPassword').value; const mfa = document.getElementById('adminMFA').value; // Demo admin credentials if (email === 'admin@bahamabay.com' && password === 'admin123' && mfa === '123456') { isAdminLoggedIn = true; closeModal('adminModal'); createAdminPanel(); } else { alert('Demo Credentials:\nEmail: admin@bahamabay.com\nPassword: admin123\n2FA Code: 123456'); } } function handleTravelerFormSubmit(event) { event.preventDefault(); const email = document.getElementById('travelerEmail').value; const password = document.getElementById('travelerPassword').value; if (email && password) { // Demo authentication alert(`Welcome back to Bahama Bay!\nEmail: ${email}\n\nAccess granted to book experiences & shop local products.`); closeModal('travelerModal'); } } // Admin Panel Functions function createAdminPanel() { if (adminPanel) { adminPanel.style.display = 'block'; return; } adminPanel = document.createElement('div'); adminPanel.className = 'fixed inset-0 bg-white z-[200] overflow-y-auto'; adminPanel.innerHTML = `

Bahama Bay Admin Dashboard

Welcome, Administrator
`; document.body.appendChild(adminPanel); showAdminTab('dashboard'); } function closeAdminPanel() { if (adminPanel) { adminPanel.style.display = 'none'; } isAdminLoggedIn = false; } function showAdminTab(tabName) { // Update active tab document.querySelectorAll('.admin-tab-btn').forEach(btn => { btn.classList.remove('active', 'text-purple-600', 'border-purple-600'); btn.classList.add('text-gray-600', 'border-transparent'); }); event.target.closest('.admin-tab-btn').classList.add('active', 'text-purple-600', 'border-purple-600'); event.target.closest('.admin-tab-btn').classList.remove('text-gray-600', 'border-transparent'); const content = document.getElementById('admin-content'); switch(tabName) { case 'dashboard': content.innerHTML = getDashboardContent(); break; case 'vendors': content.innerHTML = getVendorsContent(); break; case 'orders': content.innerHTML = getOrdersContent(); break; case 'deliveries': content.innerHTML = getDeliveriesContent(); break; } } function getDashboardContent() { return `

Dashboard Overview

Total Revenue

${adminData.stats.totalRevenue}

Total Orders

${adminData.stats.totalOrders}

Active Vendors

${adminData.stats.activeVendors}

Deliveries

${adminData.stats.completedDeliveries}

`; } function getVendorsContent() { return `

Vendor Management

${adminData.vendors.map(vendor => ` `).join('')}
Vendor Status Products Revenue
${vendor.name}
${vendor.status} ${vendor.products} ${vendor.revenue}
`; } function getOrdersContent() { return `

Order Management

${adminData.orders.map(order => ` `).join('')}
Order ID Customer Amount Status
#${order.id} ${order.customer} ${order.amount} ${order.status}
`; } function getDeliveriesContent() { return `

Delivery Management

${adminData.deliveries.map(delivery => ` `).join('')}
Delivery ID Order ID Driver Status
#${delivery.id} #${delivery.orderId} ${delivery.driver} ${delivery.status}
`; } function getStatusColor(status) { const colors = { 'active': 'bg-green-100 text-green-800', 'pending': 'bg-yellow-100 text-yellow-800', 'processing': 'bg-blue-100 text-blue-800', 'in-transit': 'bg-purple-100 text-purple-800', 'delivered': 'bg-green-100 text-green-800', 'completed': 'bg-green-100 text-green-800', 'in-progress': 'bg-blue-100 text-blue-800', 'assigned': 'bg-cyan-100 text-cyan-800' }; return colors[status] || 'bg-gray-100 text-gray-800'; } // Event handler functions for different elements function handleSignInDropdownClick() { toggleSignInDropdown(); } function handleVendorSignInClick() { handleVendorSignIn(); } function handleAdminSignInClick() { handleAdminSignIn(); } function handleTravelerSignInClick() { handleTravelerSignIn(); } function handlePageNavLinkClick(event) { event.preventDefault(); const targetId = event.target.getAttribute('href').substring(1); smoothScrollTo(targetId); } function handleScrollToTopClick() { scrollToTop(); } function handleOutsideClick(event) { const dropdown = document.getElementById('signInDropdown'); const menu = document.getElementById('signInMenu'); if (dropdown && menu && !dropdown.contains(event.target) && !menu.contains(event.target)) { menu.classList.add('hidden'); } // Close modals when clicking outside const modals = ['vendorModal', 'adminModal', 'travelerModal']; modals.forEach(modalId => { const modal = document.getElementById(modalId); const modalContent = document.getElementById(modalId + 'Content'); if (modal && modalContent && event.target === modal) { closeModal(modalId); } }); } // Initialize the sign-in system function init() { // Desktop dropdown handlers const signInDropdown = document.getElementById('signInDropdown'); const vendorSignInBtn = document.getElementById('vendorSignIn'); const adminSignInBtn = document.getElementById('adminSignIn'); const travelerSignInBtn = document.getElementById('travelerSignIn'); // Mobile handlers const mobileVendorSignInBtn = document.getElementById('mobileVendorSignIn'); const mobileAdminSignInBtn = document.getElementById('mobileAdminSignIn'); const mobileTravelerSignInBtn = document.getElementById('mobileTravelerSignIn'); if (signInDropdown) { signInHandlers.dropdownClick = handleSignInDropdownClick; signInDropdown.addEventListener('click', signInHandlers.dropdownClick); } if (vendorSignInBtn) { signInHandlers.vendorClick = handleVendorSignInClick; vendorSignInBtn.addEventListener('click', signInHandlers.vendorClick); } if (adminSignInBtn) { signInHandlers.adminClick = handleAdminSignInClick; adminSignInBtn.addEventListener('click', signInHandlers.adminClick); } if (travelerSignInBtn) { signInHandlers.travelerClick = handleTravelerSignInClick; travelerSignInBtn.addEventListener('click', signInHandlers.travelerClick); } // Mobile handlers if (mobileVendorSignInBtn) { signInHandlers.mobileVendorClick = handleVendorSignInClick; mobileVendorSignInBtn.addEventListener('click', signInHandlers.mobileVendorClick); } if (mobileAdminSignInBtn) { signInHandlers.mobileAdminClick = handleAdminSignInClick; mobileAdminSignInBtn.addEventListener('click', signInHandlers.mobileAdminClick); } if (mobileTravelerSignInBtn) { signInHandlers.mobileTravelerClick = handleTravelerSignInClick; mobileTravelerSignInBtn.addEventListener('click', signInHandlers.mobileTravelerClick); } // Page navigation handlers const pageNavLinks = document.querySelectorAll('#smiy4b a[href^="#"]'); signInHandlers.pageNavClicks = []; pageNavLinks.forEach(link => { const clickHandler = handlePageNavLinkClick; signInHandlers.pageNavClicks.push({ element: link, handler: clickHandler }); link.addEventListener('click', clickHandler); }); // Scroll-to-top functionality const scrollToTopBtn = document.getElementById('scrollToTopBtn'); if (scrollToTopBtn) { signInHandlers.scrollToTopClick = handleScrollToTopClick; scrollToTopBtn.addEventListener('click', signInHandlers.scrollToTopClick); } // Scroll event listener for showing/hiding scroll-to-top button signInHandlers.scroll = handleScroll; window.addEventListener('scroll', signInHandlers.scroll); // Form handlers const vendorForm = document.querySelector('#vendorModal form'); const adminForm = document.querySelector('#adminModal form'); const travelerForm = document.querySelector('#travelerModal form'); if (vendorForm) { signInHandlers.vendorFormSubmit = handleVendorFormSubmit; vendorForm.addEventListener('submit', signInHandlers.vendorFormSubmit); } if (adminForm) { signInHandlers.adminFormSubmit = handleAdminFormSubmit; adminForm.addEventListener('submit', signInHandlers.adminFormSubmit); } if (travelerForm) { signInHandlers.travelerFormSubmit = handleTravelerFormSubmit; travelerForm.addEventListener('submit', signInHandlers.travelerFormSubmit); } // Outside click handler signInHandlers.outsideClick = handleOutsideClick; document.addEventListener('click', signInHandlers.outsideClick); // Make functions globally available window.openModal = openModal; window.closeModal = closeModal; window.closeAdminPanel = closeAdminPanel; window.showAdminTab = showAdminTab; window.togglePageNav = togglePageNav; } function teardown() { // Remove all event listeners Object.keys(signInHandlers).forEach(key => { const handler = signInHandlers[key]; if (key === 'dropdownClick') { const dropdown = document.getElementById('signInDropdown'); if (dropdown) dropdown.removeEventListener('click', handler); } else if (key === 'vendorClick') { const btn = document.getElementById('vendorSignIn'); if (btn) btn.removeEventListener('click', handler); } else if (key === 'adminClick') { const btn = document.getElementById('adminSignIn'); if (btn) btn.removeEventListener('click', handler); } else if (key === 'travelerClick') { const btn = document.getElementById('travelerSignIn'); if (btn) btn.removeEventListener('click', handler); } else if (key === 'mobileVendorClick') { const btn = document.getElementById('mobileVendorSignIn'); if (btn) btn.removeEventListener('click', handler); } else if (key === 'mobileAdminClick') { const btn = document.getElementById('mobileAdminSignIn'); if (btn) btn.removeEventListener('click', handler); } else if (key === 'mobileTravelerClick') { const btn = document.getElementById('mobileTravelerSignIn'); if (btn) btn.removeEventListener('click', handler); } else if (key === 'pageNavClicks') { handler.forEach(({ element, handler: clickHandler }) => { element.removeEventListener('click', clickHandler); }); } else if (key === 'scrollToTopClick') { const btn = document.getElementById('scrollToTopBtn'); if (btn) btn.removeEventListener('click', handler); } else if (key === 'scroll') { window.removeEventListener('scroll', handler); } else if (key === 'vendorFormSubmit') { const form = document.querySelector('#vendorModal form'); if (form) form.removeEventListener('submit', handler); } else if (key === 'adminFormSubmit') { const form = document.querySelector('#adminModal form'); if (form) form.removeEventListener('submit', handler); } else if (key === 'travelerFormSubmit') { const form = document.querySelector('#travelerModal form'); if (form) form.removeEventListener('submit', handler); } else if (key === 'outsideClick') { document.removeEventListener('click', handler); } }); signInHandlers = {}; // Remove admin panel if (adminPanel) { adminPanel.remove(); adminPanel = null; } isAdminLoggedIn = false; // Clean up global functions delete window.openModal; delete window.closeModal; delete window.closeAdminPanel; delete window.showAdminTab; delete window.togglePageNav; } // Export functions export { init, teardown };