{% if groups contains 'NZ Mandatory Training' %}
  {% assign nz_status = true%}
{% else %}
  {% assign nz_status = false%}
{% endif %}

<div class="group-selection">
  <div class="group-selection-title">
      What type of vehicle do you have?
  </div>
  <div class="select-wrapper" {% if nz_status %}style="border-radius: 30px;"{% endif %}>
    <select class="group-selection-select" autocomplete="off">
      {% unless current_person.properties.learner_vehicle %}
      <option class="group-selection-select-default" disabled selected>Select Your Vehicle</option>
      {% endunless %}
      <option class="group-selection-select-option" value="Car" 
        {% if current_person.properties.learner_vehicle == 'Car' %} 
          selected 
        {% endif %}
      >
        Car
      </option>
      
      <option class="group-selection-select-option" value="Bike" 
      {% if current_person.properties.learner_vehicle == 'Bike' %} 
        selected  
      {% endif %}
      >
        Bike
      </option>

      <option class="group-selection-select-option" value="Scooter/Motorbike" 
      {% if current_person.properties.learner_vehicle == 'Scooter/Motorbike' %} 
        selected  
      {% endif %}
      >
        Scooter/Motorbike
      </option>
    </select>
    <i class="far fa-regular fa-angle-down"></i>
  </div>
</div>

<style>
  .group-selection {
    margin-top: 15px;
  }
  .group-selection-select {
    background: transparent;
    color: white;
    padding: 10px 30px 10px 15px;
    border: none;
    border-radius: 10px;
    margin-top: 5px;
    -webkit-appearance: none;
    appearance: none;
    font-weight: bold;
    text-align: center;
  }

  .group-selection-select-option {
    background-color: #f2f4f5;
    color: #1b3e4f;
    padding: 10px 5px;
  }
  .select-wrapper {
    position: relative;
    width: min-content;
    background: #ff2c00;
    border-radius: 10px;
    margin-top: 15px;
  }
  .select-wrapper .fa-angle-down {
    position: absolute;
    right: 10px;
    top: 15px;
    pointer-events: none;
    color: white;
    font-size: 22px;
    font-weight: 800;
  }
  @media only screen and (max-width: 768px) {
    .select-wrapper {
      margin: 15px auto;
    }
  }
  
</style>

<script>

  document.getElementsByClassName("group-selection-select")[0].addEventListener('change', changeVehicle);
  function changeVehicle() {
    var xhr = new XMLHttpRequest();
    var url = "https://www.workato.com/webhooks/rest/bd1a1eb7-7e79-4208-a1db-8e9c7440bcc9/add_vehicle";
    xhr.open("POST", url, true);
    xhr.send(
      JSON.stringify({
        user_id: '{{ current_person.id }}',
        vehicle: $('.group-selection-select')[0].value
      })
    );
    $('[course-vehicle]').hide();
    if ($('.group-selection-select')[0].value == 'Car') {
      $('[course-vehicle]').each(function() {
        console.log($(this).attr('course-vehicle')[0])
        if ($(this).attr('course-vehicle')[0] == '1') {
          $(this).show();
        }
      })
    }
    else if ($('.group-selection-select')[0].value == 'Bike') {
      $('[course-vehicle]').each(function() {
        if ($(this).attr('course-vehicle')[1] == '1') {
          $(this).show();
        }
      })
    }
    else if ($('.group-selection-select')[0].value == 'Scooter/Motorbike') {
      $('[course-vehicle]').each(function() {
        if ($(this).attr('course-vehicle')[2] == '1') {
          $(this).show();
        }
      })
    }
  };

</script>