{% extends "base.html" %}
{% block title %}Courses{% endblock %}
{% block link %}
  <link rel="stylesheet" type="text/css" href="assets/css/courses.css">
  <script src="https://polyfill.io/v3/polyfill.min.js?version=3.52.1&features=fetch"></script>
  <script src="https://js.stripe.com/v3/"></script>
{% endblock %}

{% block nav_link %}
  <li ><a class="nav-link" href="{{ url_for('home') }}">Home </a> </li>

  <li class="nav-item active">
  <a class="nav-link" href="{{ url_for('courses') }}">Courses <span class="sr-only">(current)</span></a>
  </li>

  <li > <a class="nav-link" href="{{ url_for('about') }}">About </a></li>
  <li > <a class="nav-link" href="{{ url_for('contact') }}">Contact </a></li>
  {% if current_user.confirmed and current_user.is_authenticated %}
  <!-- <li > <a class="nav-link" href="{{ url_for('logout') }}">Logout</a></li> -->
  {% else %}
  <li > <a class="nav-link" href="{{ url_for('login') }}">Login </a></li>
  {% endif %}
{% endblock %}


{% block content %}
		<header id="head" class="secondary">
	            <div class="course_container">
	                    <h2>Our Courses</h2>
				  <p>Do you want to give your kids a head start in learning Artificial Intelligence? Taking a course with Lexivalley Inc. is an investment in your child's future. Whether you are preparing your kids for the changing workforce, or simply want them to explore something new and expand their thinking, our specialized youth-focused STEM education packages will help you and your kids to achieve those goals.</p>
	  					<p>&nbsp;</p>
			</div>
    </header>


	<section class="fluid_container">
		<!-- <div class="heading" style="text-align: center";>
			
			<h2>AI Foundation</h3>
		</div> -->
		<div class="row flat" id="price-col">
			<!-- <div class="col-lg-3 col-md-3 col-xs-5">
				<ul class="plan plan1">
					<li class="plan-name">Level I
					</li>
					<li>
						<em>Mechanisms & Machines</em>
					</li>
					<li>
						Electrical Engineering
					</li>
					<li>
						Python Programming
					</li>
					<li class="plan-price">
						<strong>$499+HST</strong>
					</li>

				</ul>
        {% if current_user.confirmed and current_user.is_authenticated %}
          <button type="button" class="plan-checkout" id="plan1">Fast Checkout</button>
        {% else %}
          <a href="{{ url_for('login', next='courses') }}">
          <button type="button" class="plan-checkout" href="{{ url_for('login') }}">Fast Checkout</button>
          </a>
        {% endif %}
			</div>

			<div class="col-lg-3 col-md-4 col-xs-5">
				<ul class="plan plan2">
					<li class="plan-name">Level II
					</li>
					<li>
						Computer Vision
					</li>
					<li>
						Machine Learning
					</li>
					<li>
						Data Science
					</li>
					<li class="plan-price">
						<strong>$549+HST</strong> 
					</li>

				</ul>
        {% if current_user.confirmed and current_user.is_authenticated %}
          <button type="button" class="plan-checkout" id="plan2">Fast Checkout</button>
        {% else %}
          <a href="{{ url_for('login', next='courses') }}">
          <button type="button" class="plan-checkout" href="{{ url_for('login') }}">Fast Checkout</button>
          </a>
        {% endif %}
			</div>
      

			<div class="col-lg-3 col-md-3 col-xs-5">
				<ul class="plan plan3">
					<li class="plan-name">Level III
					</li>
					<li>
						Object Detection
					</li>
					<li>
						Autonomous Driving
					</li>
					<li>
						Application in Real Life Scenarios
					</li>
					<li class="plan-price">
						<strong>$649+HST</strong>
					</li>

				</ul>
        {% if current_user.confirmed and current_user.is_authenticated %}
          <button type="button" class="plan-checkout" id="plan3">Fast Checkout</button>
        {% else %}
          <a href="{{ url_for('login', next='courses') }}">
          <button type="button" class="plan-checkout" href="{{ url_for('login') }}">Fast Checkout</button>
          </a>
        {% endif %}
			</div> -->

			
		</div>
	</section>
  <div id="test">

  </div>

{% endblock %}


