Select Option
Cancel
$0.00
0
% Fee applies to Credit Card payments
Would you like to add a tip?
Please return device to cashier.
10%
$0.00
15%
$0.00
20%
$0.00
30%
$0.00
No Tip
Custom Amount
$0.00
1
2
3
4
5
6
7
8
9
Clear
0
.
Back
Add Tip
Saved Cart<\/title>'); win.document.write('<style>body { font-family: monospace; text-align: center; } table { width: 100%; text-align: left; } .right { text-align: right; }<\/style>'); win.document.write('<\/head><body>'); win.document.write(response.html); win.document.write('<\/body><\/html>'); win.document.close(); setTimeout(function() { win.print(); }, 250); } else { alert(response.error || "Error fetching print data."); } }); } function confirmSaveCart() { let name = $('#save_cart_name').val(); if (!name && $('#save_cart_name').prop('required')) { alert("Please enter a name."); return; } $.post('/?view=save_cart_ajax', { action: 'save_cart', cart_name: name }, function(res) { let response = JSON.parse(res); if (response.success) { window.location.reload(); } else { alert(response.message || "Error saving cart."); } }); } function deleteSavedCart(scId) { if (confirm("Are you sure you want to permanently delete this saved cart?")) { $('#saved_carts_list').addClass('loading'); $.post('/?view=save_cart_ajax', { action: 'delete_cart', sc_id: scId }, function(res) { let response = JSON.parse(res); $('#saved_carts_list').removeClass('loading'); if (response.success) { openRetrieveCartModal(); } else { alert("Error deleting cart: " + response.message); } }); } } function loadSavedCart(scId) { if (!isCurrentCartEmpty) { let confirmRestore = confirm("Your current cart will be replaced if you restore the saved transaction. Are you sure you want to proceed?"); if (!confirmRestore) { return; } } $('#modalRetrieveCart .content').addClass('blurring dimmed'); $.post('/?view=save_cart_ajax', { action: 'load_cart', sc_id: scId }, function(res) { let response = JSON.parse(res); if (response.success) { if (response.action === 'symbiote') { // if we have an account attached to the cart, symbiote into it and head to checkout let returnUrl = encodeURIComponent(window.location.origin + window.location.pathname + '?view=checkout_begin'); window.location.href = `/?view=symbiote_login&id=${response.symbiote_id}&resume_sc_id=${scId}&redirect=${returnUrl}`; } else { window.location.reload(); } } else { alert(response.message || "Error loading cart."); $('#modalRetrieveCart .content').removeClass('blurring dimmed'); } }); } // END SAVE CART LOGIC // START LOYALTY LOGIC function openLoyaltyModal(mode) { if (mode === 'signup') { showLoyaltySignup(); setKeypadButtonMode('backspace'); // swap the period out for a backspace since phone numbers will never have a period and backspace is useful } else { showLoyaltySearch(); } $('#modalLoyalty').modal({ autofocus: false, closable: false, duration: 400, onVisible: function() { $(this).modal('refresh'); }, onHidden: function() { // restore the period when closing the modal setKeypadButtonMode('period'); } }).modal('show'); } function lookupLoyaltyCustomer() { // search for loyalty account by phone number let phone = $('#loyalty_lookup_phone').val(); if (!phone) return; const loyaltyFoundAudio = document.getElementById('loyalty-found-audio'); $.post('/?view=loyalty_ajax', { action: 'lookup', phone: phone }, function(res) { let response = JSON.parse(res); if (response.found) { if (parseInt(response.points) > 0) { $('#loyalty-msg-default').hide(); $('#loyalty-points-span').text(response.points + ' pts'); $('#loyalty-msg-balance').show(); }else{ $('#loyalty-msg-default').show(); $('#loyalty-msg-balance').hide(); } $('#modalLoyalty').modal('hide'); if(isFacing){ const wb = document.getElementById('welcomeBackMessage'); if (wb) { wb.style.display = 'flex'; setTimeout(() => { wb.style.opacity = '1'; }, 50); } if(grocerySoundsEnabled){ loyaltyFoundAudio.play(); } setTimeout(function() { applyLoyaltyCustomer(response.id); }, 1500); }else{ applyLoyaltyCustomer(response.id); } } else { // nunmber not found so give the option to create an account from this view $('#lookupCustomer').html(` <div class="ui info message" style="display: flex; align-items: center; justify-content: space-between; padding: 10px 15px; width: 100%;"> <div style="font-weight: 600; color: #276f86;"> <i class="fas fa-info-circle"></i> Number Not Found </div> <button class="ui small basic blue button" onclick="joinLoyaltyNotFound();" style="margin:0;"> Join Now! </button> </div> `); } }); } const toggleLoyaltyButton = () => { // handle display of employee facing loyalty icon const lookupBtn = $('#loyalty-lookup-btn'); if (lookupBtn.length) { if (orderItems.length > 0) { lookupBtn.fadeIn(200); } else { lookupBtn.fadeOut(200); } } }; function applyLoyaltyCustomer(userId) { if (!userId) return; $.post('/?view=loyalty_ajax', { action: 'apply_loyalty', id: userId }, function(res) { let response = (typeof res === 'object') ? res : JSON.parse(res); if (response.success) { let currentUrl = new URL(window.location.href); currentUrl.searchParams.set('loyalty_success', '1'); window.location.href = currentUrl.toString(); } else { alert("Error: " + response.message); } }); } function joinLoyaltyNotFound(){ // if the user chooses to sign up after their number was not found, automatically populate the phone number in the join form let phone = $('#loyalty_lookup_phone').val(); if(phone){ $('#loyalty_new_phone').val(phone); } $('#loyalty_search_section, #newEnrollment').hide(); $('#loyalty_signup_section, #earnMessage').show(); } function createLoyaltyCustomer() { let phoneVal = $('#loyalty_new_phone').val(); let nameVal = $('#loyalty_new_name').val(); let emailVal = $('#loyalty_new_email').val(); let smsConsentVal = $('#sms_consent').is(':checked') ? 1 : ''; if (!phoneVal) { alert("A phone number is required."); return; } let $btn = $('#loyalty_signup_section .button'); $btn.addClass('disabled loading'); let checkData = { emailAddress: emailVal, phoneNumber: phoneVal }; $.ajax({ url: "is_email_in_use.php", data: checkData, type: "POST", dataType: "json", success: function(data) { let pumpTheBrakes = false; if (data.isPhoneInUse) { $('#loyaltyPhoneInUse').show(); pumpTheBrakes = true; } if (data.isEmailInUse) { $('#loyaltyEmailInUse').show(); pumpTheBrakes = true; } if(pumpTheBrakes){ $btn.removeClass('loading'); return; } let createData = { action: 'create', phone: phoneVal, name: nameVal, email: emailVal, sms_consent: smsConsentVal }; $.post('/?view=loyalty_ajax', createData, function(res) { $btn.removeClass('disabled loading'); let response = (typeof res === 'object') ? res : JSON.parse(res); if (response.success) { applyLoyaltyCustomer(response.id); } else { alert("Error creating customer: " + response.message); } }); }, error: function(xhr, status, error) { console.error("Verification failed:", error); alert("Unable to verify account details. Please try again."); $btn.removeClass('disabled loading'); } }); } function showLoyaltySearch() { // toggle the loyalty modal view for searching $('#modalLoyalty').addClass('mini'); $('#shared-keypad-wrapper').detach().insertAfter('#lookup-input-wrapper'); setKeypadButtonMode('backspace'); $('#loyalty_signup_section').hide(); $('#loyalty_search_section').show(); $('#loyalty_lookup_results').hide(); $('#loyalty-right-col').hide(); $('#loyalty-left-col').removeClass('sixteen wide').addClass('sixteen wide'); $('#shared-keypad-wrapper').detach().insertAfter('#lookup-input-wrapper'); $('#loyalty-keyboard-toggle').hide(); activeLoyaltyInput = document.getElementById('loyalty_lookup_phone'); setTimeout(() => { $(activeLoyaltyInput).focus(); $('#modalLoyalty').modal('refresh'); }, 400); } function showLoyaltySignup() { // toggle the loyalty modal view for signing up $('#modalLoyalty').removeClass('mini'); $('#loyalty_search_section').hide(); $('#loyalty_signup_section').show(); $('#loyalty-left-col').removeClass('sixteen wide').addClass('eight wide'); $('#loyalty-right-col').show(); $('#shared-keypad-wrapper').detach().prependTo('#loyalty-right-col'); $('#loyalty-keyboard-toggle').show(); activeLoyaltyInput = document.getElementById('loyalty_new_phone'); setTimeout(() => { $(activeLoyaltyInput).focus(); $('#modalLoyalty').modal('refresh'); }, 400); } // END LOYALTY LOGIC // START KEYBOARD LOGIC $(document).on('click', '#password-visibility-toggle', function(e) { // password visibility toggle e.preventDefault(); const input = $('#qty-input'); const btn = $(this); const isVisible = input.attr('type') === 'text'; if (isVisible) { input.attr('type', 'password'); btn.html('<i class="fas fa-eye"></i>'); } else { input.attr('type', 'text'); btn.html('<i class="fas fa-eye-slash"></i>'); } input.focus(); }); function setKeypadButtonMode(mode) { // toggle between the backspace and the period for loyalty number view const btn = $('#loyalty-period-btn'); if (mode === 'backspace') { btn.attr('data-value', 'backspace') .html('<i class="fas fa-backspace"></i>') .addClass('red'); } else { btn.attr('data-value', '.') .html('.') .removeClass('red'); } } let keyboardState = { isShift: false, isCaps: false, isSymbolLayer: false, lastShiftClick: 0 }; const kbLayouts = { default: [ ['q','w','e','r','t','y','u','i','o','p'], ['a','s','d','f','g','h','j','k','l'], [{action:'shift', label:'<i class="fa-solid fa-arrow-up"></i>'}, 'z','x','c','v','b','n','m', {action:'backspace', label:'<i class="fa-solid fa-delete-left"></i>'}], [{action:'switch_symbols', label:'?123'}, '@', {action:'space', label:'Space'}, '.', {action:'enter', label:'Enter'}] ], symbols: [ ['1','2','3','4','5','6','7','8','9','0'], ['@','#','$','_','&','-','+','(',')','/'], [{action:'switch_symbols', label:'ABC'}, '*','"',"'",':',';','!','?', {action:'backspace', label:'<i class="fa-solid fa-delete-left"></i>'}], [{action:'switch_symbols', label:'ABC'}, ',', {action:'space', label:'Space'}, '.', {action:'enter', label:'Enter'}] ] }; function openVirtualKeyboard(targetInput) { } function renderQwerty() { const container = $('#qwerty-keyboard-render'); if (!container.length) return; container.empty(); const currentLayout = keyboardState.isSymbolLayer ? kbLayouts.symbols : kbLayouts.default; currentLayout.forEach(row => { const rowDiv = $('<div class="qwerty-row"></div>'); row.forEach(key => { let btn = $('<div class="qwerty-key"></div>'); if (typeof key === 'object') { btn.html(key.label).attr('data-action', key.action).addClass('action-key'); if (key.action === 'space') btn.addClass('space-key'); if (key.action === 'shift') { if (keyboardState.isCaps) btn.addClass('blue caps-locked').html('<i class="fa-solid fa-lock"></i>'); else if (keyboardState.isShift) btn.addClass('blue basic shift-active'); } } else { let char = (!keyboardState.isSymbolLayer && (keyboardState.isShift || keyboardState.isCaps)) ? key.toUpperCase() : key; btn.text(char).attr('data-value', char); } rowDiv.append(btn); }); container.append(rowDiv); }); } $(document).off('click', '#add-to-cart-confirm').on('click', '#add-to-cart-confirm', function(e) { e.preventDefault(); const modal = $('#qty-prompt-modal'); const quantityInputVal = $('#qty-input').val(); const productId = modal.data('productId'); if (typeof activeKeyboardInput !== 'undefined' && activeKeyboardInput && !productId) { // generic input (login, search, etc--no product ID) if (activeKeyboardInput.id === 'idlePin') { // handle pin modal $('#idlePin').val(quantityInputVal); modal.modal('hide'); activeKeyboardInput = null; submitPin(); return; } activeKeyboardInput.value = quantityInputVal; activeKeyboardInput.dispatchEvent(new Event('input', { bubbles: true })); activeKeyboardInput.dispatchEvent(new Event('change', { bubbles: true })); const shouldTriggerEnter = $(activeKeyboardInput).hasClass('keyboard-submit') || $(activeKeyboardInput).attr('type') === 'search'; if (shouldTriggerEnter) { // trigger form submission const enterEvt = { key: 'Enter', code: 'Enter', keyCode: 13, which: 13, bubbles: true }; activeKeyboardInput.dispatchEvent(new KeyboardEvent('keydown', enterEvt)); activeKeyboardInput.dispatchEvent(new KeyboardEvent('keyup', enterEvt)); } else { // if not submitting the form, try to find the next input to focus on const form = $(activeKeyboardInput).closest('form'); if (form.length) { const visibleInputs = form.find('input:not([type="hidden"]), textarea, select').filter(':visible:not([readonly])'); const currentIndex = visibleInputs.index(activeKeyboardInput); if (currentIndex > -1 && currentIndex < visibleInputs.length - 1) { visibleInputs.eq(currentIndex + 1).focus(); } } } modal.modal('hide'); activeKeyboardInput = null; console.groupEnd(); return; } if (!productId) { console.error("CRITICAL: No Product ID found on modal. Cannot add to cart."); console.groupEnd(); return; } const isByWeight = String(modal.data('isByWeight')) === '1'; const promptPrice = String(modal.data('promptPrice')) === '1'; const isFoodStamp = String(modal.data('isFoodStamp')) === '1'; let product = null; if (typeof customProducts !== 'undefined') { product = customProducts.find(p => String(p.id) === String(productId)); } if (isByWeight) { let qty = parseFloat(quantityInputVal); if (isNaN(qty) || qty <= 0) { alert('Invalid weight.'); console.groupEnd(); return; } if (typeof addWeightedProduct === 'function' && product) { $(this).addClass('disabled loading'); addWeightedProduct(product, qty); } else { console.error("Error: addWeightedProduct function missing or product not found."); } } else if (promptPrice) { let price = parseFloat(quantityInputVal); if (isNaN(price) || price <= 0) { alert('Invalid price.'); console.groupEnd(); return; } addOpenItemProduct(product, price); modal.modal('hide'); } else { let qty = parseInt(quantityInputVal, 10); if (isNaN(qty) || qty <= 0) { alert('Invalid quantity.'); console.groupEnd(); return; } const mods = modal.data('modifiers') || []; const note = modal.data('itemNote') || ''; addProductById(productId, qty, isFoodStamp, mods, note); modal.modal('hide'); } modal.removeData('promptPrice'); modal.removeClass('keyboard-mode'); console.groupEnd(); }); function handleQwertyClick(e) { const input = $('#qty-input'); const action = $(this).attr('data-action'); const char = $(this).attr('data-value'); let currentVal = input.val() || ''; if (action) { if (action === 'shift') { const now = Date.now(); if (now - keyboardState.lastShiftClick < 300) { keyboardState.isCaps = !keyboardState.isCaps; keyboardState.isShift = keyboardState.isCaps; } else { keyboardState.isCaps = false; keyboardState.isShift = !keyboardState.isShift; } keyboardState.lastShiftClick = now; renderQwerty(); } else if (action === 'switch_symbols') { keyboardState.isSymbolLayer = !keyboardState.isSymbolLayer; renderQwerty(); } else if (action === 'backspace') { input.val(currentVal.slice(0, -1)).trigger('input'); } else if (action === 'space') { input.val(currentVal + ' ').trigger('input'); } else if (action === 'enter') { $('#add-to-cart-confirm').click(); } } else if (char) { input.val(currentVal + char).trigger('input'); if (keyboardState.isShift && !keyboardState.isCaps) { keyboardState.isShift = false; renderQwerty(); } } } function toggleKeyboardMode() { const modal = $('#qty-prompt-modal'); modal.toggleClass('show-numpad'); const btn = $(this); if (modal.hasClass('show-numpad')) { // switch to numbers $('.keypad-grid').show(); $('#qwerty-keyboard-render').hide(); btn.html('<i class="fa-solid fa-keyboard"></i> Switch to ABC'); } else { // switch to qwerty $('.keypad-grid').hide(); $('#qwerty-keyboard-render').show(); btn.html('<i class="fa-solid fa-calculator"></i> Switch to 123'); renderQwerty(); } } function isPriceModeActive() { const modal = $('#qty-prompt-modal'); return modal.hasClass('price') || $(activeKeyboardInput).hasClass('price-format'); } function playKeyboardSound(type) { if (typeof grocerySoundsEnabled !== 'undefined' && !grocerySoundsEnabled) return; try { if (type === 'weight' && typeof weightAudioClip !== 'undefined') weightAudioClip.play(); if (type === 'price' && typeof priceAudioClip !== 'undefined') priceAudioClip.play(); if (type === 'quantity' && typeof quantityAudioClip !== 'undefined') quantityAudioClip.play(); } catch(e) {} } // END KEYBOARD LOGIC const resetAddProductModal = () => { $('#new-product-upc').val(''); $('#product-details-form').addClass('hidden'); $('#new-product-image-preview').attr('src', 'display/img/jellyImageUploadPlaceholder.png').show(); tempProductImagePath = ''; $('#add-product-form input, #add-product-form textarea').val(''); $('#add-product-form .ui.dropdown').dropdown('restore defaults'); $('#upcRequired, #nameRequired, #feeRequired').hide(); $('#add-product-header').text('Add New Product'); $('#save-new-product-btn').text('Add Product'); $('#product-id-input').val(''); $('#product-details-form').addClass('hidden'); }; async function editProduct(product) { $('#addProductModal').modal('show'); const productId = product.products_id || product.id; $('#variation-rows').empty(); $('#variation-count').text('0'); try { const response = await fetch(`?view=groceryDashboardAjax&action=getVariations&parent_id=${productId}`); const variations = await response.json(); if (variations && variations.length > 0) { console.log("Found variations:", variations); $('#product-type-dropdown').dropdown('set selected', 'variable'); $('#new-product-upc, #new-product-price, #new-product-stock').closest('.field').hide(); $('#manage-variations-field').show(); variations.forEach(v => { addVariationRow({ id: v.id, name: v.variation_name, upc: v.upc, price: v.price, stock: v.stock }); }); $('#variation-count').text(variations.length); } else { $('#product-type-dropdown').dropdown('set selected', 'simple'); $('#new-product-upc, #new-product-price, #new-product-stock').closest('.field').show(); $('#manage-variations-field').hide(); } } catch (error) { console.error('Error fetching variations:', error); } if (product && product.products_id) { const cleanedCost = (product.cost || '').replace(/[^0-9.]/g, ''); product = { id: product.products_id, name: product.products_common_name, brand: product.products_brand, price: product.products_price, shelf_fee: product.products_shelf_fee, description: product.products_description, model_number: product.products_mfr_part_number, upc: product.products_upc || '', cost: cleanedCost, vendor_id: product.vendor_id, stock: product.stock, status: product.products_disabled, category: product.products_department, food_stamps: product.products_food_stamps, image_path: product.products_image_path, tax_status: parseInt(product.products_tax_exempt || 0), food_stamps: parseInt(product.products_food_stamps || 0), require_id: parseInt(product.products_check_id || 0), by_weight: parseInt(product.products_by_weight || 0), prompt_price: parseInt(product.products_prompt_price || 0), prompt_qty: parseInt(product.products_prompt_qty || 0), has_modifiers: parseInt(product.products_has_modifiers || 0), kitchen_item: parseInt(product.products_kitchen_item || 0), }; } const descriptionElement = document.getElementById('new-product-description'); if (descriptionElement) { descriptionElement.value = product.description || ''; } document.getElementById('product-id-input').value = product.id; document.getElementById('new-product-name').value = product.name; document.getElementById('new-product-upc').value = product.upc || ''; document.getElementById('new-product-brand').value = product.brand; const costInput = document.getElementById('new-product-cost'); if (costInput) { costInput.value = product.cost || ''; } const stockInput = document.getElementById('new-product-stock'); // check if decimal inventory (by weight) if (stockInput) { stockInput.value = product.stock !== undefined ? product.stock : ''; const isByWeight = product.by_weight; if (isByWeight) { stockInput.step = 'any'; // allow decimals for by weight inventory } else { stockInput.step = '1'; // force integer for non by weight } stockInput.onkeypress = function(event) { // supress decimal for non by weight products if (!isByWeight) { const key = event.which || event.keyCode; if (key === 46 || key === 44) { event.preventDefault(); return false; } } return true; }; stockInput.oninput = function() { const originalValue = this.value; let newValue = originalValue; if (!isByWeight) { newValue = originalValue.replace(/[^0-9]/g, ''); } if (originalValue !== newValue) { this.value = newValue; this.setSelectionRange(this.value.length, this.value.length); } }; } if(product.vendor_id){ $('#currentVendor').val(product.vendor_id); } if(!product.shelf_fee){ //product.shelf_fee = defaultShelfFee; } document.getElementById('new-product-model').value = product.model_number || ''; document.getElementById('new-product-price').value = product.price; document.getElementById('new-product-description').value = product.description || ''; const taxStatusValue = (product.tax_status === 1) ? 'non-taxable' : 'taxable'; $('#new-product-tax-status').dropdown('set selected', taxStatusValue); let promptQtyValue = 'no'; if (product.by_weight) { promptQtyValue = 'weight'; } else if (product.prompt_price) { promptQtyValue = 'price'; } else if (product.prompt_qty) { promptQtyValue = 'yes'; } $('#new-product-prompt-qty').dropdown('set selected', promptQtyValue); const statusValue = product.status === '1' ? '1' : '0'; $('#new-product-status').dropdown('set selected', statusValue); const placeholderUrl = 'display/img/jellyImageUploadPlaceholder.png'; let imageUrl = placeholderUrl; if (product.image_path) { let realPath = findImagePath(product.image_path); if (realPath) { const cacheBuster = Date.now(); const separator = realPath.includes('?') ? '&' : '?'; imageUrl = `${realPath}${separator}v=${cacheBuster}`; } } const imagePreview = document.getElementById('new-product-image-preview'); if (imagePreview) { imagePreview.src = imageUrl; } const headerElement = document.getElementById('add-product-header'); if (headerElement) { headerElement.textContent = 'Edit Product'; } const saveButton = document.getElementById('save_new_product_btn'); if (saveButton) { saveButton.textContent = 'Update Product'; } }; const findImagePath = (imagePath) => { const placeholderUrl = '/assets/img/box_placeholder.png'; return imagePath || placeholderUrl; }; const resetAddProductForm = () => { $('#new-product-upc').val(''); $('#product-details-form').addClass('hidden'); $('#new-product-image-preview').attr('src', 'display/img/jellyImageUploadPlaceholder.png').show(); tempImagePath = ''; $('#add-product-form input, #add-product-form textarea').val(''); $('#add-product-form .ui.dropdown').dropdown('restore defaults'); $('#upcRequired, #nameRequired, #feeRequired').hide(); $('#add-product-header').text('Add New Product'); $('#save_new_product_btn').text('Add Product'); $('#product-id-input').val(''); $('#product-details-form').addClass('hidden'); $('#product-type-dropdown').dropdown('set selected', 'simple'); $('#new-product-upc').closest('.field').show(); $('#new-product-price').closest('.field').show(); $('#new-product-stock').closest('.field').show(); $('#manage-variations-field').hide(); $('#variation-rows').empty(); $('#variation-count').text('0'); }; let activeLoyaltyInput = null; $(document).ready(function() { if ($.fn.mask) { $('.phone_num').mask('(000) 000-0000'); } $('.manage_registers').on('click', function(e) { // manage registers modal e.preventDefault(); openRegisterManagerModal('manage'); }); // start touch screen scrolling logic for modifiers modal let isDragging = false; let startY; let startScrollTop; $('#modifier-prompt-modal').on('touchstart', '.scrolling.content', function(e) { if ($(e.target).is('textarea')) { isDragging = false; return; } const touch = e.originalEvent.touches[0]; isDragging = true; startY = touch.pageY; startScrollTop = $(this).scrollTop(); }); $('#modifier-prompt-modal').on('touchmove', '.scrolling.content', function(e) { if (!isDragging) return; e.preventDefault(); const touch = e.originalEvent.touches[0]; const deltaY = touch.pageY - startY; $(this).scrollTop(startScrollTop - deltaY); }); $(document).on('touchend touchcancel', function() { if (isDragging) { isDragging = false; } }); // end touch screen scrolling logic for modifiers modal // start idle pin virtual keyboard logic const idleModalElement = document.getElementById('idleModal'); // automatically trigger keyboard for idle pin if (idleModalElement) { const idleModalObserver = new MutationObserver(function(mutations) { mutations.forEach(function(mutation) { if (mutation.attributeName === "class") { const $target = $(mutation.target); if ($target.hasClass('visible') && $target.hasClass('active')) { } } }); }); idleModalObserver.observe(idleModalElement, { attributes: true }); } $(document).on('focus', '.idlePin', function() { }); function syncVirtualPin() { if (typeof activeKeyboardInput !== 'undefined' && activeKeyboardInput && activeKeyboardInput.id === 'idlePin') { let val = $('#qty-input').val() || ''; if (val.length > 4) { // limit to 4 characters val = val.substring(0, 4); $('#qty-input').val(val); } for (let i = 1; i <= 4; i++) { // populate the modal inputs $('#idlePin' + i).val(val.charAt(i - 1) || ''); } if (val.length === 4) { // auto-submit after 4 digits setTimeout(function() { if ($('#qty-prompt-modal').hasClass('visible') || $('#qty-prompt-modal').is(':visible')) { $('#add-to-cart-confirm').click(); } }, 150); } } } $(document).on('input propertychange', '#qty-input', syncVirtualPin); // sync the virtual keyboard to the pin inputs $(document).on('click', '.keypad-button, .qwerty-key, .action-key', function() { setTimeout(syncVirtualPin, 50); }); $(document).on('click', '#cancel-btn, #go-back-btn', function() { // clear pin inputs if they hit cancel on the keyboard if (typeof activeKeyboardInput !== 'undefined' && activeKeyboardInput && activeKeyboardInput.id === 'idlePin') { $('.idlePin, #idlePin').val(''); } }); // end idle pin virtual keyboard logic $('#punch_clock_edit_note').bind('input propertychange', function() { // if the input has a value, hide the warning in real time var reason = $('#punch_clock_edit_note').val(); if(reason != ''){ $('#punch_clock_edit_note_required').hide(); } }); $('#product-type-dropdown').dropdown({ // single SKU vs variation item onChange: function(value, text, $selectedItem) { console.log("Product Type Changed to:", value); if (value === 'variable') { $('#new-product-upc').closest('.field').hide(); $('#new-product-price').closest('.field').hide(); $('#new-product-stock').closest('.field').hide(); $('#manage-variations-field').show(); } else { $('#new-product-upc').closest('.field').show(); $('#new-product-price').closest('.field').show(); $('#new-product-stock').closest('.field').show(); $('#manage-variations-field').hide(); } } }); $(document).on('input', '#loyalty_new_phone', function() { $('#loyaltyPhoneInUse').hide(); $('#loyalty_signup_section .button').removeClass('disabled'); }); $(document).on('input', '#loyalty_new_email', function() { $('#loyaltyEmailInUse').hide(); $('#loyalty_signup_section .button').removeClass('disabled'); }); $(document).on('focus', '.loyalty-kb-target', function() { activeLoyaltyInput = this; }); $(document).on('click', '.keypad-button', function(e) { e.preventDefault(); e.stopImmediatePropagation(); const val = String($(this).data('value')); let target; if ($('#modalLoyalty').is(':visible')) { target = $(activeLoyaltyInput || '#loyalty_lookup_phone'); } else { target = $('#qty-input'); } let currentVal = target.val() || ''; const isPhone = target.attr('type') === 'tel'; if (val === 'backspace') { target.val(currentVal.slice(0, -1)).trigger('input'); target.focus(); return; } if (isPriceModeActive() && target.attr('id') === 'qty-input') { if (val === 'clear') { currentVal = '0.00'; } else if (val === '.') { return; } else { let rawDigits = currentVal.replace(/\D/g, '') + val; if (rawDigits.length > 8) return; currentVal = (parseFloat(rawDigits) / 100).toFixed(2); } target.val(currentVal).trigger('input'); } else { if (val === 'clear') { target.val('').trigger('input'); } else if (val === '.') { if (isPhone) return; if (!currentVal.includes('.')) target.val(currentVal + '.').trigger('input'); } else { target.val(currentVal + val).trigger('input'); } } target.focus(); }); $(document).on('click', '#loyalty-keyboard-toggle', function() { if (activeLoyaltyInput) { openVirtualKeyboard(activeLoyaltyInput); } else { openVirtualKeyboard(document.getElementById('loyalty_lookup_phone')); } }); $(document).off('click.vkeyboard_trigger').on('click.vkeyboard_trigger', 'input[type="text"], input[type="password"], input[type="number"], input[type="search"], input[type="email"], input[type="tel"], textarea', function(e) { }); $('#qty-prompt-modal').modal({ allowMultiple: true, closable: false, onShow: function() { const modal = $(this); const input = $('#qty-input'); const target = $(activeKeyboardInput); const startMode = modal.data('startMode'); const grid = modal.find('.ui.grid'); const leftColumn = grid.find('.column').first(); const rightColumn = grid.find('.column').last(); modal.removeClass('quantity weight price keyboard-mode show-numpad'); $('#keyboard-mode-toggle').show(); const isByWeight = modal.data('isByWeight') == 1; const isPromptPrice = modal.data('promptPrice') == 1 || target.hasClass('price-format'); const productId = modal.data('productId'); const customTitle = modal.data('customTitle') || target.attr('data-title'); const isPinMode = target.attr('id') === 'idlePin'; const isPassword = target.attr('type') === 'password' && !isPinMode; if (productId) { leftColumn.show(); rightColumn.removeClass('sixteen wide').addClass('eight wide'); $('#modal-product-image').show(); $('#promptQuestion').show().text('How many are being added?'); $('#modal-product-name').show(); } else { leftColumn.hide(); rightColumn.removeClass('eight wide').addClass('sixteen wide'); $('#modal-product-image').hide(); $('#modal-product-name').hide(); $('#promptQuestion').hide(); } if (isPinMode) { input.attr('type', 'password'); // mask characters $('#password-visibility-toggle').hide(); $('#promptHeader').text(customTitle || 'Enter 4-Digit PIN'); modal.addClass('show-numpad keyboard-mode'); $('.keypad-grid').show(); $('#qwerty-keyboard-render').hide(); } else if (isPassword) { input.attr('type', 'password'); $('#password-visibility-toggle').show().html('<i class="fas fa-eye"></i>'); $('#promptHeader').text('Enter Password'); modal.removeClass('show-numpad'); $('.keypad-grid').hide(); $('#qwerty-keyboard-render').show(); $('#keyboard-mode-toggle').html('<i class="fa-solid fa-calculator"></i> Switch to 123'); } else { input.attr('type', 'text'); $('#password-visibility-toggle').hide(); if (isByWeight) { modal.addClass('weight show-numpad keyboard-mode'); $('#promptHeader').text('Enter Weight'); playKeyboardSound('weight'); $('#keyboard-mode-toggle').hide(); } else if (isPromptPrice) { modal.addClass('price show-numpad keyboard-mode'); $('#promptHeader').text('Enter Price'); input.attr('placeholder', '0.00'); playKeyboardSound('price'); $('#keyboard-mode-toggle').hide(); } else if (productId) { modal.addClass('quantity show-numpad keyboard-mode'); $('#promptHeader').text('Enter Quantity'); playKeyboardSound('quantity'); } else { $('#promptHeader').text(customTitle || 'Input Required'); modal.addClass('keyboard-mode'); } if (!isPromptPrice && !isByWeight) { if (startMode === 'numeric') { modal.addClass('show-numpad'); $('.keypad-grid').show(); $('#qwerty-keyboard-render').hide(); $('#keyboard-mode-toggle').html('<i class="fa-solid fa-keyboard"></i> Switch to ABC'); } else { modal.removeClass('show-numpad'); $('.keypad-grid').hide(); $('#qwerty-keyboard-render').show(); $('#keyboard-mode-toggle').html('<i class="fa-solid fa-calculator"></i> Switch to 123'); renderQwerty(); } } } renderQwerty(); }, onVisible: function() { const input = document.getElementById('qty-input'); input.focus(); if (input.setSelectionRange) { input.setSelectionRange(input.value.length, input.value.length); } }, onHidden: function() { const modal = $(this); modal.removeData('promptPrice').removeAttr('data-prompt-price'); modal.removeData('isByWeight').removeAttr('data-is-by-weight'); modal.removeData('productId').removeAttr('data-product-id'); modal.removeData('customTitle'); activeKeyboardInput = null; $('#qty-input').val(''); $('#qty-input').attr('type', 'text'); $('#password-visibility-toggle').hide(); const grid = modal.find('.ui.grid'); grid.find('.column').first().show(); grid.find('.column').last().removeClass('sixteen wide').addClass('eight wide'); $('#modal-product-image').show(); $('#promptQuestion').show(); } }); $(document).on('click', '#qwerty-keyboard-render .qwerty-key', handleQwertyClick); $(document).on('click', '#keyboard-mode-toggle', toggleKeyboardMode); $(document).on('click', '#cancel-btn, #go-back-btn', function() { $('#qty-prompt-modal').modal('hide'); }); $('#addProductModal').modal({ closable: false, onShow: function() { // Initialize Category $('#category-dropdown').dropdown({ allowAdditions: true, forceSelection: false }); // Initialize Product Type (Simple vs Variable) $('#product-type-dropdown').dropdown({ onChange: function(value) { console.log("Product Type:", value); if (value === 'variable') { $('#new-product-upc').closest('.field').hide(); $('#new-product-price').closest('.field').hide(); $('#new-product-stock').closest('.field').hide(); $('#manage-variations-field').show(); } else { $('#new-product-upc').closest('.field').show(); $('#new-product-price').closest('.field').show(); $('#new-product-stock').closest('.field').show(); $('#manage-variations-field').hide(); } } }); $('#new-product-status').dropdown(); $('#new-product-tax-status').dropdown(); $('#new-product-food-stamps').dropdown(); $('#new-product-prompt-qty').dropdown(); $('#vendor-dropdown').dropdown(); resetAddProductForm(); }, onHide: function() { resetAddProductForm(); }, onApprove: function() { return false; } }); $('.open_add_product_modal').on('click', function(e) { e.preventDefault(); const isKitchen = $(this).data('kitchen'); $('#addProductModal').modal('show'); if (isKitchen) { console.log('adding kitchen item'); setTimeout(function() { $('#new-product-kitchen-item').val(1); $('#inventoryField').hide(); $('#add-product-header').html('<i class="fad fa-utensils"></i> Add New Kitchen Item'); }, 10); } else { setTimeout(function() { $('#new-product-kitchen-item').val(0); $('#inventoryField').show(); $('#add-product-header').html('<i class="fas fa-barcode"></i> Add New Product'); }, 10); } }); $(document).on('click', '#save_new_product_btn', function(e) { saveProduct(e); }); $('#upc-search-icon').on('click', upcLookup); setupAddProductDropzone(); kioskModeCheck(); $(document).on('wheel', '#submittedPrice', function(e) { // prevent scroll wheel from changing value $(this).blur(); }); // format phone numbers $(".phone_num").mask('(000) 000-0000'); // copy to clipboard var clipboard = new ClipboardJS('.copyBtn'); clipboard.on('success', function(e) { setTimeout( function() { $('.copyBtn').popup('hide'); }, 1000); }); $('.copyBtn').popup({ on : 'click' }); $('#auth-top-menu .ui.dropdown').dropdown({ on: 'hover' }); // show notification popup $('.notifications_button').popup({ popup : $('#notification_popup'), position: 'bottom right', target : '.menu.right', on: 'click' }); // show cart popup $('.cart_preview_button').popup({ popup : $('#cart_preview_popup'), position: 'bottom right', on : 'click', onShow : function() { // get the contents of the cart $.ajax({ url: "cfx_controllers/ajax/cart_preview.php", type: 'GET', success: function(res) { $('#cart_preview_contents').html(res); } }); } }); // show current cash on hand popup $('.cash_on_hand_button').popup({ popup : $('#cash_on_hand_popup'), position: 'bottom right', target : '.menu.right', on : 'click' }); // time tracker popup $('.time_tracker').popup({ popup : $('#time_tracker_popup'), position: 'bottom right', on : 'click' }); // rapid sku addition $('.rapid_sku_modal').click(function() { openModal('#rapid_sku_modal'); document.getElementsByName('rapidName')[0].focus(); }); $('.showRapidFields').click(function() { // show optional rapid sku fields $('.rapidDetails').show(); $('.showRapidFields').hide(); $('.hideRapidFields').show(); }); $('.hideRapidFields').click(function() { // hide optional rapid sku fields $('.rapidDetails').hide(); $('.hideRapidFields').hide(); $('.showRapidFields').show(); }); $('#products_descriptionRapid').on('input', function() { // if rapid sku description has a value, ensure the validation message is hidden var desc = $('#products_descriptionRapid').val(); if(desc != ''){ $('#emptyDescription').hide(); $('#rapidDescriptionLabel').show(); } }); $("#rapidSkuForm").on("keypress", function (event) { // disable the enter button unless in a textarea var keyPressed = event.keyCode || event.which; if(event.keyCode == 13 && event.target.nodeName!='TEXTAREA'){ event.preventDefault(); return false; } }); $('#rapidSkuForm').submit(function() { event.preventDefault(); var desc = $('#products_descriptionRapid').val(); // pull description for validation if(!desc){ // if rapid sku description has not value, show the validation message $('#rapidDescriptionLabel').hide(); $('#emptyDescription').show(); }else{ $('#rapid_modal_loader').addClass('active'); // // show loader var products_common_name = $('#products_common_nameRapid').val(); var products_price = $('#products_priceRapid').val(); var products_tax_exempt = $('#products_tax_exemptRapid').val(); var products_description = $('#products_descriptionRapid').val(); var products_brand = $('#products_brandRapid').val(); var products_brand_type = $('#products_brand_typeRapid').val(); var products_mfr_part_number = $('#products_mfr_part_numberRapid').val(); var rapidQty = $('#rapidQty').val(); $.ajax({ type: "POST", url: '/?view=quickfire&target=rapidSkuAddition', data: 'products_common_name='+products_common_name+'&products_price='+products_price+'&products_tax_exempt='+products_tax_exempt+'&products_description='+products_description+'&products_brand='+products_brand+'&products_brand_type='+products_brand_type+'&products_mfr_part_number='+products_mfr_part_number+'&rapidQty='+rapidQty, success: function(data) { $('.rapidIcon').removeClass('fa-spin'); var view = $('#viewParam').val(); showMessage('<strong><i class="fa-solid fa-box-check"></i> '+products_common_name+' ('+products_description+')</strong> successfully added!', 'success'); // display a success message if(view == 'checkout_begin'){ } $('#rapidQty').val(0); $('#products_brandRapid').val('Quality Restored'); $("#products_brand_typeRapid").val("Misc").change(); $("#products_tax_exemptRapid").val("0").change(); $('#products_common_nameRapid').val(''); $('#products_priceRapid').val(''); $('#products_descriptionRapid').val(''); $('#products_mfr_part_numberRapid').val(''); quietClose = true; $('#rapid_sku_modal').modal('hide'); $('#rapid_modal_loader').removeClass('active'); // // hide loader $('.hideRapidFields').click(); if(rapidQty && rapidQty > 0){ var cartIconCounter = $('#cartIconCounter').html(); if(cartIconCounter){ $('#cartIconCounter').html(+cartIconCounter + +rapidQty); }else{ $('#cartIconCounter').html(+rapidQty); } } if(view == 'checkout_begin'){ var category = 80; var nonTaxInput = taxExemptInput = op_tax_free = ''; var value = +rapidQty * +products_price; if(products_tax_exempt == 1){ nonTaxInput = '<input type="hidden" id="taxex'+data+'" value="1">'; taxExemptInput = '<input type="hidden" class="taxExemptItems" id="taxExemptItems'+data+'" value="'+value+'">'; op_tax_free = '<input type="hidden" name="op_tax_free[]" value="'+data+'">'; } $('#initial_cart tbody').append('<tr id="productRow'+data+'">'+nonTaxInput+taxExemptInput+op_tax_free+'<td class="four wide center aligned column"></td><td valign="middle"><p><a href="/?view=view_product_detail&id='+data+'">'+products_description+'</a></p><input type="hidden" name="generateProductNeeded['+data+']" value="'+rapidQty+'"><div class="cart_non_discountable" id="'+data+'_boxContainer"><label><input class="dontDiscountThese" type="checkbox" name="op_dontdiscountthese[]" id="'+data+'_box" value="'+data+'"> Non-Discountable</label></div><div class="product_Qtyx" style="transform:scale(0.8);"><div class="ui sixteen tiny buttons center aligned"><div value="-" field="qty'+data+'" class="ui button" onClick="qtyChange(\'qty'+data+'\',\'minus\');"><i class="fa-duotone fa-minus" style="top:25px;" aria-hidden="true"></i></div><div class="ui fluid button disabled qtynumber"><input min="0" step="1" oninput="validity.valid||(value=Math.floor(this.value));" id="qty'+data+'" type="number" name="qty_'+data+'" value="'+rapidQty+'" class="updateQty noselect qty_Box qty searchQty" onfocus="this.select()" onblur="this.value=!this.value?0:this.value;" data-product="'+data+'" data-category="'+category+'" data-price="'+products_price+'"></div><div value="+" field="qty'+data+'" class="ui button" onClick="qtyChange(\'qty'+data+'\',\'plus\');"><i class="fa-duotone fa-plus" style="top:25px;" aria-hidden="true"></i></div></div></div></td><td valign="middle" style="text-align:center;"><i class="fa-duotone fa-badge-dollar fa-2x perProdDiscountIcon" onClick="perProdDiscount('+data+');" data-prod-id="'+data+'" id="perProdButton'+data+'" title="'+products_description+'" aria-hidden="true"></i><span class="sr-only">'+products_description+'</span></td><td valign="middle" style="text-align:center;">$<span id="'+data+'_total" title="'+products_price+'" class="cartVal cartValx">'+value.toFixed(2)+'</span><p><br><a class="ui tiny red button" href="/controllers/remove_Product_From_Cart.Process.php?id='+data+'" onclick="return confirm(\'Are you sure you want to remove this from your cart?\')">Delete</a></p></td><input type="hidden" name="op_products_id[]" value="'+data+'"><input type="hidden" name="op_price_paid_per_product[]" value="'+products_price+'"><input type="hidden" name="'+data+'_jq" value="'+products_price+'"><input type="hidden" id="'+data+'_ppd" value="0"><input type="hidden" name="op_products_mfr_part_number[]" value="'+products_mfr_part_number+'"><input type="hidden" name="op_products_name[]" value="'+products_common_name+'"><input type="hidden" name="op_products_qty[]" id="op_products_qty'+data+'" value="'+rapidQty+'"><input type="hidden" name="op_products_cat[]" id="op_products_cat'+data+'" value="'+category+'"><input type="hidden" id="'+data+'ppdArcTotal" name="'+data+'ppdArcTotal" value="'+products_price+'"><input type="hidden" id="'+data+'ppdSavings" name="'+data+'ppdSavings" value="'+products_price+'"><input type="hidden" name="product_'+data+'" value="'+rapidQty+'"></tr>'); // display the product in checkout rebuildCart(data, products_price); dontDiscountThese(); toggleCashDiscount(); } } }); } }); // machine lookup $('.machine_lookup_modal').click(function() { openModal('#machine_lookup_modal'); document.getElementsByName('machine_number')[0].focus(); }); $('#machine_lookup_form_submit').click(function() { $('#machine_lookup_form').submit(); }); $('#expense_vendor').change(function() { if ($(this).val() == 'NewVendor') { $('#vendor_info').show(); } }); var enableBlindSubmit = 0; $('.blindFirstNameInput').bind('click', function(event) { $('.blindFirstNameInput').bind('keyup', function(event) { enableBlindSubmit = 1; }); }); $('.blindEmailInput').bind('click', function(event) { $('.blindEmailInput').bind('keyup', function(event) { if(enableBlindSubmit == 1){ enableBlindSubmit = 2; } if(enableBlindSubmit == 2){ //alert('enable submit!'); $('#blindButton').prop('disabled', false); } }); }); // start - remember the input data for this form $('.rememberTheFormalo').bind('keyup', function(event) { var datastring = $(".rememberTheFormalo").serialize(); console.log(datastring); $.ajax({ type: "POST", url: "rememberTheFormalo.php", data: datastring, cache: false, success: function(html){ } }); }); // end - remember the input data for this form // management "sales activities" custom date selection $('#sales_activities_select').change(function() { var selectedTimeRange = $('#sales_activities_select').find(":selected").text(); if(selectedTimeRange != 'Custom Range'){ $('#sales_activities_form').submit(); }else{ $('#sales_activities_select_container').toggle(); $('#sales_activities_custom').toggle(); $('#start_date').focus(); } }); // order note addition $(document).on('change','.note_visibility_selector',function(){ // send the on ID to a processor; pull existing note there and combine var thisID = $(this).attr("name"); $('#checkBoxContainer_'+thisID).hide(); // hide the checkbox $('#checkBoxLoader_'+thisID).show(); // show the loader /******* this section is only for the gui update process *******/ // get existing note [display only] var existingNote = $('#ex_orderNote').html(); // get the selected note content from the cell [display only] var selectedNote = $('#noteContentCell_'+thisID).html(); var action = ''; if (this.checked) { action = 'show'; $('#ex_orderNote').html(existingNote+'<span id="added_'+thisID+'" class="visible_OrderNote" title="This is an order note being displayed to the customer."> '+selectedNote+'</span>'); } else { $('#ex_orderNote').find('#added_'+thisID).remove(); action = 'hide'; } /******* this section is only for the ajax update process *******/ var newNoteContent = $('#ex_orderNote').html(); var dataString = 'newContent='+newNoteContent+'&on_id='+thisID+'&action='+action+'&oldContent='+existingNote; //console.log(dataString) $.ajax({ type: "POST", url: "orderNoteVisibility.php", data: dataString, cache: false, success: function(html){ $('#checkBoxContainer_'+thisID).show(); // hide the checkbox $('#checkBoxLoader_'+thisID).hide(); // show the loader } }); }); // driver note addition $(document).on('change','.note_visibility_selector_driver',function(){ var thisID = $(this).attr("name"); $('#checkBoxContainerDriver_'+thisID).hide(); // hide the checkbox $('#checkBoxLoaderDriver_'+thisID).show(); // show the loader var action = ''; if (this.checked) { action = 'show'; } else { action = 'hide'; } var dataString = 'on_id='+thisID+'&action='+action; $.ajax({ type: "POST", url: "orderDriverNoteVisibility.php", data: dataString, cache: false, success: function(html){ $('#checkBoxContainerDriver_'+thisID).show(); // hide the checkbox $('#checkBoxLoaderDriver_'+thisID).hide(); // show the loader } }); }); // activity form modal $('.activity_modal_button').click(function() { // this makes an activity for a specific user var thisID = $(this).attr("id"); $('#activityUserID').val(thisID); if($(this).hasClass('dragulaEdit')){ var thisID = $(this).attr("id"); thisID = thisID.replace('user',''); $('#activityTitle').html('Edit Activity'); /* note */ var existingNote = $('#'+thisID+'note').val(); $('input[name=sfa_notes]').val(existingNote); /* date */ var existingDate = $('#'+thisID+'date').val(); $('input[name=date]').val(existingDate); /* title */ var existingTitle = $('#'+thisID+'title').val(); $('input[name=sfa_title]').val(existingTitle); /* selected */ var selectedType = $('#'+thisID+'type').val(); $("input[name=sfa_type][value=" + selectedType + "]").attr('checked', 'checked'); var selectedsf = $('#'+thisID+'sf').val(); $('#create_activity_submit').html('Save Edits'); $('#create_activity_submit').val(selectedsf); }else{ $('#create_activity_submit').html('<i class="fa-solid fa-circle-check riseCRMiconOpacity"></i> Create Activity'); $('#activityTitle').html('<i class="fa-solid fa-calendar riseCRMiconOpacity"></i> Create Activity'); $('#create_activity_show').show(); $('#create_activity_submit').val(''); } $('#activity_modal').modal({ onShow: function() { // calendar picker $('#activity_modal .ui.calendar').calendar({ type: 'date' }); } }).modal('show'); return false; }); // Toggle "mark all non-discountable" / "undo" $(document).on('click', '#nondiscountableSelectAllButton', function () { const $btn = $(this); const $checks = $('.dontDiscountThese'); if ($checks.length === 0) return; // nothing to do // If ALL are checked, next click = UNCHECK all; else CHECK all const allChecked = $checks.filter(':checked').length === $checks.length; const targetChecked = !allChecked; $checks.prop('checked', targetChecked).trigger('change'); // Update button look/text for the NEXT action if (targetChecked) { // We just marked them all non-discountable -> offer undo $btn .data('allOn', true) .removeClass('primary').addClass('basic') .html('<i class="fa-solid fa-arrow-rotate-left icon"></i> Undo Mark All Non-Discountable'); } else { // We just undid -> offer mark all $btn .data('allOn', false) .removeClass('basic') .html('<i class="fa-solid fa-check icon"></i> Mark All Non-Discountable'); } dontDiscountThese(); }); $('#nondiscountableSelectAllButton').removeClass('basic') .html('<i class="fa-solid fa-check icon"></i> Mark All Non-Discountable') .data('allOn', false); // set quantity field as disabled on mobile if ($(window).width() < 600) { $.each($('.searchQty'), function() { $(this).prop('readonly', 'readonly'); }); } // expense form modal $('.expense_modal_button').click(function() { $('#expense_modal').modal({ onShow: function() { // calendar picker $('#expense_form .ui.calendar').calendar({ type: 'date' }); } }).modal('show'); return false; }); // expense form validation $('#expense_form').form({ on: 'blur', inline: true, fields: { amount: { identifier: 'amount', rules: [{ type: 'empty', prompt: 'Please enter the amount' }] }, date: { identifier: 'date', rules: [{ type: 'empty', prompt: 'Please enter the date of the expense' }] }, vendor: { identifier: 'vendor', rules: [{ type: 'empty', prompt: 'Please select the vendor' }] }, uploaded: { identifier: 'uploaded', rules: [{ type: 'empty', prompt: 'Please upload the receipt image' }] }, ledger: { identifier: 'ledger', rules: [{ type: 'empty', prompt: 'Please select the account' }] }, description: { identifier: 'description', rules: [{ type: 'empty', prompt: 'Please enter a description of the expense' }] } } }); $('#expense_form_submit').click(function() { if ($('#expense_form').form('is valid')) { $('#expense_form').submit(); } else { // check for image uploaded var uploaded = $('#expense_form input[name="uploaded"]').val(); if (uploaded == '') { $('#receipt_image_error').show(); } } }); // load the dropzone for receipts Dropzone.autoDiscover = false; $('#receipt_file').dropzone({ url: '/?view=accounting_updates&form_type=receipt_image', acceptedFiles: 'image/png, image/jpeg, image/gif, application/pdf', maxFiles: 1, resizeWidth: 1000, previewsContainer: '#receipt_preview', previewTemplate: '<div class="dz-preview dz-file-preview ui image fluid blue big label"><img data-dz-thumbnail /> Receipt Uploaded</div>', uploadprogress: function() { $('#receipt_file').addClass('loading disabled'); $('#expense_form_submit').addClass('disabled'); }, success: function(file, response) { $('#receipt_file').removeClass('loading disabled'); $('#expense_form_submit').removeClass('disabled'); $('#receipt_preview').show(); $('#receipt_file').hide(); $('#expense_form input[name="uploaded"]').val(response); } }); // left side menu options $('.ui.accordion').accordion(); $("#launch-mobile-sidebar").on("click",null,function(e){ $('#auth-left-menu').sidebar('toggle'); }); // used for report tables var reportTable = $('#report').DataTable({ buttons: [ { extend: 'csvHtml5', className: 'item', text: 'Export to CSV' }, { extend: 'excelHtml5', className: 'item', text: 'Export to Excel' } ], // order manager table sort order: [[ 0, "desc" ]], language: { search: '', searchPlaceholder: "Search..." }, pageLength: 50, drawCallback: function() { $('.ui.dropdown').dropdown(); $('.ui.checkbox').checkbox(); }, columnDefs: [ { targets: 'no-sort', orderable: false } ] }); // scroll to top of table on report pagination reportTable.on('page.dt', function() { $('html, body').animate({ scrollTop: $(".dataTables_wrapper").offset().top }, 'slow'); }); $('#auth-top-menu .ui.search, #auth-left-menu .ui.search').search({ apiSettings: { url: '/?view=search_ajax&q={query}' }, type: 'category', searchDelay: '300', maxResults: '10', minCharacters: '2' }); $('.tpSearch .ui.search').search({ apiSettings: { url: '/?view=search_ajax&q={query}' }, type: 'category', searchDelay: '300', maxResults: '10', minCharacters: '2' }); $('.toppy .ui.search').search({ apiSettings: { url: '/?view=search_ajax&q={query}' }, type: 'category', searchDelay: '300', maxResults: '10', minCharacters: '2' }); // show the popover for tagged users $('.tagged_user').popup(); $('.ui.dropdown').dropdown(); $('.ui.checkbox').checkbox(); // show the multi dropdown for report buttons $('.buttons > .ui.dropdown').dropdown(); $('.buttons > .ui.dropdown').prepend('<span class="text">Export</span><i class="dropdown icon"></i>'); $('#report_filter .ui.input').prepend('<i class="fad fa-search icon"></i>'); // keep report table head at top! var scrollvar = $('#report'); if (scrollvar.length) { var reportTableHead = $('#report').offset().top; $(window).on('scroll', function() { if ($(window).scrollTop() >= reportTableHead) { $('.scroll-head').css('position', 'fixed'); $('.scroll-head').css('width', '100%'); $('.scroll-head').css('top', ($(window).scrollTop() + 50) + 'px'); } else { $('.scroll-head').css('position', 'relative'); $('.scroll-head').css('top', '0px'); } }); } }); var barcode = ''; var barcodeTimer; // add barcode listener $(document).on('keyup', function(e) { // make sure we aren't scanning for the credit card swipe if (!$(event.target).is(':input') && !$(event.target).hasClass('ql-editor')) { if (e.keyCode == 79 || e.keyCode == 189 || e.keyCode == 32 || e.keyCode >= 48 && e.keyCode <= 57) { barcode += e.key; clearTimeout(barcodeTimer); barcodeTimer = setTimeout(scanBarcode, 500); } e.preventDefault(); } }); function showMessage(message, type){ // display a custom message // formatted types: warning, info, positive/success, negative/error // color types: red, orange, yellow, olive, green, teal, blue, violet, purple, pink, brown, black // size types: mini, tiny, small, large, big, huge, massive if(message){ // if a message exists $("#genericMessage").removeClass(); // reset any existing classes $("#genericMessage").addClass('ui message'); // reset to standard message $("#genericMessageContent").html(message); // populate the message $("#genericMessage").show(); // show the message if(type){ // if a message type is supplied, add the class $("#genericMessage").addClass(type); } } } function toFixed( num, precision ) { return (+(Math.round(+(num + 'e' + precision)) + 'e' + -precision)).toFixed(precision); } function scanBarcode() { if (barcode.length >= 6 && barcode.length < 15) { $('#barcodeAutoScan').val(barcode); $.ajax({ type: "POST", url: '/?view=quickScanToCart', data: $('#autoScanner').serialize(), success: function(res) { // clear the inputs for next barcode barcode = ''; $('#barcodeAutoScan').val(''); if ($.isNumeric(res)) { // set the total on the cart icon $('.cart_badge').html(res); // show the cart preview if ($('#cart_preview_popup').hasClass('hidden')) { $('.cart_preview_button').click(); } $.ajax({ url: "cfx_controllers/ajax/cart_preview.php", type: 'GET', success: function(res) { $('#cart_preview_contents').html(res); } }); } else if (res.includes('order-')) { var orderId = res.replace('order-', ''); window.location.replace('/?view=cfx_view_order&order_id='+orderId); } } }); } else { $('#barcodeAutoScan').val(''); } } function verifySerialAvailable(verifyType, input, button, errorElement, machine_id){ let targetButtonId = button; let errorMessage = errorElement; var requested_serial = $('#'+input).val(); var machineParameter = ''; if(machine_id){ machineParameter = '&machine_id='+machine_id; } dataString = 'request='+requested_serial+'&type='+verifyType+machineParameter; $('#'+targetButtonId).addClass('disabled loading'); $.ajax({ type: "POST", url: "cfx_controllers/ajax/verify_serial_number_availability.php", data: dataString, cache: false, success: function(html){ if (html){ $('#'+errorMessage).html(html); $('#'+errorMessage).show(); }else{ $('#'+targetButtonId).removeClass('disabled'); $('#'+errorMessage).html(''); $('#'+errorMessage).hide(); } $('#'+targetButtonId).removeClass('loading'); } }); } function verifyPaymentMethodNextStep(){ // have we selected a payment method? if($('input[name=paymentMethod]:checked').length > 0){ // is "credit card" selected if($('input[name=paymentMethod]:checked').val() == 'Credit Card'){ // if the card number has the disabled input dealio, kill the next button if ($("#ucc_card_number_check").hasClass("red")) { $(".button-review").addClass('disabled'); }else{ $(".button-review").removeClass('disabled'); } $(".button-review").removeClass('disabled'); } $(".button-review").removeClass('disabled'); } } function makeEmail(targetInput) { var strValues = "abcdefg12345"; var strEmail = ""; var strTmp; for (var i = 0; i < 10; i++) { strTmp = strValues.charAt(Math.round(strValues.length * Math.random())); strEmail = strEmail + strTmp; } strTmp = ""; strEmail = strEmail + "@"; for (var j = 0; j < 8; j++) { strTmp = strValues.charAt(Math.round(strValues.length * Math.random())); strEmail = strEmail + strTmp; } strEmail = strEmail + ".com" $(targetInput).val(strEmail); $(targetInput).html(strEmail); } /** * Display a toast notification * @param {string} message The message content (can include HTML). * @param {string} [type='grey'] The Semantic UI color or a type like 'success', 'error', 'info', 'warning'. * @param {string} [size='small'] The Semantic UI size ('mini', 'tiny', 'small', 'large', 'big', 'huge', 'massive'). * @param {number} [duration=2500] The total time in milliseconds the toast should be visible (including fade-out time). */ const activeToasts = {}; function showToast(message, type = 'grey', size = 'small', duration = 2500) { const $toastContainer = $('#toast-container'); // check for existing toast with the same message (prevent duplicate toasts) if (activeToasts[message]) { const existingToastData = activeToasts[message]; const $existingToast = existingToastData.$element; if (existingToastData.timeoutId) { clearTimeout(existingToastData.timeoutId); } $existingToast.stop(true, true); $existingToast.css({ opacity: 1, display: 'block' }).removeClass('hide').addClass('show'); $existingToast.removeClass(existingToastData.type).addClass(type); $existingToast.removeClass(existingToastData.size).addClass(size); const newTimeoutId = setupToastFadeOut($existingToast, duration); existingToastData.timeoutId = newTimeoutId; existingToastData.type = type; existingToastData.size = size; return; } const $toast = $('<div class="ui message toast-message"></div>') .addClass(type) .addClass(size); const $closeIcon = $('<i class="fas fa-circle-x close icon toastClose"></i>'); $toast.append($closeIcon); const $messageContent = $('<div class="toast-message-content"></div>').html(message); $toast.append($messageContent); $toastContainer.append($toast); const timeoutId = setupToastFadeOut($toast, duration); activeToasts[message] = { $element: $toast, timeoutId: timeoutId, type: type, size: size }; $toast[0].offsetHeight; $toast.addClass('show'); $closeIcon.on('click', function() { if (activeToasts[message] && activeToasts[message].timeoutId) { clearTimeout(activeToasts[message].timeoutId); } $toast.fadeOut(300, function() { $(this).remove(); }); }); $toast.on('remove', function() { if (activeToasts[message] && activeToasts[message].$element[0] === this) { if (activeToasts[message].timeoutId) { clearTimeout(activeToasts[message].timeoutId); } delete activeToasts[message]; } }); } function setupToastFadeOut($toastElement, totalDisplayDurationMs) { if (totalDisplayDurationMs <= 0) { return null; } const fadeOutAnimationDuration = 500; const minDisplayTimeBeforeFade = 50; let delayBeforeFade = totalDisplayDurationMs - fadeOutAnimationDuration; if (delayBeforeFade < minDisplayTimeBeforeFade) { delayBeforeFade = minDisplayTimeBeforeFade; } return setTimeout(function() { $toastElement.fadeOut(fadeOutAnimationDuration, function() { $(this).remove(); }); }, delayBeforeFade); } function openModal(modal) { // ... (rest of your openModal code) ... $(modal).modal({ closable: false, // ... (modal settings) ... onShow: function() { // It's good practice to reset quietClose on show // And use .off().on() to prevent multiple bindings if modal is repeatedly opened quietClose = true; $(modal + ' input:not([type=hidden])').off('change paste keyup').on('change paste keyup', function() { quietClose = false; }); }, onHide: function() { // Also, explicitly return true to allow hiding if condition met /* When hiding a modal programmatically, like on an ajax call result. set quietClose = true; then $('#someModal').modal('hide'); */ if (quietClose === false) { // Use === for strict comparison if(window.confirm('Exit and lose your changes?')) { // If user confirms, reset form for good measure (optional, but good practice) // if ($(this).find('form')[0]) { // $(this).find('form')[0].reset(); // } quietClose = true; return true; // Explicitly return true to allow modal to hide } else { return false; // User cancelled, prevent modal from hiding } } return true; // IMPORTANT: If quietClose is true, explicitly allow modal to hide }, onDeny: function() { // Apply the same quietClose logic as onHide for consistency if (quietClose === false) { if(window.confirm('Exit and lose your changes?')) { quietClose = true; return true; } else { return false; } } return true; // Allow hide if quietClose is true }, onApprove: function() { quietClose = true; // This is correct, ensures quiet close on approve return true; // Explicitly return true to allow modal to hide } }).modal('show'); } // Allows a user to update the position of the item in the wishlist. function moveWishlistItem(userID, newWishlist){ var dataString = 'id='+userID+'&list='+newWishlist; $.ajax({ type: "GET", url: "cfx_controllers/ajax/wishlist_move_action_center.php", data: dataString, cache: false, success: function(html){ } }); } function editPrinterOnItem(wishlists_ID, product_ID, printer){ var dataString = 'wishlists_ID='+wishlists_ID+'&product_ID='+product_ID+'&printer='+printer; $.ajax({ type: "GET", url: "cfx_controllers/ajax/edit_Product_List_Printers.php", data: dataString, cache: false, success: function(html){ alert("Printer Modified!"); $("a[data-list_id='"+wishlists_ID+"'][data-product_id='"+product_ID+"'][data-printer]").attr("data-printer",printer); } }); } function deleteSalesOrder(orderID){ var dataString = 'req=void&saleorder='+orderID; $.ajax({ type: "GET", url: "cfx_controllers/ajax/sales_order_action_center.php", data: dataString, cache: false, success: function(html){ alert('Sales Order deleted!'); $('.row_'+orderID).fadeOut('slow'); } }); } function denySalesOrder(orderID){ var dataString = 'req=deny&saleorder='+orderID; $.ajax({ type: "GET", url: "cfx_controllers/ajax/sales_order_action_center.php", data: dataString, cache: false, success: function(html){ alert('Sales Order denied!'); $('.row_'+orderID+' td:nth-child(4)').html('<a class="ui tag red label">Denied</a>'); var newButtons = '<div class="ui buttons"><a href="?view=checkout_begin&reorderID='+orderID+'" class="ui teal button">Order</a><div class="or"></div><button class="ui red button" onclick="if(confirm(\'Are you sure?\')) deleteSalesOrder('+orderID+');">Delete</button></div>'; $('.row_'+orderID+' td:nth-child(5)').html(newButtons); } }); } function restoreInventoryProduct(prodID){ var dataString = 'req=restore&prodID='+prodID; $.ajax({ type: "GET", url: "cfx_controllers/ajax/inventory_demand_action_center.php", data: dataString, cache: false, success: function(html){ alert('Product restored!'); $('.row_'+prodID).fadeOut('slow'); } }); } function hideInventoryProduct(prodID){ var dataString = 'req=hide&prodID='+prodID; $.ajax({ type: "GET", url: "cfx_controllers/ajax/inventory_demand_action_center.php", data: dataString, cache: false, success: function(html){ alert('Product hidden!'); $('.row_'+prodID).fadeOut('slow'); } }); } function deleteFranchiseEmployee(ruleID){ var dataString = 'req=delete&rule='+ruleID; $.ajax({ type: "GET", url: "cfx_controllers/ajax/franchise_action_center.php", data: dataString, cache: false, success: function(html){ alert('Employee removed!'); $('.row_'+ruleID).fadeOut('slow'); } }); } function deleteDistroPricingRule(ruleID){ var dataString = 'req=delete&rule='+ruleID; $.ajax({ type: "GET", url: "cfx_controllers/ajax/distro_pricing_action_center.php", data: dataString, cache: false, success: function(html){ alert('Rule deleted!'); $('.row_'+ruleID).fadeOut('slow'); } }); } function deleteMarginRule(ruleID){ var dataString = 'req=delete&rule='+ruleID; $.ajax({ type: "GET", url: "cfx_controllers/ajax/margin_settings_action_center.php", data: dataString, cache: false, success: function(html){ alert('Rule deleted!'); $('.row_'+ruleID).fadeOut('slow'); } }); } function deleteQuotingPrinter(productID, productName){ var dataString = 'req=remove&productID='+productID+'&productName='+productName; $.ajax({ type: "GET", url: "cfx_controllers/ajax/quoting_action_center.php", data: dataString, cache: false, success: function(html){ $('.row_'+productID).fadeOut('slow'); } }); } function deleteUUPRule(ruleID, refresh){ var dataString = 'req=delete&rule='+ruleID+'&refresh='+refresh; $.ajax({ type: "GET", url: "cfx_controllers/ajax/uup_action_center.php", data: dataString, cache: false, success: function(html){ alert('Rule deleted!'); if(html == 1){ window.location.reload(); }else{ $('#row_'+ruleID).fadeOut('slow'); } } }); } function openPunchCard(user_id) { $('.closeModal').on('click', function(){ $('.ui.modal.active').modal('hide'); }); $('#punch_clock_user_id').val(user_id); $('#punchCardModal').modal({autofocus: false}).modal('show'); } function editPunchCard(user_id, edit_id, timestamp) { $('.closeModal').on('click', function(){ $('.ui.modal.active').modal('hide'); }); $('#punch_clock_edit_user_id').val(user_id); $('#punch_clock_edit_update_id').val(edit_id); $('#punchclock_date_input').val(timestamp); $('#punchcard_datetime').calendar({ type: 'datetime', formatter: { date: function (date, settings) { if (!date) return ''; let month = String(date.getMonth() + 1); let day = String(date.getDate()); const year = String(date.getFullYear().toString().substr(2,2)); if (month.length < 2) month = '0' + month; if (day.length < 2) day = '0' + day; return month + '/' + day + '/' + year; } } }); // Reset the time clock note. $('#punch_clock_edit_note').val(''); $('#punchCardEditModal').modal('show'); } function deletePCRule(ruleID){ $.ajax({ type: "POST", url: "cfx_controllers/ajax/timeclock_action_center.php", data: { punch_clock_type: 'delete', punch_clock_update_id: ruleID }, cache: false, success: function(response){ var result = response.trim(); if (result === 'success' || result === 'true' || result === '1') { alert('Punch deleted!'); $('#row_'+ruleID).fadeOut('slow'); } else { alert("Could not delete. Server responded: " + result); } }, error: function() { alert('Critical error: Could not connect to the server to delete the punch.'); } }); } function updateTimeClock(type){ // Get the form. if(type == 'edit') { var form = $('#punch_clock_edit_form'); var reason = $('#punch_clock_edit_note').val(); if(!reason){ // if a reason for editing is not provided, show a warning and stop the function $('#punch_clock_edit_note_required').show(); return; } } else { var form = $('#punch_clock_form'); } // Serialize the data in the form. var serializedData = form.serialize(); $.ajax({ type: "POST", url: "cfx_controllers/ajax/timeclock_action_center.php", data: serializedData, cache: false, success: function(tc_response){ var tc_info = jQuery.parseJSON(tc_response); if(tc_info.error){ showToast('<strong>'+tc_info.msg+'</strong>', 'large', 'error', 4000); // display a failure message. } else{ // Update the timeclock icons. if(tc_info.clock_status) { // Green if clocked in. $(".time_clock_icon_color").css('color', '#2ee45c'); } else { // Red if clocked out. $(".time_clock_icon_color").css('color', '#ec6061'); } $('#punch_clock_note').val(''); // clear the timeclock note // And show a success message. showToast('<strong>'+tc_info.msg+'</strong>', 'large', 'success', 4000); } if(type == 'edit') { $('#punchCardEditModal').modal('hide'); $('#ajaxApplyFilter').trigger('click'); } else { $('#punchCardModal').modal('hide'); } } }); } function regeneratePDF(type, id){ if(type == 'packing'){ type = 'email_create_packing_slip_pdf'; get = 'order'; }else if(type == 'receipt'){ type = 'email_create_pdf'; get = 'order'; }else if(type == 's_invoice'){ type = 'email_create_pdf'; get = 's_invoice'; } var openUp = new XMLHttpRequest(); openUp.open('get', '/cfx_controllers/'+type+'.php?'+get+'='+id+'&generate=yea', true); openUp.send(); } function editContact(user){ // Get the form. var form = $('#update_list_form'); // Serialize the data in the form. var serializedData = form.serialize(); var editContactType = $('input[name=contact_section]').val(); $.ajax({ type: "POST", url: "cfx_controllers/ajax/edit_Contact.php", data: serializedData, cache: false, success: function(newContactRow){ var newContactInfo = jQuery.parseJSON(newContactRow); // Add the formatting fixes for these fields. (Move it out of the way) // protection for the sub-user login info. if(newContactInfo.error){ alert(newContactInfo.msg); } else{ // Handling for the type of contact being edited. chooseContact(editContactType, newContactInfo.c_id, newContactInfo.c_name, newContactInfo.c_email, newContactInfo.c_phone, newContactInfo.c_address, user); // If an entry has been edited, edit the other contact selections that display the edited value. if($('input[name=delivery_contact_id]').val() == newContactInfo.c_id) { chooseContact('delivery_contact', newContactInfo.c_id, newContactInfo.c_name, newContactInfo.c_email, newContactInfo.c_phone, newContactInfo.c_address, user); } if($('input[name=placing_contact_id]').val() == newContactInfo.c_id) { chooseContact('person_placing_order', newContactInfo.c_id, newContactInfo.c_name, newContactInfo.c_email, newContactInfo.c_phone, newContactInfo.c_address, user); } if($('input[name=billing_contact_id]').val() == newContactInfo.c_id) { chooseContact('billing_contact', newContactInfo.c_id, newContactInfo.c_name, newContactInfo.c_email, newContactInfo.c_phone, newContactInfo.c_address, user); } } } }); } function editAddress(){ // Get the form. var form = $('#address_list_form'); // Serialize the data in the form. var serializedData = form.serialize(); $.ajax({ type: "POST", url: "cfx_controllers/ajax/edit_Address.php", data: serializedData, cache: false, success: function(newAddressRow){ var newAddressInfo = jQuery.parseJSON(newAddressRow); // Add the formatting fixes for these fields. (Move it out of the way) // error message for the address if(newAddressInfo.error){ alert(newAddressInfo.msg); } else{ chooseAddress('delivery_address', newAddressInfo.us_ID, newAddressInfo.us_label, newAddressInfo.us_shipping_address, newAddressInfo.us_shipping_address_two, newAddressInfo.us_city, newAddressInfo.us_state, newAddressInfo.us_zipcode, newAddressInfo.us_taxFreeAddress); } } }); } function addBillingInfoJava(){ // Get the form. var form = $('#add_billing_list_form'); // Serialize the data in the form. var serializedData = form.serialize(); $.ajax({ type: "POST", url: "cfx_controllers/ajax/add_Billing_Info_Card.php", data: serializedData, cache: false, success: function(newCardRow){ var newCardInfo = jQuery.parseJSON(newCardRow); // Add the formatting fixes for these fields. (Move it out of the way) // error message for the Card if(newCardInfo.error){ alert(newCardInfo.msg); } else{ choosePayment('billing_information', newCardInfo.method, newCardInfo.title, newCardInfo.icon, newCardInfo.contact_id, newCardInfo.name, newCardInfo.email, newCardInfo.phone, newCardInfo.address_id, newCardInfo.label, newCardInfo.address, newCardInfo.address_two, newCardInfo.city, newCardInfo.state, newCardInfo.zip); } } }); } function deleteSoftwareUpdate(su_ID){ var dataString = 'req=delete&su_ID='+su_ID; $.ajax({ type: "GET", url: "cfx_controllers/ajax/su_action_center.php", data: dataString, cache: false, success: function(html){ alert('Rule deleted!'); $('.row_'+su_ID).fadeOut('slow'); } }); } function startLoader(text, size) { // text can be any string // sizes: mini, tiny, small, medium, large, big, huge, massive $('#main_container').css('height', '80vh'); $('#main_loader').addClass('active'); if(text){ $('#main_loader_text').html(text); } if(size){ $('#main_loader .ui.text.loader').addClass(size); } } function stopLoader() { $('#main_container').css('height', 'initial'); $('#main_loader').removeClass('active'); $('#main_loader_text').html(''); } function dragulaSlam(){ // how many wheels does our dragula have?! var totalStages = parseFloat($('.dragulaWheel').length) + 1; $('.backOfMy').append('<!-- pipeline stage --><div class="ui buttons dragulaWheel"><div class="ui icon button"><i class="icon fas fa-ban" onclick="dragulaBurn(this)"></i></div><a class="ui button dragulaNameDisplay" id="dragulaNameDisplay'+totalStages+'">New Stage</a><a class="ui icon button"><input type="hidden" value="New Stage" name="'+totalStages+'" id="dragulaNameToDB'+totalStages+'" /><input type="text" value="New Stage" class="dragulaNameInput" id="dragulaNameInput'+totalStages+'" style="display:none;" /><i class="icon fas fa-edit" id="dragulaEdit'+totalStages+'" onclick="dragulaCylinder('+totalStages+')"></i><i class="icon fas fa-save" id="dragulaSave'+totalStages+'" onclick="dragulaNewCylinder('+totalStages+')" style="display:none;"></i></a></div><!-- eo pipeline stage -->'); } $("document").ready( function(){ $(".dragulaNameInput").focus(function() { }).blur(function() { const targetID = $(this).attr("id"); var targetCat = targetID.replace('dragulaNameInput',''); dragulaNewCylinder(targetCat); }); }); function dragulaNewCylinder(id){ var newName = $('#dragulaNameInput'+id).val(); $('#dragulaNameInput'+id).val(newName); $('#dragulaNameDisplay'+id).html(newName); $('#dragulaNameToDB'+id).val(newName); $('#dragulaNameInput'+id).toggle(); $('#dragulaNameDisplay'+id).toggle(); $('#dragulaEdit'+id).toggle(); $('#dragulaSave'+id).toggle(); } function dragulaCylinder(id){ $('#dragulaNameInput'+id).toggle(); $('#dragulaNameDisplay'+id).toggle(); $('#dragulaEdit'+id).toggle(); $('#dragulaSave'+id).toggle(); } function dragulaBurn(elm, children) { if (children > 0) { // put the count into the modal $('#pipe_delete_count_js').html(children); // get the name of the pipeline $('#pipe_delete_label_js').html($(elm).parent().parent().find('.dragulaNameDisplay').text()); // get the available pipes to move deals into $('#pipe_delete_select_js').html(''); $('.dragulaNameDisplay').each(function() { thisText = $(this).text(); thisPipe = $(this).data('key'); // put all options in except for this one if (thisText == $(elm).parent().parent().find('.dragulaNameDisplay').text()) {} else { $('#pipe_delete_select_js').append('<option value="'+thisPipe+'">'+thisText+'</option>'); } }); $("#delete_pipe_form_submit").data('parent', $(elm).parent().parent().attr('id')); openModal('#delete_pipe_modal'); } else { $(elm).parent().parent().remove(); } } function timeTrackerNoteButtonMonitor(){ if ($('#timeTrackerSaveNoteBox').val().length == 0) { $('#timeTrackerSaveNote').hide(); }else{ $('#timeTrackerSaveNote').show(); } } function timeTrackerNote(orderID){ var newNoteToAdd = $('#timeTrackerSaveNoteBox').val(); $('#timeTrackerSaveNoteBox').val(''); $('#timeTrackerSaveNote').hide(); $('#timeTrackerNoteList').prepend('<div class="item timeTrackerNoteContainer">'+newNoteToAdd+'</div>'); dataString = 'req=note¬e='+newNoteToAdd+'&orderID='+orderID; $.ajax({ type: "POST", url: "timeTracker.php", data: dataString, cache: false, success: function(html){ $('#noteHolderContainer').show(); } }); $('#noNewNotes').hide(); } function timeTracker(request){ var orderNo = $('#timeTrackerOrderNoDisplay').html(); var nowTime = new Date(); var curTime = $('#liveTimeTracker').html(); // we paused; change paused button to resume button if(request == 29){ dataString = 'req='+request+'&orderNo='+orderNo+'&curTime='+curTime; // kill this time clock entry DB entry $.ajax({ type: "POST", url: "timeTracker.php", data: dataString, cache: false, success: function(html){ $('#liveTimeTracker').addClass('blink_me'); $('#timeTracker_resume').show(); $('#timeTracker_pause').hide(); var pausedTime = $('#liveTimeTracker').html(); $('#pausedAt').val(pausedTime); var nowTime = new Date(); $('#pausedTime').val(nowTime); } }); } // we resumed, change resume button to pause if(request == 25){ $('#trackingTimeSince').val(nowTime); var pausedTime = $('#trackingTimeSince').val(); dataString = 'req='+request+'&orderNo='+orderNo+'&curTime='+curTime; // kill this time clock entry DB entry $.ajax({ type: "POST", url: "timeTracker.php", data: dataString, cache: false, success: function(html){ $('#liveTimeTracker').removeClass('blink_me'); $('#timeTracker_resume').hide(); $('#timeTracker_pause').show(); $('#pausedTime').val(''); $('#pausedAt').val(''); } }); } // we stopped if(request == 26){ window.location.replace("/?view=cfx_view_order&order_id="+orderNo); } } function minTwoDigits(n) { return (n < 10 ? '0' : '') + n; } var validateSixDecimals = function(e) { // limit to 6 decimal places var t = e.value; e.value = t.indexOf(".") >= 0 ? t.slice(0, t.indexOf(".") + 7) : t; } function userFilter() { var selectedUser = $("#userFilterHimself option:selected").val(); $('#reset_filters').show(); $.each($(".assignee"), function() { orderAssignment = $(this).dropdown("get value"); if ($.inArray(selectedUser, orderAssignment) != -1) { $(this).closest('.orderRow').show(); } else { $(this).closest('.orderRow').attr('style','display:none !important'); // .hide() gets overridden on mobile by semantic ui's css; the !important is, well, important here } }); } function toggleSavedProductsBox() { window.location.replace('/?toggleSavedProductBox=1'); } // turn on desktop notifications function enableNotifications() { // Let's check if the browser supports notifications if (!("Notification" in window)) { console.log("This browser does not support system notifications"); } // Let's check whether notification permissions have already been granted else if (Notification.permission === "granted") {} // Otherwise, we need to ask the user for permission else if (Notification.permission !== 'denied') { Notification.requestPermission(function (permission) { // If the user accepts, let's create a notification if (permission === "granted") {} }); } } $(document).on('click', '.enableCashierButton', function() { $('.enableCashierButton').addClass('loading disabled'); $.ajax({ url: '?view=groceryDashboardAjax&action=toggle_cashier_mode', type: 'POST', success: function(response) { window.location.href = '/'; }, error: function(xhr, status, error) { console.error("Error toggling mode:", error); $('.enableCashierButton').removeClass('loading disabled'); } }); }); // verifies whether an orders delivery requirements are fulfilled function verifyOrderStatus(orderID) { if ($('.'+orderID+':checked').length == $('.'+orderID).length) { $('.row_'+orderID).css({"backgroundColor": "#00E676", "color": "white"}); $('.row_'+orderID).addClass('deliveryApproved'); }else{ $('.row_'+orderID).css({"backgroundColor": "#fff", "color": "inherit"}); $('.row_'+orderID).removeClass('deliveryApproved'); } if ($('.'+orderID+':checked').length == 0){ $('.row_'+orderID).css({"backgroundColor": "#fff", "color": "inherit"}); $('.row_'+orderID).removeClass('deliveryApproved'); } if($('.deliveryApproved').is(':visible')){ $('#deliverySubmitButton').show(); }else{ $('#deliverySubmitButton').hide(); } } $(function() { $('.dontDoubleClickMe_Bro').click(function() { $(this).addClass('disabled'); $(this).addClass('loading'); $(this).removeClass('transition'); $(this).removeClass('visible'); }); $("#result").on("click",null,function(e){ var $clicked = $(e.target); var $name = $clicked.find('.name').html(); var decoded = $("<div/>").html($name).text(); $('#searchid').val(decoded); }); $(document).on("click",null,function(e) { var $clicked = $(e.target); if (! $clicked.hasClass("search")){} }); $('.ui-state-default').hover( function(){ $(this).addClass('ui-state-hover'); }, function(){ $(this).removeClass('ui-state-hover'); } ); $('.ui-state-default').click(function(){ $(this).toggleClass('ui-state-active'); }); $('.icons').append('<a href="#">Toggle text</a>').find('a').click(function(){ $('.icon-collection li span.text').toggle(); return false; }).trigger('click'); $('#cssmenu ul ul li:odd').addClass('odd'); $('#cssmenu ul ul li:even').addClass('even'); $('#cssmenu > ul > li > a').click(function() { var checkElement = $(this).next(); $('#cssmenu li').removeClass('active'); $(this).closest('li').addClass('active'); if ((checkElement.is('ul')) && (checkElement.is(':visible'))) { $(this).closest('li').removeClass('active'); checkElement.slideUp('normal'); } if ((checkElement.is('ul')) && (!checkElement.is(':visible'))) { $('#cssmenu ul ul:visible').slideUp('normal'); checkElement.slideDown('normal'); } if ($(this).closest('li').find('ul').children().length == 0) { return true; } else { return false; } }); $(".add_to_cart").on('click','button',function(e) { var product_code = $(this).val(); var dataString = 'add='+ product_code + 'of=' +product_code; $.ajax({ type: "POST", url: "cart_update.php", data: dataString, cache: false, success: function(html) { $("#result").html(html).slideDown(); } }); }); $('.noSpecialCharacters').on('keypress', function (event) { var regex = new RegExp("^([A-Za-z0-9@\-\_.-]+)+$"); var key = String.fromCharCode(!event.charCode ? event.which : event.charCode); if (!regex.test(key)) { event.preventDefault(); return false; } }); }); </script> <input type="hidden" id="inactivityLimit" value="0" /> <!-- SEND OPEN TICKET MODAL --> <div id="share_cart_modal" class="ui tiny modal" style="border-radius: 20px !important;display:none;"> <div class="header"> Send Ticket <strong>: <u><span class="shareCartNameDisplay"></span></u></strong> </div> <i class="fad fa-times close icon"></i> <div class="content"> <div class="ui form"> <input type="hidden" id="share_cart_id" value=""> <div class="field" id="shareSmsEntryContainer" style="display:none;margin:0 !important;"> <label>Send to Phone Number</label> <div class="ui left big icon input"> <i class="fa-solid fa-phone icon"></i> <input type="tel" id="share_cart_phone" placeholder="(555) 555-1234" maxlength="14"> </div> </div> <div class="field" id="shareEmailEntryContainer" style="margin:0 !important;"> <label>Send to Email Address</label> <div class="ui left big icon input"> <i class="fa-solid fa-at icon"></i> <input type="email" id="share_cart_email" placeholder="customer@email.com"> </div> </div> </div> <div id="shareCartStatus" class="ui small info icon message" style="margin-top:15px;"> <i id="shareCartStatusIcon" class="fa-solid fa-minus fa-spin big icon"></i> <div class="content"> <div class="header" id="shareCartStatusHeader">Sending...</div> <p id="shareCartStatusText">Please wait.</p> </div> </div> </div> <div class="actions"> <div class="ui cancel big button" style="border-radius: 10px !important;"><i class="fa-solid fa-xmark"></i> Cancel</div> <button class="ui primary big button" type="button" id="share_cart_submit" onclick="sendShareCart();" style="border-radius: 10px !important;"> <i class="fa-solid fa-paper-plane" id="shareCartBtnIcon"></i> <span id="shareCartBtnText">Send Email</span> </button> </div> </div> <!--REGISTER ASSIGNMENT MODAL--> <div class="ui tiny modal" id="modal-assign-device" data-backdrop="static" data-keyboard="false"> <div class="header">Device Setup</div> <div class="content"> <div class="ui message info"> <div class="header">Unregistered Device</div> <p>This terminal is not assigned to a register yet. Please select one below.</p> </div> <div class="ui form"> <div class="field"> <label>Select Register</label> <select class="ui dropdown fluid" id="select-assign-register"> <option value="">Loading registers...</option> </select> </div> <div class="ui negative message" id="assign-permission-error" style="display:none;"> <div class="header">Permission Denied</div> <p>Only a Manager can configure a new device. Please sign in with a Manager account.</p> </div> </div> </div> <div class="actions"> <button class="ui button primary fluid" id="btn-confirm-assignment"> Assign This Device </button> </div> </div> <!--QUANTITY MODAL--> <div class="ui modal enter-quantity" id="qty-prompt-modal" style="display:none;"> <div class="header"> <h1 class="ui header centered" id="promptHeader">Quantity Needed</h1> </div> <div class="content"> <div class="ui two column stackable grid"> <div class="eight wide column text-center" style="text-align:center;"> <h1 id="promptQuestion">How many are being added?</h1> <div class="ui image mt-10" style="max-width: 250px; margin: 0 auto;"> <img id="modal-product-image" src="https://placehold.co/600x400/E5E7EB/A1A1AA?text=Product+Image" alt="Product Image" class="ui medium bordered image" style="max-height:250px;"> </div> <h3 class="ui header mt-4" id="modal-product-name"></h3> </div> <div class="eight wide column" style="padding-top:0;"> <div class="ui form"><br/> <div class="field"> <div class="ui fluid action input"> <input type="text" id="qty-input" autofocus class="text-center" style="font-size: 2rem; border:2px solid #000;"> <!-- New Visibility Toggle Button --> <button tabindex="-1" id="password-visibility-toggle" class="ui icon button" style="display:none; background: #fff; border: 2px solid #000; border-left: none;"> <i class="fas fa-eye"></i> </button> </div> </div> </div> <button class="ui fluid button black mb-3" id="keyboard-mode-toggle" style="margin-bottom: 10px;"> <i class="fa-solid fa-keyboard"></i> Switch to 123 </button> <div class="keypad-grid mt-4" style="display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px;"> <button class="keypad-button" data-value="1">1</button> <button class="keypad-button" data-value="2">2</button> <button class="keypad-button" data-value="3">3</button> <button class="keypad-button" data-value="4">4</button> <button class="keypad-button" data-value="5">5</button> <button class="keypad-button" data-value="6">6</button> <button class="keypad-button" data-value="7">7</button> <button class="keypad-button" data-value="8">8</button> <button class="keypad-button" data-value="9">9</button> <button class="keypad-button" data-value="0">0</button> <button class="keypad-button" data-value="00">00</button> <button class="ui keypad-button button decimal" data-value="." style="border:2px solid #000 !important;">.</button> <button class="ui button red basic keypad-button clear" data-value="clear" style="border: 2px solid #db2828 !important; font-weight:bold;"> CLEAR </button> <button class="ui button black basic keypad-button span-2" data-value="backspace" style="border: 2px solid #1b1c1d !important;"> <i class="fas fa-backspace"></i> </button> </div> <div class="qwerty-container" id="qwerty-keyboard-render"></div> </div> </div> </div> <div class="actions"> <div class="ui two buttons orderButtons"> <button id="go-back-btn" class="ui button massive shadowButton"><i class="fas fa-arrow-left"></i> Cancel</button> <button id="add-to-cart-confirm" class="ui primary button massive shadowButton">Confirm</button> </div> </div> </div> <!--IDLE PIN MODAL--> <div class="ui mini modal" id="idleModal" style="display:none;text-align:center;"> <div class="content"> <i class="fa-solid fa-clock-rotate-left" id="clockIcon" style="font-size:4em;"></i> <i class="fa-regular fa-spinner-scale fa-pulse" id="newPinSpinIcon" style="font-size:4em;display:none;"></i> <i class="fa-regular fa-repeat fa-spin" id="rapidSwapIcon" style="font-size:4em;display:none;--fa-animation-duration: 10s;"></i> <h3 id="idlePinMessage">Your session has expired due to inactivity.</h3> <h3 id="idlePinUserError" style="display:none;color:#912d2b;">Select an account to switch to.</h3> <h3 id="idlePinMessageError" style="display:none;color:#912d2b;">You have entered an incorrect PIN</h3> <h3 id="idlePinMessageEmpty" style="display:none;color:#912d2b;">Please enter your four-digit PIN</h3> <form class="ui form"> <div class="field"> <h4>Enter your PIN <i class="fa-duotone fa-eye icon toggle_idlePinInput" id="toggle_idlePinInput" title="Show PIN" onClick="toggleField('idlePinInput');"></i></h4> <div class="ui grid"> <div class="four wide column"><input type="password" pattern="[0-9]*" inputmode="numeric" id="idlePin1" name="idlePinInput" autocomplete="off" class="ui huge input idlePin" maxlength="1" onkeydown="autoTab(1, 'idlePin');" style="font-size:1.5em;text-align:center;" tabindex="1"autofocus /></div><div class="four wide column"><input type="password" pattern="[0-9]*" inputmode="numeric" id="idlePin2" name="idlePinInput" autocomplete="off" class="ui huge input idlePin" maxlength="1" onkeydown="autoTab(2, 'idlePin');" style="font-size:1.5em;text-align:center;" tabindex="2" /></div><div class="four wide column"><input type="password" pattern="[0-9]*" inputmode="numeric" id="idlePin3" name="idlePinInput" autocomplete="off" class="ui huge input idlePin" maxlength="1" onkeydown="autoTab(3, 'idlePin');" style="font-size:1.5em;text-align:center;" tabindex="3" /></div><div class="four wide column"><input type="password" pattern="[0-9]*" inputmode="numeric" id="idlePin4" name="idlePinInput" autocomplete="off" class="ui huge input idlePin" maxlength="1" onkeydown="autoTab(4, 'idlePin');" style="font-size:1.5em;text-align:center;" tabindex="4" /></div> </div> </div> <div class="field"> <select name="idleUser" id="idleUser" class="idleUserSelect" style="font-size:1.4em;"> <option value="">Select Your Account...</option> </select> </div> </form> <input type="tel" id="idlePin" class="numberKeyboard" data-title="Enter 4-Digit PIN" style="display:none;" /> <input type="hidden" id="idlePinCounter" value="0" /> </div> <div style="text-align:center;background: #f9fafb;padding: 1rem 1rem;border-top: 1px solid rgba(34, 36, 38, .15);"> <a class="ui black right labeled icon button" id="signOutButton" style="margin-left: .75em;" href="/?view=logout" onClick="$('#idleLoader').addClass('active');$(this).addClass('loading');"> <i class="fa-solid fa-sign-out icon"></i>Sign Out </a> <div class="ui cancel black button" id="cancelButton" onclick="$('.rapidIcon').removeClass('fa-spin');">Cancel</div> <div class="ui primary right labeled icon button" id="submitPinButton" style="margin-left: .75em;" onClick="submitPin();"> Continue<i class="fa-solid fa-arrow-right icon"></i> </div> <div id="forgotMyPin"> <input type="hidden" id="forgotPin" /> <br/><a style="cursor:pointer;" onClick="forgotPin();">I Forgot My PIN</a> </div> </div> </div> <div id="idleLoader" class="ui dimmer" style="display:none;"> <div class="ui massive text loader">Signing Out</div> </div> <!--NEW PIN MODAL--> <div class="ui mini modal" id="pinModal" style="display:none;text-align:center;"> <div class="content"> <i class="fa-solid fa-shield-check" id="successPinIcon" style="font-size:4em;display:none;color:#16ab39;"></i> <i class="fa-solid fa-id-card" id="userPinIcon" style="font-size:4em;"></i> <i class="fa-regular fa-spinner-scale fa-pulse" id="userPinLoadingIcon" style="font-size:4em;display:none;"></i> <h2 id="userPinMessage">Four-Digit User PIN</h2> <div class="ui info message" id="pinformation" style="display:none;"> <div class="header"> User PIN Setup </div> <ul class="list"> <li>Your PIN can quickly switch to your account from another user's session.</li> <li>PINs can be any combination of numbers with a required length of four-digits.</li> <li>Update your PIN at any time:<br/>My Account>Change PIN</li> <li>Your PIN is <strong>your</strong> PIN. Do not share your PIN with anyone.</li> </ul><br/> <a onClick="pinInformation('why');" style="cursor:pointer;">Why do I need a PIN?</a> </div> <div class="ui info message" id="pinInformation" style="display:none;text-align:center;"> <div class="header"> Session Security </div> <ul class="list" style="text-align:left;"> <li>Your system includes built in protection to improve the security and integrity of user sessions.</li> <li>Limiting the length of inactive sessions can help protect sensitive information and prevent unauthorized account access.</li> <li>Utilizing a PIN ensures the process of resuming an inactive session is quick, secure, and effortless.</li> </ul><br/> <a onClick="pinInformation('info');" style="cursor:pointer;">Back to PIN Information</a> </div> <h2 id="userPinMessageError" style="display:none;color:#912d2b;">PINs Do Not Match</h2> <h3 id="existingPinError" style="display:none;color:#912d2b;">That PIN is already in use.<br/>Please choose a different PIN.</h3> <div class="ui divider"></div> <form class="ui form"> <div class="field"> <h4 id="newPinMessageEmpty" class="pinMessageEmpty" style="display:none;color:#912d2b;padding-top:11px"><i class="fa-solid fa-triangle-exclamation"></i> Please enter a four-digit PIN</h4> <h4 id="newPinMessage" class="pinMessage">Enter a New PIN <i class="fa-duotone fa-eye icon toggle_newPin" id="toggle_newPin" title="Show PIN" onClick="toggleField('newPin');"></i></h4> <div class="ui grid"> <div class="four wide column"><input type="password" pattern="[0-9]*" inputmode="numeric" id="newPin1" autocomplete="off" class="ui huge input newPin savePin" name="newPin" maxlength="1" onkeydown="autoTab(1, 'newPin');" style="font-size:1.4em;text-align:center;" tabindex="1"autofocus /></div><div class="four wide column"><input type="password" pattern="[0-9]*" inputmode="numeric" id="newPin2" autocomplete="off" class="ui huge input newPin savePin" name="newPin" maxlength="1" onkeydown="autoTab(2, 'newPin');" style="font-size:1.4em;text-align:center;" tabindex="2" /></div><div class="four wide column"><input type="password" pattern="[0-9]*" inputmode="numeric" id="newPin3" autocomplete="off" class="ui huge input newPin savePin" name="newPin" maxlength="1" onkeydown="autoTab(3, 'newPin');" style="font-size:1.4em;text-align:center;" tabindex="3" /></div><div class="four wide column"><input type="password" pattern="[0-9]*" inputmode="numeric" id="newPin4" autocomplete="off" class="ui huge input newPin savePin" name="newPin" maxlength="1" onkeydown="autoTab(4, 'newPin');" style="font-size:1.4em;text-align:center;" tabindex="4" /></div> </div> </div> <div class="field"> <h4 id="confirmPinMessageEmpty" class="pinMessageEmpty" style="display:none;color:#912d2b;padding-top:12px"><i class="fa-solid fa-triangle-exclamation"></i> Please confirm your four-digit PIN</h4> <h4 id="confirmPinMessage" class="pinMessage">Confirm the New PIN <i class="fa-duotone fa-eye icon toggle_confirmPin" id="toggle_confirmPin" title="Show PIN" onClick="toggleField('confirmPin');"></i></h4> <div class="ui grid"> <div class="four wide column"><input type="password" pattern="[0-9]*" inputmode="numeric" id="confirmPin1" maxlength="1" autocomplete="off" class="ui huge input confirmPin savePin" name="confirmPin" onkeydown="autoTab(1, 'confirmPin');" style="font-size:1.4em;text-align:center;" tabindex="5"autofocus /></div><div class="four wide column"><input type="password" pattern="[0-9]*" inputmode="numeric" id="confirmPin2" maxlength="1" autocomplete="off" class="ui huge input confirmPin savePin" name="confirmPin" onkeydown="autoTab(2, 'confirmPin');" style="font-size:1.4em;text-align:center;" tabindex="6" /></div><div class="four wide column"><input type="password" pattern="[0-9]*" inputmode="numeric" id="confirmPin3" maxlength="1" autocomplete="off" class="ui huge input confirmPin savePin" name="confirmPin" onkeydown="autoTab(3, 'confirmPin');" style="font-size:1.4em;text-align:center;" tabindex="7" /></div><div class="four wide column"><input type="password" pattern="[0-9]*" inputmode="numeric" id="confirmPin4" maxlength="1" autocomplete="off" class="ui huge input confirmPin savePin" name="confirmPin" onkeydown="autoTab(4, 'confirmPin');" style="font-size:1.4em;text-align:center;" tabindex="8" /></div> </div> </div> <div class="field"> <h4 id="currentPasswordMessageError" style="display:none;color:#912d2b;padding-top:11px;"><i class="fa-solid fa-triangle-exclamation"></i> Incorrect Password</h4> <h4 id="currentPasswordMessageEmpty" class="pinMessageEmpty" style="display:none;color:#912d2b;padding-top:11px;"><i class="fa-solid fa-triangle-exclamation"></i> Current Password Required</h4> <h4 id="currentPasswordMessage" class="pinMessage">Enter your Current Password</h4> <div class="ui huge labeled input"> <div class="ui label"><i class="fa-duotone fa-lock fa-lg"></i></div> <input id="currentPassword" name="currentPassword" type="password" tabindex="9" required> <div class="ui corner label"> <i class="fa-duotone fa-eye icon toggle_currentPassword" id="toggle_currentPassword" style="" title="Show Password" onClick="toggleField('currentPassword');"></i> </div> </div> </div> </form> <input type="hidden" id="newPin" /> <input type="hidden" id="confirmPin" /> </div> <div class="actions" style="text-align:center;"> <div class="ui black right labeled icon deny button denyPin" style="margin-left: .75em;" onClick="resetUserPinModal();">Cancel<i class="fa-solid fa-times icon"></i></div> <div class="ui primary right labeled icon button" id="submitNewPinButton" style="margin-left: .75em;" onClick="savePin();"> Save PIN<i class="fa-solid fa-arrow-right icon"></i> </div> </div> </div> <script> // ===== Street View: Class-based, modal-safe ===== (function () { // Helper: find a static image related to this container function findStaticImage(container) { // 1) explicit id via data-static-id const byId = container.dataset.staticId ? document.getElementById(container.dataset.staticId) : null; if (byId) return byId; // 2) nearest sibling/ancestor .image_of_location const scoped = container.closest('.sv-wrapper'); return (scoped && scoped.querySelector('.image_of_location')) || container.parentElement?.querySelector('.image_of_location') || document.getElementById('image_of_location') // last-resort legacy id || null; } // Core initializer for a single element function initStreetViewFor(container) { if (!container || container.dataset.svInited === '1') return; if (!window.google || !google.maps) { console.warn('Google Maps JS not loaded yet. Skipping Street View init for now.'); return; } // If hidden (e.g., inside a not-yet-visible modal), defer until visible const isVisible = !!(container.offsetParent || container.getClientRects().length); if (!isVisible) return; // onVisible hook will call us again const staticImg = findStaticImage(container); const latAttr = container.getAttribute('data-lat'); const lngAttr = container.getAttribute('data-lng'); const addr = container.getAttribute('data-address'); const showPanoramaAt = (latLng) => { const sv = new google.maps.StreetViewService(); sv.getPanorama({ location: latLng, radius: 100 }, (data, status) => { if (status === 'OK' && data && data.location) { if (staticImg) staticImg.style.display = 'none'; container.style.display = 'block'; // Mark inited before creating pano to prevent re-entry container.dataset.svInited = '1'; new google.maps.StreetViewPanorama(container, { position: data.location.latLng, pov: { heading: 70, pitch: 0 }, zoom: 1, linksControl: true, panControl: true, addressControl: false, motionTracking: true, motionTrackingControl: true, fullscreenControl: true }); } else { console.warn('No Street View panorama found near this location.'); } }); }; // Prefer coords if (latAttr && lngAttr && !isNaN(+latAttr) && !isNaN(+lngAttr)) { showPanoramaAt(new google.maps.LatLng(+latAttr, +lngAttr)); return; } // Fall back to geocoding the address if (addr) { const geocoder = new google.maps.Geocoder(); geocoder.geocode({ address: addr }, (results, status) => { if (status === 'OK' && results[0]) { showPanoramaAt(results[0].geometry.location); } else { console.warn('Geocoding failed:', status); } }); } } // Initialize all Street Views inside a root (document or a specific modal) function initStreetViewsIn(root) { const scope = root instanceof Element ? root : document; const nodes = scope.querySelectorAll('.streetViewInteractive'); nodes.forEach(initStreetViewFor); } // jQuery + Semantic UI hooks (version per your stack: jQuery 3.1.1, Semantic UI 2.4.0) $(function () { // First pass for anything already visible on the page initStreetViewsIn(document); // When any Semantic UI modal becomes visible, initialize the ones inside it $('.ui.modal').each(function () { const $modal = $(this); // If your modals are already initialized elsewhere with options, // you can keep those and only add the visibility hook: $modal.modal('setting', 'onVisible', function () { initStreetViewsIn(this); // Give Street View a moment to get actual size, then nudge a resize // for perfect tiles in case the container animates into view setTimeout(() => { $(this).find('.streetViewInteractive').each(function () { const pano = this.__gm_panorama; // not public API; safer to trigger resize on map tiles via event: google.maps.event.trigger(this, 'resize'); // works when bound to Map; for Pano, re-centering helps: // If you want, you can also re-assign position here by reading its current position. }); }, 100); }); // Optional: observe content changes inside the modal (if you dynamically swap tabs/sections) $modal.modal('setting', 'observeChanges', true); }); }); // Expose helpers if you need to trigger manually after dynamic DOM injections window.initStreetViewsIn = initStreetViewsIn; window.initStreetViewFor = initStreetViewFor; })();// ===== Street View: Class-based, modal-safe ===== function chooseSpecificUserHandler(userID) { console.log('chooseSpecificUserHandler executed'); $('#riseModalLeftColumn').hide(); $('#riseModalActivityButtons').hide(); $('#riseModalRightColumn').hide(); $('#updatingUser').val(userID || ''); // Reset everything first and show dimmer only $('#riseCRMActivityModal').modal('show'); // Show modal shell $('#riseModalLoader').addClass('active'); // Show full-page loader $('#riseCRMActivityModal').css('opacity', '1'); $('#riseModalActivityList').show(); // Hide all modal inner elements until loaded $('#riseModalGrid, #riseModalPhoneIcon, #riseModalActivityButtons, .cancelCRMModalUpdate, #riseCRMActivityModaFormContainer, #riseActivityModalContactDetails, #streetViewContainer').hide(); $.ajax({ type: "POST", url: '/?view=riseCRMModalHandler', data: $('#riseCRMActivityUpdate').serialize(), success: function(res) { const dataFromDB = jQuery.parseJSON(res); // Populate modal content $('#riseActivityModalAddressDisplay').html(dataFromDB['addressDisplay']); $('#riseActivityModalNameDisplay').html(dataFromDB['displayNameWithEmoji']); $('#riseCRMActivityModalRouteButton').html(dataFromDB['routeLink']); $('#riseCRMActivityModalSymbioteButton').html(dataFromDB['symbioteLink']); $('#streetViewContainer').html(dataFromDB['streetViewImage']); $('#riseActivityModalPhoneNumberDisplay').html(dataFromDB['phoneDisplay']); $('#riseActivityModalPhoneNumberLink').attr('href', dataFromDB['phoneLink']); $('.riseModalCustomerNameDisplay').html(dataFromDB['displayName']); $('#chooseSpecificUser').dropdown('set selected', userID); // Initialize calendar $('#nextDateDropdown').calendar({ type: 'date', minDate: new Date(), formatter: { date: function (date) { if (!date) return ''; return `${(date.getMonth() + 1).toString().padStart(2, '0')}/${date.getDate().toString().padStart(2, '0')}/${date.getFullYear()}`; } } }); // Show modal content only after full AJAX data (including Street View image) is ready $('#riseModalGrid, #riseModalPhoneIcon, #riseModalActivityButtons, .cancelCRMModalUpdate, #riseCRMActivityModaFormContainer, #riseActivityModalContactDetails, #streetViewContainer').fadeIn(300); $('#riseModalLeftColumn').fadeIn(300); $('#riseModalActivityButtons').fadeIn(300); $('#riseModalRightColumn').fadeIn(300); $('#riseModalLoader').removeClass('active'); // Hide full modal loader //$('#nextTimeLabel').html('bananas second').css({"opacity":"0.5"}); $('#nextTimeLabel').css({"opacity":"0.5"}); $('#nextTime').val(''); $('#nextTimeTextContainer').html(''); $('input[name=nextTime]').val(''); }, error: function() { $('#riseModalLoader').removeClass('active'); alert("There was a problem loading the activity data."); } }); } </script> </head> <body class="public"> <style> .toppy{ background-color: #101211; padding: 1% 0; } .s_logo{ padding: 0 0 0 10%; } .ui.search .prompt{ border-radius: .28571429rem !important; } .ui.fluid.search .results{ margin-top:-20px !important; } @media(max-width:600px) { .toppy h3 { font-size: 14px; } #search_mobile { padding: 1% 5% 2% !important; } } </style> <div class="ui fluid container toppy" > <div class="ui middle aligned grid container"> <div class="three wide computer four wide tablet six wide mobile column"> <div class="ui small image" id="nav_logo" style="text-align: center;"> <a href="/"> <img src=""> </a> </div> </div> <div class="six wide column item ui fluid search mobile hidden"> </div> <div class="two wide computer three wide tablet four wide mobile column"> </div> <div class="three wide computer two wide tablet six wide mobile column left aligned"> <div class="right"> <a class="ui inverted button" href="/?view=cfx_login_form">Sign in</a> </div> </div> </div> </div> <form class="toppy mobile only" id="search_mobile" method="post" action="/?view=search"> <div class="ui vertical input action fluid" id="search_div"> <input type="text" class="prompt" name="searchTerm" placeholder="Search..." /> <button class="ui button primary"><i class="fad fa-search fa-lg"></i></button> </div> </form> <div class="ui text container"> <div id="genericMessage" style="display:none;" class="ui message no_print"> <i class="fas fa-times close icon" style="font-weight:bold;" onClick="$('#genericMessage').hide();" title="Close"></i> <div id="genericMessageContent"></div> </div> <div id="alert_message" class="no_print" style="padding-bottom:10px;display:none;"> </div> </div> <script defer src="https://use.fontawesome.com/releases/v5.6.1/js/all.js" integrity="sha384-R5JkiUweZpJjELPWqttAYmYM1P3SNEJRM6ecTQF05pFFtxmCO+Y1CiUhvuDzgSVZ" crossorigin="anonymous"></script> <style> .ui .header{ font-size:2.2em !important; } .info_chunk, .ui .header{ color:#fff; } .info_chunk{ color:#fff; font-size:1.2em !important; text-align: justify; } .footer_items{ margin-left:40px !important; margin-right:40px !important; cursor: default; } .social_button{ padding-right:15px; } .social_button:hover{ transform: scale(1.1); } .footer{ background:#101211 !important; } .powered_by{ position:relative; background:#063; bottom:0px; right:25%; left:50%; } .info_div{ padding-bottom:50px !important; } .ui.inverted.header.footy{ margin-bottom:0 !important; cursor: default; } @media only screen and (min-width: 1200px){ .ui.container { width:100%; } } </style> <!-- Page Contents --> <div class="ui vertical stripe segment info_div"> <style> #wrapped{ display:inline-block; } #wrapMe{ width:100%; margin:0 auto; text-align: center; background: #F1F1F2; display:inline-block; } #wrapMe2{ text-align: center; background: #F1F1F2; display:inline-block; } .sup_input{ font-size:1.4em; padding:4px; border-radius: 4px; } #wrapMe *, #wrapMe *:before, #wrapMe *:after { box-sizing: border-box; } #wrapMe html, #wrapMe body { width: 100%; height: 100%; font-family: 'Assistant', sans-serif; } #wrapMe body { width: 100%; height: 100%; overflow: hidden; background: #DAEBEE; background-size: 20px 20px; } #wrapMe button[type="submit"] { width: 250px; height: 50px; background: #fff; border-radius: 10px; will-change: transform; transition: all .2s ease; border: 2px solid #FF5126; cursor: pointer; color: #ffffff; font-size: 1.6em; color: #FF5126; outline: none; text-align: center; } #wrapMe button[type="submit"]:hover { background: #FF5126; color: #ffffff; } #wrapMe button[type="submit"]:activex { font-size: 1.6em; -webkit-transform: translateY(1px); transform: translateY(1px); } #wrapMe button[type="submit"].activex { font-size: 0; border-radius: 25px; width: 50px; background: transparent; } #wrapMe button[type="submit"].loader { border-right: 2px solid #ffffff; -webkit-animation: loader .4s linear infinite; animation: loader .4s linear infinite; } #wrapMe button[type="submit"].going { background: #3BB873; border-color: #3BB873; font-size: 1.6em; color: #ffffff; } #wrapMe button[type="submit"].success { background: #2185d0; border-color: #fff; color: #ffffff; font-size: 1.6em; } @-webkit-keyframes loader { 0% { -webkit-transform: rotateZ(0); transform: rotateZ(0); } 100% { -webkit-transform: rotateZ(360deg); transform: rotateZ(360deg); } } @keyframes loader { 0% { -webkit-transform: rotateZ(0); transform: rotateZ(0); } 100% { -webkit-transform: rotateZ(360deg); transform: rotateZ(360deg); } } .grid_icons{ font-size:8em; } #grid_icons h2{ text-transform: uppercase; color:#FF5126; } .support_button{ border: 2px solid #FF5126; color: #FF5126; border-radius: 4px; font-size:1.2em; font-weight: bold; background: #fff; padding:4px; } .link_it{ cursor: pointer !important; } .support_button: hover{ background:#e5e5e5; } .support_icon:hover{ transform: scale(1.1); } </style> <div class="ui centered stackable grid" style="width: 100%;text-align: center;margin-top:20px;"> <div class="three wide column"></div> <div class="ten wide column"> <div id="wrapMe" > <h1 style="background:#49494A;padding:8px;text-align:left;font-weight: 700;font-family: Arial;color:#fff;">We're Ready to Help With Your Tech!</h1> <div class="ui center aligned stackable grid" style="margin-top:20px;"> <div class="three column row" id="grid_icons"> <div class="column support_icon" style="display:inline-block;padding:20px;padding-bottom:60px;"> <i class="fa-duotone fa-phone grid_icons" style="color:#101211;"></i><br/> <h2 style="font-size:2.2em;margin-bottom:0;">Call Now</h2> <h2 style="margin-top:0;color:#101211;"></h2> </div> <div class="column support_icon" style="display:inline-block;padding:20px;padding-bottom:60px;"> <a href="?view=cfx_login_form" style="color:#101211;"> <i class="fa-duotone fa-sign-in-alt grid_icons"></i><br/> <h2 style="font-size:2.2em;margin-bottom:0;">Account Login</h2> <h2 style="margin-top:0;color:#101211;display:none;">on any device</h2> </a> </div> </div> </div> </div> </div> <div class="three wide column"></div> </div> <script> /*$(document).ready(() => { let $button = $('button[type="submit"]'); $button.on('click', function() { var $this = $(this); if($this.hasClass('activex') || $this.hasClass('success')) { return false; } $this.addClass('activex'); setTimeout(()=> { $this.addClass('loader'); }, 125); setTimeout(()=> { $this.removeClass('loader activex'); $this.text('Technicians Found'); $this.addClass('success animated pulse'); }, 1600); setTimeout(()=> { $this.text('Starting Live Chat'); $this.removeClass('success'); $this.addClass('going'); $this.blur(); }, 2900); }); });*/ $(document).ready(function() { // Gets all of the models associated with this brand. $("select[name=machine_brand]").change(function() { var searchid = $("select[name=machine_brand] option:selected").val(); var dataString = 'search='+searchid; $.ajax({ url: '/cfx_controllers/ajax/addMachineModels.php', data: dataString, type: 'POST', success:function(data){ $("select[name=machine_model]").html('<option value="" selected>Enter printer model</option>'+data); } }); }); // Adds the ajax search to the product finder. $('#product_finder_search').search({ apiSettings: { url: '/?view=search_ajax&q={query}' }, type: 'category', searchDelay: '300', maxResults: '10', minCharacters: '2' }); }); function submitForm(){ event.preventDefault(); setTimeout(()=> { $("form#goForm").submit(); }, 4650); } $("#support_machine").focus(function(){ $("#support_machine").html("J-"); $("#support_machine").val("J-"); }); </script> </div> <hr> <div class="ui inverted vertical masthead center aligned segment"> </div> <hr> <div class="ui inverted vertical footer segment"> <div class="ui stackable inverted middle aligned grid" style="padding-bottom:15px;"> <div class="seven wide column"> <h4 class="ui inverted header footy"></h4> <div class="ui inverted link list footer_items" style="margin-top:0;"> <div class="social_links"> </div> <a href="/?view=policies" target="_blank" title="Return, Collection, Privacy, and Property Policies" class="item">Policies</a> </div> </div> <div class="two wide center aligned column" style="text-align:center;"> <a href="http://jellywhat.com" title="business software solutions"><img src="/display/img/jelly_power.png" /></a> </div> <div class="seven wide column" style="text-align:right;padding-right:70px;"> <div class="ui list"> </div> </div> </div> </div> <link href='https://fonts.googleapis.com/css?family=Montserrat' rel='stylesheet'> <style> ul.mainNavbar{ display:flex; margin:0; padding:0; height:100%; } ul.mainNavbar > li{ list-style:none; text-transform:uppercase; position:relative; align-items:center; display:flex;} ul.mainNavbar > li > a{ color:#000; margin-left: 20px; margin-right: 20px; font-family: Montserrat; font-size: 16px; line-height: 22.4px; font-weight: 600; position:relative;} ul.mainNavbar > li > a:after{ transition: transform .3s ease-out, border-color .3s ease-out; position: absolute; display: block; left: 0; width: 100%; transform: scaleX(0); border-top: 2px solid #000; content: ''; transform-origin: 0 0; transition: transform .35s cubic-bezier(.52,.01,.16,1); bottom: -3px; } ul.mainNavbar > li:hover > a:after{ backface-visibility: hidden; -ms-transform: scaleX(1); -webkit-transform: scaleX(1); transform: scaleX(1); } ul.mainNavbar > li > ul{ position:absolute; margin:0; padding:0; top:120%; padding: 20px; width: 20em; z-index:1; left:0; background:rgba(28,28,28,100); opacity:0; visibility:hidden; transition:0.3s ease-in-out; list-style:none;} ul.mainNavbar > li:hover > ul{ top:100%; opacity:1; visibility:visible;} ul.mainNavbar > li > ul > li{ text-transform:uppercase;} ul.mainNavbar > li > ul > li > a{ color:#eaeaea; font-family: Montserrat; text-transform: uppercase; font-size: 14px; line-height: 24px; font-weight: 400; padding:6px; display:block;} ul.mainNavbar > li > ul > li > a:hover{ background:#313233; color:#fff; } ul.mainNavbar > li.Layer3{ position:static;} ul.mainNavbar > li.Layer3 > ul > li > ul{ display:flex; list-style:none; padding:0;} ul.mainNavbar > li.Layer3 > ul{ display:flex; width:50%; left:50%; padding:30px 0; } ul.mainNavbar > li.Layer3 > ul > li{ flex:0 0 33.33%; max-width:33.33%; padding:0 0 0 30px;} ul.mainNavbar > li.Layer3 > ul > li > a{ color:#0094e9; text-transform:capitalize; font-size: 16px; line-height: 24px; font-weight: 500; font-family: Montserrat; padding:6px; } ul.mainNavbar > li.Layer3 > ul > li > a:hover{background:transparent;} ul.mainNavbar > li.Layer3 > ul > li > ul{ display:flex; flex-direction:column;margin:0;} ul.mainNavbar > li.Layer3 > ul > li > ul > li{ list-style:none;} ul.mainNavbar > li.Layer3 > ul > li > ul > li > a{color:#eaeaea; font-family: Montserrat; text-transform: uppercase; font-size: 14px; line-height: 24px; font-weight: 400; padding:6px; display:block;} ul.mainNavbar > li.Layer3 > ul > li > ul > li > a:hover{ background:#313233; color:#fff; } .search_icon .fa-search{ font-size:20px; color:#000 !important;} .search_icon{ display:flex; align-items:center; cursor:pointer; margin-left:30px;} .searcMain{ display:none; position:absolute; background:#fff; left:0; right:0; height:140%; align-items:center; z-index:2;} .searcMain.active{ display:flex;} .searcMain .srhWrap{ margin:0 auto; max-width:1500px;padding:0 90px; width:100%; position:relative;} .searcMain .srhWrap label{font-family: Montserrat; font-size: 16px; line-height: 32px; font-weight: 700; display:block; color:#000; } .searcMain .srhWrap input[type="text"]{ font-size:32px; border-width:0 0 4px; border-color:#000; font-family: Montserrat; text-transform: capitalize; font-weight:600; display:block; border-radius:0; width:100%;} .searcMain .srhWrap .btnSearch{ font-size: 14px; padding: 15px 22px; border-radius:200px; margin:10px 0 0; display:inline-block; background:#0094e9; color:#fff; border:none; cursor:pointer; transition:opacity .45s cubic-bezier(.25,1,.33,1),transform .45s cubic-bezier(.25,1,.33,1),border-color .45s cubic-bezier(.25,1,.33,1),color .45s cubic-bezier(.25,1,.33,1),background-color .45s cubic-bezier(.25,1,.33,1),box-shadow .45s cubic-bezier(.25,1,.33,1) } .searcMain .srhWrap .btnSearch:hover{box-shadow: 0 20px 38px rgba(0,0,0,.16); transform: translateY(-3px);} .searcMain .srhWrap input::-webkit-input-placeholder { color: #000; opacity:1;} .searcMain .srhWrap input:-ms-input-placeholder { color: #000; opacity:1;} .searcMain .srhWrap input::placeholder {color: #000; opacity:1;} .srchClose{position: absolute; top: 25px; right: 40px; background:rgba(0,0,0,.05); width: 50px; height: 50px; transition: all .45s cubic-bezier(.15,.2,.1,1); transform: scale(1) translateZ(0); border-radius:100%; cursor:pointer;} .srchClose:hover{ transform:scale(1.2) translateZ(0)} .srchClose > a,srchClose > a > .close-wrap{ position:absolute; top:0; left:0; width:100%; height:100%;} .srchClose .close-wrap .close-line{height: 20px; width: 2px; background: #000; backface-visibility: hidden; position: absolute; border-radius: 5px; left: 9px; transition: opacity .2s ease,background-color .2s ease;} .srchClose .close-wrap .close-line1{ transform: translateY(15px) translateX(15px) rotate(45deg);} .srchClose .close-wrap .close-line2{ transform: translateY(15px) translateX(15px) rotate(-45deg);} .close-icon-sidebar .close-wrap:after{ content:'';height:20px; width:2px; background:#efefef; transform: translateY(0px) translateX(0px) rotate(-90deg); display:inline-block; position:relative;} .mobile_menu_icon{ display:flex; overflow: hidden; width: 22px; align-items:center; margin-left:25px; } .mobile_menu_icon >span{ transition: .3s; cursor: pointer; position: relative; font-size: 0; user-select: none;cursor:pointer; display: block; background:#000000; width:22px; height:2px;} .mobile_menu_icon >span:after{ height: 2px; width: 15px; content:'';position: relative; top: -13px; background: #000000; display: inline-block; vertical-align:top;} .mobile_menu_icon >span:before{ height: 2px; width: 22px; content:'';position: relative; top: -6px; background: #000000; display: inline-block; vertical-align:top;} .mobileSliderMenu{ min-width: 390px; padding:30px 60px; z-index:999; overflow: hidden; display:none; top: 0; right: 0; width: 300px; height: 100%; background:#323232; position:fixed; flex-direction:column; overflow-y:scroll; } .mobileSliderMenu.slide{ display:flex;} .close-icon-sidebar{ position:fixed; top:25px; right:10px; cursor:pointer; width:60px; height:60px;} .close-icon-sidebar .close-wrap{height: 20px; width: 2px; background: #000; backface-visibility: hidden; position: absolute; border-radius: 5px; left: 9px; background:#efefef; transition: opacity .2s ease,background-color .2s ease; transform: translateY(15px) translateX(15px) rotate(45deg);} .close-icon-sidebar .close-wrap:after{ content:'';height:20px; width:2px; background:#efefef; transform: translateY(0px) translateX(0px) rotate(-90deg); display:inline-block; position:relative;} .topHdrBtns{ display:flex; flex-direction:column; margin-bottom:35px;margin-top:100px; } .topHdrBtns .btn { padding: 15px; margin: 5px; font-family: Montserrat; text-transform: capitalize; font-size: 16px; line-height: 22.4px; font-weight: 600;} .topHdrBtns .btn.btnWhite{ background-color: #fff; color: #0c0c0c;} .topHdrBtns .btn.btnBlue{ background-color: #0094e9; color: #fff;} ul.MobileHdrMenu{ margin:0; padding:0;} ul.MobileHdrMenu > li{ list-style:none; margin-bottom:12px; position:relative;} ul.MobileHdrMenu > li > a{font-family: Montserrat; text-transform: capitalize; font-size: 16px; line-height: 35px; font-weight: 600; color:#efefef;} ul.MobileHdrMenu > li > ul { list-style:none; margin:0; padding-left:20px; display:none;} ul.MobileHdrMenu > li > ul > li{ margin:12px 0; position:relative;} ul.MobileHdrMenu > li > ul > li > a{font-family: Montserrat; text-transform: capitalize; font-size: 16px; line-height: 22px; font-weight: 600; color:#efefef;} ul.MobileHdrMenu > li > ul > li > ul { list-style:none; margin:0; padding-left:20px; display:none;} ul.MobileHdrMenu > li > ul > li > ul > li{ margin:12px 0;} ul.MobileHdrMenu > li > ul > li > ul > li > a{font-family: Montserrat; text-transform: capitalize; font-size: 16px; line-height: 22px; font-weight: 600; color:#efefef;} ul.MobileHdrMenu > li i, ul.MobileHdrMenu > li > ul > li i, ul.MobileHdrMenu > li svg, ul.MobileHdrMenu > li > ul > li svg { position:absolute; top:0; right:0; font-size:24px; color:#efefef; width:40px; height:40px; cursor:pointer; transition:0.3s ease-in-out; transform:rotate(0deg); text-align:center; line-height:40px; } ul.MobileHdrMenu > li i.changed, ul.MobileHdrMenu > li > ul > li i.changed, ul.MobileHdrMenu > li svg.changed, ul.MobileHdrMenu > li > ul > li svg.changed{ transform:rotate(180deg);} .tpSearch{ margin-left:auto;position:absolute; left:50%; transform:translateX(-50%); margin-right:auto; max-width:350px; width:100%;} img{ max-width:100%;} .tpSocialIcons{ margin-left:0; margin-right:auto; margin-top:auto; margin-bottom:auto;} .tpSocialIcons ul{ display:flex; margin:0; padding:0;} .tpSocialIcons ul li{ list-style:none; margin:0 10px;} .tpSocialIcons ul li a{ color:#fff;} .label-white{ color:#fff; margin-bottom:20px; margin-bottom: 15px; display: inline-block; font-weight: 700; font-size: 16px; font-family: Montserrat;} .mb-3{ margin-bottom:1.3rem;} @media screen and (max-width:1300px){ .tpSearch{ max-width:250px; } ul.mainNavbar > li > a{ margin-left:15px; margin-right:15px;} } @media screen and (min-width:1200px){ .mobile_menu_icon{ display:none;} } @media screen and (max-width:1199px){ .header_main .header_top{display:none;} .header_main .headerBtm .hdrNav .mainNavbar{ display:none;} .header_main .headerBtm .hdrLogo{ max-width:inherit;} .header_main .headerBtm.fixed { transform: translateY(-0); } } </style> <div class="mobileSliderMenu"> <div class="close-icon-sidebar"> <span class="close-wrap"></span> </div> <div class="topHdrBtns"> <!--<a href="#" class="btn btnWhite">Request a Quote</a>--> <a href="/?view=cfx_login_form" class="btn btnBlue">Sign In</a> <!--<a href="#" class="btn btnWhite">Store Locator</a>--> </div> </div> <script> $(document).ready(function(e){ $('.MobileHdrMenu > li > ul').parent().addClass('haschildrn').append('<i class="fa fa-angle-down"></i>'); $('.MobileHdrMenu > li > ul > li > ul').parent().addClass('haschildrn').append('<i class="fa fa-angle-down"></i>'); $('.MobileHdrMenu > li ').on('click','i , svg ', function(e){ e.preventDefault(); $(this).prev('ul').slideToggle(); $(this).toggleClass('changed'); }); $('.mobile_menu_icon').click(function(e){ $('.mobileSliderMenu').addClass('slide'); }); $('.close-icon-sidebar').click(function(e){ $('.mobileSliderMenu').removeClass('slide'); }); }); </script> <script type="text/javascript">window.NREUM||(NREUM={});NREUM.info={"beacon":"bam.nr-data.net","licenseKey":"NRJS-4d5fc8727d765b679ff","applicationID":"239702724","transactionName":"Y1xUbRdYWhdZBkYLDFoWY0sMFhsSWRcdFRRDFl5NCFUbDl0JXhsKQBdVVggWRBFaCVsBTF1XUlwdF0QMSA==","queueTime":0,"applicationTime":474,"atts":"TxtXG19CSRk=","errorBeacon":"bam.nr-data.net","agent":""}</script></body> </html>