@extends('front.app',['attributes'=>'class=homepage'])

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

@section('container')

    <div class="page-content">
        @if($headBlock)
            <section class="main-hero section-out mt-0">
                <div class="main-hero-bg">
                    <img src="{{$headBlock->image}}" alt="{{$headBlock->h1}}">
                </div>
                <div class="main-hero-content">
                    <div class="container">
                        <h1>{{$headBlock->h1}}</h1>
                        <div class="main-hero-desc">
                            <p>{{$headBlock->shortDescription}}</p>
                        </div>
                        <div class="main-hero-links">
                            {!! $headBlock->body !!}
                        </div>
                    </div>
                </div>
            </section>
        @endif

        @if($newProducts->isNotEmpty())
            <section class="section goods-slider">
                <div class="container">
                    <div class="slider-head">
                        <h2>{{ShowLabelById(12)}}</h2>
                        @if($newProducts->count() > 1)
                            <div class="slider-navs">
                                <button type="button" class="slider-nav slider-nav--prev">
                                    <img src="{{icon('arrow-right.svg')}}" alt="arrow right">
                                </button>
                                <button type="button" class="slider-nav slider-nav--next">
                                    <img src="{{icon('arrow-right.svg')}}" alt="arrow right">
                                </button>
                            </div>
                        @endif
                    </div>
                    <div class="slider-wrapper">
                        <div class="swiper">
                            <div class="swiper-wrapper">
                                @foreach($newProducts as $product)
                                        @foreach($product->gender_category as $gender)
                                            <div class="swiper-slide">
                                                @include('front.templates.goods-template',['imageSize'=>'M','gender'=>$gender])
                                            </div>
                                        @endforeach
                                @endforeach
                            </div>
                        </div>
                    </div>
                    <div class="section-link">
                        <a href="{{route('catalog.new-products')}}" class="button">
                            {{ShowLabelById(13)}}
                        </a>
                    </div>
                </div>
            </section>
        @endif


        @if($banners->isNotEmpty())
            <section class="section double-same">
                <div class="double-same-inner">
                    @foreach($banners as $banner)
                        <div role="button" class="double-same-item">
                            <div class="double-same-img">
                                <img src="{{$banner->image}}" alt="{{$banner->name}}">
                            </div>
                            <div class="double-same-content">
                                <h2>{{$banner->name}}</h2>
                                <div class="double-same-list">
                                    {!! $banner->body !!}
                                </div>
                            </div>
                        </div>
                    @endforeach
                </div>
            </section>
        @endif

        @if($brands->isNotEmpty())
            <section class="section brands">
                <div class="container">
                    <div class="slider-head">
                        <h2>{{ShowLabelById(14)}}</h2>
                        @if($brands->count() > 1)
                            <div class="slider-navs">
                                <button type="button" class="slider-nav slider-nav--prev">
                                    <img src="{{icon('arrow-right.svg')}}" alt="">
                                </button>
                                <button type="button" class="slider-nav slider-nav--next">
                                    <img src="{{icon('arrow-right.svg')}}" alt="">
                                </button>
                            </div>
                        @endif
                    </div>
                    <div class="slider-wrapper">
                        <div class="swiper">
                            <div class="swiper-wrapper">
                                @foreach($brands as $brand)
                                    <div class="swiper-slide">
                                        @include('front.templates.brand.brand-card')
                                    </div>
                                @endforeach
                            </div>
                        </div>
                    </div>
                    <div class="section-link">
                        <a href="{{route('brands.catalog')}}" class="button">{{ShowLabelById(15)}}</a>
                    </div>
                </div>
            </section>
        @endif


        @if($mainBanner)
            <section class="section-out main-banner">
                <div class="main-banner-img">
                    <picture>
                        <source srcset="{{$mainBanner->imageMobile}}" media="(max-width: 768px)">
                        <img src="{{$mainBanner->image}}" alt="{{$mainBanner->name}}">
                    </picture>
                </div>
                <div class="main-banner-content">
                    <div class="container">
                        <h2 class="h1">{{$mainBanner->h1}}</h2>
                        <div class="main-banner-desc">
                            <p>{{$mainBanner->shortDescription}}</p>
                        </div>
                        <div class="main-banner-list">
                            {!! $mainBanner->body !!}
                        </div>
                    </div>
                </div>
            </section>
        @endif

        @if($newsSection && $posts->isNotEmpty())
            <section class="section news">
                <div class="container">
                    <div class="slider-head">
                        <h2>{{$newsSection->name}}</h2>
                        @if($posts->count() > 1)
                            <div class="slider-navs">
                                <button type="button" class="slider-nav slider-nav--prev">
                                    <img src="{{icon('arrow-right.svg')}}" alt="arrow-right">
                                </button>
                                <button type="button" class="slider-nav slider-nav--next">
                                    <img src="{{icon('arrow-right.svg')}}" alt="arrow-right">
                                </button>
                            </div>
                        @endif
                    </div>

                    <div class="slider-wrapper">
                        <div class="swiper">
                            <div class="swiper-wrapper">
                                @foreach($posts as $post)
                                    <div class="swiper-slide">
                                        @include('front.templates.post-card')
                                    </div>
                                @endforeach
                            </div>
                        </div>
                    </div>

                    <div class="section-link">
                        <a href="{{route('posts.catalog')}}" class="button">{{ShowLabelById(15)}}</a>
                    </div>
                </div>
            </section>
        @endif


    </div>
@stop