{"id":15356,"date":"2026-09-07T22:00:39","date_gmt":"2026-09-08T06:00:39","guid":{"rendered":"https:\/\/botiscorp.com\/?page_id=15356"},"modified":"2026-09-08T19:12:20","modified_gmt":"2026-09-09T03:12:20","slug":"request-service","status":"publish","type":"page","link":"https:\/\/botiscorp.com\/es\/request-service\/","title":{"rendered":"Solicitar servicio"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-page\" data-elementor-id=\"15356\" class=\"elementor elementor-15356\" data-elementor-post-type=\"page\">\n\t\t\t\t<div class=\"elementor-element elementor-element-c539d48 e-con-full e-flex e-con e-parent\" data-id=\"c539d48\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-d7d84e8 elementor-widget__width-inherit elementor-widget elementor-widget-html\" data-id=\"d7d84e8\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<style>\r\n:root {\r\n  --navy: #1a2b4a;\r\n  --ink: #16233d;\r\n  --paper: #f4f5f7;\r\n  --card: #ffffff;\r\n  --line: #e2e6ec;\r\n  --muted: #6b7688;\r\n  --hint: #8a94a6;\r\n  --danger: #b23a34;\r\n  --warn-bg: #fff7e8;\r\n  --warn-border: #edc873;\r\n  --warn-text: #6f4e00;\r\n\r\n  --forklift: #b23a34;\r\n  --dock: #1f4e79;\r\n  --security: #2f7d3f;\r\n  --fire: #e07a1f;\r\n  --monitoring: #4a3b8c;\r\n  --electrical: #55606f;\r\n}\r\n\r\n* {\r\n  box-sizing: border-box;\r\n  -webkit-tap-highlight-color: transparent;\r\n}\r\n\r\n.boti-service-form,\r\n.boti-service-form * {\r\n  box-sizing: border-box;\r\n}\r\n\r\n.boti-service-form {\r\n  width: 100%;\r\n  max-width: 680px;\r\n  margin: 0 auto;\r\n  background: var(--paper);\r\n  font-family: -apple-system, BlinkMacSystemFont, \"Segoe UI\",\r\n    Roboto, Helvetica, Arial, sans-serif;\r\n  color: var(--ink);\r\n  overflow: hidden;\r\n  border-radius: 14px;\r\n}\r\n\r\n.boti-service-form button,\r\n.boti-service-form input,\r\n.boti-service-form select,\r\n.boti-service-form textarea {\r\n  font: inherit;\r\n}\r\n\r\n.boti-service-form header {\r\n  padding: 18px 20px 14px;\r\n  background: var(--card);\r\n  border-bottom: 1px solid var(--line);\r\n}\r\n\r\n.boti-service-form .brandrow {\r\n  display: flex;\r\n  justify-content: space-between;\r\n  align-items: center;\r\n  gap: 12px;\r\n}\r\n\r\n.boti-service-form .brand {\r\n  font-size: 24px;\r\n  font-weight: 800;\r\n  color: var(--navy);\r\n  line-height: 1.05;\r\n}\r\n\r\n.boti-service-form .brand small {\r\n  display: block;\r\n  margin-top: 5px;\r\n  font-size: 9px;\r\n  letter-spacing: .7px;\r\n  color: var(--muted);\r\n  font-weight: 700;\r\n  line-height: 1.4;\r\n}\r\n\r\n.boti-service-form .tag {\r\n  max-width: 170px;\r\n  text-align: right;\r\n  font-size: 8px;\r\n  line-height: 1.4;\r\n  font-weight: 700;\r\n  letter-spacing: .5px;\r\n  color: var(--muted);\r\n}\r\n\r\n.boti-service-form .accentbar {\r\n  width: 100%;\r\n  height: 4px;\r\n  background: transparent;\r\n}\r\n\r\n.boti-service-form .subbar {\r\n  min-height: 40px;\r\n  display: flex;\r\n  align-items: center;\r\n  padding: 8px 18px 0;\r\n}\r\n\r\n.boti-service-form .back {\r\n  display: none;\r\n  border: none;\r\n  background: none;\r\n  padding: 5px 0;\r\n  color: var(--muted);\r\n  font-weight: 600;\r\n  cursor: pointer;\r\n}\r\n\r\n.boti-service-form .steps {\r\n  margin-left: auto;\r\n  display: none;\r\n  color: var(--hint);\r\n  font-size: 12px;\r\n  font-weight: 600;\r\n}\r\n\r\n.boti-service-form main {\r\n  padding: 6px 18px 30px;\r\n}\r\n\r\n.boti-service-form .screen {\r\n  display: none;\r\n  animation: botiFade .25s ease;\r\n}\r\n\r\n.boti-service-form .screen.active {\r\n  display: block;\r\n}\r\n\r\n@keyframes botiFade {\r\n  from {\r\n    opacity: 0;\r\n    transform: translateY(5px);\r\n  }\r\n  to {\r\n    opacity: 1;\r\n    transform: translateY(0);\r\n  }\r\n}\r\n\r\n.boti-service-form .eyebrow {\r\n  text-align: center;\r\n  color: var(--muted);\r\n  font-size: 12px;\r\n  font-weight: 700;\r\n  letter-spacing: 1.4px;\r\n  margin: 6px 0 4px;\r\n}\r\n\r\n.boti-service-form h1 {\r\n  margin: 3px 0 5px;\r\n  text-align: center;\r\n  color: var(--navy);\r\n  font-size: 26px;\r\n  line-height: 1.2;\r\n}\r\n\r\n.boti-service-form .sub {\r\n  text-align: center;\r\n  color: var(--muted);\r\n  margin: 0 0 18px;\r\n  font-size: 15px;\r\n}\r\n\r\n.boti-service-form .screen-title {\r\n  font-size: 22px;\r\n  color: var(--navy);\r\n  margin: 4px 0 12px;\r\n}\r\n\r\n.boti-service-form .screen-copy {\r\n  margin: 0 0 18px;\r\n  color: var(--muted);\r\n  font-size: 14px;\r\n  line-height: 1.45;\r\n}\r\n\r\n\/* CATEGORY CARDS *\/\r\n\r\n.boti-service-form .cats {\r\n  display: flex !important;\r\n  flex-direction: column !important;\r\n  flex-wrap: nowrap !important;\r\n  gap: 11px;\r\n  width: 100% !important;\r\n  max-width: 100% !important;\r\n}\r\n\r\n.boti-service-form .cat {\r\n  display: flex !important;\r\n  flex-direction: row !important;\r\n  align-items: center;\r\n  width: 100% !important;\r\n  max-width: 100% !important;\r\n  min-width: 0 !important;\r\n  flex: 0 0 auto !important;\r\n  gap: 13px;\r\n  border: 0;\r\n  border-radius: 14px;\r\n  padding: 15px 16px;\r\n  margin: 0 !important;\r\n  text-align: left;\r\n  color: #fff;\r\n  cursor: pointer;\r\n  box-shadow: 0 1px 3px rgba(20,35,61,.15);\r\n}\r\n\r\n.boti-service-form .cat:active {\r\n  transform: scale(.985);\r\n}\r\n\r\n.boti-service-form .cat .ico {\r\n  flex: 0 0 34px;\r\n  width: 34px;\r\n  height: 34px;\r\n  display: grid;\r\n  place-items: center;\r\n}\r\n\r\n.boti-service-form .cat .ico svg {\r\n  width: 29px;\r\n  height: 29px;\r\n  fill: none;\r\n  stroke: #fff;\r\n  stroke-width: 1.8;\r\n  stroke-linecap: round;\r\n  stroke-linejoin: round;\r\n}\r\n\r\n.boti-service-form .cat .txt {\r\n  flex: 1 1 auto !important;\r\n  min-width: 0 !important;\r\n}\r\n\r\n.boti-service-form .cat .name {\r\n  display: block;\r\n  font-size: 17px;\r\n  font-weight: 700;\r\n  white-space: normal !important;\r\n}\r\n\r\n.boti-service-form .cat .hint {\r\n  display: block;\r\n  margin-top: 3px;\r\n  font-size: 12.5px;\r\n  opacity: .85;\r\n  line-height: 1.3;\r\n  white-space: normal !important;\r\n}\r\n\r\n.boti-service-form .cat .chev {\r\n  font-size: 25px;\r\n  opacity: .75;\r\n  flex: 0 0 auto;\r\n}\r\n\r\n.boti-service-form .cat.forklift {\r\n  background: var(--forklift);\r\n}\r\n\r\n.boti-service-form .cat.dock {\r\n  background: var(--dock);\r\n}\r\n\r\n.boti-service-form .cat.security {\r\n  background: var(--security);\r\n}\r\n\r\n.boti-service-form .cat.fire {\r\n  background: var(--fire);\r\n}\r\n\r\n.boti-service-form .cat.monitoring {\r\n  background: var(--monitoring);\r\n}\r\n\r\n.boti-service-form .cat.electrical {\r\n  background: var(--electrical);\r\n}\r\n\r\n.boti-service-form .catbadge {\r\n  display: inline-flex;\r\n  padding: 7px 12px;\r\n  margin-bottom: 15px;\r\n  border-radius: 999px;\r\n  color: #fff;\r\n  font-size: 13px;\r\n  font-weight: 700;\r\n}\r\n\r\n.boti-service-form .grouphdr {\r\n  margin: 22px 0 12px;\r\n  padding-top: 18px;\r\n  border-top: 1px solid var(--line);\r\n  color: var(--hint);\r\n  font-size: 12px;\r\n  font-weight: 700;\r\n  letter-spacing: 1px;\r\n}\r\n\r\n.boti-service-form .grouphdr.first {\r\n  margin-top: 0;\r\n  padding-top: 0;\r\n  border-top: 0;\r\n}\r\n\r\n.boti-service-form .field {\r\n  margin-bottom: 15px;\r\n}\r\n\r\n.boti-service-form .field label {\r\n  display: block;\r\n  margin-bottom: 6px;\r\n  font-size: 13.5px;\r\n  font-weight: 600;\r\n}\r\n\r\n.boti-service-form .req {\r\n  color: var(--danger);\r\n}\r\n\r\n.boti-service-form .field input,\r\n.boti-service-form .field select,\r\n.boti-service-form .field textarea {\r\n  width: 100%;\r\n  padding: 13px 14px;\r\n  border: 1.5px solid var(--line);\r\n  border-radius: 11px;\r\n  background: var(--card);\r\n  color: var(--ink);\r\n  font-size: 16px;\r\n}\r\n\r\n.boti-service-form .field textarea {\r\n  min-height: 88px;\r\n  resize: vertical;\r\n}\r\n\r\n.boti-service-form .field input:focus,\r\n.boti-service-form .field select:focus,\r\n.boti-service-form .field textarea:focus {\r\n  outline: none;\r\n  border-color: var(--accent, var(--navy));\r\n}\r\n\r\n.boti-service-form .chips {\r\n  display: flex;\r\n  flex-wrap: wrap;\r\n  gap: 9px;\r\n}\r\n\r\n.boti-service-form .chip {\r\n  flex: 1 1 auto;\r\n  border: 1.5px solid var(--line);\r\n  border-radius: 11px;\r\n  background: var(--card);\r\n  color: var(--ink);\r\n  padding: 12px 14px;\r\n  font-size: 14px;\r\n  font-weight: 600;\r\n  cursor: pointer;\r\n}\r\n\r\n.boti-service-form .chip.full {\r\n  flex-basis: 100%;\r\n}\r\n\r\n.boti-service-form .chip.sel {\r\n  border-color: var(--accent);\r\n  background: color-mix(in srgb, var(--accent) 10%, #fff);\r\n  color: var(--accent);\r\n}\r\n\r\n.boti-service-form .upload {\r\n  padding: 18px;\r\n  border: 2px dashed var(--line);\r\n  border-radius: 13px;\r\n  background: var(--card);\r\n}\r\n\r\n.boti-service-form .filelist {\r\n  margin-top: 14px;\r\n  display: none;\r\n  background: var(--paper);\r\n  border-radius: 10px;\r\n  padding: 10px 12px;\r\n}\r\n\r\n.boti-service-form .fileitem {\r\n  font-size: 13px;\r\n  padding: 3px 0;\r\n  word-break: break-word;\r\n}\r\n\r\n.boti-service-form .warning {\r\n  margin: 14px 0 18px;\r\n  padding: 13px 14px;\r\n  border: 1px solid var(--warn-border);\r\n  border-radius: 11px;\r\n  background: var(--warn-bg);\r\n  color: var(--warn-text);\r\n  font-size: 13px;\r\n  line-height: 1.45;\r\n}\r\n\r\n.boti-service-form .cta {\r\n  width: 100%;\r\n  margin-top: 24px;\r\n  padding: 16px;\r\n  border: 0;\r\n  border-radius: 13px;\r\n  color: #fff;\r\n  background: var(--accent, var(--navy));\r\n  font-size: 16.5px;\r\n  font-weight: 700;\r\n  cursor: pointer;\r\n}\r\n\r\n.boti-service-form .cta:disabled {\r\n  opacity: .6;\r\n  cursor: not-allowed;\r\n}\r\n\r\n.boti-service-form .note {\r\n  margin-top: 11px;\r\n  text-align: center;\r\n  color: var(--hint);\r\n  font-size: 12.5px;\r\n}\r\n\r\n.boti-service-form .error {\r\n  display: none;\r\n  margin: 12px 0;\r\n  padding: 11px 12px;\r\n  background: #fff0ef;\r\n  border: 1px solid #efc4c1;\r\n  border-radius: 10px;\r\n  color: #8d2f2a;\r\n  font-size: 13px;\r\n}\r\n\r\n.boti-service-form .review-section {\r\n  margin-bottom: 13px;\r\n  padding: 15px;\r\n  border: 1px solid var(--line);\r\n  border-radius: 13px;\r\n  background: var(--card);\r\n}\r\n\r\n.boti-service-form .review-section h3 {\r\n  margin: 0 0 10px;\r\n  color: var(--navy);\r\n  font-size: 14px;\r\n}\r\n\r\n.boti-service-form .review-row {\r\n  display: flex;\r\n  justify-content: space-between;\r\n  gap: 14px;\r\n  padding: 5px 0;\r\n  font-size: 13.5px;\r\n}\r\n\r\n.boti-service-form .review-row .k {\r\n  color: var(--muted);\r\n}\r\n\r\n.boti-service-form .review-row .v {\r\n  text-align: right;\r\n  font-weight: 600;\r\n  max-width: 60%;\r\n  word-break: break-word;\r\n}\r\n\r\n.boti-service-form .consent {\r\n  display: flex;\r\n  gap: 10px;\r\n  margin-top: 18px;\r\n  align-items: flex-start;\r\n  font-size: 13px;\r\n  color: var(--muted);\r\n  line-height: 1.4;\r\n}\r\n\r\n.boti-service-form .done {\r\n  padding: 35px 8px;\r\n  text-align: center;\r\n}\r\n\r\n.boti-service-form .done .circle {\r\n  width: 76px;\r\n  height: 76px;\r\n  display: grid;\r\n  place-items: center;\r\n  margin: 0 auto 18px;\r\n  border-radius: 50%;\r\n  background: color-mix(in srgb, var(--accent) 14%, #fff);\r\n  color: var(--accent);\r\n  font-size: 40px;\r\n  font-weight: 800;\r\n}\r\n\r\n.boti-service-form .done h2 {\r\n  color: var(--navy);\r\n}\r\n\r\n@media (max-width: 767px) {\r\n\r\n  .boti-service-form {\r\n    max-width: 100%;\r\n    border-radius: 0;\r\n  }\r\n\r\n  .boti-service-form main {\r\n    padding-left: 14px;\r\n    padding-right: 14px;\r\n  }\r\n\r\n  .boti-service-form .brandrow {\r\n    align-items: flex-start;\r\n  }\r\n\r\n  .boti-service-form .brand {\r\n    font-size: 21px;\r\n  }\r\n\r\n  .boti-service-form .brand small {\r\n    font-size: 8px;\r\n  }\r\n\r\n  .boti-service-form .tag {\r\n    font-size: 7px;\r\n    max-width: 135px;\r\n  }\r\n\r\n  .boti-service-form .cat {\r\n    padding: 14px !important;\r\n  }\r\n\r\n  .boti-service-form .cat .name {\r\n    font-size: 16px !important;\r\n  }\r\n\r\n  .boti-service-form .cat .hint {\r\n    font-size: 12px !important;\r\n  }\r\n}\r\n\r\n\/* MOBILE PHOTO \/ CALL ACTIONS *\/\r\n\r\n.mobile-photo-start {\r\n  display: none;\r\n}\r\n\r\n.mobile-call-link {\r\n  display: inline-block;\r\n  margin-top: 12px;\r\n  color: var(--danger);\r\n  font-weight: 700;\r\n  text-decoration: none;\r\n}\r\n\r\n@media (max-width: 767px) {\r\n\r\n  .mobile-photo-start {\r\n    display: block;\r\n    margin: 0 0 18px;\r\n    padding: 16px;\r\n    background: #ffffff;\r\n    border: 1px solid var(--line);\r\n    border-radius: 13px;\r\n    text-align: center;\r\n  }\r\n\r\n  .photo-start-btn {\r\n    width: 100%;\r\n    border: 0;\r\n    border-radius: 12px;\r\n    padding: 15px 16px;\r\n    background: #1a2b4a;\r\n    color: #ffffff;\r\n    font-size: 16px;\r\n    font-weight: 700;\r\n    cursor: pointer;\r\n  }\r\n\r\n  .photo-help {\r\n    margin-top: 9px;\r\n    color: var(--muted);\r\n    font-size: 12.5px;\r\n    line-height: 1.4;\r\n  }\r\n\r\n}\r\n\r\n<\/style>\r\n\r\n<div class=\"boti-service-form\">\r\n\r\n<header>\r\n\r\n  <div class=\"brandrow\">\r\n\r\n    <div class=\"brand\">\r\n      Boti's\r\n      <small>Boti's Corp. | Boti's Industrial Systems LLC<\/small>\r\n    <\/div>\r\n\r\n    <div class=\"tag\">\r\n      PEOPLE. EQUIPMENT. FACILITIES.<br>\r\n      KEEPING YOUR BUSINESS MOVING.\r\n    <\/div>\r\n\r\n  <\/div>\r\n\r\n<\/header>\r\n\r\n<div class=\"accentbar\" id=\"accentbar\"><\/div>\r\n\r\n<div class=\"subbar\">\r\n\r\n  <button\r\n    type=\"button\"\r\n    class=\"back\"\r\n    id=\"backBtn\"\r\n    onclick=\"goBack()\">\r\n    \u2039 Back\r\n  <\/button>\r\n\r\n  <span\r\n    class=\"steps\"\r\n    id=\"stepLabel\">\r\n  <\/span>\r\n\r\n<\/div>\r\n\r\n<main>\r\n\r\n<!-- SCREEN 1 -->\r\n\r\n<section\r\n  class=\"screen active\"\r\n  id=\"s1\">\r\n\r\n  <div class=\"eyebrow\">\r\n    SERVICE REQUEST\r\n  <\/div>\r\n\r\n  <h1>\r\n    What do you need help with?\r\n  <\/h1>\r\n\r\n  <p class=\"sub\">\r\n    Tap a service to get started.\r\n  <\/p>\r\n\r\n  <div class=\"mobile-photo-start\">\r\n\r\n    <button\r\n      type=\"button\"\r\n      class=\"photo-start-btn\"\r\n      onclick=\"openServiceCamera()\">\r\n      Take a Photo of the Problem\r\n    <\/button>\r\n\r\n    <div class=\"photo-help\">\r\n      Best photos: equipment, model\/serial tag, damage,\r\n      fault display, panel, door, gate, or charger.\r\n    <\/div>\r\n\r\n    <input\r\n      id=\"mobileCamera\"\r\n      type=\"file\"\r\n      accept=\"image\/*\"\r\n      capture=\"environment\"\r\n      style=\"display:none\"\r\n      onchange=\"addMobileCameraPhoto(this)\">\r\n\r\n    <a\r\n      class=\"mobile-call-link\"\r\n      href=\"tel:2093603139\">\r\n      Need help now? Call (209) 360-3139\r\n    <\/a>\r\n\r\n  <\/div>\r\n\r\n  <div\r\n    class=\"cats\"\r\n    id=\"catList\">\r\n  <\/div>\r\n\r\n<\/section>\r\n\r\n\r\n<!-- SCREEN 2 -->\r\n\r\n<section\r\n  class=\"screen\"\r\n  id=\"s2\">\r\n\r\n  <span\r\n    class=\"catbadge\"\r\n    id=\"catBadge\">\r\n  <\/span>\r\n\r\n  <h2 class=\"screen-title\">\r\n    How can we reach you?\r\n  <\/h2>\r\n\r\n  <div class=\"field\">\r\n\r\n    <label>\r\n      Name\r\n      <span class=\"req\">*<\/span>\r\n    <\/label>\r\n\r\n    <input\r\n      id=\"f_name\"\r\n      type=\"text\"\r\n      autocomplete=\"name\">\r\n\r\n  <\/div>\r\n\r\n  <div class=\"field\">\r\n\r\n    <label>\r\n      Phone\r\n      <span class=\"req\">*<\/span>\r\n    <\/label>\r\n\r\n    <input\r\n      id=\"f_phone\"\r\n      type=\"tel\"\r\n      autocomplete=\"tel\">\r\n\r\n  <\/div>\r\n\r\n  <div class=\"field\">\r\n\r\n    <label>\r\n      Company\r\n    <\/label>\r\n\r\n    <input\r\n      id=\"f_company\"\r\n      type=\"text\"\r\n      autocomplete=\"organization\">\r\n\r\n  <\/div>\r\n\r\n  <div class=\"field\">\r\n\r\n    <label>\r\n      Email\r\n    <\/label>\r\n\r\n    <input\r\n      id=\"f_email\"\r\n      type=\"email\"\r\n      autocomplete=\"email\">\r\n\r\n  <\/div>\r\n\r\n  <div\r\n    class=\"error\"\r\n    id=\"err2\">\r\n  <\/div>\r\n\r\n  <button\r\n    type=\"button\"\r\n    class=\"cta\"\r\n    onclick=\"nextFromContact()\">\r\n    Continue\r\n  <\/button>\r\n\r\n<\/section>\r\n\r\n\r\n<!-- SCREEN 3 -->\r\n\r\n<section\r\n  class=\"screen\"\r\n  id=\"s3\">\r\n\r\n  <span\r\n    class=\"catbadge duplicateBadge\">\r\n  <\/span>\r\n\r\n  <h2 class=\"screen-title\">\r\n    What do you need?\r\n  <\/h2>\r\n\r\n  <div class=\"grouphdr first\">\r\n    REQUEST TYPE\r\n  <\/div>\r\n\r\n  <div\r\n    class=\"chips\"\r\n    id=\"reqTypes\">\r\n  <\/div>\r\n\r\n  <div class=\"grouphdr\">\r\n    SERVICE DETAILS\r\n  <\/div>\r\n\r\n  <div id=\"dynFields\"><\/div>\r\n\r\n  <div\r\n    class=\"error\"\r\n    id=\"err3\">\r\n  <\/div>\r\n\r\n  <button\r\n    type=\"button\"\r\n    class=\"cta\"\r\n    onclick=\"nextFromDetails()\">\r\n    Continue\r\n  <\/button>\r\n\r\n<\/section>\r\n\r\n\r\n<!-- SCREEN 4 -->\r\n\r\n<section\r\n  class=\"screen\"\r\n  id=\"s4\">\r\n\r\n  <h2 class=\"screen-title\">\r\n    Where is the service needed?\r\n  <\/h2>\r\n\r\n  <div class=\"field\">\r\n\r\n    <label>\r\n      Street address\r\n      <span class=\"req\">*<\/span>\r\n    <\/label>\r\n\r\n    <input\r\n      id=\"site_address\"\r\n      type=\"text\"\r\n      autocomplete=\"street-address\">\r\n\r\n  <\/div>\r\n\r\n  <div class=\"field\">\r\n\r\n    <label>\r\n      City\r\n      <span class=\"req\">*<\/span>\r\n    <\/label>\r\n\r\n    <input\r\n      id=\"site_city\"\r\n      type=\"text\"\r\n      autocomplete=\"address-level2\">\r\n\r\n  <\/div>\r\n\r\n  <div class=\"field\">\r\n\r\n    <label>\r\n      State\r\n      <span class=\"req\">*<\/span>\r\n    <\/label>\r\n\r\n    <input\r\n      id=\"site_state\"\r\n      type=\"text\"\r\n      value=\"CA\"\r\n      autocomplete=\"address-level1\">\r\n\r\n  <\/div>\r\n\r\n  <div class=\"field\">\r\n\r\n    <label>\r\n      ZIP code\r\n      <span class=\"req\">*<\/span>\r\n    <\/label>\r\n\r\n    <input\r\n      id=\"site_zip\"\r\n      type=\"text\"\r\n      inputmode=\"numeric\"\r\n      autocomplete=\"postal-code\">\r\n\r\n  <\/div>\r\n\r\n  <div class=\"field\">\r\n\r\n    <label>\r\n      On-site contact\r\n    <\/label>\r\n\r\n    <input\r\n      id=\"site_contact\"\r\n      type=\"text\">\r\n\r\n  <\/div>\r\n\r\n  <div class=\"field\">\r\n\r\n    <label>\r\n      On-site phone\r\n    <\/label>\r\n\r\n    <input\r\n      id=\"site_phone\"\r\n      type=\"tel\">\r\n\r\n  <\/div>\r\n\r\n  <div class=\"field\">\r\n\r\n    <label>\r\n      Hours accessible\r\n    <\/label>\r\n\r\n    <input\r\n      id=\"site_hours\"\r\n      type=\"text\"\r\n      placeholder=\"Example: 6 AM \u2013 4 PM\">\r\n\r\n  <\/div>\r\n\r\n  <div class=\"field\">\r\n\r\n    <label>\r\n      Gate code \/ access instructions\r\n    <\/label>\r\n\r\n    <textarea\r\n      id=\"site_access\">\r\n    <\/textarea>\r\n\r\n  <\/div>\r\n\r\n  <div class=\"field\">\r\n\r\n    <label>\r\n      Safety or PPE requirements\r\n    <\/label>\r\n\r\n    <textarea\r\n      id=\"site_safety\"\r\n      placeholder=\"Example: safety vest, hard hat, escort required\">\r\n    <\/textarea>\r\n\r\n  <\/div>\r\n\r\n  <div\r\n    class=\"error\"\r\n    id=\"err4\">\r\n  <\/div>\r\n\r\n  <button\r\n    type=\"button\"\r\n    class=\"cta\"\r\n    onclick=\"nextFromSite()\">\r\n    Continue\r\n  <\/button>\r\n\r\n<\/section>\r\n\r\n\r\n<!-- SCREEN 5 -->\r\n\r\n<section\r\n  class=\"screen\"\r\n  id=\"s5\">\r\n\r\n  <h2 class=\"screen-title\">\r\n    How urgent is this?\r\n  <\/h2>\r\n\r\n  <div class=\"warning\">\r\n    For a fire, medical emergency, electrical hazard, or other immediate threat to life or property, call 911.\r\n  <\/div>\r\n\r\n  <div class=\"grouphdr first\">\r\n    PRIORITY\r\n  <\/div>\r\n\r\n  <div\r\n    class=\"chips\"\r\n    id=\"urgency\">\r\n\r\n    <button\r\n      type=\"button\"\r\n      class=\"chip\"\r\n      data-val=\"Routine\"\r\n      onclick=\"pickUrgency(this)\">\r\n      Routine\r\n    <\/button>\r\n\r\n    <button\r\n      type=\"button\"\r\n      class=\"chip\"\r\n      data-val=\"Urgent\"\r\n      onclick=\"pickUrgency(this)\">\r\n      Urgent\r\n    <\/button>\r\n\r\n    <button\r\n      type=\"button\"\r\n      class=\"chip\"\r\n      data-val=\"Emergency\"\r\n      onclick=\"pickUrgency(this)\">\r\n      Emergency\r\n    <\/button>\r\n\r\n  <\/div>\r\n\r\n  <div class=\"grouphdr\">\r\n    PRODUCTION IMPACT\r\n  <\/div>\r\n\r\n  <div\r\n    class=\"chips\"\r\n    id=\"impact\">\r\n\r\n    <button\r\n      type=\"button\"\r\n      class=\"chip\"\r\n      data-val=\"Down\"\r\n      onclick=\"pickImpact(this)\">\r\n      Down\r\n    <\/button>\r\n\r\n    <button\r\n      type=\"button\"\r\n      class=\"chip\"\r\n      data-val=\"Degraded\"\r\n      onclick=\"pickImpact(this)\">\r\n      Degraded\r\n    <\/button>\r\n\r\n    <button\r\n      type=\"button\"\r\n      class=\"chip\"\r\n      data-val=\"No impact\"\r\n      onclick=\"pickImpact(this)\">\r\n      No impact\r\n    <\/button>\r\n\r\n  <\/div>\r\n\r\n  <div\r\n    class=\"field\"\r\n    style=\"margin-top:18px;\">\r\n\r\n    <label>\r\n      Preferred service date\r\n    <\/label>\r\n\r\n    <input\r\n      id=\"preferred_date\"\r\n      type=\"date\">\r\n\r\n  <\/div>\r\n\r\n  <div class=\"field\">\r\n\r\n    <label>\r\n      Scheduling notes\r\n    <\/label>\r\n\r\n    <textarea\r\n      id=\"schedule_notes\"\r\n      placeholder=\"Shift times, shutdown window, preferred arrival time, etc.\">\r\n    <\/textarea>\r\n\r\n  <\/div>\r\n\r\n  <div\r\n    class=\"error\"\r\n    id=\"err5\">\r\n  <\/div>\r\n\r\n  <button\r\n    type=\"button\"\r\n    class=\"cta\"\r\n    onclick=\"nextFromUrgency()\">\r\n    Continue\r\n  <\/button>\r\n\r\n<\/section>\r\n\r\n\r\n<!-- SCREEN 6 -->\r\n\r\n<section\r\n  class=\"screen\"\r\n  id=\"s6\">\r\n\r\n  <h2 class=\"screen-title\">\r\n    Photos of the Problem\r\n  <\/h2>\r\n\r\n  <p class=\"screen-copy\">\r\n    Photos help us prepare before we arrive. If possible,\r\n    send the equipment, model\/serial tag, damage or failed\r\n    component, and any error message or display.\r\n  <\/p>\r\n\r\n  <div class=\"upload\">\r\n\r\n    <strong>\r\n      Upload files\r\n    <\/strong>\r\n\r\n    <p>\r\n      Photos, short videos, or PDF documents.\r\n    <\/p>\r\n\r\n    <input\r\n      id=\"attachments\"\r\n      type=\"file\"\r\n      accept=\"image\/*,video\/*,.pdf\"\r\n      multiple\r\n      onchange=\"showSelectedFiles()\">\r\n\r\n    <div\r\n      class=\"filelist\"\r\n      id=\"fileList\">\r\n    <\/div>\r\n\r\n  <\/div>\r\n\r\n  <button\r\n    type=\"button\"\r\n    class=\"cta\"\r\n    onclick=\"showScreen('s7')\">\r\n    Continue\r\n  <\/button>\r\n\r\n  <p class=\"note\">\r\n    Attachments are optional.\r\n  <\/p>\r\n\r\n<\/section>\r\n\r\n\r\n<!-- SCREEN 7 -->\r\n\r\n<section\r\n  class=\"screen\"\r\n  id=\"s7\">\r\n\r\n  <h2 class=\"screen-title\">\r\n    Final details\r\n  <\/h2>\r\n\r\n  <div class=\"field\">\r\n\r\n    <label>\r\n      Existing Boti's customer?\r\n    <\/label>\r\n\r\n    <div\r\n      class=\"chips\"\r\n      id=\"existingCustomer\">\r\n\r\n      <button\r\n        type=\"button\"\r\n        class=\"chip\"\r\n        onclick=\"pickExisting(this,'Yes')\">\r\n        Yes\r\n      <\/button>\r\n\r\n      <button\r\n        type=\"button\"\r\n        class=\"chip\"\r\n        onclick=\"pickExisting(this,'No')\">\r\n        No\r\n      <\/button>\r\n\r\n      <button\r\n        type=\"button\"\r\n        class=\"chip\"\r\n        onclick=\"pickExisting(this,'Not sure')\">\r\n        Not sure\r\n      <\/button>\r\n\r\n    <\/div>\r\n\r\n  <\/div>\r\n\r\n  <div class=\"field\">\r\n\r\n    <label>\r\n      PO number\r\n    <\/label>\r\n\r\n    <input\r\n      id=\"po_number\"\r\n      type=\"text\"\r\n      placeholder=\"Optional\">\r\n\r\n  <\/div>\r\n\r\n  <div class=\"field\">\r\n\r\n    <label>\r\n      Additional notes\r\n    <\/label>\r\n\r\n    <textarea\r\n      id=\"final_notes\"\r\n      placeholder=\"Anything else we should know\">\r\n    <\/textarea>\r\n\r\n  <\/div>\r\n\r\n  <button\r\n    type=\"button\"\r\n    class=\"cta\"\r\n    onclick=\"buildReview()\">\r\n    Review Request\r\n  <\/button>\r\n\r\n<\/section>\r\n\r\n\r\n<!-- SCREEN 8 -->\r\n\r\n<section\r\n  class=\"screen\"\r\n  id=\"s8\">\r\n\r\n  <h2 class=\"screen-title\">\r\n    Review your request\r\n  <\/h2>\r\n\r\n  <div\r\n    class=\"review\"\r\n    id=\"review\">\r\n  <\/div>\r\n\r\n  <label class=\"consent\">\r\n\r\n    <input\r\n      type=\"checkbox\"\r\n      id=\"consent\">\r\n\r\n    <span>\r\n      I confirm that the information provided is accurate and authorize Boti's to contact me regarding this service request.\r\n    <\/span>\r\n\r\n  <\/label>\r\n\r\n  <div\r\n    class=\"error\"\r\n    id=\"err8\">\r\n  <\/div>\r\n\r\n  <button\r\n    type=\"button\"\r\n    class=\"cta\"\r\n    onclick=\"finalSubmit()\">\r\n    Submit Service Request\r\n  <\/button>\r\n\r\n<\/section>\r\n\r\n\r\n<!-- SCREEN 9 -->\r\n\r\n<section\r\n  class=\"screen\"\r\n  id=\"s9\">\r\n\r\n  <div class=\"done\">\r\n\r\n    <div class=\"circle\">\r\n      \u2713\r\n    <\/div>\r\n\r\n    <h2>\r\n      Request received\r\n    <\/h2>\r\n\r\n    <p id=\"doneMsg\">\r\n      Your service request has been submitted.\r\n    <\/p>\r\n\r\n    <p style=\"margin-top:18px;\">\r\n      Need immediate assistance?\r\n    <\/p>\r\n\r\n    <a\r\n      href=\"tel:2093603139\"\r\n      style=\"\r\n        display:inline-block;\r\n        margin-top:6px;\r\n        padding:14px 20px;\r\n        background:#b23a34;\r\n        color:#ffffff;\r\n        text-decoration:none;\r\n        border-radius:11px;\r\n        font-weight:700;\r\n      \">\r\n      Call Boti's \u2014 (209) 360-3139\r\n    <\/a>\r\n\r\n  <\/div>\r\n\r\n<\/section>\r\n\r\n<\/main>\r\n\r\n<\/div>\r\n\r\n\r\n<script>\r\nconst ICONS = {\r\n\r\n  forklift: `\r\n    <svg viewBox=\"0 0 24 24\">\r\n      <path d=\"M4 5v11h2\"><\/path>\r\n      <path d=\"M6 13h7V7H9\"><\/path>\r\n      <path d=\"M13 9h3l2 3v4\"><\/path>\r\n      <circle cx=\"8\" cy=\"17\" r=\"2\"><\/circle>\r\n      <circle cx=\"16\" cy=\"17\" r=\"2\"><\/circle>\r\n    <\/svg>\r\n  `,\r\n\r\n  dock: `\r\n    <svg viewBox=\"0 0 24 24\">\r\n      <rect x=\"3\" y=\"3\" width=\"18\" height=\"18\"><\/rect>\r\n      <path d=\"M5 8h14\"><\/path>\r\n      <path d=\"M5 12h14\"><\/path>\r\n      <path d=\"M5 16h14\"><\/path>\r\n    <\/svg>\r\n  `,\r\n\r\n  security: `\r\n    <svg viewBox=\"0 0 24 24\">\r\n      <path d=\"M3 8l12-3 1 4 4 1-1 4-4-1-1-3-9 2z\"><\/path>\r\n    <\/svg>\r\n  `,\r\n\r\n  fire: `\r\n    <svg viewBox=\"0 0 24 24\">\r\n      <path d=\"M12 3c1 4-2 5-2 8 0 1.3.8 2.3 2 2.3 1.2 0 2-.9 2-2.1 1.8 1.5 3 3.4 3 5.3a5 5 0 0 1-10 0C7 11.5 12 9 12 3z\"><\/path>\r\n    <\/svg>\r\n  `,\r\n\r\n  monitoring: `\r\n    <svg viewBox=\"0 0 24 24\">\r\n      <circle cx=\"12\" cy=\"12\" r=\"2\"><\/circle>\r\n      <path d=\"M8 8a5.7 5.7 0 0 0 0 8\"><\/path>\r\n      <path d=\"M16 8a5.7 5.7 0 0 1 0 8\"><\/path>\r\n    <\/svg>\r\n  `,\r\n\r\n  electrical: `\r\n    <svg viewBox=\"0 0 24 24\">\r\n      <path d=\"M13 2L5 13h6l-1 9 9-12h-6z\"><\/path>\r\n    <\/svg>\r\n  `\r\n};\r\n\r\n\r\nconst CATS = [\r\n\r\n  {\r\n    id:'forklift',\r\n    name:'Forklift \/ Material Handling',\r\n    hint:'Lift trucks, pallet jacks, chargers, batteries'\r\n  },\r\n\r\n  {\r\n    id:'dock',\r\n    name:'Dock, Door & Gate',\r\n    hint:'Roll-up doors, dock levelers, gates & operators'\r\n  },\r\n\r\n  {\r\n    id:'security',\r\n    name:'Security \/ Access Control',\r\n    hint:'Cameras, access control, intrusion & entry systems'\r\n  },\r\n\r\n  {\r\n    id:'fire',\r\n    name:'Fire Alarm',\r\n    hint:'Panels, devices, inspections & life safety'\r\n  },\r\n\r\n  {\r\n    id:'monitoring',\r\n    name:'Monitoring',\r\n    hint:'Alarm monitoring, transfers & account support'\r\n  },\r\n\r\n  {\r\n    id:'electrical',\r\n    name:'Electrical',\r\n    hint:'Service, panels, circuits, lighting & facility systems'\r\n  }\r\n\r\n];\r\n\r\n\r\nconst COLORS = {\r\n\r\n  forklift:'#b23a34',\r\n  dock:'#1f4e79',\r\n  security:'#2f7d3f',\r\n  fire:'#e07a1f',\r\n  monitoring:'#4a3b8c',\r\n  electrical:'#55606f'\r\n\r\n};\r\n\r\n\r\nconst REQ_TYPES = {\r\n\r\n  _default:[\r\n    'Service \/ Repair',\r\n    'Preventive Maintenance',\r\n    'New Installation \/ Quote',\r\n    'Inspection \/ Certification'\r\n  ],\r\n\r\n  monitoring:[\r\n    'New Monitoring',\r\n    'Transfer Service',\r\n    'Account Change',\r\n    'Service Issue'\r\n  ]\r\n\r\n};\r\n\r\n\r\nconst DETAILS = {\r\n\r\n  forklift:[\r\n\r\n    {\r\n      t:'text',\r\n      l:'Make \/ model',\r\n      ph:'Example: Tailift FG25'\r\n    },\r\n\r\n    {\r\n      t:'text',\r\n      l:'Unit or serial number',\r\n      ph:'If known'\r\n    },\r\n\r\n    {\r\n      t:'number',\r\n      l:'Hour meter reading',\r\n      ph:'If available'\r\n    },\r\n\r\n    {\r\n      t:'select',\r\n      l:'Fuel type',\r\n      opts:[\r\n        'LP \/ Propane',\r\n        'Electric',\r\n        'Diesel',\r\n        'Other \/ Not sure'\r\n      ]\r\n    },\r\n\r\n    {\r\n      t:'yesno',\r\n      l:'Is the lift still operable?'\r\n    },\r\n\r\n    {\r\n      t:'textarea',\r\n      l:'What is happening?',\r\n      ph:'Fault codes, symptoms, damage or work needed'\r\n    }\r\n\r\n  ],\r\n\r\n\r\n  dock:[\r\n\r\n    {\r\n      t:'select',\r\n      l:'Equipment type',\r\n      opts:[\r\n        'Roll-up door',\r\n        'Dock leveler',\r\n        'Dock restraint',\r\n        'Gate',\r\n        'Gate operator',\r\n        'Other'\r\n      ]\r\n    },\r\n\r\n    {\r\n      t:'number',\r\n      l:'Quantity affected',\r\n      ph:'Example: 1'\r\n    },\r\n\r\n    {\r\n      t:'select',\r\n      l:'Current position \/ condition',\r\n      opts:[\r\n        'Stuck open',\r\n        'Stuck closed',\r\n        'Partially open',\r\n        'Still operating',\r\n        'Not applicable'\r\n      ]\r\n    },\r\n\r\n    {\r\n      t:'yesno',\r\n      l:'Does the manual override work?'\r\n    },\r\n\r\n    {\r\n      t:'textarea',\r\n      l:'What is happening?',\r\n      ph:'Describe the failure, damage, noise or work needed'\r\n    }\r\n\r\n  ],\r\n\r\n\r\n  security:[\r\n\r\n    {\r\n      t:'select',\r\n      l:'System type',\r\n      opts:[\r\n        'Cameras \/ CCTV',\r\n        'Access control',\r\n        'Intrusion alarm',\r\n        'Intercom \/ entry',\r\n        'Multiple systems',\r\n        'Not sure'\r\n      ]\r\n    },\r\n\r\n    {\r\n      t:'text',\r\n      l:'Brand',\r\n      ph:'If known'\r\n    },\r\n\r\n    {\r\n      t:'number',\r\n      l:'Number of devices \/ doors affected',\r\n      ph:'If known'\r\n    },\r\n\r\n    {\r\n      t:'yesno',\r\n      l:'Is this an existing system?'\r\n    },\r\n\r\n    {\r\n      t:'textarea',\r\n      l:'What is happening?',\r\n      ph:'Describe the issue or new system needed'\r\n    }\r\n\r\n  ],\r\n\r\n\r\n  fire:[\r\n\r\n    {\r\n      t:'text',\r\n      l:'Panel make \/ model',\r\n      ph:'If known'\r\n    },\r\n\r\n    {\r\n      t:'select',\r\n      l:'Current condition',\r\n      opts:[\r\n        'Trouble',\r\n        'Alarm',\r\n        'Supervisory',\r\n        'Inspection \/ testing',\r\n        'New installation',\r\n        'Other'\r\n      ]\r\n    },\r\n\r\n    {\r\n      t:'text',\r\n      l:'Zone \/ device',\r\n      ph:'If shown on panel'\r\n    },\r\n\r\n    {\r\n      t:'yesno',\r\n      l:'Is the building occupied?'\r\n    },\r\n\r\n    {\r\n      t:'date',\r\n      l:'Inspection or AHJ deadline'\r\n    },\r\n\r\n    {\r\n      t:'textarea',\r\n      l:'Details',\r\n      ph:'Panel message, device location, inspection request or other information'\r\n    }\r\n\r\n  ],\r\n\r\n\r\n  monitoring:[\r\n\r\n    {\r\n      t:'text',\r\n      l:'Account number',\r\n      ph:'If known'\r\n    },\r\n\r\n    {\r\n      t:'select',\r\n      l:'Monitoring type',\r\n      opts:[\r\n        'Intrusion',\r\n        'Fire alarm',\r\n        'Both',\r\n        'Other \/ not sure'\r\n      ]\r\n    },\r\n\r\n    {\r\n      t:'text',\r\n      l:'Current provider',\r\n      ph:'If transferring'\r\n    },\r\n\r\n    {\r\n      t:'textarea',\r\n      l:'What do you need?',\r\n      ph:'New service, transfer, account change or monitoring issue'\r\n    }\r\n\r\n  ],\r\n\r\n\r\n  electrical:[\r\n\r\n    {\r\n      t:'select',\r\n      l:'Type of work',\r\n      opts:[\r\n        'Repair',\r\n        'Troubleshooting',\r\n        'New circuit',\r\n        'Panel work',\r\n        'Lighting',\r\n        'Equipment power',\r\n        'EV charging',\r\n        'Other'\r\n      ]\r\n    },\r\n\r\n    {\r\n      t:'text',\r\n      l:'Voltage \/ phase',\r\n      ph:'Example: 208V 3-phase'\r\n    },\r\n\r\n    {\r\n      t:'yesno',\r\n      l:'Is equipment or production currently down?'\r\n    },\r\n\r\n    {\r\n      t:'textarea',\r\n      l:'Scope of work',\r\n      ph:'Describe the electrical issue or installation needed'\r\n    }\r\n\r\n  ]\r\n\r\n};\r\n\r\n\r\nlet state = {\r\n\r\n  cat:null,\r\n  reqType:null,\r\n  urgency:null,\r\n  impact:null,\r\n  existingCustomer:null\r\n\r\n};\r\n\r\n\r\nlet historyStack = [];\r\n\r\n\r\nfunction escapeHTML(str) {\r\n\r\n  return String(str)\r\n    .replaceAll('&','&amp;')\r\n    .replaceAll('<','&lt;')\r\n    .replaceAll('>','&gt;')\r\n    .replaceAll('\"','&quot;')\r\n    .replaceAll(\"'\",\"&#039;\");\r\n\r\n}\r\n\r\n\r\nconst catList =\r\n  document.getElementById('catList');\r\n\r\n\r\nCATS.forEach(c => {\r\n\r\n  const button =\r\n    document.createElement('button');\r\n\r\n  button.type =\r\n    'button';\r\n\r\n  button.className =\r\n    'cat ' + c.id;\r\n\r\n  button.innerHTML = `\r\n\r\n    <span class=\"ico\">\r\n      ${ICONS[c.id]}\r\n    <\/span>\r\n\r\n    <span class=\"txt\">\r\n\r\n      <span class=\"name\">\r\n        ${escapeHTML(c.name)}\r\n      <\/span>\r\n\r\n      <span class=\"hint\">\r\n        ${escapeHTML(c.hint)}\r\n      <\/span>\r\n\r\n    <\/span>\r\n\r\n    <span class=\"chev\">\r\n      \u203a\r\n    <\/span>\r\n\r\n  `;\r\n\r\n  button.onclick =\r\n    () => selectCat(c);\r\n\r\n  catList.appendChild(button);\r\n\r\n});\r\n\r\n\r\nconst urlParams =\r\n  new URLSearchParams(\r\n    window.location.search\r\n  );\r\n\r\n\r\n\/*\r\n  Deep-link support.\r\n\r\n  Both formats work:\r\n    ?category=gate\r\n    ?service=dock\r\n\r\n  Specific website pages can route into the broader\r\n  Service Request categories used by this form.\r\n*\/\r\nconst rawPreselected =\r\n  (\r\n    urlParams.get('category') ||\r\n    urlParams.get('service') ||\r\n    ''\r\n  )\r\n  .toLowerCase()\r\n  .trim();\r\n\r\n\r\nconst SERVICE_ALIASES = {\r\n\r\n  forklift:'forklift',\r\n  material:'forklift',\r\n  materialhandling:'forklift',\r\n  battery:'forklift',\r\n  batteries:'forklift',\r\n  charger:'forklift',\r\n  charging:'forklift',\r\n  rental:'forklift',\r\n\r\n  dock:'dock',\r\n  door:'dock',\r\n  doors:'dock',\r\n  gate:'dock',\r\n  gates:'dock',\r\n  operator:'dock',\r\n\r\n  security:'security',\r\n  access:'security',\r\n  accesscontrol:'security',\r\n  cctv:'security',\r\n  camera:'security',\r\n  cameras:'security',\r\n  intrusion:'security',\r\n  intercom:'security',\r\n\r\n  fire:'fire',\r\n  firealarm:'fire',\r\n  lifesafety:'fire',\r\n\r\n  monitoring:'monitoring',\r\n  alarmmonitoring:'monitoring',\r\n\r\n  electrical:'electrical',\r\n  electric:'electrical',\r\n  power:'electrical'\r\n\r\n};\r\n\r\n\r\nconst normalizedPreselected =\r\n  rawPreselected\r\n    .replace(\/[^a-z0-9]\/g,'');\r\n\r\n\r\nconst mappedCategory =\r\n  SERVICE_ALIASES[normalizedPreselected] ||\r\n  rawPreselected;\r\n\r\n\r\nif (mappedCategory) {\r\n\r\n  const match =\r\n    CATS.find(\r\n      c =>\r\n        c.id === mappedCategory\r\n    );\r\n\r\n  if (match) {\r\n\r\n    selectCat(\r\n      match,\r\n      true\r\n    );\r\n\r\n  }\r\n\r\n}\r\n\r\n\r\nfunction setAccent(catId) {\r\n\r\n  const color =\r\n    COLORS[catId];\r\n\r\n  document.documentElement\r\n    .style\r\n    .setProperty(\r\n      '--accent',\r\n      color\r\n    );\r\n\r\n  document.getElementById(\r\n    'accentbar'\r\n  ).style.background =\r\n    color;\r\n\r\n}\r\n\r\n\r\nfunction showScreen(\r\n  id,\r\n  push = true\r\n) {\r\n\r\n  const current =\r\n    document.querySelector(\r\n      '.boti-service-form .screen.active'\r\n    );\r\n\r\n  if (\r\n    push &&\r\n    current &&\r\n    current.id !== id\r\n  ) {\r\n\r\n    historyStack.push(\r\n      current.id\r\n    );\r\n\r\n  }\r\n\r\n\r\n  document\r\n    .querySelectorAll(\r\n      '.boti-service-form .screen'\r\n    )\r\n    .forEach(\r\n      s =>\r\n        s.classList.remove(\r\n          'active'\r\n        )\r\n    );\r\n\r\n\r\n  document\r\n    .getElementById(id)\r\n    .classList.add(\r\n      'active'\r\n    );\r\n\r\n\r\n  document\r\n    .querySelector(\r\n      '.boti-service-form'\r\n    )\r\n    .scrollIntoView({\r\n      behavior:'smooth',\r\n      block:'start'\r\n    });\r\n\r\n\r\n  const first =\r\n    id === 's1';\r\n\r\n\r\n  const noBack =\r\n    first ||\r\n    id === 's9' ||\r\n    historyStack.length === 0;\r\n\r\n\r\n  document.getElementById(\r\n    'backBtn'\r\n  ).style.display =\r\n    noBack\r\n      ? 'none'\r\n      : 'block';\r\n\r\n\r\n  document.getElementById(\r\n    'stepLabel'\r\n  ).style.display =\r\n    first || id === 's9'\r\n      ? 'none'\r\n      : 'block';\r\n\r\n\r\n  const labels = {\r\n\r\n    s2:'Contact',\r\n    s3:'Request',\r\n    s4:'Site',\r\n    s5:'Priority',\r\n    s6:'Photos \/ Video',\r\n    s7:'Final details',\r\n    s8:'Review'\r\n\r\n  };\r\n\r\n\r\n  document.getElementById(\r\n    'stepLabel'\r\n  ).textContent =\r\n    labels[id] || '';\r\n\r\n}\r\n\r\n\r\nfunction goBack() {\r\n\r\n  const previous =\r\n    historyStack.pop();\r\n\r\n  if (previous) {\r\n\r\n    showScreen(\r\n      previous,\r\n      false\r\n    );\r\n\r\n  }\r\n\r\n}\r\n\r\n\r\nfunction selectCat(\r\n  c,\r\n  fromQR = false\r\n) {\r\n\r\n  state.cat =\r\n    c;\r\n\r\n  state.reqType =\r\n    null;\r\n\r\n  state.urgency =\r\n    null;\r\n\r\n  state.impact =\r\n    null;\r\n\r\n\r\n  setAccent(\r\n    c.id\r\n  );\r\n\r\n\r\n  const badge =\r\n    document.getElementById(\r\n      'catBadge'\r\n    );\r\n\r\n\r\n  badge.style.background =\r\n    COLORS[c.id];\r\n\r\n\r\n  badge.textContent =\r\n    c.name;\r\n\r\n\r\n  document\r\n    .querySelectorAll(\r\n      '.duplicateBadge'\r\n    )\r\n    .forEach(el => {\r\n\r\n      el.style.background =\r\n        COLORS[c.id];\r\n\r\n      el.textContent =\r\n        c.name;\r\n\r\n    });\r\n\r\n\r\n  buildRequestTypes(\r\n    c.id\r\n  );\r\n\r\n\r\n  buildDetails(\r\n    c.id\r\n  );\r\n\r\n\r\n  if (fromQR) {\r\n\r\n    historyStack = [];\r\n\r\n    showScreen(\r\n      's2',\r\n      false\r\n    );\r\n\r\n  }\r\n\r\n  else {\r\n\r\n    showScreen(\r\n      's2'\r\n    );\r\n\r\n  }\r\n\r\n}\r\n\r\n\r\nfunction buildRequestTypes(\r\n  catId\r\n) {\r\n\r\n  const wrap =\r\n    document.getElementById(\r\n      'reqTypes'\r\n    );\r\n\r\n\r\n  wrap.innerHTML =\r\n    '';\r\n\r\n\r\n  const types =\r\n    REQ_TYPES[catId] ||\r\n    REQ_TYPES._default;\r\n\r\n\r\n  types.forEach(type => {\r\n\r\n    const button =\r\n      document.createElement(\r\n        'button'\r\n      );\r\n\r\n    button.type =\r\n      'button';\r\n\r\n    button.className =\r\n      'chip full';\r\n\r\n    button.textContent =\r\n      type;\r\n\r\n    button.onclick =\r\n      () =>\r\n        pickReq(\r\n          button,\r\n          type\r\n        );\r\n\r\n    wrap.appendChild(\r\n      button\r\n    );\r\n\r\n  });\r\n\r\n}\r\n\r\n\r\nfunction pickReq(\r\n  el,\r\n  value\r\n) {\r\n\r\n  document\r\n    .querySelectorAll(\r\n      '#reqTypes .chip'\r\n    )\r\n    .forEach(\r\n      c =>\r\n        c.classList.remove(\r\n          'sel'\r\n        )\r\n    );\r\n\r\n\r\n  el.classList.add(\r\n    'sel'\r\n  );\r\n\r\n\r\n  state.reqType =\r\n    value;\r\n\r\n}\r\n\r\n\r\nfunction buildDetails(\r\n  catId\r\n) {\r\n\r\n  const wrap =\r\n    document.getElementById(\r\n      'dynFields'\r\n    );\r\n\r\n\r\n  wrap.innerHTML =\r\n    '';\r\n\r\n\r\n  DETAILS[catId]\r\n    .forEach((f,i) => {\r\n\r\n      const field =\r\n        document.createElement(\r\n          'div'\r\n        );\r\n\r\n\r\n      field.className =\r\n        'field';\r\n\r\n\r\n      const id =\r\n        `d_${catId}_${i}`;\r\n\r\n\r\n      field.dataset.label =\r\n        f.l;\r\n\r\n\r\n      if (\r\n        f.t === 'text' ||\r\n        f.t === 'number' ||\r\n        f.t === 'date'\r\n      ) {\r\n\r\n        field.innerHTML = `\r\n\r\n          <label>\r\n            ${escapeHTML(f.l)}\r\n          <\/label>\r\n\r\n          <input\r\n            type=\"${f.t}\"\r\n            id=\"${id}\"\r\n            placeholder=\"${escapeHTML(f.ph || '')}\">\r\n\r\n        `;\r\n\r\n      }\r\n\r\n\r\n      else if (\r\n        f.t === 'textarea'\r\n      ) {\r\n\r\n        field.innerHTML = `\r\n\r\n          <label>\r\n            ${escapeHTML(f.l)}\r\n          <\/label>\r\n\r\n          <textarea\r\n            id=\"${id}\"\r\n            placeholder=\"${escapeHTML(f.ph || '')}\"><\/textarea>\r\n\r\n        `;\r\n\r\n      }\r\n\r\n\r\n      else if (\r\n        f.t === 'select'\r\n      ) {\r\n\r\n        const options =\r\n          f.opts.map(\r\n            o =>\r\n              `<option value=\"${escapeHTML(o)}\">${escapeHTML(o)}<\/option>`\r\n          ).join('');\r\n\r\n\r\n        field.innerHTML = `\r\n\r\n          <label>\r\n            ${escapeHTML(f.l)}\r\n          <\/label>\r\n\r\n          <select id=\"${id}\">\r\n\r\n            <option\r\n              value=\"\"\r\n              selected\r\n              disabled>\r\n              Select\u2026\r\n            <\/option>\r\n\r\n            ${options}\r\n\r\n          <\/select>\r\n\r\n        `;\r\n\r\n      }\r\n\r\n\r\n      else if (\r\n        f.t === 'yesno'\r\n      ) {\r\n\r\n        field.innerHTML = `\r\n\r\n          <label>\r\n            ${escapeHTML(f.l)}\r\n          <\/label>\r\n\r\n          <div class=\"chips\">\r\n\r\n            <button\r\n              class=\"chip\"\r\n              type=\"button\"\r\n              onclick=\"pickYN(this,'${id}','Yes')\">\r\n              Yes\r\n            <\/button>\r\n\r\n            <button\r\n              class=\"chip\"\r\n              type=\"button\"\r\n              onclick=\"pickYN(this,'${id}','No')\">\r\n              No\r\n            <\/button>\r\n\r\n          <\/div>\r\n\r\n          <input\r\n            type=\"hidden\"\r\n            id=\"${id}\">\r\n\r\n        `;\r\n\r\n      }\r\n\r\n\r\n      wrap.appendChild(\r\n        field\r\n      );\r\n\r\n    });\r\n\r\n}\r\n\r\n\r\nfunction pickYN(\r\n  el,\r\n  id,\r\n  value\r\n) {\r\n\r\n  el.parentNode\r\n    .querySelectorAll(\r\n      '.chip'\r\n    )\r\n    .forEach(\r\n      c =>\r\n        c.classList.remove(\r\n          'sel'\r\n        )\r\n    );\r\n\r\n\r\n  el.classList.add(\r\n    'sel'\r\n  );\r\n\r\n\r\n  document\r\n    .getElementById(id)\r\n    .value =\r\n      value;\r\n\r\n}\r\n\r\n\r\nconst serviceAttachmentStore =\r\n  new DataTransfer();\r\n\r\n\r\nfunction openServiceCamera() {\r\n\r\n  document\r\n    .getElementById('mobileCamera')\r\n    .click();\r\n\r\n}\r\n\r\n\r\nfunction addMobileCameraPhoto(input) {\r\n\r\n  const file =\r\n    input.files &&\r\n    input.files[0];\r\n\r\n  if (!file) {\r\n    return;\r\n  }\r\n\r\n  const maxSize =\r\n    15 * 1024 * 1024;\r\n\r\n  if (file.size > maxSize) {\r\n\r\n    alert(\r\n      'That photo is larger than 15 MB. Please use a smaller photo.'\r\n    );\r\n\r\n    input.value = '';\r\n\r\n    return;\r\n  }\r\n\r\n\r\n  const duplicate =\r\n    Array.from(\r\n      serviceAttachmentStore.files\r\n    )\r\n    .some(existing =>\r\n\r\n      existing.name === file.name &&\r\n      existing.size === file.size &&\r\n      existing.lastModified === file.lastModified\r\n\r\n    );\r\n\r\n\r\n  if (\r\n    !duplicate &&\r\n    serviceAttachmentStore.files.length < 8\r\n  ) {\r\n\r\n    serviceAttachmentStore.items.add(\r\n      file\r\n    );\r\n\r\n  }\r\n\r\n\r\n  const attachments =\r\n    document.getElementById(\r\n      'attachments'\r\n    );\r\n\r\n\r\n  if (attachments) {\r\n\r\n    attachments.files =\r\n      serviceAttachmentStore.files;\r\n\r\n  }\r\n\r\n\r\n  input.value = '';\r\n\r\n\r\n  alert(\r\n    'Photo added. Select the type of service below to continue.'\r\n  );\r\n\r\n}\r\n\r\n\r\nfunction showSelectedFiles() {\r\n\r\n  const input =\r\n    document.getElementById(\r\n      'attachments'\r\n    );\r\n\r\n\r\n  const list =\r\n    document.getElementById(\r\n      'fileList'\r\n    );\r\n\r\n\r\n  const incoming =\r\n    Array.from(\r\n      input.files || []\r\n    );\r\n\r\n\r\n  incoming.forEach(file => {\r\n\r\n    const duplicate =\r\n      Array.from(\r\n        serviceAttachmentStore.files\r\n      )\r\n      .some(existing =>\r\n        existing.name === file.name &&\r\n        existing.size === file.size &&\r\n        existing.lastModified === file.lastModified\r\n      );\r\n\r\n\r\n    if (\r\n      !duplicate &&\r\n      serviceAttachmentStore.files.length < 8\r\n    ) {\r\n\r\n      serviceAttachmentStore.items.add(\r\n        file\r\n      );\r\n\r\n    }\r\n\r\n  });\r\n\r\n\r\n  input.files =\r\n    serviceAttachmentStore.files;\r\n\r\n\r\n  if (\r\n    serviceAttachmentStore.files.length === 0\r\n  ) {\r\n\r\n    list.style.display =\r\n      'none';\r\n\r\n    list.innerHTML =\r\n      '';\r\n\r\n    return;\r\n\r\n  }\r\n\r\n\r\n  const items =\r\n    Array.from(\r\n      serviceAttachmentStore.files\r\n    )\r\n    .map(\r\n      (file,index) =>\r\n        `<div class=\"fileitem\" style=\"display:flex;justify-content:space-between;gap:10px;align-items:center;\">\r\n          <span>${escapeHTML(file.name)}<\/span>\r\n          <button\r\n            type=\"button\"\r\n            data-remove-service-file=\"${index}\"\r\n            style=\"border:0;background:#e7eaf0;color:#16233d;border-radius:6px;padding:4px 8px;cursor:pointer;\">\r\n            Remove\r\n          <\/button>\r\n        <\/div>`\r\n    )\r\n    .join('');\r\n\r\n\r\n  list.innerHTML = `\r\n\r\n    <strong>\r\n      Selected files\r\n    <\/strong>\r\n\r\n    ${items}\r\n\r\n  `;\r\n\r\n\r\n  list.style.display =\r\n    'block';\r\n\r\n\r\n  list\r\n    .querySelectorAll(\r\n      '[data-remove-service-file]'\r\n    )\r\n    .forEach(button => {\r\n\r\n      button.addEventListener(\r\n        'click',\r\n        () => {\r\n\r\n          const removeIndex =\r\n            Number(\r\n              button.getAttribute(\r\n                'data-remove-service-file'\r\n              )\r\n            );\r\n\r\n\r\n          const remaining =\r\n            Array.from(\r\n              serviceAttachmentStore.files\r\n            )\r\n            .filter(\r\n              (_,index) =>\r\n                index !== removeIndex\r\n            );\r\n\r\n\r\n          while (\r\n            serviceAttachmentStore.items.length\r\n          ) {\r\n\r\n            serviceAttachmentStore.items.remove(\r\n              0\r\n            );\r\n\r\n          }\r\n\r\n\r\n          remaining.forEach(file => {\r\n\r\n            serviceAttachmentStore.items.add(\r\n              file\r\n            );\r\n\r\n          });\r\n\r\n\r\n          input.files =\r\n            serviceAttachmentStore.files;\r\n\r\n\r\n          \/\/ Render the updated list without re-adding files.\r\n          list.innerHTML = '';\r\n\r\n          if (\r\n            serviceAttachmentStore.files.length === 0\r\n          ) {\r\n\r\n            list.style.display =\r\n              'none';\r\n\r\n            return;\r\n\r\n          }\r\n\r\n\r\n          const refreshedItems =\r\n            Array.from(\r\n              serviceAttachmentStore.files\r\n            )\r\n            .map(\r\n              (file,index) =>\r\n                `<div class=\"fileitem\" style=\"display:flex;justify-content:space-between;gap:10px;align-items:center;\">\r\n                  <span>${escapeHTML(file.name)}<\/span>\r\n                  <button\r\n                    type=\"button\"\r\n                    data-remove-service-file=\"${index}\"\r\n                    style=\"border:0;background:#e7eaf0;color:#16233d;border-radius:6px;padding:4px 8px;cursor:pointer;\">\r\n                    Remove\r\n                  <\/button>\r\n                <\/div>`\r\n            )\r\n            .join('');\r\n\r\n\r\n          list.innerHTML = `\r\n\r\n            <strong>\r\n              Selected files\r\n            <\/strong>\r\n\r\n            ${refreshedItems}\r\n\r\n          `;\r\n\r\n\r\n          \/\/ Rebind remove buttons.\r\n          list\r\n            .querySelectorAll(\r\n              '[data-remove-service-file]'\r\n            )\r\n            .forEach(btn => {\r\n\r\n              btn.addEventListener(\r\n                'click',\r\n                () => {\r\n\r\n                  const idx =\r\n                    Number(\r\n                      btn.getAttribute(\r\n                        'data-remove-service-file'\r\n                      )\r\n                    );\r\n\r\n\r\n                  const files =\r\n                    Array.from(\r\n                      serviceAttachmentStore.files\r\n                    )\r\n                    .filter(\r\n                      (_,i) =>\r\n                        i !== idx\r\n                    );\r\n\r\n\r\n                  while (\r\n                    serviceAttachmentStore.items.length\r\n                  ) {\r\n\r\n                    serviceAttachmentStore.items.remove(\r\n                      0\r\n                    );\r\n\r\n                  }\r\n\r\n\r\n                  files.forEach(file => {\r\n\r\n                    serviceAttachmentStore.items.add(\r\n                      file\r\n                    );\r\n\r\n                  });\r\n\r\n\r\n                  input.files =\r\n                    serviceAttachmentStore.files;\r\n\r\n\r\n                  \/\/ Trigger a clean redraw.\r\n                  const dt =\r\n                    new DataTransfer();\r\n\r\n                  Array.from(\r\n                    serviceAttachmentStore.files\r\n                  )\r\n                  .forEach(file =>\r\n                    dt.items.add(file)\r\n                  );\r\n\r\n                  input.files =\r\n                    dt.files;\r\n\r\n                  \/\/ Rebuild once.\r\n                  list.innerHTML =\r\n                    Array.from(\r\n                      serviceAttachmentStore.files\r\n                    )\r\n                    .length\r\n                      ? `<strong>Selected files<\/strong>` +\r\n                        Array.from(\r\n                          serviceAttachmentStore.files\r\n                        )\r\n                        .map(\r\n                          file =>\r\n                            `<div class=\"fileitem\">${escapeHTML(file.name)}<\/div>`\r\n                        )\r\n                        .join('')\r\n                      : '';\r\n\r\n                  if (\r\n                    serviceAttachmentStore.files.length === 0\r\n                  ) {\r\n\r\n                    list.style.display =\r\n                      'none';\r\n\r\n                  }\r\n\r\n                }\r\n              );\r\n\r\n            });\r\n\r\n        }\r\n      );\r\n\r\n    });\r\n\r\n}\r\n\r\n\r\nfunction value(id) {\r\n\r\n  const el =\r\n    document.getElementById(id);\r\n\r\n\r\n  if (!el) {\r\n    return '';\r\n  }\r\n\r\n\r\n  return el.value.trim();\r\n\r\n}\r\n\r\n\r\nfunction showError(\r\n  id,\r\n  message\r\n) {\r\n\r\n  const el =\r\n    document.getElementById(id);\r\n\r\n\r\n  el.textContent =\r\n    message;\r\n\r\n\r\n  el.style.display =\r\n    'block';\r\n\r\n}\r\n\r\n\r\nfunction clearError(id) {\r\n\r\n  document.getElementById(id)\r\n    .style.display =\r\n      'none';\r\n\r\n}\r\n\r\n\r\nfunction validEmail(email) {\r\n\r\n  if (!email) {\r\n    return true;\r\n  }\r\n\r\n\r\n  return \/^[^\\s@]+@[^\\s@]+\\.[^\\s@]+$\/\r\n    .test(email);\r\n\r\n}\r\n\r\n\r\nfunction nextFromContact() {\r\n\r\n  clearError(\r\n    'err2'\r\n  );\r\n\r\n\r\n  if (\r\n    !value('f_name') ||\r\n    !value('f_phone')\r\n  ) {\r\n\r\n    showError(\r\n      'err2',\r\n      'Please enter your name and phone number.'\r\n    );\r\n\r\n    return;\r\n\r\n  }\r\n\r\n\r\n  if (\r\n    !validEmail(\r\n      value('f_email')\r\n    )\r\n  ) {\r\n\r\n    showError(\r\n      'err2',\r\n      'Please enter a valid email address.'\r\n    );\r\n\r\n    return;\r\n\r\n  }\r\n\r\n\r\n  showScreen(\r\n    's3'\r\n  );\r\n\r\n}\r\n\r\n\r\nfunction nextFromDetails() {\r\n\r\n  clearError(\r\n    'err3'\r\n  );\r\n\r\n\r\n  if (!state.reqType) {\r\n\r\n    showError(\r\n      'err3',\r\n      'Please select a request type.'\r\n    );\r\n\r\n    return;\r\n\r\n  }\r\n\r\n\r\n  showScreen(\r\n    's4'\r\n  );\r\n\r\n}\r\n\r\n\r\nfunction nextFromSite() {\r\n\r\n  clearError(\r\n    'err4'\r\n  );\r\n\r\n\r\n  if (\r\n    !value('site_address') ||\r\n    !value('site_city') ||\r\n    !value('site_state') ||\r\n    !value('site_zip')\r\n  ) {\r\n\r\n    showError(\r\n      'err4',\r\n      'Please enter the complete service address.'\r\n    );\r\n\r\n    return;\r\n\r\n  }\r\n\r\n\r\n  showScreen(\r\n    's5'\r\n  );\r\n\r\n}\r\n\r\n\r\nfunction pickUrgency(el) {\r\n\r\n  document\r\n    .querySelectorAll(\r\n      '#urgency .chip'\r\n    )\r\n    .forEach(\r\n      c =>\r\n        c.classList.remove(\r\n          'sel'\r\n        )\r\n    );\r\n\r\n\r\n  el.classList.add(\r\n    'sel'\r\n  );\r\n\r\n\r\n  state.urgency =\r\n    el.dataset.val;\r\n\r\n}\r\n\r\n\r\nfunction pickImpact(el) {\r\n\r\n  document\r\n    .querySelectorAll(\r\n      '#impact .chip'\r\n    )\r\n    .forEach(\r\n      c =>\r\n        c.classList.remove(\r\n          'sel'\r\n        )\r\n    );\r\n\r\n\r\n  el.classList.add(\r\n    'sel'\r\n  );\r\n\r\n\r\n  state.impact =\r\n    el.dataset.val;\r\n\r\n}\r\n\r\n\r\nfunction nextFromUrgency() {\r\n\r\n  clearError(\r\n    'err5'\r\n  );\r\n\r\n\r\n  if (!state.urgency) {\r\n\r\n    showError(\r\n      'err5',\r\n      'Please select a priority.'\r\n    );\r\n\r\n    return;\r\n\r\n  }\r\n\r\n\r\n  showScreen(\r\n    's6'\r\n  );\r\n\r\n}\r\n\r\n\r\nfunction pickExisting(\r\n  el,\r\n  value\r\n) {\r\n\r\n  document\r\n    .querySelectorAll(\r\n      '#existingCustomer .chip'\r\n    )\r\n    .forEach(\r\n      c =>\r\n        c.classList.remove(\r\n          'sel'\r\n        )\r\n    );\r\n\r\n\r\n  el.classList.add(\r\n    'sel'\r\n  );\r\n\r\n\r\n  state.existingCustomer =\r\n    value;\r\n\r\n}\r\n\r\n\r\nfunction addRow(\r\n  label,\r\n  val\r\n) {\r\n\r\n  if (!val) {\r\n    return '';\r\n  }\r\n\r\n\r\n  return `\r\n\r\n    <div class=\"review-row\">\r\n\r\n      <span class=\"k\">\r\n        ${escapeHTML(label)}\r\n      <\/span>\r\n\r\n      <span class=\"v\">\r\n        ${escapeHTML(val)}\r\n      <\/span>\r\n\r\n    <\/div>\r\n\r\n  `;\r\n\r\n}\r\n\r\n\r\nfunction collectDynamicDetailsHTML() {\r\n\r\n  let html =\r\n    '';\r\n\r\n\r\n  document\r\n    .querySelectorAll(\r\n      '#dynFields .field'\r\n    )\r\n    .forEach(field => {\r\n\r\n      const label =\r\n        field.dataset.label;\r\n\r\n\r\n      const input =\r\n        field.querySelector(\r\n          'input, select, textarea'\r\n        );\r\n\r\n\r\n      if (\r\n        input &&\r\n        input.value\r\n      ) {\r\n\r\n        html +=\r\n          addRow(\r\n            label,\r\n            input.value\r\n          );\r\n\r\n      }\r\n\r\n    });\r\n\r\n\r\n  return html;\r\n\r\n}\r\n\r\n\r\nfunction collectAttachmentsHTML() {\r\n\r\n  const input =\r\n    document.getElementById(\r\n      'attachments'\r\n    );\r\n\r\n\r\n  if (\r\n    !input.files ||\r\n    input.files.length === 0\r\n  ) {\r\n\r\n    return addRow(\r\n      'Attachments',\r\n      'None'\r\n    );\r\n\r\n  }\r\n\r\n\r\n  return addRow(\r\n    'Attachments',\r\n    input.files.length +\r\n    ' selected'\r\n  );\r\n\r\n}\r\n\r\n\r\nfunction buildReview() {\r\n\r\n  const review =\r\n    document.getElementById(\r\n      'review'\r\n    );\r\n\r\n\r\n  review.innerHTML = `\r\n\r\n    <div class=\"review-section\">\r\n\r\n      <h3>\r\n        Service\r\n      <\/h3>\r\n\r\n      ${addRow(\r\n        'Category',\r\n        state.cat.name\r\n      )}\r\n\r\n      ${addRow(\r\n        'Request type',\r\n        state.reqType\r\n      )}\r\n\r\n      ${addRow(\r\n        'Priority',\r\n        state.urgency\r\n      )}\r\n\r\n      ${addRow(\r\n        'Production impact',\r\n        state.impact\r\n      )}\r\n\r\n    <\/div>\r\n\r\n\r\n    <div class=\"review-section\">\r\n\r\n      <h3>\r\n        Contact\r\n      <\/h3>\r\n\r\n      ${addRow(\r\n        'Name',\r\n        value('f_name')\r\n      )}\r\n\r\n      ${addRow(\r\n        'Phone',\r\n        value('f_phone')\r\n      )}\r\n\r\n      ${addRow(\r\n        'Company',\r\n        value('f_company')\r\n      )}\r\n\r\n      ${addRow(\r\n        'Email',\r\n        value('f_email')\r\n      )}\r\n\r\n    <\/div>\r\n\r\n\r\n    <div class=\"review-section\">\r\n\r\n      <h3>\r\n        Service details\r\n      <\/h3>\r\n\r\n      ${collectDynamicDetailsHTML()}\r\n\r\n    <\/div>\r\n\r\n\r\n    <div class=\"review-section\">\r\n\r\n      <h3>\r\n        Site\r\n      <\/h3>\r\n\r\n      ${addRow(\r\n        'Street address',\r\n        value('site_address')\r\n      )}\r\n\r\n      ${addRow(\r\n        'City',\r\n        value('site_city')\r\n      )}\r\n\r\n      ${addRow(\r\n        'State',\r\n        value('site_state')\r\n      )}\r\n\r\n      ${addRow(\r\n        'ZIP',\r\n        value('site_zip')\r\n      )}\r\n\r\n      ${addRow(\r\n        'On-site contact',\r\n        value('site_contact')\r\n      )}\r\n\r\n      ${addRow(\r\n        'On-site phone',\r\n        value('site_phone')\r\n      )}\r\n\r\n      ${addRow(\r\n        'Accessible hours',\r\n        value('site_hours')\r\n      )}\r\n\r\n      ${addRow(\r\n        'Access instructions',\r\n        value('site_access')\r\n      )}\r\n\r\n      ${addRow(\r\n        'Safety \/ PPE',\r\n        value('site_safety')\r\n      )}\r\n\r\n    <\/div>\r\n\r\n\r\n    <div class=\"review-section\">\r\n\r\n      <h3>\r\n        Scheduling\r\n      <\/h3>\r\n\r\n      ${addRow(\r\n        'Preferred date',\r\n        value('preferred_date')\r\n      )}\r\n\r\n      ${addRow(\r\n        'Scheduling notes',\r\n        value('schedule_notes')\r\n      )}\r\n\r\n    <\/div>\r\n\r\n\r\n    <div class=\"review-section\">\r\n\r\n      <h3>\r\n        Photos \/ Video \/ Documents\r\n      <\/h3>\r\n\r\n      ${collectAttachmentsHTML()}\r\n\r\n    <\/div>\r\n\r\n\r\n    <div class=\"review-section\">\r\n\r\n      <h3>\r\n        Final details\r\n      <\/h3>\r\n\r\n      ${addRow(\r\n        'Existing customer',\r\n        state.existingCustomer\r\n      )}\r\n\r\n      ${addRow(\r\n        'PO number',\r\n        value('po_number')\r\n      )}\r\n\r\n      ${addRow(\r\n        'Additional notes',\r\n        value('final_notes')\r\n      )}\r\n\r\n    <\/div>\r\n\r\n  `;\r\n\r\n\r\n  document.getElementById(\r\n    'consent'\r\n  ).checked =\r\n    false;\r\n\r\n\r\n  showScreen(\r\n    's8'\r\n  );\r\n\r\n}\r\n\r\n\r\nfunction collectServiceDetailsObject() {\r\n\r\n  const details =\r\n    {};\r\n\r\n\r\n  document\r\n    .querySelectorAll(\r\n      '#dynFields .field'\r\n    )\r\n    .forEach(field => {\r\n\r\n      const label =\r\n        field.dataset.label;\r\n\r\n\r\n      const input =\r\n        field.querySelector(\r\n          'input, select, textarea'\r\n        );\r\n\r\n\r\n      if (\r\n        label &&\r\n        input &&\r\n        input.value.trim()\r\n      ) {\r\n\r\n        details[label] =\r\n          input.value.trim();\r\n\r\n      }\r\n\r\n    });\r\n\r\n\r\n  return details;\r\n\r\n}\r\n\r\n\r\nasync function finalSubmit() {\r\n\r\n  clearError(\r\n    'err8'\r\n  );\r\n\r\n\r\n  const consent =\r\n    document.getElementById(\r\n      'consent'\r\n    );\r\n\r\n\r\n  if (!consent.checked) {\r\n\r\n    showError(\r\n      'err8',\r\n      'Please confirm the information before submitting.'\r\n    );\r\n\r\n    return;\r\n\r\n  }\r\n\r\n\r\n  const submitButton =\r\n    document.querySelector(\r\n      '#s8 .cta'\r\n    );\r\n\r\n\r\n  const originalText =\r\n    submitButton.textContent;\r\n\r\n\r\n  submitButton.disabled =\r\n    true;\r\n\r\n\r\n  submitButton.textContent =\r\n    'Sending\u2026';\r\n\r\n\r\n  try {\r\n\r\n\r\n    const data =\r\n      new FormData();\r\n\r\n\r\n    data.append(\r\n      'website',\r\n      ''\r\n    );\r\n\r\n\r\n    data.append(\r\n      'category',\r\n      state.cat\r\n        ? state.cat.name\r\n        : ''\r\n    );\r\n\r\n\r\n    data.append(\r\n      'category_id',\r\n      state.cat\r\n        ? state.cat.id\r\n        : ''\r\n    );\r\n\r\n\r\n    data.append(\r\n      'request_type',\r\n      state.reqType || ''\r\n    );\r\n\r\n\r\n    data.append(\r\n      'urgency',\r\n      state.urgency || ''\r\n    );\r\n\r\n\r\n    data.append(\r\n      'production_impact',\r\n      state.impact || ''\r\n    );\r\n\r\n\r\n    data.append(\r\n      'name',\r\n      value('f_name')\r\n    );\r\n\r\n\r\n    data.append(\r\n      'phone',\r\n      value('f_phone')\r\n    );\r\n\r\n\r\n    data.append(\r\n      'company',\r\n      value('f_company')\r\n    );\r\n\r\n\r\n    data.append(\r\n      'email',\r\n      value('f_email')\r\n    );\r\n\r\n\r\n    data.append(\r\n      'site_address',\r\n      value('site_address')\r\n    );\r\n\r\n\r\n    data.append(\r\n      'site_city',\r\n      value('site_city')\r\n    );\r\n\r\n\r\n    data.append(\r\n      'site_state',\r\n      value('site_state')\r\n    );\r\n\r\n\r\n    data.append(\r\n      'site_zip',\r\n      value('site_zip')\r\n    );\r\n\r\n\r\n    data.append(\r\n      'site_contact',\r\n      value('site_contact')\r\n    );\r\n\r\n\r\n    data.append(\r\n      'site_phone',\r\n      value('site_phone')\r\n    );\r\n\r\n\r\n    data.append(\r\n      'site_hours',\r\n      value('site_hours')\r\n    );\r\n\r\n\r\n    data.append(\r\n      'site_access',\r\n      value('site_access')\r\n    );\r\n\r\n\r\n    data.append(\r\n      'site_safety',\r\n      value('site_safety')\r\n    );\r\n\r\n\r\n    data.append(\r\n      'preferred_date',\r\n      value('preferred_date')\r\n    );\r\n\r\n\r\n    data.append(\r\n      'schedule_notes',\r\n      value('schedule_notes')\r\n    );\r\n\r\n\r\n    data.append(\r\n      'existing_customer',\r\n      state.existingCustomer || ''\r\n    );\r\n\r\n\r\n    data.append(\r\n      'po_number',\r\n      value('po_number')\r\n    );\r\n\r\n\r\n    data.append(\r\n      'final_notes',\r\n      value('final_notes')\r\n    );\r\n\r\n\r\n    data.append(\r\n      'service_details',\r\n      JSON.stringify(\r\n        collectServiceDetailsObject()\r\n      )\r\n    );\r\n\r\n\r\n    const attachmentInput =\r\n      document.getElementById(\r\n        'attachments'\r\n      );\r\n\r\n\r\n    if (\r\n      attachmentInput &&\r\n      attachmentInput.files\r\n    ) {\r\n\r\n      Array.from(\r\n        attachmentInput.files\r\n      ).forEach(file => {\r\n\r\n        data.append(\r\n          'attachments[]',\r\n          file\r\n        );\r\n\r\n      });\r\n\r\n    }\r\n\r\n\r\n    const response =\r\n      await fetch(\r\n\r\n        '\/wp-json\/botis\/v1\/service-request',\r\n\r\n        {\r\n\r\n          method:'POST',\r\n\r\n          body:data,\r\n\r\n          credentials:'same-origin'\r\n\r\n        }\r\n\r\n      );\r\n\r\n\r\n    let result =\r\n      {};\r\n\r\n\r\n    try {\r\n\r\n      result =\r\n        await response.json();\r\n\r\n    }\r\n\r\n    catch(e) {}\r\n\r\n\r\n    if (\r\n      !response.ok ||\r\n      result.success !== true\r\n    ) {\r\n\r\n      throw new Error(\r\n\r\n        result.message ||\r\n\r\n        'We could not send your request. Please try again.'\r\n\r\n      );\r\n\r\n    }\r\n\r\n\r\n    document.getElementById(\r\n      'doneMsg'\r\n    ).textContent =\r\n\r\n      result.message ||\r\n\r\n      'Your service request was received.';\r\n\r\n\r\n    historyStack =\r\n      [];\r\n\r\n\r\n    showScreen(\r\n      's9',\r\n      false\r\n    );\r\n\r\n  }\r\n\r\n\r\n  catch(error) {\r\n\r\n    showError(\r\n\r\n      'err8',\r\n\r\n      error.message ||\r\n\r\n      'We could not send your request. Please try again.'\r\n\r\n    );\r\n\r\n  }\r\n\r\n\r\n  finally {\r\n\r\n    submitButton.disabled =\r\n      false;\r\n\r\n\r\n    submitButton.textContent =\r\n      originalText;\r\n\r\n  }\r\n\r\n}\r\n<\/script>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>Boti&#8217;s Boti&#8217;s Corp. | Boti&#8217;s Industrial Systems LLC PEOPLE. EQUIPMENT. FACILITIES. KEEPING YOUR BUSINESS MOVING. \u2039 Back SERVICE REQUEST What do you need help with? Tap a service to get started. Take a Photo of the Problem Best photos: equipment, model\/serial tag, damage, fault display, panel, door, gate, or charger. Need help now? Call (209) [&hellip;]<\/p>\n","protected":false},"author":2,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_acf_changed":false,"footnotes":""},"class_list":["post-15356","page","type-page","status-publish","hentry"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v28.1 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>Request Service | BOTIS Corp<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/botiscorp.com\/es\/request-service\/\" \/>\n<meta property=\"og:locale\" content=\"es_MX\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Request Service | BOTIS Corp\" \/>\n<meta property=\"og:description\" content=\"Boti&#8217;s Boti&#8217;s Corp. | Boti&#8217;s Industrial Systems LLC PEOPLE. EQUIPMENT. FACILITIES. KEEPING YOUR BUSINESS MOVING. \u2039 Back SERVICE REQUEST What do you need help with? Tap a service to get started. Take a Photo of the Problem Best photos: equipment, model\/serial tag, damage, fault display, panel, door, gate, or charger. Need help now? Call (209) [&hellip;]\" \/>\n<meta property=\"og:url\" content=\"https:\/\/botiscorp.com\/es\/request-service\/\" \/>\n<meta property=\"og:site_name\" content=\"Boti&#039;s Corp\" \/>\n<meta property=\"article:modified_time\" content=\"2026-09-09T03:12:20+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/botiscorp.com\/wp-content\/uploads\/2025\/01\/Botis_Logo-e1736684009823.png\" \/>\n\t<meta property=\"og:image:width\" content=\"200\" \/>\n\t<meta property=\"og:image:height\" content=\"54\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Tiempo de lectura\" \/>\n\t<meta name=\"twitter:data1\" content=\"2 minutos\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/botiscorp.com\\\/request-service\\\/\",\"url\":\"https:\\\/\\\/botiscorp.com\\\/request-service\\\/\",\"name\":\"Request Service | BOTIS Corp\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/botiscorp.com\\\/#website\"},\"datePublished\":\"2026-09-08T06:00:39+00:00\",\"dateModified\":\"2026-09-09T03:12:20+00:00\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/botiscorp.com\\\/request-service\\\/#breadcrumb\"},\"inLanguage\":\"es\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/botiscorp.com\\\/request-service\\\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/botiscorp.com\\\/request-service\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/botiscorp.com\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Request Service\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/botiscorp.com\\\/#website\",\"url\":\"https:\\\/\\\/botiscorp.com\\\/\",\"name\":\"BOTIS Corp\",\"description\":\"Forklifts, Lifts &amp; Trailers for Sale &amp; Rent | BOTIS Corp\",\"publisher\":{\"@id\":\"https:\\\/\\\/botiscorp.com\\\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/botiscorp.com\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"es\"},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/botiscorp.com\\\/#organization\",\"name\":\"BOTIS Corp\",\"url\":\"https:\\\/\\\/botiscorp.com\\\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"es\",\"@id\":\"https:\\\/\\\/botiscorp.com\\\/#\\\/schema\\\/logo\\\/image\\\/\",\"url\":\"https:\\\/\\\/botiscorp.com\\\/wp-content\\\/uploads\\\/2025\\\/10\\\/logoW_botiscorp.png\",\"contentUrl\":\"https:\\\/\\\/botiscorp.com\\\/wp-content\\\/uploads\\\/2025\\\/10\\\/logoW_botiscorp.png\",\"width\":2449,\"height\":758,\"caption\":\"BOTIS Corp\"},\"image\":{\"@id\":\"https:\\\/\\\/botiscorp.com\\\/#\\\/schema\\\/logo\\\/image\\\/\"}}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Request Service | BOTIS Corp","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/botiscorp.com\/es\/request-service\/","og_locale":"es_MX","og_type":"article","og_title":"Request Service | BOTIS Corp","og_description":"Boti&#8217;s Boti&#8217;s Corp. | Boti&#8217;s Industrial Systems LLC PEOPLE. EQUIPMENT. FACILITIES. KEEPING YOUR BUSINESS MOVING. \u2039 Back SERVICE REQUEST What do you need help with? Tap a service to get started. Take a Photo of the Problem Best photos: equipment, model\/serial tag, damage, fault display, panel, door, gate, or charger. Need help now? Call (209) [&hellip;]","og_url":"https:\/\/botiscorp.com\/es\/request-service\/","og_site_name":"Boti&#039;s Corp","article_modified_time":"2026-09-09T03:12:20+00:00","og_image":[{"width":200,"height":54,"url":"https:\/\/botiscorp.com\/wp-content\/uploads\/2025\/01\/Botis_Logo-e1736684009823.png","type":"image\/png"}],"twitter_card":"summary_large_image","twitter_misc":{"Tiempo de lectura":"2 minutos"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/botiscorp.com\/request-service\/","url":"https:\/\/botiscorp.com\/request-service\/","name":"Request Service | BOTIS Corp","isPartOf":{"@id":"https:\/\/botiscorp.com\/#website"},"datePublished":"2026-09-08T06:00:39+00:00","dateModified":"2026-09-09T03:12:20+00:00","breadcrumb":{"@id":"https:\/\/botiscorp.com\/request-service\/#breadcrumb"},"inLanguage":"es","potentialAction":[{"@type":"ReadAction","target":["https:\/\/botiscorp.com\/request-service\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/botiscorp.com\/request-service\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/botiscorp.com\/"},{"@type":"ListItem","position":2,"name":"Request Service"}]},{"@type":"WebSite","@id":"https:\/\/botiscorp.com\/#website","url":"https:\/\/botiscorp.com\/","name":"BOTIS Corp","description":"Forklifts, Lifts &amp; Trailers for Sale &amp; Rent | BOTIS Corp","publisher":{"@id":"https:\/\/botiscorp.com\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/botiscorp.com\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"es"},{"@type":"Organization","@id":"https:\/\/botiscorp.com\/#organization","name":"BOTIS Corp","url":"https:\/\/botiscorp.com\/","logo":{"@type":"ImageObject","inLanguage":"es","@id":"https:\/\/botiscorp.com\/#\/schema\/logo\/image\/","url":"https:\/\/botiscorp.com\/wp-content\/uploads\/2025\/10\/logoW_botiscorp.png","contentUrl":"https:\/\/botiscorp.com\/wp-content\/uploads\/2025\/10\/logoW_botiscorp.png","width":2449,"height":758,"caption":"BOTIS Corp"},"image":{"@id":"https:\/\/botiscorp.com\/#\/schema\/logo\/image\/"}}]}},"_links":{"self":[{"href":"https:\/\/botiscorp.com\/es\/wp-json\/wp\/v2\/pages\/15356","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/botiscorp.com\/es\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/botiscorp.com\/es\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/botiscorp.com\/es\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/botiscorp.com\/es\/wp-json\/wp\/v2\/comments?post=15356"}],"version-history":[{"count":25,"href":"https:\/\/botiscorp.com\/es\/wp-json\/wp\/v2\/pages\/15356\/revisions"}],"predecessor-version":[{"id":15497,"href":"https:\/\/botiscorp.com\/es\/wp-json\/wp\/v2\/pages\/15356\/revisions\/15497"}],"wp:attachment":[{"href":"https:\/\/botiscorp.com\/es\/wp-json\/wp\/v2\/media?parent=15356"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}