@extends('dashboard.layouts.default')
@section('content')
<section class="vq-section bg-white">
  <div class="container">
    <div class="row">
      <div class="col-sm-12">
        <div class="filter sticky-top">
          <div class="subject-hed-section subject-tab">
            <div class="row">
              <div class="col-md-12" style="display:block">
                <div class="row align-items-center">
                  <div class="col">
                  <div class="curriculum" id="curriculumDiv">
                   @foreach($curriculums as $cur)
                    <button type="button"class="btn btn-curriculum btncurriculum curriculum_{{$cur->id}}" id="{{ $cur->id }}"  onclick="CurriculumSet('{{ $cur->id }}')"> {{ $cur->name }}</button>
                    @endforeach
                  </div>
                  </div>
                </div>
              </div>
              <div class="col-md-12 mt-2">
                <div class="row align-items-center">
                  <div class="col">
                    @foreach($subjects as $sub)
                    <button type="button"class="btn btn-subject btnsubject subject_{{$sub->id}}" id="{{ $sub->id }}" onclick="subjectSet('{{ $sub->id }}')"> {{ $sub->name }}</button>
                    @endforeach
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <input type="hidden" id="curriculum_selected" name="curriculum_selected">
        <input type="hidden" id="subject_selected" name="subject_selected">
				<div class="row g-1 syllubus-div">
					<div class="col-md-4">
						<div class="nav nav-pills sticky-top topiclistdiv" id="pills-tab" role="tablist" aria-orientation="vertical"></div>
					</div>
					<div class="col-md-8">
						<div class="tab-content chaptercontentdiv" id="pills-tabContent">
							<div id="video-quiz-list" class="subject-detail-box-section-topic text-center chapternocontent">
								<h2 class="d-flex align-items-center justify-content-center"><i class='bx bx-error-circle' ></i> Select the topic to show exam question topics</h2>
							</div>
              <div class="tab-pane fade show active chaptercontentlistmain"  style="display:none;" id="" role="tabpanel" aria-labelledby="chapter-tab" tabindex="0">
                     <div class="subject-detail-box-section">
                        <div class="subject-detail-box-section-topic sticky-top"><h2 class="topic_detail">rewrw erewr</h2></div>
                          <div class="listed-section chaptercontentlist">
                          
                          </div>
                          <!--<div class="line-strip"></div>-->
                        </div>
                      </div>
						</div>
					</div>
				</div>
				
        <div class="row g-3 syllubus-div">
          <div class="col-lg-12 no-data-founds" style="display:none;">
            <div class="subject-detail-box-section">
              <div class="listed-section">
                <h4>No videos and quizzes found</h4>
              </div>
            </div>
          </div>
          <div class="col-lg-6" id="col-paper1" style="display:none;">
          </div>
          <div class="col-lg-6" id="col-paper2" style="display:none;">
          </div>
        </div>
      </div>
    </div>
  </div>
</section>
@endsection
@section('pagescripts')
<script type="text/javascript">
  function resizable(el, factor) {
      var int = Number(factor) || 50;
  
      function resize() {
          el.style.width = ((el.value.length + 1) * int) + 'px'
      }
  
      var e = 'keyup,keypress,focus,blur,change'.split(',');
      for (var i in e) el.addEventListener(e[i], resize, false);
      resize();
  }
  
  resizable(document.getElementById('txt'), 10);
  
