<%- include('layout/header') %>
<section class="profile-page py-lg-5">
  <div class="container">
    <div class="profile-wrapper">
      <h3>Courses</h3>
      <div class="row mt-3">
        <% courses.forEach((item,ind)=> { %>
        <div class="col-xxl-3 col-lg-4 col-sm-6">
          <div class="course-card">
            <div class="thumbnail">
              <img src="/demo-custom/microbiotech/<%- item.thumbnailUrl %>" alt="">
            </div>
            <div class="info">
              <h5><%- item.title %></h5>
              <hr>
              <ul class="course-attributes">
                <li>
                  <span class="icon"><i class="fa-solid fa-chalkboard-user"></i></span>
                  <span><%- item.modules.length %> Modules</span>
                </li>
                <li>
                  <span class="icon"><i class="fa-solid fa-clock"></i></span>
                  <span><%- item.totalHours %> Hours</span>
                </li>
                <li>
                  <span class="icon"><i class="fa-solid fa-money-bill-wave"></i></span>
                  <span>$<%- item.price %> + Tax</span>
                </li>
              </ul>
              <% const isPurchased = user.purchasedCourses.find(purchased => purchased.course.toString() == item._id.toString()) %>
              <% if(isPurchased) { %>
              <a class="proceed-btn detail-btn" href="/demo-custom/microbiotech/profile/course/<%- item._id %>/module/<%- item.modules[0]?._id %>">View Course</a>
              <% } else { %>
              <button data-id="<%- item._id %>" class="proceed-btn">Purchase</button>
              <% } %>
            </div>
          </div>
        </div>
        <% }) %>
      </div>
    </div>
  </div>
</section>
<script src="https://js.stripe.com/v3/"></script>
<%- include('layout/footer') %>
<script>
  $(".proceed-btn").click(async function() {
    var courseId = $(this).data("id");
    const stripe = Stripe('<%- stripe_publishable_key %>');
    const response = await fetch('/demo-custom/microbiotech/api/payment/course', {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json',
      },
      body: JSON.stringify({
        courseId,
        user: '<%- user.id %>'
      })
    });

    const {
      id: sessionId
    } = await response.json();
    const {
      error
    } = await stripe.redirectToCheckout({
      sessionId
    });
    if (error) {
      $(".error-message")
      console.error('Error redirecting to checkout:', error);
      $('[type="submit"]').removeAttr('disabled')
    }
  });
</script>