Productrec.html

<!-- Note from Aneesh:  -->
<!-- Right now printing to Console (Ctrl-F console.log) -->
<!-- Can change this to instead print on a screen/store easily -->

<form id="survey-form" action="">
  <div id = "container">
  <h1 id="title">Product Finder</h1>
  <div id="description">Answer the 4 questions below, and we will recommend a Mighty Well Product and blog posts just for you!</div>

  <!-- ------------------Gender---------------------------- -->
  <div class = "tab">
    <h3 class= "number"> - 1 - </h3>
    <h2 class = "question"> What is your gender? </h2><br>
    <div class="inputContainer">
    <p>
        <span class = "radio"><input type="radio" name="gender" value="male" >Male<br></span>
        <span class = "radio"><input type="radio" name="gender" value="female">Female<br></span>
        <span class = "radio"><input type="radio" name="gender" value="other">Other</span>
      </p>
    </div>
  </div>

    <!-- ------------------Medical Condition-------------------------------- -->
  <div class = "tab">
      <h3 class = "number"> - 2 - </h3>
      <h2 class = "question"> Select all that apply to you! </h2> <br>
      <label class = "checkbox-label">
        <p>
        <ul>
         <li><input type="checkbox" name="medcon" value="aplasticAnemia">Aplastic Anemia<br></li>
         <li><input type="checkbox" name="medcon" value="behcets">Behcet's Syndrome<br></li>
         <li><input type="checkbox" name="medcon" value="caps">CAPS<br></li>
          <li><input type="checkbox" name="medcon" value="cysticFibrosis" >Cystic Fibrosis<br></li>
          <li><input type="checkbox" name="medcon" value="diabetes" >Diabetes<br></li>
          <li><input type="checkbox" name="medcon" value="dysautonomia">Dysautonomia<br></li>
          <li><input type="checkbox" name="medcon" value="eds">Ehlers-Danlos Syndrome (EDS)<br></li>
          <li><input type="checkbox" name="medcon" value="fibromyalgia">Fibromyalgia<br></li>
          <li><input type="checkbox" name="medcon" value="gp" >Gastroparesis (GP)<br></li>
          <li><input type="checkbox" name="medcon" value="hrt" >HRT<br></li>
          <li><input type="checkbox" name="medcon" value="lyme" >Lyme Disease<br></li>
          <li><input type="checkbox" name="medcon" value="marfan" >Marfan Syndrome<br></li>
          <li><input type="checkbox" name="medcon" value="mcas" >MCAS<br></li>
          <li><input type="checkbox" name="medcon" value="osteomyelitis">Osteomyelitis<br></li>
          <!--<li><input type="checkbox" name="medcon" value="partialEmptySella">Partial Empty Sella<br></li>-->
          <li><input type="checkbox" name="medcon" value="polyarthralgia">Polyarthralgia<br></li>
          <li><input type="checkbox" name="medcon" value="pcos" >Polycystic Ovary Syndrome (PCOS)<br></li>
          <li><input type="checkbox" name="medcon" value="pots" >Postural Orthostatic Tachycardia Syndrome (POTS)<br></li>
          <!-- <li><input type="checkbox" name="medcon" value="thyroidcancer" >Thyroid Cancer<br></li> -->
          <li><input type="checkbox" name="medcon" value="uc" >Ulcerative Colitis (UC)<br></li>
          <li><input type="checkbox" name="medcon" value="other" >Other<br></li>
          </ul>
        </p>
        </label>
  </div>
  <!-- ------------------Medical Devices-------------------------------- -->
  <div class="tab">
      <h3 class="number"> - 3 - </h3>
      <h2 class="question"> What medical devices do you use?</h2><br>
      <label class = "checkbox-label">
      <span class="checkbox-custom">
        <p>
        <ul>
          <!--<input type="checkbox" name="meddev" value="diabeticPumps">Diabetic Pumps<br>-->
          <li><input type="checkbox" name="meddev" value="EpiPen (Allergies)">EpiPen<br></li>
          <li><input type="checkbox" name="meddev" value="Diabetic Supplies">Diabetic Supplies<br></li>
          <!--input <input type="checkbox" name="meddev" value="hickmanLines">Hickman Lines (CVCs)<br> -->
          <!-- <input type="checkbox" name="meddev" value="inhalers">Inhalers<br> -->
          <li><input type="checkbox" name="meddev" value="Mastectomy Drains">Mastectomy Drains<br></li>
          <li><input type="checkbox" name="meddev" value="midlines">Midlines<br></li>
          <li> <input type="checkbox" name="meddev" value="Peripheral I.V.s">Peripheral IVs<br></li>
          <li><input type="checkbox" name="meddev" value="PICC Lines">PICC Lines<br></li>
          <li><input type="checkbox" name="meddev" value="pills and Other Medications">Pills and Other Medications<br></li>
          <li><input type="checkbox" name="meddev" value="Port">Port<br></li>
          <!-- <input type="checkbox" name="meddev" value="vitamins">Vitamins<br> -->
          <li><input type="checkbox" name="meddev" value="Wheelchairs/Mobility Aids">Wheelchairs/Mobility Aids<br></li>
          <li><input type="checkbox" name="meddev" value="other">Other<br></li>
          </ul>
        </p>
      </span>
      </label>
  </div>


  <!-- -----------------Use Case--------------------------------- -->

  <div class="tab">
      <h3 class="number"> - 4 - </h3>
      <h2 class="question"> What are you looking to use Mighty Well products for? </h2><br>
      <label class = "checkbox-label">
      <span class="checkbox-custom">
        <p>
        <ul>
          <li><input type="checkbox" name="usecase" value="antibioticInfusion">Antibiotic Infusion<br></li>
          <li><input type="checkbox" name="usecase" value="chemotherapy">Chemotherapy<br></li>
          <li><input type="checkbox" name="usecase" value="glucoseMonitoring">Glucose Monitoring<br></li>
          <li><input type="checkbox" name="usecase" value="holdMedicalSupplies">Hold Medical Supplies/Items<br></li>
          <li><input type="checkbox" name="usecase" value="IVInfusion">IV Infusion<br></li>
          <li><input type="checkbox" name="usecase" value="lookingGood">Looking Good/Feeling Proud!<br></li>
          <li><input type="checkbox" name="usecase" value="organizeMedications">Organize Medications<br></li>
          <li><input type="checkbox" name="usecase" value="raisingAwareness">Raising Awareness<br></li>
          <li><input type="checkbox" name="usecase" value="salineTreatment">Saline Treatment<br></li>
          <li><input type="checkbox" name="usecase" value="subcutaneousInjection">Subcutaneous Injection<br></li>
          <li><input type="checkbox" name="usecase" value="TPNInjection">TPN Injection<br></li>
          <li><input type="checkbox" name="usecase" value="transfusion">Transfusion<br></li>
          <li><input type="checkbox" name="usecase" value="tubeFeeding">Tube Feeding<br></li>
          <li><input type="checkbox" name="usecase" value="other">Other<br></li>
        </ul>
        </p>
      </span>
      </label>
  </div>

  <div class="tab" id="productRecContainer">
    <h1>Your Results!</h1>
    <h3>Enjoy these Mighty Well products and specially curated blog posts just for you!</h3>
    <a href="" class = "productLink">
    <h2 id="productName" style="float: left;"> Product Name </h2><br>
    <img src="https://bit.ly/2SEVDwz" id= "productPicture" alt = "Product Picture">
    </a>

    <a href = "" class="blogLink">
    <h2 id="blogName" style="float: right;"></h2><br>
    <img src="" id="blogPicture" alt = "blog Picture" style="float: right;">
    </a>

  </div>

  <div style="overflow:auto;">
      <div style = "float:left;"></div>
          <p id="demo"></p>
          <div style = "text-align: center;">
          <button class ="formBtn" type="button" id="prevBtn" onclick="nextPrev(-1)">Previous</button>
          <button class ="formBtn" type="button" id="nextBtn" onclick="nextPrev(1)">Next</button>
          <button class ="formBtn" type="button" id="startOverBtn" onclick="location.reload()">Start Over</button>
          <button class = "formBtn" type="submit" id="finalsub" onclick="nextPrev(1)" form="survey-form" value="Submit">Get Your Results!</button>
      </div>
  </div>
  <!-- Circles which indicates the steps of the form: -->
  <div style="text-align:center;margin-top:40px;">
      <span class="step"></span>
      <span class="step"></span>
      <span class="step"></span>
      <span class="step"></span>
  </div>
