@extends('frontend.layouts.app')

@section('content')


@php 
    $term = App\Models\Term::first();
@endphp


@if( isset( $term->image ) )

 @php
  $bannerImage = asset('site-settings/'.$term->image);
 @endphp
<style type="text/css">
  .breadcrumb-section
  {
    background-image:url("{{$bannerImage}}");
  }
</style>
@endif

<!-- Banner Section Start -->
<div class="breadcrumb-section">
  <div class="container">
    <div class="breadcrumb__inner">
      <div class="breadcrumb-title">
        <h2>Welcome to Buzz User Guide</h2>
        <h1>What can we help you find?</h1>
      </div>
      <form action="{{\Request::url()}}">
        <div id="custom-search-input">
          <div class="input-group">
            <input name="search" type="text" class="search-query form-control" placeholder="Search" value="{{$_GET['search'] ?? ''}}" />
            <span class="input-group-btn">
              <button type="submit">
                <i class="fa fa-search"></i>
              </button>
            </span>
          </div>
        </div>
      </form>
    </div>
  </div>
</div>

<!-- User Guide Section Start -->
<div class="user-guide">
   <div class="container">
      <div class="row">
         <div class="col-md-4">
            <div id="sidebar">
               <div class="sidebar__inner">
                @if(isset($guides) && count($guides)>0)
                  <aside class="left-sidebar">
                    <h3 class="sidebar-titles">User Guide</h3>
                    <ul class="guide-lists sidebar-nav">
                      @foreach($guides as $guide)
                        <li><a href="#{{$guide->slug}}">{{$guide->question}}</a></li>
                      @endforeach
                    </ul>
                  </aside>
                @endif
               </div>
            </div>
         </div>
         <div class="col-md-8">
            <main>
               @if(isset($guides) && count($guides)>0)
                  
                  @foreach($guides as $guide)
                     <section class="user-guide__inner" id="{{$guide->slug}}">
                        {!!$guide->answer!!}
                     </section>
                  @endforeach

                @else

                    <p>No search Result!</p>

               @endif
             
            </main>
         </div>
      </div>
   </div>
</div>
<!-- User Guide Section End -->


@endsection

@section('scripts')

<script src="{{asset('frontend/js/jquery.pagenav.js')}}"></script>

<script>
$(".sidebar-nav li a").click(function() {
    $(this).parent().addClass('active').siblings().removeClass('active');
});
</script>
<script>
$(document).ready(function() {
    $('.sidebar-nav li a').pageNav({ 'scroll_shift': $('.sidebar-nav li').outerHeight() + 40 });
});
</script>

<script src="{{asset('frontend/js/sticky-sidebar.js')}}"></script>

<script type="text/javascript">

var stickySidebar = new StickySidebar('#sidebar', {
  topSpacing: 20,
  bottomSpacing: 20,
  containerSelector: '.container',
  innerWrapperSelector: '.sidebar__inner'
});

</script>

<script type="text/javascript">

let mainNavLinks = document.querySelectorAll("ul.sidebar-nav li a");
let mainSections = document.querySelectorAll("main section");

let lastId;
let cur = [];
window.addEventListener("scroll", event => {
  let fromTop = window.scrollY;

  mainNavLinks.forEach(link => {
    let section = document.querySelector(link.hash);

    if (
      section.offsetTop <= fromTop &&
      section.offsetTop + section.offsetHeight > fromTop
    ) {
      link.classList.add("current");
    } else {
      link.classList.remove("current");
    }
  });
});

</script>

@endsection