<%- include('layout/header') %>

<section class="banner-to">
    <div class="container">
        <div class="row">
            <div class="introvert">
                <h2>Our Courses</h2>
                <ul>
                    <li>
                        <a href="/demo-custom/microbiotech/">Home</a>
                    </li>
                    <li>
                        /
                    </li>
                    <li>
                        <a href="/demo-custom/microbiotech/Courses">Our Courses</a>
                    </li>
                </ul>
            </div>
        </div>
    </div>




</section>

<section class="profile-page py-lg-5">
  <div class="container">
    <div class="row g-4">
      <div class="col-lg-9 col-12">
        <div class="course-video card-drop">
          <div class="head">
            <h4><%- course.title %></h4>
            <video style="width: 100%;" id="player" playsinline controls data-poster="">
              <source src="" type="video/mp4">
              <track kind="captions" label="English" srcLang="en" default>
            </video>
            <h5 class="mt-4"><%- module.title %></h5>
          </div>
        </div>
      </div>
      <div class="col-lg-3 col-12">
        <div class="course-video-list card-drop" id="video-list-container">
          <h5>Module List</h5>
          <ul class="module-list">
            <% course.modules.forEach(video => { %>
              <li>
                <a class="<%- video._id.toString() == module._id.toString() ? 'active' : '' %>" href="/demo-custom/microbiotech/profile/course/<%- course._id %>/module/<%- video._id %>">
                  <span class="circle"></span>
                  <div>
                    <h5><%- video.title %></h5>
                    <h6><%- Math.floor(video.duration / 60) %> min <%- parseInt(video.duration % 60) %> sec</h6>
                  </div>
                </a>
              </li>
            <% }) %>
          </ul>
        </div>
      </div>
    </div>
</section>
<%- include('layout/footer') %>
<script>
  // Global variables
  let currentCourse = null;
  let currentVideo = null;
  let userProgress = null;
  let player = null;

  // DOM elements
  const courseTitleEl = document.getElementById('course-title');
  const courseDescEl = document.getElementById('course-description');
  const videoListEl = document.getElementById('video-list-container');
  const progressPercentageEl = document.getElementById('progress-percentage');
  const progressStatsEl = document.getElementById('progress-stats');
  const progressBarFillEl = document.getElementById('progress-bar-fill');
  const videoPlayerEl = document.getElementById('player');

  // Initialize Plyr player
  function initPlayer() {
    player = new Plyr(videoPlayerEl, {
      controls: [
        'play-large',
        'play',
        'progress',
        'current-time',
        'mute',
        'volume',
        'captions',
        'settings',
        'pip',
        'airplay',
        'fullscreen'
      ]
    });

    // Save progress when video is played
    player.on('timeupdate', () => {
      if (currentVideo) {
        // saveVideoProgress(player.currentTime);
      }
    });

    // Mark as completed when video ends
    player.on('ended', () => {
      //   markVideoAsCompleted();
    });
  }


  // Load a video into the player
  function loadVideo(video) {
    currentVideo = video;



    // Set video source
    // videoPlayerEl.poster = video.thumbnailUrl;
    const source = videoPlayerEl.querySelector('source');
    source.src = `/demo-custom/microbiotech/api/course/<%- course._id %>/module/<%- module._id %>/stream`;

    // Load the video
    player.source = {
      type: 'video',
      sources: [{
        src: source.src,
        type: 'video/mp4'
      }]
    };

    // Set starting position if progress exists
    // const videoProgress = userProgress.videos.find(v => v.videoId === video._id);
    // if (videoProgress) {
    //   player.currentTime = videoProgress.lastPosition || 0;
    // }
  }
  initPlayer()
  loadVideo()
</script>


<%- include('layout/footer') %>