</div>
</form>

  <style>
      ul {
        columns: 300px;
        list-style: none; 
      }

      p{
        margin:0 10px 0 10px;
        display: inline-block;
        text-align:left;
      }

      #regForm {
          background-color: #ffffff;
          margin: 100px auto;
          padding: 40px;
          width: 70%;
          min-width: 300px;
      }

      #container{
        background-color:#edf9fc;
        padding:100px;
      }

      #title{
        margin-left:auto;
        margin-right:auto;
        text-align: center;
        font-size:35px;
      }

      #description {
        text-align: center;
        padding:10px;
        max-width:400px;
        margin-left:auto;
        margin-right:auto;
        font: Lato;
        font-size: 14px;
        color: grey;
    }

      #productRecContainer{
        background-color:#ffffff;
        padding:100px;
      }

      #productPicture{
        padding: 20px;
        max-width: 40%;
        height: auto;
      }

      .radio{
        background-color: white;
        padding: 7px;
      }

      ul.checkbox  {
        margin-left: auto;
        background-color: color;
        margin-right:auto;
        list-style: none;
        }

      li{
        background-color: white;
        padding: 7px;
      }

      ul.checkbox li {
        border: 1px black;
        float: left;
        min-width: 400px;
      }

      .number {
          text-align: center;
      }

      .question{
          text-align: center;
          padding-top: 10px;
      }

      .inputContainer{
       text-align : center;
      }

      .formBtn{
         width: 10em;
         height: 2.2em;
         text-align: center;
         color: white;
         text-align:center;
         background-color: black;
      }

      /* Style the input fields */

      input {
          text-align: center;
          font-size: 17px;
          font-family: Raleway;
          padding-bottom: 20px;
      }

      /* Mark input boxes that gets an error on validation: */
      input.invalid {
          background-color: #ffdddd;
      }

      /* Hide all steps by default: */
      .tab {
          display: none;
      }

      /* Make circles that indicate the steps of the form: */
      .step {
          height: 15px;
          width: 15px;
          margin: 0 2px;
          background-color: #bbbbbb;
          border: none;
          border-radius: 50%;
          display: inline-block;
          opacity: 0.5;
      }

      /* Mark the active step: */
      .step.active {
          opacity: 1;
      }

      /* Mark the steps that are finished and valid: */
      .step.finish {
          background-color: #4CAF50;
      }
  </style>
  <!------------------SCRIPT---------------------------->

  <script>
      const CATALOG ={
        "PICC Perfect": ["https://mighty-well.com/products/picc-line-cover-piccperfect-mighty-well?_pos=5&_sid=db99fc554&_ss=r", "https://blog.mighty-well.com/2017/07/adapting-to-the-picc-life/"],
        "Med Planner":  ["https://mighty-well.com/collections/all/products/mighty-medplanner-medical-organizer","https://blog.mighty-well.com/2019/06/trying-out-the-mighty-medplanner-your-new-medical-organizer/"],
        "Mighty Pack": ["https://mighty-well.com/collections/all/products/medical-iv-infusion-backpack-for-patients","https://blog.mighty-well.com/2018/12/travel-without-worries-with-the-mighty-pack-the-best-backpack-for-friends-in-the-fight/"],
        "Mighty Wrap": ["https://mighty-well.com/collections/all/products/the-mighty-jacket","https://blog.mighty-well.com/2017/06/learning-to-love-your-tube/"],
        "Undefeated Wear":["https://mighty-well.com/collections/all/products/undefeated-t-shirt-heather-gray","https://blog.mighty-well.com/2019/11/mighty-well-fall-photoshoot/"]
      }

      const scriptURL = "https://script.google.com/macros/s/AKfycbxx4_QDeXS7AqXlU9WkYvDTvdY_dYHUMbZ-YdQK4SslU54ihug/exec"
      const form = document.forms[0]
      const proxyurl = "https://cors-anywhere.herokuapp.com/";


      form.addEventListener("submit", e => {
          e.preventDefault()
          fetch(scriptURL, {
              method: "POST",
              body: new FormData(form)
              })
              .then(response => console.log("Success!", response))
              .catch(error => console.error("Error!", error.message))
          })

      var currentTab = 0; // Current tab is set to be the first tab (0)
      var productRec = "";
      var productImg = "";
      showTab(currentTab); // Display the current tab

      function showTab(n) {
          // This function will display the specified tab of the form ...
          var x = document.getElementsByClassName("tab");
          x[n].style.display = "block";
          // ... and fix the Previous/Next buttons:
          if(n == x.length-1){
            document.getElementById("prevBtn").style.display = "none";
            document.getElementById("nextBtn").style.display = "none";
            document.getElementById("finalsub").style.display = "none";
            document.getElementById("startOverBtn").style.display="inline";
          }
          else{
          document.getElementById("startOverBtn").style.display="none";

          if (n == 0) {
              document.getElementById("prevBtn").style.display = "none";
          } else {
              document.getElementById("prevBtn").style.display = "inline";
          }
          if (n == (x.length - 2)) {
              document.getElementById("finalsub").style.display = "inline";
              document.getElementById("nextBtn").style.display = "none";
          } else {
              document.getElementById("nextBtn").style.display = "inline";
              document.getElementById("finalsub").style.display = "none";

          }}
          // ... and run a function that displays the correct step indicator:
          fixStepIndicator(n)
      }

      function nextPrev(n) {
          // This function will figure out which tab to display
          var x = document.getElementsByClassName("tab");
          // Exit the function if any field in the current tab is invalid:
          if (n == 1 && !validateForm()) return false;
          // Hide the current tab:
          x[currentTab].style.display = "none";
          // Increase or decrease the current tab by 1:
          currentTab = currentTab + n;
          // if you have reached the end of the form... :
          if (currentTab >= x.length) {
              //...the form gets submitted:
              document.getElementById("demo").innerHTML = "check";
              //document.getElementById("survey-form").submit();
              return false;
          }

          if(currentTab>=x.length-2){ // Last question page
              //document.getElementById("nextBtn").onclick = function() {calculateProduct();}
              
              //const result = await calculateProduct();
              getProductInfo();
             
          }
          // Otherwise, display the correct tab:
          showTab(currentTab);
      }

      function validateForm() {
          // This function deals with validation of the form fields
          var x, y, i, valid = true;
          x = document.getElementsByClassName("tab");
          y = x[currentTab].getElementsByTagName("input");
          if (valid) {
              document.getElementsByClassName("step")[currentTab].className += " finish";
          }
          return valid; // return the valid status
      }

      function fixStepIndicator(n) {
          // This function removes the "active" class of all steps...
          var i, x = document.getElementsByClassName("step");
          for (i = 0; i < x.length+1; i++) {
              x[i].className = x[i].className.replace(" active", "");
          }
          //... and adds the "active" class to the current step:
          x[n].className += " active";
      }

      function calculateProduct() {
          var deviceChecks = document.getElementsByName("meddev");
          var deviceUsed;
          for (i = 0; i < deviceChecks.length; i++) {
              // If a field is empty...
              if (deviceChecks[i].checked) {
                  deviceUsed = deviceChecks[i].value;
                  console.log("Device used:" + deviceUsed);
                 // document.getElementById("demo").innerHTML = "Device used: " + deviceUsed;
              }
          }

          // https://api.jsonbin.io/b/5eb23bd48284f36af7b645fc
          let req = new XMLHttpRequest();

          req.onreadystatechange = () => {
              if (req.readyState == XMLHttpRequest.DONE) {
                  var jsonData = JSON.parse(req.responseText);

                  console.log("Recommended devices: "+ jsonData[deviceUsed])
                  console.log("All jSON Data: " + req.responseText);
                  productRec = jsonData[deviceUsed];
              }
          };

          req.open("GET", "https://api.jsonbin.io/b/5eb23bd48284f36af7b645fc/1", true);
          req.send();

          return new Promise(resolve => {
              setTimeout(() => {
                  resolve('resolved');
              }, 2000);
          });
      }

        function getImgURL(url){
        var urls = []; 
        $.get(proxyurl+url, function(data) {
        var imgs = $('<div class= "product-single__photos" style="user-select: auto;">').html(data).find('img');
            imgs.each(function(i, img) {
                //alert(img.src);	
            //console.log(img.src);	
            urls.push(img.src); 
            });
            productImg = urls[3];
           return new Promise(resolve => {
              setTimeout(() => {
                  resolve('resolved');
              }, 2000);
          });});}

          
        async function getProductInfo(){
        await calculateProduct();
        //console.log(result);
        let productURLs = CATALOG[productRec];
        await getImgURL(productURLs[0]);
        

        //class="product-single__photo product-single__photo"
        //let productName =productURLs[0]; //  TODO: take url and extract name text referring to product name
        //console.log(productName);
       // let productPicture =productURLs[0]; //  TODO: take url and extract src referring to product photo
       // let blogName = productURLs[1]; //  TODO: take url and extract name text referring to blog name
        //let blogPicture = productURLs[1]; //  TODO: take url and extract src referring to blog photo
        //document.querySelectorAll("productLink").setAttribute("href", recProduct[0]);
        //document.getElementById("productName").innerText = productName;
        //document.getElementById("productPicture").setAttribute("src", productPicture);
      }

  </script>