@extends('front.app')
@section('meta')
    <x-meta :meta="$meta"/>
@stop

@section('container')
    <div class="page-content">
        @if($slider->isNotEmpty())
            <section class="hero-slider">
                <div class="swiper">
                    <div class="swiper-wrapper">
                        @foreach($slider as $slide)
                            <a {{ $slide->link ? 'href='.$slide->link : '' }} class="swiper-slide">
                                <picture>
                                    <source srcset="{{$slide->image_mobile}}" media="(max-width: 768px)">
                                    <img src="{{$slide->image}}" alt="{{ $slide->name}}">
                                </picture>
                            </a>
                        @endforeach
                    </div>
                    <div class="hero-slider-pagination"></div>
                </div>
            </section>
        @endif

        @if($icons && $icons->isNotEmpty())
            <section class="advantages gray-bk">
                <div class="container">
                    <div class="swiper">
                        <div class="swiper-wrapper">
                            @foreach($icons as $icon)
                                <div class="swiper-slide">
                                <div class="advantages-item">
                                    <div class="advantages-icon">
                                        <img src="{{$icon->image}}" alt="{{$icon->name}}">
                                    </div>
                                    <div class="advantages-desc">
                                        <p>{{$icon->name}}</p>
                                    </div>
                                </div>
                            </div>
                            @endforeach
                        </div>
                    </div>
                </div>
            </section>
        @endif

        @if($new_goods->isNotEmpty())
            <section class="section goods-slider">
                <div class="container">
                    <h2>{{ShowLabelById(40)}}</h2>
                    <div class="slider-wrapper">
                        <div class="swiper">
                            <div class="swiper-wrapper">
                                @foreach($new_goods as $goods_item)
                                <div class="swiper-slide">
                                    @include('front.templates.goods-template')
                                </div>
                                @endforeach
                            </div>
                        </div>
                        <button type="button" class="slider-nav slider-nav--prev">
                            <svg>
                                <use xlink:href="{{asset('front-assets/svg/sprite.svg#slider-arrow')}}"></use>
                            </svg>
                        </button>
                        <button type="button" class="slider-nav slider-nav--next">
                            <svg>
                                <use xlink:href="{{asset('front-assets/svg/sprite.svg#slider-arrow')}}"></use>
                            </svg>
                        </button>
                    </div>
                </div>
            </section>
        @endif

        @if($popular_categories->isNotEmpty())
            <section class="section popular-categories gray-bk">
        <div class="container">
            <h2>{{ShowLabelById(41)}}</h2>
            <div class="popular-categories-list">
                @foreach($popular_categories as $category)
                    <a href="{{$category->href}}" class="popular-categories-item">
                      <span class="popular-categories-img">
                        <img src="{{$category->image_s}}" alt="{{$category->name}}">
                      </span>
                    <h3>{{$category->name}}</h3>
                </a>
                @endforeach
            </div>
        </div>
    </section>
        @endif

         @if($promo_goods->isNotEmpty())
            <section class="section goods-slider">
            <div class="container">
                <h2>{{ShowLabelById(211)}}</h2>
                <div class="slider-wrapper">
                    <div class="swiper">
                        <div class="swiper-wrapper">
                            @foreach($promo_goods as $goods_item)
                                <div class="swiper-slide">
                                    @include('front.templates.goods-template')
                                </div>
                            @endforeach
                        </div>
                    </div>
                    <button type="button" class="slider-nav slider-nav--prev">
                        <svg>
                            <use xlink:href="{{asset('front-assets/svg/sprite.svg#slider-arrow')}}"></use>
                        </svg>
                    </button>
                    <button type="button" class="slider-nav slider-nav--next">
                        <svg>
                            <use xlink:href="{{asset('front-assets/svg/sprite.svg#slider-arrow')}}"></use>
                        </svg>
                    </button>
                </div>
            </div>
        </section>
         @endif

         @if($banners && $banners->isNotEmpty())
            <div class="banners">
                <div class="container">
                    <div class="slider-wrapper">
                        <div class="swiper">
                            <div class="swiper-wrapper">
                                @foreach($banners as $banner)
                                    @if($banner->link)
                                        <a href="{{$banner->link}}" class="swiper-slide banners-item">
                                            <img src="{{$banner->image}}" alt="{{$banner->name}}">
                                        </a>
                                    @else
                                        <div class="swiper-slide banners-item">
                                            <img src="{{$banner->image}}" alt="{{$banner->name}}">
                                        </div>
                                    @endif
                                @endforeach
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        @endif

        @if(isset($viewed_goods) && $viewed_goods->isNotEmpty())
            <section class="section goods-slider">
                <div class="container">
                    <h2>{{ShowLabelById(42)}}</h2>
                    <div class="slider-wrapper">
                        <div class="swiper">
                            <div class="swiper-wrapper">
                                @foreach($viewed_goods as $goods_item)
                                    <div class="swiper-slide">
                                        @include('front.templates.goods-template')
                                    </div>
                                @endforeach
                            </div>
                        </div>
                        <button type="button" class="slider-nav slider-nav--prev">
                            <svg>
                                <use xlink:href="{{asset('front-assets/svg/sprite.svg#slider-arrow')}}"></use>
                            </svg>
                        </button>
                        <button type="button" class="slider-nav slider-nav--next">
                            <svg>
                                <use xlink:href="{{asset('front-assets/svg/sprite.svg#slider-arrow')}}"></use>
                            </svg>
                        </button>
                    </div>
                </div>
            </section>
        @endif

         @if($brands->isNotEmpty())
             <section class="section brands {{isset($viewed_goods) && $viewed_goods->isNotEmpty() ? 'pt-0':''}}">
                <div class="container">
                    <div class="section-head">
                        <h2>{{ShowLabelById(43)}}</h2>
                        <div class="section-link">
                            <a href="{{route('brands-list')}}">
                                <span>{{ShowLabelById(236)}}</span>
                                <img src="{{asset('front-assets/img/icons/arrow-right.svg')}}" alt="to brands page">
                            </a>
                        </div>
                    </div>

                    <div class="slider-wrapper">
                        <div class="swiper">
                            <div class="swiper-wrapper">
                                @foreach($brands as $brand)
                                    <div class="swiper-slide">
                                        <a href="{{$brand->href}}">
                                            <img src="{{$brand->image}}" alt="{{$brand->name}}">
                                        </a>
                                    </div>
                                @endforeach
                            </div>
                        </div>
                        <button type="button" class="slider-nav slider-nav--prev">
                            <svg>
                                <use xlink:href="{{asset('front-assets/svg/sprite.svg#slider-arrow')}}"></use>
                            </svg>
                        </button>
                        <button type="button" class="slider-nav slider-nav--next">
                            <svg>
                                <use xlink:href="{{asset('front-assets/svg/sprite.svg#slider-arrow')}}"></use>
                            </svg>
                        </button>
                    </div>
                </div>
            </section>
         @endif

        <section class="about">
            <div class="container">
                <h2>{{$main_page->short_descr}}</h2>
                <div class="about-text common-text">
                 {!! $main_page->body !!}
                </div>
                <div class="about-more">
                    <button type="button" class="about-more-btn" data-more="{{ShowLabelById(44)}}" data-less="{{ShowLabelById(45)}}">{{ShowLabelById(44)}}</button>
                </div>
            </div>
        </section>

    </div>
@stop