</script>
<script>
  $(document).ready(function () {
      const queryString = window.location.search;
      const urlParams = new URLSearchParams(queryString);
      const page_type = urlParams.get('e');
      if(page_type == 1) {
       showMessage('Permission Denied!  You cannot access this page.','error');
      }
      var curriculum_id = $(".btncurriculum").first().attr('id');
      $(".btncurriculum").removeClass('active btn-active');
      CurriculumSet(curriculum_id);
  });

  
  function CurriculumSet(curriculum_id) 
  {
      var $curriculumElement = $(".curriculum_" + curriculum_id);
      if ($curriculumElement.hasClass('active') && $curriculumElement.hasClass('btn-active')) {
          $curriculumElement.removeClass('active btn-active');
          $("#curriculum_selected").val('');
      } else {
          $curriculumElement.addClass('active btn-active');
          $("#curriculum_selected").val(curriculum_id);
      }
      $(".btncurriculum").each(function() {
        var $this = $(this);
        if ($this.attr('id') !== curriculum_id) {
            $this.removeClass('active btn-active');
        }
      });  
      $(".topiclistdiv").html('');
      $(".topic_detail").html('');
      $(".chapternocontent").show();
      $(".chaptercontentlist").html('');
      $(".chaptercontentlistmain").hide();  
      $(".btnsubject").removeClass('active');
      $("#subject_selected").val('');
      var subjectId = $(".btnsubject").first().attr('id');
      $(".btnsubject").removeClass('active btn-active');
      subjectSet(subjectId);
 }

 function subjectSet(subject_id) 
  {
      $(".subject_"+subject_id).addClass('active');
      var $subjectElement = $(".subject_" + subject_id);
      if ($subjectElement.hasClass('active') && $subjectElement.hasClass('btn-active')) {
          $subjectElement.removeClass('active btn-active');
          $("#subject_selected").val();
      } else {
          $subjectElement.addClass('active btn-active');
          $("#subject_selected").val(subject_id);
      }
      $(".btnsubject").each(function() {
        var $this = $(this);
        if ($this.attr('id') !== subject_id) {
            $this.removeClass('active btn-active');
        }
      });  
      $(".topiclistdiv").html('');
      $(".topic_detail").html('');
      $(".chapternocontent").show();
      $(".chaptercontentlist").html('');
      $(".chaptercontentlistmain").hide();  
      var curriculum_selected =  $("#curriculum_selected").val();  
      var subject_selected    =  $("#subject_selected").val(); 
      if(curriculum_selected != '' || subject_selected != '') {
         getTopics();
      }
  }

  
  function getTopics(curriculum_id) 
  {
    var country_id = 1;
    var curriculum_id = $("#curriculum_selected").val();
    var subject_id = $("#subject_selected").val();
    var token = "{{ csrf_token() }}";
    var style_class = '';
    var search = $('#search').val();
    $.ajax({
        url: "{{ url('tutor-extended-response/get_extended_topic_list') }}", 
        type: "POST",
        data: {
            'country_id': country_id,
            'curriculum_id': curriculum_id,
            'subject_id': subject_id,
            'style_class': style_class,
            'search':search,
            _token: token
        },
    }).done(function (data) {

        if (data.status == true) {
             $(".topiclistdiv").html(data.html);
             $(".checkcurriculum").removeClass("active");
             $("#curriculum_" + curriculum_id).addClass("active");
             $('#overlay').fadeOut();
             $(".loader").hide();
        }
    })
  }
  
  function showMessage(content, type){ 
  toastr.options = {
      "closeButton": true,
      "debug": true,
      "newestOnTop": true,
      "progressBar": true,
      "positionClass": "toast-bottom-right",
      "preventDuplicates": true,
      "showDuration": "300",
      "hideDuration": "1000",
      "timeOut": "5000",
      "extendedTimeOut": "1000",
      "showEasing": "swing",
      "hideEasing": "linear",
      "showMethod": "fadeIn",
      "hideMethod": "fadeOut"
      };
      if(type=='success') {
          toastr.success(content, "Success") ;
      }else if(type=="error") {
          toastr.error(content, "Error") ;            
      }else if(type=="warning") {
          toastr.warning(content, "Warning") ;
      }else{
          toastr.info(content, "Info") ;
      }
  }

 
  function gototop(id) {
      var scrollPos = $("#topic-" + id).offset().top;
      console.log(scrollPos);
      $(window).scrollTop(scrollPos - 350);
  }
  var topicId = '';var topicIndex = ''; var chapterCount =  '';
  $(document).ready(function() {
    $(document).on('click', '.topic-button', function() 
    {
       $('.topic-button').css('pointer-events', 'none');
       $('.topic-button').css('cursor', 'not-allowed');
       topicId = $(this).attr('topic-id');
       topicIndex = $(this).attr('topic-index');
       topicCode = $(this).attr('topic-code');
       topicName = $(this).attr('topic-name');
       chapterCount = $(this).attr('chapter-count');
       $(".topic_detail").html('');
       $(".topic_detail").html(topicCode+' : '+topicName);
       $(".chapternocontent").css('display','none');
       $(".chaptercontentlist").html('');
       $(".chaptercontentlistmain").show();
       loadUnits(0, topicId, topicIndex, chapterCount);
    });
  });

  function loadUnits(load, topicId, topicIndex, chapterCount)
  {
      var country_id = 1;
      var curriculum_id = $("#curriculum_selected").val();
      var subject_id = $("#subject_selected").val();
      var token = "{{ csrf_token() }}";
  
      var search = $('#search').val();
      if (country_id != '' && curriculum_id != '' && subject_id != '') {
          $.ajax({
              url: "{{ url('tutor-extended-response/getExtendedTopicVideos') }}",
              type: "POST",
              data: {
                  'country_id': country_id,
                  'curriculum_id': curriculum_id,
                  'subject_id': subject_id,
                  'topic_id': topicId,
                  'topic_index':topicIndex,
                  'search': search,
                  'load':load,
                  _token: token
              },
              dataType: "html"              
          }).done(function (data) 
          {

              $("#video-quiz-list").hide(); 
              $('.chaptercontentlist').append(data);
              if(load <=chapterCount){
                load++;  
                loadUnits(load, topicId, topicIndex, chapterCount);
              }
              else {
                $('.topic-button').css('pointer-events', 'auto');
                $('.topic-button').css('cursor', 'pointer');
              }
            $('#overlay').fadeOut();
            $(".loader").hide();
          }).fail(function() {
            $('.topic-button').css('pointer-events', 'auto');
            $('.topic-button').css('cursor', 'pointer');
          });
      }
  }
</script>
@endsection