This HTML and CSS script can fetch details from the NetSuite like customer details and Inventory details on a realtime basis.
let surveyHTML = `
<style>
body {
font-family: Arial, sans-serif;
background-color: #f4f4f4;
}
#outside {
background-color: #fff;
padding: 30px;
margin: 0 auto;
width: 70%;
}
h1 {
font-size: 2em;
text-align: center;
text-transform: capitalize;
color: #333;
}
form {
border: 1px solid #CCC;
border-radius: 1em;
background-color: #f9f9f9;
padding: 30px;
}
fieldset {
border: 1px solid #ddd;
border-radius: 0.5em;
margin: 20px 0;
padding: 20px;
}
legend {
font-weight: bold;
font-size: 1.8em;
}
label {
display: block;
margin-bottom: 10px;
font-weight: bold;
font-size: 1.2em;
}
input[type="text"],
input[type="number"],
input[type="datetime-local"],
textarea {
width: 100%;
padding: 10px;
border: 1px solid #ccc;
border-radius: 5px;
margin-bottom: 20px;
}
button[type="submit"] {
background-color: #0074cc;
color: #fff;
border: none;
padding: 15px 30px;
border-radius: 5px;
font-size: 1.2em;
cursor: pointer;
}
#map {
height: 300px;
}
/* Add styles for the search icon */
.search-icon {
position: absolute;
right: 62px;
cursor: pointer;
}
.search-inv-icon {
position: absolute;
right: 33px;
top: 27px;
cursor: pointer;
}
.add-customer-icon {
position: absolute;
right: 17px;
cursor: pointer;
}
.no-matches {
color: #999; /* Light ash color */
}
.customer-options-container {
position: absolute;
background-color: #fff;
border: 1px solid #ccc;
max-height: 150px;
overflow-y: auto;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
z-index: 1;
width: 100%;
margin-top: -14px;
border-radius: 4px;
cursor: pointer;
}
.customer-options-container div {
padding: 8px;
border-bottom: 1px solid #eee;
transition: background-color 0.3s;
}
.customer-options-container div:last-child {
border-bottom: none;
}
.customer-options-container div:hover {
background-color: #f9f9f9;
}
.item-options-container {
position: absolute;
background-color: #fff;
border: 1px solid #ccc;
max-height: 150px;
overflow-y: auto;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
z-index: 1;
width: 90%;
margin-top: 28px;
border-radius: 4px;
right: 18px;
cursor: pointer;
}
.item-options-container div {
padding: 8px;
border-bottom: 1px solid #eee;
transition: background-color 0.3s;
}
.item-options-container div:last-child {
border-bottom: none;
}
.item-options-container div:hover {
background-color: #f9f9f9;
}
/* New added styles*/
.customer-input-container {
position: relative;
}
#customer {
width: calc(100% - 106px); /* Reduce the width as needed */
padding-right: 10px; /* Add some right padding for better spacing */
}
.icon-container {
position: absolute;
top: 0;
right: 0;
height: 100%;
display: flex;
}
.icon-box {
width: 45px; /* Adjust the width as needed */
height: 25px; /* Adjust the height as needed */
background-color: #ededed; /* Ash color */
border-radius: 4px; /* Adjust the border radius as needed */
margin-left: 7px; /* Adjust the spacing between icon boxes */
}
.icon-box:hover {
background-color: #dcdcdc; /* Adjust the hover background color as needed */
}
.search-icon, .add-customer-icon, .search-inv-icon {
font-size: 1.74em; /* Adjust the font size as needed */
color: #0074cc;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
transition: background-color 0.3s;
}
/* Add these styles to your existing CSS */
.modal-overlay {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.5);
z-index: 1000;
}
.modal-container {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background: #fff;
z-index: 1001;
padding: 20px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
}
/* Style the close button */
.modal-container button {
display: block;
margin-top: 20px;
padding: 10px;
background-color: #0074cc;
color: #fff;
border: none;
border-radius: 5px;
cursor: pointer;
}
iframe {
width: 640px;
height: 500px;
}
/* */
/* Add styles for the tire size and number of tires row container */
.tire-row-container {
display: flex;
flex-direction: column; /* Display as columns */
align-items: flex-start; /* Align items to the start of the column */
margin-bottom: 10px;
border: 2px solid #3498db; /* Change border color for a more attractive look */
background-color: #ecf0f1; /* Add background color */
padding: 27px; /* Add padding for the box */
border-radius: 8px; /* Add border radius for a rounded look */
position: relative; /* Add relative positioning for the button */
}
.tire-row-container label {
margin-bottom: 5px; /* Add margin between label and input */
}
.tire-row-container input {
margin-bottom: 10px; /* Add margin between tire size and number of tires */
padding: 8px;
flex: 1;
}
.tire-row-container .close-icon {
font-size: 1.2em;
color: #d9534f; /* Bootstrap's danger color for close icon */
cursor: pointer;
position: absolute; /* Position the icon absolutely */
top: 5px; /* Adjust top positioning */
right: 5px; /* Adjust right positioning */
}
.tire-row-container .close-icon:hover {
color: #c9302c; /* Darken the color on hover */
}
/* Add styles for the "Add tire Size" button */
button[type="button"] {
background-color: #4caf50;
color: #fff;
border: none;
padding: 12px 20px;
border-radius: 5px;
font-size: 1.2em;
cursor: pointer;
margin-top: 0px;
}
button[type="button"]:hover {
background-color: #45a049;
}
/* ... (previous styles) */
.tire-row-container .additional-fields-container {
display: flex;
gap: 3px; /* Adjust the gap between fields */
}
.tire-row-container .additional-fields-container .field-container {
flex: 1;
}
.tire-row-container .additional-fields-container input[type="number"] {
width: 100%;
}
.tire-row-container .additional-fields-container input::placeholder {
font-size: 8px; /* Adjust the font size as needed */
}
/* Add styles for the total container */
.total-container {
display: flex;
align-items: center;
justify-content: flex-end;
}
/* Style for the read-only effect */
.total-container .field-container input {
font-size: 12px; /* Adjust the font size as needed */
text-align: center;
color: #000; /* Adjust the color as needed */
width: 104px;
}
/* Style for the remove button */
.total-container button {
margin-left: 103px; /* Adjust the margin as needed */
margin-top: 10px;
height: 24px;
}
#map {
height: 400px;
}
#geocoder-container {
position: absolute;
top: 10px;
left: 10px;
//z-index: 1;
}
.mapboxgl-ctrl-geocoder input.mapboxgl-ctrl-geocoder--input::placeholder {
text-align: left;
direction: rtl;
}
.mapboxgl-ctrl-geocoder .mapboxgl-ctrl-geocoder--icon {
left: 108px;
top: 37px;
}
</style>
<div id="outside">
<form id="survey-form" action="/app/site/hosting/scriptlet.nl?script=2490&deploy=1" method="post">
<h1 id="title">Survey Questions</h1>
<p id="description"><b>Note:</b> Please answer the following questions.</p>
<!-- ------------------Survey Questions---------------------------- -->
<fieldset>
<legend>Survey Questions</legend>
<div>
<label for="date-time">Date/time:</label>
<input type="datetime-local" required id="date-time" name="date_time">
</div>
<div>
<label for="caller">Caller name & Phone No:</label>
<input type="text" required id="caller" name="caller_name_phone">
</div>
<div>
<label for="customer">Select Customer:</label>
<div class="customer-input-container">
<input type="text" required id="customer" name="customer"/>
<input type="hidden" id="customerId" name="customerId" value="">
<div class="icon-container">
<div class="icon-box">
<span class="search-icon" onclick="searchCustomers()">
🔍 <!-- Search icon HTML -->
</span>
</div>
<div class="icon-box">
<span class="add-customer-icon" onclick="openNewCustomerForm()">
+ <!-- Plus symbol -->
</span>
</div>
</div>
</div>
</div>
<div>
<label for="email">Email Address:</label>
<input type="text" required id="email" name="email">
</div>
<div>
<label for="company">Company name:</label>
<input type="text" required id="company" name="company_name">
</div>
<div>
<label for="po">PO or Payment:</label>
<input type="text" id="po" name="po_payment">
</div>
<div>
<label for="site-contact">Site contact & Phone Number:</label>
<input type="text" required id="site-contact" name="site_contact_phone">
</div>
<div>
<label for="site-address">Site Address:</label>
<input type="text" required id="site-address" name="site_address">
</div>
<div>
<label for="unit">Unit Number/Description:</label>
<input type="text" id="unit" name="unit_number_description">
</div>
<div>
<label for="vehicle">Vehicle Make/Model:</label>
<input type="text" id="vehicle" name="vehcile_make_model">
</div>
<div>
<label>Tire Sizes:</label>
<div id="tire-container">
<!-- Dynamic container for tire size and number of tires inputs -->
</div>
<button type="button" onclick="addTireSize()">Add tire Size</button>
</div>
<div>
<br>
<label for="tire-condition">General condition of tire:</label>
<input type="text" id="tire-condition" name="general_condition_of_tire">
</br>
</div>
<div>
<label for="wheel-position">Wheel position:</label>
<input type="text" id="wheel-position" name="wheel_position">
</div>
<div>
<label for="time-frame">Time Frame:</label>
<input type="text" id="time-frame" name="time_frame">
</div>
<div>
<label for="call-taken">Call taken by:</label>
<input type="text" id="call-taken" name="call_taken_by">
</div>
<div>
<label for="estimate-time">Estimate Time for job:</label>
<input type="text" id="estimate-time" name="estimate_time_job">
</div>
<div>
<label for="time-left">Time left shop:</label>
<input type="text" id="time-left" name="time_left_shop">
</div>
<div>
<label for="technician">Technician name and W/O No:</label>
<input type="text" id="technician" name="technician_name_wo">
</div>
<div id="map-container">
<label for="location">Location:</label>
<input type="text" id="location" name="location" />
<div id="map">
<div id="geocoder-container"></div>
<div id="location"></div>
<div id="map"></div>
</div>
</div>
</fieldset>
<div id="submitbutton">
<button type="submit" id="submit">Submit</button>
</div>
</form>
</div>
<script src="https://api.mapbox.com/mapbox-gl-js/v2.7.0/mapbox-gl.js"></script>
<link href="https://api.mapbox.com/mapbox-gl-js/v2.7.0/mapbox-gl.css" rel="stylesheet">
<script src="https://api.mapbox.com/mapbox-gl-js/plugins/mapbox-gl-geocoder/v4.7.0/mapbox-gl-geocoder.min.js"></script>
<link rel="stylesheet" href="https://api.mapbox.com/mapbox-gl-js/plugins/mapbox-gl-geocoder/v4.7.0/mapbox-gl-geocoder.css" type="text/css">
<script>
// Function to blink the borders
function blinkBorder(element) {
console.log("elemt", element);
let interval;
let count = 0;
// Set an interval to toggle the border color
interval = setInterval(function () {
if (count % 2 === 0) {
element.style.border = '2px solid red'; // Set red border
} else {
element.style.border = '2px solid #3498db'; // Set blue border
}
count++;
// Stop the interval after a certain number of iterations (blinks)
if (count === 10) {
clearInterval(interval);
}
}, 50); // Adjust the interval duration (milliseconds) as needed
}
mapboxgl.accessToken = 'MAP_Box_API_KEY';
function initMapbox() {
// Default location (Calgary, Canada)
var defaultLocation = [-114.0719, 51.0447];
// Initialize Mapbox map
var map = new mapboxgl.Map({
container: 'map',
style: 'mapbox://styles/mapbox/streets-v11',
center: defaultLocation,
zoom: 8,
});
// Create a Mapbox Geocoder control
var geocoder = new MapboxGeocoder({
accessToken: mapboxgl.accessToken,
mapboxgl: mapboxgl,
placeholder: 'Search for a location',
marker: true, // Optional: Set to true if you want a marker on the map
});
// Add the Geocoder control to the map
map.addControl(geocoder);
// Set the default value for the location input
document.getElementById('location').value = 'Calgary, Canada';
// Listen for the 'result' event when a user selects a place
geocoder.on('result', function (event) {
var locationField = document.getElementById('location');
locationField.value = event.result.place_name;
// Pan the map to the selected location
map.flyTo({
center: event.result.center,
zoom: 15,
});
});
// Listen for the 'clear' event when the user removes the location
geocoder.on('clear', function () {
// Allow remapping only after completely removing the field value
document.getElementById('location').readOnly = false;
});
// // Disable remapping until the location field is cleared
// document.getElementById('location').addEventListener('input', function () {
// if (this.value.trim() !== '') {
// map.getCanvas().style.cursor = 'not-allowed';
// map.dragPan.disable();
// document.getElementById('location').readOnly = true;
// } else {
// map.getCanvas().style.cursor = '';
// map.dragPan.enable();
// }
// });
}
// Call the initMapbox function after the page has loaded
document.addEventListener('DOMContentLoaded', function () {
initMapbox();
});
// To clear the Id field if the text field of customer is edited.
// Add an event listener to the customer input field to clear the corresponding hidden field when the input is cleared
let customerInput = document.getElementById('customer');
console.log("customerInput",customerInput);
customerInput.addEventListener('input', function () {
//console.log("inside customer clearance",customerInput.value);
let customerIdInput = document.getElementById('customerId');
customerIdInput.value = ''; // Clear the hidden field
});
// Fucntion for clearing suggestion boxes
function createSuggestionBox(suggestions) {
let customerInput = document.getElementById('customer');
let suggestionBox = document.createElement('div');
suggestionBox.className = 'customer-options-container';
suggestionBox.id = 'customerOptions';
suggestions.forEach(suggestion => {
let option = document.createElement('div');
let displayName = suggestion.firstName && suggestion.lastName
? suggestion.firstName + ' ' + suggestion.lastName
: suggestion.companyName;
option.textContent = displayName;
option.addEventListener('click', function () {
customerInput.value = displayName;
// Set the internal ID in a data attribute for later retrieval
let customerIdInput = document.getElementById('customerId');
customerIdInput.setAttribute('customerId', suggestion.internalid);
customerIdInput.value = suggestion.internalid;
clearSuggestionBoxes();
});
suggestionBox.appendChild(option);
});
customerInput.parentNode.appendChild(suggestionBox);
}
function clearSuggestionBoxes() {
let existingBoxes = document.querySelectorAll('.customer-options-container');
existingBoxes.forEach(box => box.remove());
}
function showNoMatchesMessage() {
let customerInput = document.getElementById('customer');
let noMatchesMessage = document.createElement('div');
noMatchesMessage.innerHTML = 'No matches';
noMatchesMessage.className = 'no-matches';
// Append the message below the customer input field
customerInput.insertAdjacentElement('afterend', noMatchesMessage);
// Remove the message after a timeout (you can adjust the timeout as needed)
setTimeout(function () {
noMatchesMessage.remove();
}, 3000); // 3000 milliseconds (3 seconds) timeout
}
// Code to add item search
let tireCounter = 1;
let tirePriceInput, serviceCallChargeInput, miscellaneousChargeInput, totalInput;
function addTireSize() {
console.log("tireCounter",tireCounter);
let tireContainer = document.getElementById('tire-container');
// Check if there are existing tire size and number of tires inputs
let existingTires = document.querySelectorAll('.tire-row-container');
let lastTire = existingTires[existingTires.length - 1];
if (lastTire) {
// Get the input values from the last tire row
let lastTireSizeInput = lastTire.querySelector('input[name^="tire_size_"]');
let lastNoOfTiresInput = lastTire.querySelector('input[name^="number_of_tires_"]');
// Check if both tire size and number of tires are non-empty
if (lastTireSizeInput.value.trim() === '' || lastNoOfTiresInput.value.trim() === '') {
blinkBorder(lastTire);
return; // Stop execution if validation fails
}
}
// Create a container for each tire size and number of tires pair
let tireRowContainer = document.createElement('div');
tireRowContainer.className = 'tire-row-container';
// Create an input for tire size
let tireSizeInput = document.createElement('input');
tireSizeInput.type = 'text';
tireSizeInput.placeholder = 'Tire Size';
tireSizeInput.name = 'tire_size_' + tireCounter;
tireSizeInput.id = 'tire-size-input-' + tireCounter;
tireSizeInput.setAttribute('required', 'required');
// Create a search icon
let searchIcon = document.createElement('span');
searchIcon.className = 'search-inv-icon';
searchIcon.id = 'search-icon-' + tireCounter;
searchIcon.innerHTML = '🔍'; // Search icon HTML
searchIcon.addEventListener('click', function () {
// Call the search function for tire size
//document.getElementById('tire-size-input-' + (tireCounter-1));
//searchItemsForSuggestions(tireSizeInput,tireCounter);
// Get the associated tire size container by traversing the DOM
let tireSizeContainer = this.closest('.tire-row-container');
console.log("tireSizeContainer**",tireSizeContainer);
searchItemsForSuggestions(tireSizeInput,tireCounter,tireSizeContainer);
});
// Create an input for number of tires
let numberOfTiresInput = document.createElement('input');
numberOfTiresInput.type = 'number';
numberOfTiresInput.placeholder = 'Number of Tires';
numberOfTiresInput.name = 'number_of_tires_' + tireCounter;
numberOfTiresInput.min = '1';
numberOfTiresInput.id = 'number_of_tires_input' + tireCounter;
numberOfTiresInput.setAttribute('required', 'required');
// Create a button to remove the tire size and number of tires pair
let removeButton = document.createElement('button');
removeButton.textContent = 'Remove';
removeButton.addEventListener('click', function () {
// Remove the tire size and number of tires pair and its associated elements
tireRowContainer.remove();
});
// Create an input for tire size ID (Hidden Field to add size ID)
let tireSizeIdInput = document.createElement('input');
tireSizeIdInput.type = 'hidden';
tireSizeIdInput.name = 'tire_size_id_' + tireCounter;
tireSizeIdInput.id = 'tire-size-id-' + tireCounter;
// Add an event listener to the tire size input
tireSizeInput.addEventListener('input', function () {
// Clear the hidden field value when the tire size input changes
tireSizeIdInput.value = '';
});
// Create a div for the new fields in a single row
let additionalFieldsContainer = document.createElement('div');
additionalFieldsContainer.className = 'additional-fields-container';
// Create an input for tire Price
tirePriceInput = createNumberInput('Tire Price', 'tire_price_' + tireCounter);
// Create an input for Service Call Charge
serviceCallChargeInput = createNumberInput('Service Charge', 'service_call_charge_' + tireCounter);
// Create an input for Miscellaneous Charge
miscellaneousChargeInput = createNumberInput('Miscellaneous', 'miscellaneous_charge_' + tireCounter);
// // Add event listeners to the amount fields
// tirePriceInput.querySelector('input').addEventListener('input', updateTotal);
// serviceCallChargeInput.querySelector('input').addEventListener('input', updateTotal);
// miscellaneousChargeInput.querySelector('input').addEventListener('input', updateTotal);
// Add event listeners to the amount fields
tirePriceInput.querySelector('input').addEventListener('input', function() {
updateTotal(this);
});
serviceCallChargeInput.querySelector('input').addEventListener('input', function() {
updateTotal(this);
});
miscellaneousChargeInput.querySelector('input').addEventListener('input', function() {
updateTotal(this);
});
// Create a div for the total field
let totalContainer = document.createElement('div');
totalContainer.className = 'total-container';
// Create an input for the Total field
totalInput = createNumberInput('Total', 'total_' + tireCounter);
totalInput.querySelector('input').readOnly = true; // Make it read-only
// Append total input to the total container
totalContainer.appendChild(totalInput);
totalContainer.appendChild(removeButton);
// Append new input fields to the additional fields container
additionalFieldsContainer.appendChild(tirePriceInput);
additionalFieldsContainer.appendChild(serviceCallChargeInput);
additionalFieldsContainer.appendChild(miscellaneousChargeInput);
// Append tire size input, search icon, number of tires input, and remove button to the container
tireRowContainer.appendChild(tireSizeInput);
tireRowContainer.appendChild(searchIcon);
tireRowContainer.appendChild(document.createTextNode('No of Tires: '));
tireRowContainer.appendChild(numberOfTiresInput);
// Append the additional fields container to the tire row container
tireRowContainer.appendChild(additionalFieldsContainer);
tireRowContainer.appendChild(totalContainer);
//tireRowContainer.appendChild(removeButton);
tireRowContainer.appendChild(tireSizeIdInput);
// Append the container to the tire container
tireContainer.appendChild(tireRowContainer);
// Increment the tire counter for unique input names
tireCounter++;
}
// Function to create a number input with a label
function createNumberInput(labelText, name) {
let container = document.createElement('div');
container.className = 'field-container';
// // Create a label
let label = document.createElement('label');
label.textContent = labelText;
label.style.fontSize = '8px';
// Create an input for the number
let input = document.createElement('input');
input.type = 'number';
input.placeholder = labelText;
input.name = name;
input.step = '0.01'; // Allow decimal numbers
input.setAttribute('required', 'required');
// Append label and input to the container
container.appendChild(label);
container.appendChild(input);
return container;
}
// Function to update the Total field
function updateTotal(changedElement) {
// Get the parent container of the changed input
let container = changedElement.closest('.tire-row-container');
// Get the values from the three amount fields within the container
let tirePrice = parseFloat(container.querySelector('input[name^="tire_price_"]').value) || 0;
let serviceCallCharge = parseFloat(container.querySelector('input[name^="service_call_charge_"]').value) || 0;
let miscellaneousCharge = parseFloat(container.querySelector('input[name^="miscellaneous_charge_"]').value) || 0;
// Calculate the total
let total = tirePrice + serviceCallCharge + miscellaneousCharge;
// Update the Total field value within the container
container.querySelector('input[name^="total_"]').value = total.toFixed(2); // Adjust the number of decimal places as needed
}
// Suggestion box for Items
function searchItemsForSuggestions(itemInput,tireCounter,tireSizeContainer) {
console.log("tireCountersearchItemsForSuggestions",tireCounter);
let itemName = itemInput.value.trim();
// Clear existing suggestion boxes
itemclearSuggestionBoxes();
// Perform a search only if there is a non-empty item name
if (itemName !== '') {
// Use Suitelet URL to trigger item search
let suiteletURL = '/app/site/hosting/scriptlet.nl?script=customscript_jj_sl_service_call_brgc_100&deploy=customdeploy_jj_sl_service_call_brgc_100&action=searchItems&tireSize=' + encodeURIComponent(itemName);
// Make an AJAX request to the Suitelet
let xhr = new XMLHttpRequest();
xhr.open('GET', suiteletURL, true);
xhr.onreadystatechange = function () {
if (xhr.readyState == 4 && xhr.status == 200) {
// Parse the JSON response
let suggestions = JSON.parse(xhr.responseText);
// Display suggestions in the console for debugging
console.log('Item Suggestions:', suggestions);
if (suggestions.length > 0) {
let firstSuggestion = suggestions[0];
// let displayName = firstSuggestion.name && firstSuggestion.displayName
// ? firstSuggestion.name + ' ' + firstSuggestion.displayName
// : firstSuggestion.salesDescription;
let displayName = firstSuggestion.displayName || firstSuggestion.salesDescription || firstSuggestion.name;
itemInput.value = displayName;
console.log("displayName",displayName);
console.log("firstSuggestion",firstSuggestion);
// Create and show the suggestion box
itemcreateSuggestionBox(suggestions,tireCounter,tireSizeContainer);
} else {
// Display a message or take appropriate action for no suggestions
console.log('No matching items found.');
let itemInputNoMessage = document.getElementById('tire-size-input-' + (tireCounter-1));
let noMatchesMessage = document.createElement('div');
noMatchesMessage.innerHTML = 'No matches';
noMatchesMessage.className = 'no-matches';
// Append the message below the item input field
itemInputNoMessage.insertAdjacentElement('afterend', noMatchesMessage);
// Remove the message after a timeout (you can adjust the timeout as needed)
setTimeout(function () {
noMatchesMessage.remove();
}, 3000); // 3000 milliseconds (3 seconds) timeout
}
}
};
xhr.send();
}
}
// Function to create suggestion box for items
function itemcreateSuggestionBox(suggestions,tireCounter,tireSizeContainer) {
// let itemInput = document.getElementById('tire-size-input-' + (tireCounter-1));
console.log("tireSizeContainer123",tireSizeContainer);
// Find the tire size input within the provided container
let itemInput = tireSizeContainer.querySelector('input[type="text"][name^="tire_size_"]');
// Set the internal ID in a data attribute for later retrieval
let itemIdInput = tireSizeContainer.querySelector('input[type="hidden"][name^="tire_size_id_"]');
console.log("itemIdInput33",itemIdInput);
// Create a suggestion box container
let suggestionBox = document.createElement('div');
suggestionBox.className = 'item-options-container';
suggestionBox.id = 'itemOptions';
suggestions.forEach(suggestion => {
let option = document.createElement('div');
let displayName = suggestion.displayName || suggestion.salesDescription || suggestion.name;
option.textContent = displayName;
option.addEventListener('click', function () {
itemInput.value = displayName;
// Ensure the itemIdInput element exists
if (itemIdInput) {
console.log("suggestion.id",suggestion.id);
itemIdInput.setAttribute('tire-size-id-'+ (tireCounter-1), suggestion.id);
itemIdInput.value = suggestion.id;
}
// Clear suggestion boxes after selecting an item
itemclearSuggestionBoxes();
});
// Append each suggestion option to the suggestion box
suggestionBox.appendChild(option);
});
// Append the suggestion box to the parent container
itemInput.parentNode.appendChild(suggestionBox);
}
// Function to clear suggestion boxes for items
function itemclearSuggestionBoxes() {
let existingBoxes = document.querySelectorAll('.item-options-container');
existingBoxes.forEach(box => box.remove());
}
// End cose
function searchCustomers() {
let customerInput = document.getElementById('customer');
console.log("search customer");
let customerName = customerInput.value.trim();
// Clear existing suggestion boxes
clearSuggestionBoxes();
// Perform a search only if there is a non-empty customer name
if (customerName !== '') {
// Use Suitelet URL to trigger customer search
let suiteletURL = '/app/site/hosting/scriptlet.nl?script=customscript_jj_sl_service_call_brgc_100&deploy=customdeploy_jj_sl_service_call_brgc_100&action=searchCustomers&customer=' + encodeURIComponent(customerName);
// Make an AJAX request to the Suitelet
let xhr = new XMLHttpRequest();
xhr.open('GET', suiteletURL, true);
xhr.onreadystatechange = function () {
if (xhr.readyState == 4 && xhr.status == 200) {
// Parse the JSON response
let suggestions = JSON.parse(xhr.responseText);
console.log("suggestions", suggestions);
// Display suggestions in the console for debugging
console.log('Suggestions:', suggestions);
// Update the value of the customer field with the first suggestion (if any)
if (suggestions.length > 0) {
let firstSuggestion = suggestions[0];
let displayName = firstSuggestion.firstName && firstSuggestion.lastName
? firstSuggestion.firstName + ' ' + firstSuggestion.lastName
: firstSuggestion.companyName;
customerInput.value = displayName;
// Create and show the suggestion box
createSuggestionBox(suggestions);
} else {
// Display a message or take appropriate action for no suggestions
console.log('No matching customers found.');
showNoMatchesMessage();
}
}
};
xhr.send();
}
}
function openNewCustomerForm() {
// Create a modal overlay
let modalOverlay = document.createElement('div');
modalOverlay.className = 'modal-overlay';
document.body.appendChild(modalOverlay);
// Create a modal container
let modalContainer = document.createElement('div');
modalContainer.className = 'modal-container';
document.body.appendChild(modalContainer);
// Create an iframe inside the modal container
let iframe = document.createElement('iframe');
iframe.src = 'https://7177173-sb3.app.netsuite.com/app/common/entity/custjob.nl?target=main:entity&label=Customer';
modalContainer.appendChild(iframe);
// New edits to hide cancel button
iframe.onload = function () {
let iframeDocument = iframe.contentDocument;
// Hide the cancel button
let cancelButton = iframeDocument.getElementById('tbl_close');
if (cancelButton) {
cancelButton.style.display = 'none';
}
// Hide the secondarycancel button
let secondaryCancelButton = iframeDocument.getElementById('tbl_secondaryclose');
if (secondaryCancelButton) {
secondaryCancelButton.style.display = 'none';
}
};
// // Add a close button to the modal
let closeButton = document.createElement('button');
closeButton.textContent = 'Close';
closeButton.onclick = function () {
modalOverlay.remove();
modalContainer.remove();
};
modalContainer.appendChild(closeButton);
}
// Function to validate the form before submission
function validateForm() {
// Get the existing customer id
let customerIdInput = document.querySelector('input[name^="customerId"]');
if (customerIdInput.value.trim() === ''){
alert('Please choose a customer from the suggestion box.');
event.preventDefault();
return false; // Stop execution if validation fails for any customer
}
// Get all existing tire size and number of tires inputs
let existingTires = document.querySelectorAll('.tire-row-container');
// Check if at least one tire container exists
if (existingTires.length === 0) {
alert('Please add at least one tire size.');
event.preventDefault();
return false; // Stop execution if no tire is added
}
for (let i = 0; i < existingTires.length; i++) {
let tire = existingTires[i];
let tireSizeInput = tire.querySelector('input[name^="tire_size_id_"]');
// Check if either tire size or number of tires is empty
if (tireSizeInput.value.trim() === '') {
// console.log("inside blink");
// blinkBorder(tire);
alert('Please ensure the Tire Size field is populated by selecting a valid option from the suggestion box.');
event.preventDefault();
return false; // Stop execution if validation fails for any tire
}
}
// All tires passed validation
return true;
}
// Update the form submission button to call the validation function
let submitButtonDiv = document.getElementById('submitbutton');
console.log("submitButtonDiv", submitButtonDiv);
// Assuming that the button is the first child of the submitButtonDiv
let submitButton = submitButtonDiv.firstElementChild;
console.log("submitButton", submitButton);
submitButton.addEventListener('click', function () {
//Call the validation function before submitting the form
if (!validateForm()) {
console.log("iside validate form");
// Prevent the default form submission behavior
event.preventDefault();
}
});
</script>
`;