<style>
  .bootstrap-tagsinput{
    width: calc(100% - 38px);
    border-top-right-radius: 0px !important;
    border-bottom-right-radius: 0px !important;
  }
 .input-group-append .btn{
      border-color: #ccc;
      width: 38px;
    }
  .nav-md .container.body .col-md-3.left_col {
    width: 300px;
    max-width: 300px;
  }

  .nav-md .container.body .right_col {
    margin-left: 300px;
    width: calc(100% - 300px);
  }

  .nav_menu {
    box-shadow: 20px 4px 14px rgb(32 27 83 / 11%);
  }

  .nav-md .container.body .col-md-3.left_col,
  .nav-sm .container.body .col-md-3.left_col {
    background: #fff;
  }

  .container.body .col-md-3.left_col .profile {
    display: none;
  }

  .menu_section {
    display: none;
  }

  .courses-sidebar {
    display: block;
    margin-top: 70px;
  }

  .nav-sm .container.body .right_col {
    margin-left: 0;
  }

  .nav-sm .main_container .top_nav {
    margin-left: 0;
  }

  .nav-sm .container.body .col-md-3.left_col {
    display: none;
  }

  table.summary-table {
    width: 100%;
    border: 1px solid #7c8fa3;
  }
  table.summary-table th,
  table.summary-table td {
    border: 1px solid #7c8fa3;
    padding: 5px 10px;
    text-align: center;
  }

  @media (max-width: 991px) {
    .nav-md .container.body .right_col {
      margin-left: 0px;
      width: calc(100% - 0px);
    }

    .nav-sm .container.body .col-md-3.left_col.menu_fixed {
      width: 300px;
      max-width: 300px;
    }

    .nav-sm .container.body .col-md-3.left_col {
      display: block;
    }

    .nav-sm .main_container .top_nav {
      margin-left: 70px;
    }

    .nav-sm .container.body .right_col {
      margin-left: 0;
    }
  }
</style>
<link href="https://cdn.jsdelivr.net/bootstrap.tagsinput/0.8.0/bootstrap-tagsinput.css" rel="stylesheet"/>
<!-- single lesson view content -->
<div class="right_col mt-sm-3" role="main">
  <% if(taskType != "assessment") {%>
  <div class="back-page">
    <!-- breadcrumb starts -->
    <ol class="breadcrumb">
      <li class="breadcrumb-item">
        <a href="/learning-content">Courses List</a>
      </li>
      <li class="breadcrumb-item active">
        <%=learningContent.title%> 
      </li>
      <li class="breadcrumb-item">
        <a href="/learning-content/<%=learningContent.slug%>/lessons"
          >Lessons </a>
      </li>
      <li class="breadcrumb-item active"><%=lesson.title%></li>
    </ol>
    <!-- breadcrumb end -->
  </div>
  <% } %>
  
  <% if(assessmentDetails.type == 'practices') { %>
    <div class="row">
      <div class="col-md-12">
        <% if(assessmentDetails.type == 'practices' && assessmentDetails.applyDuration === true) { %>
        <h2 class="reminder-timer text-center">
          <span>Remaining Time : <span class="remainning-time"> <%=assessmentDetails.practiceDuration%></span> min </span>
        </h2>
        <% } %>
      </div>
      <!-- <div class="col-md-6">
        <div class="col-md-6">
          <h2 class="quit-in-middle" style="text-align: right">
            <button class="btn btn-danger quit_and_save theme-btn">
              Save & Quit
            </button>
          </h2>
        </div>
        <div class="col-md-6">
          <h2 class="Quit text-left" style="text-align: right; height: 40px;">
            <button class="btn btn-success end_homework ">
              Submit Assessment
            </button>
          </h2>
        </div>
      </div> -->
    </div>
  <% } %>
  <div class="outer-element" id="fullscreen-element">
    <div class="multiple-tab card-block">
      <div class="unassign-nav">
        <span class="unassign-prev">Prev</span>
        <span class="page-count"></span>
        <span class="unassign-next">Next</span>
      </div>
      <h2 class="no-data-found text-center d-none">No Data Found.</h2>
      <div class="unassign-content"></div>
      <button id="toggle-fullscreen">Fullscreen</button>
    </div>
  </div>
</div>

<!-- Main content -->

<%- include('./partials/model_slide'); %> 
<%-include('./partials/model_practice'); %> 
<%-include('./partials/model_challenge'); %>

<!-- sortable -->
<script src="https://unpkg.com/sortablejs-make/Sortable.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/jquery-sortablejs@latest/jquery-sortable.js"></script>

<!-- draggable -->
<script src="//cdn.jsdelivr.net/interact.js/1.2.8/interact.min.js"></script>

