@extends('frontend.layouts.default')
@section('content')
<div class="mob-btns d-none">
  <button class="btn btn-filter"><i class='bx bx-slider-alt' ></i></button>
  <button class="btn btn-search"><i class='bx bx-search-alt'></i></button>
</div>
<section class="vq-section">
  <div class="container">
    <div class="row">
      <div class="col-sm-12">
        <div class="filter sticky-top">
          <div class="subject-hed-section subject-tab {{$page->style_class}}">
            @php
            $allSubjects = App\Models\Subject::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="course/{{$sub->slug}}"> {{ $sub->name }}</a>
                    @endforeach
                  </div>
                  <div class="col-md-7">
                    <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" 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($page->curriculum as $row)
                  <a class="btn btn-curriculum checkcurriculum @if($selcurriculum == $row->id) active @endif"
                    href="javascript:void(0)" onClick="setTopics({{$row->id}})"
                    data-id="{{$row->id}}" id="curriculum_{{$row->id}}">{{$row->name}}</a>
                  @endforeach
                </div>
              </div>
            </div>
          </div>
          <div class="topic-list {{$page->slug}}-topic-list">
            <ul id="topicDiv">
            </ul>
          </div>
        </div>
        <div class="row g-3 syllubus-div">
        </div>
      </div>
    </div>
  </div>
</section>
@endsection
@section('pagescripts')
<script>
  $(document).ready(function () {
      var curriculum_id = '{{ $selcurriculum }}';
      $(".loader").show();
      setTopics(curriculum_id);
  });
  
  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);
              $(".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('subject/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 }}';
      setTopics(curriculum_id);
  
  });
  
  $('#search').keyup(function (e) {
      str = $('#search').val();
      if (str.length == 0) {
          var curriculum_id = '{{ $selcurriculum  }}';
          setTopics(curriculum_id);
      } else if(e.which == 13) {
          var curriculum_id = '{{ $selcurriculum }}';
          setTopics(curriculum_id);
      }
  });
  
  
  function gototop(id) {
      var scrollPos = $("#topic-" + id).offset().top;
      console.log(scrollPos);
      $(window).scrollTop(scrollPos - 350);
  }
  
</script>
@endsection