<div class="np-top-cta-progress-content">
  <div class="np-top-cta-progress-title np-text-title">
    {% t .header %}
  </div>
  <div class="np-progress-bar-container">
    <div
      style="width: {{ course.progress }}%"
      class="np-button-background-color np-card-progress-bar">
    </div>
  </div>

  {% if course.enrolled? == false and course.properties.course_cost != 0 %}
	<div class="np-top-cta-progress-text np-button-color" style="font-size: 25px;">
	  $ {{ course.properties.course_cost }}
	</div>
</div>
  <a
    class="np-top-button np-button-font-color np-button np-button-big"
	<input id="snappayhppform_response"  name="snappayhppform_response" />
	  <button type="button" value="Submit" onclick="myclick()" class="button" style="color: white; border:none; background:transparent;">
		<strong>Purchase</strong>
			<div id='mylink'></div>
		</button>
	  <input src="https://snappayglobal.com/Interop/HostedPaymentPage" id="snappayhppform_response" type="hidden" name="snappayhppform_response" />
  </a>

{% else %}

  <div class="np-top-cta-progress-text
    {% if course.completed? %} np-color-success {% else %} np-button-color {% endif %}
  ">
    {% t shared.progress, count: course.progress %}
  </div>
</div>

{% if course.learner_can_retake? %}
  <form action="{% route course_retake, id: course.id %}" method="POST">
    {% form_authenticity_token %}
    <button type="submit" class="np-top-button np-button-font-color np-button np-button-big">
      {% t .retake, key: current_school.course_vocabulary %}
    </button>
  </form>
{% else %}
  <a
    class="np-top-button np-button-font-color np-button np-button-big"
  {% if course.enrolled? %}
      href="{% route course_viewer, course_id: course.id, learning_path_id: params.learning_path_id %}"
  {% else %}
      href="{% route course_enrollment, code: course.enrollment_code %}"
  {% endif %}
  >
  {% if course.enrolled? == false and course.progress == 0 %}
      {% t shared.enroll %}
    {% elsif course.started? == false %}
      {% t shared.course.start, key: current_school.course_vocabulary %}
    {% elsif course.completed? %}
      {% t shared.course.view, key: current_school.course_vocabulary %}
    {% else %}
      {% t shared.continue %}
    {% endif %}
  </a>
  {% endif %}
{% endif %}

{% comment %}
<div  id="dvsnappay_hppform">
</div>
	  <div id="dvsnappay_hppform">
            <!-- HTML is dynamically placed here -->
        </div>
		{% endcomment %}
  <script type="text/javascript">
        function myclick() {
			sessionStorage.clear()
            var mylink = document.getElementById('mylink');
            mylink.onclick = function () {
                var t = document.createElement("script");
                t.setAttribute("id", "snappay_hppform");
                t.setAttribute("src", "https://snappayglobal.com/Areas/Interop/Scripts/HPPForm.js");
                t.setAttribute("data-target", "#snappayhppform_response");
                t.setAttribute("data-callback", "submit_external_ecommerce");
                t.setAttribute("data-accountid", "1002491072");
                t.setAttribute("data-merchantid", "350160170881");
                t.setAttribute("data-customerid", "100");
                t.setAttribute("data-paymentmode", "CC");
				t.setAttribute("data-transactionamount", '{{ course.properties.course_cost }}');
				t.setAttribute("data-currencycode", "USD");
				t.setAttribute("data-firstname", "{{ current_person.first_name }}");
				t.setAttribute("data-lastname", "{{ current_person.last_name }}");
				t.setAttribute("data-email", "{{ current_person.email }}");
				t.setAttribute("data-redirectionurl", "https://learn.walmartdataventures.com/app/courses/{{ course.id }}"); //url they are currently on
				  t.setAttribute("data-snappayurl", "https://snappayglobal.com/Interop/HostedPaymentPage");
				  document.getElementsByTagName("head")[0].appendChild(t);
				  return false;
            }
            document.getElementById('mylink').click();
        }

		var response = document.getElementById('snappayhppform_response');
		function submit_external_ecommerce() {
                var result = $("#snappayhppform_response").val();
                sessionStorage.setItem("snappayhpp_response", result);
				sessionStorage.setItem("caller", "js");
				var obj = JSON.parse(result);
				var response = obj['response']
				var inside = JSON.parse(obj['response'])
				var stringside = JSON.stringify(inside)
				sessionStorage.setItem("stringside", stringside)
            }


		var error_code = JSON.parse(sessionStorage.getItem('stringside')).pgreturncode
		var error_desc = JSON.parse(sessionStorage.getItem('stringside')).pgreturndescription
		if(error_code != 000 ) {
		  var alert = document.getElementById("fiveserv-alert")
		  document.getElementById("fiveserv-alert").style.display = 'grid';
		  var error_text = document.createTextNode(error_desc + ". Please try again.");
		  alert.appendChild(error_text)
		  sessionStorage.clear()
		} else {
		  window.location.replace('https://learn.walmartdataventures.com/c/{{ course.enrollment_code }}')
		  sessionStorage.clear()
		}
	// Set course prop as whole number, if 0, don't do anything
	// If user is not enrolled in course, run functions - check error message
	// With redirect they will land back on page, with error message from sessionstorage
	// If no error, auto-redirect/click to enrollment link. window.replace(/c/aklwjdalkjd)
  </script>