<!-- tinyMCE -->
<script src="/vendors/tinymce/tinymce.min.js"></script>

<!-- drag & drop -->
<script src="https://questioneditor.learnosity.com/?v3"></script>

<!-- dracula -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/dragula/3.7.2/dragula.js"></script>

<!-- tag input -->
<script src="https://cdn.jsdelivr.net/bootstrap.tagsinput/0.8.0/bootstrap-tagsinput.min.js"></script>

<script type="text/javascript">
  const userRole = "<%=loggedUserInfo.role%>";
  const contentDirectory = "<%=learningContent.content_directory%>";
  const learningContentId = "<%=learningContent._id%>";
  const learningContentSlug = "<%=learningContent.slug%>";
  const lessonId = "<%=lesson._id%>";
  const lessonSlug = "<%=lesson.slug%>";
  const taskId = "<%=taskId%>";
  const taskType = "<%=taskType%>";
  const assessmentType ="<%=assessmentDetails.type%>";
  
  const parts = window.location.href.split('/');
  var lastSegment = parts.pop();
  let activeContentType = '';
  let activeContentId = '';
  let sliderTarget = '';
  let totalTabsOfSliderTarget = 0;
  let currentTab = 1;
  $(document).ready(function() {

    var drake = dragula({
          // options here
    });

    $('.slider-menu').click(function () {
      $('.content-collapse').removeClass('show');
      $($(this).data('data-target')).toggleClass('show');
      $('.active-slick-list li').removeClass('active');
      $('.active-slick-list li a').removeClass('active');
      $('.slide-action').removeClass('active-slick-list');
      activeContentType = $(this).data('type');
      sliderTarget = $(this).data('target');
      $(sliderTarget).find('.slide-action').addClass('active-slick-list');
      $('.active-slick-list li:first-child').addClass('active');
      initiatePagination(sliderTarget);
      activeContentId = $('.active-slick-list li:first-child').data('uniqueid');
      if(activeContentType == 'challenges'){
        resetChallenge();
        setTimeout(function () {
          startChallenge();
        }, 1000);
      }
      renderSliderContent(lessonId, activeContentType, activeContentId);
    });

    // Trigger the click on the first element immediately
    $('.slider-menu:first').trigger('click');
  });

  function initiatePagination(sliderTarget) {
    totalTabsOfSliderTarget  = $(sliderTarget + " .sort-slides1").length;
    currentTab = 1;
    $(".unassign-content .tab-content").first().addClass("active-tab");
    setPageCount();  
  }

  function setPageCount() {
      $(".page-count").text(currentTab + "/" + totalTabsOfSliderTarget);
  }

  function animateTabs() {
    $('.active-slick-list li').removeClass('active');
    $('.active-slick-list li a').removeClass('active');
    // $('.slide-action li').removeClass('active');
    // $('.slide-anchor, .practice-anchor, .challenge-anchor').removeClass('active');
    $('.active-slick-list li[data-position="'+currentTab+'"]').addClass('active');
    $('.active-slick-list li[data-position="'+currentTab+'"] a').addClass('active');
    activeContentId = $('.active-slick-list li.active').data('uniqueid');
    renderSliderContent(lessonId, activeContentType, activeContentId);
    setPageCount();
  }

  $(".unassign-next").on("click", function () {
    if (currentTab < totalTabsOfSliderTarget) {
      currentTab++;
      animateTabs();
    }
  });

  $(".unassign-prev").on("click", function () {
    if (currentTab > 1) {
      currentTab--;
      animateTabs();
    }
  });

  // full screen.
  const fullscreenElement = document.getElementById('fullscreen-element');
    const toggleFullscreenButton = document.getElementById('toggle-fullscreen');
    function toggleFullScreen() {
        if (!document.fullscreenElement) {
            fullscreenElement.requestFullscreen().catch(err => {
                console.error('Error attempting to enable fullscreen:', err);
            });
        } else {
            document.exitFullscreen();
        }
    }

    function updateButtonLabel() {
        toggleFullscreenButton.innerHTML = document.fullscreenElement ? "Exit" : "Fullscreen";
    }
    
    toggleFullscreenButton.addEventListener('click', toggleFullScreen);
    document.addEventListener('fullscreenchange', updateButtonLabel);
    document.addEventListener('keydown', event => {
        if (event.key === 'Escape') {
            toggleFullscreenButton.innerHTML = "Fullscreen";
        }
  });

  function previewDropify() {
    $(".unassign-content").find('.submit-attachment').closest('.dropify-wrapper').addClass('has-preview');
  }
</script>

<%- include('./partials/page_script'); %> 
<%-include('./partials/slide_script'); %>
<%-include('./partials/practice_script'); %>
<%-include('./partials/challenge_script'); %>
<%-include('./partials/assessment_script'); %>
