@extends('dashboard.layouts.default')
@section('content')
@if ($errors->any())
<div class="alert alert-danger">
  <ul>
    @foreach ($errors->all() as $error)
    <li>{{ $error }}</li>
    @endforeach
  </ul>
</div>
@endif
<section class="vq-section bg-white">
  <div class="container">
    <div class="row">
      @include('layout.top-ads')
      <div class="col-lg-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 mb-1">
                  <div class="col">
										@foreach($allSubjects as $sub)
                    <a class="btn btn-subject mb-1 @if($page->slug == $sub->slug) active @endif" href="{{ url('tutor/video-quiz/'.$sub->slug) }}"> {{ $sub->name }}</a>
                    @endforeach
                  </div>
                  <div class="col">
                    <div class="input-group mb-1">
                      <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 class="col-md-12">
                <div class="curriculum" id="curriculumDiv">
									@foreach($curriculum as $row)
									@php
									$curr_slug = rawurlencode($row->name);
									@endphp
                  <a class="btn btn-curriculum checkcurriculum @if($selcurriculum == $row->id) active @endif"
                    href="{{ url('tutor/video-quiz/'.$page->slug.'/'.$curr_slug) }}"
                    data-id="{{$row->id}}" id="curriculum_{{$row->id}}">{{$row->name}}</a>
                  @endforeach
                </div>
							</div>
						</div>
          </div>
          <!--<div class="topic-list {{ $page->slug }}-topic-list overflow-auto">
            <ul id="topicDiv">
            </ul>
          </div>-->
        </div>
        <div class="row g-1 syllubus-div">
					<div class="col-md-4">
						<div class="nav nav-pills sticky-top topiclistdivs" 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>
        <!--<div class="row g-3 syllubus-div syllubus-divpad">
        </div>-->
      </div>
    </div>
  </div>
</section>
@endsection
@section('scripts')
<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 }}';
      $(".loader").show();
      getTopics(curriculum_id);
      //setTopics(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 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}}';
      $(".loader").show();
      $.ajax({
          url: "{{ url('tutor/video-quiz/get_topic') }}"
          , 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);
              $(".checkcurriculum").removeClass("active");
              $("#curriculum_" + curriculum_id).addClass("active");
              getSyllubus(curriculum_id);
  
          }
      })
  }
  
  function getSyllubus(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();
      if (country_id != '' && curriculum_id != '' && subject_id != '') {
          $.ajax({
              url: "{{ url('tutor/video-quiz/getSyllubus') }}"
              , type: "POST"
              , data: {
                  'country_id': country_id
                  , 'curriculum_id': curriculum_id
                  , 'subject_id': subject_id
                  , 'search': search
                  , _token: token
              }
              , dataType: "html"
          }).done(function (data) {
              $(".syllubus-div").html(data);
              // top_id = $(".topic-head button:first").attr('id');
              // $("#topic_id").val(top_id);
              // $('.btn-top').removeClass('btn-active');
              // $('.btn-top-'+top_id).addClass('btn-active');
              $('#overlay').fadeOut();
              $(".loader").hide();
          })
      }
  }
  */
  $('.button-search').click(function () {
      var curriculum_id = '{{ $selcurriculum }}';
      getTopics(curriculum_id);
      $("#video-quiz-list").show(); 
      $(".topic_detail").html('');
      $(".chapternocontent").show();
      $(".chaptercontentlist").html('');
      $(".chaptercontentlistmain").hide(); 
  });
  
  $('#search').keyup(function (e) {
      str = $('#search').val();
      if (str.length == 0 || e.which == 13) {
          $(".syllubus-div").html('');
          var curriculum_id = '{{ $selcurriculum }}';
          $(".loader").show();
          getTopics(curriculum_id);
          $("#video-quiz-list").show(); 
          $(".topic_detail").html('');
          $(".chapternocontent").show();
          $(".chaptercontentlist").html('');
          $(".chaptercontentlistmain").hide(); 
      }
  });
  
  function gotoTopic(id) {
      var scrollPos = $("#topic-" + id).offset().top;
      $(window).scrollTop(scrollPos - 350);
  }
  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) {
             $(".topiclistdivs").html(data.html);
             $(".checkcurriculum").removeClass("active");
             $("#curriculum_" + curriculum_id).addClass("active");
             $('#overlay').fadeOut();
             $(".loader").hide();
        }
    })
  }

  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('tutor/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>
<script>
  var s = $(".topic-finder-search-section-wrapper");
  var pos = s.position();
  if (pos) {
      $(window).scroll(function () {
          var windowpos = $(window).scrollTop();
          if (windowpos >= pos.top) {
              $('body.sticky-top-filters').addClass("stick");
          } else {
              $('body.sticky-top-filters').removeClass("stick");
          }
      });
  }
  $(document).ready(function () {
      $('.filter-wrap .title').click(function () {
          $(this).parent().toggleClass('active');
      });
  
      $(".topic-list li").on("click", function () {
          $(this).addClass("active");
          $(this).siblings().removeClass("active");
          var href = $("a", this).attr('href');
          $(href).addClass('active');
          $(href).siblings().removeClass('active');
      });
  
  
      $('.mob-btns .btn-search').click(function () {
          $(this).toggleClass('active');
          $('.topic-finder-search-section-wrapper').toggleClass('active');
      });
  
      $('.mob-btns .btn-filter').click(function () {
          $(this).toggleClass('active');
          $('.sidebar-left').toggleClass('active');
      });
  
  });
  
  $(".cart_inner_row").click(function () {
      $(this).toggleClass("tog");
  });
</script>
@endsection