@extends('user.app')
@section('title', "Наши услуги - " . $setting->meta_title)

@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 ($services as $service)
                            @if ($service->category_service_id==$c->id&&$service->region_id=='9')
                                <div class="column column-33">
                                    <a class="text-decoration-none" href="{{ route('usluga',['link' => $service->link, 'type' => 1]) }}">
                                        <img class='responsive-img lazy' data-src="{{ asset('images/services') }}/{{$service->preview_image}}" alt="">
                                        
                                        <p class="flex space-between"><span>{{$service->name}}</span> <span>от {{$service->price}} руб.</span></p>
                                    </a>
                                </div>
                            @endif
                        @endforeach
                    </div>  
                  </div>
              @endforeach
              <br>
            </div>

            {{-- </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