@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">
            @php
            $allSubjects = App\Models\Subject::select('slug','name')->get();
            @endphp
            <div class="row">
              <div class="col-md-12">
                <div class="row align-items-center">
                  <div class="col">
                    @foreach($allSubjects as $sub)
                    <a class="btn btn-subject @if($page->slug == $sub->slug) active @endif" href="video-quiz/{{$sub->slug}}"> {{ $sub->name }}</a>
                    @endforeach
                  </div>
                  <div class="col-md-7">
                    <div class="input-group">
                      <input class="form-control" type="search" id="search" placeholder="Search" aria-label="Search" aria-describedby="search">
                      <button class="btn btn-search button-search" type="button"><i class='bx bx-search-alt' ></i></button>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
				
				<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" style="margin-left:25%"><i class='bx bx-error-circle' ></i> Select the topic to show videos and quizzes</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 = '{{ $selcurriculum }}';
      getTopics(curriculum_id);
  });
  
  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 getTopics(curriculum_id) 
  {
    var country_id = 1;
    var curriculum_id = curriculum_id;
    var subject_id = '{{ $subject_id }}';
    var token = "{{ csrf_token() }}";
    var style_class = '{{$page->style_class}}';
    var search = $('#search').val();
    $.ajax({
        url: "{{ url('get_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 setTopics(curriculum_id) {
  
      var country_id = 1;
      var curriculum_id = curriculum_id;
      var subject_id = '{{ $subject_id }}';
      var token = "{{ csrf_token() }}";
      var style_class = '{{$page->style_class}}';
      $.ajax({
          url: "{{ url('topic/get') }}", type: "POST",
          data: {
              'country_id': country_id,
              'curriculum_id': curriculum_id,
              'subject_id': subject_id,
              'style_class': style_class,
              _token: token
          },
      }).done(function (data) {
  
          if (data.status == true) {
              $('#topicDiv').html(data.html);
          }
      })
  }*/
    
  /***var paper1_load = 0;
  var paper2_load = 0;
  var paper1_topic_count = '{{$paper1_topics}}';
  var paper2_topic_count = '{{$paper2_topics}}';
  
  function getSyllubus(paper_id,load) {
      $('.no-data-found').hide();
      if(load==0)
         $(".loader").show();
     if(paper_id==1)
       paper1_load = load;
     else
       paper2_load = load;
  
      var country_id = 1;
      var curriculum_id = '{{ $selcurriculum }}';
      var subject_id = '{{ $subject_id }}';
      var token = "{{ csrf_token() }}";
      var style_class = '{{$page->style_class}}';
  
      var search = $('#search').val();
      if (country_id != '' && curriculum_id != '' && subject_id != '') {
          $.ajax({
              url: "{{ url('video-quiz/getSyllubus') }}",
              type: "POST",
              data: {
                  'country_id': country_id,
                  'curriculum_id': curriculum_id,
                  'subject_id': subject_id,
                  'search': search,
                  'paper_id': paper_id,
                  'load':load,
                  _token: token
              },
              dataType: "html"
              
          }).done(function (data) {
  
             if (load == 0) {
                 if(paper_id==1) 
                  $('#col-paper1').html(data);
                 else
                  $('#col-paper2').html(data);
              } else {
                  if(paper_id==1) 
                    $('#col-paper1').append(data);
                  else
                    $('#col-paper2').append(data);
              }
              if(paper_id==1 && paper1_load< paper1_topic_count){
                  paper1_load++;
                   getSyllubus(1,paper1_load);
              }
              else if(paper_id==2 && paper2_load < paper2_topic_count){
                  paper2_load++;
                   getSyllubus(2,paper2_load);
               }
  
               if(paper1_load ==paper1_topic_count && paper2_load == paper2_topic_count){
  
                  var numItems = $('.unit-title').length;
                  console.log(numItems);
                  if(numItems==0){
                      $('.no-data-found').show();
                  }else{
                      $('.no-data-found').hide();
                  }  
               }
              $('#overlay').fadeOut();
              $(".loader").hide();
          })
      }
  
  }
  */
  $('.button-search').click(function () {
      $('#col-paper1').html('');
      $('#col-paper2').html('');
      var curriculum_id = '{{ $selcurriculum }}';
      $(".loader").show();
      getTopics(curriculum_id);
      $(".topic_detail").html('');
      $(".chapternocontent").show();
      $(".chaptercontentlist").html('');
      $(".chaptercontentlistmain").hide(); 
  });
  
  $('#search').keyup(function (e) {
      str = $('#search').val();
      if (str.length == 0 || e.which == 13) {
          $('#col-paper1').html('');
          $('#col-paper2').html('');
          var curriculum_id = '{{ $selcurriculum }}';
          $(".loader").show();
          getTopics(curriculum_id);
          $(".topic_detail").html('');
          $(".chapternocontent").show();
          $(".chaptercontentlist").html('');
          $(".chaptercontentlistmain").hide();
      }
  });
  
  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 = '{{ $selcurriculum }}';
      var subject_id = '{{ $subject_id }}';
      var token = "{{ csrf_token() }}";
      var style_class = '{{$page->style_class}}';
  
      var search = $('#search').val();
      if (country_id != '' && curriculum_id != '' && subject_id != '') {
          $.ajax({
              url: "{{ url('video-quiz/getTopicVideos') }}",
              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