(function($) {  
  /* ===============================================
   * Creating the Product Tool from the JSON file
   * =============================================*/
  
  function productListTemplate(name,image,url,user_type,user_prefer,body_condition,use_it,special_function,features,wheelchair_type) {
    var html = 
      '<div class="m-pst__r" '+
        'data-name="'+name+'" '+
        'data-user-type="'+user_type+'" '+
        'data-user-prefer="'+user_prefer+'" '+
        'data-trunk-control="'+body_condition+'" '+
        'data-use-it="'+use_it+'"> '+
        '<div class="m-pst__rimage">' +
          '<img src="'+image+'" alt="'+name+'" />'+
        '</div>'+
        '<div class="m-pst__rtitle">'+
          '<h5>'+wheelchair_type+'</h5>'+
          '<h4>'+name+'</h4>'+
        '</div>'+
        '<div class="m-pst__rfunction">'+
          '<h5>SPECIAL FUNCTIONS</h5>'+
          '<ul>';
    
    var sf_tmp = special_function;
    var sf = sf_tmp.split(',');
    
    if (sf) {      
      sf.forEach(function(item) {
        
        var sfImage = '';
        switch(item.toLowerCase()) {
          case 'stand up':
            sfImage = 'https://f.hubspotusercontent20.net/hubfs/5997571/icon-s003.svg';
            break;
          case 'elevate to reach high':
            sfImage = 'https://f.hubspotusercontent20.net/hubfs/5997571/icon-s005.svg';
            break;
          case 'easy transfer to chair or bed':
            sfImage = 'https://f.hubspotusercontent20.net/hubfs/5997571/icon-s001.svg';
            break;
          case 'recline to lay down':
            sfImage = 'https://f.hubspotusercontent20.net/hubfs/5997571/icon-s004.svg';
            break;
          case 'tilt to relieve pressure from long-term sitting':
            sfImage = 'https://f.hubspotusercontent20.net/hubfs/5997571/icon-s002.svg';
            break;
        }

        html += 
              '<li><img src="'+sfImage+'" />'+
                '<span class="m-pst__tooltip"><img src="'+sfImage+'" /> '+item+'</span>'+
              '</li>';
      });
    }
    
    html += 
          '</ul>'+
        '</div>'+
        '<div class="m-pst__rfeatures">'+
          '<h5>FEATURES</h5>'+
          '<ul>';
    
    var feat_tmp = features;
    var feat = feat_tmp.split(',');
    feat.forEach(function(item) {
      
      var featImage = '';
      switch(item.toLowerCase()) {
        case 'foldable':
          featImage = 'https://f.hubspotusercontent20.net/hubfs/5997571/icon-fe002.svg';
          break;
        case 'lightweight/carrier friendly':
          featImage = 'https://f.hubspotusercontent20.net/hubfs/5997571/icon-fe003.svg';
          break;
        case 'ergonomic seating':
          featImage = 'https://f.hubspotusercontent20.net/hubfs/5997571/icon-fe004B.svg';
          break;
        case 'adjustable dimensions':
          featImage = 'https://f.hubspotusercontent20.net/hubfs/5997571/icon-fe001.svg';
          break;
        case 'long driving range':
          featImage = 'https://f.hubspotusercontent20.net/hubfs/5997571/icon-fe005.svg';
          break;
      }
      
      html +=
            '<li><img src="'+featImage+'" />'+
              '<span class="m-pst__tooltip"><img src="'+featImage+'" /> '+item+'</span>'+
            '</li>';
    });
    
    html += 
          '</ul>'+
        '</div>'+
        '<a href="'+url+'" target="_blank" class="button -outlined">EXPLORE MODEL</a>'+
      '</div>';
    
    return html;
  }
  
  function relatedArticlesTemplate(name,image_url,url,wheelchair) {
    var html = 
        '<div class="m-pst__RA" data-wheelchair="'+wheelchair+'">'+
          '<div class="m-pst__RAImage">';
    
    if (image_url) html += '<img src="'+image_url+'" alt="'+name+'">';
    
    html +=            
          '</div>'+
          '<p><strong>'+name+'</strong></p>'+
          '<div class="m-pst__link d-block text-center">'+
            '<a href="'+url+'" class="button -outlined">READ MORE</a>'+
          '</div>'+
        '</div>';
    
    return html;
  }
  
  var json = (function() {
    var json = null;
    $.ajax({
      'async': false,
      'global': false,
      'url': 'https://f.hubspotusercontent20.net/hubfs/5997571/wordpress/selector-tool-v4.json',
      'dataType': "json",
      'success': function(data) {
        json = data;
      }
    });
    return json;
  })();  

  json.forEach(function(item) {
    var prod = productListTemplate(
      item.name,
      item.image,
      item.url,
      item.user_type,
      item.how_does_the_user_prefer_to_get_around,
      item.body_condition,
      item.where_does_the_user_plan_to_use_it,
      item.does_the_user_need_any_special_functions,
      item.what_would_the_user_appreciate_more,
      item.wheelchair_type);

    $('.m-pst__resultsList').append(prod);
  });

  var RAjson = (function() {
    var RAjson = null;
    $.ajax({
      'async': false,
      'global': false,
      'url': 'https://f.hubspotusercontent20.net/hubfs/5997571/wheelchair-related-v3.json',
      'dataType': "json",
      'success': function(data) {
        RAjson = data;
      }
    });
    return RAjson;
  })();
  
  console.log(RAjson);
  
  RAjson.forEach(function(item) {
    var raArray = relatedArticlesTemplate(
      item.name,
      item.image,
      item.url,
      item.wheelchair);

    $('.m-pst__RAList').append(raArray);
  });
  
  /* ===============================================
   * Interactive form
   * =============================================*/
  
  /* ========== Email validation ========== */
  function validateEmail(email) {
    const re = /^(([^<>()[\]\\.,;:\s@"]+(\.[^<>()[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
    return re.test(String(email).toLowerCase());
  }
  
  /* ========== Creating results ========== */
  function PSTResults() {
    var firstname = $('#field-firstname').text();
    var lastname = $('#field-lastname').text();
    var phone = $('#field-phone').text();
    var user_type = $('#user_type').val();
    var user_prefer = $('#user_prefer').val();
    var trunk_control = $('#trunk_control').val();
    var use_it = $('#use_it').val();
    
    $('.m-pst__r').hide();
    $('.m-pst__r:hidden').each(function() {
      var ut = $(this).data('user-type');
      var up = $(this).data('user-prefer');
      var tc = $(this).data('trunk-control');
      var ui = $(this).data('use-it');
      
      if (ut.includes(user_type) == true && up.includes(user_prefer) == true && tc.includes(trunk_control) == true && ui.includes(use_it) == true) {
        console.log('match');
        $(this).addClass('sel');
      }
    });

    $('.m-pst__r:not(.sel)').remove();
    $('.m-pst__results').slideDown();

    $('.m-pst__resultsList').slick({
      infinite: false,
      arrows: true,
      slidesToShow: 4,
      slidesToScroll: 4,
      prevArrow: "<img src='https://f.hubspotusercontent20.net/hubfs/5997571/arrow.svg' class='arrow-left'>",
      nextArrow: "<img src='https://f.hubspotusercontent20.net/hubfs/5997571/arrow.svg' class='arrow-right'>",
      responsive: [
        {
          breakpoint: 768,
          settings: {
            slidesToShow: 1,
            slidesToScroll: 1,
            centerMode: true,
            variableWidth: true
          }
        }
      ]
    });
    
    $('.m-pst__resultsList').slick('setPosition');    
    
    var prodsel = [];
    $('.m-pst__r').each(function() {
      var x = $(this).data('name');
      x = x.replace('eFlexx','eFlex2');
      
      prodsel.push(x);
    });
    
    $('.m-pst__RA').hide();
    $('.m-pst__RA:hidden').each(function() {
      var raH = $(this);
      var wc = raH.data('wheelchair');
      wc = wc.replace('eFlexx','eFlex2');
      
      prodsel.forEach(function(item) {
        
        if (wc.includes(item)) {
          raH.addClass('sel');
        }
      });
    });
        
    $('.m-pst__RA:not(.sel)').remove();
    $('.m-pst__relatedArticles').slideDown();

    var RAL = $('.m-pst__RA').length;
    
    if (RAL > 0) {
      $('.m-pst__RAList').slick({
        infinite: false,
        arrows: true,
        slidesToShow: 4,
        slidesToScroll: 4,
        prevArrow: "<img src='https://f.hubspotusercontent20.net/hubfs/5997571/arrow.svg' class='arrow-left'>",
        nextArrow: "<img src='https://f.hubspotusercontent20.net/hubfs/5997571/arrow.svg' class='arrow-right'>",
        responsive: [
          {
            breakpoint: 768,
            settings: {
              slidesToShow: 1,
              slidesToScroll: 1,
              centerMode: true,
              variableWidth: true
            }
          }
        ]
      });
      
      $('.m-pst__RAList').slick('setPosition');    
    }
    
  }
  //cnt代表執行步驟//
  var cnt = 1;
  var flag = 0;
  //first name輸入後執行的事情//
  $('#field-firstname').on('keypress', function(e) {
    if (e.which == 13) return false;
    
    var firstname = $('#field-firstname').text();
    var lastname = $('#field-lastname').text();
    
    if (firstname && lastname && cnt == 2) { 
      cnt++;
      $('.m-pst__step#step'+cnt).slideDown(); //執行下一個步驟
    }
  });
  //last name輸入後執行的事情，e.which=13使用者按下enter，330 cnt//
  $('#field-lastname').on('keypress', function(e) {
    if (e.which == 13) return false;
    
    var firstname = $('#field-firstname').text();
    var lastname = $('#field-lastname').text();
    
    if (firstname && lastname && cnt == 2) {
      cnt++;
      $('.m-pst__step#step'+cnt).slideDown();
    }
  });
  
  $('#field-phone').on('blur', function() {
    var phone = $('#field-phone').text();
    
    if (phone && cnt == 5) { //原本在step 6 改成5
      cnt++;
      $('.m-pst__step#step'+cnt).slideDown();
    }
  });
  
  $('.contenteditable').on('keypress', function(e) {
    if (e.which == 13) {
      $(this).blur();
      return false;  
    }
  });
  
  $('select.select').on('change', function() {
    var step = $(this).closest('.m-pst__step').attr('id');
    var num = parseInt(step.replace('step',''));
    
    cnt = num + 1;
    $('.m-pst__step#step'+cnt).slideDown();
  });
  
  $('.a-pst__find').on('click', function(e) {
    e.preventDefault();
    
    if (flag == 0) {
      flag++;
      $(this).addClass('disabled');
      
      var firstname = $('#field-firstname').text();
      var lastname = $('#field-lastname').text();
      var phone = $('#field-phone').text();
      var user_type = $('#user_type').val();
      var user_prefer = $('#user_prefer').val();
      var trunk_control = $('#trunk_control').val();
      var use_it = $('#use_it').val();

      /* ============================
       * Form Submission via AJAX
       * ============================ */
      const data = {
        "fields": [
          { "name": "firstname", "value": firstname },
          { "name": "lastname", "value": lastname },
          { "name": "phone", "value": phone },
          { "name": "i_am_looking_for_a_wheelchair_for", "value": user_type },
          { "name": "i_would_like_to_have_a", "value": user_prefer },
          { "name": "my_trunk_control_is", "value": trunk_control },
          { "name": "i_plan_to_use_it", "value": use_it }
        ],
        "skipValidation": true,
        "context": {
          "hutk": Cookies.get('hubspotutk'),
          "pageUri": window.location.href,
          "pageName": document.title        
        }
      };
      
      $.ajax({
        url: "https://api.hsforms.com/submissions/v3/integration/submit/5997571/fd6a95c5-8ad9-429d-b6ab-3a1c6ecc225c",
        type: "POST",
        contentType: "application/json; charset=utf-8",
        data: JSON.stringify(data),
        dataType: "json"
      }).done(function(msg) {
        console.log('Form submitted');
        PSTResults();
      }).fail(function(error) {
        console.log(error);
        console.log("Please fill out all the fields.");
      });
      
    } // End of flag
    
  });
  
  
})(jQuery);