@extends('user.app')
@section('head')
    
@endsection
@section('content')
    <div class="container-fluid ">
        <div class="container padding-top services">
            <h3 class="block-title text-center">Все о вредителях</h3>
            <div class="tabs">
              <ul class="tabs__caption row">
                  @foreach ($categories as $category)
                      <li @if($loop->first) class="active" @endif  data-id='{{$category->id}}'>{{$category->name}}</li>
                  @endforeach
              </ul>
              <br>
              @foreach ($categories as $c)
                  <div class="tabs__content  @if($loop->first) active @endif ">
                    <div class="row flex-wrap flex-center">
                        @foreach ($c->blogs as $blog)
                          <div class="column column-33">
                              <a class="text-decoration-none" href="{{ route('blogi',['link' => $blog->link, 'type' => 1]) }}">
                                  <img class='responsive-img lazy' data-src="{{ asset('images/blogs') }}/{{$blog->preview_image}}" alt="">
                                  <p class="flex space-between"><span>{{$blog->name}}</span> </p>
                              </a>
                          </div>
                        @endforeach
                    </div>  
                  </div>
              @endforeach
              <br>
            </div>
        </div>
    </div>
@endsection
@section('foot')
    <script>
        (function($) {
          $(function() {
         
            $('ul.tabs__caption').each(function(i) {
              var storage = localStorage.getItem('tab' + i);
              if (storage) {
                $(this).find('li').removeClass('active').eq(storage).addClass('active')
                .closest('div.tabs').find('div.tabs__content').removeClass('active').eq(storage).addClass('active');
              }
            });
         
            $('ul.tabs__caption').on('click', 'li:not(.active)', function() {
              $(this)
              .addClass('active').siblings().removeClass('active')
              .closest('div.tabs').find('div.tabs__content').removeClass('active').eq($(this).index()).addClass('active');
              var ulIndex = $('ul.tabs__caption').index($(this).parents('ul.tabs__caption'));
              localStorage.removeItem('tab' + ulIndex);
              localStorage.setItem('tab' + ulIndex, $(this).index());
            });
         
          });
        })(jQuery);
    </script>
@endsection