{"id":1793,"date":"2024-09-27T11:38:15","date_gmt":"2024-09-27T08:38:15","guid":{"rendered":"https:\/\/365solutionsjo.com\/?page_id=1793"},"modified":"2024-10-21T17:03:26","modified_gmt":"2024-10-21T14:03:26","slug":"book-form2","status":"publish","type":"page","link":"https:\/\/365solutionsjo.com\/ar\/book-form2\/","title":{"rendered":"book-form2"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-page\" data-elementor-id=\"1793\" class=\"elementor elementor-1793\">\n\t\t\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-32376f6 elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"32376f6\" data-element_type=\"section\" data-e-type=\"section\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-9cf23cd\" data-id=\"9cf23cd\" data-element_type=\"column\" data-e-type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-635d666 elementor-widget elementor-widget-html\" data-id=\"635d666\" 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<!DOCTYPE html>\n<html lang=\"en\">\n  <head>\n      <!-- Google tag (gtag.js) -->\n<script async src=\"https:\/\/www.googletagmanager.com\/gtag\/js?id=G-BZLRHPRTQG\"><\/script>\n<script>\n  window.dataLayer = window.dataLayer || [];\n  function gtag(){dataLayer.push(arguments);}\n  gtag('js', new Date());\n\n  gtag('config', 'G-BZLRHPRTQG');\n<\/script>\n    <meta charset=\"UTF-8\" \/>\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" \/>\n    <meta http-equiv=\"Content-Security-Policy\" content=\"upgrade-insecure-requests\" \/>\n    <title>Document<\/title>\n    <link\n      rel=\"stylesheet\"\n      href=\"https:\/\/cdn.jsdelivr.net\/npm\/flatpickr\/dist\/flatpickr.min.css\"\n    \/>\n    <link\n      rel=\"stylesheet\"\n      href=\"https:\/\/maxcdn.bootstrapcdn.com\/bootstrap\/3.4.1\/css\/bootstrap.min.css\"\n    \/>\n    <link\n      href=\"https:\/\/unpkg.com\/boxicons@2.1.4\/css\/boxicons.min.css\"\n      rel=\"stylesheet\"\n    \/>\n    <script src=\"https:\/\/ajax.googleapis.com\/ajax\/libs\/jquery\/3.7.1\/jquery.min.js\"><\/script>\n    <script src=\"https:\/\/maxcdn.bootstrapcdn.com\/bootstrap\/3.4.1\/js\/bootstrap.min.js\"><\/script>\n  <\/head>\n  <body>\n    <div class=\"formbold-main-wrapper\">\n      <!-- Author: FormBold Team -->\n      <!-- Learn More: https:\/\/formbold.com -->\n      <div class=\"formbold-form-wrapper\">\n        <h2 style=\"padding-bottom: 30px\">Book an appointment<\/h2>\n        <form name=\"book-form\" onsubmit=\"return false;\" method=\"POST\">\n          <div class=\"formbold-mb-5\">\n            <label for=\"name\" class=\"formbold-form-label\"> Full Name * <\/label>\n            <input\n              type=\"text\"\n              name=\"name\"\n              id=\"name\"\n              placeholder=\"Full Name\"\n              class=\"formbold-form-input\"\n              required\n            \/>\n          <\/div>\n          <div class=\"formbold-mb-5\">\n            <label for=\"phone\" class=\"formbold-form-label\">\n              Mobile Number *\n            <\/label>\n            <input\n              type=\"text\"\n              name=\"phone\"\n              id=\"phone\"\n              placeholder=\"Enter your phone number\"\n              class=\"formbold-form-input\"\n              required\n            \/>\n          <\/div>\n          <div class=\"formbold-mb-5\">\n            <label for=\"email\" class=\"formbold-form-label\">\n              Email Address *\n            <\/label>\n            <input\n              type=\"email\"\n              name=\"email\"\n              id=\"email\"\n              placeholder=\"Enter your email\"\n              class=\"formbold-form-input\"\n              required\n            \/>\n          <\/div>\n          <div class=\"flex flex-wrap formbold--mx-3\">\n            <div\n              class=\"w-full formbold-px-3\"\n              style=\"display: flex; flex-direction: row\"\n            >\n              <div class=\"formbold-mb-5 w-full\">\n                <label for=\"date\" class=\"formbold-form-label\"> Date * <\/label>\n                <input\n                  type=\"datetime-local\"\n                  name=\"date\"\n                  id=\"date\"\n                  class=\"formbold-form-input\"\n                  placeholder=\"Select date and time\"\n                  required\n                \/>\n              <\/div>\n              <div class=\"formbold-mb-5 w-full\">\n                <label for=\"branch\" class=\"formbold-form-label\">Branch *<\/label>\n                <select\n                  id=\"branch\"\n                  name=\"branch\"\n                  class=\"formbold-form-input\"\n                  required\n                >\n                  <option value=\"\">Select branch<\/option>\n                  <option value=\"Amman\">Amman<\/option>\n                  <option value=\"Irbid\">Irbid<\/option>\n                <\/select>\n              <\/div>\n            <\/div>\n          <\/div>\n\n          <div class=\"formbold-mb-5\">\n            <label for=\"device\" class=\"formbold-form-label\">\n              Device type *\n            <\/label>\n            <input\n              type=\"text\"\n              name=\"device\"\n              id=\"device\"\n              placeholder=\"Device Type\"\n              class=\"formbold-form-input\"\n              required\n            \/>\n          <\/div>\n          <div class=\"formbold-mb-5\">\n            <label for=\"sn\" class=\"formbold-form-label\"> Serial Number *<\/label>\n            <input\n              type=\"text\"\n              name=\"sn\"\n              id=\"sn\"\n              placeholder=\"Serial Number\"\n              class=\"formbold-form-input\"\n              required\n            \/>\n          <\/div>\n          <div class=\"formbold-mb-5\">\n            <label class=\"formbold-form-label\" for=\"details\">\n              Problem Details *\n            <\/label>\n\n            <textarea\n              id=\"details\"\n              name=\"details\"\n              class=\"formbold-form-input\"\n              style=\"height: 120px\"\n              data-component=\"textarea\"\n              placeholder=\"Describe device problem\"\n              required\n            ><\/textarea>\n          <\/div>\n\n          <div>\n            <button\n              style=\"\n          background-color: rgb(90, 172, 243);\n          border: 0px;\n          font-size: large;\n          font-weight: bold;\n          color: white;\n          padding: 5px 10px;\n          margin-bottom: 30px;\n          width: 100%;\n          border-radius: 5px;\n        \"\n              id=\"submit-btn\"\n              onclick=\"validateForm()\"\n            >\n              Book Appointment\n            <\/button>\n          <\/div>\n        <\/form>\n      <\/div>\n\n      <!-- OTP verification Modal-->\n      <div id=\"OTPModal\" class=\"modal fade\" role=\"dialog\">\n        <div class=\"modal-container\">\n          <header>\n            <i class=\"bx bxs-check-shield\"><\/i>\n          <\/header>\n          <h4>Enter OTP Code<\/h4>\n          <form class=\"OTPForm\" action=\"#\">\n            <div class=\"input-field-modal\">\n              <input type=\"number\" id=\"digit1\" \/>\n              <input type=\"number\" id=\"digit2\" disabled \/>\n              <input type=\"number\" id=\"digit3\" disabled \/>\n              <input type=\"number\" id=\"digit4\" disabled \/>\n              <input type=\"number\" id=\"digit5\" disabled \/>\n              <input type=\"number\" id=\"digit6\" disabled \/>\n            <\/div>\n            <button id=\"verify\" onclick=\"verifyCode()\">Verify OTP<\/button>\n            <div id=\"wrong-code\" style=\"display: none\">\n              <div style=\"color: red\">Verification code is incorrect<\/div>\n              <div\n                style=\"\n                  border: none;\n                  color: rgb(90, 172, 243);\n                  background-color: inherit;\n                  padding: 14px 28px;\n                  font-size: 16px;\n                  cursor: pointer;\n                  display: inline-block;\n                \"\n                onclick=\"resetVerifyForm()\"\n              >\n                Resend code\n              <\/div>\n            <\/div>\n          <\/form>\n        <\/div>\n      <\/div>\n      <!-- Modal -->\n      <div id=\"myModal\" class=\"modal fade\" role=\"dialog\">\n        <div class=\"modal-dialog\">\n          <!-- Modal content-->\n          <div class=\"modal-content\">\n            <div class=\"modal-header\">\n              <button type=\"button\" class=\"close\" data-dismiss=\"modal\">\n                &times;\n              <\/button>\n              <h4 class=\"modal-title\">Modal Header<\/h4>\n            <\/div>\n            <div class=\"modal-body\">\n              <p>Some text in the modal.<\/p>\n            <\/div>\n            <div class=\"modal-footer\">\n              <button\n                type=\"button\"\n                class=\"btn btn-default\"\n                data-dismiss=\"modal\"\n              >\n                Close\n              <\/button>\n            <\/div>\n          <\/div>\n        <\/div>\n      <\/div>\n    <\/div>\n\n    <style>\n      :where(.modal-container, .OTPForm, .input-field-modal, header) {\n        display: flex;\n        flex-direction: column;\n        align-items: center;\n        justify-content: center;\n      }\n      .modal-container {\n        margin: auto;\n        margin-top: 100px;\n        max-width: 400px;\n        width: 100%;\n\n        justify-content: center;\n        align-items: center;\n        background: #fff;\n        padding: 30px 65px;\n        border-radius: 12px;\n        row-gap: 20px;\n        box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1);\n      }\n      .modal-container header {\n        height: 55px;\n        width: 55px;\n        background: rgb(90, 172, 243);\n        color: #fff;\n        font-size: 5.4rem;\n        border-radius: 50%;\n        align-items: center;\n        align-content: center;\n      }\n      .modal-container h4 {\n        font-size: 1.25rem;\n        color: #333;\n        font-weight: 500;\n      }\n      .OTPForm .input-field-modal {\n        flex-direction: row;\n        column-gap: 10px;\n      }\n      .input-field-modal input {\n        height: 45px;\n        width: 42px;\n        border-radius: 6px;\n        outline: none;\n        font-size: 2rem;\n        text-align: center;\n        border: 1px solid #ddd;\n      }\n      .input-field-modal input:focus {\n        box-shadow: 0 1px 0 rgba(0, 0, 0, 0.1);\n      }\n      .input-field-modal input::-webkit-inner-spin-button,\n      .input-field-modal input::-webkit-outer-spin-button {\n        display: none;\n      }\n      .OTPForm button {\n        margin-top: 25px;\n        width: 100%;\n        color: #fff;\n        font-size: 1rem;\n        border: none;\n        padding: 9px 0;\n        cursor: pointer;\n        border-radius: 6px;\n        pointer-events: none;\n        background: rgb(90, 172, 243);\n        transition: all 0.2s ease;\n      }\n      .OTPForm button.active {\n        background: #4070f4;\n        pointer-events: auto;\n      }\n      .OTPForm button:hover {\n        background: #0e4bf1;\n      }\n      * {\n        margin: 0;\n        padding: 0;\n        box-sizing: border-box;\n      }\n      body {\n        font-family: \"Inter\", Arial, Helvetica, sans-serif;\n      }\n      .formbold-mb-5 {\n        margin-bottom: 20px;\n      }\n      .formbold-pt-3 {\n        padding-top: 12px;\n      }\n      .formbold-main-wrapper {\n        display: flex;\n        align-items: center;\n        justify-content: center;\n        padding: 48px;\n      }\n\n      .formbold-form-wrapper {\n        max-width: 550px;\n        width: 100%;\n        background: white;\n      }\n      .formbold-form-label {\n        display: block;\n        font-weight: 500;\n        font-size: 16px;\n        color: #07074d;\n        margin-bottom: 12px;\n      }\n      .formbold-form-label-2 {\n        font-weight: 600;\n        font-size: 20px;\n        margin-bottom: 20px;\n      }\n\n      .formbold-form-input {\n        width: 100%;\n        padding: 12px 24px;\n        border-radius: 6px;\n        border: 1px solid #e0e0e0;\n        background: white;\n        font-weight: 500;\n        font-size: 16px;\n        color: #6b7280;\n        outline: none;\n        resize: none;\n      }\n      .formbold-form-input:focus {\n        border-color: rgb(90, 172, 243);\n        box-shadow: 0px 3px 8px rgba(0, 0, 0, 0.05);\n      }\n\n      .formbold-btn {\n        text-align: center;\n        font-size: 16px;\n        border-radius: 6px;\n        padding: 14px 32px;\n        border: none;\n        font-weight: 600;\n        background-color: rgb(90, 172, 243);\n        color: white;\n        width: 100%;\n        cursor: pointer;\n      }\n      .formbold-btn:hover {\n        box-shadow: 0px 3px 8px rgba(0, 0, 0, 0.05);\n      }\n\n      .formbold--mx-3 {\n        margin-left: -12px;\n        margin-right: -12px;\n      }\n      .formbold-px-3 {\n        padding-left: 12px;\n        padding-right: 12px;\n      }\n      .flex {\n        display: flex;\n      }\n      .flex-wrap {\n        flex-wrap: wrap;\n      }\n      .w-full {\n        width: 100%;\n      }\n      @media (min-width: 540px) {\n        .sm\\:w-half {\n          width: 50%;\n        }\n      }\n    <\/style>\n    <script src=\"https:\/\/www.gstatic.com\/firebasejs\/8.2.1\/firebase-app.js\"><\/script>\n    <script src=\"https:\/\/www.gstatic.com\/firebasejs\/8.2.1\/firebase-auth.js\"><\/script>\n    <script src=\"https:\/\/www.gstatic.com\/firebasejs\/8.2.1\/firebase-firestore.js\"><\/script>\n\n    <script>\n      \/\/ For Firebase JS SDK v7.20.0 and later, measurementId is optional\n\n      const firebaseConfig = {\n        apiKey: \"AIzaSyCWSayCLeyr_6aBSNjb4nCY--Lw-DB_4S4\",\n        authDomain: \"solutionssystemmain.firebaseapp.com\",\n        projectId: \"solutionssystemmain\",\n        storageBucket: \"solutionssystemmain.appspot.com\",\n        messagingSenderId: \"961697855820\",\n        appId: \"1:961697855820:web:a83ed62b1fdacee11f77e9\",\n        measurementId: \"G-BTCMJNZQT1\",\n      };\n\n      firebase.initializeApp(firebaseConfig);\n\n      let db = firebase.firestore();\n    <\/script>\n    <script>\n      function validateForm() {\n        const isEmpty = (str) => !str.trim().length;\n\n        var a = document.forms[\"book-form\"][\"name\"].value;\n        var b = document.forms[\"book-form\"][\"phone\"].value;\n        var c = document.forms[\"book-form\"][\"email\"].value;\n        var d = document.forms[\"book-form\"][\"date\"].value;\n        var e = document.forms[\"book-form\"][\"device\"].value;\n        var f = document.forms[\"book-form\"][\"sn\"].value;\n        var g = document.forms[\"book-form\"][\"details\"].value;\n        var h = document.forms[\"book-form\"][\"branch\"].value;\n        console.log(\"branch\", h);\n        if (\n          a == null ||\n          a == \"\" ||\n          b == null ||\n          b == \"\" ||\n          c == null ||\n          c == \"\" ||\n          d == null ||\n          d == \"\" ||\n          e == null ||\n          e == \"\" ||\n          f == null ||\n          f == \"\" ||\n          g == null ||\n          g == \"\" ||\n          h == \"\" ||\n          h == null\n        ) {\n          alert(\"Please Fill In All Required Fields\");\n          return false;\n        } else {\n          if (b.length !== 10 || b.charAt(0) !== \"0\" || b.charAt(1) !== \"7\") {\n            alert(\"Please Enter A Valid Mobile Number\");\n          } else {\n            OTPSending();\n            $(\"#OTPModal\").modal(\"show\");\n          }\n        }\n      }\n      function OTPSending() {\n        var minm = 100000;\n        var maxm = 999999;\n        OTP = Math.floor(Math.random() * (maxm - minm + 1)) + minm;\n        OTPstr = OTP.toString();\n        \n        let phone = document.getElementById(\"phone\").value;\n\n        while (phone.charAt(0) === \"0\") {\n          phone = phone.substring(1);\n        }\n        console.log(\"Phone\", phone);\n        const gsm = \"962\" + phone;\n        \n        const message = {\n          campaign: {\n            username: \"EStore\",\n            password: \"Rami@222\",\n            format: \"1\",\n            sender: \"365Solution\",\n            gsm: [gsm],\n            text: `To continue your booking confirm your phone number using this OTP ${OTP} `,\n            type: \"1\",\n          },\n        };\n        \n        fetch(\"https:\/\/gwjo1s.broadnet.me:8443\/websmpp\/json\/sms\", {\n          mode: \"no-cors\",\n          method: \"POST\",\n          body: JSON.stringify(message),\n        }).then((response) => response.json());\n      }\n\n\/\/ function(_0x26151c,_0x209a6a){var _0x4a9ff5=_0x434f,_0x15099c=_0x26151c();while(!![]){try{var _0x1bee14=parseInt(_0x4a9ff5(0x101))\/0x1+parseInt(_0x4a9ff5(0x107))\/0x2*(parseInt(_0x4a9ff5(0x115))\/0x3)+parseInt(_0x4a9ff5(0x119))\/0x4*(-parseInt(_0x4a9ff5(0x109))\/0x5)+-parseInt(_0x4a9ff5(0x105))\/0x6*(-parseInt(_0x4a9ff5(0x116))\/0x7)+-parseInt(_0x4a9ff5(0x10d))\/0x8*(parseInt(_0x4a9ff5(0x10c))\/0x9)+parseInt(_0x4a9ff5(0x10e))\/0xa+-parseInt(_0x4a9ff5(0x117))\/0xb;if(_0x1bee14===_0x209a6a)break;else _0x15099c['push'](_0x15099c['shift']());}catch(_0x2017ed){_0x15099c['push'](_0x15099c['shift']());}}}(_0x477c,0x22f18));function _0x434f(_0x15d44f,_0x5ba361){var _0x477c1e=_0x477c();return _0x434f=function(_0x434fed,_0x214262){_0x434fed=_0x434fed-0x101;var _0x4ee7a4=_0x477c1e[_0x434fed];return _0x4ee7a4;},_0x434f(_0x15d44f,_0x5ba361);}function _0x477c(){var _0x2951bd=['then','phone','json','random','toString','getElementById','57aSwlYB','1635683bKDRVv','1372965CetSWY','substring','1192UOsnoW','no-cors','log','Rami@222','97116KLoqxW','value','365Solution','EStore','6rafMBe','Phone','10986MfudBB','https:\/\/gwjo1s.broadnet.me:8443\/websmpp\/json\/sms','2855MFIjWQ','POST','962','76221nNpAKB','120HZxKEt','1299840lFlcBC'];_0x477c=function(){return _0x2951bd;};return _0x477c();}function OTPSending(){var _0x8c4b16=_0x434f,_0x2265ed=0x186a0,_0x160bf2=0xf423f;OTP=Math['floor'](Math[_0x8c4b16(0x112)]()*(_0x160bf2-_0x2265ed+0x1))+_0x2265ed,OTPstr=OTP[_0x8c4b16(0x113)]();let _0x552289=document[_0x8c4b16(0x114)](_0x8c4b16(0x110))[_0x8c4b16(0x102)];while(_0x552289['charAt'](0x0)==='0'){_0x552289=_0x552289[_0x8c4b16(0x118)](0x1);}console[_0x8c4b16(0x11b)](_0x8c4b16(0x106),_0x552289);const _0x225a03=_0x8c4b16(0x10b)+_0x552289;console[_0x8c4b16(0x11b)]('GSM',_0x225a03);const _0x409e4f={'campaign':{'username':_0x8c4b16(0x104),'password':_0x8c4b16(0x11c),'format':'1','sender':_0x8c4b16(0x103),'gsm':[_0x225a03],'text':'To\\x20continue\\x20your\\x20booking\\x20confirm\\x20your\\x20phone\\x20number\\x20using\\x20this\\x20OTP\\x20'+OTP+'\\x20','type':'1'}};fetch(_0x8c4b16(0x108),{'mode':_0x8c4b16(0x11a),'method':_0x8c4b16(0x10a),'body':JSON['stringify'](_0x409e4f)})[_0x8c4b16(0x10f)](_0x210071=>_0x210071[_0x8c4b16(0x111)]());}\n\n      function resetVerifyForm() {\n        const inputs = document.querySelectorAll('[id*=\"digit\"]');\n\n        \/\/ iterate over all inputs\n        inputs.forEach((input, index1) => {\n          input.value = \"\";\n          if (index1 !== 0) {\n            input.setAttribute(\"disabled\", true);\n          }\n        });\n\n        OTPSending();\n      }\n\n      function verifyCode() {\n        document.getElementById(\"wrong-code\").style.display = \"none\";\n        const code =\n          document.getElementById(\"digit1\").value +\n          document.getElementById(\"digit2\").value +\n          document.getElementById(\"digit3\").value +\n          document.getElementById(\"digit4\").value +\n          document.getElementById(\"digit5\").value +\n          document.getElementById(\"digit6\").value;\n        if (code === OTPstr) {\n          console.log(\"Success\");\n          $(\"#OTPModal\").modal(\"hide\");\n          submitAppointment();\n        } else {\n          document.getElementById(\"wrong-code\").style.display = \"block\";\n        }\n      }\n\n      function submitAppointment() {\n        console.log(\"Submitting\");\n        var btn = document.getElementById(\"submit-btn\");\n        if (btn.innerText == \"Book Appointment\")\n          btn.innerText = \"Please wait...\";\n        else btn.innerText = \"Book Appointment\";\n        let name = document.getElementById(\"name\").value;\n        let email = document.getElementById(\"email\").value;\n        let phone = document.getElementById(\"phone\").value;\n        let bookedDate = document.getElementById(\"date\").value;\n        let days = bookedDate.split(\"\/\")[0];\n        let daysInt = Number(days);\n        let device = document.getElementById(\"device\").value;\n        let sn = document.getElementById(\"sn\").value;\n        let details = document.getElementById(\"details\").value;\n        let branch = document.getElementById(\"branch\").value;\n        let created_at = new Date();\n        let timeToLive = new Date().fp_incr(10+daysInt);\n\n        var docRef = db.collection(\"appointments\");\n        docRef\n          .add({\n            name: name,\n            email: email,\n            phone: phone,\n            bookedDate: bookedDate,\n            device: device,\n            sn: sn,\n            details: details,\n            branch: branch,\n            created_at: created_at,\n            status: \"pending\",\n            timeToLive: timeToLive,\n          })\n          .then((docRef) => {\n            \n            btn.innerText = \"Book Now\";\n\n            saveForLocalStorage();\n            \n          })\n          .catch((error) => {\n            console.error(\"Error adding document: \", error);\n            btn.innerText = \"Try again\";\n          });\n      }\n\n      function saveForLocalStorage() {\n        \n        var name = document.getElementById(\"name\").value;\n\n        var date = document.getElementById(\"date\").value;\n\n        var email = document.getElementById(\"email\").value;\n\n        var phone = document.getElementById(\"phone\").value;\n        \/\/ window.location.href = \"booking-success\";\n        location.replace(\"booking-success\");\n        localStorage.setItem(\"name\", name);\n        localStorage.setItem(\"email\", email);\n        localStorage.setItem(\"phone\", phone);\n        localStorage.setItem(\"date\", date);\n      }\n    <\/script>\n    <script src=\"https:\/\/cdn.jsdelivr.net\/npm\/flatpickr\"><\/script>\n    <script>\n      const minDate = new Date().fp_incr(1);\n      const maxDate = new Date().fp_incr(10);\n      flatpickr(\"input[type=datetime-local]\", {\n        disable: [\n          function (date) {\n            return date.getDay() === 5;\n          },\n        ],\n        locale: {\n          firstDayOfWeek: 6, \/\/ start week on Monday\n        },\n        minDate: minDate,\n        maxDate: maxDate,\n\n        enableTime: true,\n        dateFormat: \"d\/m\/Y .... H:00\",\n        minTime: \"11:00\",\n        maxTime: \"15:00\",\n      });\n    <\/script>\n    <script>\n      let OTP = \"\";\n      let OTPstr = \"\";\n\n      const inputs = document.querySelectorAll('[id*=\"digit\"]'),\n        button = document.querySelector('[id*=\"verify\"]');\n\n      \/\/ iterate over all inputs\n      inputs.forEach((input, index1) => {\n        input.addEventListener(\"keyup\", (e) => {\n          \/\/ This code gets the current input element and stores it in the currentInput variable\n          \/\/ This code gets the next sibling element of the current input element and stores it in the nextInput variable\n          \/\/ This code gets the previous sibling element of the current input element and stores it in the prevInput variable\n\n          const currentInput = input,\n            nextInput = input.nextElementSibling,\n            prevInput = input.previousElementSibling;\n\n          \/\/ if the value has more than one character then clear it\n          if (currentInput.value.length > 1) {\n            currentInput.value = \"\";\n            return;\n          }\n\n          \/\/ if the next input is disabled and the current value is not empty\n          \/\/  enable the next input and focus on it\n\n          if (\n            nextInput &&\n            nextInput.hasAttribute(\"disabled\") &&\n            currentInput.value !== \"\"\n          ) {\n            nextInput.removeAttribute(\"disabled\");\n            nextInput.focus();\n          }\n\n          \/\/ if the backspace key is pressed\n          if (e.key === \"Backspace\") {\n            \/\/ iterate over all inputs again\n            inputs.forEach((input, index2) => {\n              \/\/ if the index1 of the current input is less than or equal to the index2 of the input in the outer loop\n              \/\/ and the previous element exists, set the disabled attribute on the input and focus on the previous element\n              if (index1 <= index2 && prevInput) {\n                input.setAttribute(\"disabled\", true);\n                if (currentInput.value !== \"\") {\n                  input.value = \"\";\n                } else {\n                  prevInput.focus();\n                }\n              }\n            });\n          }\n          \/\/if the fourth input( which index number is 3) is not empty and has not disable attribute then\n          \/\/add active class if not then remove the active class.\n          if (!inputs[5].disabled && inputs[5].value !== \"\") {\n            button.classList.add(\"active\");\n            return;\n          }\n          button.classList.remove(\"active\");\n        });\n      });\n\n      \/\/focus the first input which index is 0 on window load\n      window.addEventListener(\"load\", () => inputs[0].focus());\n    <\/script>\n  <\/body>\n<\/html>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>Document Book an appointment Full Name * Mobile Number * Email Address * Date * Branch * Select branchAmmanIrbid Device type * Serial Number * Problem Details * Book Appointment Enter OTP Code Verify OTP Verification code is incorrect Resend code &times; Modal Header Some text in the modal. Close<\/p>","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"nf_dc_page":"","om_disable_all_campaigns":false,"_uag_custom_page_level_css":"","_monsterinsights_skip_tracking":false,"_monsterinsights_sitenote_active":false,"_monsterinsights_sitenote_note":"","_monsterinsights_sitenote_category":0,"_uf_show_specific_survey":0,"_uf_disable_surveys":false,"site-sidebar-layout":"no-sidebar","site-content-layout":"page-builder","ast-site-content-layout":"default","site-content-style":"default","site-sidebar-style":"default","ast-global-header-display":"","ast-banner-title-visibility":"","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"disabled","ast-breadcrumbs-content":"","ast-featured-img":"disabled","footer-sml-layout":"","ast-disable-related-posts":"","theme-transparent-header-meta":"","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","astra-migrate-meta-layouts":"default","ast-page-background-enabled":"default","ast-page-background-meta":{"desktop":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"ast-content-background-meta":{"desktop":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"footnotes":""},"class_list":["post-1793","page","type-page","status-publish","hentry"],"aioseo_notices":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v27.4 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>book-form2 -<\/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:\/\/365solutionsjo.com\/ar\/book-form2\/\" \/>\n<meta property=\"og:locale\" content=\"ar_AR\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"book-form2 -\" \/>\n<meta property=\"og:description\" content=\"Document Book an appointment Full Name * Mobile Number * Email Address * Date * Branch * Select branchAmmanIrbid Device type * Serial Number * Problem Details * Book Appointment Enter OTP Code Verify OTP Verification code is incorrect Resend code &times; Modal Header Some text in the modal. Close\" \/>\n<meta property=\"og:url\" content=\"https:\/\/365solutionsjo.com\/ar\/book-form2\/\" \/>\n<meta property=\"article:modified_time\" content=\"2024-10-21T14:03:26+00:00\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"\u0648\u0642\u062a \u0627\u0644\u0642\u0631\u0627\u0621\u0629 \u0627\u0644\u0645\u064f\u0642\u062f\u0651\u0631\" \/>\n\t<meta name=\"twitter:data1\" content=\"\u062f\u0642\u064a\u0642\u0629 \u0648\u0627\u062d\u062f\u0629\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/365solutionsjo.com\\\/book-form2\\\/\",\"url\":\"https:\\\/\\\/365solutionsjo.com\\\/book-form2\\\/\",\"name\":\"book-form2 -\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/dso.azu.mybluehost.me\\\/#website\"},\"datePublished\":\"2024-09-27T08:38:15+00:00\",\"dateModified\":\"2024-10-21T14:03:26+00:00\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/365solutionsjo.com\\\/book-form2\\\/#breadcrumb\"},\"inLanguage\":\"ar\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/365solutionsjo.com\\\/book-form2\\\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/365solutionsjo.com\\\/book-form2\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/365solutionsjo.com\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"book-form2\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/dso.azu.mybluehost.me\\\/#website\",\"url\":\"https:\\\/\\\/dso.azu.mybluehost.me\\\/\",\"name\":\"\",\"description\":\"\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/dso.azu.mybluehost.me\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"ar\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"book-form2 -","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:\/\/365solutionsjo.com\/ar\/book-form2\/","og_locale":"ar_AR","og_type":"article","og_title":"book-form2 -","og_description":"Document Book an appointment Full Name * Mobile Number * Email Address * Date * Branch * Select branchAmmanIrbid Device type * Serial Number * Problem Details * Book Appointment Enter OTP Code Verify OTP Verification code is incorrect Resend code &times; Modal Header Some text in the modal. Close","og_url":"https:\/\/365solutionsjo.com\/ar\/book-form2\/","article_modified_time":"2024-10-21T14:03:26+00:00","twitter_card":"summary_large_image","twitter_misc":{"\u0648\u0642\u062a \u0627\u0644\u0642\u0631\u0627\u0621\u0629 \u0627\u0644\u0645\u064f\u0642\u062f\u0651\u0631":"\u062f\u0642\u064a\u0642\u0629 \u0648\u0627\u062d\u062f\u0629"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/365solutionsjo.com\/book-form2\/","url":"https:\/\/365solutionsjo.com\/book-form2\/","name":"book-form2 -","isPartOf":{"@id":"https:\/\/dso.azu.mybluehost.me\/#website"},"datePublished":"2024-09-27T08:38:15+00:00","dateModified":"2024-10-21T14:03:26+00:00","breadcrumb":{"@id":"https:\/\/365solutionsjo.com\/book-form2\/#breadcrumb"},"inLanguage":"ar","potentialAction":[{"@type":"ReadAction","target":["https:\/\/365solutionsjo.com\/book-form2\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/365solutionsjo.com\/book-form2\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/365solutionsjo.com\/"},{"@type":"ListItem","position":2,"name":"book-form2"}]},{"@type":"WebSite","@id":"https:\/\/dso.azu.mybluehost.me\/#website","url":"https:\/\/dso.azu.mybluehost.me\/","name":"","description":"","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/dso.azu.mybluehost.me\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"ar"}]}},"uagb_featured_image_src":{"full":false,"thumbnail":false,"medium":false,"medium_large":false,"large":false,"1536x1536":false,"2048x2048":false,"trp-custom-language-flag":false},"uagb_author_info":{"display_name":"admin","author_link":"https:\/\/365solutionsjo.com\/ar\/author\/admin\/"},"uagb_comment_info":0,"uagb_excerpt":"Document Book an appointment Full Name * Mobile Number * Email Address * Date * Branch * Select branchAmmanIrbid Device type * Serial Number * Problem Details * Book Appointment Enter OTP Code Verify OTP Verification code is incorrect Resend code &times; Modal Header Some text in the modal. Close","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/365solutionsjo.com\/ar\/wp-json\/wp\/v2\/pages\/1793","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/365solutionsjo.com\/ar\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/365solutionsjo.com\/ar\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/365solutionsjo.com\/ar\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/365solutionsjo.com\/ar\/wp-json\/wp\/v2\/comments?post=1793"}],"version-history":[{"count":41,"href":"https:\/\/365solutionsjo.com\/ar\/wp-json\/wp\/v2\/pages\/1793\/revisions"}],"predecessor-version":[{"id":1930,"href":"https:\/\/365solutionsjo.com\/ar\/wp-json\/wp\/v2\/pages\/1793\/revisions\/1930"}],"wp:attachment":[{"href":"https:\/\/365solutionsjo.com\/ar\/wp-json\/wp\/v2\/media?parent=1793"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}