Samurai Yakiniku Loyalty<\/title>\n <meta name=\"theme-color\" content=\"#cd0404\">\n <meta name=\"apple-mobile-web-app-capable\" content=\"yes\">\n <meta name=\"apple-mobile-web-app-status-bar-style\" content=\"default\">\n <meta name=\"apple-mobile-web-app-title\" content=\"Samurai Loyalty\">\n <meta name=\"msapplication-TileColor\" content=\"#cd0404\">\n <meta name=\"msapplication-navbutton-color\" content=\"#cd0404\">\n <link rel=\"manifest\" href=\"https:\/\/reserve.samuraiyakiniku.com\/wp-content\/plugins\/restaurant-loyalty-system\/pwa\/manifest.json\">\n <link rel=\"apple-touch-icon\" href=\"https:\/\/reserve.samuraiyakiniku.com\/wp-content\/plugins\/restaurant-loyalty-system\/pwa\/icon-192x192.png\">\n <link rel=\"icon\" type=\"image\/png\" sizes=\"192x192\" href=\"https:\/\/reserve.samuraiyakiniku.com\/wp-content\/plugins\/restaurant-loyalty-system\/pwa\/icon-192x192.png\">\n <link rel=\"icon\" type=\"image\/png\" sizes=\"512x512\" href=\"https:\/\/reserve.samuraiyakiniku.com\/wp-content\/plugins\/restaurant-loyalty-system\/pwa\/icon-512x512.png\">\n\n \n <script src=\"https:\/\/cdn.jsdelivr.net\/npm\/qrcode@1.5.3\/build\/qrcode.min.js\"\n onerror=\"console.error('Failed to load QR library from jsdelivr'); loadQRFallback();\"><\/script>\n <script>\n function loadQRFallback() {\n console.log('Loading QR library fallback...');\n const script = document.createElement('script');\n script.src = 'https:\/\/unpkg.com\/qrcode@1.5.3\/build\/qrcode.min.js';\n script.onerror = function() {\n console.error('All QR library sources failed');\n window.QRCodeFailed = true;\n };\n script.onload = function() {\n console.log('QR library loaded from fallback');\n };\n document.head.appendChild(script);\n }\n\n \/\/ Check if library loaded after a delay\n setTimeout(function() {\n if (typeof QRCode === 'undefined') {\n if (!window.QRCodeFailed) {\n console.log('QR library not detected, trying fallback...');\n loadQRFallback();\n }\n }\n }, 2000);\n\n \/\/ Test if we get this far\n console.log('QR library section completed, continuing with main script...');\n <\/script>\n\n <style>\n \/* Apple Design System Variables *\/\n :root {\n \/* Spacing Scale *\/\n --spacing-xs: 4px; \/* 0.25rem *\/\n --spacing-sm: 8px; \/* 0.5rem *\/\n --spacing-md: 16px; \/* 1rem *\/\n --spacing-lg: 24px; \/* 1.5rem *\/\n --spacing-xl: 32px; \/* 2rem *\/\n --spacing-2xl: 48px; \/* 3rem *\/\n --spacing-3xl: 64px; \/* 4rem *\/\n\n \/* Typography Scale *\/\n --font-size-caption: 12px;\n --font-size-footnote: 13px;\n --font-size-subhead: 14px;\n --font-size-callout: 16px;\n --font-size-body: 17px;\n --font-size-headline: 20px;\n --font-size-title3: 24px;\n --font-size-title2: 28px;\n --font-size-title1: 34px;\n\n \/* Font Weights *\/\n --font-weight-regular: 400;\n --font-weight-medium: 500;\n --font-weight-semibold: 600;\n --font-weight-bold: 700;\n\n \/* Line Heights *\/\n --line-height-tight: 1.2;\n --line-height-normal: 1.4;\n --line-height-relaxed: 1.5;\n\n \/* Border Radius *\/\n --radius-sm: 8px;\n --radius-md: 12px;\n --radius-lg: 16px;\n --radius-xl: 20px;\n\n \/* Minimalist Samurai Colors *\/\n --samurai-red: #cd0404;\n --samurai-black: #000000;\n --samurai-white: #ffffff;\n --samurai-gray-light: #f5f5f5;\n --samurai-gray-medium: #999999;\n --samurai-gray-dark: #333333;\n\n \/* Updated Color Variables *\/\n --color-label-primary: #000000;\n --color-label-secondary: #666666;\n --color-label-tertiary: #999999;\n --color-fill-primary: #ffffff;\n --color-fill-secondary: #f5f5f5;\n --color-fill-tertiary: #e5e5e5;\n --color-separator: rgba(0, 0, 0, 0.1);\n --color-system-red: #cd0404;\n --color-system-background: #ffffff;\n }\n\n * {\n margin: 0;\n padding: 0;\n box-sizing: border-box;\n }\n\n html {\n height: 100%;\n background: var(--samurai-white);\n }\n\n body {\n font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'Helvetica Neue', sans-serif;\n background: var(--samurai-white);\n min-height: 100vh;\n height: 100%;\n color: var(--samurai-black);\n overflow-x: hidden;\n position: relative;\n }\n\n .app-container {\n max-width: 414px;\n margin: 0 auto;\n background: var(--samurai-white);\n min-height: 100vh;\n position: relative;\n }\n \n .status-bar {\n height: 44px;\n background: var(--samurai-black);\n color: var(--samurai-white);\n display: flex;\n justify-content: space-between;\n align-items: center;\n padding: 0 var(--spacing-lg);\n font-size: 14px;\n font-weight: 600;\n position: relative;\n z-index: 100;\n }\n\n .status-left {\n display: flex;\n align-items: center;\n }\n\n .status-right {\n display: flex;\n align-items: center;\n gap: 5px;\n }\n\n .app-header {\n background: var(--samurai-black);\n color: var(--samurai-white);\n padding: var(--spacing-lg) var(--spacing-lg) 0 var(--spacing-lg);\n position: relative;\n }\n\n .app-header h1 {\n font-size: 34px;\n font-weight: 700;\n margin-bottom: var(--spacing-sm);\n letter-spacing: -0.5px;\n }\n\n .app-header p {\n opacity: 0.6;\n font-size: 16px;\n font-weight: 400;\n }\n \n .login-section {\n padding: var(--spacing-2xl) var(--spacing-lg);\n text-align: center;\n }\n\n\n\n .login-logo img {\n width: auto;\n height: 120px;\n \n }\n\n .login-logo img:hover {\n transform: scale(1.05);\n \n }\n\n .login-section h2 {\n margin-bottom: var(--spacing-sm);\n color: #1d1d1f;\n font-size: 28px;\n font-weight: 700;\n letter-spacing: -0.3px;\n }\n\n .login-section p {\n color: #86868b;\n font-size: 16px;\n margin-bottom: var(--spacing-2xl);\n line-height: 1.4;\n }\n\n .phone-input {\n width: 100%;\n padding: var(--spacing-md) var(--spacing-lg);\n border: 1px solid rgba(0, 0, 0, 0.1);\n border-radius: 12px;\n font-size: 17px;\n margin-bottom: var(--spacing-lg);\n text-align: center;\n background: #ffffff;\n color: #1d1d1f;\n transition: all 0.3s ease;\n box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);\n }\n\n .phone-input::placeholder {\n color: #86868b;\n }\n\n .phone-input:focus {\n outline: none;\n border-color: #007AFF;\n background: #ffffff;\n transform: scale(1.02);\n box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);\n }\n\n .login-btn {\n width: 100%;\n padding: var(--spacing-md);\n background: var(--samurai-red);\n color: var(--samurai-white);\n border: none;\n border-radius: 12px;\n font-size: 17px;\n font-weight: 600;\n cursor: pointer;\n transition: all 0.3s ease;\n\n }\n\n .login-btn:hover {\n background: var(--samurai-black);\n transform: scale(1.02);\n }\n\n .login-btn:disabled {\n background: rgba(255, 255, 255, 0.2);\n cursor: not-allowed;\n transform: none;\n color: #86868b;\n border: 1px solid #86868b;\n }\n\n .signup-link {\n text-align: center;\n margin-top: var(--spacing-lg);\n padding-top: var(--spacing-lg);\n border-top: 1px solid rgba(0, 0, 0, 0.1);\n }\n\n .signup-link p {\n margin: 0;\n font-size: 16px;\n color: #86868b;\n }\n\n .signup-link a {\n color: #DC143C;\n text-decoration: none;\n font-weight: 600;\n transition: all 0.3s ease;\n }\n\n .signup-link a:hover {\n color: #FF1744;\n text-decoration: underline;\n }\n\n .login-step {\n transition: all 0.3s ease;\n }\n\n .sent-number {\n color: #DC143C;\n font-weight: 600;\n font-size: 14px;\n margin-bottom: 20px;\n }\n\n .verification-input-container {\n margin-bottom: var(--spacing-lg);\n }\n\n .verification-input {\n width: 100%;\n padding: var(--spacing-lg);\n border: 1px solid rgba(0, 0, 0, 0.1);\n border-radius: 12px;\n font-size: 24px;\n text-align: center;\n background: #ffffff;\n color: #1d1d1f;\n transition: all 0.3s ease;\n letter-spacing: 8px;\n font-weight: 600;\n box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);\n }\n\n .verification-input::placeholder {\n color: #86868b;\n letter-spacing: 4px;\n }\n\n .verification-input:focus {\n outline: none;\n border-color: #DC143C;\n background: #ffffff;\n transform: scale(1.02);\n box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);\n }\n\n .resend-btn {\n width: 100%;\n padding: 12px;\n background: transparent;\n color: #86868b;\n border: 1px solid rgba(0, 0, 0, 0.1);\n border-radius: 12px;\n font-size: 15px;\n font-weight: 500;\n cursor: pointer;\n transition: all 0.3s ease;\n margin-top: 12px;\n }\n\n .resend-btn:hover {\n background: #f8f8f8;\n color: #1d1d1f;\n }\n\n .resend-btn:disabled {\n opacity: 0.5;\n cursor: not-allowed;\n }\n\n .back-link {\n text-align: center;\n margin-top: 20px;\n }\n\n .back-link a {\n color: #86868b;\n text-decoration: none;\n font-size: 14px;\n transition: color 0.3s ease;\n }\n\n .back-link a:hover {\n color: #DC143C;\n }\n\n .countdown {\n color: #86868b;\n font-size: 13px;\n text-align: center;\n margin-top: 8px;\n }\n \n .customer-dashboard {\n display: none;\n padding: 20px 20px 100px 20px;\n opacity: 0;\n transform: translateY(20px);\n transition: all 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);\n }\n\n .loyalty-card {\n background: #000;\n border: 1px solid rgba(255, 255, 255, 0.1);\n border-radius: 20px;\n padding: var(--spacing-lg);\n margin-bottom: var(--spacing-lg);\n position: relative;\n overflow: hidden;\n backdrop-filter: blur(20px);\n -webkit-backdrop-filter: blur(20px);\n box-shadow: 0 10px 20px rgba(205, 4, 4, 0), 0 6px 6px rgba(0, 0, 0, 0.15);\n transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);\n color: #fff;\n }\n\n .loyalty-card:hover {\n transform: translateY(-4px) scale(1.02);\n box-shadow: 0 14px 28px rgba(205, 4, 4, 0.4), 0 10px 10px rgba(0, 0, 0, 0.2);\n }\n\n .loyalty-card::before {\n content: '';\n position: absolute;\n top: -50%;\n right: -50%;\n width: 100%;\n height: 100%;\n background: radial-gradient(circle, rgba(255,255,255,0.1) 0%, transparent 70%);\n pointer-events: none;\n }\n\n .card-header {\n display: flex;\n justify-content: space-between;\n align-items: flex-start;\n margin-bottom: 0px;\n }\n\n .card-logo {\n font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Display', system-ui, sans-serif;\n font-size: 24px;\n font-weight: 700;\n color: #ffffff;\n letter-spacing: -0.02em;\n }\n\n .card-logo img {\n width: 50px;\n height: 50px;\n \n \n transition: all 0.3s ease;\n \n padding: 0px 0px;\n \n }\n\n .card-type {\n font-size: 12px;\n color: rgba(255, 255, 255, 0.6);\n text-transform: uppercase;\n letter-spacing: 1px;\n }\n\n .points-section {\n margin-bottom: var(--spacing-lg);\n text-align: left;\n }\n\n .points-balance {\n font-size: 36px;\n font-weight: 700;\n margin-bottom: 4px;\n background: white;\n -webkit-background-clip: text;\n -webkit-text-fill-color: transparent;\n background-clip: text;\n }\n\n .points-label {\n font-size: 14px;\n color: rgba(255, 255, 255, 0.6);\n font-weight: 500;\n }\n\n .card-footer {\n display: flex;\n justify-content: space-between;\n align-items: center;\n }\n\n .customer-name {\n font-size: 16px;\n font-weight: 600;\n color: #fff;\n }\n\n .tier-badge {\n padding: var(--spacing-xs) var(--spacing-sm);\n border-radius: 8px;\n font-size: 11px;\n font-weight: 700;\n text-transform: uppercase;\n letter-spacing: 0.5px;\n }\n\n .tier-bronze {\n background: var(--samurai-gray-medium);\n color: var(--samurai-white);\n }\n .tier-silver {\n background: var(--samurai-gray-dark);\n color: var(--samurai-white);\n }\n .tier-gold {\n background: var(--samurai-red);\n color: var(--samurai-white);\n }\n .tier-platinum {\n background: var(--samurai-black);\n color: var(--samurai-white);\n }\n \n \/* Apple-style Navigation List *\/\n .navigation-section {\n margin-bottom: var(--spacing-lg);\n }\n\n .navigation-list {\n background: rgba(255, 255, 255, 0.95);\n border-radius: 16px;\n overflow: hidden;\n backdrop-filter: blur(20px);\n -webkit-backdrop-filter: blur(20px);\n box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);\n }\n\n .nav-item {\n display: flex;\n align-items: center;\n padding: var(--spacing-md) var(--spacing-lg);\n border-bottom: 0.5px solid rgba(60, 60, 67, 0.12);\n cursor: pointer;\n transition: background-color 0.2s ease;\n min-height: 44px; \/* Apple's minimum touch target *\/\n }\n\n .nav-item:last-child {\n border-bottom: none;\n }\n\n .nav-item:hover {\n background: rgba(0, 0, 0, 0.04);\n }\n\n .nav-item:active {\n background: rgba(0, 0, 0, 0.08);\n transition: background-color 0.1s ease;\n }\n\n .nav-icon {\n width: 28px;\n height: 28px;\n border-radius: 6px;\n display: flex;\n align-items: center;\n justify-content: center;\n margin-right: var(--spacing-md);\n font-size: 16px;\n color: white;\n }\n\n .nav-icon.bookings { background: var(--samurai-red); }\n .nav-icon.rewards { background: var(--samurai-black); }\n .nav-icon.history { background: var(--samurai-gray-dark); }\n .nav-icon.locations { background: var(--samurai-gray-medium); }\n .nav-icon.redeemed { background: var(--samurai-red); }\n\n .nav-content {\n flex: 1;\n display: flex;\n flex-direction: column;\n }\n\n .nav-title {\n font-size: 17px;\n font-weight: 400;\n color: #1d1d1f;\n line-height: 1.2;\n }\n\n .nav-subtitle {\n font-size: 13px;\n color: #86868b;\n margin-top: 2px;\n }\n\n .nav-chevron {\n color: #c7c7cc;\n font-size: 14px;\n font-weight: 600;\n }\n\n \/* Profile Card - Separate from navigation list *\/\n .profile-card {\n background: rgba(255, 255, 255, 0.95);\n border-radius: 16px;\n padding: var(--spacing-lg);\n display: flex;\n align-items: center;\n cursor: pointer;\n transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);\n box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);\n backdrop-filter: blur(20px);\n -webkit-backdrop-filter: blur(20px);\n margin-top: var(--spacing-lg);\n }\n\n .profile-card:hover {\n background: rgba(255, 255, 255, 1);\n transform: translateY(-2px);\n box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23);\n }\n\n .profile-card:active {\n transform: scale(0.98);\n transition: transform 0.1s ease;\n }\n\n .profile-icon {\n width: 32px;\n height: 32px;\n border-radius: 8px;\n background: var(--samurai-gray-dark);\n display: flex;\n align-items: center;\n justify-content: center;\n margin-right: var(--spacing-md);\n font-size: 16px;\n color: var(--samurai-white);\n }\n \n .loading {\n text-align: center;\n padding: var(--spacing-2xl) var(--spacing-lg);\n }\n\n .spinner {\n border: 2px solid rgba(0, 0, 0, 0.1);\n border-top: 2px solid #DC143C;\n border-radius: 50%;\n width: 32px;\n height: 32px;\n animation: spin 1s linear infinite;\n margin: 0 auto 16px;\n }\n\n .loading p {\n color: #86868b;\n font-size: 16px;\n }\n\n @keyframes spin {\n 0% { transform: rotate(0deg); }\n 100% { transform: rotate(360deg); }\n }\n \n .error-message {\n background: rgba(255, 59, 48, 0.1);\n border: 1px solid rgba(255, 59, 48, 0.2);\n color: #FF3B30;\n padding: 16px;\n border-radius: 12px;\n margin: 16px 0;\n text-align: center;\n backdrop-filter: blur(20px);\n font-size: 15px;\n }\n\n .success-message {\n background: rgba(52, 199, 89, 0.1);\n border: 1px solid rgba(52, 199, 89, 0.2);\n color: #34C759;\n padding: 16px;\n border-radius: 12px;\n margin: 16px 0;\n text-align: center;\n backdrop-filter: blur(20px);\n font-size: 15px;\n }\n \n .home-indicator {\n position: fixed;\n bottom: 8px;\n left: 50%;\n transform: translateX(-50%);\n width: 134px;\n height: 5px;\n background: rgba(255, 255, 255, 0.3);\n border-radius: 3px;\n }\n\n @media (max-width: 414px) {\n .app-container {\n max-width: 100%;\n }\n }\n\n \/* Smooth transitions *\/\n .loyalty-card,\n .action-card,\n .login-btn,\n .phone-input {\n transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);\n }\n\n \/* Haptic feedback simulation *\/\n .action-card:active,\n .login-btn:active {\n transform: scale(0.98);\n }\n\n \/* New Sections Styles *\/\n .rewards-section,\n .activity-section,\n .redeemed-section,\n .profile-section,\n .bookings-section {\n display: none;\n padding: var(--spacing-lg) var(--spacing-lg) 100px var(--spacing-lg);\n opacity: 0;\n transform: translateY(20px);\n transition: all 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);\n }\n\n .section-header {\n margin-bottom: var(--spacing-lg);\n padding-bottom: var(--spacing-md);\n border-bottom: 1px solid rgba(0, 0, 0, 0.1);\n }\n\n .back-button {\n background: none;\n border: none;\n color: #DC143C;\n font-size: 16px;\n font-weight: 600;\n cursor: pointer;\n margin-bottom: 12px;\n padding: 8px 0;\n transition: color 0.3s ease;\n }\n\n .back-button:hover {\n color: #FF1744;\n }\n\n .section-header h2 {\n font-size: 28px;\n font-weight: 700;\n color: #1d1d1f;\n margin: 0 0 8px 0;\n }\n\n .points-summary {\n color: #86868b;\n font-size: 14px;\n }\n\n \/* Rewards Grid *\/\n .rewards-grid {\n display: grid;\n grid-template-columns: 1fr;\n gap: 16px;\n }\n\n .reward-card {\n background: #ffffff;\n border: 1px solid rgba(0, 0, 0, 0.08);\n border-radius: 16px;\n padding: 20px;\n transition: all 0.3s ease;\n position: relative;\n overflow: hidden;\n box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);\n }\n\n .reward-card:hover {\n background: #f8f8f8;\n transform: translateY(-2px);\n box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);\n }\n\n .reward-card.insufficient {\n opacity: 0.5;\n border-color: rgba(0, 0, 0, 0.05);\n }\n\n .reward-card.branch-restricted {\n border-color: #ffc107;\n background: #fff9e6;\n }\n\n .branch-indicator {\n font-size: 12px;\n margin-top: 4px;\n padding: 4px 8px;\n border-radius: 6px;\n font-weight: 500;\n }\n\n .branch-indicator.all-branches {\n background: #e8f5e8;\n color: #2e7d32;\n }\n\n .branch-indicator.current-branch {\n background: #e8f5e8;\n color: #2e7d32;\n }\n\n .branch-indicator.other-branch {\n background: #fff3cd;\n color: #856404;\n }\n\n \/* Branch Selector Styles *\/\n .branch-selector-container {\n background: rgba(255, 255, 255, 0.1);\n border: 1px solid rgba(255, 255, 255, 0.2);\n border-radius: 12px;\n padding: 16px;\n margin: 16px 0;\n backdrop-filter: blur(10px);\n }\n\n .branch-selector-header {\n display: flex;\n justify-content: space-between;\n align-items: center;\n margin-bottom: 12px;\n }\n\n .branch-selector-label {\n font-weight: 600;\n color: #1d1d1f;\n font-size: 14px;\n }\n\n .branch-selector-info {\n font-size: 12px;\n color: #666;\n }\n\n .branch-selector {\n width: 100%;\n padding: 12px 16px;\n border: 1px solid #ddd;\n border-radius: 8px;\n background: white;\n color: #1d1d1f;\n font-size: 16px;\n font-weight: 500;\n appearance: none;\n background-image: url(\"data:image\/svg+xml;charset=UTF-8,%3csvg xmlns='http:\/\/www.w3.org\/2000\/svg' viewBox='0 0 24 24' fill='none' stroke='%23666' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6,9 12,15 18,9'%3e%3c\/polyline%3e%3c\/svg%3e\");\n background-repeat: no-repeat;\n background-position: right 12px center;\n background-size: 16px;\n padding-right: 40px;\n box-shadow: 0 2px 4px rgba(0,0,0,0.1);\n }\n\n .branch-selector:focus {\n outline: none;\n border-color: #007aff;\n box-shadow: 0 0 0 3px rgba(0, 122, 255, 0.3);\n }\n\n .branch-selector option {\n background: white;\n color: #1d1d1f;\n padding: 8px;\n }\n\n \/* Branch selector status indicators *\/\n .branch-selector-info .status-connected {\n color: #4caf50;\n }\n\n .branch-selector-info .status-fallback {\n color: #ff9800;\n }\n\n .branch-selector-info .status-error {\n color: #f44336;\n }\n\n .reward-header {\n display: flex;\n justify-content: space-between;\n align-items: flex-start;\n margin-bottom: 12px;\n }\n\n .reward-title {\n font-size: 18px;\n font-weight: 600;\n color: #1d1d1f;\n margin-bottom: 4px;\n }\n\n .reward-type {\n font-size: 12px;\n color: #86868b;\n text-transform: uppercase;\n letter-spacing: 0.5px;\n }\n\n .reward-points {\n background: var(--samurai-black);\n color: var(--samurai-white);\n padding: 6px 12px;\n border-radius: 20px;\n font-size: 14px;\n font-weight: 600;\n white-space: nowrap;\n }\n\n .reward-description {\n color: var(--color-label-secondary);\n font-size: 14px;\n line-height: 1.4;\n margin-bottom: 16px;\n }\n\n .reward-footer {\n display: flex;\n justify-content: space-between;\n align-items: center;\n }\n\n .reward-tier {\n font-size: 12px;\n color: var(--color-label-secondary);\n }\n\n .redeem-button {\n background: var(--samurai-red);\n color: var(--samurai-white);\n border: none;\n padding: 10px 20px;\n border-radius: 20px;\n font-size: 14px;\n font-weight: 600;\n cursor: pointer;\n transition: all 0.3s ease;\n }\n\n .redeem-button:hover {\n background: var(--samurai-black);\n transform: scale(1.05);\n }\n\n .redeem-button:disabled {\n background: rgba(255, 255, 255, 0.1);\n color: rgba(255, 255, 255, 0.4);\n cursor: not-allowed;\n transform: none;\n }\n\n \/* Activity List *\/\n .activity-list {\n display: flex;\n flex-direction: column;\n gap: 12px;\n }\n\n .activity-item {\n background: #ffffff;\n border: 1px solid rgba(0, 0, 0, 0.08);\n border-radius: 12px;\n padding: 16px;\n box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);\n }\n\n .activity-header {\n display: flex;\n justify-content: space-between;\n align-items: flex-start;\n margin-bottom: 8px;\n }\n\n .activity-title {\n font-size: 16px;\n font-weight: 600;\n color: #1d1d1f;\n }\n\n .activity-points {\n font-size: 16px;\n font-weight: 600;\n }\n\n .activity-points.positive {\n color: #34C759;\n }\n\n .activity-points.negative {\n color: #FF3B30;\n }\n\n .activity-date {\n font-size: 13px;\n color: #86868b;\n }\n\n .activity-description {\n font-size: 14px;\n color: #86868b;\n margin-top: 4px;\n }\n\n .activity-left {\n display: flex;\n align-items: center;\n gap: 12px;\n flex: 1;\n }\n\n .activity-icon {\n font-size: 20px;\n width: 36px;\n height: 36px;\n display: flex;\n align-items: center;\n justify-content: center;\n background: rgba(220, 20, 60, 0.1);\n border-radius: 8px;\n flex-shrink: 0;\n }\n\n .activity-content {\n flex: 1;\n }\n\n .activity-sales {\n color: #8e44ad;\n font-size: 13px;\n font-weight: 500;\n margin-top: 4px;\n }\n\n \/* Bookings Styles *\/\n .bookings-filters {\n text-align: center;\n margin-bottom: var(--spacing-lg);\n }\n\n .filter-btn {\n padding: var(--spacing-sm) var(--spacing-md);\n border: 1px solid #d2d2d7;\n background: white;\n color: #1d1d1f;\n border-radius: 12px;\n cursor: pointer;\n font-size: 16px;\n font-weight: 500;\n transition: all 0.3s ease;\n min-height: 44px; \/* Apple touch target *\/\n display: inline-flex;\n align-items: center;\n justify-content: center;\n }\n\n .filter-btn:hover {\n background: #f5f5f7;\n transform: scale(1.02);\n }\n\n .filter-btn.active {\n background: #007aff;\n color: white;\n border-color: #007aff;\n box-shadow: 0 2px 8px rgba(0, 122, 255, 0.3);\n }\n\n .bookings-list {\n display: flex;\n flex-direction: column;\n gap: var(--spacing-lg);\n }\n\n \/* Airbnb-style Empty State *\/\n .bookings-empty-state {\n text-align: center;\n padding: 60px 24px;\n background: var(--samurai-white);\n border-radius: 16px;\n border: 1px dashed var(--color-separator);\n }\n\n .bookings-empty-state svg {\n width: 64px;\n height: 64px;\n stroke: #b0b0b0;\n margin-bottom: 16px;\n }\n\n .bookings-empty-state h3 {\n font-size: 20px;\n font-weight: 600;\n color: #222222;\n margin: 0 0 8px 0;\n }\n\n .bookings-empty-state p {\n font-size: 15px;\n color: #717171;\n margin: 0;\n max-width: 280px;\n margin: 0 auto;\n line-height: 1.5;\n }\n\n \/* Airbnb-style Booking Card *\/\n .booking-item {\n background: var(--samurai-white);\n border-radius: 12px;\n overflow: hidden;\n box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08), 0 4px 12px rgba(0, 0, 0, 0.05);\n transition: box-shadow 0.2s ease, transform 0.2s ease;\n border: 1px solid rgba(0, 0, 0, 0.08);\n }\n\n .booking-item:hover {\n box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1), 0 8px 24px rgba(0, 0, 0, 0.1);\n transform: translateY(-2px);\n }\n\n .booking-item:active {\n transform: translateY(0);\n }\n\n .booking-item.past {\n opacity: 0.75;\n }\n\n .booking-item.past .booking-card-header {\n background: black;\n }\n\n .booking-item.campaign-booking {\n border: 2px solid var(--samurai-red);\n }\n\n .booking-item.campaign-booking .booking-card-header {\n background: linear-gradient(135deg, var(--samurai-red) 0%, #a00303 100%);\n }\n\n \/* Card Header with gradient background *\/\n .booking-card-header {\n background: linear-gradient(135deg, #1d1d1f 0%, #3a3a3c 100%);\n padding: 20px;\n position: relative;\n }\n\n .booking-card-header-content {\n display: flex;\n justify-content: space-between;\n align-items: flex-start;\n }\n\n .booking-date-block {\n display: flex;\n align-items: center;\n gap: 16px;\n }\n\n .booking-calendar-icon {\n width: 52px;\n height: 52px;\n background: rgba(255, 255, 255, 0.15);\n border-radius: 12px;\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n backdrop-filter: blur(10px);\n }\n\n .booking-calendar-month {\n font-size: 10px;\n font-weight: 700;\n color: rgba(255, 255, 255, 0.9);\n text-transform: uppercase;\n letter-spacing: 0.5px;\n }\n\n .booking-calendar-day {\n font-size: 22px;\n font-weight: 700;\n color: #ffffff;\n line-height: 1;\n margin-top: 2px;\n }\n\n .booking-datetime-text {\n display: flex;\n flex-direction: column;\n gap: 4px;\n }\n\n .booking-day-name {\n font-size: 14px;\n font-weight: 500;\n color: rgba(255, 255, 255, 0.7);\n }\n\n .booking-time-display {\n font-size: 24px;\n font-weight: 700;\n color: #ffffff;\n letter-spacing: -0.5px;\n }\n\n .booking-status-badge {\n padding: 6px 12px;\n border-radius: 20px;\n font-size: 11px;\n font-weight: 700;\n text-transform: uppercase;\n letter-spacing: 0.5px;\n }\n\n .booking-status-badge.confirmed {\n background: rgba(52, 199, 89, 0.2);\n color: #34c759;\n }\n\n .booking-status-badge.pending {\n background: rgba(255, 149, 0, 0.2);\n color: #ff9500;\n }\n\n .booking-status-badge.cancelled {\n background: rgba(255, 59, 48, 0.2);\n color: #ff3b30;\n }\n\n .booking-status-badge.completed {\n background: rgba(142, 142, 147, 0.2);\n color: #8e8e93;\n }\n\n \/* Card Body *\/\n .booking-card-body {\n padding: 20px;\n }\n\n .booking-venue-name {\n font-size: 18px;\n font-weight: 600;\n color: #222222;\n margin: 0 0 12px 0;\n display: flex;\n align-items: center;\n gap: 8px;\n }\n\n .booking-venue-name svg {\n width: 18px;\n height: 18px;\n stroke: #717171;\n flex-shrink: 0;\n }\n\n .booking-meta-row {\n display: flex;\n align-items: center;\n gap: 20px;\n margin-bottom: 16px;\n flex-wrap: wrap;\n }\n\n .booking-meta-item {\n display: flex;\n align-items: center;\n gap: 6px;\n font-size: 14px;\n color: #717171;\n }\n\n .booking-meta-item svg {\n width: 16px;\n height: 16px;\n stroke: #717171;\n }\n\n .booking-meta-item strong {\n color: #222222;\n font-weight: 600;\n }\n\n \/* Campaign Badge *\/\n .campaign-badge {\n display: inline-flex;\n align-items: center;\n gap: 6px;\n background: linear-gradient(135deg, var(--samurai-red) 0%, #a00303 100%);\n color: var(--samurai-white);\n padding: 6px 12px;\n border-radius: 8px;\n font-size: 12px;\n font-weight: 600;\n margin-bottom: 12px;\n box-shadow: 0 2px 8px rgba(205, 4, 4, 0.25);\n }\n\n .campaign-badge svg {\n width: 14px;\n height: 14px;\n stroke: currentColor;\n }\n\n \/* Special Requests *\/\n .booking-special-requests {\n background: #f7f7f7;\n padding: 12px 16px;\n border-radius: 10px;\n font-size: 14px;\n color: #484848;\n margin-top: 12px;\n line-height: 1.5;\n border-left: 3px solid #717171;\n }\n\n .booking-special-requests-label {\n font-size: 12px;\n font-weight: 600;\n color: #717171;\n text-transform: uppercase;\n letter-spacing: 0.5px;\n margin-bottom: 4px;\n }\n\n \/* Card Footer *\/\n .booking-card-footer {\n padding: 16px 20px;\n border-top: 1px solid #f0f0f0;\n display: flex;\n justify-content: space-between;\n align-items: center;\n gap: 12px;\n flex-wrap: wrap;\n }\n\n .booking-time-info {\n font-size: 13px;\n color: #717171;\n display: flex;\n align-items: center;\n gap: 6px;\n }\n\n .booking-time-info svg {\n width: 14px;\n height: 14px;\n }\n\n .booking-time-info.upcoming {\n color: #34c759;\n }\n\n .booking-time-info.past {\n color: #8e8e93;\n }\n\n \/* Action Buttons *\/\n .booking-actions {\n display: flex;\n gap: 8px;\n }\n\n .modify-booking-btn {\n background: #222222;\n color: #ffffff;\n border: none;\n padding: 10px 20px;\n border-radius: 8px;\n font-size: 14px;\n font-weight: 600;\n cursor: pointer;\n transition: all 0.2s ease;\n display: inline-flex;\n align-items: center;\n gap: 6px;\n }\n\n .modify-booking-btn:hover {\n background: #000000;\n transform: scale(1.02);\n }\n\n .modify-booking-btn:active {\n transform: scale(0.98);\n }\n\n .modify-booking-btn svg {\n width: 16px;\n height: 16px;\n }\n\n .modification-notice {\n font-size: 13px;\n color: #8e8e93;\n font-style: italic;\n display: flex;\n align-items: center;\n gap: 6px;\n }\n\n .modification-notice svg {\n width: 14px;\n height: 14px;\n }\n\n @keyframes campaignPulse {\n 0%, 100% { transform: scale(1); }\n 50% { transform: scale(1.02); }\n }\n\n .campaign-badge:hover {\n transform: scale(1.05);\n box-shadow: 0 4px 12px rgba(255, 149, 0, 0.4);\n }\n\n \/* Table Layout Styles - Matching Public Booking Form *\/\n .rbs-restaurant-layout {\n display: grid;\n grid-template-columns: 1fr auto 1fr;\n gap: 0px;\n padding: 0px;\n background: #ffffff;\n border-radius: 8px;\n border: 1px solid #e5e5e7;\n min-height: 300px;\n }\n\n .rbs-table-row {\n display: flex;\n flex-wrap: wrap;\n gap: 12px;\n justify-content: center;\n align-items: flex-start;\n padding: 10px;\n min-height: 80px;\n }\n\n .rbs-center-aisle {\n width: 20px;\n background: white;\n border-radius: 4px;\n position: relative;\n }\n\n .rbs-center-aisle::before {\n content: '';\n position: absolute;\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%);\n width: 2px;\n height: 60%;\n background: #dee2e6;\n border-radius: 1px;\n }\n\n .rbs-table {\n width: 40px;\n height: 40px;\n border-radius: 12px;\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n cursor: pointer;\n transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);\n border: 3px solid #dee2e6;\n background: #ffffff;\n font-size: 12px;\n font-weight: 600;\n position: relative;\n box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);\n }\n\n .rbs-table.available {\n border-color: #28a745;\n background: linear-gradient(135deg, #f8fff9 0%, #e8f5e8 100%);\n color: #155724;\n }\n\n .rbs-table.available:hover {\n transform: translateY(-3px) scale(1.05);\n box-shadow: 0 8px 25px rgba(40, 167, 69, 0.3);\n border-color: #20c997;\n }\n\n .rbs-table.unavailable {\n border-color: #dc3545;\n background: linear-gradient(135deg, #fff5f5 0%, #f8d7da 100%);\n color: #721c24;\n cursor: not-allowed;\n opacity: 0.7;\n }\n\n .rbs-table.selected {\n border-color: #007bff;\n background: linear-gradient(135deg, #007bff 0%, #0056b3 100%);\n color: white;\n transform: translateY(-3px) scale(1.08);\n box-shadow: 0 8px 25px rgba(0, 123, 255, 0.4);\n }\n\n .rbs-table-number {\n font-size: 16px;\n font-weight: bold;\n line-height: 1;\n margin-bottom: 2px;\n }\n\n .rbs-table-capacity {\n font-size: 10px;\n opacity: 0.8;\n line-height: 1;\n font-weight: 500;\n }\n\n .rbs-no-tables {\n text-align: center;\n padding: 40px 20px;\n color: #86868b;\n }\n\n .rbs-loading {\n text-align: center;\n padding: 40px 20px;\n color: #86868b;\n }\n\n .rbs-entrance {\n background: #e3f2fd;\n border: 2px dashed #2196f3;\n border-radius: 4px;\n padding: 8px 16px;\n text-align: center;\n font-size: 12px;\n color: #1976d2;\n margin: 8px 0;\n }\n\n \/* Create Booking Button *\/\n .create-booking-btn {\n background: var(--samurai-red);\n color: var(--samurai-white);\n border: none;\n padding: var(--spacing-sm) var(--spacing-lg);\n border-radius: 12px;\n font-size: 17px;\n font-weight: 600;\n cursor: pointer;\n box-shadow: 0 2px 8px rgba(205, 4, 4, 0.2);\n transition: all 0.3s ease;\n min-height: 44px;\n display: inline-flex;\n align-items: center;\n justify-content: center;\n margin-bottom: var(--spacing-lg);\n }\n\n .create-booking-btn:hover {\n background: var(--samurai-black);\n transform: translateY(-2px);\n box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);\n }\n\n .create-booking-btn:active {\n transform: translateY(0) scale(0.98);\n transition: transform 0.1s ease;\n }\n\n .modify-booking-btn {\n background: var(--samurai-gray-dark);\n color: var(--samurai-white);\n border: none;\n padding: var(--spacing-sm) var(--spacing-lg);\n border-radius: 8px;\n font-size: 15px;\n font-weight: 500;\n cursor: pointer;\n transition: all 0.3s ease;\n min-height: 44px;\n display: inline-flex;\n align-items: center;\n justify-content: center;\n }\n\n .modify-booking-btn:hover {\n background: var(--samurai-black);\n transform: translateY(-1px);\n }\n\n .modify-booking-btn:disabled {\n background: #e5e5e7;\n color: #86868b;\n cursor: not-allowed;\n transform: none;\n }\n\n .modification-notice {\n font-size: 12px;\n color: #ff9500;\n font-style: italic;\n }\n\n \/* Availability Section Styles *\/\n .availability-section {\n margin-top: 20px;\n border-top: 1px solid #e5e5e7;\n padding-top: 16px;\n }\n\n .availability-display {\n background: #f8f9fa;\n padding: 16px;\n border-radius: 8px;\n border: 1px solid #e5e5e7;\n transition: all 0.3s ease;\n }\n\n .availability-indicator {\n width: 12px;\n height: 12px;\n border-radius: 50%;\n flex-shrink: 0;\n }\n\n .availability-indicator.available {\n background: #34c759;\n }\n\n .availability-indicator.unavailable {\n background: #ff3b30;\n }\n\n .availability-indicator.loading {\n background: #007aff;\n animation: pulse 1.5s infinite;\n }\n\n @keyframes pulse {\n 0% { opacity: 1; transform: scale(1); }\n 50% { opacity: 0.7; transform: scale(1.1); }\n 100% { opacity: 1; transform: scale(1); }\n }\n\n .table-recommendation {\n margin-top: 12px;\n padding: 12px;\n border-radius: 6px;\n border-left: 4px solid;\n }\n\n .table-recommendation.optimal {\n background: #e8f5e8;\n border-color: #34c759;\n color: #2e7d32;\n }\n\n .table-recommendation.available {\n background: #fff3cd;\n border-color: #ffc107;\n color: #856404;\n }\n\n .table-recommendation.unavailable {\n background: #f8d7da;\n border-color: #dc3545;\n color: #721c24;\n }\n\n \/* Enhanced button states *\/\n .booking-form-button {\n transition: all 0.3s ease;\n position: relative;\n overflow: hidden;\n }\n\n .booking-form-button:disabled {\n position: relative;\n }\n\n .booking-form-button:disabled::after {\n content: '';\n position: absolute;\n top: 0;\n left: 0;\n right: 0;\n bottom: 0;\n background: rgba(255, 255, 255, 0.7);\n pointer-events: none;\n }\n\n \/* Modal Styles *\/\n .modal-overlay {\n position: fixed;\n top: 0;\n left: 0;\n right: 0;\n bottom: 0;\n background: rgba(0, 0, 0, 0.8);\n backdrop-filter: blur(10px);\n z-index: 1000;\n display: flex;\n align-items: flex-start;\n justify-content: center;\n padding: var(--spacing-lg);\n overflow-y: auto;\n }\n\n .modal-dialog {\n background: #000;\n border: 1px solid rgba(255, 255, 255, 0.1);\n border-radius: 16px;\n max-width: 800px;\n width: 100%;\n max-height: none;\n margin: var(--spacing-lg) 0;\n box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);\n }\n\n \/* Special styling for booking modal *\/\n #bookingModal .modal-dialog {\n max-width: 900px;\n }\n\n .modal-header {\n padding: var(--spacing-lg) var(--spacing-lg) var(--spacing-md) var(--spacing-lg);\n border-bottom: 1px solid rgba(255, 255, 255, 0.1);\n display: flex;\n justify-content: space-between;\n align-items: center;\n }\n\n .modal-header h3 {\n margin: 0;\n color: var(--color-label-primary);\n font-size: var(--font-size-headline);\n font-weight: var(--font-weight-semibold);\n line-height: var(--line-height-tight);\n }\n\n .modal-close {\n background: none;\n border: none;\n color: var(--color-label-tertiary);\n font-size: var(--font-size-title3);\n cursor: pointer;\n padding: 0;\n width: 44px;\n height: 44px;\n display: flex;\n align-items: center;\n justify-content: center;\n border-radius: 50%;\n transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);\n }\n\n .modal-close:hover {\n background: rgba(255, 255, 255, 0.1);\n color: var(--color-label-primary);\n }\n\n .modal-body {\n padding: var(--spacing-lg);\n color: var(--color-label-secondary);\n line-height: var(--line-height-relaxed);\n max-height: 70vh;\n overflow-y: auto;\n }\n\n \/* Special styling for booking modal body *\/\n #bookingModal .modal-body {\n max-height: 80vh;\n }\n\n .modal-footer {\n padding: var(--spacing-md) var(--spacing-lg) var(--spacing-lg) var(--spacing-lg);\n border-top: 1px solid var(--color-separator);\n display: flex;\n gap: var(--spacing-md);\n justify-content: flex-end;\n }\n\n \/* Apple Design System Form Styles *\/\n .modal-body input,\n .modal-body select,\n .modal-body textarea {\n transition: border-color 0.2s ease, box-shadow 0.2s ease;\n }\n\n .modal-body input:focus,\n .modal-body select:focus,\n .modal-body textarea:focus {\n outline: none;\n border-color: blue;\n box-shadow: 0 0 0 3px rgba(0, 122, 255, 0.1);\n }\n\n .modal-body input:hover,\n .modal-body select:hover,\n .modal-body textarea:hover {\n border-color: var(--color-fill-secondary);\n }\n\n \/* Party Size Button Hover States *\/\n .modal-body button[onclick*=\"adjustCreatePartySize\"]:hover:not(:disabled) {\n background: var(--color-fill-secondary) !important;\n transform: scale(1.05);\n }\n\n .modal-body button[onclick*=\"adjustCreatePartySize\"]:active:not(:disabled) {\n transform: scale(0.95);\n }\n\n \/* Payment Method Button Hover States *\/\n .payment-method-btn:hover {\n border-color: blue !important;\n transform: translateY(-2px);\n box-shadow: 0 4px 12px rgba(0, 122, 255, 0.15);\n }\n\n .payment-method-btn:active {\n transform: translateY(0);\n box-shadow: 0 2px 6px rgba(0, 122, 255, 0.1);\n }\n\n .modal-button {\n padding: var(--spacing-sm) var(--spacing-lg);\n border: none;\n border-radius: 8px;\n font-size: 14px;\n font-weight: 600;\n cursor: pointer;\n transition: all 0.3s ease;\n }\n\n .modal-button.primary {\n background: linear-gradient(135deg, #DC143C, #B22222);\n color: #fff;\n }\n\n .modal-button.primary:hover {\n background: linear-gradient(135deg, #FF1744, #DC143C);\n transform: translateY(-1px);\n }\n\n .modal-button.secondary {\n background: rgba(255, 255, 255, 0.1);\n color: rgba(255, 255, 255, 0.8);\n border: 1px solid rgba(255, 255, 255, 0.2);\n }\n\n .modal-button.secondary:hover {\n background: rgba(255, 255, 255, 0.2);\n color: #fff;\n }\n\n \/* ========== AIRBNB-STYLE CREATE BOOKING FULL PAGE ========== *\/\n .create-booking-section {\n background: #ffffff;\n min-height: 100vh;\n padding-bottom: 120px;\n }\n\n .create-booking-section .section-header {\n background: #ffffff;\n border-bottom: 1px solid #ebebeb;\n padding-bottom: var(--spacing-md);\n margin-left: var(--spacing-lg);\n }\n\n .create-booking-section .section-header h2 {\n color: #222222;\n }\n\n .create-booking-section .points-summary {\n color: #717171;\n }\n\n .create-booking-content {\n padding: 0 var(--spacing-md);\n max-width: 600px;\n margin: 0 auto;\n }\n\n .create-booking-footer {\n position: fixed;\n bottom: 0;\n left: 0;\n right: 0;\n padding: 16px 24px;\n padding-bottom: calc(16px + env(safe-area-inset-bottom));\n background: #ffffff;\n border-top: 1px solid #ebebeb;\n display: flex;\n gap: 12px;\n z-index: 100;\n box-shadow: 0 -4px 12px rgba(0, 0, 0, 0.08);\n }\n\n \/* Airbnb Form Group *\/\n .airbnb-form-group {\n margin-bottom: 24px;\n }\n\n .airbnb-form-label {\n display: flex;\n align-items: center;\n gap: 8px;\n color: #222222;\n font-size: 14px;\n font-weight: 600;\n margin-bottom: 8px;\n }\n\n .airbnb-form-label svg {\n width: 18px;\n height: 18px;\n color: #717171;\n }\n\n .airbnb-form-hint {\n color: #717171;\n font-size: 12px;\n margin-bottom: 8px;\n }\n\n .airbnb-input {\n width: 100%;\n padding: 14px 16px;\n border: 1px solid #b0b0b0;\n border-radius: 8px;\n font-size: 16px;\n color: #222;\n background: #fff;\n transition: border-color 0.2s, box-shadow 0.2s;\n box-sizing: border-box;\n }\n\n .airbnb-input:hover {\n border-color: #222;\n }\n\n .airbnb-input:focus {\n outline: none;\n border-color: #222;\n box-shadow: 0 0 0 2px #222;\n }\n\n .airbnb-input::placeholder {\n color: #b0b0b0;\n }\n\n .airbnb-select {\n width: 100%;\n padding: 14px 16px;\n border: 1px solid #b0b0b0;\n border-radius: 8px;\n font-size: 16px;\n color: #222;\n background: #fff url(\"data:image\/svg+xml,%3Csvg xmlns='http:\/\/www.w3.org\/2000\/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23222' d='M6 8L1 3h10z'\/%3E%3C\/svg%3E\") no-repeat right 16px center;\n background-size: 12px;\n appearance: none;\n cursor: pointer;\n transition: border-color 0.2s;\n }\n\n .airbnb-select:hover {\n border-color: #222;\n }\n\n .airbnb-select:focus {\n outline: none;\n border-color: #222;\n box-shadow: 0 0 0 2px #222;\n }\n\n .airbnb-textarea {\n width: 100%;\n padding: 14px 16px;\n border: 1px solid #b0b0b0;\n border-radius: 8px;\n font-size: 16px;\n color: #222;\n background: #fff;\n resize: vertical;\n min-height: 80px;\n font-family: inherit;\n transition: border-color 0.2s;\n box-sizing: border-box;\n }\n\n .airbnb-textarea:hover {\n border-color: #222;\n }\n\n .airbnb-textarea:focus {\n outline: none;\n border-color: #222;\n box-shadow: 0 0 0 2px #222;\n }\n\n \/* Airbnb Guest Counter *\/\n .airbnb-guest-counter {\n display: flex;\n align-items: center;\n justify-content: space-between;\n padding: 16px;\n border: 1px solid #ebebeb;\n border-radius: 12px;\n background: #fff;\n }\n\n .airbnb-guest-info h4 {\n margin: 0;\n font-size: 16px;\n font-weight: 600;\n color: #222;\n }\n\n .airbnb-guest-info p {\n margin: 4px 0 0;\n font-size: 14px;\n color: #717171;\n }\n\n .airbnb-counter-controls {\n display: flex;\n align-items: center;\n gap: 16px;\n }\n\n .airbnb-counter-btn {\n width: 32px;\n height: 32px;\n border: 1px solid #b0b0b0;\n background: #fff;\n color: #717171;\n font-size: 18px;\n cursor: pointer;\n display: flex;\n align-items: center;\n justify-content: center;\n transition: all 0.2s;\n }\n\n .airbnb-counter-btn:hover:not(:disabled) {\n border-color: #222;\n color: #222;\n }\n\n .airbnb-counter-btn:disabled {\n opacity: 0.3;\n cursor: not-allowed;\n }\n\n .airbnb-counter-value {\n font-size: 16px;\n font-weight: 600;\n color: #222;\n min-width: 24px;\n text-align: center;\n }\n\n \/* Airbnb Buttons *\/\n .airbnb-btn {\n padding: 14px 24px;\n border-radius: 8px;\n font-size: 16px;\n font-weight: 600;\n cursor: pointer;\n transition: all 0.2s;\n border: none;\n }\n\n .airbnb-btn-primary {\n background: linear-gradient(to right, #e00b41, #ff385c);\n color: #fff;\n }\n\n .airbnb-btn-primary:hover:not(:disabled) {\n background: linear-gradient(to right, #d00b3c, #e31c5f);\n transform: scale(1.02);\n }\n\n .airbnb-btn-primary:disabled {\n background: #ddd;\n color: #fff;\n cursor: not-allowed;\n }\n\n .airbnb-btn-secondary {\n background: #fff;\n color: #222;\n border: 1px solid #222;\n }\n\n .airbnb-btn-secondary:hover {\n background: #f7f7f7;\n }\n\n \/* Airbnb Section Divider *\/\n .airbnb-divider {\n border: none;\n border-top: 1px solid #ebebeb;\n margin: 24px 0;\n }\n\n \/* Airbnb Table Selection *\/\n .airbnb-table-section {\n padding: 20px;\n border: 1px solid #ebebeb;\n border-radius: 12px;\n background: #f7f7f7;\n }\n\n .airbnb-table-header {\n display: flex;\n align-items: center;\n gap: 8px;\n margin-bottom: 16px;\n }\n\n .airbnb-table-header h4 {\n margin: 0;\n font-size: 16px;\n font-weight: 600;\n color: #222;\n }\n\n .airbnb-table-header svg {\n width: 20px;\n height: 20px;\n color: #ff385c;\n }\n\n .airbnb-selected-info {\n display: flex;\n justify-content: space-between;\n align-items: center;\n padding: 12px 16px;\n background: #fff;\n border-radius: 8px;\n border: 1px solid #ebebeb;\n margin-top: 12px;\n }\n\n .airbnb-selected-info span {\n font-size: 14px;\n color: #222;\n }\n\n .airbnb-selected-info strong {\n color: #ff385c;\n }\n\n \/* Campaign Banner - Light Theme *\/\n .airbnb-campaign-banner {\n background: linear-gradient(135deg, #fff5f7 0%, #fff 100%);\n border: 1px solid #ffccd5;\n border-radius: 12px;\n padding: 16px;\n margin-bottom: 24px;\n }\n\n .airbnb-campaign-banner h4 {\n margin: 0 0 4px;\n font-size: 14px;\n font-weight: 600;\n color: #e00b41;\n }\n\n .airbnb-campaign-banner p {\n margin: 0;\n font-size: 13px;\n color: #717171;\n }\n\n .airbnb-campaign-progress {\n margin-top: 12px;\n height: 4px;\n background: #ebebeb;\n border-radius: 2px;\n overflow: hidden;\n }\n\n .airbnb-campaign-progress-fill {\n height: 100%;\n background: linear-gradient(to right, #e00b41, #ff385c);\n border-radius: 2px;\n transition: width 0.3s;\n }\n\n \/* Redeemed Rewards Styles *\/\n .redeemed-list {\n display: flex;\n flex-direction: column;\n gap: 16px;\n }\n\n .redeemed-card {\n background: #ffffff;\n border: 1px solid rgba(0, 0, 0, 0.08);\n border-radius: 16px;\n padding: 20px;\n position: relative;\n overflow: hidden;\n box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);\n }\n\n .redeemed-card.expired {\n opacity: 0.6;\n border-color: rgba(0, 0, 0, 0.05);\n }\n\n .redeemed-header {\n display: flex;\n justify-content: space-between;\n align-items: flex-start;\n margin-bottom: 12px;\n }\n\n .redeemed-title {\n font-size: 18px;\n font-weight: 600;\n color: #1d1d1f;\n margin-bottom: 4px;\n }\n\n .redeemed-status {\n padding: 4px 12px;\n border-radius: 12px;\n font-size: 12px;\n font-weight: 600;\n text-transform: uppercase;\n }\n\n .redeemed-status.active {\n background: linear-gradient(135deg, #34C759, #30D158);\n color: #fff;\n }\n\n .redeemed-status.used {\n background: linear-gradient(135deg, #007AFF, #5856D6);\n color: #fff;\n }\n\n .redeemed-status.expired {\n background: rgba(255, 255, 255, 0.1);\n color: rgba(255, 255, 255, 0.5);\n }\n\n .redeemed-code {\n background: #f8f8f8;\n border: 1px solid rgba(0, 0, 0, 0.1);\n border-radius: 8px;\n padding: 12px;\n margin: 12px 0;\n text-align: center;\n }\n\n .redeemed-code-label {\n font-size: 12px;\n color: #86868b;\n margin-bottom: 4px;\n }\n\n .redeemed-code-value {\n font-size: 18px;\n font-weight: 700;\n color: #DC143C;\n font-family: 'Courier New', monospace;\n letter-spacing: 2px;\n }\n\n .redeemed-qr {\n text-align: center;\n margin: 16px 0;\n }\n\n .redeemed-qr canvas {\n border-radius: 8px;\n background: #fff;\n padding: 8px;\n }\n\n .redeemed-date {\n font-size: 13px;\n color: #86868b;\n text-align: center;\n margin-top: 12px;\n }\n\n .qr-code {\n background: #fff;\n padding: 12px;\n border-radius: 8px;\n display: inline-block;\n margin: 8px 0;\n }\n\n \/* Push Notification Prompt *\/\n @keyframes slideUp {\n from {\n transform: translateY(100%);\n opacity: 0;\n }\n to {\n transform: translateY(0);\n opacity: 1;\n }\n }\n\n .push-notification-prompt {\n animation: slideUp 0.3s ease-out;\n }\n\n .push-notification-prompt button:hover {\n background: rgba(255,255,255,0.3) !important;\n }\n\n \/* Gamified Rewards Store Styles *\/\n .tier-progress-section {\n background: var(--samurai-gray-light);\n border: 1px solid var(--color-separator);\n margin: 20px;\n padding: 20px;\n border-radius: 15px;\n color: var(--samurai-black);\n box-shadow: 0 2px 8px rgba(0,0,0,0.05);\n margin-bottom: 30px;\n }\n\n .tier-progress-header h3 {\n margin: 0 0 10px 0;\n font-size: 18px;\n font-weight: 600;\n }\n\n .tier-progress-header p {\n margin: 0 0 15px 0;\n opacity: 0.9;\n font-size: 14px;\n }\n\n .tier-progress-bar {\n background: var(--color-fill-tertiary);\n border-radius: 10px;\n height: 20px;\n position: relative;\n overflow: hidden;\n }\n\n .tier-progress-fill {\n background: var(--samurai-red);\n height: 100%;\n border-radius: 10px;\n transition: width 0.8s ease;\n position: relative;\n }\n\n .tier-progress-text {\n position: absolute;\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%);\n font-size: 12px;\n font-weight: 600;\n color: var(--samurai-white);\n text-shadow: 0 1px 2px rgba(0,0,0,0.3);\n }\n\n .rewards-grid {\n display: grid;\n grid-template-columns: 1fr;\n gap: 16px;\n margin: 0 20px;\n }\n\n .reward-card.tier-locked {\n opacity: 0.5;\n background: #f8f9fa;\n border-color: #dee2e6;\n }\n\n .reward-card.tier-locked::before {\n content: '';\n position: absolute;\n top: 10px;\n right: 10px;\n width: 16px;\n height: 16px;\n background-image: url(\"data:image\/svg+xml,%3Csvg xmlns='http:\/\/www.w3.org\/2000\/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23666' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='11' width='18' height='11' rx='2' ry='2'\/%3E%3Cpath d='M7 11V7a5 5 0 0 1 10 0v4'\/%3E%3C\/svg%3E\");\n background-size: contain;\n background-repeat: no-repeat;\n opacity: 0.6;\n }\n\n .tier-unlock-indicator {\n background: linear-gradient(135deg, #e3f2fd, #bbdefb);\n border: 1px solid #90caf9;\n border-radius: 8px;\n padding: 12px;\n margin: 12px 0;\n }\n\n .tier-unlock-text {\n display: block;\n font-size: 13px;\n font-weight: 600;\n color: #1565c0;\n }\n\n .points-needed-indicator {\n background: linear-gradient(135deg, #fff3cd, #ffeaa7);\n border: 1px solid #ffeaa7;\n border-radius: 8px;\n padding: 12px;\n margin: 12px 0;\n }\n\n .points-needed-text {\n display: block;\n font-size: 13px;\n font-weight: 600;\n color: #856404;\n margin-bottom: 8px;\n }\n\n .points-progress-bar {\n background: rgba(255,255,255,0.5);\n border-radius: 6px;\n height: 6px;\n overflow: hidden;\n }\n\n .points-progress-fill {\n background: linear-gradient(90deg, #DC143C, #FF6B6B);\n height: 100%;\n border-radius: 6px;\n transition: width 0.6s ease;\n }\n\n .reward-tier-badge {\n background: linear-gradient(135deg, #6c757d, #495057);\n color: white;\n padding: 4px 8px;\n border-radius: 12px;\n font-size: 11px;\n font-weight: 600;\n text-transform: uppercase;\n letter-spacing: 0.5px;\n }\n\n\n\n\n <\/style>\n<\/head>\n<body>\n <div class=\"app-container\">\n \n\n \n\n \n \n <div class=\"login-section\" id=\"loginSection\">\n <div id=\"phoneStep\" class=\"login-step\">\n <div class=\"login-logo\">\n <img decoding=\"async\" src=\"https:\/\/reserve.samuraiyakiniku.com\/wp-content\/plugins\/restaurant-loyalty-system\/assets\/img\/samurai-logo-300x300.png\" alt=\"Samurai Yakiniku\" \/>\n <\/div>\n <h2>Welcome Back!<\/h2>\n <p>Enter your phone number to access your loyalty account<\/p>\n <br>\n <input type=\"tel\" class=\"phone-input\" id=\"phoneInput\" placeholder=\"Enter your phone number\" maxlength=\"15\">\n <button class=\"login-btn\" id=\"sendCodeBtn\">Send Verification Code<\/button>\n <div id=\"phoneMessage\"><\/div>\n\n <div class=\"signup-link\">\n <p>Not a samurai? <a href=\"https:\/\/loyalty.samuraiyakiniku.com\/loyalty-signup\" target=\"_blank\">Sign up here<\/a><\/p>\n <\/div>\n <\/div>\n\n <div id=\"verificationStep\" class=\"login-step\" style=\"display: none;\">\n <div class=\"login-logo\">\n <img decoding=\"async\" src=\"https:\/\/reserve.samuraiyakiniku.com\/wp-content\/plugins\/restaurant-loyalty-system\/assets\/img\/samurai-logo-300x300.png\" alt=\"Samurai Yakiniku\" \/>\n <\/div>\n <h2>Verify Your Number<\/h2>\n <p id=\"verificationMethodText\">We've sent a 6-digit code to your phone<\/p>\n <p id=\"sentToNumber\" class=\"sent-number\"><\/p>\n <br>\n <div class=\"verification-input-container\">\n <input type=\"text\" class=\"verification-input\" id=\"codeInput\" placeholder=\"000000\" maxlength=\"6\" inputmode=\"numeric\">\n <\/div>\n <button class=\"login-btn\" id=\"verifyBtn\">Verify & Login<\/button>\n <button class=\"resend-btn\" id=\"resendBtn\">Resend Code<\/button>\n <div id=\"verificationMessage\"><\/div>\n\n <div class=\"back-link\">\n <a href=\"#\" id=\"backToPhone\">\u2190 Change phone number<\/a>\n <\/div>\n <\/div>\n <\/div>\n \n \n <div class=\"customer-dashboard\" id=\"customerDashboard\">\n \n <div class=\"loyalty-card\">\n <div class=\"card-header\">\n <div class=\"card-logo\">\n <img decoding=\"async\" src=\"https:\/\/reserve.samuraiyakiniku.com\/wp-content\/plugins\/restaurant-loyalty-system\/assets\/img\/samurai-logo-300x300.png\" alt=\"Samurai Yakiniku\" \/>\n <\/div>\n <div class=\"card-type\">Loyalty Card<\/div>\n <\/div>\n\n <div class=\"points-section\">\n <div class=\"points-balance\" id=\"pointsBalance\">0<\/div>\n <div class=\"points-label\">Available Points<\/div>\n <\/div>\n\n <div class=\"card-footer\">\n <div class=\"customer-name\" id=\"customerName\">Valued Customer<\/div>\n <div class=\"tier-badge\" id=\"tierBadge\">Bronze<\/div>\n <\/div>\n <\/div>\n\n \n <div class=\"navigation-section\">\n <div class=\"navigation-list\">\n <div class=\"nav-item\" onclick=\"showBookings()\">\n <div class=\"nav-icon bookings\"><svg width=\"18\" height=\"18\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M3 2v7c0 1.1.9 2 2 2h4a2 2 0 0 0 2-2V2\"\/><path d=\"M7 2v20\"\/><path d=\"M21 15V2v0a5 5 0 0 0-5 5v6c0 1.1.9 2 2 2h3Zm0 0v7\"\/><\/svg><\/div>\n <div class=\"nav-content\">\n <div class=\"nav-title\">Bookings<\/div>\n <div class=\"nav-subtitle\">Create & modify reservations<\/div>\n <\/div>\n <div class=\"nav-chevron\"><svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"m9 18 6-6-6-6\"\/><\/svg><\/div>\n <\/div>\n\n <div class=\"nav-item\" onclick=\"showRedeemed()\">\n <div class=\"nav-icon redeemed\"><svg width=\"18\" height=\"18\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M2 9a3 3 0 0 1 0 6v2a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2v-2a3 3 0 0 1 0-6V7a2 2 0 0 0-2-2H4a2 2 0 0 0-2 2Z\"\/><path d=\"M13 5v2\"\/><path d=\"M13 17v2\"\/><path d=\"M13 11v2\"\/><\/svg><\/div>\n <div class=\"nav-content\">\n <div class=\"nav-title\">My Rewards<\/div>\n <div class=\"nav-subtitle\">Active rewards & QR codes<\/div>\n <\/div>\n <div class=\"nav-chevron\"><svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"m9 18 6-6-6-6\"\/><\/svg><\/div>\n <\/div>\n\n <div class=\"nav-item\" onclick=\"showRewards()\">\n <div class=\"nav-icon rewards\"><svg width=\"15\" height=\"15\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M20 12v10H4V12\"\/><path d=\"M2 7h20v5H2z\"\/><path d=\"M12 22V7\"\/><path d=\"M12 7H7.5a2.5 2.5 0 0 1 0-5C11 2 12 7 12 7z\"\/><path d=\"M12 7h4.5a2.5 2.5 0 0 0 0-5C13 2 12 7 12 7z\"\/><\/svg><\/div>\n <div class=\"nav-content\">\n <div class=\"nav-title\">Reward Store<\/div>\n <div class=\"nav-subtitle\">Browse & redeem with points<\/div>\n <\/div>\n <div class=\"nav-chevron\"><svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"m9 18 6-6-6-6\"\/><\/svg><\/div>\n <\/div>\n\n <div class=\"nav-item\" onclick=\"showHistory()\">\n <div class=\"nav-icon history\"><svg width=\"15\" height=\"15\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M3 3v5h5\"\/><path d=\"M3.05 13A9 9 0 1 0 6 5.3L3 8\"\/><path d=\"M12 7v5l4 2\"\/><\/svg><\/div>\n <div class=\"nav-content\">\n <div class=\"nav-title\">Activity<\/div>\n <div class=\"nav-subtitle\">View transaction history<\/div>\n <\/div>\n <div class=\"nav-chevron\"><svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"m9 18 6-6-6-6\"\/><\/svg><\/div>\n <\/div>\n <\/div>\n <\/div>\n\n \n <div class=\"profile-card\" onclick=\"showProfile()\">\n <div class=\"profile-icon\"><svg width=\"18\" height=\"18\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><circle cx=\"12\" cy=\"8\" r=\"4\"\/><path d=\"M20 21a8 8 0 1 0-16 0\"\/><\/svg><\/div>\n <div class=\"nav-content\">\n <div class=\"nav-title\">Profile<\/div>\n <div class=\"nav-subtitle\">Manage your account<\/div>\n <\/div>\n <div class=\"nav-chevron\"><svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"m9 18 6-6-6-6\"\/><\/svg><\/div>\n <\/div>\n\n \n <div id=\"tierProgressCard\" class=\"tier-progress-section\" style=\"margin: 20px 0;\">\n \n <\/div>\n\n \n <div style=\"text-align: center; padding: 20px; color: #86868b;\">\n <p style=\"font-size: 14px;\">Member since <span id=\"memberSince\">2024<\/span><\/p>\n <button onclick=\"refreshCustomerData()\" style=\"background: none; border: 1px solid rgba(0,0,0,0.1); color: #86868b; padding: 8px 16px; border-radius: 8px; font-size: 12px; cursor: pointer; margin-top: 10px; margin-right: 10px; transition: all 0.3s ease;\">\n Refresh Data\n <\/button>\n <button onclick=\"logout()\" style=\"background: none; border: 1px solid rgba(0,0,0,0.1); color: #86868b; padding: 8px 16px; border-radius: 8px; font-size: 12px; cursor: pointer; margin-top: 10px; transition: all 0.3s ease;\">\n Logout\n <\/button>\n <\/div>\n <\/div>\n\n \n <div class=\"rewards-section\" id=\"rewardsSection\" style=\"display: none;\">\n <div class=\"section-header\">\n <button class=\"back-button\" onclick=\"showDashboard()\">\u2190 Back<\/button>\n <h2><svg width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" style=\"vertical-align: middle; margin-right: 8px;\"><path d=\"M20 12v10H4V12\"\/><path d=\"M2 7h20v5H2z\"\/><path d=\"M12 22V7\"\/><path d=\"M12 7H7.5a2.5 2.5 0 0 1 0-5C11 2 12 7 12 7z\"\/><path d=\"M12 7h4.5a2.5 2.5 0 0 0 0-5C13 2 12 7 12 7z\"\/><\/svg>Reward Store<\/h2>\n <div class=\"points-summary\">\n <span id=\"rewardsPointsBalance\">0<\/span> points available\n <\/div>\n <\/div>\n\n \n <div class=\"coupon-section\" style=\"background: linear-gradient(135deg, #000 0%, #cd0404 100%); margin: 20px; padding: 20px; border-radius: 15px; color: white; box-shadow: 0 4px 15px rgba(0,0,0,0.1);\">\n <h3 style=\"margin: 0 0 15px 0; font-size: 18px; display: flex; align-items: center; gap: 8px;\">\n <svg width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M2 9a3 3 0 0 1 0 6v2a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2v-2a3 3 0 0 1 0-6V7a2 2 0 0 0-2-2H4a2 2 0 0 0-2 2Z\"\/><path d=\"M13 5v2\"\/><path d=\"M13 17v2\"\/><path d=\"M13 11v2\"\/><\/svg>\n Have a Coupon Code?\n <\/h3>\n <p style=\"margin: 0 0 15px 0; opacity: 0.9; font-size: 14px;\">\n Enter your coupon code below to claim special rewards!\n <\/p>\n\n <div class=\"coupon-input-group\" style=\" margin-bottom: 10px;\">\n <div style=\" margin-bottom: 10px\";> \n <input type=\"text\"\n id=\"couponCodeInput\"\n placeholder=\"Enter code\"\n style=\"flex: 1; padding: 12px; border: none; border-radius: 8px; font-size: 16px; text-transform: uppercase; font-weight: bold; letter-spacing: 1px;\">\n <\/div>\n <div style=\"margin-bottom: 4px\";> \n <button id=\"validateCouponBtn\"\n onclick=\"validateCouponCode()\"\n style=\"padding: 12px 20px; background: rgba(255,255,255,0.2); color: white; border: 1px solid rgba(255,255,255,0.3); border-radius: 8px; font-weight: bold; cursor: pointer; transition: all 0.3s;\">\n Validate\n <\/button>\n <\/div>\n <\/div>\n <div id=\"couponValidationResult\" style=\"margin-top: 10px; padding: 10px; border-radius: 8px; display: none; font-size: 12px; \"><\/div>\n\n <button id=\"redeemCouponBtn\"\n onclick=\"redeemCouponCode()\"\n style=\"width: 100%; padding: 12px; background: #28a745; color: white; border: none; border-radius: 8px; font-weight: bold; font-size: 16px; cursor: pointer; margin-top: 10px; display: none; transition: all 0.3s; display: flex; align-items: center; justify-content: center; gap: 8px;\">\n <svg width=\"18\" height=\"18\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M20 12v10H4V12\"\/><path d=\"M2 7h20v5H2z\"\/><path d=\"M12 22V7\"\/><path d=\"M12 7H7.5a2.5 2.5 0 0 1 0-5C11 2 12 7 12 7z\"\/><path d=\"M12 7h4.5a2.5 2.5 0 0 0 0-5C13 2 12 7 12 7z\"\/><\/svg>\n Claim Reward\n <\/button>\n <\/div>\n\n <div class=\"rewards-grid\" id=\"rewardsGrid\">\n \n <\/div>\n <\/div>\n\n \n <div class=\"activity-section\" id=\"activitySection\" style=\"display: none;\">\n <div class=\"section-header\">\n <button class=\"back-button\" onclick=\"showDashboard()\">\u2190 Back<\/button>\n <h2>Activity History<\/h2>\n <\/div>\n\n <div class=\"activity-list\" id=\"activityList\">\n \n <\/div>\n <\/div>\n\n \n <div class=\"redeemed-section\" id=\"redeemedSection\" style=\"display: none;\">\n <div class=\"section-header\">\n <button class=\"back-button\" onclick=\"showDashboard()\">\u2190 Back<\/button>\n <h2><svg width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" style=\"vertical-align: middle; margin-right: 8px;\"><path d=\"M2 9a3 3 0 0 1 0 6v2a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2v-2a3 3 0 0 1 0-6V7a2 2 0 0 0-2-2H4a2 2 0 0 0-2 2Z\"\/><path d=\"M13 5v2\"\/><path d=\"M13 17v2\"\/><path d=\"M13 11v2\"\/><\/svg>My Rewards<\/h2>\n <div class=\"points-summary\">\n <span id=\"redeemedCount\">0<\/span> active rewards\n <\/div>\n <\/div>\n\n \n\n <div class=\"redeemed-list\" id=\"redeemedList\">\n \n <\/div>\n <\/div>\n\n \n <div class=\"profile-section\" id=\"profileSection\" style=\"display: none;\">\n <div class=\"section-header\">\n <button class=\"back-button\" onclick=\"showDashboard()\">\u2190 Back<\/button>\n <h2>My Profile<\/h2>\n <\/div>\n\n <div class=\"profile-content\" id=\"profileContent\">\n \n <\/div>\n <\/div>\n\n \n <div class=\"bookings-section\" id=\"bookingsSection\" style=\"display: none;\">\n <div class=\"section-header\">\n <button class=\"back-button\" onclick=\"showDashboard()\">\u2190 Back<\/button>\n <h2><svg width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" style=\"vertical-align: middle; margin-right: 8px;\"><path d=\"M3 2v7c0 1.1.9 2 2 2h4a2 2 0 0 0 2-2V2\"\/><path d=\"M7 2v20\"\/><path d=\"M21 15V2v0a5 5 0 0 0-5 5v6c0 1.1.9 2 2 2h3Zm0 0v7\"\/><\/svg>Bookings<\/h2>\n <div class=\"points-summary\">\n Manage your restaurant reservations\n <\/div>\n <\/div>\n\n \n <div style=\"text-align: center;\">\n <button class=\"create-booking-btn\" onclick=\"showCreateBookingModal()\" style=\"display: inline-flex; align-items: center; gap: 8px;\">\n <svg width=\"18\" height=\"18\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><line x1=\"12\" y1=\"5\" x2=\"12\" y2=\"19\"\/><line x1=\"5\" y1=\"12\" x2=\"19\" y2=\"12\"\/><\/svg>\n Create New Booking\n <\/button>\n <\/div>\n\n <div class=\"bookings-filters\">\n <div style=\"display: flex; gap: var(--spacing-sm); justify-content: center; flex-wrap: wrap;\">\n <button class=\"filter-btn\" data-filter=\"upcoming\" onclick=\"filterBookings('upcoming')\">Upcoming<\/button>\n <button class=\"filter-btn\" data-filter=\"past\" onclick=\"filterBookings('past')\">Past<\/button>\n <button class=\"filter-btn active\" data-filter=\"all\" onclick=\"filterBookings('all')\">All<\/button>\n <\/div>\n <\/div>\n\n <div class=\"bookings-list\" id=\"bookingsList\">\n \n <\/div>\n <\/div>\n\n \n <div class=\"loading\" id=\"loadingIndicator\" style=\"display: none;\">\n <div class=\"spinner\"><\/div>\n <p>Loading your account...<\/p>\n <\/div>\n\n \n <div class=\"modal-overlay\" id=\"modalOverlay\" style=\"display: none;\">\n <div class=\"modal-dialog\" id=\"modalDialog\">\n <div class=\"modal-header\">\n <h3 id=\"modalTitle\">Confirm Action<\/h3>\n <button class=\"modal-close\" onclick=\"closeModal()\">\u00d7<\/button>\n <\/div>\n <div class=\"modal-body\" id=\"modalBody\">\n \n <\/div>\n <div class=\"modal-footer\" id=\"modalFooter\">\n \n <\/div>\n <\/div>\n <\/div>\n\n \n <div class=\"modal-overlay\" id=\"phoneChangeModal\" style=\"display: none;\">\n <div class=\"modal-dialog\">\n <div class=\"modal-header\">\n <h3 id=\"phoneChangeTitle\">Change Phone Number<\/h3>\n <button class=\"modal-close\" onclick=\"closePhoneChangeModal()\">\u00d7<\/button>\n <\/div>\n <div class=\"modal-body\" id=\"phoneChangeBody\">\n \n <\/div>\n <div class=\"modal-footer\" id=\"phoneChangeFooter\">\n \n <\/div>\n <\/div>\n <\/div>\n\n \n <div class=\"modal-overlay\" id=\"birthdayModal\" style=\"display: none;\">\n <div class=\"modal-dialog\">\n <div class=\"modal-header\">\n <h3 style=\"display: flex; align-items: center; gap: 8px;\"><svg width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M20 21v-8a2 2 0 0 0-2-2H6a2 2 0 0 0-2 2v8\"\/><path d=\"M4 16s.5-1 2-1 2.5 2 4 2 2.5-2 4-2 2.5 2 4 2 2-1 2-1\"\/><path d=\"M2 21h20\"\/><path d=\"M7 8v2\"\/><path d=\"M12 8v2\"\/><path d=\"M17 8v2\"\/><path d=\"M7 4h0\"\/><path d=\"M12 4h0\"\/><path d=\"M17 4h0\"\/><\/svg>Update Birthday<\/h3>\n <button class=\"modal-close\" onclick=\"closeBirthdayModal()\">\u00d7<\/button>\n <\/div>\n <div class=\"modal-body\">\n <div style=\"margin-bottom: 20px;\">\n <p style=\"color: #86868b; margin-bottom: 16px;\">Set your birthday to receive special birthday rewards and offers!<\/p>\n\n <div style=\"margin-bottom: 16px;\">\n <label style=\"display: block; color: #fff; font-weight: 600; margin-bottom: 8px;\">Birthday Date:<\/label>\n <input type=\"date\" id=\"birthdayInput\"\n style=\"width: 100%; padding: 12px; border: 1px solid #ddd; border-radius: 8px; font-size: 16px; background: #f8f8f8;\"\n max=\"${new Date().toISOString().split('T')[0]}\">\n <\/div>\n\n <div style=\"background: #e3f2fd; padding: 12px; border-radius: 8px; border-left: 4px solid #2196f3;\">\n <p style=\"margin: 0; font-size: 14px; color: #1976d2; display: flex; align-items: flex-start; gap: 8px;\">\n <svg width=\"18\" height=\"18\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" style=\"flex-shrink: 0; margin-top: 2px;\"><path d=\"M20 12v10H4V12\"\/><path d=\"M2 7h20v5H2z\"\/><path d=\"M12 22V7\"\/><path d=\"M12 7H7.5a2.5 2.5 0 0 1 0-5C11 2 12 7 12 7z\"\/><path d=\"M12 7h4.5a2.5 2.5 0 0 0 0-5C13 2 12 7 12 7z\"\/><\/svg>\n <span><strong>Birthday Benefits:<\/strong><br>\n \u2022 Special birthday bonus points<br>\n \u2022 Exclusive birthday offers<br>\n \u2022 Personalized birthday surprises<\/span>\n <\/p>\n <\/div>\n <\/div>\n <\/div>\n <div class=\"modal-footer\">\n <button onclick=\"closeBirthdayModal()\"\n style=\"background: none; border: 1px solid rgba(0,0,0,0.1); color: #86868b; padding: 12px 24px; border-radius: 8px; margin-right: 12px; cursor: pointer;\">\n Cancel\n <\/button>\n <button onclick=\"updateBirthday()\"\n style=\"background: linear-gradient(135deg, #DC143C, #B22222); color: white; border: none; padding: 12px 24px; border-radius: 8px; font-weight: 600; cursor: pointer;\">\n Save Birthday\n <\/button>\n <\/div>\n <\/div>\n <\/div>\n\n \n <div class=\"modal-overlay\" id=\"nameModal\" style=\"display: none;\">\n <div class=\"modal-dialog\">\n <div class=\"modal-header\">\n <h3 style=\"display: flex; align-items: center; gap: 8px;\"><svg width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M17 3a2.85 2.83 0 1 1 4 4L7.5 20.5 2 22l1.5-5.5Z\"\/><path d=\"m15 5 4 4\"\/><\/svg>Update Name<\/h3>\n <button class=\"modal-close\" onclick=\"closeNameModal()\">\u00d7<\/button>\n <\/div>\n <div class=\"modal-body\">\n <div style=\"margin-bottom: 20px;\">\n <p style=\"color: #86868b; margin-bottom: 16px;\">Update your name information<\/p>\n\n <div style=\"margin-bottom: 16px;\">\n <label style=\"display: block; color: #fff; font-weight: 600; margin-bottom: 8px;\">First Name:<\/label>\n <input type=\"text\" id=\"firstNameInput\"\n style=\"width: 100%; padding: 12px; border: 1px solid #ddd; border-radius: 8px; font-size: 16px; background: #f8f8f8;\"\n placeholder=\"Enter first name\">\n <\/div>\n\n <div style=\"margin-bottom: 16px;\">\n <label style=\"display: block; color: #fff; font-weight: 600; margin-bottom: 8px;\">Last Name:<\/label>\n <input type=\"text\" id=\"lastNameInput\"\n style=\"width: 100%; padding: 12px; border: 1px solid #ddd; border-radius: 8px; font-size: 16px; background: #f8f8f8;\"\n placeholder=\"Enter last name\">\n <\/div>\n <\/div>\n <\/div>\n <div class=\"modal-footer\">\n <button onclick=\"closeNameModal()\"\n style=\"background: none; border: 1px solid rgba(0,0,0,0.1); color: #86868b; padding: 12px 24px; border-radius: 8px; margin-right: 12px; cursor: pointer;\">\n Cancel\n <\/button>\n <button onclick=\"updateName()\"\n style=\"background: linear-gradient(135deg, #DC143C, #B22222); color: white; border: none; padding: 12px 24px; border-radius: 8px; font-weight: 600; cursor: pointer;\">\n Save Name\n <\/button>\n <\/div>\n <\/div>\n <\/div>\n\n \n <div class=\"modal-overlay\" id=\"emailModal\" style=\"display: none;\">\n <div class=\"modal-dialog\">\n <div class=\"modal-header\">\n <h3 style=\"display: flex; align-items: center; gap: 8px;\"><svg width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><rect x=\"2\" y=\"4\" width=\"20\" height=\"16\" rx=\"2\"\/><path d=\"m22 7-8.97 5.7a1.94 1.94 0 0 1-2.06 0L2 7\"\/><\/svg>Update Email<\/h3>\n <button class=\"modal-close\" onclick=\"closeEmailModal()\">\u00d7<\/button>\n <\/div>\n <div class=\"modal-body\">\n <div style=\"margin-bottom: 20px;\">\n <p style=\"color: #86868b; margin-bottom: 16px;\">Update your email address for notifications and communications<\/p>\n\n <div style=\"margin-bottom: 16px;\">\n <label style=\"display: block; color: #fff; font-weight: 600; margin-bottom: 8px;\">Email Address:<\/label>\n <input type=\"email\" id=\"emailInput\"\n style=\"width: 100%; padding: 12px; border: 1px solid #ddd; border-radius: 8px; font-size: 16px; background: #f8f8f8;\"\n placeholder=\"Enter email address (optional)\">\n <\/div>\n\n <div style=\"background: #e3f2fd; padding: 12px; border-radius: 8px; border-left: 4px solid #2196f3;\">\n <p style=\"margin: 0; font-size: 14px; color: #1976d2; display: flex; align-items: flex-start; gap: 8px;\">\n <svg width=\"18\" height=\"18\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" style=\"flex-shrink: 0; margin-top: 2px;\"><rect x=\"2\" y=\"4\" width=\"20\" height=\"16\" rx=\"2\"\/><path d=\"m22 7-8.97 5.7a1.94 1.94 0 0 1-2.06 0L2 7\"\/><\/svg>\n <span><strong>Email Benefits:<\/strong><br>\n \u2022 Receive promotional offers<br>\n \u2022 Get booking confirmations<br>\n \u2022 Stay updated on rewards<\/span>\n <\/p>\n <\/div>\n <\/div>\n <\/div>\n <div class=\"modal-footer\">\n <button onclick=\"closeEmailModal()\"\n style=\"background: none; border: 1px solid rgba(0,0,0,0.1); color: #86868b; padding: 12px 24px; border-radius: 8px; margin-right: 12px; cursor: pointer;\">\n Cancel\n <\/button>\n <button onclick=\"updateEmail()\"\n style=\"background: linear-gradient(135deg, #DC143C, #B22222); color: white; border: none; padding: 12px 24px; border-radius: 8px; font-weight: 600; cursor: pointer;\">\n Save Email\n <\/button>\n <\/div>\n <\/div>\n <\/div>\n\n \n <div class=\"modal-overlay\" id=\"bookingModal\" style=\"display: none;\">\n <div class=\"modal-dialog\">\n <div class=\"modal-header\">\n <h3 style=\"display: flex; align-items: center; gap: 8px;\"><svg width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M17 3a2.85 2.83 0 1 1 4 4L7.5 20.5 2 22l1.5-5.5Z\"\/><path d=\"m15 5 4 4\"\/><\/svg>Modify Booking<\/h3>\n <button class=\"modal-close\" onclick=\"closeBookingModal()\">\u00d7<\/button>\n <\/div>\n <div class=\"modal-body\" id=\"bookingModalBody\">\n \n <\/div>\n <div class=\"modal-footer\" id=\"bookingModalFooter\">\n \n <\/div>\n <\/div>\n <\/div>\n\n \n <div class=\"create-booking-section\" id=\"createBookingSection\" style=\"display: none;\">\n <div class=\"section-header\">\n <button class=\"back-button\" onclick=\"closeCreateBookingModal()\">\u2190 Back<\/button>\n <h2>\n <svg width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" style=\"vertical-align: middle; margin-right: 8px;\">\n <rect x=\"3\" y=\"4\" width=\"18\" height=\"18\" rx=\"2\" ry=\"2\"\/>\n <line x1=\"16\" y1=\"2\" x2=\"16\" y2=\"6\"\/>\n <line x1=\"8\" y1=\"2\" x2=\"8\" y2=\"6\"\/>\n <line x1=\"3\" y1=\"10\" x2=\"21\" y2=\"10\"\/>\n <\/svg>\n Reserve a Table\n <\/h2>\n <div class=\"points-summary\">Find and book your perfect table<\/div>\n <\/div>\n\n <div class=\"create-booking-content\" id=\"createBookingModalBody\">\n \n <\/div>\n\n <div class=\"create-booking-footer\" id=\"createBookingModalFooter\">\n \n <\/div>\n <\/div>\n \n \n <div class=\"home-indicator\"><\/div>\n <\/div>\n\n <script>\n console.log('=== MAIN SCRIPT STARTING ===');\n console.log('JavaScript is loading...');\n\n let currentCustomer = null;\n let currentPhone = null;\n let resendTimer = null;\n let resendCountdown = 0;\n\n \/\/ Initialize when DOM is ready\n if (document.readyState === 'loading') {\n document.addEventListener('DOMContentLoaded', initializeApp);\n } else {\n \/\/ DOM already loaded\n initializeApp();\n }\n\n function checkPaymentStatus() {\n const urlParams = new URLSearchParams(window.location.search);\n const paymentStatus = urlParams.get('payment');\n const orderNumber = urlParams.get('order');\n\n if (paymentStatus) {\n console.log('Payment status detected:', paymentStatus, 'Order:', orderNumber);\n\n \/\/ Clear URL parameters\n const url = new URL(window.location);\n url.searchParams.delete('payment');\n url.searchParams.delete('order');\n window.history.replaceState({}, document.title, url.pathname);\n\n \/\/ Show payment result\n setTimeout(() => {\n if (paymentStatus === 'success') {\n showBookingMessage('success', 'Payment successful! Your booking has been confirmed.');\n \/\/ Refresh bookings to show the new booking\n if (typeof loadBookings === 'function') {\n loadBookings();\n }\n } else if (paymentStatus === 'failed') {\n showBookingMessage('error', 'Payment failed. Please try again or contact support.');\n } else if (paymentStatus === 'error') {\n showBookingMessage('error', 'Payment processing error. Please contact support.');\n }\n }, 1000); \/\/ Delay to ensure UI is ready\n }\n }\n\n \/\/ Booking Campaign Functions\n let currentCampaign = null;\n let currentCampaignCapacity = null; \/\/ Track campaign capacity for party size limits\n\n \/\/ Airbnb-style SVG Icon Library\n const icons = {\n \/\/ Navigation\n bookings: `<svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M3 3h18v18H3z\"\/><path d=\"M3 9h18\"\/><path d=\"M9 21V9\"\/><\/svg>`,\n rewards: `<svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M20 12v10H4V12\"\/><path d=\"M2 7h20v5H2z\"\/><path d=\"M12 22V7\"\/><path d=\"M12 7H7.5a2.5 2.5 0 0 1 0-5C11 2 12 7 12 7z\"\/><path d=\"M12 7h4.5a2.5 2.5 0 0 0 0-5C13 2 12 7 12 7z\"\/><\/svg>`,\n history: `<svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M3 3v5h5\"\/><path d=\"M3.05 13A9 9 0 1 0 6 5.3L3 8\"\/><path d=\"M12 7v5l4 2\"\/><\/svg>`,\n profile: `<svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><circle cx=\"12\" cy=\"8\" r=\"4\"\/><path d=\"M20 21a8 8 0 1 0-16 0\"\/><\/svg>`,\n\n \/\/ Actions\n plus: `<svg width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><line x1=\"12\" y1=\"5\" x2=\"12\" y2=\"19\"\/><line x1=\"5\" y1=\"12\" x2=\"19\" y2=\"12\"\/><\/svg>`,\n minus: `<svg width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><line x1=\"5\" y1=\"12\" x2=\"19\" y2=\"12\"\/><\/svg>`,\n close: `<svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><line x1=\"18\" y1=\"6\" x2=\"6\" y2=\"18\"\/><line x1=\"6\" y1=\"6\" x2=\"18\" y2=\"18\"\/><\/svg>`,\n check: `<svg width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><polyline points=\"20 6 9 17 4 12\"\/><\/svg>`,\n\n \/\/ Status\n success: `<svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"#22c55e\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><circle cx=\"12\" cy=\"12\" r=\"10\"\/><path d=\"m9 12 2 2 4-4\"\/><\/svg>`,\n error: `<svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"#ef4444\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><circle cx=\"12\" cy=\"12\" r=\"10\"\/><line x1=\"15\" y1=\"9\" x2=\"9\" y2=\"15\"\/><line x1=\"9\" y1=\"9\" x2=\"15\" y2=\"15\"\/><\/svg>`,\n warning: `<svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"#f59e0b\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"m21.73 18-8-14a2 2 0 0 0-3.48 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3Z\"\/><line x1=\"12\" y1=\"9\" x2=\"12\" y2=\"13\"\/><line x1=\"12\" y1=\"17\" x2=\"12.01\" y2=\"17\"\/><\/svg>`,\n info: `<svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"#3b82f6\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><circle cx=\"12\" cy=\"12\" r=\"10\"\/><line x1=\"12\" y1=\"16\" x2=\"12\" y2=\"12\"\/><line x1=\"12\" y1=\"8\" x2=\"12.01\" y2=\"8\"\/><\/svg>`,\n\n \/\/ Objects\n calendar: `<svg width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><rect x=\"3\" y=\"4\" width=\"18\" height=\"18\" rx=\"2\" ry=\"2\"\/><line x1=\"16\" y1=\"2\" x2=\"16\" y2=\"6\"\/><line x1=\"8\" y1=\"2\" x2=\"8\" y2=\"6\"\/><line x1=\"3\" y1=\"10\" x2=\"21\" y2=\"10\"\/><\/svg>`,\n clock: `<svg width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><circle cx=\"12\" cy=\"12\" r=\"10\"\/><polyline points=\"12 6 12 12 16 14\"\/><\/svg>`,\n user: `<svg width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><circle cx=\"12\" cy=\"8\" r=\"4\"\/><path d=\"M20 21a8 8 0 1 0-16 0\"\/><\/svg>`,\n users: `<svg width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2\"\/><circle cx=\"9\" cy=\"7\" r=\"4\"\/><path d=\"M22 21v-2a4 4 0 0 0-3-3.87\"\/><path d=\"M16 3.13a4 4 0 0 1 0 7.75\"\/><\/svg>`,\n email: `<svg width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><rect x=\"2\" y=\"4\" width=\"20\" height=\"16\" rx=\"2\"\/><path d=\"m22 7-8.97 5.7a1.94 1.94 0 0 1-2.06 0L2 7\"\/><\/svg>`,\n phone: `<svg width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72 12.84 12.84 0 0 0 .7 2.81 2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45 12.84 12.84 0 0 0 2.81.7A2 2 0 0 1 22 16.92z\"\/><\/svg>`,\n location: `<svg width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M20 10c0 6-8 12-8 12s-8-6-8-12a8 8 0 0 1 16 0Z\"\/><circle cx=\"12\" cy=\"10\" r=\"3\"\/><\/svg>`,\n creditCard: `<svg width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><rect x=\"1\" y=\"4\" width=\"22\" height=\"16\" rx=\"2\" ry=\"2\"\/><line x1=\"1\" y1=\"10\" x2=\"23\" y2=\"10\"\/><\/svg>`,\n\n \/\/ Features\n gift: `<svg width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M20 12v10H4V12\"\/><path d=\"M2 7h20v5H2z\"\/><path d=\"M12 22V7\"\/><path d=\"M12 7H7.5a2.5 2.5 0 0 1 0-5C11 2 12 7 12 7z\"\/><path d=\"M12 7h4.5a2.5 2.5 0 0 0 0-5C13 2 12 7 12 7z\"\/><\/svg>`,\n coupon: `<svg width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M2 9a3 3 0 0 1 0 6v2a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2v-2a3 3 0 0 1 0-6V7a2 2 0 0 0-2-2H4a2 2 0 0 0-2 2Z\"\/><path d=\"M13 5v2\"\/><path d=\"M13 17v2\"\/><path d=\"M13 11v2\"\/><\/svg>`,\n birthday: `<svg width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M20 21v-8a2 2 0 0 0-2-2H6a2 2 0 0 0-2 2v8\"\/><path d=\"M4 16s.5-1 2-1 2.5 2 4 2 2.5-2 4-2 2.5 2 4 2 2-1 2-1\"\/><path d=\"M2 21h20\"\/><path d=\"M7 8v2\"\/><path d=\"M12 8v2\"\/><path d=\"M17 8v2\"\/><path d=\"M7 4h0\"\/><path d=\"M12 4h0\"\/><path d=\"M17 4h0\"\/><\/svg>`,\n star: `<svg width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><polygon points=\"12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2\"\/><\/svg>`,\n trophy: `<svg width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M6 9H4.5a2.5 2.5 0 0 1 0-5H6\"\/><path d=\"M18 9h1.5a2.5 2.5 0 0 0 0-5H18\"\/><path d=\"M4 22h16\"\/><path d=\"M10 14.66V17c0 .55-.47.98-.97 1.21C7.85 18.75 7 20.24 7 22\"\/><path d=\"M14 14.66V17c0 .55.47.98.97 1.21C16.15 18.75 17 20.24 17 22\"\/><path d=\"M18 2H6v7a6 6 0 0 0 12 0V2Z\"\/><\/svg>`,\n target: `<svg width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><circle cx=\"12\" cy=\"12\" r=\"10\"\/><circle cx=\"12\" cy=\"12\" r=\"6\"\/><circle cx=\"12\" cy=\"12\" r=\"2\"\/><\/svg>`,\n coins: `<svg width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><circle cx=\"8\" cy=\"8\" r=\"6\"\/><path d=\"M18.09 10.37A6 6 0 1 1 10.34 18\"\/><path d=\"M7 6h1v4\"\/><path d=\"m16.71 13.88.7.71-2.82 2.82\"\/><\/svg>`,\n\n \/\/ Dining\n utensils: `<svg width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M3 2v7c0 1.1.9 2 2 2h4a2 2 0 0 0 2-2V2\"\/><path d=\"M7 2v20\"\/><path d=\"M21 15V2v0a5 5 0 0 0-5 5v6c0 1.1.9 2 2 2h3Zm0 0v7\"\/><\/svg>`,\n table: `<svg width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><rect x=\"2\" y=\"7\" width=\"20\" height=\"3\" rx=\"1\"\/><path d=\"M4 10v11\"\/><path d=\"M20 10v11\"\/><path d=\"M8 10v11\"\/><path d=\"M16 10v11\"\/><\/svg>`,\n\n \/\/ Tech\n bell: `<svg width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M6 8a6 6 0 0 1 12 0c0 7 3 9 3 9H3s3-2 3-9\"\/><path d=\"M10.3 21a1.94 1.94 0 0 0 3.4 0\"\/><\/svg>`,\n smartphone: `<svg width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><rect x=\"5\" y=\"2\" width=\"14\" height=\"20\" rx=\"2\" ry=\"2\"\/><line x1=\"12\" y1=\"18\" x2=\"12.01\" y2=\"18\"\/><\/svg>`,\n download: `<svg width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4\"\/><polyline points=\"7 10 12 15 17 10\"\/><line x1=\"12\" y1=\"15\" x2=\"12\" y2=\"3\"\/><\/svg>`,\n refresh: `<svg width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M3 12a9 9 0 0 1 9-9 9.75 9.75 0 0 1 6.74 2.74L21 8\"\/><path d=\"M21 3v5h-5\"\/><path d=\"M21 12a9 9 0 0 1-9 9 9.75 9.75 0 0 1-6.74-2.74L3 16\"\/><path d=\"M8 16H3v5\"\/><\/svg>`,\n lock: `<svg width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><rect x=\"3\" y=\"11\" width=\"18\" height=\"11\" rx=\"2\" ry=\"2\"\/><path d=\"M7 11V7a5 5 0 0 1 10 0v4\"\/><\/svg>`,\n zap: `<svg width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><polygon points=\"13 2 3 14 12 14 11 22 21 10 12 10 13 2\"\/><\/svg>`,\n sparkles: `<svg width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"m12 3-1.912 5.813a2 2 0 0 1-1.275 1.275L3 12l5.813 1.912a2 2 0 0 1 1.275 1.275L12 21l1.912-5.813a2 2 0 0 1 1.275-1.275L21 12l-5.813-1.912a2 2 0 0 1-1.275-1.275L12 3Z\"\/><path d=\"M5 3v4\"\/><path d=\"M19 17v4\"\/><path d=\"M3 5h4\"\/><path d=\"M17 19h4\"\/><\/svg>`,\n lightbulb: `<svg width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M15 14c.2-1 .7-1.7 1.5-2.5 1-.9 1.5-2.2 1.5-3.5A6 6 0 0 0 6 8c0 1 .2 2.2 1.5 3.5.7.7 1.3 1.5 1.5 2.5\"\/><path d=\"M9 18h6\"\/><path d=\"M10 22h4\"\/><\/svg>`,\n clipboard: `<svg width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><rect x=\"8\" y=\"2\" width=\"8\" height=\"4\" rx=\"1\" ry=\"1\"\/><path d=\"M16 4h2a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h2\"\/><\/svg>`,\n edit: `<svg width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M17 3a2.85 2.83 0 1 1 4 4L7.5 20.5 2 22l1.5-5.5Z\"\/><path d=\"m15 5 4 4\"\/><\/svg>`,\n blocked: `<svg width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><circle cx=\"12\" cy=\"12\" r=\"10\"\/><path d=\"m4.93 4.93 14.14 14.14\"\/><\/svg>`,\n arrowRight: `<svg width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M5 12h14\"\/><path d=\"m12 5 7 7-7 7\"\/><\/svg>`,\n chevronRight: `<svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"m9 18 6-6-6-6\"\/><\/svg>`,\n party: `<svg width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M5.8 11.3 2 22l10.7-3.79\"\/><path d=\"M4 3h.01\"\/><path d=\"M22 8h.01\"\/><path d=\"M15 2h.01\"\/><path d=\"M22 20h.01\"\/><path d=\"m22 2-2.24.75a2.9 2.9 0 0 0-1.96 3.12v0c.1.86-.57 1.63-1.45 1.63h-.38c-.86 0-1.6.6-1.76 1.44L14 10\"\/><path d=\"m22 13-.82-.33c-.86-.34-1.82.2-1.98 1.11v0c-.11.7-.72 1.22-1.43 1.22H17\"\/><path d=\"m11 2 .33.82c.34.86-.2 1.82-1.11 1.98v0C9.52 4.9 9 5.52 9 6.23V7\"\/><path d=\"M11 13c1.93 1.93 2.83 4.17 2 5-.83.83-3.07-.07-5-2-1.93-1.93-2.83-4.17-2-5 .83-.83 3.07.07 5 2Z\"\/><\/svg>`,\n };\n\n \/\/ Helper function to get icon with custom size\/color\n function getIcon(name, size = 20, color = 'currentColor') {\n const icon = icons[name];\n if (!icon) return '';\n return icon.replace(\/width=\"[^\"]*\"\/, `width=\"${size}\"`)\n .replace(\/height=\"[^\"]*\"\/, `height=\"${size}\"`)\n .replace(\/stroke=\"currentColor\"\/g, `stroke=\"${color}\"`);\n }\n\n \/\/ Centralized nonce management for PWA\n \/\/ These nonces are valid for 7 days but we refresh them proactively\n let nonceStore = {\n booking: '27a783d588',\n app: '667e7f7f5b',\n lastRefresh: Date.now()\n };\n\n \/\/ For backwards compatibility\n let currentNonce = nonceStore.booking;\n\n \/\/ Function to refresh all nonces\n function refreshNonce() {\n return fetch('https:\/\/reserve.samuraiyakiniku.com\/wp-admin\/admin-ajax.php', {\n method: 'POST',\n headers: {\n 'Content-Type': 'application\/x-www-form-urlencoded',\n },\n body: new URLSearchParams({\n action: 'rls_refresh_nonce'\n })\n })\n .then(response => response.json())\n .then(data => {\n if (data.success) {\n nonceStore.booking = data.data.booking_nonce || data.data.nonce;\n nonceStore.app = data.data.app_nonce || nonceStore.app;\n nonceStore.lastRefresh = Date.now();\n currentNonce = nonceStore.booking; \/\/ Backwards compatibility\n console.log('\u2705 All nonces refreshed successfully');\n return currentNonce;\n } else {\n console.error('\u274c Failed to refresh nonce');\n return currentNonce;\n }\n })\n .catch(error => {\n console.error('\u274c Error refreshing nonce:', error);\n return currentNonce;\n });\n }\n\n \/\/ Get the appropriate nonce for a given action\n function getNonceForAction(action) {\n const appActions = ['get_customer_activity', 'rls_update_birthday', 'rls_update_name', 'rls_update_email'];\n if (appActions.includes(action)) {\n return nonceStore.app;\n }\n return nonceStore.booking;\n }\n\n \/\/ Proactive nonce refresh - refresh every 6 hours to avoid expiry\n \/\/ Nonces are valid for 7 days, refreshing every 6 hours gives plenty of buffer\n const NONCE_REFRESH_INTERVAL = 6 * 60 * 60 * 1000; \/\/ 6 hours in ms\n\n function checkAndRefreshNonce() {\n const timeSinceRefresh = Date.now() - nonceStore.lastRefresh;\n if (timeSinceRefresh > NONCE_REFRESH_INTERVAL) {\n console.log('\ud83d\udd04 Proactively refreshing nonces (last refresh: ' + Math.round(timeSinceRefresh \/ 3600000) + ' hours ago)');\n refreshNonce();\n }\n }\n\n \/\/ Check nonce freshness on page visibility change (when user returns to app)\n document.addEventListener('visibilitychange', function() {\n if (document.visibilityState === 'visible') {\n checkAndRefreshNonce();\n }\n });\n\n \/\/ Also check periodically while app is open\n setInterval(checkAndRefreshNonce, 60 * 60 * 1000); \/\/ Check every hour\n\n \/\/ Function to make AJAX request with automatic nonce refresh on failure\n function makeAjaxRequest(url, params, retryCount = 0) {\n \/\/ Use appropriate nonce for the action\n const action = params.action || '';\n params.nonce = getNonceForAction(action);\n\n \/\/ Include session token for database-backed authentication\n const sessionToken = localStorage.getItem('loyalty_session_token');\n if (sessionToken) {\n params.session_token = sessionToken;\n }\n\n return fetch(url, {\n method: 'POST',\n headers: {\n 'Content-Type': 'application\/x-www-form-urlencoded',\n },\n body: new URLSearchParams(params)\n })\n .then(response => response.json())\n .then(data => {\n \/\/ Check if it's a nonce failure - handle various error messages\n const isNonceError = !data.success && data.data &&\n (\n (data.data.message && (\n data.data.message.includes('Security check failed') ||\n data.data.message.includes('nonce') ||\n data.data.message.includes('Invalid security token')\n )) ||\n data.data.code === 'invalid_nonce' ||\n data.data.code === 'nonce_expired'\n );\n\n if (isNonceError && retryCount < 1) {\n console.log('\ud83d\udd04 Security check failed, refreshing nonce and retrying...');\n return refreshNonce().then(() => {\n \/\/ Update the params with new nonce for retry\n params.nonce = getNonceForAction(action);\n return makeAjaxRequest(url, params, retryCount + 1);\n });\n }\n return data;\n });\n }\n\n function checkBookingCampaign(date, branchCode, partySize) {\n console.log('Checking booking campaign for:', { date, branchCode, partySize });\n\n \/\/ Clear previous campaign display\n hideCampaignInfo();\n currentCampaign = null;\n currentCampaignCapacity = null;\n\n makeAjaxRequest('https:\/\/reserve.samuraiyakiniku.com\/wp-admin\/admin-ajax.php', {\n action: 'rls_get_campaign_for_date',\n date: date,\n branch_code: branchCode\n })\n .then(data => {\n console.log('Campaign check response:', data);\n\n if (data.success && data.data.campaign) {\n const campaign = data.data.campaign;\n const minimumPax = parseInt(campaign.minimum_pax) || 1;\n\n \/\/ Check minimum pax requirement first\n if (partySize < minimumPax) {\n \/\/ Party size is below minimum - show minimum pax message and prevent campaign booking\n currentCampaign = null; \/\/ Clear campaign data for regular booking\n showCampaignMinimumPaxMessage(data.data, partySize, minimumPax);\n console.log(`Party size ${partySize} is below minimum ${minimumPax} - allowing regular booking instead`);\n } else if (campaign.status === 'completed') {\n \/\/ Campaign is completed - show full message but allow regular booking\n currentCampaign = null; \/\/ Clear campaign data for regular booking\n showCampaignFullMessage(data.data, partySize);\n console.log('Campaign is completed - allowing regular booking instead');\n } else if (data.data.is_full) {\n \/\/ Campaign is completely full - show full message but allow regular booking\n currentCampaign = null; \/\/ Clear campaign data for regular booking\n showCampaignFullMessage(data.data, partySize);\n console.log('Campaign is completely full - allowing regular booking instead');\n } else if (data.data.available_capacity < partySize) {\n \/\/ Campaign has some capacity but not enough for this party size\n currentCampaign = null; \/\/ Clear campaign data for regular booking\n showCampaignInsufficientCapacity(data.data, partySize);\n console.log('Campaign has insufficient capacity for party size - allowing regular booking instead');\n } else {\n \/\/ Campaign has sufficient capacity and meets minimum pax - show campaign info and set as active\n currentCampaign = data.data;\n currentCampaignCapacity = data.data.available_capacity;\n showCampaignInfo(data.data, partySize);\n console.log('Active campaign with sufficient capacity found:', data.data.campaign.name);\n }\n } else {\n \/\/ No campaign found, allow regular booking\n console.log('No campaign found for date:', date);\n }\n\n \/\/ Continue with normal time slot loading (always load time slots)\n loadTimeSlots(date, partySize, branchCode);\n })\n .catch(error => {\n console.error('Error checking campaign:', error);\n \/\/ Continue with normal time slot loading on error\n loadTimeSlots(date, partySize, branchCode);\n });\n }\n\n function showCampaignInfo(campaignData, partySize) {\n const campaign = campaignData.campaign;\n const availableCapacity = campaignData.available_capacity;\n const progressPercentage = campaignData.progress_percentage;\n\n \/\/ Create campaign info display - Airbnb light theme style\n let campaignHtml = `\n <div id=\"campaignInfo\" class=\"airbnb-campaign-banner\">\n <div style=\"display: flex; align-items: flex-start; gap: 12px;\">\n <div style=\"color: #e00b41;\"><svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><circle cx=\"12\" cy=\"12\" r=\"10\"\/><circle cx=\"12\" cy=\"12\" r=\"6\"\/><circle cx=\"12\" cy=\"12\" r=\"2\"\/><\/svg><\/div>\n <div style=\"flex: 1;\">\n <h4>${campaign.name}<\/h4>\n <p>${campaign.description || 'Special limited-time campaign'}<\/p>\n <div style=\"display: flex; gap: 16px; margin-top: 8px; font-size: 13px; color: #222;\">\n <span><strong>${availableCapacity}<\/strong> spots left<\/span>\n ${campaign.minimum_pax > 1 ? `<span>Min <strong>${campaign.minimum_pax}<\/strong> guests<\/span>` : ''}\n <\/div>\n <div class=\"airbnb-campaign-progress\">\n <div class=\"airbnb-campaign-progress-fill\" style=\"width: ${progressPercentage}%\"><\/div>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n `;\n\n \/\/ Insert into campaign banner container or after date field\n const bannerContainer = document.getElementById('campaignBannerContainer');\n const existingCampaignInfo = document.getElementById('campaignInfo');\n if (existingCampaignInfo) {\n existingCampaignInfo.remove();\n }\n\n if (bannerContainer) {\n bannerContainer.innerHTML = campaignHtml;\n } else {\n \/\/ Fallback: insert after date field\n const dateField = document.getElementById('createBookingDate').parentElement;\n dateField.insertAdjacentHTML('afterend', campaignHtml);\n }\n\n \/\/ Update party size button states based on campaign capacity and minimum pax\n const currentPartySize = parseInt(document.getElementById('createPartySizeValue')?.textContent || '1');\n const minimumPax = parseInt(campaign.minimum_pax) || 1;\n updatePartySizeButtonStates(currentPartySize, availableCapacity, minimumPax);\n }\n\n function showCampaignFullMessage(campaignData) {\n const campaign = campaignData.campaign;\n\n let fullMessageHtml = `\n <div id=\"campaignFullMessage\" style=\"background: #fef2f2; border: 1px solid #fecaca; padding: 16px; border-radius: 12px; margin-bottom: 24px;\">\n <div style=\"display: flex; align-items: flex-start; gap: 12px;\">\n <div style=\"color: #dc2626;\"><svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"m21.73 18-8-14a2 2 0 0 0-3.48 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3Z\"\/><line x1=\"12\" y1=\"9\" x2=\"12\" y2=\"13\"\/><line x1=\"12\" y1=\"17\" x2=\"12.01\" y2=\"17\"\/><\/svg><\/div>\n <div>\n <h4 style=\"margin: 0 0 4px; font-size: 14px; font-weight: 600; color: #991b1b;\">Campaign Full<\/h4>\n <p style=\"margin: 0 0 8px; font-size: 13px; color: #7f1d1d;\">${campaign.name} has reached capacity (${campaign.current_bookings}\/${campaign.total_capacity})<\/p>\n <p style=\"margin: 0; font-size: 13px; color: #717171;\">You can still make a regular booking for this date.<\/p>\n <\/div>\n <\/div>\n <\/div>\n `;\n\n \/\/ Insert into campaign banner container or after date field\n const bannerContainer = document.getElementById('campaignBannerContainer');\n const existingMessage = document.getElementById('campaignFullMessage');\n if (existingMessage) {\n existingMessage.remove();\n }\n\n if (bannerContainer) {\n bannerContainer.innerHTML = fullMessageHtml;\n } else {\n const dateField = document.getElementById('createBookingDate').parentElement;\n dateField.insertAdjacentHTML('afterend', fullMessageHtml);\n }\n\n \/\/ Reset party size button states to default (no campaign limits)\n const currentPartySize = parseInt(document.getElementById('createPartySizeValue')?.textContent || '1');\n updatePartySizeButtonStates(currentPartySize, 20);\n }\n\n function showCampaignInsufficientCapacity(campaignData, partySize) {\n const campaign = campaignData.campaign;\n const availableCapacity = campaignData.available_capacity;\n\n let insufficientCapacityHtml = `\n <div id=\"campaignFullMessage\" style=\"background: #eff6ff; border: 1px solid #bfdbfe; padding: 16px; border-radius: 12px; margin-bottom: 24px;\">\n <div style=\"display: flex; align-items: flex-start; gap: 12px;\">\n <div style=\"color: #2563eb;\"><svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><circle cx=\"12\" cy=\"12\" r=\"10\"\/><line x1=\"12\" y1=\"16\" x2=\"12\" y2=\"12\"\/><line x1=\"12\" y1=\"8\" x2=\"12.01\" y2=\"8\"\/><\/svg><\/div>\n <div>\n <h4 style=\"margin: 0 0 4px; font-size: 14px; font-weight: 600; color: #1e40af;\">Limited Campaign Spots<\/h4>\n <p style=\"margin: 0 0 8px; font-size: 13px; color: #1e3a8a;\">${campaign.name} has only ${availableCapacity} spots left (you need ${partySize})<\/p>\n <p style=\"margin: 0; font-size: 13px; color: #717171;\">Reduce party size or continue with regular booking.<\/p>\n <\/div>\n <\/div>\n <\/div>\n `;\n\n \/\/ Insert into campaign banner container or after date field\n const bannerContainer = document.getElementById('campaignBannerContainer');\n const existingMessage = document.getElementById('campaignFullMessage');\n if (existingMessage) {\n existingMessage.remove();\n }\n\n if (bannerContainer) {\n bannerContainer.innerHTML = insufficientCapacityHtml;\n } else {\n const dateField = document.getElementById('createBookingDate').parentElement;\n dateField.insertAdjacentHTML('afterend', insufficientCapacityHtml);\n }\n\n \/\/ Reset party size button states to default (no campaign limits for regular booking)\n const currentPartySize = parseInt(document.getElementById('createPartySizeValue')?.textContent || '1');\n updatePartySizeButtonStates(currentPartySize, 20);\n }\n\n function showCampaignMinimumPaxMessage(campaignData, partySize, minimumPax) {\n const campaign = campaignData.campaign;\n\n let minimumPaxHtml = `\n <div id=\"campaignFullMessage\" style=\"background: #fffbeb; border: 1px solid #fde68a; padding: 16px; border-radius: 12px; margin-bottom: 24px;\">\n <div style=\"display: flex; align-items: flex-start; gap: 12px;\">\n <div style=\"color: #d97706;\"><svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2\"\/><circle cx=\"9\" cy=\"7\" r=\"4\"\/><path d=\"M22 21v-2a4 4 0 0 0-3-3.87\"\/><path d=\"M16 3.13a4 4 0 0 1 0 7.75\"\/><\/svg><\/div>\n <div>\n <h4 style=\"margin: 0 0 4px; font-size: 14px; font-weight: 600; color: #92400e;\">Minimum ${minimumPax} Guests Required<\/h4>\n <p style=\"margin: 0 0 8px; font-size: 13px; color: #78350f;\">${campaign.name} requires at least ${minimumPax} people per booking.<\/p>\n <p style=\"margin: 0; font-size: 13px; color: #717171;\">Increase party size or continue with regular booking.<\/p>\n <\/div>\n <\/div>\n <\/div>\n `;\n\n \/\/ Insert into campaign banner container or after date field\n const bannerContainer = document.getElementById('campaignBannerContainer');\n const existingMessage = document.getElementById('campaignFullMessage');\n if (existingMessage) {\n existingMessage.remove();\n }\n\n if (bannerContainer) {\n bannerContainer.innerHTML = minimumPaxHtml;\n } else {\n const dateField = document.getElementById('createBookingDate').parentElement;\n dateField.insertAdjacentHTML('afterend', minimumPaxHtml);\n }\n\n \/\/ Reset party size button states to default (no campaign limits for regular booking)\n const currentPartySize = parseInt(document.getElementById('createPartySizeValue')?.textContent || '1');\n updatePartySizeButtonStates(currentPartySize, 20);\n }\n\n function hideCampaignInfo() {\n const campaignInfo = document.getElementById('campaignInfo');\n const campaignFullMessage = document.getElementById('campaignFullMessage');\n const bannerContainer = document.getElementById('campaignBannerContainer');\n\n if (campaignInfo) campaignInfo.remove();\n if (campaignFullMessage) campaignFullMessage.remove();\n if (bannerContainer) bannerContainer.innerHTML = '';\n\n \/\/ Reset party size button states to default when hiding campaign info\n hidePartySizeLimitIndicator();\n const currentPartySize = parseInt(document.getElementById('createPartySizeValue')?.textContent || '1');\n updatePartySizeButtonStates(currentPartySize, 20);\n }\n\n function loadTimeSlots(date, partySize, branchCode) {\n \/\/ This is the original time slot loading logic\n const timeSelect = document.getElementById('createBookingTime');\n\n console.log('Loading time slots for:', { date, partySize, branchCode });\n timeSelect.innerHTML = '<option value=\"\">Loading time slots...<\/option>';\n\n makeAjaxRequest('https:\/\/reserve.samuraiyakiniku.com\/wp-admin\/admin-ajax.php', {\n action: 'rls_get_available_time_slots',\n branch_code: branchCode,\n date: date,\n party_size: partySize\n })\n .then(data => {\n console.log('Time slots response:', data);\n\n \/\/ Handle nested data structure: data.data.data.time_slots\n const timeSlots = data.success && data.data && data.data.data && data.data.data.time_slots\n ? data.data.data.time_slots\n : (data.success && data.data && data.data.time_slots ? data.data.time_slots : null);\n\n if (timeSlots && timeSlots.length > 0) {\n timeSelect.innerHTML = '<option value=\"\">Select a time...<\/option>';\n timeSlots.forEach(slot => {\n const option = document.createElement('option');\n option.value = slot.time;\n option.textContent = (slot.display_time || slot.time) + (slot.available_tables ? ` (${slot.available_tables} tables)` : '');\n timeSelect.appendChild(option);\n });\n } else {\n timeSelect.innerHTML = '<option value=\"\">No time slots available<\/option>';\n console.log('No time slots found in response:', data);\n }\n validateCreateBookingForm();\n })\n .catch(error => {\n console.error('Error loading time slots:', error);\n timeSelect.innerHTML = '<option value=\"\">Error loading time slots<\/option>';\n });\n }\n\n function initializeApp() {\n console.log('Initializing app...');\n\n \/\/ Check for payment status in URL parameters\n checkPaymentStatus();\n\n checkExistingSession();\n\n \/\/ Check if QR library is loaded\n console.log('Page loaded. QRCode library available:', typeof QRCode !== 'undefined');\n\n \/\/ Set up all event listeners\n console.log('About to setup event listeners...');\n setupEventListeners();\n console.log('Event listeners setup complete.');\n }\n\n \/\/ Refresh data when page becomes visible (handles tab switching)\n document.addEventListener('visibilitychange', function() {\n if (!document.hidden) {\n if (currentCustomer) {\n refreshCustomerData();\n }\n }\n });\n\n \/\/ Refresh data when page gains focus\n window.addEventListener('focus', function() {\n if (currentCustomer) {\n refreshCustomerData();\n }\n });\n\n console.log('=== DEFINING FUNCTIONS ===');\n\n function checkExistingSession() {\n const savedCustomer = localStorage.getItem('loyalty_customer');\n const sessionExpiry = localStorage.getItem('loyalty_session_expiry');\n\n if (savedCustomer) {\n if (sessionExpiry) {\n const now = new Date().getTime();\n const expiry = parseInt(sessionExpiry);\n\n \/\/ Check if session is still valid (365 days \/ 1 year)\n if (now < expiry) {\n currentCustomer = JSON.parse(savedCustomer);\n showDashboard();\n updateCustomerInfo();\n return;\n }\n }\n }\n\n \/\/ Clear expired session\n clearSession();\n }\n\n function saveSession(customer) {\n const expiry = new Date().getTime() + (365 * 24 * 60 * 60 * 1000); \/\/ 365 days (1 year)\n localStorage.setItem('loyalty_customer', JSON.stringify(customer));\n localStorage.setItem('loyalty_session_expiry', expiry.toString());\n\n \/\/ Store session token separately for security\n if (customer.session_token) {\n localStorage.setItem('loyalty_session_token', customer.session_token);\n console.log('\u2705 Session token stored securely');\n }\n }\n\n function clearSession() {\n localStorage.removeItem('loyalty_customer');\n localStorage.removeItem('loyalty_session_expiry');\n localStorage.removeItem('loyalty_session_token');\n }\n\n \/\/ Helper function to add session token to FormData\n function addSessionToken(formData) {\n const sessionToken = localStorage.getItem('loyalty_session_token');\n if (sessionToken) {\n formData.append('session_token', sessionToken);\n }\n return formData;\n }\n\n function setupEventListeners() {\n console.log('Setting up event listeners...');\n\n \/\/ Check if elements exist\n const sendCodeBtn = document.getElementById('sendCodeBtn');\n const verifyBtn = document.getElementById('verifyBtn');\n const phoneInput = document.getElementById('phoneInput');\n const codeInput = document.getElementById('codeInput');\n const resendBtn = document.getElementById('resendBtn');\n const backToPhone = document.getElementById('backToPhone');\n\n console.log('Elements found:', {\n sendCodeBtn: !!sendCodeBtn,\n verifyBtn: !!verifyBtn,\n phoneInput: !!phoneInput,\n codeInput: !!codeInput,\n resendBtn: !!resendBtn,\n backToPhone: !!backToPhone\n });\n\n if (!sendCodeBtn) {\n console.error('Critical: sendCodeBtn element not found! Login will not work.');\n \/\/ Try to find it with a different method\n const allButtons = document.querySelectorAll('button');\n console.log('All buttons found:', allButtons.length);\n allButtons.forEach((btn, index) => {\n console.log(`Button ${index}:`, btn.id, btn.className, btn.textContent);\n });\n return;\n }\n\n \/\/ Send verification code\n sendCodeBtn.addEventListener('click', function() {\n console.log('Send code button clicked!');\n const phone = document.getElementById('phoneInput').value.trim();\n\n if (!phone) {\n showPhoneMessage('Please enter your phone number', 'error');\n return;\n }\n\n sendVerificationCode(phone);\n });\n\n \/\/ Verify code\n document.getElementById('verifyBtn').addEventListener('click', function() {\n const code = document.getElementById('codeInput').value.trim();\n\n if (!code || code.length !== 6) {\n showVerificationMessage('Please enter the 6-digit verification code', 'error');\n return;\n }\n\n verifyCode(currentPhone, code);\n });\n\n \/\/ Resend code\n document.getElementById('resendBtn').addEventListener('click', function() {\n if (resendCountdown > 0) return;\n sendVerificationCode(currentPhone);\n });\n\n \/\/ Back to phone step\n document.getElementById('backToPhone').addEventListener('click', function(e) {\n e.preventDefault();\n showPhoneStep();\n });\n\n \/\/ Auto-format phone input - numbers only\n document.getElementById('phoneInput').addEventListener('input', function(e) {\n let value = e.target.value.replace(\/\\D\/g, '');\n if (value.length > 15) value = value.slice(0, 15);\n e.target.value = value;\n });\n\n \/\/ Enter key support\n document.getElementById('phoneInput').addEventListener('keypress', function(e) {\n if (e.key === 'Enter') {\n document.getElementById('sendCodeBtn').click();\n }\n });\n\n document.getElementById('codeInput').addEventListener('keypress', function(e) {\n if (e.key === 'Enter') {\n document.getElementById('verifyBtn').click();\n }\n });\n\n \/\/ Auto-format verification code input\n document.getElementById('codeInput').addEventListener('input', function(e) {\n let value = e.target.value.replace(\/\\D\/g, '');\n if (value.length > 6) value = value.slice(0, 6);\n e.target.value = value;\n\n \/\/ Auto-verify when 6 digits entered\n if (value.length === 6) {\n setTimeout(() => {\n document.getElementById('verifyBtn').click();\n }, 500);\n }\n });\n\n \/\/ Branch selector event listener (will be attached when element exists)\n setTimeout(() => {\n const branchSelector = document.getElementById('branchSelector');\n if (branchSelector) {\n branchSelector.addEventListener('change', function(e) {\n const selectedBranchId = e.target.value;\n console.log('Branch selector changed:', selectedBranchId);\n\n \/\/ Update branch context (skip auto-reload and selector update to prevent loops)\n setBranchContext(selectedBranchId, true, true);\n\n \/\/ Update only the redeemed selector to keep them in sync\n const redeemedBranchSelector = document.getElementById('redeemedBranchSelector');\n if (redeemedBranchSelector) {\n redeemedBranchSelector.value = selectedBranchId || '';\n }\n\n \/\/ Show loading state\n const rewardsGrid = document.getElementById('rewardsGrid');\n if (rewardsGrid) {\n rewardsGrid.innerHTML = '<div class=\"loading\"><div class=\"spinner\"><\/div><p>Filtering rewards...<\/p><\/div>';\n }\n\n \/\/ Reload rewards with new branch filter\n loadRewards();\n });\n console.log('Branch selector event listener attached');\n }\n\n \/\/ Also attach event listener for redeemed branch selector\n const redeemedBranchSelector = document.getElementById('redeemedBranchSelector');\n if (redeemedBranchSelector) {\n redeemedBranchSelector.addEventListener('change', function(e) {\n const selectedBranchId = e.target.value;\n console.log('Redeemed branch selector changed:', selectedBranchId);\n\n \/\/ Update branch context (skip auto-reload and selector update to prevent loops)\n setBranchContext(selectedBranchId, true, true);\n\n \/\/ Update only the regular selector to keep them in sync\n const branchSelector = document.getElementById('branchSelector');\n if (branchSelector) {\n branchSelector.value = selectedBranchId || '';\n }\n\n \/\/ Show loading state\n const redeemedList = document.getElementById('redeemedList');\n if (redeemedList) {\n redeemedList.innerHTML = '<div class=\"loading\"><div class=\"spinner\"><\/div><p>Filtering rewards...<\/p><\/div>';\n }\n\n \/\/ Reload redeemed rewards with new branch filter\n loadRedeemedRewards();\n });\n console.log('Redeemed branch selector event listener attached');\n }\n }, 1000);\n }\n \n function sendVerificationCode(phone) {\n const sendBtn = document.getElementById('sendCodeBtn');\n const originalText = sendBtn.textContent;\n\n sendBtn.disabled = true;\n sendBtn.textContent = 'Sending...';\n showLoading(true);\n\n \/\/ Use the secure AJAX function with nonce\n makeAjaxRequest('https:\/\/reserve.samuraiyakiniku.com\/wp-admin\/admin-ajax.php', {\n action: 'rls_send_verification',\n phone: phone\n })\n .then(data => {\n showLoading(false);\n sendBtn.disabled = false;\n sendBtn.textContent = originalText;\n\n if (data.success) {\n currentPhone = data.data.phone;\n\n \/\/ Update verification method text based on delivery method\n const deliveryMethod = data.data.delivery_method || 'whatsapp';\n const deliveryText = deliveryMethod === 'sms' ? 'SMS' : 'WhatsApp';\n const verificationMethodText = document.getElementById('verificationMethodText');\n if (verificationMethodText) {\n verificationMethodText.textContent = `We've sent a 6-digit code to your ${deliveryText}`;\n }\n\n showVerificationStep(phone);\n startResendTimer();\n } else {\n showPhoneMessage(data.data.message, 'error');\n }\n })\n .catch(error => {\n showLoading(false);\n sendBtn.disabled = false;\n sendBtn.textContent = originalText;\n showPhoneMessage('Connection error. Please try again.', 'error');\n console.error('Send verification error:', error);\n });\n }\n\n function verifyCode(phone, code) {\n const verifyBtn = document.getElementById('verifyBtn');\n const originalText = verifyBtn.textContent;\n\n verifyBtn.disabled = true;\n verifyBtn.textContent = 'Verifying...';\n showLoading(true);\n\n \/\/ Use the secure AJAX function with nonce\n makeAjaxRequest('https:\/\/reserve.samuraiyakiniku.com\/wp-admin\/admin-ajax.php', {\n action: 'rls_verify_code',\n phone: phone,\n code: code\n })\n .then(data => {\n showLoading(false);\n verifyBtn.disabled = false;\n verifyBtn.textContent = originalText;\n\n if (data.success) {\n currentCustomer = data.data;\n saveSession(currentCustomer); \/\/ Save session to localStorage\n showDashboard();\n updateCustomerInfo();\n } else {\n showVerificationMessage(data.data.message, 'error');\n \/\/ Clear the code input for retry\n document.getElementById('codeInput').value = '';\n document.getElementById('codeInput').focus();\n }\n })\n .catch(error => {\n showLoading(false);\n verifyBtn.disabled = false;\n verifyBtn.textContent = originalText;\n showVerificationMessage('Connection error. Please try again.', 'error');\n console.error('Verification error:', error);\n });\n }\n\n function showPhoneStep() {\n document.getElementById('phoneStep').style.display = 'block';\n document.getElementById('verificationStep').style.display = 'none';\n document.getElementById('phoneInput').focus();\n clearMessages();\n }\n\n function showVerificationStep(phone) {\n document.getElementById('phoneStep').style.display = 'none';\n document.getElementById('verificationStep').style.display = 'block';\n document.getElementById('sentToNumber').textContent = `Code sent to ${formatPhoneDisplay(phone)}`;\n document.getElementById('codeInput').focus();\n clearMessages();\n }\n\n function formatPhoneDisplay(phone) {\n \/\/ Format phone for display (e.g., +60 12-345-6789)\n if (phone.startsWith('60') && phone.length === 11) {\n return `+${phone.slice(0, 2)} ${phone.slice(2, 4)}-${phone.slice(4, 7)}-${phone.slice(7)}`;\n }\n return phone;\n }\n\n function startResendTimer() {\n resendCountdown = 60; \/\/ 60 seconds\n const resendBtn = document.getElementById('resendBtn');\n\n function updateTimer() {\n if (resendCountdown > 0) {\n resendBtn.textContent = `Resend Code (${resendCountdown}s)`;\n resendBtn.disabled = true;\n resendCountdown--;\n resendTimer = setTimeout(updateTimer, 1000);\n } else {\n resendBtn.textContent = 'Resend Code';\n resendBtn.disabled = false;\n clearTimeout(resendTimer);\n }\n }\n\n updateTimer();\n }\n \n function updateCustomerInfo() {\n if (!currentCustomer) return;\n\n \/\/ Debug: Log customer data to console\n console.log('Current customer data:', currentCustomer);\n\n document.getElementById('pointsBalance').textContent = currentCustomer.current_points || currentCustomer.total_points || 0;\n\n \/\/ Construct full name from first_name and last_name\n const fullName = (currentCustomer.first_name || '') + ' ' + (currentCustomer.last_name || '');\n const displayName = fullName.trim() || currentCustomer.full_name || 'Valued Customer';\n\n console.log('Display name:', displayName);\n document.getElementById('customerName').textContent = displayName;\n\n document.getElementById('memberSince').textContent = new Date(currentCustomer.created_at).getFullYear();\n\n const tierBadge = document.getElementById('tierBadge');\n tierBadge.textContent = (currentCustomer.tier || 'bronze').charAt(0).toUpperCase() + (currentCustomer.tier || 'bronze').slice(1);\n tierBadge.className = 'tier-badge tier-' + (currentCustomer.tier || 'bronze');\n\n \/\/ Update tier progress card on main dashboard\n updateTierProgressCard();\n\n \/\/ Update session storage with latest data\n saveSession(currentCustomer);\n }\n\n function updateTierProgressCard() {\n if (!currentCustomer) return;\n\n const tierProgressCard = document.getElementById('tierProgressCard');\n if (!tierProgressCard) return;\n\n const customerTier = currentCustomer.tier || 'bronze';\n const customerLifetimePoints = parseInt(currentCustomer.lifetime_points || 0);\n\n \/\/ Get tier thresholds (these should match your backend settings)\n const tierThresholds = {\n bronze: 0,\n silver: 2000,\n gold: 5000,\n platinum: 10000\n };\n\n tierProgressCard.innerHTML = generateTierProgressSection(customerTier, customerLifetimePoints, tierThresholds);\n }\n\n function refreshCustomerData() {\n if (!currentCustomer || !currentCustomer.phone) return;\n\n console.log('Refreshing customer data...');\n\n makeAjaxRequest('https:\/\/reserve.samuraiyakiniku.com\/wp-admin\/admin-ajax.php', {\n action: 'rls_api_customer',\n phone: currentCustomer.phone\n })\n .then(data => {\n if (data.success) {\n console.log('Fresh customer data:', data.data);\n currentCustomer = data.data;\n updateCustomerInfo();\n\n \/\/ Also refresh PHP session to keep it alive\n refreshSession();\n } else {\n console.error('Failed to refresh customer data:', data.data.message);\n\n \/\/ Check if it's an access denied error (session expired)\n if (data.data && data.data.message && data.data.message.includes('Access denied')) {\n handleSessionExpired();\n }\n }\n })\n .catch(error => {\n console.error('Error refreshing customer data:', error);\n });\n }\n\n \/\/ Refresh session to keep it alive (database-backed)\n function refreshSession() {\n if (!currentCustomer || !currentCustomer.phone) return;\n\n makeAjaxRequest('https:\/\/reserve.samuraiyakiniku.com\/wp-admin\/admin-ajax.php', {\n action: 'rls_refresh_session',\n phone: currentCustomer.phone\n })\n .then(data => {\n if (data.success) {\n const daysRemaining = data.data.days_remaining || Math.floor(data.data.time_remaining \/ (24 * 60 * 60));\n const sessionType = data.data.session_type || 'unknown';\n console.log(`\u2705 Session refreshed (${sessionType}), time remaining:`, daysRemaining, 'days');\n } else {\n console.warn('\u26a0\ufe0f Session refresh failed:', data.data.message);\n\n \/\/ Handle session expiry\n if (data.data && data.data.code === 'SESSION_EXPIRED') {\n handleSessionExpired();\n }\n }\n })\n .catch(error => {\n console.error('Error refreshing session:', error);\n });\n }\n\n \/\/ Handle expired session\n function handleSessionExpired() {\n console.warn('\ud83d\udd12 Session expired, logging out user');\n\n \/\/ Clear local session\n clearSession();\n currentCustomer = null;\n\n \/\/ Show login screen\n document.getElementById('customerDashboard').style.display = 'none';\n document.getElementById('rewardsSection').style.display = 'none';\n document.getElementById('activitySection').style.display = 'none';\n document.getElementById('profileSection').style.display = 'none';\n document.getElementById('bookingsSection').style.display = 'none';\n document.getElementById('loginSection').style.display = 'block';\n\n \/\/ Reset form\n document.getElementById('phoneInput').value = '';\n document.getElementById('codeInput').value = '';\n showPhoneStep();\n\n \/\/ Show user-friendly message\n alert('Your session has expired for security reasons. Please login again.');\n }\n\n \/\/ Periodically refresh session (every 10 minutes)\n setInterval(function() {\n if (currentCustomer && currentCustomer.phone) {\n console.log('\ud83d\udd04 Periodic session refresh...');\n refreshSession();\n }\n }, 10 * 60 * 1000); \/\/ 10 minutes\n\n function logout() {\n if (confirm('Are you sure you want to logout?')) {\n clearSession();\n currentCustomer = null;\n\n \/\/ Reset UI\n document.getElementById('customerDashboard').style.display = 'none';\n document.getElementById('rewardsSection').style.display = 'none';\n document.getElementById('activitySection').style.display = 'none';\n document.getElementById('profileSection').style.display = 'none';\n document.getElementById('loginSection').style.display = 'block';\n\n \/\/ Reset form\n document.getElementById('phoneInput').value = '';\n document.getElementById('codeInput').value = '';\n showPhoneStep();\n clearMessages();\n }\n }\n \n function hideAllSections() {\n \/\/ Hide all sections\n document.getElementById('loginSection').style.display = 'none';\n document.getElementById('rewardsSection').style.display = 'none';\n document.getElementById('activitySection').style.display = 'none';\n document.getElementById('redeemedSection').style.display = 'none';\n document.getElementById('profileSection').style.display = 'none';\n document.getElementById('bookingsSection').style.display = 'none';\n document.getElementById('createBookingSection').style.display = 'none';\n }\n\n function showDashboard() {\n hideAllSections();\n\n \/\/ Show dashboard\n document.getElementById('customerDashboard').style.display = 'block';\n\n \/\/ Update tier progress card when showing dashboard\n updateTierProgressCard();\n\n \/\/ Add smooth transition\n setTimeout(() => {\n document.getElementById('customerDashboard').style.opacity = '1';\n document.getElementById('customerDashboard').style.transform = 'translateY(0)';\n }, 100);\n }\n\n function showRewards() {\n document.getElementById('customerDashboard').style.display = 'none';\n document.getElementById('rewardsSection').style.display = 'block';\n\n \/\/ Update points balance in rewards section\n document.getElementById('rewardsPointsBalance').textContent =\n document.getElementById('pointsBalance').textContent;\n\n \/\/ Initialize branch selector\n initializeBranchSelector();\n\n \/\/ Load rewards\n loadRewards();\n\n \/\/ Trigger animation\n setTimeout(() => {\n document.getElementById('rewardsSection').style.opacity = '1';\n document.getElementById('rewardsSection').style.transform = 'translateY(0)';\n }, 50);\n }\n\n \/\/ Coupon Code Functions\n let validatedCoupon = null;\n\n function validateCouponCode() {\n const couponCode = document.getElementById('couponCodeInput').value.trim().toUpperCase();\n const validateBtn = document.getElementById('validateCouponBtn');\n const resultDiv = document.getElementById('couponValidationResult');\n const redeemBtn = document.getElementById('redeemCouponBtn');\n\n if (!couponCode) {\n showCouponResult('Please enter a coupon code', 'error');\n return;\n }\n\n \/\/ Show loading state\n validateBtn.textContent = 'Validating...';\n validateBtn.disabled = true;\n resultDiv.style.display = 'none';\n redeemBtn.style.display = 'none';\n validatedCoupon = null;\n\n \/\/ Make AJAX request to validate coupon\n makeAjaxRequest('https:\/\/reserve.samuraiyakiniku.com\/wp-admin\/admin-ajax.php', {\n action: 'rls_validate_coupon',\n coupon_code: couponCode,\n customer_id: currentCustomer.id\n })\n .then(data => {\n validateBtn.textContent = 'Validate';\n validateBtn.disabled = false;\n\n if (data.success) {\n validatedCoupon = {\n code: couponCode,\n reward: data.data.reward\n };\n showCouponResult(\n `Valid! You can claim: ${data.data.reward.title}`,\n 'success'\n );\n redeemBtn.style.display = 'block';\n } else {\n showCouponResult(`${data.data.message}`, 'error');\n }\n })\n .catch(error => {\n console.error('Coupon validation error:', error);\n validateBtn.textContent = 'Validate';\n validateBtn.disabled = false;\n showCouponResult('Error validating coupon code', 'error');\n });\n }\n\n function redeemCouponCode() {\n if (!validatedCoupon) {\n showCouponResult('Please validate the coupon code first', 'error');\n return;\n }\n\n const redeemBtn = document.getElementById('redeemCouponBtn');\n\n \/\/ Show loading state\n redeemBtn.textContent = 'Claiming...';\n redeemBtn.disabled = true;\n\n \/\/ Make AJAX request to redeem coupon\n makeAjaxRequest('https:\/\/reserve.samuraiyakiniku.com\/wp-admin\/admin-ajax.php', {\n action: 'rls_redeem_coupon',\n coupon_code: validatedCoupon.code,\n customer_id: currentCustomer.id\n })\n .then(data => {\n console.log('Coupon redemption response:', data); \/\/ Debug log\n\n redeemBtn.textContent = 'Claim Reward';\n redeemBtn.disabled = false;\n\n if (data.success) {\n console.log('Success path - showing alert'); \/\/ Debug log\n\n \/\/ Use native alert for now - can be replaced with custom modal later\n alert(`Coupon Redeemed Successfully!\\n\\nYou've claimed: ${data.data.reward.title}\\nRedemption Code: ${data.data.redemption_code}\\n\\nShow this code to redeem your reward!`);\n\n \/\/ Clear the form\n document.getElementById('couponCodeInput').value = '';\n document.getElementById('couponValidationResult').style.display = 'none';\n redeemBtn.style.display = 'none';\n validatedCoupon = null;\n\n \/\/ Refresh customer data to update points\/rewards\n refreshCustomerData();\n } else {\n console.log('Error path - showing error'); \/\/ Debug log\n showCouponResult(`${data.data ? data.data.message : data.message}`, 'error');\n }\n })\n .catch(error => {\n console.error('Coupon redemption error:', error);\n redeemBtn.textContent = 'Claim Reward';\n redeemBtn.disabled = false;\n showCouponResult('Error redeeming coupon code', 'error');\n });\n }\n\n function showCouponResult(message, type) {\n const resultDiv = document.getElementById('couponValidationResult');\n resultDiv.textContent = message;\n resultDiv.style.display = 'block';\n\n if (type === 'success') {\n resultDiv.style.background = 'rgba(40, 167, 69, 0.2)';\n resultDiv.style.border = '1px solid rgba(40, 167, 69, 0.3)';\n resultDiv.style.color = '#ffffff';\n } else {\n resultDiv.style.background = 'rgba(220, 53, 69, 0.2)';\n resultDiv.style.border = '1px solid rgba(220, 53, 69, 0.3)';\n resultDiv.style.color = '#ffffff';\n }\n }\n\n \/\/ Add enter key support for coupon input\n document.addEventListener('DOMContentLoaded', function() {\n const couponInput = document.getElementById('couponCodeInput');\n if (couponInput) {\n couponInput.addEventListener('keypress', function(e) {\n if (e.key === 'Enter') {\n validateCouponCode();\n }\n });\n\n \/\/ Auto-uppercase input\n couponInput.addEventListener('input', function(e) {\n e.target.value = e.target.value.toUpperCase();\n });\n }\n });\n\n function showHistory() {\n document.getElementById('customerDashboard').style.display = 'none';\n document.getElementById('activitySection').style.display = 'block';\n\n \/\/ Load activity\n loadActivity();\n\n \/\/ Trigger animation\n setTimeout(() => {\n document.getElementById('activitySection').style.opacity = '1';\n document.getElementById('activitySection').style.transform = 'translateY(0)';\n }, 50);\n }\n\n function showLocations() {\n \/\/ For now, show a simple alert - can be expanded later\n alert('Locations feature coming soon!\\n\\nWe\\'re working on adding restaurant location finder.');\n }\n\n function showRedeemed() {\n document.getElementById('customerDashboard').style.display = 'none';\n document.getElementById('redeemedSection').style.display = 'block';\n\n \/\/ Initialize branch selector for redeemed rewards\n initializeRedeemedBranchSelector();\n\n \/\/ Load redeemed rewards\n loadRedeemedRewards();\n\n \/\/ Trigger animation\n setTimeout(() => {\n document.getElementById('redeemedSection').style.opacity = '1';\n document.getElementById('redeemedSection').style.transform = 'translateY(0)';\n }, 50);\n }\n\n function showProfile() {\n document.getElementById('customerDashboard').style.display = 'none';\n document.getElementById('profileSection').style.display = 'block';\n\n \/\/ Load profile\n loadProfile();\n\n \/\/ Trigger animation\n setTimeout(() => {\n document.getElementById('profileSection').style.opacity = '1';\n document.getElementById('profileSection').style.transform = 'translateY(0)';\n }, 50);\n }\n\n \/\/ Show\/hide install button based on app installation status\n function updateInstallButtonVisibility() {\n const installButton = document.getElementById('installButton');\n if (installButton) {\n if (isAppInstalled()) {\n installButton.style.display = 'none';\n } else {\n installButton.style.display = 'block';\n }\n }\n }\n\n\n\n function getBranchContext() {\n \/\/ Try to get branch ID from URL parameter first\n const urlParams = new URLSearchParams(window.location.search);\n const branchFromUrl = urlParams.get('branch_id');\n if (branchFromUrl) {\n \/\/ Store in localStorage for future use\n localStorage.setItem('loyalty_branch_id', branchFromUrl);\n return parseInt(branchFromUrl);\n }\n\n \/\/ Fall back to localStorage\n const branchFromStorage = localStorage.getItem('loyalty_branch_id');\n if (branchFromStorage) {\n return parseInt(branchFromStorage);\n }\n\n \/\/ No branch context available\n return null;\n }\n\n function setBranchContext(branchId, skipReload = false, skipSelectorUpdate = false) {\n if (branchId) {\n localStorage.setItem('loyalty_branch_id', branchId);\n } else {\n localStorage.removeItem('loyalty_branch_id');\n }\n\n \/\/ Update both branch selectors if they exist (unless skipped to prevent event loops)\n if (!skipSelectorUpdate) {\n const branchSelector = document.getElementById('branchSelector');\n if (branchSelector) {\n branchSelector.value = branchId || '';\n }\n\n const redeemedBranchSelector = document.getElementById('redeemedBranchSelector');\n if (redeemedBranchSelector) {\n redeemedBranchSelector.value = branchId || '';\n }\n }\n\n \/\/ Reload rewards to reflect branch-specific availability (unless skipped)\n if (currentCustomer && !skipReload) {\n \/\/ Only reload regular rewards if we're on the rewards section\n const rewardsSection = document.getElementById('rewardsSection');\n if (rewardsSection && rewardsSection.style.display !== 'none') {\n loadRewards();\n }\n }\n }\n\n function populateBranchSelector(branches, integrationStatus = 'fallback') {\n const branchSelector = document.getElementById('branchSelector');\n const statusElement = document.getElementById('branchSelectorStatus');\n\n if (!branchSelector || !statusElement) return;\n\n \/\/ Clear existing options except \"All Branches\"\n branchSelector.innerHTML = '<option value=\"\">All Branches<\/option>';\n\n \/\/ Add branch options\n Object.entries(branches).forEach(([branchId, branchName]) => {\n const option = document.createElement('option');\n option.value = branchId;\n option.textContent = branchName;\n branchSelector.appendChild(option);\n });\n\n \/\/ Update status\n const statusMessages = {\n 'hq_connected': 'Connected to HQ Dashboard',\n 'fallback': 'Using local branch data',\n 'error': 'Branch data unavailable'\n };\n\n const statusClasses = {\n 'hq_connected': 'status-connected',\n 'fallback': 'status-fallback',\n 'error': 'status-error'\n };\n\n statusElement.textContent = statusMessages[integrationStatus] || statusMessages.fallback;\n statusElement.className = statusClasses[integrationStatus] || statusClasses.fallback;\n\n \/\/ Set current branch selection\n const currentBranchId = getBranchContext();\n if (currentBranchId) {\n branchSelector.value = currentBranchId;\n }\n\n console.log('Branch selector populated:', Object.keys(branches).length, 'branches');\n }\n\n function initializeBranchSelector() {\n \/\/ Get branch data - try HQ dashboard first, then fallback\n let branches = {};\n let integrationStatus = 'fallback';\n\n \/\/ Try to get branches from a rewards API call (which includes branch info)\n makeAjaxRequest('https:\/\/reserve.samuraiyakiniku.com\/wp-admin\/admin-ajax.php', {\n action: 'rls_api_rewards',\n customer_id: currentCustomer?.id || 1,\n include_branch_info: '1'\n })\n .then(data => {\n if (data.success && data.data.length > 0) {\n \/\/ Extract branch names from first reward (they all have the same branch info)\n const firstReward = data.data[0];\n if (firstReward.branch_names) {\n branches = firstReward.branch_names;\n integrationStatus = 'hq_connected';\n }\n }\n\n \/\/ Fallback to default branches if no branch info found\n if (Object.keys(branches).length === 0) {\n branches = {\n 1: 'Main Branch',\n 2: 'Downtown Branch',\n 3: 'Mall Branch'\n };\n integrationStatus = 'fallback';\n }\n\n populateBranchSelector(branches, integrationStatus);\n })\n .catch(error => {\n console.error('Error loading branch data:', error);\n \/\/ Use default branches on error\n branches = {\n 1: 'Main Branch',\n 2: 'Downtown Branch',\n 3: 'Mall Branch'\n };\n populateBranchSelector(branches, 'error');\n });\n }\n\n function initializeRedeemedBranchSelector() {\n \/\/ Use the same branch data as the regular rewards selector\n \/\/ This avoids duplicate API calls and ensures consistency\n let branches = {};\n let integrationStatus = 'fallback';\n\n \/\/ Try to get branches from a rewards API call (just for branch info, not the actual rewards)\n makeAjaxRequest('https:\/\/reserve.samuraiyakiniku.com\/wp-admin\/admin-ajax.php', {\n action: 'rls_api_rewards',\n customer_id: currentCustomer?.id || 1,\n include_branch_info: '1'\n })\n .then(data => {\n if (data.success && data.data.length > 0) {\n const firstReward = data.data[0];\n if (firstReward.branch_names) {\n branches = firstReward.branch_names;\n integrationStatus = 'hq_connected';\n }\n }\n\n if (Object.keys(branches).length === 0) {\n branches = {\n 1: 'Main Branch',\n 2: 'Downtown Branch',\n 3: 'Mall Branch'\n };\n integrationStatus = 'fallback';\n }\n\n populateRedeemedBranchSelector(branches, integrationStatus);\n })\n .catch(error => {\n console.error('Error loading branch data for redeemed section:', error);\n branches = {\n 1: 'Main Branch',\n 2: 'Downtown Branch',\n 3: 'Mall Branch'\n };\n populateRedeemedBranchSelector(branches, 'error');\n });\n }\n\n function populateRedeemedBranchSelector(branches, integrationStatus = 'fallback') {\n const branchSelector = document.getElementById('redeemedBranchSelector');\n const statusElement = document.getElementById('redeemedBranchSelectorStatus');\n\n if (!branchSelector || !statusElement) return;\n\n \/\/ Clear existing options except \"All Branches\"\n branchSelector.innerHTML = '<option value=\"\">All Branches<\/option>';\n\n \/\/ Add branch options\n Object.entries(branches).forEach(([branchId, branchName]) => {\n const option = document.createElement('option');\n option.value = branchId;\n option.textContent = branchName;\n branchSelector.appendChild(option);\n });\n\n \/\/ Update status\n const statusMessages = {\n 'hq_connected': 'Connected to HQ Dashboard',\n 'fallback': 'Using local branch data',\n 'error': 'Branch data unavailable'\n };\n\n const statusClasses = {\n 'hq_connected': 'status-connected',\n 'fallback': 'status-fallback',\n 'error': 'status-error'\n };\n\n statusElement.textContent = statusMessages[integrationStatus] || statusMessages.fallback;\n statusElement.className = statusClasses[integrationStatus] || statusClasses.fallback;\n\n \/\/ Set current branch selection\n const currentBranchId = getBranchContext();\n if (currentBranchId) {\n branchSelector.value = currentBranchId;\n }\n\n console.log('Redeemed branch selector populated:', Object.keys(branches).length, 'branches');\n }\n \n function loadRewards() {\n const rewardsGrid = document.getElementById('rewardsGrid');\n rewardsGrid.innerHTML = '<div class=\"loading\"><div class=\"spinner\"><\/div><p>Loading rewards...<\/p><\/div>';\n\n \/\/ Build request params\n const params = {\n action: 'rls_api_rewards',\n customer_id: currentCustomer.id,\n include_branch_info: '1'\n };\n\n \/\/ Always include branch context for availability indicators\n const branchId = getBranchContext();\n if (branchId) {\n params.branch_id = branchId;\n }\n\n makeAjaxRequest('https:\/\/reserve.samuraiyakiniku.com\/wp-admin\/admin-ajax.php', params)\n .then(data => {\n if (data.success) {\n displayRewards(data.data);\n } else {\n rewardsGrid.innerHTML = '<div class=\"error-message\">Failed to load rewards<\/div>';\n }\n })\n .catch(error => {\n rewardsGrid.innerHTML = '<div class=\"error-message\">Connection error<\/div>';\n console.error('Load rewards error:', error);\n });\n }\n\n function displayRewards(rewards) {\n const rewardsGrid = document.getElementById('rewardsGrid');\n const customerPoints = parseInt(currentCustomer.current_points);\n const customerLifetimePoints = parseInt(currentCustomer.lifetime_points || 0);\n const customerTier = currentCustomer.tier || 'bronze';\n const currentBranchId = getBranchContext();\n\n if (rewards.length === 0) {\n rewardsGrid.innerHTML = '<div style=\"text-align: center; padding: 40px; color: rgba(255,255,255,0.6);\">No rewards available yet<\/div>';\n return;\n }\n\n \/\/ Get tier thresholds (these should match your backend settings)\n const tierThresholds = {\n bronze: 0,\n silver: 2000,\n gold: 5000,\n platinum: 10000\n };\n\n \/\/ Sort rewards by tier first, then by points (lowest first), then alphabetically\n const sortedRewards = rewards.sort((a, b) => {\n const tierA = a.min_tier || 'bronze';\n const tierB = b.min_tier || 'bronze';\n\n \/\/ First sort by tier level\n const tierLevelA = getTierLevel(tierA);\n const tierLevelB = getTierLevel(tierB);\n\n if (tierLevelA !== tierLevelB) {\n return tierLevelA - tierLevelB; \/\/ Bronze(1) \u2192 Silver(2) \u2192 Gold(3) \u2192 Platinum(4)\n }\n\n \/\/ If same tier, sort by points required (lowest first)\n const pointsA = parseInt(a.points_required) || 0;\n const pointsB = parseInt(b.points_required) || 0;\n\n if (pointsA !== pointsB) {\n return pointsA - pointsB; \/\/ Lowest points first\n }\n\n \/\/ If same tier and same points, sort alphabetically by title\n return (a.title || '').localeCompare(b.title || '');\n });\n\n let html = '';\n\n \/\/ Display all rewards in single column\n sortedRewards.forEach(reward => {\n const tierUnlocked = getTierLevel(customerTier) >= getTierLevel(reward.min_tier || 'bronze');\n html += generateRewardCard(reward, customerPoints, currentBranchId, tierUnlocked, customerLifetimePoints, tierThresholds);\n });\n\n rewardsGrid.innerHTML = html;\n }\n\n function generateTierProgressSection(customerTier, lifetimePoints, tierThresholds) {\n const currentTierLevel = getTierLevel(customerTier);\n const nextTier = getNextTier(customerTier);\n\n if (!nextTier) {\n \/\/ Already at highest tier\n return `\n <div class=\"tier-progress-section\">\n <div class=\"tier-progress-header\">\n <h3><svg width=\"18\" height=\"18\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" style=\"vertical-align: middle; margin-right: 6px;\"><path d=\"M6 9H4.5a2.5 2.5 0 0 1 0-5H6\"\/><path d=\"M18 9h1.5a2.5 2.5 0 0 0 0-5H18\"\/><path d=\"M4 22h16\"\/><path d=\"M10 14.66V17c0 .55-.47.98-.97 1.21C7.85 18.75 7 20.24 7 22\"\/><path d=\"M14 14.66V17c0 .55.47.98.97 1.21C16.15 18.75 17 20.24 17 22\"\/><path d=\"M18 2H6v7a6 6 0 0 0 12 0V2Z\"\/><\/svg>You've reached the highest tier!<\/h3>\n <p>Enjoy all the premium rewards as a ${customerTier.charAt(0).toUpperCase() + customerTier.slice(1)} member<\/p>\n <\/div>\n <\/div>\n `;\n }\n\n const nextTierThreshold = tierThresholds[nextTier];\n const pointsNeeded = nextTierThreshold - lifetimePoints;\n const progressPercent = Math.min((lifetimePoints \/ nextTierThreshold) * 100, 100);\n\n return `\n <div class=\"tier-progress-section\">\n <div class=\"tier-progress-header\">\n <h3><svg width=\"18\" height=\"18\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" style=\"vertical-align: middle; margin-right: 6px;\"><circle cx=\"12\" cy=\"12\" r=\"10\"\/><circle cx=\"12\" cy=\"12\" r=\"6\"\/><circle cx=\"12\" cy=\"12\" r=\"2\"\/><\/svg>Progress to ${nextTier.charAt(0).toUpperCase() + nextTier.slice(1)} Tier<\/h3>\n <p>${pointsNeeded.toLocaleString()} more lifetime points needed<\/p>\n <\/div>\n <div class=\"tier-progress-bar\">\n <div class=\"tier-progress-fill\" style=\"width: ${progressPercent}%\"><\/div>\n <div class=\"tier-progress-text\">${lifetimePoints.toLocaleString()} \/ ${nextTierThreshold.toLocaleString()}<\/div>\n <\/div>\n <\/div>\n `;\n }\n\n\n\n function generateRewardCard(reward, customerPoints, currentBranchId, tierUnlocked, customerLifetimePoints, tierThresholds) {\n const canRedeem = customerPoints >= reward.points_required && tierUnlocked;\n const pointsNeeded = Math.max(0, reward.points_required - customerPoints);\n\n \/\/ Generate branch availability indicator\n const branchIndicator = getBranchAvailabilityIndicator(reward, currentBranchId);\n const isAvailableAtCurrentBranch = reward.is_available_at_current_branch !== false;\n\n \/\/ Determine card classes\n let cardClasses = ['reward-card'];\n if (!tierUnlocked) cardClasses.push('tier-locked');\n if (!canRedeem && tierUnlocked) cardClasses.push('insufficient');\n if (!isAvailableAtCurrentBranch) cardClasses.push('branch-restricted');\n\n \/\/ Calculate tier unlock requirements if needed\n let tierUnlockMessage = '';\n if (!tierUnlocked) {\n const requiredTier = reward.min_tier || 'bronze';\n const requiredLifetimePoints = tierThresholds[requiredTier];\n const lifetimePointsNeeded = Math.max(0, requiredLifetimePoints - customerLifetimePoints);\n tierUnlockMessage = `\n <div class=\"tier-unlock-indicator\">\n <span class=\"tier-unlock-text\"><svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" style=\"vertical-align: middle; margin-right: 4px;\"><rect x=\"3\" y=\"11\" width=\"18\" height=\"11\" rx=\"2\" ry=\"2\"\/><path d=\"M7 11V7a5 5 0 0 1 10 0v4\"\/><\/svg>Unlock ${requiredTier.charAt(0).toUpperCase() + requiredTier.slice(1)} tier with ${lifetimePointsNeeded.toLocaleString()} more lifetime points<\/span>\n <\/div>\n `;\n }\n\n \/\/ Determine button state and text\n let buttonText, buttonDisabled = '';\n if (!tierUnlocked) {\n buttonText = '<svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" style=\"vertical-align: middle; margin-right: 4px;\"><rect x=\"3\" y=\"11\" width=\"18\" height=\"11\" rx=\"2\" ry=\"2\"\/><path d=\"M7 11V7a5 5 0 0 1 10 0v4\"\/><\/svg>Tier Locked';\n buttonDisabled = 'disabled';\n } else if (!isAvailableAtCurrentBranch) {\n buttonText = 'Not Available Here';\n buttonDisabled = 'disabled';\n } else if (canRedeem) {\n buttonText = 'Redeem';\n } else {\n buttonText = `${pointsNeeded.toLocaleString()} more points`;\n buttonDisabled = 'disabled';\n }\n\n return `\n <div class=\"${cardClasses.join(' ')}\">\n <div class=\"reward-header\">\n <div>\n <div class=\"reward-title\">${reward.title}<\/div>\n <div class=\"reward-type\">${getRewardTypeLabel(reward.reward_type)}<\/div>\n ${branchIndicator}\n <\/div>\n <div class=\"reward-points\">${reward.points_required.toLocaleString()} pts<\/div>\n <\/div>\n <div class=\"reward-description\">${reward.description}<\/div>\n ${tierUnlockMessage}\n ${pointsNeeded > 0 && tierUnlocked ? `\n <div class=\"points-needed-indicator\">\n <span class=\"points-needed-text\"><svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" style=\"vertical-align: middle; margin-right: 4px;\"><circle cx=\"8\" cy=\"8\" r=\"6\"\/><path d=\"M18.09 10.37A6 6 0 1 1 10.34 18\"\/><path d=\"M7 6h1v4\"\/><path d=\"m16.71 13.88.7.71-2.82 2.82\"\/><\/svg>${pointsNeeded.toLocaleString()} more points needed<\/span>\n <div class=\"points-progress-bar\">\n <div class=\"points-progress-fill\" style=\"width: ${Math.min((customerPoints \/ reward.points_required) * 100, 100)}%\"><\/div>\n <\/div>\n <\/div>\n ` : ''}\n <div class=\"reward-footer\">\n <div class=\"reward-tier-badge\">${reward.min_tier.charAt(0).toUpperCase() + reward.min_tier.slice(1)}<\/div>\n <button class=\"redeem-button\" ${buttonDisabled} onclick=\"redeemReward(${reward.id})\">\n ${buttonText}\n <\/button>\n <\/div>\n <\/div>\n `;\n }\n\n function getTierLevel(tier) {\n const levels = { bronze: 1, silver: 2, gold: 3, platinum: 4 };\n return levels[tier] || 1;\n }\n\n function getNextTier(currentTier) {\n const tiers = ['bronze', 'silver', 'gold', 'platinum'];\n const currentIndex = tiers.indexOf(currentTier);\n return currentIndex < tiers.length - 1 ? tiers[currentIndex + 1] : null;\n }\n\n function getRewardTypeLabel(type) {\n const types = {\n 'discount_percent': 'Percentage Discount',\n 'discount_amount': 'Fixed Discount',\n 'free_item': 'Free Item',\n 'voucher': 'Gift Voucher',\n 'experience': 'Special Experience'\n };\n return types[type] || type;\n }\n\n function getBranchAvailabilityIndicator(reward, currentBranchId) {\n const locationIcon = '<svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" style=\"vertical-align: middle; margin-right: 4px;\"><path d=\"M20 10c0 6-8 12-8 12s-8-6-8-12a8 8 0 0 1 16 0Z\"\/><circle cx=\"12\" cy=\"10\" r=\"3\"\/><\/svg>';\n const blockedIcon = '<svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" style=\"vertical-align: middle; margin-right: 4px;\"><circle cx=\"12\" cy=\"12\" r=\"10\"\/><path d=\"m4.93 4.93 14.14 14.14\"\/><\/svg>';\n\n \/\/ If no branch availability info, assume available everywhere\n if (!reward.available_branches || reward.available_branches.length === 0) {\n return `<div class=\"branch-indicator all-branches\">${locationIcon}Available at all branches<\/div>`;\n }\n\n const availableBranches = reward.available_branches;\n const branchNames = reward.branch_names || {};\n\n \/\/ Check if available at current branch\n const isAvailableHere = currentBranchId && availableBranches.includes(parseInt(currentBranchId));\n\n if (availableBranches.length === 1) {\n const branchId = availableBranches[0];\n const branchName = branchNames[branchId] || `Branch ${branchId}`;\n const indicator = isAvailableHere ? locationIcon : blockedIcon;\n const className = isAvailableHere ? 'current-branch' : 'other-branch';\n return `<div class=\"branch-indicator ${className}\">${indicator}Available at ${branchName}<\/div>`;\n } else if (availableBranches.length <= 3) {\n \/\/ Show specific branch names for small lists\n const branchList = availableBranches.map(id => branchNames[id] || `Branch ${id}`).join(', ');\n const indicator = isAvailableHere ? locationIcon : blockedIcon;\n const className = isAvailableHere ? 'current-branch' : 'other-branch';\n return `<div class=\"branch-indicator ${className}\">${indicator}Available at: ${branchList}<\/div>`;\n } else {\n \/\/ Show count for larger lists\n const indicator = isAvailableHere ? locationIcon : blockedIcon;\n const className = isAvailableHere ? 'current-branch' : 'other-branch';\n const statusText = isAvailableHere ? 'Available here' : 'Not available here';\n return `<div class=\"branch-indicator ${className}\">${indicator}${statusText} (${availableBranches.length} branches)<\/div>`;\n }\n }\n\n function redeemReward(rewardId) {\n \/\/ Show confirmation dialog instead of alert\n showConfirmationDialog(\n 'Redeem Reward',\n 'Are you sure you want to redeem this reward? Points will be deducted from your account.',\n () => {\n \/\/ User confirmed, proceed with redemption\n processRedemption(rewardId);\n }\n );\n }\n\n function processRedemption(rewardId) {\n \/\/ Build request params\n const params = {\n action: 'rls_api_redeem_reward',\n customer_id: currentCustomer.id,\n reward_id: rewardId\n };\n\n \/\/ Include branch context if available\n const branchId = getBranchContext();\n if (branchId) {\n params.branch_id = branchId;\n }\n\n makeAjaxRequest('https:\/\/reserve.samuraiyakiniku.com\/wp-admin\/admin-ajax.php', params)\n .then(data => {\n if (data.success) {\n \/\/ Update customer data with fresh info\n if (data.data.customer) {\n currentCustomer = data.data.customer;\n updateCustomerInfo();\n }\n\n \/\/ Show success confirmation dialog\n showRedemptionSuccess(data.data.redemption_code, data.data.message);\n\n \/\/ Refresh rewards list\n loadRewards();\n } else {\n showErrorDialog('Redemption Failed', data.data.message);\n }\n })\n .catch(error => {\n alert('Connection error. Please try again.');\n console.error('Redeem reward error:', error);\n });\n }\n\n function loadActivity() {\n const activityList = document.getElementById('activityList');\n activityList.innerHTML = '<div class=\"loading\"><div class=\"spinner\"><\/div><p>Loading activity...<\/p><\/div>';\n\n if (!currentCustomer) {\n activityList.innerHTML = '<div class=\"empty-state\"><p>Please log in to view your activity<\/p><\/div>';\n return;\n }\n\n \/\/ Load real activity data using centralized AJAX handler\n makeAjaxRequest('https:\/\/reserve.samuraiyakiniku.com\/wp-admin\/admin-ajax.php', {\n action: 'get_customer_activity',\n customer_id: currentCustomer.id\n })\n .then(data => {\n if (data.success && data.data.length > 0) {\n let html = '';\n data.data.forEach(activity => {\n const pointsClass = activity.points > 0 ? 'positive' : 'negative';\n const pointsText = activity.points > 0 ? `+${activity.points}` : activity.points;\n const activityDate = formatActivityDate(activity.created_at);\n const salesInfo = activity.sales_amount > 0 ?\n `<div class=\"activity-sales\">Sales: RM ${parseFloat(activity.sales_amount).toFixed(2)}<\/div>` : '';\n\n \/\/ Default coin icon for activities\n const defaultActivityIcon = '<svg width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><circle cx=\"8\" cy=\"8\" r=\"6\"\/><path d=\"M18.09 10.37A6 6 0 1 1 10.34 18\"\/><path d=\"M7 6h1v4\"\/><path d=\"m16.71 13.88.7.71-2.82 2.82\"\/><\/svg>';\n const activityIcon = activity.activity_icon && !activity.activity_icon.match(\/[\\u{1F300}-\\u{1F9FF}]\/u) ? activity.activity_icon : defaultActivityIcon;\n\n html += `\n <div class=\"activity-item\">\n <div class=\"activity-header\">\n <div class=\"activity-left\">\n <div class=\"activity-icon\">${activityIcon}<\/div>\n <div class=\"activity-content\">\n <div class=\"activity-title\">${activity.description}<\/div>\n <div class=\"activity-date\">${activityDate}<\/div>\n ${salesInfo}\n <\/div>\n <\/div>\n <div class=\"activity-points ${pointsClass}\">${pointsText}<\/div>\n <\/div>\n <\/div>\n `;\n });\n activityList.innerHTML = html;\n } else {\n activityList.innerHTML = '<div class=\"empty-state\"><p>No activity yet. Start earning points!<\/p><\/div>';\n }\n })\n .catch(error => {\n console.error('Error loading activity:', error);\n activityList.innerHTML = '<div class=\"error-state\"><p>Failed to load activity. Please try again.<\/p><\/div>';\n });\n }\n\n function formatActivityDate(dateString) {\n const date = new Date(dateString);\n const now = new Date();\n const diffTime = Math.abs(now - date);\n const diffDays = Math.ceil(diffTime \/ (1000 * 60 * 60 * 24));\n\n if (diffDays === 1) {\n return 'Today, ' + date.toLocaleTimeString([], {hour: '2-digit', minute:'2-digit'});\n } else if (diffDays === 2) {\n return 'Yesterday, ' + date.toLocaleTimeString([], {hour: '2-digit', minute:'2-digit'});\n } else if (diffDays <= 7) {\n return diffDays + ' days ago';\n } else {\n return date.toLocaleDateString();\n }\n }\n\n function loadProfile() {\n const profileContent = document.getElementById('profileContent');\n\n const html = `\n <div style=\"background: #ffffff; border: 1px solid rgba(0,0,0,0.08); border-radius: 16px; padding: 24px; margin-bottom: 20px; box-shadow: 0 2px 8px rgba(0,0,0,0.1);\">\n <h3 style=\"color: #1d1d1f; margin-bottom: 16px; font-size: 20px; font-weight: 600;\">Personal Information<\/h3>\n <div style=\"margin-bottom: 16px;\">\n <strong style=\"color: #1d1d1f; font-size: 16px; font-weight: 600; display: block; margin-bottom: 8px;\">Name:<\/strong>\n <div style=\"display: flex; justify-content: space-between; align-items: center;\">\n <span style=\"color: #86868b; font-size: 16px;\">${currentCustomer.first_name} ${currentCustomer.last_name}<\/span>\n <button onclick=\"showNameEditor()\" style=\"background: linear-gradient(135deg, #DC143C, #B22222); color: white; border: none; padding: 8px 16px; border-radius: 8px; font-size: 14px; font-weight: 600; cursor: pointer; transition: all 0.3s ease;\">\n Edit\n <\/button>\n <\/div>\n <\/div>\n <div style=\"margin-bottom: 16px;\">\n <strong style=\"color: #1d1d1f; font-size: 16px; font-weight: 600; display: block; margin-bottom: 4px;\">Phone:<\/strong>\n <span style=\"color: #86868b; font-size: 16px;\">${currentCustomer.phone}<\/span>\n <\/div>\n <div style=\"margin-bottom: 16px;\">\n <strong style=\"color: #1d1d1f; font-size: 16px; font-weight: 600; display: block; margin-bottom: 8px;\">Email:<\/strong>\n <div style=\"display: flex; justify-content: space-between; align-items: center;\">\n <span style=\"color: #86868b; font-size: 16px;\">${currentCustomer.email || 'Not provided'}<\/span>\n <button onclick=\"showEmailEditor()\" style=\"background: linear-gradient(135deg, #DC143C, #B22222); color: white; border: none; padding: 8px 16px; border-radius: 8px; font-size: 14px; font-weight: 600; cursor: pointer; transition: all 0.3s ease;\">\n ${currentCustomer.email ? 'Edit' : 'Add Email'}\n <\/button>\n <\/div>\n <\/div>\n <div style=\"margin-bottom: 16px;\">\n <strong style=\"color: #1d1d1f; font-size: 16px; font-weight: 600; display: block; margin-bottom: 8px;\">Birthday:<\/strong>\n <div style=\"display: flex; justify-content: space-between; align-items: center;\">\n <span style=\"color: #86868b; font-size: 16px;\" id=\"birthdayDisplay\">\n ${currentCustomer.date_of_birth ? formatBirthday(currentCustomer.date_of_birth) : 'Not set'}\n <\/span>\n <button onclick=\"showBirthdayEditor()\" style=\"background: linear-gradient(135deg, #DC143C, #B22222); color: white; border: none; padding: 8px 16px; border-radius: 8px; font-size: 14px; font-weight: 600; cursor: pointer; transition: all 0.3s ease;\">\n ${currentCustomer.date_of_birth ? 'Edit' : 'Set Birthday'}\n <\/button>\n <\/div>\n <\/div>\n <div style=\"margin-bottom: 0;\">\n <strong style=\"color: #1d1d1f; font-size: 16px; font-weight: 600; display: block; margin-bottom: 4px;\">Member Since:<\/strong>\n <span style=\"color: #86868b; font-size: 16px;\">${new Date(currentCustomer.created_at).toLocaleDateString()}<\/span>\n <\/div>\n <\/div>\n\n <div style=\"background: #ffffff; border: 1px solid rgba(0,0,0,0.08); border-radius: 16px; padding: 24px; box-shadow: 0 2px 8px rgba(0,0,0,0.1);\">\n <h3 style=\"color: #1d1d1f; margin-bottom: 16px; font-size: 20px; font-weight: 600;\">Loyalty Status<\/h3>\n <div style=\"margin-bottom: 16px;\">\n <strong style=\"color: #1d1d1f; font-size: 16px; font-weight: 600; display: block; margin-bottom: 8px;\">Current Tier:<\/strong>\n <span class=\"tier-badge tier-${currentCustomer.tier}\">${currentCustomer.tier.charAt(0).toUpperCase() + currentCustomer.tier.slice(1)}<\/span>\n <\/div>\n <div style=\"margin-bottom: 16px;\">\n <strong style=\"color: #1d1d1f; font-size: 16px; font-weight: 600; display: block; margin-bottom: 4px;\">Total Points:<\/strong>\n <span style=\"color: #86868b; font-size: 16px;\">${currentCustomer.current_points}<\/span>\n <\/div>\n <div style=\"margin-bottom: 0;\">\n <strong style=\"color: #1d1d1f; font-size: 16px; font-weight: 600; display: block; margin-bottom: 4px;\">Lifetime Points:<\/strong>\n <span style=\"color: #86868b; font-size: 16px;\">${currentCustomer.lifetime_points}<\/span>\n <\/div>\n <\/div>\n\n <div style=\"background: #ffffff; border: 1px solid rgba(0,0,0,0.08); border-radius: 16px; padding: 24px; margin-top: 20px; box-shadow: 0 2px 8px rgba(0,0,0,0.1);\">\n <h3 style=\"color: #1d1d1f; margin-bottom: 16px; font-size: 20px; font-weight: 600;\">Account Security<\/h3>\n <div style=\"margin-bottom: 16px;\">\n <strong style=\"color: #1d1d1f; font-size: 16px; font-weight: 600; display: block; margin-bottom: 8px;\">Phone Number:<\/strong>\n <div style=\"display: flex; justify-content: space-between; align-items: center;\">\n <span style=\"color: #86868b; font-size: 16px;\">${currentCustomer.phone}<\/span>\n <button onclick=\"initiatePhoneChange()\" style=\"background: linear-gradient(135deg, #DC143C, #B22222); color: white; border: none; padding: 8px 16px; border-radius: 8px; font-size: 14px; font-weight: 600; cursor: pointer; transition: all 0.3s ease;\">\n Change Phone\n <\/button>\n <\/div>\n <\/div>\n <div style=\"font-size: 13px; color: #86868b; line-height: 1.4;\">\n \ud83d\udd10 Changing your phone number requires verification of both your current and new phone numbers for security.\n <\/div>\n <\/div>\n\n ${isInBrowser() ? `\n <div style=\"background: #ffffff; border: 1px solid rgba(0,0,0,0.08); border-radius: 16px; padding: 24px; margin-top: 20px; box-shadow: 0 2px 8px rgba(0,0,0,0.1);\">\n <h3 style=\"color: #1d1d1f; margin-bottom: 16px; font-size: 20px; font-weight: 600; display: flex; align-items: center; gap: 8px;\"><svg width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><rect x=\"5\" y=\"2\" width=\"14\" height=\"20\" rx=\"2\" ry=\"2\"\/><line x1=\"12\" y1=\"18\" x2=\"12.01\" y2=\"18\"\/><\/svg>Install App<\/h3>\n <div style=\"margin-bottom: 16px;\">\n <p style=\"color: #86868b; font-size: 16px; line-height: 1.5; margin: 0 0 16px 0;\">\n Install the Samurai Yakiniku app on your home screen for:\n <\/p>\n <ul style=\"color: #86868b; font-size: 16px; line-height: 1.8; margin: 0 0 16px 0; padding-left: 0; list-style: none;\">\n <li style=\"display: flex; align-items: center; gap: 8px;\"><svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"#e00b41\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><polygon points=\"13 2 3 14 12 14 11 22 21 10 12 10 13 2\"\/><\/svg>Faster access<\/li>\n <li style=\"display: flex; align-items: center; gap: 8px;\"><svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"#e00b41\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M6 8a6 6 0 0 1 12 0c0 7 3 9 3 9H3s3-2 3-9\"\/><path d=\"M10.3 21a1.94 1.94 0 0 0 3.4 0\"\/><\/svg>Push notifications for rewards<\/li>\n <li style=\"display: flex; align-items: center; gap: 8px;\"><svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"#e00b41\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><rect x=\"5\" y=\"2\" width=\"14\" height=\"20\" rx=\"2\" ry=\"2\"\/><line x1=\"12\" y1=\"18\" x2=\"12.01\" y2=\"18\"\/><\/svg>Native app experience<\/li>\n <li style=\"display: flex; align-items: center; gap: 8px;\"><svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"#e00b41\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"m12 3-1.912 5.813a2 2 0 0 1-1.275 1.275L3 12l5.813 1.912a2 2 0 0 1 1.275 1.275L12 21l1.912-5.813a2 2 0 0 1 1.275-1.275L21 12l-5.813-1.912a2 2 0 0 1-1.275-1.275L12 3Z\"\/><path d=\"M5 3v4\"\/><path d=\"M19 17v4\"\/><path d=\"M3 5h4\"\/><path d=\"M17 19h4\"\/><\/svg>Works offline<\/li>\n <\/ul>\n <\/div>\n <button onclick=\"showInstallPrompt()\" style=\"\n background: linear-gradient(135deg, #e00b41, #ff385c);\n color: white;\n border: none;\n padding: 14px 24px;\n border-radius: 8px;\n font-size: 16px;\n font-weight: 600;\n cursor: pointer;\n transition: all 0.3s ease;\n width: 100%;\n display: flex;\n align-items: center;\n justify-content: center;\n gap: 8px;\n \">\n <svg width=\"18\" height=\"18\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4\"\/><polyline points=\"7 10 12 15 17 10\"\/><line x1=\"12\" y1=\"15\" x2=\"12\" y2=\"3\"\/><\/svg>\n Install App\n <\/button>\n <\/div>\n ` : ''}\n `;\n\n profileContent.innerHTML = html;\n }\n\n function showLoading(show) {\n document.getElementById('loadingIndicator').style.display = show ? 'block' : 'none';\n\n \/\/ Disable appropriate buttons based on current step\n const sendCodeBtn = document.getElementById('sendCodeBtn');\n const verifyBtn = document.getElementById('verifyBtn');\n const resendBtn = document.getElementById('resendBtn');\n\n if (sendCodeBtn) sendCodeBtn.disabled = show;\n if (verifyBtn) verifyBtn.disabled = show;\n if (resendBtn && !show) {\n \/\/ Don't enable resend button if countdown is active\n if (resendCountdown <= 0) {\n resendBtn.disabled = false;\n }\n } else if (resendBtn) {\n resendBtn.disabled = show;\n }\n }\n \n function showPhoneMessage(message, type) {\n const messageDiv = document.getElementById('phoneMessage');\n messageDiv.innerHTML = '<div class=\"' + type + '-message\">' + message + '<\/div>';\n\n setTimeout(() => {\n messageDiv.innerHTML = '';\n }, 5000);\n }\n\n function showVerificationMessage(message, type) {\n const messageDiv = document.getElementById('verificationMessage');\n messageDiv.innerHTML = '<div class=\"' + type + '-message\">' + message + '<\/div>';\n\n setTimeout(() => {\n messageDiv.innerHTML = '';\n }, 5000);\n }\n\n function clearMessages() {\n document.getElementById('phoneMessage').innerHTML = '';\n document.getElementById('verificationMessage').innerHTML = '';\n }\n \n \/\/ PWA Installation\n let deferredPrompt;\n let installPromptShown = false;\n\n window.addEventListener('beforeinstallprompt', (e) => {\n e.preventDefault();\n deferredPrompt = e;\n\n console.log('PWA install prompt available');\n\n \/\/ Show install prompt after a delay if not already shown and in browser\n if (!installPromptShown && isInBrowser()) {\n setTimeout(() => checkAndShowInstallPrompt(), 5000);\n }\n });\n\n \/\/ Check if app is currently running in installed mode (not just installed)\n function isAppInstalled() {\n \/\/ Only return true if currently running in standalone mode\n return window.navigator.standalone ||\n window.matchMedia('(display-mode: standalone)').matches;\n }\n\n \/\/ Check if we're currently in browser (even if app is installed)\n function isInBrowser() {\n return !window.navigator.standalone &&\n !window.matchMedia('(display-mode: standalone)').matches;\n }\n\n \/\/ Detect iOS\n function isIOS() {\n return \/iPad|iPhone|iPod\/.test(navigator.userAgent) && !window.MSStream;\n }\n\n \/\/ Detect Android\n function isAndroid() {\n return \/Android\/.test(navigator.userAgent);\n }\n \n \/\/ Service Worker Registration and Firebase Push Notifications\n if ('serviceWorker' in navigator) {\n window.addEventListener('load', async () => {\n try {\n \/\/ Register the main PWA service worker with cache-busting\n const swUrl = 'https:\/\/reserve.samuraiyakiniku.com\/wp-content\/plugins\/restaurant-loyalty-system\/pwa\/sw.js?v=' + Date.now();\n const registration = await navigator.serviceWorker.register(swUrl);\n console.log('PWA SW registered with cache-busting: ', registration);\n\n \/\/ Listen for debug messages from service worker\n navigator.serviceWorker.addEventListener('message', (event) => {\n if (event.data && event.data.type === 'DEBUG_NOTIFICATION_SHOWN') {\n showDebugMessage(event.data.message);\n } else if (event.data && event.data.type === 'DEBUG_FIREBASE_SW_TRIGGERED') {\n showDebugMessage(event.data.message);\n }\n });\n\n \/\/ Initialize Firebase push notifications (no separate Firebase SW needed)\n await initializeFirebasePushNotifications();\n } catch (error) {\n console.error('Service worker registration failed: ', error);\n }\n });\n }\n\n \/\/ Firebase Push Notification Functions\n let firebaseApp = null;\n let messaging = null;\n let currentFirebaseToken = null;\n let pushNotificationSupported = false;\n\n async function initializeFirebasePushNotifications() {\n try {\n console.log('\ud83d\udd27 Initializing Firebase push notifications...');\n\n \/\/ Check if Firebase messaging is supported\n if (!('serviceWorker' in navigator) || !('PushManager' in window)) {\n console.log('Push notifications not supported');\n return;\n }\n\n \/\/ Import Firebase modules dynamically (like your working example)\n const { initializeApp, getApps, deleteApp } = await import('https:\/\/www.gstatic.com\/firebasejs\/10.7.0\/firebase-app.js');\n const { getMessaging, getToken, onMessage } = await import('https:\/\/www.gstatic.com\/firebasejs\/10.7.0\/firebase-messaging.js');\n\n \/\/ Firebase configuration\n \/\/ NOTE: These are PUBLIC client-side keys meant to be exposed in web applications.\n \/\/ Security is enforced through Firebase Security Rules on the server side.\n \/\/ This is the standard Firebase web implementation pattern.\n \/\/ See: https:\/\/firebase.google.com\/docs\/projects\/api-keys\n const firebaseConfig = {\n apiKey: \"AIzaSyDQYAmhlfvf8rdopX0SVCjoGzvdwzK4iDM\",\n authDomain: \"samurai-yakiniku-loyalty.firebaseapp.com\",\n projectId: \"samurai-yakiniku-loyalty\",\n storageBucket: \"samurai-yakiniku-loyalty.firebasestorage.app\",\n messagingSenderId: \"676276901034\",\n appId: \"1:676276901034:web:dd88e0062351a74e4fecd3\",\n measurementId: \"G-LXPVHRPB5N\"\n };\n\n console.log('\u2705 Using correct Firebase config:');\n console.log('- Project ID:', firebaseConfig.projectId);\n console.log('- Sender ID:', firebaseConfig.messagingSenderId);\n\n \/\/ Clear existing Firebase apps (like your working example)\n const existingApps = getApps();\n for (const app of existingApps) {\n await deleteApp(app);\n }\n console.log('\ud83e\uddf9 Cleared existing Firebase apps');\n\n \/\/ Initialize Firebase with correct config\n firebaseApp = initializeApp(firebaseConfig);\n messaging = getMessaging(firebaseApp);\n\n pushNotificationSupported = true;\n console.log('\u2705 Firebase initialized successfully');\n\n \/\/ Check for existing token\n await checkExistingFirebaseToken();\n\n \/\/ Handle foreground messages - DISABLED to prevent duplicate notifications\n \/\/ The service worker handles all notifications (background and foreground)\n onMessage(messaging, (payload) => {\n console.log('\ud83d\udce8 Foreground message received (delegating to service worker):', payload);\n \/\/ Don't show notification here - let service worker handle it\n \/\/ This prevents duplicate notifications when app is open\n });\n\n } catch (error) {\n console.error('\u274c Firebase initialization failed:', error);\n console.error('Error details:', error);\n pushNotificationSupported = false;\n }\n }\n\n async function checkExistingFirebaseToken() {\n try {\n \/\/ Check if we already have a token (like your working example)\n const { getToken } = await import('https:\/\/www.gstatic.com\/firebasejs\/10.7.0\/firebase-messaging.js');\n\n \/\/ Get service worker registration (like your working example)\n const registration = await navigator.serviceWorker.getRegistration('https:\/\/reserve.samuraiyakiniku.com\/wp-content\/plugins\/restaurant-loyalty-system\/pwa\/');\n if (!registration) {\n console.log('No service worker registration found');\n setTimeout(() => showPushNotificationPrompt(), 3000);\n return;\n }\n\n \/\/ VAPID public key for push notifications\n \/\/ NOTE: This is a PUBLIC key meant to be exposed in client-side code.\n \/\/ It's used to identify your server when requesting push notification permissions.\n \/\/ The private key is kept secure on the server side.\n const vapidKey = 'BE_3aULuQ_lLlDkBdT-8zinBn_loI47mEJaIBaTD80M0EPNfjw-fHIeCiAG6y-uxi37N5_mu3zSGvnFKoU2uYjM';\n\n currentFirebaseToken = await getToken(messaging, {\n vapidKey: vapidKey,\n serviceWorkerRegistration: registration\n });\n\n if (currentFirebaseToken) {\n console.log('\u2705 Firebase token already exists:', currentFirebaseToken.substring(0, 30) + '...');\n await updateFirebaseTokenOnServer(currentFirebaseToken);\n } else {\n console.log('No Firebase token found');\n setTimeout(() => showPushNotificationPrompt(), 3000);\n }\n } catch (error) {\n console.error('Error checking Firebase token:', error);\n setTimeout(() => showPushNotificationPrompt(), 3000);\n }\n }\n\n async function requestNotificationPermission() {\n if (!('Notification' in window)) {\n console.log('Notifications not supported');\n return false;\n }\n\n let permission = Notification.permission;\n\n if (permission === 'default') {\n permission = await Notification.requestPermission();\n }\n\n if (permission === 'granted') {\n console.log('Notification permission granted');\n return true;\n } else {\n console.log('Notification permission denied');\n return false;\n }\n }\n\n async function subscribeToPushNotifications() {\n\n\n \/\/ Show loading state\n const enableButton = event.target;\n const originalText = enableButton.textContent;\n enableButton.disabled = true;\n enableButton.textContent = 'Enabling...';\n\n try {\n if (!pushNotificationSupported || !currentCustomer || !messaging) {\n hidePushNotificationPrompt();\n \/\/ Don't show error for iOS devices where push notifications have limitations\n if (navigator.userAgent.includes('iPhone') || navigator.userAgent.includes('iPad')) {\n showSuccessMessage('Notifications will be available when you add this app to your home screen');\n } else {\n showSuccessMessage('Push notifications not supported on this device');\n }\n return false;\n }\n\n const hasPermission = await requestNotificationPermission();\n if (!hasPermission) {\n enableButton.disabled = false;\n enableButton.textContent = originalText;\n hidePushNotificationPrompt();\n \/\/ Removed permission denied banner - handled silently\n return false;\n }\n\n \/\/ Get service worker registration (like your working example)\n const registration = await navigator.serviceWorker.getRegistration('https:\/\/reserve.samuraiyakiniku.com\/wp-content\/plugins\/restaurant-loyalty-system\/pwa\/');\n if (!registration) {\n throw new Error('No service worker registration found');\n }\n\n \/\/ VAPID public key for push notifications\n \/\/ NOTE: This is a PUBLIC key meant to be exposed in client-side code.\n \/\/ It's used to identify your server when requesting push notification permissions.\n \/\/ The private key is kept secure on the server side.\n const vapidKey = 'BE_3aULuQ_lLlDkBdT-8eedkRUFiXE4oj8qaJlfx6jnvnC1kCx6XssPmKOQp0UN5T52zlba_t-AIzqPx-B2Sa0';\n\n \/\/ Get Firebase token using Firebase SDK (like your working example)\n const { getToken } = await import('https:\/\/www.gstatic.com\/firebasejs\/10.7.0\/firebase-messaging.js');\n\n const token = await getToken(messaging, {\n vapidKey: vapidKey,\n serviceWorkerRegistration: registration\n });\n\n if (!token) {\n throw new Error('Failed to generate Firebase token');\n }\n\n console.log('Firebase token generated:', token);\n currentFirebaseToken = token;\n\n \/\/ Send token to server\n const success = await updateFirebaseTokenOnServer(token);\n if (success) {\n \/\/ Reset button state on success\n enableButton.disabled = false;\n enableButton.textContent = 'Notifications Enabled';\n\n hidePushNotificationPrompt();\n \/\/ Removed success banner - notifications enabled silently\n return true;\n } else {\n throw new Error('Failed to register token on server');\n }\n\n } catch (error) {\n console.error('Firebase token subscription failed:', error);\n enableButton.disabled = false;\n enableButton.textContent = originalText;\n\n \/\/ Log error details but don't show banner to user\n if (error.message.includes('VAPID')) {\n console.log('VAPID key issue - hiding prompt');\n hidePushNotificationPrompt();\n }\n\n \/\/ Removed error banner - failures handled silently\n }\n\n return false;\n }\n\n async function getFirebaseConfig() {\n try {\n const response = await fetch('https:\/\/reserve.samuraiyakiniku.com\/wp-admin\/admin-ajax.php', {\n method: 'POST',\n headers: {\n 'Content-Type': 'application\/x-www-form-urlencoded',\n },\n body: 'action=rls_get_firebase_config'\n });\n\n const data = await response.json();\n if (data.success) {\n return data.data.config;\n }\n return null;\n } catch (error) {\n console.error('Error getting Firebase config:', error);\n return null;\n }\n }\n\n async function getVapidPublicKey() {\n try {\n const response = await fetch('https:\/\/reserve.samuraiyakiniku.com\/wp-admin\/admin-ajax.php', {\n method: 'POST',\n headers: {\n 'Content-Type': 'application\/x-www-form-urlencoded',\n },\n body: 'action=rls_get_vapid_key'\n });\n\n const data = await response.json();\n if (data.success) {\n \/\/ Handle both response formats for compatibility\n return data.data.vapidKey || data.data.public_key || null;\n }\n return null;\n } catch (error) {\n console.error('Error getting VAPID key:', error);\n return null;\n }\n }\n\n async function updateFirebaseTokenOnServer(token) {\n if (!currentCustomer) {\n return false;\n }\n\n try {\n const data = await makeAjaxRequest('https:\/\/reserve.samuraiyakiniku.com\/wp-admin\/admin-ajax.php', {\n action: 'rls_subscribe_push_firebase',\n customer_id: currentCustomer.id,\n firebase_token: token\n });\n return data.success;\n } catch (error) {\n console.error('Error updating Firebase token:', error);\n return false;\n }\n }\n\n \/\/ Keep the old function for backward compatibility during transition\n async function updatePushSubscriptionOnServer(subscription) {\n if (!currentCustomer) {\n return false;\n }\n\n try {\n const data = await makeAjaxRequest('https:\/\/reserve.samuraiyakiniku.com\/wp-admin\/admin-ajax.php', {\n action: 'rls_subscribe_push',\n customer_id: currentCustomer.id,\n subscription: JSON.stringify(subscription)\n });\n return data.success;\n } catch (error) {\n console.error('Error updating push subscription:', error);\n return false;\n }\n }\n\n \/\/ DISABLED: Foreground notification function to prevent duplicates\n \/\/ The service worker now handles all notifications (background and foreground)\n function showForegroundNotification(payload) {\n console.log('\ud83d\udce8 Foreground notification disabled (service worker handles all):', payload);\n\n \/\/ Only show in-app message, no browser notification\n const notification = payload.notification || {};\n const title = notification.title || 'Samurai Yakiniku';\n const body = notification.body || 'You have a new notification';\n\n \/\/ Show in-app notification only (no duplicate browser notification)\n showSuccessMessage(`${title}: ${body}`);\n }\n\n function showPushNotificationPrompt() {\n \/\/ Don't show if already dismissed or if notifications are not supported\n if (localStorage.getItem('pushNotificationDismissed') || !pushNotificationSupported) {\n return;\n }\n\n \/\/ Show a subtle prompt to enable notifications\n const promptHtml = `\n <div id=\"pushPrompt\" class=\"push-notification-prompt\" style=\"\n position: fixed;\n bottom: 20px;\n left: 20px;\n right: 20px;\n background: linear-gradient(135deg, #DC143C, #B22222);\n color: white;\n padding: 16px;\n border-radius: 12px;\n box-shadow: 0 4px 20px rgba(220, 20, 60, 0.3);\n z-index: 1000;\n display: flex;\n align-items: center;\n justify-content: space-between;\n animation: slideUp 0.3s ease-out;\n max-width: 400px;\n margin: 0 auto;\n \">\n <div style=\"flex: 1; display: flex; align-items: flex-start; gap: 10px;\">\n <svg width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" style=\"flex-shrink: 0; margin-top: 2px;\"><path d=\"M6 8a6 6 0 0 1 12 0c0 7 3 9 3 9H3s3-2 3-9\"\/><path d=\"M10.3 21a1.94 1.94 0 0 0 3.4 0\"\/><\/svg>\n <div>\n <div style=\"font-weight: 600; margin-bottom: 4px;\">Stay Updated<\/div>\n <div style=\"font-size: 14px; opacity: 0.9;\">\n ${isIOS() ? 'Add to home screen to get notifications about rewards' : 'Get notified about new rewards and bonus points'}\n <\/div>\n <\/div>\n <\/div>\n <div style=\"display: flex; gap: 8px;\">\n <button onclick=\"subscribeToPushNotifications()\" style=\"\n background: rgba(255,255,255,0.2);\n border: 1px solid rgba(255,255,255,0.3);\n color: white;\n padding: 8px 16px;\n border-radius: 6px;\n cursor: pointer;\n font-size: 14px;\n font-weight: 600;\n transition: all 0.2s ease;\n \" onmouseover=\"this.style.background='rgba(255,255,255,0.3)'\"\n onmouseout=\"this.style.background='rgba(255,255,255,0.2)'\">\n Enable\n <\/button>\n <button onclick=\"dismissPushNotificationPrompt()\" style=\"\n background: transparent;\n border: none;\n color: rgba(255,255,255,0.7);\n padding: 8px;\n cursor: pointer;\n font-size: 18px;\n line-height: 1;\n transition: all 0.2s ease;\n \" onmouseover=\"this.style.color='white'\"\n onmouseout=\"this.style.color='rgba(255,255,255,0.7)'\"\n title=\"Dismiss\">\n <svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><line x1=\"18\" y1=\"6\" x2=\"6\" y2=\"18\"\/><line x1=\"6\" y1=\"6\" x2=\"18\" y2=\"18\"\/><\/svg>\n <\/button>\n <\/div>\n <\/div>\n `;\n\n document.body.insertAdjacentHTML('beforeend', promptHtml);\n }\n\n function dismissPushNotificationPrompt() {\n const prompt = document.getElementById('pushPrompt');\n if (prompt) {\n prompt.style.animation = 'slideDown 0.3s ease-in';\n setTimeout(() => {\n prompt.remove();\n }, 300);\n }\n \/\/ Remember that user dismissed it\n localStorage.setItem('pushNotificationDismissed', 'true');\n }\n\n function hidePushNotificationPrompt() {\n const prompt = document.getElementById('pushPrompt');\n if (prompt) {\n prompt.style.animation = 'slideDown 0.3s ease-in';\n setTimeout(() => {\n prompt.remove();\n }, 300);\n }\n }\n\n \/\/ Utility function to convert VAPID key\n function urlBase64ToUint8Array(base64String) {\n const padding = '='.repeat((4 - base64String.length % 4) % 4);\n const base64 = (base64String + padding)\n .replace(\/-\/g, '+')\n .replace(\/_\/g, '\/');\n\n const rawData = window.atob(base64);\n const outputArray = new Uint8Array(rawData.length);\n\n for (let i = 0; i < rawData.length; ++i) {\n outputArray[i] = rawData.charCodeAt(i);\n }\n return outputArray;\n }\n\n \/\/ Modal Functions\n function showConfirmationDialog(title, message, onConfirm) {\n document.getElementById('modalTitle').textContent = title;\n document.getElementById('modalBody').innerHTML = `<p>${message}<\/p>`;\n document.getElementById('modalFooter').innerHTML = `\n <button class=\"modal-button secondary\" onclick=\"closeModal()\">Cancel<\/button>\n <button class=\"modal-button primary\" onclick=\"confirmAction()\">Confirm<\/button>\n `;\n\n \/\/ Store the callback\n window.currentModalCallback = onConfirm;\n\n document.getElementById('modalOverlay').style.display = 'flex';\n }\n\n function showRedemptionSuccess(redemptionCode, message) {\n document.getElementById('modalTitle').textContent = 'Reward Redeemed!';\n document.getElementById('modalBody').innerHTML = `\n <div style=\"text-align: center;\">\n <div style=\"margin-bottom: 16px; color: #10b981;\"><svg width=\"48\" height=\"48\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M5.8 11.3 2 22l10.7-3.79\"\/><path d=\"M4 3h.01\"\/><path d=\"M22 8h.01\"\/><path d=\"M15 2h.01\"\/><path d=\"M22 20h.01\"\/><path d=\"m22 2-2.24.75a2.9 2.9 0 0 0-1.96 3.12v0c.1.86-.57 1.63-1.45 1.63h-.38c-.86 0-1.6.6-1.76 1.44L14 10\"\/><path d=\"m22 13-.82-.33c-.86-.34-1.82.2-1.98 1.11v0c-.11.7-.72 1.22-1.43 1.22H17\"\/><path d=\"m11 2 .33.82c.34.86-.2 1.82-1.11 1.98v0C9.52 4.9 9 5.52 9 6.23V7\"\/><path d=\"M11 13c1.93 1.93 2.83 4.17 2 5-.83.83-3.07-.07-5-2-1.93-1.93-2.83-4.17-2-5 .83-.83 3.07.07 5 2Z\"\/><\/svg><\/div>\n <p style=\"margin-bottom: 20px;\">${message}<\/p>\n <div class=\"redeemed-code\">\n <div class=\"redeemed-code-label\">Redemption Code<\/div>\n <div class=\"redeemed-code-value\">${redemptionCode}<\/div>\n <\/div>\n <div class=\"qr-code\" id=\"qrCodeContainer\"><\/div>\n <p style=\"font-size: 14px; color: rgba(255,255,255,0.6); margin-top: 16px;\">\n Show this code to staff at any branch to claim your reward.\n <\/p>\n <\/div>\n `;\n document.getElementById('modalFooter').innerHTML = `\n <button class=\"modal-button primary\" onclick=\"closeModal()\">Got it!<\/button>\n `;\n\n document.getElementById('modalOverlay').style.display = 'flex';\n\n \/\/ Generate QR code\n setTimeout(() => {\n console.log('Attempting to generate QR code for redemption success dialog');\n generateQRCode(redemptionCode, 'qrCodeContainer');\n }, 500);\n }\n\n function showErrorDialog(title, message) {\n document.getElementById('modalTitle').textContent = title;\n document.getElementById('modalBody').innerHTML = `<p>${message}<\/p>`;\n document.getElementById('modalFooter').innerHTML = `\n <button class=\"modal-button primary\" onclick=\"closeModal()\">OK<\/button>\n `;\n\n document.getElementById('modalOverlay').style.display = 'flex';\n }\n\n function confirmAction() {\n if (window.currentModalCallback) {\n window.currentModalCallback();\n window.currentModalCallback = null;\n }\n closeModal();\n }\n\n function closeModal() {\n document.getElementById('modalOverlay').style.display = 'none';\n window.currentModalCallback = null;\n }\n\n \/\/ Redeemed Rewards Functions\n function loadRedeemedRewards() {\n const redeemedList = document.getElementById('redeemedList');\n redeemedList.innerHTML = '<div class=\"loading\"><div class=\"spinner\"><\/div><p>Loading your rewards...<\/p><\/div>';\n\n \/\/ Build request params\n const params = {\n action: 'rls_api_redeemed_rewards',\n customer_id: currentCustomer.id,\n include_branch_info: '1'\n };\n\n \/\/ Include branch context for filtering\n const branchId = getBranchContext();\n if (branchId) {\n params.branch_id = branchId;\n }\n\n makeAjaxRequest('https:\/\/reserve.samuraiyakiniku.com\/wp-admin\/admin-ajax.php', params)\n .then(data => {\n if (data.success) {\n displayRedeemedRewards(data.data);\n } else {\n redeemedList.innerHTML = '<div class=\"error-message\">Failed to load redeemed rewards<\/div>';\n }\n })\n .catch(error => {\n redeemedList.innerHTML = '<div class=\"error-message\">Connection error<\/div>';\n console.error('Load redeemed rewards error:', error);\n });\n }\n\n function displayRedeemedRewards(rewards) {\n const redeemedList = document.getElementById('redeemedList');\n const redeemedCount = document.getElementById('redeemedCount');\n const currentBranchId = getBranchContext();\n\n \/\/ Debug: Log the rewards data\n console.log('Redeemed rewards data:', rewards);\n console.log('Current branch filter:', currentBranchId);\n\n rewards.forEach(reward => {\n console.log(`Reward ${reward.id}: status=\"${reward.status}\", title=\"${reward.reward_title}\", branch_id=\"${reward.branch_id}\"`);\n });\n\n \/\/ Filter by branch if a specific branch is selected\n let filteredRewards = rewards;\n if (currentBranchId) {\n filteredRewards = rewards.filter(reward => {\n \/\/ Show reward if it was redeemed at the selected branch\n return reward.branch_id == currentBranchId;\n });\n console.log(`Filtered ${rewards.length} rewards to ${filteredRewards.length} for branch ${currentBranchId}`);\n }\n\n const activeRewards = filteredRewards.filter(r => r.status === 'active' || r.status === 'redeemed');\n redeemedCount.textContent = activeRewards.length;\n\n if (filteredRewards.length === 0) {\n const message = currentBranchId ?\n 'No redeemed rewards for selected branch' :\n 'No redeemed rewards yet';\n redeemedList.innerHTML = `<div style=\"text-align: center; padding: 40px; color: #86868b;\">${message}<\/div>`;\n return;\n }\n\n let html = '';\n filteredRewards.forEach(reward => {\n \/\/ Debug: Log each reward's status\n console.log(`Processing reward ${reward.id}: status=\"${reward.status}\"`);\n\n const isUsed = reward.status === 'used';\n \/\/ Check both status and expiry date\n const isExpired = reward.status === 'expired' || reward.is_expired === true;\n const isActive = (reward.status === 'active' || reward.status === 'redeemed') && !isExpired;\n\n console.log(`Reward ${reward.id}: isActive=${isActive}, isUsed=${isUsed}, isExpired=${isExpired}`);\n\n let statusClass = 'active';\n let statusText = 'ACTIVE';\n let statusIcon = '<svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><circle cx=\"12\" cy=\"12\" r=\"10\"\/><path d=\"m9 12 2 2 4-4\"\/><\/svg>';\n\n if (isUsed) {\n statusClass = 'used';\n statusText = 'USED';\n statusIcon = '<svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><circle cx=\"12\" cy=\"12\" r=\"10\"\/><path d=\"m9 12 2 2 4-4\"\/><\/svg>';\n } else if (isExpired) {\n statusClass = 'expired';\n statusText = 'EXPIRED';\n statusIcon = '<svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><circle cx=\"12\" cy=\"12\" r=\"10\"\/><line x1=\"15\" y1=\"9\" x2=\"9\" y2=\"15\"\/><line x1=\"9\" y1=\"9\" x2=\"15\" y2=\"15\"\/><\/svg>';\n } else if (isActive) {\n statusClass = 'active';\n statusText = 'ACTIVE';\n statusIcon = '<svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><circle cx=\"12\" cy=\"12\" r=\"10\"\/><path d=\"m9 12 2 2 4-4\"\/><\/svg>';\n } else {\n \/\/ Unknown status - let's see what it is\n console.warn(`Unknown status for reward ${reward.id}: \"${reward.status}\"`);\n statusClass = 'unknown';\n statusText = reward.status ? reward.status.toUpperCase() : 'UNKNOWN';\n statusIcon = '<svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><circle cx=\"12\" cy=\"12\" r=\"10\"\/><path d=\"M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3\"\/><line x1=\"12\" y1=\"17\" x2=\"12.01\" y2=\"17\"\/><\/svg>';\n }\n\n const cardClass = isActive ? '' : 'expired';\n\n \/\/ Format dates\n const redeemedDate = new Date(reward.redeemed_at).toLocaleDateString();\n const usedDate = reward.used_at ? new Date(reward.used_at).toLocaleDateString() : null;\n\n html += `\n <div class=\"redeemed-card ${cardClass}\">\n <div class=\"redeemed-header\">\n <div>\n <div class=\"redeemed-title\">${reward.reward_title}<\/div>\n <\/div>\n <div class=\"redeemed-status ${statusClass}\">\n ${statusIcon} ${statusText}\n <\/div>\n <\/div>\n\n <div class=\"redeemed-code\">\n <div class=\"redeemed-code-label\">Redemption Code<\/div>\n <div class=\"redeemed-code-value\">${reward.redemption_code}<\/div>\n <\/div>\n\n ${isActive ? `\n <div class=\"redeemed-qr\">\n <div class=\"qr-code\" id=\"qr-${reward.id}\"><\/div>\n <\/div>\n ` : `\n <div class=\"redeemed-qr\">\n <div style=\"text-align: center; padding: 20px; color: #86868b; font-size: 14px; display: flex; align-items: center; justify-content: center; gap: 8px;\">\n ${isUsed ? '<svg width=\"18\" height=\"18\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"#10b981\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><circle cx=\"12\" cy=\"12\" r=\"10\"\/><path d=\"m9 12 2 2 4-4\"\/><\/svg> Reward has been used!' : '<svg width=\"18\" height=\"18\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"#f59e0b\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><circle cx=\"12\" cy=\"12\" r=\"10\"\/><polyline points=\"12 6 12 12 16 14\"\/><\/svg> Reward has expired'}\n <\/div>\n <\/div>\n `}\n\n <div class=\"redeemed-dates\">\n <div class=\"redeemed-date\" style=\"display: flex; align-items: center; gap: 6px;\">\n <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><rect x=\"3\" y=\"4\" width=\"18\" height=\"18\" rx=\"2\" ry=\"2\"\/><line x1=\"16\" y1=\"2\" x2=\"16\" y2=\"6\"\/><line x1=\"8\" y1=\"2\" x2=\"8\" y2=\"6\"\/><line x1=\"3\" y1=\"10\" x2=\"21\" y2=\"10\"\/><\/svg>\n Redeemed: ${redeemedDate}\n <\/div>\n ${usedDate ? `\n <div class=\"redeemed-date\" style=\"color: #34C759; margin-top: 4px; display: flex; align-items: center; gap: 6px;\">\n <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><circle cx=\"12\" cy=\"12\" r=\"10\"\/><path d=\"m9 12 2 2 4-4\"\/><\/svg>\n Used: ${usedDate}\n <\/div>\n ` : ''}\n ${reward.expiry_date && isExpired ? `\n <div class=\"redeemed-date\" style=\"color: #FF3B30; margin-top: 4px; display: flex; align-items: center; gap: 6px;\">\n <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><circle cx=\"12\" cy=\"12\" r=\"10\"\/><polyline points=\"12 6 12 12 16 14\"\/><\/svg>\n Expired: ${new Date(reward.expiry_date).toLocaleDateString()}\n <\/div>\n ` : ''}\n <\/div>\n <\/div>\n `;\n });\n\n redeemedList.innerHTML = html;\n\n \/\/ Generate QR codes only for active (non-expired) rewards\n filteredRewards.forEach((reward, index) => {\n const isExpired = reward.status === 'expired' || reward.is_expired === true;\n const isActive = (reward.status === 'active' || reward.status === 'redeemed') && !isExpired;\n\n if (isActive) {\n setTimeout(() => {\n console.log('Generating QR code for active reward:', reward.redemption_code, 'container:', `qr-${reward.id}`);\n generateQRCode(reward.redemption_code, `qr-${reward.id}`);\n }, 200 + (index * 100)); \/\/ Stagger the generation\n }\n });\n }\n\n function generateQRCode(text, containerId) {\n const container = document.getElementById(containerId);\n if (!container) {\n console.error('Container not found:', containerId);\n return;\n }\n\n console.log('Generating QR code for:', text, 'in container:', containerId);\n console.log('QRCode library available:', typeof QRCode !== 'undefined');\n\n \/\/ Try multiple methods to generate QR code\n if (typeof QRCode !== 'undefined') {\n generateRealQRCode(text, container);\n } else {\n \/\/ Use online QR service as fallback\n generateOnlineQRCode(text, container);\n }\n }\n\n function generateRealQRCode(text, container) {\n try {\n \/\/ Clear container\n container.innerHTML = '';\n\n \/\/ Create canvas element\n const canvas = document.createElement('canvas');\n canvas.style.borderRadius = '8px';\n canvas.style.background = '#fff';\n canvas.style.padding = '8px';\n container.appendChild(canvas);\n\n \/\/ Generate QR code\n QRCode.toCanvas(canvas, text, {\n width: 120,\n height: 120,\n margin: 2,\n color: {\n dark: '#000000',\n light: '#FFFFFF'\n }\n }, function (error) {\n if (error) {\n console.error('QR Code generation error:', error);\n generateOnlineQRCode(text, container);\n } else {\n console.log('QR Code generated successfully');\n }\n });\n } catch (error) {\n console.error('QR generation failed:', error);\n generateOnlineQRCode(text, container);\n }\n }\n\n function generateOnlineQRCode(text, container) {\n console.log('Using online QR service for:', text);\n\n \/\/ Use QR Server API as fallback\n const qrUrl = `https:\/\/api.qrserver.com\/v1\/create-qr-code\/?size=120x120&data=${encodeURIComponent(text)}`;\n\n container.innerHTML = `\n <div style=\"text-align: center; margin: 0 auto;\">\n <img decoding=\"async\" src=\"${qrUrl}\"\n alt=\"QR Code: ${text}\"\n style=\"width: 120px; height: 120px; border-radius: 8px; background: #fff; padding: 8px; border: 1px solid #ddd;\"\n onerror=\"this.style.display='none'; this.nextElementSibling.style.display='block';\" \/>\n <div style=\"display: none; width: 120px; height: 120px; background: #fff; border: 2px solid #ddd; display: flex; align-items: center; justify-content: center; font-size: 10px; color: #666; text-align: center; margin: 0 auto; border-radius: 8px; flex-direction: column;\">\n <div style=\"font-weight: bold; margin-bottom: 8px;\">Redemption Code<\/div>\n <div style=\"font-family: monospace; font-size: 12px; word-break: break-all;\">${text}<\/div>\n <\/div>\n <\/div>\n `;\n }\n\n \/\/ Phone Change Functions\n let phoneChangeStep = 'enter_new';\n let phoneChangeData = {};\n\n function initiatePhoneChange() {\n phoneChangeStep = 'enter_new';\n showPhoneChangeStep();\n }\n\n function showPhoneChangeStep() {\n const modal = document.getElementById('phoneChangeModal');\n const title = document.getElementById('phoneChangeTitle');\n const body = document.getElementById('phoneChangeBody');\n const footer = document.getElementById('phoneChangeFooter');\n\n switch (phoneChangeStep) {\n case 'enter_new':\n title.textContent = 'Change Phone Number';\n body.innerHTML = `\n <div style=\"margin-bottom: 20px;\">\n <p style=\"color: #86868b; margin-bottom: 16px;\">Enter your new phone number. We'll send verification codes to both your current and new numbers.<\/p>\n <div style=\"margin-bottom: 16px;\">\n <strong style=\"color: #1d1d1f; display: block; margin-bottom: 8px;\">Current Phone:<\/strong>\n <span style=\"color: #86868b;\">${currentCustomer.phone}<\/span>\n <\/div>\n <div>\n <label style=\"color: #1d1d1f; font-weight: 600; display: block; margin-bottom: 8px;\">New Phone Number:<\/label>\n <input type=\"tel\" id=\"newPhoneInput\" placeholder=\"Enter new phone number\" maxlength=\"15\"\n style=\"width: 100%; padding: 12px; border: 1px solid rgba(0,0,0,0.1); border-radius: 8px; font-size: 16px;\" \/>\n <\/div>\n <\/div>\n `;\n footer.innerHTML = `\n <button onclick=\"closePhoneChangeModal()\" style=\"background: none; border: 1px solid rgba(0,0,0,0.1); color: #86868b; padding: 12px 24px; border-radius: 8px; margin-right: 12px; cursor: pointer;\">Cancel<\/button>\n <button onclick=\"submitNewPhone()\" style=\"background: linear-gradient(135deg, #DC143C, #B22222); color: white; border: none; padding: 12px 24px; border-radius: 8px; font-weight: 600; cursor: pointer;\">Continue<\/button>\n `;\n\n \/\/ Add number-only validation after rendering\n setTimeout(() => {\n const newPhoneInput = document.getElementById('newPhoneInput');\n if (newPhoneInput) {\n newPhoneInput.addEventListener('input', function(e) {\n let value = e.target.value.replace(\/\\D\/g, '');\n if (value.length > 15) value = value.slice(0, 15);\n e.target.value = value;\n });\n }\n }, 0);\n break;\n\n case 'verify_old':\n title.textContent = 'Verify Current Phone';\n body.innerHTML = `\n <div style=\"margin-bottom: 20px;\">\n <p style=\"color: #86868b; margin-bottom: 16px;\">We've sent a verification code to your current phone number:<\/p>\n <div style=\"background: #f8f8f8; padding: 12px; border-radius: 8px; margin-bottom: 16px; text-align: center;\">\n <strong>${currentCustomer.phone}<\/strong>\n <\/div>\n <div>\n <label style=\"color: #1d1d1f; font-weight: 600; display: block; margin-bottom: 8px;\">Enter 6-digit code:<\/label>\n <input type=\"text\" id=\"oldPhoneCode\" placeholder=\"000000\" maxlength=\"6\" inputmode=\"numeric\"\n style=\"width: 100%; padding: 12px; border: 1px solid rgba(0,0,0,0.1); border-radius: 8px; font-size: 18px; text-align: center; letter-spacing: 2px;\" \/>\n <\/div>\n <\/div>\n `;\n footer.innerHTML = `\n <button onclick=\"closePhoneChangeModal()\" style=\"background: none; border: 1px solid rgba(0,0,0,0.1); color: #86868b; padding: 12px 24px; border-radius: 8px; margin-right: 12px; cursor: pointer;\">Cancel<\/button>\n <button onclick=\"verifyOldPhone()\" style=\"background: linear-gradient(135deg, #DC143C, #B22222); color: white; border: none; padding: 12px 24px; border-radius: 8px; font-weight: 600; cursor: pointer;\">Verify<\/button>\n `;\n\n \/\/ Add number-only validation after rendering\n setTimeout(() => {\n const oldPhoneCode = document.getElementById('oldPhoneCode');\n if (oldPhoneCode) {\n oldPhoneCode.addEventListener('input', function(e) {\n let value = e.target.value.replace(\/\\D\/g, '');\n if (value.length > 6) value = value.slice(0, 6);\n e.target.value = value;\n });\n }\n }, 0);\n break;\n\n case 'verify_new':\n title.textContent = 'Verify New Phone';\n body.innerHTML = `\n <div style=\"margin-bottom: 20px;\">\n <p style=\"color: #86868b; margin-bottom: 16px;\">We've sent a verification code to your new phone number:<\/p>\n <div style=\"background: #f8f8f8; padding: 12px; border-radius: 8px; margin-bottom: 16px; text-align: center;\">\n <strong>${phoneChangeData.new_phone_masked || phoneChangeData.new_phone}<\/strong>\n <\/div>\n <div>\n <label style=\"color: #1d1d1f; font-weight: 600; display: block; margin-bottom: 8px;\">Enter 6-digit code:<\/label>\n <input type=\"text\" id=\"newPhoneCode\" placeholder=\"000000\" maxlength=\"6\" inputmode=\"numeric\"\n style=\"width: 100%; padding: 12px; border: 1px solid rgba(0,0,0,0.1); border-radius: 8px; font-size: 18px; text-align: center; letter-spacing: 2px;\" \/>\n <\/div>\n <\/div>\n `;\n footer.innerHTML = `\n <button onclick=\"closePhoneChangeModal()\" style=\"background: none; border: 1px solid rgba(0,0,0,0.1); color: #86868b; padding: 12px 24px; border-radius: 8px; margin-right: 12px; cursor: pointer;\">Cancel<\/button>\n <button onclick=\"verifyNewPhone()\" style=\"background: linear-gradient(135deg, #DC143C, #B22222); color: white; border: none; padding: 12px 24px; border-radius: 8px; font-weight: 600; cursor: pointer;\">Complete Change<\/button>\n `;\n\n \/\/ Add number-only validation after rendering\n setTimeout(() => {\n const newPhoneCode = document.getElementById('newPhoneCode');\n if (newPhoneCode) {\n newPhoneCode.addEventListener('input', function(e) {\n let value = e.target.value.replace(\/\\D\/g, '');\n if (value.length > 6) value = value.slice(0, 6);\n e.target.value = value;\n });\n }\n }, 0);\n break;\n }\n\n modal.style.display = 'flex';\n }\n\n function submitNewPhone() {\n const newPhone = document.getElementById('newPhoneInput').value.trim();\n\n if (!newPhone) {\n alert('Please enter a new phone number');\n return;\n }\n\n if (newPhone === currentCustomer.phone) {\n alert('New phone number must be different from your current number');\n return;\n }\n\n makeAjaxRequest('https:\/\/reserve.samuraiyakiniku.com\/wp-admin\/admin-ajax.php', {\n action: 'rls_api_initiate_phone_change',\n customer_id: currentCustomer.id,\n new_phone: newPhone\n })\n .then(data => {\n if (data.success) {\n phoneChangeData.new_phone = newPhone;\n phoneChangeStep = 'verify_old';\n showPhoneChangeStep();\n } else {\n alert(data.data.message || 'Failed to initiate phone change');\n }\n })\n .catch(error => {\n console.error('Phone change error:', error);\n alert('Connection error. Please try again.');\n });\n }\n\n function verifyOldPhone() {\n const code = document.getElementById('oldPhoneCode').value.trim();\n\n if (!code || code.length !== 6) {\n alert('Please enter the 6-digit verification code');\n return;\n }\n\n makeAjaxRequest('https:\/\/reserve.samuraiyakiniku.com\/wp-admin\/admin-ajax.php', {\n action: 'rls_api_verify_old_phone',\n customer_id: currentCustomer.id,\n verification_code: code\n })\n .then(data => {\n if (data.success) {\n phoneChangeData.new_phone_masked = data.data.new_phone_masked;\n phoneChangeStep = 'verify_new';\n showPhoneChangeStep();\n } else {\n alert(data.data.message || 'Invalid verification code');\n }\n })\n .catch(error => {\n console.error('Verification error:', error);\n alert('Connection error. Please try again.');\n });\n }\n\n function verifyNewPhone() {\n const code = document.getElementById('newPhoneCode').value.trim();\n\n if (!code || code.length !== 6) {\n alert('Please enter the 6-digit verification code');\n return;\n }\n\n makeAjaxRequest('https:\/\/reserve.samuraiyakiniku.com\/wp-admin\/admin-ajax.php', {\n action: 'rls_api_verify_new_phone',\n customer_id: currentCustomer.id,\n verification_code: code\n })\n .then(data => {\n if (data.success) {\n \/\/ Update customer data\n currentCustomer.phone = data.data.new_phone;\n\n \/\/ Close modal and refresh profile\n closePhoneChangeModal();\n loadProfile();\n\n \/\/ Show success message\n alert('Phone number successfully changed!');\n } else {\n alert(data.data.message || 'Invalid verification code');\n }\n })\n .catch(error => {\n console.error('Verification error:', error);\n alert('Connection error. Please try again.');\n });\n }\n\n function closePhoneChangeModal() {\n document.getElementById('phoneChangeModal').style.display = 'none';\n phoneChangeStep = 'enter_new';\n phoneChangeData = {};\n }\n\n \/\/ Birthday Management Functions\n function formatBirthday(dateString) {\n if (!dateString) return 'Not set';\n\n const date = new Date(dateString);\n const options = {\n year: 'numeric',\n month: 'long',\n day: 'numeric'\n };\n\n return date.toLocaleDateString('en-US', options);\n }\n\n function showBirthdayEditor() {\n const modal = document.getElementById('birthdayModal');\n const input = document.getElementById('birthdayInput');\n\n \/\/ Pre-fill current birthday if exists\n if (currentCustomer.date_of_birth) {\n input.value = currentCustomer.date_of_birth;\n }\n\n modal.style.display = 'flex';\n }\n\n function closeBirthdayModal() {\n document.getElementById('birthdayModal').style.display = 'none';\n document.getElementById('birthdayInput').value = '';\n }\n\n function updateBirthday() {\n const birthdayInput = document.getElementById('birthdayInput');\n const birthday = birthdayInput.value;\n\n if (!birthday) {\n alert('Please select your birthday date');\n return;\n }\n\n \/\/ Validate date is not in the future\n const selectedDate = new Date(birthday);\n const today = new Date();\n\n if (selectedDate > today) {\n alert('Birthday cannot be in the future');\n return;\n }\n\n \/\/ Validate reasonable age (not more than 120 years ago)\n const minDate = new Date();\n minDate.setFullYear(today.getFullYear() - 120);\n\n if (selectedDate < minDate) {\n alert('Please enter a valid birthday');\n return;\n }\n\n \/\/ Show loading state\n const saveButton = event.target;\n const originalText = saveButton.textContent;\n saveButton.disabled = true;\n saveButton.textContent = 'Saving...';\n\n \/\/ Send update request using centralized AJAX handler\n makeAjaxRequest('https:\/\/reserve.samuraiyakiniku.com\/wp-admin\/admin-ajax.php', {\n action: 'rls_update_birthday',\n customer_id: currentCustomer.id,\n date_of_birth: birthday\n })\n .then(data => {\n saveButton.disabled = false;\n saveButton.textContent = originalText;\n\n if (data.success) {\n \/\/ Update customer data\n currentCustomer.date_of_birth = birthday;\n\n \/\/ Close modal and refresh profile\n closeBirthdayModal();\n loadProfile();\n\n \/\/ Show success message\n showSuccessMessage('Birthday updated successfully!');\n } else {\n alert(data.data.message || 'Failed to update birthday');\n }\n })\n .catch(error => {\n saveButton.disabled = false;\n saveButton.textContent = originalText;\n console.error('Birthday update error:', error);\n alert('Connection error. Please try again.');\n });\n }\n\n \/\/ Name Editor Functions\n function showNameEditor() {\n const modal = document.getElementById('nameModal');\n const firstNameInput = document.getElementById('firstNameInput');\n const lastNameInput = document.getElementById('lastNameInput');\n\n \/\/ Pre-fill current name if exists\n if (currentCustomer.first_name) {\n firstNameInput.value = currentCustomer.first_name;\n }\n if (currentCustomer.last_name) {\n lastNameInput.value = currentCustomer.last_name;\n }\n\n modal.style.display = 'flex';\n }\n\n function closeNameModal() {\n document.getElementById('nameModal').style.display = 'none';\n document.getElementById('firstNameInput').value = '';\n document.getElementById('lastNameInput').value = '';\n }\n\n function updateName() {\n const firstNameInput = document.getElementById('firstNameInput');\n const lastNameInput = document.getElementById('lastNameInput');\n const firstName = firstNameInput.value.trim();\n const lastName = lastNameInput.value.trim();\n\n if (!firstName) {\n alert('Please enter your first name');\n return;\n }\n\n if (!lastName) {\n alert('Please enter your last name');\n return;\n }\n\n \/\/ Show loading state\n const saveButton = event.target;\n const originalText = saveButton.textContent;\n saveButton.disabled = true;\n saveButton.textContent = 'Saving...';\n\n \/\/ Send update request using centralized AJAX handler\n makeAjaxRequest('https:\/\/reserve.samuraiyakiniku.com\/wp-admin\/admin-ajax.php', {\n action: 'rls_update_name',\n customer_id: currentCustomer.id,\n first_name: firstName,\n last_name: lastName\n })\n .then(data => {\n saveButton.disabled = false;\n saveButton.textContent = originalText;\n\n if (data.success) {\n \/\/ Update customer data\n currentCustomer.first_name = firstName;\n currentCustomer.last_name = lastName;\n\n \/\/ Close modal and refresh profile\n closeNameModal();\n loadProfile();\n\n \/\/ Show success message\n showSuccessMessage('Name updated successfully!');\n } else {\n alert(data.data.message || 'Failed to update name');\n }\n })\n .catch(error => {\n saveButton.disabled = false;\n saveButton.textContent = originalText;\n console.error('Name update error:', error);\n alert('Connection error. Please try again.');\n });\n }\n\n \/\/ Email Editor Functions\n function showEmailEditor() {\n const modal = document.getElementById('emailModal');\n const emailInput = document.getElementById('emailInput');\n\n \/\/ Pre-fill current email if exists\n if (currentCustomer.email) {\n emailInput.value = currentCustomer.email;\n }\n\n modal.style.display = 'flex';\n }\n\n function closeEmailModal() {\n document.getElementById('emailModal').style.display = 'none';\n document.getElementById('emailInput').value = '';\n }\n\n function updateEmail() {\n const emailInput = document.getElementById('emailInput');\n const email = emailInput.value.trim();\n\n \/\/ Email is optional, but if provided, must be valid\n if (email && !isValidEmail(email)) {\n alert('Please enter a valid email address');\n return;\n }\n\n \/\/ Show loading state\n const saveButton = event.target;\n const originalText = saveButton.textContent;\n saveButton.disabled = true;\n saveButton.textContent = 'Saving...';\n\n \/\/ Send update request using centralized AJAX handler\n makeAjaxRequest('https:\/\/reserve.samuraiyakiniku.com\/wp-admin\/admin-ajax.php', {\n action: 'rls_update_email',\n customer_id: currentCustomer.id,\n email: email\n })\n .then(data => {\n saveButton.disabled = false;\n saveButton.textContent = originalText;\n\n if (data.success) {\n \/\/ Update customer data\n currentCustomer.email = email;\n\n \/\/ Close modal and refresh profile\n closeEmailModal();\n loadProfile();\n\n \/\/ Show success message\n showSuccessMessage('Email updated successfully!');\n } else {\n alert(data.data.message || 'Failed to update email');\n }\n })\n .catch(error => {\n saveButton.disabled = false;\n saveButton.textContent = originalText;\n console.error('Email update error:', error);\n alert('Connection error. Please try again.');\n });\n }\n\n function isValidEmail(email) {\n \/\/ Simple email validation regex\n const emailRegex = \/^[^\\s@]+@[^\\s@]+\\.[^\\s@]+$\/;\n return emailRegex.test(email);\n }\n\n function showSuccessMessage(message) {\n \/\/ Strip emoji from message (they're replaced by SVG icons)\n const cleanMessage = message.replace(\/^[\u2705\u274c\u26a0\ufe0f\ud83d\udd14\ud83c\udf89\ud83d\udcf1\ud83c\udf82\u270f\ufe0f\ud83d\udce7]\\s*\/u, '');\n\n \/\/ Create temporary success message\n const successDiv = document.createElement('div');\n successDiv.style.cssText = `\n position: fixed;\n top: 20px;\n left: 50%;\n transform: translateX(-50%);\n background: #ecfdf5;\n color: #065f46;\n border: 1px solid #a7f3d0;\n padding: 14px 20px;\n border-radius: 12px;\n font-weight: 500;\n font-size: 14px;\n box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);\n z-index: 10000;\n animation: slideDown 0.3s ease-out;\n display: flex;\n align-items: center;\n gap: 10px;\n `;\n successDiv.innerHTML = `\n <svg width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"#10b981\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><circle cx=\"12\" cy=\"12\" r=\"10\"\/><path d=\"m9 12 2 2 4-4\"\/><\/svg>\n <span>${cleanMessage}<\/span>\n `;\n\n document.body.appendChild(successDiv);\n\n \/\/ Remove after 3 seconds\n setTimeout(() => {\n successDiv.style.animation = 'slideUp 0.3s ease-in';\n setTimeout(() => {\n document.body.removeChild(successDiv);\n }, 300);\n }, 3000);\n }\n\n \/\/ Show install prompt\n function showInstallPrompt() {\n if (installPromptShown || isAppInstalled()) return;\n\n installPromptShown = true;\n\n let promptContent = '';\n\n if (isIOS()) {\n \/\/ iOS specific instructions\n promptContent = `\n <div style=\"text-align: center;\">\n <div style=\"margin-bottom: 16px; color: #e00b41;\"><svg width=\"48\" height=\"48\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><rect x=\"5\" y=\"2\" width=\"14\" height=\"20\" rx=\"2\" ry=\"2\"\/><line x1=\"12\" y1=\"18\" x2=\"12.01\" y2=\"18\"\/><\/svg><\/div>\n <div style=\"font-weight: 600; margin-bottom: 8px;\">Install Samurai Yakiniku App<\/div>\n <div style=\"font-size: 14px; opacity: 0.9; margin-bottom: 16px;\">\n Add to your home screen for the best experience and push notifications\n <\/div>\n <div style=\"background: rgba(255,255,255,0.1); padding: 16px; border-radius: 8px; margin-bottom: 16px; text-align: left;\">\n <div style=\"font-weight: 600; margin-bottom: 12px; text-align: center; display: flex; align-items: center; justify-content: center; gap: 8px;\"><svg width=\"18\" height=\"18\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><rect x=\"8\" y=\"2\" width=\"8\" height=\"4\" rx=\"1\" ry=\"1\"\/><path d=\"M16 4h2a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h2\"\/><\/svg>How to install on iPhone\/iPad:<\/div>\n <div style=\"font-size: 14px; line-height: 1.6;\">\n <div style=\"display: flex; align-items: center; margin-bottom: 8px;\">\n <span style=\"background: rgba(255,255,255,0.2); border-radius: 50%; width: 24px; height: 24px; display: flex; align-items: center; justify-content: center; margin-right: 12px; font-size: 12px; font-weight: bold;\">1<\/span>\n Tap the <strong>Share<\/strong> button <svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" style=\"vertical-align: middle;\"><path d=\"M4 12v8a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-8\"\/><polyline points=\"16 6 12 2 8 6\"\/><line x1=\"12\" y1=\"2\" x2=\"12\" y2=\"15\"\/><\/svg> at the bottom of Safari\n <\/div>\n <div style=\"display: flex; align-items: center; margin-bottom: 8px;\">\n <span style=\"background: rgba(255,255,255,0.2); border-radius: 50%; width: 24px; height: 24px; display: flex; align-items: center; justify-content: center; margin-right: 12px; font-size: 12px; font-weight: bold;\">2<\/span>\n Scroll down and tap <strong>\"Add to Home Screen\"<\/strong> <svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" style=\"vertical-align: middle;\"><line x1=\"12\" y1=\"5\" x2=\"12\" y2=\"19\"\/><line x1=\"5\" y1=\"12\" x2=\"19\" y2=\"12\"\/><\/svg>\n <\/div>\n <div style=\"display: flex; align-items: center;\">\n <span style=\"background: rgba(255,255,255,0.2); border-radius: 50%; width: 24px; height: 24px; display: flex; align-items: center; justify-content: center; margin-right: 12px; font-size: 12px; font-weight: bold;\">3<\/span>\n Tap <strong>\"Add\"<\/strong> to confirm installation\n <\/div>\n <\/div>\n <\/div>\n <div style=\"background: rgba(255,255,255,0.1); padding: 12px; border-radius: 8px; font-size: 13px; opacity: 0.9; display: flex; align-items: center; justify-content: center; gap: 8px;\">\n <svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M15 14c.2-1 .7-1.7 1.5-2.5 1-.9 1.5-2.2 1.5-3.5A6 6 0 0 0 6 8c0 1 .2 2.2 1.5 3.5.7.7 1.3 1.5 1.5 2.5\"\/><path d=\"M9 18h6\"\/><path d=\"M10 22h4\"\/><\/svg>\n <strong>Tip:<\/strong> Once installed, you'll get push notifications and faster access!\n <\/div>\n <\/div>\n `;\n } else if (isAndroid()) {\n \/\/ Android specific instructions\n promptContent = `\n <div style=\"text-align: center;\">\n <div style=\"margin-bottom: 16px; color: #e00b41;\"><svg width=\"48\" height=\"48\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><rect x=\"5\" y=\"2\" width=\"14\" height=\"20\" rx=\"2\" ry=\"2\"\/><line x1=\"12\" y1=\"18\" x2=\"12.01\" y2=\"18\"\/><\/svg><\/div>\n <div style=\"font-weight: 600; margin-bottom: 8px;\">Install Samurai Yakiniku App<\/div>\n <div style=\"font-size: 14px; opacity: 0.9; margin-bottom: 16px;\">\n Get faster access and push notifications\n <\/div>\n <\/div>\n `;\n } else {\n \/\/ Desktop\/other devices\n promptContent = `\n <div style=\"text-align: center;\">\n <div style=\"margin-bottom: 16px; color: #e00b41;\"><svg width=\"48\" height=\"48\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><rect x=\"2\" y=\"3\" width=\"20\" height=\"14\" rx=\"2\" ry=\"2\"\/><line x1=\"8\" y1=\"21\" x2=\"16\" y2=\"21\"\/><line x1=\"12\" y1=\"17\" x2=\"12\" y2=\"21\"\/><\/svg><\/div>\n <div style=\"font-weight: 600; margin-bottom: 8px;\">Install Samurai Yakiniku App<\/div>\n <div style=\"font-size: 14px; opacity: 0.9; margin-bottom: 16px;\">\n Install for quick access and notifications\n <\/div>\n <\/div>\n `;\n }\n\n const promptHtml = `\n <div id=\"installPrompt\" style=\"\n position: fixed;\n top: 0;\n left: 0;\n right: 0;\n bottom: 0;\n background: rgba(0,0,0,0.8);\n z-index: 10001;\n display: flex;\n align-items: center;\n justify-content: center;\n padding: 20px;\n animation: fadeIn 0.3s ease-out;\n \">\n <div style=\"\n background: linear-gradient(135deg, #DC143C, #B22222);\n color: white;\n padding: 24px;\n border-radius: 16px;\n max-width: 400px;\n width: 100%;\n box-shadow: 0 8px 32px rgba(220, 20, 60, 0.4);\n \">\n ${promptContent}\n <div style=\"display: flex; gap: 12px; margin-top: 20px;\" id=\"installButtons\">\n <\/div>\n <\/div>\n <\/div>\n `;\n\n document.body.insertAdjacentHTML('beforeend', promptHtml);\n\n \/\/ Build buttons after prompt is shown\n const buttonsContainer = document.getElementById('installButtons');\n let buttonsHtml = '';\n\n if (isAndroid() && deferredPrompt) {\n buttonsHtml += `\n <button onclick=\"installApp()\" style=\"\n flex: 1;\n background: rgba(255,255,255,0.2);\n border: 1px solid rgba(255,255,255,0.3);\n color: white;\n padding: 12px 16px;\n border-radius: 8px;\n cursor: pointer;\n font-weight: 600;\n transition: all 0.2s ease;\n \">\n Install Now\n <\/button>\n `;\n }\n\n const dismissButtonWidth = (isAndroid() && deferredPrompt) ? 'flex: 1;' : 'width: 100%;';\n const dismissButtonText = isIOS() ? 'Got it!' : 'Maybe Later';\n\n buttonsHtml += `\n <button onclick=\"dismissInstallPrompt()\" style=\"\n ${dismissButtonWidth}\n background: transparent;\n border: 1px solid rgba(255,255,255,0.3);\n color: white;\n padding: 12px 16px;\n border-radius: 8px;\n cursor: pointer;\n font-weight: 600;\n transition: all 0.2s ease;\n \">\n ${dismissButtonText}\n <\/button>\n `;\n\n buttonsContainer.innerHTML = buttonsHtml;\n }\n\n \/\/ Install app (Android)\n async function installApp() {\n if (deferredPrompt) {\n deferredPrompt.prompt();\n const { outcome } = await deferredPrompt.userChoice;\n\n if (outcome === 'accepted') {\n console.log('User accepted the install prompt');\n localStorage.setItem('pwa-installed', 'true');\n showSuccessMessage('<svg width=\"18\" height=\"18\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" style=\"vertical-align: middle; margin-right: 4px;\"><circle cx=\"12\" cy=\"12\" r=\"10\"\/><path d=\"m9 12 2 2 4-4\"\/><\/svg> App installed successfully!');\n } else {\n console.log('User dismissed the install prompt');\n }\n\n deferredPrompt = null;\n dismissInstallPrompt();\n }\n }\n\n \/\/ Dismiss install prompt\n function dismissInstallPrompt() {\n const prompt = document.getElementById('installPrompt');\n if (prompt) {\n prompt.style.animation = 'fadeOut 0.3s ease-in';\n setTimeout(() => {\n prompt.remove();\n }, 300);\n }\n localStorage.setItem('install-prompt-dismissed', Date.now().toString());\n }\n\n \/\/ Check if we should show install prompt (respects user dismissal)\n function checkAndShowInstallPrompt() {\n const lastDismissed = localStorage.getItem('install-prompt-dismissed');\n const oneDayAgo = Date.now() - (24 * 60 * 60 * 1000); \/\/ 24 hours\n\n \/\/ Don't show if dismissed within last 24 hours\n if (lastDismissed && parseInt(lastDismissed) > oneDayAgo) {\n return;\n }\n\n \/\/ Only show if currently in browser (even if app is installed)\n if (!isInBrowser()) {\n return;\n }\n\n showInstallPrompt();\n }\n\n \/\/ Debug display for iPhone testing\n function showDebugMessage(message) {\n const debugDiv = document.createElement('div');\n debugDiv.style.cssText = `\n position: fixed;\n top: 10px;\n left: 10px;\n right: 10px;\n background: #000;\n color: #0f0;\n padding: 10px;\n font-family: monospace;\n font-size: 12px;\n z-index: 9999;\n border: 1px solid #0f0;\n max-height: 200px;\n overflow-y: auto;\n `;\n debugDiv.innerHTML = '<strong>DEBUG:<\/strong><br>' + message;\n document.body.appendChild(debugDiv);\n\n setTimeout(() => {\n debugDiv.remove();\n }, 10000); \/\/ Show for 10 seconds\n }\n\n \/\/ ===== BOOKING MANAGEMENT FUNCTIONS =====\n\n function showBookings() {\n \/\/ Hide all other sections\n document.getElementById('customerDashboard').style.display = 'none';\n document.getElementById('createBookingSection').style.display = 'none';\n document.getElementById('rewardsSection').style.display = 'none';\n document.getElementById('profileSection').style.display = 'none';\n\n \/\/ Show bookings section\n const bookingsSection = document.getElementById('bookingsSection');\n bookingsSection.style.display = 'block';\n\n console.log('Bookings section shown');\n\n \/\/ Load bookings\n loadBookings();\n\n \/\/ Trigger animation\n setTimeout(() => {\n bookingsSection.style.opacity = '1';\n bookingsSection.style.transform = 'translateY(0)';\n console.log('Bookings section animation applied');\n }, 50);\n }\n\n function loadBookings() {\n if (!currentCustomer || !currentCustomer.phone) {\n showBookingMessage('error', 'Customer phone number not available');\n return;\n }\n\n const bookingsList = document.getElementById('bookingsList');\n bookingsList.innerHTML = '<div class=\"loading\"><div class=\"spinner\"><\/div><p>Loading your bookings...<\/p><\/div>';\n\n \/\/ Use centralized AJAX handler with automatic nonce refresh\n makeAjaxRequest('https:\/\/reserve.samuraiyakiniku.com\/wp-admin\/admin-ajax.php', {\n action: 'rls_get_user_bookings',\n phone: currentCustomer.phone\n })\n .then(data => {\n console.log('Booking API Response:', data);\n if (data.success) {\n \/\/ Handle nested data structure\n const bookings = data.data.bookings || data.data.data?.bookings || [];\n console.log('Extracted bookings:', bookings);\n displayBookings(bookings);\n } else {\n console.error('Booking API Error:', data);\n showBookingMessage('error', data.data?.message || data.message || 'Failed to load bookings');\n }\n })\n .catch(error => {\n console.error('Error loading bookings:', error);\n showBookingMessage('error', 'Failed to load bookings');\n });\n }\n\n function displayBookings(bookings) {\n console.log('displayBookings called with:', bookings);\n const bookingsList = document.getElementById('bookingsList');\n\n if (!bookingsList) {\n console.error('bookingsList element not found');\n return;\n }\n\n if (!bookings || bookings.length === 0) {\n console.log('No bookings to display');\n bookingsList.innerHTML = `\n <div class=\"bookings-empty-state\">\n <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n <rect x=\"3\" y=\"4\" width=\"18\" height=\"18\" rx=\"2\" ry=\"2\"\/>\n <line x1=\"16\" y1=\"2\" x2=\"16\" y2=\"6\"\/>\n <line x1=\"8\" y1=\"2\" x2=\"8\" y2=\"6\"\/>\n <line x1=\"3\" y1=\"10\" x2=\"21\" y2=\"10\"\/>\n <\/svg>\n <h3>No reservations yet<\/h3>\n <p>When you make a booking, it will appear here. Ready to reserve a table?<\/p>\n <\/div>\n `;\n return;\n }\n\n console.log('Displaying', bookings.length, 'bookings');\n\n const now = new Date();\n let html = '';\n\n bookings.forEach(booking => {\n const bookingDate = new Date(booking.booking_date + ' ' + booking.booking_time);\n const isPast = bookingDate < now;\n let canModify = false;\n if (booking.can_modify) {\n if (!isPast) {\n if (!booking.campaign_id) {\n canModify = true;\n }\n }\n }\n const hoursUntil = Math.round((bookingDate - now) \/ (1000 * 60 * 60));\n const daysUntil = Math.floor(hoursUntil \/ 24);\n\n \/\/ Check if this is a campaign booking\n const isCampaignBooking = booking.campaign_id || booking.campaign_name;\n\n \/\/ Parse date components\n const dateObj = new Date(booking.booking_date);\n const monthNames = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];\n const dayNames = ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'];\n const month = monthNames[dateObj.getMonth()];\n const day = dateObj.getDate();\n const dayName = dayNames[dateObj.getDay()];\n\n \/\/ Format time (12-hour format)\n const timeFormatted = formatBookingTime(booking.booking_time);\n\n \/\/ Time info text\n let timeInfoText = '';\n let timeInfoClass = isPast ? 'past' : 'upcoming';\n if (isPast) {\n timeInfoText = 'Completed';\n } else if (hoursUntil < 24) {\n timeInfoText = hoursUntil <= 1 ? 'Starting soon' : `In ${hoursUntil} hours`;\n } else {\n timeInfoText = `In ${daysUntil} day${daysUntil > 1 ? 's' : ''}`;\n }\n\n \/\/ Status badge\n const status = booking.status || 'pending';\n const statusDisplay = status.charAt(0).toUpperCase() + status.slice(1);\n\n \/\/ Campaign badge HTML\n const campaignBadge = isCampaignBooking ? `\n <div class=\"campaign-badge\" title=\"${booking.campaign_description ? booking.campaign_description.replace(\/\\n\/g, ' ').replace(\/\"\/g, '"') : 'Special Campaign Booking'}\">\n <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><circle cx=\"12\" cy=\"12\" r=\"10\"\/><line x1=\"22\" y1=\"12\" x2=\"18\" y2=\"12\"\/><line x1=\"6\" y1=\"12\" x2=\"2\" y2=\"12\"\/><line x1=\"12\" y1=\"6\" x2=\"12\" y2=\"2\"\/><line x1=\"12\" y1=\"22\" x2=\"12\" y2=\"18\"\/><\/svg>\n ${booking.campaign_name || 'Campaign Booking'}\n <\/div>\n ` : '';\n\n html += `\n <div class=\"booking-item ${isPast ? 'past' : 'upcoming'} ${isCampaignBooking ? 'campaign-booking' : ''}\" data-booking-id=\"${booking.id}\" data-branch=\"${booking.branch_code || 'unknown'}\">\n \n <div class=\"booking-card-header\">\n <div class=\"booking-card-header-content\">\n <div class=\"booking-date-block\">\n <div class=\"booking-calendar-icon\">\n <span class=\"booking-calendar-month\">${month}<\/span>\n <span class=\"booking-calendar-day\">${day}<\/span>\n <\/div>\n <div class=\"booking-datetime-text\">\n <span class=\"booking-day-name\">${dayName}<\/span>\n <span class=\"booking-time-display\">${timeFormatted}<\/span>\n <\/div>\n <\/div>\n <span class=\"booking-status-badge ${status}\">${statusDisplay}<\/span>\n <\/div>\n <\/div>\n\n \n <div class=\"booking-card-body\">\n ${campaignBadge}\n\n <h3 class=\"booking-venue-name\">\n <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z\"\/><circle cx=\"12\" cy=\"10\" r=\"3\"\/><\/svg>\n ${booking.branch_name || booking.branch_code || 'Restaurant'}\n <\/h3>\n\n <div class=\"booking-meta-row\">\n <div class=\"booking-meta-item\">\n <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2\"\/><circle cx=\"9\" cy=\"7\" r=\"4\"\/><path d=\"M23 21v-2a4 4 0 0 0-3-3.87\"\/><path d=\"M16 3.13a4 4 0 0 1 0 7.75\"\/><\/svg>\n <strong>${booking.party_size || 1}<\/strong> guests\n <\/div>\n ${booking.table_numbers ? `\n <div class=\"booking-meta-item\">\n <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><rect x=\"3\" y=\"3\" width=\"7\" height=\"7\"\/><rect x=\"14\" y=\"3\" width=\"7\" height=\"7\"\/><rect x=\"14\" y=\"14\" width=\"7\" height=\"7\"\/><rect x=\"3\" y=\"14\" width=\"7\" height=\"7\"\/><\/svg>\n Table <strong>${booking.table_numbers}<\/strong>\n <\/div>\n ` : ''}\n <\/div>\n\n ${booking.special_requests ? `\n <div class=\"booking-special-requests\">\n <div class=\"booking-special-requests-label\">Special Requests<\/div>\n ${booking.special_requests}\n <\/div>\n ` : ''}\n <\/div>\n\n \n <div class=\"booking-card-footer\">\n <div class=\"booking-time-info ${timeInfoClass}\">\n <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><circle cx=\"12\" cy=\"12\" r=\"10\"\/><polyline points=\"12 6 12 12 16 14\"\/><\/svg>\n ${timeInfoText}\n <\/div>\n <div class=\"booking-actions\">\n ${canModify ? `\n <button class=\"modify-booking-btn\" onclick=\"openBookingModal('${booking.branch_code}', ${booking.id})\">\n <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7\"\/><path d=\"M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z\"\/><\/svg>\n Modify\n <\/button>\n ` : (booking.campaign_id ? `\n <span class=\"modification-notice\">\n <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><circle cx=\"12\" cy=\"12\" r=\"10\"\/><line x1=\"12\" y1=\"8\" x2=\"12\" y2=\"12\"\/><line x1=\"12\" y1=\"16\" x2=\"12.01\" y2=\"16\"\/><\/svg>\n Campaign booking\n <\/span>\n ` : (!isPast && hoursUntil < 12 ? `\n <span class=\"modification-notice\">\n <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><circle cx=\"12\" cy=\"12\" r=\"10\"\/><polyline points=\"12 6 12 12 16 14\"\/><\/svg>\n Less than 12 hours\n <\/span>\n ` : ''))}\n <\/div>\n <\/div>\n <\/div>\n `;\n });\n\n console.log('Setting bookingsList innerHTML with HTML length:', html.length);\n bookingsList.innerHTML = html;\n\n \/\/ Ensure all bookings are visible by default\n setTimeout(() => {\n filterBookings('all');\n }, 100);\n }\n\n function filterBookings(filter) {\n console.log('filterBookings called with filter:', filter);\n\n \/\/ Update filter buttons\n document.querySelectorAll('.filter-btn').forEach(btn => {\n btn.classList.remove('active');\n });\n document.querySelector(`[data-filter=\"${filter}\"]`).classList.add('active');\n\n \/\/ Filter booking items\n const bookingItems = document.querySelectorAll('.booking-item');\n console.log('Found booking items for filtering:', bookingItems.length);\n\n let visibleCount = 0;\n bookingItems.forEach((item, index) => {\n const hasUpcoming = item.classList.contains('upcoming');\n const hasPast = item.classList.contains('past');\n\n console.log(`Booking item ${index}:`, {\n classes: item.className,\n hasUpcoming: hasUpcoming,\n hasPast: hasPast\n });\n\n let shouldShow = false;\n switch (filter) {\n case 'upcoming':\n shouldShow = hasUpcoming;\n break;\n case 'past':\n shouldShow = hasPast;\n break;\n case 'all':\n default:\n shouldShow = true;\n break;\n }\n\n item.style.display = shouldShow ? 'block' : 'none';\n if (shouldShow) visibleCount++;\n\n console.log(`Booking item ${index} display:`, shouldShow ? 'visible' : 'hidden');\n });\n\n console.log(`Filter '${filter}' applied: ${visibleCount}\/${bookingItems.length} bookings visible`);\n }\n\n function openBookingModal(branchCode, bookingId) {\n \/\/ Get booking details from the displayed item\n const bookingItem = document.querySelector(`[data-booking-id=\"${bookingId}\"][data-branch=\"${branchCode}\"]`);\n if (!bookingItem) return;\n\n const branchName = bookingItem.querySelector('.booking-venue-name').textContent.trim();\n const calendarMonth = bookingItem.querySelector('.booking-calendar-month').textContent;\n const calendarDay = bookingItem.querySelector('.booking-calendar-day').textContent;\n const timeDisplay = bookingItem.querySelector('.booking-time-display').textContent;\n const guestsText = bookingItem.querySelector('.booking-meta-item strong');\n const partySize = guestsText ? guestsText.textContent : '1';\n const specialRequests = bookingItem.querySelector('.booking-special-requests');\n const currentRequests = specialRequests ? specialRequests.textContent.replace('Special Requests', '').trim() : '';\n\n \/\/ For date parsing - we'll rely on the API to get the original date\n const dateTimeText = `${calendarMonth} ${calendarDay} at ${timeDisplay}`;\n const [datePart, timePart] = [dateTimeText.split(' at ')[0], timeDisplay];\n\n const modalBody = document.getElementById('bookingModalBody');\n modalBody.innerHTML = `\n <div style=\"margin-bottom: 20px;\">\n <p style=\"color: #86868b; margin-bottom: 16px;\">Modify your booking at <strong>${branchName}<\/strong><\/p>\n <p style=\"color: #ff9500; font-size: 14px; margin-bottom: 16px; display: flex; align-items: center; gap: 6px;\"><svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"m21.73 18-8-14a2 2 0 0 0-3.48 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3Z\"\/><line x1=\"12\" y1=\"9\" x2=\"12\" y2=\"13\"\/><line x1=\"12\" y1=\"17\" x2=\"12.01\" y2=\"17\"\/><\/svg>You can only modify bookings up to 12 hours before the booking time.<\/p>\n\n <div style=\"margin-bottom: 16px;\">\n <label style=\"display: block; color: #fff; font-weight: 600; margin-bottom: 8px;\">Date:<\/label>\n <input type=\"date\" id=\"bookingDate\" onchange=\"loadAvailableTimeSlots('${branchCode}', ${bookingId})\"\n style=\"width: 100%; padding: 12px; border: 1px solid #ddd; border-radius: 8px; font-size: 16px;\">\n <\/div>\n\n <div style=\"margin-bottom: 16px;\">\n <label style=\"display: block; color: #fff; font-weight: 600; margin-bottom: 8px;\">Time:<\/label>\n <select id=\"bookingTime\" onchange=\"loadTableLayout('${branchCode}', ${bookingId})\"\n style=\"width: 100%; padding: 12px; border: 1px solid #ddd; border-radius: 8px; font-size: 16px;\" disabled>\n <option value=\"\">Select a date first<\/option>\n <\/select>\n <\/div>\n\n <div style=\"margin-bottom: 16px;\">\n <label style=\"display: block; color: #fff; font-weight: 600; margin-bottom: 8px;\">Party Size :<\/label>\n <input type=\"text\" id=\"bookingPartySize\" value=\"${partySize} ${partySize === 1 ? 'person' : 'people'}\" readonly\n style=\"width: 100%; padding: 12px; border: 1px solid #ddd; border-radius: 8px; font-size: 16px; background: #f8f9fa; color: #666;\">\n <input type=\"hidden\" id=\"bookingPartySizeValue\" value=\"${partySize}\">\n <small style=\"color: #86868b; font-size: 12px;\">Party size cannot be changed when modifying a booking<\/small>\n <\/div>\n\n <div style=\"margin-bottom: 16px;\">\n <label style=\"display: block; color: #fff; font-weight: 600; margin-bottom: 8px;\">Special Requests:<\/label>\n <textarea id=\"bookingSpecialRequests\" rows=\"3\" placeholder=\"Any special requests or dietary requirements...\"\n style=\"width: 100%; padding: 12px; border: 1px solid #ddd; border-radius: 8px; font-size: 16px; resize: vertical;\">${currentRequests}<\/textarea>\n <\/div>\n\n \n <div id=\"tableSelectionSection\" style=\"display: none; margin-bottom: 16px;\">\n <div style=\"border-top: 1px solid #e5e5e7; padding-top: 16px;\">\n <h4 style=\"margin: 0 0 12px 0; color: #fff; font-size: 16px;\">\ud83c\udf7d\ufe0f Select Your Tables<\/h4>\n <div id=\"tableLayout\" style=\"border: 1px solid #ddd; border-radius: 8px; padding: 16px; background: #f9f9f9; min-height: 200px;\">\n <p style=\"text-align: center; color: #86868b; margin: 0;\">Select date, time, and party size to view available tables<\/p>\n <\/div>\n <\/div>\n <\/div>\n\n \n <div id=\"availabilitySection\" style=\"margin-top: 20px; display: none;\">\n <div style=\"border-top: 1px solid #e5e5e7; padding-top: 16px;\">\n <h4 style=\"margin: 0 0 12px 0; color: #1d1d1f; font-size: 16px;\">Table Availability<\/h4>\n <div id=\"availabilityDisplay\" style=\"background: #f8f9fa; padding: 16px; border-radius: 8px; border: 1px solid #e5e5e7;\">\n \n <\/div>\n <\/div>\n <\/div>\n\n <div style=\"text-align: center; margin-top: 20px;\">\n <button onclick=\"checkBookingAvailability('${branchCode}', ${bookingId})\" id=\"checkAvailabilityBtn\"\n style=\"background: #f2f2f7; color: #1d1d1f; border: 1px solid #d2d2d7; padding: 10px 20px; border-radius: 8px; font-size: 14px; cursor: pointer; margin-right: 10px;\">\n Check Detailed Availability\n <\/button>\n <div id=\"availabilityResult\" style=\"margin-top: 10px; padding: 10px; border-radius: 6px; display: none;\"><\/div>\n <\/div>\n <\/div>\n `;\n\n const modalFooter = document.getElementById('bookingModalFooter');\n modalFooter.innerHTML = `\n <button onclick=\"closeBookingModal()\" style=\"background: none; border: 1px solid rgba(0,0,0,0.1); color: #86868b; padding: 12px 24px; border-radius: 8px; margin-right: 12px; cursor: pointer;\">\n Cancel\n <\/button>\n <button onclick=\"saveBookingChanges('${branchCode}', ${bookingId})\" id=\"saveBookingBtn\" disabled\n style=\"background: #e5e5e7; color: #86868b; border: none; padding: 12px 24px; border-radius: 8px; font-weight: 600; cursor: not-allowed;\">\n Update Booking\n <\/button>\n `;\n\n \/\/ Set current values (simplified parsing)\n setTimeout(() => {\n \/\/ You'd want more robust date\/time parsing here\n document.getElementById('bookingDate').value = new Date().toISOString().split('T')[0]; \/\/ Placeholder\n \/\/ Load time slots for current date\n loadAvailableTimeSlots(branchCode, bookingId);\n }, 100);\n\n document.getElementById('bookingModal').style.display = 'flex';\n }\n\n function closeBookingModal() {\n document.getElementById('bookingModal').style.display = 'none';\n \/\/ Clear table selection\n selectedTables = [];\n updateSelectedTablesDisplay();\n }\n\n function showCreateBookingModal() {\n \/\/ Hide other sections\n document.querySelectorAll('.dashboard, .rewards-section, .bookings-section, .profile-section, .redeemed-rewards-section').forEach(section => {\n section.style.display = 'none';\n });\n\n \/\/ Get available branches for selection\n const modalBody = document.getElementById('createBookingModalBody');\n modalBody.innerHTML = `\n <div class=\"airbnb-form-group\">\n <label class=\"airbnb-form-label\">\n <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\">\n <path d=\"M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0118 0z\"\/>\n <circle cx=\"12\" cy=\"10\" r=\"3\"\/>\n <\/svg>\n Select Location\n <\/label>\n <select id=\"createBranchSelect\" class=\"airbnb-select\" onchange=\"loadCreateBookingForm()\">\n <option value=\"\">Choose a branch...<\/option>\n <\/select>\n <\/div>\n\n <div id=\"createBookingForm\" style=\"display: none;\">\n \n <\/div>\n `;\n\n const modalFooter = document.getElementById('createBookingModalFooter');\n modalFooter.innerHTML = `\n <button onclick=\"closeCreateBookingModal()\" class=\"airbnb-btn airbnb-btn-secondary\" style=\"flex: 1;\">\n Cancel\n <\/button>\n <button onclick=\"proceedToPayment()\" id=\"createBookingBtn\" class=\"airbnb-btn airbnb-btn-primary\" disabled style=\"flex: 2;\">\n <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" style=\"width: 18px; height: 18px; display: inline-block; vertical-align: middle; margin-right: 6px;\">\n <rect x=\"1\" y=\"4\" width=\"22\" height=\"16\" rx=\"2\" ry=\"2\"\/>\n <line x1=\"1\" y1=\"10\" x2=\"23\" y2=\"10\"\/>\n <\/svg>\n Continue to Payment\n <\/button>\n `;\n\n \/\/ Load available branches\n loadAvailableBranches();\n\n \/\/ Show the create booking section\n const createBookingSection = document.getElementById('createBookingSection');\n createBookingSection.style.display = 'block';\n createBookingSection.style.opacity = '0';\n createBookingSection.style.transform = 'translateY(20px)';\n\n \/\/ Animate in\n setTimeout(() => {\n createBookingSection.style.transition = 'opacity 0.3s ease, transform 0.3s ease';\n createBookingSection.style.opacity = '1';\n createBookingSection.style.transform = 'translateY(0)';\n }, 50);\n\n \/\/ Scroll to top\n window.scrollTo(0, 0);\n }\n\n function closeCreateBookingModal() {\n const createBookingSection = document.getElementById('createBookingSection');\n\n \/\/ Animate out\n createBookingSection.style.transition = 'opacity 0.2s ease, transform 0.2s ease';\n createBookingSection.style.opacity = '0';\n createBookingSection.style.transform = 'translateY(20px)';\n\n setTimeout(() => {\n createBookingSection.style.display = 'none';\n\n \/\/ Clear table selection\n selectedTables = [];\n updateSelectedTablesDisplay();\n updateCreateSelectedTablesDisplay();\n\n \/\/ Hide table selection section\n const tableSection = document.getElementById('createTableSelectionSection');\n if (tableSection) {\n tableSection.style.display = 'none';\n }\n\n \/\/ Show bookings section\n showBookings();\n }, 200);\n }\n\n function loadAvailableBranches() {\n const branchSelect = document.getElementById('createBranchSelect');\n\n \/\/ Show loading state\n branchSelect.innerHTML = '<option value=\"\">Loading branches...<\/option>';\n branchSelect.disabled = true;\n\n \/\/ Load branches from the booking connector using centralized AJAX handler\n makeAjaxRequest('https:\/\/reserve.samuraiyakiniku.com\/wp-admin\/admin-ajax.php', {\n action: 'rls_get_active_branches'\n })\n .then(data => {\n \/\/ Re-enable the select\n branchSelect.disabled = false;\n\n if (data.success && data.data) {\n \/\/ Clear existing options except the default\n branchSelect.innerHTML = '<option value=\"\">Choose a branch...<\/option>';\n\n \/\/ Add branch options from the booking connector\n Object.entries(data.data).forEach(([branchCode, branchData]) => {\n const option = document.createElement('option');\n option.value = branchCode;\n option.textContent = branchData.name;\n branchSelect.appendChild(option);\n });\n } else {\n console.error('Failed to load branches:', data);\n \/\/ Fallback to default message\n branchSelect.innerHTML = '<option value=\"\">No branches available<\/option>';\n }\n })\n .catch(error => {\n console.error('Error loading branches:', error);\n \/\/ Re-enable the select\n branchSelect.disabled = false;\n \/\/ Fallback to default message\n branchSelect.innerHTML = '<option value=\"\">Error loading branches<\/option>';\n });\n }\n\n function loadCreateBookingForm() {\n const branchCode = document.getElementById('createBranchSelect').value;\n const formContainer = document.getElementById('createBookingForm');\n\n if (!branchCode) {\n formContainer.style.display = 'none';\n document.getElementById('createBookingBtn').disabled = true;\n return;\n }\n\n formContainer.innerHTML = `\n <hr class=\"airbnb-divider\">\n\n \n <div id=\"campaignBannerContainer\"><\/div>\n\n <div class=\"airbnb-form-group\">\n <label class=\"airbnb-form-label\">\n <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\">\n <path d=\"M20 21v-2a4 4 0 00-4-4H8a4 4 0 00-4 4v2\"\/>\n <circle cx=\"12\" cy=\"7\" r=\"4\"\/>\n <\/svg>\n Your Name\n <\/label>\n <input type=\"text\" id=\"createCustomerName\" class=\"airbnb-input\" onchange=\"validateCreateBookingForm()\"\n placeholder=\"Enter your name\"\n value=\"${currentCustomer ? (currentCustomer.first_name + ' ' + (currentCustomer.last_name || '')).trim() : ''}\">\n <\/div>\n\n <div class=\"airbnb-form-group\">\n <label class=\"airbnb-form-label\">\n <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\">\n <path d=\"M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z\"\/>\n <polyline points=\"22,6 12,13 2,6\"\/>\n <\/svg>\n Email\n <\/label>\n <input type=\"email\" id=\"createCustomerEmail\" class=\"airbnb-input\" onchange=\"validateCreateBookingForm()\"\n placeholder=\"your@email.com\"\n value=\"${currentCustomer ? currentCustomer.email || '' : ''}\">\n <\/div>\n\n <div class=\"airbnb-form-group\">\n <label class=\"airbnb-form-label\">\n <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\">\n <path d=\"M17 21v-2a4 4 0 00-4-4H5a4 4 0 00-4 4v2\"\/>\n <circle cx=\"9\" cy=\"7\" r=\"4\"\/>\n <path d=\"M23 21v-2a4 4 0 00-3-3.87\"\/>\n <path d=\"M16 3.13a4 4 0 010 7.75\"\/>\n <\/svg>\n Guests\n <\/label>\n <div class=\"airbnb-guest-counter\">\n <div class=\"airbnb-guest-info\">\n <h4>Party Size<\/h4>\n <p>Including children with seats<\/p>\n <\/div>\n <div class=\"airbnb-counter-controls\">\n <button type=\"button\" class=\"airbnb-counter-btn\" onclick=\"adjustCreatePartySize(-1)\">\u2212<\/button>\n <span id=\"createPartySizeValue\" class=\"airbnb-counter-value\">4<\/span>\n <button type=\"button\" class=\"airbnb-counter-btn\" onclick=\"adjustCreatePartySize(1)\">+<\/button>\n <\/div>\n <\/div>\n <\/div>\n\n <div class=\"airbnb-form-group\">\n <label class=\"airbnb-form-label\">\n <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\">\n <rect x=\"3\" y=\"4\" width=\"18\" height=\"18\" rx=\"2\" ry=\"2\"\/>\n <line x1=\"16\" y1=\"2\" x2=\"16\" y2=\"6\"\/>\n <line x1=\"8\" y1=\"2\" x2=\"8\" y2=\"6\"\/>\n <line x1=\"3\" y1=\"10\" x2=\"21\" y2=\"10\"\/>\n <\/svg>\n Date\n <\/label>\n <input type=\"date\" id=\"createBookingDate\" class=\"airbnb-input\" onchange=\"loadCreateAvailableTimeSlots('${branchCode}')\"\n min=\"${new Date().toISOString().split('T')[0]}\">\n <\/div>\n\n <div class=\"airbnb-form-group\">\n <label class=\"airbnb-form-label\">\n <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\">\n <circle cx=\"12\" cy=\"12\" r=\"10\"\/>\n <polyline points=\"12 6 12 12 16 14\"\/>\n <\/svg>\n Time\n <\/label>\n <select id=\"createBookingTime\" class=\"airbnb-select\" onchange=\"loadCreateTableLayout('${branchCode}')\">\n <option value=\"\">Select date first...<\/option>\n <\/select>\n <\/div>\n\n <div class=\"airbnb-form-group\">\n <label class=\"airbnb-form-label\">\n <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\">\n <line x1=\"4\" y1=\"9\" x2=\"20\" y2=\"9\"\/>\n <line x1=\"4\" y1=\"15\" x2=\"20\" y2=\"15\"\/>\n <line x1=\"10\" y1=\"3\" x2=\"8\" y2=\"21\"\/>\n <line x1=\"16\" y1=\"3\" x2=\"14\" y2=\"21\"\/>\n <\/svg>\n Special Requests\n <\/label>\n <p class=\"airbnb-form-hint\">Optional - dietary requirements, celebrations, etc.<\/p>\n <textarea id=\"createSpecialRequests\" class=\"airbnb-textarea\"\n placeholder=\"Any special requests or preferences...\"><\/textarea>\n <\/div>\n\n \n <div id=\"createTableSelectionSection\" style=\"display: none;\">\n <hr class=\"airbnb-divider\">\n <div class=\"airbnb-table-section\">\n <div class=\"airbnb-table-header\">\n <svg viewBox=\"0 0 24 24\" fill=\"currentColor\">\n <path d=\"M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 15l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z\"\/>\n <\/svg>\n <h4>Select Your Tables<\/h4>\n <\/div>\n <div id=\"createTableLayout\" style=\"border: 1px solid #ebebeb; border-radius: 12px; padding: 0px; background: #fff; min-height: 200px;\">\n <p style=\"text-align: center; color: #717171; margin: 0; padding: 40px 20px; font-size: 14px;\">Select date, time, and party size to view available tables<\/p>\n <\/div>\n\n \n <div id=\"createSelectedTablesDisplay\" class=\"airbnb-selected-info\" style=\"display: none;\">\n <span><strong style=\"color: #ff385c;\">Selected:<\/strong> <span id=\"createSelectedTablesList\">None<\/span><\/span>\n <span><strong>Capacity:<\/strong> <span id=\"createSelectedTablesCapacity\">0<\/span> guests<\/span>\n <\/div>\n <\/div>\n <\/div>\n `;\n\n formContainer.style.display = 'block';\n validateCreateBookingForm();\n }\n\n function adjustCreatePartySize(change) {\n const currentValue = parseInt(document.getElementById('createPartySizeValue').textContent);\n\n \/\/ Determine minimum party size based on active campaign\n let minPartySize = 1; \/\/ Default minimum\n if (currentCampaign && currentCampaign.campaign && currentCampaign.campaign.minimum_pax) {\n minPartySize = parseInt(currentCampaign.campaign.minimum_pax);\n console.log('Campaign minimum pax applied: min party size =', minPartySize);\n }\n\n \/\/ Determine maximum party size based on campaign capacity\n let maxPartySize = 20; \/\/ Default maximum\n if (currentCampaignCapacity !== null) {\n if (currentCampaignCapacity > 0) {\n maxPartySize = Math.min(20, currentCampaignCapacity);\n console.log('Campaign capacity limit applied: max party size =', maxPartySize);\n }\n }\n\n const newValue = Math.max(minPartySize, Math.min(maxPartySize, currentValue + change));\n document.getElementById('createPartySizeValue').textContent = newValue;\n\n \/\/ Update button states based on limits\n updatePartySizeButtonStates(newValue, maxPartySize, minPartySize);\n\n \/\/ Recheck campaign when party size changes\n const date = document.getElementById('createBookingDate').value;\n const branchCode = document.getElementById('createBranchSelect').value;\n if (date && branchCode) {\n checkBookingCampaign(date, branchCode, newValue);\n }\n\n validateCreateBookingForm();\n }\n\n function updatePartySizeButtonStates(currentValue, maxValue, minValue = 1) {\n \/\/ Find the party size buttons (works with both old and new Airbnb styles)\n const minusBtn = document.querySelector('button[onclick=\"adjustCreatePartySize(-1)\"]');\n const plusBtn = document.querySelector('button[onclick=\"adjustCreatePartySize(1)\"]');\n\n if (minusBtn && plusBtn) {\n \/\/ Disable minus button if at minimum\n minusBtn.disabled = currentValue <= minValue;\n\n \/\/ Disable plus button if at maximum\n plusBtn.disabled = currentValue >= maxValue;\n\n \/\/ Show limit indicators\n if (maxValue < 20 || minValue > 1) {\n showPartySizeLimitIndicator(maxValue, minValue);\n } else {\n hidePartySizeLimitIndicator();\n }\n }\n }\n\n function showPartySizeLimitIndicator(maxValue, minValue = 1) {\n \/\/ Remove existing indicator\n const existingIndicator = document.getElementById('partySizeLimitIndicator');\n if (existingIndicator) {\n existingIndicator.remove();\n }\n\n \/\/ Find the guest counter container (works with Airbnb layout)\n const guestCounter = document.querySelector('.airbnb-guest-counter') ||\n document.getElementById('createPartySizeValue')?.parentElement?.parentElement;\n if (!guestCounter) return;\n\n const indicator = document.createElement('div');\n indicator.id = 'partySizeLimitIndicator';\n indicator.style.cssText = `\n font-size: 12px;\n color: #e00b41;\n margin-top: 12px;\n padding: 8px 12px;\n background: #fff5f7;\n border-radius: 8px;\n border: 1px solid #ffccd5;\n `;\n\n \/\/ Create appropriate message based on limits\n let message = '';\n if (minValue > 1 && maxValue < 20) {\n message = `Campaign requires ${minValue}-${maxValue} guests`;\n } else if (minValue > 1) {\n message = `Campaign minimum: ${minValue} guests`;\n } else if (maxValue < 20) {\n message = `Only ${maxValue} spots remaining`;\n }\n\n indicator.textContent = message;\n guestCounter.parentElement.appendChild(indicator);\n }\n\n function hidePartySizeLimitIndicator() {\n const indicator = document.getElementById('partySizeLimitIndicator');\n if (indicator) {\n indicator.remove();\n }\n }\n\n function validateCreateBookingForm(forceEnabled = null) {\n const createBtn = document.getElementById('createBookingBtn');\n if (!createBtn) return;\n\n \/\/ Check if all required fields are filled\n const name = document.getElementById('createCustomerName')?.value.trim();\n const email = document.getElementById('createCustomerEmail')?.value.trim();\n const date = document.getElementById('createBookingDate')?.value;\n const time = document.getElementById('createBookingTime')?.value;\n const partySize = parseInt(document.getElementById('createPartySizeValue')?.textContent || '0');\n\n let enabled = forceEnabled;\n if (enabled === null) {\n \/\/ Auto-determine if button should be enabled (same logic as modify booking)\n enabled = false;\n if (name) {\n if (email) {\n if (date) {\n if (time) {\n if (partySize > 0) {\n enabled = true;\n }\n }\n }\n }\n }\n\n \/\/ If table layout is shown, require table selection (same logic as modify booking)\n const tableSection = document.getElementById('createTableSelectionSection');\n if (tableSection) {\n if (tableSection.style.display !== 'none') {\n if (selectedTables.length === 0) {\n enabled = false;\n }\n }\n }\n }\n\n if (enabled) {\n createBtn.disabled = false;\n createBtn.style.background = 'blue';\n createBtn.style.color = 'white';\n createBtn.style.cursor = 'pointer';\n } else {\n createBtn.disabled = true;\n createBtn.style.background = 'var(--color-fill-secondary)';\n createBtn.style.color = 'var(--color-label-secondary)';\n createBtn.style.cursor = 'not-allowed';\n }\n }\n\n function loadCreateAvailableTimeSlots(branchCode) {\n const date = document.getElementById('createBookingDate').value;\n const partySize = parseInt(document.getElementById('createPartySizeValue').textContent);\n const timeSelect = document.getElementById('createBookingTime');\n\n if (!date || !partySize) {\n timeSelect.innerHTML = '<option value=\"\">Select date and party size first...<\/option>';\n return;\n }\n\n \/\/ Check for active booking campaigns first\n checkBookingCampaign(date, branchCode, partySize);\n\n timeSelect.innerHTML = '<option value=\"\">Loading time slots...<\/option>';\n\n makeAjaxRequest('https:\/\/reserve.samuraiyakiniku.com\/wp-admin\/admin-ajax.php', {\n action: 'rls_get_available_time_slots',\n branch_code: branchCode,\n date: date,\n party_size: partySize\n })\n .then(data => {\n console.log('Time slots response:', data); \/\/ Debug logging\n\n \/\/ Handle nested data structure: data.data.time_slots\n const timeSlots = data.success && data.data && data.data.data && data.data.data.time_slots\n ? data.data.data.time_slots\n : (data.success && data.data && data.data.time_slots ? data.data.time_slots : null);\n\n if (timeSlots && timeSlots.length > 0) {\n timeSelect.innerHTML = '<option value=\"\">Select a time...<\/option>';\n timeSlots.forEach(slot => {\n const option = document.createElement('option');\n option.value = slot.time;\n \/\/ Use display_time if available, otherwise use time\n option.textContent = slot.display_time || slot.time;\n if (slot.available_tables) {\n option.textContent += ` (${slot.available_tables} tables available)`;\n }\n timeSelect.appendChild(option);\n });\n } else {\n timeSelect.innerHTML = '<option value=\"\">No time slots available<\/option>';\n console.log('No time slots found in response:', data);\n }\n validateCreateBookingForm();\n })\n .catch(error => {\n console.error('Error loading time slots:', error);\n timeSelect.innerHTML = '<option value=\"\">Error loading time slots<\/option>';\n });\n }\n\n function proceedToPayment() {\n const branchCode = document.getElementById('createBranchSelect').value;\n const partySize = parseInt(document.getElementById('createPartySizeValue').textContent);\n\n \/\/ Validate table selection if tables are selected (strict validation for final submission)\n if (selectedTables.length > 0) {\n const validation = validateTableCombination(selectedTables, partySize, false);\n if (!validation.valid) {\n alert('Table Selection Error: ' + validation.message);\n return;\n }\n }\n\n const bookingData = {\n customer_name: document.getElementById('createCustomerName').value.trim(),\n customer_phone: currentCustomer.phone,\n customer_email: document.getElementById('createCustomerEmail').value.trim(),\n booking_date: document.getElementById('createBookingDate').value,\n booking_time: document.getElementById('createBookingTime').value,\n party_size: partySize,\n special_requests: document.getElementById('createSpecialRequests').value.trim()\n };\n\n \/\/ Include selected tables if any are selected\n if (selectedTables.length > 0) {\n bookingData.table_ids = selectedTables;\n }\n\n \/\/ Include campaign data if this is a campaign booking\n if (currentCampaign && currentCampaign.campaign) {\n bookingData.is_campaign_booking = true;\n bookingData.campaign_id = currentCampaign.campaign.id;\n bookingData.campaign_name = currentCampaign.campaign.name;\n bookingData.campaign_description = currentCampaign.campaign.description;\n\n console.log('Adding campaign data to booking:', {\n campaign_id: bookingData.campaign_id,\n campaign_name: bookingData.campaign_name\n });\n } else {\n console.log('No active campaign - creating regular booking');\n }\n\n \/\/ Show payment method selection\n showPaymentMethodSelection(branchCode, bookingData);\n }\n\n function showPaymentMethodSelection(branchCode, bookingData) {\n const modalBody = document.getElementById('createBookingModalBody');\n modalBody.innerHTML = `\n\n <div style=\"margin-bottom: var(--spacing-xl);\">\n <div style=\"background: var(--color-fill-primary); padding: var(--spacing-lg); border-radius: var(--radius-lg); margin-bottom: var(--spacing-lg);\">\n <h4 style=\"margin: 0 0 var(--spacing-md) 0; color: #1d1d1f; font-size: var(--font-size-callout); font-weight: var(--font-weight-semibold); line-height: var(--line-height-normal); display: flex; align-items: center; gap: 8px;\"><svg width=\"18\" height=\"18\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><rect x=\"8\" y=\"2\" width=\"8\" height=\"4\" rx=\"1\" ry=\"1\"\/><path d=\"M16 4h2a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h2\"\/><\/svg>Booking Summary<\/h4>\n <div style=\"display: grid; gap: var(--spacing-xs);\">\n <p style=\"margin: 0; color: #86868b; font-size: var(--font-size-subhead); line-height: var(--line-height-normal);\"><span style=\"font-weight: var(--font-weight-medium);\">Date:<\/span> ${bookingData.booking_date}<\/p>\n <p style=\"margin: 0; color: #86868b; font-size: var(--font-size-subhead); line-height: var(--line-height-normal);\"><span style=\"font-weight: var(--font-weight-medium);\">Time:<\/span> ${bookingData.booking_time}<\/p>\n <p style=\"margin: 0; color: #86868b; font-size: var(--font-size-subhead); line-height: var(--line-height-normal);\"><span style=\"font-weight: var(--font-weight-medium);\">Party Size:<\/span> ${bookingData.party_size} people<\/p>\n <p style=\"margin: 0; color: #86868b; font-size: var(--font-size-subhead); line-height: var(--line-height-normal);\"><span style=\"font-weight: var(--font-weight-medium);\">*Amount:<\/span> <span id=\"bookingAmount\" style=\"font-weight: var(--font-weight-semibold);\">Calculating...<\/span><\/p>\n <\/div>\n <\/div>\n\n <div style=\"text-align: left; margin-bottom: var(--spacing-xl); padding: var(--spacing-lg); background: #fff; border-radius: var(--radius-md);\">\n <p style=\"color: var(--color-label-primary); font-size: var(--font-size-subhead); font-weight: var(--font-weight-medium); margin: 0; line-height: var(--line-height-relaxed);\">*Deposit RM5\/Pax akan dikembalikan bila anda datang ke kedai. RM2.00 caj untuk booking.<\/p>\n <\/div>\n\n <div style=\"text-align: center; margin-bottom: var(--spacing-xl);\">\n <h3 style=\"color: #FFF; font-size: var(--font-size-headline); font-weight: var(--font-weight-semibold); margin-bottom: var(--spacing-sm); line-height: var(--line-height-tight);\">\ud83d\udcb3 Select Payment Method<\/h3>\n <p style=\"color: var(--color-label-secondary); font-size: var(--font-size-subhead); margin: 0; line-height: var(--line-height-normal);\">Choose your preferred payment method to complete your booking<\/p>\n <\/div>\n\n <div style=\"display: grid; gap: var(--spacing-md);\">\n <button onclick=\"initiatePayment('${branchCode}', '1')\" class=\"payment-method-btn\"\n style=\"display: flex; align-items: center; padding: var(--spacing-lg); border: 2px solid var(--color-fill-tertiary); border-radius: var(--radius-lg); background: var(--color-fill-primary); cursor: pointer; transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);\">\n <div style=\"width: 44px; height: 44px; background: blue; border-radius: var(--radius-sm); display: flex; align-items: center; justify-content: center; margin-right: var(--spacing-md); font-size: var(--font-size-headline);\">\n \ud83c\udfe6\n <\/div>\n <div style=\"text-align: left;\">\n <div style=\"font-weight: var(--font-weight-semibold); color: #1d1d1f; font-size: var(--font-size-body); line-height: var(--line-height-normal);\">FPX Online Banking<\/div>\n <div style=\"font-size: var(--font-size-subhead); color: var(--color-label-secondary); line-height: var(--line-height-normal);\">Pay directly from your bank account<\/div>\n <\/div>\n <\/button>\n <\/div>\n <\/div>\n `;\n\n const modalFooter = document.getElementById('createBookingModalFooter');\n modalFooter.innerHTML = `\n `;\n\n \/\/ Store booking data for payment\n window.pendingBookingData = { branchCode, bookingData };\n\n \/\/ Calculate and display amount\n calculateBookingAmount(bookingData);\n\n \/\/ Add hover effects to payment buttons\n setTimeout(() => {\n document.querySelectorAll('.payment-method-btn').forEach(btn => {\n btn.addEventListener('mouseenter', function() {\n this.style.borderColor = '#007AFF';\n this.style.transform = 'translateY(-2px)';\n this.style.boxShadow = '0 4px 12px rgba(0, 122, 255, 0.15)';\n });\n btn.addEventListener('mouseleave', function() {\n this.style.borderColor = '#e5e5e7';\n this.style.transform = 'translateY(0)';\n this.style.boxShadow = 'none';\n });\n });\n }, 100);\n }\n\n function calculateBookingAmount(bookingData) {\n \/\/ This would typically call the backend to calculate the exact amount\n \/\/ For now, we'll use a simple calculation\n const baseAmount = 2.00; \/\/ RM 10 base fee\n const perPersonFee = 5.00; \/\/ No per-person fee by default\n const totalAmount = baseAmount + (perPersonFee * bookingData.party_size);\n\n document.getElementById('bookingAmount').textContent = `RM ${totalAmount.toFixed(2)}`;\n }\n\n async function initiatePayment(branchCode, paymentChannel) {\n const { bookingData } = window.pendingBookingData;\n\n \/\/ Show loading state\n const paymentButtons = document.querySelectorAll('.payment-method-btn');\n paymentButtons.forEach(btn => {\n btn.disabled = true;\n btn.style.opacity = '0.6';\n });\n\n try {\n \/\/ Force refresh nonce before payment to ensure it's fresh\n console.log('\ud83d\udd04 Refreshing nonce before payment...');\n await refreshNonce();\n console.log('\u2705 Nonce refreshed:', nonceStore.booking.substring(0, 10) + '...');\n\n \/\/ Add payment channel to booking data\n const paymentData = {\n ...bookingData,\n payment_channel: paymentChannel\n };\n\n console.log('\ud83d\udce4 Payment request data:', {\n action: 'rls_initiate_payment',\n branch_code: branchCode,\n nonce: nonceStore.booking.substring(0, 10) + '...',\n bookingDataKeys: Object.keys(paymentData)\n });\n\n const data = await makeAjaxRequest('https:\/\/reserve.samuraiyakiniku.com\/wp-admin\/admin-ajax.php', {\n action: 'rls_initiate_payment',\n branch_code: branchCode,\n ...paymentData\n });\n\n console.log('\ud83d\udce5 Payment response:', data);\n\n if (data.success && data.data.payment_url) {\n \/\/ Redirect to BayarCash payment page\n window.location.href = data.data.payment_url;\n } else {\n const errorMessage = data.data?.message || 'Failed to initiate payment';\n showBookingMessage('error', errorMessage);\n\n \/\/ Re-enable buttons\n paymentButtons.forEach(btn => {\n btn.disabled = false;\n btn.style.opacity = '1';\n });\n }\n } catch (error) {\n console.error('Error initiating payment:', error);\n showBookingMessage('error', 'Failed to initiate payment. Please try again.');\n\n \/\/ Re-enable buttons\n paymentButtons.forEach(btn => {\n btn.disabled = false;\n btn.style.opacity = '1';\n });\n }\n }\n\n function loadCreateTableLayout(branchCode) {\n const date = document.getElementById('createBookingDate').value;\n const time = document.getElementById('createBookingTime').value;\n const partySize = parseInt(document.getElementById('createPartySizeValue').textContent);\n\n const tableSection = document.getElementById('createTableSelectionSection');\n const tableLayout = document.getElementById('createTableLayout');\n\n if (!date || !time || !partySize) {\n tableSection.style.display = 'none';\n validateCreateBookingForm();\n return;\n }\n\n console.log('Loading create table layout for:', { branchCode, date, time, partySize });\n\n \/\/ Show table section and loading state\n tableSection.style.display = 'block';\n tableLayout.innerHTML = '<div class=\"rbs-loading\">Loading table layout...<\/div>';\n\n \/\/ Clear previous selection\n selectedTables = [];\n updateCreateSelectedTablesDisplay();\n\n makeAjaxRequest('https:\/\/reserve.samuraiyakiniku.com\/wp-admin\/admin-ajax.php', {\n action: 'rls_get_table_layout',\n branch_code: branchCode,\n date: date,\n time: time,\n party_size: partySize,\n infant_count: 0\n })\n .then(data => {\n console.log('Create table layout response:', data);\n\n \/\/ Handle nested data structure (same as modify booking)\n const layoutData = data.success && data.data && data.data.data\n ? data.data.data\n : (data.success && data.data ? data.data : null);\n\n if (layoutData && (layoutData.table_layout || layoutData.tables)) {\n renderCreateTableLayout(layoutData);\n } else {\n tableLayout.innerHTML = '<p style=\"text-align: center; color: #ff3b30; margin: 0;\">No tables available for this time slot<\/p>';\n console.log('No table layout found in response:', layoutData);\n }\n validateCreateBookingForm();\n })\n .catch(error => {\n console.error('Error loading create table layout:', error);\n tableLayout.innerHTML = '<p style=\"text-align: center; color: #ff3b30; margin: 0;\">Error loading table layout<\/p>';\n validateCreateBookingForm();\n });\n }\n\n \/\/ Table selection variables\n let selectedTables = [];\n let currentTableLayout = null;\n\n function loadTableLayout(branchCode, bookingId) {\n const date = document.getElementById('bookingDate').value;\n const time = document.getElementById('bookingTime').value;\n const partySize = document.getElementById('bookingPartySizeValue').value;\n\n const tableSection = document.getElementById('tableSelectionSection');\n const tableLayout = document.getElementById('tableLayout');\n\n if (!date || !time || !partySize) {\n tableSection.style.display = 'none';\n return;\n }\n\n console.log('Loading table layout for:', { branchCode, date, time, partySize, bookingId });\n\n \/\/ Show table section and loading state\n tableSection.style.display = 'block';\n tableLayout.innerHTML = '<div class=\"rbs-loading\">Loading table layout...<\/div>';\n\n \/\/ Clear previous selection\n selectedTables = [];\n updateSelectedTablesDisplay();\n\n \/\/ Use centralized AJAX handler with automatic nonce refresh\n makeAjaxRequest('https:\/\/reserve.samuraiyakiniku.com\/wp-admin\/admin-ajax.php', {\n action: 'rls_get_table_layout',\n branch_code: branchCode,\n date: date,\n time: time,\n party_size: partySize,\n infant_count: 0,\n exclude_booking_id: bookingId\n })\n .then(data => {\n console.log('Table layout API response:', data);\n\n if (data.success) {\n \/\/ Handle nested data structure\n let layoutData = null;\n if (data.data && data.data.data) {\n layoutData = data.data.data;\n } else if (data.data) {\n layoutData = data.data;\n }\n\n if (layoutData && layoutData.table_layout) {\n currentTableLayout = layoutData;\n renderTableLayout(layoutData);\n } else {\n tableLayout.innerHTML = '<div class=\"rbs-no-tables\"><p>No table layout available<\/p><\/div>';\n }\n } else {\n console.error('Table layout error:', data);\n tableLayout.innerHTML = '<div class=\"rbs-no-tables\"><p>Error loading table layout<\/p><\/div>';\n }\n })\n .catch(error => {\n console.error('Table layout fetch error:', error);\n tableLayout.innerHTML = '<div class=\"rbs-no-tables\"><p>Error loading table layout<\/p><\/div>';\n });\n }\n\n function renderTableLayout(layoutData) {\n const tableLayout = document.getElementById('tableLayout');\n const layout = layoutData.table_layout;\n\n if (!layout || (!layout.left_side && !layout.right_side)) {\n tableLayout.innerHTML = '<div class=\"rbs-no-tables\"><p>No tables available for this time slot<\/p><\/div>';\n return;\n }\n\n let html = '';\n\n \/\/ Add entrances at the top if available\n if (layoutData.entrances && layoutData.entrances.length > 0) {\n const topEntrances = layoutData.entrances.filter(entrance => parseInt(entrance.row_position) === 0);\n topEntrances.forEach(entrance => {\n html += `<div class=\"rbs-entrance\">${entrance.name || 'Entrance'}<\/div>`;\n });\n }\n\n \/\/ Create restaurant layout container (matching public form)\n html += '<div class=\"rbs-restaurant-layout\">';\n\n \/\/ Organize tables by rows\n const leftTables = layout.left_side || {};\n const rightTables = layout.right_side || {};\n\n \/\/ Determine the maximum row number\n let maxRow = 0;\n for (let row in leftTables) {\n maxRow = Math.max(maxRow, parseInt(row));\n }\n for (let row in rightTables) {\n maxRow = Math.max(maxRow, parseInt(row));\n }\n maxRow = Math.max(maxRow, 1);\n\n \/\/ Create all rows - matching public form structure exactly\n for (let row = 1; row <= maxRow; row++) {\n \/\/ Left side tables for this row\n html += `<div class=\"rbs-row${row}-left rbs-table-row\">`;\n if (leftTables[row] && leftTables[row].length > 0) {\n const rowTables = leftTables[row].sort((a, b) => a.position - b.position);\n rowTables.forEach(table => {\n html += renderTableElementPublicStyle(table, 'left-side');\n });\n }\n html += '<\/div>';\n\n \/\/ Center aisle\n html += '<div class=\"rbs-center-aisle\"><\/div>';\n\n \/\/ Right side tables for this row\n html += `<div class=\"rbs-row${row}-right rbs-table-row\">`;\n if (rightTables[row] && rightTables[row].length > 0) {\n const rowTables = rightTables[row].sort((a, b) => a.position - b.position);\n rowTables.forEach(table => {\n html += renderTableElementPublicStyle(table, 'right-side');\n });\n }\n html += '<\/div>';\n }\n\n html += '<\/div>';\n\n \/\/ Add suggested tables info if available\n\n\n tableLayout.innerHTML = html;\n\n \/\/ Add click handlers to tables\n document.querySelectorAll('.rbs-table.available').forEach(table => {\n table.addEventListener('click', function() {\n toggleTableSelection(this);\n });\n });\n }\n\n function renderTableElementPublicStyle(table, side) {\n const isAvailable = table.available;\n const isSelected = selectedTables.includes(table.id);\n\n \/\/ Build classes array matching public form exactly\n const classes = ['rbs-table', side, 'combinable'];\n\n \/\/ Add capacity-based class for styling\n if (table.capacity <= 2) {\n classes.push('two-person');\n } else if (table.capacity <= 4) {\n classes.push('four-person');\n } else if (table.capacity <= 6) {\n classes.push('six-person');\n } else {\n classes.push('large-table');\n }\n\n \/\/ Add availability\/selection status\n if (isSelected) {\n classes.push('selected');\n } else if (isAvailable) {\n classes.push('available');\n } else {\n classes.push('unavailable');\n }\n\n return `\n <div class=\"${classes.join(' ')}\"\n data-table-id=\"${table.id}\"\n data-capacity=\"${table.capacity}\"\n data-infant-capacity=\"${table.infant_capacity || 0}\"\n data-row=\"${table.row_number}\"\n data-position=\"${table.position}\"\n data-available=\"${isAvailable}\">\n <div class=\"rbs-table-number\">${table.table_number}<\/div>\n <div class=\"rbs-table-capacity\">${table.capacity}pax<\/div>\n <\/div>\n `;\n }\n\n \/\/ Keep the old function for backward compatibility\n function renderTableElement(table) {\n return renderTableElementPublicStyle(table, 'center');\n }\n\n function toggleTableSelection(tableElement) {\n if (!tableElement || !tableElement.dataset) {\n console.error('Invalid table element passed to toggleTableSelection');\n return;\n }\n\n const tableId = parseInt(tableElement.dataset.tableId);\n const isAvailable = tableElement.dataset.available === 'true';\n\n if (!tableId || isNaN(tableId)) {\n console.error('Invalid table ID:', tableElement.dataset.tableId);\n return;\n }\n\n if (!isAvailable) return;\n\n if (selectedTables.includes(tableId)) {\n \/\/ Deselect table\n selectedTables = selectedTables.filter(id => id !== tableId);\n tableElement.classList.remove('selected');\n tableElement.classList.add('available');\n } else {\n \/\/ Select table\n selectedTables.push(tableId);\n tableElement.classList.remove('available');\n tableElement.classList.add('selected');\n }\n\n updateSelectedTablesDisplay();\n updateSaveButton();\n }\n\n function updateSelectedTablesDisplay() {\n const display = document.getElementById('selectedTablesDisplay');\n const tablesList = document.getElementById('selectedTablesList');\n const capacitySpan = document.getElementById('selectedTablesCapacity');\n\n \/\/ Check if elements exist\n if (!display || !tablesList || !capacitySpan) {\n console.warn('Selected tables display elements not found');\n return;\n }\n\n if (selectedTables.length === 0) {\n display.style.display = 'none';\n return;\n }\n\n display.style.display = 'block';\n\n \/\/ Get table details\n const tableDetails = [];\n let totalCapacity = 0;\n\n selectedTables.forEach(tableId => {\n const tableElement = document.querySelector(`[data-table-id=\"${tableId}\"]`);\n if (tableElement) {\n \/\/ Try both old and new class names for compatibility\n const tableNumberElement = tableElement.querySelector('.rbs-table-number') ||\n tableElement.querySelector('.table-number');\n\n if (tableNumberElement) {\n const tableNumber = tableNumberElement.textContent;\n const capacity = parseInt(tableElement.dataset.capacity);\n tableDetails.push(`Table ${tableNumber}`);\n totalCapacity += capacity;\n } else {\n console.warn('Table number element not found for table ID:', tableId);\n \/\/ Fallback: use table ID\n const capacity = parseInt(tableElement.dataset.capacity);\n tableDetails.push(`Table ${tableId}`);\n totalCapacity += capacity;\n }\n } else {\n console.warn('Table element not found for table ID:', tableId);\n }\n });\n\n tablesList.textContent = tableDetails.join(', ');\n capacitySpan.textContent = totalCapacity;\n }\n\n function clearTableSelection() {\n selectedTables = [];\n document.querySelectorAll('.rbs-table.selected').forEach(table => {\n table.classList.remove('selected');\n table.classList.add('available');\n });\n updateSelectedTablesDisplay();\n updateSaveButton();\n }\n\n function renderCreateTableLayout(layoutData) {\n const tableLayout = document.getElementById('createTableLayout');\n const layout = layoutData.table_layout;\n\n if (!layout || (!layout.left_side && !layout.right_side)) {\n tableLayout.innerHTML = '<div class=\"rbs-no-tables\"><p>No tables available for this time slot<\/p><\/div>';\n return;\n }\n\n let html = '';\n\n \/\/ Add entrances at the top if available\n if (layoutData.entrances && layoutData.entrances.length > 0) {\n const topEntrances = layoutData.entrances.filter(entrance => parseInt(entrance.row_position) === 0);\n topEntrances.forEach(entrance => {\n html += `<div class=\"rbs-entrance\">${entrance.name || 'Entrance'}<\/div>`;\n });\n }\n\n \/\/ Create restaurant layout container (matching public form)\n html += '<div class=\"rbs-restaurant-layout\">';\n\n \/\/ Organize tables by rows\n const leftTables = layout.left_side || {};\n const rightTables = layout.right_side || {};\n\n \/\/ Determine the maximum row number\n let maxRow = 0;\n for (let row in leftTables) {\n maxRow = Math.max(maxRow, parseInt(row));\n }\n for (let row in rightTables) {\n maxRow = Math.max(maxRow, parseInt(row));\n }\n maxRow = Math.max(maxRow, 1);\n\n \/\/ Create all rows - matching public form structure exactly\n for (let row = 1; row <= maxRow; row++) {\n \/\/ Left side tables for this row\n html += `<div class=\"rbs-row${row}-left rbs-table-row\">`;\n if (leftTables[row] && leftTables[row].length > 0) {\n const rowTables = leftTables[row].sort((a, b) => a.position - b.position);\n rowTables.forEach(table => {\n html += renderCreateTableElementPublicStyle(table, 'left-side');\n });\n }\n html += '<\/div>';\n\n \/\/ Center aisle\n html += '<div class=\"rbs-center-aisle\"><\/div>';\n\n \/\/ Right side tables for this row\n html += `<div class=\"rbs-row${row}-right rbs-table-row\">`;\n if (rightTables[row] && rightTables[row].length > 0) {\n const rowTables = rightTables[row].sort((a, b) => a.position - b.position);\n rowTables.forEach(table => {\n html += renderCreateTableElementPublicStyle(table, 'right-side');\n });\n }\n html += '<\/div>';\n }\n\n html += '<\/div>';\n\n \/\/ Add suggested tables info if available\n\n\n tableLayout.innerHTML = html;\n\n \/\/ Add click handlers to tables\n document.querySelectorAll('#createTableLayout .rbs-table.available').forEach(table => {\n table.addEventListener('click', function() {\n toggleCreateTableSelection(this);\n });\n });\n }\n\n function renderCreateTableElementPublicStyle(table, side) {\n const isAvailable = table.available;\n const isSelected = selectedTables.includes(table.id);\n\n \/\/ Build classes array matching public form exactly\n const classes = ['rbs-table', side, 'combinable'];\n\n \/\/ Add capacity-based class for styling\n if (table.capacity <= 2) {\n classes.push('two-person');\n } else if (table.capacity <= 4) {\n classes.push('four-person');\n } else if (table.capacity <= 6) {\n classes.push('six-person');\n } else {\n classes.push('large-table');\n }\n\n \/\/ Add availability\/selection status\n if (isSelected) {\n classes.push('selected');\n } else if (isAvailable) {\n classes.push('available');\n } else {\n classes.push('unavailable');\n }\n\n return `\n <div class=\"${classes.join(' ')}\"\n data-table-id=\"${table.id}\"\n data-capacity=\"${table.capacity}\"\n data-infant-capacity=\"${table.infant_capacity || 0}\"\n data-row=\"${table.row_number}\"\n data-position=\"${table.position}\"\n data-available=\"${isAvailable}\">\n <div class=\"rbs-table-number\">${table.table_number}<\/div>\n <div class=\"rbs-table-capacity\">${table.capacity}pax<\/div>\n <\/div>\n `;\n }\n\n function toggleCreateTableSelection(tableElement) {\n if (!tableElement || !tableElement.dataset) {\n console.error('Invalid table element passed to toggleCreateTableSelection');\n return;\n }\n\n const tableId = parseInt(tableElement.dataset.tableId);\n const isAvailable = tableElement.dataset.available === 'true';\n\n if (!tableId || isNaN(tableId)) {\n console.error('Invalid table ID:', tableElement.dataset.tableId);\n return;\n }\n\n if (!isAvailable) return;\n\n if (selectedTables.includes(tableId)) {\n \/\/ Deselect table\n selectedTables = selectedTables.filter(id => id !== tableId);\n tableElement.classList.remove('selected');\n tableElement.classList.add('available');\n } else {\n \/\/ Check if adding this table would create invalid combination\n const testSelection = [...selectedTables, tableId];\n const partySize = parseInt(document.getElementById('createPartySizeValue').textContent);\n\n \/\/ Allow incomplete selections during table building (allowIncomplete = true)\n const validation = validateTableCombination(testSelection, partySize, true);\n\n if (!validation.valid) {\n alert('Cannot select this table: ' + validation.message);\n return;\n }\n\n \/\/ Select table\n selectedTables.push(tableId);\n tableElement.classList.remove('available');\n tableElement.classList.add('selected');\n }\n\n updateCreateSelectedTablesDisplay();\n validateCreateBookingForm();\n }\n\n function validateTableCombination(selectedTableIds, partySize, allowIncomplete = false) {\n let totalCapacity = 0;\n let totalInfantCapacity = 0;\n\n \/\/ Calculate total capacity from selected tables\n selectedTableIds.forEach(tableId => {\n const tableElement = document.querySelector(`#createTableLayout [data-table-id=\"${tableId}\"]`);\n if (tableElement) {\n totalCapacity += parseInt(tableElement.dataset.capacity) || 0;\n totalInfantCapacity += parseInt(tableElement.dataset.infantCapacity) || 0;\n }\n });\n\n console.log('Validation - Party size:', partySize, 'Total capacity:', totalCapacity, 'Allow incomplete:', allowIncomplete);\n\n \/\/ Check if capacity is sufficient (allow incomplete selections during table building)\n if (totalCapacity < partySize) {\n if (!allowIncomplete) {\n return {\n valid: false,\n message: `Selected tables can accommodate ${totalCapacity} people, but you have ${partySize} in your party.`\n };\n }\n }\n\n \/\/ Check waste limit (max 3 extra seats)\n const waste = totalCapacity - partySize;\n if (waste > 3) {\n return {\n valid: false,\n message: `This combination would waste ${waste} seats (maximum 3 extra seats allowed). Please select different tables.`\n };\n }\n\n return { valid: true };\n }\n\n function updateCreateSelectedTablesDisplay() {\n const display = document.getElementById('createSelectedTablesDisplay');\n const tablesList = document.getElementById('createSelectedTablesList');\n const capacitySpan = document.getElementById('createSelectedTablesCapacity');\n\n \/\/ Check if elements exist\n if (!display || !tablesList || !capacitySpan) {\n console.warn('Create selected tables display elements not found');\n return;\n }\n\n if (selectedTables.length === 0) {\n display.style.display = 'none';\n return;\n }\n\n display.style.display = 'block';\n\n \/\/ Get table details\n const tableDetails = [];\n let totalCapacity = 0;\n\n selectedTables.forEach(tableId => {\n const tableElement = document.querySelector(`#createTableLayout [data-table-id=\"${tableId}\"]`);\n if (tableElement) {\n \/\/ Try both old and new class names for compatibility\n const tableNumberElement = tableElement.querySelector('.rbs-table-number') ||\n tableElement.querySelector('.table-number');\n\n if (tableNumberElement) {\n const tableNumber = tableNumberElement.textContent;\n const capacity = parseInt(tableElement.dataset.capacity);\n tableDetails.push(`Table ${tableNumber}`);\n totalCapacity += capacity;\n } else {\n console.warn('Table number element not found for table ID:', tableId);\n \/\/ Fallback: use table ID\n const capacity = parseInt(tableElement.dataset.capacity);\n tableDetails.push(`Table ${tableId}`);\n totalCapacity += capacity;\n }\n } else {\n console.warn('Table element not found for ID:', tableId);\n }\n });\n\n tablesList.textContent = tableDetails.join(', ');\n capacitySpan.textContent = totalCapacity;\n }\n\n function loadAvailableTimeSlots(branchCode, bookingId) {\n const date = document.getElementById('bookingDate').value;\n const partySize = document.getElementById('bookingPartySize').value;\n const timeSelect = document.getElementById('bookingTime');\n\n if (!date || !partySize) {\n timeSelect.innerHTML = '<option value=\"\">Select date and party size first<\/option>';\n timeSelect.disabled = true;\n updateSaveButton(false);\n return;\n }\n\n timeSelect.innerHTML = '<option value=\"\">Loading available times...<\/option>';\n timeSelect.disabled = true;\n updateSaveButton(false);\n\n \/\/ Get available time slots with automatic nonce handling\n makeAjaxRequest('https:\/\/reserve.samuraiyakiniku.com\/wp-admin\/admin-ajax.php', {\n action: 'rls_get_available_time_slots',\n branch_code: branchCode,\n date: date,\n party_size: partySize,\n exclude_booking_id: bookingId\n })\n .then(data => {\n console.log('Time slots API response:', data);\n\n \/\/ Handle nested data structure\n let timeSlots = null;\n if (data.success) {\n if (data.data && data.data.data && data.data.data.time_slots) {\n \/\/ Triple nested structure\n timeSlots = data.data.data.time_slots;\n } else if (data.data && data.data.time_slots) {\n \/\/ Double nested structure\n timeSlots = data.data.time_slots;\n }\n }\n\n if (timeSlots) {\n let options = '<option value=\"\">Select a time<\/option>';\n\n if (timeSlots.length > 0) {\n timeSlots.forEach(slot => {\n options += `<option value=\"${slot.time}\">${slot.display_time}<\/option>`;\n });\n timeSelect.innerHTML = options;\n timeSelect.disabled = false;\n\n \/\/ Show basic availability info\n showBasicAvailability(timeSlots.length, date);\n } else {\n timeSelect.innerHTML = '<option value=\"\">No times available for this date<\/option>';\n showBasicAvailability(0, date);\n }\n } else {\n timeSelect.innerHTML = '<option value=\"\">Error loading times<\/option>';\n hideAvailabilitySection();\n }\n })\n .catch(error => {\n console.error('Error loading time slots:', error);\n timeSelect.innerHTML = '<option value=\"\">Error loading times<\/option>';\n hideAvailabilitySection();\n });\n }\n\n function showBasicAvailability(availableSlots, date) {\n const availabilitySection = document.getElementById('availabilitySection');\n const availabilityDisplay = document.getElementById('availabilityDisplay');\n\n availabilitySection.style.display = 'block';\n\n \n }\n\n function hideAvailabilitySection() {\n document.getElementById('availabilitySection').style.display = 'none';\n }\n\n function checkBookingAvailabilityAuto(branchCode, bookingId) {\n const time = document.getElementById('bookingTime').value;\n if (time) {\n updateSaveButton(true);\n checkBookingAvailability(branchCode, bookingId, true);\n } else {\n updateSaveButton(false);\n }\n }\n\n function checkBookingAvailability(branchCode, bookingId, isAutoCheck = false) {\n const date = document.getElementById('bookingDate').value;\n const time = document.getElementById('bookingTime').value;\n const partySize = document.getElementById('bookingPartySize').value;\n\n if (!date || !time || !partySize) {\n if (!isAutoCheck) {\n showAvailabilityResult('error', 'Please fill in date, time, and party size first.');\n }\n return;\n }\n\n const availabilityDisplay = document.getElementById('availabilityDisplay');\n const checkBtn = document.getElementById('checkAvailabilityBtn');\n\n if (!isAutoCheck) {\n checkBtn.disabled = true;\n checkBtn.textContent = 'Checking...';\n }\n\n \/\/ Show loading state in availability display\n availabilityDisplay.innerHTML = `\n <div style=\"display: flex; align-items: center; gap: 12px;\">\n <div style=\"width: 12px; height: 12px; background: #007aff; border-radius: 50%; animation: pulse 1.5s infinite;\"><\/div>\n <div>\n <div style=\"font-weight: 600; color: #1d1d1f;\">\n Checking detailed availability...\n <\/div>\n <div style=\"font-size: 14px; color: #86868b;\">\n ${formatBookingDate(date)} at ${time}\n <\/div>\n <\/div>\n <\/div>\n `;\n\n \/\/ Use centralized AJAX handler with automatic nonce refresh\n makeAjaxRequest('https:\/\/reserve.samuraiyakiniku.com\/wp-admin\/admin-ajax.php', {\n action: 'rls_check_booking_availability',\n branch_code: branchCode,\n date: date,\n time: time,\n party_size: partySize,\n exclude_booking_id: bookingId\n })\n .then(data => {\n if (data.success) {\n const availabilityData = data.data.data;\n displayDetailedAvailability(availabilityData, date, time, partySize);\n\n if (!isAutoCheck) {\n const hasAvailability = availabilityData.available_tables && availabilityData.available_tables.length > 0;\n showAvailabilityResult(\n hasAvailability ? 'success' : 'error',\n hasAvailability ? 'Tables are available for your requested time!' : 'No tables are available for the selected date and time.'\n );\n }\n } else {\n availabilityDisplay.innerHTML = `\n <div style=\"display: flex; align-items: center; gap: 12px;\">\n <div style=\"width: 12px; height: 12px; background: #ff3b30; border-radius: 50%;\"><\/div>\n <div>\n <div style=\"font-weight: 600; color: #1d1d1f;\">\n Unable to check availability\n <\/div>\n <div style=\"font-size: 14px; color: #86868b;\">\n ${data.data.message || 'Please try again'}\n <\/div>\n <\/div>\n <\/div>\n `;\n\n if (!isAutoCheck) {\n showAvailabilityResult('error', data.data.message || 'Failed to check availability');\n }\n }\n })\n .catch(error => {\n console.error('Error checking availability:', error);\n availabilityDisplay.innerHTML = `\n <div style=\"display: flex; align-items: center; gap: 12px;\">\n <div style=\"width: 12px; height: 12px; background: #ff3b30; border-radius: 50%;\"><\/div>\n <div>\n <div style=\"font-weight: 600; color: #1d1d1f;\">\n Connection error\n <\/div>\n <div style=\"font-size: 14px; color: #86868b;\">\n Please check your connection and try again\n <\/div>\n <\/div>\n <\/div>\n `;\n\n if (!isAutoCheck) {\n showAvailabilityResult('error', 'Failed to check availability');\n }\n })\n .finally(() => {\n if (!isAutoCheck) {\n checkBtn.disabled = false;\n checkBtn.textContent = 'Check Detailed Availability';\n }\n });\n }\n\n function displayDetailedAvailability(availabilityData, date, time, partySize) {\n const availabilityDisplay = document.getElementById('availabilityDisplay');\n const availableTables = availabilityData.available_tables || [];\n const suggestedTables = availabilityData.suggested_tables || [];\n\n if (availableTables.length > 0) {\n let tableInfo = '';\n if (suggestedTables.length > 0) {\n const suggestedTable = suggestedTables[0];\n tableInfo = `\n <div style=\"margin-top: 12px; padding: 12px; background: #e8f5e8; border-radius: 6px; border-left: 4px solid #34c759;\">\n <div style=\"font-weight: 600; color: #2e7d32; margin-bottom: 4px;\">\n Recommended: Table ${suggestedTable.table_number}\n <\/div>\n <div style=\"font-size: 14px; color: #2e7d32;\">\n ${suggestedTable.capacity} seats \u2022 ${suggestedTable.table_type || 'Standard table'}\n <\/div>\n <\/div>\n `;\n } else {\n tableInfo = `\n <div style=\"margin-top: 12px; padding: 12px; background: #fff3cd; border-radius: 6px; border-left: 4px solid #ffc107;\">\n <div style=\"font-weight: 600; color: #856404; margin-bottom: 4px;\">\n ${availableTables.length} table${availableTables.length !== 1 ? 's' : ''} available\n <\/div>\n <div style=\"font-size: 14px; color: #856404;\">\n Various seating options for ${partySize} people\n <\/div>\n <\/div>\n `;\n }\n\n availabilityDisplay.innerHTML = `\n <div style=\"display: flex; align-items: center; gap: 12px;\">\n <div style=\"width: 12px; height: 12px; background: #34c759; border-radius: 50%;\"><\/div>\n <div style=\"flex: 1;\">\n <div style=\"font-weight: 600; color: #1d1d1f; margin-bottom: 4px;\">\n Tables available\n <\/div>\n <div style=\"font-size: 14px; color: #86868b;\">\n ${formatBookingDate(date)} at ${time} \u2022 ${partySize} people\n <\/div>\n <\/div>\n <\/div>\n ${tableInfo}\n `;\n } else {\n availabilityDisplay.innerHTML = `\n <div style=\"display: flex; align-items: center; gap: 12px;\">\n <div style=\"width: 12px; height: 12px; background: #ff3b30; border-radius: 50%;\"><\/div>\n <div style=\"flex: 1;\">\n <div style=\"font-weight: 600; color: #1d1d1f; margin-bottom: 4px;\">\n No tables available\n <\/div>\n <div style=\"font-size: 14px; color: #86868b;\">\n ${formatBookingDate(date)} at ${time} \u2022 ${partySize} people\n <\/div>\n <\/div>\n <\/div>\n <div style=\"margin-top: 12px; padding: 12px; background: #f8d7da; border-radius: 6px; border-left: 4px solid #dc3545;\">\n <div style=\"font-weight: 600; color: #721c24; margin-bottom: 4px;\">\n Fully booked\n <\/div>\n <div style=\"font-size: 14px; color: #721c24;\">\n Try selecting a different time or date\n <\/div>\n <\/div>\n `;\n }\n }\n\n function updateSaveButton(forceEnabled = null) {\n const saveBtn = document.getElementById('saveBookingBtn');\n\n \/\/ Check if all required fields are filled\n const date = document.getElementById('bookingDate').value;\n const time = document.getElementById('bookingTime').value;\n const partySize = document.getElementById('bookingPartySizeValue').value;\n\n let enabled = forceEnabled;\n if (enabled === null) {\n \/\/ Auto-determine if button should be enabled\n enabled = false;\n if (date) {\n if (time) {\n if (partySize) {\n enabled = true;\n }\n }\n }\n\n \/\/ If table layout is shown, require table selection\n const tableSection = document.getElementById('tableSelectionSection');\n if (tableSection) {\n if (tableSection.style.display !== 'none') {\n if (selectedTables.length === 0) {\n enabled = false;\n }\n }\n }\n }\n\n if (enabled) {\n saveBtn.disabled = false;\n saveBtn.style.background = 'linear-gradient(135deg, #DC143C, #B22222)';\n saveBtn.style.color = 'white';\n saveBtn.style.cursor = 'pointer';\n } else {\n saveBtn.disabled = true;\n saveBtn.style.background = '#e5e5e7';\n saveBtn.style.color = '#86868b';\n saveBtn.style.cursor = 'not-allowed';\n }\n }\n\n function showAvailabilityResult(type, message) {\n const resultDiv = document.getElementById('availabilityResult');\n resultDiv.style.display = 'block';\n resultDiv.className = type;\n resultDiv.innerHTML = message;\n\n if (type === 'success') {\n resultDiv.style.background = '#d4edda';\n resultDiv.style.color = '#155724';\n resultDiv.style.border = '1px solid #c3e6cb';\n } else {\n resultDiv.style.background = '#f8d7da';\n resultDiv.style.color = '#721c24';\n resultDiv.style.border = '1px solid #f5c6cb';\n }\n }\n\n function saveBookingChanges(branchCode, bookingId) {\n if (!confirm('Are you sure you want to update this booking?')) {\n return;\n }\n\n const updateData = {\n booking_date: document.getElementById('bookingDate').value,\n booking_time: document.getElementById('bookingTime').value,\n party_size: parseInt(document.getElementById('bookingPartySizeValue').value),\n special_requests: document.getElementById('bookingSpecialRequests').value,\n table_ids: selectedTables.length > 0 ? selectedTables : null\n };\n\n const saveButton = document.querySelector('#bookingModalFooter button:last-child');\n const originalText = saveButton.textContent;\n saveButton.disabled = true;\n saveButton.textContent = 'Updating...';\n\n \/\/ Use centralized AJAX handler with automatic nonce refresh\n makeAjaxRequest('https:\/\/reserve.samuraiyakiniku.com\/wp-admin\/admin-ajax.php', {\n action: 'rls_update_user_booking',\n phone: currentCustomer.phone,\n branch_code: branchCode,\n booking_id: bookingId,\n update_data: JSON.stringify(updateData)\n })\n .then(data => {\n if (data.success) {\n showBookingMessage('success', 'Booking updated successfully!');\n closeBookingModal();\n loadBookings(); \/\/ Reload bookings\n } else {\n const errorMessage = data.data.message || data.data.error || 'Failed to update booking';\n showBookingMessage('error', errorMessage);\n }\n })\n .catch(error => {\n console.error('Error updating booking:', error);\n showBookingMessage('error', 'Failed to update booking');\n })\n .finally(() => {\n saveButton.disabled = false;\n saveButton.textContent = originalText;\n });\n }\n\n function showBookingMessage(type, message) {\n \/\/ Create or update message div\n let messageDiv = document.getElementById('bookingMessage');\n if (!messageDiv) {\n messageDiv = document.createElement('div');\n messageDiv.id = 'bookingMessage';\n messageDiv.style.cssText = `\n position: fixed;\n top: 20px;\n left: 50%;\n transform: translateX(-50%);\n z-index: 10000;\n padding: 12px 20px;\n border-radius: 12px;\n font-size: 14px;\n font-weight: 500;\n max-width: 320px;\n display: flex;\n align-items: center;\n gap: 10px;\n box-shadow: 0 4px 12px rgba(0,0,0,0.15);\n `;\n document.body.appendChild(messageDiv);\n }\n\n \/\/ Strip emoji from message (they're replaced by SVG icons)\n const cleanMessage = message.replace(\/^[\u2705\u274c\u26a0\ufe0f\ud83d\udd14\ud83c\udf89\ud83d\udcf1\ud83c\udf82\u270f\ufe0f\ud83d\udce7]\\s*\/u, '');\n\n let iconSvg = '';\n if (type === 'success') {\n messageDiv.style.background = '#ecfdf5';\n messageDiv.style.color = '#065f46';\n messageDiv.style.border = '1px solid #a7f3d0';\n iconSvg = `<svg width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"#10b981\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><circle cx=\"12\" cy=\"12\" r=\"10\"\/><path d=\"m9 12 2 2 4-4\"\/><\/svg>`;\n } else {\n messageDiv.style.background = '#fef2f2';\n messageDiv.style.color = '#991b1b';\n messageDiv.style.border = '1px solid #fecaca';\n iconSvg = `<svg width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"#ef4444\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><circle cx=\"12\" cy=\"12\" r=\"10\"\/><line x1=\"15\" y1=\"9\" x2=\"9\" y2=\"15\"\/><line x1=\"9\" y1=\"9\" x2=\"15\" y2=\"15\"\/><\/svg>`;\n }\n\n messageDiv.innerHTML = iconSvg + `<span>${cleanMessage}<\/span>`;\n messageDiv.style.display = 'flex';\n\n \/\/ Auto-hide after 5 seconds\n setTimeout(() => {\n if (messageDiv) {\n messageDiv.style.display = 'none';\n }\n }, 5000);\n }\n\n function formatBookingDate(dateStr) {\n const date = new Date(dateStr);\n return date.toLocaleDateString('en-US', {\n weekday: 'short',\n year: 'numeric',\n month: 'short',\n day: 'numeric'\n });\n }\n\n function formatBookingTime(timeStr) {\n const time = new Date('2000-01-01 ' + timeStr);\n return time.toLocaleTimeString('en-US', {\n hour: 'numeric',\n minute: '2-digit',\n hour12: true\n });\n }\n <\/script>\n\n <style>\n @keyframes slideDown {\n from {\n opacity: 0;\n transform: translateX(-50%) translateY(-20px);\n }\n to {\n opacity: 1;\n transform: translateX(-50%) translateY(0);\n }\n }\n\n @keyframes slideUp {\n from {\n opacity: 1;\n transform: translateX(-50%) translateY(0);\n }\n to {\n opacity: 0;\n transform: translateX(-50%) translateY(-20px);\n }\n }\n\n \/* Push notification banner animations *\/\n .push-notification-prompt {\n animation: slideUp 0.3s ease-out !important;\n }\n\n @keyframes slideUp {\n from {\n opacity: 0;\n transform: translateY(100px);\n }\n to {\n opacity: 1;\n transform: translateY(0);\n }\n }\n\n @keyframes slideDown {\n from {\n opacity: 1;\n transform: translateY(0);\n }\n to {\n opacity: 0;\n transform: translateY(100px);\n }\n }\n\n @keyframes fadeIn {\n from {\n opacity: 0;\n }\n to {\n opacity: 1;\n }\n }\n\n @keyframes fadeOut {\n from {\n opacity: 1;\n }\n to {\n opacity: 0;\n }\n }\n <\/style>\n<\/body>\n<\/html>\n\n","protected":false},"excerpt":{"rendered":"","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-103042","page","type-page","status-publish","hentry"],"jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/reserve.samuraiyakiniku.com\/index.php\/wp-json\/wp\/v2\/pages\/103042","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/reserve.samuraiyakiniku.com\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/reserve.samuraiyakiniku.com\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/reserve.samuraiyakiniku.com\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/reserve.samuraiyakiniku.com\/index.php\/wp-json\/wp\/v2\/comments?post=103042"}],"version-history":[{"count":0,"href":"https:\/\/reserve.samuraiyakiniku.com\/index.php\/wp-json\/wp\/v2\/pages\/103042\/revisions"}],"wp:attachment":[{"href":"https:\/\/reserve.samuraiyakiniku.com\/index.php\/wp-json\/wp\/v2\/media?parent=103042"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}

{"id":103042,"date":"2026-01-15T08:34:01","date_gmt":"2026-01-15T00:34:01","guid":{"rendered":"https:\/\/reserve.samuraiyakiniku.com\/index.php\/loyalty-app\/"},"modified":"2026-01-15T08:34:01","modified_gmt":"2026-01-15T00:34:01","slug":"loyalty-app","status":"publish","type":"page","link":"https:\/\/reserve.samuraiyakiniku.com\/index.php\/loyalty-app\/","title":{"rendered":"Loyalty App"},"content":{"rendered":"\n\n\n \n \n Samurai Yakiniku Loyalty<\/title>\n <meta name=\"theme-color\" content=\"#cd0404\">\n <meta name=\"apple-mobile-web-app-capable\" content=\"yes\">\n <meta name=\"apple-mobile-web-app-status-bar-style\" content=\"default\">\n <meta name=\"apple-mobile-web-app-title\" content=\"Samurai Loyalty\">\n <meta name=\"msapplication-TileColor\" content=\"#cd0404\">\n <meta name=\"msapplication-navbutton-color\" content=\"#cd0404\">\n <link rel=\"manifest\" href=\"https:\/\/reserve.samuraiyakiniku.com\/wp-content\/plugins\/restaurant-loyalty-system\/pwa\/manifest.json\">\n <link rel=\"apple-touch-icon\" href=\"https:\/\/reserve.samuraiyakiniku.com\/wp-content\/plugins\/restaurant-loyalty-system\/pwa\/icon-192x192.png\">\n <link rel=\"icon\" type=\"image\/png\" sizes=\"192x192\" href=\"https:\/\/reserve.samuraiyakiniku.com\/wp-content\/plugins\/restaurant-loyalty-system\/pwa\/icon-192x192.png\">\n <link rel=\"icon\" type=\"image\/png\" sizes=\"512x512\" href=\"https:\/\/reserve.samuraiyakiniku.com\/wp-content\/plugins\/restaurant-loyalty-system\/pwa\/icon-512x512.png\">\n\n \n <script src=\"https:\/\/cdn.jsdelivr.net\/npm\/qrcode@1.5.3\/build\/qrcode.min.js\"\n onerror=\"console.error('Failed to load QR library from jsdelivr'); loadQRFallback();\"><\/script>\n <script>\n function loadQRFallback() {\n console.log('Loading QR library fallback...');\n const script = document.createElement('script');\n script.src = 'https:\/\/unpkg.com\/qrcode@1.5.3\/build\/qrcode.min.js';\n script.onerror = function() {\n console.error('All QR library sources failed');\n window.QRCodeFailed = true;\n };\n script.onload = function() {\n console.log('QR library loaded from fallback');\n };\n document.head.appendChild(script);\n }\n\n \/\/ Check if library loaded after a delay\n setTimeout(function() {\n if (typeof QRCode === 'undefined') {\n if (!window.QRCodeFailed) {\n console.log('QR library not detected, trying fallback...');\n loadQRFallback();\n }\n }\n }, 2000);\n\n \/\/ Test if we get this far\n console.log('QR library section completed, continuing with main script...');\n <\/script>\n\n <style>\n \/* Apple Design System Variables *\/\n :root {\n \/* Spacing Scale *\/\n --spacing-xs: 4px; \/* 0.25rem *\/\n --spacing-sm: 8px; \/* 0.5rem *\/\n --spacing-md: 16px; \/* 1rem *\/\n --spacing-lg: 24px; \/* 1.5rem *\/\n --spacing-xl: 32px; \/* 2rem *\/\n --spacing-2xl: 48px; \/* 3rem *\/\n --spacing-3xl: 64px; \/* 4rem *\/\n\n \/* Typography Scale *\/\n --font-size-caption: 12px;\n --font-size-footnote: 13px;\n --font-size-subhead: 14px;\n --font-size-callout: 16px;\n --font-size-body: 17px;\n --font-size-headline: 20px;\n --font-size-title3: 24px;\n --font-size-title2: 28px;\n --font-size-title1: 34px;\n\n \/* Font Weights *\/\n --font-weight-regular: 400;\n --font-weight-medium: 500;\n --font-weight-semibold: 600;\n --font-weight-bold: 700;\n\n \/* Line Heights *\/\n --line-height-tight: 1.2;\n --line-height-normal: 1.4;\n --line-height-relaxed: 1.5;\n\n \/* Border Radius *\/\n --radius-sm: 8px;\n --radius-md: 12px;\n --radius-lg: 16px;\n --radius-xl: 20px;\n\n \/* Minimalist Samurai Colors *\/\n --samurai-red: #cd0404;\n --samurai-black: #000000;\n --samurai-white: #ffffff;\n --samurai-gray-light: #f5f5f5;\n --samurai-gray-medium: #999999;\n --samurai-gray-dark: #333333;\n\n \/* Updated Color Variables *\/\n --color-label-primary: #000000;\n --color-label-secondary: #666666;\n --color-label-tertiary: #999999;\n --color-fill-primary: #ffffff;\n --color-fill-secondary: #f5f5f5;\n --color-fill-tertiary: #e5e5e5;\n --color-separator: rgba(0, 0, 0, 0.1);\n --color-system-red: #cd0404;\n --color-system-background: #ffffff;\n }\n\n * {\n margin: 0;\n padding: 0;\n box-sizing: border-box;\n }\n\n html {\n height: 100%;\n background: var(--samurai-white);\n }\n\n body {\n font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'Helvetica Neue', sans-serif;\n background: var(--samurai-white);\n min-height: 100vh;\n height: 100%;\n color: var(--samurai-black);\n overflow-x: hidden;\n position: relative;\n }\n\n .app-container {\n max-width: 414px;\n margin: 0 auto;\n background: var(--samurai-white);\n min-height: 100vh;\n position: relative;\n }\n \n .status-bar {\n height: 44px;\n background: var(--samurai-black);\n color: var(--samurai-white);\n display: flex;\n justify-content: space-between;\n align-items: center;\n padding: 0 var(--spacing-lg);\n font-size: 14px;\n font-weight: 600;\n position: relative;\n z-index: 100;\n }\n\n .status-left {\n display: flex;\n align-items: center;\n }\n\n .status-right {\n display: flex;\n align-items: center;\n gap: 5px;\n }\n\n .app-header {\n background: var(--samurai-black);\n color: var(--samurai-white);\n padding: var(--spacing-lg) var(--spacing-lg) 0 var(--spacing-lg);\n position: relative;\n }\n\n .app-header h1 {\n font-size: 34px;\n font-weight: 700;\n margin-bottom: var(--spacing-sm);\n letter-spacing: -0.5px;\n }\n\n .app-header p {\n opacity: 0.6;\n font-size: 16px;\n font-weight: 400;\n }\n \n .login-section {\n padding: var(--spacing-2xl) var(--spacing-lg);\n text-align: center;\n }\n\n\n\n .login-logo img {\n width: auto;\n height: 120px;\n \n }\n\n .login-logo img:hover {\n transform: scale(1.05);\n \n }\n\n .login-section h2 {\n margin-bottom: var(--spacing-sm);\n color: #1d1d1f;\n font-size: 28px;\n font-weight: 700;\n letter-spacing: -0.3px;\n }\n\n .login-section p {\n color: #86868b;\n font-size: 16px;\n margin-bottom: var(--spacing-2xl);\n line-height: 1.4;\n }\n\n .phone-input {\n width: 100%;\n padding: var(--spacing-md) var(--spacing-lg);\n border: 1px solid rgba(0, 0, 0, 0.1);\n border-radius: 12px;\n font-size: 17px;\n margin-bottom: var(--spacing-lg);\n text-align: center;\n background: #ffffff;\n color: #1d1d1f;\n transition: all 0.3s ease;\n box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);\n }\n\n .phone-input::placeholder {\n color: #86868b;\n }\n\n .phone-input:focus {\n outline: none;\n border-color: #007AFF;\n background: #ffffff;\n transform: scale(1.02);\n box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);\n }\n\n .login-btn {\n width: 100%;\n padding: var(--spacing-md);\n background: var(--samurai-red);\n color: var(--samurai-white);\n border: none;\n border-radius: 12px;\n font-size: 17px;\n font-weight: 600;\n cursor: pointer;\n transition: all 0.3s ease;\n\n }\n\n .login-btn:hover {\n background: var(--samurai-black);\n transform: scale(1.02);\n }\n\n .login-btn:disabled {\n background: rgba(255, 255, 255, 0.2);\n cursor: not-allowed;\n transform: none;\n color: #86868b;\n border: 1px solid #86868b;\n }\n\n .signup-link {\n text-align: center;\n margin-top: var(--spacing-lg);\n padding-top: var(--spacing-lg);\n border-top: 1px solid rgba(0, 0, 0, 0.1);\n }\n\n .signup-link p {\n margin: 0;\n font-size: 16px;\n color: #86868b;\n }\n\n .signup-link a {\n color: #DC143C;\n text-decoration: none;\n font-weight: 600;\n transition: all 0.3s ease;\n }\n\n .signup-link a:hover {\n color: #FF1744;\n text-decoration: underline;\n }\n\n .login-step {\n transition: all 0.3s ease;\n }\n\n .sent-number {\n color: #DC143C;\n font-weight: 600;\n font-size: 14px;\n margin-bottom: 20px;\n }\n\n .verification-input-container {\n margin-bottom: var(--spacing-lg);\n }\n\n .verification-input {\n width: 100%;\n padding: var(--spacing-lg);\n border: 1px solid rgba(0, 0, 0, 0.1);\n border-radius: 12px;\n font-size: 24px;\n text-align: center;\n background: #ffffff;\n color: #1d1d1f;\n transition: all 0.3s ease;\n letter-spacing: 8px;\n font-weight: 600;\n box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);\n }\n\n .verification-input::placeholder {\n color: #86868b;\n letter-spacing: 4px;\n }\n\n .verification-input:focus {\n outline: none;\n border-color: #DC143C;\n background: #ffffff;\n transform: scale(1.02);\n box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);\n }\n\n .resend-btn {\n width: 100%;\n padding: 12px;\n background: transparent;\n color: #86868b;\n border: 1px solid rgba(0, 0, 0, 0.1);\n border-radius: 12px;\n font-size: 15px;\n font-weight: 500;\n cursor: pointer;\n transition: all 0.3s ease;\n margin-top: 12px;\n }\n\n .resend-btn:hover {\n background: #f8f8f8;\n color: #1d1d1f;\n }\n\n .resend-btn:disabled {\n opacity: 0.5;\n cursor: not-allowed;\n }\n\n .back-link {\n text-align: center;\n margin-top: 20px;\n }\n\n .back-link a {\n color: #86868b;\n text-decoration: none;\n font-size: 14px;\n transition: color 0.3s ease;\n }\n\n .back-link a:hover {\n color: #DC143C;\n }\n\n .countdown {\n color: #86868b;\n font-size: 13px;\n text-align: center;\n margin-top: 8px;\n }\n \n .customer-dashboard {\n display: none;\n padding: 20px 20px 100px 20px;\n opacity: 0;\n transform: translateY(20px);\n transition: all 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);\n }\n\n .loyalty-card {\n background: #000;\n border: 1px solid rgba(255, 255, 255, 0.1);\n border-radius: 20px;\n padding: var(--spacing-lg);\n margin-bottom: var(--spacing-lg);\n position: relative;\n overflow: hidden;\n backdrop-filter: blur(20px);\n -webkit-backdrop-filter: blur(20px);\n box-shadow: 0 10px 20px rgba(205, 4, 4, 0), 0 6px 6px rgba(0, 0, 0, 0.15);\n transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);\n color: #fff;\n }\n\n .loyalty-card:hover {\n transform: translateY(-4px) scale(1.02);\n box-shadow: 0 14px 28px rgba(205, 4, 4, 0.4), 0 10px 10px rgba(0, 0, 0, 0.2);\n }\n\n .loyalty-card::before {\n content: '';\n position: absolute;\n top: -50%;\n right: -50%;\n width: 100%;\n height: 100%;\n background: radial-gradient(circle, rgba(255,255,255,0.1) 0%, transparent 70%);\n pointer-events: none;\n }\n\n .card-header {\n display: flex;\n justify-content: space-between;\n align-items: flex-start;\n margin-bottom: 0px;\n }\n\n .card-logo {\n font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Display', system-ui, sans-serif;\n font-size: 24px;\n font-weight: 700;\n color: #ffffff;\n letter-spacing: -0.02em;\n }\n\n .card-logo img {\n width: 50px;\n height: 50px;\n \n \n transition: all 0.3s ease;\n \n padding: 0px 0px;\n \n }\n\n .card-type {\n font-size: 12px;\n color: rgba(255, 255, 255, 0.6);\n text-transform: uppercase;\n letter-spacing: 1px;\n }\n\n .points-section {\n margin-bottom: var(--spacing-lg);\n text-align: left;\n }\n\n .points-balance {\n font-size: 36px;\n font-weight: 700;\n margin-bottom: 4px;\n background: white;\n -webkit-background-clip: text;\n -webkit-text-fill-color: transparent;\n background-clip: text;\n }\n\n .points-label {\n font-size: 14px;\n color: rgba(255, 255, 255, 0.6);\n font-weight: 500;\n }\n\n .card-footer {\n display: flex;\n justify-content: space-between;\n align-items: center;\n }\n\n .customer-name {\n font-size: 16px;\n font-weight: 600;\n color: #fff;\n }\n\n .tier-badge {\n padding: var(--spacing-xs) var(--spacing-sm);\n border-radius: 8px;\n font-size: 11px;\n font-weight: 700;\n text-transform: uppercase;\n letter-spacing: 0.5px;\n }\n\n .tier-bronze {\n background: var(--samurai-gray-medium);\n color: var(--samurai-white);\n }\n .tier-silver {\n background: var(--samurai-gray-dark);\n color: var(--samurai-white);\n }\n .tier-gold {\n background: var(--samurai-red);\n color: var(--samurai-white);\n }\n .tier-platinum {\n background: var(--samurai-black);\n color: var(--samurai-white);\n }\n \n \/* Apple-style Navigation List *\/\n .navigation-section {\n margin-bottom: var(--spacing-lg);\n }\n\n .navigation-list {\n background: rgba(255, 255, 255, 0.95);\n border-radius: 16px;\n overflow: hidden;\n backdrop-filter: blur(20px);\n -webkit-backdrop-filter: blur(20px);\n box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);\n }\n\n .nav-item {\n display: flex;\n align-items: center;\n padding: var(--spacing-md) var(--spacing-lg);\n border-bottom: 0.5px solid rgba(60, 60, 67, 0.12);\n cursor: pointer;\n transition: background-color 0.2s ease;\n min-height: 44px; \/* Apple's minimum touch target *\/\n }\n\n .nav-item:last-child {\n border-bottom: none;\n }\n\n .nav-item:hover {\n background: rgba(0, 0, 0, 0.04);\n }\n\n .nav-item:active {\n background: rgba(0, 0, 0, 0.08);\n transition: background-color 0.1s ease;\n }\n\n .nav-icon {\n width: 28px;\n height: 28px;\n border-radius: 6px;\n display: flex;\n align-items: center;\n justify-content: center;\n margin-right: var(--spacing-md);\n font-size: 16px;\n color: white;\n }\n\n .nav-icon.bookings { background: var(--samurai-red); }\n .nav-icon.rewards { background: var(--samurai-black); }\n .nav-icon.history { background: var(--samurai-gray-dark); }\n .nav-icon.locations { background: var(--samurai-gray-medium); }\n .nav-icon.redeemed { background: var(--samurai-red); }\n\n .nav-content {\n flex: 1;\n display: flex;\n flex-direction: column;\n }\n\n .nav-title {\n font-size: 17px;\n font-weight: 400;\n color: #1d1d1f;\n line-height: 1.2;\n }\n\n .nav-subtitle {\n font-size: 13px;\n color: #86868b;\n margin-top: 2px;\n }\n\n .nav-chevron {\n color: #c7c7cc;\n font-size: 14px;\n font-weight: 600;\n }\n\n \/* Profile Card - Separate from navigation list *\/\n .profile-card {\n background: rgba(255, 255, 255, 0.95);\n border-radius: 16px;\n padding: var(--spacing-lg);\n display: flex;\n align-items: center;\n cursor: pointer;\n transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);\n box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);\n backdrop-filter: blur(20px);\n -webkit-backdrop-filter: blur(20px);\n margin-top: var(--spacing-lg);\n }\n\n .profile-card:hover {\n background: rgba(255, 255, 255, 1);\n transform: translateY(-2px);\n box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23);\n }\n\n .profile-card:active {\n transform: scale(0.98);\n transition: transform 0.1s ease;\n }\n\n .profile-icon {\n width: 32px;\n height: 32px;\n border-radius: 8px;\n background: var(--samurai-gray-dark);\n display: flex;\n align-items: center;\n justify-content: center;\n margin-right: var(--spacing-md);\n font-size: 16px;\n color: var(--samurai-white);\n }\n \n .loading {\n text-align: center;\n padding: var(--spacing-2xl) var(--spacing-lg);\n }\n\n .spinner {\n border: 2px solid rgba(0, 0, 0, 0.1);\n border-top: 2px solid #DC143C;\n border-radius: 50%;\n width: 32px;\n height: 32px;\n animation: spin 1s linear infinite;\n margin: 0 auto 16px;\n }\n\n .loading p {\n color: #86868b;\n font-size: 16px;\n }\n\n @keyframes spin {\n 0% { transform: rotate(0deg); }\n 100% { transform: rotate(360deg); }\n }\n \n .error-message {\n background: rgba(255, 59, 48, 0.1);\n border: 1px solid rgba(255, 59, 48, 0.2);\n color: #FF3B30;\n padding: 16px;\n border-radius: 12px;\n margin: 16px 0;\n text-align: center;\n backdrop-filter: blur(20px);\n font-size: 15px;\n }\n\n .success-message {\n background: rgba(52, 199, 89, 0.1);\n border: 1px solid rgba(52, 199, 89, 0.2);\n color: #34C759;\n padding: 16px;\n border-radius: 12px;\n margin: 16px 0;\n text-align: center;\n backdrop-filter: blur(20px);\n font-size: 15px;\n }\n \n .home-indicator {\n position: fixed;\n bottom: 8px;\n left: 50%;\n transform: translateX(-50%);\n width: 134px;\n height: 5px;\n background: rgba(255, 255, 255, 0.3);\n border-radius: 3px;\n }\n\n @media (max-width: 414px) {\n .app-container {\n max-width: 100%;\n }\n }\n\n \/* Smooth transitions *\/\n .loyalty-card,\n .action-card,\n .login-btn,\n .phone-input {\n transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);\n }\n\n \/* Haptic feedback simulation *\/\n .action-card:active,\n .login-btn:active {\n transform: scale(0.98);\n }\n\n \/* New Sections Styles *\/\n .rewards-section,\n .activity-section,\n .redeemed-section,\n .profile-section,\n .bookings-section {\n display: none;\n padding: var(--spacing-lg) var(--spacing-lg) 100px var(--spacing-lg);\n opacity: 0;\n transform: translateY(20px);\n transition: all 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);\n }\n\n .section-header {\n margin-bottom: var(--spacing-lg);\n padding-bottom: var(--spacing-md);\n border-bottom: 1px solid rgba(0, 0, 0, 0.1);\n }\n\n .back-button {\n background: none;\n border: none;\n color: #DC143C;\n font-size: 16px;\n font-weight: 600;\n cursor: pointer;\n margin-bottom: 12px;\n padding: 8px 0;\n transition: color 0.3s ease;\n }\n\n .back-button:hover {\n color: #FF1744;\n }\n\n .section-header h2 {\n font-size: 28px;\n font-weight: 700;\n color: #1d1d1f;\n margin: 0 0 8px 0;\n }\n\n .points-summary {\n color: #86868b;\n font-size: 14px;\n }\n\n \/* Rewards Grid *\/\n .rewards-grid {\n display: grid;\n grid-template-columns: 1fr;\n gap: 16px;\n }\n\n .reward-card {\n background: #ffffff;\n border: 1px solid rgba(0, 0, 0, 0.08);\n border-radius: 16px;\n padding: 20px;\n transition: all 0.3s ease;\n position: relative;\n overflow: hidden;\n box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);\n }\n\n .reward-card:hover {\n background: #f8f8f8;\n transform: translateY(-2px);\n box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);\n }\n\n .reward-card.insufficient {\n opacity: 0.5;\n border-color: rgba(0, 0, 0, 0.05);\n }\n\n .reward-card.branch-restricted {\n border-color: #ffc107;\n background: #fff9e6;\n }\n\n .branch-indicator {\n font-size: 12px;\n margin-top: 4px;\n padding: 4px 8px;\n border-radius: 6px;\n font-weight: 500;\n }\n\n .branch-indicator.all-branches {\n background: #e8f5e8;\n color: #2e7d32;\n }\n\n .branch-indicator.current-branch {\n background: #e8f5e8;\n color: #2e7d32;\n }\n\n .branch-indicator.other-branch {\n background: #fff3cd;\n color: #856404;\n }\n\n \/* Branch Selector Styles *\/\n .branch-selector-container {\n background: rgba(255, 255, 255, 0.1);\n border: 1px solid rgba(255, 255, 255, 0.2);\n border-radius: 12px;\n padding: 16px;\n margin: 16px 0;\n backdrop-filter: blur(10px);\n }\n\n .branch-selector-header {\n display: flex;\n justify-content: space-between;\n align-items: center;\n margin-bottom: 12px;\n }\n\n .branch-selector-label {\n font-weight: 600;\n color: #1d1d1f;\n font-size: 14px;\n }\n\n .branch-selector-info {\n font-size: 12px;\n color: #666;\n }\n\n .branch-selector {\n width: 100%;\n padding: 12px 16px;\n border: 1px solid #ddd;\n border-radius: 8px;\n background: white;\n color: #1d1d1f;\n font-size: 16px;\n font-weight: 500;\n appearance: none;\n background-image: url(\"data:image\/svg+xml;charset=UTF-8,%3csvg xmlns='http:\/\/www.w3.org\/2000\/svg' viewBox='0 0 24 24' fill='none' stroke='%23666' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6,9 12,15 18,9'%3e%3c\/polyline%3e%3c\/svg%3e\");\n background-repeat: no-repeat;\n background-position: right 12px center;\n background-size: 16px;\n padding-right: 40px;\n box-shadow: 0 2px 4px rgba(0,0,0,0.1);\n }\n\n .branch-selector:focus {\n outline: none;\n border-color: #007aff;\n box-shadow: 0 0 0 3px rgba(0, 122, 255, 0.3);\n }\n\n .branch-selector option {\n background: white;\n color: #1d1d1f;\n padding: 8px;\n }\n\n \/* Branch selector status indicators *\/\n .branch-selector-info .status-connected {\n color: #4caf50;\n }\n\n .branch-selector-info .status-fallback {\n color: #ff9800;\n }\n\n .branch-selector-info .status-error {\n color: #f44336;\n }\n\n .reward-header {\n display: flex;\n justify-content: space-between;\n align-items: flex-start;\n margin-bottom: 12px;\n }\n\n .reward-title {\n font-size: 18px;\n font-weight: 600;\n color: #1d1d1f;\n margin-bottom: 4px;\n }\n\n .reward-type {\n font-size: 12px;\n color: #86868b;\n text-transform: uppercase;\n letter-spacing: 0.5px;\n }\n\n .reward-points {\n background: var(--samurai-black);\n color: var(--samurai-white);\n padding: 6px 12px;\n border-radius: 20px;\n font-size: 14px;\n font-weight: 600;\n white-space: nowrap;\n }\n\n .reward-description {\n color: var(--color-label-secondary);\n font-size: 14px;\n line-height: 1.4;\n margin-bottom: 16px;\n }\n\n .reward-footer {\n display: flex;\n justify-content: space-between;\n align-items: center;\n }\n\n .reward-tier {\n font-size: 12px;\n color: var(--color-label-secondary);\n }\n\n .redeem-button {\n background: var(--samurai-red);\n color: var(--samurai-white);\n border: none;\n padding: 10px 20px;\n border-radius: 20px;\n font-size: 14px;\n font-weight: 600;\n cursor: pointer;\n transition: all 0.3s ease;\n }\n\n .redeem-button:hover {\n background: var(--samurai-black);\n transform: scale(1.05);\n }\n\n .redeem-button:disabled {\n background: rgba(255, 255, 255, 0.1);\n color: rgba(255, 255, 255, 0.4);\n cursor: not-allowed;\n transform: none;\n }\n\n \/* Activity List *\/\n .activity-list {\n display: flex;\n flex-direction: column;\n gap: 12px;\n }\n\n .activity-item {\n background: #ffffff;\n border: 1px solid rgba(0, 0, 0, 0.08);\n border-radius: 12px;\n padding: 16px;\n box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);\n }\n\n .activity-header {\n display: flex;\n justify-content: space-between;\n align-items: flex-start;\n margin-bottom: 8px;\n }\n\n .activity-title {\n font-size: 16px;\n font-weight: 600;\n color: #1d1d1f;\n }\n\n .activity-points {\n font-size: 16px;\n font-weight: 600;\n }\n\n .activity-points.positive {\n color: #34C759;\n }\n\n .activity-points.negative {\n color: #FF3B30;\n }\n\n .activity-date {\n font-size: 13px;\n color: #86868b;\n }\n\n .activity-description {\n font-size: 14px;\n color: #86868b;\n margin-top: 4px;\n }\n\n .activity-left {\n display: flex;\n align-items: center;\n gap: 12px;\n flex: 1;\n }\n\n .activity-icon {\n font-size: 20px;\n width: 36px;\n height: 36px;\n display: flex;\n align-items: center;\n justify-content: center;\n background: rgba(220, 20, 60, 0.1);\n border-radius: 8px;\n flex-shrink: 0;\n }\n\n .activity-content {\n flex: 1;\n }\n\n .activity-sales {\n color: #8e44ad;\n font-size: 13px;\n font-weight: 500;\n margin-top: 4px;\n }\n\n \/* Bookings Styles *\/\n .bookings-filters {\n text-align: center;\n margin-bottom: var(--spacing-lg);\n }\n\n .filter-btn {\n padding: var(--spacing-sm) var(--spacing-md);\n border: 1px solid #d2d2d7;\n background: white;\n color: #1d1d1f;\n border-radius: 12px;\n cursor: pointer;\n font-size: 16px;\n font-weight: 500;\n transition: all 0.3s ease;\n min-height: 44px; \/* Apple touch target *\/\n display: inline-flex;\n align-items: center;\n justify-content: center;\n }\n\n .filter-btn:hover {\n background: #f5f5f7;\n transform: scale(1.02);\n }\n\n .filter-btn.active {\n background: #007aff;\n color: white;\n border-color: #007aff;\n box-shadow: 0 2px 8px rgba(0, 122, 255, 0.3);\n }\n\n .bookings-list {\n display: flex;\n flex-direction: column;\n gap: var(--spacing-lg);\n }\n\n \/* Airbnb-style Empty State *\/\n .bookings-empty-state {\n text-align: center;\n padding: 60px 24px;\n background: var(--samurai-white);\n border-radius: 16px;\n border: 1px dashed var(--color-separator);\n }\n\n .bookings-empty-state svg {\n width: 64px;\n height: 64px;\n stroke: #b0b0b0;\n margin-bottom: 16px;\n }\n\n .bookings-empty-state h3 {\n font-size: 20px;\n font-weight: 600;\n color: #222222;\n margin: 0 0 8px 0;\n }\n\n .bookings-empty-state p {\n font-size: 15px;\n color: #717171;\n margin: 0;\n max-width: 280px;\n margin: 0 auto;\n line-height: 1.5;\n }\n\n \/* Airbnb-style Booking Card *\/\n .booking-item {\n background: var(--samurai-white);\n border-radius: 12px;\n overflow: hidden;\n box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08), 0 4px 12px rgba(0, 0, 0, 0.05);\n transition: box-shadow 0.2s ease, transform 0.2s ease;\n border: 1px solid rgba(0, 0, 0, 0.08);\n }\n\n .booking-item:hover {\n box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1), 0 8px 24px rgba(0, 0, 0, 0.1);\n transform: translateY(-2px);\n }\n\n .booking-item:active {\n transform: translateY(0);\n }\n\n .booking-item.past {\n opacity: 0.75;\n }\n\n .booking-item.past .booking-card-header {\n background: black;\n }\n\n .booking-item.campaign-booking {\n border: 2px solid var(--samurai-red);\n }\n\n .booking-item.campaign-booking .booking-card-header {\n background: linear-gradient(135deg, var(--samurai-red) 0%, #a00303 100%);\n }\n\n \/* Card Header with gradient background *\/\n .booking-card-header {\n background: linear-gradient(135deg, #1d1d1f 0%, #3a3a3c 100%);\n padding: 20px;\n position: relative;\n }\n\n .booking-card-header-content {\n display: flex;\n justify-content: space-between;\n align-items: flex-start;\n }\n\n .booking-date-block {\n display: flex;\n align-items: center;\n gap: 16px;\n }\n\n .booking-calendar-icon {\n width: 52px;\n height: 52px;\n background: rgba(255, 255, 255, 0.15);\n border-radius: 12px;\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n backdrop-filter: blur(10px);\n }\n\n .booking-calendar-month {\n font-size: 10px;\n font-weight: 700;\n color: rgba(255, 255, 255, 0.9);\n text-transform: uppercase;\n letter-spacing: 0.5px;\n }\n\n .booking-calendar-day {\n font-size: 22px;\n font-weight: 700;\n color: #ffffff;\n line-height: 1;\n margin-top: 2px;\n }\n\n .booking-datetime-text {\n display: flex;\n flex-direction: column;\n gap: 4px;\n }\n\n .booking-day-name {\n font-size: 14px;\n font-weight: 500;\n color: rgba(255, 255, 255, 0.7);\n }\n\n .booking-time-display {\n font-size: 24px;\n font-weight: 700;\n color: #ffffff;\n letter-spacing: -0.5px;\n }\n\n .booking-status-badge {\n padding: 6px 12px;\n border-radius: 20px;\n font-size: 11px;\n font-weight: 700;\n text-transform: uppercase;\n letter-spacing: 0.5px;\n }\n\n .booking-status-badge.confirmed {\n background: rgba(52, 199, 89, 0.2);\n color: #34c759;\n }\n\n .booking-status-badge.pending {\n background: rgba(255, 149, 0, 0.2);\n color: #ff9500;\n }\n\n .booking-status-badge.cancelled {\n background: rgba(255, 59, 48, 0.2);\n color: #ff3b30;\n }\n\n .booking-status-badge.completed {\n background: rgba(142, 142, 147, 0.2);\n color: #8e8e93;\n }\n\n \/* Card Body *\/\n .booking-card-body {\n padding: 20px;\n }\n\n .booking-venue-name {\n font-size: 18px;\n font-weight: 600;\n color: #222222;\n margin: 0 0 12px 0;\n display: flex;\n align-items: center;\n gap: 8px;\n }\n\n .booking-venue-name svg {\n width: 18px;\n height: 18px;\n stroke: #717171;\n flex-shrink: 0;\n }\n\n .booking-meta-row {\n display: flex;\n align-items: center;\n gap: 20px;\n margin-bottom: 16px;\n flex-wrap: wrap;\n }\n\n .booking-meta-item {\n display: flex;\n align-items: center;\n gap: 6px;\n font-size: 14px;\n color: #717171;\n }\n\n .booking-meta-item svg {\n width: 16px;\n height: 16px;\n stroke: #717171;\n }\n\n .booking-meta-item strong {\n color: #222222;\n font-weight: 600;\n }\n\n \/* Campaign Badge *\/\n .campaign-badge {\n display: inline-flex;\n align-items: center;\n gap: 6px;\n background: linear-gradient(135deg, var(--samurai-red) 0%, #a00303 100%);\n color: var(--samurai-white);\n padding: 6px 12px;\n border-radius: 8px;\n font-size: 12px;\n font-weight: 600;\n margin-bottom: 12px;\n box-shadow: 0 2px 8px rgba(205, 4, 4, 0.25);\n }\n\n .campaign-badge svg {\n width: 14px;\n height: 14px;\n stroke: currentColor;\n }\n\n \/* Special Requests *\/\n .booking-special-requests {\n background: #f7f7f7;\n padding: 12px 16px;\n border-radius: 10px;\n font-size: 14px;\n color: #484848;\n margin-top: 12px;\n line-height: 1.5;\n border-left: 3px solid #717171;\n }\n\n .booking-special-requests-label {\n font-size: 12px;\n font-weight: 600;\n color: #717171;\n text-transform: uppercase;\n letter-spacing: 0.5px;\n margin-bottom: 4px;\n }\n\n \/* Card Footer *\/\n .booking-card-footer {\n padding: 16px 20px;\n border-top: 1px solid #f0f0f0;\n display: flex;\n justify-content: space-between;\n align-items: center;\n gap: 12px;\n flex-wrap: wrap;\n }\n\n .booking-time-info {\n font-size: 13px;\n color: #717171;\n display: flex;\n align-items: center;\n gap: 6px;\n }\n\n .booking-time-info svg {\n width: 14px;\n height: 14px;\n }\n\n .booking-time-info.upcoming {\n color: #34c759;\n }\n\n .booking-time-info.past {\n color: #8e8e93;\n }\n\n \/* Action Buttons *\/\n .booking-actions {\n display: flex;\n gap: 8px;\n }\n\n .modify-booking-btn {\n background: #222222;\n color: #ffffff;\n border: none;\n padding: 10px 20px;\n border-radius: 8px;\n font-size: 14px;\n font-weight: 600;\n cursor: pointer;\n transition: all 0.2s ease;\n display: inline-flex;\n align-items: center;\n gap: 6px;\n }\n\n .modify-booking-btn:hover {\n background: #000000;\n transform: scale(1.02);\n }\n\n .modify-booking-btn:active {\n transform: scale(0.98);\n }\n\n .modify-booking-btn svg {\n width: 16px;\n height: 16px;\n }\n\n .modification-notice {\n font-size: 13px;\n color: #8e8e93;\n font-style: italic;\n display: flex;\n align-items: center;\n gap: 6px;\n }\n\n .modification-notice svg {\n width: 14px;\n height: 14px;\n }\n\n @keyframes campaignPulse {\n 0%, 100% { transform: scale(1); }\n 50% { transform: scale(1.02); }\n }\n\n .campaign-badge:hover {\n transform: scale(1.05);\n box-shadow: 0 4px 12px rgba(255, 149, 0, 0.4);\n }\n\n \/* Table Layout Styles - Matching Public Booking Form *\/\n .rbs-restaurant-layout {\n display: grid;\n grid-template-columns: 1fr auto 1fr;\n gap: 0px;\n padding: 0px;\n background: #ffffff;\n border-radius: 8px;\n border: 1px solid #e5e5e7;\n min-height: 300px;\n }\n\n .rbs-table-row {\n display: flex;\n flex-wrap: wrap;\n gap: 12px;\n justify-content: center;\n align-items: flex-start;\n padding: 10px;\n min-height: 80px;\n }\n\n .rbs-center-aisle {\n width: 20px;\n background: white;\n border-radius: 4px;\n position: relative;\n }\n\n .rbs-center-aisle::before {\n content: '';\n position: absolute;\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%);\n width: 2px;\n height: 60%;\n background: #dee2e6;\n border-radius: 1px;\n }\n\n .rbs-table {\n width: 40px;\n height: 40px;\n border-radius: 12px;\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n cursor: pointer;\n transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);\n border: 3px solid #dee2e6;\n background: #ffffff;\n font-size: 12px;\n font-weight: 600;\n position: relative;\n box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);\n }\n\n .rbs-table.available {\n border-color: #28a745;\n background: linear-gradient(135deg, #f8fff9 0%, #e8f5e8 100%);\n color: #155724;\n }\n\n .rbs-table.available:hover {\n transform: translateY(-3px) scale(1.05);\n box-shadow: 0 8px 25px rgba(40, 167, 69, 0.3);\n border-color: #20c997;\n }\n\n .rbs-table.unavailable {\n border-color: #dc3545;\n background: linear-gradient(135deg, #fff5f5 0%, #f8d7da 100%);\n color: #721c24;\n cursor: not-allowed;\n opacity: 0.7;\n }\n\n .rbs-table.selected {\n border-color: #007bff;\n background: linear-gradient(135deg, #007bff 0%, #0056b3 100%);\n color: white;\n transform: translateY(-3px) scale(1.08);\n box-shadow: 0 8px 25px rgba(0, 123, 255, 0.4);\n }\n\n .rbs-table-number {\n font-size: 16px;\n font-weight: bold;\n line-height: 1;\n margin-bottom: 2px;\n }\n\n .rbs-table-capacity {\n font-size: 10px;\n opacity: 0.8;\n line-height: 1;\n font-weight: 500;\n }\n\n .rbs-no-tables {\n text-align: center;\n padding: 40px 20px;\n color: #86868b;\n }\n\n .rbs-loading {\n text-align: center;\n padding: 40px 20px;\n color: #86868b;\n }\n\n .rbs-entrance {\n background: #e3f2fd;\n border: 2px dashed #2196f3;\n border-radius: 4px;\n padding: 8px 16px;\n text-align: center;\n font-size: 12px;\n color: #1976d2;\n margin: 8px 0;\n }\n\n \/* Create Booking Button *\/\n .create-booking-btn {\n background: var(--samurai-red);\n color: var(--samurai-white);\n border: none;\n padding: var(--spacing-sm) var(--spacing-lg);\n border-radius: 12px;\n font-size: 17px;\n font-weight: 600;\n cursor: pointer;\n box-shadow: 0 2px 8px rgba(205, 4, 4, 0.2);\n transition: all 0.3s ease;\n min-height: 44px;\n display: inline-flex;\n align-items: center;\n justify-content: center;\n margin-bottom: var(--spacing-lg);\n }\n\n .create-booking-btn:hover {\n background: var(--samurai-black);\n transform: translateY(-2px);\n box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);\n }\n\n .create-booking-btn:active {\n transform: translateY(0) scale(0.98);\n transition: transform 0.1s ease;\n }\n\n .modify-booking-btn {\n background: var(--samurai-gray-dark);\n color: var(--samurai-white);\n border: none;\n padding: var(--spacing-sm) var(--spacing-lg);\n border-radius: 8px;\n font-size: 15px;\n font-weight: 500;\n cursor: pointer;\n transition: all 0.3s ease;\n min-height: 44px;\n display: inline-flex;\n align-items: center;\n justify-content: center;\n }\n\n .modify-booking-btn:hover {\n background: var(--samurai-black);\n transform: translateY(-1px);\n }\n\n .modify-booking-btn:disabled {\n background: #e5e5e7;\n color: #86868b;\n cursor: not-allowed;\n transform: none;\n }\n\n .modification-notice {\n font-size: 12px;\n color: #ff9500;\n font-style: italic;\n }\n\n \/* Availability Section Styles *\/\n .availability-section {\n margin-top: 20px;\n border-top: 1px solid #e5e5e7;\n padding-top: 16px;\n }\n\n .availability-display {\n background: #f8f9fa;\n padding: 16px;\n border-radius: 8px;\n border: 1px solid #e5e5e7;\n transition: all 0.3s ease;\n }\n\n .availability-indicator {\n width: 12px;\n height: 12px;\n border-radius: 50%;\n flex-shrink: 0;\n }\n\n .availability-indicator.available {\n background: #34c759;\n }\n\n .availability-indicator.unavailable {\n background: #ff3b30;\n }\n\n .availability-indicator.loading {\n background: #007aff;\n animation: pulse 1.5s infinite;\n }\n\n @keyframes pulse {\n 0% { opacity: 1; transform: scale(1); }\n 50% { opacity: 0.7; transform: scale(1.1); }\n 100% { opacity: 1; transform: scale(1); }\n }\n\n .table-recommendation {\n margin-top: 12px;\n padding: 12px;\n border-radius: 6px;\n border-left: 4px solid;\n }\n\n .table-recommendation.optimal {\n background: #e8f5e8;\n border-color: #34c759;\n color: #2e7d32;\n }\n\n .table-recommendation.available {\n background: #fff3cd;\n border-color: #ffc107;\n color: #856404;\n }\n\n .table-recommendation.unavailable {\n background: #f8d7da;\n border-color: #dc3545;\n color: #721c24;\n }\n\n \/* Enhanced button states *\/\n .booking-form-button {\n transition: all 0.3s ease;\n position: relative;\n overflow: hidden;\n }\n\n .booking-form-button:disabled {\n position: relative;\n }\n\n .booking-form-button:disabled::after {\n content: '';\n position: absolute;\n top: 0;\n left: 0;\n right: 0;\n bottom: 0;\n background: rgba(255, 255, 255, 0.7);\n pointer-events: none;\n }\n\n \/* Modal Styles *\/\n .modal-overlay {\n position: fixed;\n top: 0;\n left: 0;\n right: 0;\n bottom: 0;\n background: rgba(0, 0, 0, 0.8);\n backdrop-filter: blur(10px);\n z-index: 1000;\n display: flex;\n align-items: flex-start;\n justify-content: center;\n padding: var(--spacing-lg);\n overflow-y: auto;\n }\n\n .modal-dialog {\n background: #000;\n border: 1px solid rgba(255, 255, 255, 0.1);\n border-radius: 16px;\n max-width: 800px;\n width: 100%;\n max-height: none;\n margin: var(--spacing-lg) 0;\n box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);\n }\n\n \/* Special styling for booking modal *\/\n #bookingModal .modal-dialog {\n max-width: 900px;\n }\n\n .modal-header {\n padding: var(--spacing-lg) var(--spacing-lg) var(--spacing-md) var(--spacing-lg);\n border-bottom: 1px solid rgba(255, 255, 255, 0.1);\n display: flex;\n justify-content: space-between;\n align-items: center;\n }\n\n .modal-header h3 {\n margin: 0;\n color: var(--color-label-primary);\n font-size: var(--font-size-headline);\n font-weight: var(--font-weight-semibold);\n line-height: var(--line-height-tight);\n }\n\n .modal-close {\n background: none;\n border: none;\n color: var(--color-label-tertiary);\n font-size: var(--font-size-title3);\n cursor: pointer;\n padding: 0;\n width: 44px;\n height: 44px;\n display: flex;\n align-items: center;\n justify-content: center;\n border-radius: 50%;\n transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);\n }\n\n .modal-close:hover {\n background: rgba(255, 255, 255, 0.1);\n color: var(--color-label-primary);\n }\n\n .modal-body {\n padding: var(--spacing-lg);\n color: var(--color-label-secondary);\n line-height: var(--line-height-relaxed);\n max-height: 70vh;\n overflow-y: auto;\n }\n\n \/* Special styling for booking modal body *\/\n #bookingModal .modal-body {\n max-height: 80vh;\n }\n\n .modal-footer {\n padding: var(--spacing-md) var(--spacing-lg) var(--spacing-lg) var(--spacing-lg);\n border-top: 1px solid var(--color-separator);\n display: flex;\n gap: var(--spacing-md);\n justify-content: flex-end;\n }\n\n \/* Apple Design System Form Styles *\/\n .modal-body input,\n .modal-body select,\n .modal-body textarea {\n transition: border-color 0.2s ease, box-shadow 0.2s ease;\n }\n\n .modal-body input:focus,\n .modal-body select:focus,\n .modal-body textarea:focus {\n outline: none;\n border-color: blue;\n box-shadow: 0 0 0 3px rgba(0, 122, 255, 0.1);\n }\n\n .modal-body input:hover,\n .modal-body select:hover,\n .modal-body textarea:hover {\n border-color: var(--color-fill-secondary);\n }\n\n \/* Party Size Button Hover States *\/\n .modal-body button[onclick*=\"adjustCreatePartySize\"]:hover:not(:disabled) {\n background: var(--color-fill-secondary) !important;\n transform: scale(1.05);\n }\n\n .modal-body button[onclick*=\"adjustCreatePartySize\"]:active:not(:disabled) {\n transform: scale(0.95);\n }\n\n \/* Payment Method Button Hover States *\/\n .payment-method-btn:hover {\n border-color: blue !important;\n transform: translateY(-2px);\n box-shadow: 0 4px 12px rgba(0, 122, 255, 0.15);\n }\n\n .payment-method-btn:active {\n transform: translateY(0);\n box-shadow: 0 2px 6px rgba(0, 122, 255, 0.1);\n }\n\n .modal-button {\n padding: var(--spacing-sm) var(--spacing-lg);\n border: none;\n border-radius: 8px;\n font-size: 14px;\n font-weight: 600;\n cursor: pointer;\n transition: all 0.3s ease;\n }\n\n .modal-button.primary {\n background: linear-gradient(135deg, #DC143C, #B22222);\n color: #fff;\n }\n\n .modal-button.primary:hover {\n background: linear-gradient(135deg, #FF1744, #DC143C);\n transform: translateY(-1px);\n }\n\n .modal-button.secondary {\n background: rgba(255, 255, 255, 0.1);\n color: rgba(255, 255, 255, 0.8);\n border: 1px solid rgba(255, 255, 255, 0.2);\n }\n\n .modal-button.secondary:hover {\n background: rgba(255, 255, 255, 0.2);\n color: #fff;\n }\n\n \/* ========== AIRBNB-STYLE CREATE BOOKING FULL PAGE ========== *\/\n .create-booking-section {\n background: #ffffff;\n min-height: 100vh;\n padding-bottom: 120px;\n }\n\n .create-booking-section .section-header {\n background: #ffffff;\n border-bottom: 1px solid #ebebeb;\n padding-bottom: var(--spacing-md);\n margin-left: var(--spacing-lg);\n }\n\n .create-booking-section .section-header h2 {\n color: #222222;\n }\n\n .create-booking-section .points-summary {\n color: #717171;\n }\n\n .create-booking-content {\n padding: 0 var(--spacing-md);\n max-width: 600px;\n margin: 0 auto;\n }\n\n .create-booking-footer {\n position: fixed;\n bottom: 0;\n left: 0;\n right: 0;\n padding: 16px 24px;\n padding-bottom: calc(16px + env(safe-area-inset-bottom));\n background: #ffffff;\n border-top: 1px solid #ebebeb;\n display: flex;\n gap: 12px;\n z-index: 100;\n box-shadow: 0 -4px 12px rgba(0, 0, 0, 0.08);\n }\n\n \/* Airbnb Form Group *\/\n .airbnb-form-group {\n margin-bottom: 24px;\n }\n\n .airbnb-form-label {\n display: flex;\n align-items: center;\n gap: 8px;\n color: #222222;\n font-size: 14px;\n font-weight: 600;\n margin-bottom: 8px;\n }\n\n .airbnb-form-label svg {\n width: 18px;\n height: 18px;\n color: #717171;\n }\n\n .airbnb-form-hint {\n color: #717171;\n font-size: 12px;\n margin-bottom: 8px;\n }\n\n .airbnb-input {\n width: 100%;\n padding: 14px 16px;\n border: 1px solid #b0b0b0;\n border-radius: 8px;\n font-size: 16px;\n color: #222;\n background: #fff;\n transition: border-color 0.2s, box-shadow 0.2s;\n box-sizing: border-box;\n }\n\n .airbnb-input:hover {\n border-color: #222;\n }\n\n .airbnb-input:focus {\n outline: none;\n border-color: #222;\n box-shadow: 0 0 0 2px #222;\n }\n\n .airbnb-input::placeholder {\n color: #b0b0b0;\n }\n\n .airbnb-select {\n width: 100%;\n padding: 14px 16px;\n border: 1px solid #b0b0b0;\n border-radius: 8px;\n font-size: 16px;\n color: #222;\n background: #fff url(\"data:image\/svg+xml,%3Csvg xmlns='http:\/\/www.w3.org\/2000\/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23222' d='M6 8L1 3h10z'\/%3E%3C\/svg%3E\") no-repeat right 16px center;\n background-size: 12px;\n appearance: none;\n cursor: pointer;\n transition: border-color 0.2s;\n }\n\n .airbnb-select:hover {\n border-color: #222;\n }\n\n .airbnb-select:focus {\n outline: none;\n border-color: #222;\n box-shadow: 0 0 0 2px #222;\n }\n\n .airbnb-textarea {\n width: 100%;\n padding: 14px 16px;\n border: 1px solid #b0b0b0;\n border-radius: 8px;\n font-size: 16px;\n color: #222;\n background: #fff;\n resize: vertical;\n min-height: 80px;\n font-family: inherit;\n transition: border-color 0.2s;\n box-sizing: border-box;\n }\n\n .airbnb-textarea:hover {\n border-color: #222;\n }\n\n .airbnb-textarea:focus {\n outline: none;\n border-color: #222;\n box-shadow: 0 0 0 2px #222;\n }\n\n \/* Airbnb Guest Counter *\/\n .airbnb-guest-counter {\n display: flex;\n align-items: center;\n justify-content: space-between;\n padding: 16px;\n border: 1px solid #ebebeb;\n border-radius: 12px;\n background: #fff;\n }\n\n .airbnb-guest-info h4 {\n margin: 0;\n font-size: 16px;\n font-weight: 600;\n color: #222;\n }\n\n .airbnb-guest-info p {\n margin: 4px 0 0;\n font-size: 14px;\n color: #717171;\n }\n\n .airbnb-counter-controls {\n display: flex;\n align-items: center;\n gap: 16px;\n }\n\n .airbnb-counter-btn {\n width: 32px;\n height: 32px;\n border: 1px solid #b0b0b0;\n background: #fff;\n color: #717171;\n font-size: 18px;\n cursor: pointer;\n display: flex;\n align-items: center;\n justify-content: center;\n transition: all 0.2s;\n }\n\n .airbnb-counter-btn:hover:not(:disabled) {\n border-color: #222;\n color: #222;\n }\n\n .airbnb-counter-btn:disabled {\n opacity: 0.3;\n cursor: not-allowed;\n }\n\n .airbnb-counter-value {\n font-size: 16px;\n font-weight: 600;\n color: #222;\n min-width: 24px;\n text-align: center;\n }\n\n \/* Airbnb Buttons *\/\n .airbnb-btn {\n padding: 14px 24px;\n border-radius: 8px;\n font-size: 16px;\n font-weight: 600;\n cursor: pointer;\n transition: all 0.2s;\n border: none;\n }\n\n .airbnb-btn-primary {\n background: linear-gradient(to right, #e00b41, #ff385c);\n color: #fff;\n }\n\n .airbnb-btn-primary:hover:not(:disabled) {\n background: linear-gradient(to right, #d00b3c, #e31c5f);\n transform: scale(1.02);\n }\n\n .airbnb-btn-primary:disabled {\n background: #ddd;\n color: #fff;\n cursor: not-allowed;\n }\n\n .airbnb-btn-secondary {\n background: #fff;\n color: #222;\n border: 1px solid #222;\n }\n\n .airbnb-btn-secondary:hover {\n background: #f7f7f7;\n }\n\n \/* Airbnb Section Divider *\/\n .airbnb-divider {\n border: none;\n border-top: 1px solid #ebebeb;\n margin: 24px 0;\n }\n\n \/* Airbnb Table Selection *\/\n .airbnb-table-section {\n padding: 20px;\n border: 1px solid #ebebeb;\n border-radius: 12px;\n background: #f7f7f7;\n }\n\n .airbnb-table-header {\n display: flex;\n align-items: center;\n gap: 8px;\n margin-bottom: 16px;\n }\n\n .airbnb-table-header h4 {\n margin: 0;\n font-size: 16px;\n font-weight: 600;\n color: #222;\n }\n\n .airbnb-table-header svg {\n width: 20px;\n height: 20px;\n color: #ff385c;\n }\n\n .airbnb-selected-info {\n display: flex;\n justify-content: space-between;\n align-items: center;\n padding: 12px 16px;\n background: #fff;\n border-radius: 8px;\n border: 1px solid #ebebeb;\n margin-top: 12px;\n }\n\n .airbnb-selected-info span {\n font-size: 14px;\n color: #222;\n }\n\n .airbnb-selected-info strong {\n color: #ff385c;\n }\n\n \/* Campaign Banner - Light Theme *\/\n .airbnb-campaign-banner {\n background: linear-gradient(135deg, #fff5f7 0%, #fff 100%);\n border: 1px solid #ffccd5;\n border-radius: 12px;\n padding: 16px;\n margin-bottom: 24px;\n }\n\n .airbnb-campaign-banner h4 {\n margin: 0 0 4px;\n font-size: 14px;\n font-weight: 600;\n color: #e00b41;\n }\n\n .airbnb-campaign-banner p {\n margin: 0;\n font-size: 13px;\n color: #717171;\n }\n\n .airbnb-campaign-progress {\n margin-top: 12px;\n height: 4px;\n background: #ebebeb;\n border-radius: 2px;\n overflow: hidden;\n }\n\n .airbnb-campaign-progress-fill {\n height: 100%;\n background: linear-gradient(to right, #e00b41, #ff385c);\n border-radius: 2px;\n transition: width 0.3s;\n }\n\n \/* Redeemed Rewards Styles *\/\n .redeemed-list {\n display: flex;\n flex-direction: column;\n gap: 16px;\n }\n\n .redeemed-card {\n background: #ffffff;\n border: 1px solid rgba(0, 0, 0, 0.08);\n border-radius: 16px;\n padding: 20px;\n position: relative;\n overflow: hidden;\n box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);\n }\n\n .redeemed-card.expired {\n opacity: 0.6;\n border-color: rgba(0, 0, 0, 0.05);\n }\n\n .redeemed-header {\n display: flex;\n justify-content: space-between;\n align-items: flex-start;\n margin-bottom: 12px;\n }\n\n .redeemed-title {\n font-size: 18px;\n font-weight: 600;\n color: #1d1d1f;\n margin-bottom: 4px;\n }\n\n .redeemed-status {\n padding: 4px 12px;\n border-radius: 12px;\n font-size: 12px;\n font-weight: 600;\n text-transform: uppercase;\n }\n\n .redeemed-status.active {\n background: linear-gradient(135deg, #34C759, #30D158);\n color: #fff;\n }\n\n .redeemed-status.used {\n background: linear-gradient(135deg, #007AFF, #5856D6);\n color: #fff;\n }\n\n .redeemed-status.expired {\n background: rgba(255, 255, 255, 0.1);\n color: rgba(255, 255, 255, 0.5);\n }\n\n .redeemed-code {\n background: #f8f8f8;\n border: 1px solid rgba(0, 0, 0, 0.1);\n border-radius: 8px;\n padding: 12px;\n margin: 12px 0;\n text-align: center;\n }\n\n .redeemed-code-label {\n font-size: 12px;\n color: #86868b;\n margin-bottom: 4px;\n }\n\n .redeemed-code-value {\n font-size: 18px;\n font-weight: 700;\n color: #DC143C;\n font-family: 'Courier New', monospace;\n letter-spacing: 2px;\n }\n\n .redeemed-qr {\n text-align: center;\n margin: 16px 0;\n }\n\n .redeemed-qr canvas {\n border-radius: 8px;\n background: #fff;\n padding: 8px;\n }\n\n .redeemed-date {\n font-size: 13px;\n color: #86868b;\n text-align: center;\n margin-top: 12px;\n }\n\n .qr-code {\n background: #fff;\n padding: 12px;\n border-radius: 8px;\n display: inline-block;\n margin: 8px 0;\n }\n\n \/* Push Notification Prompt *\/\n @keyframes slideUp {\n from {\n transform: translateY(100%);\n opacity: 0;\n }\n to {\n transform: translateY(0);\n opacity: 1;\n }\n }\n\n .push-notification-prompt {\n animation: slideUp 0.3s ease-out;\n }\n\n .push-notification-prompt button:hover {\n background: rgba(255,255,255,0.3) !important;\n }\n\n \/* Gamified Rewards Store Styles *\/\n .tier-progress-section {\n background: var(--samurai-gray-light);\n border: 1px solid var(--color-separator);\n margin: 20px;\n padding: 20px;\n border-radius: 15px;\n color: var(--samurai-black);\n box-shadow: 0 2px 8px rgba(0,0,0,0.05);\n margin-bottom: 30px;\n }\n\n .tier-progress-header h3 {\n margin: 0 0 10px 0;\n font-size: 18px;\n font-weight: 600;\n }\n\n .tier-progress-header p {\n margin: 0 0 15px 0;\n opacity: 0.9;\n font-size: 14px;\n }\n\n .tier-progress-bar {\n background: var(--color-fill-tertiary);\n border-radius: 10px;\n height: 20px;\n position: relative;\n overflow: hidden;\n }\n\n .tier-progress-fill {\n background: var(--samurai-red);\n height: 100%;\n border-radius: 10px;\n transition: width 0.8s ease;\n position: relative;\n }\n\n .tier-progress-text {\n position: absolute;\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%);\n font-size: 12px;\n font-weight: 600;\n color: var(--samurai-white);\n text-shadow: 0 1px 2px rgba(0,0,0,0.3);\n }\n\n .rewards-grid {\n display: grid;\n grid-template-columns: 1fr;\n gap: 16px;\n margin: 0 20px;\n }\n\n .reward-card.tier-locked {\n opacity: 0.5;\n background: #f8f9fa;\n border-color: #dee2e6;\n }\n\n .reward-card.tier-locked::before {\n content: '';\n position: absolute;\n top: 10px;\n right: 10px;\n width: 16px;\n height: 16px;\n background-image: url(\"data:image\/svg+xml,%3Csvg xmlns='http:\/\/www.w3.org\/2000\/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23666' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='11' width='18' height='11' rx='2' ry='2'\/%3E%3Cpath d='M7 11V7a5 5 0 0 1 10 0v4'\/%3E%3C\/svg%3E\");\n background-size: contain;\n background-repeat: no-repeat;\n opacity: 0.6;\n }\n\n .tier-unlock-indicator {\n background: linear-gradient(135deg, #e3f2fd, #bbdefb);\n border: 1px solid #90caf9;\n border-radius: 8px;\n padding: 12px;\n margin: 12px 0;\n }\n\n .tier-unlock-text {\n display: block;\n font-size: 13px;\n font-weight: 600;\n color: #1565c0;\n }\n\n .points-needed-indicator {\n background: linear-gradient(135deg, #fff3cd, #ffeaa7);\n border: 1px solid #ffeaa7;\n border-radius: 8px;\n padding: 12px;\n margin: 12px 0;\n }\n\n .points-needed-text {\n display: block;\n font-size: 13px;\n font-weight: 600;\n color: #856404;\n margin-bottom: 8px;\n }\n\n .points-progress-bar {\n background: rgba(255,255,255,0.5);\n border-radius: 6px;\n height: 6px;\n overflow: hidden;\n }\n\n .points-progress-fill {\n background: linear-gradient(90deg, #DC143C, #FF6B6B);\n height: 100%;\n border-radius: 6px;\n transition: width 0.6s ease;\n }\n\n .reward-tier-badge {\n background: linear-gradient(135deg, #6c757d, #495057);\n color: white;\n padding: 4px 8px;\n border-radius: 12px;\n font-size: 11px;\n font-weight: 600;\n text-transform: uppercase;\n letter-spacing: 0.5px;\n }\n\n\n\n\n <\/style>\n<\/head>\n<body>\n <div class=\"app-container\">\n \n\n \n\n \n \n <div class=\"login-section\" id=\"loginSection\">\n <div id=\"phoneStep\" class=\"login-step\">\n <div class=\"login-logo\">\n <img decoding=\"async\" src=\"https:\/\/reserve.samuraiyakiniku.com\/wp-content\/plugins\/restaurant-loyalty-system\/assets\/img\/samurai-logo-300x300.png\" alt=\"Samurai Yakiniku\" \/>\n <\/div>\n <h2>Welcome Back!<\/h2>\n <p>Enter your phone number to access your loyalty account<\/p>\n <br>\n <input type=\"tel\" class=\"phone-input\" id=\"phoneInput\" placeholder=\"Enter your phone number\" maxlength=\"15\">\n <button class=\"login-btn\" id=\"sendCodeBtn\">Send Verification Code<\/button>\n <div id=\"phoneMessage\"><\/div>\n\n <div class=\"signup-link\">\n <p>Not a samurai? <a href=\"https:\/\/loyalty.samuraiyakiniku.com\/loyalty-signup\" target=\"_blank\">Sign up here<\/a><\/p>\n <\/div>\n <\/div>\n\n <div id=\"verificationStep\" class=\"login-step\" style=\"display: none;\">\n <div class=\"login-logo\">\n <img decoding=\"async\" src=\"https:\/\/reserve.samuraiyakiniku.com\/wp-content\/plugins\/restaurant-loyalty-system\/assets\/img\/samurai-logo-300x300.png\" alt=\"Samurai Yakiniku\" \/>\n <\/div>\n <h2>Verify Your Number<\/h2>\n <p id=\"verificationMethodText\">We've sent a 6-digit code to your phone<\/p>\n <p id=\"sentToNumber\" class=\"sent-number\"><\/p>\n <br>\n <div class=\"verification-input-container\">\n <input type=\"text\" class=\"verification-input\" id=\"codeInput\" placeholder=\"000000\" maxlength=\"6\" inputmode=\"numeric\">\n <\/div>\n <button class=\"login-btn\" id=\"verifyBtn\">Verify & Login<\/button>\n <button class=\"resend-btn\" id=\"resendBtn\">Resend Code<\/button>\n <div id=\"verificationMessage\"><\/div>\n\n <div class=\"back-link\">\n <a href=\"#\" id=\"backToPhone\">\u2190 Change phone number<\/a>\n <\/div>\n <\/div>\n <\/div>\n \n \n <div class=\"customer-dashboard\" id=\"customerDashboard\">\n \n <div class=\"loyalty-card\">\n <div class=\"card-header\">\n <div class=\"card-logo\">\n <img decoding=\"async\" src=\"https:\/\/reserve.samuraiyakiniku.com\/wp-content\/plugins\/restaurant-loyalty-system\/assets\/img\/samurai-logo-300x300.png\" alt=\"Samurai Yakiniku\" \/>\n <\/div>\n <div class=\"card-type\">Loyalty Card<\/div>\n <\/div>\n\n <div class=\"points-section\">\n <div class=\"points-balance\" id=\"pointsBalance\">0<\/div>\n <div class=\"points-label\">Available Points<\/div>\n <\/div>\n\n <div class=\"card-footer\">\n <div class=\"customer-name\" id=\"customerName\">Valued Customer<\/div>\n <div class=\"tier-badge\" id=\"tierBadge\">Bronze<\/div>\n <\/div>\n <\/div>\n\n \n <div class=\"navigation-section\">\n <div class=\"navigation-list\">\n <div class=\"nav-item\" onclick=\"showBookings()\">\n <div class=\"nav-icon bookings\"><svg width=\"18\" height=\"18\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M3 2v7c0 1.1.9 2 2 2h4a2 2 0 0 0 2-2V2\"\/><path d=\"M7 2v20\"\/><path d=\"M21 15V2v0a5 5 0 0 0-5 5v6c0 1.1.9 2 2 2h3Zm0 0v7\"\/><\/svg><\/div>\n <div class=\"nav-content\">\n <div class=\"nav-title\">Bookings<\/div>\n <div class=\"nav-subtitle\">Create & modify reservations<\/div>\n <\/div>\n <div class=\"nav-chevron\"><svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"m9 18 6-6-6-6\"\/><\/svg><\/div>\n <\/div>\n\n <div class=\"nav-item\" onclick=\"showRedeemed()\">\n <div class=\"nav-icon redeemed\"><svg width=\"18\" height=\"18\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M2 9a3 3 0 0 1 0 6v2a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2v-2a3 3 0 0 1 0-6V7a2 2 0 0 0-2-2H4a2 2 0 0 0-2 2Z\"\/><path d=\"M13 5v2\"\/><path d=\"M13 17v2\"\/><path d=\"M13 11v2\"\/><\/svg><\/div>\n <div class=\"nav-content\">\n <div class=\"nav-title\">My Rewards<\/div>\n <div class=\"nav-subtitle\">Active rewards & QR codes<\/div>\n <\/div>\n <div class=\"nav-chevron\"><svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"m9 18 6-6-6-6\"\/><\/svg><\/div>\n <\/div>\n\n <div class=\"nav-item\" onclick=\"showRewards()\">\n <div class=\"nav-icon rewards\"><svg width=\"15\" height=\"15\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M20 12v10H4V12\"\/><path d=\"M2 7h20v5H2z\"\/><path d=\"M12 22V7\"\/><path d=\"M12 7H7.5a2.5 2.5 0 0 1 0-5C11 2 12 7 12 7z\"\/><path d=\"M12 7h4.5a2.5 2.5 0 0 0 0-5C13 2 12 7 12 7z\"\/><\/svg><\/div>\n <div class=\"nav-content\">\n <div class=\"nav-title\">Reward Store<\/div>\n <div class=\"nav-subtitle\">Browse & redeem with points<\/div>\n <\/div>\n <div class=\"nav-chevron\"><svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"m9 18 6-6-6-6\"\/><\/svg><\/div>\n <\/div>\n\n <div class=\"nav-item\" onclick=\"showHistory()\">\n <div class=\"nav-icon history\"><svg width=\"15\" height=\"15\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M3 3v5h5\"\/><path d=\"M3.05 13A9 9 0 1 0 6 5.3L3 8\"\/><path d=\"M12 7v5l4 2\"\/><\/svg><\/div>\n <div class=\"nav-content\">\n <div class=\"nav-title\">Activity<\/div>\n <div class=\"nav-subtitle\">View transaction history<\/div>\n <\/div>\n <div class=\"nav-chevron\"><svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"m9 18 6-6-6-6\"\/><\/svg><\/div>\n <\/div>\n <\/div>\n <\/div>\n\n \n <div class=\"profile-card\" onclick=\"showProfile()\">\n <div class=\"profile-icon\"><svg width=\"18\" height=\"18\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><circle cx=\"12\" cy=\"8\" r=\"4\"\/><path d=\"M20 21a8 8 0 1 0-16 0\"\/><\/svg><\/div>\n <div class=\"nav-content\">\n <div class=\"nav-title\">Profile<\/div>\n <div class=\"nav-subtitle\">Manage your account<\/div>\n <\/div>\n <div class=\"nav-chevron\"><svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"m9 18 6-6-6-6\"\/><\/svg><\/div>\n <\/div>\n\n \n <div id=\"tierProgressCard\" class=\"tier-progress-section\" style=\"margin: 20px 0;\">\n \n <\/div>\n\n \n <div style=\"text-align: center; padding: 20px; color: #86868b;\">\n <p style=\"font-size: 14px;\">Member since <span id=\"memberSince\">2024<\/span><\/p>\n <button onclick=\"refreshCustomerData()\" style=\"background: none; border: 1px solid rgba(0,0,0,0.1); color: #86868b; padding: 8px 16px; border-radius: 8px; font-size: 12px; cursor: pointer; margin-top: 10px; margin-right: 10px; transition: all 0.3s ease;\">\n Refresh Data\n <\/button>\n <button onclick=\"logout()\" style=\"background: none; border: 1px solid rgba(0,0,0,0.1); color: #86868b; padding: 8px 16px; border-radius: 8px; font-size: 12px; cursor: pointer; margin-top: 10px; transition: all 0.3s ease;\">\n Logout\n <\/button>\n <\/div>\n <\/div>\n\n \n <div class=\"rewards-section\" id=\"rewardsSection\" style=\"display: none;\">\n <div class=\"section-header\">\n <button class=\"back-button\" onclick=\"showDashboard()\">\u2190 Back<\/button>\n <h2><svg width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" style=\"vertical-align: middle; margin-right: 8px;\"><path d=\"M20 12v10H4V12\"\/><path d=\"M2 7h20v5H2z\"\/><path d=\"M12 22V7\"\/><path d=\"M12 7H7.5a2.5 2.5 0 0 1 0-5C11 2 12 7 12 7z\"\/><path d=\"M12 7h4.5a2.5 2.5 0 0 0 0-5C13 2 12 7 12 7z\"\/><\/svg>Reward Store<\/h2>\n <div class=\"points-summary\">\n <span id=\"rewardsPointsBalance\">0<\/span> points available\n <\/div>\n <\/div>\n\n \n <div class=\"coupon-section\" style=\"background: linear-gradient(135deg, #000 0%, #cd0404 100%); margin: 20px; padding: 20px; border-radius: 15px; color: white; box-shadow: 0 4px 15px rgba(0,0,0,0.1);\">\n <h3 style=\"margin: 0 0 15px 0; font-size: 18px; display: flex; align-items: center; gap: 8px;\">\n <svg width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M2 9a3 3 0 0 1 0 6v2a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2v-2a3 3 0 0 1 0-6V7a2 2 0 0 0-2-2H4a2 2 0 0 0-2 2Z\"\/><path d=\"M13 5v2\"\/><path d=\"M13 17v2\"\/><path d=\"M13 11v2\"\/><\/svg>\n Have a Coupon Code?\n <\/h3>\n <p style=\"margin: 0 0 15px 0; opacity: 0.9; font-size: 14px;\">\n Enter your coupon code below to claim special rewards!\n <\/p>\n\n <div class=\"coupon-input-group\" style=\" margin-bottom: 10px;\">\n <div style=\" margin-bottom: 10px\";> \n <input type=\"text\"\n id=\"couponCodeInput\"\n placeholder=\"Enter code\"\n style=\"flex: 1; padding: 12px; border: none; border-radius: 8px; font-size: 16px; text-transform: uppercase; font-weight: bold; letter-spacing: 1px;\">\n <\/div>\n <div style=\"margin-bottom: 4px\";> \n <button id=\"validateCouponBtn\"\n onclick=\"validateCouponCode()\"\n style=\"padding: 12px 20px; background: rgba(255,255,255,0.2); color: white; border: 1px solid rgba(255,255,255,0.3); border-radius: 8px; font-weight: bold; cursor: pointer; transition: all 0.3s;\">\n Validate\n <\/button>\n <\/div>\n <\/div>\n <div id=\"couponValidationResult\" style=\"margin-top: 10px; padding: 10px; border-radius: 8px; display: none; font-size: 12px; \"><\/div>\n\n <button id=\"redeemCouponBtn\"\n onclick=\"redeemCouponCode()\"\n style=\"width: 100%; padding: 12px; background: #28a745; color: white; border: none; border-radius: 8px; font-weight: bold; font-size: 16px; cursor: pointer; margin-top: 10px; display: none; transition: all 0.3s; display: flex; align-items: center; justify-content: center; gap: 8px;\">\n <svg width=\"18\" height=\"18\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M20 12v10H4V12\"\/><path d=\"M2 7h20v5H2z\"\/><path d=\"M12 22V7\"\/><path d=\"M12 7H7.5a2.5 2.5 0 0 1 0-5C11 2 12 7 12 7z\"\/><path d=\"M12 7h4.5a2.5 2.5 0 0 0 0-5C13 2 12 7 12 7z\"\/><\/svg>\n Claim Reward\n <\/button>\n <\/div>\n\n <div class=\"rewards-grid\" id=\"rewardsGrid\">\n \n <\/div>\n <\/div>\n\n \n <div class=\"activity-section\" id=\"activitySection\" style=\"display: none;\">\n <div class=\"section-header\">\n <button class=\"back-button\" onclick=\"showDashboard()\">\u2190 Back<\/button>\n <h2>Activity History<\/h2>\n <\/div>\n\n <div class=\"activity-list\" id=\"activityList\">\n \n <\/div>\n <\/div>\n\n \n <div class=\"redeemed-section\" id=\"redeemedSection\" style=\"display: none;\">\n <div class=\"section-header\">\n <button class=\"back-button\" onclick=\"showDashboard()\">\u2190 Back<\/button>\n <h2><svg width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" style=\"vertical-align: middle; margin-right: 8px;\"><path d=\"M2 9a3 3 0 0 1 0 6v2a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2v-2a3 3 0 0 1 0-6V7a2 2 0 0 0-2-2H4a2 2 0 0 0-2 2Z\"\/><path d=\"M13 5v2\"\/><path d=\"M13 17v2\"\/><path d=\"M13 11v2\"\/><\/svg>My Rewards<\/h2>\n <div class=\"points-summary\">\n <span id=\"redeemedCount\">0<\/span> active rewards\n <\/div>\n <\/div>\n\n \n\n <div class=\"redeemed-list\" id=\"redeemedList\">\n \n <\/div>\n <\/div>\n\n \n <div class=\"profile-section\" id=\"profileSection\" style=\"display: none;\">\n <div class=\"section-header\">\n <button class=\"back-button\" onclick=\"showDashboard()\">\u2190 Back<\/button>\n <h2>My Profile<\/h2>\n <\/div>\n\n <div class=\"profile-content\" id=\"profileContent\">\n \n <\/div>\n <\/div>\n\n \n <div class=\"bookings-section\" id=\"bookingsSection\" style=\"display: none;\">\n <div class=\"section-header\">\n <button class=\"back-button\" onclick=\"showDashboard()\">\u2190 Back<\/button>\n <h2><svg width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" style=\"vertical-align: middle; margin-right: 8px;\"><path d=\"M3 2v7c0 1.1.9 2 2 2h4a2 2 0 0 0 2-2V2\"\/><path d=\"M7 2v20\"\/><path d=\"M21 15V2v0a5 5 0 0 0-5 5v6c0 1.1.9 2 2 2h3Zm0 0v7\"\/><\/svg>Bookings<\/h2>\n <div class=\"points-summary\">\n Manage your restaurant reservations\n <\/div>\n <\/div>\n\n \n <div style=\"text-align: center;\">\n <button class=\"create-booking-btn\" onclick=\"showCreateBookingModal()\" style=\"display: inline-flex; align-items: center; gap: 8px;\">\n <svg width=\"18\" height=\"18\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><line x1=\"12\" y1=\"5\" x2=\"12\" y2=\"19\"\/><line x1=\"5\" y1=\"12\" x2=\"19\" y2=\"12\"\/><\/svg>\n Create New Booking\n <\/button>\n <\/div>\n\n <div class=\"bookings-filters\">\n <div style=\"display: flex; gap: var(--spacing-sm); justify-content: center; flex-wrap: wrap;\">\n <button class=\"filter-btn\" data-filter=\"upcoming\" onclick=\"filterBookings('upcoming')\">Upcoming<\/button>\n <button class=\"filter-btn\" data-filter=\"past\" onclick=\"filterBookings('past')\">Past<\/button>\n <button class=\"filter-btn active\" data-filter=\"all\" onclick=\"filterBookings('all')\">All<\/button>\n <\/div>\n <\/div>\n\n <div class=\"bookings-list\" id=\"bookingsList\">\n \n <\/div>\n <\/div>\n\n \n <div class=\"loading\" id=\"loadingIndicator\" style=\"display: none;\">\n <div class=\"spinner\"><\/div>\n <p>Loading your account...<\/p>\n <\/div>\n\n \n <div class=\"modal-overlay\" id=\"modalOverlay\" style=\"display: none;\">\n <div class=\"modal-dialog\" id=\"modalDialog\">\n <div class=\"modal-header\">\n <h3 id=\"modalTitle\">Confirm Action<\/h3>\n <button class=\"modal-close\" onclick=\"closeModal()\">\u00d7<\/button>\n <\/div>\n <div class=\"modal-body\" id=\"modalBody\">\n \n <\/div>\n <div class=\"modal-footer\" id=\"modalFooter\">\n \n <\/div>\n <\/div>\n <\/div>\n\n \n <div class=\"modal-overlay\" id=\"phoneChangeModal\" style=\"display: none;\">\n <div class=\"modal-dialog\">\n <div class=\"modal-header\">\n <h3 id=\"phoneChangeTitle\">Change Phone Number<\/h3>\n <button class=\"modal-close\" onclick=\"closePhoneChangeModal()\">\u00d7<\/button>\n <\/div>\n <div class=\"modal-body\" id=\"phoneChangeBody\">\n \n <\/div>\n <div class=\"modal-footer\" id=\"phoneChangeFooter\">\n \n <\/div>\n <\/div>\n <\/div>\n\n \n <div class=\"modal-overlay\" id=\"birthdayModal\" style=\"display: none;\">\n <div class=\"modal-dialog\">\n <div class=\"modal-header\">\n <h3 style=\"display: flex; align-items: center; gap: 8px;\"><svg width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M20 21v-8a2 2 0 0 0-2-2H6a2 2 0 0 0-2 2v8\"\/><path d=\"M4 16s.5-1 2-1 2.5 2 4 2 2.5-2 4-2 2.5 2 4 2 2-1 2-1\"\/><path d=\"M2 21h20\"\/><path d=\"M7 8v2\"\/><path d=\"M12 8v2\"\/><path d=\"M17 8v2\"\/><path d=\"M7 4h0\"\/><path d=\"M12 4h0\"\/><path d=\"M17 4h0\"\/><\/svg>Update Birthday<\/h3>\n <button class=\"modal-close\" onclick=\"closeBirthdayModal()\">\u00d7<\/button>\n <\/div>\n <div class=\"modal-body\">\n <div style=\"margin-bottom: 20px;\">\n <p style=\"color: #86868b; margin-bottom: 16px;\">Set your birthday to receive special birthday rewards and offers!<\/p>\n\n <div style=\"margin-bottom: 16px;\">\n <label style=\"display: block; color: #fff; font-weight: 600; margin-bottom: 8px;\">Birthday Date:<\/label>\n <input type=\"date\" id=\"birthdayInput\"\n style=\"width: 100%; padding: 12px; border: 1px solid #ddd; border-radius: 8px; font-size: 16px; background: #f8f8f8;\"\n max=\"${new Date().toISOString().split('T')[0]}\">\n <\/div>\n\n <div style=\"background: #e3f2fd; padding: 12px; border-radius: 8px; border-left: 4px solid #2196f3;\">\n <p style=\"margin: 0; font-size: 14px; color: #1976d2; display: flex; align-items: flex-start; gap: 8px;\">\n <svg width=\"18\" height=\"18\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" style=\"flex-shrink: 0; margin-top: 2px;\"><path d=\"M20 12v10H4V12\"\/><path d=\"M2 7h20v5H2z\"\/><path d=\"M12 22V7\"\/><path d=\"M12 7H7.5a2.5 2.5 0 0 1 0-5C11 2 12 7 12 7z\"\/><path d=\"M12 7h4.5a2.5 2.5 0 0 0 0-5C13 2 12 7 12 7z\"\/><\/svg>\n <span><strong>Birthday Benefits:<\/strong><br>\n \u2022 Special birthday bonus points<br>\n \u2022 Exclusive birthday offers<br>\n \u2022 Personalized birthday surprises<\/span>\n <\/p>\n <\/div>\n <\/div>\n <\/div>\n <div class=\"modal-footer\">\n <button onclick=\"closeBirthdayModal()\"\n style=\"background: none; border: 1px solid rgba(0,0,0,0.1); color: #86868b; padding: 12px 24px; border-radius: 8px; margin-right: 12px; cursor: pointer;\">\n Cancel\n <\/button>\n <button onclick=\"updateBirthday()\"\n style=\"background: linear-gradient(135deg, #DC143C, #B22222); color: white; border: none; padding: 12px 24px; border-radius: 8px; font-weight: 600; cursor: pointer;\">\n Save Birthday\n <\/button>\n <\/div>\n <\/div>\n <\/div>\n\n \n <div class=\"modal-overlay\" id=\"nameModal\" style=\"display: none;\">\n <div class=\"modal-dialog\">\n <div class=\"modal-header\">\n <h3 style=\"display: flex; align-items: center; gap: 8px;\"><svg width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M17 3a2.85 2.83 0 1 1 4 4L7.5 20.5 2 22l1.5-5.5Z\"\/><path d=\"m15 5 4 4\"\/><\/svg>Update Name<\/h3>\n <button class=\"modal-close\" onclick=\"closeNameModal()\">\u00d7<\/button>\n <\/div>\n <div class=\"modal-body\">\n <div style=\"margin-bottom: 20px;\">\n <p style=\"color: #86868b; margin-bottom: 16px;\">Update your name information<\/p>\n\n <div style=\"margin-bottom: 16px;\">\n <label style=\"display: block; color: #fff; font-weight: 600; margin-bottom: 8px;\">First Name:<\/label>\n <input type=\"text\" id=\"firstNameInput\"\n style=\"width: 100%; padding: 12px; border: 1px solid #ddd; border-radius: 8px; font-size: 16px; background: #f8f8f8;\"\n placeholder=\"Enter first name\">\n <\/div>\n\n <div style=\"margin-bottom: 16px;\">\n <label style=\"display: block; color: #fff; font-weight: 600; margin-bottom: 8px;\">Last Name:<\/label>\n <input type=\"text\" id=\"lastNameInput\"\n style=\"width: 100%; padding: 12px; border: 1px solid #ddd; border-radius: 8px; font-size: 16px; background: #f8f8f8;\"\n placeholder=\"Enter last name\">\n <\/div>\n <\/div>\n <\/div>\n <div class=\"modal-footer\">\n <button onclick=\"closeNameModal()\"\n style=\"background: none; border: 1px solid rgba(0,0,0,0.1); color: #86868b; padding: 12px 24px; border-radius: 8px; margin-right: 12px; cursor: pointer;\">\n Cancel\n <\/button>\n <button onclick=\"updateName()\"\n style=\"background: linear-gradient(135deg, #DC143C, #B22222); color: white; border: none; padding: 12px 24px; border-radius: 8px; font-weight: 600; cursor: pointer;\">\n Save Name\n <\/button>\n <\/div>\n <\/div>\n <\/div>\n\n \n <div class=\"modal-overlay\" id=\"emailModal\" style=\"display: none;\">\n <div class=\"modal-dialog\">\n <div class=\"modal-header\">\n <h3 style=\"display: flex; align-items: center; gap: 8px;\"><svg width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><rect x=\"2\" y=\"4\" width=\"20\" height=\"16\" rx=\"2\"\/><path d=\"m22 7-8.97 5.7a1.94 1.94 0 0 1-2.06 0L2 7\"\/><\/svg>Update Email<\/h3>\n <button class=\"modal-close\" onclick=\"closeEmailModal()\">\u00d7<\/button>\n <\/div>\n <div class=\"modal-body\">\n <div style=\"margin-bottom: 20px;\">\n <p style=\"color: #86868b; margin-bottom: 16px;\">Update your email address for notifications and communications<\/p>\n\n <div style=\"margin-bottom: 16px;\">\n <label style=\"display: block; color: #fff; font-weight: 600; margin-bottom: 8px;\">Email Address:<\/label>\n <input type=\"email\" id=\"emailInput\"\n style=\"width: 100%; padding: 12px; border: 1px solid #ddd; border-radius: 8px; font-size: 16px; background: #f8f8f8;\"\n placeholder=\"Enter email address (optional)\">\n <\/div>\n\n <div style=\"background: #e3f2fd; padding: 12px; border-radius: 8px; border-left: 4px solid #2196f3;\">\n <p style=\"margin: 0; font-size: 14px; color: #1976d2; display: flex; align-items: flex-start; gap: 8px;\">\n <svg width=\"18\" height=\"18\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" style=\"flex-shrink: 0; margin-top: 2px;\"><rect x=\"2\" y=\"4\" width=\"20\" height=\"16\" rx=\"2\"\/><path d=\"m22 7-8.97 5.7a1.94 1.94 0 0 1-2.06 0L2 7\"\/><\/svg>\n <span><strong>Email Benefits:<\/strong><br>\n \u2022 Receive promotional offers<br>\n \u2022 Get booking confirmations<br>\n \u2022 Stay updated on rewards<\/span>\n <\/p>\n <\/div>\n <\/div>\n <\/div>\n <div class=\"modal-footer\">\n <button onclick=\"closeEmailModal()\"\n style=\"background: none; border: 1px solid rgba(0,0,0,0.1); color: #86868b; padding: 12px 24px; border-radius: 8px; margin-right: 12px; cursor: pointer;\">\n Cancel\n <\/button>\n <button onclick=\"updateEmail()\"\n style=\"background: linear-gradient(135deg, #DC143C, #B22222); color: white; border: none; padding: 12px 24px; border-radius: 8px; font-weight: 600; cursor: pointer;\">\n Save Email\n <\/button>\n <\/div>\n <\/div>\n <\/div>\n\n \n <div class=\"modal-overlay\" id=\"bookingModal\" style=\"display: none;\">\n <div class=\"modal-dialog\">\n <div class=\"modal-header\">\n <h3 style=\"display: flex; align-items: center; gap: 8px;\"><svg width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M17 3a2.85 2.83 0 1 1 4 4L7.5 20.5 2 22l1.5-5.5Z\"\/><path d=\"m15 5 4 4\"\/><\/svg>Modify Booking<\/h3>\n <button class=\"modal-close\" onclick=\"closeBookingModal()\">\u00d7<\/button>\n <\/div>\n <div class=\"modal-body\" id=\"bookingModalBody\">\n \n <\/div>\n <div class=\"modal-footer\" id=\"bookingModalFooter\">\n \n <\/div>\n <\/div>\n <\/div>\n\n \n <div class=\"create-booking-section\" id=\"createBookingSection\" style=\"display: none;\">\n <div class=\"section-header\">\n <button class=\"back-button\" onclick=\"closeCreateBookingModal()\">\u2190 Back<\/button>\n <h2>\n <svg width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" style=\"vertical-align: middle; margin-right: 8px;\">\n <rect x=\"3\" y=\"4\" width=\"18\" height=\"18\" rx=\"2\" ry=\"2\"\/>\n <line x1=\"16\" y1=\"2\" x2=\"16\" y2=\"6\"\/>\n <line x1=\"8\" y1=\"2\" x2=\"8\" y2=\"6\"\/>\n <line x1=\"3\" y1=\"10\" x2=\"21\" y2=\"10\"\/>\n <\/svg>\n Reserve a Table\n <\/h2>\n <div class=\"points-summary\">Find and book your perfect table<\/div>\n <\/div>\n\n <div class=\"create-booking-content\" id=\"createBookingModalBody\">\n \n <\/div>\n\n <div class=\"create-booking-footer\" id=\"createBookingModalFooter\">\n \n <\/div>\n <\/div>\n \n \n <div class=\"home-indicator\"><\/div>\n <\/div>\n\n <script>\n console.log('=== MAIN SCRIPT STARTING ===');\n console.log('JavaScript is loading...');\n\n let currentCustomer = null;\n let currentPhone = null;\n let resendTimer = null;\n let resendCountdown = 0;\n\n \/\/ Initialize when DOM is ready\n if (document.readyState === 'loading') {\n document.addEventListener('DOMContentLoaded', initializeApp);\n } else {\n \/\/ DOM already loaded\n initializeApp();\n }\n\n function checkPaymentStatus() {\n const urlParams = new URLSearchParams(window.location.search);\n const paymentStatus = urlParams.get('payment');\n const orderNumber = urlParams.get('order');\n\n if (paymentStatus) {\n console.log('Payment status detected:', paymentStatus, 'Order:', orderNumber);\n\n \/\/ Clear URL parameters\n const url = new URL(window.location);\n url.searchParams.delete('payment');\n url.searchParams.delete('order');\n window.history.replaceState({}, document.title, url.pathname);\n\n \/\/ Show payment result\n setTimeout(() => {\n if (paymentStatus === 'success') {\n showBookingMessage('success', 'Payment successful! Your booking has been confirmed.');\n \/\/ Refresh bookings to show the new booking\n if (typeof loadBookings === 'function') {\n loadBookings();\n }\n } else if (paymentStatus === 'failed') {\n showBookingMessage('error', 'Payment failed. Please try again or contact support.');\n } else if (paymentStatus === 'error') {\n showBookingMessage('error', 'Payment processing error. Please contact support.');\n }\n }, 1000); \/\/ Delay to ensure UI is ready\n }\n }\n\n \/\/ Booking Campaign Functions\n let currentCampaign = null;\n let currentCampaignCapacity = null; \/\/ Track campaign capacity for party size limits\n\n \/\/ Airbnb-style SVG Icon Library\n const icons = {\n \/\/ Navigation\n bookings: `<svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M3 3h18v18H3z\"\/><path d=\"M3 9h18\"\/><path d=\"M9 21V9\"\/><\/svg>`,\n rewards: `<svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M20 12v10H4V12\"\/><path d=\"M2 7h20v5H2z\"\/><path d=\"M12 22V7\"\/><path d=\"M12 7H7.5a2.5 2.5 0 0 1 0-5C11 2 12 7 12 7z\"\/><path d=\"M12 7h4.5a2.5 2.5 0 0 0 0-5C13 2 12 7 12 7z\"\/><\/svg>`,\n history: `<svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M3 3v5h5\"\/><path d=\"M3.05 13A9 9 0 1 0 6 5.3L3 8\"\/><path d=\"M12 7v5l4 2\"\/><\/svg>`,\n profile: `<svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><circle cx=\"12\" cy=\"8\" r=\"4\"\/><path d=\"M20 21a8 8 0 1 0-16 0\"\/><\/svg>`,\n\n \/\/ Actions\n plus: `<svg width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><line x1=\"12\" y1=\"5\" x2=\"12\" y2=\"19\"\/><line x1=\"5\" y1=\"12\" x2=\"19\" y2=\"12\"\/><\/svg>`,\n minus: `<svg width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><line x1=\"5\" y1=\"12\" x2=\"19\" y2=\"12\"\/><\/svg>`,\n close: `<svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><line x1=\"18\" y1=\"6\" x2=\"6\" y2=\"18\"\/><line x1=\"6\" y1=\"6\" x2=\"18\" y2=\"18\"\/><\/svg>`,\n check: `<svg width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><polyline points=\"20 6 9 17 4 12\"\/><\/svg>`,\n\n \/\/ Status\n success: `<svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"#22c55e\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><circle cx=\"12\" cy=\"12\" r=\"10\"\/><path d=\"m9 12 2 2 4-4\"\/><\/svg>`,\n error: `<svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"#ef4444\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><circle cx=\"12\" cy=\"12\" r=\"10\"\/><line x1=\"15\" y1=\"9\" x2=\"9\" y2=\"15\"\/><line x1=\"9\" y1=\"9\" x2=\"15\" y2=\"15\"\/><\/svg>`,\n warning: `<svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"#f59e0b\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"m21.73 18-8-14a2 2 0 0 0-3.48 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3Z\"\/><line x1=\"12\" y1=\"9\" x2=\"12\" y2=\"13\"\/><line x1=\"12\" y1=\"17\" x2=\"12.01\" y2=\"17\"\/><\/svg>`,\n info: `<svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"#3b82f6\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><circle cx=\"12\" cy=\"12\" r=\"10\"\/><line x1=\"12\" y1=\"16\" x2=\"12\" y2=\"12\"\/><line x1=\"12\" y1=\"8\" x2=\"12.01\" y2=\"8\"\/><\/svg>`,\n\n \/\/ Objects\n calendar: `<svg width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><rect x=\"3\" y=\"4\" width=\"18\" height=\"18\" rx=\"2\" ry=\"2\"\/><line x1=\"16\" y1=\"2\" x2=\"16\" y2=\"6\"\/><line x1=\"8\" y1=\"2\" x2=\"8\" y2=\"6\"\/><line x1=\"3\" y1=\"10\" x2=\"21\" y2=\"10\"\/><\/svg>`,\n clock: `<svg width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><circle cx=\"12\" cy=\"12\" r=\"10\"\/><polyline points=\"12 6 12 12 16 14\"\/><\/svg>`,\n user: `<svg width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><circle cx=\"12\" cy=\"8\" r=\"4\"\/><path d=\"M20 21a8 8 0 1 0-16 0\"\/><\/svg>`,\n users: `<svg width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2\"\/><circle cx=\"9\" cy=\"7\" r=\"4\"\/><path d=\"M22 21v-2a4 4 0 0 0-3-3.87\"\/><path d=\"M16 3.13a4 4 0 0 1 0 7.75\"\/><\/svg>`,\n email: `<svg width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><rect x=\"2\" y=\"4\" width=\"20\" height=\"16\" rx=\"2\"\/><path d=\"m22 7-8.97 5.7a1.94 1.94 0 0 1-2.06 0L2 7\"\/><\/svg>`,\n phone: `<svg width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72 12.84 12.84 0 0 0 .7 2.81 2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45 12.84 12.84 0 0 0 2.81.7A2 2 0 0 1 22 16.92z\"\/><\/svg>`,\n location: `<svg width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M20 10c0 6-8 12-8 12s-8-6-8-12a8 8 0 0 1 16 0Z\"\/><circle cx=\"12\" cy=\"10\" r=\"3\"\/><\/svg>`,\n creditCard: `<svg width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><rect x=\"1\" y=\"4\" width=\"22\" height=\"16\" rx=\"2\" ry=\"2\"\/><line x1=\"1\" y1=\"10\" x2=\"23\" y2=\"10\"\/><\/svg>`,\n\n \/\/ Features\n gift: `<svg width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M20 12v10H4V12\"\/><path d=\"M2 7h20v5H2z\"\/><path d=\"M12 22V7\"\/><path d=\"M12 7H7.5a2.5 2.5 0 0 1 0-5C11 2 12 7 12 7z\"\/><path d=\"M12 7h4.5a2.5 2.5 0 0 0 0-5C13 2 12 7 12 7z\"\/><\/svg>`,\n coupon: `<svg width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M2 9a3 3 0 0 1 0 6v2a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2v-2a3 3 0 0 1 0-6V7a2 2 0 0 0-2-2H4a2 2 0 0 0-2 2Z\"\/><path d=\"M13 5v2\"\/><path d=\"M13 17v2\"\/><path d=\"M13 11v2\"\/><\/svg>`,\n birthday: `<svg width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M20 21v-8a2 2 0 0 0-2-2H6a2 2 0 0 0-2 2v8\"\/><path d=\"M4 16s.5-1 2-1 2.5 2 4 2 2.5-2 4-2 2.5 2 4 2 2-1 2-1\"\/><path d=\"M2 21h20\"\/><path d=\"M7 8v2\"\/><path d=\"M12 8v2\"\/><path d=\"M17 8v2\"\/><path d=\"M7 4h0\"\/><path d=\"M12 4h0\"\/><path d=\"M17 4h0\"\/><\/svg>`,\n star: `<svg width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><polygon points=\"12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2\"\/><\/svg>`,\n trophy: `<svg width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M6 9H4.5a2.5 2.5 0 0 1 0-5H6\"\/><path d=\"M18 9h1.5a2.5 2.5 0 0 0 0-5H18\"\/><path d=\"M4 22h16\"\/><path d=\"M10 14.66V17c0 .55-.47.98-.97 1.21C7.85 18.75 7 20.24 7 22\"\/><path d=\"M14 14.66V17c0 .55.47.98.97 1.21C16.15 18.75 17 20.24 17 22\"\/><path d=\"M18 2H6v7a6 6 0 0 0 12 0V2Z\"\/><\/svg>`,\n target: `<svg width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><circle cx=\"12\" cy=\"12\" r=\"10\"\/><circle cx=\"12\" cy=\"12\" r=\"6\"\/><circle cx=\"12\" cy=\"12\" r=\"2\"\/><\/svg>`,\n coins: `<svg width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><circle cx=\"8\" cy=\"8\" r=\"6\"\/><path d=\"M18.09 10.37A6 6 0 1 1 10.34 18\"\/><path d=\"M7 6h1v4\"\/><path d=\"m16.71 13.88.7.71-2.82 2.82\"\/><\/svg>`,\n\n \/\/ Dining\n utensils: `<svg width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M3 2v7c0 1.1.9 2 2 2h4a2 2 0 0 0 2-2V2\"\/><path d=\"M7 2v20\"\/><path d=\"M21 15V2v0a5 5 0 0 0-5 5v6c0 1.1.9 2 2 2h3Zm0 0v7\"\/><\/svg>`,\n table: `<svg width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><rect x=\"2\" y=\"7\" width=\"20\" height=\"3\" rx=\"1\"\/><path d=\"M4 10v11\"\/><path d=\"M20 10v11\"\/><path d=\"M8 10v11\"\/><path d=\"M16 10v11\"\/><\/svg>`,\n\n \/\/ Tech\n bell: `<svg width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M6 8a6 6 0 0 1 12 0c0 7 3 9 3 9H3s3-2 3-9\"\/><path d=\"M10.3 21a1.94 1.94 0 0 0 3.4 0\"\/><\/svg>`,\n smartphone: `<svg width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><rect x=\"5\" y=\"2\" width=\"14\" height=\"20\" rx=\"2\" ry=\"2\"\/><line x1=\"12\" y1=\"18\" x2=\"12.01\" y2=\"18\"\/><\/svg>`,\n download: `<svg width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4\"\/><polyline points=\"7 10 12 15 17 10\"\/><line x1=\"12\" y1=\"15\" x2=\"12\" y2=\"3\"\/><\/svg>`,\n refresh: `<svg width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M3 12a9 9 0 0 1 9-9 9.75 9.75 0 0 1 6.74 2.74L21 8\"\/><path d=\"M21 3v5h-5\"\/><path d=\"M21 12a9 9 0 0 1-9 9 9.75 9.75 0 0 1-6.74-2.74L3 16\"\/><path d=\"M8 16H3v5\"\/><\/svg>`,\n lock: `<svg width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><rect x=\"3\" y=\"11\" width=\"18\" height=\"11\" rx=\"2\" ry=\"2\"\/><path d=\"M7 11V7a5 5 0 0 1 10 0v4\"\/><\/svg>`,\n zap: `<svg width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><polygon points=\"13 2 3 14 12 14 11 22 21 10 12 10 13 2\"\/><\/svg>`,\n sparkles: `<svg width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"m12 3-1.912 5.813a2 2 0 0 1-1.275 1.275L3 12l5.813 1.912a2 2 0 0 1 1.275 1.275L12 21l1.912-5.813a2 2 0 0 1 1.275-1.275L21 12l-5.813-1.912a2 2 0 0 1-1.275-1.275L12 3Z\"\/><path d=\"M5 3v4\"\/><path d=\"M19 17v4\"\/><path d=\"M3 5h4\"\/><path d=\"M17 19h4\"\/><\/svg>`,\n lightbulb: `<svg width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M15 14c.2-1 .7-1.7 1.5-2.5 1-.9 1.5-2.2 1.5-3.5A6 6 0 0 0 6 8c0 1 .2 2.2 1.5 3.5.7.7 1.3 1.5 1.5 2.5\"\/><path d=\"M9 18h6\"\/><path d=\"M10 22h4\"\/><\/svg>`,\n clipboard: `<svg width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><rect x=\"8\" y=\"2\" width=\"8\" height=\"4\" rx=\"1\" ry=\"1\"\/><path d=\"M16 4h2a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h2\"\/><\/svg>`,\n edit: `<svg width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M17 3a2.85 2.83 0 1 1 4 4L7.5 20.5 2 22l1.5-5.5Z\"\/><path d=\"m15 5 4 4\"\/><\/svg>`,\n blocked: `<svg width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><circle cx=\"12\" cy=\"12\" r=\"10\"\/><path d=\"m4.93 4.93 14.14 14.14\"\/><\/svg>`,\n arrowRight: `<svg width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M5 12h14\"\/><path d=\"m12 5 7 7-7 7\"\/><\/svg>`,\n chevronRight: `<svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"m9 18 6-6-6-6\"\/><\/svg>`,\n party: `<svg width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M5.8 11.3 2 22l10.7-3.79\"\/><path d=\"M4 3h.01\"\/><path d=\"M22 8h.01\"\/><path d=\"M15 2h.01\"\/><path d=\"M22 20h.01\"\/><path d=\"m22 2-2.24.75a2.9 2.9 0 0 0-1.96 3.12v0c.1.86-.57 1.63-1.45 1.63h-.38c-.86 0-1.6.6-1.76 1.44L14 10\"\/><path d=\"m22 13-.82-.33c-.86-.34-1.82.2-1.98 1.11v0c-.11.7-.72 1.22-1.43 1.22H17\"\/><path d=\"m11 2 .33.82c.34.86-.2 1.82-1.11 1.98v0C9.52 4.9 9 5.52 9 6.23V7\"\/><path d=\"M11 13c1.93 1.93 2.83 4.17 2 5-.83.83-3.07-.07-5-2-1.93-1.93-2.83-4.17-2-5 .83-.83 3.07.07 5 2Z\"\/><\/svg>`,\n };\n\n \/\/ Helper function to get icon with custom size\/color\n function getIcon(name, size = 20, color = 'currentColor') {\n const icon = icons[name];\n if (!icon) return '';\n return icon.replace(\/width=\"[^\"]*\"\/, `width=\"${size}\"`)\n .replace(\/height=\"[^\"]*\"\/, `height=\"${size}\"`)\n .replace(\/stroke=\"currentColor\"\/g, `stroke=\"${color}\"`);\n }\n\n \/\/ Centralized nonce management for PWA\n \/\/ These nonces are valid for 7 days but we refresh them proactively\n let nonceStore = {\n booking: '27a783d588',\n app: '667e7f7f5b',\n lastRefresh: Date.now()\n };\n\n \/\/ For backwards compatibility\n let currentNonce = nonceStore.booking;\n\n \/\/ Function to refresh all nonces\n function refreshNonce() {\n return fetch('https:\/\/reserve.samuraiyakiniku.com\/wp-admin\/admin-ajax.php', {\n method: 'POST',\n headers: {\n 'Content-Type': 'application\/x-www-form-urlencoded',\n },\n body: new URLSearchParams({\n action: 'rls_refresh_nonce'\n })\n })\n .then(response => response.json())\n .then(data => {\n if (data.success) {\n nonceStore.booking = data.data.booking_nonce || data.data.nonce;\n nonceStore.app = data.data.app_nonce || nonceStore.app;\n nonceStore.lastRefresh = Date.now();\n currentNonce = nonceStore.booking; \/\/ Backwards compatibility\n console.log('\u2705 All nonces refreshed successfully');\n return currentNonce;\n } else {\n console.error('\u274c Failed to refresh nonce');\n return currentNonce;\n }\n })\n .catch(error => {\n console.error('\u274c Error refreshing nonce:', error);\n return currentNonce;\n });\n }\n\n \/\/ Get the appropriate nonce for a given action\n function getNonceForAction(action) {\n const appActions = ['get_customer_activity', 'rls_update_birthday', 'rls_update_name', 'rls_update_email'];\n if (appActions.includes(action)) {\n return nonceStore.app;\n }\n return nonceStore.booking;\n }\n\n \/\/ Proactive nonce refresh - refresh every 6 hours to avoid expiry\n \/\/ Nonces are valid for 7 days, refreshing every 6 hours gives plenty of buffer\n const NONCE_REFRESH_INTERVAL = 6 * 60 * 60 * 1000; \/\/ 6 hours in ms\n\n function checkAndRefreshNonce() {\n const timeSinceRefresh = Date.now() - nonceStore.lastRefresh;\n if (timeSinceRefresh > NONCE_REFRESH_INTERVAL) {\n console.log('\ud83d\udd04 Proactively refreshing nonces (last refresh: ' + Math.round(timeSinceRefresh \/ 3600000) + ' hours ago)');\n refreshNonce();\n }\n }\n\n \/\/ Check nonce freshness on page visibility change (when user returns to app)\n document.addEventListener('visibilitychange', function() {\n if (document.visibilityState === 'visible') {\n checkAndRefreshNonce();\n }\n });\n\n \/\/ Also check periodically while app is open\n setInterval(checkAndRefreshNonce, 60 * 60 * 1000); \/\/ Check every hour\n\n \/\/ Function to make AJAX request with automatic nonce refresh on failure\n function makeAjaxRequest(url, params, retryCount = 0) {\n \/\/ Use appropriate nonce for the action\n const action = params.action || '';\n params.nonce = getNonceForAction(action);\n\n \/\/ Include session token for database-backed authentication\n const sessionToken = localStorage.getItem('loyalty_session_token');\n if (sessionToken) {\n params.session_token = sessionToken;\n }\n\n return fetch(url, {\n method: 'POST',\n headers: {\n 'Content-Type': 'application\/x-www-form-urlencoded',\n },\n body: new URLSearchParams(params)\n })\n .then(response => response.json())\n .then(data => {\n \/\/ Check if it's a nonce failure - handle various error messages\n const isNonceError = !data.success && data.data &&\n (\n (data.data.message && (\n data.data.message.includes('Security check failed') ||\n data.data.message.includes('nonce') ||\n data.data.message.includes('Invalid security token')\n )) ||\n data.data.code === 'invalid_nonce' ||\n data.data.code === 'nonce_expired'\n );\n\n if (isNonceError && retryCount < 1) {\n console.log('\ud83d\udd04 Security check failed, refreshing nonce and retrying...');\n return refreshNonce().then(() => {\n \/\/ Update the params with new nonce for retry\n params.nonce = getNonceForAction(action);\n return makeAjaxRequest(url, params, retryCount + 1);\n });\n }\n return data;\n });\n }\n\n function checkBookingCampaign(date, branchCode, partySize) {\n console.log('Checking booking campaign for:', { date, branchCode, partySize });\n\n \/\/ Clear previous campaign display\n hideCampaignInfo();\n currentCampaign = null;\n currentCampaignCapacity = null;\n\n makeAjaxRequest('https:\/\/reserve.samuraiyakiniku.com\/wp-admin\/admin-ajax.php', {\n action: 'rls_get_campaign_for_date',\n date: date,\n branch_code: branchCode\n })\n .then(data => {\n console.log('Campaign check response:', data);\n\n if (data.success && data.data.campaign) {\n const campaign = data.data.campaign;\n const minimumPax = parseInt(campaign.minimum_pax) || 1;\n\n \/\/ Check minimum pax requirement first\n if (partySize < minimumPax) {\n \/\/ Party size is below minimum - show minimum pax message and prevent campaign booking\n currentCampaign = null; \/\/ Clear campaign data for regular booking\n showCampaignMinimumPaxMessage(data.data, partySize, minimumPax);\n console.log(`Party size ${partySize} is below minimum ${minimumPax} - allowing regular booking instead`);\n } else if (campaign.status === 'completed') {\n \/\/ Campaign is completed - show full message but allow regular booking\n currentCampaign = null; \/\/ Clear campaign data for regular booking\n showCampaignFullMessage(data.data, partySize);\n console.log('Campaign is completed - allowing regular booking instead');\n } else if (data.data.is_full) {\n \/\/ Campaign is completely full - show full message but allow regular booking\n currentCampaign = null; \/\/ Clear campaign data for regular booking\n showCampaignFullMessage(data.data, partySize);\n console.log('Campaign is completely full - allowing regular booking instead');\n } else if (data.data.available_capacity < partySize) {\n \/\/ Campaign has some capacity but not enough for this party size\n currentCampaign = null; \/\/ Clear campaign data for regular booking\n showCampaignInsufficientCapacity(data.data, partySize);\n console.log('Campaign has insufficient capacity for party size - allowing regular booking instead');\n } else {\n \/\/ Campaign has sufficient capacity and meets minimum pax - show campaign info and set as active\n currentCampaign = data.data;\n currentCampaignCapacity = data.data.available_capacity;\n showCampaignInfo(data.data, partySize);\n console.log('Active campaign with sufficient capacity found:', data.data.campaign.name);\n }\n } else {\n \/\/ No campaign found, allow regular booking\n console.log('No campaign found for date:', date);\n }\n\n \/\/ Continue with normal time slot loading (always load time slots)\n loadTimeSlots(date, partySize, branchCode);\n })\n .catch(error => {\n console.error('Error checking campaign:', error);\n \/\/ Continue with normal time slot loading on error\n loadTimeSlots(date, partySize, branchCode);\n });\n }\n\n function showCampaignInfo(campaignData, partySize) {\n const campaign = campaignData.campaign;\n const availableCapacity = campaignData.available_capacity;\n const progressPercentage = campaignData.progress_percentage;\n\n \/\/ Create campaign info display - Airbnb light theme style\n let campaignHtml = `\n <div id=\"campaignInfo\" class=\"airbnb-campaign-banner\">\n <div style=\"display: flex; align-items: flex-start; gap: 12px;\">\n <div style=\"color: #e00b41;\"><svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><circle cx=\"12\" cy=\"12\" r=\"10\"\/><circle cx=\"12\" cy=\"12\" r=\"6\"\/><circle cx=\"12\" cy=\"12\" r=\"2\"\/><\/svg><\/div>\n <div style=\"flex: 1;\">\n <h4>${campaign.name}<\/h4>\n <p>${campaign.description || 'Special limited-time campaign'}<\/p>\n <div style=\"display: flex; gap: 16px; margin-top: 8px; font-size: 13px; color: #222;\">\n <span><strong>${availableCapacity}<\/strong> spots left<\/span>\n ${campaign.minimum_pax > 1 ? `<span>Min <strong>${campaign.minimum_pax}<\/strong> guests<\/span>` : ''}\n <\/div>\n <div class=\"airbnb-campaign-progress\">\n <div class=\"airbnb-campaign-progress-fill\" style=\"width: ${progressPercentage}%\"><\/div>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n `;\n\n \/\/ Insert into campaign banner container or after date field\n const bannerContainer = document.getElementById('campaignBannerContainer');\n const existingCampaignInfo = document.getElementById('campaignInfo');\n if (existingCampaignInfo) {\n existingCampaignInfo.remove();\n }\n\n if (bannerContainer) {\n bannerContainer.innerHTML = campaignHtml;\n } else {\n \/\/ Fallback: insert after date field\n const dateField = document.getElementById('createBookingDate').parentElement;\n dateField.insertAdjacentHTML('afterend', campaignHtml);\n }\n\n \/\/ Update party size button states based on campaign capacity and minimum pax\n const currentPartySize = parseInt(document.getElementById('createPartySizeValue')?.textContent || '1');\n const minimumPax = parseInt(campaign.minimum_pax) || 1;\n updatePartySizeButtonStates(currentPartySize, availableCapacity, minimumPax);\n }\n\n function showCampaignFullMessage(campaignData) {\n const campaign = campaignData.campaign;\n\n let fullMessageHtml = `\n <div id=\"campaignFullMessage\" style=\"background: #fef2f2; border: 1px solid #fecaca; padding: 16px; border-radius: 12px; margin-bottom: 24px;\">\n <div style=\"display: flex; align-items: flex-start; gap: 12px;\">\n <div style=\"color: #dc2626;\"><svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"m21.73 18-8-14a2 2 0 0 0-3.48 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3Z\"\/><line x1=\"12\" y1=\"9\" x2=\"12\" y2=\"13\"\/><line x1=\"12\" y1=\"17\" x2=\"12.01\" y2=\"17\"\/><\/svg><\/div>\n <div>\n <h4 style=\"margin: 0 0 4px; font-size: 14px; font-weight: 600; color: #991b1b;\">Campaign Full<\/h4>\n <p style=\"margin: 0 0 8px; font-size: 13px; color: #7f1d1d;\">${campaign.name} has reached capacity (${campaign.current_bookings}\/${campaign.total_capacity})<\/p>\n <p style=\"margin: 0; font-size: 13px; color: #717171;\">You can still make a regular booking for this date.<\/p>\n <\/div>\n <\/div>\n <\/div>\n `;\n\n \/\/ Insert into campaign banner container or after date field\n const bannerContainer = document.getElementById('campaignBannerContainer');\n const existingMessage = document.getElementById('campaignFullMessage');\n if (existingMessage) {\n existingMessage.remove();\n }\n\n if (bannerContainer) {\n bannerContainer.innerHTML = fullMessageHtml;\n } else {\n const dateField = document.getElementById('createBookingDate').parentElement;\n dateField.insertAdjacentHTML('afterend', fullMessageHtml);\n }\n\n \/\/ Reset party size button states to default (no campaign limits)\n const currentPartySize = parseInt(document.getElementById('createPartySizeValue')?.textContent || '1');\n updatePartySizeButtonStates(currentPartySize, 20);\n }\n\n function showCampaignInsufficientCapacity(campaignData, partySize) {\n const campaign = campaignData.campaign;\n const availableCapacity = campaignData.available_capacity;\n\n let insufficientCapacityHtml = `\n <div id=\"campaignFullMessage\" style=\"background: #eff6ff; border: 1px solid #bfdbfe; padding: 16px; border-radius: 12px; margin-bottom: 24px;\">\n <div style=\"display: flex; align-items: flex-start; gap: 12px;\">\n <div style=\"color: #2563eb;\"><svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><circle cx=\"12\" cy=\"12\" r=\"10\"\/><line x1=\"12\" y1=\"16\" x2=\"12\" y2=\"12\"\/><line x1=\"12\" y1=\"8\" x2=\"12.01\" y2=\"8\"\/><\/svg><\/div>\n <div>\n <h4 style=\"margin: 0 0 4px; font-size: 14px; font-weight: 600; color: #1e40af;\">Limited Campaign Spots<\/h4>\n <p style=\"margin: 0 0 8px; font-size: 13px; color: #1e3a8a;\">${campaign.name} has only ${availableCapacity} spots left (you need ${partySize})<\/p>\n <p style=\"margin: 0; font-size: 13px; color: #717171;\">Reduce party size or continue with regular booking.<\/p>\n <\/div>\n <\/div>\n <\/div>\n `;\n\n \/\/ Insert into campaign banner container or after date field\n const bannerContainer = document.getElementById('campaignBannerContainer');\n const existingMessage = document.getElementById('campaignFullMessage');\n if (existingMessage) {\n existingMessage.remove();\n }\n\n if (bannerContainer) {\n bannerContainer.innerHTML = insufficientCapacityHtml;\n } else {\n const dateField = document.getElementById('createBookingDate').parentElement;\n dateField.insertAdjacentHTML('afterend', insufficientCapacityHtml);\n }\n\n \/\/ Reset party size button states to default (no campaign limits for regular booking)\n const currentPartySize = parseInt(document.getElementById('createPartySizeValue')?.textContent || '1');\n updatePartySizeButtonStates(currentPartySize, 20);\n }\n\n function showCampaignMinimumPaxMessage(campaignData, partySize, minimumPax) {\n const campaign = campaignData.campaign;\n\n let minimumPaxHtml = `\n <div id=\"campaignFullMessage\" style=\"background: #fffbeb; border: 1px solid #fde68a; padding: 16px; border-radius: 12px; margin-bottom: 24px;\">\n <div style=\"display: flex; align-items: flex-start; gap: 12px;\">\n <div style=\"color: #d97706;\"><svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2\"\/><circle cx=\"9\" cy=\"7\" r=\"4\"\/><path d=\"M22 21v-2a4 4 0 0 0-3-3.87\"\/><path d=\"M16 3.13a4 4 0 0 1 0 7.75\"\/><\/svg><\/div>\n <div>\n <h4 style=\"margin: 0 0 4px; font-size: 14px; font-weight: 600; color: #92400e;\">Minimum ${minimumPax} Guests Required<\/h4>\n <p style=\"margin: 0 0 8px; font-size: 13px; color: #78350f;\">${campaign.name} requires at least ${minimumPax} people per booking.<\/p>\n <p style=\"margin: 0; font-size: 13px; color: #717171;\">Increase party size or continue with regular booking.<\/p>\n <\/div>\n <\/div>\n <\/div>\n `;\n\n \/\/ Insert into campaign banner container or after date field\n const bannerContainer = document.getElementById('campaignBannerContainer');\n const existingMessage = document.getElementById('campaignFullMessage');\n if (existingMessage) {\n existingMessage.remove();\n }\n\n if (bannerContainer) {\n bannerContainer.innerHTML = minimumPaxHtml;\n } else {\n const dateField = document.getElementById('createBookingDate').parentElement;\n dateField.insertAdjacentHTML('afterend', minimumPaxHtml);\n }\n\n \/\/ Reset party size button states to default (no campaign limits for regular booking)\n const currentPartySize = parseInt(document.getElementById('createPartySizeValue')?.textContent || '1');\n updatePartySizeButtonStates(currentPartySize, 20);\n }\n\n function hideCampaignInfo() {\n const campaignInfo = document.getElementById('campaignInfo');\n const campaignFullMessage = document.getElementById('campaignFullMessage');\n const bannerContainer = document.getElementById('campaignBannerContainer');\n\n if (campaignInfo) campaignInfo.remove();\n if (campaignFullMessage) campaignFullMessage.remove();\n if (bannerContainer) bannerContainer.innerHTML = '';\n\n \/\/ Reset party size button states to default when hiding campaign info\n hidePartySizeLimitIndicator();\n const currentPartySize = parseInt(document.getElementById('createPartySizeValue')?.textContent || '1');\n updatePartySizeButtonStates(currentPartySize, 20);\n }\n\n function loadTimeSlots(date, partySize, branchCode) {\n \/\/ This is the original time slot loading logic\n const timeSelect = document.getElementById('createBookingTime');\n\n console.log('Loading time slots for:', { date, partySize, branchCode });\n timeSelect.innerHTML = '<option value=\"\">Loading time slots...<\/option>';\n\n makeAjaxRequest('https:\/\/reserve.samuraiyakiniku.com\/wp-admin\/admin-ajax.php', {\n action: 'rls_get_available_time_slots',\n branch_code: branchCode,\n date: date,\n party_size: partySize\n })\n .then(data => {\n console.log('Time slots response:', data);\n\n \/\/ Handle nested data structure: data.data.data.time_slots\n const timeSlots = data.success && data.data && data.data.data && data.data.data.time_slots\n ? data.data.data.time_slots\n : (data.success && data.data && data.data.time_slots ? data.data.time_slots : null);\n\n if (timeSlots && timeSlots.length > 0) {\n timeSelect.innerHTML = '<option value=\"\">Select a time...<\/option>';\n timeSlots.forEach(slot => {\n const option = document.createElement('option');\n option.value = slot.time;\n option.textContent = (slot.display_time || slot.time) + (slot.available_tables ? ` (${slot.available_tables} tables)` : '');\n timeSelect.appendChild(option);\n });\n } else {\n timeSelect.innerHTML = '<option value=\"\">No time slots available<\/option>';\n console.log('No time slots found in response:', data);\n }\n validateCreateBookingForm();\n })\n .catch(error => {\n console.error('Error loading time slots:', error);\n timeSelect.innerHTML = '<option value=\"\">Error loading time slots<\/option>';\n });\n }\n\n function initializeApp() {\n console.log('Initializing app...');\n\n \/\/ Check for payment status in URL parameters\n checkPaymentStatus();\n\n checkExistingSession();\n\n \/\/ Check if QR library is loaded\n console.log('Page loaded. QRCode library available:', typeof QRCode !== 'undefined');\n\n \/\/ Set up all event listeners\n console.log('About to setup event listeners...');\n setupEventListeners();\n console.log('Event listeners setup complete.');\n }\n\n \/\/ Refresh data when page becomes visible (handles tab switching)\n document.addEventListener('visibilitychange', function() {\n if (!document.hidden) {\n if (currentCustomer) {\n refreshCustomerData();\n }\n }\n });\n\n \/\/ Refresh data when page gains focus\n window.addEventListener('focus', function() {\n if (currentCustomer) {\n refreshCustomerData();\n }\n });\n\n console.log('=== DEFINING FUNCTIONS ===');\n\n function checkExistingSession() {\n const savedCustomer = localStorage.getItem('loyalty_customer');\n const sessionExpiry = localStorage.getItem('loyalty_session_expiry');\n\n if (savedCustomer) {\n if (sessionExpiry) {\n const now = new Date().getTime();\n const expiry = parseInt(sessionExpiry);\n\n \/\/ Check if session is still valid (365 days \/ 1 year)\n if (now < expiry) {\n currentCustomer = JSON.parse(savedCustomer);\n showDashboard();\n updateCustomerInfo();\n return;\n }\n }\n }\n\n \/\/ Clear expired session\n clearSession();\n }\n\n function saveSession(customer) {\n const expiry = new Date().getTime() + (365 * 24 * 60 * 60 * 1000); \/\/ 365 days (1 year)\n localStorage.setItem('loyalty_customer', JSON.stringify(customer));\n localStorage.setItem('loyalty_session_expiry', expiry.toString());\n\n \/\/ Store session token separately for security\n if (customer.session_token) {\n localStorage.setItem('loyalty_session_token', customer.session_token);\n console.log('\u2705 Session token stored securely');\n }\n }\n\n function clearSession() {\n localStorage.removeItem('loyalty_customer');\n localStorage.removeItem('loyalty_session_expiry');\n localStorage.removeItem('loyalty_session_token');\n }\n\n \/\/ Helper function to add session token to FormData\n function addSessionToken(formData) {\n const sessionToken = localStorage.getItem('loyalty_session_token');\n if (sessionToken) {\n formData.append('session_token', sessionToken);\n }\n return formData;\n }\n\n function setupEventListeners() {\n console.log('Setting up event listeners...');\n\n \/\/ Check if elements exist\n const sendCodeBtn = document.getElementById('sendCodeBtn');\n const verifyBtn = document.getElementById('verifyBtn');\n const phoneInput = document.getElementById('phoneInput');\n const codeInput = document.getElementById('codeInput');\n const resendBtn = document.getElementById('resendBtn');\n const backToPhone = document.getElementById('backToPhone');\n\n console.log('Elements found:', {\n sendCodeBtn: !!sendCodeBtn,\n verifyBtn: !!verifyBtn,\n phoneInput: !!phoneInput,\n codeInput: !!codeInput,\n resendBtn: !!resendBtn,\n backToPhone: !!backToPhone\n });\n\n if (!sendCodeBtn) {\n console.error('Critical: sendCodeBtn element not found! Login will not work.');\n \/\/ Try to find it with a different method\n const allButtons = document.querySelectorAll('button');\n console.log('All buttons found:', allButtons.length);\n allButtons.forEach((btn, index) => {\n console.log(`Button ${index}:`, btn.id, btn.className, btn.textContent);\n });\n return;\n }\n\n \/\/ Send verification code\n sendCodeBtn.addEventListener('click', function() {\n console.log('Send code button clicked!');\n const phone = document.getElementById('phoneInput').value.trim();\n\n if (!phone) {\n showPhoneMessage('Please enter your phone number', 'error');\n return;\n }\n\n sendVerificationCode(phone);\n });\n\n \/\/ Verify code\n document.getElementById('verifyBtn').addEventListener('click', function() {\n const code = document.getElementById('codeInput').value.trim();\n\n if (!code || code.length !== 6) {\n showVerificationMessage('Please enter the 6-digit verification code', 'error');\n return;\n }\n\n verifyCode(currentPhone, code);\n });\n\n \/\/ Resend code\n document.getElementById('resendBtn').addEventListener('click', function() {\n if (resendCountdown > 0) return;\n sendVerificationCode(currentPhone);\n });\n\n \/\/ Back to phone step\n document.getElementById('backToPhone').addEventListener('click', function(e) {\n e.preventDefault();\n showPhoneStep();\n });\n\n \/\/ Auto-format phone input - numbers only\n document.getElementById('phoneInput').addEventListener('input', function(e) {\n let value = e.target.value.replace(\/\\D\/g, '');\n if (value.length > 15) value = value.slice(0, 15);\n e.target.value = value;\n });\n\n \/\/ Enter key support\n document.getElementById('phoneInput').addEventListener('keypress', function(e) {\n if (e.key === 'Enter') {\n document.getElementById('sendCodeBtn').click();\n }\n });\n\n document.getElementById('codeInput').addEventListener('keypress', function(e) {\n if (e.key === 'Enter') {\n document.getElementById('verifyBtn').click();\n }\n });\n\n \/\/ Auto-format verification code input\n document.getElementById('codeInput').addEventListener('input', function(e) {\n let value = e.target.value.replace(\/\\D\/g, '');\n if (value.length > 6) value = value.slice(0, 6);\n e.target.value = value;\n\n \/\/ Auto-verify when 6 digits entered\n if (value.length === 6) {\n setTimeout(() => {\n document.getElementById('verifyBtn').click();\n }, 500);\n }\n });\n\n \/\/ Branch selector event listener (will be attached when element exists)\n setTimeout(() => {\n const branchSelector = document.getElementById('branchSelector');\n if (branchSelector) {\n branchSelector.addEventListener('change', function(e) {\n const selectedBranchId = e.target.value;\n console.log('Branch selector changed:', selectedBranchId);\n\n \/\/ Update branch context (skip auto-reload and selector update to prevent loops)\n setBranchContext(selectedBranchId, true, true);\n\n \/\/ Update only the redeemed selector to keep them in sync\n const redeemedBranchSelector = document.getElementById('redeemedBranchSelector');\n if (redeemedBranchSelector) {\n redeemedBranchSelector.value = selectedBranchId || '';\n }\n\n \/\/ Show loading state\n const rewardsGrid = document.getElementById('rewardsGrid');\n if (rewardsGrid) {\n rewardsGrid.innerHTML = '<div class=\"loading\"><div class=\"spinner\"><\/div><p>Filtering rewards...<\/p><\/div>';\n }\n\n \/\/ Reload rewards with new branch filter\n loadRewards();\n });\n console.log('Branch selector event listener attached');\n }\n\n \/\/ Also attach event listener for redeemed branch selector\n const redeemedBranchSelector = document.getElementById('redeemedBranchSelector');\n if (redeemedBranchSelector) {\n redeemedBranchSelector.addEventListener('change', function(e) {\n const selectedBranchId = e.target.value;\n console.log('Redeemed branch selector changed:', selectedBranchId);\n\n \/\/ Update branch context (skip auto-reload and selector update to prevent loops)\n setBranchContext(selectedBranchId, true, true);\n\n \/\/ Update only the regular selector to keep them in sync\n const branchSelector = document.getElementById('branchSelector');\n if (branchSelector) {\n branchSelector.value = selectedBranchId || '';\n }\n\n \/\/ Show loading state\n const redeemedList = document.getElementById('redeemedList');\n if (redeemedList) {\n redeemedList.innerHTML = '<div class=\"loading\"><div class=\"spinner\"><\/div><p>Filtering rewards...<\/p><\/div>';\n }\n\n \/\/ Reload redeemed rewards with new branch filter\n loadRedeemedRewards();\n });\n console.log('Redeemed branch selector event listener attached');\n }\n }, 1000);\n }\n \n function sendVerificationCode(phone) {\n const sendBtn = document.getElementById('sendCodeBtn');\n const originalText = sendBtn.textContent;\n\n sendBtn.disabled = true;\n sendBtn.textContent = 'Sending...';\n showLoading(true);\n\n \/\/ Use the secure AJAX function with nonce\n makeAjaxRequest('https:\/\/reserve.samuraiyakiniku.com\/wp-admin\/admin-ajax.php', {\n action: 'rls_send_verification',\n phone: phone\n })\n .then(data => {\n showLoading(false);\n sendBtn.disabled = false;\n sendBtn.textContent = originalText;\n\n if (data.success) {\n currentPhone = data.data.phone;\n\n \/\/ Update verification method text based on delivery method\n const deliveryMethod = data.data.delivery_method || 'whatsapp';\n const deliveryText = deliveryMethod === 'sms' ? 'SMS' : 'WhatsApp';\n const verificationMethodText = document.getElementById('verificationMethodText');\n if (verificationMethodText) {\n verificationMethodText.textContent = `We've sent a 6-digit code to your ${deliveryText}`;\n }\n\n showVerificationStep(phone);\n startResendTimer();\n } else {\n showPhoneMessage(data.data.message, 'error');\n }\n })\n .catch(error => {\n showLoading(false);\n sendBtn.disabled = false;\n sendBtn.textContent = originalText;\n showPhoneMessage('Connection error. Please try again.', 'error');\n console.error('Send verification error:', error);\n });\n }\n\n function verifyCode(phone, code) {\n const verifyBtn = document.getElementById('verifyBtn');\n const originalText = verifyBtn.textContent;\n\n verifyBtn.disabled = true;\n verifyBtn.textContent = 'Verifying...';\n showLoading(true);\n\n \/\/ Use the secure AJAX function with nonce\n makeAjaxRequest('https:\/\/reserve.samuraiyakiniku.com\/wp-admin\/admin-ajax.php', {\n action: 'rls_verify_code',\n phone: phone,\n code: code\n })\n .then(data => {\n showLoading(false);\n verifyBtn.disabled = false;\n verifyBtn.textContent = originalText;\n\n if (data.success) {\n currentCustomer = data.data;\n saveSession(currentCustomer); \/\/ Save session to localStorage\n showDashboard();\n updateCustomerInfo();\n } else {\n showVerificationMessage(data.data.message, 'error');\n \/\/ Clear the code input for retry\n document.getElementById('codeInput').value = '';\n document.getElementById('codeInput').focus();\n }\n })\n .catch(error => {\n showLoading(false);\n verifyBtn.disabled = false;\n verifyBtn.textContent = originalText;\n showVerificationMessage('Connection error. Please try again.', 'error');\n console.error('Verification error:', error);\n });\n }\n\n function showPhoneStep() {\n document.getElementById('phoneStep').style.display = 'block';\n document.getElementById('verificationStep').style.display = 'none';\n document.getElementById('phoneInput').focus();\n clearMessages();\n }\n\n function showVerificationStep(phone) {\n document.getElementById('phoneStep').style.display = 'none';\n document.getElementById('verificationStep').style.display = 'block';\n document.getElementById('sentToNumber').textContent = `Code sent to ${formatPhoneDisplay(phone)}`;\n document.getElementById('codeInput').focus();\n clearMessages();\n }\n\n function formatPhoneDisplay(phone) {\n \/\/ Format phone for display (e.g., +60 12-345-6789)\n if (phone.startsWith('60') && phone.length === 11) {\n return `+${phone.slice(0, 2)} ${phone.slice(2, 4)}-${phone.slice(4, 7)}-${phone.slice(7)}`;\n }\n return phone;\n }\n\n function startResendTimer() {\n resendCountdown = 60; \/\/ 60 seconds\n const resendBtn = document.getElementById('resendBtn');\n\n function updateTimer() {\n if (resendCountdown > 0) {\n resendBtn.textContent = `Resend Code (${resendCountdown}s)`;\n resendBtn.disabled = true;\n resendCountdown--;\n resendTimer = setTimeout(updateTimer, 1000);\n } else {\n resendBtn.textContent = 'Resend Code';\n resendBtn.disabled = false;\n clearTimeout(resendTimer);\n }\n }\n\n updateTimer();\n }\n \n function updateCustomerInfo() {\n if (!currentCustomer) return;\n\n \/\/ Debug: Log customer data to console\n console.log('Current customer data:', currentCustomer);\n\n document.getElementById('pointsBalance').textContent = currentCustomer.current_points || currentCustomer.total_points || 0;\n\n \/\/ Construct full name from first_name and last_name\n const fullName = (currentCustomer.first_name || '') + ' ' + (currentCustomer.last_name || '');\n const displayName = fullName.trim() || currentCustomer.full_name || 'Valued Customer';\n\n console.log('Display name:', displayName);\n document.getElementById('customerName').textContent = displayName;\n\n document.getElementById('memberSince').textContent = new Date(currentCustomer.created_at).getFullYear();\n\n const tierBadge = document.getElementById('tierBadge');\n tierBadge.textContent = (currentCustomer.tier || 'bronze').charAt(0).toUpperCase() + (currentCustomer.tier || 'bronze').slice(1);\n tierBadge.className = 'tier-badge tier-' + (currentCustomer.tier || 'bronze');\n\n \/\/ Update tier progress card on main dashboard\n updateTierProgressCard();\n\n \/\/ Update session storage with latest data\n saveSession(currentCustomer);\n }\n\n function updateTierProgressCard() {\n if (!currentCustomer) return;\n\n const tierProgressCard = document.getElementById('tierProgressCard');\n if (!tierProgressCard) return;\n\n const customerTier = currentCustomer.tier || 'bronze';\n const customerLifetimePoints = parseInt(currentCustomer.lifetime_points || 0);\n\n \/\/ Get tier thresholds (these should match your backend settings)\n const tierThresholds = {\n bronze: 0,\n silver: 2000,\n gold: 5000,\n platinum: 10000\n };\n\n tierProgressCard.innerHTML = generateTierProgressSection(customerTier, customerLifetimePoints, tierThresholds);\n }\n\n function refreshCustomerData() {\n if (!currentCustomer || !currentCustomer.phone) return;\n\n console.log('Refreshing customer data...');\n\n makeAjaxRequest('https:\/\/reserve.samuraiyakiniku.com\/wp-admin\/admin-ajax.php', {\n action: 'rls_api_customer',\n phone: currentCustomer.phone\n })\n .then(data => {\n if (data.success) {\n console.log('Fresh customer data:', data.data);\n currentCustomer = data.data;\n updateCustomerInfo();\n\n \/\/ Also refresh PHP session to keep it alive\n refreshSession();\n } else {\n console.error('Failed to refresh customer data:', data.data.message);\n\n \/\/ Check if it's an access denied error (session expired)\n if (data.data && data.data.message && data.data.message.includes('Access denied')) {\n handleSessionExpired();\n }\n }\n })\n .catch(error => {\n console.error('Error refreshing customer data:', error);\n });\n }\n\n \/\/ Refresh session to keep it alive (database-backed)\n function refreshSession() {\n if (!currentCustomer || !currentCustomer.phone) return;\n\n makeAjaxRequest('https:\/\/reserve.samuraiyakiniku.com\/wp-admin\/admin-ajax.php', {\n action: 'rls_refresh_session',\n phone: currentCustomer.phone\n })\n .then(data => {\n if (data.success) {\n const daysRemaining = data.data.days_remaining || Math.floor(data.data.time_remaining \/ (24 * 60 * 60));\n const sessionType = data.data.session_type || 'unknown';\n console.log(`\u2705 Session refreshed (${sessionType}), time remaining:`, daysRemaining, 'days');\n } else {\n console.warn('\u26a0\ufe0f Session refresh failed:', data.data.message);\n\n \/\/ Handle session expiry\n if (data.data && data.data.code === 'SESSION_EXPIRED') {\n handleSessionExpired();\n }\n }\n })\n .catch(error => {\n console.error('Error refreshing session:', error);\n });\n }\n\n \/\/ Handle expired session\n function handleSessionExpired() {\n console.warn('\ud83d\udd12 Session expired, logging out user');\n\n \/\/ Clear local session\n clearSession();\n currentCustomer = null;\n\n \/\/ Show login screen\n document.getElementById('customerDashboard').style.display = 'none';\n document.getElementById('rewardsSection').style.display = 'none';\n document.getElementById('activitySection').style.display = 'none';\n document.getElementById('profileSection').style.display = 'none';\n document.getElementById('bookingsSection').style.display = 'none';\n document.getElementById('loginSection').style.display = 'block';\n\n \/\/ Reset form\n document.getElementById('phoneInput').value = '';\n document.getElementById('codeInput').value = '';\n showPhoneStep();\n\n \/\/ Show user-friendly message\n alert('Your session has expired for security reasons. Please login again.');\n }\n\n \/\/ Periodically refresh session (every 10 minutes)\n setInterval(function() {\n if (currentCustomer && currentCustomer.phone) {\n console.log('\ud83d\udd04 Periodic session refresh...');\n refreshSession();\n }\n }, 10 * 60 * 1000); \/\/ 10 minutes\n\n function logout() {\n if (confirm('Are you sure you want to logout?')) {\n clearSession();\n currentCustomer = null;\n\n \/\/ Reset UI\n document.getElementById('customerDashboard').style.display = 'none';\n document.getElementById('rewardsSection').style.display = 'none';\n document.getElementById('activitySection').style.display = 'none';\n document.getElementById('profileSection').style.display = 'none';\n document.getElementById('loginSection').style.display = 'block';\n\n \/\/ Reset form\n document.getElementById('phoneInput').value = '';\n document.getElementById('codeInput').value = '';\n showPhoneStep();\n clearMessages();\n }\n }\n \n function hideAllSections() {\n \/\/ Hide all sections\n document.getElementById('loginSection').style.display = 'none';\n document.getElementById('rewardsSection').style.display = 'none';\n document.getElementById('activitySection').style.display = 'none';\n document.getElementById('redeemedSection').style.display = 'none';\n document.getElementById('profileSection').style.display = 'none';\n document.getElementById('bookingsSection').style.display = 'none';\n document.getElementById('createBookingSection').style.display = 'none';\n }\n\n function showDashboard() {\n hideAllSections();\n\n \/\/ Show dashboard\n document.getElementById('customerDashboard').style.display = 'block';\n\n \/\/ Update tier progress card when showing dashboard\n updateTierProgressCard();\n\n \/\/ Add smooth transition\n setTimeout(() => {\n document.getElementById('customerDashboard').style.opacity = '1';\n document.getElementById('customerDashboard').style.transform = 'translateY(0)';\n }, 100);\n }\n\n function showRewards() {\n document.getElementById('customerDashboard').style.display = 'none';\n document.getElementById('rewardsSection').style.display = 'block';\n\n \/\/ Update points balance in rewards section\n document.getElementById('rewardsPointsBalance').textContent =\n document.getElementById('pointsBalance').textContent;\n\n \/\/ Initialize branch selector\n initializeBranchSelector();\n\n \/\/ Load rewards\n loadRewards();\n\n \/\/ Trigger animation\n setTimeout(() => {\n document.getElementById('rewardsSection').style.opacity = '1';\n document.getElementById('rewardsSection').style.transform = 'translateY(0)';\n }, 50);\n }\n\n \/\/ Coupon Code Functions\n let validatedCoupon = null;\n\n function validateCouponCode() {\n const couponCode = document.getElementById('couponCodeInput').value.trim().toUpperCase();\n const validateBtn = document.getElementById('validateCouponBtn');\n const resultDiv = document.getElementById('couponValidationResult');\n const redeemBtn = document.getElementById('redeemCouponBtn');\n\n if (!couponCode) {\n showCouponResult('Please enter a coupon code', 'error');\n return;\n }\n\n \/\/ Show loading state\n validateBtn.textContent = 'Validating...';\n validateBtn.disabled = true;\n resultDiv.style.display = 'none';\n redeemBtn.style.display = 'none';\n validatedCoupon = null;\n\n \/\/ Make AJAX request to validate coupon\n makeAjaxRequest('https:\/\/reserve.samuraiyakiniku.com\/wp-admin\/admin-ajax.php', {\n action: 'rls_validate_coupon',\n coupon_code: couponCode,\n customer_id: currentCustomer.id\n })\n .then(data => {\n validateBtn.textContent = 'Validate';\n validateBtn.disabled = false;\n\n if (data.success) {\n validatedCoupon = {\n code: couponCode,\n reward: data.data.reward\n };\n showCouponResult(\n `Valid! You can claim: ${data.data.reward.title}`,\n 'success'\n );\n redeemBtn.style.display = 'block';\n } else {\n showCouponResult(`${data.data.message}`, 'error');\n }\n })\n .catch(error => {\n console.error('Coupon validation error:', error);\n validateBtn.textContent = 'Validate';\n validateBtn.disabled = false;\n showCouponResult('Error validating coupon code', 'error');\n });\n }\n\n function redeemCouponCode() {\n if (!validatedCoupon) {\n showCouponResult('Please validate the coupon code first', 'error');\n return;\n }\n\n const redeemBtn = document.getElementById('redeemCouponBtn');\n\n \/\/ Show loading state\n redeemBtn.textContent = 'Claiming...';\n redeemBtn.disabled = true;\n\n \/\/ Make AJAX request to redeem coupon\n makeAjaxRequest('https:\/\/reserve.samuraiyakiniku.com\/wp-admin\/admin-ajax.php', {\n action: 'rls_redeem_coupon',\n coupon_code: validatedCoupon.code,\n customer_id: currentCustomer.id\n })\n .then(data => {\n console.log('Coupon redemption response:', data); \/\/ Debug log\n\n redeemBtn.textContent = 'Claim Reward';\n redeemBtn.disabled = false;\n\n if (data.success) {\n console.log('Success path - showing alert'); \/\/ Debug log\n\n \/\/ Use native alert for now - can be replaced with custom modal later\n alert(`Coupon Redeemed Successfully!\\n\\nYou've claimed: ${data.data.reward.title}\\nRedemption Code: ${data.data.redemption_code}\\n\\nShow this code to redeem your reward!`);\n\n \/\/ Clear the form\n document.getElementById('couponCodeInput').value = '';\n document.getElementById('couponValidationResult').style.display = 'none';\n redeemBtn.style.display = 'none';\n validatedCoupon = null;\n\n \/\/ Refresh customer data to update points\/rewards\n refreshCustomerData();\n } else {\n console.log('Error path - showing error'); \/\/ Debug log\n showCouponResult(`${data.data ? data.data.message : data.message}`, 'error');\n }\n })\n .catch(error => {\n console.error('Coupon redemption error:', error);\n redeemBtn.textContent = 'Claim Reward';\n redeemBtn.disabled = false;\n showCouponResult('Error redeeming coupon code', 'error');\n });\n }\n\n function showCouponResult(message, type) {\n const resultDiv = document.getElementById('couponValidationResult');\n resultDiv.textContent = message;\n resultDiv.style.display = 'block';\n\n if (type === 'success') {\n resultDiv.style.background = 'rgba(40, 167, 69, 0.2)';\n resultDiv.style.border = '1px solid rgba(40, 167, 69, 0.3)';\n resultDiv.style.color = '#ffffff';\n } else {\n resultDiv.style.background = 'rgba(220, 53, 69, 0.2)';\n resultDiv.style.border = '1px solid rgba(220, 53, 69, 0.3)';\n resultDiv.style.color = '#ffffff';\n }\n }\n\n \/\/ Add enter key support for coupon input\n document.addEventListener('DOMContentLoaded', function() {\n const couponInput = document.getElementById('couponCodeInput');\n if (couponInput) {\n couponInput.addEventListener('keypress', function(e) {\n if (e.key === 'Enter') {\n validateCouponCode();\n }\n });\n\n \/\/ Auto-uppercase input\n couponInput.addEventListener('input', function(e) {\n e.target.value = e.target.value.toUpperCase();\n });\n }\n });\n\n function showHistory() {\n document.getElementById('customerDashboard').style.display = 'none';\n document.getElementById('activitySection').style.display = 'block';\n\n \/\/ Load activity\n loadActivity();\n\n \/\/ Trigger animation\n setTimeout(() => {\n document.getElementById('activitySection').style.opacity = '1';\n document.getElementById('activitySection').style.transform = 'translateY(0)';\n }, 50);\n }\n\n function showLocations() {\n \/\/ For now, show a simple alert - can be expanded later\n alert('Locations feature coming soon!\\n\\nWe\\'re working on adding restaurant location finder.');\n }\n\n function showRedeemed() {\n document.getElementById('customerDashboard').style.display = 'none';\n document.getElementById('redeemedSection').style.display = 'block';\n\n \/\/ Initialize branch selector for redeemed rewards\n initializeRedeemedBranchSelector();\n\n \/\/ Load redeemed rewards\n loadRedeemedRewards();\n\n \/\/ Trigger animation\n setTimeout(() => {\n document.getElementById('redeemedSection').style.opacity = '1';\n document.getElementById('redeemedSection').style.transform = 'translateY(0)';\n }, 50);\n }\n\n function showProfile() {\n document.getElementById('customerDashboard').style.display = 'none';\n document.getElementById('profileSection').style.display = 'block';\n\n \/\/ Load profile\n loadProfile();\n\n \/\/ Trigger animation\n setTimeout(() => {\n document.getElementById('profileSection').style.opacity = '1';\n document.getElementById('profileSection').style.transform = 'translateY(0)';\n }, 50);\n }\n\n \/\/ Show\/hide install button based on app installation status\n function updateInstallButtonVisibility() {\n const installButton = document.getElementById('installButton');\n if (installButton) {\n if (isAppInstalled()) {\n installButton.style.display = 'none';\n } else {\n installButton.style.display = 'block';\n }\n }\n }\n\n\n\n function getBranchContext() {\n \/\/ Try to get branch ID from URL parameter first\n const urlParams = new URLSearchParams(window.location.search);\n const branchFromUrl = urlParams.get('branch_id');\n if (branchFromUrl) {\n \/\/ Store in localStorage for future use\n localStorage.setItem('loyalty_branch_id', branchFromUrl);\n return parseInt(branchFromUrl);\n }\n\n \/\/ Fall back to localStorage\n const branchFromStorage = localStorage.getItem('loyalty_branch_id');\n if (branchFromStorage) {\n return parseInt(branchFromStorage);\n }\n\n \/\/ No branch context available\n return null;\n }\n\n function setBranchContext(branchId, skipReload = false, skipSelectorUpdate = false) {\n if (branchId) {\n localStorage.setItem('loyalty_branch_id', branchId);\n } else {\n localStorage.removeItem('loyalty_branch_id');\n }\n\n \/\/ Update both branch selectors if they exist (unless skipped to prevent event loops)\n if (!skipSelectorUpdate) {\n const branchSelector = document.getElementById('branchSelector');\n if (branchSelector) {\n branchSelector.value = branchId || '';\n }\n\n const redeemedBranchSelector = document.getElementById('redeemedBranchSelector');\n if (redeemedBranchSelector) {\n redeemedBranchSelector.value = branchId || '';\n }\n }\n\n \/\/ Reload rewards to reflect branch-specific availability (unless skipped)\n if (currentCustomer && !skipReload) {\n \/\/ Only reload regular rewards if we're on the rewards section\n const rewardsSection = document.getElementById('rewardsSection');\n if (rewardsSection && rewardsSection.style.display !== 'none') {\n loadRewards();\n }\n }\n }\n\n function populateBranchSelector(branches, integrationStatus = 'fallback') {\n const branchSelector = document.getElementById('branchSelector');\n const statusElement = document.getElementById('branchSelectorStatus');\n\n if (!branchSelector || !statusElement) return;\n\n \/\/ Clear existing options except \"All Branches\"\n branchSelector.innerHTML = '<option value=\"\">All Branches<\/option>';\n\n \/\/ Add branch options\n Object.entries(branches).forEach(([branchId, branchName]) => {\n const option = document.createElement('option');\n option.value = branchId;\n option.textContent = branchName;\n branchSelector.appendChild(option);\n });\n\n \/\/ Update status\n const statusMessages = {\n 'hq_connected': 'Connected to HQ Dashboard',\n 'fallback': 'Using local branch data',\n 'error': 'Branch data unavailable'\n };\n\n const statusClasses = {\n 'hq_connected': 'status-connected',\n 'fallback': 'status-fallback',\n 'error': 'status-error'\n };\n\n statusElement.textContent = statusMessages[integrationStatus] || statusMessages.fallback;\n statusElement.className = statusClasses[integrationStatus] || statusClasses.fallback;\n\n \/\/ Set current branch selection\n const currentBranchId = getBranchContext();\n if (currentBranchId) {\n branchSelector.value = currentBranchId;\n }\n\n console.log('Branch selector populated:', Object.keys(branches).length, 'branches');\n }\n\n function initializeBranchSelector() {\n \/\/ Get branch data - try HQ dashboard first, then fallback\n let branches = {};\n let integrationStatus = 'fallback';\n\n \/\/ Try to get branches from a rewards API call (which includes branch info)\n makeAjaxRequest('https:\/\/reserve.samuraiyakiniku.com\/wp-admin\/admin-ajax.php', {\n action: 'rls_api_rewards',\n customer_id: currentCustomer?.id || 1,\n include_branch_info: '1'\n })\n .then(data => {\n if (data.success && data.data.length > 0) {\n \/\/ Extract branch names from first reward (they all have the same branch info)\n const firstReward = data.data[0];\n if (firstReward.branch_names) {\n branches = firstReward.branch_names;\n integrationStatus = 'hq_connected';\n }\n }\n\n \/\/ Fallback to default branches if no branch info found\n if (Object.keys(branches).length === 0) {\n branches = {\n 1: 'Main Branch',\n 2: 'Downtown Branch',\n 3: 'Mall Branch'\n };\n integrationStatus = 'fallback';\n }\n\n populateBranchSelector(branches, integrationStatus);\n })\n .catch(error => {\n console.error('Error loading branch data:', error);\n \/\/ Use default branches on error\n branches = {\n 1: 'Main Branch',\n 2: 'Downtown Branch',\n 3: 'Mall Branch'\n };\n populateBranchSelector(branches, 'error');\n });\n }\n\n function initializeRedeemedBranchSelector() {\n \/\/ Use the same branch data as the regular rewards selector\n \/\/ This avoids duplicate API calls and ensures consistency\n let branches = {};\n let integrationStatus = 'fallback';\n\n \/\/ Try to get branches from a rewards API call (just for branch info, not the actual rewards)\n makeAjaxRequest('https:\/\/reserve.samuraiyakiniku.com\/wp-admin\/admin-ajax.php', {\n action: 'rls_api_rewards',\n customer_id: currentCustomer?.id || 1,\n include_branch_info: '1'\n })\n .then(data => {\n if (data.success && data.data.length > 0) {\n const firstReward = data.data[0];\n if (firstReward.branch_names) {\n branches = firstReward.branch_names;\n integrationStatus = 'hq_connected';\n }\n }\n\n if (Object.keys(branches).length === 0) {\n branches = {\n 1: 'Main Branch',\n 2: 'Downtown Branch',\n 3: 'Mall Branch'\n };\n integrationStatus = 'fallback';\n }\n\n populateRedeemedBranchSelector(branches, integrationStatus);\n })\n .catch(error => {\n console.error('Error loading branch data for redeemed section:', error);\n branches = {\n 1: 'Main Branch',\n 2: 'Downtown Branch',\n 3: 'Mall Branch'\n };\n populateRedeemedBranchSelector(branches, 'error');\n });\n }\n\n function populateRedeemedBranchSelector(branches, integrationStatus = 'fallback') {\n const branchSelector = document.getElementById('redeemedBranchSelector');\n const statusElement = document.getElementById('redeemedBranchSelectorStatus');\n\n if (!branchSelector || !statusElement) return;\n\n \/\/ Clear existing options except \"All Branches\"\n branchSelector.innerHTML = '<option value=\"\">All Branches<\/option>';\n\n \/\/ Add branch options\n Object.entries(branches).forEach(([branchId, branchName]) => {\n const option = document.createElement('option');\n option.value = branchId;\n option.textContent = branchName;\n branchSelector.appendChild(option);\n });\n\n \/\/ Update status\n const statusMessages = {\n 'hq_connected': 'Connected to HQ Dashboard',\n 'fallback': 'Using local branch data',\n 'error': 'Branch data unavailable'\n };\n\n const statusClasses = {\n 'hq_connected': 'status-connected',\n 'fallback': 'status-fallback',\n 'error': 'status-error'\n };\n\n statusElement.textContent = statusMessages[integrationStatus] || statusMessages.fallback;\n statusElement.className = statusClasses[integrationStatus] || statusClasses.fallback;\n\n \/\/ Set current branch selection\n const currentBranchId = getBranchContext();\n if (currentBranchId) {\n branchSelector.value = currentBranchId;\n }\n\n console.log('Redeemed branch selector populated:', Object.keys(branches).length, 'branches');\n }\n \n function loadRewards() {\n const rewardsGrid = document.getElementById('rewardsGrid');\n rewardsGrid.innerHTML = '<div class=\"loading\"><div class=\"spinner\"><\/div><p>Loading rewards...<\/p><\/div>';\n\n \/\/ Build request params\n const params = {\n action: 'rls_api_rewards',\n customer_id: currentCustomer.id,\n include_branch_info: '1'\n };\n\n \/\/ Always include branch context for availability indicators\n const branchId = getBranchContext();\n if (branchId) {\n params.branch_id = branchId;\n }\n\n makeAjaxRequest('https:\/\/reserve.samuraiyakiniku.com\/wp-admin\/admin-ajax.php', params)\n .then(data => {\n if (data.success) {\n displayRewards(data.data);\n } else {\n rewardsGrid.innerHTML = '<div class=\"error-message\">Failed to load rewards<\/div>';\n }\n })\n .catch(error => {\n rewardsGrid.innerHTML = '<div class=\"error-message\">Connection error<\/div>';\n console.error('Load rewards error:', error);\n });\n }\n\n function displayRewards(rewards) {\n const rewardsGrid = document.getElementById('rewardsGrid');\n const customerPoints = parseInt(currentCustomer.current_points);\n const customerLifetimePoints = parseInt(currentCustomer.lifetime_points || 0);\n const customerTier = currentCustomer.tier || 'bronze';\n const currentBranchId = getBranchContext();\n\n if (rewards.length === 0) {\n rewardsGrid.innerHTML = '<div style=\"text-align: center; padding: 40px; color: rgba(255,255,255,0.6);\">No rewards available yet<\/div>';\n return;\n }\n\n \/\/ Get tier thresholds (these should match your backend settings)\n const tierThresholds = {\n bronze: 0,\n silver: 2000,\n gold: 5000,\n platinum: 10000\n };\n\n \/\/ Sort rewards by tier first, then by points (lowest first), then alphabetically\n const sortedRewards = rewards.sort((a, b) => {\n const tierA = a.min_tier || 'bronze';\n const tierB = b.min_tier || 'bronze';\n\n \/\/ First sort by tier level\n const tierLevelA = getTierLevel(tierA);\n const tierLevelB = getTierLevel(tierB);\n\n if (tierLevelA !== tierLevelB) {\n return tierLevelA - tierLevelB; \/\/ Bronze(1) \u2192 Silver(2) \u2192 Gold(3) \u2192 Platinum(4)\n }\n\n \/\/ If same tier, sort by points required (lowest first)\n const pointsA = parseInt(a.points_required) || 0;\n const pointsB = parseInt(b.points_required) || 0;\n\n if (pointsA !== pointsB) {\n return pointsA - pointsB; \/\/ Lowest points first\n }\n\n \/\/ If same tier and same points, sort alphabetically by title\n return (a.title || '').localeCompare(b.title || '');\n });\n\n let html = '';\n\n \/\/ Display all rewards in single column\n sortedRewards.forEach(reward => {\n const tierUnlocked = getTierLevel(customerTier) >= getTierLevel(reward.min_tier || 'bronze');\n html += generateRewardCard(reward, customerPoints, currentBranchId, tierUnlocked, customerLifetimePoints, tierThresholds);\n });\n\n rewardsGrid.innerHTML = html;\n }\n\n function generateTierProgressSection(customerTier, lifetimePoints, tierThresholds) {\n const currentTierLevel = getTierLevel(customerTier);\n const nextTier = getNextTier(customerTier);\n\n if (!nextTier) {\n \/\/ Already at highest tier\n return `\n <div class=\"tier-progress-section\">\n <div class=\"tier-progress-header\">\n <h3><svg width=\"18\" height=\"18\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" style=\"vertical-align: middle; margin-right: 6px;\"><path d=\"M6 9H4.5a2.5 2.5 0 0 1 0-5H6\"\/><path d=\"M18 9h1.5a2.5 2.5 0 0 0 0-5H18\"\/><path d=\"M4 22h16\"\/><path d=\"M10 14.66V17c0 .55-.47.98-.97 1.21C7.85 18.75 7 20.24 7 22\"\/><path d=\"M14 14.66V17c0 .55.47.98.97 1.21C16.15 18.75 17 20.24 17 22\"\/><path d=\"M18 2H6v7a6 6 0 0 0 12 0V2Z\"\/><\/svg>You've reached the highest tier!<\/h3>\n <p>Enjoy all the premium rewards as a ${customerTier.charAt(0).toUpperCase() + customerTier.slice(1)} member<\/p>\n <\/div>\n <\/div>\n `;\n }\n\n const nextTierThreshold = tierThresholds[nextTier];\n const pointsNeeded = nextTierThreshold - lifetimePoints;\n const progressPercent = Math.min((lifetimePoints \/ nextTierThreshold) * 100, 100);\n\n return `\n <div class=\"tier-progress-section\">\n <div class=\"tier-progress-header\">\n <h3><svg width=\"18\" height=\"18\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" style=\"vertical-align: middle; margin-right: 6px;\"><circle cx=\"12\" cy=\"12\" r=\"10\"\/><circle cx=\"12\" cy=\"12\" r=\"6\"\/><circle cx=\"12\" cy=\"12\" r=\"2\"\/><\/svg>Progress to ${nextTier.charAt(0).toUpperCase() + nextTier.slice(1)} Tier<\/h3>\n <p>${pointsNeeded.toLocaleString()} more lifetime points needed<\/p>\n <\/div>\n <div class=\"tier-progress-bar\">\n <div class=\"tier-progress-fill\" style=\"width: ${progressPercent}%\"><\/div>\n <div class=\"tier-progress-text\">${lifetimePoints.toLocaleString()} \/ ${nextTierThreshold.toLocaleString()}<\/div>\n <\/div>\n <\/div>\n `;\n }\n\n\n\n function generateRewardCard(reward, customerPoints, currentBranchId, tierUnlocked, customerLifetimePoints, tierThresholds) {\n const canRedeem = customerPoints >= reward.points_required && tierUnlocked;\n const pointsNeeded = Math.max(0, reward.points_required - customerPoints);\n\n \/\/ Generate branch availability indicator\n const branchIndicator = getBranchAvailabilityIndicator(reward, currentBranchId);\n const isAvailableAtCurrentBranch = reward.is_available_at_current_branch !== false;\n\n \/\/ Determine card classes\n let cardClasses = ['reward-card'];\n if (!tierUnlocked) cardClasses.push('tier-locked');\n if (!canRedeem && tierUnlocked) cardClasses.push('insufficient');\n if (!isAvailableAtCurrentBranch) cardClasses.push('branch-restricted');\n\n \/\/ Calculate tier unlock requirements if needed\n let tierUnlockMessage = '';\n if (!tierUnlocked) {\n const requiredTier = reward.min_tier || 'bronze';\n const requiredLifetimePoints = tierThresholds[requiredTier];\n const lifetimePointsNeeded = Math.max(0, requiredLifetimePoints - customerLifetimePoints);\n tierUnlockMessage = `\n <div class=\"tier-unlock-indicator\">\n <span class=\"tier-unlock-text\"><svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" style=\"vertical-align: middle; margin-right: 4px;\"><rect x=\"3\" y=\"11\" width=\"18\" height=\"11\" rx=\"2\" ry=\"2\"\/><path d=\"M7 11V7a5 5 0 0 1 10 0v4\"\/><\/svg>Unlock ${requiredTier.charAt(0).toUpperCase() + requiredTier.slice(1)} tier with ${lifetimePointsNeeded.toLocaleString()} more lifetime points<\/span>\n <\/div>\n `;\n }\n\n \/\/ Determine button state and text\n let buttonText, buttonDisabled = '';\n if (!tierUnlocked) {\n buttonText = '<svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" style=\"vertical-align: middle; margin-right: 4px;\"><rect x=\"3\" y=\"11\" width=\"18\" height=\"11\" rx=\"2\" ry=\"2\"\/><path d=\"M7 11V7a5 5 0 0 1 10 0v4\"\/><\/svg>Tier Locked';\n buttonDisabled = 'disabled';\n } else if (!isAvailableAtCurrentBranch) {\n buttonText = 'Not Available Here';\n buttonDisabled = 'disabled';\n } else if (canRedeem) {\n buttonText = 'Redeem';\n } else {\n buttonText = `${pointsNeeded.toLocaleString()} more points`;\n buttonDisabled = 'disabled';\n }\n\n return `\n <div class=\"${cardClasses.join(' ')}\">\n <div class=\"reward-header\">\n <div>\n <div class=\"reward-title\">${reward.title}<\/div>\n <div class=\"reward-type\">${getRewardTypeLabel(reward.reward_type)}<\/div>\n ${branchIndicator}\n <\/div>\n <div class=\"reward-points\">${reward.points_required.toLocaleString()} pts<\/div>\n <\/div>\n <div class=\"reward-description\">${reward.description}<\/div>\n ${tierUnlockMessage}\n ${pointsNeeded > 0 && tierUnlocked ? `\n <div class=\"points-needed-indicator\">\n <span class=\"points-needed-text\"><svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" style=\"vertical-align: middle; margin-right: 4px;\"><circle cx=\"8\" cy=\"8\" r=\"6\"\/><path d=\"M18.09 10.37A6 6 0 1 1 10.34 18\"\/><path d=\"M7 6h1v4\"\/><path d=\"m16.71 13.88.7.71-2.82 2.82\"\/><\/svg>${pointsNeeded.toLocaleString()} more points needed<\/span>\n <div class=\"points-progress-bar\">\n <div class=\"points-progress-fill\" style=\"width: ${Math.min((customerPoints \/ reward.points_required) * 100, 100)}%\"><\/div>\n <\/div>\n <\/div>\n ` : ''}\n <div class=\"reward-footer\">\n <div class=\"reward-tier-badge\">${reward.min_tier.charAt(0).toUpperCase() + reward.min_tier.slice(1)}<\/div>\n <button class=\"redeem-button\" ${buttonDisabled} onclick=\"redeemReward(${reward.id})\">\n ${buttonText}\n <\/button>\n <\/div>\n <\/div>\n `;\n }\n\n function getTierLevel(tier) {\n const levels = { bronze: 1, silver: 2, gold: 3, platinum: 4 };\n return levels[tier] || 1;\n }\n\n function getNextTier(currentTier) {\n const tiers = ['bronze', 'silver', 'gold', 'platinum'];\n const currentIndex = tiers.indexOf(currentTier);\n return currentIndex < tiers.length - 1 ? tiers[currentIndex + 1] : null;\n }\n\n function getRewardTypeLabel(type) {\n const types = {\n 'discount_percent': 'Percentage Discount',\n 'discount_amount': 'Fixed Discount',\n 'free_item': 'Free Item',\n 'voucher': 'Gift Voucher',\n 'experience': 'Special Experience'\n };\n return types[type] || type;\n }\n\n function getBranchAvailabilityIndicator(reward, currentBranchId) {\n const locationIcon = '<svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" style=\"vertical-align: middle; margin-right: 4px;\"><path d=\"M20 10c0 6-8 12-8 12s-8-6-8-12a8 8 0 0 1 16 0Z\"\/><circle cx=\"12\" cy=\"10\" r=\"3\"\/><\/svg>';\n const blockedIcon = '<svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" style=\"vertical-align: middle; margin-right: 4px;\"><circle cx=\"12\" cy=\"12\" r=\"10\"\/><path d=\"m4.93 4.93 14.14 14.14\"\/><\/svg>';\n\n \/\/ If no branch availability info, assume available everywhere\n if (!reward.available_branches || reward.available_branches.length === 0) {\n return `<div class=\"branch-indicator all-branches\">${locationIcon}Available at all branches<\/div>`;\n }\n\n const availableBranches = reward.available_branches;\n const branchNames = reward.branch_names || {};\n\n \/\/ Check if available at current branch\n const isAvailableHere = currentBranchId && availableBranches.includes(parseInt(currentBranchId));\n\n if (availableBranches.length === 1) {\n const branchId = availableBranches[0];\n const branchName = branchNames[branchId] || `Branch ${branchId}`;\n const indicator = isAvailableHere ? locationIcon : blockedIcon;\n const className = isAvailableHere ? 'current-branch' : 'other-branch';\n return `<div class=\"branch-indicator ${className}\">${indicator}Available at ${branchName}<\/div>`;\n } else if (availableBranches.length <= 3) {\n \/\/ Show specific branch names for small lists\n const branchList = availableBranches.map(id => branchNames[id] || `Branch ${id}`).join(', ');\n const indicator = isAvailableHere ? locationIcon : blockedIcon;\n const className = isAvailableHere ? 'current-branch' : 'other-branch';\n return `<div class=\"branch-indicator ${className}\">${indicator}Available at: ${branchList}<\/div>`;\n } else {\n \/\/ Show count for larger lists\n const indicator = isAvailableHere ? locationIcon : blockedIcon;\n const className = isAvailableHere ? 'current-branch' : 'other-branch';\n const statusText = isAvailableHere ? 'Available here' : 'Not available here';\n return `<div class=\"branch-indicator ${className}\">${indicator}${statusText} (${availableBranches.length} branches)<\/div>`;\n }\n }\n\n function redeemReward(rewardId) {\n \/\/ Show confirmation dialog instead of alert\n showConfirmationDialog(\n 'Redeem Reward',\n 'Are you sure you want to redeem this reward? Points will be deducted from your account.',\n () => {\n \/\/ User confirmed, proceed with redemption\n processRedemption(rewardId);\n }\n );\n }\n\n function processRedemption(rewardId) {\n \/\/ Build request params\n const params = {\n action: 'rls_api_redeem_reward',\n customer_id: currentCustomer.id,\n reward_id: rewardId\n };\n\n \/\/ Include branch context if available\n const branchId = getBranchContext();\n if (branchId) {\n params.branch_id = branchId;\n }\n\n makeAjaxRequest('https:\/\/reserve.samuraiyakiniku.com\/wp-admin\/admin-ajax.php', params)\n .then(data => {\n if (data.success) {\n \/\/ Update customer data with fresh info\n if (data.data.customer) {\n currentCustomer = data.data.customer;\n updateCustomerInfo();\n }\n\n \/\/ Show success confirmation dialog\n showRedemptionSuccess(data.data.redemption_code, data.data.message);\n\n \/\/ Refresh rewards list\n loadRewards();\n } else {\n showErrorDialog('Redemption Failed', data.data.message);\n }\n })\n .catch(error => {\n alert('Connection error. Please try again.');\n console.error('Redeem reward error:', error);\n });\n }\n\n function loadActivity() {\n const activityList = document.getElementById('activityList');\n activityList.innerHTML = '<div class=\"loading\"><div class=\"spinner\"><\/div><p>Loading activity...<\/p><\/div>';\n\n if (!currentCustomer) {\n activityList.innerHTML = '<div class=\"empty-state\"><p>Please log in to view your activity<\/p><\/div>';\n return;\n }\n\n \/\/ Load real activity data using centralized AJAX handler\n makeAjaxRequest('https:\/\/reserve.samuraiyakiniku.com\/wp-admin\/admin-ajax.php', {\n action: 'get_customer_activity',\n customer_id: currentCustomer.id\n })\n .then(data => {\n if (data.success && data.data.length > 0) {\n let html = '';\n data.data.forEach(activity => {\n const pointsClass = activity.points > 0 ? 'positive' : 'negative';\n const pointsText = activity.points > 0 ? `+${activity.points}` : activity.points;\n const activityDate = formatActivityDate(activity.created_at);\n const salesInfo = activity.sales_amount > 0 ?\n `<div class=\"activity-sales\">Sales: RM ${parseFloat(activity.sales_amount).toFixed(2)}<\/div>` : '';\n\n \/\/ Default coin icon for activities\n const defaultActivityIcon = '<svg width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><circle cx=\"8\" cy=\"8\" r=\"6\"\/><path d=\"M18.09 10.37A6 6 0 1 1 10.34 18\"\/><path d=\"M7 6h1v4\"\/><path d=\"m16.71 13.88.7.71-2.82 2.82\"\/><\/svg>';\n const activityIcon = activity.activity_icon && !activity.activity_icon.match(\/[\\u{1F300}-\\u{1F9FF}]\/u) ? activity.activity_icon : defaultActivityIcon;\n\n html += `\n <div class=\"activity-item\">\n <div class=\"activity-header\">\n <div class=\"activity-left\">\n <div class=\"activity-icon\">${activityIcon}<\/div>\n <div class=\"activity-content\">\n <div class=\"activity-title\">${activity.description}<\/div>\n <div class=\"activity-date\">${activityDate}<\/div>\n ${salesInfo}\n <\/div>\n <\/div>\n <div class=\"activity-points ${pointsClass}\">${pointsText}<\/div>\n <\/div>\n <\/div>\n `;\n });\n activityList.innerHTML = html;\n } else {\n activityList.innerHTML = '<div class=\"empty-state\"><p>No activity yet. Start earning points!<\/p><\/div>';\n }\n })\n .catch(error => {\n console.error('Error loading activity:', error);\n activityList.innerHTML = '<div class=\"error-state\"><p>Failed to load activity. Please try again.<\/p><\/div>';\n });\n }\n\n function formatActivityDate(dateString) {\n const date = new Date(dateString);\n const now = new Date();\n const diffTime = Math.abs(now - date);\n const diffDays = Math.ceil(diffTime \/ (1000 * 60 * 60 * 24));\n\n if (diffDays === 1) {\n return 'Today, ' + date.toLocaleTimeString([], {hour: '2-digit', minute:'2-digit'});\n } else if (diffDays === 2) {\n return 'Yesterday, ' + date.toLocaleTimeString([], {hour: '2-digit', minute:'2-digit'});\n } else if (diffDays <= 7) {\n return diffDays + ' days ago';\n } else {\n return date.toLocaleDateString();\n }\n }\n\n function loadProfile() {\n const profileContent = document.getElementById('profileContent');\n\n const html = `\n <div style=\"background: #ffffff; border: 1px solid rgba(0,0,0,0.08); border-radius: 16px; padding: 24px; margin-bottom: 20px; box-shadow: 0 2px 8px rgba(0,0,0,0.1);\">\n <h3 style=\"color: #1d1d1f; margin-bottom: 16px; font-size: 20px; font-weight: 600;\">Personal Information<\/h3>\n <div style=\"margin-bottom: 16px;\">\n <strong style=\"color: #1d1d1f; font-size: 16px; font-weight: 600; display: block; margin-bottom: 8px;\">Name:<\/strong>\n <div style=\"display: flex; justify-content: space-between; align-items: center;\">\n <span style=\"color: #86868b; font-size: 16px;\">${currentCustomer.first_name} ${currentCustomer.last_name}<\/span>\n <button onclick=\"showNameEditor()\" style=\"background: linear-gradient(135deg, #DC143C, #B22222); color: white; border: none; padding: 8px 16px; border-radius: 8px; font-size: 14px; font-weight: 600; cursor: pointer; transition: all 0.3s ease;\">\n Edit\n <\/button>\n <\/div>\n <\/div>\n <div style=\"margin-bottom: 16px;\">\n <strong style=\"color: #1d1d1f; font-size: 16px; font-weight: 600; display: block; margin-bottom: 4px;\">Phone:<\/strong>\n <span style=\"color: #86868b; font-size: 16px;\">${currentCustomer.phone}<\/span>\n <\/div>\n <div style=\"margin-bottom: 16px;\">\n <strong style=\"color: #1d1d1f; font-size: 16px; font-weight: 600; display: block; margin-bottom: 8px;\">Email:<\/strong>\n <div style=\"display: flex; justify-content: space-between; align-items: center;\">\n <span style=\"color: #86868b; font-size: 16px;\">${currentCustomer.email || 'Not provided'}<\/span>\n <button onclick=\"showEmailEditor()\" style=\"background: linear-gradient(135deg, #DC143C, #B22222); color: white; border: none; padding: 8px 16px; border-radius: 8px; font-size: 14px; font-weight: 600; cursor: pointer; transition: all 0.3s ease;\">\n ${currentCustomer.email ? 'Edit' : 'Add Email'}\n <\/button>\n <\/div>\n <\/div>\n <div style=\"margin-bottom: 16px;\">\n <strong style=\"color: #1d1d1f; font-size: 16px; font-weight: 600; display: block; margin-bottom: 8px;\">Birthday:<\/strong>\n <div style=\"display: flex; justify-content: space-between; align-items: center;\">\n <span style=\"color: #86868b; font-size: 16px;\" id=\"birthdayDisplay\">\n ${currentCustomer.date_of_birth ? formatBirthday(currentCustomer.date_of_birth) : 'Not set'}\n <\/span>\n <button onclick=\"showBirthdayEditor()\" style=\"background: linear-gradient(135deg, #DC143C, #B22222); color: white; border: none; padding: 8px 16px; border-radius: 8px; font-size: 14px; font-weight: 600; cursor: pointer; transition: all 0.3s ease;\">\n ${currentCustomer.date_of_birth ? 'Edit' : 'Set Birthday'}\n <\/button>\n <\/div>\n <\/div>\n <div style=\"margin-bottom: 0;\">\n <strong style=\"color: #1d1d1f; font-size: 16px; font-weight: 600; display: block; margin-bottom: 4px;\">Member Since:<\/strong>\n <span style=\"color: #86868b; font-size: 16px;\">${new Date(currentCustomer.created_at).toLocaleDateString()}<\/span>\n <\/div>\n <\/div>\n\n <div style=\"background: #ffffff; border: 1px solid rgba(0,0,0,0.08); border-radius: 16px; padding: 24px; box-shadow: 0 2px 8px rgba(0,0,0,0.1);\">\n <h3 style=\"color: #1d1d1f; margin-bottom: 16px; font-size: 20px; font-weight: 600;\">Loyalty Status<\/h3>\n <div style=\"margin-bottom: 16px;\">\n <strong style=\"color: #1d1d1f; font-size: 16px; font-weight: 600; display: block; margin-bottom: 8px;\">Current Tier:<\/strong>\n <span class=\"tier-badge tier-${currentCustomer.tier}\">${currentCustomer.tier.charAt(0).toUpperCase() + currentCustomer.tier.slice(1)}<\/span>\n <\/div>\n <div style=\"margin-bottom: 16px;\">\n <strong style=\"color: #1d1d1f; font-size: 16px; font-weight: 600; display: block; margin-bottom: 4px;\">Total Points:<\/strong>\n <span style=\"color: #86868b; font-size: 16px;\">${currentCustomer.current_points}<\/span>\n <\/div>\n <div style=\"margin-bottom: 0;\">\n <strong style=\"color: #1d1d1f; font-size: 16px; font-weight: 600; display: block; margin-bottom: 4px;\">Lifetime Points:<\/strong>\n <span style=\"color: #86868b; font-size: 16px;\">${currentCustomer.lifetime_points}<\/span>\n <\/div>\n <\/div>\n\n <div style=\"background: #ffffff; border: 1px solid rgba(0,0,0,0.08); border-radius: 16px; padding: 24px; margin-top: 20px; box-shadow: 0 2px 8px rgba(0,0,0,0.1);\">\n <h3 style=\"color: #1d1d1f; margin-bottom: 16px; font-size: 20px; font-weight: 600;\">Account Security<\/h3>\n <div style=\"margin-bottom: 16px;\">\n <strong style=\"color: #1d1d1f; font-size: 16px; font-weight: 600; display: block; margin-bottom: 8px;\">Phone Number:<\/strong>\n <div style=\"display: flex; justify-content: space-between; align-items: center;\">\n <span style=\"color: #86868b; font-size: 16px;\">${currentCustomer.phone}<\/span>\n <button onclick=\"initiatePhoneChange()\" style=\"background: linear-gradient(135deg, #DC143C, #B22222); color: white; border: none; padding: 8px 16px; border-radius: 8px; font-size: 14px; font-weight: 600; cursor: pointer; transition: all 0.3s ease;\">\n Change Phone\n <\/button>\n <\/div>\n <\/div>\n <div style=\"font-size: 13px; color: #86868b; line-height: 1.4;\">\n \ud83d\udd10 Changing your phone number requires verification of both your current and new phone numbers for security.\n <\/div>\n <\/div>\n\n ${isInBrowser() ? `\n <div style=\"background: #ffffff; border: 1px solid rgba(0,0,0,0.08); border-radius: 16px; padding: 24px; margin-top: 20px; box-shadow: 0 2px 8px rgba(0,0,0,0.1);\">\n <h3 style=\"color: #1d1d1f; margin-bottom: 16px; font-size: 20px; font-weight: 600; display: flex; align-items: center; gap: 8px;\"><svg width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><rect x=\"5\" y=\"2\" width=\"14\" height=\"20\" rx=\"2\" ry=\"2\"\/><line x1=\"12\" y1=\"18\" x2=\"12.01\" y2=\"18\"\/><\/svg>Install App<\/h3>\n <div style=\"margin-bottom: 16px;\">\n <p style=\"color: #86868b; font-size: 16px; line-height: 1.5; margin: 0 0 16px 0;\">\n Install the Samurai Yakiniku app on your home screen for:\n <\/p>\n <ul style=\"color: #86868b; font-size: 16px; line-height: 1.8; margin: 0 0 16px 0; padding-left: 0; list-style: none;\">\n <li style=\"display: flex; align-items: center; gap: 8px;\"><svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"#e00b41\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><polygon points=\"13 2 3 14 12 14 11 22 21 10 12 10 13 2\"\/><\/svg>Faster access<\/li>\n <li style=\"display: flex; align-items: center; gap: 8px;\"><svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"#e00b41\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M6 8a6 6 0 0 1 12 0c0 7 3 9 3 9H3s3-2 3-9\"\/><path d=\"M10.3 21a1.94 1.94 0 0 0 3.4 0\"\/><\/svg>Push notifications for rewards<\/li>\n <li style=\"display: flex; align-items: center; gap: 8px;\"><svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"#e00b41\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><rect x=\"5\" y=\"2\" width=\"14\" height=\"20\" rx=\"2\" ry=\"2\"\/><line x1=\"12\" y1=\"18\" x2=\"12.01\" y2=\"18\"\/><\/svg>Native app experience<\/li>\n <li style=\"display: flex; align-items: center; gap: 8px;\"><svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"#e00b41\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"m12 3-1.912 5.813a2 2 0 0 1-1.275 1.275L3 12l5.813 1.912a2 2 0 0 1 1.275 1.275L12 21l1.912-5.813a2 2 0 0 1 1.275-1.275L21 12l-5.813-1.912a2 2 0 0 1-1.275-1.275L12 3Z\"\/><path d=\"M5 3v4\"\/><path d=\"M19 17v4\"\/><path d=\"M3 5h4\"\/><path d=\"M17 19h4\"\/><\/svg>Works offline<\/li>\n <\/ul>\n <\/div>\n <button onclick=\"showInstallPrompt()\" style=\"\n background: linear-gradient(135deg, #e00b41, #ff385c);\n color: white;\n border: none;\n padding: 14px 24px;\n border-radius: 8px;\n font-size: 16px;\n font-weight: 600;\n cursor: pointer;\n transition: all 0.3s ease;\n width: 100%;\n display: flex;\n align-items: center;\n justify-content: center;\n gap: 8px;\n \">\n <svg width=\"18\" height=\"18\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4\"\/><polyline points=\"7 10 12 15 17 10\"\/><line x1=\"12\" y1=\"15\" x2=\"12\" y2=\"3\"\/><\/svg>\n Install App\n <\/button>\n <\/div>\n ` : ''}\n `;\n\n profileContent.innerHTML = html;\n }\n\n function showLoading(show) {\n document.getElementById('loadingIndicator').style.display = show ? 'block' : 'none';\n\n \/\/ Disable appropriate buttons based on current step\n const sendCodeBtn = document.getElementById('sendCodeBtn');\n const verifyBtn = document.getElementById('verifyBtn');\n const resendBtn = document.getElementById('resendBtn');\n\n if (sendCodeBtn) sendCodeBtn.disabled = show;\n if (verifyBtn) verifyBtn.disabled = show;\n if (resendBtn && !show) {\n \/\/ Don't enable resend button if countdown is active\n if (resendCountdown <= 0) {\n resendBtn.disabled = false;\n }\n } else if (resendBtn) {\n resendBtn.disabled = show;\n }\n }\n \n function showPhoneMessage(message, type) {\n const messageDiv = document.getElementById('phoneMessage');\n messageDiv.innerHTML = '<div class=\"' + type + '-message\">' + message + '<\/div>';\n\n setTimeout(() => {\n messageDiv.innerHTML = '';\n }, 5000);\n }\n\n function showVerificationMessage(message, type) {\n const messageDiv = document.getElementById('verificationMessage');\n messageDiv.innerHTML = '<div class=\"' + type + '-message\">' + message + '<\/div>';\n\n setTimeout(() => {\n messageDiv.innerHTML = '';\n }, 5000);\n }\n\n function clearMessages() {\n document.getElementById('phoneMessage').innerHTML = '';\n document.getElementById('verificationMessage').innerHTML = '';\n }\n \n \/\/ PWA Installation\n let deferredPrompt;\n let installPromptShown = false;\n\n window.addEventListener('beforeinstallprompt', (e) => {\n e.preventDefault();\n deferredPrompt = e;\n\n console.log('PWA install prompt available');\n\n \/\/ Show install prompt after a delay if not already shown and in browser\n if (!installPromptShown && isInBrowser()) {\n setTimeout(() => checkAndShowInstallPrompt(), 5000);\n }\n });\n\n \/\/ Check if app is currently running in installed mode (not just installed)\n function isAppInstalled() {\n \/\/ Only return true if currently running in standalone mode\n return window.navigator.standalone ||\n window.matchMedia('(display-mode: standalone)').matches;\n }\n\n \/\/ Check if we're currently in browser (even if app is installed)\n function isInBrowser() {\n return !window.navigator.standalone &&\n !window.matchMedia('(display-mode: standalone)').matches;\n }\n\n \/\/ Detect iOS\n function isIOS() {\n return \/iPad|iPhone|iPod\/.test(navigator.userAgent) && !window.MSStream;\n }\n\n \/\/ Detect Android\n function isAndroid() {\n return \/Android\/.test(navigator.userAgent);\n }\n \n \/\/ Service Worker Registration and Firebase Push Notifications\n if ('serviceWorker' in navigator) {\n window.addEventListener('load', async () => {\n try {\n \/\/ Register the main PWA service worker with cache-busting\n const swUrl = 'https:\/\/reserve.samuraiyakiniku.com\/wp-content\/plugins\/restaurant-loyalty-system\/pwa\/sw.js?v=' + Date.now();\n const registration = await navigator.serviceWorker.register(swUrl);\n console.log('PWA SW registered with cache-busting: ', registration);\n\n \/\/ Listen for debug messages from service worker\n navigator.serviceWorker.addEventListener('message', (event) => {\n if (event.data && event.data.type === 'DEBUG_NOTIFICATION_SHOWN') {\n showDebugMessage(event.data.message);\n } else if (event.data && event.data.type === 'DEBUG_FIREBASE_SW_TRIGGERED') {\n showDebugMessage(event.data.message);\n }\n });\n\n \/\/ Initialize Firebase push notifications (no separate Firebase SW needed)\n await initializeFirebasePushNotifications();\n } catch (error) {\n console.error('Service worker registration failed: ', error);\n }\n });\n }\n\n \/\/ Firebase Push Notification Functions\n let firebaseApp = null;\n let messaging = null;\n let currentFirebaseToken = null;\n let pushNotificationSupported = false;\n\n async function initializeFirebasePushNotifications() {\n try {\n console.log('\ud83d\udd27 Initializing Firebase push notifications...');\n\n \/\/ Check if Firebase messaging is supported\n if (!('serviceWorker' in navigator) || !('PushManager' in window)) {\n console.log('Push notifications not supported');\n return;\n }\n\n \/\/ Import Firebase modules dynamically (like your working example)\n const { initializeApp, getApps, deleteApp } = await import('https:\/\/www.gstatic.com\/firebasejs\/10.7.0\/firebase-app.js');\n const { getMessaging, getToken, onMessage } = await import('https:\/\/www.gstatic.com\/firebasejs\/10.7.0\/firebase-messaging.js');\n\n \/\/ Firebase configuration\n \/\/ NOTE: These are PUBLIC client-side keys meant to be exposed in web applications.\n \/\/ Security is enforced through Firebase Security Rules on the server side.\n \/\/ This is the standard Firebase web implementation pattern.\n \/\/ See: https:\/\/firebase.google.com\/docs\/projects\/api-keys\n const firebaseConfig = {\n apiKey: \"AIzaSyDQYAmhlfvf8rdopX0SVCjoGzvdwzK4iDM\",\n authDomain: \"samurai-yakiniku-loyalty.firebaseapp.com\",\n projectId: \"samurai-yakiniku-loyalty\",\n storageBucket: \"samurai-yakiniku-loyalty.firebasestorage.app\",\n messagingSenderId: \"676276901034\",\n appId: \"1:676276901034:web:dd88e0062351a74e4fecd3\",\n measurementId: \"G-LXPVHRPB5N\"\n };\n\n console.log('\u2705 Using correct Firebase config:');\n console.log('- Project ID:', firebaseConfig.projectId);\n console.log('- Sender ID:', firebaseConfig.messagingSenderId);\n\n \/\/ Clear existing Firebase apps (like your working example)\n const existingApps = getApps();\n for (const app of existingApps) {\n await deleteApp(app);\n }\n console.log('\ud83e\uddf9 Cleared existing Firebase apps');\n\n \/\/ Initialize Firebase with correct config\n firebaseApp = initializeApp(firebaseConfig);\n messaging = getMessaging(firebaseApp);\n\n pushNotificationSupported = true;\n console.log('\u2705 Firebase initialized successfully');\n\n \/\/ Check for existing token\n await checkExistingFirebaseToken();\n\n \/\/ Handle foreground messages - DISABLED to prevent duplicate notifications\n \/\/ The service worker handles all notifications (background and foreground)\n onMessage(messaging, (payload) => {\n console.log('\ud83d\udce8 Foreground message received (delegating to service worker):', payload);\n \/\/ Don't show notification here - let service worker handle it\n \/\/ This prevents duplicate notifications when app is open\n });\n\n } catch (error) {\n console.error('\u274c Firebase initialization failed:', error);\n console.error('Error details:', error);\n pushNotificationSupported = false;\n }\n }\n\n async function checkExistingFirebaseToken() {\n try {\n \/\/ Check if we already have a token (like your working example)\n const { getToken } = await import('https:\/\/www.gstatic.com\/firebasejs\/10.7.0\/firebase-messaging.js');\n\n \/\/ Get service worker registration (like your working example)\n const registration = await navigator.serviceWorker.getRegistration('https:\/\/reserve.samuraiyakiniku.com\/wp-content\/plugins\/restaurant-loyalty-system\/pwa\/');\n if (!registration) {\n console.log('No service worker registration found');\n setTimeout(() => showPushNotificationPrompt(), 3000);\n return;\n }\n\n \/\/ VAPID public key for push notifications\n \/\/ NOTE: This is a PUBLIC key meant to be exposed in client-side code.\n \/\/ It's used to identify your server when requesting push notification permissions.\n \/\/ The private key is kept secure on the server side.\n const vapidKey = 'BE_3aULuQ_lLlDkBdT-8zinBn_loI47mEJaIBaTD80M0EPNfjw-fHIeCiAG6y-uxi37N5_mu3zSGvnFKoU2uYjM';\n\n currentFirebaseToken = await getToken(messaging, {\n vapidKey: vapidKey,\n serviceWorkerRegistration: registration\n });\n\n if (currentFirebaseToken) {\n console.log('\u2705 Firebase token already exists:', currentFirebaseToken.substring(0, 30) + '...');\n await updateFirebaseTokenOnServer(currentFirebaseToken);\n } else {\n console.log('No Firebase token found');\n setTimeout(() => showPushNotificationPrompt(), 3000);\n }\n } catch (error) {\n console.error('Error checking Firebase token:', error);\n setTimeout(() => showPushNotificationPrompt(), 3000);\n }\n }\n\n async function requestNotificationPermission() {\n if (!('Notification' in window)) {\n console.log('Notifications not supported');\n return false;\n }\n\n let permission = Notification.permission;\n\n if (permission === 'default') {\n permission = await Notification.requestPermission();\n }\n\n if (permission === 'granted') {\n console.log('Notification permission granted');\n return true;\n } else {\n console.log('Notification permission denied');\n return false;\n }\n }\n\n async function subscribeToPushNotifications() {\n\n\n \/\/ Show loading state\n const enableButton = event.target;\n const originalText = enableButton.textContent;\n enableButton.disabled = true;\n enableButton.textContent = 'Enabling...';\n\n try {\n if (!pushNotificationSupported || !currentCustomer || !messaging) {\n hidePushNotificationPrompt();\n \/\/ Don't show error for iOS devices where push notifications have limitations\n if (navigator.userAgent.includes('iPhone') || navigator.userAgent.includes('iPad')) {\n showSuccessMessage('Notifications will be available when you add this app to your home screen');\n } else {\n showSuccessMessage('Push notifications not supported on this device');\n }\n return false;\n }\n\n const hasPermission = await requestNotificationPermission();\n if (!hasPermission) {\n enableButton.disabled = false;\n enableButton.textContent = originalText;\n hidePushNotificationPrompt();\n \/\/ Removed permission denied banner - handled silently\n return false;\n }\n\n \/\/ Get service worker registration (like your working example)\n const registration = await navigator.serviceWorker.getRegistration('https:\/\/reserve.samuraiyakiniku.com\/wp-content\/plugins\/restaurant-loyalty-system\/pwa\/');\n if (!registration) {\n throw new Error('No service worker registration found');\n }\n\n \/\/ VAPID public key for push notifications\n \/\/ NOTE: This is a PUBLIC key meant to be exposed in client-side code.\n \/\/ It's used to identify your server when requesting push notification permissions.\n \/\/ The private key is kept secure on the server side.\n const vapidKey = 'BE_3aULuQ_lLlDkBdT-8eedkRUFiXE4oj8qaJlfx6jnvnC1kCx6XssPmKOQp0UN5T52zlba_t-AIzqPx-B2Sa0';\n\n \/\/ Get Firebase token using Firebase SDK (like your working example)\n const { getToken } = await import('https:\/\/www.gstatic.com\/firebasejs\/10.7.0\/firebase-messaging.js');\n\n const token = await getToken(messaging, {\n vapidKey: vapidKey,\n serviceWorkerRegistration: registration\n });\n\n if (!token) {\n throw new Error('Failed to generate Firebase token');\n }\n\n console.log('Firebase token generated:', token);\n currentFirebaseToken = token;\n\n \/\/ Send token to server\n const success = await updateFirebaseTokenOnServer(token);\n if (success) {\n \/\/ Reset button state on success\n enableButton.disabled = false;\n enableButton.textContent = 'Notifications Enabled';\n\n hidePushNotificationPrompt();\n \/\/ Removed success banner - notifications enabled silently\n return true;\n } else {\n throw new Error('Failed to register token on server');\n }\n\n } catch (error) {\n console.error('Firebase token subscription failed:', error);\n enableButton.disabled = false;\n enableButton.textContent = originalText;\n\n \/\/ Log error details but don't show banner to user\n if (error.message.includes('VAPID')) {\n console.log('VAPID key issue - hiding prompt');\n hidePushNotificationPrompt();\n }\n\n \/\/ Removed error banner - failures handled silently\n }\n\n return false;\n }\n\n async function getFirebaseConfig() {\n try {\n const response = await fetch('https:\/\/reserve.samuraiyakiniku.com\/wp-admin\/admin-ajax.php', {\n method: 'POST',\n headers: {\n 'Content-Type': 'application\/x-www-form-urlencoded',\n },\n body: 'action=rls_get_firebase_config'\n });\n\n const data = await response.json();\n if (data.success) {\n return data.data.config;\n }\n return null;\n } catch (error) {\n console.error('Error getting Firebase config:', error);\n return null;\n }\n }\n\n async function getVapidPublicKey() {\n try {\n const response = await fetch('https:\/\/reserve.samuraiyakiniku.com\/wp-admin\/admin-ajax.php', {\n method: 'POST',\n headers: {\n 'Content-Type': 'application\/x-www-form-urlencoded',\n },\n body: 'action=rls_get_vapid_key'\n });\n\n const data = await response.json();\n if (data.success) {\n \/\/ Handle both response formats for compatibility\n return data.data.vapidKey || data.data.public_key || null;\n }\n return null;\n } catch (error) {\n console.error('Error getting VAPID key:', error);\n return null;\n }\n }\n\n async function updateFirebaseTokenOnServer(token) {\n if (!currentCustomer) {\n return false;\n }\n\n try {\n const data = await makeAjaxRequest('https:\/\/reserve.samuraiyakiniku.com\/wp-admin\/admin-ajax.php', {\n action: 'rls_subscribe_push_firebase',\n customer_id: currentCustomer.id,\n firebase_token: token\n });\n return data.success;\n } catch (error) {\n console.error('Error updating Firebase token:', error);\n return false;\n }\n }\n\n \/\/ Keep the old function for backward compatibility during transition\n async function updatePushSubscriptionOnServer(subscription) {\n if (!currentCustomer) {\n return false;\n }\n\n try {\n const data = await makeAjaxRequest('https:\/\/reserve.samuraiyakiniku.com\/wp-admin\/admin-ajax.php', {\n action: 'rls_subscribe_push',\n customer_id: currentCustomer.id,\n subscription: JSON.stringify(subscription)\n });\n return data.success;\n } catch (error) {\n console.error('Error updating push subscription:', error);\n return false;\n }\n }\n\n \/\/ DISABLED: Foreground notification function to prevent duplicates\n \/\/ The service worker now handles all notifications (background and foreground)\n function showForegroundNotification(payload) {\n console.log('\ud83d\udce8 Foreground notification disabled (service worker handles all):', payload);\n\n \/\/ Only show in-app message, no browser notification\n const notification = payload.notification || {};\n const title = notification.title || 'Samurai Yakiniku';\n const body = notification.body || 'You have a new notification';\n\n \/\/ Show in-app notification only (no duplicate browser notification)\n showSuccessMessage(`${title}: ${body}`);\n }\n\n function showPushNotificationPrompt() {\n \/\/ Don't show if already dismissed or if notifications are not supported\n if (localStorage.getItem('pushNotificationDismissed') || !pushNotificationSupported) {\n return;\n }\n\n \/\/ Show a subtle prompt to enable notifications\n const promptHtml = `\n <div id=\"pushPrompt\" class=\"push-notification-prompt\" style=\"\n position: fixed;\n bottom: 20px;\n left: 20px;\n right: 20px;\n background: linear-gradient(135deg, #DC143C, #B22222);\n color: white;\n padding: 16px;\n border-radius: 12px;\n box-shadow: 0 4px 20px rgba(220, 20, 60, 0.3);\n z-index: 1000;\n display: flex;\n align-items: center;\n justify-content: space-between;\n animation: slideUp 0.3s ease-out;\n max-width: 400px;\n margin: 0 auto;\n \">\n <div style=\"flex: 1; display: flex; align-items: flex-start; gap: 10px;\">\n <svg width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" style=\"flex-shrink: 0; margin-top: 2px;\"><path d=\"M6 8a6 6 0 0 1 12 0c0 7 3 9 3 9H3s3-2 3-9\"\/><path d=\"M10.3 21a1.94 1.94 0 0 0 3.4 0\"\/><\/svg>\n <div>\n <div style=\"font-weight: 600; margin-bottom: 4px;\">Stay Updated<\/div>\n <div style=\"font-size: 14px; opacity: 0.9;\">\n ${isIOS() ? 'Add to home screen to get notifications about rewards' : 'Get notified about new rewards and bonus points'}\n <\/div>\n <\/div>\n <\/div>\n <div style=\"display: flex; gap: 8px;\">\n <button onclick=\"subscribeToPushNotifications()\" style=\"\n background: rgba(255,255,255,0.2);\n border: 1px solid rgba(255,255,255,0.3);\n color: white;\n padding: 8px 16px;\n border-radius: 6px;\n cursor: pointer;\n font-size: 14px;\n font-weight: 600;\n transition: all 0.2s ease;\n \" onmouseover=\"this.style.background='rgba(255,255,255,0.3)'\"\n onmouseout=\"this.style.background='rgba(255,255,255,0.2)'\">\n Enable\n <\/button>\n <button onclick=\"dismissPushNotificationPrompt()\" style=\"\n background: transparent;\n border: none;\n color: rgba(255,255,255,0.7);\n padding: 8px;\n cursor: pointer;\n font-size: 18px;\n line-height: 1;\n transition: all 0.2s ease;\n \" onmouseover=\"this.style.color='white'\"\n onmouseout=\"this.style.color='rgba(255,255,255,0.7)'\"\n title=\"Dismiss\">\n <svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><line x1=\"18\" y1=\"6\" x2=\"6\" y2=\"18\"\/><line x1=\"6\" y1=\"6\" x2=\"18\" y2=\"18\"\/><\/svg>\n <\/button>\n <\/div>\n <\/div>\n `;\n\n document.body.insertAdjacentHTML('beforeend', promptHtml);\n }\n\n function dismissPushNotificationPrompt() {\n const prompt = document.getElementById('pushPrompt');\n if (prompt) {\n prompt.style.animation = 'slideDown 0.3s ease-in';\n setTimeout(() => {\n prompt.remove();\n }, 300);\n }\n \/\/ Remember that user dismissed it\n localStorage.setItem('pushNotificationDismissed', 'true');\n }\n\n function hidePushNotificationPrompt() {\n const prompt = document.getElementById('pushPrompt');\n if (prompt) {\n prompt.style.animation = 'slideDown 0.3s ease-in';\n setTimeout(() => {\n prompt.remove();\n }, 300);\n }\n }\n\n \/\/ Utility function to convert VAPID key\n function urlBase64ToUint8Array(base64String) {\n const padding = '='.repeat((4 - base64String.length % 4) % 4);\n const base64 = (base64String + padding)\n .replace(\/-\/g, '+')\n .replace(\/_\/g, '\/');\n\n const rawData = window.atob(base64);\n const outputArray = new Uint8Array(rawData.length);\n\n for (let i = 0; i < rawData.length; ++i) {\n outputArray[i] = rawData.charCodeAt(i);\n }\n return outputArray;\n }\n\n \/\/ Modal Functions\n function showConfirmationDialog(title, message, onConfirm) {\n document.getElementById('modalTitle').textContent = title;\n document.getElementById('modalBody').innerHTML = `<p>${message}<\/p>`;\n document.getElementById('modalFooter').innerHTML = `\n <button class=\"modal-button secondary\" onclick=\"closeModal()\">Cancel<\/button>\n <button class=\"modal-button primary\" onclick=\"confirmAction()\">Confirm<\/button>\n `;\n\n \/\/ Store the callback\n window.currentModalCallback = onConfirm;\n\n document.getElementById('modalOverlay').style.display = 'flex';\n }\n\n function showRedemptionSuccess(redemptionCode, message) {\n document.getElementById('modalTitle').textContent = 'Reward Redeemed!';\n document.getElementById('modalBody').innerHTML = `\n <div style=\"text-align: center;\">\n <div style=\"margin-bottom: 16px; color: #10b981;\"><svg width=\"48\" height=\"48\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M5.8 11.3 2 22l10.7-3.79\"\/><path d=\"M4 3h.01\"\/><path d=\"M22 8h.01\"\/><path d=\"M15 2h.01\"\/><path d=\"M22 20h.01\"\/><path d=\"m22 2-2.24.75a2.9 2.9 0 0 0-1.96 3.12v0c.1.86-.57 1.63-1.45 1.63h-.38c-.86 0-1.6.6-1.76 1.44L14 10\"\/><path d=\"m22 13-.82-.33c-.86-.34-1.82.2-1.98 1.11v0c-.11.7-.72 1.22-1.43 1.22H17\"\/><path d=\"m11 2 .33.82c.34.86-.2 1.82-1.11 1.98v0C9.52 4.9 9 5.52 9 6.23V7\"\/><path d=\"M11 13c1.93 1.93 2.83 4.17 2 5-.83.83-3.07-.07-5-2-1.93-1.93-2.83-4.17-2-5 .83-.83 3.07.07 5 2Z\"\/><\/svg><\/div>\n <p style=\"margin-bottom: 20px;\">${message}<\/p>\n <div class=\"redeemed-code\">\n <div class=\"redeemed-code-label\">Redemption Code<\/div>\n <div class=\"redeemed-code-value\">${redemptionCode}<\/div>\n <\/div>\n <div class=\"qr-code\" id=\"qrCodeContainer\"><\/div>\n <p style=\"font-size: 14px; color: rgba(255,255,255,0.6); margin-top: 16px;\">\n Show this code to staff at any branch to claim your reward.\n <\/p>\n <\/div>\n `;\n document.getElementById('modalFooter').innerHTML = `\n <button class=\"modal-button primary\" onclick=\"closeModal()\">Got it!<\/button>\n `;\n\n document.getElementById('modalOverlay').style.display = 'flex';\n\n \/\/ Generate QR code\n setTimeout(() => {\n console.log('Attempting to generate QR code for redemption success dialog');\n generateQRCode(redemptionCode, 'qrCodeContainer');\n }, 500);\n }\n\n function showErrorDialog(title, message) {\n document.getElementById('modalTitle').textContent = title;\n document.getElementById('modalBody').innerHTML = `<p>${message}<\/p>`;\n document.getElementById('modalFooter').innerHTML = `\n <button class=\"modal-button primary\" onclick=\"closeModal()\">OK<\/button>\n `;\n\n document.getElementById('modalOverlay').style.display = 'flex';\n }\n\n function confirmAction() {\n if (window.currentModalCallback) {\n window.currentModalCallback();\n window.currentModalCallback = null;\n }\n closeModal();\n }\n\n function closeModal() {\n document.getElementById('modalOverlay').style.display = 'none';\n window.currentModalCallback = null;\n }\n\n \/\/ Redeemed Rewards Functions\n function loadRedeemedRewards() {\n const redeemedList = document.getElementById('redeemedList');\n redeemedList.innerHTML = '<div class=\"loading\"><div class=\"spinner\"><\/div><p>Loading your rewards...<\/p><\/div>';\n\n \/\/ Build request params\n const params = {\n action: 'rls_api_redeemed_rewards',\n customer_id: currentCustomer.id,\n include_branch_info: '1'\n };\n\n \/\/ Include branch context for filtering\n const branchId = getBranchContext();\n if (branchId) {\n params.branch_id = branchId;\n }\n\n makeAjaxRequest('https:\/\/reserve.samuraiyakiniku.com\/wp-admin\/admin-ajax.php', params)\n .then(data => {\n if (data.success) {\n displayRedeemedRewards(data.data);\n } else {\n redeemedList.innerHTML = '<div class=\"error-message\">Failed to load redeemed rewards<\/div>';\n }\n })\n .catch(error => {\n redeemedList.innerHTML = '<div class=\"error-message\">Connection error<\/div>';\n console.error('Load redeemed rewards error:', error);\n });\n }\n\n function displayRedeemedRewards(rewards) {\n const redeemedList = document.getElementById('redeemedList');\n const redeemedCount = document.getElementById('redeemedCount');\n const currentBranchId = getBranchContext();\n\n \/\/ Debug: Log the rewards data\n console.log('Redeemed rewards data:', rewards);\n console.log('Current branch filter:', currentBranchId);\n\n rewards.forEach(reward => {\n console.log(`Reward ${reward.id}: status=\"${reward.status}\", title=\"${reward.reward_title}\", branch_id=\"${reward.branch_id}\"`);\n });\n\n \/\/ Filter by branch if a specific branch is selected\n let filteredRewards = rewards;\n if (currentBranchId) {\n filteredRewards = rewards.filter(reward => {\n \/\/ Show reward if it was redeemed at the selected branch\n return reward.branch_id == currentBranchId;\n });\n console.log(`Filtered ${rewards.length} rewards to ${filteredRewards.length} for branch ${currentBranchId}`);\n }\n\n const activeRewards = filteredRewards.filter(r => r.status === 'active' || r.status === 'redeemed');\n redeemedCount.textContent = activeRewards.length;\n\n if (filteredRewards.length === 0) {\n const message = currentBranchId ?\n 'No redeemed rewards for selected branch' :\n 'No redeemed rewards yet';\n redeemedList.innerHTML = `<div style=\"text-align: center; padding: 40px; color: #86868b;\">${message}<\/div>`;\n return;\n }\n\n let html = '';\n filteredRewards.forEach(reward => {\n \/\/ Debug: Log each reward's status\n console.log(`Processing reward ${reward.id}: status=\"${reward.status}\"`);\n\n const isUsed = reward.status === 'used';\n \/\/ Check both status and expiry date\n const isExpired = reward.status === 'expired' || reward.is_expired === true;\n const isActive = (reward.status === 'active' || reward.status === 'redeemed') && !isExpired;\n\n console.log(`Reward ${reward.id}: isActive=${isActive}, isUsed=${isUsed}, isExpired=${isExpired}`);\n\n let statusClass = 'active';\n let statusText = 'ACTIVE';\n let statusIcon = '<svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><circle cx=\"12\" cy=\"12\" r=\"10\"\/><path d=\"m9 12 2 2 4-4\"\/><\/svg>';\n\n if (isUsed) {\n statusClass = 'used';\n statusText = 'USED';\n statusIcon = '<svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><circle cx=\"12\" cy=\"12\" r=\"10\"\/><path d=\"m9 12 2 2 4-4\"\/><\/svg>';\n } else if (isExpired) {\n statusClass = 'expired';\n statusText = 'EXPIRED';\n statusIcon = '<svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><circle cx=\"12\" cy=\"12\" r=\"10\"\/><line x1=\"15\" y1=\"9\" x2=\"9\" y2=\"15\"\/><line x1=\"9\" y1=\"9\" x2=\"15\" y2=\"15\"\/><\/svg>';\n } else if (isActive) {\n statusClass = 'active';\n statusText = 'ACTIVE';\n statusIcon = '<svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><circle cx=\"12\" cy=\"12\" r=\"10\"\/><path d=\"m9 12 2 2 4-4\"\/><\/svg>';\n } else {\n \/\/ Unknown status - let's see what it is\n console.warn(`Unknown status for reward ${reward.id}: \"${reward.status}\"`);\n statusClass = 'unknown';\n statusText = reward.status ? reward.status.toUpperCase() : 'UNKNOWN';\n statusIcon = '<svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><circle cx=\"12\" cy=\"12\" r=\"10\"\/><path d=\"M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3\"\/><line x1=\"12\" y1=\"17\" x2=\"12.01\" y2=\"17\"\/><\/svg>';\n }\n\n const cardClass = isActive ? '' : 'expired';\n\n \/\/ Format dates\n const redeemedDate = new Date(reward.redeemed_at).toLocaleDateString();\n const usedDate = reward.used_at ? new Date(reward.used_at).toLocaleDateString() : null;\n\n html += `\n <div class=\"redeemed-card ${cardClass}\">\n <div class=\"redeemed-header\">\n <div>\n <div class=\"redeemed-title\">${reward.reward_title}<\/div>\n <\/div>\n <div class=\"redeemed-status ${statusClass}\">\n ${statusIcon} ${statusText}\n <\/div>\n <\/div>\n\n <div class=\"redeemed-code\">\n <div class=\"redeemed-code-label\">Redemption Code<\/div>\n <div class=\"redeemed-code-value\">${reward.redemption_code}<\/div>\n <\/div>\n\n ${isActive ? `\n <div class=\"redeemed-qr\">\n <div class=\"qr-code\" id=\"qr-${reward.id}\"><\/div>\n <\/div>\n ` : `\n <div class=\"redeemed-qr\">\n <div style=\"text-align: center; padding: 20px; color: #86868b; font-size: 14px; display: flex; align-items: center; justify-content: center; gap: 8px;\">\n ${isUsed ? '<svg width=\"18\" height=\"18\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"#10b981\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><circle cx=\"12\" cy=\"12\" r=\"10\"\/><path d=\"m9 12 2 2 4-4\"\/><\/svg> Reward has been used!' : '<svg width=\"18\" height=\"18\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"#f59e0b\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><circle cx=\"12\" cy=\"12\" r=\"10\"\/><polyline points=\"12 6 12 12 16 14\"\/><\/svg> Reward has expired'}\n <\/div>\n <\/div>\n `}\n\n <div class=\"redeemed-dates\">\n <div class=\"redeemed-date\" style=\"display: flex; align-items: center; gap: 6px;\">\n <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><rect x=\"3\" y=\"4\" width=\"18\" height=\"18\" rx=\"2\" ry=\"2\"\/><line x1=\"16\" y1=\"2\" x2=\"16\" y2=\"6\"\/><line x1=\"8\" y1=\"2\" x2=\"8\" y2=\"6\"\/><line x1=\"3\" y1=\"10\" x2=\"21\" y2=\"10\"\/><\/svg>\n Redeemed: ${redeemedDate}\n <\/div>\n ${usedDate ? `\n <div class=\"redeemed-date\" style=\"color: #34C759; margin-top: 4px; display: flex; align-items: center; gap: 6px;\">\n <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><circle cx=\"12\" cy=\"12\" r=\"10\"\/><path d=\"m9 12 2 2 4-4\"\/><\/svg>\n Used: ${usedDate}\n <\/div>\n ` : ''}\n ${reward.expiry_date && isExpired ? `\n <div class=\"redeemed-date\" style=\"color: #FF3B30; margin-top: 4px; display: flex; align-items: center; gap: 6px;\">\n <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><circle cx=\"12\" cy=\"12\" r=\"10\"\/><polyline points=\"12 6 12 12 16 14\"\/><\/svg>\n Expired: ${new Date(reward.expiry_date).toLocaleDateString()}\n <\/div>\n ` : ''}\n <\/div>\n <\/div>\n `;\n });\n\n redeemedList.innerHTML = html;\n\n \/\/ Generate QR codes only for active (non-expired) rewards\n filteredRewards.forEach((reward, index) => {\n const isExpired = reward.status === 'expired' || reward.is_expired === true;\n const isActive = (reward.status === 'active' || reward.status === 'redeemed') && !isExpired;\n\n if (isActive) {\n setTimeout(() => {\n console.log('Generating QR code for active reward:', reward.redemption_code, 'container:', `qr-${reward.id}`);\n generateQRCode(reward.redemption_code, `qr-${reward.id}`);\n }, 200 + (index * 100)); \/\/ Stagger the generation\n }\n });\n }\n\n function generateQRCode(text, containerId) {\n const container = document.getElementById(containerId);\n if (!container) {\n console.error('Container not found:', containerId);\n return;\n }\n\n console.log('Generating QR code for:', text, 'in container:', containerId);\n console.log('QRCode library available:', typeof QRCode !== 'undefined');\n\n \/\/ Try multiple methods to generate QR code\n if (typeof QRCode !== 'undefined') {\n generateRealQRCode(text, container);\n } else {\n \/\/ Use online QR service as fallback\n generateOnlineQRCode(text, container);\n }\n }\n\n function generateRealQRCode(text, container) {\n try {\n \/\/ Clear container\n container.innerHTML = '';\n\n \/\/ Create canvas element\n const canvas = document.createElement('canvas');\n canvas.style.borderRadius = '8px';\n canvas.style.background = '#fff';\n canvas.style.padding = '8px';\n container.appendChild(canvas);\n\n \/\/ Generate QR code\n QRCode.toCanvas(canvas, text, {\n width: 120,\n height: 120,\n margin: 2,\n color: {\n dark: '#000000',\n light: '#FFFFFF'\n }\n }, function (error) {\n if (error) {\n console.error('QR Code generation error:', error);\n generateOnlineQRCode(text, container);\n } else {\n console.log('QR Code generated successfully');\n }\n });\n } catch (error) {\n console.error('QR generation failed:', error);\n generateOnlineQRCode(text, container);\n }\n }\n\n function generateOnlineQRCode(text, container) {\n console.log('Using online QR service for:', text);\n\n \/\/ Use QR Server API as fallback\n const qrUrl = `https:\/\/api.qrserver.com\/v1\/create-qr-code\/?size=120x120&data=${encodeURIComponent(text)}`;\n\n container.innerHTML = `\n <div style=\"text-align: center; margin: 0 auto;\">\n <img decoding=\"async\" src=\"${qrUrl}\"\n alt=\"QR Code: ${text}\"\n style=\"width: 120px; height: 120px; border-radius: 8px; background: #fff; padding: 8px; border: 1px solid #ddd;\"\n onerror=\"this.style.display='none'; this.nextElementSibling.style.display='block';\" \/>\n <div style=\"display: none; width: 120px; height: 120px; background: #fff; border: 2px solid #ddd; display: flex; align-items: center; justify-content: center; font-size: 10px; color: #666; text-align: center; margin: 0 auto; border-radius: 8px; flex-direction: column;\">\n <div style=\"font-weight: bold; margin-bottom: 8px;\">Redemption Code<\/div>\n <div style=\"font-family: monospace; font-size: 12px; word-break: break-all;\">${text}<\/div>\n <\/div>\n <\/div>\n `;\n }\n\n \/\/ Phone Change Functions\n let phoneChangeStep = 'enter_new';\n let phoneChangeData = {};\n\n function initiatePhoneChange() {\n phoneChangeStep = 'enter_new';\n showPhoneChangeStep();\n }\n\n function showPhoneChangeStep() {\n const modal = document.getElementById('phoneChangeModal');\n const title = document.getElementById('phoneChangeTitle');\n const body = document.getElementById('phoneChangeBody');\n const footer = document.getElementById('phoneChangeFooter');\n\n switch (phoneChangeStep) {\n case 'enter_new':\n title.textContent = 'Change Phone Number';\n body.innerHTML = `\n <div style=\"margin-bottom: 20px;\">\n <p style=\"color: #86868b; margin-bottom: 16px;\">Enter your new phone number. We'll send verification codes to both your current and new numbers.<\/p>\n <div style=\"margin-bottom: 16px;\">\n <strong style=\"color: #1d1d1f; display: block; margin-bottom: 8px;\">Current Phone:<\/strong>\n <span style=\"color: #86868b;\">${currentCustomer.phone}<\/span>\n <\/div>\n <div>\n <label style=\"color: #1d1d1f; font-weight: 600; display: block; margin-bottom: 8px;\">New Phone Number:<\/label>\n <input type=\"tel\" id=\"newPhoneInput\" placeholder=\"Enter new phone number\" maxlength=\"15\"\n style=\"width: 100%; padding: 12px; border: 1px solid rgba(0,0,0,0.1); border-radius: 8px; font-size: 16px;\" \/>\n <\/div>\n <\/div>\n `;\n footer.innerHTML = `\n <button onclick=\"closePhoneChangeModal()\" style=\"background: none; border: 1px solid rgba(0,0,0,0.1); color: #86868b; padding: 12px 24px; border-radius: 8px; margin-right: 12px; cursor: pointer;\">Cancel<\/button>\n <button onclick=\"submitNewPhone()\" style=\"background: linear-gradient(135deg, #DC143C, #B22222); color: white; border: none; padding: 12px 24px; border-radius: 8px; font-weight: 600; cursor: pointer;\">Continue<\/button>\n `;\n\n \/\/ Add number-only validation after rendering\n setTimeout(() => {\n const newPhoneInput = document.getElementById('newPhoneInput');\n if (newPhoneInput) {\n newPhoneInput.addEventListener('input', function(e) {\n let value = e.target.value.replace(\/\\D\/g, '');\n if (value.length > 15) value = value.slice(0, 15);\n e.target.value = value;\n });\n }\n }, 0);\n break;\n\n case 'verify_old':\n title.textContent = 'Verify Current Phone';\n body.innerHTML = `\n <div style=\"margin-bottom: 20px;\">\n <p style=\"color: #86868b; margin-bottom: 16px;\">We've sent a verification code to your current phone number:<\/p>\n <div style=\"background: #f8f8f8; padding: 12px; border-radius: 8px; margin-bottom: 16px; text-align: center;\">\n <strong>${currentCustomer.phone}<\/strong>\n <\/div>\n <div>\n <label style=\"color: #1d1d1f; font-weight: 600; display: block; margin-bottom: 8px;\">Enter 6-digit code:<\/label>\n <input type=\"text\" id=\"oldPhoneCode\" placeholder=\"000000\" maxlength=\"6\" inputmode=\"numeric\"\n style=\"width: 100%; padding: 12px; border: 1px solid rgba(0,0,0,0.1); border-radius: 8px; font-size: 18px; text-align: center; letter-spacing: 2px;\" \/>\n <\/div>\n <\/div>\n `;\n footer.innerHTML = `\n <button onclick=\"closePhoneChangeModal()\" style=\"background: none; border: 1px solid rgba(0,0,0,0.1); color: #86868b; padding: 12px 24px; border-radius: 8px; margin-right: 12px; cursor: pointer;\">Cancel<\/button>\n <button onclick=\"verifyOldPhone()\" style=\"background: linear-gradient(135deg, #DC143C, #B22222); color: white; border: none; padding: 12px 24px; border-radius: 8px; font-weight: 600; cursor: pointer;\">Verify<\/button>\n `;\n\n \/\/ Add number-only validation after rendering\n setTimeout(() => {\n const oldPhoneCode = document.getElementById('oldPhoneCode');\n if (oldPhoneCode) {\n oldPhoneCode.addEventListener('input', function(e) {\n let value = e.target.value.replace(\/\\D\/g, '');\n if (value.length > 6) value = value.slice(0, 6);\n e.target.value = value;\n });\n }\n }, 0);\n break;\n\n case 'verify_new':\n title.textContent = 'Verify New Phone';\n body.innerHTML = `\n <div style=\"margin-bottom: 20px;\">\n <p style=\"color: #86868b; margin-bottom: 16px;\">We've sent a verification code to your new phone number:<\/p>\n <div style=\"background: #f8f8f8; padding: 12px; border-radius: 8px; margin-bottom: 16px; text-align: center;\">\n <strong>${phoneChangeData.new_phone_masked || phoneChangeData.new_phone}<\/strong>\n <\/div>\n <div>\n <label style=\"color: #1d1d1f; font-weight: 600; display: block; margin-bottom: 8px;\">Enter 6-digit code:<\/label>\n <input type=\"text\" id=\"newPhoneCode\" placeholder=\"000000\" maxlength=\"6\" inputmode=\"numeric\"\n style=\"width: 100%; padding: 12px; border: 1px solid rgba(0,0,0,0.1); border-radius: 8px; font-size: 18px; text-align: center; letter-spacing: 2px;\" \/>\n <\/div>\n <\/div>\n `;\n footer.innerHTML = `\n <button onclick=\"closePhoneChangeModal()\" style=\"background: none; border: 1px solid rgba(0,0,0,0.1); color: #86868b; padding: 12px 24px; border-radius: 8px; margin-right: 12px; cursor: pointer;\">Cancel<\/button>\n <button onclick=\"verifyNewPhone()\" style=\"background: linear-gradient(135deg, #DC143C, #B22222); color: white; border: none; padding: 12px 24px; border-radius: 8px; font-weight: 600; cursor: pointer;\">Complete Change<\/button>\n `;\n\n \/\/ Add number-only validation after rendering\n setTimeout(() => {\n const newPhoneCode = document.getElementById('newPhoneCode');\n if (newPhoneCode) {\n newPhoneCode.addEventListener('input', function(e) {\n let value = e.target.value.replace(\/\\D\/g, '');\n if (value.length > 6) value = value.slice(0, 6);\n e.target.value = value;\n });\n }\n }, 0);\n break;\n }\n\n modal.style.display = 'flex';\n }\n\n function submitNewPhone() {\n const newPhone = document.getElementById('newPhoneInput').value.trim();\n\n if (!newPhone) {\n alert('Please enter a new phone number');\n return;\n }\n\n if (newPhone === currentCustomer.phone) {\n alert('New phone number must be different from your current number');\n return;\n }\n\n makeAjaxRequest('https:\/\/reserve.samuraiyakiniku.com\/wp-admin\/admin-ajax.php', {\n action: 'rls_api_initiate_phone_change',\n customer_id: currentCustomer.id,\n new_phone: newPhone\n })\n .then(data => {\n if (data.success) {\n phoneChangeData.new_phone = newPhone;\n phoneChangeStep = 'verify_old';\n showPhoneChangeStep();\n } else {\n alert(data.data.message || 'Failed to initiate phone change');\n }\n })\n .catch(error => {\n console.error('Phone change error:', error);\n alert('Connection error. Please try again.');\n });\n }\n\n function verifyOldPhone() {\n const code = document.getElementById('oldPhoneCode').value.trim();\n\n if (!code || code.length !== 6) {\n alert('Please enter the 6-digit verification code');\n return;\n }\n\n makeAjaxRequest('https:\/\/reserve.samuraiyakiniku.com\/wp-admin\/admin-ajax.php', {\n action: 'rls_api_verify_old_phone',\n customer_id: currentCustomer.id,\n verification_code: code\n })\n .then(data => {\n if (data.success) {\n phoneChangeData.new_phone_masked = data.data.new_phone_masked;\n phoneChangeStep = 'verify_new';\n showPhoneChangeStep();\n } else {\n alert(data.data.message || 'Invalid verification code');\n }\n })\n .catch(error => {\n console.error('Verification error:', error);\n alert('Connection error. Please try again.');\n });\n }\n\n function verifyNewPhone() {\n const code = document.getElementById('newPhoneCode').value.trim();\n\n if (!code || code.length !== 6) {\n alert('Please enter the 6-digit verification code');\n return;\n }\n\n makeAjaxRequest('https:\/\/reserve.samuraiyakiniku.com\/wp-admin\/admin-ajax.php', {\n action: 'rls_api_verify_new_phone',\n customer_id: currentCustomer.id,\n verification_code: code\n })\n .then(data => {\n if (data.success) {\n \/\/ Update customer data\n currentCustomer.phone = data.data.new_phone;\n\n \/\/ Close modal and refresh profile\n closePhoneChangeModal();\n loadProfile();\n\n \/\/ Show success message\n alert('Phone number successfully changed!');\n } else {\n alert(data.data.message || 'Invalid verification code');\n }\n })\n .catch(error => {\n console.error('Verification error:', error);\n alert('Connection error. Please try again.');\n });\n }\n\n function closePhoneChangeModal() {\n document.getElementById('phoneChangeModal').style.display = 'none';\n phoneChangeStep = 'enter_new';\n phoneChangeData = {};\n }\n\n \/\/ Birthday Management Functions\n function formatBirthday(dateString) {\n if (!dateString) return 'Not set';\n\n const date = new Date(dateString);\n const options = {\n year: 'numeric',\n month: 'long',\n day: 'numeric'\n };\n\n return date.toLocaleDateString('en-US', options);\n }\n\n function showBirthdayEditor() {\n const modal = document.getElementById('birthdayModal');\n const input = document.getElementById('birthdayInput');\n\n \/\/ Pre-fill current birthday if exists\n if (currentCustomer.date_of_birth) {\n input.value = currentCustomer.date_of_birth;\n }\n\n modal.style.display = 'flex';\n }\n\n function closeBirthdayModal() {\n document.getElementById('birthdayModal').style.display = 'none';\n document.getElementById('birthdayInput').value = '';\n }\n\n function updateBirthday() {\n const birthdayInput = document.getElementById('birthdayInput');\n const birthday = birthdayInput.value;\n\n if (!birthday) {\n alert('Please select your birthday date');\n return;\n }\n\n \/\/ Validate date is not in the future\n const selectedDate = new Date(birthday);\n const today = new Date();\n\n if (selectedDate > today) {\n alert('Birthday cannot be in the future');\n return;\n }\n\n \/\/ Validate reasonable age (not more than 120 years ago)\n const minDate = new Date();\n minDate.setFullYear(today.getFullYear() - 120);\n\n if (selectedDate < minDate) {\n alert('Please enter a valid birthday');\n return;\n }\n\n \/\/ Show loading state\n const saveButton = event.target;\n const originalText = saveButton.textContent;\n saveButton.disabled = true;\n saveButton.textContent = 'Saving...';\n\n \/\/ Send update request using centralized AJAX handler\n makeAjaxRequest('https:\/\/reserve.samuraiyakiniku.com\/wp-admin\/admin-ajax.php', {\n action: 'rls_update_birthday',\n customer_id: currentCustomer.id,\n date_of_birth: birthday\n })\n .then(data => {\n saveButton.disabled = false;\n saveButton.textContent = originalText;\n\n if (data.success) {\n \/\/ Update customer data\n currentCustomer.date_of_birth = birthday;\n\n \/\/ Close modal and refresh profile\n closeBirthdayModal();\n loadProfile();\n\n \/\/ Show success message\n showSuccessMessage('Birthday updated successfully!');\n } else {\n alert(data.data.message || 'Failed to update birthday');\n }\n })\n .catch(error => {\n saveButton.disabled = false;\n saveButton.textContent = originalText;\n console.error('Birthday update error:', error);\n alert('Connection error. Please try again.');\n });\n }\n\n \/\/ Name Editor Functions\n function showNameEditor() {\n const modal = document.getElementById('nameModal');\n const firstNameInput = document.getElementById('firstNameInput');\n const lastNameInput = document.getElementById('lastNameInput');\n\n \/\/ Pre-fill current name if exists\n if (currentCustomer.first_name) {\n firstNameInput.value = currentCustomer.first_name;\n }\n if (currentCustomer.last_name) {\n lastNameInput.value = currentCustomer.last_name;\n }\n\n modal.style.display = 'flex';\n }\n\n function closeNameModal() {\n document.getElementById('nameModal').style.display = 'none';\n document.getElementById('firstNameInput').value = '';\n document.getElementById('lastNameInput').value = '';\n }\n\n function updateName() {\n const firstNameInput = document.getElementById('firstNameInput');\n const lastNameInput = document.getElementById('lastNameInput');\n const firstName = firstNameInput.value.trim();\n const lastName = lastNameInput.value.trim();\n\n if (!firstName) {\n alert('Please enter your first name');\n return;\n }\n\n if (!lastName) {\n alert('Please enter your last name');\n return;\n }\n\n \/\/ Show loading state\n const saveButton = event.target;\n const originalText = saveButton.textContent;\n saveButton.disabled = true;\n saveButton.textContent = 'Saving...';\n\n \/\/ Send update request using centralized AJAX handler\n makeAjaxRequest('https:\/\/reserve.samuraiyakiniku.com\/wp-admin\/admin-ajax.php', {\n action: 'rls_update_name',\n customer_id: currentCustomer.id,\n first_name: firstName,\n last_name: lastName\n })\n .then(data => {\n saveButton.disabled = false;\n saveButton.textContent = originalText;\n\n if (data.success) {\n \/\/ Update customer data\n currentCustomer.first_name = firstName;\n currentCustomer.last_name = lastName;\n\n \/\/ Close modal and refresh profile\n closeNameModal();\n loadProfile();\n\n \/\/ Show success message\n showSuccessMessage('Name updated successfully!');\n } else {\n alert(data.data.message || 'Failed to update name');\n }\n })\n .catch(error => {\n saveButton.disabled = false;\n saveButton.textContent = originalText;\n console.error('Name update error:', error);\n alert('Connection error. Please try again.');\n });\n }\n\n \/\/ Email Editor Functions\n function showEmailEditor() {\n const modal = document.getElementById('emailModal');\n const emailInput = document.getElementById('emailInput');\n\n \/\/ Pre-fill current email if exists\n if (currentCustomer.email) {\n emailInput.value = currentCustomer.email;\n }\n\n modal.style.display = 'flex';\n }\n\n function closeEmailModal() {\n document.getElementById('emailModal').style.display = 'none';\n document.getElementById('emailInput').value = '';\n }\n\n function updateEmail() {\n const emailInput = document.getElementById('emailInput');\n const email = emailInput.value.trim();\n\n \/\/ Email is optional, but if provided, must be valid\n if (email && !isValidEmail(email)) {\n alert('Please enter a valid email address');\n return;\n }\n\n \/\/ Show loading state\n const saveButton = event.target;\n const originalText = saveButton.textContent;\n saveButton.disabled = true;\n saveButton.textContent = 'Saving...';\n\n \/\/ Send update request using centralized AJAX handler\n makeAjaxRequest('https:\/\/reserve.samuraiyakiniku.com\/wp-admin\/admin-ajax.php', {\n action: 'rls_update_email',\n customer_id: currentCustomer.id,\n email: email\n })\n .then(data => {\n saveButton.disabled = false;\n saveButton.textContent = originalText;\n\n if (data.success) {\n \/\/ Update customer data\n currentCustomer.email = email;\n\n \/\/ Close modal and refresh profile\n closeEmailModal();\n loadProfile();\n\n \/\/ Show success message\n showSuccessMessage('Email updated successfully!');\n } else {\n alert(data.data.message || 'Failed to update email');\n }\n })\n .catch(error => {\n saveButton.disabled = false;\n saveButton.textContent = originalText;\n console.error('Email update error:', error);\n alert('Connection error. Please try again.');\n });\n }\n\n function isValidEmail(email) {\n \/\/ Simple email validation regex\n const emailRegex = \/^[^\\s@]+@[^\\s@]+\\.[^\\s@]+$\/;\n return emailRegex.test(email);\n }\n\n function showSuccessMessage(message) {\n \/\/ Strip emoji from message (they're replaced by SVG icons)\n const cleanMessage = message.replace(\/^[\u2705\u274c\u26a0\ufe0f\ud83d\udd14\ud83c\udf89\ud83d\udcf1\ud83c\udf82\u270f\ufe0f\ud83d\udce7]\\s*\/u, '');\n\n \/\/ Create temporary success message\n const successDiv = document.createElement('div');\n successDiv.style.cssText = `\n position: fixed;\n top: 20px;\n left: 50%;\n transform: translateX(-50%);\n background: #ecfdf5;\n color: #065f46;\n border: 1px solid #a7f3d0;\n padding: 14px 20px;\n border-radius: 12px;\n font-weight: 500;\n font-size: 14px;\n box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);\n z-index: 10000;\n animation: slideDown 0.3s ease-out;\n display: flex;\n align-items: center;\n gap: 10px;\n `;\n successDiv.innerHTML = `\n <svg width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"#10b981\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><circle cx=\"12\" cy=\"12\" r=\"10\"\/><path d=\"m9 12 2 2 4-4\"\/><\/svg>\n <span>${cleanMessage}<\/span>\n `;\n\n document.body.appendChild(successDiv);\n\n \/\/ Remove after 3 seconds\n setTimeout(() => {\n successDiv.style.animation = 'slideUp 0.3s ease-in';\n setTimeout(() => {\n document.body.removeChild(successDiv);\n }, 300);\n }, 3000);\n }\n\n \/\/ Show install prompt\n function showInstallPrompt() {\n if (installPromptShown || isAppInstalled()) return;\n\n installPromptShown = true;\n\n let promptContent = '';\n\n if (isIOS()) {\n \/\/ iOS specific instructions\n promptContent = `\n <div style=\"text-align: center;\">\n <div style=\"margin-bottom: 16px; color: #e00b41;\"><svg width=\"48\" height=\"48\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><rect x=\"5\" y=\"2\" width=\"14\" height=\"20\" rx=\"2\" ry=\"2\"\/><line x1=\"12\" y1=\"18\" x2=\"12.01\" y2=\"18\"\/><\/svg><\/div>\n <div style=\"font-weight: 600; margin-bottom: 8px;\">Install Samurai Yakiniku App<\/div>\n <div style=\"font-size: 14px; opacity: 0.9; margin-bottom: 16px;\">\n Add to your home screen for the best experience and push notifications\n <\/div>\n <div style=\"background: rgba(255,255,255,0.1); padding: 16px; border-radius: 8px; margin-bottom: 16px; text-align: left;\">\n <div style=\"font-weight: 600; margin-bottom: 12px; text-align: center; display: flex; align-items: center; justify-content: center; gap: 8px;\"><svg width=\"18\" height=\"18\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><rect x=\"8\" y=\"2\" width=\"8\" height=\"4\" rx=\"1\" ry=\"1\"\/><path d=\"M16 4h2a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h2\"\/><\/svg>How to install on iPhone\/iPad:<\/div>\n <div style=\"font-size: 14px; line-height: 1.6;\">\n <div style=\"display: flex; align-items: center; margin-bottom: 8px;\">\n <span style=\"background: rgba(255,255,255,0.2); border-radius: 50%; width: 24px; height: 24px; display: flex; align-items: center; justify-content: center; margin-right: 12px; font-size: 12px; font-weight: bold;\">1<\/span>\n Tap the <strong>Share<\/strong> button <svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" style=\"vertical-align: middle;\"><path d=\"M4 12v8a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-8\"\/><polyline points=\"16 6 12 2 8 6\"\/><line x1=\"12\" y1=\"2\" x2=\"12\" y2=\"15\"\/><\/svg> at the bottom of Safari\n <\/div>\n <div style=\"display: flex; align-items: center; margin-bottom: 8px;\">\n <span style=\"background: rgba(255,255,255,0.2); border-radius: 50%; width: 24px; height: 24px; display: flex; align-items: center; justify-content: center; margin-right: 12px; font-size: 12px; font-weight: bold;\">2<\/span>\n Scroll down and tap <strong>\"Add to Home Screen\"<\/strong> <svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" style=\"vertical-align: middle;\"><line x1=\"12\" y1=\"5\" x2=\"12\" y2=\"19\"\/><line x1=\"5\" y1=\"12\" x2=\"19\" y2=\"12\"\/><\/svg>\n <\/div>\n <div style=\"display: flex; align-items: center;\">\n <span style=\"background: rgba(255,255,255,0.2); border-radius: 50%; width: 24px; height: 24px; display: flex; align-items: center; justify-content: center; margin-right: 12px; font-size: 12px; font-weight: bold;\">3<\/span>\n Tap <strong>\"Add\"<\/strong> to confirm installation\n <\/div>\n <\/div>\n <\/div>\n <div style=\"background: rgba(255,255,255,0.1); padding: 12px; border-radius: 8px; font-size: 13px; opacity: 0.9; display: flex; align-items: center; justify-content: center; gap: 8px;\">\n <svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M15 14c.2-1 .7-1.7 1.5-2.5 1-.9 1.5-2.2 1.5-3.5A6 6 0 0 0 6 8c0 1 .2 2.2 1.5 3.5.7.7 1.3 1.5 1.5 2.5\"\/><path d=\"M9 18h6\"\/><path d=\"M10 22h4\"\/><\/svg>\n <strong>Tip:<\/strong> Once installed, you'll get push notifications and faster access!\n <\/div>\n <\/div>\n `;\n } else if (isAndroid()) {\n \/\/ Android specific instructions\n promptContent = `\n <div style=\"text-align: center;\">\n <div style=\"margin-bottom: 16px; color: #e00b41;\"><svg width=\"48\" height=\"48\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><rect x=\"5\" y=\"2\" width=\"14\" height=\"20\" rx=\"2\" ry=\"2\"\/><line x1=\"12\" y1=\"18\" x2=\"12.01\" y2=\"18\"\/><\/svg><\/div>\n <div style=\"font-weight: 600; margin-bottom: 8px;\">Install Samurai Yakiniku App<\/div>\n <div style=\"font-size: 14px; opacity: 0.9; margin-bottom: 16px;\">\n Get faster access and push notifications\n <\/div>\n <\/div>\n `;\n } else {\n \/\/ Desktop\/other devices\n promptContent = `\n <div style=\"text-align: center;\">\n <div style=\"margin-bottom: 16px; color: #e00b41;\"><svg width=\"48\" height=\"48\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><rect x=\"2\" y=\"3\" width=\"20\" height=\"14\" rx=\"2\" ry=\"2\"\/><line x1=\"8\" y1=\"21\" x2=\"16\" y2=\"21\"\/><line x1=\"12\" y1=\"17\" x2=\"12\" y2=\"21\"\/><\/svg><\/div>\n <div style=\"font-weight: 600; margin-bottom: 8px;\">Install Samurai Yakiniku App<\/div>\n <div style=\"font-size: 14px; opacity: 0.9; margin-bottom: 16px;\">\n Install for quick access and notifications\n <\/div>\n <\/div>\n `;\n }\n\n const promptHtml = `\n <div id=\"installPrompt\" style=\"\n position: fixed;\n top: 0;\n left: 0;\n right: 0;\n bottom: 0;\n background: rgba(0,0,0,0.8);\n z-index: 10001;\n display: flex;\n align-items: center;\n justify-content: center;\n padding: 20px;\n animation: fadeIn 0.3s ease-out;\n \">\n <div style=\"\n background: linear-gradient(135deg, #DC143C, #B22222);\n color: white;\n padding: 24px;\n border-radius: 16px;\n max-width: 400px;\n width: 100%;\n box-shadow: 0 8px 32px rgba(220, 20, 60, 0.4);\n \">\n ${promptContent}\n <div style=\"display: flex; gap: 12px; margin-top: 20px;\" id=\"installButtons\">\n <\/div>\n <\/div>\n <\/div>\n `;\n\n document.body.insertAdjacentHTML('beforeend', promptHtml);\n\n \/\/ Build buttons after prompt is shown\n const buttonsContainer = document.getElementById('installButtons');\n let buttonsHtml = '';\n\n if (isAndroid() && deferredPrompt) {\n buttonsHtml += `\n <button onclick=\"installApp()\" style=\"\n flex: 1;\n background: rgba(255,255,255,0.2);\n border: 1px solid rgba(255,255,255,0.3);\n color: white;\n padding: 12px 16px;\n border-radius: 8px;\n cursor: pointer;\n font-weight: 600;\n transition: all 0.2s ease;\n \">\n Install Now\n <\/button>\n `;\n }\n\n const dismissButtonWidth = (isAndroid() && deferredPrompt) ? 'flex: 1;' : 'width: 100%;';\n const dismissButtonText = isIOS() ? 'Got it!' : 'Maybe Later';\n\n buttonsHtml += `\n <button onclick=\"dismissInstallPrompt()\" style=\"\n ${dismissButtonWidth}\n background: transparent;\n border: 1px solid rgba(255,255,255,0.3);\n color: white;\n padding: 12px 16px;\n border-radius: 8px;\n cursor: pointer;\n font-weight: 600;\n transition: all 0.2s ease;\n \">\n ${dismissButtonText}\n <\/button>\n `;\n\n buttonsContainer.innerHTML = buttonsHtml;\n }\n\n \/\/ Install app (Android)\n async function installApp() {\n if (deferredPrompt) {\n deferredPrompt.prompt();\n const { outcome } = await deferredPrompt.userChoice;\n\n if (outcome === 'accepted') {\n console.log('User accepted the install prompt');\n localStorage.setItem('pwa-installed', 'true');\n showSuccessMessage('<svg width=\"18\" height=\"18\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" style=\"vertical-align: middle; margin-right: 4px;\"><circle cx=\"12\" cy=\"12\" r=\"10\"\/><path d=\"m9 12 2 2 4-4\"\/><\/svg> App installed successfully!');\n } else {\n console.log('User dismissed the install prompt');\n }\n\n deferredPrompt = null;\n dismissInstallPrompt();\n }\n }\n\n \/\/ Dismiss install prompt\n function dismissInstallPrompt() {\n const prompt = document.getElementById('installPrompt');\n if (prompt) {\n prompt.style.animation = 'fadeOut 0.3s ease-in';\n setTimeout(() => {\n prompt.remove();\n }, 300);\n }\n localStorage.setItem('install-prompt-dismissed', Date.now().toString());\n }\n\n \/\/ Check if we should show install prompt (respects user dismissal)\n function checkAndShowInstallPrompt() {\n const lastDismissed = localStorage.getItem('install-prompt-dismissed');\n const oneDayAgo = Date.now() - (24 * 60 * 60 * 1000); \/\/ 24 hours\n\n \/\/ Don't show if dismissed within last 24 hours\n if (lastDismissed && parseInt(lastDismissed) > oneDayAgo) {\n return;\n }\n\n \/\/ Only show if currently in browser (even if app is installed)\n if (!isInBrowser()) {\n return;\n }\n\n showInstallPrompt();\n }\n\n \/\/ Debug display for iPhone testing\n function showDebugMessage(message) {\n const debugDiv = document.createElement('div');\n debugDiv.style.cssText = `\n position: fixed;\n top: 10px;\n left: 10px;\n right: 10px;\n background: #000;\n color: #0f0;\n padding: 10px;\n font-family: monospace;\n font-size: 12px;\n z-index: 9999;\n border: 1px solid #0f0;\n max-height: 200px;\n overflow-y: auto;\n `;\n debugDiv.innerHTML = '<strong>DEBUG:<\/strong><br>' + message;\n document.body.appendChild(debugDiv);\n\n setTimeout(() => {\n debugDiv.remove();\n }, 10000); \/\/ Show for 10 seconds\n }\n\n \/\/ ===== BOOKING MANAGEMENT FUNCTIONS =====\n\n function showBookings() {\n \/\/ Hide all other sections\n document.getElementById('customerDashboard').style.display = 'none';\n document.getElementById('createBookingSection').style.display = 'none';\n document.getElementById('rewardsSection').style.display = 'none';\n document.getElementById('profileSection').style.display = 'none';\n\n \/\/ Show bookings section\n const bookingsSection = document.getElementById('bookingsSection');\n bookingsSection.style.display = 'block';\n\n console.log('Bookings section shown');\n\n \/\/ Load bookings\n loadBookings();\n\n \/\/ Trigger animation\n setTimeout(() => {\n bookingsSection.style.opacity = '1';\n bookingsSection.style.transform = 'translateY(0)';\n console.log('Bookings section animation applied');\n }, 50);\n }\n\n function loadBookings() {\n if (!currentCustomer || !currentCustomer.phone) {\n showBookingMessage('error', 'Customer phone number not available');\n return;\n }\n\n const bookingsList = document.getElementById('bookingsList');\n bookingsList.innerHTML = '<div class=\"loading\"><div class=\"spinner\"><\/div><p>Loading your bookings...<\/p><\/div>';\n\n \/\/ Use centralized AJAX handler with automatic nonce refresh\n makeAjaxRequest('https:\/\/reserve.samuraiyakiniku.com\/wp-admin\/admin-ajax.php', {\n action: 'rls_get_user_bookings',\n phone: currentCustomer.phone\n })\n .then(data => {\n console.log('Booking API Response:', data);\n if (data.success) {\n \/\/ Handle nested data structure\n const bookings = data.data.bookings || data.data.data?.bookings || [];\n console.log('Extracted bookings:', bookings);\n displayBookings(bookings);\n } else {\n console.error('Booking API Error:', data);\n showBookingMessage('error', data.data?.message || data.message || 'Failed to load bookings');\n }\n })\n .catch(error => {\n console.error('Error loading bookings:', error);\n showBookingMessage('error', 'Failed to load bookings');\n });\n }\n\n function displayBookings(bookings) {\n console.log('displayBookings called with:', bookings);\n const bookingsList = document.getElementById('bookingsList');\n\n if (!bookingsList) {\n console.error('bookingsList element not found');\n return;\n }\n\n if (!bookings || bookings.length === 0) {\n console.log('No bookings to display');\n bookingsList.innerHTML = `\n <div class=\"bookings-empty-state\">\n <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n <rect x=\"3\" y=\"4\" width=\"18\" height=\"18\" rx=\"2\" ry=\"2\"\/>\n <line x1=\"16\" y1=\"2\" x2=\"16\" y2=\"6\"\/>\n <line x1=\"8\" y1=\"2\" x2=\"8\" y2=\"6\"\/>\n <line x1=\"3\" y1=\"10\" x2=\"21\" y2=\"10\"\/>\n <\/svg>\n <h3>No reservations yet<\/h3>\n <p>When you make a booking, it will appear here. Ready to reserve a table?<\/p>\n <\/div>\n `;\n return;\n }\n\n console.log('Displaying', bookings.length, 'bookings');\n\n const now = new Date();\n let html = '';\n\n bookings.forEach(booking => {\n const bookingDate = new Date(booking.booking_date + ' ' + booking.booking_time);\n const isPast = bookingDate < now;\n let canModify = false;\n if (booking.can_modify) {\n if (!isPast) {\n if (!booking.campaign_id) {\n canModify = true;\n }\n }\n }\n const hoursUntil = Math.round((bookingDate - now) \/ (1000 * 60 * 60));\n const daysUntil = Math.floor(hoursUntil \/ 24);\n\n \/\/ Check if this is a campaign booking\n const isCampaignBooking = booking.campaign_id || booking.campaign_name;\n\n \/\/ Parse date components\n const dateObj = new Date(booking.booking_date);\n const monthNames = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];\n const dayNames = ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'];\n const month = monthNames[dateObj.getMonth()];\n const day = dateObj.getDate();\n const dayName = dayNames[dateObj.getDay()];\n\n \/\/ Format time (12-hour format)\n const timeFormatted = formatBookingTime(booking.booking_time);\n\n \/\/ Time info text\n let timeInfoText = '';\n let timeInfoClass = isPast ? 'past' : 'upcoming';\n if (isPast) {\n timeInfoText = 'Completed';\n } else if (hoursUntil < 24) {\n timeInfoText = hoursUntil <= 1 ? 'Starting soon' : `In ${hoursUntil} hours`;\n } else {\n timeInfoText = `In ${daysUntil} day${daysUntil > 1 ? 's' : ''}`;\n }\n\n \/\/ Status badge\n const status = booking.status || 'pending';\n const statusDisplay = status.charAt(0).toUpperCase() + status.slice(1);\n\n \/\/ Campaign badge HTML\n const campaignBadge = isCampaignBooking ? `\n <div class=\"campaign-badge\" title=\"${booking.campaign_description ? booking.campaign_description.replace(\/\\n\/g, ' ').replace(\/\"\/g, '"') : 'Special Campaign Booking'}\">\n <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><circle cx=\"12\" cy=\"12\" r=\"10\"\/><line x1=\"22\" y1=\"12\" x2=\"18\" y2=\"12\"\/><line x1=\"6\" y1=\"12\" x2=\"2\" y2=\"12\"\/><line x1=\"12\" y1=\"6\" x2=\"12\" y2=\"2\"\/><line x1=\"12\" y1=\"22\" x2=\"12\" y2=\"18\"\/><\/svg>\n ${booking.campaign_name || 'Campaign Booking'}\n <\/div>\n ` : '';\n\n html += `\n <div class=\"booking-item ${isPast ? 'past' : 'upcoming'} ${isCampaignBooking ? 'campaign-booking' : ''}\" data-booking-id=\"${booking.id}\" data-branch=\"${booking.branch_code || 'unknown'}\">\n \n <div class=\"booking-card-header\">\n <div class=\"booking-card-header-content\">\n <div class=\"booking-date-block\">\n <div class=\"booking-calendar-icon\">\n <span class=\"booking-calendar-month\">${month}<\/span>\n <span class=\"booking-calendar-day\">${day}<\/span>\n <\/div>\n <div class=\"booking-datetime-text\">\n <span class=\"booking-day-name\">${dayName}<\/span>\n <span class=\"booking-time-display\">${timeFormatted}<\/span>\n <\/div>\n <\/div>\n <span class=\"booking-status-badge ${status}\">${statusDisplay}<\/span>\n <\/div>\n <\/div>\n\n \n <div class=\"booking-card-body\">\n ${campaignBadge}\n\n <h3 class=\"booking-venue-name\">\n <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z\"\/><circle cx=\"12\" cy=\"10\" r=\"3\"\/><\/svg>\n ${booking.branch_name || booking.branch_code || 'Restaurant'}\n <\/h3>\n\n <div class=\"booking-meta-row\">\n <div class=\"booking-meta-item\">\n <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2\"\/><circle cx=\"9\" cy=\"7\" r=\"4\"\/><path d=\"M23 21v-2a4 4 0 0 0-3-3.87\"\/><path d=\"M16 3.13a4 4 0 0 1 0 7.75\"\/><\/svg>\n <strong>${booking.party_size || 1}<\/strong> guests\n <\/div>\n ${booking.table_numbers ? `\n <div class=\"booking-meta-item\">\n <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><rect x=\"3\" y=\"3\" width=\"7\" height=\"7\"\/><rect x=\"14\" y=\"3\" width=\"7\" height=\"7\"\/><rect x=\"14\" y=\"14\" width=\"7\" height=\"7\"\/><rect x=\"3\" y=\"14\" width=\"7\" height=\"7\"\/><\/svg>\n Table <strong>${booking.table_numbers}<\/strong>\n <\/div>\n ` : ''}\n <\/div>\n\n ${booking.special_requests ? `\n <div class=\"booking-special-requests\">\n <div class=\"booking-special-requests-label\">Special Requests<\/div>\n ${booking.special_requests}\n <\/div>\n ` : ''}\n <\/div>\n\n \n <div class=\"booking-card-footer\">\n <div class=\"booking-time-info ${timeInfoClass}\">\n <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><circle cx=\"12\" cy=\"12\" r=\"10\"\/><polyline points=\"12 6 12 12 16 14\"\/><\/svg>\n ${timeInfoText}\n <\/div>\n <div class=\"booking-actions\">\n ${canModify ? `\n <button class=\"modify-booking-btn\" onclick=\"openBookingModal('${booking.branch_code}', ${booking.id})\">\n <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7\"\/><path d=\"M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z\"\/><\/svg>\n Modify\n <\/button>\n ` : (booking.campaign_id ? `\n <span class=\"modification-notice\">\n <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><circle cx=\"12\" cy=\"12\" r=\"10\"\/><line x1=\"12\" y1=\"8\" x2=\"12\" y2=\"12\"\/><line x1=\"12\" y1=\"16\" x2=\"12.01\" y2=\"16\"\/><\/svg>\n Campaign booking\n <\/span>\n ` : (!isPast && hoursUntil < 12 ? `\n <span class=\"modification-notice\">\n <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><circle cx=\"12\" cy=\"12\" r=\"10\"\/><polyline points=\"12 6 12 12 16 14\"\/><\/svg>\n Less than 12 hours\n <\/span>\n ` : ''))}\n <\/div>\n <\/div>\n <\/div>\n `;\n });\n\n console.log('Setting bookingsList innerHTML with HTML length:', html.length);\n bookingsList.innerHTML = html;\n\n \/\/ Ensure all bookings are visible by default\n setTimeout(() => {\n filterBookings('all');\n }, 100);\n }\n\n function filterBookings(filter) {\n console.log('filterBookings called with filter:', filter);\n\n \/\/ Update filter buttons\n document.querySelectorAll('.filter-btn').forEach(btn => {\n btn.classList.remove('active');\n });\n document.querySelector(`[data-filter=\"${filter}\"]`).classList.add('active');\n\n \/\/ Filter booking items\n const bookingItems = document.querySelectorAll('.booking-item');\n console.log('Found booking items for filtering:', bookingItems.length);\n\n let visibleCount = 0;\n bookingItems.forEach((item, index) => {\n const hasUpcoming = item.classList.contains('upcoming');\n const hasPast = item.classList.contains('past');\n\n console.log(`Booking item ${index}:`, {\n classes: item.className,\n hasUpcoming: hasUpcoming,\n hasPast: hasPast\n });\n\n let shouldShow = false;\n switch (filter) {\n case 'upcoming':\n shouldShow = hasUpcoming;\n break;\n case 'past':\n shouldShow = hasPast;\n break;\n case 'all':\n default:\n shouldShow = true;\n break;\n }\n\n item.style.display = shouldShow ? 'block' : 'none';\n if (shouldShow) visibleCount++;\n\n console.log(`Booking item ${index} display:`, shouldShow ? 'visible' : 'hidden');\n });\n\n console.log(`Filter '${filter}' applied: ${visibleCount}\/${bookingItems.length} bookings visible`);\n }\n\n function openBookingModal(branchCode, bookingId) {\n \/\/ Get booking details from the displayed item\n const bookingItem = document.querySelector(`[data-booking-id=\"${bookingId}\"][data-branch=\"${branchCode}\"]`);\n if (!bookingItem) return;\n\n const branchName = bookingItem.querySelector('.booking-venue-name').textContent.trim();\n const calendarMonth = bookingItem.querySelector('.booking-calendar-month').textContent;\n const calendarDay = bookingItem.querySelector('.booking-calendar-day').textContent;\n const timeDisplay = bookingItem.querySelector('.booking-time-display').textContent;\n const guestsText = bookingItem.querySelector('.booking-meta-item strong');\n const partySize = guestsText ? guestsText.textContent : '1';\n const specialRequests = bookingItem.querySelector('.booking-special-requests');\n const currentRequests = specialRequests ? specialRequests.textContent.replace('Special Requests', '').trim() : '';\n\n \/\/ For date parsing - we'll rely on the API to get the original date\n const dateTimeText = `${calendarMonth} ${calendarDay} at ${timeDisplay}`;\n const [datePart, timePart] = [dateTimeText.split(' at ')[0], timeDisplay];\n\n const modalBody = document.getElementById('bookingModalBody');\n modalBody.innerHTML = `\n <div style=\"margin-bottom: 20px;\">\n <p style=\"color: #86868b; margin-bottom: 16px;\">Modify your booking at <strong>${branchName}<\/strong><\/p>\n <p style=\"color: #ff9500; font-size: 14px; margin-bottom: 16px; display: flex; align-items: center; gap: 6px;\"><svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"m21.73 18-8-14a2 2 0 0 0-3.48 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3Z\"\/><line x1=\"12\" y1=\"9\" x2=\"12\" y2=\"13\"\/><line x1=\"12\" y1=\"17\" x2=\"12.01\" y2=\"17\"\/><\/svg>You can only modify bookings up to 12 hours before the booking time.<\/p>\n\n <div style=\"margin-bottom: 16px;\">\n <label style=\"display: block; color: #fff; font-weight: 600; margin-bottom: 8px;\">Date:<\/label>\n <input type=\"date\" id=\"bookingDate\" onchange=\"loadAvailableTimeSlots('${branchCode}', ${bookingId})\"\n style=\"width: 100%; padding: 12px; border: 1px solid #ddd; border-radius: 8px; font-size: 16px;\">\n <\/div>\n\n <div style=\"margin-bottom: 16px;\">\n <label style=\"display: block; color: #fff; font-weight: 600; margin-bottom: 8px;\">Time:<\/label>\n <select id=\"bookingTime\" onchange=\"loadTableLayout('${branchCode}', ${bookingId})\"\n style=\"width: 100%; padding: 12px; border: 1px solid #ddd; border-radius: 8px; font-size: 16px;\" disabled>\n <option value=\"\">Select a date first<\/option>\n <\/select>\n <\/div>\n\n <div style=\"margin-bottom: 16px;\">\n <label style=\"display: block; color: #fff; font-weight: 600; margin-bottom: 8px;\">Party Size :<\/label>\n <input type=\"text\" id=\"bookingPartySize\" value=\"${partySize} ${partySize === 1 ? 'person' : 'people'}\" readonly\n style=\"width: 100%; padding: 12px; border: 1px solid #ddd; border-radius: 8px; font-size: 16px; background: #f8f9fa; color: #666;\">\n <input type=\"hidden\" id=\"bookingPartySizeValue\" value=\"${partySize}\">\n <small style=\"color: #86868b; font-size: 12px;\">Party size cannot be changed when modifying a booking<\/small>\n <\/div>\n\n <div style=\"margin-bottom: 16px;\">\n <label style=\"display: block; color: #fff; font-weight: 600; margin-bottom: 8px;\">Special Requests:<\/label>\n <textarea id=\"bookingSpecialRequests\" rows=\"3\" placeholder=\"Any special requests or dietary requirements...\"\n style=\"width: 100%; padding: 12px; border: 1px solid #ddd; border-radius: 8px; font-size: 16px; resize: vertical;\">${currentRequests}<\/textarea>\n <\/div>\n\n \n <div id=\"tableSelectionSection\" style=\"display: none; margin-bottom: 16px;\">\n <div style=\"border-top: 1px solid #e5e5e7; padding-top: 16px;\">\n <h4 style=\"margin: 0 0 12px 0; color: #fff; font-size: 16px;\">\ud83c\udf7d\ufe0f Select Your Tables<\/h4>\n <div id=\"tableLayout\" style=\"border: 1px solid #ddd; border-radius: 8px; padding: 16px; background: #f9f9f9; min-height: 200px;\">\n <p style=\"text-align: center; color: #86868b; margin: 0;\">Select date, time, and party size to view available tables<\/p>\n <\/div>\n <\/div>\n <\/div>\n\n \n <div id=\"availabilitySection\" style=\"margin-top: 20px; display: none;\">\n <div style=\"border-top: 1px solid #e5e5e7; padding-top: 16px;\">\n <h4 style=\"margin: 0 0 12px 0; color: #1d1d1f; font-size: 16px;\">Table Availability<\/h4>\n <div id=\"availabilityDisplay\" style=\"background: #f8f9fa; padding: 16px; border-radius: 8px; border: 1px solid #e5e5e7;\">\n \n <\/div>\n <\/div>\n <\/div>\n\n <div style=\"text-align: center; margin-top: 20px;\">\n <button onclick=\"checkBookingAvailability('${branchCode}', ${bookingId})\" id=\"checkAvailabilityBtn\"\n style=\"background: #f2f2f7; color: #1d1d1f; border: 1px solid #d2d2d7; padding: 10px 20px; border-radius: 8px; font-size: 14px; cursor: pointer; margin-right: 10px;\">\n Check Detailed Availability\n <\/button>\n <div id=\"availabilityResult\" style=\"margin-top: 10px; padding: 10px; border-radius: 6px; display: none;\"><\/div>\n <\/div>\n <\/div>\n `;\n\n const modalFooter = document.getElementById('bookingModalFooter');\n modalFooter.innerHTML = `\n <button onclick=\"closeBookingModal()\" style=\"background: none; border: 1px solid rgba(0,0,0,0.1); color: #86868b; padding: 12px 24px; border-radius: 8px; margin-right: 12px; cursor: pointer;\">\n Cancel\n <\/button>\n <button onclick=\"saveBookingChanges('${branchCode}', ${bookingId})\" id=\"saveBookingBtn\" disabled\n style=\"background: #e5e5e7; color: #86868b; border: none; padding: 12px 24px; border-radius: 8px; font-weight: 600; cursor: not-allowed;\">\n Update Booking\n <\/button>\n `;\n\n \/\/ Set current values (simplified parsing)\n setTimeout(() => {\n \/\/ You'd want more robust date\/time parsing here\n document.getElementById('bookingDate').value = new Date().toISOString().split('T')[0]; \/\/ Placeholder\n \/\/ Load time slots for current date\n loadAvailableTimeSlots(branchCode, bookingId);\n }, 100);\n\n document.getElementById('bookingModal').style.display = 'flex';\n }\n\n function closeBookingModal() {\n document.getElementById('bookingModal').style.display = 'none';\n \/\/ Clear table selection\n selectedTables = [];\n updateSelectedTablesDisplay();\n }\n\n function showCreateBookingModal() {\n \/\/ Hide other sections\n document.querySelectorAll('.dashboard, .rewards-section, .bookings-section, .profile-section, .redeemed-rewards-section').forEach(section => {\n section.style.display = 'none';\n });\n\n \/\/ Get available branches for selection\n const modalBody = document.getElementById('createBookingModalBody');\n modalBody.innerHTML = `\n <div class=\"airbnb-form-group\">\n <label class=\"airbnb-form-label\">\n <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\">\n <path d=\"M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0118 0z\"\/>\n <circle cx=\"12\" cy=\"10\" r=\"3\"\/>\n <\/svg>\n Select Location\n <\/label>\n <select id=\"createBranchSelect\" class=\"airbnb-select\" onchange=\"loadCreateBookingForm()\">\n <option value=\"\">Choose a branch...<\/option>\n <\/select>\n <\/div>\n\n <div id=\"createBookingForm\" style=\"display: none;\">\n \n <\/div>\n `;\n\n const modalFooter = document.getElementById('createBookingModalFooter');\n modalFooter.innerHTML = `\n <button onclick=\"closeCreateBookingModal()\" class=\"airbnb-btn airbnb-btn-secondary\" style=\"flex: 1;\">\n Cancel\n <\/button>\n <button onclick=\"proceedToPayment()\" id=\"createBookingBtn\" class=\"airbnb-btn airbnb-btn-primary\" disabled style=\"flex: 2;\">\n <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" style=\"width: 18px; height: 18px; display: inline-block; vertical-align: middle; margin-right: 6px;\">\n <rect x=\"1\" y=\"4\" width=\"22\" height=\"16\" rx=\"2\" ry=\"2\"\/>\n <line x1=\"1\" y1=\"10\" x2=\"23\" y2=\"10\"\/>\n <\/svg>\n Continue to Payment\n <\/button>\n `;\n\n \/\/ Load available branches\n loadAvailableBranches();\n\n \/\/ Show the create booking section\n const createBookingSection = document.getElementById('createBookingSection');\n createBookingSection.style.display = 'block';\n createBookingSection.style.opacity = '0';\n createBookingSection.style.transform = 'translateY(20px)';\n\n \/\/ Animate in\n setTimeout(() => {\n createBookingSection.style.transition = 'opacity 0.3s ease, transform 0.3s ease';\n createBookingSection.style.opacity = '1';\n createBookingSection.style.transform = 'translateY(0)';\n }, 50);\n\n \/\/ Scroll to top\n window.scrollTo(0, 0);\n }\n\n function closeCreateBookingModal() {\n const createBookingSection = document.getElementById('createBookingSection');\n\n \/\/ Animate out\n createBookingSection.style.transition = 'opacity 0.2s ease, transform 0.2s ease';\n createBookingSection.style.opacity = '0';\n createBookingSection.style.transform = 'translateY(20px)';\n\n setTimeout(() => {\n createBookingSection.style.display = 'none';\n\n \/\/ Clear table selection\n selectedTables = [];\n updateSelectedTablesDisplay();\n updateCreateSelectedTablesDisplay();\n\n \/\/ Hide table selection section\n const tableSection = document.getElementById('createTableSelectionSection');\n if (tableSection) {\n tableSection.style.display = 'none';\n }\n\n \/\/ Show bookings section\n showBookings();\n }, 200);\n }\n\n function loadAvailableBranches() {\n const branchSelect = document.getElementById('createBranchSelect');\n\n \/\/ Show loading state\n branchSelect.innerHTML = '<option value=\"\">Loading branches...<\/option>';\n branchSelect.disabled = true;\n\n \/\/ Load branches from the booking connector using centralized AJAX handler\n makeAjaxRequest('https:\/\/reserve.samuraiyakiniku.com\/wp-admin\/admin-ajax.php', {\n action: 'rls_get_active_branches'\n })\n .then(data => {\n \/\/ Re-enable the select\n branchSelect.disabled = false;\n\n if (data.success && data.data) {\n \/\/ Clear existing options except the default\n branchSelect.innerHTML = '<option value=\"\">Choose a branch...<\/option>';\n\n \/\/ Add branch options from the booking connector\n Object.entries(data.data).forEach(([branchCode, branchData]) => {\n const option = document.createElement('option');\n option.value = branchCode;\n option.textContent = branchData.name;\n branchSelect.appendChild(option);\n });\n } else {\n console.error('Failed to load branches:', data);\n \/\/ Fallback to default message\n branchSelect.innerHTML = '<option value=\"\">No branches available<\/option>';\n }\n })\n .catch(error => {\n console.error('Error loading branches:', error);\n \/\/ Re-enable the select\n branchSelect.disabled = false;\n \/\/ Fallback to default message\n branchSelect.innerHTML = '<option value=\"\">Error loading branches<\/option>';\n });\n }\n\n function loadCreateBookingForm() {\n const branchCode = document.getElementById('createBranchSelect').value;\n const formContainer = document.getElementById('createBookingForm');\n\n if (!branchCode) {\n formContainer.style.display = 'none';\n document.getElementById('createBookingBtn').disabled = true;\n return;\n }\n\n formContainer.innerHTML = `\n <hr class=\"airbnb-divider\">\n\n \n <div id=\"campaignBannerContainer\"><\/div>\n\n <div class=\"airbnb-form-group\">\n <label class=\"airbnb-form-label\">\n <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\">\n <path d=\"M20 21v-2a4 4 0 00-4-4H8a4 4 0 00-4 4v2\"\/>\n <circle cx=\"12\" cy=\"7\" r=\"4\"\/>\n <\/svg>\n Your Name\n <\/label>\n <input type=\"text\" id=\"createCustomerName\" class=\"airbnb-input\" onchange=\"validateCreateBookingForm()\"\n placeholder=\"Enter your name\"\n value=\"${currentCustomer ? (currentCustomer.first_name + ' ' + (currentCustomer.last_name || '')).trim() : ''}\">\n <\/div>\n\n <div class=\"airbnb-form-group\">\n <label class=\"airbnb-form-label\">\n <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\">\n <path d=\"M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z\"\/>\n <polyline points=\"22,6 12,13 2,6\"\/>\n <\/svg>\n Email\n <\/label>\n <input type=\"email\" id=\"createCustomerEmail\" class=\"airbnb-input\" onchange=\"validateCreateBookingForm()\"\n placeholder=\"your@email.com\"\n value=\"${currentCustomer ? currentCustomer.email || '' : ''}\">\n <\/div>\n\n <div class=\"airbnb-form-group\">\n <label class=\"airbnb-form-label\">\n <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\">\n <path d=\"M17 21v-2a4 4 0 00-4-4H5a4 4 0 00-4 4v2\"\/>\n <circle cx=\"9\" cy=\"7\" r=\"4\"\/>\n <path d=\"M23 21v-2a4 4 0 00-3-3.87\"\/>\n <path d=\"M16 3.13a4 4 0 010 7.75\"\/>\n <\/svg>\n Guests\n <\/label>\n <div class=\"airbnb-guest-counter\">\n <div class=\"airbnb-guest-info\">\n <h4>Party Size<\/h4>\n <p>Including children with seats<\/p>\n <\/div>\n <div class=\"airbnb-counter-controls\">\n <button type=\"button\" class=\"airbnb-counter-btn\" onclick=\"adjustCreatePartySize(-1)\">\u2212<\/button>\n <span id=\"createPartySizeValue\" class=\"airbnb-counter-value\">4<\/span>\n <button type=\"button\" class=\"airbnb-counter-btn\" onclick=\"adjustCreatePartySize(1)\">+<\/button>\n <\/div>\n <\/div>\n <\/div>\n\n <div class=\"airbnb-form-group\">\n <label class=\"airbnb-form-label\">\n <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\">\n <rect x=\"3\" y=\"4\" width=\"18\" height=\"18\" rx=\"2\" ry=\"2\"\/>\n <line x1=\"16\" y1=\"2\" x2=\"16\" y2=\"6\"\/>\n <line x1=\"8\" y1=\"2\" x2=\"8\" y2=\"6\"\/>\n <line x1=\"3\" y1=\"10\" x2=\"21\" y2=\"10\"\/>\n <\/svg>\n Date\n <\/label>\n <input type=\"date\" id=\"createBookingDate\" class=\"airbnb-input\" onchange=\"loadCreateAvailableTimeSlots('${branchCode}')\"\n min=\"${new Date().toISOString().split('T')[0]}\">\n <\/div>\n\n <div class=\"airbnb-form-group\">\n <label class=\"airbnb-form-label\">\n <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\">\n <circle cx=\"12\" cy=\"12\" r=\"10\"\/>\n <polyline points=\"12 6 12 12 16 14\"\/>\n <\/svg>\n Time\n <\/label>\n <select id=\"createBookingTime\" class=\"airbnb-select\" onchange=\"loadCreateTableLayout('${branchCode}')\">\n <option value=\"\">Select date first...<\/option>\n <\/select>\n <\/div>\n\n <div class=\"airbnb-form-group\">\n <label class=\"airbnb-form-label\">\n <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\">\n <line x1=\"4\" y1=\"9\" x2=\"20\" y2=\"9\"\/>\n <line x1=\"4\" y1=\"15\" x2=\"20\" y2=\"15\"\/>\n <line x1=\"10\" y1=\"3\" x2=\"8\" y2=\"21\"\/>\n <line x1=\"16\" y1=\"3\" x2=\"14\" y2=\"21\"\/>\n <\/svg>\n Special Requests\n <\/label>\n <p class=\"airbnb-form-hint\">Optional - dietary requirements, celebrations, etc.<\/p>\n <textarea id=\"createSpecialRequests\" class=\"airbnb-textarea\"\n placeholder=\"Any special requests or preferences...\"><\/textarea>\n <\/div>\n\n \n <div id=\"createTableSelectionSection\" style=\"display: none;\">\n <hr class=\"airbnb-divider\">\n <div class=\"airbnb-table-section\">\n <div class=\"airbnb-table-header\">\n <svg viewBox=\"0 0 24 24\" fill=\"currentColor\">\n <path d=\"M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 15l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z\"\/>\n <\/svg>\n <h4>Select Your Tables<\/h4>\n <\/div>\n <div id=\"createTableLayout\" style=\"border: 1px solid #ebebeb; border-radius: 12px; padding: 0px; background: #fff; min-height: 200px;\">\n <p style=\"text-align: center; color: #717171; margin: 0; padding: 40px 20px; font-size: 14px;\">Select date, time, and party size to view available tables<\/p>\n <\/div>\n\n \n <div id=\"createSelectedTablesDisplay\" class=\"airbnb-selected-info\" style=\"display: none;\">\n <span><strong style=\"color: #ff385c;\">Selected:<\/strong> <span id=\"createSelectedTablesList\">None<\/span><\/span>\n <span><strong>Capacity:<\/strong> <span id=\"createSelectedTablesCapacity\">0<\/span> guests<\/span>\n <\/div>\n <\/div>\n <\/div>\n `;\n\n formContainer.style.display = 'block';\n validateCreateBookingForm();\n }\n\n function adjustCreatePartySize(change) {\n const currentValue = parseInt(document.getElementById('createPartySizeValue').textContent);\n\n \/\/ Determine minimum party size based on active campaign\n let minPartySize = 1; \/\/ Default minimum\n if (currentCampaign && currentCampaign.campaign && currentCampaign.campaign.minimum_pax) {\n minPartySize = parseInt(currentCampaign.campaign.minimum_pax);\n console.log('Campaign minimum pax applied: min party size =', minPartySize);\n }\n\n \/\/ Determine maximum party size based on campaign capacity\n let maxPartySize = 20; \/\/ Default maximum\n if (currentCampaignCapacity !== null) {\n if (currentCampaignCapacity > 0) {\n maxPartySize = Math.min(20, currentCampaignCapacity);\n console.log('Campaign capacity limit applied: max party size =', maxPartySize);\n }\n }\n\n const newValue = Math.max(minPartySize, Math.min(maxPartySize, currentValue + change));\n document.getElementById('createPartySizeValue').textContent = newValue;\n\n \/\/ Update button states based on limits\n updatePartySizeButtonStates(newValue, maxPartySize, minPartySize);\n\n \/\/ Recheck campaign when party size changes\n const date = document.getElementById('createBookingDate').value;\n const branchCode = document.getElementById('createBranchSelect').value;\n if (date && branchCode) {\n checkBookingCampaign(date, branchCode, newValue);\n }\n\n validateCreateBookingForm();\n }\n\n function updatePartySizeButtonStates(currentValue, maxValue, minValue = 1) {\n \/\/ Find the party size buttons (works with both old and new Airbnb styles)\n const minusBtn = document.querySelector('button[onclick=\"adjustCreatePartySize(-1)\"]');\n const plusBtn = document.querySelector('button[onclick=\"adjustCreatePartySize(1)\"]');\n\n if (minusBtn && plusBtn) {\n \/\/ Disable minus button if at minimum\n minusBtn.disabled = currentValue <= minValue;\n\n \/\/ Disable plus button if at maximum\n plusBtn.disabled = currentValue >= maxValue;\n\n \/\/ Show limit indicators\n if (maxValue < 20 || minValue > 1) {\n showPartySizeLimitIndicator(maxValue, minValue);\n } else {\n hidePartySizeLimitIndicator();\n }\n }\n }\n\n function showPartySizeLimitIndicator(maxValue, minValue = 1) {\n \/\/ Remove existing indicator\n const existingIndicator = document.getElementById('partySizeLimitIndicator');\n if (existingIndicator) {\n existingIndicator.remove();\n }\n\n \/\/ Find the guest counter container (works with Airbnb layout)\n const guestCounter = document.querySelector('.airbnb-guest-counter') ||\n document.getElementById('createPartySizeValue')?.parentElement?.parentElement;\n if (!guestCounter) return;\n\n const indicator = document.createElement('div');\n indicator.id = 'partySizeLimitIndicator';\n indicator.style.cssText = `\n font-size: 12px;\n color: #e00b41;\n margin-top: 12px;\n padding: 8px 12px;\n background: #fff5f7;\n border-radius: 8px;\n border: 1px solid #ffccd5;\n `;\n\n \/\/ Create appropriate message based on limits\n let message = '';\n if (minValue > 1 && maxValue < 20) {\n message = `Campaign requires ${minValue}-${maxValue} guests`;\n } else if (minValue > 1) {\n message = `Campaign minimum: ${minValue} guests`;\n } else if (maxValue < 20) {\n message = `Only ${maxValue} spots remaining`;\n }\n\n indicator.textContent = message;\n guestCounter.parentElement.appendChild(indicator);\n }\n\n function hidePartySizeLimitIndicator() {\n const indicator = document.getElementById('partySizeLimitIndicator');\n if (indicator) {\n indicator.remove();\n }\n }\n\n function validateCreateBookingForm(forceEnabled = null) {\n const createBtn = document.getElementById('createBookingBtn');\n if (!createBtn) return;\n\n \/\/ Check if all required fields are filled\n const name = document.getElementById('createCustomerName')?.value.trim();\n const email = document.getElementById('createCustomerEmail')?.value.trim();\n const date = document.getElementById('createBookingDate')?.value;\n const time = document.getElementById('createBookingTime')?.value;\n const partySize = parseInt(document.getElementById('createPartySizeValue')?.textContent || '0');\n\n let enabled = forceEnabled;\n if (enabled === null) {\n \/\/ Auto-determine if button should be enabled (same logic as modify booking)\n enabled = false;\n if (name) {\n if (email) {\n if (date) {\n if (time) {\n if (partySize > 0) {\n enabled = true;\n }\n }\n }\n }\n }\n\n \/\/ If table layout is shown, require table selection (same logic as modify booking)\n const tableSection = document.getElementById('createTableSelectionSection');\n if (tableSection) {\n if (tableSection.style.display !== 'none') {\n if (selectedTables.length === 0) {\n enabled = false;\n }\n }\n }\n }\n\n if (enabled) {\n createBtn.disabled = false;\n createBtn.style.background = 'blue';\n createBtn.style.color = 'white';\n createBtn.style.cursor = 'pointer';\n } else {\n createBtn.disabled = true;\n createBtn.style.background = 'var(--color-fill-secondary)';\n createBtn.style.color = 'var(--color-label-secondary)';\n createBtn.style.cursor = 'not-allowed';\n }\n }\n\n function loadCreateAvailableTimeSlots(branchCode) {\n const date = document.getElementById('createBookingDate').value;\n const partySize = parseInt(document.getElementById('createPartySizeValue').textContent);\n const timeSelect = document.getElementById('createBookingTime');\n\n if (!date || !partySize) {\n timeSelect.innerHTML = '<option value=\"\">Select date and party size first...<\/option>';\n return;\n }\n\n \/\/ Check for active booking campaigns first\n checkBookingCampaign(date, branchCode, partySize);\n\n timeSelect.innerHTML = '<option value=\"\">Loading time slots...<\/option>';\n\n makeAjaxRequest('https:\/\/reserve.samuraiyakiniku.com\/wp-admin\/admin-ajax.php', {\n action: 'rls_get_available_time_slots',\n branch_code: branchCode,\n date: date,\n party_size: partySize\n })\n .then(data => {\n console.log('Time slots response:', data); \/\/ Debug logging\n\n \/\/ Handle nested data structure: data.data.time_slots\n const timeSlots = data.success && data.data && data.data.data && data.data.data.time_slots\n ? data.data.data.time_slots\n : (data.success && data.data && data.data.time_slots ? data.data.time_slots : null);\n\n if (timeSlots && timeSlots.length > 0) {\n timeSelect.innerHTML = '<option value=\"\">Select a time...<\/option>';\n timeSlots.forEach(slot => {\n const option = document.createElement('option');\n option.value = slot.time;\n \/\/ Use display_time if available, otherwise use time\n option.textContent = slot.display_time || slot.time;\n if (slot.available_tables) {\n option.textContent += ` (${slot.available_tables} tables available)`;\n }\n timeSelect.appendChild(option);\n });\n } else {\n timeSelect.innerHTML = '<option value=\"\">No time slots available<\/option>';\n console.log('No time slots found in response:', data);\n }\n validateCreateBookingForm();\n })\n .catch(error => {\n console.error('Error loading time slots:', error);\n timeSelect.innerHTML = '<option value=\"\">Error loading time slots<\/option>';\n });\n }\n\n function proceedToPayment() {\n const branchCode = document.getElementById('createBranchSelect').value;\n const partySize = parseInt(document.getElementById('createPartySizeValue').textContent);\n\n \/\/ Validate table selection if tables are selected (strict validation for final submission)\n if (selectedTables.length > 0) {\n const validation = validateTableCombination(selectedTables, partySize, false);\n if (!validation.valid) {\n alert('Table Selection Error: ' + validation.message);\n return;\n }\n }\n\n const bookingData = {\n customer_name: document.getElementById('createCustomerName').value.trim(),\n customer_phone: currentCustomer.phone,\n customer_email: document.getElementById('createCustomerEmail').value.trim(),\n booking_date: document.getElementById('createBookingDate').value,\n booking_time: document.getElementById('createBookingTime').value,\n party_size: partySize,\n special_requests: document.getElementById('createSpecialRequests').value.trim()\n };\n\n \/\/ Include selected tables if any are selected\n if (selectedTables.length > 0) {\n bookingData.table_ids = selectedTables;\n }\n\n \/\/ Include campaign data if this is a campaign booking\n if (currentCampaign && currentCampaign.campaign) {\n bookingData.is_campaign_booking = true;\n bookingData.campaign_id = currentCampaign.campaign.id;\n bookingData.campaign_name = currentCampaign.campaign.name;\n bookingData.campaign_description = currentCampaign.campaign.description;\n\n console.log('Adding campaign data to booking:', {\n campaign_id: bookingData.campaign_id,\n campaign_name: bookingData.campaign_name\n });\n } else {\n console.log('No active campaign - creating regular booking');\n }\n\n \/\/ Show payment method selection\n showPaymentMethodSelection(branchCode, bookingData);\n }\n\n function showPaymentMethodSelection(branchCode, bookingData) {\n const modalBody = document.getElementById('createBookingModalBody');\n modalBody.innerHTML = `\n\n <div style=\"margin-bottom: var(--spacing-xl);\">\n <div style=\"background: var(--color-fill-primary); padding: var(--spacing-lg); border-radius: var(--radius-lg); margin-bottom: var(--spacing-lg);\">\n <h4 style=\"margin: 0 0 var(--spacing-md) 0; color: #1d1d1f; font-size: var(--font-size-callout); font-weight: var(--font-weight-semibold); line-height: var(--line-height-normal); display: flex; align-items: center; gap: 8px;\"><svg width=\"18\" height=\"18\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><rect x=\"8\" y=\"2\" width=\"8\" height=\"4\" rx=\"1\" ry=\"1\"\/><path d=\"M16 4h2a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h2\"\/><\/svg>Booking Summary<\/h4>\n <div style=\"display: grid; gap: var(--spacing-xs);\">\n <p style=\"margin: 0; color: #86868b; font-size: var(--font-size-subhead); line-height: var(--line-height-normal);\"><span style=\"font-weight: var(--font-weight-medium);\">Date:<\/span> ${bookingData.booking_date}<\/p>\n <p style=\"margin: 0; color: #86868b; font-size: var(--font-size-subhead); line-height: var(--line-height-normal);\"><span style=\"font-weight: var(--font-weight-medium);\">Time:<\/span> ${bookingData.booking_time}<\/p>\n <p style=\"margin: 0; color: #86868b; font-size: var(--font-size-subhead); line-height: var(--line-height-normal);\"><span style=\"font-weight: var(--font-weight-medium);\">Party Size:<\/span> ${bookingData.party_size} people<\/p>\n <p style=\"margin: 0; color: #86868b; font-size: var(--font-size-subhead); line-height: var(--line-height-normal);\"><span style=\"font-weight: var(--font-weight-medium);\">*Amount:<\/span> <span id=\"bookingAmount\" style=\"font-weight: var(--font-weight-semibold);\">Calculating...<\/span><\/p>\n <\/div>\n <\/div>\n\n <div style=\"text-align: left; margin-bottom: var(--spacing-xl); padding: var(--spacing-lg); background: #fff; border-radius: var(--radius-md);\">\n <p style=\"color: var(--color-label-primary); font-size: var(--font-size-subhead); font-weight: var(--font-weight-medium); margin: 0; line-height: var(--line-height-relaxed);\">*Deposit RM5\/Pax akan dikembalikan bila anda datang ke kedai. RM2.00 caj untuk booking.<\/p>\n <\/div>\n\n <div style=\"text-align: center; margin-bottom: var(--spacing-xl);\">\n <h3 style=\"color: #FFF; font-size: var(--font-size-headline); font-weight: var(--font-weight-semibold); margin-bottom: var(--spacing-sm); line-height: var(--line-height-tight);\">\ud83d\udcb3 Select Payment Method<\/h3>\n <p style=\"color: var(--color-label-secondary); font-size: var(--font-size-subhead); margin: 0; line-height: var(--line-height-normal);\">Choose your preferred payment method to complete your booking<\/p>\n <\/div>\n\n <div style=\"display: grid; gap: var(--spacing-md);\">\n <button onclick=\"initiatePayment('${branchCode}', '1')\" class=\"payment-method-btn\"\n style=\"display: flex; align-items: center; padding: var(--spacing-lg); border: 2px solid var(--color-fill-tertiary); border-radius: var(--radius-lg); background: var(--color-fill-primary); cursor: pointer; transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);\">\n <div style=\"width: 44px; height: 44px; background: blue; border-radius: var(--radius-sm); display: flex; align-items: center; justify-content: center; margin-right: var(--spacing-md); font-size: var(--font-size-headline);\">\n \ud83c\udfe6\n <\/div>\n <div style=\"text-align: left;\">\n <div style=\"font-weight: var(--font-weight-semibold); color: #1d1d1f; font-size: var(--font-size-body); line-height: var(--line-height-normal);\">FPX Online Banking<\/div>\n <div style=\"font-size: var(--font-size-subhead); color: var(--color-label-secondary); line-height: var(--line-height-normal);\">Pay directly from your bank account<\/div>\n <\/div>\n <\/button>\n <\/div>\n <\/div>\n `;\n\n const modalFooter = document.getElementById('createBookingModalFooter');\n modalFooter.innerHTML = `\n `;\n\n \/\/ Store booking data for payment\n window.pendingBookingData = { branchCode, bookingData };\n\n \/\/ Calculate and display amount\n calculateBookingAmount(bookingData);\n\n \/\/ Add hover effects to payment buttons\n setTimeout(() => {\n document.querySelectorAll('.payment-method-btn').forEach(btn => {\n btn.addEventListener('mouseenter', function() {\n this.style.borderColor = '#007AFF';\n this.style.transform = 'translateY(-2px)';\n this.style.boxShadow = '0 4px 12px rgba(0, 122, 255, 0.15)';\n });\n btn.addEventListener('mouseleave', function() {\n this.style.borderColor = '#e5e5e7';\n this.style.transform = 'translateY(0)';\n this.style.boxShadow = 'none';\n });\n });\n }, 100);\n }\n\n function calculateBookingAmount(bookingData) {\n \/\/ This would typically call the backend to calculate the exact amount\n \/\/ For now, we'll use a simple calculation\n const baseAmount = 2.00; \/\/ RM 10 base fee\n const perPersonFee = 5.00; \/\/ No per-person fee by default\n const totalAmount = baseAmount + (perPersonFee * bookingData.party_size);\n\n document.getElementById('bookingAmount').textContent = `RM ${totalAmount.toFixed(2)}`;\n }\n\n async function initiatePayment(branchCode, paymentChannel) {\n const { bookingData } = window.pendingBookingData;\n\n \/\/ Show loading state\n const paymentButtons = document.querySelectorAll('.payment-method-btn');\n paymentButtons.forEach(btn => {\n btn.disabled = true;\n btn.style.opacity = '0.6';\n });\n\n try {\n \/\/ Force refresh nonce before payment to ensure it's fresh\n console.log('\ud83d\udd04 Refreshing nonce before payment...');\n await refreshNonce();\n console.log('\u2705 Nonce refreshed:', nonceStore.booking.substring(0, 10) + '...');\n\n \/\/ Add payment channel to booking data\n const paymentData = {\n ...bookingData,\n payment_channel: paymentChannel\n };\n\n console.log('\ud83d\udce4 Payment request data:', {\n action: 'rls_initiate_payment',\n branch_code: branchCode,\n nonce: nonceStore.booking.substring(0, 10) + '...',\n bookingDataKeys: Object.keys(paymentData)\n });\n\n const data = await makeAjaxRequest('https:\/\/reserve.samuraiyakiniku.com\/wp-admin\/admin-ajax.php', {\n action: 'rls_initiate_payment',\n branch_code: branchCode,\n ...paymentData\n });\n\n console.log('\ud83d\udce5 Payment response:', data);\n\n if (data.success && data.data.payment_url) {\n \/\/ Redirect to BayarCash payment page\n window.location.href = data.data.payment_url;\n } else {\n const errorMessage = data.data?.message || 'Failed to initiate payment';\n showBookingMessage('error', errorMessage);\n\n \/\/ Re-enable buttons\n paymentButtons.forEach(btn => {\n btn.disabled = false;\n btn.style.opacity = '1';\n });\n }\n } catch (error) {\n console.error('Error initiating payment:', error);\n showBookingMessage('error', 'Failed to initiate payment. Please try again.');\n\n \/\/ Re-enable buttons\n paymentButtons.forEach(btn => {\n btn.disabled = false;\n btn.style.opacity = '1';\n });\n }\n }\n\n function loadCreateTableLayout(branchCode) {\n const date = document.getElementById('createBookingDate').value;\n const time = document.getElementById('createBookingTime').value;\n const partySize = parseInt(document.getElementById('createPartySizeValue').textContent);\n\n const tableSection = document.getElementById('createTableSelectionSection');\n const tableLayout = document.getElementById('createTableLayout');\n\n if (!date || !time || !partySize) {\n tableSection.style.display = 'none';\n validateCreateBookingForm();\n return;\n }\n\n console.log('Loading create table layout for:', { branchCode, date, time, partySize });\n\n \/\/ Show table section and loading state\n tableSection.style.display = 'block';\n tableLayout.innerHTML = '<div class=\"rbs-loading\">Loading table layout...<\/div>';\n\n \/\/ Clear previous selection\n selectedTables = [];\n updateCreateSelectedTablesDisplay();\n\n makeAjaxRequest('https:\/\/reserve.samuraiyakiniku.com\/wp-admin\/admin-ajax.php', {\n action: 'rls_get_table_layout',\n branch_code: branchCode,\n date: date,\n time: time,\n party_size: partySize,\n infant_count: 0\n })\n .then(data => {\n console.log('Create table layout response:', data);\n\n \/\/ Handle nested data structure (same as modify booking)\n const layoutData = data.success && data.data && data.data.data\n ? data.data.data\n : (data.success && data.data ? data.data : null);\n\n if (layoutData && (layoutData.table_layout || layoutData.tables)) {\n renderCreateTableLayout(layoutData);\n } else {\n tableLayout.innerHTML = '<p style=\"text-align: center; color: #ff3b30; margin: 0;\">No tables available for this time slot<\/p>';\n console.log('No table layout found in response:', layoutData);\n }\n validateCreateBookingForm();\n })\n .catch(error => {\n console.error('Error loading create table layout:', error);\n tableLayout.innerHTML = '<p style=\"text-align: center; color: #ff3b30; margin: 0;\">Error loading table layout<\/p>';\n validateCreateBookingForm();\n });\n }\n\n \/\/ Table selection variables\n let selectedTables = [];\n let currentTableLayout = null;\n\n function loadTableLayout(branchCode, bookingId) {\n const date = document.getElementById('bookingDate').value;\n const time = document.getElementById('bookingTime').value;\n const partySize = document.getElementById('bookingPartySizeValue').value;\n\n const tableSection = document.getElementById('tableSelectionSection');\n const tableLayout = document.getElementById('tableLayout');\n\n if (!date || !time || !partySize) {\n tableSection.style.display = 'none';\n return;\n }\n\n console.log('Loading table layout for:', { branchCode, date, time, partySize, bookingId });\n\n \/\/ Show table section and loading state\n tableSection.style.display = 'block';\n tableLayout.innerHTML = '<div class=\"rbs-loading\">Loading table layout...<\/div>';\n\n \/\/ Clear previous selection\n selectedTables = [];\n updateSelectedTablesDisplay();\n\n \/\/ Use centralized AJAX handler with automatic nonce refresh\n makeAjaxRequest('https:\/\/reserve.samuraiyakiniku.com\/wp-admin\/admin-ajax.php', {\n action: 'rls_get_table_layout',\n branch_code: branchCode,\n date: date,\n time: time,\n party_size: partySize,\n infant_count: 0,\n exclude_booking_id: bookingId\n })\n .then(data => {\n console.log('Table layout API response:', data);\n\n if (data.success) {\n \/\/ Handle nested data structure\n let layoutData = null;\n if (data.data && data.data.data) {\n layoutData = data.data.data;\n } else if (data.data) {\n layoutData = data.data;\n }\n\n if (layoutData && layoutData.table_layout) {\n currentTableLayout = layoutData;\n renderTableLayout(layoutData);\n } else {\n tableLayout.innerHTML = '<div class=\"rbs-no-tables\"><p>No table layout available<\/p><\/div>';\n }\n } else {\n console.error('Table layout error:', data);\n tableLayout.innerHTML = '<div class=\"rbs-no-tables\"><p>Error loading table layout<\/p><\/div>';\n }\n })\n .catch(error => {\n console.error('Table layout fetch error:', error);\n tableLayout.innerHTML = '<div class=\"rbs-no-tables\"><p>Error loading table layout<\/p><\/div>';\n });\n }\n\n function renderTableLayout(layoutData) {\n const tableLayout = document.getElementById('tableLayout');\n const layout = layoutData.table_layout;\n\n if (!layout || (!layout.left_side && !layout.right_side)) {\n tableLayout.innerHTML = '<div class=\"rbs-no-tables\"><p>No tables available for this time slot<\/p><\/div>';\n return;\n }\n\n let html = '';\n\n \/\/ Add entrances at the top if available\n if (layoutData.entrances && layoutData.entrances.length > 0) {\n const topEntrances = layoutData.entrances.filter(entrance => parseInt(entrance.row_position) === 0);\n topEntrances.forEach(entrance => {\n html += `<div class=\"rbs-entrance\">${entrance.name || 'Entrance'}<\/div>`;\n });\n }\n\n \/\/ Create restaurant layout container (matching public form)\n html += '<div class=\"rbs-restaurant-layout\">';\n\n \/\/ Organize tables by rows\n const leftTables = layout.left_side || {};\n const rightTables = layout.right_side || {};\n\n \/\/ Determine the maximum row number\n let maxRow = 0;\n for (let row in leftTables) {\n maxRow = Math.max(maxRow, parseInt(row));\n }\n for (let row in rightTables) {\n maxRow = Math.max(maxRow, parseInt(row));\n }\n maxRow = Math.max(maxRow, 1);\n\n \/\/ Create all rows - matching public form structure exactly\n for (let row = 1; row <= maxRow; row++) {\n \/\/ Left side tables for this row\n html += `<div class=\"rbs-row${row}-left rbs-table-row\">`;\n if (leftTables[row] && leftTables[row].length > 0) {\n const rowTables = leftTables[row].sort((a, b) => a.position - b.position);\n rowTables.forEach(table => {\n html += renderTableElementPublicStyle(table, 'left-side');\n });\n }\n html += '<\/div>';\n\n \/\/ Center aisle\n html += '<div class=\"rbs-center-aisle\"><\/div>';\n\n \/\/ Right side tables for this row\n html += `<div class=\"rbs-row${row}-right rbs-table-row\">`;\n if (rightTables[row] && rightTables[row].length > 0) {\n const rowTables = rightTables[row].sort((a, b) => a.position - b.position);\n rowTables.forEach(table => {\n html += renderTableElementPublicStyle(table, 'right-side');\n });\n }\n html += '<\/div>';\n }\n\n html += '<\/div>';\n\n \/\/ Add suggested tables info if available\n\n\n tableLayout.innerHTML = html;\n\n \/\/ Add click handlers to tables\n document.querySelectorAll('.rbs-table.available').forEach(table => {\n table.addEventListener('click', function() {\n toggleTableSelection(this);\n });\n });\n }\n\n function renderTableElementPublicStyle(table, side) {\n const isAvailable = table.available;\n const isSelected = selectedTables.includes(table.id);\n\n \/\/ Build classes array matching public form exactly\n const classes = ['rbs-table', side, 'combinable'];\n\n \/\/ Add capacity-based class for styling\n if (table.capacity <= 2) {\n classes.push('two-person');\n } else if (table.capacity <= 4) {\n classes.push('four-person');\n } else if (table.capacity <= 6) {\n classes.push('six-person');\n } else {\n classes.push('large-table');\n }\n\n \/\/ Add availability\/selection status\n if (isSelected) {\n classes.push('selected');\n } else if (isAvailable) {\n classes.push('available');\n } else {\n classes.push('unavailable');\n }\n\n return `\n <div class=\"${classes.join(' ')}\"\n data-table-id=\"${table.id}\"\n data-capacity=\"${table.capacity}\"\n data-infant-capacity=\"${table.infant_capacity || 0}\"\n data-row=\"${table.row_number}\"\n data-position=\"${table.position}\"\n data-available=\"${isAvailable}\">\n <div class=\"rbs-table-number\">${table.table_number}<\/div>\n <div class=\"rbs-table-capacity\">${table.capacity}pax<\/div>\n <\/div>\n `;\n }\n\n \/\/ Keep the old function for backward compatibility\n function renderTableElement(table) {\n return renderTableElementPublicStyle(table, 'center');\n }\n\n function toggleTableSelection(tableElement) {\n if (!tableElement || !tableElement.dataset) {\n console.error('Invalid table element passed to toggleTableSelection');\n return;\n }\n\n const tableId = parseInt(tableElement.dataset.tableId);\n const isAvailable = tableElement.dataset.available === 'true';\n\n if (!tableId || isNaN(tableId)) {\n console.error('Invalid table ID:', tableElement.dataset.tableId);\n return;\n }\n\n if (!isAvailable) return;\n\n if (selectedTables.includes(tableId)) {\n \/\/ Deselect table\n selectedTables = selectedTables.filter(id => id !== tableId);\n tableElement.classList.remove('selected');\n tableElement.classList.add('available');\n } else {\n \/\/ Select table\n selectedTables.push(tableId);\n tableElement.classList.remove('available');\n tableElement.classList.add('selected');\n }\n\n updateSelectedTablesDisplay();\n updateSaveButton();\n }\n\n function updateSelectedTablesDisplay() {\n const display = document.getElementById('selectedTablesDisplay');\n const tablesList = document.getElementById('selectedTablesList');\n const capacitySpan = document.getElementById('selectedTablesCapacity');\n\n \/\/ Check if elements exist\n if (!display || !tablesList || !capacitySpan) {\n console.warn('Selected tables display elements not found');\n return;\n }\n\n if (selectedTables.length === 0) {\n display.style.display = 'none';\n return;\n }\n\n display.style.display = 'block';\n\n \/\/ Get table details\n const tableDetails = [];\n let totalCapacity = 0;\n\n selectedTables.forEach(tableId => {\n const tableElement = document.querySelector(`[data-table-id=\"${tableId}\"]`);\n if (tableElement) {\n \/\/ Try both old and new class names for compatibility\n const tableNumberElement = tableElement.querySelector('.rbs-table-number') ||\n tableElement.querySelector('.table-number');\n\n if (tableNumberElement) {\n const tableNumber = tableNumberElement.textContent;\n const capacity = parseInt(tableElement.dataset.capacity);\n tableDetails.push(`Table ${tableNumber}`);\n totalCapacity += capacity;\n } else {\n console.warn('Table number element not found for table ID:', tableId);\n \/\/ Fallback: use table ID\n const capacity = parseInt(tableElement.dataset.capacity);\n tableDetails.push(`Table ${tableId}`);\n totalCapacity += capacity;\n }\n } else {\n console.warn('Table element not found for table ID:', tableId);\n }\n });\n\n tablesList.textContent = tableDetails.join(', ');\n capacitySpan.textContent = totalCapacity;\n }\n\n function clearTableSelection() {\n selectedTables = [];\n document.querySelectorAll('.rbs-table.selected').forEach(table => {\n table.classList.remove('selected');\n table.classList.add('available');\n });\n updateSelectedTablesDisplay();\n updateSaveButton();\n }\n\n function renderCreateTableLayout(layoutData) {\n const tableLayout = document.getElementById('createTableLayout');\n const layout = layoutData.table_layout;\n\n if (!layout || (!layout.left_side && !layout.right_side)) {\n tableLayout.innerHTML = '<div class=\"rbs-no-tables\"><p>No tables available for this time slot<\/p><\/div>';\n return;\n }\n\n let html = '';\n\n \/\/ Add entrances at the top if available\n if (layoutData.entrances && layoutData.entrances.length > 0) {\n const topEntrances = layoutData.entrances.filter(entrance => parseInt(entrance.row_position) === 0);\n topEntrances.forEach(entrance => {\n html += `<div class=\"rbs-entrance\">${entrance.name || 'Entrance'}<\/div>`;\n });\n }\n\n \/\/ Create restaurant layout container (matching public form)\n html += '<div class=\"rbs-restaurant-layout\">';\n\n \/\/ Organize tables by rows\n const leftTables = layout.left_side || {};\n const rightTables = layout.right_side || {};\n\n \/\/ Determine the maximum row number\n let maxRow = 0;\n for (let row in leftTables) {\n maxRow = Math.max(maxRow, parseInt(row));\n }\n for (let row in rightTables) {\n maxRow = Math.max(maxRow, parseInt(row));\n }\n maxRow = Math.max(maxRow, 1);\n\n \/\/ Create all rows - matching public form structure exactly\n for (let row = 1; row <= maxRow; row++) {\n \/\/ Left side tables for this row\n html += `<div class=\"rbs-row${row}-left rbs-table-row\">`;\n if (leftTables[row] && leftTables[row].length > 0) {\n const rowTables = leftTables[row].sort((a, b) => a.position - b.position);\n rowTables.forEach(table => {\n html += renderCreateTableElementPublicStyle(table, 'left-side');\n });\n }\n html += '<\/div>';\n\n \/\/ Center aisle\n html += '<div class=\"rbs-center-aisle\"><\/div>';\n\n \/\/ Right side tables for this row\n html += `<div class=\"rbs-row${row}-right rbs-table-row\">`;\n if (rightTables[row] && rightTables[row].length > 0) {\n const rowTables = rightTables[row].sort((a, b) => a.position - b.position);\n rowTables.forEach(table => {\n html += renderCreateTableElementPublicStyle(table, 'right-side');\n });\n }\n html += '<\/div>';\n }\n\n html += '<\/div>';\n\n \/\/ Add suggested tables info if available\n\n\n tableLayout.innerHTML = html;\n\n \/\/ Add click handlers to tables\n document.querySelectorAll('#createTableLayout .rbs-table.available').forEach(table => {\n table.addEventListener('click', function() {\n toggleCreateTableSelection(this);\n });\n });\n }\n\n function renderCreateTableElementPublicStyle(table, side) {\n const isAvailable = table.available;\n const isSelected = selectedTables.includes(table.id);\n\n \/\/ Build classes array matching public form exactly\n const classes = ['rbs-table', side, 'combinable'];\n\n \/\/ Add capacity-based class for styling\n if (table.capacity <= 2) {\n classes.push('two-person');\n } else if (table.capacity <= 4) {\n classes.push('four-person');\n } else if (table.capacity <= 6) {\n classes.push('six-person');\n } else {\n classes.push('large-table');\n }\n\n \/\/ Add availability\/selection status\n if (isSelected) {\n classes.push('selected');\n } else if (isAvailable) {\n classes.push('available');\n } else {\n classes.push('unavailable');\n }\n\n return `\n <div class=\"${classes.join(' ')}\"\n data-table-id=\"${table.id}\"\n data-capacity=\"${table.capacity}\"\n data-infant-capacity=\"${table.infant_capacity || 0}\"\n data-row=\"${table.row_number}\"\n data-position=\"${table.position}\"\n data-available=\"${isAvailable}\">\n <div class=\"rbs-table-number\">${table.table_number}<\/div>\n <div class=\"rbs-table-capacity\">${table.capacity}pax<\/div>\n <\/div>\n `;\n }\n\n function toggleCreateTableSelection(tableElement) {\n if (!tableElement || !tableElement.dataset) {\n console.error('Invalid table element passed to toggleCreateTableSelection');\n return;\n }\n\n const tableId = parseInt(tableElement.dataset.tableId);\n const isAvailable = tableElement.dataset.available === 'true';\n\n if (!tableId || isNaN(tableId)) {\n console.error('Invalid table ID:', tableElement.dataset.tableId);\n return;\n }\n\n if (!isAvailable) return;\n\n if (selectedTables.includes(tableId)) {\n \/\/ Deselect table\n selectedTables = selectedTables.filter(id => id !== tableId);\n tableElement.classList.remove('selected');\n tableElement.classList.add('available');\n } else {\n \/\/ Check if adding this table would create invalid combination\n const testSelection = [...selectedTables, tableId];\n const partySize = parseInt(document.getElementById('createPartySizeValue').textContent);\n\n \/\/ Allow incomplete selections during table building (allowIncomplete = true)\n const validation = validateTableCombination(testSelection, partySize, true);\n\n if (!validation.valid) {\n alert('Cannot select this table: ' + validation.message);\n return;\n }\n\n \/\/ Select table\n selectedTables.push(tableId);\n tableElement.classList.remove('available');\n tableElement.classList.add('selected');\n }\n\n updateCreateSelectedTablesDisplay();\n validateCreateBookingForm();\n }\n\n function validateTableCombination(selectedTableIds, partySize, allowIncomplete = false) {\n let totalCapacity = 0;\n let totalInfantCapacity = 0;\n\n \/\/ Calculate total capacity from selected tables\n selectedTableIds.forEach(tableId => {\n const tableElement = document.querySelector(`#createTableLayout [data-table-id=\"${tableId}\"]`);\n if (tableElement) {\n totalCapacity += parseInt(tableElement.dataset.capacity) || 0;\n totalInfantCapacity += parseInt(tableElement.dataset.infantCapacity) || 0;\n }\n });\n\n console.log('Validation - Party size:', partySize, 'Total capacity:', totalCapacity, 'Allow incomplete:', allowIncomplete);\n\n \/\/ Check if capacity is sufficient (allow incomplete selections during table building)\n if (totalCapacity < partySize) {\n if (!allowIncomplete) {\n return {\n valid: false,\n message: `Selected tables can accommodate ${totalCapacity} people, but you have ${partySize} in your party.`\n };\n }\n }\n\n \/\/ Check waste limit (max 3 extra seats)\n const waste = totalCapacity - partySize;\n if (waste > 3) {\n return {\n valid: false,\n message: `This combination would waste ${waste} seats (maximum 3 extra seats allowed). Please select different tables.`\n };\n }\n\n return { valid: true };\n }\n\n function updateCreateSelectedTablesDisplay() {\n const display = document.getElementById('createSelectedTablesDisplay');\n const tablesList = document.getElementById('createSelectedTablesList');\n const capacitySpan = document.getElementById('createSelectedTablesCapacity');\n\n \/\/ Check if elements exist\n if (!display || !tablesList || !capacitySpan) {\n console.warn('Create selected tables display elements not found');\n return;\n }\n\n if (selectedTables.length === 0) {\n display.style.display = 'none';\n return;\n }\n\n display.style.display = 'block';\n\n \/\/ Get table details\n const tableDetails = [];\n let totalCapacity = 0;\n\n selectedTables.forEach(tableId => {\n const tableElement = document.querySelector(`#createTableLayout [data-table-id=\"${tableId}\"]`);\n if (tableElement) {\n \/\/ Try both old and new class names for compatibility\n const tableNumberElement = tableElement.querySelector('.rbs-table-number') ||\n tableElement.querySelector('.table-number');\n\n if (tableNumberElement) {\n const tableNumber = tableNumberElement.textContent;\n const capacity = parseInt(tableElement.dataset.capacity);\n tableDetails.push(`Table ${tableNumber}`);\n totalCapacity += capacity;\n } else {\n console.warn('Table number element not found for table ID:', tableId);\n \/\/ Fallback: use table ID\n const capacity = parseInt(tableElement.dataset.capacity);\n tableDetails.push(`Table ${tableId}`);\n totalCapacity += capacity;\n }\n } else {\n console.warn('Table element not found for ID:', tableId);\n }\n });\n\n tablesList.textContent = tableDetails.join(', ');\n capacitySpan.textContent = totalCapacity;\n }\n\n function loadAvailableTimeSlots(branchCode, bookingId) {\n const date = document.getElementById('bookingDate').value;\n const partySize = document.getElementById('bookingPartySize').value;\n const timeSelect = document.getElementById('bookingTime');\n\n if (!date || !partySize) {\n timeSelect.innerHTML = '<option value=\"\">Select date and party size first<\/option>';\n timeSelect.disabled = true;\n updateSaveButton(false);\n return;\n }\n\n timeSelect.innerHTML = '<option value=\"\">Loading available times...<\/option>';\n timeSelect.disabled = true;\n updateSaveButton(false);\n\n \/\/ Get available time slots with automatic nonce handling\n makeAjaxRequest('https:\/\/reserve.samuraiyakiniku.com\/wp-admin\/admin-ajax.php', {\n action: 'rls_get_available_time_slots',\n branch_code: branchCode,\n date: date,\n party_size: partySize,\n exclude_booking_id: bookingId\n })\n .then(data => {\n console.log('Time slots API response:', data);\n\n \/\/ Handle nested data structure\n let timeSlots = null;\n if (data.success) {\n if (data.data && data.data.data && data.data.data.time_slots) {\n \/\/ Triple nested structure\n timeSlots = data.data.data.time_slots;\n } else if (data.data && data.data.time_slots) {\n \/\/ Double nested structure\n timeSlots = data.data.time_slots;\n }\n }\n\n if (timeSlots) {\n let options = '<option value=\"\">Select a time<\/option>';\n\n if (timeSlots.length > 0) {\n timeSlots.forEach(slot => {\n options += `<option value=\"${slot.time}\">${slot.display_time}<\/option>`;\n });\n timeSelect.innerHTML = options;\n timeSelect.disabled = false;\n\n \/\/ Show basic availability info\n showBasicAvailability(timeSlots.length, date);\n } else {\n timeSelect.innerHTML = '<option value=\"\">No times available for this date<\/option>';\n showBasicAvailability(0, date);\n }\n } else {\n timeSelect.innerHTML = '<option value=\"\">Error loading times<\/option>';\n hideAvailabilitySection();\n }\n })\n .catch(error => {\n console.error('Error loading time slots:', error);\n timeSelect.innerHTML = '<option value=\"\">Error loading times<\/option>';\n hideAvailabilitySection();\n });\n }\n\n function showBasicAvailability(availableSlots, date) {\n const availabilitySection = document.getElementById('availabilitySection');\n const availabilityDisplay = document.getElementById('availabilityDisplay');\n\n availabilitySection.style.display = 'block';\n\n \n }\n\n function hideAvailabilitySection() {\n document.getElementById('availabilitySection').style.display = 'none';\n }\n\n function checkBookingAvailabilityAuto(branchCode, bookingId) {\n const time = document.getElementById('bookingTime').value;\n if (time) {\n updateSaveButton(true);\n checkBookingAvailability(branchCode, bookingId, true);\n } else {\n updateSaveButton(false);\n }\n }\n\n function checkBookingAvailability(branchCode, bookingId, isAutoCheck = false) {\n const date = document.getElementById('bookingDate').value;\n const time = document.getElementById('bookingTime').value;\n const partySize = document.getElementById('bookingPartySize').value;\n\n if (!date || !time || !partySize) {\n if (!isAutoCheck) {\n showAvailabilityResult('error', 'Please fill in date, time, and party size first.');\n }\n return;\n }\n\n const availabilityDisplay = document.getElementById('availabilityDisplay');\n const checkBtn = document.getElementById('checkAvailabilityBtn');\n\n if (!isAutoCheck) {\n checkBtn.disabled = true;\n checkBtn.textContent = 'Checking...';\n }\n\n \/\/ Show loading state in availability display\n availabilityDisplay.innerHTML = `\n <div style=\"display: flex; align-items: center; gap: 12px;\">\n <div style=\"width: 12px; height: 12px; background: #007aff; border-radius: 50%; animation: pulse 1.5s infinite;\"><\/div>\n <div>\n <div style=\"font-weight: 600; color: #1d1d1f;\">\n Checking detailed availability...\n <\/div>\n <div style=\"font-size: 14px; color: #86868b;\">\n ${formatBookingDate(date)} at ${time}\n <\/div>\n <\/div>\n <\/div>\n `;\n\n \/\/ Use centralized AJAX handler with automatic nonce refresh\n makeAjaxRequest('https:\/\/reserve.samuraiyakiniku.com\/wp-admin\/admin-ajax.php', {\n action: 'rls_check_booking_availability',\n branch_code: branchCode,\n date: date,\n time: time,\n party_size: partySize,\n exclude_booking_id: bookingId\n })\n .then(data => {\n if (data.success) {\n const availabilityData = data.data.data;\n displayDetailedAvailability(availabilityData, date, time, partySize);\n\n if (!isAutoCheck) {\n const hasAvailability = availabilityData.available_tables && availabilityData.available_tables.length > 0;\n showAvailabilityResult(\n hasAvailability ? 'success' : 'error',\n hasAvailability ? 'Tables are available for your requested time!' : 'No tables are available for the selected date and time.'\n );\n }\n } else {\n availabilityDisplay.innerHTML = `\n <div style=\"display: flex; align-items: center; gap: 12px;\">\n <div style=\"width: 12px; height: 12px; background: #ff3b30; border-radius: 50%;\"><\/div>\n <div>\n <div style=\"font-weight: 600; color: #1d1d1f;\">\n Unable to check availability\n <\/div>\n <div style=\"font-size: 14px; color: #86868b;\">\n ${data.data.message || 'Please try again'}\n <\/div>\n <\/div>\n <\/div>\n `;\n\n if (!isAutoCheck) {\n showAvailabilityResult('error', data.data.message || 'Failed to check availability');\n }\n }\n })\n .catch(error => {\n console.error('Error checking availability:', error);\n availabilityDisplay.innerHTML = `\n <div style=\"display: flex; align-items: center; gap: 12px;\">\n <div style=\"width: 12px; height: 12px; background: #ff3b30; border-radius: 50%;\"><\/div>\n <div>\n <div style=\"font-weight: 600; color: #1d1d1f;\">\n Connection error\n <\/div>\n <div style=\"font-size: 14px; color: #86868b;\">\n Please check your connection and try again\n <\/div>\n <\/div>\n <\/div>\n `;\n\n if (!isAutoCheck) {\n showAvailabilityResult('error', 'Failed to check availability');\n }\n })\n .finally(() => {\n if (!isAutoCheck) {\n checkBtn.disabled = false;\n checkBtn.textContent = 'Check Detailed Availability';\n }\n });\n }\n\n function displayDetailedAvailability(availabilityData, date, time, partySize) {\n const availabilityDisplay = document.getElementById('availabilityDisplay');\n const availableTables = availabilityData.available_tables || [];\n const suggestedTables = availabilityData.suggested_tables || [];\n\n if (availableTables.length > 0) {\n let tableInfo = '';\n if (suggestedTables.length > 0) {\n const suggestedTable = suggestedTables[0];\n tableInfo = `\n <div style=\"margin-top: 12px; padding: 12px; background: #e8f5e8; border-radius: 6px; border-left: 4px solid #34c759;\">\n <div style=\"font-weight: 600; color: #2e7d32; margin-bottom: 4px;\">\n Recommended: Table ${suggestedTable.table_number}\n <\/div>\n <div style=\"font-size: 14px; color: #2e7d32;\">\n ${suggestedTable.capacity} seats \u2022 ${suggestedTable.table_type || 'Standard table'}\n <\/div>\n <\/div>\n `;\n } else {\n tableInfo = `\n <div style=\"margin-top: 12px; padding: 12px; background: #fff3cd; border-radius: 6px; border-left: 4px solid #ffc107;\">\n <div style=\"font-weight: 600; color: #856404; margin-bottom: 4px;\">\n ${availableTables.length} table${availableTables.length !== 1 ? 's' : ''} available\n <\/div>\n <div style=\"font-size: 14px; color: #856404;\">\n Various seating options for ${partySize} people\n <\/div>\n <\/div>\n `;\n }\n\n availabilityDisplay.innerHTML = `\n <div style=\"display: flex; align-items: center; gap: 12px;\">\n <div style=\"width: 12px; height: 12px; background: #34c759; border-radius: 50%;\"><\/div>\n <div style=\"flex: 1;\">\n <div style=\"font-weight: 600; color: #1d1d1f; margin-bottom: 4px;\">\n Tables available\n <\/div>\n <div style=\"font-size: 14px; color: #86868b;\">\n ${formatBookingDate(date)} at ${time} \u2022 ${partySize} people\n <\/div>\n <\/div>\n <\/div>\n ${tableInfo}\n `;\n } else {\n availabilityDisplay.innerHTML = `\n <div style=\"display: flex; align-items: center; gap: 12px;\">\n <div style=\"width: 12px; height: 12px; background: #ff3b30; border-radius: 50%;\"><\/div>\n <div style=\"flex: 1;\">\n <div style=\"font-weight: 600; color: #1d1d1f; margin-bottom: 4px;\">\n No tables available\n <\/div>\n <div style=\"font-size: 14px; color: #86868b;\">\n ${formatBookingDate(date)} at ${time} \u2022 ${partySize} people\n <\/div>\n <\/div>\n <\/div>\n <div style=\"margin-top: 12px; padding: 12px; background: #f8d7da; border-radius: 6px; border-left: 4px solid #dc3545;\">\n <div style=\"font-weight: 600; color: #721c24; margin-bottom: 4px;\">\n Fully booked\n <\/div>\n <div style=\"font-size: 14px; color: #721c24;\">\n Try selecting a different time or date\n <\/div>\n <\/div>\n `;\n }\n }\n\n function updateSaveButton(forceEnabled = null) {\n const saveBtn = document.getElementById('saveBookingBtn');\n\n \/\/ Check if all required fields are filled\n const date = document.getElementById('bookingDate').value;\n const time = document.getElementById('bookingTime').value;\n const partySize = document.getElementById('bookingPartySizeValue').value;\n\n let enabled = forceEnabled;\n if (enabled === null) {\n \/\/ Auto-determine if button should be enabled\n enabled = false;\n if (date) {\n if (time) {\n if (partySize) {\n enabled = true;\n }\n }\n }\n\n \/\/ If table layout is shown, require table selection\n const tableSection = document.getElementById('tableSelectionSection');\n if (tableSection) {\n if (tableSection.style.display !== 'none') {\n if (selectedTables.length === 0) {\n enabled = false;\n }\n }\n }\n }\n\n if (enabled) {\n saveBtn.disabled = false;\n saveBtn.style.background = 'linear-gradient(135deg, #DC143C, #B22222)';\n saveBtn.style.color = 'white';\n saveBtn.style.cursor = 'pointer';\n } else {\n saveBtn.disabled = true;\n saveBtn.style.background = '#e5e5e7';\n saveBtn.style.color = '#86868b';\n saveBtn.style.cursor = 'not-allowed';\n }\n }\n\n function showAvailabilityResult(type, message) {\n const resultDiv = document.getElementById('availabilityResult');\n resultDiv.style.display = 'block';\n resultDiv.className = type;\n resultDiv.innerHTML = message;\n\n if (type === 'success') {\n resultDiv.style.background = '#d4edda';\n resultDiv.style.color = '#155724';\n resultDiv.style.border = '1px solid #c3e6cb';\n } else {\n resultDiv.style.background = '#f8d7da';\n resultDiv.style.color = '#721c24';\n resultDiv.style.border = '1px solid #f5c6cb';\n }\n }\n\n function saveBookingChanges(branchCode, bookingId) {\n if (!confirm('Are you sure you want to update this booking?')) {\n return;\n }\n\n const updateData = {\n booking_date: document.getElementById('bookingDate').value,\n booking_time: document.getElementById('bookingTime').value,\n party_size: parseInt(document.getElementById('bookingPartySizeValue').value),\n special_requests: document.getElementById('bookingSpecialRequests').value,\n table_ids: selectedTables.length > 0 ? selectedTables : null\n };\n\n const saveButton = document.querySelector('#bookingModalFooter button:last-child');\n const originalText = saveButton.textContent;\n saveButton.disabled = true;\n saveButton.textContent = 'Updating...';\n\n \/\/ Use centralized AJAX handler with automatic nonce refresh\n makeAjaxRequest('https:\/\/reserve.samuraiyakiniku.com\/wp-admin\/admin-ajax.php', {\n action: 'rls_update_user_booking',\n phone: currentCustomer.phone,\n branch_code: branchCode,\n booking_id: bookingId,\n update_data: JSON.stringify(updateData)\n })\n .then(data => {\n if (data.success) {\n showBookingMessage('success', 'Booking updated successfully!');\n closeBookingModal();\n loadBookings(); \/\/ Reload bookings\n } else {\n const errorMessage = data.data.message || data.data.error || 'Failed to update booking';\n showBookingMessage('error', errorMessage);\n }\n })\n .catch(error => {\n console.error('Error updating booking:', error);\n showBookingMessage('error', 'Failed to update booking');\n })\n .finally(() => {\n saveButton.disabled = false;\n saveButton.textContent = originalText;\n });\n }\n\n function showBookingMessage(type, message) {\n \/\/ Create or update message div\n let messageDiv = document.getElementById('bookingMessage');\n if (!messageDiv) {\n messageDiv = document.createElement('div');\n messageDiv.id = 'bookingMessage';\n messageDiv.style.cssText = `\n position: fixed;\n top: 20px;\n left: 50%;\n transform: translateX(-50%);\n z-index: 10000;\n padding: 12px 20px;\n border-radius: 12px;\n font-size: 14px;\n font-weight: 500;\n max-width: 320px;\n display: flex;\n align-items: center;\n gap: 10px;\n box-shadow: 0 4px 12px rgba(0,0,0,0.15);\n `;\n document.body.appendChild(messageDiv);\n }\n\n \/\/ Strip emoji from message (they're replaced by SVG icons)\n const cleanMessage = message.replace(\/^[\u2705\u274c\u26a0\ufe0f\ud83d\udd14\ud83c\udf89\ud83d\udcf1\ud83c\udf82\u270f\ufe0f\ud83d\udce7]\\s*\/u, '');\n\n let iconSvg = '';\n if (type === 'success') {\n messageDiv.style.background = '#ecfdf5';\n messageDiv.style.color = '#065f46';\n messageDiv.style.border = '1px solid #a7f3d0';\n iconSvg = `<svg width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"#10b981\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><circle cx=\"12\" cy=\"12\" r=\"10\"\/><path d=\"m9 12 2 2 4-4\"\/><\/svg>`;\n } else {\n messageDiv.style.background = '#fef2f2';\n messageDiv.style.color = '#991b1b';\n messageDiv.style.border = '1px solid #fecaca';\n iconSvg = `<svg width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"#ef4444\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><circle cx=\"12\" cy=\"12\" r=\"10\"\/><line x1=\"15\" y1=\"9\" x2=\"9\" y2=\"15\"\/><line x1=\"9\" y1=\"9\" x2=\"15\" y2=\"15\"\/><\/svg>`;\n }\n\n messageDiv.innerHTML = iconSvg + `<span>${cleanMessage}<\/span>`;\n messageDiv.style.display = 'flex';\n\n \/\/ Auto-hide after 5 seconds\n setTimeout(() => {\n if (messageDiv) {\n messageDiv.style.display = 'none';\n }\n }, 5000);\n }\n\n function formatBookingDate(dateStr) {\n const date = new Date(dateStr);\n return date.toLocaleDateString('en-US', {\n weekday: 'short',\n year: 'numeric',\n month: 'short',\n day: 'numeric'\n });\n }\n\n function formatBookingTime(timeStr) {\n const time = new Date('2000-01-01 ' + timeStr);\n return time.toLocaleTimeString('en-US', {\n hour: 'numeric',\n minute: '2-digit',\n hour12: true\n });\n }\n <\/script>\n\n <style>\n @keyframes slideDown {\n from {\n opacity: 0;\n transform: translateX(-50%) translateY(-20px);\n }\n to {\n opacity: 1;\n transform: translateX(-50%) translateY(0);\n }\n }\n\n @keyframes slideUp {\n from {\n opacity: 1;\n transform: translateX(-50%) translateY(0);\n }\n to {\n opacity: 0;\n transform: translateX(-50%) translateY(-20px);\n }\n }\n\n \/* Push notification banner animations *\/\n .push-notification-prompt {\n animation: slideUp 0.3s ease-out !important;\n }\n\n @keyframes slideUp {\n from {\n opacity: 0;\n transform: translateY(100px);\n }\n to {\n opacity: 1;\n transform: translateY(0);\n }\n }\n\n @keyframes slideDown {\n from {\n opacity: 1;\n transform: translateY(0);\n }\n to {\n opacity: 0;\n transform: translateY(100px);\n }\n }\n\n @keyframes fadeIn {\n from {\n opacity: 0;\n }\n to {\n opacity: 1;\n }\n }\n\n @keyframes fadeOut {\n from {\n opacity: 1;\n }\n to {\n opacity: 0;\n }\n }\n <\/style>\n<\/body>\n<\/html>\n\n","protected":false},"excerpt":{"rendered":"","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-103042","page","type-page","status-publish","hentry"],"jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/reserve.samuraiyakiniku.com\/index.php\/wp-json\/wp\/v2\/pages\/103042","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/reserve.samuraiyakiniku.com\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/reserve.samuraiyakiniku.com\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/reserve.samuraiyakiniku.com\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/reserve.samuraiyakiniku.com\/index.php\/wp-json\/wp\/v2\/comments?post=103042"}],"version-history":[{"count":0,"href":"https:\/\/reserve.samuraiyakiniku.com\/index.php\/wp-json\/wp\/v2\/pages\/103042\/revisions"}],"wp:attachment":[{"href":"https:\/\/reserve.samuraiyakiniku.com\/index.php\/wp-json\/wp\/v2\/media?parent=103042"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}