@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::get();
            @endphp
            <div class="row">
              <div class="col-md-12">
                <div class="row align-items-center">
                  <div class="col">
                    @foreach($curriculumAll as $row)
                     <button type="button" class="btn btn-subject btncurriculum curriculum_{{$row['id']}}" style="padding: 3px 10px !important;" onclick="CurriculumSet('{{ $row['id'] }}')" id="{{ $row['id']}}"> {{ $row['name'] }}</button>
                    @endforeach
                  </div>
                </div>
              </div>
              <div class="col-md-12">
                <div class="row align-items-center">
                  <div class="col">
                    @foreach($allSubjects as $sub)
                    @php
                    $completeUrl = url('teacher/video-quiz/'.$sub->slug);
                    if(strlen($curr_slug) > 0) {
                    //$completeUrl = url('teacher/video-quiz/'.$sub->slug.'/'.$curr_slug);
                    }
                    @endphp
                    <button type="button" class="btn btn-subject btnsubject subject_{{$sub->id}}" onclick="subjectSet('{{ $sub->id }}')" style="padding: 3px 10px !important;" id="{{ $sub->id}}"> {{ $sub->name }}</button>
                    <!--<a class="btn btn-subject @if($page->slug == $sub->slug) active @endif" href="{{ url('teacher/video-quiz/'.$sub->slug) }}"> {{ $sub->name }}</a>-->
                    @endforeach
                  </div>
                  <div class="col">
                    <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>
          <input type="hidden" id="curriculum_selected" name="curriculum_selected">
          <input type="hidden" id="subject_selected" name="subject_selected">
          <!--<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 topiclistdiv" id="pills-tab" role="tablist" aria-orientation="vertical"></div>
					</div>
					<div class="col-md-8">
            <div class="tab-content chaptercontentdiv" style="display:none;" 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>-->
      </div>
    </div>
    @include('layout.bottom-ads')
  </div>
</section>
@endsection
@section('styles')
<style type="text/css">
  .header-fixed.subheader-fixed.subheader-enabled .wrapper {
  padding-top: 65px;
  }
  .subject-right-side {
  top: 65px;
  }
  @media(max-width: 990px) and (min-width: 768px) {
  .subject-right-side {
  top: 55px;
  }
  }
  @media(max-width: 767px) {
  .subject-right-side {
  top: 55px;
  }
  .row.syllubus-div {
  padding-top: 90px;
  }
  }
  .paid {
  color: #B2ACAB !important;
  }
  .toast {
  max-width: 650px !important;
  }
  #toast-container > div {
  width:650px !important;
  }
  .toast .toast-message {
  font-size : 1.2rem !important;
  } 
</style>
@endsection
@section('scripts')
<script>
  $(document).ready(function() {
      const queryString = window.location.search;
      const urlParams = new URLSearchParams(queryString);
      const page_type = urlParams.get('s');
      if(page_type == 1) {
       showMessage('Permission Denied!  You cannot access this page.','error');
      }
      if(page_type == 2) {
       showMessage('The video you are attempting to access is not linked to your account, please type in the name of the video title into the search bar to find this video.','error');
      }
      var curriculumId = '{{ $selcurriculum }}';
      CurriculumSet(curriculumId);
      //var subjectId = $(".btnsubject").first().attr('id');
      //subjectSet(subjectId);
  });
  
             
  function showMessage(content, type){ 
  toastr.options = {
      "closeButton": true,
      "debug": true,
      "newestOnTop": true,
      "progressBar": true,
      "positionClass": "toast-bottom-right",
      "preventDuplicates": true,
      "showDuration": "400",
      "hideDuration": "2000",
      "timeOut": "6000",
      "extendedTimeOut": "2000",
      "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 }}';
      $.ajax({
          url: "{{ url('teacher/subjects/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);
              $(".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('teacher/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() {
     getTopics();
      $("#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) {
          getTopics();
          $("#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);
  }
  
  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");
  });

  function getTopics() 
  {
    $(".loader").show();
    var curriculum_id = $("#curriculum_selected").val();
    var subject_id = $("#subject_selected").val();
    var country_id = 1;
    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();
             $(".chapternocontent").show();
             $(".chaptercontentdiv").show();
             $(".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 = $("#curriculum_selected").val();
      var subject_id    = $("#subject_selected").val();
      var token         = "{{ csrf_token() }}";
      var style_class   = '{{$page->style_class}}';
      var search = $('#search').val();
      if (country_id != '' && curriculum_id != '' && subject_id != '') {
          $.ajax({
              url: "{{ url('teacher/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');
          });
      }
  }

  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").hide();
      $(".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").hide();
      $(".chaptercontentlist").html('');
      $(".chaptercontentlistmain").hide();  
      var curriculum_selected =  $("#curriculum_selected").val();  
      var subject_selected    =  $("#subject_selected").val(); 
      if(curriculum_selected != '' || subject_selected != '') {
         getTopics();
      }
  }
</script>
@endsection