Cart

Your cart is currently empty!

New in store

<script type="text/javascript">
        var gk_isXlsx = false;
        var gk_xlsxFileLookup = {};
        var gk_fileData = {};
        function filledCell(cell) {
          return cell !== '' && cell != null;
        }
        function loadFileData(filename) {
        if (gk_isXlsx && gk_xlsxFileLookup[filename]) {
            try {
                var workbook = XLSX.read(gk_fileData[filename], { type: 'base64' });
                var firstSheetName = workbook.SheetNames[0];
                var worksheet = workbook.Sheets[firstSheetName];

                // Convert sheet to JSON to filter blank rows
                var jsonData = XLSX.utils.sheet_to_json(worksheet, { header: 1, blankrows: false, defval: '' });
                // Filter out blank rows (rows where all cells are empty, null, or undefined)
                var filteredData = jsonData.filter(row => row.some(filledCell));

                // Heuristic to find the header row by ignoring rows with fewer filled cells than the next row
                var headerRowIndex = filteredData.findIndex((row, index) =>
                  row.filter(filledCell).length >= filteredData[index + 1]?.filter(filledCell).length
                );
                // Fallback
                if (headerRowIndex === -1 || headerRowIndex > 25) {
                  headerRowIndex = 0;
                }

                // Convert filtered JSON back to CSV
                var csv = XLSX.utils.aoa_to_sheet(filteredData.slice(headerRowIndex)); // Create a new sheet from filtered array of arrays
                csv = XLSX.utils.sheet_to_csv(csv, { header: 1 });
                return csv;
            } catch (e) {
                console.error(e);
                return "";
            }
        }
        return gk_fileData[filename] || "";
        }
        </script><!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Custom Cabinet Order Form</title>
  <style>
    body { font-family: Arial, sans-serif; background-color: #f5f5f5; margin: 0; padding: 20px; }
    .container { max-width: 600px; margin: 0 auto; background-color: #fff; padding: 20px; border-radius: 5px; box-shadow: 0 0 10px rgba(0,0,0,0.1); }
    h1 { text-align: center; font-size: 24px; margin-bottom: 20px; }
    .form-group { margin-bottom: 15px; }
    label { display: block; font-size: 16px; margin-bottom: 5px; }
    select, input[type="text"], input[type="email"], input[type="tel"] { width: 100%; padding: 10px; font-size: 16px; border: 1px solid #ddd; border-radius: 5px; box-sizing: border-box; }
    button { width: 100%; padding: 10px; background-color: #007AFF; color: #fff; border: none; border-radius: 5px; font-size: 16px; cursor: pointer; margin-top: 10px; }
    button:disabled { background-color: #aaa; cursor: not-allowed; }
    .item { background-color: #f9f9f9; padding: 10px; margin-bottom: 10px; border-radius: 5px; display: flex; justify-content: space-between; align-items: center; }
    .item-text { font-size: 16px; flex: 1; }
    .item-actions { display: flex; gap: 10px; }
    .item-actions button { width: auto; padding: 5px 10px; font-size: 14px; }
    .summary { margin-bottom: 20px; }
    .confirmation { text-align: center; }
    .confirmation p { font-size: 18px; margin-bottom: 10px; }
    .hidden { display: none; }
    @media print { body { background-color: #fff; } .container:not(#summary-screen) { display: none; } button { display: none; } .item-actions { display: none; } #summary-screen { box-shadow: none; padding: 0; } }
  </style>
</head>
<body>
  <div class="container" id="form-screen">
    <h1>Custom Cabinet Order</h1>
    <div class="form-group">
      <label>Type</label>
      <select id="type" onchange="updateConditionalFields()">
        <option value="Door">Door</option>
        <option value="Drawer">Drawer</option>
      </select>
    </div>
    <div class="form-group" id="door-position-group">
      <label>Door Position</label>
      <select id="door-position">
        <option value="">Select position</option>
        <option value="Upper">Upper Door</option>
        <option value="Lower">Lower Door</option>
      </select>
    </div>
    <div class="form-group">
      <label>Style</label>
      <select id="style">
        <option value="">Select style</option>
        <option value="Shaker Door">Shaker Door</option>
        <option value="Raised Panel Door">Raised Panel Door</option>
        <option value="Slab Door">Slab Door</option>
      </select>
    </div>
    <div class="form-group">
      <label>Finish</label>
      <select id="finish" onchange="updateConditionalFields()">
        <option value="">Select finish</option>
        <option value="Painted Wood">Painted Wood</option>
        <option value="Laminate">Laminate</option>
      </select>
    </div>
    <div class="form-group" id="paint-color-group">
      <label>Paint Color</label>
      <select id="paint-color">
        <option value="">Select color</option>
        <option value="White">White</option>
        <option value="Gray">Gray</option>
        <option value="Black">Black</option>
      </select>
    </div>
    <div class="form-group">
      <label>Width (inches)</label>
      <select id="width"></select>
    </div>
    <div class="form-group">
      <label>Height (inches)</label>
      <select id="height"></select>
    </div>
    <div class="form-group">
      <label>Quantity</label>
      <select id="quantity">
        <option value="1">1</option>
        <option value="2">2</option>
        <option value="3">3</option>
        <option value="4">4</option>
        <option value="5">5</option>
        <option value="6">6</option>
        <option value="7">7</option>
        <option value="8">8</option>
        <option value="9">9</option>
        <option value="10">10</option>
      </select>
    </div>
    <button onclick="addItem()">Add Item</button>
    <button onclick="showSummary()" id="summary-btn" disabled>View Order Summary</button>
  </div>

  <div class="container" id="summary-screen" style="display: none;">
    <h1>Order Summary</h1>
    <div id="order-items" class="summary"></div>
    <div class="form-group">
      <label>Your Name</label>
      <input type="text" id="customer-name" placeholder="Enter your name">
    </div>
    <div class="form-group">
      <label>Your Phone Number</label>
      <input type="tel" id="customer-phone" placeholder="Enter your phone number">
    </div>
    <div class="form-group">
      <label>Your Email</label>
      <input type="email" id="customer-email" placeholder="Enter your email">
    </div>
    <div class="form-group">
      <label>Job Site Address</label>
      <input type="text" id="job-site-address" placeholder="Enter job site address">
    </div>
    <button onclick="sendOrder()">Send Order</button>
    <button onclick="copySummary()">Copy Summary</button>
    <button onclick="printSummary()">Print Summary</button>
    <button onclick="backToForm()">Back to Form</button>
  </div>

  <div class="container" id="confirmation-screen" style="display: none;">
    <h1>Order Confirmed!</h1>
    <div class="confirmation">
      <p id="confirmation-message"></p>
      <p>Order sent to KCL@cabinetnrepairs.com.</p>
      <p>Check your email for confirmation.</p>
    </div>
    <button onclick="startNewOrder()">Start New Order</button>
    <button onclick="retrySendOrder()" id="retry-btn" style="display: none;">Retry Sending</button>
  </div>

  <script src="https://cdn.jsdelivr.net/npm/@emailjs/browser@4/dist/email.min.js"></script>
  <script>
    let orders = [];
    let lastTemplateParams = null;

    // Function to convert decimal to US tape measure fraction
    function toFraction(inches) {
      const whole = Math.floor(inches);
      const fraction = inches - whole;
      const sixteenths = Math.round(fraction * 16);
      if (sixteenths === 0) return `${whole}`;
      if (sixteenths === 16) return `${whole + 1}`;
      if (sixteenths === 8) return `${whole} 1/2`;
      if (sixteenths === 4) return `${whole} 1/4`;
      if (sixteenths === 12) return `${whole} 3/4`;
      if (sixteenths === 2) return `${whole} 1/8`;
      if (sixteenths === 6) return `${whole} 3/8`;
      if (sixteenths === 10) return `${whole} 5/8`;
      if (sixteenths === 14) return `${whole} 7/8`;
      return `${whole} ${sixteenths}/16`;
    }

    // Generate width options (12" to 36" in 1/16" increments)
    const widthSelect = document.getElementById('width');
    for (let i = 12; i <= 36; i += 1/16) {
      const option = document.createElement('option');
      option.value = i.toFixed(4);
      option.textContent = toFraction(i);
      widthSelect.appendChild(option);
    }
    widthSelect.value = '';

    // Generate height options (18" to 48" in 1/16" increments)
    const heightSelect = document.getElementById('height');
    for (let i = 18; i <= 48; i += 1/16) {
      const option = document.createElement('option');
      option.value = i.toFixed(4);
      option.textContent = toFraction(i);
      heightSelect.appendChild(option);
    }
    heightSelect.value = '';

    // Update visibility of conditional fields
    function updateConditionalFields() {
      const type = document.getElementById('type').value;
      const finish = document.getElementById('finish').value;
      const doorPositionGroup = document.getElementById('door-position-group');
      const paintColorGroup = document.getElementById('paint-color-group');
      doorPositionGroup.classList.toggle('hidden', type !== 'Door');
      paintColorGroup.classList.toggle('hidden', finish !== 'Painted Wood');
      if (type !== 'Door') document.getElementById('door-position').value = '';
      if (finish !== 'Painted Wood') document.getElementById('paint-color').value = '';
    }

    // Initialize conditional fields
    updateConditionalFields();

    function addItem() {
      const type = document.getElementById('type').value;
      const doorPosition = document.getElementById('door-position').value;
      const style = document.getElementById('style').value;
      const finish = document.getElementById('finish').value;
      const paintColor = document.getElementById('paint-color').value;
      const width = document.getElementById('width').value;
      const height = document.getElementById('height').value;
      const quantity = document.getElementById('quantity').value;

      if (!style || !finish || !width || !height || (type === 'Door' && !doorPosition) || (finish === 'Painted Wood' && !paintColor)) {
        alert('Please select all required fields.');
        return;
      }

      const item = {
        type,
        doorPosition: type === 'Door' ? doorPosition : '',
        style,
        finish,
        paintColor: finish === 'Painted Wood' ? paintColor : '',
        width: parseFloat(width),
        height: parseFloat(height),
        quantity: parseInt(quantity)
      };
      orders.push(item);

      document.getElementById('style').value = '';
      document.getElementById('finish').value = '';
      document.getElementById('paint-color').value = '';
      document.getElementById('door-position').value = '';
      document.getElementById('width').value = '';
      document.getElementById('height').value = '';
      document.getElementById('quantity').value = '1';
      document.getElementById('summary-btn').disabled = false;

      updateConditionalFields();
      alert('Item added. Add another or view summary.');
    }

    function showSummary() {
      const orderItems = document.getElementById('order-items');
      const customerName = document.getElementById('customer-name').value;
      const customerPhone = document.getElementById('customer-phone').value;
      const customerEmail = document.getElementById('customer-email').value;
      const jobSiteAddress = document.getElementById('job-site-address').value;

      orderItems.innerHTML = orders.map((item, index) => `
        <div class="item">
          <p class="item-text">
            Item ${index + 1}: ${item.type}${item.doorPosition ? ' (' + item.doorPosition + ')' : ''}, 
            Style: ${item.style}, Finish: ${item.finish}${item.paintColor ? ' (' + item.paintColor + ')' : ''}, 
            ${toFraction(item.width)}" x ${toFraction(item.height)}", Quantity: ${item.quantity}
          </p>
          <div class="item-actions">
            <button onclick="editItem(${index})">Edit</button>
            <button onclick="deleteItem(${index})">Delete</button>
          </div>
        </div>
      `).join('');

      if (customerName || customerPhone || customerEmail || jobSiteAddress) {
        orderItems.innerHTML += `
          <div class="item">
            <p class="item-text">
              ${customerName ? 'Name: ' + customerName : ''}
              ${customerPhone ? '<br>Phone: ' + customerPhone : ''}
              ${customerEmail ? '<br>Email: ' + customerEmail : ''}
              ${jobSiteAddress ? '<br>Job Site Address: ' + jobSiteAddress : ''}
            </p>
          </div>
        `;
      }

      document.getElementById('form-screen').style.display = 'none';
      document.getElementById('summary-screen').style.display = 'block';
    }

    function editItem(index) {
      const item = orders[index];
      document.getElementById('type').value = item.type;
      document.getElementById('door-position').value = item.doorPosition;
      document.getElementById('style').value = item.style;
      document.getElementById('finish').value = item.finish;
      document.getElementById('paint-color').value = item.paintColor;
      document.getElementById('width').value = item.width.toFixed(4);
      document.getElementById('height').value = item.height.toFixed(4);
      document.getElementById('quantity').value = item.quantity.toString();
      orders.splice(index, 1);
      document.getElementById('summary-btn').disabled = orders.length === 0;
      updateConditionalFields();
      backToForm();
    }

    function deleteItem(index) {
      orders.splice(index, 1);
      showSummary();
      document.getElementById('summary-btn').disabled = orders.length === 0;
      if (orders.length === 0) backToForm();
    }

    function sendOrder() {
      const customerName = document.getElementById('customer-name').value;
      const customerPhone = document.getElementById('customer-phone').value;
      const customerEmail = document.getElementById('customer-email').value;
      const jobSiteAddress = document.getElementById('job-site-address').value;

      if (!customerName || !customerPhone || !customerEmail || !jobSiteAddress || orders.length === 0) {
        alert('Please provide your name, phone number, email, job site address, and at least one item.');
        return;
      }

      const orderSummary = orders.map((item, index) => (
        `Item ${index + 1}: ${item.type}${item.doorPosition ? ' (' + item.doorPosition + ')' : ''}, ` +
        `Style: ${item.style}, Finish: ${item.finish}${item.paintColor ? ' (' + item.paintColor + ')' : ''}, ` +
        `Width: ${toFraction(item.width)}", Height: ${toFraction(item.height)}", Quantity: ${item.quantity}`
      )).join('\n');

      lastTemplateParams = {
        customer_name: customerName,
        customer_phone: customerPhone,
        customer_email: customerEmail,
        job_site_address: jobSiteAddress,
        order_summary: orderSummary,
        to_email: 'KCL@cabinetnrepairs.com',
      };

      emailjs.send('YOUR_SERVICE_ID', 'YOUR_TEMPLATE_ID', lastTemplateParams, 'YOUR_PUBLIC_KEY')
        .then(() => {
          document.getElementById('confirmation-message').textContent = `Thank you, ${customerName}!`;
          document.getElementById('summary-screen').style.display = 'none';
          document.getElementById('confirmation-screen').style.display = 'block';
          document.getElementById('retry-btn').style.display = 'none';
        })
        .catch((error) => {
          alert('Failed to send order. Please copy the summary or retry.');
          document.getElementById('retry-btn').style.display = 'block';
          console.error(error);
        });
    }

    function retrySendOrder() {
      if (lastTemplateParams) {
        emailjs.send('YOUR_SERVICE_ID', 'YOUR_TEMPLATE_ID', lastTemplateParams, 'YOUR_PUBLIC_KEY')
          .then(() => {
            document.getElementById('confirmation-message').textContent = `Thank you, ${lastTemplateParams.customer_name}!`;
            document.getElementById('retry-btn').style.display = 'none';
            alert('Order sent successfully!');
          })
          .catch((error) => {
            alert('Failed again. Please copy the summary.');
            console.error(error);
          });
      }
    }

    function copySummary() {
      const customerName = document.getElementById('customer-name').value;
      const customerPhone = document.getElementById('customer-phone').value;
      const customerEmail = document.getElementById('customer-email').value;
      const jobSiteAddress = document.getElementById('job-site-address').value;

      if (!customerName || !customerPhone || !customerEmail || !jobSiteAddress || orders.length === 0) {
        alert('Please provide your name, phone number, email, job site address, and at least one item.');
        return;
      }

      const orderSummary = orders.map((item, index) => (
        `Item ${index + 1}: ${item.type}${item.doorPosition ? ' (' + item.doorPosition + ')' : ''}, ` +
        `Style: ${item.style}, Finish: ${item.finish}${item.paintColor ? ' (' + item.paintColor + ')' : ''}, ` +
        `Width: ${toFraction(item.width)}", Height: ${toFraction(item.height)}", Quantity: ${item.quantity}`
      )).join('\n');

      const fullSummary = [
        customerName ? `Name: ${customerName}` : '',
        customerPhone ? `Phone: ${customerPhone}` : '',
        customerEmail ? `Email: ${customerEmail}` : '',
        jobSiteAddress ? `Job Site Address: ${jobSiteAddress}` : '',
        orderSummary
      ].filter(line => line).join('\n');

      navigator.clipboard.writeText(fullSummary)
        .then(() => {
          document.getElementById('confirmation-message').textContent = `Thank you, ${customerName}!`;
          document.getElementById('summary-screen').style.display = 'none';
          document.getElementById('confirmation-screen').style.display = 'block';
        })
        .catch(() => alert('Failed to copy. Please manually copy the summary.'));
    }

    function printSummary() {
      window.print();
    }

    function backToForm() {
      document.getElementById('summary-screen').style.display = 'none';
      document.getElementById('form-screen').style.display = 'block';
    }

    function startNewOrder() {
      orders = [];
      document.getElementById('customer-name').value = '';
      document.getElementById('customer-phone').value = '';
      document.getElementById('customer-email').value = '';
      document.getElementById('job-site-address').value = '';
      document.getElementById('type').value = 'Door';
      document.getElementById('door-position').value = '';
      document.getElementById('style').value = '';
      document.getElementById('finish').value = '';
      document.getElementById('paint-color').value = '';
      document.getElementById('width').value = '';
      document.getElementById('height').value = '';
      document.getElementById('quantity').value = '1';
      document.getElementById('summary-btn').disabled = true;
      document.getElementById('confirmation-screen').style.display = 'none';
      document.getElementById('form-screen').style.display = 'block';
      updateConditionalFields();
    }
  </script>
</body>
</html>
TOP
You may be interested in…

Your cart is currently empty!

New in store