{% block script %}
<script type="text/javascript">
  var stripe = Stripe("pk_test_51HL8e1FHzJPVqvcjCGOI4q6pCuFeIam0M4m4P5pqzSXrCIA9kKsrlUF5uwPVitov0KCAJvrNxi1GGk5iXDrgmpEq002CBsvnvE");
  const courses = JSON.parse({{courses|tojson}}).courses;
  for(var i = 0; i < courses.length; i ++){
    test = document.getElementById("price-col");
    text = "<div class='col-lg-3 col-md-3 col-xs-5'><ul class='plan'><li class='plan-name'>"+ courses[i].title +"</li>";
    for(var j = 0; j < courses[i].description.length; j ++){
      text = text + "<li>" + courses[i].description[j] + "</li>"
    }
    text += "<li class='plan-price'><strong>" + courses[i].price + "</strong></li></ul>{% if current_user.confirmed and current_user.is_authenticated %}<button type=\"button\" class=\"plan-checkout"
    if (courses[i].price_id && courses[i].price != "FREE") {
      text = text +  "\" id=\"" +courses[i].price_id + "\""
    } else {
      text = text + " free\" id=\"" + courses[i].id + "\""
    }
    text +=  ">Fast Checkout</button>{% else %}<a href=\"{{ url_for('login', next='courses') }}\"><button type=\"button\" class=\"plan-checkout\" href=\"{{ url_for('login') }}\">Fast Checkout</button></a>{% endif %}</div>";
    test.innerHTML += text;
  }

  const checkoutButtons = document.getElementsByClassName('plan-checkout');
  for(let i = 0; i < checkoutButtons.length; i ++){
    let price_id = checkoutButtons[i].id;
    console.log(price_id);
    if (price_id && !checkoutButtons[i].classList.contains('free')) {
      let checkoutButton = document.getElementById(price_id);
      console.log(checkoutButton)
      let url = "/create-checkout-session?price_id=" + price_id;
      console.log(url)
      checkoutButton.addEventListener("click", function () {
        fetch(url, {
          method: "POST",
        })
          .then(function (response) {
            return response.json();
          })
          .then(function (session) {
            return stripe.redirectToCheckout({ sessionId: session.id });
          })
          .then(function (result) {
            // If redirectToCheckout fails due to a browser or network
            // error, you should display the localized error message to your
            // customer using error.message.
            if (result.error) {
              alert(result.error.message);
            }
          })
          .catch(function (error) {
            console.error("Error:", error);
          });
      });      
    }

  }
  const freeButtons = document.getElementsByClassName('free');
  for(let i = 0; i < freeButtons.length; i ++){
    freeButtons[i].addEventListener("click", function () {
      $.ajax({
        url : "{{ url_for('success') }}?course=" + freeButtons[i].id,
        type: "POST",
        success: function(response){
          console.log(response);
          $("body").html(response);
          // window.location.href = response;
        } 
      });
      // window.location.href = "{{ url_for('success') }}";
    });    
  }







  // Create an instance of the Stripe object with your publishable API key
  // var stripe = Stripe('pk_test_51HL8e1FHzJPVqvcjog3q7arSBiCNx27we8B3bI8XFEDSyrbiPlTaL5Dy912ymgpRN6rztAzhmfrOHBG4uWKBA5E700C7tdvvmy');

  // var checkoutButton1 = document.getElementById("plan1");
  // var checkoutButton2 = document.getElementById("plan2");
  // var checkoutButton3 = document.getElementById("plan3");

  // checkoutButton1.addEventListener("click", function () {
  //   fetch("/create-checkout-session?plan=1", {
  //     method: "POST",
  //   })
  //     .then(function (response) {
  //       return response.json();
  //     })
  //     .then(function (session) {
  //       return stripe.redirectToCheckout({ sessionId: session.id });
  //     })
  //     .then(function (result) {
  //       // If redirectToCheckout fails due to a browser or network
  //       // error, you should display the localized error message to your
  //       // customer using error.message.
  //       if (result.error) {
  //         alert(result.error.message);
  //       }
  //     })
  //     .catch(function (error) {
  //       console.error("Error:", error);
  //     });
  // });
  // checkoutButton2.addEventListener("click", function () {
  //   fetch("/create-checkout-session?plan=2", {
  //     method: "POST",
  //   })
  //     .then(function (response) {
  //       return response.json();
  //     })
  //     .then(function (session) {
  //       return stripe.redirectToCheckout({ sessionId: session.id });
  //     })
  //     .then(function (result) {
  //       // If redirectToCheckout fails due to a browser or network
  //       // error, you should display the localized error message to your
  //       // customer using error.message.
  //       if (result.error) {
  //         alert(result.error.message);
  //       }
  //     })
  //     .catch(function (error) {
  //       console.error("Error:", error);
  //     });
  // });
  // checkoutButton3.addEventListener("click", function () {
  //   fetch("/create-checkout-session?plan=3", {
  //     method: "POST",
  //   })
  //     .then(function (response) {
  //       return response.json();
  //     })
  //     .then(function (session) {
  //       return stripe.redirectToCheckout({ sessionId: session.id });
  //     })
  //     .then(function (result) {
  //       // If redirectToCheckout fails due to a browser or network
  //       // error, you should display the localized error message to your
  //       // customer using error.message.
  //       if (result.error) {
  //         alert(result.error.message);
  //       }
  //     })
  //     .catch(function (error) {
  //       console.error("Error:", error);
  //     });
  // });
</script>
{% endblock %}