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

@section('styles')
    @foreach($slider as $one_slide)
        <link rel="preload" href="{{ $one_slide->img }}" as="image"
              type="image/{{ Str::of($one_slide->img)->explode('.')->last() }}"/>
    @endforeach

    @foreach($goods_subjects_for_main as $one_subject)
        <link rel="preload" href="{{ $one_subject->image }}" as="image"
              type="image/{{ Str::of($one_subject->image)->explode('.')->last() }}"/>
    @endforeach
@stop

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

@section('container')
    <div class="page-content">

        @if(!empty($slider) && count($slider))
            <section class="hero">
                <div class="container">
                    <div class="row no-wrap">
                        <div class="pl-300 position-relative main-pagination-parent w-980">
                            <div class="swiper-container main-swippy">
                                <div class="swiper-wrapper">
                                    @foreach($slider as $one_slide)
                                        <div class="swiper-slide">
                                            <a {{ $one_slide->link ? 'href='.$one_slide->link : '' }} target="_blank">
                                            <img
                                                src="{{ $one_slide->img }}" alt="{{ $one_slide->name }}"
                                                width="1050" height="520"
                                                class="lazyload"
                                                {{-- @if (!$loop->first)loading="lazy"@endif --}}>
                                            </a>
                                        </div>
                                    @endforeach
                                </div>
                                <div class="swiper-button-prev"></div>
                                <div class="swiper-button-next"></div>
                            </div>
                            <div class="swiper-pagination"></div>
                        </div>
                    </div>
                </div>
            </section>
            <script>
                new Swiper(".main-swippy", {
                    slidesPerView: 1,
                    spaceBetween: 15,
                    loop: true,
                    speed: 1500,
                    autoplay: {
                        delay: 3e3
                    },
                    pagination: {
                        el: ".hero .swiper-pagination",
                        clickable: !0
                    },
                    navigation: {
                        nextEl: ".main-swippy .swiper-button-next",
                        prevEl: ".main-swippy .swiper-button-prev"
                    }
                });
            </script>
        @endif

        @if(!empty($goods_subjects_for_main) && count($goods_subjects_for_main))
                <section class="list-mid-catalog-wrapper">
                    <div class="container">
                        <div class="list-mid-catalog">
                            <div class="title position-relative">
                                <h1 class="title-h1">{{ ShowLabelById(28) }}</h1>
                                <div class="nav-ttl">
                                    <div class="prev catalog-slider-prev">
                                        <img src="{{ asset('front-assets/img/icons/new-left-arrow.svg') }}" width="12"
                                             height="12" alt="Arrow left">
                                    </div>
                                    <div class="next catalog-slider-next">
                                        <img src="{{ asset('front-assets/img/icons/new-right-arrow.svg') }}" width="12"
                                             height="12" alt="Arrow right">
                                    </div>
                                </div>
                            </div>
                            <div class="list-second catalog-slider">
                                <div class="swiper">
                                    <div class="swiper-wrapper">
                                        @foreach($goods_subjects_for_main as $one_subject)
                                            <div class="swiper-slide">
                                                <a href="{{ $one_subject->is_link ? $one_subject->link : route('catalog', $one_subject->alias) }}"
                                                   class="cat-slider-block">
                                                    <span class="image-block">
                                                        {{-- <img class="lazyload" data-src="{{ $one_subject->image }}" src="{{ asset('front-assets/img/lazy-s.png') }}" src="{{ $one_subject->image }}" alt="{{ $one_subject->alias }}"> --}}
                                                        <img src="{{ $one_subject->image }}" alt="{{ $one_subject->alias }}"
                                                             loading="lazy">
                                                    </span>
                                                    <span class="name-item">{{ $one_subject->name }}</span>
                                                </a>
                                            </div>
                                        @endforeach
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </section>
                <script>
                    new Swiper(".catalog-slider .swiper", {
                        slidesPerView: 3,
                        spaceBetween: 10,
                        resistanceRatio: 0,
                        grid: {
                            rows: 3
                        },
                        navigation: {
                            nextEl: ".catalog-slider-next",
                            prevEl: ".catalog-slider-prev"
                        },
                        breakpoints: {
                            768: {
                                slidesPerView: 4,
                                grid: {
                                    rows: 3
                                }
                            },
                            1001: {
                                slidesPerView: 7,
                                grid: {
                                    rows: 3
                                }
                            }
                        }
                    });
                </script>
            @endif

        @if($promo_items && $promo_items->children->isNotEmpty())
                <section class="discounts-slider">
                    <div class="container">
                        <div class="ttl">
                            <a href="{{ route('promo') }}" class="title-h1">{{ ShowLabelById(156) }}</a>
                            <a href="{{ route('promo') }}" class="view-all">{{ ShowLabelById(157) }}</a>
                            <div class="nav-ttl">
                                <div class="prev sale-prev">
                                    <img src="{{ asset('front-assets/img/icons/new-left-arrow.svg') }}" width="12"
                                         height="12" alt="Arrow left">
                                </div>
                                <div class="next sale-next">
                                    <img src="{{ asset('front-assets/img/icons/new-right-arrow.svg') }}" width="12"
                                         height="12" alt="Arrow right">
                                </div>
                            </div>
                        </div>
                        <div class="swiper-container">
                            <div class="swiper-wrapper">
                                @foreach($promo_items->children as $one_promo_item)
                                    <div class="swiper-slide">
                                        <a{{ $one_promo_item->link ? ' href='.$one_promo_item->link : '' }}>
                                            @if(LANG == 'ro')
                                                <img src="{{ $one_promo_item->img }}" alt="{{ $one_promo_item->name }}">
                                            @else
                                                <img src="{{ $one_promo_item->img_desc }}" alt="{{ $one_promo_item->name }}">
                                            @endif
                                        </a>
                                    </div>
                                @endforeach
                            </div>
                        </div>
                    </div>
                </section>
            @endif

        {{--@if(!empty($goods_subjects) && count($goods_subjects))
            <section class="mobile-categorys">
                <div class="container">
                    <div class="row">
                        @foreach($goods_subjects as $one_subject_l1)
                            <div class="col-4">
                                <div class="cat-bloky">
                                    <a href="{{ route('catalog', $one_subject_l1->alias) }}">
                                        <span class="image-mobile-cat"
                                              style="background-image: url({{ $one_subject_l1->image }})"></span>
                                    </a>
                                    <a href="{{ route('catalog', $one_subject_l1->alias) }}">
                                        <h2>{{ $one_subject_l1->name }}</h2>
                                    </a>
                                </div>
                            </div>
                        @endforeach
                    </div>
                </div>
            </section>
        @endif--}}

        @if(!empty($sale_goods) && count($sale_goods))
            <section class="goods-slider goods-slider-promo">
                <div class="container">
                    <div class="goods-slider-inner">
                        <div class="ttl">
                            <a href="{{ route('promo') }}" class="title-h1">{{ ShowLabelById(78) }}</a>
                            <a href="{{ route('promo') }}" class="view-all">{{ ShowLabelById(157) }}</a>
                            <div class="nav-ttl">
                                <div class="prev sale-prev">
                                    <img src="{{ asset('front-assets/img/icons/new-left-arrow.svg') }}" width="12"
                                         height="12" alt="Arrow left">
                                </div>
                                <div class="next sale-next">
                                    <img src="{{ asset('front-assets/img/icons/new-right-arrow.svg') }}" width="12"
                                         height="12" alt="Arrow right">
                                </div>
                            </div>
                        </div>
                        <div class="slider">
                            <div class="swiper-container slider-main">
                                <div class="swiper-wrapper">
                                    @foreach($sale_goods as $one_goods)
                                        @include('front.templates.goods-template', ['slider' => 1])
                                    @endforeach
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </section>
        @endif

        @if(!empty($brands) && count($brands))
            <section class="brands">
                <div class="container">
                    <div class="title-h1">
                        <span>{{ ShowLabelById(9) }}</span>
                        <div class="nav-ttl">
                            <div class="prev brands-prev">
                                <img src="{{ asset('front-assets/img/icons/new-left-arrow.svg') }}" width="12"
                                     height="12" alt="Arrow left">
                            </div>
                            <div class="next brands-next">
                                <img src="{{ asset('front-assets/img/icons/new-right-arrow.svg') }}"
                                     width="12"
                                     height="12" alt="Arrow right">
                            </div>
                        </div>
                    </div>
                    <div class="swiper-container swiper-brands">
                        <div class="swiper-wrapper">
                            @foreach($brands as $one_brand)
                                @if(isset($one_brand->oImage) && isset($one_brand->oImage->img) && ($one_brand->oImage->img_width > 0 && $one_brand->oImage->img_height > 0))
                                    <div class="swiper-slide">
                                        <a href="{{ route('brand', $one_brand->alias) }}"
                                           aria-label="{{ ShowLabelById(9) }} {{ $one_brand->name }}"
                                           title="{{$one_brand->name}}">
                                            <img class="lazyload" data-src="{{ $one_brand->img }}"
                                                 src="{{ asset('front-assets/img/lazy-s.png') }}"
                                                 {{--src="{{ $one_brand->img }}"--}} alt="{{ $one_brand->name }}"
                                                 width="{{$one_brand->oImage->img_width}}"
                                                 height="{{$one_brand->oImage->img_height}}"
                                                 title="{{$one_brand->name}}">
                                        </a>
                                    </div>
                                @endif
                            @endforeach
                        </div>
                    </div>
                </div>
            </section>
        @endif

        @if($news && $news->infoItems->isNotEmpty())
            <section class="blog">
                <div class="container">
                    <div class="blog-inner">
                        <div class="title-h1">
                            <a href="{{ route('news') }}"><span
                                    style="text-decoration: underline;">{{ ShowLabelById(119) }}</span></a>
                            <div class="nav-ttl">
                                <div class="prev sale-prev">
                                    <img src="{{ asset('front-assets/img/icons/new-left-arrow.svg') }}" width="12"
                                         height="12" alt="Arrow left">
                                </div>
                                <div class="next sale-next">
                                    <img src="{{ asset('front-assets/img/icons/new-right-arrow.svg') }}" width="12"
                                         height="12" alt="Allow right">
                                </div>
                            </div>
                        </div>
                        <div class="swiper-container">
                            <div class="swiper-wrapper">
                                @foreach($news->infoItems as $one_news)
                                    <div class="swiper-slide">
                                        <div class="blog-item">
                                            <a href="{{ route('news', $one_news->alias) }}">
                                                <img class="lazyload"
                                                     src="{{ asset('front-assets/img/lazy-news.png') }}"
                                                     {{--src="{{ $one_news->img_s }}"--}} data-src="{{ $one_news->img_s }}"
                                                     alt="{{ $one_news->name }}">
                                            </a>
                                            <div class="blog-data">
                                                <div class="h2">
                                                    <a href="{{ route('news', $one_news->alias) }}">{{ $one_news->name }}</a>
                                                </div>
                                                <div class="blog-desc">
                                                    <p>{{ $one_news->descr }}</p>
                                                </div>
                                                <div class="date-block">
                                                    <img src="{{ asset('front-assets/img/icons/time.svg') }}"
                                                         width="18"
                                                         height="18"
                                                         alt="Time">
                                                    {{ getDefaultDateFormatWithLang($one_news->add_date, LANG) }}
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                @endforeach
                            </div>
                        </div>
                    </div>
                </div>
            </section>
        @endif

        @if($meta_main_page && $meta_main_page->body)
            <section class="with-more-posts">
                <div class="container">
                    <div class="block-text">
                        {!! $meta_main_page->body !!}
                    </div>
                    <div class="with-more-posts-link">
                        <a href="javascript:;" class="more-posts more-posts--toggle">
                            <span>{{ ShowLabelById(11) }}</span>
                            <span>{{ ShowLabelById(12) }}</span>
                        </a>
                    </div>
                </div>
            </section>
        @endif

    </div>
@stop